kd-aiot-frontend/src/views/technology/production/components/select-template.vue

<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    v-if="visible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    width="75%"
  >
    <ele-pro-table
      ref="table"
      :columns="columns"
      :datasource="templateList"
      row-key="id"
      height="calc(100vh - 350px)"
      :selection.sync="selection"
      :needPage="false"
      @refresh="getList"
    >
    </ele-pro-table>
    <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 { produceTaskRecordRulesGetTemplateListByProduceTaskId } from '@/api/producetaskrecordrules/index.js';
  import dictMixins from '@/mixins/dictMixins';

  export default {
    mixins: [dictMixins],
    components: {},
    props: {
      // 工序id
      produceTaskId: {
        type: String,
        required: true
      }
    },
    data() {
      return {
        visible: false,

        // 表格列配置
        columns: [
          {
            width: 50,
            type: 'selection',
            columnKey: 'selection',
            align: 'center'
          },
          {
            columnKey: 'index',
            type: 'index',
            width: 45,
            align: 'center',
            reserveSelection: true
          },
          {
            prop: 'itemType',
            label: '类型',
            align: 'center',
            formatter: (row) => {
              return this.getDictValue('记录规则事项类型', row.itemType);
            }
          },
          {
            prop: 'executeMethod',
            label: '执行方式',
            align: 'center',
            formatter: (row) => {
              return this.getDictValue('记录规则执行方式', row.executeMethod);
            }
          },
          {
            prop: 'rulesName',
            label: '名称',
            align: 'center',
            formatter: (row) => {
              return row.rulesName || row.itemTaskName;
            }
          }
        ],
        title: '选择模板',
        selection: [],
        templateList: []
      };
    },
    mounted() {
      this.getList();
    },
    methods: {
      async getList() {
        const data = await produceTaskRecordRulesGetTemplateListByProduceTaskId(
          {
            produceTaskId: this.produceTaskId
          }
        );
        console.log('模板列表', data);
        this.templateList = data;
      },
      /* 刷新表格 */
      reload(where) {
        this.isCategory = false;
        this.$refs.table.reload({ pageNum: 1, where: where });
      },
      open() {
        this.visible = true;
      },
      handleClose() {
        this.visible = false;
      },
      selected() {
        if (!this.selection.length) {
          return this.$message.warning('请选择模板！');
        }
        this.$emit('confirm', this.selection);
        this.handleClose();
      }
    }
  };
</script>

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