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

<template>
  <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 type="primary" icon="el-icon-plus" size="mini" @click="handleAddMesProductPlan">新增
          </el-button>
        </el-col>
        <!--        <el-col :span="1.5">-->
        <!--          <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteMesProductPlan">删除-->
        <!--          </el-button>-->
        <!--        </el-col>-->
      </el-row>
      <el-table :data="mesProductPlanlList" :row-class-name="rowMesProductPlanIndex"
                @selection-change="handleMesProductPlanSelectionChange" ref="mesProductPlan">
        <el-table-column type="selection" width="50" align="center"/>
        <el-table-column label="序号" align="center" prop="index" width="50" v-if="false"/>
        <el-table-column label="派工单号" align="center" prop="dispatchCode" width="190">
          <template slot-scope="scope">
            <el-input v-model="scope.row.dispatchCode" :disabled="true"/>
          </template>
        </el-table-column>
        <el-table-column label="工序" align="center" prop="processName" width="140">
          <template slot-scope="scope">
            <el-input v-model="scope.row.processName" :disabled="true"/>
          </template>
        </el-table-column>
        <el-table-column label="步骤" align="center" prop="processOrder" :disabled="true">
          <template slot-scope="scope">
            <el-input v-model="scope.row.processOrder" :disabled="true"/>
          </template>
        </el-table-column>
        <el-table-column label="工位" align="center" prop="stationName" width="140" :disabled="true">
          <template slot-scope="scope">
            <el-input v-model="scope.row.stationName" :disabled="true"/>
          </template>
        </el-table-column>
        <el-table-column label="派工数量" align="center" prop="planAmount" width="140">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.planAmount"/>
          </template>
        </el-table-column>
        <el-table-column label="派工标准工时" align="center" prop="productionTime" width="140">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.productionTime"/>
          </template>
        </el-table-column>
        <el-table-column label="计划开始时间" align="center" prop="planBeginTime" width="240">
          <template slot-scope="scope">
            <el-date-picker clearable v-model="scope.row.planBeginTime" type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="请选择计划开始时间"/>
          </template>
        </el-table-column>
        <el-table-column label="计划完成时间" align="center" prop="planEndTime" width="240">
          <template slot-scope="scope">
            <el-date-picker clearable v-model="scope.row.planEndTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="请选择计划完成时间"/>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="planStatus" width="150">
          <template slot-scope="scope">
            <el-select v-model="scope.row.planStatus" placeholder="请选择状态" :disabled="true">
              <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 label="操作" align="center" class-name="small-padding fixed-width" width="50">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleDrawing(scope.row)"
            >图纸
            </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>
</template>

<script>
import {getProductOrder} from "@//api/mes/productOrder";
import {addProductplan, getDispatchCode, orderAddMesProductPlanList} from "@//api/mes/productplan";
import {getStationByRouteId} from "@//api/mes/baseRoute";

export default {
  name: "productPlanEdit",
  dicts: ['active_flag', 'product_status'],
  data() {
    return {
      // 选中选项卡的 name
      activeName: "columnInfo",
      // 表格的高度
      tableHeight: document.documentElement.scrollHeight - 245 + "px",
      // 表信息
      tables: [],
      // 表列信息
      columns: [],
      // 生产派工表格数据
      productplanList: [],
      // 生产计划明细表格数据
      mesProductPlanlList: [],
      // 表详细信息
      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"}
        ],
      },
    };
  },
  created() {
    const productOrderId = this.$route.params && this.$route.params.productOrderId;
    if (productOrderId) {
      // 获取表详细信息
      getProductOrder(productOrderId).then(res => {
        this.form = res.data;
      });
    }
  },
  methods: {
    /** 提交按钮 */
    submitForm() {
      //校验派工数量

      orderAddMesProductPlanList(this.mesProductPlanlList).then(res => {
        this.$modal.msgSuccess(res.msg);
        this.close();
      });
    },
    /** 生产计划明细序号 */
    rowMesProductPlanIndex({row, rowIndex}) {
      row.index = rowIndex + 1;
    },
    /** 复选框选中数据 */
    handleMesProductPlanSelectionChange(selection) {
      this.checkedMesProductPlan = selection.map(item => item.index)
    },
    /** 关闭按钮 */
    close() {
      const obj = {path: "/mes/plan/productOrder", query: {t: Date.now(), pageNum: this.$route.query.pageNum}};
      this.$tab.closeOpenPage(obj);
    },
    /** 查看图纸 */
    handleDrawing(row) {
      console.log(row)
    },
    /** 生产计划添加按钮操作 */
    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 => {
            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 = '0';
            // multiStationFlag：一个工序对应工位个数
            if (e.multiStationFlag > 1) {
              obj.planAmount = 0;
            } else {
              obj.planAmount = this.form.planAmount;
            }

            obj.materialId = this.form.materialId;
            obj.materialBomId = this.form.materialBomId;
            obj.productOrderId = this.form.productOrderId;
            // 上一工序ID
            if (lastProcessId == null || lastProcessId === obj.lastProcessId) {
              obj.lastProcessId = 0;
            } else {
              obj.lastProcessId = lastProcessId;
            }
            lastProcessId = e.processId;
            this.mesProductPlanlList.push(obj);
          })

        })
      })
    },
    /** 生产计划明细删除按钮操作 */
    handleDeleteMesProductPlan() {
      if (this.checkedMesProductPlan.length == 0) {
        this.$modal.msgError("请先选择要删除的生产计划明细数据");
      } else {
        const mesProductPlanlList = this.mesProductPlanlList;
        const checkedMesProductPlan = this.checkedMesProductPlan;
        this.mesProductPlanlList = mesProductPlanlList.filter(function (item) {
          return checkedMesProductPlan.indexOf(item.index) == -1
        });
      }
    },
  },

  mounted() {
    const el = this.$refs.dragTable.$el.querySelectorAll(".el-table__body-wrapper > table > tbody")[0];
    // const sortable = Sortable.create(el, {
    //   handle: ".allowDrag",
    //   onEnd: evt => {
    //     const targetRow = this.columns.splice(evt.oldIndex, 1)[0];
    //     this.columns.splice(evt.newIndex, 0, targetRow);
    //     for (let index in this.columns) {
    //       this.columns[index].sort = parseInt(index) + 1;
    //     }
    //   }
    // });
  }
};
</script>