管理后台-商品管理：添加商品

htmldev/manage/src/views/business/pms/goods/details.vue

@@ -11,7 +11,7 @@
                label-width="120px">
         <el-form-item
           prop="category_id"
-          :rules="{required: true, message: '请选择商品分类', trigger: ['blur', 'change']}"
+          :rules="rules.categoryId"
           label="商品分类：">
           <el-select v-model="form.category_id" placeholder="请选择">
             <el-option
@@ -31,12 +31,13 @@
                       clearable></el-input>
           </el-col>
         </el-form-item>
-        <el-form-item prop="bar_img_url"
+        <el-form-item prop="product_img_url"
                       :rules="formRules.uploadImgs"
                       label="图片：">
           <el-upload :on-remove="handleRemove"
                      :on-success="handleAvatarSuccess"
                      :before-upload="beforeAvatarUpload"
+                     :on-exceed="hadnleExceed"
                      :accept="'image/*'"
                      :limit="1"
                      :file-list="fileList"
@@ -74,23 +75,23 @@
           <tinymce :height="300" v-model="form.product_desc"/>
         </el-form-item>
         <el-form-item label="设置SKU"></el-form-item>
-        <el-form-item v-for="(desk, index) in form.skus"
+        <el-form-item v-for="(sku, index) in form.skus"
                       :label="'SKU' + (index + 1)"
                       :key="index"
-                      :prop="'skus.' + index + '.value'"
-                      :rules="formRules.required">
+                      :prop="'skus.' + index + '.product_sku'"
+                      :rules="rules.sku">
           <el-col :span="9">
-            <el-input v-model="desk.value" placeholder="请设置SKU名"></el-input>
+            <el-input v-model="sku.product_sku" placeholder="请设置SKU名"></el-input>
           </el-col>
           <el-col :span="5">
-            <el-input v-model="form.place_price"
+            <el-input v-model="sku.product_price"
                       placeholder="请输入单价"
-                      @input="form.place_price=form.place_price.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
+                      @input="sku.product_price=sku.product_price.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
                       clearable></el-input>
           </el-col>
           <el-col :span="5" :offset="1">
             <el-switch
-              v-model="value1"
+              v-model="sku.product_status"
               active-text="上架"
               inactive-text="下架">
             </el-switch>
@@ -98,36 +99,64 @@
           <el-col :span="3" :offset="1">
             <el-button type="warning"
                        size="small"
-                       @click.prevent="removeDeskNum(desk)">删除
+                       :disabled="form.skus.length <= 1"
+                       @click.prevent="removeSku(sku)">删除
             </el-button>
           </el-col>
         </el-form-item>
         <el-form-item>
-          <el-button size="small" @click.prevent="addDomain">新增SKU</el-button>
+          <el-button size="small" @click.prevent="addSku">新增SKU</el-button>
         </el-form-item>
         <el-form-item label="设置可选规格"></el-form-item>
-        <el-form-item>
-          <el-input v-model="form.place_name"
-                    placeholder="请输入规格名称"
-                    clearable></el-input>
-          <el-select
-            v-model="value2"
-            multiple
-            filterable
-            allow-create
-            default-first-option
-            placeholder="请选择文章标签">
-            <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value">
-            </el-option>
-          </el-select>
+        <el-form-item v-for="(attr, index) in form.attachs"
+                      :key="'a' + index"
+                      :label="'附加' + (index + 1)"
+                      :prop="'attachs.' + index + '.attach_name'"
+                      :rules="rules.attach">
+          <el-col :span="8">
+            <el-select
+              v-model="attr.attach_name"
+              filterable
+              allow-create
+              default-first-option
+              placeholder="请选择附加名"
+              style="width: 100%;">
+              <el-option
+                v-for="item in goodsAttrData"
+                :key="item.id"
+                :label="item.attach_name"
+                :value="item.attach_name">
+              </el-option>
+            </el-select>
+          </el-col>
+          <el-col :span="12">
+            <el-select
+              v-model="attr.attach_content"
+              multiple
+              filterable
+              allow-create
+              default-first-option
+              placeholder="请选择附加明细"
+              style="width: 100%;">
+              <el-option
+                v-for="(item, idx) in setAttachContentOptions(attr.attach_name, goodsAttrData)"
+                :key="idx"
+                :label="item"
+                :value="item">
+              </el-option>
+            </el-select>
+          </el-col>
+          <el-col :span="3" :offset="1">
+            <el-button type="warning"
+                       size="small"
+                       :disabled="form.attachs.length <= 1"
+                       @click.prevent="removeAttach(attr)">删除
+            </el-button>
+          </el-col>
         </el-form-item>
         <el-form-item>
           <el-button size="small"
-                     @click.prevent="addDomain">添加规格
+                     @click.prevent="addAttach">添加规格
           </el-button>
         </el-form-item>
       </el-form>
@@ -141,6 +170,7 @@
 
 <script>
 import tinymce from '@/components/Tinymce/index.vue'
+import { yuan2Fen, fen2Yuan } from '@/utils'
 
 export default {
   components: {
@@ -171,31 +201,66 @@ export default {
     }
   },
   data () {
+    const checkProductPrice = (rule, value, callback) => {
+      const index = rule.field.replace(/\w*\./, '').replace(/\.\w*/, '')
+      const productPrice = this.form.skus[index * 1].product_price
+      if (value && productPrice) {
+        callback()
+      } else {
+        if (!value) {
+          callback(new Error('请设置SKU名'))
+        }
+        if (!productPrice) {
+          callback(new Error('请输入单价'))
+        }
+      }
+    }
+
+    const checkAttachContent = (rule, value, callback) => {
+      const index = rule.field.replace(/\w*\./, '').replace(/\.\w*/, '')
+      const attachContent = this.form.attachs[index * 1].attach_content
+      if ((value && attachContent.length) || (!value && attachContent.length < 1)) {
+        callback()
+      } else {
+        if (!value) {
+          callback(new Error('请选择附加名'))
+        }
+        if (!attachContent.length) {
+          callback(new Error('请选择附加明细'))
+        }
+      }
+    }
+
     return {
       dialog: !!this.value,
       form: {
         category_id: '', // 分类ID
         product_name: '', // 商品名称
-        product_img_url: '', // 商品图片
+        product_img_url: [], // 商品图片，只上传一张图
         product_place: '1', // 出单位置(1厨房2柜台)
         product_status: '1', // 商品状态(0无效1有效)
-        product_desc: '', // 商品描述
-        skus: [], // 商品sku
-        attachs: [] // 规格
+        product_desc: '', // 商品描述(富文本编辑器)
+        skus: [
+          {
+            product_sku: '', // sku规格
+            product_stock: '', // 商品库存
+            product_status: true, // 商品状态(0下架1上架)
+            product_price: '' // 商品价格
+          }
+        ], // 商品sku
+        attachs: [
+          {
+            attach_name: '', // 规格名称
+            attach_content: [] // 附加选项(以逗号隔开)
+          }
+        ] // 规格
       },
-      fileList: [],
-      value1: true,
-      options: [{
-        value: 'HTML',
-        label: 'HTML'
-      }, {
-        value: 'CSS',
-        label: 'CSS'
-      }, {
-        value: 'JavaScript',
-        label: 'JavaScript'
-      }],
-      value2: []
+      rules: {
+        categoryId: [{ required: true, message: '请选择商品分类', trigger: ['blur', 'change'] }],
+        sku: [{ required: true, validator: checkProductPrice, trigger: 'blur' }],
+        attach: [{ validator: checkAttachContent, trigger: ['blur', 'change'] }]
+      },
+      fileList: []
     }
   },
   methods: {
@@ -211,38 +276,75 @@ export default {
       if (file.response && file.response.data) {
         path = file.response.data.path
       }
-      this.form.bar_img_url = this.form.bar_img_url.filter(item => item !== path.replace(/^\/\//, ''))
+      this.form.product_img_url = this.form.product_img_url.filter(item => item !== path)
     },
     handleAvatarSuccess (res) {
       if (res.code === 200) {
         const { path } = res.data
-        this.form.bar_img_url.push(path)
+        this.form.product_img_url.push(path)
       } else {
         this.$message.error('图片上传失败')
       }
     },
-    removeDeskNum (item) {
-      var index = this.form.place_number.indexOf(item)
-      if (this.form.place_number.length <= 1) {
-        this.$message.warning('桌数不能小于1')
-        return
+    hadnleExceed (files, fileList) {
+      this.$message({
+        message: '商品图最多上传一张',
+        type: 'warning'
+      })
+    },
+    removeSku (item) {
+      var index = this.form.skus.indexOf(item)
+      if (index !== -1) {
+        this.form.skus.splice(index, 1)
       }
+    },
+    addSku () {
+      this.form.skus.push({
+        product_sku: '',
+        product_stock: '',
+        product_status: true,
+        product_price: ''
+      })
+    },
+    removeAttach (item) {
+      var index = this.form.attachs.indexOf(item)
       if (index !== -1) {
-        this.form.place_number.splice(index, 1)
+        this.form.attachs.splice(index, 1)
       }
     },
-    addDomain () {
-      this.form.place_number.push({
-        value: ''
+    addAttach () {
+      this.form.attachs.push({
+        attach_name: '',
+        attach_content: []
       })
     },
+    setAttachContentOptions (name, arr) {
+      const index = arr.findIndex(item => item.attach_name === name)
+      if (index < 0) {
+        return []
+      }
+      return arr[index].attach_content.split(',')
+    },
     handleSubmit () {
       const url = this.exData.id ? '/v1/bar/product/modify' : '/v1/bar/product/add'
       this.$refs.form.validate(async valid => {
         if (valid) {
-          const data = await this.$fetch(url, {
-            ...this.form
-          })
+          const formData = JSON.parse(JSON.stringify(this.form))
+          const postData = {
+            ...formData,
+            product_img_url: formData.product_img_url[0],
+            skus: formData.skus.map(item => ({
+              ...item,
+              product_status: item.product_status ? '1' : '0',
+              product_price: yuan2Fen(item.product_price)
+            })),
+            // 非必填项，没值得时候默认传空数组
+            attachs: formData.attachs[0].attach_name ? formData.attachs.map(item => ({
+              ...item,
+              attach_content: item.attach_content.join(',')
+            })) : []
+          }
+          const data = await this.$fetch(url, postData)
           if (data.code === 200) {
             this.$message.success('提交成功')
             this.$emit('success')
@@ -255,19 +357,35 @@ export default {
   mounted () {
     if (this.exData.id) {
       this.$set(this.form, 'id', this.exData.id)
-      this.fileList = this.exData.bar_img_url.map(item => {
-        return {
+      this.fileList = [
+        {
           name: '',
-          url: item
+          url: this.exData.product_img_url
         }
-      })
+      ]
       for (const key in this.exData) {
         if (this.form.hasOwnProperty(key)) {
           let value = this.exData[key]
           if ((Array.isArray(value) && value.length > 0) || value) {
-            if (key === 'bar_status') {
+            if (key === 'product_img_url') {
+              value = [value]
+            }
+            if (key === 'product_place' || key === 'product_status') {
               value = value.toString()
             }
+            if (key === 'skus') {
+              value = value.map(item => ({
+                ...item,
+                product_status: item.product_status === 1,
+                product_price: fen2Yuan(item.product_price)
+              }))
+            }
+            if (key === 'attachs') {
+              value = value.map(item => ({
+                ...item,
+                attach_content: item.attach_content.split(',')
+              }))
+            }
             this.$set(this.form, key, value)
           }
         }

htmldev/manage/src/views/business/pms/goods/index.vue

@@ -123,7 +123,7 @@ export default {
   data () {
     return {
       detailsDialog: {
-        show: true,
+        show: false,
         exData: {}
       },
       time: [],