HwMes/hw-ui/src/views/mes/productplan/editProductPlan.vue

<template>
  <div>
    <el-card>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-divider content-position="left"><span style="font-weight: bold; font-size: larger;">工单信息</span></el-divider>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="工单号：">{{ form.orderCode }}</el-form-item>
            <el-form-item label="成品编码：">{{ form.materialCode }}</el-form-item>
            <el-form-item label="计划开始时间：">{{ parseTime(form.planBeginTime) }}</el-form-item>
            <el-form-item label="计划数量/已派工数量/完成数量：" label-width="220px">
              {{ form.planAmount }}/{{ form.dispatchAmount }}/{{ form.completeAmount }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工艺路线：">{{ form.dispatchName }}</el-form-item>
            <el-form-item label="成品名称：">{{ form.materialName }}</el-form-item>
            <el-form-item label="计划结束时间：">{{ parseTime(form.planEndTime) }}</el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left"><span style="font-weight: bold; font-size: larger;">派工信息</span></el-divider>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button icon="el-icon-plus" size="mini" type="primary" @click="handleAddMesProductPlan">新增
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteMesProductPlan"
                       :disabled="single">删除
            </el-button>
          </el-col>
        </el-row>
        <el-table ref="mesProductPlan" :data="mesProductPlanList"
                  :row-class-name="rowMesProductPlanIndex" @selection-change="handleMesProductPlanSelectionChange">
          <el-table-column align="center" type="selection" width="50"/>
          <el-table-column align="center" label="序号" prop="index" width="50" v-if="false"/>
          <el-table-column align="center" label="派工单号" prop="dispatchCode" width="290">
            <template slot-scope="scope">
              <el-input v-model="scope.row.dispatchCode" :disabled="true"/>
            </template>
          </el-table-column>
          <el-table-column align="center" label="工序" prop="processName" width="140">
            <template slot-scope="scope">
              <el-input v-model="scope.row.processName" :disabled="true"/>
            </template>
          </el-table-column>
          <el-table-column align="center" label="步骤" prop="processOrder">
            <template slot-scope="scope">
              <el-input v-model="scope.row.processOrder" :disabled="true"/>
            </template>
          </el-table-column>
          <el-table-column align="center" label="工位" prop="stationName" width="140">
            <template slot-scope="scope">
              <el-input v-model="scope.row.stationName" :disabled="true"/>
            </template>
          </el-table-column>
          <el-table-column align="center" label="派工数量" prop="planAmount" width="100">
            <template slot-scope="scope">
              <el-input v-model="scope.row.planAmount" :disabled="scope.row.oldRowFlag"/>
            </template>
          </el-table-column>
          <el-table-column align="center" label="派工标准工时" prop="productionTime" width="100">
            <template slot-scope="scope">
              <el-input v-model="scope.row.productionTime" :disabled="scope.row.oldRowFlag"/>
            </template>
          </el-table-column>
          <el-table-column align="center" label="计划开始时间" prop="planBeginTime" width="230">
            <template slot-scope="scope">
              <el-date-picker v-model="scope.row.planBeginTime" :disabled="scope.row.oldRowFlag" clearable
                              placeholder="请选择计划开始时间"
                              type="datetime" value-format="yyyy-MM-dd HH:mm:ss"/>
            </template>
          </el-table-column>
          <el-table-column align="center" label="计划完成时间" prop="planEndTime" width="230">
            <template slot-scope="scope">
              <el-date-picker v-model="scope.row.planEndTime" :disabled="scope.row.oldRowFlag" clearable
                              placeholder="请选择计划完成时间"
                              type="datetime" value-format="yyyy-MM-dd HH:mm:ss"/>
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态" prop="planStatus" width="150">
            <template slot-scope="scope">
              <el-select v-model="scope.row.planStatus" :disabled="true" placeholder="请选择状态">
                <el-option
                  v-for="dict in dict.type.product_status"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" class-name="small-padding fixed-width" label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                icon="el-icon-search"
                size="mini"
                type="primary"
                @click="handleDrawing(scope.row)"
              >图纸
              </el-button>
              <el-button
                icon="el-icon-search"
                size="mini"
                type="success"
                @click="handleSOP(scope.row)"
              >SOP
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <el-form label-width="100px">
        <el-form-item style="text-align: center;margin-left:-100px;margin-top:10px;">
          <el-button type="primary" @click="submitForm()">提交</el-button>
          <el-button @click="close()">返回</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-dialog
      :visible.sync="blueprintModel"
      title="上传图纸"
      width="30%"
      @before-close="blueprintModel = false">
      <el-upload
        single
        ref="drawingUpload"
        list-type="picture-card"
        action="uploadImgUrl"
        :auto-upload="true"
        :limit="limit"
        :headers="headers"
        :before-upload="handleBeforeUpload"
        :http-request="httpRequest"
        :on-exceed="handleExceed"
        :file-list="fileList"
      >
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{file}">
          <img
            v-if="isAssetTypeAnImage(file.name)"
            :alt="file.name"
            :src="file.url" class="el-upload-list__item-thumbnail"
          >
          <span v-else>{{ file.name }}</span>
          <span class="el-upload-list__item-actions">
        <span
          v-if="isAssetTypeAnImage(file.name)"
          class="el-upload-list__item-preview"
          @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
          class="el-upload-list__item-delete"
          @click="handleDownload(file)"
        >
          <i class="el-icon-download"></i>
        </span>
        <span
          class="el-upload-list__item-delete"
          @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
        </div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <!-- 上传提示 -->
    <div class="el-upload__tip" slot="tip" v-if="isShowTip">
      请上传
      <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b></template>
      <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b></template>
      的文件
    </div>
    <el-button type="primary" @click="drawingFileUploadSubmit">确 定</el-button>
    <el-button @click="blueprintModel = false">取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :visible.sync="sopViewModel"
      title="上传SOP附件"
      width="30%"
      @before-close="sopViewModel = false">
      <el-upload
        single
        ref="drawingUpload"
        list-type="picture-card"
        action="uploadImgUrl"
        :auto-upload="true"
        :limit="limit"
        :headers="headers"
        :before-upload="handleBeforeUpload"
        :http-request="httpRequest"
        :on-exceed="handleExceed"
        :file-list="fileList"
      >
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{file}">
          <img
            v-if="isAssetTypeAnImage(file.name)"
            :alt="file.name"
            :src="file.url" class="el-upload-list__item-thumbnail"
          >
          <span v-else>{{ file.name }}</span>
          <span class="el-upload-list__item-actions">
        <span
          v-if="isAssetTypeAnImage(file.name)"
          class="el-upload-list__item-preview"
          @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
          class="el-upload-list__item-delete"
          @click="handleDownload(file)"
        >
          <i class="el-icon-download"></i>
        </span>
        <span
          class="el-upload-list__item-delete"
          @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
        </div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <!-- 上传提示 -->
    <div class="el-upload__tip" slot="tip" v-if="isShowTip">
      请上传
      <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b></template>
      <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b></template>
      的文件
    </div>
    <el-button type="primary" @click="sopFileUploadSubmit">确 定</el-button>
    <el-button @click="sopViewModel = false">取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :visible.sync="pictureDetailModel"
      title="图纸预览"
      width="800"
      append-to-body
    >
      <img
        :src="dialogImageUrl"
        style="display: block; max-width: 100%; margin: 0 auto"
      />
    </el-dialog>

  </div>
</template>

<script>
import {getProductOrder, updateProductOrder} from "@//api/mes/productOrder";
import {
  delProductplan,
  getDispatchCode, getDispatchDrawingList, getDispatchSOPAttachList,
  getProductPlan,
  orderAddMesProductPlanList,
  updateProductplan,
  uploadFile
} from "@//api/mes/productplan";
import {getStationByRouteId} from "@//api/mes/baseRoute";
import {getToken} from "@//utils/auth";

export default {
  name: "productPlanEdit",
  dicts: ['product_status'],
  props: {
    value: [String, Object, Array, Number],
    // 文件数量限制
    limit: {
      type: Number,
      default: 3,
    },
    // 文件大小限制(MB)
    fileSize: {
      type: Number,
      default: 5,
    },
    // 文件类型, 例如['png', 'jpg', 'jpeg']
    fileType: {
      type: Array,
      default: () => ["png", "jpg", "jpeg"],
    },
    // 是否显示提示
    isShowTip: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      blueprintModel: false,
      sopViewModel: false,
      pictureDetailModel: false,
      // 图片预览地址
      dialogImageUrl: '',
      // 非单个禁用
      single: true,
      checkedMesProductPlanList: [],
      // 上传的文件服务器地址
      uploadImgUrl: process.env.VUE_APP_BASE_API,
      // 选中选项卡的 name
      activeName: "columnInfo",
      // 表格的高度
      tableHeight: document.documentElement.scrollHeight - 245 + "px",
      // 表信息
      tables: [],
      // 表列信息
      columns: [],
      // 生产计划表格数据
      mesProductPlanList: [],
      // 表详细信息
      info: {},
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        productOrderId: [
          {required: true, message: "生产工单ID不能为空", trigger: "blur"}
        ],
        planCode: [
          {required: true, message: "计划编号不能为空", trigger: "blur"}
        ],
        dispatchCode: [
          {required: true, message: "派工单号不能为空", trigger: "blur"}
        ],
        materialId: [
          {required: true, message: "物料ID不能为空", trigger: "blur"}
        ],
        materialBomId: [
          {required: true, message: "物料bomID不能为空", trigger: "blur"}
        ],
        stationId: [
          {required: true, message: "工位ID不能为空", trigger: "blur"}
        ],
        planStatus: [
          {required: true, message: "计划状态不能为空", trigger: "change"}
        ],
        isFlag: [
          {required: true, message: "是否标识不能为空", trigger: "change"}
        ],
      },
      // 文件列表
      fileList: [],
      // 上传文件回调列表
      uploadList: [],
      //文件上传-生产派工对象
      addProductPlanObject: {},
      headers: {
        Authorization: "Bearer " + getToken(),
      },
    };
  },
  created() {
    const productOrderId = this.$route.params && this.$route.params.productOrderId;
    if (productOrderId) {
      // 获取表详细信息
      getProductOrder(productOrderId).then(res => {
        this.form = res.data;
      });
      getProductPlan({productOrderId: productOrderId}).then(res => {
        res.data.forEach(e => {
          // 新添加列标识 false=新添加，true=历史行
          e.oldRowFlag = true;
          this.mesProductPlanList.push(e);
        })
      })
    }
  },
  methods: {
    isAssetTypeAnImage(ext) {
      let suffix = ext.lastIndexOf(".");
      let name = ext.substr(suffix + 1);
      return ['png', 'jpg', 'jpeg'].includes(name.toLowerCase())
    },
    /** 提交按钮 */
    submitForm() {
      let dataList = this.mesProductPlanList.filter(plan => !plan.oldRowFlag);
      if (dataList.length === 0) {
        this.close();
        return;
      }
      // 校验派工数量(已派工数量 + 派工数量 <= 计划数量)
      // 按照processId分组，所有分组的planAmount之和是否相等，相等后输出planAmount之和的值
      const sumList = dataList.reduce((result, {processId, planAmount}) => {
        const numericAmount = parseInt(planAmount, 10);
        if (!this.isPositiveInteger(numericAmount)) {
          this.$modal.msgError("派工数量须为大于等于0的正整数！");
          return;
        }
        result[processId] = (result[processId] || 0) + numericAmount;
        return result;
      }, {});

      const uniqueSum = new Set(Object.values(sumList));
      if (uniqueSum.size === 1) {
        const finalSum = Array.from(uniqueSum)[0];
        let dispatchedAmount = this.form.dispatchAmount + finalSum;
        if (dispatchedAmount > this.form.planAmount) {
          this.$modal.msgError("每个工序的派工数量之和需小于等于该工单计划数量！");
          return;
        }
        dataList.forEach(e => {
            e.dispatchedAmount = dispatchedAmount;
          }
        )
      } else {
        this.$modal.msgError("每个工序的派工数量之和需相等！");
        return;
      }

      orderAddMesProductPlanList(dataList).then(res => {
        this.$modal.msgSuccess(res.msg);
        this.close();
      });
    },

    /** 删除按钮操作 */
    handleDeleteMesProductPlan() {
      let productPlan = this.checkedMesProductPlanList[0];
      this.$modal.confirm('是否确认删除生产派工编号为"' + productPlan.dispatchCode + '"的数据项？').then(function () {
        return true;
      }).then(() => {
        if (productPlan.planId === undefined || productPlan.planId === null) {
          //新增删除
          const mesProductPlanDetailList = this.mesProductPlanList;
          this.mesProductPlanList = mesProductPlanDetailList.filter(function (item) {
            return productPlan.dispatchCode !== item.dispatchCode
          });
        } else {
          //历史删除
          const delList = this.mesProductPlanList;
          let dispatchSum = 0;
          try {
            const planIds = delList.filter(function (item) {
              return productPlan.dispatchCode === item.dispatchCode
            }).map(item => {
              if (item.planStatus !== '1') {
                throw Error("只能删除未派工状态的生产派工单！");
              }
              if (item.processId === productPlan.processId) {
                dispatchSum = dispatchSum + item.planAmount;
              }
              return item.planId;
            });
            dispatchSum = this.form.dispatchAmount - dispatchSum;
            delProductplan(planIds).then(res =>{
              // 更新生产工单
              updateProductOrder({
                productOrderId: this.form.productOrderId,
                dispatchAmount: dispatchSum
              })
              getProductOrder(this.form.productOrderId).then(res => {
                this.form = res.data;
              });
            });
            const mesProductPlanDetailList = this.mesProductPlanList;
            this.mesProductPlanList = mesProductPlanDetailList.filter(function (item) {
              return productPlan.dispatchCode !== item.dispatchCode
            });
            this.$modal.msgSuccess("删除成功");
          } catch (e) {
            this.$modal.msgError(e);
          }
        }
      }).catch(() => {
      });
    },
    /** 生产计划明细序号 */
    rowMesProductPlanIndex({row, rowIndex}) {
      row.index = rowIndex + 1;
    },
    /** 复选框选中数据 */
    handleMesProductPlanSelectionChange(selection) {
      this.checkedMesProductPlanList = selection
      this.single = selection.length !== 1
    },
    /** 关闭按钮 */
    close() {
      const obj = {path: "/mes/plan/productOrder", query: {t: Date.now(), queryParams: this.$route.query.queryParams}};
      this.$tab.closeOpenPage(obj);
    },
    /** 查看图纸 */
    handleDrawing(row) {
      this.fileList = [];
      this.uploadList = [];
      if (row.planId != null) {
        getDispatchDrawingList(row.planId).then(res => {
          let attachList = res.data;
          attachList.forEach(e => {
            let previewFile = {};
            previewFile.url = e.attachPath;
            previewFile.name = e.attachName;
            this.fileList.push(previewFile);
            this.uploadList.push(e.attachId);
          })
        })
      }
      this.addProductPlanObject = row;
      this.blueprintModel = true;
    },

    /** 查看SOP附件 */
    handleSOP(row) {
      this.fileList = [];
      this.uploadList = [];
      if (row.planId != null) {
        getDispatchSOPAttachList(row.planId).then(res => {
          let attachList = res.data;
          attachList.forEach(e => {
            let previewFile = {};
            previewFile.url = e.attachPath;
            previewFile.name = e.attachName;
            this.fileList.push(previewFile);
            this.uploadList.push(e.attachId);
          })
        })
      }
      this.addProductPlanObject = row;
      this.sopViewModel = true;
    },

    /** 生产计划添加按钮操作 */
    handleAddMesProductPlan() {
      let dispatchCode = "";
      getDispatchCode().then(res => {
        dispatchCode = res.msg;
        getStationByRouteId(this.form.dispatchId).then(res => {
          if (res.data.length === 0) {
            this.$modal.msgError("工艺路线未维护工位信息！");
          }
          let lastProcessId = null;
          res.data.forEach((e, index) => {
            let obj = {};
            obj.dispatchCode = dispatchCode;
            obj.processId = e.processId;
            obj.processName = e.processName;
            obj.processOrder = e.processOrder;
            obj.stationId = e.stationId;
            obj.stationName = e.stationName;
            obj.productionTime = 0;
            obj.planBeginTime = this.form.planBeginTime;
            obj.planEndTime = this.form.planEndTime;
            obj.planStatus = '1';
            // multiStationFlag：一个工序对应工位个数
            if (e.multiStationFlag > 1) {
              obj.planAmount = 0;
            } else {
              obj.planAmount = this.form.planAmount - this.form.dispatchAmount;
            }
            obj.materialId = this.form.materialId;
            obj.materialBomId = this.form.materialBomId;
            obj.productOrderId = this.form.productOrderId;
            // 上一工序ID
            if (lastProcessId == null) {
              obj.lastProcessId = 0;
            } else if(lastProcessId === obj.processId){
              obj.lastProcessId = this.mesProductPlanList[index - 1].lastProcessId;
            } else {
              obj.lastProcessId = lastProcessId;
            }
            lastProcessId = e.processId;
            // 新添加列标识 false=新添加，true=历史行
            obj.oldRowFlag = false;
            this.mesProductPlanList.push(obj);
          })
        })
      })
    },
    isPositiveInteger(value) {
      // 使用正则表达式匹配正整数
      return /^[0-9]\d*$/.test(value);
    },
    //查看图纸预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.pictureDetailModel = true;
    },
    //图纸下载
    handleDownload(file) {
      window.open(file.url);
    },
    //添加图纸提交
    drawingFileUploadSubmit() {
      // 新添加列标识 false=新添加，true=历史行
      if (this.addProductPlanObject.oldRowFlag) {
        updateProductplan({
          planId: this.addProductPlanObject.planId,
          attachId: this.uploadList.join(","),
        }).then(res => {
            this.$modal.msgSuccess("上传图纸成功！");
          }
        )
      } else {
        for (let i = 0; i < this.mesProductPlanList.length; i++) {
          if (this.mesProductPlanList[i].index === this.addProductPlanObject.index) {
            this.mesProductPlanList[i].attachId = this.uploadList.join(",");
          }
        }
      }
      this.uploadList = [];
      this.addProductPlanObject = null;
      this.blueprintModel = false;
    },

    //添加SOP附件提交
    sopFileUploadSubmit() {
      // 新添加列标识 false=新添加，true=历史行
      if (this.addProductPlanObject.oldRowFlag) {
        updateProductplan({
          planId: this.addProductPlanObject.planId,
          sopId: this.uploadList.join(","),
        }).then(res => {
            this.$modal.msgSuccess("上传SOP附件成功！");
          }
        )
      } else {
        for (let i = 0; i < this.mesProductPlanList.length; i++) {
          if (this.mesProductPlanList[i].index === this.addProductPlanObject.index) {
            this.mesProductPlanList[i].sopId = this.uploadList.join(",");
          }
        }
      }
      this.uploadList = [];
      this.addProductPlanObject = null;
      this.sopViewModel = false;
    },

    //图片上传
    httpRequest(file) {
      // 文件信息
      const fileData = file.file;
      const formData = new FormData();
      formData.append("file", fileData);
      formData.append("processId", this.addProductPlanObject.processId);
      formData.append("attachType", "1");
      uploadFile(formData).then(
        (res) => {
          // 存储附件信息主键
          this.uploadList.push(res.attachId);
        }, (err) => {
          this.$refs.drawingUpload.clearFiles();  //上传失败后清除当前上传的图片
          this.$modal.closeLoading();
        }
      );
    },
    // 上传结束处理
    uploadedSuccessfully() {
      if (this.number > 0 && this.uploadList.length === this.number) {
        this.fileList = this.fileList.concat(this.uploadList);
        this.uploadList = [];
        this.number = 0;
        this.form.monitorPic = this.fileList[0];
        this.$modal.closeLoading();
      }
    },
    //删除上传的图片
    handleRemove(file) {
      let arrPic = this.$refs.drawingUpload.uploadFiles;
      let index = arrPic.indexOf(file);
      this.uploadList.splice(index, 1);
      let num = 0;
      arrPic.map((item) => {
        if (item.uid === file.uid) {
          arrPic.splice(num, 1);
        }
        num++;
      });
    },
    // 上传前loading加载
    handleBeforeUpload(file) {
      // let isImg = false;
      // if (this.fileType.length) {
      //   let fileExtension = "";
      //   if (file.name.lastIndexOf(".") > -1) {
      //     fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
      //   }
      //   isImg = this.fileType.some(type => {
      //     if (file.type.indexOf(type) > -1) return true;
      //     if (fileExtension && fileExtension.indexOf(type) > -1) return true;
      //     return false;
      //   });
      // } else {
      //   isImg = file.type.indexOf("image") > -1;
      // }
      //
      // if (!isImg) {
      //   this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`);
      //   return false;
      // }
      // if (this.fileSize) {
      //   const isLt = file.size / 1024 / 1024 < this.fileSize;
      //   if (!isLt) {
      //     this.$modal.msgError(`上传头像图片大小不能超过 ${this.fileSize} MB!`);
      //     return false;
      //   }
      // }
      // this.$modal.loading("正在上传图片，请稍候...");
      // this.number++;
    },
    // 文件个数超出
    handleExceed() {
      this.$modal.msgError(`上传文件数量不能超过 ${this.limit} !`);
    },
  },

  mounted() {
  }
}
;
</script>