完善：分类管理

src/api/category.js

@@ -1,4 +1,5 @@
 import request from '@/utils/request'
+const qs = require('qs')
 
 export default {
   categories(params) {
@@ -36,11 +37,14 @@ export default {
       data
     })
   },
-  delete(name) {
+  delete(params) {
     return request({
       url: 'category/delete',
       method: 'delete',
-      params: {name}
+      params,
+      paramsSerializer: function(params) {
+        return qs.stringify(params, { arrayFormat: 'repeat' })
+      }
     })
   }
 }

src/views/setting/articles/categoryManager.vue

@@ -2,84 +2,82 @@
   <div class="container" v-wechat-title="title">
     <el-dialog class="dialog-cm" :title="dialogTitle" :visible.sync="dialogVisible">
       <el-form ref="managerForm" :model="form" :rules="rules" label-width="120px">
-        <el-form-item label="分类名称" prop="categoryName">
+        <el-form-item label="分类名称" prop="name">
-          <el-input v-model="form.categoryName" />
+          <el-input v-model="form.name"/>
         </el-form-item>
-        <el-form-item label="分类缩略名">
+        <el-form-item label="分类缩略名" prop="thumbnailName">
-          <el-input v-model="form.thumbnailName" />
+          <el-input v-model="form.thumbnailName"/>
         </el-form-item>
-        <el-form-item label="父级分类">
+        <el-form-item label="父级分类" prop="parentCategoryId">
           <el-cascader
-            v-model="form.parentCategoryName"
+            v-model="form.parentCategoryId"
             :options="categories"
+            :show-all-levels="false"
             :props="{ checkStrictly: true }"
             clearable></el-cascader>
         </el-form-item>
-        <el-form-item label="分类描述">
+        <el-form-item label="分类描述" prop="desc">
-          <el-input type="textarea" v-model="form.desc" />
+          <el-input type="textarea" v-model="form.desc"/>
         </el-form-item>
         <el-form-item>
-          <el-button native-type="submit" type="primary" @click.native.prevent="onSave('managerForm')">保 存</el-button>
+          <el-button native-type="submit" type="primary" :loading="categoryUpdateLoading"
+                     @click.native.prevent="onSave('managerForm')">保 存
+          </el-button>
         </el-form-item>
       </el-form>
     </el-dialog>
     <el-card class="box-card">
-      <div slot="header" class="clearfix">
+      <div slot="header">
-        <span>分类列表</span>
+        <div class="clearfix">
-        <el-button class="card-button" type="text" @click="add">添加分类</el-button>
+          <div class="card-header-back" v-if="parentCategory.name">
+            <span class="header-back-title" @click="backParent">
+              <i class="el-icon-back"></i>
+              <span>返回上级目录</span>
+            </span>
+            <el-divider direction="vertical"></el-divider>
+          </div>
+          <div class="card-header content-title"><span>{{ parentCategory.name ? `管理 ${parentCategory.name} 的子分类` : '管理分类' }}</span> </div>
+          <el-button class="card-button" size="mini" type="primary" @click="add()">新增分类</el-button>
+        </div>
+        <div class="card-header-right" v-show="this.multipleSelection.length > 0">
+          <el-button v-show="this.multipleSelection.length === 1" size="small" @click="handleEdit()">编辑</el-button>
+          <el-button size="small" type="danger" @click="handleDelete()">删除</el-button>
+        </div>
       </div>
       <el-table
         :data="categoryList"
         stripe
+        @selection-change="handleSelectionChange"
       >
         <el-table-column
-          prop="categoryName"
+          type="selection"
-          label="名称"
+          width="55">
-          width="150">
         </el-table-column>
         <el-table-column
-          prop="subCategoryNumber"
+          prop="name"
-          label="子分类"
+          label="名称">
-          width="150">
         </el-table-column>
         <el-table-column
-          prop="quota"
+          prop="subCategorySize"
-          label="缩略名"
+          label="子分类">
-          width="150">
-        </el-table-column>
-        <el-table-column
-          prop="quota"
-          label="默认"
-          width="150">
-        </el-table-column>
-        <el-table-column
-          prop="quota"
-          label="文章数"
-          width="150">
-        </el-table-column>
-        <el-table-column label="操作" align="center" width="250">
           <template slot-scope="scope">
-            <el-button v-if="scope.row.username !== 'jmal'"
+            <a v-if="scope.row.subCategorySize > 0"
-              size="mini"
+               @click="subCategoryList(scope.row.id)">{{ scope.row.subCategorySize }}个分类</a>
-              @click="handleEdit(scope.row.id,scope.row.username)"
+            <a v-else @click="add(scope.row.id)">新增</a>
-            >
-              编辑
-            </el-button>
-            <el-button v-if="scope.row.username !== 'jmal'"
-              size="mini"
-              @click="resetPassword(scope.row.id,scope.row.username)"
-            >
-              重置密码
-            </el-button>
-            <el-button v-if="scope.row.username !== 'jmal'"
-              size="mini"
-              type="danger"
-              @click="handleDelete(scope.row.id)"
-            >
-              删除
-            </el-button>
           </template>
         </el-table-column>
+        <el-table-column
+          prop="thumbnailName"
+          label="缩略名">
+        </el-table-column>
+        <el-table-column
+          prop="quota"
+          label="默认">
+        </el-table-column>
+        <el-table-column
+          prop="quota"
+          label="文章数">
+        </el-table-column>
       </el-table>
     </el-card>
 
@@ -87,175 +85,255 @@
 </template>
 
 <script>
-  import categoryApi from "@/api/category";
+import categoryApi from "@/api/category";
-  import CropperDialog from '@/components/Cropper/dialog'
+import CropperDialog from '@/components/Cropper/dialog'
 
-  export default {
+export default {
-    name: 'categoryManager',
+  name: 'categoryManager',
-    components: {
+  components: {
-      CropperDialog
+    CropperDialog
+  },
+  data() {
+    return {
+      title: "分类管理",
+      categoryList: [],
+      dialogVisible: false,
+      dialogTitle: '',
+      categoryUpdateLoading: false,
+      valid: true,
+      categories: [],
+      parentCategory: {},// 父级分类信息
+      parentCategoryId: undefined,
+      form: {
+        name: '',
+        thumbnailName: '',
+        parentCategoryId: '',
+        desc: ''
+      },
+      rules: {
+        name: [
+          {required: true, message: '请输入分类名称', trigger: 'blur'},
+        ]
+      },
+      editMove: 1,// 1添加,2修改
+      multipleSelection: []
+    }
+  },
+  computed: {},
+  mounted() {
+    this.getCategories()
+    this.getParentCategory()
+  },
+  methods: {
+    handleSelectionChange(val) {
+      this.multipleSelection = val
     },
-    props: {
+    // 返回父级分类
+    backParent() {
+      this.subCategoryList(this.parentCategory.parentCategoryId)
     },
-    data() {
+    getParentCategory() {
-      return {
+      if (this.$route.query.parent) {
-        title: "分类管理",
+        categoryApi.categoryInfo({
-        categoryList: [],
+          categoryId: this.$route.query.parent
-        dialogVisible: false,
+        }).then(res => {
-        dialogTitle: '',
+          this.parentCategory = res.data
-        userUpdateLoading: false,
+        })
-        valid: true,
+      } else {
-        categories: [
+        this.parentCategory = {}
-          { value: 'zhinan',
-            label: '指南',
-            children: [{
-            value: 'shejiyuanze',
-            label: '设计原则',
-            children: [{
-              value: 'yizhi',
-              label: '一致'
-            }, {
-              value: 'fankui',
-              label: '反馈'
-            }, {
-              value: 'xiaolv',
-              label: '效率'
-            }, {
-              value: 'kekong',
-              label: '可控'
-            }]}]
-          }
-        ],
-        form: {
-          categoryName: '',
-          thumbnailName: '',
-          parentCategoryName: '',
-          desc: ''
-        },
-        rules: {
-          categoryName: [
-            { required: true, message: '请输入分类名称', trigger: 'blur' },
-          ]
-        },
-        editMove: 1,// 1添加,2修改
       }
     },
-    computed: {
+    getCategories() {
+      categoryApi.categories({
+        userId: this.$store.state.user.userId,
+        parentCategoryId: this.$route.query.parent
+      }).then(res => {
+        this.categoryList = res.data
+      })
     },
-    mounted() {
+    categoryTree() {
+      categoryApi.categoryTree({userId: this.$store.state.user.userId}).then(res => {
+        this.categories = res.data
+      })
+    },
+    // 子分类列表
+    subCategoryList(parentCategoryId) {
+      if (parentCategoryId) {
+        this.$router.push(`${window.location.pathname}?parent=${parentCategoryId}`)
+      } else {
+        this.$router.push(window.location.pathname)
+      }
+      this.getCategories()
+      this.getParentCategory()
+    },
+    async add(parentCategoryId) {
+      this.categoryTree()
+      this.dialogVisible = true
+      this.dialogTitle = '添加分类'
+      this.editMove = 1
+      await this.$nextTick()
+      this.$refs.managerForm.resetFields()
+      if (this.$route.query.parent) {
+        this.form.parentCategoryId = this.$route.query.parent;
+      }
+      if (parentCategoryId) {
+        this.form.parentCategoryId = parentCategoryId;
+      }
+    },
+    // 设置formData
+    setFormData() {
+      let data = new FormData();
+      for (let formKey in this.form) {
+        if (this.form.hasOwnProperty(formKey) && this.form[formKey]) {
+          data.append(formKey, this.form[formKey])
+        }
+      }
+      return data
+    },
+    // 保存
+    onSave() {
+      this.$refs.managerForm.validate((valid) => {
+        this.valid = valid
+        if (valid) {
+          this.categoryUpdateLoading = true
+          if (this.editMove === 1) {
+            this.addCategory(this.setFormData())
+          }
+          if (this.editMove === 2) {
+            this.userCategory(this.setFormData())
+          }
+        } else {
+          return false;
+        }
+      });
+    },
+    handleEdit(id) {
+      this.editMove = 2
+      this.dialogVisible = true
+      this.dialogTitle = '修改分类'
+      categoryApi.categoryInfo({
+        categoryId: id
+      }).then(res => {
+        this.form = res.data
+      })
+      this.categoryTree()
+    },
+    // 删除分类
+    handleDelete() {
+      let categoryIds = []
+      this.multipleSelection.forEach(category => {
+        categoryIds.push(category.id)
+      })
+      this.$confirm('所选分类下的所有内容都将被删除, 您确认要删除吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        categoryApi.delete({categoryIds: categoryIds}).then(() => {
+          this.onDeleted()
+        }).catch(() => {
+          console.log('sdf')
+          this.onError()
+        })
+      })
+    },
+    // 修改分类
+    userCategory(data) {
+      categoryApi.update(data).then(() => {
+        this.onSuccess()
+      }).catch(() => {
+        this.onError()
+      })
+    },
+    // 添加分类
+    addCategory(data) {
+      if (!this.form.hasOwnProperty('userId')) {
+        data.append('userId', this.$store.state.user.userId)
+      }
+      categoryApi.add(data).then(() => {
+        this.onSuccess()
+      }).catch(() => {
+        this.onError()
+      })
+    },
+    onDeleted(){
+      this.$notify({
+        title: '删除成功',
+        type: 'success',
+        duration: 1000
+      })
       this.getCategories()
     },
-    methods: {
+    onSuccess(message) {
-      getCategories(){
+      this.getCategories()
-        categoryApi.categories().then(res => {
+      let msg = '保存成功!'
-          this.categoryList = res.data
+      if (message) {
-        })
+        msg = message
-      },
-      async add() {
-        this.dialogVisible = true
-        this.dialogTitle = '添加分类'
-        this.editMove = 1
-        await this.$nextTick()
-        this.$refs.managerForm.resetFields()
-      },
-      // 设置formData
-      setFormData() {
-        let data = new FormData();
-        for (let formKey in this.form) {
-          if(this.form.hasOwnProperty(formKey)){
-            data.append(formKey,this.form[formKey])
-          }
-        }
-        return data
-      },
-      // 保存
-      onSave() {
-        this.$refs.managerForm.validate((valid) => {
-          this.valid = valid
-          console.log(valid)
-          if (valid) {
-            console.log(this.form, this.setFormData())
-            this.userUpdateLoading = true
-            if(this.editMove === 1){
-              this.addCateGory(this.setFormData())
-            }
-            if(this.editMove === 2){
-              this.userCateGory(this.setFormData())
-            }
-          } else {
-            return false;
-          }
-        });
-      },
-      handleEdit(id) {
-        this.editMove = 2
-        this.dialogVisible = true
-        this.dialogTitle = '修改分类'
-        categoryApi.categoryInfo({
-          id: id,
-        }).then(res => {
-          this.form = res.data
-        })
-        categoryApi.categoryTree({username: this.$store.state.user.userId}).then(res => {
-          this.categories = res.data
-        })
-      },
-      // 删除分类
-      handleDelete(id) {
-        this.$confirm('是否删除该分类, 是否继续?', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          categoryApi.delete(id).then(() => {
-            this.onSuccess('删除成功!')
-          }).catch(() => {
-            this.onError()
-          })
-        })
-      },
-      // 修改分类
-      userCateGory(data){
-        categoryApi.update(data).then(() => {
-          this.onSuccess()
-        }).catch(() => {
-          this.onError()
-        })
-      },
-      // 添加分类
-      addCateGory(data){
-        categoryApi.add(data).then(() => {
-          this.onSuccess()
-        }).catch(() => {
-          this.onError()
-        })
-      },
-      onSuccess(message){
-        this.getUserList()
-        let msg = '保存成功!'
-        if(message){
-          msg = message
-        }
-        this.userUpdateLoading = false
-        this.dialogVisible = false
-        this.$message({
-          message: msg,
-          type: 'success',
-          duration: 1000
-        })
-      },
-      onError() {
-        this.userUpdateLoading = false
       }
+      this.categoryUpdateLoading = false
+      this.dialogVisible = false
+      this.$message({
+        message: msg,
+        type: 'success',
+        duration: 1000
+      })
+    },
+    onError() {
+      this.categoryUpdateLoading = false
     }
   }
+}
 </script>
 
 <!--<style src="@styles/cropper.css"></style>-->
 <style lang="scss" scoped>
 @import "src/styles/setting";
-  .card-button {
+.content-title {
-    float: right;
+  font-size: 16px;
-    padding: 3px 0;
+  font-weight: 600;
+}
+/deep/ .el-page-header {
+  height: 32px;
+  line-height: 32px;
+}
+
+a {
+  color: #1890ff;
+  text-decoration: none;
+  background-color: transparent;
+  outline: none;
+  cursor: pointer;
+  -webkit-transition: color 0.3s;
+  transition: color 0.3s;
+}
+
+a:hover {
+  color: #40a9ff;
+}
+
+.clearfix {
+  display: flex;
+}
+
+.card-button {
+  float: right;
+  margin-left: 25px;
+}
+
+.card-header {
+  line-height: 32px;
+}
+.card-header-back {
+  height: 32px;
+  line-height: 32px;
+  font-size: 15px;
+  font-weight: 600;
+  .header-back-title {
+    cursor: pointer;
   }
+}
+.card-header-right {
+  float: right;
+  margin-top: -32px;
+}
 </style>

src/views/setting/user/tabs/cusomerManager.vue

@@ -19,7 +19,7 @@
         </el-form-item>
         <el-form-item>
           <!--<el-button @click="dialogVisible = false">取 消</el-button>-->
-          <el-button native-type="submit" type="primary" @click.native.prevent="onSave('managerForm')">保 存</el-button>
+          <el-button native-type="submit" type="primary" :loading="userUpdateLoading" @click.native.prevent="onSave('managerForm')">保 存</el-button>
         </el-form-item>
       </el-form>
     </el-dialog>
@@ -82,7 +82,6 @@
 
 <script>
   import { getInfo, userUpdate, addUser, delUser, resetPass, userList} from '@/api/user'
-  import { formatSize } from '@/utils/number'
   import CropperDialog from '@/components/Cropper/dialog'
 
   export default {