kd-aiot-frontend-qms/src/views/inspectionTemplate/index.vue

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <seek-page
        v-if="renderFlag"
        :seekList="seekList"
        @search="search"
        ref="search"
      ></seek-page>
      <!-- <search ref="search" @search="search"></search> -->
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        height="calc(100vh - 400px)"
        tool-class="ele-toolbar-form"
        row-key="id"
        @selection-change="selectionChangeHandle"
        :page-size="20"
        @columns-change="handleColumnChange"
        :cache-key="cacheKeyUrl"
      >
        <template v-slot:qualitySchemeTemplateCode="{ row }">
          <el-link
            type="primary"
            :underline="false"
            @click="addOrUpdateHandle('view', row.id)"
          >
            {{ row.qualitySchemeTemplateCode }}
          </el-link>
        </template>
        <template v-slot:toolbar>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            class="ele-btn-icon"
            @click="addOrUpdateHandle('add')"
          >
            新增
          </el-button>
          <el-button
            size="small"
            type="danger"
            icon="el-icon-delete"
            class="ele-btn-icon"
            @click="deleteHandle()"
            :disabled="selection.length <= 0"
          >
            批量删除
          </el-button>
        </template>
        <template v-slot:status="{ row }">
          {{ row.status ? '启用' : '停用' }}
        </template>

        <!-- 操作列 -->
        <template v-slot:action="{ row }">
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-tickets"
            @click="copyData(row)"
          >
            复制
          </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="addOrUpdateHandle('edit', row.id, true)"
            v-if="row.isUpdate != 1 && [2].includes(row.approvalStatus)"
          >
            变更
          </el-link>
          <!-- <el-link
            type="primary"
            :underline="false"
            icon="el-icon-edit"
            @click="updateStatus(row) && [0, 3].includes(row.approvalStatus)"
            v-if="row.status == 1"
          >
            不启用
          </el-link>
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-edit"
            @click="updateStatus(row) && [0, 3].includes(row.approvalStatus)"
            v-if="row.status == 0"
          >
            启用
          </el-link> -->
          <el-link
            type="primary"
            :underline="false"
            v-if="[0, 3].includes(row.approvalStatus)"
            icon="el-icon-edit"
            @click="addOrUpdateHandle('edit', row.id)"
          >
            修改
          </el-link>
          <el-link
            type="danger"
            :underline="false"
            icon="el-icon-delete"
            v-if="[0, 3].includes(row.approvalStatus)"
            @click="deleteHandle(row.id)"
          >
            删除
          </el-link>
        </template>
      </ele-pro-table>
    </el-card>
    <!-- 弹窗, 新增 / 修改 -->
    <AddOrUpdate
      ref="addOrUpdateRef"
      @refreshDataList="getDataList"
    ></AddOrUpdate>
    <processSubmitDialog
      :processSubmitDialogFlag.sync="processSubmitDialogFlag"
      v-if="processSubmitDialogFlag"
      ref="processSubmitDialogRef"
      @reload="search"
    ></processSubmitDialog>
  </div>
</template>

<script>
  import AddOrUpdate from './AddorUpdate';
  import processSubmitDialog from '@/components/processSubmitDialog/processSubmitDialog.vue';

  import dictMixins from '@/mixins/dictMixins';
  import {
    getList,
    removeItem,
    update,
    copyData,
    updateStatus
  } from '@/api/inspectionTemplate';
  import tabMixins from '@/mixins/tableColumnsMixin';
  export default {
    mixins: [dictMixins, tabMixins],
    components: {
      AddOrUpdate,
      processSubmitDialog
      // search
    },
    computed: {},
    data() {
      return {
        processSubmitDialogFlag: false,
        cacheKeyUrl: 'qsm-c2e9664a-inspectionTemplate',
        seekList: [
          {
            label: '名称:',
            value: 'qualitySchemeTemplateName',
            type: 'input',
            placeholder: ''
          },
          {
            label: '编码:',
            value: 'qualitySchemeTemplateCode',
            type: 'input',
            placeholder: ''
          },
          // {
          //   label: '类型:',
          //   value: 'type',
          //   type: 'select',
          //   placeholder: '',
          //   planList: []
          // },
          {
            label: '类型:',
            value: 'type',
            type: 'DictSelection',
            dictName: '质检计划类型',
            placeholder: ''
          },
          {
            label: '状态:',
            value: 'status',
            type: 'select',
            planList: [
              { value: 0, label: '停用' },
              { value: 1, label: '启用' }
            ],
            placeholder: ''
          }
        ],
        dataForm: {
          key: ''
        },
        selection: [],
        //
        columns: [
          {
            width: 45,
            type: 'selection',
            columnKey: 'selection',
            align: 'center',
            selectable: (row, index) => {
              return [0, 3].includes(row.approvalStatus);
            },
            reserveSelection: true
          },
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'type',
            label: '类型',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110,
            formatter: (row, column, cellValue) => {
              return this.getDictName('质检计划类型', cellValue);
            }
          },
          {
            prop: 'qualitySchemeTemplateCode',
            slot: 'qualitySchemeTemplateCode',
            label: '检测方案编码',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110
          },
          {
            prop: 'qualitySchemeTemplateName',
            label: '检测方案名称',
            align: 'center',
            minWidth: 150
          },
          {
            label: '工序名称',
            prop: 'taskName',
            align: 'center'
          },
          {
            label: '版本号',
            prop: 'version',
            align: 'center',
            formatter: (row) => {
              return `${row.versionSymbol}${row.bigVersion}${row.versionMark}${row.smallVersion}`;
            }
          },
          {
            label: '创建人',
            prop: 'createUserName',
            align: 'center'
          },
          {
            label: '创建时间',
            prop: 'createTime',
            align: 'center',
            width: 170
          },
          // {
          //   label: '启用时间',
          //   prop: '启用时间',
          //   align: 'center'
          // },
          {
            label: '停用时间',
            prop: 'updateTime',
            align: 'center',
            formatter: (row) => {
              if (row.status != 1) {
                return row.updateTime;
              }
            },
            width: 170
          },
          {
            label: '状态',
            prop: 'status',
            slot: 'status',
            align: 'center'
          },
          {
            label: '发布状态',
            prop: 'approvalStatus',
            formatter: (row) => {
              return row.approvalStatus == 0
                ? '待发布'
                : row.approvalStatus == 1
                ? '审批中'
                : row.approvalStatus == 2
                ? '已发布'
                : '审核不通过';
            },
            align: 'center'
          },
          {
            prop: 'templateRemark',
            label: '备注',
            showOverflowTooltip: true,
            align: 'center',
            minWidth: 110
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 260,
            align: 'center',
            resizable: false,
            slot: 'action',
            fixed: 'right'
          }
        ],
        typeList: [],
        renderFlag: false
      };
    },
    async created() {
      // const res = await this.requestDict('质检计划类型');
      // console.log(res, 'res 000');
      // this.typeList = res.map((item) => {
      //   console.log(item,'item')
      //   // let values = Object.keys(item);
      //   // return {
      //   //   value: Number(values[0]),
      //   //   label: item[values[0]]
      //   // };
      //   return {
      //     value: item.dictCode,
      //     label: item.dictValue
      //   };
      // });

      // const index = this.seekList.findIndex((item) => item.value === 'type');

      // this.$set(this.seekList, index, );
      this.renderFlag = true;
    },
    methods: {
      // 获取数据列表
      datasource({ page, where, limit }) {
        return getList({
          ...where,
          pageNum: page,
          size: limit
        });
      },
      // 多选
      selectionChangeHandle(val) {
        this.selection = val;
      },
      // 新增 / 修改
      addOrUpdateHandle(type, id, isChange) {
        this.$refs.addOrUpdateRef.init(type, id, isChange);
      },
      async approvalSubmit(res) {
        this.processSubmitDialogFlag = true;
        this.$nextTick(() => {
          let params = {
            businessId: res.id,
            businessKey: 'qms_quality_template_release',
            formCreateUserId: res.createUserId,
            variables: {
              businessCode: res.qualitySchemeTemplateCode,
              businessName: res.qualitySchemeTemplateName,
              businessType: this.getDictName('质检计划类型', res.type)
            }
          };
          this.$refs.processSubmitDialogRef.init(params);
        });
      },
      // 删除
      deleteHandle(id) {
        var ids = id
          ? [id]
          : this.selection.map((item) => {
              return item.id;
            });
        this.$confirm(`确定要删除选中的方案吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          removeItem(ids)
            .then(({ message }) => {
              this.$message.success('操作成功');
              this.getDataList();
            })
            .catch((e) => {});
        });
      },
      getDataList() {
        this.$refs.search.search();
      },
      search(where) {
        this.$refs.table.reload({
          where: where,
          page: 1
        });
      },
      //上下架操作
      updateStatus(row) {
        let dataForm = {};
        let status = row.status === 1 ? 0 : 1;
        dataForm['status'] = status;
        dataForm['id'] = row.id;
        updateStatus(dataForm)
          .then((res) => {
            this.loading = false;
            this.$message.success('操作成功!');
            this.visible = false;
            this.getDataList();
          })
          .catch((e) => {
            this.loading = false;
          });
      },
      copyData(row) {
        console.log(row.id);
        copyData(row.id).then((res) => {
          console.log(res);
          this.$message.success('复制成功!');
          this.getDataList();
        });
      }
    }
  };
</script>