kd-aiot-frontend-qms/src/views/inspectionWork/components/QualityContentTabs.vue

<template>
  <el-row>
    <header-title title="质检内容">
      <el-button type="primary" :loading="loading" v-if="type != 'detail'"
        @click="$emit('batch-quality')">批量质检</el-button>
    </header-title>

    <el-tabs v-model="activeName" @tab-click="handleClick">
      <!--  -->
      <el-tab-pane label="来源清单" name="1">
        <el-table v-if="packingList.length > 0" ref="showPackingListTable" :data="paginatedPackingList"
          tooltip-effect="dark" :max-height="300" border row-key="id"
          @selection-change="$emit('selection-change', $event)">
          <el-table-column type="selection" width="55" align="center" :reserve-selection="true"
            :selectable="checkSelectable"></el-table-column>
          <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
          <template v-for="column in tableColumns">
            <el-table-column :label="column.label" :prop="column.prop" :show-overflow-tooltip="true"
              :width="column.width" :align="column.align"></el-table-column>
          </template>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="pagination.currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next" :total="packingList.length" style="margin-top: 16px" />
      </el-tab-pane>
      <!--  -->
      <el-tab-pane label="样品清单" name="2">
        <el-table v-if="sampleList.length > 0" ref="showSampleListTable" :data="paginatedSampleList"
          tooltip-effect="dark" :max-height="300" border row-key="id">
          <el-table-column label="序号" type="index" width="50" align="center" fixed="left"></el-table-column>
          <template v-for="column in tableColumns">
            <el-table-column :key="column.prop" :label="column.label" :prop="column.prop" :fixed="column.fixed"
              :show-overflow-tooltip="true" :width="column.width" :align="column.align">
              <template slot-scope="scope">
                <template v-if="column.prop === 'categoryCode'">
                  <el-link type="primary" :underline="false" @click="handleDetail(scope.$index, scope.row, 'detail')">
                    {{ scope.row.categoryCode }}
                  </el-link>
                </template>
                <template v-else-if="column.prop === 'weight'">
                  <el-input type="number" v-model="scope.row.weight" :min="0"
                    @input="inputWeight(scope.row, scope.$index)"></el-input>
                </template>
                <template v-else>
                  {{ scope.row[column.prop] }}
                </template>
              </template>
            </el-table-column>
          </template>
          <el-table-column label="处置状态" prop="disposalStatus" align="center" width="80" fixed="right"
            :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span v-if="scope.row.disposalStatus == 1 && form.qualityType == 2">返工</span>
              <span v-if="scope.row.disposalStatus == 2 && form.qualityType == 2">返修</span>
              <span v-if="scope.row.disposalStatus == 3">报废</span>
              <span v-if="scope.row.disposalStatus == 4 && form.qualityType == 2">降级使用</span>
              <span v-if="scope.row.disposalStatus == 5 && form.qualityType == 2">让步接收</span>
              <span v-if="scope.row.disposalStatus == 6">留样</span>
              <span v-if="scope.row.disposalStatus == 7">消耗</span>
              <span v-if="scope.row.disposalStatus == 8">回用</span>
            </template>
          </el-table-column>
          <el-table-column label="处置时间" prop="disposeTime" align="center" width="100" fixed="right"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column label="质检状态" prop="qualityStatus" align="center" width="120" fixed="right"
            :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span v-if="scope.row.qualityStatus == 0">未检</span>
              <span v-if="scope.row.qualityStatus == 1">已检</span>
              <span v-if="scope.row.qualityStatus == 2">待检</span>
            </template>
          </el-table-column>
          <el-table-column label="质检结果" prop="qualityResults" align="center" width="120" fixed="right"
            :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <el-select v-model="scope.row.qualityResults" placeholder="请选择" style="width: 100%;"
                :disabled="type == 'detail'" size="mini">
                <el-option v-for="item in qualityResultsList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="120" fixed="right" v-if="type != 'detail'">
            <template slot-scope="scope">
              <el-link :type="scope.row.isValid ? 'primary' : 'danger'" :underline="false"
                @click="handleDetail(scope.$index, scope.row, 'report')">
                质检
              </el-link>
              <el-link type='primary' :underline="false" @click="handleDispose(scope.$index, scope.row, 'dispose')">处置
              </el-link>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSampleSizeChange" @current-change="handleSampleCurrentChange"
          :current-page="samplePagination.currentPage" :page-sizes="[10, 20, 50, 100]"
          :page-size="samplePagination.pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="sampleList.length" />
      </el-tab-pane>
      <!--  -->
      <el-tab-pane label="质检方案" name="3">
        <el-table :data="paginatedSchemeList" tooltip-effect="dark" :max-height="300" border row-key="id">
          <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
          <el-table-column label="质检方案编码" prop="qualitySchemeTemplateCode" align="center">
          </el-table-column>
          <el-table-column label="质检方案名称" prop="qualitySchemeTemplateName" align="center"></el-table-column>
          <el-table-column label="质检类型" prop="categoryLevelClassName" align="center"></el-table-column>
          <el-table-column label="质检项编码" prop="inspectionCode" align="center"></el-table-column>
          <el-table-column label="质检项名称" prop="inspectionName" align="center"></el-table-column>
          <el-table-column label="工艺参数" prop="defaultValue" align="center">
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSchemeSizeChange" @current-change="handleSchemeCurrentChange"
          :current-page="schemePagination.currentPage" :page-sizes="[10, 20, 50, 100]"
          :page-size="schemePagination.pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="schemeList.length" />
      </el-tab-pane>
    </el-tabs>
  </el-row>
</template>

<script>
export default {
  props: {
    type: String,
    packingList: Array,
    sampleList: Array,
    schemeList: Array,
    loading: Boolean,
    form: Object
  },
  data() {
    return {
      activeName: '2',
      pagination: { currentPage: 1, pageSize: 10 },
      samplePagination: { currentPage: 1, pageSize: 10 },
      schemePagination: { currentPage: 1, pageSize: 10 },

      qualityResultsList: [{
        value: 1,
        label: '合格'
      },
      {
        value: 2,
        label: '不合格'
      }],
      tableColumns: [
        {
          label: '编码',
          prop: 'categoryCode',
          width: '160',
          align: 'center',
          fixed: 'left'
        },
        {
          label: '名称',
          prop: 'categoryName',
          width: '150',
          align: 'center'
        },
        { label: '批次号', prop: 'batchNo', align: 'center' },
        { label: '发货条码', prop: 'barcodes', align: 'center' },
        { label: '包装编码', prop: 'packageNo', align: 'center' },
        // { label: '包装数量', prop: 'packingQuantity', align: 'center' },
        { label: '包装单位', prop: 'packingUnit', align: 'center' },
        { label: '计量数量', prop: 'measureQuantity', align: 'center' },
        { label: '计量单位', prop: 'measureUnit', align: 'center' },
        { label: '物料代号', prop: 'materielDesignation', align: 'center' },
        { label: '客户代号', prop: 'clientCode', align: 'center' },
        { label: '刻码', prop: 'engrave', align: 'center' },
        { label: '重量', prop: 'weight', align: 'center', width: "100" },
        { label: '重量单位', prop: 'weightUnit', align: 'center', width: "100" },
        { label: '仓库', prop: 'warehouseName', align: 'center' },
        { label: '货区', prop: 'areaName', align: 'center' },
        { label: '货架', prop: 'goodsShelfName', align: 'center' },
        { label: '货位', prop: 'goodsAllocationName', align: 'center' },
        { label: '生产日期', prop: 'productionDate', align: 'center' },
        { label: '采购日期', prop: 'purchaseDate', align: 'center' },
      ],

    }
  },

  computed: {
    paginatedPackingList() {
      const start =
        (this.pagination.currentPage - 1) * this.pagination.pageSize;
      const end = start + this.pagination.pageSize;
      return this.packingList.slice(start, end);
    },
    // 分页后的样品列表
    paginatedSampleList() {
      const { currentPage, pageSize } = this.samplePagination;
      const start = (currentPage - 1) * pageSize;
      const end = start + pageSize;
      return this.sampleList?.slice(start, end);
    },
    // 分页后的质检方案列表
    paginatedSchemeList() {
      const { currentPage, pageSize } = this.schemePagination;
      const start = (currentPage - 1) * pageSize;
      const end = start + pageSize;
      return this.schemeList?.slice(start, end);
    }
  },
  methods: {
    handleClick(tab) {
      this.activeName = tab.name
    },
    checkSelectable(row, index) {
      // 只有当质检方式为抽检(qualityMode=2)时   类型不是生产检验  才可选
      return this.form.qualityType != 2 && this.form.qualityMode === 2;
    },
    handleDetail(index, row, type) {
      this.$emit('handleDetail', index, row, type)
    },
    inputWeight(row, index) {
      this.$emit('inputWeight', row, index)
    },
    handleDispose(index, row, type) {
      this.$emit('handleDispose', index, row, type)
    },
    // 分页方法
    handleSizeChange(val) {
      this.pagination.pageSize = val;
      this.pagination.currentPage = 1;
    },
    handleCurrentChange(val) {
      this.pagination.currentPage = val;
    },
    handleSampleSizeChange(val) {
      this.samplePagination.pageSize = val;
      this.samplePagination.currentPage = 1;
    },
    handleSampleCurrentChange(val) {
      this.samplePagination.currentPage = val;
    },
    handleSchemeSizeChange(val) {
      this.schemePagination.pageSize = val;
      this.schemePagination.currentPage = 1;
    },
    handleSchemeCurrentChange(val) {
      this.schemePagination.currentPage = val;
    },
  }
}
</script>