kd-aiot-frontend-mes/src/views/batchRecord/components/tables/qualityWorkOrderTable.vue

<template>
  <div>
    <seek-page :seekList="seekList" @search="search"></seek-page>
    <ele-pro-table
      ref="table"
      row-key="id"
      :columns="columns"
      :datasource="datasource"
      :cache-key="cacheKeyUrl"
      autoAmendPage
      height="calc(86vh - 230px)"
    >
      <template v-slot:action="{ row }">
        <el-link type="primary" :underline="false" @click="goToDetail(row)">
          详情
        </el-link>
      </template>

      <template v-slot:code="{ row }">
        <el-link type="primary" @click="goToDetail(row)">{{
          row.code
        }}</el-link>
      </template>
      <template v-slot:toolbar>
        <exportButton
          fileName="质检工单"
          apiUrl="/qms/quality_work_order/exportBatchRecordPage"
          :params="params"
        ></exportButton
      ></template>
    </ele-pro-table>
  </div>
</template>

<script>
  import dictMixins from '@/mixins/dictMixins';
  import tableColumnsMixin from '@/mixins/tableColumnsMixin';
  import { batchRecordPage } from '@/api/qualityWorkOrder/index.js';
  import exportButton from '@/components/upload/exportButton.vue';

  export default {
    mixins: [dictMixins, tableColumnsMixin],
    components: { exportButton },
    props: {
      tableQuery: {
        type: Object,
        default: () => {
          return {};
        }
      }
    },
    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',
            showOverflowTooltip: true,
            minWidth: 150
          },
          {
            prop: 'sourceCode',
            label: '来源单号',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 150,
            formatter: (row) => {
              return row.qualityPlanCode
                ? row.qualityPlanCode
                : row.workOrderCode;
            }
          },
          {
            prop: 'qualityType',
            label: '类型',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 150,
            formatter: (row) => {
              return this.getDictValue('质检计划类型', row.qualityType);
            }
          },
          {
            prop: 'qualityMode',
            label: '质检方式',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 150,
            formatter: (row) => {
              return this.getDictValue('取样类型', `0${row.qualityMode}`);
            }
          },
          {
            prop: 'qualityName',
            label: '报工人',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 150
          },
          {
            prop: 'qualityTime',
            label: '质检时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 150
          },
          {
            prop: 'status',
            label: '状态',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 150,
            formatter: (row) => {
              switch (row.status) {
                case 0:
                  return '未报工';
                case 1:
                  return '已报工';

                default:
                  return '已关闭';
              }
            }
          },
          {
            label: '操作',
            columnKey: 'action',
            slot: 'action',
            showOverflowTooltip: true,
            minWidth: 110,
            align: 'center',
            fixed: 'right'
          }
        ],
        cacheKeyUrl: 'mes-9221130-quality-work-order-table',
        params: {}
      };
    },
    computed: {
      seekList() {
        return [
          {
            label: '生产工单编码',
            value: 'workOrderCode',
            type: 'input',
            placeholder: '请输入',
            labelWidth: 110
          },
          {
            label: '质检工单编码',
            value: 'code',
            type: 'input',
            placeholder: '请输入',
            labelWidth: 110
          },
          {
            label: '质检工单名称',
            value: 'name',
            type: 'input',
            placeholder: '请输入',
            labelWidth: 110
          }
        ];
      }
    },
    created() {
      this.requestDict('质检计划类型');
      this.requestDict('不良品处理类型');
      this.requestDict('取样类型');
    },
    methods: {
      // 刷新表格
      reload(where = {}) {
        this.$refs.table.reload({
          where,
          ...this.tableQuery
        });
      },
      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        // 参数
        const body = {
          ...where,
          ...order,
          pageNum: page,
          size: limit,
          ...this.tableQuery
        };
        this.params = body;
        return batchRecordPage(body);
      },
      search(where) {
        this.reload(where);
      },
      goToDetail(row) {
        const path = `/page-qms/inspectionWork/details?id=${row.id}&path=&name=工单`;
        window.history.pushState(null, '', path);
      }
    }
  };
</script>

<style></style>