jonhon-mes-web/src/views/zhgd-work/retrospectDefend/components/oneRetrospectDefend.vue

<template>
  <div class="content-box">
    <el-form ref="form" inline @submit.native.prevent>
      <el-row>
        <el-col :span="5">
          <el-form-item label="流程卡号：">
            <el-input
              ref="codeFocus"
              v-model="cardNo"
              placeholder="请扫描流程卡号"
              @keyup.enter.native="codeKeyUp"
            />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="同槽编号：">
            <el-input
              ref="codeFocus"
              v-model="mtnCode"
              placeholder="请扫描同槽编号"
              @keyup.enter.native="codeKeyUpMtnCode"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item style="margin: 0px 20px 0px 20px">
            <el-switch v-model="line" active-text="上线前" inactive-text="下线后" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button
              :disabled="wpList.length == 0"
              style="margin-top: 4px"
              type="primary"
              @click="onSubmit"
              >保存</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="wpList" :export-excel="false" :height="400" border>
      <el-table-column type="index" width="50px" align="center" />
      <el-table-column label="车间订单号" align="center" prop="poCode" />
      <el-table-column label="产品号" align="center" prop="partCode" />
      <el-table-column label="批次号" align="center" prop="batchNo" />
      <el-table-column label="当前工序" align="center" prop="currentWpTitle" />
      <el-table-column align="center" width="100" fixed="right" label="操作">
        <template #default="scope">
          <el-button type="text" @click="deleteRow(scope.row.currentWpId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="color: rgb(85, 85, 243)">维护电子档案</span>
      </div>

      <el-form ref="form" :model="formData" :rules="rulesMold" inline style="margin-top: 10px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="设备编码：" prop="ecId">
              <jhSelect
                :value="formData.ecId"
                @input="val => (formData.ecId = val)"
                placeholder="请搜索选择"
                api-url="/blade-desk/processMaintenance/queryEquipmentCard"
                echo-api="/blade-desk/processMaintenance/queryEquipmentCard"
                echoParamsKey="ids"
                echo-method="get"
                api-method="get"
                list-key="records"
                total-key="total"
                label-key="deviceCode"
                value-key="id"
                search-key="deviceCode"
                :debounce-time="500"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="模板：" prop="rfpId">
              <el-select
                v-model="formData.rfpId"
                clearable
                placeholder="请选择"
                @change="rbFilePreserveChange"
                style="width: 220px"
              >
                <el-option
                  v-for="item in dsRbFilePreserveList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="tableBoxs">
        <table
          v-if="preserveSlotList.length > 0"
          id="cus-table"
          cellspacing="0"
          style="width: 100%"
        >
          <tr>
            <td colspan="4">槽位/工步</td>
            <td colspan="4">工艺要求</td>
            <td colspan="3">实际参数</td>
          </tr>
          <template v-for="(itemSlot, indexSlot) in preserveSlotList" :key="itemSlot + indexSlot">
            <component
              :is="getTemplateComponent(itemSlot.rfpsType)"
              :itemSlot="itemSlot"
              :indexSlot="indexSlot"
              :itemType="'电子档案维护'"
            />
          </template>
        </table>
      </div>
    </el-card>
  </div>
</template>
<script>
import {
  loadCurrentWp,
  saveRetrospectDefend,
  getDataByMtnCodeRb,
} from '@/api/zhgd-work/retrospectDefend.js';
import { getByRfpId, getRbFilePreserveByWpId } from '@/api/zhgd-work/eleFilesEdit.js';
import Templates from '../../../qualityTemplate/index.js';
import { getTemplateComponent } from '@/utils/templateMapper.js';
import jhSelect from '@/components/jh-select/index.vue';
export default {
  components: {
    ...Templates,
    jhSelect,
  },

  data() {
    return {
      cardNo: '',
      mtnCode: '',
      dsRbFilePreserveList: [],
      preserveSlotList: [],
      wpList: [],
      line: true,
      formData: { ecId: null, rfpId: null },
      rulesMold: {
        ecId: [{ required: true, message: '请选择设备编码' }],
        rfpId: [{ required: true, message: '请选择模板' }],
        // ecId: [this.$validation.required],
        // rfpId: [this.$validation.required],
      },
    };
  },
  methods: {
    getTemplateComponent(type) {
      const componentName = getTemplateComponent(type);
      return componentName;
    },
    getMaterialMess(itemChild, itemSlot) {
      if (itemChild.paramValue) {
        getDataByMtnCodeRb({ rlsId: itemChild.paramValue }).then(res => {
          const { coGoods } = res.data.data;
          if (coGoods) {
            const { goodsCode, goodsName, checkoutCode, releasenoTime } = coGoods;
            if (itemSlot.rfpsType == 5) {
              // 模板六
              itemSlot.childrenList[1].paramValue = goodsCode;
              itemSlot.childrenList[2].paramValue = goodsName;
              itemSlot.childrenList[3].paramValue = checkoutCode;
              itemSlot.childrenList[4].paramValue = releasenoTime;
            } else if (itemSlot.rfpsType == 6) {
              // 模板六
              itemSlot.childrenList[2].paramValue = goodsCode;
              itemSlot.childrenList[3].paramValue = goodsName;
              itemSlot.childrenList[4].paramValue = checkoutCode;
              itemSlot.childrenList[5].paramValue = releasenoTime;
            } else if (itemSlot.rfpsType == 13) {
              // 模板十三
              itemSlot.childrenList[0].paramValue = goodsCode;
              itemSlot.childrenList[1].paramValue = goodsName;
              itemSlot.childrenList[2].paramValue = checkoutCode;
              itemSlot.childrenList[3].paramValue = releasenoTime;
            } else if (itemSlot.rfpsType == 14) {
              // 模板十四
              if (itemChild.detailIndex == 5) {
                itemSlot.childrenList[4].paramValue = goodsCode;
                itemSlot.childrenList[5].paramValue = goodsName;
                itemSlot.childrenList[6].paramValue = checkoutCode;
                itemSlot.childrenList[7].paramValue = releasenoTime;
              } else if (itemChild.detailIndex == 9) {
                itemSlot.childrenList[8].paramValue = goodsCode;
                itemSlot.childrenList[9].paramValue = goodsName;
                itemSlot.childrenList[10].paramValue = checkoutCode;
                itemSlot.childrenList[11].paramValue = releasenoTime;
              }
            } else if (itemSlot.rfpsType == 15) {
              // 模板十五
              if (itemChild.detailIndex == 7) {
                itemSlot.childrenList[6].paramValue = goodsCode;
                itemSlot.childrenList[7].paramValue = goodsName;
                itemSlot.childrenList[8].paramValue = checkoutCode;
                itemSlot.childrenList[9].paramValue = releasenoTime;
              } else if (itemChild.detailIndex == 11) {
                itemSlot.childrenList[10].paramValue = goodsCode;
                itemSlot.childrenList[11].paramValue = goodsName;
                itemSlot.childrenList[12].paramValue = checkoutCode;
                itemSlot.childrenList[13].paramValue = releasenoTime;
              }
            } else if (itemSlot.rfpsType == 16) {
              // 模板十六
              if (itemChild.detailIndex == 5) {
                itemSlot.childrenList[4].paramValue = goodsCode;
                itemSlot.childrenList[5].paramValue = goodsName;
                itemSlot.childrenList[6].paramValue = checkoutCode;
                itemSlot.childrenList[7].paramValue = releasenoTime;
              } else if (itemChild.detailIndex == 9) {
                itemSlot.childrenList[8].paramValue = goodsCode;
                itemSlot.childrenList[9].paramValue = goodsName;
                itemSlot.childrenList[10].paramValue = checkoutCode;
                itemSlot.childrenList[11].paramValue = releasenoTime;
              } else if (itemChild.detailIndex == 13) {
                itemSlot.childrenList[12].paramValue = goodsCode;
                itemSlot.childrenList[13].paramValue = goodsName;
                itemSlot.childrenList[14].paramValue = checkoutCode;
                itemSlot.childrenList[15].paramValue = releasenoTime;
              }
            } else if (itemSlot.rfpsType == 17) {
              // 模板十七
              itemSlot.childrenList[4].paramValue = goodsCode;
              itemSlot.childrenList[5].paramValue = goodsName;
              itemSlot.childrenList[6].paramValue = checkoutCode;
              itemSlot.childrenList[7].paramValue = releasenoTime;
            } else if (itemSlot.rfpsType == 19) {
              // 模板十九
              itemSlot.childrenList[0].paramValue = goodsCode;
              itemSlot.childrenList[1].paramValue = goodsName;
              itemSlot.childrenList[2].paramValue = checkoutCode;
              itemSlot.childrenList[3].paramValue = releasenoTime;
            }
          }
        });
        // this.$ajax
        //   .post('prMakeRec/getMaterialMessById', {
        //     rlsId: itemChild.paramValue,
        //   })
        //   .then(res => {
        //     if (this.$ifAjax(res)) {
        //   const { coGoods } = res.data;
        //   if (coGoods) {
        //     const { goodsCode, goodsName, checkoutCode, releasenoTime } = coGoods;
        //     if (itemSlot.rfpsType == 5) {
        //       // 模板六
        //       itemSlot.childrenList[1].paramValue = goodsCode;
        //       itemSlot.childrenList[2].paramValue = goodsName;
        //       itemSlot.childrenList[3].paramValue = checkoutCode;
        //       itemSlot.childrenList[4].paramValue = releasenoTime;
        //     } else if (itemSlot.rfpsType == 6) {
        //       // 模板六
        //       itemSlot.childrenList[2].paramValue = goodsCode;
        //       itemSlot.childrenList[3].paramValue = goodsName;
        //       itemSlot.childrenList[4].paramValue = checkoutCode;
        //       itemSlot.childrenList[5].paramValue = releasenoTime;
        //     } else if (itemSlot.rfpsType == 13) {
        //       // 模板十三
        //       itemSlot.childrenList[0].paramValue = goodsCode;
        //       itemSlot.childrenList[1].paramValue = goodsName;
        //       itemSlot.childrenList[2].paramValue = checkoutCode;
        //       itemSlot.childrenList[3].paramValue = releasenoTime;
        //     } else if (itemSlot.rfpsType == 14) {
        //       // 模板十四
        //       if (itemChild.detailIndex == 5) {
        //         itemSlot.childrenList[4].paramValue = goodsCode;
        //         itemSlot.childrenList[5].paramValue = goodsName;
        //         itemSlot.childrenList[6].paramValue = checkoutCode;
        //         itemSlot.childrenList[7].paramValue = releasenoTime;
        //       } else if (itemChild.detailIndex == 9) {
        //         itemSlot.childrenList[8].paramValue = goodsCode;
        //         itemSlot.childrenList[9].paramValue = goodsName;
        //         itemSlot.childrenList[10].paramValue = checkoutCode;
        //         itemSlot.childrenList[11].paramValue = releasenoTime;
        //       }
        //     } else if (itemSlot.rfpsType == 15) {
        //       // 模板十五
        //       if (itemChild.detailIndex == 7) {
        //         itemSlot.childrenList[6].paramValue = goodsCode;
        //         itemSlot.childrenList[7].paramValue = goodsName;
        //         itemSlot.childrenList[8].paramValue = checkoutCode;
        //         itemSlot.childrenList[9].paramValue = releasenoTime;
        //       } else if (itemChild.detailIndex == 11) {
        //         itemSlot.childrenList[10].paramValue = goodsCode;
        //         itemSlot.childrenList[11].paramValue = goodsName;
        //         itemSlot.childrenList[12].paramValue = checkoutCode;
        //         itemSlot.childrenList[13].paramValue = releasenoTime;
        //       }
        //     } else if (itemSlot.rfpsType == 16) {
        //       // 模板十六
        //       if (itemChild.detailIndex == 5) {
        //         itemSlot.childrenList[4].paramValue = goodsCode;
        //         itemSlot.childrenList[5].paramValue = goodsName;
        //         itemSlot.childrenList[6].paramValue = checkoutCode;
        //         itemSlot.childrenList[7].paramValue = releasenoTime;
        //       } else if (itemChild.detailIndex == 9) {
        //         itemSlot.childrenList[8].paramValue = goodsCode;
        //         itemSlot.childrenList[9].paramValue = goodsName;
        //         itemSlot.childrenList[10].paramValue = checkoutCode;
        //         itemSlot.childrenList[11].paramValue = releasenoTime;
        //       } else if (itemChild.detailIndex == 13) {
        //         itemSlot.childrenList[12].paramValue = goodsCode;
        //         itemSlot.childrenList[13].paramValue = goodsName;
        //         itemSlot.childrenList[14].paramValue = checkoutCode;
        //         itemSlot.childrenList[15].paramValue = releasenoTime;
        //       }
        //     } else if (itemSlot.rfpsType == 17) {
        //       // 模板十七
        //       itemSlot.childrenList[4].paramValue = goodsCode;
        //       itemSlot.childrenList[5].paramValue = goodsName;
        //       itemSlot.childrenList[6].paramValue = checkoutCode;
        //       itemSlot.childrenList[7].paramValue = releasenoTime;
        //     } else if (itemSlot.rfpsType == 19) {
        //       // 模板十九
        //       itemSlot.childrenList[0].paramValue = goodsCode;
        //       itemSlot.childrenList[1].paramValue = goodsName;
        //       itemSlot.childrenList[2].paramValue = checkoutCode;
        //       itemSlot.childrenList[3].paramValue = releasenoTime;
        //     }
        //   }
        // }
        //   });
      }
    },
    deleteRow(currentWpId) {
      this.wpList.forEach((item, index) => {
        if (item.currentWpId === currentWpId) {
          this.wpList.splice(index, 1);
        }
      });
    },
    codeKeyUp() {
      if (this.cardNo) {
        this.commonMethod(this.cardNo);
      }
    },
    commonMethod(item) {
      if (item) {
        loadCurrentWp({ cardNo: item }).then(res => {
          const obj = this.wpList.find(item => {
            return item.wpId == res.data.data.wpId;
          });
          if (obj != null) {
            return this.$message.warning('此订单已存在');
          }
          this.dsRbFilePreserveList = [];
          this.wpList.push(res.data.data);
          this.getRbFilePreserve(res.data.data.wpId);
        });
        // this.$ajax.get('prMakeRec/loadCurrentWp/' + item).then(res => {
        //   if (this.$ifAjax(res)) {
        // const obj = this.wpList.find(item => {
        //   return item.currentWpId == res.data.currentWpId;
        // });
        // if (obj != null) {
        //   return this.$message.warning('此订单已存在');
        // }
        // this.dsRbFilePreserveList = [];
        // this.wpList.push(res.data);
        // this.getRbFilePreserve(res.data.currentWpId);
        //   }
        // });
      }
    },
    codeKeyUpMtnCode() {
      if (this.mtnCode) {
        loadPrMacToolUseByMtnCode({ mtnCode: this.mtnCode }).then(res => {
          const list = res.data.data;
          for (var i = 0; i < list.length; i++) {
            this.commonMethod(list[i]);
          }
        });
        // this.$ajax.get('prMacToolUse/loadPrMacToolUseByMtnCode/' + this.mtnCode).then(res => {
        //   if (this.$ifAjax(res)) {
        // console.log(res);
        // const list = res.data;
        // for (var i = 0; i < list.length; i++) {
        //   this.commonMethod(list[i]);
        // }
        //   }
        // });
      }
    },
    // 获取电子档案维护模板
    getRbFilePreserve(wpId) {
      getRbFilePreserveByWpId({ wpId: wpId }).then(res => {
        this.dsRbFilePreserveList = res.data.data;
        this.preserveSlotList = [];
      });
      // this.$ajax
      //   .post('dsRbFilePreserve/getRbFilePreserveByWpId', {
      //     wpId,
      //   })
      //   .then(res => {
      //     if (this.$ifAjax(res)) {
      //       this.dsRbFilePreserveList = res.data;
      //       this.preserveSlotList = [];
      //     }
      //   });
    },
    rbFilePreserveChange() {
      getByRfpId({ rfpId: this.formData.rfpId }).then(res => {
        this.mtnCode = null;
        this.preserveSlotList = res.data.data.preserveSlotList;
      });
      // this.$ajax.get('dsRbFilePreserveSlot/getByRfpId/' + this.formData.rfpId).then(res => {
      //   if (this.$ifAjax(res)) {
      //     const { preserveSlotList } = res.data;
      //     this.preserveSlotList = preserveSlotList;
      //     console.log(preserveSlotList);
      //   }
      // });
    },
    onSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const wpIdList = [];
          this.wpList.forEach(item => {
            wpIdList.push(item.currentWpId);
          });
          let query = {
            wpIdList: wpIdList,
            ecId: this.formData.ecId,
            rfpId: this.formData.rfpId,
            line: this.line,
            produceMonitorFileSlotVOList: this.preserveSlotList,
          };
          saveRetrospectDefend(query).then(res => {
            this.$message.success('保存成功');
            this.$refs.form.resetFields();
            this.formData = {};
            this.cardNo = '';
            this.wpList = [];
            this.preserveSlotList = [];
          });
          // this.$ajax
          //   .post('prMakeRec/saveRetrospectDefend', {
          //     wpIdList,
          // ecId: this.formData.ecId,
          // rfpId: this.formData.rfpId,
          // line: this.line,
          // preserveSlotList: this.preserveSlotList,
          //   })
          //   .then(res => {
          //     if (this.$ifAjax(res)) {
          // this.$message.success(this.$t('global.saveOk'));
          // this.$refs.form.resetFields();
          // this.formData = {};
          // this.cardNo = '';
          // this.wpList = [];
          // this.preserveSlotList = [];
          //     }
          //   });
        }
      });
    },
  },
};
</script>

<style lang="scss">
.content-box {
  height: calc(100vh - 40px - 40px - 20px - 10px - 51px - 60px);
  overflow-y: auto;
}
.tableBoxs {
  min-height: 100%;
  padding-bottom: 30px;
  table {
    tr {
      page-break-inside: avoid;
    }
    td {
      width: 168px;
      height: 30px;
      border: 1px solid #000;
      background: transparent;
      color: #000;
      font-size: 14px;
      text-align: center;
      padding: 0;
      margin: 0;
      :deep(.el-input__inner) {
        text-align: center;
        height: 26px !important;
        width: 80% !important;
      }
    }
  }
}
.box-card {
  margin-top: 10px !important;
}
</style>
<style lang="scss" scoped>
:deep(.el-form--inline .el-form-item) {
  margin-bottom: 5px;
}
</style>