kd-aiot-frontend-qms/src/views/inspectionClassify/components/qualityItem.vue

<template>
  <el-dialog
    :title="title"
    v-if="visible"
    :visible.sync="visible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    width="85%"
  >
    <el-card shadow="never">
      <!-- 数据表格 -->

      <user-search @search="reload" />

      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        :selection.sync="selection"
        row-key="id"
      >
        <template v-slot:textType="{ row }">
          {{
            row.textType == 1
              ? '数值'
              : row.textType == 2
              ? '选择'
              : row.textType == 3
              ? '上下限'
              : row.textType == 4
              ? '规格'
              : row.textType == 5
              ? '时间'
              : row.textType == 6
              ? '范围'
              : ''
          }}
        </template>

        <template v-slot:type="{ row }">
          {{ getDictValue('质检标准类型', row.type) }}
        </template>


        <template v-slot:toolList="{ row }">
             <div style="display: inline-block;" v-for="(item,idx) in row.toolList" :key="idx">{{ item.name }}  <span v-if="row.toolList && idx != row.toolList.length - 1">, </span></div>
        </template>
      </ele-pro-table>
    </el-card>

    <div class="btns">
      <el-button type="primary" size="small" @click="selected">选择</el-button>
      <el-button size="small" @click="handleClose">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { getList } from '@/api/inspectionProject';
  import UserSearch from '@/views/inspectionProject/components/user-search.vue';
  import dictMixins from '@/mixins/dictMixins';
  export default {
    components: {
      UserSearch
    },
    mixins: [dictMixins],

    data() {
      return {
        visible: false,
        title: '选择质检项',

        columns: [
          {
            columnKey: 'selection',
            type: 'selection',
            width: 45,
            align: 'center',
            reserveSelection: true
          },
          {
            prop: 'inspectionCode',
            label: '参数编码',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110
          },
          {
            prop: 'inspectionName',
            label: '参数名称',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110
          },

          {
            prop: 'textType',
            label: '参数类型',
            showOverflowTooltip: true,
            align: 'center',
            slot: 'textType',
            minWidth: 110
          },

          {
            prop: 'maxValue',
            label: '参数上限',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'minValue',
            label: '参数下限',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'defaultValue',
            label: '默认值',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            label: '工艺要求',
            prop: 'inspectionStandard',
            formatter: (row, column, cellValue) => {
              return row.symbol + ' ' + cellValue + ' ' + row.unit;
            },
            minWidth: 150
          },

          {
            label: '标准类型',
            prop: 'type',
            slot: 'type'
          },

          {
            prop: 'qualityStandardName',
            label: '标准名称',
            align: 'center',
            minWidth: 110
          },

          {
            prop: 'toolList',
            slot: 'toolList',
            label: '设备名称',
            align: 'center',
            minWidth: 150
          },

          {
            label: '状态',
            prop: 'status',
            formatter: (row, column, cellValue) => {
              return cellValue == 1 ? '启用' : cellValue === 0 ? '停用' : '';
            }
          },

          {
            label: '备注',
            prop: 'inspectionRemark'
          },

          
        ],

        // 表格选中数据
        selection: [],

        processData: [],
        categoryId: null
      };
    },

    watch: {},
    methods: {
      open(categoryId) {
        this.categoryId = categoryId;
        this.visible = true;
      },

      /* 表格数据源 */
      async datasource({ page, limit, where }) {
      
        const res = await getList({
          ...where,
          categoryLevelId: this.categoryId,
          pageNum: page,
          size: limit
        });

      

        return res;
      },

      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ page: 1, where: where });
      },

      handleClose() {
        this.visible = false;
        this.$refs.table.setSelectedRows([]);
        this.selection = [];
      },
      selected() {
        if (!this.selection.length) {
          this.$message.error('请至少选择一条数据');
          return;
        }
        let _arr = [];
        _arr = this.selection.map((m) => {
          return {
            inspectionItemId: m.id,
            status: 1,
            mode: null,
            version: null,
            categoryLevelId: this.categoryId,
            rootCategoryLevelId: '12'
          };
        });

        this.$emit('chooseProcess', _arr);
        this.handleClose();
      }
    }
  };
</script>

<style lang="scss" scoped>
  .btns {
    text-align: center;
    padding: 10px 0;
  }
</style>