优化

src/utils/math.js

@@ -8,6 +8,7 @@ export function add(a, b) {
 }
 
 export function multiply(a, b) {
+ 
   let aLen = (a + '').split('.')[1]?.length || 0;
   let bLen = (b + '').split('.')[1]?.length || 0;
 

src/views/saleOrder/components/create-order.vue

@@ -1,12 +1,6 @@
 <template>
   <ele-modal :visible.sync="visible" :title="title" width="80vw" append-to-body>
-    <el-form
-      ref="form"
-      :model="form"
-      :rules="rules"
-      label-width="90px"
-      class="create-form"
-    >
+    <el-form ref="form" :model="form" :rules="rules" label-width="90px" class="create-form">
       <el-row :gutter="15">
         <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
           <el-form-item label="销售订单号:">
@@ -15,48 +9,27 @@
         </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 dictName="紧急程度" clearable v-model="form.deliveryRequirements">
             </DictSelection>
           </el-form-item>
         </el-col>
         <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
           <el-form-item label="订单类型:">
-            <el-select
-              v-model="form.orderType"
-              placeholder="请选择"
-              @change="chooseType"
-            >
-              <el-option
-                v-for="item in typeList"
-                :key="item.id"
-                :label="item.label"
-                :value="item.id"
-              >
+            <el-select v-model="form.orderType" placeholder="请选择" @change="chooseType">
+              <el-option v-for="item in typeList" :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.orderLibraryType"
-            >
+            <DictSelection dictName="按单按库" clearable v-model="form.orderLibraryType">
             </DictSelection>
           </el-form-item>
         </el-col>
         <el-col v-bind="styleResponsive ? { lg: 12, md: 12 } : { span: 12 }">
           <el-form-item label="客户名称:">
-            <el-input
-              clearable
-              v-model="form.customerName"
-              :disabled="form.orderType == 3"
-            />
+            <el-input clearable v-model="form.customerName" :disabled="form.orderType == 3" />
           </el-form-item>
         </el-col>
         <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
@@ -66,14 +39,8 @@
         </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 :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>
@@ -101,25 +68,17 @@
         </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="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"
-                oninput="value=value.replace(/[^\d]/g,'')"
-                style="width: 100%"
-                placeholder="输入数量"
-                @input="inputNumber(scope.row, scope.$index)"
-              ></el-input>
+            <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" oninput="value=value.replace(/[^\d]/g,'')"
+                style="width: 100%" placeholder="输入数量" @input="inputNumber(scope.row, scope.$index)"></el-input>
             </el-form-item>
           </template>
         </el-table-column>
@@ -130,12 +89,7 @@
         </el-table-column>
         <el-table-column label="操作" align="center" width="70">
           <template slot-scope="scope">
-            <el-button
-              type="text"
-              @click="handleDeleteItem(scope.$index)"
-              v-if="!scope.row.id"
-              >删除</el-button
-            >
+            <el-button type="text" @click="handleDeleteItem(scope.$index)" v-if="!scope.row.id">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -151,255 +105,253 @@
     </template>
 
     <!-- 选择产品 -->
-    <EquipmentDialog
-      ref="equipmentRefs"
-      @choose="confirmChoose"
-      :selectList="
-        form.productInfoList.filter(
-          (i) => !disabledList.find((p) => p.productCode === i.productCode)
-        )
-      "
-    >
+    <EquipmentDialog ref="equipmentRefs" @choose="confirmChoose" :selectList="form.productInfoList.filter(
+      (i) => !disabledList.find((p) => p.productCode === i.productCode)
+    )
+      ">
     </EquipmentDialog>
   </ele-modal>
 </template>
 
 <script>
-  import { getCode } from '@/api/codeManagement';
-  import EquipmentDialog from '../components/EquipmentDialog.vue';
-  import { createOrUpdate, getOrderDetail } from '@/api/saleOrder';
-  import { deepClone } from '@/utils';
-  import dayjs from 'dayjs';
-  import { multiply } from '@/utils/math';
-  export default {
-    components: {
-      EquipmentDialog
-    },
-    data () {
-      return {
-        visible: false,
-        loading: false,
-        disabledList: [], //已保存数据不做删除
-        form: {
-          productInfoList: [],
-          deliveryRequirements: 1,
-          orderType: 1,
-          orderLibraryType: 2,
-          deliveryTime: dayjs(
-            new Date().getTime() + 3600 * 1000 * 24 * 10
-          ).format('YYYY-MM-DD')
-        },
-        // 表单验证规则
-        rules: {
-          deliveryTime: [
-            { required: true, message: '请选择交付日期', trigger: 'change' }
-          ]
-        },
-        typeList: [
-          { id: 1, label: '内销订单' },
-          { id: 2, label: '外销订单' },
-          { id: 3, label: '预制订单' }
-        ],
-        title: '创建订单',
-        pickerOptions: {
-          disabledDate: (time) => {
-            // 禁用日期
-            let nowData = new Date();
-            nowData = new Date(nowData.setDate(nowData.getDate() - 1));
-            return time < nowData;
-          }
+import { getCode } from '@/api/codeManagement';
+import EquipmentDialog from '../components/EquipmentDialog.vue';
+import { createOrUpdate, getOrderDetail } from '@/api/saleOrder';
+import { deepClone } from '@/utils';
+import dayjs from 'dayjs';
+import { multiply } from '@/utils/math';
+export default {
+  components: {
+    EquipmentDialog
+  },
+  data() {
+    return {
+      visible: false,
+      loading: false,
+      disabledList: [], //已保存数据不做删除
+      form: {
+        productInfoList: [],
+        deliveryRequirements: 1,
+        orderType: 1,
+        orderLibraryType: 2,
+        deliveryTime: dayjs(
+          new Date().getTime() + 3600 * 1000 * 24 * 10
+        ).format('YYYY-MM-DD')
+      },
+      // 表单验证规则
+      rules: {
+        deliveryTime: [
+          { required: true, message: '请选择交付日期', trigger: 'change' }
+        ]
+      },
+      typeList: [
+        { id: 1, label: '内销订单' },
+        { id: 2, label: '外销订单' },
+        { id: 3, label: '预制订单' }
+      ],
+      title: '创建订单',
+      pickerOptions: {
+        disabledDate: (time) => {
+          // 禁用日期
+          let nowData = new Date();
+          nowData = new Date(nowData.setDate(nowData.getDate() - 1));
+          return time < nowData;
         }
+      }
+    };
+  },
+  watch: {
+    disabledList() {
+      console.log(this.disabledList, 'disabledList');
+    }
+  },
+  computed: {
+    // 是否开启响应式布局
+    styleResponsive() {
+      return this.$store.state.theme.styleResponsive;
+    }
+  },
+  created() { },
+  methods: {
+    open(row) {
+      this.visible = true;
+      if (row) {
+        this.title = '修改订单';
+        this.getDetail(row.code);
+      } else {
+        this.title = '创建订单';
+        this.getSaleCode();
+      }
+    },
+    getDetail(code) {
+      getOrderDetail(code).then((res) => {
+        this.disabledList = res.productInfoList;
+        this.form = res;
+      });
+    },
+    cancel() {
+      this.form = {
+        productInfoList: [],
+        deliveryRequirements: 1,
+        orderType: 1,
+        orderLibraryType: 2,
+        deliveryTime: dayjs(
+          new Date().getTime() + 3600 * 1000 * 24 * 10
+        ).format('YYYY-MM-DD')
       };
+      this.$refs.form.clearValidate();
+      this.visible = false;
     },
-    watch: {
-      disabledList () {
-        console.log(this.disabledList, 'disabledList');
-      }
+    // 删除产品
+    handleDeleteItem(index) {
+      this.form.productInfoList.splice(index, 1);
+      this.changeLineNumber();
     },
-    computed: {
-      // 是否开启响应式布局
-      styleResponsive () {
-        return this.$store.state.theme.styleResponsive;
-      }
+    addEquipment() {
+      this.$refs.equipmentRefs.open();
     },
-    created () {},
-    methods: {
-      open (row) {
-        this.visible = true;
-        if (row) {
-          this.title = '修改订单';
-          this.getDetail(row.code);
-        } else {
-          this.title = '创建订单';
-          this.getSaleCode();
+    /* 保存编辑 */
+    save() {
+      this.$refs.form.validate((valid) => {
+        if (!valid) {
+          return false;
         }
-      },
-      getDetail (code) {
-        getOrderDetail(code).then((res) => {
-          this.disabledList = res.productInfoList;
-          this.form = res;
-        });
-      },
-      cancel () {
-        this.form = {
-          productInfoList: [],
-          deliveryRequirements: 1,
-          orderType: 1,
-          orderLibraryType: 2,
-          deliveryTime: dayjs(
-            new Date().getTime() + 3600 * 1000 * 24 * 10
-          ).format('YYYY-MM-DD')
-        };
-        this.$refs.form.clearValidate();
-        this.visible = false;
-      },
-      // 删除产品
-      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;
-          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('sale_order');
-        if (res) {
-          this.$set(this.form, 'code', res);
+        if (!this.form.productInfoList.length) {
+          return this.$message.warning('产品列表不能为空！');
         }
-      },
-      // 确定选择
-      confirmChoose (list) {
-        console.log(
-          'this.form.productInfoList',
-          deepClone(this.form.productInfoList)
-        );
-        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.weightUnit == 'G' ? item.netWeight / 1000 : item.netWeight,
-                model: item.modelType,
-                brandNo: item.brandNum
-              };
-            }
+        this.loading = true;
+        createOrUpdate(this.form)
+          .then((res) => {
+            this.loading = false;
+            this.$message.success('成功');
+            this.cancel();
+            this.$emit('refresh');
           })
-          .concat(this.disabledList);
-        console.log('list', list);
-        // 取出在弹窗中选中并且不在表格中的数据
-        const result = list.filter(
+          .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('sale_order');
+      if (res) {
+        this.$set(this.form, 'code', res);
+      }
+    },
+    // 确定选择
+    confirmChoose(list) {
+      console.log(
+        'this.form.productInfoList',
+        deepClone(this.form.productInfoList)
+      );
+      list = 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.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.weightUnit == 'G' ? item.netWeight / 1000 : item.netWeight,
+              model: item.modelType,
+              brandNo: item.brandNum
+            };
+          }
+        })
+        .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();
-      },
+      this.form.productInfoList = this.form.productInfoList.concat(result);
+      this.changeLineNumber();
+    },
 
-      changeLineNumber () {
-        this.form.productInfoList.map((item, index) => {
-          item.lineNumber = 10 * (index + 1);
-        });
-      },
+    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
-                )
-			console.log('number',number)
-          this.$set(
-            pos[index],
-            'productWeight',
-             number
-          );
-        }
+    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
+        );
       }
     }
-  };
+  }
+};
 </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;
-  }
+.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>