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" v-if="type != 'detail'">保存</el-button>
        <el-button type="primary" @click="handleReporting" :loading="loading" v-if="type != 'detail'">报工完成</el-button>
      </header-title>
      <base-info ref="baseInfoRefs" v-if="form" :form="form" :btnType="type" :qualityType1="qualityType"
        @changeModel="changeModel" @changeNumber="changeNumber"></base-info>
      <el-row>
        <header-title title="质检内容">
          <el-button type="primary" :loading="loading" v-if="type != 'detail'"
            @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"
          @selection-change="handleSelectionChange1">
          <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 v-show="activeName === '1' && packingList.length > 0" @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-table v-show="activeName === '2'" 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>
                  {{ 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 && 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="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" 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 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" @handleDispose="handleDispose"></sampleListDialog>
    <sampleDisposeDialog ref="disposeRef" @handleDisposeConfirm="handleDisposeConfirm"></sampleDisposeDialog>
  </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 sampleDisposeDialog from './components/sampleDisposeDialog.vue';

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

  data() {
    const defaultForm = function () {
      return {
        code: '',
        qualityType: null,
        qualityModeproduceRoutingId: '',
        produceRoutingName: '',
        produceTaskId: '',
        produceTaskName: '',
        productName: '',
        productCode: '',
        batchNo: '',
        specification: '',
        modelType: '',
        brandNo: '',
        total: '',
        qualifiedNumber: '',
        noQualifiedNumber: '',
        groupId: '',
        groupName: '',
        qualityId: '',
        qualityName: '',
        qualityTime: '',
        hours: '',
        qualificationRate: '',
        noQualificationRate: '',
        totalWeight: '',
        sampleNumber: '',
        imgUrl: [],
        qualityTimeStart: '',
        qualityTimeEnd: ''
      };
    };
    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: [],
      qualityTimeStart: ''

    };
  },
  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: {

    checkSelectable(row, index) {
      // 只有当质检方式为抽检(qualityMode=2)时才可选
      return this.form.qualityMode === 2;
    },
    changeModel(val) {
      this.form.qualityMode = val;
      if (this.form.qualityMode == 1) {
        this.sampleList = this.packingList;
        this.samplePagination.currentPage = 1;
        this.samplePagination.total = this.packingList.length;
      } else {
        this.sampleList = [];
      }
    },
    changeNumber(val) {
      if (this.form.qualityMode !== 2) {
        return;
      }
      if (val <= 0) {
        this.$refs.showPackingListTable.clearSelection();
        return;
      }

      if (val > this.packingList.length) {
        this.$message.warning('取样数量不能大于物料明细总数！');
        return;
      }
      const rows = this.packingList.slice(0, val);
      rows.forEach((row) => {
        this.$refs.showPackingListTable.toggleRowSelection(row);
      });

    },
    getNowDate() {
      let date = new Date(),
        obj = {
          year: date.getFullYear(), //获取当前月份(0-11,0代表1月)
          month: date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
          strDate: date.getDate(), // 获取当前日(1-31)
          hour: date.getHours(), //获取当前小时(0 ~ 23)
          minute: date.getMinutes(), //获取当前分钟(0 ~ 59)
          second: date.getSeconds() //获取当前秒数(0 ~ 59)
        };
      Object.keys(obj).forEach((key) => {
        if (obj[key] < 10) obj[key] = `0${obj[key]}`;
      });
      return obj;
    },
    handleSelectionChange1(selection) {
      console.log(selection, '勾选列表');
      if (this.form.qualityMode === 2) {
        this.selectedList = selection;

        this.sampleList = selection;
        this.samplePagination.currentPage = 1;
        this.samplePagination.total = selection.length;
        this.form.sampleNumber = selection.length;
      }
    },

    async open() {
      this.type = this.$route.query.type;
      this.qualityType = this.$route.query.qualityType;
      this.title = this.type == 'add' ? '新增' : this.type == 'edit' ? '报工' : '详情';

      if (this.type == 'add') {
        const code = await getCode('quality_work_order_code');
        this.form.code = code;
      } else {
        if (this.$route.query.qualityTimeStart != '' || this.$route.query.qualityTimeStart != null || this.$route.query.qualityTimeStart != undefined) {
          this.qualityTimeStart = this.getNowTime();
          console.log(this.qualityTimeStart, '开始报工时间')
        }
      }
    },
    getNowTime() {
      const nowDate = this.getNowDate()
      return nowDate.year + '-' + nowDate.month + '-' + nowDate.strDate + ' ' + nowDate.hour + ':' + nowDate.minute + ':' + nowDate.second
    },
    getNowTimes() {
      const nowDate = this.getNowDate()
      return nowDate.year + '-' + nowDate.month + '-' + nowDate.strDate
    },
    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;
        item.disposeTime = item.disposeTime ? item.disposeTime.split(' ')[0] : null;
        item.sampleDate = item.sampleDate ? item.sampleDate.split(' ')[0] : null;
        return {
          ...item
        }
      })
      console.log(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;
    },
    // 来料清单列表分页方法
    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;
    },
    /* 保存编辑 */
    save() {
      this.$refs.baseInfoRefs.$refs.form1.validate((valid) => {
        if (!valid) {
          return false;
        }
        this.loading = true;
        let URL =
          this.type == 'add' ? save : this.type == 'edit' ? update : '';
        let params = {
          ...this.form,
          sampleList: this.sampleList,
          planTemplateList: this.schemeList,
          qualityInventoryList: this.packingList
        }
        URL(params)
          .then((msg) => {
            this.loading = false;
            this.$message.success(msg);
            this.cancel();
            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 (!this.sampleList[index] || !this.schemeList) {
        return;
      }
      const selectedData = [];
      selectedData.push(this.sampleList[index])

      this.$refs.detailRef.openDia(index, row, type, selectedData, null);
    },
    handleDispose(index, row, type) {
      if (!this.sampleList[index]) {
        return;
      }

      this.sampleList[index].sampleDate = this.getNowTimes();

      this.sampleList[index].disposeTime = this.getNowTimes();

      console.log(index, row, type, this.qualityType)

      this.$refs.disposeRef.openDispose(index, row, type, this.qualityType);
    },
    // 报工
    handleReporting(index, row) {
      this.$refs.baseInfoRefs.$refs.form1.validate((valid) => {
        if (!valid) {
          return false;
        }
        // let form = {
        //   qualityTimeEnd: this.getNowTime(),
        //   qualityTimeStart: this.qualityTimeStart,
        //   ...this.form,
        // }
        this.form.qualityTimeEnd = new Date(this.getNowTime())
        this.form.qualityTimeStart = new Date(this.qualityTimeStart)
        let params = {
          ...this.form,
          sampleList: this.sampleList,
          planTemplateList: this.schemeList,
          qualityInventoryList: this.packingList
        }
        console.log(params, 'params')
        exeReportWork(params)
          .then((msg) => {
            this.loading = false;
            this.$message.success(msg);
            this.cancel();
            this.$emit('done');
          })
          .catch((e) => {
            this.loading = false;
          });
      })
    },
    // 处理确认事件
    handleDisposeConfirm(row, index) {
      if (index > -1) {
        this.$set(this.sampleList, index, row)
      }
    },
    //确认报工
    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;
          }
        }
      }
      console.log(list, 'listlistlistlist')
      list.forEach((item) => {
        if (item.qualitySampleTemplateList.some(child => child.qualityResults === 2)) {
          item.isValid = false;
          item.qualityResults = 2;
        } else {
          item.isValid = true;
          item.qualityResults = 1;
        }
        item.qualityStatus = 1;
      })
      if (index != null) {
        this.$set(this.sampleList, index, list[0]);
      } else {
        this.$set(this.sampleList, null, list);
      }
      console.log(this.sampleList, '222表')

    },
    // 批量质检
    batchQuality(index, row, type) {
      this.$refs.detailRef.openDia(null, null, type, this.sampleList, null)
    }
  }
};
</script>

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