feat: 完善商品规格回填

src/views/business/goods/add.vue

@@ -165,11 +165,17 @@ export default {
   created() {
     if (this.id) {
       getGoodsDetail(this.id).then(res => {
-        const { goodsId, title, picUrl, exchangeShow, multiSku, value, exchangePrice, cost, quantity, description } = res.data
+        const { goodsId, title, picUrl, exchangeShow, multiSku, value, exchangePrice, cost, quantity, description, skuList } = res.data
         this.addData = {
           value: accDiv(value, 100),
           cost: accDiv(cost, 100),
-          goodsId, title, picUrl, exchangeShow, multiSku, exchangePrice, quantity, description }
+          goodsId, title, picUrl, exchangeShow, multiSku, exchangePrice, quantity, description, skuList
+        }
+        if (multiSku && skuList instanceof Array && skuList.length > 0) {
+          this.$nextTick(() => {
+            this.$refs.spec.setSkuList(skuList)
+          })
+        }
       })
     }
   },

src/views/business/goods/components/spec.vue

@@ -5,11 +5,11 @@
         <el-row style="margin-bottom: 10px">
           <el-col :span="8">
             <el-form-item :label="`规格项${index + 1}`" :prop="`specList.${index}.name`" :rules="{ required: true, message: '请输入规格名称', trigger: 'blur' }">
-              <el-input v-model="spec.name" :disabled="!spec.edit" @keyup.enter.native="spec.edit = false" />
+              <el-input v-model="spec.name" :disabled="!spec.edit" @keyup.enter.native="checkSpecName(spec)" />
             </el-form-item>
           </el-col>
           <el-col :span="16">
-            <el-button v-if="spec.edit" type="text" style="margin-left: 10px" @click="spec.edit = false">确定</el-button>
+            <el-button v-if="spec.edit" type="text" style="margin-left: 10px" @click="checkSpecName(spec)">确定</el-button>
             <template v-else>
               <el-button type="text" style="margin-left: 10px" @click="spec.edit = true">编辑</el-button>
               <el-button type="text" class="del" style="margin-left: 10px" @click="specList.splice(index, 1)">删除</el-button>
@@ -34,7 +34,7 @@
     <el-form ref="sku" :model="{ skuList }">
       <table v-if="skuList instanceof Array && skuList.length > 0" class="spec-table" border="1" bordercolor="#CCC">
         <tr>
-          <th :colspan="specList.length">商品规格</th>
+          <th :colspan="specListTmp.length">商品规格</th>
           <th rowspan="2">SKU主图</th>
           <th rowspan="2">名称</th>
           <th rowspan="2">价格</th>
@@ -44,11 +44,11 @@
           <th rowspan="2">启用</th>
         </tr>
         <tr>
-          <th v-for="(spec, index) in specList" :key="index" style="width: 80px">{{ spec.name }}</th>
+          <th v-for="(spec, index) in specListTmp" :key="index" style="width: 80px">{{ spec.name }}</th>
         </tr>
         <!-- k1:v1;k2:v2 -->
         <tr v-for="(sku, index) in skuList" :key="index">
-          <td v-for="(spec, i) in specList" :key="i" style="min-width: 50px">
+          <td v-for="(spec, i) in specListTmp" :key="i" style="min-width: 50px">
             {{ formatObj(sku.properties)[spec.name] }}
           </td>
           <td>
@@ -62,18 +62,18 @@
             </el-form-item>
           </td>
           <td>
-            <el-form-item :prop="`skuList.${index}.value`" :rules="[{ required: true, message: '请输入价格', trigger: 'blur' }, { pattern: /^([1-9]\d*(\.\d{1,2})?|([0](\.([0][1-9]|[1-9]\d{0,1}))))$/, message: "请输入正确的金额，最多两位小数", trigger: ["blur", "change"] }]">
-              <el-input v-model="sku.value" />
+            <el-form-item :prop="`skuList.${index}.valueY`" :rules="valueYRules">
+              <el-input v-model="sku.valueY" />
             </el-form-item>
           </td>
           <td>
-            <el-form-item :prop="`skuList.${index}.exchangePrice`" :rules="[{ required: true, message: '请输入兑换价格', trigger: 'blur' },{ pattern: /^([1-9]\d*(\.\d{1,2})?|([0](\.([0][1-9]|[1-9]\d{0,1}))))$/, message: "请输入正确的金额，最多两位小数", trigger: ["blur", "change"] }]">
+            <el-form-item :prop="`skuList.${index}.exchangePrice`" :rules="exchangeRules">
               <el-input v-model="sku.exchangePrice" />
             </el-form-item>
           </td>
           <td>
-            <el-form-item :prop="`skuList.${index}.cost`" :rules="[{ required: true, message: '请输入成本', trigger: 'blur' },{ pattern: /^([1-9]\d*(\.\d{1,2})?|([0](\.([0][1-9]|[1-9]\d{0,1}))))$/, message: "请输入正确的金额，最多两位小数", trigger: ["blur", "change"] }]">
-              <el-input v-model="sku.cost" />
+            <el-form-item :prop="`skuList.${index}.costY`" :rules="costYRules">
+              <el-input v-model="sku.costY" />
             </el-form-item>
           </td>
           <td>
@@ -93,6 +93,7 @@
 </template>
 <script>
 import Upload from '@/components/ImageUpload'
+import { accDiv, accMul } from '@/utils/util'
 export default {
   name: 'Spec',
   components: {
@@ -102,17 +103,47 @@ export default {
     multiSku: {
       type: Number,
       default: 0
+    },
+    sku: {
+      type: Array,
+      default: () => []
     }
   },
   data() {
     return {
       specList: [],
+      specListTmp: [],
       skuList: [],
       specValTmp: '',
-      specifications: []
+      specifications: [],
+      valueYRules: [{ required: true, message: '请输入价格', trigger: 'blur' },{ pattern: /^([1-9]\d*(\.\d{1,2})?|([0](\.([0][1-9]|[1-9]\d{0,1}))))$/, message: "请输入正确的金额，最多两位小数", trigger: ["blur", "change"]}],
+      costYRules: [{ required: true, message: '请输入成本', trigger: 'blur' },{ pattern: /^([1-9]\d*(\.\d{1,2})?|([0](\.([0][1-9]|[1-9]\d{0,1}))))$/, message: "请输入正确的金额，最多两位小数", trigger: ["blur", "change"] }],
+      exchangeRules: [{ required: true, message: '请输入兑换价格', trigger: 'blur' },{ pattern: /^([1-9]\d*)$/, message: "请输入正确的数字", trigger: ["blur", "change"]}]
     }
   },
   methods: {
+    setSkuList(sku) {
+      let specObj = {}
+      sku.forEach(item => {
+        item.properties.split(';').forEach(p => {
+          const key = specObj[p.split(':')[0]]
+          if (!specObj[key] instanceof Array) {
+            specObj[key] = []
+          }
+          specObj[key].push(p.split(':')[1])
+        })
+      })
+      this.specList = Object.keys(specObj).map(key => {
+        return {
+          name: key,
+          vals: [...new Set(specObj[key])],
+          edit: false,
+          editVals: false
+        }
+      })
+      this.specListTmp = JSON.parse(JSON.stringify(this.specList))
+      this.skuList = sku
+    },
     formatObj(properties) {
       if (properties) {
         let obj = {}
@@ -136,6 +167,13 @@ export default {
       this.specValTmp = ''
       spec.editVals = false
     },
+    checkSpecName(spec) {
+      if (this.specList.filter(item => item.name === spec.name).length > 1) {
+        this.$message.warning('规格名已存在')
+      } else {
+        spec.edit = false
+      }
+    },
     genSku() {
       this.$refs.spec.validate((valid, items) => {
         if (valid) {
@@ -192,10 +230,9 @@ export default {
           idx: productsIndex,
           name: specifications.toString(),
           picUrl: '',
-          originPrice: 0.00,
           exchangePrice: 0.00,
-          value: 0.00,
-          cost: 0.00,
+          valueY: 0.00,
+          costY: 0.00,
           quantity: 0,
           status: true,
           properties
@@ -221,6 +258,7 @@ export default {
         }
       } while (isContinue)
       this.skuList = skuList
+      this.specListTmp = JSON.parse(JSON.stringify(this.specList))
     },
     getSkuList() {
       if (this.skuList.length === 0) {
@@ -229,6 +267,11 @@ export default {
       }
       this.$refs.sku.validate((valid, items) => {
         if (valid) {
+          this.skuList.forEach(item => {
+            const { valueY, costY } = item
+            item.value = accDiv(valueY, 100)
+            item.cost = accDiv(costY, 100)
+          })
           this.$emit('valid', this.skuList)
         } else {
           if (items && Object.keys(items).length>0) {

src/views/business/goods/index.vue

@@ -77,7 +77,7 @@
           <el-tag :type="JSON.parse(row.status).value === 'on' ? 'success' : 'info'">{{ JSON.parse(row.status).desc }}</el-tag>
         </template>
       </el-table-column>
-      <el-table-column label="排序" prop="sort" />
+      <!-- <el-table-column label="排序" prop="sort" /> -->
       <el-table-column fixed="right" align="right" label="操作" width="140">
         <template slot-scope="{row}">
           <!-- <el-button v-hasPermi="['business:goods:query']" type="text">查看</el-button> -->