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">
              <div style="display: flex; justify-content: center">
                <span>{{ scope.row.symbol }}</span>
                <span v-if="scope.row.textType == 3">
                  {{ scope.row.minValue }}-{{ scope.row.maxValue }}
                </span>

                <span v-else>
                  <span>{{ scope.row.defaultValue }}</span>
                </span>

                {{ scope.row.unitName }}
              </div>
            </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>