kd-aiot-frontend-qms/src/views/inspectionTemplate/components/inspectionTemplateDialog.vue

<template>
  <el-dialog
    :visible.sync="equipmentdialog"
    :before-close="handleClose"
    :close-on-click-modal="true"
    :close-on-press-escape="false"
    append-to-body
    width="60%"
  >
    <search ref="search" @search="search"></search>
    <ele-pro-table
      ref="table"
      :columns="columns"
      :datasource="datasource"
      height="calc(100vh - 605px)"
      tool-class="ele-toolbar-form"
      row-key="qualityLevelId"
      v-if="equipmentdialog"
      :selection.sync="selection"
    >
      <template v-slot:status="{ row }">
        {{ row.status ? '启用' : '停用' }}
      </template>
    </ele-pro-table>
    <template v-slot:footer>
      <el-button type="primary" size="small" @click="selected">选择</el-button>
      <el-button size="small" @click="handleClose">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import search from './search.vue';
  import { getList } from '@/api/inspectionTemplate';

  export default {
    components: { search },

    data() {
      return {
        type: '',
        equipmentdialog: false,
        selection: [],
        columns: [
          {
            width: 45,
            type: 'selection',
            columnKey: 'selection',
            align: 'center',
            reserveSelection: true
          },
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'qualitySchemeTemplateCode',
            label: '质检方案编码',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110
          },
          {
            prop: 'qualitySchemeTemplateName',
            label: '质检方案名称',
            align: 'center',
            minWidth: 150
          },
          {
            label: '状态',
            prop: 'status',
            slot: 'status',
            align: 'center'
          },
          {
            prop: 'templateRemark',
            label: '备注',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 150,
            align: 'center',
            resizable: false,
            slot: 'action',
            fixed: 'right'
          }
        ]
      };
    },

    watch: {},
    methods: {
      datasource({ page, where, limit }) {
        return getList({
          ...where,
          pageNum: page,
          size: limit,
          type: this.type
        });
      },
      open(type) {
        this.type = type;
        this.equipmentdialog = true;
      },
      handleClose() {
        this.equipmentdialog = false;
      },
      // 选择
      selected() {
        if (!this.selection.length) {
          this.$message.error('至少选择一条数据');

          return;
        }
        this.$emit('choose', this.selection);
        this.handleClose();
      },

      search(where) {
        this.$refs.table.reload({ page: 1, where });
      }
    }
  };
</script>

<style lang="scss" scoped></style>