feature(管理后台): 商品管理

Author: Why1092164058

src/router/index.js

@@ -104,7 +104,7 @@ export const constantRoutes = [
         path: 'value/:propertyId(\\d+)',
         component: (resolve) => require(['@/views/mall/product/property/value'], resolve),
         name: 'PropertyValue',
-        meta: {title: '规格数据', icon: '', activeMenu: '/mall/property'}
+        meta: {title: '规格数据', icon: '', activeMenu: '/product/property'}
       }
     ]
   }, {
@@ -129,6 +129,23 @@ export const constantRoutes = [
         meta: {title: '修改生成配置', activeMenu: '/infra/codegen'}
       }
     ]
+  }, {
+    path: '/spu',
+    component: Layout,
+    hidden: true,
+    children: [{
+        path: 'edit/:spuId(\\d+)',
+        component: (resolve) => require(['@/views/mall/product/spu/save'], resolve),
+        name: 'SpuEdit',
+        meta: {title: '修改商品', activeMenu: '/product/spu'}
+      },
+      {
+        path: 'add',
+        component: (resolve) => require(['@/views/mall/product/spu/save'], resolve),
+        name: 'SpuAdd',
+        meta: {title: '添加商品', activeMenu: '/product/spu'}
+      }
+    ]
   }, {
     path: '/bpm',
     component: Layout,

src/views/mall/product/spu/index.vue

@@ -273,31 +273,16 @@
     <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                 @pagination="getList"/>
 
-    <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body destroy-on-close
-               :close-on-click-modal="false">
-      <save @closeDialog="closeDialog" :obj="dialogObj" v-if="open"/>
-    </el-dialog>
   </div>
 </template>
 
 <script>
 import {deleteSpu, getSpuPage,} from "@/api/mall/product/spu";
 import {getProductCategoryList} from "@/api/mall/product/category";
 import {getBrandList} from "@/api/mall/product/brand";
-import Editor from "@/components/Editor";
-import ImageUpload from "@/components/ImageUpload";
-import save from "./save";
-
-// 1. TODO @Luowenfeng：商品的添加、修改，走一个单独的页面，不走弹窗；https://v5.niuteam.cn/shop/goods/addgoods.html
-// 2. TODO
 
 export default {
   name: "Spu",
-  components: {
-    Editor,
-    ImageUpload,
-    save,
-  },
   data() {
     return {
       activeTabs: "all",
@@ -318,12 +303,6 @@ export default {
       total: 0,
       // 商品spu列表
       list: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
-      // 弹出层参数
-      dialogObj: {},
       dateRangeCreateTime: [],
       // 查询参数
       queryParams: {
@@ -341,7 +320,6 @@ export default {
         marketPriceMax: null,
         tabStatus: null,
       },
-      tagIndex: 0,
     };
   },
   created() {
@@ -383,12 +361,6 @@ export default {
         this.loading = false;
       });
     },
-
-    /** 取消按钮 */
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
     /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNo = 1;
@@ -405,20 +377,11 @@ export default {
     },
     /** 新增按钮操作 */
     handleAdd() {
-      this.dialogObj = {};
-      this.open = true;
-      this.title = "添加商品spu";
+      this.$router.push({ name: 'SpuAdd'})
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
-      this.dialogObj.id = row.id;
-      this.open = true;
-      this.title = "修改商品spu";
-    },
-    closeDialog() {
-      this.dialogObj = {};
-      this.open = false;
-      this.getList()
+      this.$router.push({ name: 'SpuEdit', params: { spuId: row.id }})
     },
     /** 删除按钮操作 */
     handleDelete(row) {
@@ -462,20 +425,6 @@ export default {
     margin-left: 10px;
   }
 
-  .button-new-tag {
-    margin-left: 10px;
-    height: 32px;
-    line-height: 30px;
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-
-  .input-new-tag {
-    width: 90px;
-    margin-left: 10px;
-    vertical-align: bottom;
-  }
-
   .product-info {
     display: flex;
 

src/views/mall/product/spu/save.vue

@@ -217,9 +217,6 @@ export default {
     ImageUpload,
     VideoUpload
   },
-  props: {
-    obj: Object
-  },
   data() {
     return {
       activeSwitch: false,
@@ -281,8 +278,9 @@ export default {
     this.getListBrand();
     this.getListCategory();
     this.getPropertyPageList();
-    if (this.obj.id != null) {
-      this.updateType(this.obj.id)
+    const spuId = this.$route.params && this.$route.params.spuId;
+    if (spuId != null) {
+      this.updateType(spuId)
     }
   },
   methods: {
@@ -353,8 +351,18 @@ export default {
         this.brandList = response.data;
       });
     },
+    // 取消按钮
     cancel() {
-      this.$emit("closeDialog");
+      var currentView = this.$store.state.tagsView.visitedViews[0]
+      for (currentView of this.$store.state.tagsView.visitedViews) {
+        if (currentView.path === this.$route.path) {
+          break
+        }
+      }
+      this.$store.dispatch('tagsView/delView', currentView)
+        .then(() => {
+          this.$router.push("/product/spu")
+        })
     },
     submit() {
       this.$refs[this.activeName].validate((valid) => {
@@ -410,12 +418,16 @@ export default {
         if (form.id == null) {
           createSpu(form).then((response) => {
             this.$modal.msgSuccess("新增成功");
-            this.$emit("closeDialog");
+          })
+          .then(()=>{
+            this.cancel();
           })
         } else {
           updateSpu(form).then((response) => {
             this.$modal.msgSuccess("修改成功");
-            this.$emit("closeDialog");
+          })
+          .then(()=>{
+            this.cancel();
           })
         }
       });
@@ -484,9 +496,8 @@ export default {
 </script>
 
 <style lang="scss">
-.spec-dialog {
-  width: 400px;
-  height: 300px;
+.container{
+  padding: 20px;
 }
 
 .dynamic-spec {
@@ -531,11 +542,9 @@ export default {
 }
 
 .tabs {
-  height: 500px;
   border-bottom: 2px solid #f2f2f2;
 
   .el-tab-pane {
-    height: 445px;
     overflow-y: auto;
   }
 }