eep_page/src/views/user_manage_org/index.vue

<template>
  <div class="user-manage">
    <div class="user-manage-list">
      <div class="btn-box">
        <el-button class="add-btn" type="primary" size="small" icon="el-icon-plus" @click="updateOrg('')"
          >添加用户</el-button
        >
        <el-button class="add-btn" type="primary" size="small" @click="updateOrg('')">批量导入用户</el-button>
      </div>

      <el-table :data="list">
        <el-table-column
          type="index"
          label="序号"
          width="60"
          align="center"
          :index="(cur_page - 1) * page_capacity + 1"
        />
        <el-table-column prop="user_name" label="真实姓名" align="center" />
        <el-table-column prop="real_name" label="用户名" align="center" />
        <el-table-column prop="email" label="邮箱" align="center" width="170" />
        <el-table-column prop="is_org_manager" label="机构管理员" align="center">
          <template slot-scope="{ row }">
            <i class="el-icon-check" v-if="row.is_org_manager === 'true'"></i>
          </template>
        </el-table-column>
        <el-table-column prop="register_time" label="注册时间" align="center" width="170" />
        <el-table-column prop="is_audited" label="已审核" align="center"
          ><template slot-scope="{ row }">
            <i class="el-icon-check" v-if="row.is_audited === 'true'"></i>
          </template>
        </el-table-column>
        <el-table-column prop="audit_time" label="审核时间" align="center" width="170" />

        <el-table-column prop="operation" label="操作" fixed="right" width="200" align="center">
          <template slot-scope="{ row }">
            <span class="link" @click="setOrgManager(row)">{{
              row.is_audited === 'true' ? '审核拒绝' : '审核通过'
            }}</span>
            <span class="link" @click="setPower(row)">设置权限</span>
          </template>
        </el-table-column>
      </el-table>

      <PaginationPage ref="pagination" :total="total" @getList="queryOrgList" />
    </div>
    <el-dialog
      :visible.sync="orgAddFlag"
      width="300px"
      append-to-body
      :show-close="true"
      :title="org_Info.name ? '编辑机构' : '创建机构'"
    >
      <el-form ref="formDialog" :model="org_Info" :rules="rules" inline>
        <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>
      <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 { queryOrgUserList } from '@/api/list.js';
import { createOrg } from '@/api/org.js';

export default {
  name: 'UserManageOrg',
  components: {
    PaginationPage,
  },
  data() {
    return {
      list: [],
      total: 0,
      page_capacity: 10,
      cur_page: 1,
      org_Info: {
        name: '',
      },
      orgAddFlag: false,
      rules: {
        name: [{ required: true, trigger: 'blur', message: '请输入名称' }],
      },
      loading: false,
    };
  },
  methods: {
    queryOrgList(data) {
      queryOrgUserList(data).then(({ total_count, user_list }) => {
        this.total = total_count;
        this.list = user_list;
        this.page_capacity = data.page_capacity;
        this.cur_page = data.cur_page;
      });
    },
    /**
     * 修改机构
     * @param {string} id - 项目ID
     */
    updateOrg(row) {
      if (row) {
        this.org_Info = {
          name: row.name,
        };
      } else {
        this.org_Info = {
          name: '',
        };
      }
      // this.orgAddFlag = true;
    },
    setPower(row) {},
    setOrgManager(row) {},
    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.queryOrgList({ cur_page: _this.cur_page, page_capacity: _this.page_capacity });
                _this.$message({
                  type: 'success',
                  message: '创建成功!',
                });
              }
            })
            .catch(() => {
              this.loading = false;
            });
        }
      });
    },
  },
};
</script>

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

.user-manage {
  @include page-base;

  .btn-box {
    display: flex;
  }

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

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

    .el-table {
      flex: 1;
    }
  }
}
</style>