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

<template>
  <div>
    <!-- 数据表格 -->
    <org-user-search @search="reload" ref="searchRef"></org-user-search>
    <!-- 员工状态 tab：选项来自「员工状态」字典（缺项不渲染、不编造状态码），末尾固定「全部」。
         对照 hr 员工档案页样式，位于搜索区下方、表格工具栏之外 -->
    <div v-if="statusTabs.length" class="status-tab-bar">
      <button
        v-for="tab in statusTabs"
        :key="tab.key"
        type="button"
        class="status-tab"
        :class="{ active: String(statusTab) === String(tab.value) }"
        @click="switchStatusTab(tab.value)"
      >
        {{ tab.label }}
      </button>
    </div>
    <ele-pro-table
      ref="table"
      :columns="columns"
      :datasource="datasource"
      height="calc(100vh - 315px)"
      full-height="calc(100vh - 160px)"
      tool-class="ele-toolbar-form"
      :page-size="pageSize"
      row-key="id"
      :selection.sync="selection"
      @columns-change="handleColumnChange"
      :cache-key="cacheKeyUrl"
      @update:selection="handleSelectionChange"
    >
      <!-- 表头工具栏 -->
      <template v-slot:toolbar>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          class="ele-btn-icon"
          @click="openEdit()"
          v-if="$hasPermission('main:user:save')"
        >
          添加
        </el-button>
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-upload2"
          plain
          @click="uploadFile"
          v-if="$hasPermission('main:user:save')"
          >导入</el-button
        >
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-download"
          plain
          @click="exportUsers"
          >导出</el-button
        >
        <el-button
          type="success"
          size="mini"
          icon="el-icon-guide"
          plain
          @click="bindingProcess"
          >绑定关键工序</el-button
        >
        <el-button
          v-if="$hasPermission('main:user:push')"
          :disabled="selection?.length === 0"
          type="primary"
          size="mini"
          plain
          @click="allPushBtn"
          >批量推送</el-button
        >
      </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)"
          v-if="$hasPermission('main:user:save')"
        >
          修改
        </el-link>
        <el-link
          v-if="row.loginName && $hasPermission('main:user:save')"
          type="primary"
          :underline="false"
          icon="el-icon-unlock"
          @click="toUnBind(row)"
        >
          解绑
        </el-link>
        <el-link
          v-if="!row.loginName && $hasPermission('main:user:save')"
          type="primary"
          :underline="false"
          icon="el-icon-add"
          @click="addUsers(row)"
        >
          新建账号
        </el-link>
        <!-- <el-link
          type="primary"
          :underline="false"
          icon="el-icon-key"
          @click="openDoor(row)"
        >
          门禁
        </el-link> -->
        <el-popconfirm
          class="ele-action"
          title="确定要删除此用户吗？"
          @confirm="remove(row)"
          v-if="!row.loginName && $hasPermission('main:user:delete')"
        >
          <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.async="userShow"
      :close-on-click-modal="false"
      custom-class="ele-dialog-form"
      :maxable="true"
      @close="userShow = false"
    >
      <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>

    <critical-process
      ref="criticalProcessRef"
      @chooseProcess="chooseProcess"
    ></critical-process>
    <DoorModal ref="doorModalRef" :visible.sync="showDoor" :current="current" />
  </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,
    employeePush
  } from '@/api/system/organization';
  import { pageUsers, exportUsers } from '@/api/system/user';
  import dictMixins from '@/mixins/dictMixins';
  import { getFactoryarea } from '@/api/factoryModel';
  import criticalProcess from './criticalProcess.vue';
  import DoorModal from './door-modal.vue';

  export default {
    mixins: [tabMixins, dictMixins],
    components: {
      importDialog,
      OrgUserSearch,
      OrgUserEdit,
      addUsers,
      UserSearch,
      criticalProcess,
      DoorModal
    },
    props: {
      // 机构id
      organizationId: [Number, String],
      // 全部机构
      organizationList: Array,
      institutionList: Array
    },
    created() {
      this.requestDict('岗位');
      this.requestDict('员工状态');
      getFactoryarea({
        pageNum: 1,
        size: 999,
        type: 1
      }).then((res) => {
        this.factoryList = res.list || [];
      });
    },
    computed: {
      // 表格列配置
      columns() {
        let columnsVersion = this.columnsVersion;
        return [
          {
            width: 45,
            type: 'selection',
            columnKey: 'selection',
            align: 'center'
          },
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'name',
            label: '姓名',
            slot: 'name',
            sortable: 'custom',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            // 所属机构（groupName）
            prop: 'groupName',
            label: '所属机构',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            // 详情/列表口径一致：groupName 是机构，主所属部门名称在 deptName
            prop: 'deptName',
            label: '主所属部门',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'deptNames',
            label: '隶属部门',
            showOverflowTooltip: true,
            minWidth: 110
          },

          {
            prop: 'jobNumber',
            label: '工号',
            sortable: 'custom',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'phone',
            label: '手机号',
            sortable: 'custom',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'postName',
            label: '岗位',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'factoryId',
            label: '所属工厂',
            sortable: 'custom',
            showOverflowTooltip: true,
            minWidth: 110,
            formatter: (_row, _column, cellValue) => {
              return this.factoryList.find((item) => item.id == cellValue)
                ?.name;
            }
          },
          {
            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.statusList.find((item) => {
                return item.value == cellValue;
              });
              return dom ? dom.label : _row.statusName || '';
            }
          },
          {
            prop: 'code',
            label: '是否推送',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 120,
            formatter: (_row, _column, cellValue) => {
              return _row.code ? '已推送' : '未推送';
            }
          },
          {
            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: 260,
            align: 'left',
            resizable: false,
            fixed: 'right',
            slot: 'action',
            showOverflowTooltip: true
          }
        ];
      },
      // 员工状态字典（hr_user_status）
      statusList() {
        const list = this.getDictListByName('员工状态');
        return Array.isArray(list) ? list : [];
      },
      /**
       * 员工状态 tab：顺序 在职 → 试用期 → 已离职 → 待岗 → 退休 → 全部（对照 hr 员工档案页）。
       * 前几项来自「员工状态」字典（value 就是接口 status 参数），字典里没有的状态不渲染，
       * 例如「退休」需要后端在字典里加项后才会出现（前端不编状态码）。
       * 「全部」为前端固定项（value 空串 → 不传 status 查全量）。
       */
      statusTabs() {
        const defs = [
          {
            key: 'active',
            test: (label) => label.includes('在职') && !label.includes('离职')
          },
          { key: 'probation', test: (label) => label.includes('试用') },
          { key: 'resigned', test: (label) => label.includes('离职') },
          { key: 'idle', test: (label) => label.includes('待岗') },
          { key: 'retired', test: (label) => label.includes('退休') }
        ];
        const options = this.statusList || [];
        const tabs = [];
        defs.forEach((def) => {
          const hit = options.find((item) => def.test(String(item.label || '')));
          if (hit) {
            tabs.push({ key: def.key, label: hit.label, value: String(hit.value) });
          }
        });
        tabs.push({ key: 'all', label: '全部', value: '' });
        return tabs;
      }
    },
    data() {
      return {
        showDoor: false,
        moudleName: 'mainUser',
        showEdit1: false,
        userShow: false,
        userRow: null,
        currentRow: null,
        dialogVisible: false,
        radio: '2',
        columnsVersion: 0,
        factoryList: [],
        // 表格列配置
        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,
        pageSize: this.$store.state.tablePageSize,
        cacheKeyUrl: 'ef00833a-system-organization',
        selection: [],
        // 员工状态 tab 当前选中的状态码（'' = 全部）；
        // 初始即「正式在职」的字典码 1（2026-10-14 抓包确认），字典异常时由 watch 纠正
        statusTab: '1'
      };
    },
    methods: {
      openDoor(row) {
        console.log(row);
        this.current = row;
        this.showDoor = true;
      },
      allPushBtn() {
        const dataId = this.selection.map((v) => v.id);
        employeePush(dataId)
          .then((res) => {
            this.$message.success('推送成功！');
            this.reload();
          })
          .catch(() => {
            console.log('推送失败！');
          });
      },
      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 }) {
        const params = {
          ...where,
          pageNum: page,
          orderName: order.order || '',
          sortBy: order.sort || '',
          size: limit,
          groupId: this.organizationId,
          isQueryLZ: 1,
          affiDeptId: 1
        };
        // 员工状态 tab：「全部」（空串）时不传 status，查全量
        if (this.statusTab !== '') {
          params.status = this.statusTab;
        }
        return getUserPage(params);
      },
      /* 表格数据源 */
      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,
          // 导出同样跟随状态 tab（「全部」时不带 status）
          ...(this.statusTab !== '' ? { status: this.statusTab } : {})
        });
      },

      /* 状态 tab 切换：立即生效并回到第一页 */
      switchStatusTab(value) {
        const next = value == null ? '' : String(value);
        if (String(this.statusTab) === next) return;
        this.statusTab = next;
        this.reload();
      },
      /* 显示编辑 */
      openEdit(row, disabled) {
        this.current = row;
        this.showEdit = true;
        this.$refs.userEditRef.setDisabled(disabled);
      },

      bindingProcess() {
        if (this.selection.length == 0) {
          return this.$message.warning('请至少选择一名需要绑定的人员');
        }

        this.$refs.criticalProcessRef.open(this.selection, 'batch');
      },

      chooseProcess() {
        this.reload();
      },

      handleSelectionChange(data) {
        this.selection = data;
      },

      // 解除绑定
      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();
      },
      // 字典异步到位后检查默认 tab：当前选中值不在字典 tab 里时回到第一项（在职）并补一次查询
      statusTabs(tabs) {
        // 字典未加载时只有「全部」，不动默认值
        if (tabs.length <= 1) return;
        if (!tabs.some((tab) => tab.value === this.statusTab)) {
          this.statusTab = tabs[0].value;
          this.$nextTick(() => {
            this.$refs.table && this.reload();
          });
        }
      }
    }
  };
</script>

<style scoped lang="scss">
  /* 员工状态 tab（对照 hr 员工档案页样式）：整体高约 40px、字号 14px、每段左右留白约 18px，
     位于搜索区下方、表格工具栏之外 */
  .status-tab-bar {
    display: inline-flex;
    align-items: stretch;
    max-width: 100%;
    margin: 2px 0 0;
    overflow: hidden;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    background: #fff;
  }

  .status-tab {
    height: 40px;
    padding: 0 18px;
    border: 0;
    border-right: 1px solid #e5e5e5;
    background: #fff;
    color: #606266;
    font-size: 14px;
    font-weight: 400;
    line-height: 40px;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.18s ease, background-color 0.18s ease;
  }

  .status-tab:last-child {
    border-right: 0;
  }

  .status-tab:hover {
    color: #1890ff;
    background: #f7fbff;
  }

  .status-tab:focus {
    outline: none;
  }

  .status-tab.active {
    color: #1890ff;
    font-weight: 400;
    background: #fff;
  }

  /* 窄屏：状态 tab 横向滚动，不换行挤压表头 */
  @media (max-width: 768px) {
    .status-tab-bar {
      display: flex;
      width: 100%;
      overflow-x: auto;
    }

    .status-tab {
      padding: 0 14px;
    }
  }
</style>