kd-aiot-frontend/src/views/system/organization/components/org-user-list.vue

<template>
  <div>
    <!-- 数据表格 -->
    <ele-pro-table
      ref="table"
      :columns="columns"
      :datasource="datasource"
      height="calc(100vh - 265px)"
      full-height="calc(100vh - 116px)"
      tool-class="ele-toolbar-form"
      :page-size="pageSize"
      @columns-change="handleColumnChange"
      :cache-key="cacheKeyUrl"
    >
      <!-- 表头工具栏 -->
      <template v-slot:toolbar>
        <org-user-search @search="reload" ref="searchRef">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            class="ele-btn-icon"
            @click="openEdit()"
          >
            添加
          </el-button>
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-upload2"
            plain
            @click="uploadFile"
            >导入</el-button
          >
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-download"
            plain
            @click="exportUsers"
            >导出</el-button
          >
        </org-user-search>
      </template>
      <!-- 角色列 -->
      <template v-slot:roles="{ row }">
        <el-tag
          v-for="item in row.roles"
          :key="item.roleId"
          type="primary"
          size="mini"
          :disable-transitions="true"
        >
          {{ item.roleName }}
        </el-tag>
      </template>

      <template v-slot:name="{ row }">
        <el-link type="primary" :underline="false" @click="openEdit(row, true)">
          {{ row.name }}</el-link
        >
      </template>
      <!-- 状态列 -->
      <!--      <template v-slot:status="{ row }">
        <el-switch
          :active-value="0"
          :inactive-value="1"
          v-model="row.status"
          @change="editStatus(row)"
        />
      </template> -->
      <!-- 操作列 -->
      <template v-slot:action="{ row }">
        <el-link
          type="primary"
          :underline="false"
          icon="el-icon-edit"
          @click="openEdit(row)"
        >
          修改
        </el-link>
        <el-link
          v-if="row.loginName"
          type="primary"
          :underline="false"
          icon="el-icon-unlock"
          @click="toUnBind(row)"
        >
          解绑
        </el-link>
        <el-link
          v-if="!row.loginName"
          type="primary"
          :underline="false"
          icon="el-icon-add"
          @click="addUsers(row)"
        >
          新建账号
        </el-link>
        <el-popconfirm
          class="ele-action"
          title="确定要删除此用户吗？"
          @confirm="remove(row)"
          v-if="!row.loginName"
        >
          <template v-slot:reference>
            <el-link type="danger" :underline="false" icon="el-icon-delete">
              删除
            </el-link>
          </template>
        </el-popconfirm>
      </template>
    </ele-pro-table>
    <!-- 编辑弹窗 -->
    <org-user-edit
      :data="current"
      :visible.sync="showEdit"
      :organization-list="organizationList"
      :institutionList="institutionList"
      :organization-id="organizationId"
      @done="reload"
      ref="userEditRef"
    />
    <addUsers
      :visible.sync="showEdit1"
      @done="reload"
      :data="null"
      ref="userEdit"
      :organizationList="organizationList"
    />
    <importDialog
      :defModule="moudleName"
      ref="importDialogRef"
      @success="reload"
    />
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      @close="dialogVisible=false"
      width="400px"
    >
      <span>是否绑定已有用户？</span>
      <el-radio v-model="radio" label="1">是</el-radio>
      <el-radio v-model="radio" label="2">否</el-radio>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="setUser">确 定</el-button>
      </span>
    </el-dialog>

    <ele-modal
      width="1000px"
      :visible="userShow"
      :close-on-click-modal="false"
      custom-class="ele-dialog-form"
      :maxable="true"
    >
      <UserSearch @search="reload1"></UserSearch>
      <!-- 数据表格 -->
      <ele-pro-table
        ref="table1"
        :columns="columns1"
        :datasource="datasource1"
        :current.sync="userRow"
        highlight-current-row
        row-key="id"
      >
      </ele-pro-table>
      <template v-slot:footer>
        <el-button @click="userShow = false">取消</el-button>
        <el-button type="primary" @click="getUser"> 确认 </el-button>
      </template>
    </ele-modal>
  </div>
</template>

<script>
import tabMixins from '@/mixins/tableColumnsMixin';

import OrgUserSearch from './org-user-search.vue';
import OrgUserEdit from './org-user-edit.vue';
import importDialog from '@/components/upload/import-dialog.vue';
import addUsers from '@/views/system/user/components/user-edit.vue';
import UserSearch from '@/views/system/user/components/user-search.vue';
import {
  getUserPage,
  removePersonnel,
  unbindLoginName
} from '@/api/system/organization';
import { pageUsers, exportUsers } from '@/api/system/user';
export default {
  mixins: [tabMixins],
  components: {
    importDialog,
    OrgUserSearch,
    OrgUserEdit,
    addUsers,
    UserSearch
  },
  props: {
    // 机构id
    organizationId: [Number, String],
    // 全部机构
    organizationList: Array,
    institutionList: Array
  },
  data() {
    return {
      moudleName: 'mainUser',
      showEdit1: false,
      userShow: false,
      userRow: null,
      currentRow: null,
      dialogVisible: false,
      radio: '2',
      // 表格列配置
      columns: [
        {
          columnKey: 'index',
          type: 'index',
          width: 45,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'left'
        },
        {
          prop: 'name',
          label: '姓名',
          slot: 'name',
          sortable: 'custom',
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          prop: 'jobNumber',
          label: '工号',
          sortable: 'custom',
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          prop: 'loginName',
          label: '用户账号',
          sortable: 'custom',
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          prop: 'sex',
          label: '性别',
          sortable: 'custom',
          showOverflowTooltip: true,
          minWidth: 80,
          formatter: (_row, _column, cellValue) => {
            return cellValue == 1 ? '男' : cellValue == 2 ? '女' : '';
          }
        },
        {
          prop: 'status',
          label: '状态',
          align: 'center',
          sortable: 'custom',
          width: 80,
          formatter: (_row, _column, cellValue) => {
            const dom = this.statusOptions.find((item) => {
              return item.value == cellValue;
            });
            return dom ? dom.label : '';
          }
        },
        {
          prop: 'isEnabled',
          align: 'center',
          label: '是否启用',
          showOverflowTooltip: true,
          formatter: (row, column) => {
            return row.isEnabled === 0
              ? '停用'
              : row.isEnabled === 1
              ? '启用'
              : '';
          }
        },
        {
          prop: 'createTime',
          label: '创建时间',
          sortable: 'custom',
          showOverflowTooltip: true,
          minWidth: 110,
          formatter: (_row, _column, cellValue) => {
            return this.$util.toDateString(cellValue);
          }
        },
        {
          columnKey: 'action',
          label: '操作',
          width: 200,
          align: 'left',
          resizable: false,
          slot: 'action',
          showOverflowTooltip: true
        }
      ],
      // 表格列配置
      columns1: [
        {
          columnKey: 'index',
          type: 'index',
          width: 55,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'left',
          label: '序号'
        },
        {
          prop: 'loginName',
          label: '用户账号',
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          prop: 'jobNumber',
          label: '工号',
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          prop: 'name',
          label: '姓名',

          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          prop: 'phone',
          label: '手机号',

          showOverflowTooltip: true,
          minWidth: 110
        },

        {
          columnKey: 'groupRoleList',
          label: '角色',
          showOverflowTooltip: true,
          minWidth: 110,
          formatter: (_row, _column, cellValue) => {
            let names = [];
            _row.groupRoleList.forEach((item) => {
              names.push(...item.roleVOList.map((val) => val.name));
            });
            return names.toString();
          }
        },
        {
          prop: 'createTime',
          label: '创建时间',
          // sortable: 'custom',
          showOverflowTooltip: true,
          minWidth: 110,
          formatter: (_row, _column, cellValue) => {
            return this.$util.toDateString(cellValue);
          }
        }
      ],
      // 当前编辑数据
      current: null,
      // 是否显示编辑弹窗
      showEdit: false,
      statusOptions: [
        { value: 1, label: '全职' },
        { value: 2, label: '兼职' },
        { value: 3, label: '实习' },
        { value: 4, label: '正式' },
        { value: 5, label: '试用' },
        { value: 6, label: '离职' }
      ],
      pageSize: this.$store.state.tablePageSize,
      cacheKeyUrl: 'ef00833a-system-organization'
    };
  },
  methods: {
    async addUsers(row) {
      // this.userRow = null;
      this.currentRow = row;
      this.dialogVisible = true;
    },
    setUser() {
      this.dialogVisible = false;
      if (this.radio == 1) {
        this.userShow = true;
      } else {
        this.showEdit1 = true;
        this.$refs.userEdit.userBk(this.currentRow);
      }
    },
    getUser() {
      if (!this.userRow) {
        this.$message.warning('请选择一条数据！');
        return;
      }
      this.userShow = false;
      this.showEdit1 = true;
      this.$refs.userEdit.getByData(this.userRow, this.currentRow);
    },

    /* 表格数据源 */
    datasource({ page, limit, where, order }) {
      return getUserPage({
        ...where,
        pageNum: page,
        orderName: order.order || '',
        sortBy: order.sort || '',
        size: limit,
        groupId: this.organizationId
      });
    },
    /* 表格数据源 */
    datasource1({ page, limit, where, order }) {
      return pageUsers({ ...where, ...order, pageNum: page, size: limit });
    },
    /* 刷新表格 */
    reload(where) {
      this.$refs.table.reload({ pageNum: 1, where: where });
    },
    reload1(where) {
      this.$refs.table1.reload({ pageNum: 1, where: where });
    },
    exportUsers() {
      let where = this.$refs.searchRef.geValue();
      this.reload(where);

      exportUsers({
        ...where,
        pageNum: 1,
        size: 10000,
        groupId: this.organizationId
      });
    },
    /* 显示编辑 */
    openEdit(row, disabled) {
      this.current = row;
      this.showEdit = true;
      this.$refs.userEditRef.setDisabled(disabled);
    },

    // 解除绑定
    toUnBind(row) {
      const loading = this.$loading({ lock: true });
      unbindLoginName(row.id)
        .then((res) => {
          loading.close();
          this.$message.success('解绑成功');
          this.reload();
        })
        .catch((e) => {
          loading.close();
          // this.$message.error(e.message);
        });
    },
    /* 删除 */
    remove(row) {
      const loading = this.$loading({ lock: true });
      removePersonnel([row.id])
        .then((msg) => {
          loading.close();
          this.$message.success(msg);
          this.reload();
        })
        .catch((e) => {
          loading.close();
          // this.$message.error(e.message);
        });
    },
    /* 更改状态 */
    editStatus(row) {
      const loading = this.$loading({ lock: true });
      updateUserStatus(row.userId, row.status)
        .then((msg) => {
          loading.close();
          this.$message.success(msg);
        })
        .catch((e) => {
          loading.close();
          row.status = !row.status ? 1 : 0;
          // this.$message.error(e.message);
        });
    },
    uploadFile() {
      this.$refs.importDialogRef.open();
    }
  },
  watch: {
    // 监听机构id变化
    organizationId() {
      this.reload();
    }
  }
};
</script>