kd-aiot-frontend-ehs/src/views/safetyExam/examManagement/selectPersonDialog.vue

<template>
  <el-dialog
    title="选择考试人员"
    :visible.sync="visible"
    width="900px"
    :close-on-click-modal="false"
    append-to-body
    @closed="handleClose"
  >
    <!-- 搜索区域 -->
    <div class="search-area">
      <el-form :inline="true" size="small" @submit.native.prevent>
        <el-form-item label="姓名：">
          <el-input
            v-model="where.name"
            placeholder="支持模糊查询"
            clearable
            style="width: 180px"
            @keyup.enter.native="handleSearch"
          />
        </el-form-item>
        <el-form-item label="所属部门：">
          <dept-select
            v-model="where.groupId"
            placeholder="请选择所属部门"
            style="width: 220px"
            @changeGroup="handleDeptChange"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleSearch"
            >查询</el-button
          >
          <el-button icon="el-icon-refresh-left" @click="handleReset"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <!-- 列表 -->
    <ele-pro-table
      ref="table"
      row-key="id"
      :columns="columns"
      :datasource="datasource"
      :cache-key="cacheKeyUrl"
      height="400px"
      @selection-change="handleSelectionChange"
    >
    </ele-pro-table>

    <template slot="footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button
        type="primary"
        :disabled="!selectedRows.length"
        @click="handleConfirm"
        >确定</el-button
      >
    </template>
  </el-dialog>
</template>

<script>
  import DeptSelect from '@/components/CommomSelect/dept-select.vue';
  import { getUserPage } from '@/api/system/organization';

  export default {
    components: { DeptSelect },
    data() {
      return {
        visible: false,
        cacheKeyUrl: 'ehs-examSelectPerson-list',
        selectedRows: [],
        excludeIds: [],
        where: {
          name: '',
          groupId: ''
        },
        columns: [
          {
            type: 'selection',
            width: 55,
            align: 'center',
            selectable: (row) => !this.isExcluded(row.id)
          },
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 60,
            align: 'center'
          },
          {
            prop: 'name',
            label: '姓名',
            align: 'center',
            minWidth: 120
          },
          {
            prop: 'groupName',
            label: '所属部门',
            align: 'center',
            minWidth: 180,
            showOverflowTooltip: true
          },
          {
            prop: 'jobNumber',
            label: '工号',
            align: 'center',
            minWidth: 120
          },
          {
            prop: 'phone',
            label: '联系方式',
            align: 'center',
            minWidth: 130
          }
        ]
      };
    },
    methods: {
      open(excludeIds = []) {
        this.visible = true;
        this.selectedRows = [];
        this.excludeIds = Array.isArray(excludeIds) ? excludeIds : [];
        this.$nextTick(() => {
          this.$refs.table && this.$refs.table.reload({ page: 1 });
        });
      },
      handleDeptChange(id, node) {
        this.where.groupId = node ? id : '';
      },
      isExcluded(id) {
        if (id === undefined || id === null || id === '') return false;
        const target = String(id);
        return (this.excludeIds || []).some((item) => String(item) === target);
      },
      handleSelectionChange(rows) {
        this.selectedRows = rows;
      },
      handleSearch() {
        const where = { ...this.where };
        // 清空选择时,把 groupId 置空防止传 undefined
        if (!where.groupId) delete where.groupId;
        this.$refs.table.reload({ page: 1, where });
      },
      handleReset() {
        this.where = {
          name: '',
          groupId: ''
        };
        this.handleSearch();
      },
      handleClose() {
        this.selectedRows = [];
        this.where = {
          name: '',
          groupId: ''
        };
      },
      async datasource({ page, limit, where }) {
        const body = {
          ...where,
          pageNum: page,
          size: limit
        };
        // 兜底清理空值
        Object.keys(body).forEach((key) => {
          if (body[key] === '' || body[key] === null || body[key] === undefined) {
            delete body[key];
          }
        });
        return getUserPage(body);
      },
      handleConfirm() {
        if (!this.selectedRows.length) {
          this.$message.warning('请至少选择一名考试人员');
          return;
        }
        const persons = this.selectedRows.map((row) => ({
          userId: row.id,
          userName: row.name || '',
          departmentId: row.groupId || row.deptId || '',
          departmentName: row.groupName || row.deptName || '',
          // 兼容 publish 表单里既有字段
          id: row.id,
          deptId: row.groupId || row.deptId || '',
          deptName: row.groupName || row.deptName || ''
        }));
        this.visible = false;
        this.$emit('confirm', persons);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .search-area {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ebeef5;
  }
</style>