系统设置

src/assets/css/main.css

@@ -61,6 +61,12 @@ li {
     color: #585858;
     border-left: 3px solid #9278ff;
 }
+.page {
+    position: relative;
+    padding: 24px;
+    background-color: #fff;
+    border-radius: 8px;
+}
 .tool {
     display: flex;
     justify-content: space-between;
@@ -84,6 +90,37 @@ li {
     white-space: nowrap;
 }
 
+.tabs {
+    display: flex;
+    align-items: center;
+    padding: 0 24px;
+    border-bottom: 1px solid rgba(0, 0, 0, .06);
+}
+.tabs .item {
+    position: relative;
+    padding: 20px 0;
+    margin-right: 40px;
+    font-size: 16px;
+    color: rgba(0, 0, 0, 0.65);
+    cursor: pointer;
+}
+.tabs .item.active {
+    font-weight: 500;
+    color: rgba(0, 0, 0, 0.85);
+}
+.tabs .item:after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 3px;
+    border-bottom: 3px solid transparent;
+    border-radius: 2px;
+}
+.tabs .item.active:after {
+    border-bottom-color: #9278ff;
+}
 
 .crumbs {
     margin: 10px 0;

src/components/Sidebar.vue

@@ -85,6 +85,11 @@ export default {
                     index: 'configure',
                     title: '服务配置'
                 },
+                {
+                    icon: 'el-icon-office-building',
+                    index: 'system',
+                    title: '系统配置'
+                },
             ],
             onRoutes:'customer'
         };

src/components/codemirror.vue

@@ -133,7 +133,7 @@ export default {
     // 页面加载完后重置编辑框大小
     ready() {
       const code = this.$refs.codemirror.codemirror
-      code.setSize("auto", "calc(100vh - 167px)");
+      code.setSize("auto", "calc(100vh - 400px)");
       code.on('keypress', function() {
         // 显示智能提示
         code.showHint()
@@ -151,6 +151,9 @@ export default {
         this.loadIns = Loading.service({
           background: 'transparent'
         })
+        code = code.replace(/\.savefig\(([\u4e00-\u9fa5\w]*?['"])/mg, str => {
+          return str + Date.now()
+        })
         // 把代码传给后端，在后端运行Python代码
         this.$post(this.api.runPythonCode, {
           code

src/router/index.js

@@ -107,6 +107,16 @@ let router = new Router({
                     component: () => import( '../views/data/Data.vue'),
                     // meta: { title: '数据管理' }
                 },
+                {
+                    path: '/system',
+                    component: () => import( '../views/system'),
+                    // meta: { title: '数据管理' }
+                },
+                {
+                    path: '/manageLog',
+                    component: () => import( '../views/system/manageLog'),
+                    // meta: { title: '数据管理' }
+                },
                 {
                     path: '/permission',
                     component: () => import('../views/customer/Permission.vue'),

src/views/serve/backstage/index.vue

@@ -46,43 +46,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.tabs {
-  display: flex;
-  align-items: center;
-  padding: 0 24px;
-  border-bottom: 1px solid rgba(0, 0, 0, .06);
 
-  .item {
-    position: relative;
-    padding: 20px 0;
-    margin-right: 40px;
-    font-size: 16px;
-    color: rgba(0, 0, 0, 0.65);
-    cursor: pointer;
-
-    &:after {
-      content: '';
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      height: 3px;
-      border-bottom: 3px solid transparent;
-      border-radius: 2px;
-    }
-
-    &.active {
-      font-weight: 500;
-      color: rgba(0, 0, 0, 0.85);
-    }
-
-    &.active:after {
-      border-bottom-color: #9278ff;
-    }
-  }
-}
-.page {
-    background-color: #fff;
-    border-radius: 8px;
-}
 </style>

src/views/system/dic.vue

@@ -0,0 +1,270 @@
+<template>
+    <div class="page">
+        <h6 class="p-title">筛选</h6>
+        <div class="tool">
+            <ul class="filter">
+                <li>
+                    <el-input placeholder="请输入字典名称" prefix-icon="el-icon-search" v-model.trim="keyword" clearable></el-input>
+                </li>
+            </ul>
+            <div>
+                <el-button type="primary" round @click="addRole">新增角色</el-button>
+                <el-button type="primary" round @click="delAllSelection">批量删除</el-button>
+            </div>
+        </div>
+
+        <el-table :data="listData" class="table" ref="table" stripe header-align="center" @selection-change="handleSelectionChange" :row-key="getRowKeys">
+            <el-table-column type="selection" width="55" align="center" :selectable="practiceSelectable" :reserve-selection="true"></el-table-column>
+            <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
+            <el-table-column prop="roleName" label="角色名称" align="center" min-width="250" show-overflow-tooltip></el-table-column>
+            <el-table-column label="角色描述" min-width="400" align="center">
+                <template slot-scope="scope">
+                    <el-input placeholder="该角色用于管理全部功能权限" v-model="scope.row.remark" disabled></el-input>
+                </template>
+            </el-table-column>
+            <el-table-column label="操作" align="center" width="200">
+                <template slot-scope="scope">
+                    <el-button type="text" @click="showRole(scope.row)">查看</el-button>
+                    <el-button v-if="scope.row.roleName !== '超级管理员'" type="text" @click="editRole(scope.row)">编辑</el-button>
+                    <el-button v-if="scope.row.roleName !== '超级管理员' && scope.row.roleName !== '管理员'" type="text" @click="handleDelete(scope.row)">删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <div class="pagination">
+            <el-pagination background @current-change="currentChange" :current-page="page" layout="total, prev, pager, next" :total="total"></el-pagination>
+        </div>
+
+        <el-dialog :title="isDetail ? '查看角色' : (isAdd ? '新增角色' : '编辑角色')" :visible.sync="roleVisible" width="30%" @close="closeRole" class="dialog" :close-on-click-modal="false">
+            <el-form ref="form" label-width="80px" :disabled="isDetail">
+                <el-form-item label="角色名称">
+                    <el-input v-model="form.roleName" placeholder="请输入角色名称"></el-input>
+                </el-form-item>
+                <el-form-item label="角色描述">
+                    <el-input v-model="form.remark" placeholder="请输入角色描述" type="textarea" rows="5"></el-input>
+                </el-form-item>
+                <el-form-item prop="role" label="角色权限">
+                    <div style="max-height: 300px; overflow: auto">
+                        <el-tree
+                            ref="per"
+                            :data="permissions"
+                            show-checkbox
+                            default-expand-all
+                            node-key="id"
+                            :default-expanded-keys="checkedIds"
+                            :default-checked-keys="checkedIds"
+                            :props="defaultProps">
+                        </el-tree>
+                    </div>
+                </el-form-item>
+            </el-form>
+            <span slot="footer" class="dialog-footer" v-if="!isDetail">
+                <el-button @click="roleVisible = false">取 消</el-button>
+                <el-button type="primary" @click="saveData">确 定</el-button>
+            </span>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import Setting from "@/setting";
+export default {
+    data() {
+        return {
+            keyword: "",
+            searchTimer: null,
+            isDetail: false,
+            form: {
+                id: "",
+                roleName: "",
+                remark: ""
+            },
+            listData: [],
+            defaultProps: {
+                children: "children",
+                label: "name"
+            },
+            page: 1,
+            pageSize: 10,
+            total: 0,
+            multipleSelection: [],
+            isAdd: true,
+            roleVisible: false,
+            permissions: [],
+            checkedIds: [],
+            roleNameReapeat: false // 角色名称是否重复
+        };
+    },
+    watch: {
+        keyword: function(val) {
+            clearTimeout(this.searchTimer);
+            this.searchTimer = setTimeout(() => {
+                this.getData();
+            }, 500);
+        }
+    },
+    mounted() {
+        // this.getData();
+    },
+    methods: {
+        getData() {
+            this.$get(`${this.api.roleList}?page=${this.page}&size=${this.pageSize}&name=${this.keyword}&platformId=1`).then(res => {
+                this.listData = res.rolePage.records;
+                this.total = res.rolePage.total;
+            }).catch(res => {});
+        },
+        currentChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        handleDelete(row) {
+            this.$confirm("确定要删除吗？", "提示", {
+                type: "warning"
+            }).then(() => {
+                this.$post(`${this.api.batchRemove}?roleIds=${row.id}`).then(res => {
+                    this.$message.success("删除成功");
+                    this.getData();
+                }).catch(res => {});
+            }).catch(() => {});
+        },
+        getRowKeys(row) {
+            return row.id;
+        },
+        handleSelectionChange(val) {
+            this.multipleSelection = val;
+        },
+        delAllSelection() {
+            if (this.multipleSelection.length) {
+                this.$confirm("确定要删除吗？", "提示", {
+                    type: "warning"
+                }).then(() => {
+                    let ids = this.multipleSelection.map(item => {
+                        return item.id;
+                    });
+                    this.$post(`${this.api.batchRemove}?roleIds=${ids.toString()}`).then(res => {
+                        this.$refs.table.clearSelection();
+                        this.$message.success("删除成功");
+                        this.getData();
+                    }).catch(res => {});
+                    if(this.multipleSelection.length === this.listData.length && this.page>1) {
+                        this.handleCurrentChange(this.page - 1)
+                    }
+                }).catch(() => {});
+            } else {
+                this.$message.error("请先选择数据！");
+            }
+        },
+        practiceSelectable(row, index){
+            let boolean = true;
+            if(row.roleName == '超级管理员'){
+                boolean = false
+            }else{
+                boolean = true
+            }
+            return boolean;
+        },
+        closeRole() {
+            this.isDetail = false;
+            this.form = {
+                id: "",
+                roleName: "",
+                remark: ""
+            };
+            this.checkedIds = [];
+            this.permissions = [];
+        },
+        // 获取权限菜单
+        getPer(row) {
+            if (!this.permissions.length) {
+                this.$get(`${this.api.queryAllMenus}?platformId=${Setting.platformId}`).then(res => {
+                    let data = res.children;
+                    // 因为有些菜单是后来去掉的，但是数据库里要去掉的话就得全部重新加了，所以就在前端来手动把不需要了的菜单给去掉，下面同理
+                    let yw = data.findIndex(n => n.name == "业务后台");
+                    yw != -1 && data.splice(yw, 1);
+                    try {
+                        let system = data.findIndex(n => n.name == "系统设置");
+
+                        if (system != -1) {
+                            data[system].children[1].children.splice(4, 1);
+                            data[system].children[1].children.splice(1, 1);
+                            data[system].children[1].children.splice(0, 1);
+                        }
+                    } catch (error) {
+                    }
+                    this.permissions = data;
+                    if (row) {
+                        this.getDetail(row);
+                    }
+                }).catch(res => {
+                });
+            }
+        },
+        addRole() {
+            this.isAdd = true;
+            this.getPer();
+            this.checkedIds = [];
+            this.permissions.length && this.$refs.per.setCheckedNodes([]);
+            this.roleVisible = true;
+        },
+        // 递归处理勾选的权限
+        handleRolePer(data, permissions) {
+            let result = data;
+            if (permissions.length) {
+                permissions.map(e => {
+                    if (result.includes(e.id) && e.children) {
+                        // 如果该权限下的子权限不是每个都勾选了,就把该权限的id从已勾选的id集合里去除,因为如果不去除的话,这个权限就会勾选,同时会把该权限下的所有子权限都一起勾选
+                        e.children.every(n => result.includes(n)) || result.splice(result.indexOf(e.id), 1);
+                    }
+                    e.children && e.children.length && this.handleRolePer(data, e.children);
+                });
+            }
+            return result;
+        },
+        async getDetail(row) { // 查询详情
+            let res = await this.$get(`${this.api.obtainDetails}?id=${row.id}`);
+            this.form = res.role;
+            this.form.id = row.id;
+            this.checkedIds = this.handleRolePer(res.permissionList, this.permissions);
+            this.$refs.per.setCheckedNodes(this.checkedIds);
+        },
+        showRole(row) {
+            this.isDetail = true;
+            this.isAdd = false;
+            this.getPer(row);
+            this.roleVisible = true;
+        },
+        editRole(row) {
+            this.isAdd = false;
+            this.getPer(row);
+            this.roleVisible = true;
+        },
+        async saveData() {
+            if (!this.form.roleName) return this.$message.warning("请填写角色名称");
+            if (!this.form.remark) return this.$message.warning("请填写角色描述");
+            if (!this.$refs.per.getCheckedKeys().length) return this.$message.warning("请选择角色权限");
+            // 获取已勾选的,和半勾选的(即子级没有全部勾选的节点),半勾选的一样要传给后端
+            let permissionId = [...this.$refs.per.getHalfCheckedKeys(), ...this.$refs.per.getCheckedKeys()];
+            let data = {
+                ...this.form,
+                permissionId,
+                platformId:1,
+            };
+            if (this.form.id) {
+                this.$post(this.api.saveOrUpdate, data).then(res => {
+                    this.$message.success("修改成功");
+                    this.getData();
+                    this.roleVisible = false;
+                }).catch(res => {});
+            } else {
+                this.$post(this.api.saveOrUpdate, data).then(res => {
+                    this.$message.success("新增成功");
+                    this.getData();
+                    this.roleVisible = false;
+                }).catch(res => {});
+            }
+        }
+    }
+};
+</script>
+<style lang="scss" scoped>
+
+</style>

src/views/system/index.vue

@@ -0,0 +1,69 @@
+<template>
+    <div class="page" style="padding: 0">
+        <div class="tabs">
+            <a class="item" v-for="(item,index) in tabs" :key="index" :class="{active: index == active}" @click="tabChange(index)">{{ item }}</a>
+        </div>
+
+        <staff v-if="active == 'staff'"></staff>
+        <role v-if="active == 'role'"></role>
+        <dic v-if="active == 'dic'"></dic>
+        <log v-if="active == 'log'"></log>
+    </div>
+</template>
+
+<script>
+import Setting from "@/setting";
+import staff from "./staff";
+import role from "./role";
+import dic from "./dic";
+import log from "./log";
+export default {
+    data() {
+        return {
+            active: "staff",
+            tabs: {
+                staff: "后台账号",
+                role: "角色权限",
+                dic: "数据字典",
+                log: "日志更新"
+            }
+        };
+    },
+    computed: {
+
+    },
+    components: {
+        staff,
+        role,
+        dic,
+        log
+    },
+    created() {
+        Setting.dynamicRoute && this.initTabs();
+    },
+    methods: {
+        tabChange(index) {
+            this.active = index;
+        },
+        initTabs() {
+            let tab1 = this.auth("员工管理");
+            let tab2 = this.auth("角色权限");
+            let tab3 = this.auth("系统logo设置");
+
+            if (!tab1) {
+                delete this.tabs.staff;
+            }
+            if (!tab2) {
+                delete this.tabs.role;
+            }
+            if (!tab3) {
+                delete this.tabs.logo;
+            }
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/system/log.vue

@@ -0,0 +1,263 @@
+<template>
+    <div class="page">
+        <h6 class="p-title">筛选</h6>
+        <div class="tool">
+            <ul class="filter">
+                <li>
+                    <el-input placeholder="请输入日志名称" prefix-icon="el-icon-search" v-model.trim="keyword" clearable></el-input>
+                </li>
+            </ul>
+        </div>
+
+        <el-table :data="listData" class="table" ref="table" stripe header-align="center" @selection-change="handleSelectionChange" :row-key="getRowKeys">
+            <el-table-column type="selection" width="55" align="center" :selectable="practiceSelectable" :reserve-selection="true"></el-table-column>
+            <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
+            <el-table-column prop="roleName" label="平台名称" align="center" min-width="250" show-overflow-tooltip></el-table-column>
+            <el-table-column prop="roleName" label="最新版本名称" align="center"></el-table-column>
+            <el-table-column prop="roleName" label="最新版本状态" align="center"></el-table-column>
+            <el-table-column prop="roleName" label="最近编辑" align="center"></el-table-column>
+            <el-table-column prop="roleName" label="版本数" align="center"></el-table-column>
+            <el-table-column label="操作" align="center" width="200">
+                <template slot-scope="scope">
+                    <el-button type="text" @click="showRole(scope.row)">管理</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <div class="pagination">
+            <el-pagination background @current-change="currentChange" :current-page="page" layout="total, prev, pager, next" :total="total"></el-pagination>
+        </div>
+
+        <el-dialog :title="isDetail ? '查看角色' : (isAdd ? '新增角色' : '编辑角色')" :visible.sync="roleVisible" width="30%" @close="closeRole" class="dialog" :close-on-click-modal="false">
+            <el-form ref="form" label-width="80px" :disabled="isDetail">
+                <el-form-item label="角色名称">
+                    <el-input v-model="form.roleName" placeholder="请输入角色名称"></el-input>
+                </el-form-item>
+                <el-form-item label="角色描述">
+                    <el-input v-model="form.remark" placeholder="请输入角色描述" type="textarea" rows="5"></el-input>
+                </el-form-item>
+                <el-form-item prop="role" label="角色权限">
+                    <div style="max-height: 300px; overflow: auto">
+                        <el-tree
+                            ref="per"
+                            :data="permissions"
+                            show-checkbox
+                            default-expand-all
+                            node-key="id"
+                            :default-expanded-keys="checkedIds"
+                            :default-checked-keys="checkedIds"
+                            :props="defaultProps">
+                        </el-tree>
+                    </div>
+                </el-form-item>
+            </el-form>
+            <span slot="footer" class="dialog-footer" v-if="!isDetail">
+                <el-button @click="roleVisible = false">取 消</el-button>
+                <el-button type="primary" @click="saveData">确 定</el-button>
+            </span>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import Setting from "@/setting";
+export default {
+    data() {
+        return {
+            keyword: "",
+            searchTimer: null,
+            isDetail: false,
+            form: {
+                id: "",
+                roleName: "",
+                remark: ""
+            },
+            listData: [],
+            defaultProps: {
+                children: "children",
+                label: "name"
+            },
+            page: 1,
+            pageSize: 10,
+            total: 0,
+            multipleSelection: [],
+            isAdd: true,
+            roleVisible: false,
+            permissions: [],
+            checkedIds: [],
+            roleNameReapeat: false // 角色名称是否重复
+        };
+    },
+    watch: {
+        keyword: function(val) {
+            clearTimeout(this.searchTimer);
+            this.searchTimer = setTimeout(() => {
+                this.getData();
+            }, 500);
+        }
+    },
+    mounted() {
+        // this.getData();
+    },
+    methods: {
+        getData() {
+            this.$get(`${this.api.roleList}?page=${this.page}&size=${this.pageSize}&name=${this.keyword}&platformId=1`).then(res => {
+                this.listData = res.rolePage.records;
+                this.total = res.rolePage.total;
+            }).catch(res => {});
+        },
+        currentChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        handleDelete(row) {
+            this.$confirm("确定要删除吗？", "提示", {
+                type: "warning"
+            }).then(() => {
+                this.$post(`${this.api.batchRemove}?roleIds=${row.id}`).then(res => {
+                    this.$message.success("删除成功");
+                    this.getData();
+                }).catch(res => {});
+            }).catch(() => {});
+        },
+        getRowKeys(row) {
+            return row.id;
+        },
+        handleSelectionChange(val) {
+            this.multipleSelection = val;
+        },
+        delAllSelection() {
+            if (this.multipleSelection.length) {
+                this.$confirm("确定要删除吗？", "提示", {
+                    type: "warning"
+                }).then(() => {
+                    let ids = this.multipleSelection.map(item => {
+                        return item.id;
+                    });
+                    this.$post(`${this.api.batchRemove}?roleIds=${ids.toString()}`).then(res => {
+                        this.$refs.table.clearSelection();
+                        this.$message.success("删除成功");
+                        this.getData();
+                    }).catch(res => {});
+                    if(this.multipleSelection.length === this.listData.length && this.page>1) {
+                        this.handleCurrentChange(this.page - 1)
+                    }
+                }).catch(() => {});
+            } else {
+                this.$message.error("请先选择数据！");
+            }
+        },
+        practiceSelectable(row, index){
+            let boolean = true;
+            if(row.roleName == '超级管理员'){
+                boolean = false
+            }else{
+                boolean = true
+            }
+            return boolean;
+        },
+        closeRole() {
+            this.isDetail = false;
+            this.form = {
+                id: "",
+                roleName: "",
+                remark: ""
+            };
+            this.checkedIds = [];
+            this.permissions = [];
+        },
+        // 获取权限菜单
+        getPer(row) {
+            if (!this.permissions.length) {
+                this.$get(`${this.api.queryAllMenus}?platformId=${Setting.platformId}`).then(res => {
+                    let data = res.children;
+                    // 因为有些菜单是后来去掉的，但是数据库里要去掉的话就得全部重新加了，所以就在前端来手动把不需要了的菜单给去掉，下面同理
+                    let yw = data.findIndex(n => n.name == "业务后台");
+                    yw != -1 && data.splice(yw, 1);
+                    try {
+                        let system = data.findIndex(n => n.name == "系统设置");
+
+                        if (system != -1) {
+                            data[system].children[1].children.splice(4, 1);
+                            data[system].children[1].children.splice(1, 1);
+                            data[system].children[1].children.splice(0, 1);
+                        }
+                    } catch (error) {
+                    }
+                    this.permissions = data;
+                    if (row) {
+                        this.getDetail(row);
+                    }
+                }).catch(res => {
+                });
+            }
+        },
+        addRole() {
+            this.isAdd = true;
+            this.getPer();
+            this.checkedIds = [];
+            this.permissions.length && this.$refs.per.setCheckedNodes([]);
+            this.roleVisible = true;
+        },
+        // 递归处理勾选的权限
+        handleRolePer(data, permissions) {
+            let result = data;
+            if (permissions.length) {
+                permissions.map(e => {
+                    if (result.includes(e.id) && e.children) {
+                        // 如果该权限下的子权限不是每个都勾选了,就把该权限的id从已勾选的id集合里去除,因为如果不去除的话,这个权限就会勾选,同时会把该权限下的所有子权限都一起勾选
+                        e.children.every(n => result.includes(n)) || result.splice(result.indexOf(e.id), 1);
+                    }
+                    e.children && e.children.length && this.handleRolePer(data, e.children);
+                });
+            }
+            return result;
+        },
+        async getDetail(row) { // 查询详情
+            let res = await this.$get(`${this.api.obtainDetails}?id=${row.id}`);
+            this.form = res.role;
+            this.form.id = row.id;
+            this.checkedIds = this.handleRolePer(res.permissionList, this.permissions);
+            this.$refs.per.setCheckedNodes(this.checkedIds);
+        },
+        showRole(row) {
+            this.isDetail = true;
+            this.isAdd = false;
+            this.getPer(row);
+            this.roleVisible = true;
+        },
+        editRole(row) {
+            this.isAdd = false;
+            this.getPer(row);
+            this.roleVisible = true;
+        },
+        async saveData() {
+            if (!this.form.roleName) return this.$message.warning("请填写角色名称");
+            if (!this.form.remark) return this.$message.warning("请填写角色描述");
+            if (!this.$refs.per.getCheckedKeys().length) return this.$message.warning("请选择角色权限");
+            // 获取已勾选的,和半勾选的(即子级没有全部勾选的节点),半勾选的一样要传给后端
+            let permissionId = [...this.$refs.per.getHalfCheckedKeys(), ...this.$refs.per.getCheckedKeys()];
+            let data = {
+                ...this.form,
+                permissionId,
+                platformId:1,
+            };
+            if (this.form.id) {
+                this.$post(this.api.saveOrUpdate, data).then(res => {
+                    this.$message.success("修改成功");
+                    this.getData();
+                    this.roleVisible = false;
+                }).catch(res => {});
+            } else {
+                this.$post(this.api.saveOrUpdate, data).then(res => {
+                    this.$message.success("新增成功");
+                    this.getData();
+                    this.roleVisible = false;
+                }).catch(res => {});
+            }
+        }
+    }
+};
+</script>
+<style lang="scss" scoped>
+
+</style>

src/views/system/manageLog.vue

@@ -0,0 +1,263 @@
+<template>
+    <div class="page">
+        <h6 class="p-title">筛选</h6>
+        <div class="tool">
+            <ul class="filter">
+                <li>
+                    <el-input placeholder="请输入日志名称" prefix-icon="el-icon-search" v-model.trim="keyword" clearable></el-input>
+                </li>
+            </ul>
+        </div>
+
+        <el-table :data="listData" class="table" ref="table" stripe header-align="center" @selection-change="handleSelectionChange" :row-key="getRowKeys">
+            <el-table-column type="selection" width="55" align="center" :selectable="practiceSelectable" :reserve-selection="true"></el-table-column>
+            <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
+            <el-table-column prop="roleName" label="平台名称" align="center" min-width="250" show-overflow-tooltip></el-table-column>
+            <el-table-column prop="roleName" label="最新版本名称" align="center"></el-table-column>
+            <el-table-column prop="roleName" label="最新版本状态" align="center"></el-table-column>
+            <el-table-column prop="roleName" label="最近编辑" align="center"></el-table-column>
+            <el-table-column prop="roleName" label="版本数" align="center"></el-table-column>
+            <el-table-column label="操作" align="center" width="200">
+                <template slot-scope="scope">
+                    <el-button type="text" @click="showRole(scope.row)">管理</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <div class="pagination">
+            <el-pagination background @current-change="currentChange" :current-page="page" layout="total, prev, pager, next" :total="total"></el-pagination>
+        </div>
+
+        <el-dialog :title="isDetail ? '查看角色' : (isAdd ? '新增角色' : '编辑角色')" :visible.sync="roleVisible" width="30%" @close="closeRole" class="dialog" :close-on-click-modal="false">
+            <el-form ref="form" label-width="80px" :disabled="isDetail">
+                <el-form-item label="角色名称">
+                    <el-input v-model="form.roleName" placeholder="请输入角色名称"></el-input>
+                </el-form-item>
+                <el-form-item label="角色描述">
+                    <el-input v-model="form.remark" placeholder="请输入角色描述" type="textarea" rows="5"></el-input>
+                </el-form-item>
+                <el-form-item prop="role" label="角色权限">
+                    <div style="max-height: 300px; overflow: auto">
+                        <el-tree
+                            ref="per"
+                            :data="permissions"
+                            show-checkbox
+                            default-expand-all
+                            node-key="id"
+                            :default-expanded-keys="checkedIds"
+                            :default-checked-keys="checkedIds"
+                            :props="defaultProps">
+                        </el-tree>
+                    </div>
+                </el-form-item>
+            </el-form>
+            <span slot="footer" class="dialog-footer" v-if="!isDetail">
+                <el-button @click="roleVisible = false">取 消</el-button>
+                <el-button type="primary" @click="saveData">确 定</el-button>
+            </span>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import Setting from "@/setting";
+export default {
+    data() {
+        return {
+            keyword: "",
+            searchTimer: null,
+            isDetail: false,
+            form: {
+                id: "",
+                roleName: "",
+                remark: ""
+            },
+            listData: [],
+            defaultProps: {
+                children: "children",
+                label: "name"
+            },
+            page: 1,
+            pageSize: 10,
+            total: 0,
+            multipleSelection: [],
+            isAdd: true,
+            roleVisible: false,
+            permissions: [],
+            checkedIds: [],
+            roleNameReapeat: false // 角色名称是否重复
+        };
+    },
+    watch: {
+        keyword: function(val) {
+            clearTimeout(this.searchTimer);
+            this.searchTimer = setTimeout(() => {
+                this.getData();
+            }, 500);
+        }
+    },
+    mounted() {
+        // this.getData();
+    },
+    methods: {
+        getData() {
+            this.$get(`${this.api.roleList}?page=${this.page}&size=${this.pageSize}&name=${this.keyword}&platformId=1`).then(res => {
+                this.listData = res.rolePage.records;
+                this.total = res.rolePage.total;
+            }).catch(res => {});
+        },
+        currentChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        handleDelete(row) {
+            this.$confirm("确定要删除吗？", "提示", {
+                type: "warning"
+            }).then(() => {
+                this.$post(`${this.api.batchRemove}?roleIds=${row.id}`).then(res => {
+                    this.$message.success("删除成功");
+                    this.getData();
+                }).catch(res => {});
+            }).catch(() => {});
+        },
+        getRowKeys(row) {
+            return row.id;
+        },
+        handleSelectionChange(val) {
+            this.multipleSelection = val;
+        },
+        delAllSelection() {
+            if (this.multipleSelection.length) {
+                this.$confirm("确定要删除吗？", "提示", {
+                    type: "warning"
+                }).then(() => {
+                    let ids = this.multipleSelection.map(item => {
+                        return item.id;
+                    });
+                    this.$post(`${this.api.batchRemove}?roleIds=${ids.toString()}`).then(res => {
+                        this.$refs.table.clearSelection();
+                        this.$message.success("删除成功");
+                        this.getData();
+                    }).catch(res => {});
+                    if(this.multipleSelection.length === this.listData.length && this.page>1) {
+                        this.handleCurrentChange(this.page - 1)
+                    }
+                }).catch(() => {});
+            } else {
+                this.$message.error("请先选择数据！");
+            }
+        },
+        practiceSelectable(row, index){
+            let boolean = true;
+            if(row.roleName == '超级管理员'){
+                boolean = false
+            }else{
+                boolean = true
+            }
+            return boolean;
+        },
+        closeRole() {
+            this.isDetail = false;
+            this.form = {
+                id: "",
+                roleName: "",
+                remark: ""
+            };
+            this.checkedIds = [];
+            this.permissions = [];
+        },
+        // 获取权限菜单
+        getPer(row) {
+            if (!this.permissions.length) {
+                this.$get(`${this.api.queryAllMenus}?platformId=${Setting.platformId}`).then(res => {
+                    let data = res.children;
+                    // 因为有些菜单是后来去掉的，但是数据库里要去掉的话就得全部重新加了，所以就在前端来手动把不需要了的菜单给去掉，下面同理
+                    let yw = data.findIndex(n => n.name == "业务后台");
+                    yw != -1 && data.splice(yw, 1);
+                    try {
+                        let system = data.findIndex(n => n.name == "系统设置");
+
+                        if (system != -1) {
+                            data[system].children[1].children.splice(4, 1);
+                            data[system].children[1].children.splice(1, 1);
+                            data[system].children[1].children.splice(0, 1);
+                        }
+                    } catch (error) {
+                    }
+                    this.permissions = data;
+                    if (row) {
+                        this.getDetail(row);
+                    }
+                }).catch(res => {
+                });
+            }
+        },
+        addRole() {
+            this.isAdd = true;
+            this.getPer();
+            this.checkedIds = [];
+            this.permissions.length && this.$refs.per.setCheckedNodes([]);
+            this.roleVisible = true;
+        },
+        // 递归处理勾选的权限
+        handleRolePer(data, permissions) {
+            let result = data;
+            if (permissions.length) {
+                permissions.map(e => {
+                    if (result.includes(e.id) && e.children) {
+                        // 如果该权限下的子权限不是每个都勾选了,就把该权限的id从已勾选的id集合里去除,因为如果不去除的话,这个权限就会勾选,同时会把该权限下的所有子权限都一起勾选
+                        e.children.every(n => result.includes(n)) || result.splice(result.indexOf(e.id), 1);
+                    }
+                    e.children && e.children.length && this.handleRolePer(data, e.children);
+                });
+            }
+            return result;
+        },
+        async getDetail(row) { // 查询详情
+            let res = await this.$get(`${this.api.obtainDetails}?id=${row.id}`);
+            this.form = res.role;
+            this.form.id = row.id;
+            this.checkedIds = this.handleRolePer(res.permissionList, this.permissions);
+            this.$refs.per.setCheckedNodes(this.checkedIds);
+        },
+        showRole(row) {
+            this.isDetail = true;
+            this.isAdd = false;
+            this.getPer(row);
+            this.roleVisible = true;
+        },
+        editRole(row) {
+            this.isAdd = false;
+            this.getPer(row);
+            this.roleVisible = true;
+        },
+        async saveData() {
+            if (!this.form.roleName) return this.$message.warning("请填写角色名称");
+            if (!this.form.remark) return this.$message.warning("请填写角色描述");
+            if (!this.$refs.per.getCheckedKeys().length) return this.$message.warning("请选择角色权限");
+            // 获取已勾选的,和半勾选的(即子级没有全部勾选的节点),半勾选的一样要传给后端
+            let permissionId = [...this.$refs.per.getHalfCheckedKeys(), ...this.$refs.per.getCheckedKeys()];
+            let data = {
+                ...this.form,
+                permissionId,
+                platformId:1,
+            };
+            if (this.form.id) {
+                this.$post(this.api.saveOrUpdate, data).then(res => {
+                    this.$message.success("修改成功");
+                    this.getData();
+                    this.roleVisible = false;
+                }).catch(res => {});
+            } else {
+                this.$post(this.api.saveOrUpdate, data).then(res => {
+                    this.$message.success("新增成功");
+                    this.getData();
+                    this.roleVisible = false;
+                }).catch(res => {});
+            }
+        }
+    }
+};
+</script>
+<style lang="scss" scoped>
+
+</style>

src/views/system/role.vue

@@ -0,0 +1,270 @@
+<template>
+    <div class="page">
+        <h6 class="p-title">筛选</h6>
+        <div class="tool">
+            <ul class="filter">
+                <li>
+                    <el-input placeholder="请输入角色名称" prefix-icon="el-icon-search" v-model.trim="keyword" clearable></el-input>
+                </li>
+            </ul>
+            <div>
+                <el-button type="primary" round @click="addRole">新增角色</el-button>
+                <el-button type="primary" round @click="delAllSelection">批量删除</el-button>
+            </div>
+        </div>
+
+        <el-table :data="listData" class="table" ref="table" stripe header-align="center" @selection-change="handleSelectionChange" :row-key="getRowKeys">
+            <el-table-column type="selection" width="55" align="center" :selectable="practiceSelectable" :reserve-selection="true"></el-table-column>
+            <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
+            <el-table-column prop="roleName" label="角色名称" align="center" min-width="250" show-overflow-tooltip></el-table-column>
+            <el-table-column label="角色描述" min-width="400" align="center">
+                <template slot-scope="scope">
+                    <el-input placeholder="该角色用于管理全部功能权限" v-model="scope.row.remark" disabled></el-input>
+                </template>
+            </el-table-column>
+            <el-table-column label="操作" align="center" width="200">
+                <template slot-scope="scope">
+                    <el-button type="text" @click="showRole(scope.row)">查看</el-button>
+                    <el-button v-if="scope.row.roleName !== '超级管理员'" type="text" @click="editRole(scope.row)">编辑</el-button>
+                    <el-button v-if="scope.row.roleName !== '超级管理员' && scope.row.roleName !== '管理员'" type="text" @click="handleDelete(scope.row)">删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <div class="pagination">
+            <el-pagination background @current-change="currentChange" :current-page="page" layout="total, prev, pager, next" :total="total"></el-pagination>
+        </div>
+
+        <el-dialog :title="isDetail ? '查看角色' : (isAdd ? '新增角色' : '编辑角色')" :visible.sync="roleVisible" width="30%" @close="closeRole" class="dialog" :close-on-click-modal="false">
+            <el-form ref="form" label-width="80px" :disabled="isDetail">
+                <el-form-item label="角色名称">
+                    <el-input v-model="form.roleName" placeholder="请输入角色名称"></el-input>
+                </el-form-item>
+                <el-form-item label="角色描述">
+                    <el-input v-model="form.remark" placeholder="请输入角色描述" type="textarea" rows="5"></el-input>
+                </el-form-item>
+                <el-form-item prop="role" label="角色权限">
+                    <div style="max-height: 300px; overflow: auto">
+                        <el-tree
+                            ref="per"
+                            :data="permissions"
+                            show-checkbox
+                            default-expand-all
+                            node-key="id"
+                            :default-expanded-keys="checkedIds"
+                            :default-checked-keys="checkedIds"
+                            :props="defaultProps">
+                        </el-tree>
+                    </div>
+                </el-form-item>
+            </el-form>
+            <span slot="footer" class="dialog-footer" v-if="!isDetail">
+                <el-button @click="roleVisible = false">取 消</el-button>
+                <el-button type="primary" @click="saveData">确 定</el-button>
+            </span>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import Setting from "@/setting";
+export default {
+    data() {
+        return {
+            keyword: "",
+            searchTimer: null,
+            isDetail: false,
+            form: {
+                id: "",
+                roleName: "",
+                remark: ""
+            },
+            listData: [],
+            defaultProps: {
+                children: "children",
+                label: "name"
+            },
+            page: 1,
+            pageSize: 10,
+            total: 0,
+            multipleSelection: [],
+            isAdd: true,
+            roleVisible: false,
+            permissions: [],
+            checkedIds: [],
+            roleNameReapeat: false // 角色名称是否重复
+        };
+    },
+    watch: {
+        keyword: function(val) {
+            clearTimeout(this.searchTimer);
+            this.searchTimer = setTimeout(() => {
+                this.getData();
+            }, 500);
+        }
+    },
+    mounted() {
+        // this.getData();
+    },
+    methods: {
+        getData() {
+            this.$get(`${this.api.roleList}?page=${this.page}&size=${this.pageSize}&name=${this.keyword}&platformId=1`).then(res => {
+                this.listData = res.rolePage.records;
+                this.total = res.rolePage.total;
+            }).catch(res => {});
+        },
+        currentChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        handleDelete(row) {
+            this.$confirm("确定要删除吗？", "提示", {
+                type: "warning"
+            }).then(() => {
+                this.$post(`${this.api.batchRemove}?roleIds=${row.id}`).then(res => {
+                    this.$message.success("删除成功");
+                    this.getData();
+                }).catch(res => {});
+            }).catch(() => {});
+        },
+        getRowKeys(row) {
+            return row.id;
+        },
+        handleSelectionChange(val) {
+            this.multipleSelection = val;
+        },
+        delAllSelection() {
+            if (this.multipleSelection.length) {
+                this.$confirm("确定要删除吗？", "提示", {
+                    type: "warning"
+                }).then(() => {
+                    let ids = this.multipleSelection.map(item => {
+                        return item.id;
+                    });
+                    this.$post(`${this.api.batchRemove}?roleIds=${ids.toString()}`).then(res => {
+                        this.$refs.table.clearSelection();
+                        this.$message.success("删除成功");
+                        this.getData();
+                    }).catch(res => {});
+                    if(this.multipleSelection.length === this.listData.length && this.page>1) {
+                        this.handleCurrentChange(this.page - 1)
+                    }
+                }).catch(() => {});
+            } else {
+                this.$message.error("请先选择数据！");
+            }
+        },
+        practiceSelectable(row, index){
+            let boolean = true;
+            if(row.roleName == '超级管理员'){
+                boolean = false
+            }else{
+                boolean = true
+            }
+            return boolean;
+        },
+        closeRole() {
+            this.isDetail = false;
+            this.form = {
+                id: "",
+                roleName: "",
+                remark: ""
+            };
+            this.checkedIds = [];
+            this.permissions = [];
+        },
+        // 获取权限菜单
+        getPer(row) {
+            if (!this.permissions.length) {
+                this.$get(`${this.api.queryAllMenus}?platformId=${Setting.platformId}`).then(res => {
+                    let data = res.children;
+                    // 因为有些菜单是后来去掉的，但是数据库里要去掉的话就得全部重新加了，所以就在前端来手动把不需要了的菜单给去掉，下面同理
+                    let yw = data.findIndex(n => n.name == "业务后台");
+                    yw != -1 && data.splice(yw, 1);
+                    try {
+                        let system = data.findIndex(n => n.name == "系统设置");
+
+                        if (system != -1) {
+                            data[system].children[1].children.splice(4, 1);
+                            data[system].children[1].children.splice(1, 1);
+                            data[system].children[1].children.splice(0, 1);
+                        }
+                    } catch (error) {
+                    }
+                    this.permissions = data;
+                    if (row) {
+                        this.getDetail(row);
+                    }
+                }).catch(res => {
+                });
+            }
+        },
+        addRole() {
+            this.isAdd = true;
+            this.getPer();
+            this.checkedIds = [];
+            this.permissions.length && this.$refs.per.setCheckedNodes([]);
+            this.roleVisible = true;
+        },
+        // 递归处理勾选的权限
+        handleRolePer(data, permissions) {
+            let result = data;
+            if (permissions.length) {
+                permissions.map(e => {
+                    if (result.includes(e.id) && e.children) {
+                        // 如果该权限下的子权限不是每个都勾选了,就把该权限的id从已勾选的id集合里去除,因为如果不去除的话,这个权限就会勾选,同时会把该权限下的所有子权限都一起勾选
+                        e.children.every(n => result.includes(n)) || result.splice(result.indexOf(e.id), 1);
+                    }
+                    e.children && e.children.length && this.handleRolePer(data, e.children);
+                });
+            }
+            return result;
+        },
+        async getDetail(row) { // 查询详情
+            let res = await this.$get(`${this.api.obtainDetails}?id=${row.id}`);
+            this.form = res.role;
+            this.form.id = row.id;
+            this.checkedIds = this.handleRolePer(res.permissionList, this.permissions);
+            this.$refs.per.setCheckedNodes(this.checkedIds);
+        },
+        showRole(row) {
+            this.isDetail = true;
+            this.isAdd = false;
+            this.getPer(row);
+            this.roleVisible = true;
+        },
+        editRole(row) {
+            this.isAdd = false;
+            this.getPer(row);
+            this.roleVisible = true;
+        },
+        async saveData() {
+            if (!this.form.roleName) return this.$message.warning("请填写角色名称");
+            if (!this.form.remark) return this.$message.warning("请填写角色描述");
+            if (!this.$refs.per.getCheckedKeys().length) return this.$message.warning("请选择角色权限");
+            // 获取已勾选的,和半勾选的(即子级没有全部勾选的节点),半勾选的一样要传给后端
+            let permissionId = [...this.$refs.per.getHalfCheckedKeys(), ...this.$refs.per.getCheckedKeys()];
+            let data = {
+                ...this.form,
+                permissionId,
+                platformId:1,
+            };
+            if (this.form.id) {
+                this.$post(this.api.saveOrUpdate, data).then(res => {
+                    this.$message.success("修改成功");
+                    this.getData();
+                    this.roleVisible = false;
+                }).catch(res => {});
+            } else {
+                this.$post(this.api.saveOrUpdate, data).then(res => {
+                    this.$message.success("新增成功");
+                    this.getData();
+                    this.roleVisible = false;
+                }).catch(res => {});
+            }
+        }
+    }
+};
+</script>
+<style lang="scss" scoped>
+
+</style>

src/views/system/staff.vue

@@ -0,0 +1,620 @@
+<template>
+    <div class="wrap">
+        <div class="side">
+            <org ref="org" @getSingle="getSingle" @getCheck="getCheck"></org>
+        </div>
+
+        <div class="right">
+            <h6 class="p-title">筛选</h6>
+            <div class="tool">
+                <ul class="filter">
+                    <li>
+                        <el-input placeholder="请输入员工账号/姓名/工号" prefix-icon="el-icon-search" v-model.trim="keyword" clearable></el-input>
+                    </li>
+                </ul>
+                <div>
+                    <el-button type="primary" round @click="addTeacher">新增员工</el-button>
+                    <el-button type="primary" round @click="batchImport">批量导入</el-button>
+                    <el-button type="primary" round @click="delAllSelection">批量删除</el-button>
+                </div>
+            </div>
+
+            <el-table :data="listData" class="table" ref="table" stripe header-align="center" @selection-change="handleSelectionChange">
+                <el-table-column type="selection" width="55" align="center"></el-table-column>
+                <el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
+                <el-table-column prop="userName" label="职工姓名" align="center"></el-table-column>
+                <el-table-column prop="account" label="账号" align="center"></el-table-column>
+                <el-table-column prop="workNumber" label="职工工号" align="center"></el-table-column>
+                <el-table-column prop="dept" label="部门" align="center"></el-table-column>
+                <el-table-column prop="roleName" label="账号角色" align="center"></el-table-column>
+                <el-table-column prop="logInNumber" label="登录次数" align="center"></el-table-column>
+                <el-table-column prop="lastLoginTime" label="上次登录时间" align="center"></el-table-column>
+                <el-table-column label="操作" width="200" align="center">
+                    <template slot-scope="scope">
+                        <el-button type="text" @click="showTeacher(scope.row)">查看</el-button>
+                        <el-button type="text" @click="editTeacher(scope.row)">编辑</el-button>
+                        <el-button type="text" @click="resetPassword(scope.row)">重置密码</el-button>
+                        <el-button type="text" @click="delTeacher(scope.row)">删除</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <div class="pagination">
+                <el-pagination background layout="total, prev, pager, next" :current-page="page" @current-change="handleCurrentChange" :total="total"></el-pagination>
+            </div>
+        </div>
+
+        <el-dialog :title="isDetail ? '查看员工' : (isAdd ? '新增员工' : '编辑员工')" :visible.sync="teacherVisible"
+                   width="30%" @close="closeTeacher" class="dialog" :close-on-click-modal="false">
+            <el-form ref="teacherForm" :model="teacherForm" :rules="rules" label-width="150px" :disabled="isDetail" style='margin-right: 80px;'>
+                <el-form-item prop="account" label="账号">
+                    <el-input v-model.trim="teacherForm.account" placeholder="请输入职工账号"></el-input>
+                </el-form-item>
+                <el-form-item prop="userName" label="用户姓名">
+                    <el-input v-model.trim="teacherForm.userName" placeholder="请输入员工姓名"></el-input>
+                </el-form-item>
+                <el-form-item prop="roleValue" label="账号角色">
+                    <el-select v-model="teacherForm.roleValue" @change="roleChange" @remove-tag="roleRemove" multiple style="width: 100%;height: 32px">
+                        <el-option
+                            v-for="item in roleList"
+                            :key="item.id"
+                            :label="item.roleName"
+                            :value="item.id">
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item prop="uniqueIdentification" label="唯一标识">
+                    <el-input disabled v-model.trim="teacherForm.uniqueIdentification" placeholder="请输入职工工号获取唯一标识"></el-input>
+                </el-form-item>
+                <el-form-item prop="workNumber" label="工号">
+                    <el-input v-model.trim="teacherForm.workNumber" placeholder="请输入职工工号"></el-input>
+                </el-form-item>
+                <el-form-item v-for="item in teacherForm.roleAndDeptList" :label="`${item.roleName}所属部门`" :rules="{
+      required: true, message: '请选择', trigger: 'change'
+    }">
+                    <el-cascader
+                        v-model="item.cascaderValue"
+                        :options="orgList"
+                        :props="casProps"
+                        style="width: 100%"
+                    ></el-cascader>
+                </el-form-item>
+                <el-form-item prop="phone" label="手机号">
+                    <el-input v-model.trim="teacherForm.phone" placeholder="请输入手机号" maxlength="11" @blur="phoneChange"></el-input>
+                </el-form-item>
+                <el-form-item prop="email" label="邮箱">
+                    <el-input v-model.trim="teacherForm.email" placeholder="请输入邮箱" @blur="emailChange"></el-input>
+                </el-form-item>
+            </el-form>
+            <span slot="footer" class="dialog-footer" v-if="!isDetail">
+                <el-button @click="closeTeacher">取 消</el-button>
+                <el-button type="primary" @click="saveSure('teacherForm')">确 定</el-button>
+            </span>
+        </el-dialog>
+
+        <el-dialog title="批量导入" :visible.sync="importVisible" width="24%" :close-on-click-modal="false">
+            <div style="text-align: center">
+                <div style="margin-bottom: 10px;">
+                    <el-button type="primary" @click="downLoad">模板下载<i class="el-icon-download el-icon--right"></i></el-button>
+                </div>
+                <el-upload
+                    name="file"
+                    accept=".xls,.xlsx"
+                    :on-remove="handleRemove"
+                    :on-error="uploadError"
+                    :on-success="uploadSuccess"
+                    :before-remove="beforeRemove"
+                    :limit="1"
+                    :on-exceed="handleExceed"
+                    :action="this.api.importStaff"
+                    :file-list="uploadList"
+                    :headers="headers"
+                >
+                    <el-button type="primary" class="ml20">上传文件<i class="el-icon-upload2 el-icon--right"></i></el-button>
+                </el-upload>
+                <el-link v-if="uploadFaild" type="primary" @click="showFaild">部分数据导入失败，查看失败原因</el-link>
+            </div>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="importVisible = false">取 消</el-button>
+                <el-button type="primary" @click="uploadSure">确 定</el-button>
+            </span>
+        </el-dialog>
+    </div>
+</template>
+<script>
+import Setting from "@/setting";
+import org from "./staffSide"
+export default {
+    data() {
+        var accountPass = (rule, value, callback) => {
+            if (value === '') {
+                callback(new Error('请输入账号'));
+            } else {
+                var pattern = /^[A-Za-z0-9]*$/;
+                if(pattern.test(value)){
+                    this.accountChange();
+                    callback();
+                }else{
+                    callback(new Error('请输入正确账号格式'));
+                }
+            }
+        };
+        var workNumberPass = (rule, value, callback) => {
+            if (value === '') {
+                callback(new Error('请输入职工工号'));
+            } else {
+                var pattern = /^[a-zA-Z0-9]*$/;
+                if(pattern.test(value)){
+                    this.workNumberChange();
+                    callback();
+                }else{
+                    callback(new Error('职工工号必须为数字或英文'));
+                }
+            }
+        };
+        return {
+            exportCode: "",
+            headers: {
+                // token: util.local.get(Setting.tokenKey)
+            },
+            isDetail: false,
+            isAdd: false,
+            teacherVisible: false,
+            roleList: [], // 角色列表
+            orgList: [], // 员工组织架构列表
+            casProps: {
+                value: 'id'
+            },
+            teacherForm: {
+                accountId: "",
+                account: "",
+                userName: "",
+                roleValue: [],
+                roleAndDeptList: [],
+                uniqueIdentification: "",
+                workNumber: "",
+                phone: "",
+                email: ""
+            },
+            rules: {
+                account: [
+                    { required: true, validator: accountPass, trigger: 'blur' }
+                ],
+                userName: [
+                    { required: true, message: "请输入用户姓名", trigger: "blur" }
+                ],
+                roleValue: [
+                    { required: true, message: "请选择账号角色", trigger: "change" }
+                ],
+                workNumber: [
+                    { required: true, validator: workNumberPass , trigger: 'blur' }
+                ],
+                uniqueIdentification: [
+                    // { required: true, message: '请输入唯一标识', trigger: 'blur' },
+                ],
+                phone: [
+                    // { required: true, message: '请输入职工手机号', trigger: 'blur' },
+                    { pattern: /^1[3456789]\d{9}$/, message: "请输入正确的手机号", trigger: "blur"}
+                ],
+                email: [
+                    // { required: true, message: '请输入邮箱', trigger: 'blur' },
+                    {
+                        pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
+                        message: "请输入正确的邮箱",
+                        trigger: "blur"
+                    }
+                ],
+            },
+            accountReapeat: false,
+            workNumberReapeat: false,
+            phoneRepeat: false,
+            emailRepeat: false,
+
+            listData: [], // 员工列表数据
+            keyword: "",
+            page: 1,
+            pageSize: 10,
+            total: 0,
+            multipleSelection: [], // 多选
+
+            importVisible: false, // 批量导入对话框
+            uploadList: [], // 上传文件列表
+            uploadFaild: false, // 上传失败
+
+            gradeId: "", // 员工年级ID
+            staffArchitectureId: "", // 员工部门ID
+            submiting: false // 新增编辑员工防抖标识
+        };
+    },
+    components: {
+        org
+    },
+    watch: {
+        keyword: function(val) {
+            clearTimeout(this.searchTimer);
+            this.searchTimer = setTimeout(() => {
+                this.initData();
+            }, 500);
+        }
+    },
+    mounted() {
+        // this.getRoleData()
+        // this.getData()
+    },
+    methods: {
+        getSingle(data) {
+            this.staffArchitectureId = data.gradeId ? '' : data.staffArchitectureId
+            this.gradeId = data.gradeId || ''
+            this.initData()
+        },
+        getCheck(data) {
+            const marjorIds = []
+            const depIds = []
+            data.forEach(e => {
+                e.gradeId ? depIds.push(e.gradeId) : marjorIds.push(e.staffArchitectureId)
+            });
+            this.staffArchitectureId = marjorIds.toString()
+            this.gradeId = depIds.toString()
+            this.initData()
+        },
+        initData() {
+            this.$refs.table.clearSelection()
+            this.page = 1
+            this.getData()
+        },
+        getData() { // 获取员工列表数据
+            let data = {
+                keyWord: this.keyword,
+                pageNum: this.page,
+                pageSize: this.pageSize,
+                staffArchitectureId: this.staffArchitectureId,
+                gradeId: this.gradeId
+            };
+            this.$post(this.api.staffList, data).then(res => {
+                this.listData = res.page.records;
+                this.total = res.page.total;
+            }).catch(res => {});
+        },
+        getRoleData() { // 获取角色数据
+            this.roleList =[];
+            this.$get(`${this.api.roleList}?page=1&size=100&name=&platformId=1`).then(res => {
+                for(var i=0;i<res.rolePage.records.length;i++){
+                    if (res.rolePage.records[i].roleName == '超级管理员'){
+
+                    }else{
+                        this.roleList.push(res.rolePage.records[i])
+                    }
+                }
+                // this.roleList = res.rolePage.records;
+            }).catch(res => {});
+        },
+        closeTeacher() { // 关闭新增/编辑员工对话框
+            this.teacherForm = {
+                accountId: "",
+                account: "",
+                userName: "",
+                roleValue: [],
+                roleAndDeptList: [],
+                uniqueIdentification: "",
+                workNumber: "",
+                phone: "",
+                email: ""
+            };
+            this.$refs.teacherForm.clearValidate();
+            this.teacherVisible = false;
+        },
+        addTeacher() { // 新增员工
+            this.isDetail = false;
+            this.isAdd = true;
+            this.teacherVisible = true;
+            this.orgList = this.$refs.org.orgList;
+        },
+        getStaffDetail(accountId) { // 获取员工详情
+            this.$get(`${this.api.staffDetail}?accountId=${accountId}`).then(res => {
+                let { data } = res;
+                this.teacherForm = data;
+                this.teacherForm.roleValue = data.roleAndDeptList.map(i => i.roleId);
+                this.teacherForm.roleAndDeptList = data.roleAndDeptList.map(i => {
+                    i.cascaderValue = [i.staffArchitectureId, i.gradeId]
+                    return i;
+                });
+                console.log(22, this.teacherForm)
+            }).catch(res => {});
+        },
+        resetPassword(row) { // 重置密码
+            this.$confirm(`重置后的密码为：${Setting.initialPassword}，确定重置？`, "提示", { type: "warning" }).then(() => {
+                this.$get(`${this.api.resetPassword}?userId=${row.userId}&newPwd=111aaa`).then(res => {
+                    this.$message.success("重置成功");
+                }).catch(res => {
+                });
+            }).catch(() => {
+            });
+        },
+        editTeacher(row) { // 处理编辑
+            this.isDetail = false;
+            this.isAdd = false;
+            this.teacherVisible = true;
+            this.orgList = this.$refs.org.orgList;
+            this.getStaffDetail(row.accountId);
+        },
+        showTeacher(row) { // 处理查看
+            this.isDetail = true;
+            this.isAdd = false;
+            this.teacherVisible = true;
+            this.orgList = this.$refs.org.orgList;
+            this.getStaffDetail(row.accountId);
+        },
+        accountChange() { // 切换账号
+            if (this.teacherForm.account) {
+                let url = "";
+                if (this.isAdd) {
+                    url = `${this.api.checkWorkNumOrAccount}?platformId=${Setting.platformId}&type=${Setting.platformType}&account=${this.teacherForm.account}&workNumber=`;
+                } else {
+                    url = `${this.api.checkWorkNumOrAccount}?platformId=${Setting.platformId}&type=${Setting.platformType}&accountId=${this.teacherForm.accountId}&account=${this.teacherForm.account}&workNumber=`;
+                }
+                this.$post(url).then(res => {
+                    if (res.status === 200) {
+                        this.accountReapeat = false;
+                    }
+                }).catch( err => {
+                    this.accountReapeat = true;
+                });
+            }
+        },
+        workNumberChange() { // 切换工号
+            if (this.teacherForm.workNumber) {
+                let url = "";
+                if (this.isAdd) {
+                    url = `${this.api.checkWorkNumOrAccount}?platformId=${Setting.platformId}&type=${Setting.platformType}&workNumber=${this.teacherForm.workNumber}&account=`;
+                } else {
+                    url = `${this.api.checkWorkNumOrAccount}?platformId=${Setting.platformId}&type=${Setting.platformType}&accountId=${this.teacherForm.accountId}&workNumber=${this.teacherForm.workNumber}&account=`;
+                }
+                this.$post(url).then(res => {
+                    if (res.status === 200) {
+                        this.workNumberReapeat = false;
+                    }
+                }).catch( err => {
+                    this.workNumberReapeat = true;
+                });
+            }
+        },
+        phoneChange() { // 切换手机号
+            let regex = /^1[3456789]\d{9}$/;
+            if (regex.test(this.teacherForm.phone)) {
+                let url = "";
+                if (this.isAdd) {
+                    url = `${this.api.checkEmailOrPhone}?phone=${this.teacherForm.phone}&email=`;
+                } else {
+                    url = `${this.api.checkEmailOrPhone}?accountId=${this.teacherForm.accountId}&phone=${this.teacherForm.phone}&email=`;
+                }
+                this.$post(url).then(res => {
+                    if (res.status === 200) {
+                        this.phoneRepeat = false;
+                    }
+                }).catch( err => {
+                    this.phoneRepeat = true;
+                });
+            }
+        },
+        emailChange() { // 切换邮箱
+            let regex = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
+            if (regex.test(this.teacherForm.email)) {
+                let url = "";
+                if (this.isAdd) {
+                    url = `${this.api.checkEmailOrPhone}?email=${this.teacherForm.email}&phone=`;
+                } else {
+                    url = `${this.api.checkEmailOrPhone}?accountId=${this.teacherForm.accountId}&email=${this.teacherForm.email}&phone=`;
+                }
+                this.$post(url).then(res => {
+                    if (res.status === 200) {
+                        this.emailRepeat = false;
+                    }
+                }).catch( err => {
+                    this.emailRepeat = true;
+                });
+            }
+        },
+        roleChange(value) { // 处理切换角色
+            console.log(this.teacherForm.roleValue)
+            if (value.length) {
+                let ids = this.teacherForm.roleAndDeptList.map(e => e.roleId);
+                this.roleList.forEach(i => {
+                    let obj = {
+                        roleId: "",
+                        roleName: "",
+                        cascaderValue: []
+                    };
+                    if (value.includes(i.id) && !ids.includes(i.id)) {
+                        console.log(i)
+                        obj.roleId = i.id;
+                        obj.roleName = i.roleName;
+                        this.teacherForm.roleAndDeptList.push(obj);
+                    }
+                });
+            } else {
+                this.teacherForm.roleAndDeptList.splice(0);
+            }
+        },
+        roleRemove(value) { // 处理移除角色
+            let list = [];
+            for(var i=0;i<this.teacherForm.roleAndDeptList.length;i++){
+                if (this.teacherForm.roleAndDeptList[i].roleId == value){
+
+                }else{
+                    list.push(this.teacherForm.roleAndDeptList[i])
+                }
+            }
+            this.teacherForm.roleAndDeptList = list
+        },
+        async saveSure(teacherForm) {
+            this.$refs[teacherForm].validate((valid) => {
+                if (valid) {
+                    if (this.submiting) return false
+                    if (this.accountReapeat) return this.$message.warning("该账号已存在");
+                    if (this.workNumberReapeat) return this.$message.warning("该员工工号已存在");
+                    if (this.phoneRepeat) return this.$message.warning("该手机号已存在");
+                    if (this.emailRepeat) return this.$message.warning("该邮箱已存在");
+                    let data = {
+                        accountId: this.teacherForm.accountId,
+                        account: this.teacherForm.account,
+                        userName: this.teacherForm.userName,
+                        roleAndDeptList: [],
+                        uniqueIdentification: this.teacherForm.uniqueIdentification ? this.teacherForm.uniqueIdentification : new Date().getTime(),
+                        workNumber: this.teacherForm.workNumber,
+                        phone: this.teacherForm.phone,
+                        email: this.teacherForm.email
+                    };
+                    if (this.teacherForm.roleAndDeptList.length){
+                        for (let i = 0; i < this.teacherForm.roleAndDeptList.length; i++) {
+                            if (this.teacherForm.roleAndDeptList[i].cascaderValue.length < 2) {
+                                this.$message.warning(`请选择${this.teacherForm.roleAndDeptList[i].roleName}所属部门`)
+                                return;
+                            } else {
+                                let obj = {
+                                    roleId: this.teacherForm.roleAndDeptList[i].roleId,
+                                    staffArchitectureId: this.teacherForm.roleAndDeptList[i].cascaderValue[0],
+                                    gradeId: this.teacherForm.roleAndDeptList[i].cascaderValue[1]
+                                };
+                                data.roleAndDeptList.push(obj);
+                            }
+                        }
+                    }
+                    this.submiting = true
+                    if (this.teacherForm.accountId) {
+                        this.$post(this.api.modifyStaff, data).then(res => {
+                            this.$message.success("编辑成功");
+                            this.closeTeacher();
+                            this.getData();
+                            this.submiting = false
+                        }).catch(res => {
+                            this.submiting = false
+                        });
+                    } else {
+                        this.$post(this.api.saveStaff, data).then(res => {
+                            this.$message.success("添加成功");
+                            this.closeTeacher();
+                            this.getData();
+                            this.submiting = false
+                        }).catch(res => {
+                            this.submiting = false
+                        });
+                    }
+                } else {
+                    return false;
+                }
+            });
+        },
+        delTeacher(row) {
+            this.$confirm("确定要删除吗？", "提示", {
+                type: "warning"
+            }).then(() => {
+                this.$post(`${this.api.delStaff}?accountIds=${row.accountId}`).then(res => {
+                    this.$message.success("删除成功");
+                    this.getData();
+                }).catch(res => {});
+            }).catch(() => {});
+        },
+        handleSelectionChange(val) {
+            this.multipleSelection = val;
+        },
+        delAllSelection() {
+            if (this.multipleSelection.length) {
+                // 批量删除
+                this.$confirm("确定要删除吗？", "提示", {
+                    type: "warning"
+                }).then(() => {
+                    let ids = this.multipleSelection.map(item => {
+                        return item.accountId;
+                    });
+                    this.$post(`${this.api.delStaff}?accountIds=${ids.toString()}`).then(res => {
+                        this.multipleSelection = [];
+                        this.$refs.table.clearSelection();
+                        this.$message.success("删除成功");
+                        this.getData();
+                    }).catch(res => {
+                    });
+                }).catch(() => {
+                });
+            } else {
+                this.$message.error("请先选择员工 ！");
+            }
+        },
+        batchImport() {
+            this.importVisible = true;
+            this.uploadList = [];
+            this.uploadFaild = false;
+        },
+        searchTeacher() {
+            this.page = 1;
+            this.getData();
+        },
+        handleCurrentChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        downLoad() {
+            location.href = this.api.staffTemplate;
+        },
+        showFaild() {
+            location.href = `${this.api.exportFailureStaff}?exportCode=${this.exportCode}`;
+        },
+        // 上传文件
+        handleExceed(files, fileList) {
+            this.$message.warning(
+                `当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！`
+            );
+        },
+        uploadSuccess(res, file, fileList) {
+            console.log(res);
+            this.uploadFaild = false;
+            if (res.status === 200) {
+                if (res.data.exportCode) {
+                    this.exportCode = res.data.exportCode;
+                    this.uploadFaild = true;
+                }
+                this.$message.success(`上传成功${res.data.successNum}，上传失败${res.data.failureNum}`);
+            } else {
+                res.message ? this.$message.error(res.message) : this.$message.error("上传失败，请检查数据");
+            }
+        },
+        uploadError(err, file, fileList) {
+            this.$message({
+                message: "上传出错，请重试！",
+                type: "error",
+                center: true
+            });
+        },
+        beforeRemove(file, fileList) {
+            return this.$confirm(`确定移除 ${file.name}？`);
+        },
+        handleRemove(file, fileList) {
+            this.uploadList = fileList;
+            this.uploadFaild = false;
+        },
+        uploadSure() {
+            this.importVisible = false;
+            this.page = 1;
+            this.keyword = "";
+            this.getData();
+        }
+    }
+};
+</script>
+<style lang="scss" scoped>
+.wrap {
+    display: flex;
+    padding: 0 24px;
+    .side {
+        width: 300px;
+        padding: 24px 10px 24px 0;
+        margin-right: 24px;
+        border-right: 1px solid rgba(0, 0, 0, 0.06);
+    }
+    .right {
+        width: calc(100% - 374px);
+        padding: 24px;
+    }
+}
+.el-input__inner{
+    height: 32px;
+}
+</style>

src/views/system/staffSide.vue

@@ -0,0 +1,387 @@
+<template>
+    <div>
+        <div>
+            <div class="flex-between m-b-20">
+                <h6 class="p-title" style="margin-bottom: 0">员工组织架构</h6>
+                <el-button type="text" @click="addMajor">添加</el-button>
+            </div>
+            <org-tree
+                :data="orgList"
+                show-checkbox
+                default-expand-all
+                ref="orgTree"
+                node-key="id"
+                highlight-current
+                :expand-on-click-node="false"
+                @node-click="getSingle"
+                @check="getCheck"
+                :props="{children: 'children', label: 'label', isLeaf: 'leaf'}"
+            >
+                <span class="custom-tree-node" slot-scope="{ node, data }">
+                    <span style="display: inline-block; margin-right: 20px">{{ node.label }}</span>
+                    <span>
+                        <el-button
+                            type="text"
+                            icon="el-icon-edit-outline"
+                            @click="() => handleEdit(node, data)">
+                        </el-button>
+                        <el-button
+                            v-if="node.level === 1"
+                            type="text"
+                            icon="el-icon-circle-plus-outline"
+                            @click="() => handleAdd(node, data)">
+                        </el-button>
+                        <el-button
+                            type="text"
+                            icon="el-icon-delete"
+                            @click="() => handleDel(node, data)">
+                        </el-button>
+                    </span>
+                </span>
+            </org-tree>
+        </div>
+
+        <el-dialog :title="Form.staffArchitectureId ? '编辑部门' : '新增部门'" :visible.sync="majorVisible" width="24%" center @close="closeAdd" :close-on-click-modal="false">
+            <el-form ref="Form" :model="Form" :rules="rules">
+                <el-form-item prop="staffArchitectureName">
+                    <el-input placeholder="请输入专业名称" v-model="Form.staffArchitectureName"></el-input>
+                </el-form-item>
+            </el-form>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="majorVisible = false">取 消</el-button>
+                <el-button type="primary" @click="sure('Form')">确 定</el-button>
+            </span>
+        </el-dialog>
+
+        <el-dialog :title="Form.gradeId ? '编辑部门' : '新增部门'" :visible.sync="depVisible" width="24%" center @close="closeAdd" :close-on-click-modal="false">
+            <el-form ref="Form" :model="Form" :rules="rules">
+                <el-form-item prop="gradeName">
+                    <el-input placeholder="请输入部门名称" v-model="Form.gradeName"></el-input>
+                </el-form-item>
+            </el-form>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="depVisible = false">取 消</el-button>
+                <el-button type="primary" @click="sureDepartment('Form')">确 定</el-button>
+            </span>
+        </el-dialog>
+    </div>
+</template>
+<script>
+import OrgTree from "@/components/org-tree/src/tree";
+export default {
+    props: ["Data"],
+    data() {
+        return {
+            orgList: [],
+            firactive: 0,
+            twoactive: 0,
+            majorVisible: false,
+            depVisible: false,
+            Form: {
+                staffArchitectureId: "", // 专业ID
+                staffArchitectureName: "", // // 专业名称
+                gradeId: "",
+                gradeName: ""
+            },
+            rules: {
+                staffArchitectureName: [
+                    { required: true, message: "请输入专业名称", trigger: "blur" }
+                ],
+                gradeName: [
+                    { required: true, message: "请输入部门名称", trigger: "blur" }
+                ]
+            },
+            staffstateProfessId: "",
+            staffstateId: "",
+        };
+    },
+    components: {
+        OrgTree
+    },
+    mounted() {
+        // this.getStaff()
+    },
+    methods: {
+        getStaff() {
+            this.$get(this.api.professionalList).then(res => {
+                if (res.data && res.data.length) {
+                    res.data.map(e => {
+                        (e.ifVisible = false), (e.ischeck = false), (e.label = e.staffArchitectureName), (e.id = e.staffArchitectureId);
+                        let data = {
+                            staffArchitectureId: e.staffArchitectureId
+                        }
+                        this.$get(this.api.staffGradeList, data).then(res => {
+                            res.data.map(e => {
+                                (e.ischeck = false), (e.label = e.gradeName), (e.id = e.gradeId)
+                            })
+                            e.children = res.data
+                        }).catch(res => {})
+                    });
+                }
+                setTimeout(() => {
+                    this.orgList = res.data;
+                }, 500)
+            }).catch(res => {})
+        },
+        closeAdd() {
+            this.$refs.Form.resetFields()
+        },
+        getSingle(data) {
+            this.$emit('getSingle', data)
+        },
+        getCheck(data, checked) {
+            this.$emit('getCheck', checked.checkedNodes)
+        },
+        // 新增编辑专业
+        addMajor() {
+            this.Form.staffArchitectureId = ''
+            this.Form.staffArchitectureName = ''
+            this.majorVisible = true
+        },
+        sure(Form) { // 提交新增/修改专业
+            this.$refs[Form].validate((valid) => {
+                if (valid) {
+                    let data = {
+                        staffArchitectureName: this.Form.staffArchitectureName,
+                        staffArchitectureId: this.Form.staffArchitectureId,
+                        isDel: 0 // 是否删除(0、未删除 1、已删除)
+                    };
+                    if (this.Form.staffArchitectureId) {
+                        this.$post(this.api.updateProfessional, data).then(res => {
+                            this.$message.success("编辑成功");
+                            this.majorVisible = false;
+                            this.orgList.map(e => {
+                                if (e.staffArchitectureId == this.Form.staffArchitectureId) {
+                                    e.staffArchitectureName = this.Form.staffArchitectureName;
+                                    e.label = this.Form.staffArchitectureName;
+                                }
+                            });
+                            this.$emit("getData");
+                        }).catch(res => {
+                        });
+                    } else {
+                        this.$post(this.api.saveProfessional, data).then(res => {
+                            this.$message.success("添加成功");
+                            this.majorVisible = false;
+                            let newData = {
+                                staffArchitectureId: res.staffArchitectureId,
+                                staffArchitectureName: this.Form.staffArchitectureName,
+                                label: this.Form.staffArchitectureName,
+                                value: res.staffArchitectureId,
+                                ifVisible: false,
+                                ischeck: false,
+                                children: []
+                            };
+                            this.orgList.push(newData);
+                        }).catch(res => {
+                        });
+                    }
+                } else {
+                    return false;
+                }
+            });
+        },
+        handleAdd(node, data) { // 添加部门
+            this.Form.gradeId = ''
+            this.Form.gradeName = ''
+            this.depVisible = true
+            this.Form.staffArchitectureId = data.staffArchitectureId
+        },
+        handleEdit(node, data) { // 编辑部门
+            if (node.level === 1) {
+                this.Form.staffArchitectureId = data.staffArchitectureId
+                this.Form.staffArchitectureName = data.staffArchitectureName
+                this.majorVisible = true
+            } else {
+                this.Form.gradeId = data.gradeId
+                this.Form.gradeName = data.gradeName
+                this.depVisible = true
+            }
+            for (let j = 0; j < this.orgList.length; j++) {
+                for (let k = 0; k < this.orgList[j].children.length; k++) {
+                    if (this.orgList[j].children[k].gradeName == data.gradeName) {
+                        this.Form.staffArchitectureId = this.orgList[j].staffArchitectureId;
+                    }
+                }
+            }
+        },
+        sureDepartment(Form) { // 提交新增编辑部门
+            this.$refs[Form].validate((valid) => {
+                if (valid) {
+                    let data = {
+                        gradeId: this.Form.gradeId,
+                        gradeName: this.Form.gradeName,
+                        staffArchitectureId: this.Form.staffArchitectureId
+                    };
+                    if (this.Form.gradeId) {
+                        this.$post(this.api.updateGrade, data).then(res => {
+                            this.$message.success("编辑成功");
+                            this.depVisible = false;
+                            this.orgList.map(e => {
+                                e.children.map(r => {
+                                    if (r.gradeId == this.Form.gradeId) {
+                                        r.gradeName = this.Form.gradeName;
+                                        r.label = this.Form.gradeName;
+                                    }
+                                });
+                            });
+                        }).catch(res => {
+                        });
+                    } else {
+                        this.$post(this.api.saveGrade, data).then(res => {
+                            this.$message.success("添加成功");
+                            this.depVisible = false;
+                            let newData = {
+                                gradeId: res.gradeId,
+                                gradeName: this.Form.gradeName,
+                                label: this.Form.gradeName,
+                                value: res.gradeId,
+                                ifVisible: false,
+                                ischeck: false
+                            };
+                            this.orgList.map(e => {
+                                if (e.staffArchitectureId == this.Form.staffArchitectureId) {
+                                    e.ifVisible = true;
+                                    e.children.push(newData);
+                                }
+                            });
+                        }).catch(res => {
+                        });
+                    }
+                } else {
+                    return false;
+                }
+            });
+        },
+        handleDel(node, data) {
+            node.level === 1 ? this.delMajor(data) : this.delDepartment(data)
+        },
+        delMajor(item) {
+            this.$confirm("确定要删除该专业吗？该操作将会删除该组织下的用户账号。", "提示", {
+                type: "warning"
+            }).then(() => {
+                this.$post(`${this.api.deleteProfessional}?staffArchitectureId=${item.staffArchitectureId}`).then(res => {
+                    this.$message.success("删除成功")
+                    this.$emit("getData")
+                    this.getStaff()
+                }).catch(res => {})
+            }).catch(() => {})
+        },
+        delDepartment(item) {
+            this.$confirm("确定要删除该部门吗？该操作将会删除该组织下的用户账号。", "提示", {
+                type: "warning"
+            }).then(() => {
+                this.$post(`${this.api.deleteGrade}?gradeId=${item.gradeId}`).then(res => {
+                    this.$message.success("删除成功")
+                    this.getStaff()
+                    this.$emit("delDep", item, this.orgList)
+                    this.$emit("getData")
+                }).catch(res => {})
+            }).catch(() => {})
+        }
+    }
+};
+</script>
+<style scoped>
+.side_view {
+    height: 800px;
+    padding: 40px 20px;
+    background-color: #fff;
+}
+
+.side_icon {
+    text-align: right;
+}
+
+.side_icon i {
+    cursor: pointer;
+    font-size: 20px;
+    color: #9278FF;
+}
+
+.side_tree {
+    width: 100%;
+    font-size: 14px;
+    color: #333;
+}
+
+.side_tree i {
+    color: #9278FF;
+    margin-left: 10px;
+}
+
+.fir_back {
+    width: 100%;
+    padding: 15px 0;
+    background: rgba(255, 255, 255, 1);
+    /* box-shadow:1px 14px 29px 0px rgba(138,97,250,0.19); */
+    border-radius: 10px;
+    text-align: left;
+}
+
+.fir_back:first-child {
+    margin-top: 20px;
+}
+
+.fir_back:hover {
+    box-shadow: 1px 14px 29px 0px rgba(138, 97, 250, 0.19);
+    cursor: pointer;
+}
+
+.fir_back span {
+    margin-left: 10px;
+}
+
+.two_active {
+    color: #9278FF;
+}
+
+/* .two_active:hover{
+    color: #9278FF;
+    cursor:pointer;
+} */
+.two_back:hover {
+    cursor: pointer;
+    color: #9278FF;
+}
+
+.mar_top {
+    margin-top: 20px;
+}
+
+.back_active {
+    box-shadow: 1px 14px 29px 0px rgba(138, 97, 250, 0.19);
+}
+
+.bor_lef {
+    padding: 20px 0 0 0;
+    margin-left: 40px;
+}
+
+.three_lef {
+    margin-left: 60px;
+    padding: 20px 0;
+}
+
+.three_text {
+    font-size: 14px;
+    margin-top: 10px;
+}
+
+.teacher_tab {
+    margin-left: 20px;
+}
+
+.icon_select:before {
+    transform: rotate(180deg);
+}
+
+.list-enter-active, .list-leave-active {
+    transition: all 1s;
+}
+
+.list-enter, .list-leave-to {
+    opacity: 0;
+    transform: translateY(-30px);
+}
+</style>