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

<template>
  <!-- :close-on-click-modal="false" -->
  <ele-modal width="70vw" :visible.sync="visible" custom-class="ele-dialog-form" :title="title" :maxable="true">
    <div class="form-wrapper">
      <el-form ref="form" :model="form" :rules="rules" label-width="90px" class="formbox">
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="产品名称:" prop="productName">
              <el-input @click.native="handleAdd" placeholder="请选择物料" v-model="form.productName" size="mini"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="编码:" prop="productCode">
              <el-input placeholder="" size="mini" disabled v-model="form.productCode"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="牌号:" prop="brandNum">
              <el-input placeholder="" size="mini" disabled v-model="form.brandNum"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="型号:" prop="modelType">
              <el-input placeholder="" size="mini" disabled v-model="form.modelType"></el-input>
            </el-form-item>
          </el-col>

        </el-row>

        <el-row :gutter="24">
          
          <el-col :span="6">
            <el-form-item label="规格:" prop="specification">
              <el-input placeholder="" size="mini" disabled v-model="form.specification"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <headerTitle title="计划信息"> </headerTitle>

        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="加工方式:" prop="produceType">
              <el-select v-model="form.produceType" style="width: 100%" @change="changeProduceType" size="mini">
                <el-option v-for="item of producedList" :key="item.code" :label="item.name"
                  :value="item.code"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="BOM版本:" prop="bomCategoryId" v-if="clientEnvironmentId != 4">
              <el-select v-model="form.bomCategoryId" style="width: 100%" @change="changeBomId" size="mini">
                <el-option v-for="item of bomVersionList" :key="item.id"
                  :label="item.name + '(V' + item.versions + '.0)'" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="工艺路线:" prop="produceRoutingId" v-if="clientEnvironmentId !== 4">
              <el-select v-model="form.produceRoutingId" style="width: 100%" @change="changeRoute" size="mini">
                <el-option v-for="item of routingList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>

              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="工艺路线:" prop="produceRoutingId" v-if="clientEnvironmentId == 4">
              <el-input v-model="form.produceRoutingName" style="width: 100%" readonly size="mini"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="生产数量:" prop="requiredFormingNum">
              <el-input v-model.number="form.requiredFormingNum" @input="tableHandleKeyUp(form, 'sum')" size="mini"
                oninput="value=value.replace(/[^\d]/g,'')" style="width: 100%" placeholder="输入数量">
                <template slot="append">{{ form.measuringUnit }} </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
         
        <div v-if="clientEnvironmentId==4">
          <el-col :span="6">
            <el-form-item label="模数:" prop="requiredFormingNum">
              <el-input v-model.number="form.moCount" @input="tableHandleKeyUp(form, 'moCount')" size="mini"
                oninput="value=value.replace(/[^\d]/g,'')" style="width: 100%" placeholder="输入模数">
                <!-- <template slot="append">{{ form.measuringUnit }} </template> -->
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="块数:" prop="requiredFormingNum">
              <el-input v-model.number="form.blockCount" @input="tableHandleKeyUp(form, 'blockCount')" size="mini"
                oninput="value=value.replace(/[^\d]/g,'')" style="width: 100%" placeholder="输入块数">
                <!-- <template slot="append">{{ form.measuringUnit }} </template> -->
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="权重等级:" prop="weight">
              <el-select v-model="form.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>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否开槽:" prop="isSlotting">
              <el-select v-model="form.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>
            </el-form-item>
          </el-col>
          <el-col :span="6" v-if="form.isSlotting == 1">
            <el-form-item label="开槽类型:" prop="slottingType">
              <DictSelection
                dictName="开槽类型"
                v-model="form.slottingType"
                size="mini"
              >
              </DictSelection>
            </el-form-item>
          </el-col>
        </div>


          <el-col :span="6">
            <el-form-item label="批次号:" prop="batchNo">
              <el-input v-model="form.batchNo" size="mini" style="width: 100%" placeholder="输入批次号"></el-input>
            </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>

        <el-row :gutter="24">
          <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-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-row>
      </el-form>

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

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

<script>
import EquipmentDialog from '@/views/saleOrder/components/EquipmentDialog';
import { getCode } from '@/api/codeManagement';
import {
  bomRoutingList,
  bomListByPlan,
  saveSaleToPlan,
  temporarilyUpdate
} from '@/api/saleOrder';

export default {
  components: {
    EquipmentDialog
  },
  props: {
    factoryType: {
      type: Number,
      default: 3
    },
    factoryObj: {
      type: Object,
      default: () => { }
    }
  },
  watch: {
    factoryObj: {
      immediate: true,
      deep: true,
      handler(val) {


        // this.type = val;
        this.title = !val.id ? '新增临时计划' : '编辑临时计划';
        // this.form = this.factoryObj;



        this.form = val;
        // 修改
        this.$nextTick(() => {
          if (val.id) {
            this.bomListVersion();
            if (val.bomCategoryId) {
              this.getPlanRouting();
            }

          }
        });

      }
    }
  },
  computed: {
    clientEnvironmentId() {
      return this.$store.state.user.info.clientEnvironmentId;
    },
  },
  data() {
    return {
      visible: false,
      title: '',
      type: 3,
      weightList: [
        { code: 1, name: 'A' },
        { code: 2, name: 'B' },
        { code: 3, name: 'C' }
      ],
      isSlotting: [
        { code: 1, name: '是' },
        { code: 2, name: '否' }
      ], //是否开槽
      loading: false,
      form: {
        timeDimensionPlanType: 3,
        categoryId: '',
        productName: '',
        planType: 1,
        moCount: '', // 模具数量
        blockCount: 0, // 块数
        noWordCount: '',// 无字数量
        weight:'',
        isSlotting:'',//是否开槽
        slottingType:'',//开槽类型
        id: '',
        produceType: 2,
        bomCategoryId: '',
        produceRoutingId: '',
        requiredFormingNum: ''
      },

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

  computed: {
    clientEnvironmentId() {
      return this.$store.state.user.info.clientEnvironmentId;
    }
  },
  methods: {
    open() {

      this.visible = true;

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

      // this.getPlanRoutingNew();
    },

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

    confirmChoose(list) {
      if (this.clientEnvironmentId == 4) {
        let data = {};
        if (list[0].name.includes('板材')) {

          data = {
            id: '1856970794952372226',
            name: '板材',
            produceVersionName: '板材'
          };
        } else {
          data = {
            id: '1857313733642596353',
            name: '砌块',
            produceVersionName: '砌块'
          };
        }
        this.$set(this.form, 'produceRoutingName', data.name);
        this.$set(this.form, 'produceRoutingId', data.id);
        this.$set(this.form, 'produceVersionName', data.produceVersionName);
      }

      this.$set(this.form, 'categoryId', list[0].id);
      this.$set(this.form, 'productName', list[0].name);
      this.$set(this.form, 'productCode', list[0].code);
      this.$set(this.form, 'specification', list[0].specification);
      this.$set(this.form, 'brandNum', list[0].brandNum);
      this.$set(this.form, 'modelType', list[0].modelType);
      this.$set(this.form, 'measuringUnit', list[0].measuringUnit);

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



      this.bomListVersion();

    },

    handleDeleteItem(index) {
      this.form.salesOrders.splice(index, 1);
    },

    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: 1,
        moCount: '', // 模具数量
        blockCount: 0, // 块数
        noWordCount: '',// 无字数量
        weight:'',
        isSlotting:'',//是否开槽
        slottingType:'',//开槽类型
        id: '',
        produceType: 2,
        bomCategoryId: '',
        produceRoutingId: '',
        requiredFormingNum: ''
      };
    },
    save() {
      this.$refs.form.validate(async (valid) => {
        if (!valid) {
          return false;
        }

        if (!this.form.id) {
          this.form.timeDimensionPlanType = this.type;
          await this.getPlanCode();
          this.loading = true;

          saveSaleToPlan(this.form)
            .then((res) => {
              this.$message.success('新增成功！');
              this.visible = false;
              this.initForm();
              this.$emit('close', true);

            })
            .finally(() => {
              this.loading = false;
            });
        } else {
          this.loading = true;
          temporarilyUpdate(this.form)
            .then((res) => {
              this.$message.success('修改成功！');
              this.visible = false;
              this.initForm();
              this.$emit('close', true);

            })
            .finally(() => {
              this.loading = false;
            });
        }
      });
    },

    bomListVersion() {
      let param = {
        bomType: this.form.produceType,
        categoryId: this.form.categoryId
      };
      bomListByPlan(param).then((res) => {
        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 (this.form.specification && this.clientEnvironmentId == 4) {

        let modelArr = this.form.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(this.form, '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;

            this.$set(this.form, 'blockCount', blockCount);


          } else if (row.productName.includes('砌块')) {
            console.log(1);

            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;

            this.$set(this.form, 'blockCount', num);
          }

          let numNew =
            (Number((modelLong * modeWide * modeHight) / 1000000).toFixed(5) *
            row.blockCount).toFixed(5);


          this.$set(this.form, 'requiredFormingNum', numNew);

        } else if (name === 'sum') {
          let e = this.form.requiredFormingNum
          console.log('方数');

          //方数
          this.form.planProductNum = e;

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

          if (this.form.productName.includes('板材')) {


            let num = Math.ceil(
              this.form.blockCount /
              (Math.floor(600 / modelLong) *
                Math.floor(120 / modeHight) *
                Math.floor(60 / modeWide))
            );

            // 48 480  4807 480
            this.$set(this.form, '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;

          this.$set(this.form, '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))
            );
            this.$set(this.form, '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);
          }

          let a =
            ((Number(this.form.blockCount) * modelLong * modeWide * modeHight) / 1000000).toFixed(5);

            
          this.$set(this.form, 'requiredFormingNum', a);

        }
      }

    },


    changeProduceType() {
      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() {
      console.log(this.routingList, this.form.produceRoutingId);
      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() {
      console.log('取消');
      this.visible = false;
      this.$emit('close');
    }
  }
};
</script>

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