部门管理

src/api/permission/dept.js

+import axios from '../api'
+
+export default {
+  getList(params) {
+    return axios.post('/api/front/userdep/index',JSON.stringify(params))
+  },
+  add(params) {
+    return axios.post('/api/front/userdep/add',params)
+  },
+  del(params) {
+    return axios({
+      method: "POST",
+      url: '/api/front/userdep/drop',
+      params: params
+    })
+  },
+  edit(params) {
+    return axios.post('/api/front/userdep/edit',params)
+  },
+}

src/api/user/user.js

   logout(params){
     return axios.get('/api/front/login/logout', JSON.stringify(params))
   },
+  editPassword(params) {
+    return axios.post('/api/front/user/editPassword',params)
+  },
 
   upload(params) {
     return axios({

src/views/index/index.vue

                   message: '修改密码成功'
                 })
                 store.dispatch('user/logout').then(res => {
+                  this.visible=false
                   this.$router.push({name: 'login'});
                 })
               }).catch(e => {

src/views/permission/dep/edit.vue

+<template>
+  <div class="deptForm">
+    <el-form ref="infoForm" :model="infoForm" size="small" label-width="100px">
+      <el-form-item label="部门名称" prop="name" :rules="[{
+                    required: true, message: '部门名称名称不能为空', trigger: 'blur'
+                  },
+                  {min: 1, max: 20, message: '部门名称长度在1 到 20 个字符', trigger: 'blur'}]">
+        <el-input maxlength="20" clearable v-model="infoForm.name" size="small" placeholder="请输入部门名称"/>
+      </el-form-item>
+      <el-form-item prop="pid" label="上级部门">
+        <el-cascader
+          filterable
+          :disabled="infoForm.disable"
+          placeholder="请选择上级部门"
+          v-model="infoForm.pid"
+          ref="refHandle"
+          :options="filterAgencyList"
+          :props="{ checkStrictly: true ,value:'id',label:'name',children:'childrenList'}"
+        ></el-cascader>
+      </el-form-item>
+      <el-form-item label="排序" prop="sort">
+        <el-input-number size="small" v-model="infoForm.sort"></el-input-number>
+      </el-form-item>
+      <el-form-item label="备注" prop="note" :rules="[
+            {min: 0, max: 50, message: '备注长度不超过 50 个字符', trigger: 'blur'}]">
+        <el-input show-word-limit maxlength="50" clearable v-model="infoForm.note" type="textarea" rows="3" size="small" placeholder="请输入内容"/>
+      </el-form-item>
+    </el-form>
+    <div style="text-align: center">
+      <el-button icon="el-icon-document-add" :loading="addBtnLoading" type="primary" size="medium" @click="submitForm('infoForm')">提交
+      </el-button>
+      <el-button icon="el-icon-back" style="margin-left: 15px" size="medium" @click="closeWin('infoForm')">关闭
+      </el-button>
+    </div>
+
+
+  </div>
+</template>
+
+<script>
+  import deptApi from '@/api/permission/dept'
+
+  export default {
+    name: "deptForm",
+    data() {
+      return {
+        addBtnLoading: false,
+      }
+    },
+    props: {
+      // 参数接收
+      infoForm: {
+        type: Object,
+        default() {
+          return {};
+        }
+      },
+      // 参数接收
+      filterAgencyList:  {
+        type: Array,
+        default() {
+          return [];
+        }
+      },
+    },
+    created() {
+
+    },
+    mounted() {
+    },
+    methods: {
+      // 提交表单
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            let method = 'add'
+            if (this.infoForm.id) {
+              method = 'edit'
+            }
+            let infoForm=JSON.parse(JSON.stringify(this.infoForm))
+            if(infoForm.pid){
+              if(infoForm.pid instanceof Array){
+                if(infoForm.pid.length>0){
+                  infoForm.pid=infoForm.pid[infoForm.pid.length-1]
+                }else{
+                  infoForm.pid=''
+                }
+              }
+            }else{
+              infoForm.pid=''
+            }
+            this.addBtnLoading = true
+            deptApi[method](infoForm).then(res => {
+              this.addBtnLoading = false
+              this.$refs[formName].resetFields()
+              this.$message({
+                type: 'success',
+                message: this.infoForm.id ? '修改成功' : '添加成功'
+              })
+              if (this.infoForm.id) {
+                // 编辑
+                this.$emit('submit',1)
+              }else{
+                // 添加
+                this.$emit('submit',0)
+              }
+              // 调动关闭窗体方法
+              this.$emit('closeWin')
+            }).catch(e => {
+              this.addBtnLoading = false
+            })
+          }
+        })
+      },
+      // 关闭窗体
+      closeWin() {
+        this.$refs['infoForm'].resetFields()
+        this.$emit('closeWin')
+      }
+    }
+  }
+</script>
+
+<style lang="less">
+  .deptForm{
+
+  }
+</style>

src/views/permission/dep/index.vue

+<template>
+  <div class="dep-index">
+    <el-tabs type="border-card">
+      <el-form :inline="true" :model="searchParam" class="demo-form-inline head-form">
+        <el-form-item>
+          <el-button v-if="btnRule.userdep_add" @click="agencyInfo()" size="small" icon="el-icon-plus" type="primary">添加部门
+          </el-button>
+        </el-form-item>
+      </el-form>
+      <el-table stripe ref="table" :height="tableHeight" v-loading="tableLoading"
+                :data="agencyList" size="medium" :tree-props="{children: 'childrenList', hasChildren: 'hasChild?false:true'}"
+                border row-key="id">
+        <el-table-column label="序号" type="index" width="80" align="center"/>
+        <el-table-column show-overflow-tooltip prop="name" label="组织名称" align="left"/>
+        <el-table-column show-overflow-tooltip prop="sort" label="排序码" align="center"/>
+        <el-table-column
+                         label="操作" width="180">
+          <template slot-scope="scope">
+            <el-tooltip v-if="btnRule.userdep_edit" class="item" effect="dark" content="编辑"
+                        placement="bottom">
+              <el-button type="primary" size="mini" icon="el-icon-edit" @click="agencyInfo(scope.row)"/>
+            </el-tooltip>
+            <el-tooltip v-if="btnRule.userdep_drop" class="item" effect="dark" content="删除"
+                        placement="bottom">
+              <el-button :loading="delBtnLoading" type="danger" size="mini" class="el-icon-delete"
+                         @click="agencyDel(scope.row)"/>
+            </el-tooltip>
+            <el-button v-if=" btnRule.userdep_add" type="primary"
+                       size="mini" icon="el-icon-plus"
+                       @click="addChilds(scope.row)" class="add">添加子级
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-tabs>
+
+    <!-- 编辑表单 -->
+    <el-dialog :close-on-press-escape="false" :close-on-click-modal="false" center :visible.sync="addDialogVisible"
+               :title="dialogTitle+'部门'">
+      <editForm v-if="addDialogVisible" ref="editForm" :infoForm="infoForm" :filterAgencyList="filterAgencyList" style="width: 100%"
+                @submit="submit" @closeWin="closeWin"></editForm>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+  import deptApi from '@/api/permission/dept'
+  import editForm from './edit'
+  import {mapGetters} from "vuex";
+
+  export default {
+    name: "dep-index",
+    data() {
+      return {
+        searchParam: {},
+        tableLoading: true,
+        // 显示编辑角色弹框
+        addDialogVisible: false,
+        agencyList: [],
+        filterAgencyList:[],
+        delBtnLoading: false,
+        addBtnLoading: false,
+        infoForm: {
+          name: '',
+          pid: 0,
+          status: 1,
+          sort: 1,
+        },
+        loading: false,
+        tableHeight: document.body.clientHeight - 210,
+        dialogTitle: '添加',
+      }
+    },
+    components: {editForm},
+    created() {
+    },
+    computed: {
+      ...mapGetters(["btnRule"])
+    },
+    watch: {},
+    mounted() {
+      this.getLsList()
+    },
+    methods: {
+      // 初始化表单
+      initInfoForm() {
+        this.infoForm = {
+          name: '',
+          pid: 0,
+          sort: 1,
+          note:''
+        }
+      },
+
+      // 获取列表
+      getLsList() {
+        this.tableLoading = true
+        deptApi.getList({}).then(res => {
+          let data =JSON.parse(JSON.stringify(res.data))
+          this.agencyList = data
+          this.filterAgencyList=data
+          this.tableLoading = false
+          console.log(this.agencyList)
+        }).catch(e => {
+          this.agencyList = []
+          this.filterAgencyList=[]
+          this.tableLoading = false
+        })
+      },
+      // 获取编辑数据
+      agencyInfo(data) {
+        // 初始化表单
+        // 显示弹窗
+        // 设置标题
+        if (data == null) {
+          this.initInfoForm()
+          this.dialogTitle = "添加";
+          this.infoForm.disable = false
+        } else {
+          this.infoForm=JSON.parse(JSON.stringify(data))
+          this.dialogTitle = "编辑";
+          this.infoForm.disable = true
+        }
+        this.addDialogVisible = true
+      },
+      // 添加子级
+      addChilds(data) {
+        this.initInfoForm()
+        this.infoForm.pid = data.id
+        this.dialogTitle = "添加子级"
+        this.infoForm.disable = true
+        this.$nextTick(function () {
+          this.addDialogVisible = true
+        })
+      },
+      // 删除记录
+      agencyDel(data) {
+        this.$confirm('您确定要删除部门吗？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.delBtnLoading = true
+          deptApi.del({id: data.id}).then(res => {
+            this.$message({
+              type: 'success',
+              message: '删除成功！'
+            })
+            this.delBtnLoading = false
+            this.tableLoading = true
+            this.getLsList()
+          }).catch(e => {
+            this.delBtnLoading = false
+          })
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除'
+          })
+        })
+      },
+      // 提交表单后逻辑处理
+      submit(type) {
+        if (type == 0) {
+          // 添加
+          this.getLsList()
+        } else {
+          // 编辑
+          this.getLsList()
+          this.addDialogVisible = false
+        }
+      },
+      // 关闭窗体
+      closeWin() {
+        console.log("关闭")
+        // 调用初始化表单方法
+        this.initInfoForm()
+        // 设置弹窗不可见
+        this.addDialogVisible = false
+      },
+
+    }
+  }
+</script>
+
+<style lang="less">
+  .dep-index {
+    width: 100%;
+
+    .svg-icon {
+      width: 20px;
+      height: 20px;
+      background-color: #eeeeee;
+    }
+
+    .font-dialog {
+      .el-dialog__body {
+        padding: 10px 10px;
+      }
+    }
+
+    .page-current {
+      text-align: center;
+      padding: 15px 5px;
+      padding-bottom: 0px;
+
+      .sure-page-btn {
+        display: inline-block;
+        height: 28px;
+        line-height: 0;
+        width: 46px;
+        padding: 0;
+        vertical-align: top;
+      }
+    }
+
+    .icon-box {
+      display: flex;
+      flex-wrap: wrap;
+
+      .icon-item {
+        border: 1px solid #eeeeee;
+        width: 41px;
+        height: 42px;
+        margin-top: 10px;
+        line-height: 42px;
+        font-size: 18px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-left: 10px;
+      }
+
+      .icon-item:hover {
+        border: 1px solid #409eff;
+        cursor: pointer;
+        color: #409eff;
+      }
+    }
+  }
+</style>