kd-aiot-frontend/src/views/rulesManagement/inspectionReportTemplate/components/list.vue

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <seek-page :seekList="seekList" @search="search"></seek-page>
      <ele-pro-table
        ref="table"
        row-key="id"
        :columns="columns"
        :datasource="datasource"
        :cache-key="cacheKeyUrl"
        autoAmendPage
      >
        <template v-slot:toolbar>
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-plus"
            @click="openEdit('add')"
            >新建</el-button
          >
        </template>
        <template v-slot:code="{ row }">
          <el-link
            type="primary"
            :underline="false"
            @click="preview(row, 'view')"
            >{{ row.code }}</el-link
          >
        </template>
        <template v-slot:action="{ row }">
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-edit"
            @click="openEdit('edit', row)"
            v-if="row.isUpdate != 1 && [0, 3].includes(row.approvalStatus)"
          >
            编辑
          </el-link>
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-edit"
            @click="approvalSubmit(row)"
            v-if="row.isUpdate != 1 && [0, 3].includes(row.approvalStatus)"
          >
            发布
          </el-link>
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-edit"
            @click="openEdit('edit', row, true)"
            v-if="row.isUpdate != 1 && [2].includes(row.approvalStatus)"
          >
            变更
          </el-link>
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-edit"
            @click="preview(row)"
          >
            预览
          </el-link>
          <el-popconfirm
            class="ele-action"
            title="确定要删除此条数据吗？"
            @confirm="remove(row.id)"
            v-if="row.isUpdate != 1 && [0, 3].includes(row.approvalStatus)"
          >
            <template v-slot:reference>
              <el-link type="danger" :underline="false" icon="el-icon-delete">
                删除
              </el-link>
            </template>
          </el-popconfirm>
        </template>
      </ele-pro-table>
    </el-card>

    <edit ref="editRef" @reload="reload" :template="type"></edit>
    <preview ref="previewRef" @reload="reload"></preview>
    <processSubmitDialog
      :processSubmitDialogFlag.sync="processSubmitDialogFlag"
      v-if="processSubmitDialogFlag"
      ref="processSubmitDialogRef"
      @reload="search"
    ></processSubmitDialog>
  </div>
</template>

<script>
  import dictMixins from '@/mixins/dictMixins';
  import tableColumnsMixin from '@/mixins/tableColumnsMixin';
  import {
    getQmsReportTemplatePageList,
    deleteQmsReportTemplate
  } from '@/api/qmsreporttemplate/index';
  import edit from './edit.vue';
  import preview from './preview.vue';
  import processSubmitDialog from '@/components/processSubmitDialog/processSubmitDialog.vue';

  export default {
    mixins: [dictMixins, tableColumnsMixin],
    components: { edit, preview, processSubmitDialog },
    props: {
      type: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        columns: [
          {
            width: 50,
            type: 'index',
            columnKey: 'index',
            align: 'center',
            label: '序号'
          },
          {
            prop: 'code',
            label: '模板编码',
            align: 'center',
            slot: 'code',
            minWidth: 110,
            showOverflowTooltip: true
          },
          {
            prop: 'name',
            label: '模板名称',
            align: 'center',
            minWidth: 110,
            showOverflowTooltip: true
          },
          {
            prop: 'isEnabled',
            label: '是否启用',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 150,
            formatter: (row) => {
              switch (row.isEnabled) {
                case 0:
                  return '禁用';
                case 1:
                  return '启用';
                default:
                  return '';
              }
            }
          },
          {
            label: '版本号',
            prop: 'version',
            align: 'center',
            formatter: (row) => {
              return `${row.versionSymbol}${row.bigVersion}${row.versionMark}${row.smallVersion}`;
            }
          },
          {
            prop: 'remark',
            label: '备注',
            align: 'center',
            minWidth: 110,
            showOverflowTooltip: true
          },
          {
            label: '状态',
            prop: 'approvalStatus',
            formatter: (row) => {
              return row.approvalStatus == 0
                ? '待发布'
                : row.approvalStatus == 1
                ? '审批中'
                : row.approvalStatus == 2
                ? '已发布'
                : '审核不通过';
            },
            align: 'center'
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 280,
            align: 'center',
            resizable: false,
            fixed: 'right',
            slot: 'action',
            showOverflowTooltip: true
          }
        ],
        processSubmitDialogFlag: false,
        cacheKeyUrl: 'mes-259231040-material-table'
      };
    },
    computed: {
      seekList() {
        return [
          {
            label: '模板名称：',
            value: 'name',
            type: 'input',
            placeholder: '请输入'
          },
          {
            label: '模板编码：',
            value: 'code',
            type: 'input',
            placeholder: '请输入'
          }
        ];
      }
    },
    methods: {
      // 刷新表格
      reload(where = {}) {
        this.$refs.table.reload({
          where
        });
      },
      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        // 参数
        const body = {
          ...where,
          ...order,
          pageNum: page,
          size: limit,
          type: this.type
        };
        return getQmsReportTemplatePageList(body);
      },
      search(where) {
        this.reload(where);
      },
      remove(id) {
        deleteQmsReportTemplate([id]).then(() => {
          this.$message.success('删除成功');
          this.reload();
        });
      },
      openEdit(type, data, isChange) {
        this.$refs.editRef.open(type, data, isChange);
      },
      preview(row, type) {
        this.$refs.previewRef.open(type, row);
      },
      async approvalSubmit(res) {
        this.processSubmitDialogFlag = true;
        this.$nextTick(() => {
          let params = {
            businessId: res.id,
            businessKey: 'qms_quality_report_template_release',
            formCreateUserId: res.createUserId,
            variables: {
              businessCode: res.code,
              businessName: res.name,
              businessType: '模板变更'
            }
          };
          this.$refs.processSubmitDialogRef.init(params);
        });
      }
    }
  };
</script>

<style></style>