细节

src/components/Modal/GoodsModal/GoodsModal.vue

@@ -2,7 +2,7 @@
   <a-modal
     class="noborder"
     :title="title"
-    :width="820"
+    :width="900"
     :visible="visible"
     :isLoading="isLoading"
     :maskClosable="false"
@@ -47,11 +47,14 @@
             image: item.goods_image,
             imageAlt: '商品图片',
             title: item.goods_name,
-            subtitle: `¥${item.goods_price_min}`
+            subtitle: `¥${item.goods_price_min}`,
           }"
           :subTitleColor="true"
         />
       </template>
+      <span slot="specific_value" slot-scope="text">
+        <a-tooltip placement="topLeft" :title="text"> {{ text}}</a-tooltip>
+      </span>
       <!-- 商品状态 -->
       <span slot="status" slot-scope="text">
         <a-tag :color="text == 10 ? 'green' : 'red'">{{ text == 10 ? '上架' : '下架' }}</a-tag>
@@ -71,27 +74,33 @@ import { STable, GoodsItem } from '@/components/Table/table'
 const columns = [
   {
     title: '商品ID',
-    dataIndex: 'goods_id'
+    dataIndex: 'goods_id',
   },
   {
     title: '商品信息',
     width: '335px',
-    scopedSlots: { customRender: 'item' }
+    scopedSlots: { customRender: 'item' },
+  },
+  {
+    title: '规格值',
+    dataIndex: 'specific_value',
+    width: '100px',
+    scopedSlots: { customRender: 'specific_value' },
   },
   {
     title: '商品价格',
     dataIndex: 'goods_price_min',
-    scopedSlots: { customRender: 'goods_price_min' }
+    scopedSlots: { customRender: 'goods_price_min' },
   },
   {
     title: '库存总量',
-    dataIndex: 'stock_total'
+    dataIndex: 'stock_total',
   },
   {
     title: '状态',
     dataIndex: 'status',
-    scopedSlots: { customRender: 'status' }
+    scopedSlots: { customRender: 'status' },
-  }
+  },
 ]
 
 export default {
@@ -102,11 +111,11 @@ export default {
     // 最大选择的数量限制, multiple模式下有效
     maxNum: PropTypes.integer.def(100),
     // 默认选中的列表记录
-    defaultList: PropTypes.array.def([])
+    defaultList: PropTypes.array.def([]),
   },
   components: {
     STable,
-    GoodsItem
+    GoodsItem,
   },
   data() {
     return {
@@ -123,9 +132,8 @@ export default {
       // table表头
       columns,
       // 加载数据方法 必须为 Promise 对象
-      loadData: param => {
+      loadData: (param) => {
-        return GoodsApi.list({ ...param, ...this.queryParam })
+        return GoodsApi.list({ ...param, ...this.queryParam }).then((response) => {
-          .then(response => {
           return response.data.list
         })
       },
@@ -136,7 +144,7 @@ export default {
       // 已选择的列表记录
       selectedItems: [],
       // 商品分类列表
-      categoryListTree: []
+      categoryListTree: [],
     }
   },
   computed: {
@@ -144,16 +152,15 @@ export default {
       return {
         selectedRowKeys: this.selectedRowKeys,
         onChange: this.onSelectChange,
-        type: !this.multiple ? 'radio' : 'checkbox'
+        type: !this.multiple ? 'radio' : 'checkbox',
-      }
       }
     },
+  },
   created() {
     // 获取商品分类列表
     this.getCategoryList()
   },
   methods: {
-
     // 显示对话框
     handle() {
       // 显示窗口
@@ -171,7 +178,7 @@ export default {
       const { fieldName, defaultList } = this
       if (defaultList.length) {
         this.selectedItems = cloneDeep(defaultList)
-        this.selectedRowKeys = defaultList.map(item => item[fieldName])
+        this.selectedRowKeys = defaultList.map((item) => item[fieldName])
       }
     },
 
@@ -179,8 +186,8 @@ export default {
     getCategoryList() {
       this.isLoading = true
       CategoryModel.getListFromScreen()
-        .then(selectList => this.categoryListTree = selectList)
+        .then((selectList) => (this.categoryListTree = selectList))
-        .finally(() => this.isLoading = false)
+        .finally(() => (this.isLoading = false))
     },
 
     // 选中项发生变化时的回调
@@ -199,13 +206,13 @@ export default {
     createSelectedItems(selectedRowKeys, oldSelectedItems, newSelectedItems) {
       const { fieldName } = this
       const selectedItems = []
-      oldSelectedItems.forEach(item => {
+      oldSelectedItems.forEach((item) => {
         if (selectedRowKeys.includes(item[fieldName])) {
           selectedItems.push(item)
         }
       })
-      const oldSelectedKeys = oldSelectedItems.map(item => item[fieldName])
+      const oldSelectedKeys = oldSelectedItems.map((item) => item[fieldName])
-      newSelectedItems.forEach(item => {
+      newSelectedItems.forEach((item) => {
         if (!oldSelectedKeys.includes(item[fieldName]) && selectedRowKeys.includes(item[fieldName])) {
           selectedItems.push(item)
         }
@@ -247,13 +254,12 @@ export default {
       // 通知父端组件提交完成了
       this.$emit('handleSubmit', {
         selectedItems: this.selectedItems,
-        selectedRowKeys: this.selectedRowKeys
+        selectedRowKeys: this.selectedRowKeys,
       })
       // 关闭对话框
       this.handleCancel()
-    }
+    },
-
+  },
-  }
 }
 </script>
 

src/views/dataCenter/goods/Create.vue

@@ -174,6 +174,12 @@
                 <!-- <a-radio :value="20" :disabled="true">多规格</a-radio> -->
               </a-radio-group>
             </a-form-item>
+            <a-form-item label="规格值" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <a-input
+                placeholder="多个规格值，以英文分号分隔"
+                v-decorator="['specific_value', { rules: [{ required: true, message: '请输入规格值' }] }]"
+              />
+            </a-form-item>
             <!-- 多规格的表单内容 -->
             <div v-show="form.getFieldValue('spec_type') == 20">
               <MultiSpec ref="MultiSpec" />

src/views/dataCenter/goods/Update.vue

@@ -164,6 +164,12 @@
                 <small class="c-red">注：该商品当前正在参与其他活动，商品规格不允许更改</small>
               </p>
             </a-form-item>
+            <a-form-item label="规格值" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <a-input
+                placeholder="多个规格值，以英文分号分隔"
+                v-decorator="['specific_value', { rules: [{ required: true, message: '请输入规格值' }] }]"
+              />
+            </a-form-item>
             <!-- 多规格的表单内容 -->
             <div v-if="form.getFieldValue('spec_type') == 20">
               <MultiSpec
@@ -176,12 +182,6 @@
             </div>
             <!-- 单规格的表单内容 -->
             <div v-if="form.getFieldValue('spec_type') == 10">
-              <a-form-item label="规格值" :labelCol="labelCol" :wrapperCol="wrapperCol">
-              <a-input
-                placeholder="多个规格值，以英文分号分隔"
-                v-decorator="['specific_value', { rules: [{ required: true, message: '请输入规格值' }] }]"
-              />
-            </a-form-item>
               <a-form-item
                 label="商品价格"
                 :labelCol="labelCol"