kd-aiot-frontend-mes/src/views/checklistManagement/checklist.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" @click="openCheckAdd('add')"
            >新建</el-button
          >
        </template>
        <template v-slot:action="{ row }">
          <el-link type="text" @click="checkAddConfirm('edit', row)"
            >编辑</el-link
          >
          <el-link type="text">提交</el-link>
          <el-link type="text">详情</el-link>
          <el-popconfirm
            title="您确定要删除这条数据吗？"
            @confirm="deleteRow(row)"
          >
            <el-link style="margin-left: 10px" slot="reference" type="danger"
              >删除</el-link
            >
          </el-popconfirm>
        </template>

        <template v-slot:code="{ row }">
          <el-link type="primary" @click="checkAddConfirm('detail', row)">{{
            row.code
          }}</el-link>
        </template>
      </ele-pro-table>
    </el-card>
    <checkAdd
      ref="checkAddRef"
      @confirm="checkAddConfirm('add', $event)"
    ></checkAdd>
    <checkDetails ref="checkDetailsRef" @reload="reload"></checkDetails>
  </div>
</template>

<script>
  import dictMixins from '@/mixins/dictMixins';
  import tableColumnsMixin from '@/mixins/tableColumnsMixin';
  import {
    checklistrecordPage,
    checklistrecordDelete
  } from '@/api/checklistrecord/index';
  import checkAdd from './components/checkAdd.vue';
  import checkDetails from './components/checkDetails.vue';

  export default {
    mixins: [dictMixins, tableColumnsMixin],
    components: { checkAdd, checkDetails },
    data() {
      return {
        columns: [
          {
            width: 50,
            type: 'index',
            columnKey: 'index',
            align: 'center',
            label: '序号'
          },
          {
            prop: 'code',
            label: '放行单编码',
            align: 'center',
            minWidth: 110,
            showOverflowTooltip: true,
            slot: 'code'
          },
          {
            prop: 'name',
            label: '放行单名称',
            align: 'center',
            minWidth: 110,
            showOverflowTooltip: true
          },
          {
            prop: 'productCode',
            label: '产品编码',
            align: 'center',
            minWidth: 110,
            showOverflowTooltip: true,
            formatter: (row) => {
              return row.orders.map((i) => i.productCode).join(', ');
            }
          },
          {
            prop: 'productName',
            label: '产品名称',
            align: 'center',
            minWidth: 110,
            showOverflowTooltip: true,
            formatter: (row) => {
              return row.orders.map((i) => i.productName).join(', ');
            }
          },
          {
            prop: 'batchNo',
            label: '批次号',
            align: 'center',
            minWidth: 110,
            showOverflowTooltip: true,
            formatter: (row) => {
              return row.orders.map((i) => i.batchNo).join(', ');
            }
          },
          {
            prop: 'code1',
            label: '生产工单号',
            align: 'center',
            minWidth: 110,
            showOverflowTooltip: true,
            formatter: (row) => {
              return row.orders.map((i) => i.id).join(', ');
            }
          },
          {
            prop: 'code2',
            label: '数量',
            align: 'center',
            minWidth: 110,
            showOverflowTooltip: true,
            formatter: (row) => {
              return row.orders.map((i) => i.formingNum).join(', ');
            }
          },
          {
            prop: 'code3',
            label: '规格',
            align: 'center',
            minWidth: 110,
            showOverflowTooltip: true,
            formatter: (row) => {
              return row.orders.map((i) => i.specification).join(', ');
            }
          },
          {
            prop: 'productModel',
            label: '型号',
            align: 'center',
            minWidth: 110,
            showOverflowTooltip: true,
            formatter: (row) => {
              return row.orders.map((i) => i.productModel).join(', ');
            }
          },
          {
            prop: 'approvalStatus',
            label: '审核',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 150,
            formatter: (row) => {
              switch (row.approvalStatus) {
                case 0:
                  return '未提交';
                case 1:
                  return '审核中';
                case 2:
                  return '审核通过';
                case 3:
                  return '审核不通过';
                default:
                  return '';
              }
            }
          },
          {
            prop: 'createTime',
            label: '创建时间',
            align: 'center',
            minWidth: 110,
            showOverflowTooltip: true
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 220,
            align: 'center',
            resizable: false,
            fixed: 'right',
            slot: 'action',
            showOverflowTooltip: true
          }
        ],
        cacheKeyUrl: 'mes-25925-material-table'
      };
    },
    computed: {
      seekList() {
        return [
          {
            label: '放行单编码：',
            value: 'code',
            type: 'input',
            placeholder: '请输入'
          },
          {
            label: '放行单名称：',
            value: 'name',
            type: 'input',
            placeholder: '请输入'
          },
          {
            label: '审核状态：',
            value: 'approvalStatus',
            type: 'select',
            placeholder: '请输入',
            planList: [
              { label: '未提交', value: 0 },
              { label: '审核中', value: 1 },
              { label: '审核通过', value: 2 },
              { label: '审核不通过', value: 3 }
            ]
          }
        ];
      }
    },
    methods: {
      // 刷新表格
      reload(where = {}) {
        this.$refs.table.reload({
          where
        });
      },
      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        // 参数
        const body = {
          ...where,
          ...order,
          pageNum: page,
          size: limit
        };
        return checklistrecordPage(body);
      },
      search(where) {
        this.reload(where);
      },
      // 打开添加弹窗
      openCheckAdd(type) {
        this.$refs.checkAddRef?.open(type);
      },
      checkAddConfirm(type, data) {
        this.$refs.checkDetailsRef?.open(type, data);
      },
      // 删除
      async deleteRow(row) {
        await checklistrecordDelete([row.id]);
        this.$message.success('删除成功');
        this.reload();
      }
    }
  };
</script>

<style></style>