kd-aiot-frontend-aps/src/views/saleOrder/components/create-order.vue

<template>
  <div>
    <ele-modal :visible.sync="visible" :title="title" width="80vw" append-to-body :maxable="true">
      <el-form ref="form" :model="form" :rules="rules" label-width="90px" class="create-form" :maxable="true">
        <el-row :gutter="24">
          <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
            <el-form-item label="销售订单号:">
              <el-input clearable :maxlength="20" v-model="form.code" disabled />
            </el-form-item>
          </el-col>
          <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
            <el-form-item label="订单类型:" prop="orderType">
              <el-select v-model="form.orderType" style="width: 100%;">
                <el-option v-for="item of orderTypeList" :key="item.id" :label="item.label"
                  :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
            <el-form-item label="销售类型:">
              <DictSelection dictName="订单类型" clearable v-model="form.saleType">
              </DictSelection>
            </el-form-item>
          </el-col>
          <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
            <el-form-item label="按单按库:">
              <DictSelection dictName="按单按库" clearable v-model="form.orderLibraryType">
              </DictSelection>
            </el-form-item>
          </el-col>
          <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
            <el-form-item label="客户名称:">
              <el-input clearable v-model="form.customerName" :disabled="form.saleType == 3" />
            </el-form-item>
          </el-col>

          <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
            <el-form-item label="客户简称:">
              <el-input clearable v-model="form.simpleName" :disabled="form.saleType == 3" />
            </el-form-item>
          </el-col>

          <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
            <el-form-item label="客户代号:">
              <el-input clearable v-model="form.serialNo" :disabled="form.saleType == 3" />
            </el-form-item>
          </el-col>

          <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
            <el-form-item label="业务员:">
              <el-input clearable v-model="form.salesman" />
            </el-form-item>
          </el-col>

          <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
            <el-form-item label="交付日期:" prop="deliveryTime">
              <el-date-picker :picker-options="pickerOptions" style="width: 100%" v-model="form.deliveryTime"
                type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <!-- <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
            <el-form-item label="齐套状态:" prop="completeState">
              <el-select v-model="form.completeState" style="width: 100%">
                <el-option v-for="item of completeList" :key="item.code" :label="item.name"
                  :value="item.code"></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
            <el-form-item label="备注:">
              <el-input clearable v-model="form.notes" />
            </el-form-item>
          </el-col>
          <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
            <el-form-item label="交付要求:">
              <DictSelection dictName="紧急程度" clearable v-model="form.deliveryRequirements">
              </DictSelection>
            </el-form-item>
          </el-col>
        </el-row>

        <el-table :data="form.productInfoList" border height="40vh" key="id">
          <el-table-column label="序号" align="center" width="60">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="行号" align="center" prop="lineNumber">
          </el-table-column>
          <el-table-column label="名称" align="center" prop="productName">
          </el-table-column>
          <el-table-column label="编码" align="center" prop="productCode">
          </el-table-column>
          <el-table-column label="牌号" align="center" prop="brandNo">
          </el-table-column>
          <el-table-column label="型号" align="center" prop="model">
          </el-table-column>
          <el-table-column label="规格" align="center" prop="specification">
          </el-table-column>
          <el-table-column label="单重" align="center" prop="productUnitWeight">
          </el-table-column>
          <el-table-column label="重量单位" align="center" prop="weightUnit">
          </el-table-column>
          <el-table-column label="生产编号" align="center" prop="productionCodes" width="140">
            <template slot-scope="scope">
              <el-form-item label-width="0px" :prop="'productInfoList.' + scope.$index + '.productionCodes'">
                <el-input style="width: 100%" size="small" v-model="scope.row.productionCodes" placeholder="请输入">
              </el-input>
            </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="批次号" align="center" prop="batchNo" width="140">
            <template slot-scope="scope">
              <el-form-item label-width="0px" :prop="'productInfoList.' + scope.$index + '.batchNo'">
                <el-input style="width: 100%" size="small" v-model="scope.row.batchNo" placeholder="请输入" @input="(value) =>
                (scope.row.batchNo = value.replace(
                 /[^a-zA-Z0-9_-]/g, ''
                ))">
              </el-input>
            </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="订单数量" width="140" align="center" prop="contractNum">
            <template slot-scope="scope">
              <el-form-item label-width="0px" :prop="'productInfoList.' + scope.$index + '.contractNum'" :rules="{
                required: true,
                message: '请输入订单数量',
                trigger: 'blur'
              }">
                <el-input v-model.number="scope.row.contractNum" size="small" type="number" style="width: 100%"
                  placeholder="输入数量" @input="inputNumber(scope.row, scope.$index)"></el-input>
              </el-form-item>
            </template>
          </el-table-column>



          <el-table-column label="加工方式" width="140" align="center" prop="productType">
            <template slot-scope="scope">
              <el-form-item label-width="0px" :prop="'productInfoList.' + scope.$index + '.productType'">

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

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



          <el-table-column label="BOM版本" width="140" align="center" prop="bomCategoryId"
            v-if="clientEnvironmentId != 4">
            <template slot-scope="scope">
              <el-form-item label-width="0px" :prop="'productInfoList.' + scope.$index + '.bomCategoryId'"
                :key="scope.$index">

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

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

          <el-table-column label="工艺路线" width="140" align="center" prop="produceRoutingId"
            v-if="clientEnvironmentId != 4">
            <template slot-scope="scope">
              <el-form-item label-width="0px" :prop="'productInfoList.' + scope.$index + '.produceRoutingId'">
                <el-select v-model="scope.row.produceRoutingId" @change="changeRoutingList(scope.row, scope.$index)">
                  <el-option v-for="item of scope.row.routingList" :key="item.id" :label="item.name"
                    :value="item.id"></el-option>
                </el-select>

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

          <el-table-column label="工艺路线" align="center" prop="produceRoutingName" v-if="clientEnvironmentId == 4">
            <template slot-scope="scope">
              <el-form-item label-width="0px" :prop="'productInfoList.' + scope.$index + '.produceRoutingName'">
                <el-input v-model="form.produceRoutingName" style="width: 100%" readonly></el-input>

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

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




          <el-table-column label="计量单位" align="center" prop="measuringUnit">

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

          <el-table-column align="center" width="100" label="块数" v-if="clientEnvironmentId == '4'">
            <template slot-scope="scope">
              <div>
                <el-input size="small" style="width: 100%" @input="
                  tableHandleKeyUp(
                    scope.row,
                    scope.$index,
                    $event,
                    'blockCount'
                  )
                  " v-model="scope.row.blockCount" placeholder="请输入"></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="订单重量" align="center" prop="productWeight">
            <template slot-scope="{ row }">
              <span>{{ row.productWeight ? row.productWeight : '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="70">
            <template slot-scope="scope">
              <el-link type="primary" :underline="false" @click="homogeneityInspect(scope.row)">
                齐套性检查
              </el-link>
              <el-button type="text" @click="handleDeleteItem(scope.$index)" v-if="!scope.row.id">删除</el-button>
            </template>

          </el-table-column>
        </el-table>
        <div class="add-product" @click="addEquipment">
          <i class="el-icon-circle-plus-outline"></i>
        </div>
      </el-form>
      <template v-slot:footer>
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="save" :loading="loading">
          确定
        </el-button>
      </template>

      <!-- 选择产品 -->
      <EquipmentDialog ref="equipmentRefs" @choose="confirmChoose" :selectList="form.productInfoList.filter(
        (i) => !disabledList.find((p) => p.productCode === i.productCode)
      )
        ">
      </EquipmentDialog>



    </ele-modal>
    <orderHomogeneityInspectDialog ref="orderHomogeneityInspectDialog"></orderHomogeneityInspectDialog>
    <orderHomogeneityInspectInstallDialog ref="orderHomogeneityInspectInstallDialog">
    </orderHomogeneityInspectInstallDialog>

  </div>
</template>

<script>
import { getCode } from '@/api/codeManagement';
import EquipmentDialog from '../components/EquipmentDialog.vue';
import orderHomogeneityInspectDialog from "./orderHomogeneityInspectDialog";
import orderHomogeneityInspectInstallDialog from "./orderHomogeneityInspectInstallDialog";
import { createOrUpdate, getOrderDetail, bomListByPlan, bomRoutingList, getFactoryList } from '@/api/saleOrder';

import dayjs from 'dayjs';
import { multiply } from '@/utils/math';
export default {
  components: {
    EquipmentDialog,
    orderHomogeneityInspectDialog,
    orderHomogeneityInspectInstallDialog
  },
  data() {
    return {
      visible: false,
      loading: false,
      disabledList: [], //已保存数据不做删除
      form: {
        productInfoList: [],
        deliveryRequirements: 1,
        saleType: 1,
        orderLibraryType: 2,
        productType: 2,
        bomCategoryId: '',
        produceRoutingId: '',
        factoriesId: '',
        deliveryTime: dayjs(
          new Date().getTime() + 3600 * 1000 * 24 * 10
        ).format('YYYY-MM-DD'),
        orderType: 0
      },
      // 表单验证规则
      rules: {
        deliveryTime: [
          { required: true, message: '请选择交付日期', trigger: 'change' }
        ],
        orderType: [
          { required: true, message: '请选择订单类型', trigger: 'blur' }
        ]

      },
      typeList: [
        { id: 1, label: '内销订单' },
        { id: 2, label: '外销订单' },
        { id: 3, label: '预制订单' }
      ],

      producedList: [
        { code: 2, name: '加工(MBOM)' },
        { code: 3, name: '装配(ABOM)' }
      ],

      completeList: [
        { code: 1, name: '齐套' },
        { code: 2, name: '缺料' }
      ],


      routingList: [],
      factoryList: [],


      title: '创建订单',
      pickerOptions: {
        disabledDate: (time) => {
          // 禁用日期
          let nowData = new Date();
          nowData = new Date(nowData.setDate(nowData.getDate() - 1));
          return time < nowData;
        }
      },
      // 订单类型
      orderTypeList: [ 
        {
          id: 0, label: '库存性订单'
        },
        {
          id: 1, label: '生产性订单'
        },
        {
          id: 2, label: '无客户生产性订单'
        },
        {
          id: 4, label: '不定向订单'
        },
      ],
    };
  },
  watch: {
    disabledList() {
      console.log(this.disabledList, 'disabledList');
    }
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive() {
      return this.$store.state.theme.styleResponsive;
    },
    clientEnvironmentId() {
      return this.$store.state.user.info.clientEnvironmentId;
    }
  },
  created() { },
  mounted() {
    this.getFactoryList();
  },
  methods: {
    filterInput(value) {
      console.log('cccccc',value)
      let aaa= value.replace(/[^a-zA-Z0-9]/g, '');
      console.log('cccaaaaaaaccc',aaa)
    },
    changeRoutingList(row, index) {
      const obj = row.routingList?.find(item => item.id === row.produceRoutingId);
      if (obj) {
        row.produceRoutingName = obj.name;
      }
    },
    async getFactoryList() {
      this.factoryList = await getFactoryList();
    },
    open(row) {
      this.visible = true;
      console.log('entry,,,,,,,,,,,,,', row);
      if (row) {
        this.title = '修改订单';
        this.getDetail(row.code);
      } else {
        this.title = '创建订单';
        this.getSaleCode();
      }



    },
    getDetail(code) {
      getOrderDetail(code).then((res) => {
        if (res.productInfoList) {
          for (let item of res.productInfoList) {
            if (item.productType) {
              item.productType = parseInt(item.productType);
            }

          }
        }
        this.disabledList = res.productInfoList;
        this.form = res;
      });
    },
    cancel() {
      this.form = {
        productInfoList: [],
        deliveryRequirements: 1,
        saleType: 1,
        orderLibraryType: 2,
        deliveryTime: dayjs(
          new Date().getTime() + 3600 * 1000 * 24 * 10
        ).format('YYYY-MM-DD')
      };
      this.$refs.form.clearValidate();
      this.visible = false;
    },

    // 表格：模数、数量(方)、块数输入框 输入事件
    tableHandleKeyUp(row, index, e, name) {
      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') {
        // 模数
        row.moCount = e;
        // 计算块数的公式：
        // (一模6米长度 / model规格长度) * (一模1.2米宽度 / model规格宽度) = 每一模的块数
        // 每一模的块数*模数moCount = 总块数
        if (row.productName.includes('板材')) {
          row.blockCount =
            Math.floor(600 / modelLong) *
            Math.floor(120 / modeHight) *
            Math.floor(60 / modeWide) *
            row.moCount;
        } 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
          );
          row.blockCount =
            Math.floor(modelLongFixed * modeWideFixed * modeHightFixed) *
            row.moCount;
        }

        row.contractNum =
          ((modelLong * modeWide * modeHight) / 1000000).toFixed(5) *
          row.blockCount;
      } else if (name === 'sum') {
        //方数
        row.contractNum = e;

        row.blockCount = Math.floor(
          e / ((modelLong * modeWide * modeHight) / 1000000)
        );
        if (row.productName.includes('板材')) {
          row.moCount = Math.ceil(
            row.blockCount /
            (Math.floor(600 / modelLong) *
              Math.floor(120 / modeHight) *
              Math.floor(60 / modeWide))
          );
        } 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 = e;

        if (row.productName.includes('板材')) {
          row.moCount = Math.ceil(
            row.blockCount /
            (Math.floor(600 / modelLong) *
              Math.floor(120 / modeHight) *
              Math.floor(60 / modeWide))
          );
        } else if (row.productName.includes('砌块')) {
          row.moCount = Math.ceil(
            row.blockCount /
            Math.floor(
              (600 / modelLong) * (120 / modeHight) * (60 / modeWide)
            )
          );
        }
        row.contractNum =
          (Number(e) * modelLong * modeWide * modeHight) / 1000000;

      }
      row.contractNum = Number(row.contractNum.toFixed(5))

    },

    // 删除产品
    handleDeleteItem(index) {
      this.form.productInfoList.splice(index, 1);
      this.changeLineNumber();
    },
    addEquipment() {
      this.$refs.equipmentRefs.open();
    },
    /* 保存编辑 */
    save() {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return false;
        }
        if (!this.form.productInfoList.length) {
          return this.$message.warning('产品列表不能为空！');
        }
        this.loading = true;
        console.log(this.form);
        createOrUpdate(this.form)
          .then((res) => {
            this.loading = false;
            this.$message.success('成功');
            this.cancel();
            this.$emit('refresh');
          })
          .catch((e) => {
            this.loading = false;
          });
      });
    },

    // 选择订单类型
    chooseType(val) {
      if (val == 2) {
        this.$set(this.form, 'orderLibraryType', 1);
      } else {
        this.$set(this.form, 'orderLibraryType', 2);
      }
      this.$set(this.form, 'customerName', '');
    },

    async getSaleCode() {
      const res = await getCode('order_sale_code');
      if (res) {
        this.$set(this.form, 'code', res);
      }
    },
    // 确定选择
    confirmChoose(list) {
      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
            };
          }
        })
        .concat(this.disabledList);
      console.log('list', list);
      // 取出在弹窗中选中并且不在表格中的数据
      const result = list.filter(
        (i) =>
          this.form.productInfoList.findIndex(
            (p) => p.productCode === i.productCode
          ) === -1
      );
      console.log('result', result);
      // 取出在表格中并且不在弹窗中选中的数据 即取消选中的数据
      const del = this.form.productInfoList.filter(
        (i) => list.findIndex((p) => p.productCode === i.productCode) === -1
      );
      console.log('del', del);
      for (let i = this.form.productInfoList.length - 1; i >= 0; i--) {
        for (let j in del) {
          console.log(
            this.form.productInfoList[i].productCode,
            del[j].productCode
          );
          if (this.form.productInfoList[i].productCode === del[j].productCode) {
            this.form.productInfoList.splice(i, 1);
            break;
          }
        }
      }

      this.form.productInfoList = this.form.productInfoList.concat(result);
      this.changeLineNumber();
    },

    changeLineNumber() {
      this.form.productInfoList.map((item, index) => {
        item.lineNumber = 10 * (index + 1);
      });
    },

    inputNumber(row, index) {
      const pos = this.form.productInfoList;
      if (pos[index].productUnitWeight) {
        const number = multiply(row.contractNum, row.productUnitWeight);

        this.$set(pos[index], 'productWeight', number);
      }
      if (this.clientEnvironmentId == 4) {
        this.tableHandleKeyUp(row, '', row.contractNum, 'sum');

      }

    },


    changeProductType(row, index) {
      let param = {
        bomType: row.productType,
        categoryId: row.categoryId
      }
      bomListByPlan(param).then(res => {
        let arr = res || [];
        if (arr.length == 0) {
          row.bomCategoryId = '';
        }
        console.log(arr);
        this.$set(this.form.productInfoList[index], 'bomVersionList', arr);
        this.$forceUpdate()
      })

    },

    changeBomId(row, index) {
      bomRoutingList(row.bomCategoryId).then((res) => {
        let arr = res || [];
        if (arr.length == 0) {
          row.produceRoutingId = '';
        }
        this.$set(this.form.productInfoList[index], 'routingList', arr);
        this.$forceUpdate()
      })
    },

    homogeneityInspect(row) {
      if (!row.productType) {
        this.$message.warning('请选择加工方式');
        return;
      }
      if (!row.bomCategoryId) {
        this.$message.warning('请选择BOM版本');
        return;
      }
      if (row.productType == 2) {
        let data = [];
        data.push(row);
        this.$refs.orderHomogeneityInspectDialog.open(data, this.form);
      } else if (row.productType == 3) {
        this.$refs.orderHomogeneityInspectInstallDialog.open([row.id]);
      } else {
        this.$message.warning('请确认加工方式！');
      }




    },



  }
};
</script>
<style lang="scss" scoped>
.basic-details-title {
  margin: 10px 0;
}

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

.create-form .el-form-item {
  margin-bottom: 15px !important;
}
</style>