eep_page/src/views/org_manage/index.vue

<template>
  <div class="org-manage">
    <div class="org-manage-list">
      <el-form id="query-form" inline>
        <el-form-item prop="name" label="名称">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryList">查询</el-button>
          <el-button class="add-btn" type="primary" size="small" icon="el-icon-plus" @click="updateOrg('')">
            创建机构
          </el-button>
        </el-form-item>
      </el-form>
      <el-table v-if="tableHeight" :data="list" :max-height="tableHeight + 'px'">
        <el-table-column
          type="index"
          label="序号"
          width="60"
          align="center"
          :index="(form.cur_page - 1) * form.page_capacity + 1"
          class-name="index-column"
          header-align="center"
        />
        <el-table-column prop="name" label="名称" align="center" header-align="center" />
        <el-table-column prop="user_count_max" label="最大用户量" align="center" width="120" header-align="center" />
        <el-table-column prop="user_count" label="已注册用户数" align="center" width="120" header-align="center" />
        <el-table-column prop="user_count_stop" label="已停用用户数" align="center" width="120" header-align="center" />
        <el-table-column prop="project_count_max" label="最大项目量" align="center" width="120" header-align="center" />
        <el-table-column prop="project_count" label="已创建项目数" align="center" width="120" header-align="center" />
        <el-table-column prop="org_manager_name_desc" label="机构管理员" align="center" header-align="center" />
        <el-table-column prop="create_time" label="创建时间" align="center" width="180" header-align="center" />

        <el-table-column prop="operation" label="操作" fixed="right" width="200" align="center" header-align="center">
          <template slot-scope="{ row }">
            <span class="link" @click="setOrgManager(row.id)">机构信息管理</span>
            <span class="link danger" @click="deleteOrg(row.id)">删除</span>
          </template>
        </el-table-column>
      </el-table>

      <PaginationPage ref="pagination" :total="total" @getList="queryOrgList" />
    </div>
    <el-dialog
      :visible.sync="orgAddFlag"
      width="500px"
      append-to-body
      :show-close="true"
      title="创建机构"
      :close-on-click-modal="false"
    >
      <el-form ref="formDialog" :model="org_Info" :rules="rules" label-width="130px">
        <el-form-item class="label-input" label="名称" prop="name">
          <el-input
            v-model="org_Info.name"
            autocomplete="off"
            name="name"
            @blur="org_Info.name = org_Info.name.trim()"
          />
        </el-form-item>
        <el-form-item class="label-input" label="最大用户量" prop="user_count_max">
          <el-input-number v-model="org_Info.user_count_max" :min="0" :step="10" />
        </el-form-item>
        <el-form-item class="label-input" label="最大项目量" prop="project_count_max">
          <el-input-number v-model="org_Info.project_count_max" :min="0" :step="10" />
        </el-form-item>
        <el-form-item class="label-input" label="教材编辑使用期限" prop="use_end_date_book_edit">
          <el-date-picker v-model="org_Info.use_end_date_book_edit" value-format="yyyy-MM-dd" />
        </el-form-item>
        <el-form-item class="label-input" label="教材仓库使用期限" prop="use_end_date_book_store">
          <el-date-picker v-model="org_Info.use_end_date_book_store" value-format="yyyy-MM-dd" />
        </el-form-item>
        <el-form-item class="label-input" label="备注" prop="memo">
          <el-input v-model="org_Info.memo" autocomplete="off" type="textarea" rows="3" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="orgAddFlag = false">取 消</el-button>
        <el-button :loading="loading" type="primary" @click="submitOrg">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import PaginationPage from '@/components/PaginationPage.vue';

import { queryOrgList } from '@/api/list.js';
import { createOrg } from '@/api/org.js';

export default {
  name: 'OrgManage',
  components: {
    PaginationPage,
  },
  data() {
    return {
      list: [],
      total: 0,
      org_Info: {
        name: '',
        user_count_max: null,
        project_count_max: null,
        use_end_date_book_edit: '',
        use_end_date_book_store: '',
        memo: '',
      },
      orgAddFlag: false,
      rules: {
        name: [{ required: true, trigger: 'blur', message: '请输入名称' }],
      },
      loading: false,
      tableHeight: 0,
      form: {
        name: '',
        page_capacity: 10,
        cur_page: 1,
      },
    };
  },
  mounted() {
    this.tableHeight =
      document.getElementsByClassName('app-container')[0].clientHeight -
      document.getElementById('query-form').clientHeight -
      document.getElementsByClassName('el-pagination')[0].clientHeight -
      10;
  },
  methods: {
    queryOrgList(data) {
      this.form.page_capacity = data.page_capacity;
      this.form.cur_page = data.cur_page;
      queryOrgList(this.form).then(({ total_count, org_list }) => {
        this.total = total_count;
        this.list = org_list;
      });
    },
    /**
     * 修改机构
     * @param {string} id - 项目ID
     */
    updateOrg() {
      this.org_Info = {
        name: '',
        user_count_max: null,
        project_count_max: null,
        use_end_date_book_edit: '',
        use_end_date_book_store: '',
        memo: '',
      };
      this.orgAddFlag = true;
    },
    // 设置机构管理员
    setOrgManager(id) {
      this.$router.push({ path: `/org_manage/org_info/${id}` });
    },
    // 删除机构
    deleteOrg(id) {
      let _this = this;
      _this
        .$confirm('确定要删除此机构吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        .then(function () {
          // transferFilesDelete({ id: id }).then((res) => {
          //   if (res.status === 1) {
          _this.queryOrgList({ cur_page: _this.form.cur_page, page_capacity: _this.form.page_capacity });
          _this.$message({
            type: 'success',
            message: '删除成功!',
          });
          // }
          // });
        })
        .catch(() => {});
    },
    // 新增、编辑机构
    submitOrg() {
      const _this = this;
      _this.$refs.formDialog.validate((valid) => {
        if (valid) {
          this.loading = true;
          createOrg(_this.org_Info)
            .then((res) => {
              if (res.status === 1) {
                _this.loading = false;
                _this.orgAddFlag = false;
                _this.queryOrgList({ cur_page: _this.form.cur_page, page_capacity: _this.form.page_capacity });
                _this.$message({
                  type: 'success',
                  message: '创建成功!',
                });
              }
            })
            .catch(() => {
              this.loading = false;
            });
        }
      });
    },
    queryList() {
      this.queryOrgList({ cur_page: 1, page_capacity: this.form.page_capacity });
    },
  },
};
</script>

<style lang="scss" scoped>
@use '@/styles/mixin.scss' as *;

.org-manage {
  @include page-base;

  .add-btn {
    width: 120px;
    margin-bottom: 5px;
  }

  &-list {
    display: flex;
    flex: 1;
    flex-direction: column;

    .el-table {
      flex: 1;
    }
  }

  :deep .el-form-item--small.el-form-item {
    margin-bottom: 5px;
  }

  #query-form {
    text-align: left;
  }
}
</style>