kd-aiot-frontend/src/views/documentManagement/certificateManagement/components/aptitudeDialog.vue

<template>
  <div>
    <ele-modal
      width="960px"
      :visible="visible"
      append-to-body
      :close-on-click-modal="false"
      custom-class="ele-dialog-form"
      title="资质列表"
      @update:visible="updateVisible"
      :maxable="true"
    >
      <div class="main">
        <ele-pro-table
          ref="table"
          :initLoad="false"
          :columns="columns"
          :current.sync="current"
          highlight-current-row
          :datasource="datasource"
          tool-class="ele-toolbar-form"
          cache-key="systemOrgUserTable"
          @selection-change="handleSelectionChange"
        >
        </ele-pro-table>
      </div>
      <template v-slot:footer>
        <el-button @click="updateVisible(false)">取 消</el-button>
        <el-button type="primary" @click="handleMine"> 确 定 </el-button>
      </template>
    </ele-modal>
  </div>
</template>

<script>
  import dictMixins from '@/mixins/dictMixins';
  import { getProfessionCertificationPageList } from '@/api/factoryModel';
  export default {
    mixins: [dictMixins],
    data() {
      return {
        multipleSelection: [],
        visible: false,
        levelOptions: [
          {
            label: '初级',
            value: '1'
          },
          {
            label: '中级',
            value: '2'
          },
          {
            label: '高级',
            value: '3'
          }
        ],
        isView: false,
        // 表格列配置
        columns: [
          {
            columnKey: 'selection',
            type: 'selection',
            width: 45,
            align: 'center',
            fixed: 'left'
          },
          {
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center'
          },
          {
            slot: 'type',
            label: '类型',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110,
            formatter: (_row) => {
              return this.getDictValue('工种类型', _row.type);
            }
          },
          {
            align: 'center',
            prop: 'code',
            label: '编码',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            slot: 'name',
            prop: 'name',
            label: '名称',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110
          },
          {
            slot: 'level',
            prop: 'level',
            label: '等级',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110,
            formatter: (_row) => {
              return this.levelOptions.filter(
                (item) => _row.level == item.value
              )[0].label;
            }
          },
          {
            slot: 'startTime',
            prop: 'startTime',
            label: '有效开始时间',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110
          },
          {
            slot: 'endTime',
            prop: 'endTime',
            label: '有效结束时间',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110
          },
          {
            slot: 'accessory.name',
            prop: 'accessory.name',
            label: '附件',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110
          }
        ]
      };
    },
    methods: {
      updateVisible(value) {
        this.visible = value;
        this.$emit('update:visible', value);
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      async handleMine() {
        if (this.multipleSelection?.length <= 0) {
          this.$message.warning('请至少选择一个资质！');
          return;
        }
        this.$emit('success', this.multipleSelection);
        this.updateVisible(false);
      },
      async datasource({ page, limit, where, order }) {
        const res = await getProfessionCertificationPageList({
          ...where,
          ...order,
          pageNum: page,
          size: limit
        });
        return res;
      },
      async open() {
        this.current = {};
        this.radio = null;
        this.visible = true;
        this.$nextTick(() => {
          this.$refs.table.reload({
            pageNum: 1,
            size: 10,
            where: {}
          });
        });
      }
    }
  };
</script>