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="客户名称:">
              <el-input
                clearable
                v-model="form.customerName"
                style="width: calc(100% - 80px)"
              />

              <contactDialog
                style="margin-left: 3px"
                @changeParent="contactDialogSuccess"
              ></contactDialog>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="6" v-if="isSaleOrder">
            <el-form-item label="销售订单号:" prop="saleOrder">
              <div class="sale-order-select">
                <el-input
                  v-model="form.saleOrder"
                  size="mini"
                  type="text"
                  style="width: calc(100% - 54px)"
                  placeholder="请选择销售订单号"
                  readonly
                ></el-input>
                <el-button
                  size="mini"
                  type="primary"
                  @click="openSaleOrderDialog"
                >
                  选择
                </el-button>
              </div>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item
              label="生产编号:"
              label-width="110px"
              prop="productionCodes"
            >
              <el-input
                v-model="form.productionCodes"
                size="mini"
                type="text"
                style="width: 100%"
                placeholder=" "
              ></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"
                @change="handleStartTimeChange(form)"
                type="datetime"
                placeholder="选择日期"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <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"
                @change="handleEndTimeChange(form)"
                type="datetime"
                placeholder="选择日期"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </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"
                type="datetime"
                placeholder="选择日期"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </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="reqMoldTime"
            >
              <el-date-picker
                style="width: 100%"
                size="mini"
                v-model="form.reqMoldTime"
                type="datetime"
                placeholder="选择日期"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </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:modelKey="{ row, $index }">
              <el-select
                clearable
                v-model="row.modelKey"
                multiple
                filterable
                allow-create
                default-first-option
              >
                <el-option
                  v-for="item in modelList"
                  :key="item.label"
                  :value="item.label"
                  :label="item.label"
                >
                </el-option>
              </el-select>
            </template>
            <template v-slot:colorKey="{ row, $index }">
              <el-select
                clearable
                v-model="row.colorKey"
                multiple
                filterable
                allow-create
                default-first-option
              >
                <el-option
                  v-for="item in colorList"
                  :key="item.label"
                  :value="item.label"
                  :label="item.label"
                >
                </el-option>
              </el-select>
            </template>
            <template v-slot:requiredFormingNum="{ row, $index }">
              <el-input
                v-model="row.requiredFormingNum"
                size="small"
                type="text"
                style="width: 100%"
                placeholder="输入要求生产数量"
                @input="(e) => handleQuantityInput(e, row)"
              ></el-input>
              <!-- placeholder="输入要求生产数量" @input="tableHandleKeyUp(row, 'sum')"></el-input> -->
            </template>
            <!-- <template v-slot:productionCodes="{ row, $index }">
              <el-input
                v-model="row.productionCodes"
                size="small"
                type="text"
                style="width: 100%"
                placeholder=" "
              ></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 row.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">
                <el-option
                  v-for="item of row.bomVersionList"
                  :key="item.id"
                  :label="item.name + '(V' + item.versions + '.0)'"
                  :value="item.id"
                  @click.native="changeBomId(row, $index, item)"
                ></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)"
                :disabled="!!factoriesId"
              >
                <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)"
                >删除</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" v-if="!form.id">
            <i class="el-icon-circle-plus-outline"></i>
          </div>
        </el-row>
      </el-form>

      <!-- 选择产品 -->
      <EquipmentDialog
        @choose="confirmChoose"
        :treeType="['9']"
        :selectList="[]"
        ref="equipmentRefs"
      >
      </EquipmentDialog>
      <saleOrderPop
        ref="saleOrderRef"
        :isMultiple="false"
        @chooseOrder="chooseSaleOrder"
      />
    </div>

    <template v-slot:footer>
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="save" :loading="loading">
        确定
      </el-button>
      <el-button
        type="primary"
        @click="save('sub')"
        :loading="loading"
        v-if="!isReview"
      >
        发布
      </el-button>
    </template>
    <ProcessRoute ref="processRouteRef" @changeParent="changeParent" />
  </ele-modal>
</template>

<script>
  import { findBomCategoryByCategoryId } from '@/api/productionPlan/index';
  import EquipmentDialog from '@/views/saleOrder/components/EquipmentDialog';
  import saleOrderPop from './components/saleOrderPop.vue';
  import { getCode } from '@/api/codeManagement';
  import ProcessRoute from '@/components/selectionDialog/processRoute.vue';
  import { parameterGetByCode } from '@/api/mainData/index';
  import { getByCode } from '@/api/system/dictionary-data';
  import {
    bomRoutingList,
    bomListByPlan,
    getFactoryList,
    saveAndRelease,
    temporaryPlanSave,
    getUpdateInfoByCode
  } from '@/api/saleOrder';
  import { planIsReview } from '@/api/productionPlan/index';
  import contactDialog from '@/components/contactDialog/openContactDialog.vue';
  import { deepClone } from '@/utils';

  export default {
    components: {
      EquipmentDialog,
      saleOrderPop,
      ProcessRoute,
      contactDialog
    },
    props: {
      factoryType: {
        type: Number,
        default: 3
      },
      factoryObj: {
        type: Object,
        default: () => {}
      },
      isAdd: {
        type: Boolean,
        default: true
      }
    },
    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: 'modelKey',
            prop: 'modelKey',
            label: '机型',
            align: 'center',
            minWidth: 240
          },
          {
            slot: 'colorKey',
            prop: 'colorKey',
            label: '颜色',
            align: 'center',
            minWidth: 240
          },
          {
            slot: 'requiredFormingNum',
            prop: 'requiredFormingNum',
            headerSlot: 'headeRequiredFormingNum',
            label: '要求生产数量',
            align: 'center',
            minWidth: 140
          },
          {
            slot: 'measuringUnit',
            prop: 'measuringUnit',
            label: '计量单位',
            align: 'center',
            minWidth: 140
          },
          // {
          //   slot: 'productionCodes',
          //   prop: 'productionCodes',
          //   label: '生产编号',
          //   align: 'center',
          //   minWidth: 140
          // },

          {
            slot: 'moCount',
            prop: 'moCount',
            label: '模数',
            headerSlot: 'headeRequiredFormingNum',
            align: 'center',
            minWidth: 140,
            show: this.clientEnvironmentId == 4
          },
          {
            slot: 'blockCount',
            prop: 'blockCount',
            label: '块数',
            headerSlot: 'headeRequiredFormingNum',
            align: 'center',
            minWidth: 140,
            show: this.clientEnvironmentId == 4
          },
          {
            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: 'factoriesId',
            prop: 'factoriesId',
            headerSlot: 'headerProduceRoutingId',
            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: 'newSumOrderWeight',
            prop: 'newSumOrderWeight',
            label: '计划重量',
            align: 'center',
            minWidth: 140
          },
          {
            slot: 'set',
            prop: 'set',
            label: '操作',
            align: 'center',
            minWidth: 140,
            fixed: 'right'
          }
        ];
      }
    },
    data() {
      return {
        visible: false,
        factoriesId: '',
        clientEnvironmentId: '',
        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: '',
          saleOrder: '',

          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' }
          ],

          planType: [
            { required: true, message: '请选择计划类型', trigger: 'blur' }
          ],

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

          startTime: [
            { required: true, message: '请选择计划开始日期', trigger: 'blur' }
          ],

          endTime: [
            { 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:否
        isReview: false,
        isSaleOrder: false
        // selectionRowShow: false // 工艺路线输入框展示 状态
      };
    },

    // computed: {
    //   clientEnvironmentId() {
    //     return this.$store.state.user.info.clientEnvironmentId;
    //   }
    // },
    mounted() {},
    methods: {
      // 获取
      async getCodeData() {
        let arr1 = await this.getLevelCode('product_model_key');
        let arr2 = await this.getLevelCode('product_color_key');
        this.modelList = arr1;
        this.colorList = arr2;
      },
      async getLevelCode(code) {
        try {
          const res = await getByCode(code);
          if (res.code == 0) {
            let list = Object.values(res.data).map((el) => {
              let k = Object.keys(el)[0];
              let v = Object.values(el)[0];
              return {
                label: v,
                value: k
              };
            });
            return list;
          }
        } catch (err) {
          this.$message.error(err.message);
        }
      },
      selectFactory(e, row) {
        let data = this.factoryList.find((item) => item.id === e);
        this.$set(row, 'factoriesName', data.name);
      },

      async getPlannedReleaseRequire(code) {
        parameterGetByCode({ code }).then((res) => {
          if (res) {
            this.isReview = res.value == '1' ? true : false;
          }
        });
      },

      // 打开工艺路线
      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) {
        const [processingRes, saleOrderRes] = await Promise.all([
          parameterGetByCode({ code: 'production_plan_code' }),
          parameterGetByCode({ code: 'create_plan_binding_sale_order' }),
          this.getCodeData(),
          this.getFactoryList(),
          this.getPlannedReleaseRequire('planned_release_require')
        ]);

        if (processingRes) {
          this.processingRequired = processingRes.value;
        }
        this.isSaleOrder = saleOrderRes?.value === '1';
        this.clientEnvironmentId =
          this.$store.state.user.info.clientEnvironmentId;
        this.factoriesId = this.$store.state.user.info.factoryId;

        if (!val) {
          this.title = '新增临时生产计划';
          this.visible = true;
          return;
        }

        if (val.planType == null || val.planType === 'null') {
          val.planType = '';
        }
        this.title = val.id ? '编辑临时生产计划' : '新增临时生产计划';
        val.planType = String(val.planType);
        this.form = await getUpdateInfoByCode(val.code);

        if (this.isSaleOrder) {
          const salesCode = this.form.salesCode;
          this.$set(
            this.form,
            'saleOrder',
            Array.isArray(salesCode) ? salesCode.join(',') : salesCode || ''
          );
        }

        if (val.id) {
          await this.initEditProductList(val);
        }

        this.$forceUpdate();
        this.visible = true;
      },

      async initEditProductList(val) {
        const productList = this.form.productInfoList;

        if (Array.isArray(val.productInfoList) && val.productInfoList.length) {
          await Promise.all(
            productList.map(async (v, index) => {
              v.selectionRowShow = !v.bomCategoryId;
              if (!v.bomCategoryId) {
                v.productType = '';
              }
              if (v.productType) {
                this.$set(productList[index], 'bomVersionList',
                  await this.bomListVersionFn(v.productType, v.categoryId)
                );
              }
              if (v.bomCategoryId) {
                this.$set(productList[index], 'routingList',
                  await this.changeBomIdFn(v.bomCategoryId, productList[index])
                );
              }
            })
          );
        }

        const resAll = await Promise.all(
          productList.map((item) => findBomCategoryByCategoryId(item.categoryId))
        );

        productList.forEach((item, index) => {
          if (typeof item.colorKey === 'string' && item.colorKey) {
            this.$set(productList[index], 'colorKey', item.colorKey.split(','));
          }
          if (typeof item.modelKey === 'string' && item.modelKey) {
            this.$set(productList[index], 'modelKey', item.modelKey.split(','));
          }

          if (!resAll[index]) return;

          const listMap = {};
          resAll[index].forEach((el) => {
            if (el.bomType === '2' || el.bomType === '3') {
              if (!listMap[el.bomType]) listMap[el.bomType] = [];
              listMap[el.bomType].push(el);
            }
          });

          const list = [];
          if (listMap[2]) list.push({ code: 2, name: 'MBOM' });
          if (listMap[3]) list.push({ code: 3, name: 'ABOM' });

          if (!item.factoriesId) {
            this.$set(productList[index], 'factoriesId', this.factoriesId);
            this.$set(productList[index], 'factoriesName',
              this.factoryList?.find((f) => f.id === this.factoriesId)?.name
            );
          }
          this.$set(productList[index], 'producedList', list);
        });
      },

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

      async confirmChoose(data) {
        let list = deepClone(data);
        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 = '砌块');
            }
          });
        }
        let ids = this.form.productInfoList.map((item) => item.categoryId);

        let result = list
          .filter((i) => !ids.includes(i.id))
          .map((item, index) => {
            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,
              factoriesId: this.factoriesId,
              colorKey: item.colorKey ? item.colorKey.split(',') : [],
              modelKey: item.modelKey ? item.modelKey.split(',') : [],
              factoriesName: this.factoryList?.find(
                (factoryData) => factoryData.id === this.factoriesId
              )?.name
            };
          });
        // 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;
        //     }
        //   }
        // }
        let promiseAll = [];
        result.forEach(async (item) => {
          let categoryId = item.categoryId;
          promiseAll.push(findBomCategoryByCategoryId(categoryId));
        });

        const resAll = await Promise.all(promiseAll);

        try {
          await result.forEach(async (item, index) => {
            if (resAll[index]) {
              let listMap = {};
              let list = [];
              let arr = [];
              resAll[index].map((el) => {
                if (el.bomType == '2' || el.bomType == '3') {
                  console.log(listMap, 'listMap');
                  if (listMap[el.bomType]) {
                    listMap[el.bomType].push(el);
                  } else {
                    listMap[el.bomType] = [el];
                  }
                }
              });
              if (listMap[2]) {
                list.push({ code: 2, name: 'MBOM' });
                arr = listMap[2];
                item.productType = 2;
              }
              if (listMap[3]) {
                list.push({ code: 3, name: 'ABOM' });
                if (!listMap[2]) {
                  arr = listMap[3];
                  item.productType = 3;
                }
              }
              if (arr.length > 0) {
                arr.map((el) => (el.bomCategoryId = el.id));

                item.bomCategoryId = arr[0].id;
                await this.changeBomId(arr[0], 0);

                this.$set(item, 'produceRoutingId', arr[0].produceRoutingId);
                this.$set(
                  item,
                  'produceVersionName',
                  arr[0].produceVersionName
                );
                this.$set(
                  item,
                  'produceRoutingName',
                  arr[0].produceRoutingName
                );
                console.log(arr[0], 'arr[0]');
                this.$set(item, 'routingList', arr[0].routingList);
                this.$set(item, 'bomCategoryName', arr[0].name);
                this.$set(item, 'bomCategoryVersions', arr[0].versions);
              }
              item.producedList = list;
              item.bomVersionList = arr;

              return item;
            }
          });
        } catch (err) {}
        console.log(result, 'result');
        // return
        this.form.productInfoList.push(...result);
        this.changeLineNumber();

        console.log(this.form.productInfoList, 'this.form.productInfoList');

        this.$refs.tableRef.setData(this.form.productInfoList);
        // console.log(this.form.productInfoList, 'this.form.productInfoList');
        //重置
        this.$set(this.form, 'produceType', '');
        this.$set(this.form, 'bomCategoryId', '');
        this.$set(this.form, 'produceRoutingId', '');
      },

      changeLineNumber() {
        this.form.productInfoList.forEach((item, index) => {
          let data = this.form.productInfoList[index - 1];

          this.$set(
            this.form.productInfoList[index],
            'lineNumber',
            data ? data.lineNumber + 10 : 10
          );
        });
      },
      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: '',
          saleOrder: '',
          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, row) {
        return new Promise((resolve, reject) => {
          bomRoutingList(bomCategoryId).then((res) => {
            let arr = res || [];
            if (arr.length == 0) {
              row.produceRoutingId = '';
            }
            resolve(arr);
          });
        });
      },

      // 选择BOM
      async changeBomId(row, index, bomData, typeChange) {
        if (bomData) {
          row.bomCategoryName = bomData.name;
          row.bomCategoryVersions = bomData.versions;
        }
        // row.routingList = []
        return await 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.produceRoutingId = arr[0].id;
            row.routingList = arr;
            if (typeChange) {
              this.$set(this.form.productInfoList[index], 'routingList', arr);
              this.$set(
                this.form.productInfoList[index],
                'produceRoutingId',
                arr[0].id
              );
            } else {
              this.$set(row, 'produceRoutingId', arr[0].id);
              this.$set(row, 'routingList', arr);
            }

            row.selectionRowShow = false;
            console.log(row.routingList, 'this.form.productInfoList');
            // });
          }
          this.$forceUpdate();
        });
      },
      contactDialogSuccess(data) {
        console.log(data, 'data 11');
        // serialNo
        this.form.serialNo = data.serialNo;
        this.$set(this.form, 'customerName', data.name);
      },
      openSaleOrderDialog() {
        this.$refs.saleOrderRef.open([]);
      },
      chooseSaleOrder(list) {
        const currentRow = list[0] || {};
        this.$set(this.form, 'saleOrder', currentRow.orderNo || '');
      },
      // 清空BOM 跟工艺路线
      wipeData(index) {
        this.$set(this.form.productInfoList[index], 'bomCategoryId', '');
        this.$set(this.form.productInfoList[index], 'routingList', []);
        this.$set(this.form.productInfoList[index], 'bomVersionList', []);
        this.$set(this.form.productInfoList[index], 'produceRoutingId', '');
        this.$set(this.form.productInfoList[index], 'produceRoutingName', '');
        this.$set(this.form.productInfoList[index], 'produceVersionName', '');
        this.$set(this.form.productInfoList[index], '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, arr[0], 'typeChange');
              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.factoriesId) {
            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;
          }
          if (!v.moCount && this.clientEnvironmentId == 4) {
            flag = false;
            this.$message.warning('请输入模数');
            return;
          }
          if (!v.blockCount && this.clientEnvironmentId == 4) {
            flag = false;
            this.$message.warning('请输入块数');
            return;
          }
        });
        return flag;
      },

      save(type) {
        this.$refs.form.validate(async (valid) => {
          if (!valid) return;
          if (!this.parameterVerification()) return;

          const isAdd = !this.form.id;

          this.form.productInfoList.forEach((item) => {
            item.colorKey = item.colorKey.toString();
            item.modelKey = item.modelKey.toString();
            if (isAdd) delete item.selectionRowShow;
          });

          if (isAdd) {
            this.form.timeDimensionPlanType = this.type;
          }
          if (this.isSaleOrder) {
            this.form.salesCode = this.form.saleOrder.split(',');
          }

          this.loading = true;
          const api = type === 'sub' ? saveAndRelease : temporaryPlanSave;
          api(this.form)
            .then(() => {
              this.$message.success(isAdd ? '新增成功！' : '修改成功！');
              this.visible = false;
              this.initForm();
              this.$emit('close', true);
            })
            .finally(() => {
              this.loading = false;
            });
        });
      },
      // save(type) {
      //   this.$refs.form.validate(async (valid) => {
      //     if (!valid) {
      //       return false;
      //     }
      //     let flag = this.parameterVerification();
      //     // 必填参数校验
      //     if (!flag) return;

      //     this.form.productInfoList.forEach((item, index) => {
      //       this.$set(
      //         this.form.productInfoList[index],
      //         'colorKey',
      //         item.colorKey.toString()
      //       );
      //       this.$set(
      //         this.form.productInfoList[index],
      //         'modelKey',
      //         item.modelKey.toString()
      //       );
      //     });

      //     // this.
      //     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;
      //       if (this.isSaleOrder) {
      //         this.form.saleOrder = this.form.saleOrder.split(',');
      //       }
      //       this.loading = true;

      //       let api = type == 'sub' ? saveAndRelease : temporaryPlanSave;
      //       api(this.form)
      //         .then((res) => {
      //           this.$message.success('新增成功！');
      //           this.visible = false;
      //           this.initForm();
      //           this.$emit('close', true);
      //         })
      //         .finally(() => {
      //           this.loading = false;
      //         });
      //     } else {
      //       this.loading = true;
      //       let api = type == 'sub' ? saveAndRelease : temporaryPlanSave;
      //       if (this.isSaleOrder) {
      //         this.form.saleOrder = this.form.saleOrder.split(',');
      //       }

      //       api(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 || [];
            console.log(res, 'res 000');
          });
        });
      },

      // 工艺路线

      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') {
          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.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;
          }
        }
      },
      // 数量正则 quantity
      handleQuantityInput(e, row) {
        // 过滤非数字字符（包括负号）
        let value = e.replace(/[^\d.]/g, '');
        // value = value.replace(/-/g, '');
        // 限制不能以 0 开头（除非是 0 本身）
        // if (value.startsWith('0') && value.length > 1) {
        //   value = value.slice(1);
        // }
        // 更新绑定值
        row.requiredFormingNum = value;
        //       if (
        //   item.weightUnit == 'G' ||
        //   item.weightUnit == 'g' ||
        //   item.weightUnit == '克'
        // ) {
        //   let total =
        //     ((item.requiredFormingNum - 0) * item.productUnitWeight) /
        //     1000;
        //   item.newSumOrderWeight = total.toFixed(2);
        //   item.newWeightUnit = 'KG';
        // } else {
        //   item.newWeightUnit = item.weightUnit;
        //   item.newSumOrderWeight = item.requiredFormingNum;
        // }
        row.newWeightUnit = row.weightUnit;
        if (row.weightUnit == row.measuringUnit) {
          row.newSumOrderWeight = row.requiredFormingNum;
        } else if (row.requiredFormingNum && row.productUnitWeight) {
          row.newSumOrderWeight =
            row.requiredFormingNum * row.productUnitWeight;
        } else {
          row.newSumOrderWeight = 0;
        }
        row.productWeight = row.newSumOrderWeight;
        this.tableHandleKeyUp(row, 'sum');
      },
      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');
      },

      // 【开始时间变化时】触发
      handleStartTimeChange(row) {
        // 校验 是否 大于结束时间  wda
        this.checkEndTimeValid(row);
      },
      // 【结束时间变化时】触发
      handleEndTimeChange(row) {
        // 校验 是否 大于结束时间  wda
        this.checkEndTimeValid(row);
      },

      handleCompleteChange(row) {
        const { reqMoldTime } = row;

        if (!row.startTime) {
          row.reqMoldTime = '';
          return this.$message.warning('请选择计划开始时间');
        }

        this.handleComplete(reqMoldTime, row);
      },

      handleComplete(reqMoldTime, row) {
        const startTime = new Date(row.startTime).getTime();
        const completeTime = new Date(reqMoldTime).getTime();

        if (completeTime < startTime) {
          row.reqMoldTime = ''; // 修正为开始时间
          return this.$message.warning(
            '要求完成时间不能早于计划开始时间, 请重新选择要求完成时间'
          );
        }
      },

      // 时间校验
      checkEndTimeValid(row) {
        const { startTime: start, endTime: end } = row;
        this.handleChange(start, end, row);
        // // if (!start || !end) return; // 开始/结束时间未填，跳过
        // const startTime = new Date(start); // 开始时间
        // const endTime = new Date(end); // 结束时间
        // if (endTime < startTime) {
        //   row.endTime = new Date(startTime); // 修正为开始时间
        //   this.$message.info('结束时间不能早于开始时间，已自动设为开始时间');
        // }
      },

      handleChange(start, end, row) {
        const startTime = new Date(start).getTime();
        const endTime = new Date(end).getTime();

        if (endTime < startTime) {
          row.endTime = ''; // 修正为开始时间
          return this.$message.warning(
            '计划结束时间不能早于计划开始时间，请重新选择计划结束时间'
          );
        }
      }
    }
  };
</script>

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

  .sale-order-select {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .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>