kd-aiot-frontend-aps/src/views/saleOrder/salesToProduction.vue

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <div class="body-title">
        <div class="title-left">销售订单转生产计划</div>
        <div class="title-right">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="toSubmit" :loading="loading">
            提交计划
          </el-button>
        </div>
      </div>
      <el-form ref="form" :model="form" :rules="rules" label-width="90px" class="formbox">
        <el-row :gutter="24">
          <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
            <el-form-item label="计划类型:">
              <DictSelection dictName="订单计划类型" clearable v-model="form.planType" disabled>
              </DictSelection>
            </el-form-item>
          </el-col>
          <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
            <el-form-item label="工艺路线:" prop="produceRoutingName">
              <el-input @click.native="openVersion" placeholder="请选择工艺路线" readonly
                v-model="form.produceRoutingName"></el-input>
            </el-form-item>
          </el-col>

          <el-col v-bind="styleResponsive ? { lg: 3, md: 6 } : { span: 3 }">
            <el-form-item label="使用改型:" prop="modification">
              <el-checkbox v-model="form.modification" :true-label="1" :false-label="0"></el-checkbox>
            </el-form-item>
          </el-col>

          <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
            <el-form-item label="余量系数:" prop="marginCoefficient">
              <DictSelection @itemChange="itemChange" style="width: 200px" dictName="余量系数"
                v-model="form.marginCoefficient"></DictSelection>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row :gutter="24" class="row-intro">
          <el-col v-bind="styleResponsive ? { lg: 3, md: 12 } : { span: 3 }">
            <el-form-item label="销售单数量:">{{ form.codeNum }}</el-form-item>
          </el-col>
          <el-col v-bind="styleResponsive ? { lg: 3, md: 12 } : { span: 3 }">
            <el-form-item label="订单总数量:">{{
              form.contractNum
            }}</el-form-item>
          </el-col>
          <el-col v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 4 }">
            <el-form-item label="订单总重量:">{{
              form.sumOrderWeight
            }}</el-form-item>
          </el-col>
          <el-col v-bind="styleResponsive ? { lg: 3, md: 12 } : { span: 3 }">
            <el-form-item label="物料编码:">{{
              form.productCode
            }}</el-form-item>
          </el-col>
          <el-col v-bind="styleResponsive ?  { lg: 3, md: 12 } : { span: 3 }">
            <el-form-item label="牌号:">{{ form.brandNo }}</el-form-item>
          </el-col>
          <el-col v-bind="styleResponsive ?  { lg: 5, md: 12 } : { span: 5 }">
            <el-form-item label="型号:">{{ form.model }}</el-form-item>
          </el-col>

          <el-col v-bind="styleResponsive ? { lg: 3, md: 12 } : { span: 3 }">
            <el-form-item label="库存数量:">{{
              form.stockCountBase
            }}</el-form-item>
          </el-col>
        </el-row>
        <el-table :data="form.salesOrders" border>
          <el-table-column label="序号" align="center" width="60">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="销售订单号" align="center" prop="code" width="120">
          </el-table-column>
          <el-table-column label="行号" align="center" prop="lineNumber">
          </el-table-column>
          <el-table-column label="合同数量" align="center" prop="contractNum">
          </el-table-column>
          <el-table-column label="合同重量" align="center" prop="productSumWeight">
          </el-table-column>
          <el-table-column label="欠交数量" align="center" prop="lackNum">
          </el-table-column>
          <el-table-column label="计划生产数量" align="center" prop="planProductNum" width="120">
            <template slot-scope="scope">
              <el-form-item label-width="0px" :prop="'salesOrders.' + scope.$index + '.planProductNum'" :rules="{
                required: true,
                message: '请输入计划生产数量',
                trigger: 'blur'
              }" class="table-item">

                <el-input v-model.number="scope.row.planProductNum" size="small"
                  oninput="value=value.replace(/[^\d]/g,'')" style="width: 100%"
                  @blur="scope.row.requiredFormingNum = toInt(scope.row.planProductNum)" placeholder="输入数量"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="要求生产数量" align="center" prop="requiredFormingNum" width="120">
            <template slot-scope="scope">
              <el-form-item label-width="0px" :prop="'salesOrders.' + scope.$index + '.requiredFormingNum'" :rules="{
                required: true,
                message: '请输入要求生产数量',
                trigger: 'blur'
              }" class="table-item">
                <el-input v-model.number="scope.row.requiredFormingNum" size="small" disabled
                  oninput="value=value.replace(/[^\d]/g,'')" style="width: 100%" placeholder="输入数量"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="按单按库" align="center" prop="orderLibraryType">
            <template slot-scope="{ row }">
              {{ getDictValue('按单按库', row.orderLibraryType) }}
            </template>
          </el-table-column>
          <el-table-column label="订单类型" align="center" prop="orderType">
            <template slot-scope="{ row }">
              {{ getDictValue('订单类型', row.orderType) }}
            </template>
          </el-table-column>
          <el-table-column label="交付日期" align="center" prop="deliveryTime" width="160">
          </el-table-column>
          <el-table-column label="要求生产日期" align="center" prop="reqMoldTime" width="180">
            <template slot-scope="scope">
              <el-form-item label-width="0px" :prop="'salesOrders.' + scope.$index + '.reqMoldTime'" :rules="{
                required: true,
                message: '请选择要求生产日期',
                trigger: 'blur'
              }" class="table-item">
                <el-date-picker style="width: 100%" v-model="scope.row.reqMoldTime" :pickerOptions="{
                  disabledDate: (time) =>
                    time.getTime() <
                    new Date(new Date().setHours(0, 0, 0, 0)).getTime()
                }" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
                </el-date-picker>
                <!-- 	<el-date-picker
						   style="width: 100%;"
						   v-model="scope.row.reqMoldTime"
						   type="datetime"
						   placeholder="选择日期"
						   value-format="yyyy-MM-dd HH:mm:ss">
						 </el-date-picker> -->
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="客户名称" align="center" prop="customerName">
          </el-table-column>
          <el-table-column label="业务员" align="center" prop="salesman">
          </el-table-column>
          <el-table-column label="交付要求" align="center" prop="deliveryRequirements">
            <template slot-scope="{ row }">
              {{ getDictValue('交付要求', row.deliveryRequirements) }}
            </template>
          </el-table-column>
          <el-table-column prop="priority" label="优先级" width="100" align="center">
            <template slot-scope="{ row }">{{ row.priority }}
              <div class="sort-wrap">
                <i class="el-icon-caret-top" @click="sortTop(row)"></i>
                <i class="el-icon-caret-bottom" @click="sortBottom(row)"></i>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="70" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" @click="handleDeleteItem(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="add-product" @click="addEquipment">
          <i class="el-icon-circle-plus-outline"></i>
        </div>
        <el-row :gutter="24">
          <el-col v-bind="styleResponsive ? { lg: 24, md: 24 } : { span: 24 }">
            <el-form-item label="计划备注:">
              <el-input type="textarea" :rows="4" v-model="form.notes" resize="none"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <AdditionalOrder ref="additionalRefs" :productCode="form.productCode" :selectList="form.salesOrders"
        @choose="confirmChoose"></AdditionalOrder>
      <ProductionVersion ref="versionRefs" @changeProduct="changeProduct"></ProductionVersion>
      <PlanSubmit ref="submitRefs" :type="$route.query.type" :info="form" @publish="publishData"></PlanSubmit>
    </el-card>
  </div>
</template>
<script>
import AdditionalOrder from './components/AdditionalOrder.vue';
import PlanSubmit from './components/plan-submit.vue';
import ProductionVersion from '@/components/CreatePlan/ProductionVersion2.vue';
import {
  productionToPlan,
  saveSaleToPlan,
  updateSaleToPlan,
  releaseSave,
  getInventory,
  getUpdateInfoById,
  getProductVersion
} from '@/api/saleOrder';
import dictMixins from '@/mixins/dictMixins';
import { deepClone } from '@/utils/index';
import { getRouteTabKey, removePageTab } from '@/utils/page-tab-util';
import { getCode } from '@/api/codeManagement';
import dayjs from 'dayjs';
export default {
  mixins: [dictMixins],
  components: {
    AdditionalOrder,
    ProductionVersion,
    PlanSubmit
  },
  data() {
    return {
      type: this.$route.query.type,
      form: {
        planType: 1,
        produceRoutingId: '',

        stockCountBase: '',
        salesOrders: [],
        produceRoutingName: '',
        marginCoefficient: '1',
      },

      // 表单验证规则
      rules: {
        produceRoutingName: [
          { required: true, message: '请选择生产版本', trigger: 'change' }
        ]
      },
      // selection: [],
      loading: false
    };
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive() {
      return this.$store.state.theme.styleResponsive;
    }
  },
  created() {
 

  

    this.requestDict('按单按库');
    this.requestDict('订单类型');
    this.requestDict('交付要求');
    if (this.type == 'edit') {
      this.getPlanInfo(this.$route.query.id);
    } else {

      this.getSaleInfo();
    }


  },
  methods: {
    async getPlanInfo(id) {
      const data = await getUpdateInfoById(id);


      this.form = data;

    },
    async _getInventory() {
      const res = await getInventory(
        this.form.productCode,
        this.form.planType
      );

      this.form.stockCountBase = res;
    },
    getSaleInfo() {
      
      let params = JSON.parse(this.$route.query.selection)
      productionToPlan(params).then((res) => {
  
        this.form = deepClone(res);
        this.form.produceRoutingName = res.produceRoutingName ||  this.$route.query.produceRoutingName
         this.form.produceRoutingId =  res.produceRoutingId ||  this.$route.query.produceRoutingId
        this.form.salesOrders.map((item, index) => {
          item.priority = index + 1;
          item.planProductNum = item.lackNum;
          item.requiredFormingNum = item.lackNum;
          item.reqMoldTime = dayjs(
            new Date(item.deliveryTime).getTime() - 3600 * 1000 * 24 * 10
          ).format('YYYY-MM-DD');
        });
        if (this.form.salesOrders.every((itm) => itm.orderType == 2)) {
          this.form.planType = 2;
        } else if (this.form.salesOrders.every((itm) => itm.orderType == 1)) {
          this.form.planType = 1;
        } else {
          this.form.planType = 3;
        }
        this._getInventory();
      });
      this.$forceUpdate()
    },

    itemChange() {
      this.form.salesOrders.map((item, index) => {
        item.requiredFormingNum = (item.lackNum * (this.form.marginCoefficient || 1)).toFixed(0);
    })


    },

    toInt(planProductNum) {
      return (planProductNum * (this.form.marginCoefficient || 1)).toFixed(0)
    },


    cancel() {
      const key = getRouteTabKey();
      this.$router.go(-1);
      removePageTab({ key });
    },
    toSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.mapList();
          this.$refs.submitRefs.open();
        }
      });
    },
    // 对比日期，计算要求生产重量
    mapList() {
      var requiredFormingWeight = 0;
      var requiredFormingNum = 0;
      var productNum = 0;
      this.form.salesOrders.map((item, index) => {
        requiredFormingWeight =
          requiredFormingWeight +
          Number(item.productUnitWeight) * Number(item.requiredFormingNum);
        requiredFormingNum = requiredFormingNum + item.requiredFormingNum;

        productNum += Number(item.planProductNum);
      });
      this.form.productNum = productNum;
      this.form.productUnitWeight =
        this.form.salesOrders[0]?.productUnitWeight;
      this.form.requiredFormingWeight = requiredFormingWeight.toFixed(2);
      this.form.requiredFormingNum = requiredFormingNum;
      const collection = deepClone(this.form.salesOrders);
      const sortedCollection = collection.sort(
        (a, b) => new Date(b.reqMoldTime) - new Date(a.reqMoldTime)
      );
      let latestData = {};
      for (let i = 0; i < sortedCollection.length; i++) {
        const data = sortedCollection[i];
        if (
          !latestData.reqMoldTime ||
          new Date(data.reqMoldTime) >= new Date(latestData.reqMoldTime)
        ) {
          latestData = data;
        }
      }
      this.form.reqMoldTime = latestData.reqMoldTime;
    },

    sortTop(row) {
      if (row.priority <= 1) {
        return;
      }
      let rowN = this.form.salesOrders.find(
        (n) => n.priority == row.priority - 1
      );
      rowN.priority += 1;
      row.priority -= 1;
      this.form.salesOrders.sort((a, b) => {
        return a.priority - b.priority;
      });
    },
    sortBottom(row) {
      if (row.priority >= this.form.salesOrders.length) {
        return;
      }
      let rowN = this.form.salesOrders.find(
        (n) => n.priority == row.priority + 1
      );
      rowN.priority -= 1;
      row.priority += 1;
      this.form.salesOrders.sort((a, b) => {
        return a.priority - b.priority;
      });
    },
    againSort() {
      this.form.salesOrders.forEach((n, index) => {
        n.priority = index + 1;
      });
    },
    // 删除产品
    handleDeleteItem(index) {
      this.form.salesOrders.splice(index, 1);
    },
    addEquipment() {
      this.$refs.additionalRefs.open(this.form.planType);
    },
    openVersion() {
      this.$refs.versionRefs.open();
    },
    changeProduct(data) {
      this.$set(this.form, 'produceRoutingName', data.name);
      this.$set(this.form, 'produceRoutingId', data.id);
      this.$set(this.form, 'produceVersionName', data.produceVersionName)

    },

    confirmChoose(list) {
      // 取出在弹窗中选中并且不在表格中的数据
      const result = list.filter(
        (i) => this.form.salesOrders.findIndex((p) => p.id === i.id) === -1
      );
      // 取出在表格中并且不在弹窗中选中的数据 即取消选中的数据
      const del = this.form.salesOrders.filter(
        (i) => list.findIndex((p) => p.id === i.id) === -1
      );
      for (let i = this.form.salesOrders.length - 1; i >= 0; i--) {
        for (let j in del) {
          if (this.form.salesOrders[i].id === del[j].id) {
            this.form.salesOrders.splice(i, 1);
          }
        }
      }
      let priority =
        this.form.salesOrders[this.form.salesOrders.length - 1]?.priority ||
        0;
      this.form.salesOrders = this.form.salesOrders.concat(
        result.map((item, index) => {
          item.priority = ++priority;

          item.planProductNum = item.lackNum;
          item.requiredFormingNum = item.lackNum;
          item.reqMoldTime = dayjs(
            new Date(item.deliveryTime).getTime() - 3600 * 1000 * 24 * 10
          ).format('YYYY-MM-DD');
          return item;
        })
      );
      this.changeData();
    },
    changeData() {
      var planProductNum = 0;
      var productWeight = 0;
      this.form.salesOrders.map((item, index) => {
        item.priority = index + 1;
        planProductNum = planProductNum + item.contractNum;
        productWeight = productWeight + Number(item.productSumWeight);
      });
      this.$set(this.form, 'codeNum', this.form.salesOrders.length);
      this.$set(this.form, 'contractNum', planProductNum);
      this.$set(this.form, 'sumOrderWeight', productWeight.toFixed(2));
    },

    async publishData(type) {
      const key = getRouteTabKey();
      let params = deepClone(this.form);
      params.categoryId = params.salesOrders[0]?.categoryId;
      if (this.$route.query.type != 'edit') {
        delete params.id;
      }
      if (type === 2) {
        this.$confirm('发布工单后不可撤回，确定发布吗？', '发布确认').then(
          async () => {
            const loading = this.$loading({
              lock: true,
              fullscreen: true,
              text: '工单发布中...'
            });
            try {
              const code = await getCode('product_order_code');
              const data = {
                productionPlan: params,
                workOrder: {
                  productionPlanCode: params.code,
                  code: code,
                  formingNum: params.contractNum,
                  formingWeight: params.sumOrderWeight,
                  produceRoutingId: params.produceRoutingId,
                  status: 4,
                  model: params.model,
                  brandNo: params.brandNo,
                  categoryId: params.categoryId,
                  productCode: params.productCode,
                  productName: params.productName
                }
              };
              if (this.$route.query.type == 'edit') {
                data.workOrder.productionPlanId = params.id;
              }

              await releaseSave(data)
                .then((res) => {
                  if (res === 1) {
                    this.$message.success('工单已发布！');
                    this.$router.push({
                      path: '/productionPlan'
                    });
                  } else {
                    this.$confirm(
                      '生产计划创建成功，但工单发布失败。请前往【生产计划】列表【重新发布】工单',
                      '提示',
                      {
                        confirmButtonText: '返回',
                        cancelButtonText: '立即前往',
                        type: 'warning'
                      }
                    )
                      .then(() => {
                        this.$router.push({
                          path: '/productionPlan'
                        });
                      })
                      .catch(() => {
                        this.$router.go(-1);
                      });
                  }
                  removePageTab({ key });
                })
                .catch(() => {
                  this.$message.error('发布失败，请重新发布！');
                });
            } catch (error) { }

            loading.close();
          }
        );
      } else {
        let request =
          this.$route.query.type == 'edit'
            ? updateSaleToPlan
            : saveSaleToPlan;

        request(params)
          .then(async (res) => {
            // 提交
            this.$router.push({
              path: '/productionPlan'
            });
            removePageTab({ key });
          })
          .catch(() => {
            this.$message.error('提交失败，请重新提交！');
          });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.ele-body {
  background: #fff;
}

.body-title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.title-left {
  font-size: 20px;
  color: #333;
}

.formbox {
  margin: 20px auto;
}

.row-intro {
  border-bottom: 1px dashed #ccc;
  margin-bottom: 20px;
}

.sort-wrap {
  i {
    font-size: 30px;
    cursor: pointer;
  }

  .el-icon-caret-top {
    color: red;
  }

  .el-icon-caret-bottom {
    color: #157a2c;
  }
}

.add-product {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 30px;
  color: #1890ff;
  margin: 10px 0;
  cursor: pointer;
}

.table-item {
  margin-bottom: 0;
}
</style>