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>
      <el-button type="primary" :loading="loading" v-if="type != 'detail'"
        @click="$emit('batch-dispose')">批量处置</el-button>
    </header-title>

    <el-tabs v-model="activeName" @tab-click="handleClick">
      <!--  -->
      <el-tab-pane label="来源清单" name="1">
        <ele-pro-table ref="sourceTable" :columns="tableColumns1" :datasource="datasource"
          @selection-change="handleSelectionChange" :initLoad="false" :pagination="true">

          <template v-slot:toolbar v-if="form.qualityMode == 2 && form.qualityType == 2 && type != 'detail'">
            <el-dropdown trigger="click" @command="handleSampleNumber">
              <el-link type="primary" icon="el-icon-plus">取样</el-link>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="1">取整样</el-dropdown-item>
                <el-dropdown-item command="2">取小样</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
          <template v-slot:toolkit v-if="form.qualityMode == 2 && form.qualityType == 2 ">
            <el-row>
              <el-form ref="ruleForm" :model="formData" label-width="60px" size="mini" :rules="rules" class="flex"
                :show-message="false">
                <el-col :span="6" v-if="conditionType == 2">
                  <el-form-item prop="number" label-width="0" style="margin-bottom: 0;" >
                    <el-input v-model="formData.number" placeholder="请输入" size="mini"
                     ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6" v-if="conditionType == 2">
                  <el-form-item prop="sampleUnit" label-width="0" style="margin: 0;" >
                    <DictSelection dictName="计量单位" clearable v-model="formData.sampleUnit" size="mini"
                      @change="changeSamUnit">
                    </DictSelection>
                  </el-form-item>
                </el-col>
                <el-col :span="8" v-if=" conditionType == 2">
                  <el-form-item prop="portion" label="数量" style="margin: 0;">
                    <el-input v-model="formData.portion" placeholder="请输入" size="mini" ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="20" v-if="conditionType == 1">
                  <el-form-item prop="portion" label="数量" style="margin: 0;">
                    <el-input v-model="formData.portion" placeholder="请输入" size="mini"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="4" style="text-align: right;" v-if=" conditionType == 2">
                  <el-button type="primary" size="mini" @click="handleSampleSubmit"
                    style="margin-right: 12px;">确认</el-button>
                </el-col>
                <el-col :span="4" style="text-align: right;" v-if="conditionType == 1">
                  <el-button type="primary" size="mini" @click="handleSampleSubmit"
                    style="margin-right: 12px;">确认</el-button>
                </el-col>
              </el-form>
            </el-row>
          </template>

          <template v-slot:materielDesignation="{ row }">
            <el-input v-model="row.materielDesignation" placeholder="请输入"></el-input>
          </template>
          <template v-slot:clientCode="{ row }">
            <el-input v-model="row.clientCode" placeholder="请输入"></el-input>
          </template>
          <template v-slot:engrave="{ row }">
            <el-input v-model="row.engrave" placeholder="请输入"></el-input>
          </template>
          <template v-slot:weight="{ row }">
            <el-input v-model="row.weight" placeholder="请输入"></el-input>
          </template>
        </ele-pro-table>
      </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 === 'materielDesignation'">
                  <el-input :disabled="scope.row.isMaterielDesignationEmpty" v-model="scope.row.materielDesignation"
                    size="mini"></el-input>
                </template>
                <template v-else-if="column.prop === 'clientCode'">
                  <el-input :disabled="scope.row.isClientCodeEmpty" v-model="scope.row.clientCode"
                    size="mini"></el-input>
                </template>
                <template v-else-if="column.prop === 'engrave'">
                  <el-input :disabled="scope.row.isEngraveEmpty" v-model="scope.row.engrave" size="mini"></el-input>
                </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)" size="mini"></el-input>
                </template>
                <template v-else>
                  {{ scope.row[column.prop] }}
                </template>
              </template>
            </el-table-column>
          </template>
          <!-- *** fixed="right"  -->
          <el-table-column label="处置状态" prop="disposalStatus" align="center"
            :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>
          <!-- ***  fixed="right" -->
          <el-table-column label="处置时间" prop="disposeTime" align="center"
            :show-overflow-tooltip="true">
          </el-table-column>
          <!-- *** fixed="right" -->
          <el-table-column label="质检状态" prop="qualityStatus" align="center" 
            :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" fixed="right"
            :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <el-select @change="selectQualityResultsChange" 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">
            <!-- <template slot-scope="scope" >
              <el-input :disabled="type == 'detail'" v-model="scope.row.defaultValue" placeholder="请输入内容"></el-input>
             </template> -->
          </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>
import { save, update, getById, exeReportWork, queryQualitySamplContent, queryQualityTempleContent, queryQualityInventory } from '@/api/inspectionWork';
export default {
  props: {
    type: String,
    packingList: Array,
    sampleList: Array,
    schemeList: Array,
    loading: Boolean,
    form: Object,
    ids: String,
    activeName:String
  },
  data() {
    return {
      activeName: this.activeName,
      samplePagination: { currentPage: 1, pageSize: 10 },
      schemePagination: { currentPage: 1, pageSize: 10 },

      qualityResultsList: [{
        value: 1,
        label: '合格'
      },
      {
        value: 2,
        label: '不合格'
      },
      {
        value: 3,
        label: '让步接收'
      },
      ],
      tableColumns: [
        {
          label: '样品编码',
          prop: 'sampleCode',
          width: '200',
          align: 'center',
          fixed: 'left'
        },
        {
          label: '编码',
          prop: 'categoryCode',
          align: 'center',
          fixed: 'left'
        },
        {
          label: '名称',
          prop: 'categoryName',
          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: 'supplierName', align: 'center', width: '120' },
        { label: '供应商代号', prop: 'supplierCode', align: 'center', width: '120' },
        { label: '物料代号', prop: 'materielDesignation', align: 'center', slot: 'materielDesignation', width: '120' },
        { label: '客户代号', prop: 'clientCode', align: 'center', slot: 'clientCode', width: '120' },
        { label: '刻码', prop: 'engrave', align: 'center', slot: 'engrave', width: '120' },
        { label: '重量', prop: 'weight', align: 'center', slot: 'weight', width: '120' },
        { label: '重量单位', prop: 'weightUnit', align: 'center', width: 100 },
        { label: '仓库', prop: 'warehouseName', align: 'center', width: 100 },
        { 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' },
      ],

      conditionType: null,
      formData: {
        number: 1,
        sampleUnit: '',
        portion: null
      },
      rules: {
        number: [
          {
            required: true,
            message: '请输入',
            trigger: 'blur'
          },
        ],
        sampleUnit: [
          {
            required: true,
            message: '请选择样品单位',
            trigger: 'change'
          }
        ],
        portion: [
          {
            required: true,
            message: '请输入',
            trigger: 'blur'
          }
        ]

      },
    }
  },

  computed: {
    tableColumns1() {
      let arr = [
        // (this.btnType !== 'issued' || this.baseForm.qualityMode === 2)
        //   ? {
        //     columnKey: 'selection',
        //     type: 'selection',
        //     width: 45,
        //     align: 'center'
        //   }
        //   : null,
        {
          columnKey: 'selection',
          type: 'selection',
          width: 45,
          align: 'center'
        },
        {
          columnKey: 'index',
          label: '序号',
          type: 'index',
          width: 55,
          align: 'center',
          fixed: 'left'
        },
        {
          label: '编码',
          prop: 'categoryCode',
          width: 150,
          align: 'center',
          showOverflowTooltip: true
        },
        {
          label: '名称',
          prop: 'categoryName',
          width: '150',
          align: 'center',
          width: 120,
          showOverflowTooltip: true
        },
        { label: '批次号', prop: 'batchNo', align: 'center', width: 120, },
        { label: '发货条码', prop: 'barcodes', align: 'center' },
        {
          label: '包装编码', prop: 'packageNo', align: 'center',
          width: 120,
          showOverflowTooltip: true
        },
        { 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: 'supplierName', align: 'center', width: 120, showOverflowTooltip: true },
        { label: '供应商代号', prop: 'supplierCode', align: 'center', width: '120' },
        { label: '刻码', prop: 'engrave', align: 'center' },
        { label: '重量', prop: 'weight', align: 'center' },
        { label: '重量单位', prop: 'weightUnit', align: 'center' },
        {
          label: '仓库', prop: 'warehouseName', align: 'center',
          width: 120,
          showOverflowTooltip: true
        },
        { label: '货区', prop: 'areaName', align: 'center' },
        { label: '货架', prop: 'goodsShelfName', align: 'center' },
        { label: '货位', prop: 'goodsAllocationName', align: 'center' },
        {
          label: '生产日期', prop: 'productionDate', align: 'center',
          width: 120,
          showOverflowTooltip: true
        },
        {
          label: '采购日期', prop: 'purchaseDate', align: 'center',
          width: 120,
          showOverflowTooltip: true
        }
      ]
      return arr

    },
    // 分页后的样品列表
    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);
    }
  },
  created() {
    this.reload({ qualityWorkerId: this.ids });
  },
  methods: {
    async datasource({ page, limit, where }) {
      const res = await queryQualityInventory({ ...where, page, limit });
      return res;
    },

    reload(where) {
      this.$nextTick(() => {
        if (this.$refs.sourceTable && this.$refs.sourceTable.reload)
          this.$refs.sourceTable.reload({ page: 1, where: where });
      })
    },

    tableSelClear() {
      console.log('清空勾选')
      this.$refs.sourceTable.clearSelection();
    },
    handleSelectionChange(selection) {
      if (this.form.conditionType == 2){
        if (this.form.isUnpack == 2){
          this.$set(this.form, 'sampleNumber', this.formData.portion);
        }else{
          this.formData.portion = selection.length;
          this.$set(this.form, 'sampleNumber', selection.length);
        }
        this.formData.sampleUnit = selection[0]?.measureUnit;
        this.$set(this.form, 'sampleMeasureUnit', selection[0]?.measureUnit);
      }else if (this.form.conditionType == 1){
        this.$set(this.form, 'sampleNumber', this.formData.portion);
      }
      // this.formData.portion = selection.length;
      // this.formData.sampleUnit = selection[0]?.measureUnit;
      //
      // this.$set(this.form, 'sampleNumber', selection.length);
      // this.$set(this.form, 'sampleMeasureUnit', selection[0]?.measureUnit);

      this.$emit('handleSelectionChange', selection)
    },

    handleSampleNumber(val) {
      console.log('取样方式选择',this.form.isUnpack)
      console.log(val, 'val')
      this.conditionType = val;
      this.form.sampleUnit = ''
      this.$emit('getConditionType', val)
   
      //取整样
      // let data = this.$refs.sourceTable.getData()
      // this.$emit('getSelectedList')
      // if (this.selectedList.length == 0) {
      //   this.$message.warning('请先选择样品！');
      // }
      // if (val == 1) {
      //   // this.activeName = '2'
      //   this.$emit('handleSample1', val, data)
      // } else if (val == 2) {
      //   this.tableSelClear();
      //   this.$emit('handleSample1', val, data)
      // }
    },
    handleInputNumber(val) {
      let packingList = this.$refs.sourceTable.getData()

      const maxValue = packingList.length > 1 ? packingList.length : packingList[0].measureQuantity;

      if (val > maxValue) {
        this.$message.warning('数量不能大于计量数量！');
        this.formData.number = maxValue;
        return;
      }
    },
    handleInput(val) {
      debugger
      if (val == 0 || val == '' || val == null) {
        this.$refs.sourceTable.clearSelection();
        return
      }

      let packingList = this.$refs.sourceTable.getData();
      if (!packingList || packingList.length === 0) {
        return;
      }
      // 计算 packingList 中 measureQuantity 字段的总和
      const measureQuantitySum = packingList.reduce((sum, item) => {
        const quantity = Number(item.measureQuantity) || 0;
        return sum + quantity;
      }, 0);
      const portion = Number(this.formData.portion);
      // 清空当前选中
      this.$refs.sourceTable.clearSelection();
      debugger
      if (this.form.conditionType==2){
        // 确保 portion 不超过数据列表长度
        const safePortion = Math.min(portion, packingList.length);
        if (this.form.isUnpack == 2){
          const maxQuantity = Number(packingList[0].measureQuantity);
          if (portion > maxQuantity) {
            this.$message.warning('取样数量不能大于计量数量！');
            this.formData.portion = maxQuantity;
          }

        }else if (this.form.isUnpack == 1){
          if (portion > packingList.length) {
            this.$message.warning('取样数量不能大于来源清单数量！');
            this.formData.portion = packingList.length;
          }
        }
        packingList.slice(0, safePortion).forEach(row => {
          this.$refs.sourceTable.toggleRowSelection(row);
        });
      }else if (this.form.conditionType==1){
        // 确保 portion 不超过数据列表长度
        const safePortion = Math.min(portion, measureQuantitySum);
        if (portion > measureQuantitySum) {
          this.$message.warning('取样数量不能大于计量数量！');
          this.formData.portion = measureQuantitySum;
        }
        // 选中前 safePortion 行
        packingList.slice(0, safePortion).forEach(row => {
          this.$refs.sourceTable.toggleRowSelection(row, true);
        });
      }

      // if (packingList.length > 1) {
      //   if (portion > packingList.length) {
      //     this.$message.warning('取样数量不能大于来源清单数量！');
      //     this.formData.portion = packingList.length;
      //     return;
      //   }
      //   packingList.slice(0, this.formData.portion).forEach(row => {
      //     this.$refs.table12.toggleRowSelection(row);
      //   });
      // } else {
      //   const maxQuantity = Number(packingList[0].measureQuantity);
      //   if (portion > maxQuantity) {
      //     this.$message.warning('取样数量不能大于计量数量！');
      //     this.formData.portion = maxQuantity;
      //     return;
      //   }
      // }
    },
    changeSamUnit(val) {
      console.log(val, 'dddd')
      this.$emit('changeSamUnit', val)
    },
    handleSampleSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          //取小样 赋值右上角单位
          this.changeSamUnit(this.formData.sampleUnit)

          let params = {
            conditionType: this.conditionType,
            measureQ: this.formData.number,
            sampleUnit: this.formData.sampleUnit,
            portion: this.formData.portion
          }
          this.$emit('handleSampleSubmit', params)
        }
      })
    },



    handleClick(tab) {
      console.log(tab, 'tab')
      this.activeName = tab.name
    },
    tabsChange(val) {
      this.activeName = val
    },
    tabsConditionType(val) {
      this.conditionType = val
    },
    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)
    },
    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;
    },

    selectQualityResultsChange() {
      this.$emit('countQualityResults')
    }
  }
}
</script>