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

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

@@ -9,22 +9,25 @@
                :model="form"
                :rules="formRules"
                label-width="120px">
-        <el-form-item label="商品分类：">
-          <el-select v-model="form.productAttributeCategoryId" placeholder="请选择">
+        <el-form-item
+          prop="category_id"
+          :rules="{required: true, message: '请选择商品分类', trigger: ['blur', 'change']}"
+          label="商品分类：">
+          <el-select v-model="form.category_id" placeholder="请选择">
             <el-option
-              v-for="item in [{id: 1, name: '柜台'},{id: 2, name: '厨房'}]"
+              v-for="item in categoryData"
               :key="item.id"
-              :label="item.name"
+              :label="item.category_name"
               :value="item.id">
             </el-option>
           </el-select>
         </el-form-item>
-        <el-form-item prop="bar_name"
+        <el-form-item prop="product_name"
                       :rules="formRules.required"
                       label="商品名称：">
           <el-col :span="16">
-            <el-input v-model="form.bar_name"
-                      placeholder="请输入门店商品名称"
+            <el-input v-model="form.product_name"
+                      placeholder="请输入商品名称"
                       clearable></el-input>
           </el-col>
         </el-form-item>
@@ -35,6 +38,7 @@
                      :on-success="handleAvatarSuccess"
                      :before-upload="beforeAvatarUpload"
                      :accept="'image/*'"
+                     :limit="1"
                      :file-list="fileList"
                      list-type="picture-card"
                      action="/api/admin/v1/upload/file"
@@ -43,34 +47,37 @@
             <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5M</div>
           </el-upload>
         </el-form-item>
-        <el-form-item label="出单位置：">
-          <el-select v-model="form.productAttributeCategoryId" placeholder="请选择">
+        <el-form-item prop="product_place"
+                      :rules="formRules.required"
+                      label="出单位置：">
+          <el-select v-model="form.product_place" placeholder="请选择">
             <el-option
-              v-for="item in [{id: 1, name: '柜台'},{id: 2, name: '厨房'}]"
+              v-for="item in [{id: '1', name: '厨房'},{id: '2', name: '柜台'}]"
               :key="item.id"
               :label="item.name"
               :value="item.id">
             </el-option>
           </el-select>
         </el-form-item>
-        <el-form-item prop="bar_status"
+        <el-form-item prop="product_status"
                       :rules="formRules.required"
                       label="是否上架：">
-          <el-radio v-model="form.bar_status"
+          <el-radio v-model="form.product_status"
                     label="1">上架
           </el-radio>
-          <el-radio v-model="form.bar_status"
+          <el-radio v-model="form.product_status"
                     label="0">下架
           </el-radio>
         </el-form-item>
-        <el-form-item label="商品描述：">
-          <tinymce :height="300" v-model="form.content"/>
+        <el-form-item prop="product_desc"
+                      label="商品描述：">
+          <tinymce :height="300" v-model="form.product_desc"/>
         </el-form-item>
-        <el-form-item label="设置SKU" required></el-form-item>
-        <el-form-item v-for="(desk, index) in form.place_number"
+        <el-form-item label="设置SKU"></el-form-item>
+        <el-form-item v-for="(desk, index) in form.skus"
                       :label="'SKU' + (index + 1)"
                       :key="index"
-                      :prop="'place_number.' + index + '.value'"
+                      :prop="'skus.' + index + '.value'"
                       :rules="formRules.required">
           <el-col :span="9">
             <el-input v-model="desk.value" placeholder="请设置SKU名"></el-input>
@@ -149,26 +156,32 @@ export default {
       default: function () {
         return {}
       }
+    },
+    categoryData: {
+      type: Array,
+      default: function () {
+        return []
+      }
+    },
+    goodsAttrData: {
+      type: Array,
+      default: function () {
+        return []
+      }
     }
   },
   data () {
     return {
       dialog: !!this.value,
       form: {
-        bar_name: '', // 门店名称
-        bar_address: '', // 门店地址
-        bar_status: '1', // 门店状态(0无效1有效)
-        bar_img_url: [], // 门店图片
-        bar_song_start_time: '', // 点歌开始时间
-        bar_song_end_time: '', // 点歌结束时间
-        bar_place_reserve_start_time: '', // 座位预定开始时间
-        bar_place_reserve_end_time: '', // 座位预定结束时间
-        content: '',
-        place_number: [
-          {
-            value: ''
-          }
-        ]
+        category_id: '', // 分类ID
+        product_name: '', // 商品名称
+        product_img_url: '', // 商品图片
+        product_place: '1', // 出单位置(1厨房2柜台)
+        product_status: '1', // 商品状态(0无效1有效)
+        product_desc: '', // 商品描述
+        skus: [], // 商品sku
+        attachs: [] // 规格
       },
       fileList: [],
       value1: true,
@@ -224,7 +237,7 @@ export default {
       })
     },
     handleSubmit () {
-      const url = this.exData.id ? '/v1/bar/modify' : '/v1/bar/add'
+      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, {

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

@@ -105,6 +105,8 @@
     <detail v-if="detailsDialog.show"
             v-model="detailsDialog.show"
             :exData="detailsDialog.exData"
+            :categoryData="categoryData"
+            :goodsAttrData="goodsAttrData"
             @success="init"></detail>
   </div>
 </template>
@@ -121,13 +123,15 @@ export default {
   data () {
     return {
       detailsDialog: {
-        show: false,
+        show: true,
         exData: {}
       },
       time: [],
       searchForm: {},
       tableData: [],
-      tableUrl: '/v1/bar/list'
+      tableUrl: '/v1/bar/product/list',
+      categoryData: [],
+      goodsAttrData: []
     }
   },
   methods: {
@@ -138,10 +142,47 @@ export default {
     edit (row) {
       this.detailsDialog.exData = row
       this.detailsDialog.show = true
+    },
+    del (row) {
+      this.$confirm('确定要删除吗', '确认', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(async () => {
+        const data = await this.$fetch('/v1/bar/product/delete', { id: row.id }, 'get')
+        if (data.code === 200) {
+          this.$message.success('删除成功')
+          this.init()
+        }
+      }).catch(() => {})
+    },
+    // todo 优化，放在全局 获取商品分类列表
+    async fetchCategory () {
+      const api = '/v1/bar/product/category/list'
+      const { code, data } = await this.$fetch(api, {
+        page: 1,
+        page_size: 10000
+      }, 'get')
+      if (this.tableData && (data.data || data.list) && code === 200) {
+        this.categoryData = data.data || data.list
+      }
+    },
+    // todo 优化，放在全局 获取规格列表
+    async fetchGoodsAttr () {
+      const api = '/v1/bar/product/attach/list'
+      const { code, data } = await this.$fetch(api, {
+        page: 1,
+        page_size: 10000
+      }, 'get')
+      if (this.tableData && (data.data || data.list) && code === 200) {
+        this.goodsAttrData = data.data || data.list
+      }
     }
   },
   mounted () {
     this.init()
+    this.fetchCategory()
+    this.fetchGoodsAttr()
   },
 }
 </script>