kd-aiot-frontend-aps/src/views/productionPlan/components/factoryAdd/index.vue

<template>
  <!-- :close-on-click-modal="false" -->
  <ele-modal
    width="80vw"
    :visible.sync="visible"
    custom-class="ele-dialog-form"
    :before-close="cancel"
    :title="title"
    :maxable="true"
  >
    <div class="form-wrapper">
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="110px"
        class="formbox"
      >
        <headerTitle title="基本信息"> </headerTitle>
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="计划编号:" prop="code">
              <el-input
                placeholder="计划编号"
                size="mini"
                disabled
                v-model="form.code"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="计划类型:" prop="planType">
              <el-select
                v-model="form.planType"
                style="width: 100%"
                @change="changeProduceType"
                size="mini"
              >
                <el-option
                  v-for="item of planTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="批次号:" prop="batchNo">
              <el-input
                placeholder="输入批次号"
                size="mini"
                v-model="form.batchNo"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="计划开始日期:"
              label-width="110px"
              prop="startTime"
            >
              <el-date-picker
                style="width: 100%"
                size="mini"
                v-model="form.startTime"
                :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-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item
              label="计划结束日期:"
              label-width="110px"
              prop="endTime"
            >
              <el-date-picker
                style="width: 100%"
                size="mini"
                v-model="form.endTime"
                :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-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="要求完成日期:"
              label-width="110px"
              prop="reqMoldTime"
            >
              <el-date-picker
                style="width: 100%"
                size="mini"
                v-model="form.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-form-item>
          </el-col>
        </el-row>

        <headerTitle title="产品信息"> </headerTitle>

        <el-row :gutter="24">
          <ele-pro-table
            ref="tableRef"
            :columns="columns"
            row-key="code"
            :cache-key="`ProductionPlanTable`"
            :datasource="form.productInfoList"
            border
            height="40vh"
            key="id"
          >
            <template v-slot:requiredFormingNum="{ row, $index }">
              <el-input
                v-model.number="row.requiredFormingNum"
                size="small"
                type="number"
                style="width: 100%"
                placeholder="输入要求生产数量"
                @input="tableHandleKeyUp(row, 'procut')"
              ></el-input>
              <!-- placeholder="输入要求生产数量" @input="tableHandleKeyUp(row, 'sum')"></el-input> -->
            </template>

            <template v-slot:blockCount="{ row, $index }">
              <el-input
                v-model.number="row.blockCount"
                size="small"
                type="number"
                style="width: 100%"
                placeholder="输入数量"
                @input="inputNumber(row, $index)"
              ></el-input>
            </template>

            <template v-slot:productType="{ row, $index }">
              <el-select
                v-model="row.productType"
                @change="changeProductType(row, $index)"
                :key="$index"
              >
                <el-option
                  v-for="item of producedList"
                  :key="$index + item.code"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </template>

            <template v-slot:bomCategoryId="{ row, $index }">
              <el-select
                v-model="row.bomCategoryId"
                @change="changeBomId(row, $index)"
              >
                <el-option
                  v-for="item of row.bomVersionList"
                  :key="item.id"
                  :label="item.name + '(V' + item.versions + '.0)'"
                  :value="item.id"
                ></el-option>
              </el-select>
            </template>

            <!-- //权重等级 -->
            <template
              v-slot:weight="{ row, $index }"
              v-if="clientEnvironmentId == 4"
            >
              <el-select
                v-model="row.weight"
                style="width: 100%"
                @change="changeProduceType"
                size="mini"
              >
                <el-option
                  v-for="item of weightList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </template>

            <!-- 是否开槽 -->
            <template
              v-slot:isSlotting="{ row, $index }"
              v-if="clientEnvironmentId == 4"
            >
              <el-select
                v-model="row.isSlotting"
                style="width: 100%"
                @change="changeProduceType"
                size="mini"
              >
                <el-option
                  v-for="item of isSlotting"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </template>

            <!-- 开槽类型 -->
            <template
              v-slot:slottingType="{ row, $index }"
              v-if="clientEnvironmentId == 4"
            >
              <DictSelection
                dictName="开槽类型"
                v-model="row.slottingType"
                size="mini"
              >
              </DictSelection>
            </template>

            <!-- 工艺路线 -->

            <template
              v-slot:produceRoutingId="{ row, $index }"
              v-if="clientEnvironmentId != 4"
            >
              <!-- <el-form-item required> -->
              <div style="display: flex">
                <el-select
                  v-model="row.produceRoutingId"
                  v-show="isRouteSelect(row)"
                >
                  <el-option
                    v-for="item of row.routingList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>

                <div style="display: flex">
                  <el-input
                    v-show="!isRouteSelect(row)"
                    disabled
                    v-model="row.produceRoutingName"
                  ></el-input>
                  <el-button
                    v-show="isSelectShow"
                    type="primary"
                    size="mini"
                    @click="openDialog($index)"
                    >选择</el-button
                  >
                </div>
              </div>
              <!-- </el-form-item> -->
            </template>

            <template v-slot:produceRoutingId="{ row, $index }" v-else>
              <el-input
                v-model="row.produceRoutingName"
                style="width: 100%"
                readonly
              ></el-input>
            </template>

            <template v-slot:factoriesId="{ row, $index }">
              <el-select
                v-model="row.factoriesId"
                :key="row.factoriesId"
                @change="(e) => selectFactory(e, row)"
              >
                <el-option
                  v-for="item of factoryList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </template>

            <!-- <el-table-column label="所属工厂" width="140" align="center" prop="factoriesId">
              <template slot-scope="scope">
                <el-form-item label-width="0px">

                  <el-select v-model="scope.row.factoriesId" :key="scope.row.factoriesId">
                    <el-option v-for="item of factoryList" :key="item.id" :label="item.name"
                      :value="item.id"></el-option>
                  </el-select>

                </el-form-item>
              </template>
            </el-table-column> -->

            <!-- 模具数量 -->
            <template
              v-slot:moCount="{ row, $index }"
              v-if="clientEnvironmentId == '4'"
            >
              <div>
                <el-input
                  style="width: 100%"
                  size="small"
                  v-model="row.moCount"
                  oninput="value=value.replace(/[^0-9.]/g,'')"
                  @input="tableHandleKeyUp(row, 'moCount')"
                  placeholder="请输入"
                >
                </el-input>
              </div>
            </template>

            <!-- 块数 -->
            <template
              v-slot:blockCount="{ row, $index }"
              v-if="clientEnvironmentId == '4'"
            >
              <div>
                <el-input
                  size="small"
                  style="width: 100%"
                  @input="tableHandleKeyUp(row, 'blockCount')"
                  v-model="row.blockCount"
                  placeholder="请输入"
                ></el-input>
              </div>
            </template>

            <template v-slot:productWeight="{ row, $index }">
              <span>{{ row.productWeight ? row.productWeight : '-' }}</span>
            </template>

            <template v-slot:set="{ row, $index }">
              <el-button
                type="text"
                @click="handleDeleteItem($index)"
                v-if="!row.id"
                >删除</el-button
              >
            </template>
            <template v-slot:headerProduceRoutingId="{ column }">
              <div class="header_required"
                ><span class="is-required">{{ column.label }}</span></div
              >
            </template>
            <template v-slot:headeRequiredFormingNum="{ column }">
              <div class="header_required"
                ><span class="is-required">{{ column.label }}</span></div
              >
            </template>
            <template v-slot:headerProcessingBOM="{ column }">
              <div :class="isRequired ? 'header_required' : ''"
                ><span class="is-required">{{ column.label }}</span></div
              >
            </template>
          </ele-pro-table>
          <div class="add-product" @click="addEquipment">
            <i class="el-icon-circle-plus-outline"></i>
          </div>
        </el-row>
      </el-form>

      <!-- 选择产品 -->
      <EquipmentDialog
        @choose="confirmChoose"
        :selectList="[]"
        ref="equipmentRefs"
        isMultiple="0"
      >
      </EquipmentDialog>
    </div>

    <template v-slot:footer>
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="save" :loading="loading">
        确定
      </el-button>
    </template>
    <ProcessRoute ref="processRouteRef" @changeParent="changeParent" />
  </ele-modal>
</template>

<script>
  import EquipmentDialog from '@/views/saleOrder/components/EquipmentDialog';
  import { getCode } from '@/api/codeManagement';
  import ProcessRoute from '@/components/selectionDialog/processRoute.vue';
  import { parameterGetByCode } from '@/api/mainData/index';
  import {
    bomRoutingList,
    bomListByPlan,
    saveSaleToPlan,
    getFactoryList,
    temporarilyUpdate,
    temporaryPlanSave
  } from '@/api/saleOrder';

  export default {
    components: {
      EquipmentDialog,
      ProcessRoute
    },
    props: {
      factoryType: {
        type: Number,
        default: 3
      },
      factoryObj: {
        type: Object,
        default: () => {}
      }
    },
    watch: {
      // factoryObj: {
      //   immediate: true,
      //   deep: true,
      //   handler(val) {
      //     // 修改
      //     // this.$nextTick(() => {
      //     //   if (val.id) {
      //     //     this.bomListVersion();
      //     //     if (val.bomCategoryId) {
      //     //       this.getPlanRouting();
      //     //     }
      //     //   }
      //     // });
      //   }
      // }
    },
    computed: {
      // 是否必填 字段 ( 首先看计划类型 如果是返工返修)
      // 就不是必填 否则就看配置参数

      // 必填的时候 不显示选择按钮 跟 展示输入框 只能有下拉选择框 ( 选择了加工方式 带出 BOM 版本 带出 工艺路线 工艺路线不能选择)
      // 不必填的时候 显示 选择按钮跟 展示输入框 并且可以存在选择框 一开始默认展示选择框
      //   选择按钮选择数据后 隐藏选择框 显示展示框(input) 情况 加工方式 跟 BOM版本
      //   选择了加工方式 清空 选择框选择的工艺路线

      // 是否必填字段
      isRequired() {
        if (this.form.planType == 5) {
          return false;
        }
        return this.processingRequired == 1;
      },
      // 工艺路线 输入框展示跟选择框判断
      isRouteSelect() {
        return (row) => {
          if (this.isRequired) {
            return true;
          }
          if (!row.selectionRowShow) {
            return true;
          }

          return false;
        };
      },

      // 选择按钮的显示
      isSelectShow() {
        if (this.form.planType == 5) {
          return true;
        }
        return this.processingRequired == 0;
      },
      clientEnvironmentId() {
        return this.$store.state.user.info.clientEnvironmentId;
      },
      columns() {
        return [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true
          },

          {
            slot: 'lineNumber',
            prop: 'lineNumber',
            label: '行号',
            align: 'center',
            minWidth: 140
          },
          {
            slot: 'productName',
            prop: 'productName',
            label: '产品名称',
            align: 'center',
            minWidth: 140
          },
          {
            slot: 'productCode',
            prop: 'productCode',
            label: '物料编码',
            align: 'center',
            minWidth: 140
          },
          {
            slot: 'brandNo',
            prop: 'brandNo',
            label: '牌号',
            align: 'center',
            minWidth: 140
          },
          {
            slot: 'model',
            prop: 'model',
            label: '型号',
            align: 'center',
            minWidth: 140
          },
          {
            slot: 'specification',
            prop: 'specification',
            label: '规格',
            align: 'center',
            minWidth: 140
          },
          {
            slot: 'productUnitWeight',
            prop: 'productUnitWeight',
            label: '单重',
            align: 'center',
            minWidth: 140
          },
          {
            slot: 'weightUnit',
            prop: 'weightUnit',
            label: '重量单位',
            align: 'center',
            minWidth: 140
          },

          {
            slot: 'requiredFormingNum',
            prop: 'requiredFormingNum',
            headerSlot: 'headeRequiredFormingNum',
            label: '要求生产数量',
            align: 'center',
            minWidth: 140
          },
          {
            slot: 'productType',
            prop: 'productType',
            label: '加工方式',
            headerSlot: 'headerProcessingBOM',
            align: 'center',
            minWidth: 180
          },
          {
            slot: 'bomCategoryId',
            prop: 'bomCategoryId',
            label: 'BOM版本',
            headerSlot: 'headerProcessingBOM',
            align: 'center',
            minWidth: 180,
            show: this.clientEnvironmentId !== 4
          },
          {
            slot: 'produceRoutingId',
            prop: 'produceRoutingId',
            headerSlot: 'headerProduceRoutingId',
            label: '工艺路线',
            align: 'center',
            minWidth: 240
          },
          {
            slot: 'measuringUnit',
            prop: 'measuringUnit',
            label: '计量单位',
            align: 'center',
            minWidth: 140
          },
          {
            slot: 'moCount',
            prop: 'moCount',
            label: '模数',
            align: 'center',
            minWidth: 140,
            show: this.clientEnvironmentId == 4
          },
          {
            slot: 'blockCount',
            prop: 'blockCount',
            label: '块数',
            align: 'center',
            minWidth: 140,
            show: this.clientEnvironmentId == 4
          },
          {
            slot: 'factoriesId',
            prop: 'factoriesId',
            label: '所属工厂',
            align: 'center',
            minWidth: 140
          },

          {
            slot: 'weight',
            prop: 'weight',
            label: '权重等级',
            align: 'center',
            minWidth: 140,
            show: this.clientEnvironmentId == 4
          },
          {
            slot: 'isSlotting',
            prop: 'isSlotting',
            label: '是否开槽',
            align: 'center',
            minWidth: 140,
            show: this.clientEnvironmentId == 4
          },
          {
            slot: 'slottingType',
            prop: 'slottingType',
            label: '开槽类型',
            align: 'center',
            minWidth: 140,
            show: this.clientEnvironmentId == 4
          },

          {
            slot: 'productWeight',
            prop: 'productWeight',
            label: '订单重量',
            align: 'center',
            minWidth: 140
          },
          {
            slot: 'set',
            prop: 'set',
            label: '操作',
            align: 'center',
            minWidth: 140,
            fixed: 'right'
          }
        ];
      }
    },
    data() {
      return {
        visible: false,
        title: '',
        type: 3,
        weightList: [
          { code: 1, name: 'A' },
          { code: 2, name: 'B' },
          { code: 3, name: 'C' }
        ],
        factoryList: [],
        isSlotting: [
          { code: 1, name: '是' },
          { code: 2, name: '否' }
        ], //是否开槽
        planTypeList: [
          { label: '内销计划', value: '1' },
          { label: '外销计划', value: '2' },
          { label: '预制计划', value: '3' },
          { label: '改型计划', value: '4' },
          { label: '返工返修计划', value: '5' }
        ],
        loading: false,
        form: {
          timeDimensionPlanType: 3,
          categoryId: '',
          productName: '',
          planType: '',

          moCount: '', // 模具数量
          blockCount: 0, // 块数
          noWordCount: '', // 无字数量
          weight: '',
          startTime: '',
          endTime: '',
          isSlotting: '', //是否开槽
          slottingType: '', //开槽类型
          id: '',
          produceType: 2,
          bomCategoryId: '',
          produceRoutingId: '',
          requiredFormingNum: '',
          productInfoList: []
        },
        disabledList: [],
        bomVersionList: [],
        routingList: [],
        rules: {
          productName: [
            { required: true, message: '请选择名称', trigger: 'change' }
          ],

          bomCategoryId: [
            { required: true, message: '请选择BOM版本', trigger: 'blur' }
          ],

          produceType: [
            { required: true, message: '请选择工艺路线', trigger: 'blur' }
          ],
          produceRoutingId: [
            { required: true, message: '请选择工艺路线', trigger: 'blur' }
          ],

          reqMoldTime: [
            { required: true, message: '请选择要求完成日期', trigger: 'blur' }
          ],

          requiredFormingNum: [
            { required: true, message: '请输入生产数量', trigger: 'blur' }
          ]
        },
        producedList: [
          { code: 2, name: '加工(MBOM)' },
          { code: 3, name: '装配(ABOM)' }
        ],
        selectIndex: 0, // 选择工艺路线的当前数据下标
        processingRequired: 0 // 加工方式跟BOM 版本是否必填 1:是 0:否
        // selectionRowShow: false // 工艺路线输入框展示 状态
      };
    },

    // computed: {
    //   clientEnvironmentId() {
    //     return this.$store.state.user.info.clientEnvironmentId;
    //   }
    // },
    mounted() {
      // 加工方式跟BOM版本字段是否必填
      parameterGetByCode({
        code: 'production_plan_code'
      }).then((res) => {
        if (res) {
          this.processingRequired = res.value;
        }
      });
    },
    methods: {
      selectFactory(e, row) {
        let data = this.factoryList.find((item) => item.id === e);
        this.$set(row, 'factoriesName', data.name);
      },

      // 打开工艺路线
      openDialog(index) {
        this.selectIndex = index;
        this.$refs.processRouteRef.open();
      },

      // 选择工艺路线
      changeParent(item) {
        let data = this.form.productInfoList[this.selectIndex];
        this.$set(data, 'bomVersionList', []);
        this.$set(data, 'bomCategoryId', '');
        this.$set(data, 'model', '');
        this.$set(data, 'routingList', []);
        this.$set(data, 'productType', '');
        this.$set(data, 'produceRoutingName', item.name);
        this.$set(data, 'produceRoutingId', item.id);
        this.$set(data, 'selectionRowShow', true);
        // this.selectionRowShow = true;
      },
      async getFactoryList() {
        this.factoryList = await getFactoryList();
      },
      async open(val) {
        await this.getFactoryList();

        if (val) {
          this.title = !val.id ? '新增临时生产计划' : '编辑临时生产计划';
          val.planType = String(val.planType);
          this.form = val;
          // 修改
          if (val.id) {
            if (
              Array.isArray(val.productInfoList) &&
              val.productInfoList.length
            ) {
              this.form.productInfoList.map(async (v, index) => {
                if (!v.bomCategoryId) {
                  v.productType = '';
                  v.selectionRowShow = true;
                } else {
                  v.selectionRowShow = false;
                }
                if (v.productType) {
                  this.$set(
                    this.form.productInfoList[index],
                    'bomVersionList',
                    await this.bomListVersionFn(v.productType, v.categoryId)
                  );
                }
                if (v.bomCategoryId) {
                  this.$set(
                    this.form.productInfoList[index],
                    'routingList',
                    await this.changeBomIdFn(v.bomCategoryId)
                  );
                }
              });
            }
          }
          this.$forceUpdate();
        }
        this.visible = true;

        // this.$nextTick(async () => {
        //   console.log(val.productInfoList);
        //   this.$set(this.form, 'productInfoList', val.productInfoList);
        //   this.$set(this.form, 'routingList', val.routingList);

        // });

        //this.clientEnvironmentId 环境判断 宝悦环境
        // if (this.clientEnvironmentId == 4) {
        //   this.getPlanRoutingNew();
        // }

        // this.getPlanRoutingNew();
      },

      addEquipment() {
        this.$refs.equipmentRefs.open();
      },

      confirmChoose(list) {
        list.map((el) => (el.selectionRowShow = false));
        if (this.clientEnvironmentId == 4) {
          list.map((v) => {
            if (v.name.includes('板材')) {
              v.produceRoutingId = '1856970794952372226';
              v.produceRoutingName = '板材';
              v.produceVersionName = '板材';
            } else {
              (v.produceRoutingId = '1857313733642596353'),
                (v.produceRoutingName = '砌块'),
                (v.produceVersionName = '砌块');
            }
          });
        }

        list = list
          .filter(
            (i) =>
              !this.disabledList.find(
                (p) => p.productCode == i.code || p.productCode == i.productCode
              )
          )
          .map((item, index) => {
            if (item.productCode) {
              return item;
            } else {
              return {
                categoryId: item.id,
                productCode: item.code,
                productName: item.name,
                productUnitWeight: item.netWeight,
                weightUnit: item.weightUnit,
                model: item.modelType,
                specification: item.specification,
                brandNo: item.brandNum,
                measuringUnit: item.measuringUnit,
                produceRoutingId: item.produceRoutingId,
                produceRoutingName: item.produceRoutingName,
                produceVersionName: item.produceVersionName
              };
            }
          })
          .concat(this.disabledList);

        this.form.productInfoList = [];

        //  取出在弹窗中选中并且不在表格中的数据
        const result = list.filter(
          (i) =>
            this.form.productInfoList.findIndex(
              (p) => p.productCode === i.productCode
            ) === -1
        );

        // 取出在表格中并且不在弹窗中选中的数据 即取消选中的数据
        const del = this.form.productInfoList.filter(
          (i) => list.findIndex((p) => p.productCode === i.productCode) === -1
        );

        for (let i = this.form.productInfoList.length - 1; i >= 0; i--) {
          for (let j in del) {
            if (
              this.form.productInfoList[i].productCode === del[j].productCode
            ) {
              this.form.productInfoList.splice(i, 1);
              break;
            }
          }
        }
        // bomVersionList

        this.form.productInfoList = this.form.productInfoList.concat(result);

        this.$refs.tableRef.setData(this.form.productInfoList);

        this.changeLineNumber();

        //重置
        this.$set(this.form, 'produceType', '');
        this.$set(this.form, 'bomCategoryId', '');
        this.$set(this.form, 'produceRoutingId', '');

        this.bomListVersion();
      },

      changeLineNumber() {
        this.form.productInfoList.map((item, index) => {
          item.lineNumber = 10 * (index + 1);
        });
      },
      handleDeleteItem(index) {
        this.$confirm('确定删除当前数据？', '提示')
          .then(() => {
            const newArray = this.form.productInfoList.filter(
              (item, i) => i !== index
            );
            this.form.productInfoList = newArray;
            this.$refs.tableRef.setData(newArray);
          })
          .catch(() => {});
      },

      async getPlanCode() {
        this.loading = true;
        try {
          const code = await getCode('product_code');
          this.$set(this.form, 'code', code);
        } catch (err) {}
      },

      initForm() {
        this.form = {
          timeDimensionPlanType: 3,
          categoryId: '',
          productName: '',
          planType: '',
          moCount: '', // 模具数量
          blockCount: 0, // 块数
          noWordCount: '', // 无字数量
          weight: '',
          isSlotting: '', //是否开槽
          slottingType: '', //开槽类型
          id: '',
          produceType: 2,
          status: 2,
          bomCategoryId: '',
          produceRoutingId: '',
          productInfoList: [],
          requiredFormingNum: ''
        };
        // console.log(this.$refs);
        // this.$refs.tableRef.setData([]);
      },
      changeBomIdFn(bomCategoryId) {
        return new Promise((resolve, reject) => {
          bomRoutingList(bomCategoryId).then((res) => {
            let arr = res || [];
            if (arr.length == 0) {
              row.produceRoutingId = '';
            }
            resolve(arr);
          });
        });
      },

      // 选择BOM
      changeBomId(row, index) {
        // row.routingList = []
        bomRoutingList(row.bomCategoryId).then((res) => {
          let arr = res || [];
          if (arr.length > 0) {
            this.$nextTick(() => {
              row.produceRoutingName = arr[0].name;
              row.produceVersionName = arr[0].version;
              row.routingList = arr;
              this.$set(
                this.form.productInfoList[index],
                'produceRoutingId',
                arr[0].id
              );
              // this.selectionRowShow = false;
              row.selectionRowShow = false;
              this.$set(this.form.productInfoList[index], 'routingList', arr);
            });
          }
          this.$forceUpdate();
        });
      },

      // 清空BOM 跟工艺路线
      wipeData(index) {
        let row = this.form.productInfoList[index];
        row.bomCategoryId = '';
        row.routingList = [];
        row.bomVersionList = [];
        row.produceRoutingId = '';
        row.produceRoutingName = '';
        row.produceVersionName = '';
        row.selectionRowShow = false;
        // this.selectionRowShow = false;
      },

      // 选择加工方式
      changeProductType(row, index) {
        let param = {
          bomType: row.productType,
          categoryId: row.categoryId
        };

        this.wipeData(index);
        // row.bomCategoryId = '';
        // this.form.productInfoList[index].bomVersionList = [];
        bomListByPlan(param).then((res) => {
          let arr = res || [];
          this.$nextTick(() => {
            if (arr.length) {
              row.bomVersionList = arr;
              this.form.productInfoList[index].bomVersionList = arr;
              row.bomCategoryId = arr[0].id;
              this.changeBomId(row, index);
              let arrAll = JSON.parse(JSON.stringify(this.form));
              this.$set(this, 'form', arrAll);
            }
          });

          // this.$set(this.form.productInfoList[index], 'bomVersionList', arr);
        });
      },

      // 参数校验
      parameterVerification() {
        let flag = true;
        this.form.productInfoList.forEach((v) => {
          if (this.isRequired) {
            if (!v.productType) {
              flag = false;
              this.$message.warning('请选择加工方式');
              return;
            }

            if (!v.bomCategoryId) {
              flag = false;
              this.$message.warning('请选择BOM版本');
              return;
            }
          }

          if (!v.produceRoutingId) {
            flag = false;
            this.$message.warning('请选择工艺路线');
            return;
          }

          if (v.requiredFormingNum == 0) {
            flag = false;
            this.$message.warning('要求生产数量不能为0');
            return;
          }

          if (!v.requiredFormingNum) {
            flag = false;
            this.$message.warning('请输入要求生产数量');
            return;
          }
        });
        return flag;
      },
      save() {
        this.$refs.form.validate(async (valid) => {
          if (!valid) {
            return false;
          }

          let flag = this.parameterVerification();
          // 必填参数校验
          if (!flag) return;
          if (!this.form.id) {
            if (this.form.productInfoList.length) {
              this.form.productInfoList.map((item, index) => {
                delete item.selectionRowShow;
                if (item.bomVersionList && item.bomVersionList.length) {
                  item.bomCategoryName = item.bomVersionList[0].name;
                  item.bomCategoryVersions = item.bomVersionList[0].versions;
                  item.produceRoutingName = item.routingList[0].name;
                }
              });
            }

            this.form.timeDimensionPlanType = this.type;
            await this.getPlanCode();
            this.loading = true;

            // console.log(this.form,'this.form 1+1 ')
            // return
            temporaryPlanSave(this.form)
              .then((res) => {
                this.$message.success('新增成功！');
                this.visible = false;
                this.initForm();
                this.$emit('close', true);
              })
              .finally(() => {
                this.loading = false;
              });
          } else {
            this.loading = true;
            temporaryPlanSave(this.form)
              .then((res) => {
                this.$message.success('修改成功！');
                this.visible = false;
                this.initForm();
                this.$emit('close', true);
              })
              .finally(() => {
                this.loading = false;
              });
          }
        });
      },
      bomListVersionFn(produceType, categoryId) {
        return new Promise((resolve, reject) => {
          let param = {
            bomType: produceType,
            categoryId: categoryId
          };
          bomListByPlan(param).then((res) => {
            this.bomVersionList = res || [];
            resolve(res || []);
          });
        });
      },

      bomListVersion() {
        let param = {
          bomType: this.form.produceType,
          categoryId: this.form.categoryId
        };
        bomListByPlan(param).then((res) => {
          this.$nextTick(() => {
            this.bomVersionList = res || [];
          });
        });
      },

      // 工艺路线

      getPlanRouting() {
        bomRoutingList(this.form.bomCategoryId).then((res) => {
          this.routingList = res || [];
        });
      },

      // 宝悦 工艺路线
      getPlanRoutingNew() {
        // bomRoutingList(this.form.bomCategoryId).then((res) => {
        //   this.routingList = res || []
        // })
      },

      tableHandleKeyUp(row, name) {
        // return
        // , index, e, name
        if (name == 'procut') {
          row.return;
        }
        if (row.specification && this.clientEnvironmentId == 4) {
          let modelArr = row.specification.split('*');
          let modelLong = modelArr[0]; // model规格长度
          let modeWide = modelArr[1]; // model规格宽度
          let modeHight = modelArr[2].substr(0, modelArr[2].indexOf('cm')); // model规格高度
          modeHight = Number(modeHight);
          if (name === 'moCount') {
            // 模数

            this.$set(row, 'moCount', row.moCount);
            // 计算块数的公式：
            // (一模6米长度 / model规格长度) * (一模1.2米宽度 / model规格宽度) = 每一模的块数
            // 每一模的块数*模数moCount = 总块数
            if (row.productName.includes('板材')) {
              // 块数
              let blockCount =
                Math.floor(600 / modelLong) *
                Math.floor(120 / modeHight) *
                Math.floor(60 / modeWide) *
                row.moCount;

              row['blockCount'] = blockCount;
              // this.$set(row, 'blockCount', blockCount);
            } else if (row.productName.includes('砌块')) {
              let modelLongFixed = (600 / modelLong).toFixed(2);
              modelLongFixed = modelLongFixed.substring(
                0,
                modelLongFixed.length - 1
              );
              let modeWideFixed = (120 / modeWide).toFixed(2);
              modeWideFixed = modeWideFixed.substring(
                0,
                modeWideFixed.length - 1
              );
              let modeHightFixed = (60 / modeHight).toFixed(2);
              modeHightFixed = modeHightFixed.substring(
                0,
                modeHightFixed.length - 1
              );
              let num =
                Math.floor(modelLongFixed * modeWideFixed * modeHightFixed) *
                row.moCount;
              row['blockCount'] = num;
            }

            let numNew = (
              Number((modelLong * modeWide * modeHight) / 1000000).toFixed(5) *
              row.blockCount
            ).toFixed(5);
            row['requiredFormingNum'] = numNew;
          } else if (name === 'sum') {
            let e = row.requiredFormingNum;
            //方数
            row.planProductNum = e;

            row.blockCount = Math.floor(
              e / ((modelLong * modeWide * modeHight) / 1000000)
            );

            if (row.productName.includes('板材')) {
              let num = Math.ceil(
                row.blockCount /
                  (Math.floor(600 / modelLong) *
                    Math.floor(120 / modeHight) *
                    Math.floor(60 / modeWide))
              );

              // 48 480  4807 480
              row.moCount = num;
            } else if (row.productName.includes('砌块')) {
              row.moCount = Math.ceil(
                row.blockCount /
                  Math.floor(
                    (600 / modelLong) * (120 / modeHight) * (60 / modeWide)
                  )
              );
            }
          } else if (name === 'blockCount') {
            //块数
            // row.blockCount = row.moCount;

            row.blockCount = row.blockCount;

            if (row.productName.includes('板材')) {
              let moCount = Math.ceil(
                row.blockCount /
                  (Math.floor(600 / modelLong) *
                    Math.floor(120 / modeHight) *
                    Math.floor(60 / modeWide))
              );

              row.moCount = moCount;
            } else if (row.productName.includes('砌块')) {
              let moCount = Math.ceil(
                row.blockCount /
                  Math.floor(
                    (600 / modelLong) * (120 / modeHight) * (60 / modeWide)
                  )
              );
              this.$set(this.form, 'moCount', moCount);
              row.moCount = moCount;
            }

            let a = (
              (Number(row.blockCount) * modelLong * modeWide * modeHight) /
              1000000
            ).toFixed(5);
            row.requiredFormingNum = a;
          }
        }
      },

      changeProduceType(e) {
        if (this.clientEnvironmentId !== 4) {
          this.form.bomCategoryId = '';
          this.form['bomCategoryName'] = '';
          this.form['bomCategoryVersions'] = '';

          this.bomVersionList = [];

          this.routingList = [];
          this.form.produceRoutingId = '';
          this.form.produceRoutingName = '';
          this.form.produceVersionName = '';
          this.bomListVersion();
        }
      },

      // changeBomId() {
      //   this.routingList = [];
      //   this.form.produceRoutingId = '';
      //   this.form.produceRoutingName = '';
      //   this.form.produceVersionName = '';

      //   this.bomVersionList.forEach((f) => {
      //     if (f.id == this.form.bomCategoryId) {
      //       this.$set(this.form, 'bomCategoryName', f.name);
      //       this.$set(this.form, 'bomCategoryVersions', f.versions);
      //     }
      //   });

      //   this.getPlanRouting();
      // },

      changeRoute() {
        this.$forceUpdate();
        this.routingList.forEach((f) => {
          if (f.id == this.form.produceRoutingId) {
            this.$set(this.form, 'produceRoutingId', f.id);
            this.$set(this.form, 'produceRoutingName', f.name);
            this.$set(this.form, 'produceVersionName', f.version);
          }
        });
      },

      cancel() {
        this.visible = false;
        this.initForm();
        this.$emit('close');
      }
    }
  };
</script>

<style lang="scss" scoped>
  .el-form-item {
    margin-bottom: 14px !important;
  }

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

  .header_required {
    .is-required:before {
      content: '*';
      color: #f56c6c;
      margin-right: 4px;
    }
  }
</style>