细节

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,13 +111,13 @@ export default {
     // 最大选择的数量限制, multiple模式下有效
     maxNum: PropTypes.integer.def(100),
     // 默认选中的列表记录
-    defaultList: PropTypes.array.def([])
+    defaultList: PropTypes.array.def([]),
   },
   components: {
     STable,
-    GoodsItem
+    GoodsItem,
   },
-  data () {
+  data() {
     return {
       // 对话框标题
       title: '商品库',
@@ -123,11 +132,10 @@ 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
-            return response.data.list
+        })
-          })
       },
       // 主键ID字段名
       fieldName: 'goods_id',
@@ -136,26 +144,25 @@ export default {
       // 已选择的列表记录
       selectedItems: [],
       // 商品分类列表
-      categoryListTree: []
+      categoryListTree: [],
     }
   },
   computed: {
-    rowSelection () {
+    rowSelection() {
       return {
         selectedRowKeys: this.selectedRowKeys,
         onChange: this.onSelectChange,
-        type: !this.multiple ? 'radio' : 'checkbox'
+        type: !this.multiple ? 'radio' : 'checkbox',
       }
-    }
+    },
   },
-  created () {
+  created() {
     // 获取商品分类列表
     this.getCategoryList()
   },
   methods: {
-
     // 显示对话框
-    handle () {
+    handle() {
       // 显示窗口
       this.visible = true
       this.$nextTick(() => {
@@ -167,24 +174,24 @@ export default {
     },
 
     // 设置默认数据
-    setDefaultValue () {
+    setDefaultValue() {
       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])
       }
     },
 
     // 获取分类列表
-    getCategoryList () {
+    getCategoryList() {
       this.isLoading = true
       CategoryModel.getListFromScreen()
-        .then(selectList => this.categoryListTree = selectList)
+        .then((selectList) => (this.categoryListTree = selectList))
-        .finally(() => this.isLoading = false)
+        .finally(() => (this.isLoading = false))
     },
 
     // 选中项发生变化时的回调
-    onSelectChange (selectedRowKeys, newSelectedItems) {
+    onSelectChange(selectedRowKeys, newSelectedItems) {
       const { selectedItems } = this
       this.selectedRowKeys = selectedRowKeys
       this.selectedItems = this.createSelectedItems(selectedRowKeys, selectedItems, newSelectedItems)
@@ -196,16 +203,16 @@ export default {
      * @param array oldSelectedItems 已选择的列表记录 (change前)
      * @param array newSelectedItems 已选择的列表记录 (change后)
      */
-    createSelectedItems (selectedRowKeys, oldSelectedItems, newSelectedItems) {
+    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)
         }
@@ -217,12 +224,12 @@ export default {
      * 刷新列表
      * @param Boolean bool 强制刷新到第一页
      */
-    handleRefresh (bool = false) {
+    handleRefresh(bool = false) {
       this.$refs.table.refresh(true)
     },
 
     // 确认搜索
-    handleSearch (e) {
+    handleSearch(e) {
       e.preventDefault()
       this.searchForm.validateFields((error, values) => {
         if (!error) {
@@ -233,7 +240,7 @@ export default {
     },
 
     // 关闭对话框事件
-    handleCancel () {
+    handleCancel() {
       this.visible = false
       this.queryParam = {}
       this.searchForm.resetFields()
@@ -242,18 +249,17 @@ export default {
     },
 
     // 确认按钮
-    handleSubmit (e) {
+    handleSubmit(e) {
       e.preventDefault()
       // 通知父端组件提交完成了
       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"
@@ -606,7 +606,7 @@ export default {
           // 第二次赋值 (适用于动态渲染的form-item)
           this.$nextTick(() => {
             this.form.setFieldsValue(GoodsModel.getFieldsValue2())
-            this.ruleList = this.formData.goods.rules?this.formData.goods.rules:[]
+            this.ruleList = this.formData.goods.rules ? this.formData.goods.rules : []
             this.onForceUpdate()
           })
         }