品牌管理功能完善

src/api/brand.js

@@ -6,3 +6,48 @@ export function fetchList(params) {
     params
   })
 }
+export function createBrand(data) {
+  return request({
+    url:'/brand/create',
+    method:'post',
+    data:data
+  })
+}
+export function updateShowStatus(data) {
+  return request({
+    url:'/brand/update/showStatus',
+    method:'post',
+    data:data
+  })
+}
+
+export function updateFactoryStatus(data) {
+  return request({
+    url:'/brand/update/factoryStatus',
+    method:'post',
+    data:data
+  })
+}
+
+export function deleteBrand(id) {
+  return request({
+    url:'/brand/delete/'+id,
+    method:'get',
+  })
+}
+
+export function getBrand(id) {
+  return request({
+    url:'/brand/'+id,
+    method:'get',
+  })
+}
+
+export function updateBrand(id,data) {
+  return request({
+    url:'/brand/update/'+id,
+    method:'post',
+    data:data
+  })
+}
+

src/router/index.js

@@ -47,7 +47,7 @@ export const constantRouterMap = [
       {
         path: 'addProduct',
         name: 'addProduct',
-        component: () => import('@/views/pms/addProduct/index'),
+        component: () => import('@/views/pms/product/add'),
         meta: {title: '添加商品', icon: 'product-add'}
       },
       {
@@ -79,6 +79,20 @@ export const constantRouterMap = [
         name: 'brand',
         component: () => import('@/views/pms/brand/index'),
         meta: {title: '品牌管理', icon: 'product-brand'}
+      },
+      {
+        path: 'addBrand',
+        name: 'addBrand',
+        component: () => import('@/views/pms/brand/add'),
+        meta: {title: '添加品牌'},
+        hidden:true
+      },
+      {
+        path: 'updateBrand',
+        name: 'updateBrand',
+        component: () => import('@/views/pms/brand/update'),
+        meta: {title: '编辑品牌'},
+        hidden:true
       }
     ]
   },

src/styles/index.scss

@@ -57,3 +57,13 @@ a:hover {
 .app-container {
   padding: 20px;
 }
+
+/*外框样式*/
+.container-frame{
+  padding: 8px;
+  border: 1px solid rgb(235, 235, 235);
+  border-image: initial;
+  border-radius: 3px;
+  transition: 0.2s;
+  overflow: hidden;
+}

src/views/pms/addProduct/index.vue

@@ -1,13 +0,0 @@
-<template> 
-    <div> {{msg}}</div>
-</template>
-<script>
-    export default{
-        data() {
-            return {msg: '添加商品'}
-        }
-    }
-</script>
-<style></style>
-
-

src/views/pms/brand/add.vue

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

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

@@ -0,0 +1,143 @@
+<template> 
+  <div class="form-container container-frame">
+    <el-form :model="brand" :rules="rules" ref="brandFrom" label-width="150px">
+      <el-form-item label="品牌名称：" prop="name">
+        <el-input v-model="brand.name"></el-input>
+      </el-form-item>
+      <el-form-item label="品牌首字母：">
+        <el-input v-model="brand.firstLetter"></el-input>
+      </el-form-item>
+      <el-form-item label="品牌LOGO：" prop="logo">
+        <el-input v-model="brand.logo"></el-input>
+      </el-form-item>
+      <el-form-item label="品牌专区大图：">
+        <el-input v-model="brand.bigPic"></el-input>
+      </el-form-item>
+      <el-form-item label="品牌故事：">
+        <el-input
+          placeholder="请输入内容"
+          type="textarea"
+          v-model="brand.brandStory"
+          autosize="true"></el-input>
+      </el-form-item>
+      <el-form-item label="排序：" prop="sort">
+        <el-input v-model.number="brand.sort"></el-input>
+      </el-form-item>
+      <el-form-item label="是否显示：">
+        <el-radio-group v-model="brand.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="brand.factoryStatus">
+          <el-radio :label="1">是</el-radio>
+          <el-radio :label="0">否</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit('brandFrom')">提交</el-button>
+        <el-button v-if="!isEdit" @click="resetForm('brandFrom')">重置</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<script>
+  import {createBrand, getBrand, updateBrand} from '@/api/brand'
+
+  export default {
+    name: 'brandDetail',
+    props: {
+      isEdit: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data() {
+      return {
+        brand: {
+          bigPic: '',
+          brandStory: '',
+          factoryStatus: 0,
+          firstLetter: '',
+          logo: '',
+          name: '',
+          showStatus: 0,
+          sort: 0
+        },
+        rules: {
+          name: [
+            {required: true, message: '请输入品牌名称', trigger: 'blur'},
+            {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
+          ],
+          logo: [
+            {required: true, message: '请输入品牌logo', trigger: 'blur'}
+          ],
+          sort: [
+            {type: 'number', message: '排序必须为数字'}
+          ]
+        }
+      }
+    },
+    created() {
+      if (this.isEdit) {
+        getBrand(this.$route.query.id).then(response => {
+          this.brand = response.data;
+        });
+      }
+    },
+    methods: {
+      onSubmit(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            this.$confirm('是否提交数据', '提示', {
+              confirmButtonText: '确定',
+              cancelButtonText: '取消',
+              type: 'warning'
+            }).then(() => {
+              if (this.isEdit) {
+                updateBrand(this.$route.query.id, this.brand).then(response => {
+                  this.$refs[formName].resetFields();
+                  this.$message({
+                    message: '修改成功',
+                    type: 'success'
+                  });
+                });
+              } else {
+                createBrand(this.brand).then(response => {
+                  this.$refs[formName].resetFields();
+                  this.$message({
+                    message: '提交成功',
+                    type: 'success'
+                  });
+                });
+              }
+            });
+
+          } else {
+            this.$message({
+              message: '验证失败',
+              type: 'error'
+            });
+            return false;
+          }
+        });
+      },
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
+      }
+    }
+  }
+</script>
+<style>
+  .form-container {
+    position: absolute;
+    left: 0;
+    right: 0;
+    width: 520px;
+    padding: 35px 35px 15px 35px;
+    margin: 20px auto;
+  }
+</style>
+
+

src/views/pms/brand/index.vue

@@ -1,94 +1,111 @@
 <template> 
   <div class="app-container">
-    <div class="filter-container">
-      <span>输入搜索：</span>
-      <el-input
-        size="small"
-        style="width: 200px"
-        v-model="listQuery.keyword"
-        placeholder="品牌名称/关键字"
-      ></el-input>
+    <div class="filter-container container-frame">
+      <div>
+        <i class="el-icon-search"></i>
+        筛选搜索
+        <el-button
+          style="float: right"
+          @click="searchBrandList()"
+          type="primary"
+          size="small">
+          查询结果
+        </el-button>
+      </div>
+      <div style="margin-top: 20px">
+        <span>输入搜索：</span>
+        <el-input
+          size="small"
+          style="width: 200px"
+          v-model="listQuery.keyword"
+          placeholder="品牌名称/关键字"
+        ></el-input>
+      </div>
+    </div>
+    <div class="operate-container container-frame">
+      <i class="el-icon-tickets"></i>
+      操作栏
       <el-button
-        class="search-button"
-        @click="searchBrandList()"
-        type="primary"
-        size="small">
-        查询结果
+        @click="addBrand()"
+        size="mini">
+        添加
       </el-button>
     </div>
-    <el-table ref="brandTable"
-              :data="list"
-              style="width: 100%"
-              @selection-change="handleSelectionChange"
-              v-loading="listLoading"
-              border>
-      <el-table-column type="selection" width="60" align="center"></el-table-column>
-      <el-table-column label="编号" width="80" align="center">
-        <template slot-scope="scope">{{scope.row.id}}</template>
-      </el-table-column>
-      <el-table-column label="品牌名称" align="center">
-        <template slot-scope="scope">{{scope.row.name}}</template>
-      </el-table-column>
-      <el-table-column label="品牌首字母" width="100" align="center">
-        <template slot-scope="scope">{{scope.row.firstLetter}}</template>
-      </el-table-column>
-      <el-table-column label="排序" width="80" align="center">
-        <template slot-scope="scope">{{scope.row.sort}}</template>
-      </el-table-column>
-      <el-table-column label="品牌制造商" width="100" align="center">
-        <template slot-scope="scope">
-          <el-switch
-            @change="handleFactoryStatusChange(scope.$index, scope.row)"
-            :active-value="1"
-            :inactive-value="0"
-            v-model="scope.row.factoryStatus">
-          </el-switch>
-        </template>
-      </el-table-column>
-      <el-table-column label="是否显示" width="100" align="center">
-        <template slot-scope="scope">
-          <el-switch
-            @change="handleShowStatusChange(scope.$index, scope.row)"
-            :active-value="1"
-            :inactive-value="0"
-            v-model="scope.row.showStatus">
-          </el-switch>
-        </template>
-      </el-table-column>
-      <el-table-column label="相关" width="220" align="center">
-        <template slot-scope="scope">
-          <span>商品：</span>
-          <el-button
-            size="mini"
-            type="text"
-            @click="handleProductList(scope.$index, scope.row)">100
-          </el-button>
-          <span>评价：</span>
-          <el-button
-            size="mini"
-            type="text"
-            @click="handleProductCommentList(scope.$index, scope.row)">1000
-          </el-button>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" width="220" align="center">
-        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            @click="handleEdit(scope.$index, scope.row)">编辑
-          </el-button>
-          <el-button
-            size="mini"
-            type="danger"
-            @click="handleDelete(scope.$index, scope.row)">删除
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+    <div class="table-container">
+      <el-table ref="brandTable"
+                :data="list"
+                style="width: 100%"
+                @selection-change="handleSelectionChange"
+                v-loading="listLoading"
+                border>
+        <el-table-column type="selection" width="60" align="center"></el-table-column>
+        <el-table-column label="编号" width="80" align="center">
+          <template slot-scope="scope">{{scope.row.id}}</template>
+        </el-table-column>
+        <el-table-column label="品牌名称" align="center">
+          <template slot-scope="scope">{{scope.row.name}}</template>
+        </el-table-column>
+        <el-table-column label="品牌首字母" width="100" align="center">
+          <template slot-scope="scope">{{scope.row.firstLetter}}</template>
+        </el-table-column>
+        <el-table-column label="排序" width="80" align="center">
+          <template slot-scope="scope">{{scope.row.sort}}</template>
+        </el-table-column>
+        <el-table-column label="品牌制造商" width="100" align="center">
+          <template slot-scope="scope">
+            <el-switch
+              @change="handleFactoryStatusChange(scope.$index, scope.row)"
+              :active-value="1"
+              :inactive-value="0"
+              v-model="scope.row.factoryStatus">
+            </el-switch>
+          </template>
+        </el-table-column>
+        <el-table-column label="是否显示" width="100" align="center">
+          <template slot-scope="scope">
+            <el-switch
+              @change="handleShowStatusChange(scope.$index, scope.row)"
+              :active-value="1"
+              :inactive-value="0"
+              v-model="scope.row.showStatus">
+            </el-switch>
+          </template>
+        </el-table-column>
+        <el-table-column label="相关" width="220" align="center">
+          <template slot-scope="scope">
+            <span>商品：</span>
+            <el-button
+              size="mini"
+              type="text"
+              @click="handleProductList(scope.$index, scope.row)">100
+            </el-button>
+            <span>评价：</span>
+            <el-button
+              size="mini"
+              type="text"
+              @click="handleProductCommentList(scope.$index, scope.row)">1000
+            </el-button>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="220" align="center">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)">编辑
+            </el-button>
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
     <div class="batch-operate-container">
       <el-select
         size="small"
-        v-model="operateValue" placeholder="批量操作">
+        v-model="operateType" placeholder="批量操作">
         <el-option
           v-for="item in operates"
           :key="item.value"
@@ -108,9 +125,11 @@
     <div class="pagination-container">
       <el-pagination
         background
+        @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
-        layout="total, prev, pager, next,jumper"
+        layout="total, sizes,prev, pager, next,jumper"
         :page-size="listQuery.pageSize"
+        :page-sizes="[5,10,15]"
         :current-page.sync="listQuery.pageNum"
         :total="total">
       </el-pagination>
@@ -118,23 +137,22 @@
   </div>
 </template>
 <script>
-  import {fetchList} from '@/api/brand'
-
+  import {fetchList, updateShowStatus,updateFactoryStatus,deleteBrand} from '@/api/brand'
   export default {
     name: 'brandList',
     data() {
       return {
-        operates:[
+        operates: [
           {
-            label:"显示品牌",
-            value:"showBrand"
+            label: "显示品牌",
+            value: "showBrand"
           },
           {
-            label:"隐藏品牌",
-            value:"hideBrand"
+            label: "隐藏品牌",
+            value: "hideBrand"
           }
-          ],
-        operateValue:null,
+        ],
+        operateType: null,
         listQuery: {
           keyword: null,
           pageNum: 1,
@@ -164,10 +182,22 @@
         this.multipleSelection = val;
       },
       handleEdit(index, row) {
-        console.log(index, row);
+        this.$router.push({path: '/pms/updateBrand',query:{id:row.id}})
       },
       handleDelete(index, row) {
-        console.log(index, row);
+        this.$confirm('是否要删除该品牌', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          deleteBrand(row.id).then(response=>{
+            this.$message({
+              message: '删除成功',
+              type: 'success'
+            });
+            this.getList();
+          });
+        });
       },
       handleProductList(index, row) {
         console.log(index, row);
@@ -176,10 +206,43 @@
         console.log(index, row);
       },
       handleFactoryStatusChange(index, row) {
-        console.log(index, row);
+        var data = new FormData();
+        data.append("ids",row.id);
+        data.append("factoryStatus",row.factoryStatus);
+        updateFactoryStatus(data).then(response => {
+          this.$message({
+            message: '修改成功',
+            type: 'success'
+          });
+        }).catch(error => {
+          if (row.factoryStatus === 0) {
+            row.factoryStatus = 1;
+          } else {
+            row.factoryStatus = 0;
+          }
+        });
       },
       handleShowStatusChange(index, row) {
-        console.log(index, row);
+        let data = new URLSearchParams();;
+        data.append("ids",row.id);
+        data.append("showStatus",row.showStatus);
+        updateShowStatus(data).then(response => {
+          this.$message({
+            message: '修改成功',
+            type: 'success'
+          });
+        }).catch(error => {
+          if (row.showStatus === 0) {
+            row.showStatus = 1;
+          } else {
+            row.showStatus = 0;
+          }
+        });
+      },
+      handleSizeChange(val) {
+        this.listQuery.pageNum = 1;
+        this.listQuery.pageSize = val;
+        this.getList();
       },
       handleCurrentChange(val) {
         this.listQuery.pageNum = val;
@@ -190,29 +253,73 @@
         this.getList();
       },
       handleBatchOperate() {
-        console.log(this.operateValue);
+        if(this.multipleSelection<1){
+          this.$message({
+            message: '请选择一条记录',
+            type: 'warning'
+          });
+        }
+        let showStatus = 0;
+        if(this.operateType==='showBrand'){
+          showStatus = 1;
+        }else if(this.operateType==='hideBrand'){
+          showStatus = 0;
+        }else{
+          this.$message({
+            message: '请选择批量操作类型',
+            type: 'warning'
+          });
+          return;
+        }
+        let ids = [];
+        for(let i=0;i<this.multipleSelection.length;i++){
+          ids.push(this.multipleSelection[i].id);
+        }
+        let data = new URLSearchParams();
+        data.append("ids",ids);
+        data.append("showStatus",showStatus);
+        updateShowStatus(data).then(response => {
+          this.getList();
+          this.$message({
+            message: '修改成功',
+            type: 'success'
+          });
+        });
+      },
+      addBrand() {
+        this.$router.push({path: '/pms/addBrand'})
       }
     }
   }
 </script>
 <style rel="stylesheet/scss" lang="scss" scoped>
+  .filter-container {
+
+  }
+
+  .operate-container {
+    margin-top: 20px;
+  }
+
+  .operate-container .el-button {
+    float: right;
+  }
+
+  .table-container {
+    margin-top: 20px;
+  }
+
+  .batch-operate-container {
+    display: inline-block;
+    margin-top: 20px;
+  }
+
   .pagination-container {
     display: inline-block;
     float: right;
     margin-top: 20px;
   }
 
-  .filter-container {
-    margin-bottom: 20px;
-  }
-
-  .search-button {
-    float: right;
-  }
-  .batch-operate-container{
-    display: inline-block;
-    margin-top: 20px;
-  }
 </style>
 
 

src/views/pms/brand/update.vue

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

src/views/pms/product/add.vue

@@ -0,0 +1,14 @@
+<template> 
+  <div> {{msg}}</div>
+</template>
+<script>
+  export default {
+    name: 'addProduct',
+    data() {
+      return {msg: '添加商品'}
+    }
+  }
+</script>
+<style></style>
+
+