kd-aiot-frontend-qms/src/views/inspectionWork/edit.vue

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <header-title title="基本信息">
        <el-button @click="cancel">返回</el-button>
        <el-button type="primary" @click="save" :loading="loading">保存</el-button>
        <el-button type="primary" @click="handleReporting" :loading="loading">报工完成</el-button>
      </header-title>
      <base-info ref="baseInfoRefs" v-if="form" :form="form" :btnType="type"></base-info>
      <el-row>
        <header-title title="质检内容">
          <el-button type="primary" :loading="loading" @click="batchQuality(null,null,'report')">批量质检</el-button>
        </header-title>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="来源清单" name="1"></el-tab-pane>
          <el-tab-pane label="样品清单" name="2"></el-tab-pane>
          <el-tab-pane label="质检方案" name="3"></el-tab-pane>
        </el-tabs>
      </el-row>
      <el-row style="margin-top: 24px">
        <el-table v-show="activeName === '1'" v-if="packingList.length > 0" ref="showPackingListTable"
          :data="paginatedPackingList" tooltip-effect="dark" :max-height="300" border row-key="id">
          <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-table v-show="activeName === '2'" v-if="sampleList.length > 0" ref="showSampleListTable"
          :data="paginatedSampleList" tooltip-effect="dark" :max-height="300" border row-key="id"
          @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" fixed="left"></el-table-column>
          <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 v-model="scope.row.weight"></el-input>-->
<!--                </template>-->
                <template v-else>
                  {{ scope.row[column.prop] }}
                </template>
              </template>
            </el-table-column>
          </template>
          <el-table-column label="重量" prop="weight" align="center" width="100" fixed="right" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <el-input type="number" v-model="scope.row.weight" :min="0"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="重量单位" prop="weightUnit" align="center" width="80" fixed="right" :show-overflow-tooltip="true"></el-table-column>
          <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 ">返工</span>
              <span v-if="scope.row.disposalStatus == 2 ">返修</span>
              <span v-if="scope.row.disposalStatus == 3 ">报废</span>
              <span v-if="scope.row.disposalStatus == 4 ">降级使用</span>
              <span v-if="scope.row.disposalStatus == 5 ">让步接收</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="110" 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">
            <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"> 处置 </el-link>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination v-show="activeName === '2'" v-if="sampleList" @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"
          style="margin-top: 10px"></el-pagination>

        <!--  -->
        <el-table v-show="activeName === '3'" ref="showSchemeListTable" :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 v-show="activeName === '3'" @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"
          style="margin-top: 10px"></el-pagination>
      </el-row>
    </el-card>

    <sampleListDialog ref="detailRef" @handleConfirm="handleConfirm"></sampleListDialog>
  </div>
</template>

<script>
import baseInfo from './components/baseInfo.vue';

import { getCode } from '@/api/login';
import { save, update, getById, exeReportWork, queryQualitySamplContent, queryQualityTempleContent, queryQualityInventory } from '@/api/inspectionWork';

import dictMixins from '@/mixins/dictMixins';

// import term from './term';
import sampleListDialog from './components/sampleListDialog.vue';

import { finishPageTab } from '@/utils/page-tab-util';
export default {
  components: {
    baseInfo,
    // term
    sampleListDialog
  },
  mixins: [dictMixins],

  data() {
    const defaultForm = function () {
      return {
        code: '',
        qualityType: '',
        qualityModeproduceRoutingId: '',
        produceRoutingName: '',
        produceTaskId: '',
        produceTaskName: '',
        productName: '',
        productCode: '',
        batchNo: '',
        specification: '',
        modelType: '',
        brandNo: '',
        total: '',
        qualifiedNumber: '',
        noQualifiedNumber: '',
        groupId: '',
        groupName: '',
        qualityId: '',
        qualityName: '',
        qualityTime: '',
        hours: '',
        qualificationRate: '',
        noQualificationRate: '',
        totalWeight: '',
        sampleNumber: '',
        imgUrl: [],
      };
    };
    return {
      defaultForm,
      // 表单数据
      form: { ...defaultForm() },
      voList: [],

      // 表单验证规则
      categoryParamList: [],
      type: '',
      title: '',
      loading: false,

      tabTaskId: null,
      activeName: '2',
      qualityResultsList: [{
        value: 1,
        label: '合格'
      },
      {
        value: 2,
        label: '不合格'
      },
      {
        value: 3,
        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' },
        // { label: '重量单位', prop: 'weightUnit', align: 'center' },
        { 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' },
      ],

      packingList: [],
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },

      sampleList: [],
      samplePagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      schemeList: [],
      schemePagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      isValid: true,
      isStatus: true,
      SampleListbyReportList: [],

    };
  },
  watch: {
    '$route.query.id': {
      handler(id) {
        if (id) {
          this.getDetail();
        } else {
          this.form = { ...defaultForm() };

        }
      }
    },
  },
  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);
    }
  },
  created() {
    this.open()
    if (this.$route.query.id) {
      this.getDetail();
    }
  },
  methods: {

    handleSelectionChange(val) {
      console.log(val, '选中数据')
    },
    async open(type) {
      this.type = this.$route.query.type;
      this.title = this.type == 'add' ? '新增' : type == 'edit' ? '报工' : '详情';

      if (this.type == 'add') {
        const code = await getCode('quality_work_order_code');
        this.form.code = code;
      }
    },
    async getDetail() {
      getById(this.$route.query.id).then((res) => {
        this.form = res.data;

        this.tabTaskId =
          this.categoryParamList[0] && this.categoryParamList[0].id;

        if (this.form.groupId) {
          this.$nextTick(() => {
            if (this.$refs.baseInfoRefs) {
              this.$refs.baseInfoRefs.getUserList({
                groupId: this.form.groupId
              });
              this.$refs.baseInfoRefs.getTaskList();
            }
          });
        }
      });
      await this.queryQualityInventory()
      await this.queryQualitySamplContent()
      await this.queryQualityTempleContent()
    },
    async queryQualityInventory() {
      let res = await queryQualityInventory({ qualityWorkerId: this.$route.query.id });
      console.log(res, '清单列表');
      this.packingList = res;
      this.samplePagination.currentPage = 1;
      this.samplePagination.total = this.packingList.length;
    },
    async queryQualitySamplContent() {
      const res = await queryQualitySamplContent({ qualityWorkerId: this.$route.query.id })
      let addStatus = res.map((item) => {
        item.isValid = true;
        return {
          ...item
        }
      })
      console.log(addStatus, 'addStatus')
      //样品
      this.sampleList = addStatus;
      this.samplePagination.currentPage = 1;
      this.samplePagination.total = this.sampleList.length;
    },
    async queryQualityTempleContent() {
      const res = await queryQualityTempleContent({ qualityWorkerId: this.$route.query.id })
      console.log(res, '222');
      // 方案
      this.schemeList = res;
      this.schemePagination.currentPage = 1;
      this.schemePagination.total = this.schemeList.length;
    },
    handleClick(tab) {
      this.activeName = tab.name;
    },
    // 样品列表分页方法
    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;
    },
    /* 保存编辑 */
    save() {
      this.$refs.baseInfoRefs.$refs.form1.validate((valid) => {
        if (!valid) {
          return false;
        }
        this.loading = true;
        save(this.form)
          .then((msg) => {
            this.loading = false;
            this.$message.success(msg);
            this.handleClose();
            this.$emit('done');
          })
          .catch((e) => {
            this.loading = false;
          });
      });
    },
    update() {
      this.loading = true;
      this.form['status'] = 1;
      update({ ...this.form })
        .then((msg) => {
          this.loading = false;
          this.$message.success(msg);
          this.$emit('done');
        })
        .catch((e) => {
          this.loading = false;
        });
    },
    restForm() {
      this.form = { ...this.defaultForm() };
      this.$nextTick(() => {
        this.$refs.baseInfoRefs.$refs.form1.clearValidate();
      });
    },
    cancel() {
      finishPageTab();
      this.$router.go(-1);
    },
    handleDetail(index, row, type) {
      if (row.isStatus == undefined) {
        row.isStatus = true;
      }else {
        row.isStatus = false;
      }
      if (!this.sampleList[index] || !this.schemeList) {
        return;
      }

      const selectedData = this.sampleList[index];
      const mergedData = [{
        ...selectedData,
        children: [...this.schemeList]
      }];
      console.log(index, row, type, mergedData, 'index, row, type, mergedData')
      this.$refs.detailRef.openDia(index, row, type, mergedData,null);
    },
    // 报工
    handleReporting(index, row) {
      this.$refs.baseInfoRefs.$refs.form1.validate((valid) => {
        if (!valid) {
          return false;
        }
        let params = {
          ...this.form,
          sampleList: this.sampleList,
          planTemplateList: this.schemeList,
          qualityInventoryList: this.packingList
        }
        console.log(params, 'params')
        // return;
        exeReportWork(params)
          .then((msg) => {
            this.loading = false;
            this.$message.success(msg);
            this.handleClose();
            this.$emit('done');
          })
          .catch((e) => {
            this.loading = false;
          });
      })
    },
    //确认报工
    handleConfirm(list, index) {
      console.log(list)

      // 检查有效性
      for (const item of list) {
        for (const child of item.qualitySampleTemplateList) {

          console.log(child, 'child')
          if (!child.qualityResultContent || !child.qualityResults) {
            this.$message.error('请完善报工内容！');
            return;
          }
        }
      }

      // 处理数据
      const hasInvalidItem = list.some(item =>
        item.qualitySampleTemplateList.some(child => child.qualityResults === 2)
      );
      console.log('是否有不合格数据', hasInvalidItem)

      for (const item of list) {
        const filteredData = item.qualitySampleTemplateList.filter((item) =>
          item.qualityResults == 2
        );
        console.log(filteredData, '不合格数据')
        if (filteredData.length > -1) {
          this.form.noQualifiedNumber = filteredData.length;
          this.form.qualifiedNumber = this.form.total - filteredData.length;
        }
      }
      console.log(list, 'listlistlistlist')

      const processedList = list.map(item => {
        item.qualityResults = hasInvalidItem ? 2 : 1;
        item.qualityStatus = 1;
        // item.qualitySampleTemplateList = item.children;
        item.isValid = !hasInvalidItem
        // delete item.children;
        return {
          ...item,
        }
      });
      this.$set(this.sampleList, index, processedList[0]);

      console.log(this.sampleList, processedList, '222表')

      // this.SampleListbyReportList = processedList;

    },
    // 批量质检
    batchQuality(index, row,type){
      if (!this.isStatus){
        this.isStatus = false;
      }
      this.sampleList.forEach((item) => {
        item.children=this.schemeList;
      });
      this.$refs.detailRef.openDia(null, null,type, this.sampleList, this.isStatus)
    }
  }
};
</script>

<style lang="scss" scoped></style>