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"
              >
              </DictSelection>
            </el-form-item>
          </el-col>
          <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
            <el-form-item label="生产版本:" prop="produceVersionName">
              <el-input
                @click.native="openVersion"
                placeholder="请选择生产版本"
                readonly
                v-model="form.produceVersionName"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
            <el-form-item label="产线:">
              <!-- <el-input
                v-model="form.productLine"
                placeholder="选择生产版本带入"
                readonly
              ></el-input> -->
              <el-select
                placeholder="选择生产版本带入"
                v-model="form.productLine"
              >
                <el-option
                  v-for="(item, index) in lineNamesList"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
            <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-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: 5, md: 12 } : { span: 5 }">
            <el-form-item label="产品编码:">{{
              form.productCode
            }}</el-form-item>
          </el-col>
          <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
            <el-form-item label="牌号|型号:"
              >{{ form.brandNo }}|{{ 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%"
                  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"
                  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"
        @confirm="confirmVersion"
        :productCode="form.productCode"
        :produceVersionId="form.produceVersionId"
      ></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/ProductionVersion.vue';
  import {
    productionToPlan,
    saveSaleToPlan,
    updateSaleToPlan,
    getUpdateInfoById,
    getProductVersion
  } from '@/api/saleOrder';
  import dictMixins from '@/mixins/dictMixins';
  import { deepClone } from '@/utils/index';
  import { getRouteTabKey, removePageTab } from '@/utils/page-tab-util';
  import dayjs from 'dayjs';
  export default {
    mixins: [dictMixins],
    components: {
      AdditionalOrder,
      ProductionVersion,
      PlanSubmit
    },
    data () {
      return {
        form: {
          planType: 1,
          produceVersionId: '',
          productLine: '',
          salesOrders: [],
          produceVersionName: ''
        },
        lineNamesList: [],
        // 表单验证规则
        rules: {
          produceVersionName: [
            { 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.$route.query.type == 'edit') {
        this.getPlanInfo(this.$route.query.id);
      } else {
        const list = JSON.parse(this.$route.query.selection);
        this.getSaleInfo(list);
      }
    },
    methods: {
      async getPlanInfo (id) {
        const data = await getUpdateInfoById(id);
        this.form = data;
        if (data.productCode) {
          this.getVersionData();
        }
      },
      getSaleInfo (params) {
        productionToPlan(params).then((res) => {
          this.form = deepClone(res);
          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 {
            this.form.planType = 1;
          }
        });
      },

      getVersionData () {
        getProductVersion(this.form.productCode).then((res) => {
          res.map((item) => {
            if (item.produceVersionId == this.form.produceVersionId) {
              this.lineNamesList = Array.from(new Set(item.lineNames || []));
            }
          });
        });
      },
      cancel () {
        this.$router.go(-1);
      },
      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();
      },
      openVersion () {
        this.$refs.versionRefs.open();
      },
      confirmVersion (data) {
        this.$set(this.form, 'produceVersionName', data.produceVersionName);
        this.$set(this.form, 'produceVersionId', data.produceVersionId);
        this.$set(
          this.form,
          'productLine',
          data.lineNames.length ? data.lineNames[0] : ''
        );
        this.lineNamesList = Array.from(new Set(data.lineNames || []));
      },

      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));
      },

      publishData (type) {
        let params = deepClone(this.form);
        params.categoryId = params.salesOrders[0]?.categoryId;

        let request =
          this.$route.query.type == 'edit' ? updateSaleToPlan : saveSaleToPlan;
        if (this.$route.query.type != 'edit') {
          delete params.id;
        }

        const key = getRouteTabKey();
        request(params).then((res) => {
          // reloadPageTab({ fullPath: '/saleOrder' });
          if (type == 1) {
            // 提交
            this.$router.push({
              path: '/productionPlan'
            });
          } else {
            // 提交并发布
            this.$router.push({
              path: '/productionPlan/workOrderPublish',
              query: {
                type: 2,
                id: res
              }
            });
          }
          setTimeout(() => {
            removePageTab({ key });
          }, 0);
        });
      }
    }
  };
</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>