商品分类添加编辑功能

src/api/productCate.js

@@ -6,3 +6,32 @@ export function fetchList(parentId,params) {
     params:params
   })
 }
+export function deleteProductCate(id) {
+  return request({
+    url:'/productCategory/delete/'+id,
+    method:'get'
+  })
+}
+
+export function createProductCate(data) {
+  return request({
+    url:'/productCategory/create',
+    method:'post',
+    data:data
+  })
+}
+
+export function updateProductCate(id,data) {
+  return request({
+    url:'/productCategory/update/'+id,
+    method:'post',
+    data:data
+  })
+}
+
+export function getProductCate(id) {
+  return request({
+    url:'/productCategory/'+id,
+    method:'get',
+  })
+}

src/router/index.js

@@ -68,6 +68,20 @@ export const constantRouterMap = [
         component: () => import('@/views/pms/productCate/index'),
         meta: {title: '商品分类', icon: 'product-cate'}
       },
+      {
+        path: 'addProductCate',
+        name: 'addProductCate',
+        component: () => import('@/views/pms/productCate/add'),
+        meta: {title: '添加商品分类'},
+        hidden:true
+      },
+      {
+        path: 'updateProductCate',
+        name: 'updateProductCate',
+        component: () => import('@/views/pms/productCate/update'),
+        meta: {title: '修改商品分类'},
+        hidden:true
+      },
       {
         path: 'productAttr',
         name: 'productAttr',

src/views/pms/brand/components/BrandDetail.vue

@@ -4,7 +4,7 @@
       <el-form-item label="品牌名称：" prop="name">
         <el-input v-model="brand.name"></el-input>
       </el-form-item>
-      <el-form-item label="品牌首字母：" property="">
+      <el-form-item label="品牌首字母：">
         <el-input v-model="brand.firstLetter"></el-input>
       </el-form-item>
       <el-form-item label="品牌LOGO：" prop="logo">
@@ -66,7 +66,7 @@
     },
     data() {
       return {
-        brand:null,
+        brand:Object.assign({}, defaultBrand),
         rules: {
           name: [
             {required: true, message: '请输入品牌名称', trigger: 'blur'},
@@ -107,7 +107,7 @@
                     type: 'success',
                     duration:1000
                   });
-                  this.$router.push({path: '/pms/brand'});
+                  this.$router.back();
                 });
               } else {
                 createBrand(this.brand).then(response => {

src/views/pms/productAttr/components/ProductAttrDetail.vue

@@ -93,7 +93,7 @@
     },
     data() {
       return {
-        productAttr: null,
+        productAttr: Object.assign({}, defaultProductAttr),
         rules: {
           name: [
             {required: true, message: '请输入属性名称', trigger: 'blur'},

src/views/pms/productCate/add.vue

@@ -0,0 +1,14 @@
+<template> 
+  <product-cate-detail :is-edit='false'></product-cate-detail>
+</template>
+<script>
+  import ProductCateDetail from './components/ProductCateDetail'
+  export default {
+    name: 'addProductCate',
+    components: { ProductCateDetail }
+  }
+</script>
+<style>
+</style>
+
+

src/views/pms/productCate/components/ProductCateDetail.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="form-container container-frame">
+    <el-form :model="productCate"
+             :rules="rules"
+             ref="productCateFrom"
+             label-width="150px">
+      <el-form-item label="分类名称：" prop="name">
+        <el-input v-model="productCate.name"></el-input>
+      </el-form-item>
+      <el-form-item label="上级分类：">
+        <el-select v-model="productCate.parentId"
+                   placeholder="请选择分类">
+          <el-option
+            v-for="item in selectProductCateList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="数量单位：">
+        <el-input v-model="productCate.productUnit"></el-input>
+      </el-form-item>
+      <el-form-item label="排序：">
+        <el-input v-model="productCate.sort"></el-input>
+      </el-form-item>
+      <el-form-item label="是否显示：">
+        <el-radio-group v-model="productCate.showStatus">
+          <el-radio :label="1">是</el-radio>
+          <el-radio :label="0">否</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="是否显示在导航栏：">
+        <el-radio-group v-model="productCate.navStatus">
+          <el-radio :label="1">是</el-radio>
+          <el-radio :label="0">否</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="分类图标：">
+        <single-upload v-model="productCate.icon"></single-upload>
+      </el-form-item>
+      <el-form-item label="关键词：">
+        <el-input v-model="productCate.keywords"></el-input>
+      </el-form-item>
+      <el-form-item label="分类描述：">
+        <el-input type="textarea" :autosize="true" v-model="productCate.description"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit('productCateFrom')">提交</el-button>
+        <el-button v-if="!isEdit" @click="resetForm('productCateFrom')">重置</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+  import {fetchList, createProductCate, updateProductCate, getProductCate} from '@/api/productCate';
+  import SingleUpload from '@/components/Upload/singleUpload';
+
+  const defaultProductCate = {
+    description: '',
+    icon: '',
+    keywords: '',
+    name: '',
+    navStatus: 0,
+    parentId: 0,
+    productUnit: '',
+    showStatus: 0,
+    sort: 0
+  };
+  export default {
+    name: "ProductCateDetail",
+    components: {SingleUpload},
+    props: {
+      isEdit: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data() {
+      return {
+        productCate: Object.assign({}, defaultProductCate),
+        selectProductCateList: [],
+        rules: {
+          name: [
+            {required: true, message: '请输入品牌名称', trigger: 'blur'},
+            {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
+          ]
+        }
+      }
+    },
+    created() {
+      if (this.isEdit) {
+        getProductCate(this.$route.query.id).then(response => {
+          this.productCate = response.data;
+        });
+      } else {
+        this.productCate = Object.assign({}, defaultProductCate);
+      }
+      this.getSelectProductCateList();
+    },
+    methods: {
+      getSelectProductCateList() {
+        fetchList(0, {pageSize: 100, pageNum: 1}).then(response => {
+          this.selectProductCateList = response.data.list;
+          this.selectProductCateList.unshift({id: 0, name: '无上级分类'});
+        });
+      },
+      onSubmit(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            this.$confirm('是否提交数据', '提示', {
+              confirmButtonText: '确定',
+              cancelButtonText: '取消',
+              type: 'warning'
+            }).then(() => {
+              if (this.isEdit) {
+                updateProductCate(this.$route.query.id, this.productCate).then(response => {
+                  this.$refs[formName].resetFields();
+                  this.$message({
+                    message: '修改成功',
+                    type: 'success',
+                    duration: 1000
+                  });
+                  this.$router.back();
+                });
+              } else {
+                createProductCate(this.productCate).then(response => {
+                  this.$refs[formName].resetFields();
+                  this.brand = Object.assign({}, defaultProductCate);
+                  this.$message({
+                    message: '提交成功',
+                    type: 'success',
+                    duration: 1000
+                  });
+                });
+              }
+            });
+
+          } else {
+            this.$message({
+              message: '验证失败',
+              type: 'error',
+              duration: 1000
+            });
+            return false;
+          }
+        });
+      },
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
+        this.productCate = Object.assign({}, defaultProductCate);
+        this.getSelectProductCateList();
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/views/pms/productCate/index.vue

@@ -57,6 +57,7 @@
           <template slot-scope="scope">
             <el-button
               size="mini"
+              :disabled="scope.row.level | disableNextLevel"
               @click="handleShowNextLevel(scope.$index, scope.row)">查看下级
             </el-button>
             <el-button
@@ -96,7 +97,7 @@
 </template>
 
 <script>
-  import {fetchList} from '@/api/productCate'
+  import {fetchList,deleteProductCate} from '@/api/productCate'
 
   export default {
     name: "productCateList",
@@ -113,11 +114,25 @@
       }
     },
     created() {
+      this.resetParentId();
       this.getList();
     },
+    watch: {
+      $route(route) {
+        this.resetParentId();
+        this.getList();
+      }
+    },
     methods: {
+      resetParentId(){
+        if (this.$route.query.parentId != null) {
+          this.parentId = this.$route.query.parentId;
+        } else {
+          this.parentId = 0;
+        }
+      },
       handleAddProductCate() {
-        console.log('handleAddProductCate');
+        this.$router.push('/pms/addProductCate');
       },
       getList() {
         this.listLoading = true;
@@ -137,22 +152,35 @@
         this.getList();
       },
       handleNavStatusChange(index, row) {
-        console.log('handleAddProductCate');
+        console.log('handleNavStatusChange');
       },
       handleShowStatusChange(index, row) {
-        console.log('handleAddProductCate');
+        console.log('handleShowStatusChange');
       },
       handleShowNextLevel(index, row) {
-        console.log('handleAddProductCate');
+        this.$router.push({path: '/pms/productCate', query: {parentId: row.id}})
       },
       handleTransferProduct(index, row) {
         console.log('handleAddProductCate');
       },
       handleUpdate(index, row) {
-        console.log('handleAddProductCate');
+        this.$router.push({path:'/pms/updateProductCate',query:{id:row.id}});
       },
       handleDelete(index, row) {
-        console.log('handleAddProductCate');
+        this.$confirm('是否要删除该品牌', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          deleteProductCate(row.id).then(response => {
+            this.$message({
+              message: '删除成功',
+              type: 'success',
+              duration: 1000
+            });
+            this.getList();
+          });
+        });
       }
     },
     filters: {
@@ -162,6 +190,13 @@
         } else if (value === 1) {
           return '二级';
         }
+      },
+      disableNextLevel(value) {
+        if (value === 0) {
+          return false;
+        } else {
+          return true;
+        }
       }
     }
   }

src/views/pms/productCate/update.vue

@@ -0,0 +1,14 @@
+<template> 
+  <product-cate-detail :is-edit='true'></product-cate-detail>
+</template>
+<script>
+  import ProductCateDetail from './components/ProductCateDetail'
+  export default {
+    name: 'updateProductCate',
+    components: { ProductCateDetail }
+  }
+</script>
+<style>
+</style>
+
+