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"
        cache-key="inspectionClassify"
        row-key="id"
        @selection-change="selectionChangeHandle"
      >
        <template v-slot:toolbar>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            class="ele-btn-icon"
            @click="addOrUpdateHandle()"
          >
            新增
          </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="updateStatus(row)"
            v-if="row.status == 1"
          >
            不启用
          </el-link>
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-edit"
            @click="updateStatus(row)"
            v-if="row.status == 0"
          >
            启用
          </el-link>
          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-edit"
            @click="addOrUpdateHandle(row.id)"
          >
            修改
          </el-link>
          <el-popconfirm
            class="ele-action"
            title="确定要删除此方案吗？"
            @confirm="deleteHandle(row.id)"
          >
            <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>
    <!-- 弹窗, 新增 / 修改 -->
    <AddOrUpdate
      ref="addOrUpdateRef"
      @refreshDataList="getDataList"
    ></AddOrUpdate>
  </div>
</template>

<script>
  import AddOrUpdate from './AddorUpdate';
  // import search from './components/search.vue';
  import dictMixins from '@/mixins/dictMixins';
  import {
    getList,
    removeItem,
    update,
    copyData,
    updateStatus
  } from '@/api/inspectionTemplate';
  export default {
    mixins: [dictMixins],
    components: {
      AddOrUpdate
      // search
    },
    computed: {},
    data() {
      return {
        seekList: [
          {
            label: '名称:',
            value: 'qualitySchemeTemplateName',
            type: 'input',
            placeholder: ''
          },
          {
            label: '编码:',
            value: 'qualitySchemeTemplateCode',
            type: 'input',
            placeholder: ''
          },
          {
            label: '类型:',
            value: 'type',
            type: 'select',
            placeholder: '',
            planList: []
          },
          {
            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',
            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',
            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: 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) => {
        // 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, {
        label: '类型:',
        value: 'type',
        type: 'select',
        placeholder: '',
        planList: this.typeList
      });
      this.renderFlag = true;
    },
    methods: {
      // 获取数据列表
      datasource({ page, where, limit }) {
        return getList({
          ...where,
          pageNum: page,
          size: limit
        });
      },
      // 多选
      selectionChangeHandle(val) {
        this.selection = val;
      },
      // 新增 / 修改
      addOrUpdateHandle(id) {
        this.$refs.addOrUpdateRef.init(id);
      },
      // 删除
      deleteHandle(id) {
        var ids = id
          ? [id]
          : this.selection.map((item) => {
              return item.id;
            });
        this.$confirm(
          `确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`,
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).then(() => {
          removeItem(ids)
            .then(({ message }) => {
              this.$message.success(message);
              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>