kd-aiot-frontend-qms/src/views/inspectionClassify/components/user-edit.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="70%">

    <el-card shadow="never">
      <userEditSearch @search="reload" />

      <!-- 数据表格 -->
      <ele-pro-table ref="table" :columns="columns" :datasource="datasource" :selection.sync="selection" row-key="id">
        <template v-slot:status="{ row }">
          {{ row.status ? '启用' : "停用" }}
        </template>

        <template v-slot:type="{ row }">
          {{ getDictValue('质检标准类型', row.type) }}
        </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/inspectionStandard';
import userEditSearch from './user-edit-search.vue'
import dictMixins from '@/mixins/dictMixins';
export default {
  components: {
    userEditSearch
  },
  mixins: [dictMixins],

  data() {
    return {
      visible: false,
      title: '选择工序',

      // 表格列配置
      columns: [
        {
          columnKey: 'selection',
          type: 'selection',
          width: 45,
          align: 'center',
          selectable: (row, index) => {
            return !this.processData.some((it) => it.id == row.id);
          },
          reserveSelection: true,
          fixed: 'left'
        },
        {
          prop: 'code',
          label: '质检编码'
        },
        {
          label: '质检名称',
          prop: 'name'
        },

        {
          label: '状态',
          prop: 'status',
          slot: 'status'
        },

        {
          label: '版本号',
          prop: 'version',
        },

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



        {
          label: '标准代码',
          prop: 'standardCode',

        },





      ],

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

      processData: [],
      categoryId: null

    }
  },

  watch: {

  },
  methods: {




    open(categoryId) {
      this.categoryId = categoryId
      this.visible = true
    },

    /* 表格数据源 */
    async datasource({ page, limit, where }) {
      const res = await getList({
        ...where,
        categoryId: 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 {
          name: m.name,
          code: m.code,
          qualityStandardId: m.id,
          status: true,
          mode: null,
          version: null

        }
      })

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

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