From 2d7cbc4d9d78ce4054c34bea0b80a8f5739a57c3 Mon Sep 17 00:00:00 2001
From: xiayuping666 <1269237624@qq.com>
Date: Thu, 18 Apr 2024 17:15:06 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=92=E8=89=B2=E7=AE=A1=E7=90=86=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/admin.js                          |   4 +-
 src/views/department/api.js              |  33 ++
 src/views/department/index.vue           | 235 +++++++++++--
 src/views/login/index.vue                |   5 +-
 src/views/rolePermissions/api.js         |  61 ++--
 src/views/rolePermissions/index copy.vue | 264 +++++++++++++++
 src/views/rolePermissions/index.vue      | 400 ++++++++++-------------
 7 files changed, 733 insertions(+), 269 deletions(-)
 create mode 100644 src/views/rolePermissions/index copy.vue

diff --git a/public/admin.js b/public/admin.js
index aa88ad6..02724e0 100644
--- a/public/admin.js
+++ b/public/admin.js
@@ -659,7 +659,9 @@ export default  {
 				"roles": ["admin", "common"],
 				"icon": "el-icon-collection"
 			}
-		}
+		},
+		
+		
 		
 	]
 }
diff --git a/src/views/department/api.js b/src/views/department/api.js
index 18521dd..68131f6 100644
--- a/src/views/department/api.js
+++ b/src/views/department/api.js
@@ -41,6 +41,39 @@ export function deleteDept  (id) {
         }
     })
 }
+// 获取所有的用户
+export function getallUser  (params) {
+    return request({
+        url: `/manager/user/list`,
+        method: 'get',
+        params
+    })
+}
+// 添加部门用户
+export function postDeptUser  (data) {
+    return request({
+        url: `/manager/dept/user`,
+        method: 'post',
+        data
+    })
+}
+// 添加部门用户
+export function deleteDeptUser  (data) {
+    return request({
+        url: `/manager/dept/user`,
+        method: 'DELETE',
+        data
+    })
+}
+
+// 修改部门用户迁移到其他部门
+export function putDeptUser  (data) {
+    return request({
+        url: `/manager/dept/user`,
+        method: 'put',
+        data
+    })
+}
 
 
 
diff --git a/src/views/department/index.vue b/src/views/department/index.vue
index c784743..d48c56f 100644
--- a/src/views/department/index.vue
+++ b/src/views/department/index.vue
@@ -7,9 +7,9 @@
           ref="areaTrees"
           :default-expanded-keys="defaultCheckedKeys"
           :default-checked-keys="defaultCheckedKeys"
-         accordion
-        :highlight-current="true"
-        :props="defaultProps" @node-click="handleNodeClick"
+          accordion
+          :highlight-current="true"
+          :props="defaultProps" @node-click="handleNodeClick"
         ></el-tree>
         <div class="add-box">
           <div class="add-list">
@@ -30,11 +30,10 @@
         </el-card>
         <el-card shadow="hover" style=" margin-top: 20px;" >
           <div style="margin-bottom: 10px;">
-            <el-button type="primary">添加人员</el-button>
-
+            <el-button @click="onClickAddUser" v-if="deptData.name" type="primary">添加人员</el-button>
           </div>
           <el-table
-            :data="userArr"
+            :data="deptUserArr"
             :row-style="{ height: '50px' }"
             border
             >
@@ -51,11 +50,34 @@
                 <img  :src="scope.row.avatar" alt="" style="width: 100px; height: 100px;">
               </template>
             </el-table-column>
-            <el-table-column label="权限" prop="roleName"></el-table-column>
-
-
+            <el-table-column label="角色" prop="roleName"></el-table-column>
+            <el-table-column label="操作" prop="avatar">
+              <template slot-scope="scope">
+                <el-button
+                  @click="onClickTransfer(scope.row)"
+                  slot="reference"
+                  style="margin-left: 10px; color: #409eff"
+                  class="el-icon-back"
+                  type="text"
+                  size="small"
+                  >转移人员
+                </el-button>
+                <el-popconfirm
+                  @confirm="onClickDelete(scope.row)"
+                  :title="'确定要删除吗？'"
+                >
+                  <el-button
+                    slot="reference"
+                    style="margin-left: 10px; color: red"
+                    class="el-icon-delete"
+                    type="text"
+                    size="small"
+                    >删除</el-button
+                  >
+                </el-popconfirm>
+              </template>
+            </el-table-column>
           </el-table> 
-
         </el-card>
         <!-- <Pagination
           :total="total"
@@ -79,8 +101,8 @@
 
         </el-form-item>
         <el-form-item v-if="resource === 2" label="上级部门" prop="parentId">
-          <Treeselect v-model="deptForm.parentId" :options="deptArr" :normalizer="normalizer" placeholder="选择上级部门" />
-          </el-form-item>
+          <Treeselect v-model="deptForm.parentId" :options="deptArr" :normalizer="normalizer" placeholder="选择上级部门"  />
+        </el-form-item>
         <el-form-item  label="部门名称">
           <el-input v-model="deptForm.name" placeholder="请输入部门名称"></el-input>
         </el-form-item>
@@ -114,16 +136,87 @@
         <el-button type="primary" @click="onClickAffirmUpdate">确 定</el-button>
       </span>
     </el-dialog>
+    <!-- 人员添加模态框 -->
+    <el-dialog  title="人员添加"
+      :visible.sync="isAddUserDialog"
+      width="60%">
+        <el-row :gutter="35"> 
+          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" class="mb20">
+            <div style="display: flex;">
+              <div style="width: 50px; line-height: 28px; font-weight: 600;">搜索</div>
+              <el-input v-model="userQuery.condition" placeholder="请输入用户名或手机号搜索"  class="input-with-select">
+                <el-button @click="onClickSearch" slot="append" icon="el-icon-search"></el-button>
+              </el-input>
+            </div>
+          </el-col>
+        </el-row>
+      <el-table
+        ref="multipleTable"
+        :data="allUserArr"
+        :row-key="getRowKeys"
+        tooltip-effect="dark"
+        style="width: 100%"
+        @selection-change="handleSelectionChange">
+        <el-table-column
+          :reserve-selection="true"
+          type="selection"
+          width="55">
+        </el-table-column>
+        <el-table-column label="照片" prop="faceImg">
+              <template slot-scope="scope">
+                <img  :src="scope.row.faceImg" alt="" style="width: 100px; height: 100px;">
+              </template>
+            </el-table-column>
+            <el-table-column label="姓名" prop="name"></el-table-column>
+            <el-table-column label="性别" prop="gender"></el-table-column>
+            <el-table-column label="手机号" prop="mobile"></el-table-column>
+            <el-table-column label="头像" prop="avatar">
+              <template slot-scope="scope">
+                <img  :src="scope.row.avatar" alt="" style="width: 100px; height: 100px;">
+              </template>
+            </el-table-column>
+      </el-table>
+      <Pagination
+          :total="userTotal"
+          :pageNum="userQuery.current"
+          :pageSize="userQuery.size"
+          @clickCurrent="onClickCurrent"
+          @clickSize="onClickSize"
+        />
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="isAddUserDialog = false">取 消</el-button>
+        <el-button type="primary" @click="onClickAffirmAddUser">确定添加</el-button>
+      </span>
+    </el-dialog>
+    <!-- 人员添加模态框 -->
+    <el-dialog  title="部门人员转移"
+      :visible.sync="isTransferDialog"
+      width="30%">
+      <el-form ref="transferForm" :model="deptForm" label-width="80px">
+        <el-form-item  label="当前部门" prop="newDeptId">
+          <el-input v-model="deptData.name" disabled />
+        </el-form-item>
+        <el-form-item  label="新部门" prop="newDeptId">
+          <Treeselect v-model="transferForm.newDeptId" :options="deptArr" :normalizer="normalizer" placeholder="选择上级部门" />
+        </el-form-item>
+        <div style="margin-top: 100px;"></div>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="isTransferDialog = false">取 消</el-button>
+        <el-button type="primary" @click="onClickAffirmTransferUser">确定转移</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import columns from "./columns";
-import { getDept, getDeptUser, postDept, putDept, deleteDept } from "./api";
+import { getDept, getDeptUser, postDept, putDept, deleteDept, getallUser, postDeptUser, deleteDeptUser, putDeptUser } from "./api";
 import { formatDate } from "@/com/index";
 import CommonHead from './components/CommonHead.vue'
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+
 const errorMessages = {
   name: '请输入部门名称',
   sort: '请输入排序',
@@ -145,7 +238,7 @@ export default {
       },
      
       deptArr: [], // 校区班级列表
-      userArr: [],// 学生列表
+      deptUserArr: [],// 部门用户列表
       defaultCheckedKeys: [],
       isAddDialog: false, // 新增弹框
       isUpdateDialog: false, // 修改弹框
@@ -160,7 +253,21 @@ export default {
         sort: '',
         deptId: null, // 部门id
       }, // 修改部门表单
-      resource: 1
+      resource: 1, // 是否是一级部门
+
+      isAddUserDialog: false, // 添加用户模态框
+      allUserArr: [], // 所有用户列表
+      userTotal: 0,
+      userQuery: { // 获取所有用户参数
+        current: 1,
+        size: 10,
+        condition: null, // 可以是用户名或手机号
+      },
+      multipleSelection: '', // 选中的用户
+      isTransferDialog: false, // 转移用户模态框
+      transferForm: { 
+        newDeptId: null,
+      }, // 转移部门的模态框
     };
   },
   components: {
@@ -170,11 +277,79 @@ export default {
   },
   async created() {
     this.deptList()
+    this.allUserList()
+    
   },
   mounted () {
   },
   methods: {
-    
+    // 点击确定转移用户部门
+    onClickAffirmTransferUser() {
+      if(this.transferForm.newDeptId){
+        putDeptUser(this.transferForm).then( res =>{
+          this.$message.success('转移成功')
+          this.isTransferDialog = false
+          this.deptUserList(this.deptData.deptId)
+        })
+      }else {
+        this.$message.error('请选择新部门')
+      }
+      // this.isTransferDialog = false
+      console.log(this.transferForm)
+    },
+    // 点击转移用户
+    onClickTransfer(row) {
+      this.transferForm = { 
+        newDeptId: null,
+        deptId: this.deptData.deptId,
+        userid: row.userid
+      }, // 转移部门的模态框
+      this.isTransferDialog = true
+    },
+    // 点击删除
+    onClickDelete(row) {
+      console.log(row)
+      let obj = { userid: row.userid, deptId: this.deptData.deptId }
+      deleteDeptUser(obj).then( res =>{
+        this.$message.success('删除成功')
+        this.deptUserList(this.deptData.deptId)
+      })
+    },
+    // 点击搜索
+    onClickSearch() {
+      this.userQuery.current = 1
+      this.userQuery.size = 10 
+      this.allUserList() 
+    },
+    // 点击添加用户
+    onClickAddUser() {
+      this.isAddUserDialog = true; 
+      if(this.multipleSelection.length){
+        this.$refs.multipleTable.clearSelection();
+        this.multipleSelection = []
+      }
+    },
+    onClickAffirmAddUser() {
+      if(this.multipleSelection.length){
+        let arr = []
+        this.multipleSelection.forEach(item => {
+          arr.push(item.userid)
+        })
+        let obj = { deptId: this.deptData.deptId, userIds: arr}
+        // console.log(obj)
+        postDeptUser(obj).then( res =>{
+          this.$message.success('添加成功')
+          this.isAddUserDialog = false
+          this.deptUserList(this.deptData.deptId)
+        })
+      }else{
+        this.$message.error('请勾选需要添加的人员')
+      }
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+      console.log(val)
+    },
     normalizer(node) {
       if (node.childrenList && !node.childrenList.length) {
         return { id: node.deptId,  label: node.name,  };
@@ -194,14 +369,21 @@ export default {
       getDept().then( res =>{
         this.deptData.deptId ? this.defaultCheckedKeys = [this.deptData.deptId] : ''
         this.deptArr = res
-        let arr = this.deptArr .flat(Infinity); 
+        let arr = this.deptArr.flat(Infinity); 
         console.log(arr)
       })
     },
     // 获取部门用户列表
     deptUserList(deptId){
       getDeptUser(deptId, this.query).then( res =>{
-        this.userArr = res
+        this.deptUserArr = res
+      })
+    },
+    // 获取所有用户列表 用于添加部门人员
+    allUserList() {
+      getallUser(this.userQuery).then(res =>{
+        this.allUserArr = res.records
+        this.userTotal = res.total
       })
     },
     // 点击确定修改
@@ -270,6 +452,16 @@ export default {
           this.$message({ type: 'info',  message: '已取消删除' });          
         });
     },
+    // 点击切换页数
+    onClickCurrent(val) {
+      this.userQuery.current = val;
+      this.allUserList();
+    },
+    // 点击了每页页数
+    onClickSize(val) {
+      this.userQuery.size = val;
+      this.allUserList();
+    },
     onChangeRadio() {
       this.resetDeptForm()
     },
@@ -286,7 +478,12 @@ export default {
         sort: '',
         deptId: null,
       }
-    }
+    },
+     // 设置节点id
+     getRowKeys(row) {
+      return row.userid
+    },
+
     
     
   },
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index dc9f3c1..a39f693 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -174,12 +174,13 @@ export default {
     },
     // 登录按钮点击
     submitForm() {
-      this.submit.loading = true;
       this.$router.push('/evaluate')
       console.log(this.$router)
 
       if( rulesPhone(this.loginForm.phone) ){ // 判断是否存在手机号验证码
         if(this.loginForm.code){
+          this.submit.loading = true;
+
           // 登录发请求获取用户信息
             let obj = {...this.$store.state.loginConfig.loginConfig, ...this.loginForm}
             let formData = new FormData()
@@ -209,6 +210,8 @@ export default {
               this.submit.loading = false;
               this.sendText = '发送'
             })
+        }else{
+          this.$message.error('请输入验证码！')
         }
       }else {
         this.$message.error('请输入正确的手机号！')
diff --git a/src/views/rolePermissions/api.js b/src/views/rolePermissions/api.js
index 99f4af1..9f383e9 100644
--- a/src/views/rolePermissions/api.js
+++ b/src/views/rolePermissions/api.js
@@ -1,30 +1,37 @@
 import request from '@/utils/request';
 
 
-
-// 修改获取增加权限
-export const    rqModifyOrAddPermissions = (data) => request({
-	url: `/user-dept/user/roleAuthority`,
-    method: 'post',
-    data
-})
-
-
-
-
-// 获取角色列表
-export const  rqGetRoleList = (groupId=-1) => request({
-	url: `/user-dept/user/role/${groupId}`,
-    method: 'get',
-})
-// 获取权限列表
-export const  rqGetPermissionList = (parentId=0) => request({
-	url: `/user-dept/user/authority/list/${parentId}`,
-    method: 'get',
-})
-
-// 根据id查询它有那些权限
-export const  rqQueryPermission= (id) => request({
-	url: `/user-dept/user/authority/${id}`,
-    method: 'get',
-})
\ No newline at end of file
+// 查询角色列表
+export function getRole  (params) {
+    return request({
+        url: '/manager/role/list',
+        method: 'get',
+        params
+    })
+}
+// 添加角色
+export function postRole  (data) {
+    return request({
+        url: '/manager/role',
+        method: 'post',
+        data
+    })
+}
+// 修改角色
+export function putRole  (data) {
+    return request({
+        url: '/manager/role',
+        method: 'put',
+        data
+    })
+}
+// 删除角色
+export function deleteRole  (id) {
+    return request({
+        url: '/manager/role',
+        method: 'DELETE',
+        params: {
+            id
+        }
+    })
+}
diff --git a/src/views/rolePermissions/index copy.vue b/src/views/rolePermissions/index copy.vue
new file mode 100644
index 0000000..c61e63c
--- /dev/null
+++ b/src/views/rolePermissions/index copy.vue	
@@ -0,0 +1,264 @@
+<template>
+  <div>
+    <div>
+      <!-- 搜索 -->
+      <div class="form-adapt-container">
+        <el-card shadow="hover">
+          <CommonHead
+            @search-data="searchForm"
+            @reset-data="reset"
+            @newly-data="add"
+          ></CommonHead>
+          <!-- newly-data删除所选事件 -->
+          <!-- reset-data重置表单内容 -->
+          <!-- search-data搜索事件，接收被搜索的内容 -->
+          <el-form>
+            <el-form-item label="角色范围" style="margin-top: 10px">
+              <el-select
+                size="mini"
+                v-model="firstLevelRoleid"
+                placeholder="请选择所属范围"
+              >
+                <el-option
+                  v-for="(item, index) in firstLevelRoleList"
+                  :label="item.name"
+                  :key="index"
+                  :value="item.id"
+                  @click.native="queryRoleList(item.id)"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-form>
+        </el-card>
+
+        <CommonTables
+          v-loading="loading"
+          :delete-func="deleteData"
+          :edit-func="editData"
+          :columns="columns"
+          :data="RoleList"
+        ></CommonTables>
+
+        <!-- <Pagination
+          :total="total"
+          :pageNum="query.pageNum"
+          :pageSize="query.pageSize"
+          @clickCurrent="onClickCurrent"
+          @clickSize="onClickSize"
+        /> -->
+      </div>
+    </div>
+    <!-- 对话框 -->
+    <el-dialog
+      title="设置权限"
+      :visible.sync="dialogVisible"
+      width="30%"
+      :before-close="handleClose"
+    >
+      <el-tree
+        ref="treeOne"
+        :data="LevelPermissionList"
+        show-checkbox
+        node-key="id"
+        :props="defaultProps"
+      >
+      </el-tree>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
+        <el-button type="primary" @click="confirmSettingRules" size="mini"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import columns from "./columns";
+import {
+  rqGetRoleList,
+  rqGetPermissionList,
+  rqQueryPermission,
+  rqModifyOrAddPermissions,
+} from "./api";
+
+export default {
+  name: "rolePermissions",
+  data() {
+    return {
+      columns,
+      total: 0,
+      query: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      loading: false,
+      ruleList: [],
+      dialogVisible: false,
+
+      // 一级角色列表
+      firstLevelRoleList: [],
+      // 一级id
+      firstLevelRoleid: "默认",
+      //操作角色列表
+      RoleList: [],
+      // 一级权限列表
+      LevelPermissionList: [],
+      // 一级id
+      firstLevelPermission: "",
+      defaultProps: {
+        children: "authorities",
+        label: "alias",
+      },
+      // 角色的id
+      formRC: {
+        roleid: "",
+        // 点击已经选中的id集合
+        authorityids: [],
+      },
+      // 进来已经选择的
+      selectedByDefault: [],
+    };
+  },
+  created() {
+    this.getRoleList();
+    this.getPermissionList();
+    this.queryRoleList(592539677);
+  },
+  methods: {
+    // 搜索按钮
+    searchForm() {
+      this.$message("正在搜索");
+    },
+    // 重置按钮
+    reset() {
+      this.bus.$emit("onCurrentContextmenuClick", {
+        id: 0,
+        path: this.$route.path,
+      });
+    },
+    // 添加
+    add() {
+      this.$message("角色新增请联系钉钉后台管理员");
+    },
+    // 删除
+    async deleteData(row) {
+      this.$message("该角色暂时无法删除");
+    },
+    // 编辑
+    async editData(item) {
+      this.formRC.roleid = item.id;
+      this.dialogVisible = true;
+      console.log(item);
+      let res = await rqQueryPermission(item.id);
+      if (res.code == 200) {
+        let arr = res.data.map((item, index) => {
+          return item.id;
+        });
+        this.selectedByDefault = arr;
+        this.$refs.treeOne.setCheckedKeys(arr);
+      } else {
+        this.$message.error("网络错误");
+      }
+    },
+    // 点击切换页数
+    onClickCurrent(val) {
+      this.query.pageNum = val;
+      this.getAttendanceFormData();
+    },
+    // 点击了每页页数
+    onClickSize(val) {
+      this.query.pageSize = val;
+      this.getAttendanceFormData();
+    },
+    handleClose(done) {
+      this.$confirm("确认关闭？")
+        .then((_) => {
+          done();
+        })
+        .catch((_) => {});
+    },
+    // 获取角色列表分类
+    async getRoleList() {
+      try {
+        this.loading = true;
+        // let result = await rqGetRuleList(this.query.pageNum, this.query.pageSize);//做了分页
+        let result = await rqGetRoleList();
+        if (result.code == 200) {
+          this.loading = false;
+          this.firstLevelRoleList = result.data;
+          // this.total = result.data.total;
+        } else {
+          this.loading = false;
+          this.$message.error("服务器错误");
+        }
+      } catch (error) {
+        this.loading = false;
+        this.$message.error("网络错误");
+      }
+    },
+    // 查询角色列表
+    async queryRoleList(id) {
+      try {
+        this.loading = true;
+        // let result = await rqGetRuleList(this.query.pageNum, this.query.pageSize);//做了分页
+        let result = await rqGetRoleList(id);
+        if (result.code == 200) {
+          this.loading = false;
+          this.RoleList = result.data;
+          // this.total = result.data.total;
+        } else {
+          this.loading = false;
+          this.$message.error("网络错误");
+        }
+      } catch (error) {
+        this.loading = false;
+        this.$message.error("网络错误");
+      }
+    },
+    // 获取权限列表
+    async getPermissionList() {
+      console.log(111);
+      try {
+        this.loading = true;
+        // let result = await rqGetRuleList(this.query.pageNum, this.query.pageSize);//做了分页
+        let result = await rqGetPermissionList();
+        if (result.code == 200) {
+          this.loading = false;
+          this.LevelPermissionList = result.data;
+          // this.total = result.data.total;
+        } else {
+          this.loading = false;
+          this.$message.error("服务器错误");
+        }
+      } catch (error) {
+        this.loading = false;
+        this.$message.error("网络错误");
+      }
+    },
+
+    // 确认新增或者修改按钮
+    async confirmSettingRules() {
+      const treeInstance = this.$refs.treeOne;
+      // 调用 getCheckedNodes 方法获取已勾选的节点数组
+      const checkedNodes = treeInstance.getCheckedNodes();
+      console.log(checkedNodes);
+      let arr = checkedNodes.map((ion, index) => {
+        return ion.id;
+      });
+      this.formRC.authorityids = arr;
+      let res = await rqModifyOrAddPermissions(this.formRC);
+      if (res.code == 200) {
+        this.$message.success("设置成功");
+        this.dialogVisible = false;
+      } else {
+        this.dialogVisible = false;
+        this.$message.success("服务器错误");
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/rolePermissions/index.vue b/src/views/rolePermissions/index.vue
index c61e63c..f8f1fd9 100644
--- a/src/views/rolePermissions/index.vue
+++ b/src/views/rolePermissions/index.vue
@@ -1,74 +1,126 @@
 <template>
   <div>
-    <div>
-      <!-- 搜索 -->
-      <div class="form-adapt-container">
-        <el-card shadow="hover">
-          <CommonHead
-            @search-data="searchForm"
-            @reset-data="reset"
-            @newly-data="add"
-          ></CommonHead>
-          <!-- newly-data删除所选事件 -->
-          <!-- reset-data重置表单内容 -->
-          <!-- search-data搜索事件，接收被搜索的内容 -->
-          <el-form>
-            <el-form-item label="角色范围" style="margin-top: 10px">
-              <el-select
-                size="mini"
-                v-model="firstLevelRoleid"
-                placeholder="请选择所属范围"
+    <el-card shadow="hover">
+      <!-- <h4>{{ classData.name}}</h4> -->
+      <div style="display: flex;">
+        <el-button @click="isAddDialog = true; resetForm()"  size="mini" type="primary" class="el-icon-plus">新增角色</el-button>
+
+        <!-- <el-button @click="isAddDialog = true"  slot="reference" style="margin-left: 10px;" class="el-icon-plus"  type="text" size="small"  >新增</el-button>  -->
+        <!-- <div  style="margin-right: 10px; font-size: 16px; line-height: 27px; font-weight: 700;">{{ deptData.name }}</div> -->
+        <!-- <div  v-else style="margin-right: 10px; font-size: 16px;  line-height: 27px;font-weight: 700;">{{ classData.name}}</div> -->
+        <!-- <el-button @click="onClickUpdate" v-if="deptData.name" size="mini" type="warning" class="el-icon-edit">修改角色</el-button>
+        <el-button @click="onClickRemove"  v-if="deptData.name" size="mini" type="danger" class="el-icon-delete">删除</el-button> -->
+      </div>
+    </el-card>
+    <el-card shadow="hover" style=" margin-top: 20px;" >
+      <el-table
+        :data="roleArr"
+        row-key="id"
+        :tree-props="{ children: 'childrenList'}"
+        :row-style="{ height: '50px' }"
+        border
+        >
+          <el-table-column label="角色名" prop="name"></el-table-column>
+          <el-table-column label="创建时间" prop="createTime"></el-table-column> 
+          <el-table-column label="排序" prop="sort"></el-table-column>
+          <el-table-column label="操作" prop="avatar">
+            <template slot-scope="scope">
+              <el-button
+                @click="resetForm();isAddDialog = true; roleForm.groupId = scope.row.id;"
+                v-if="scope.row.groupId == -1"
+                slot="reference"
+                style="margin-left: 10px;"
+                class="el-icon-plus"
+                type="text"
+                size="small"
+                >新增</el-button>
+                <el-button
+                @click="resetForm(); roleForm = { ...scope.row }; ;isUpdateDialog = true;"
+                slot="reference"
+                style="margin-left: 10px;"
+                class="el-icon-edit"
+                type="text"
+                size="small"
+              >修改</el-button>   
+              <el-popconfirm
+                @confirm="onClickDelete(scope.row)"
+                :title="'确定要删除吗？'"
               >
-                <el-option
-                  v-for="(item, index) in firstLevelRoleList"
-                  :label="item.name"
-                  :key="index"
-                  :value="item.id"
-                  @click.native="queryRoleList(item.id)"
-                ></el-option>
-              </el-select>
-            </el-form-item>
-          </el-form>
-        </el-card>
-
-        <CommonTables
-          v-loading="loading"
-          :delete-func="deleteData"
-          :edit-func="editData"
-          :columns="columns"
-          :data="RoleList"
-        ></CommonTables>
-
+                <el-button
+                  slot="reference"
+                  style="margin-left: 10px; color: red"
+                  class="el-icon-delete"
+                  type="text"
+                  size="small"
+                  >删除</el-button
+                >
+              </el-popconfirm>
+            </template>
+          </el-table-column>
+      </el-table> 
+    </el-card>
         <!-- <Pagination
           :total="total"
-          :pageNum="query.pageNum"
-          :pageSize="query.pageSize"
+          :pageNum="query.current"
+          :pageSize="query.size"
           @clickCurrent="onClickCurrent"
           @clickSize="onClickSize"
         /> -->
-      </div>
-    </div>
-    <!-- 对话框 -->
+  
+    <!-- 新增角色 -->
     <el-dialog
-      title="设置权限"
-      :visible.sync="dialogVisible"
-      width="30%"
-      :before-close="handleClose"
-    >
-      <el-tree
-        ref="treeOne"
-        :data="LevelPermissionList"
-        show-checkbox
-        node-key="id"
-        :props="defaultProps"
-      >
-      </el-tree>
-
+      title="新增角色"
+      :visible.sync="isAddDialog"
+      width="30%">
+      <el-form ref="roleForm" :model="roleForm" label-width="80px">
+        <el-form-item v-if="roleForm.groupId"  label="上级角色" prop="groupId" >
+          <el-select v-model="roleForm.groupId" disabled>
+            <el-option
+              v-for="item in roleArr"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item  label="角色名称">
+          <el-input v-model="roleForm.name" placeholder="请输入角色名称"></el-input>
+        </el-form-item>
+        <el-form-item  label="排序">
+          <el-input v-model="roleForm.sort" type="number" placeholder="数值越小越靠前" ></el-input>
+        </el-form-item>
+      </el-form>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
-        <el-button type="primary" @click="confirmSettingRules" size="mini"
-          >确 定</el-button
-        >
+        <el-button @click="isAddDialog = false">取 消</el-button>
+        <el-button type="primary" @click="onClickAffirm">确 定</el-button>
+      </span>
+    </el-dialog>
+    <!-- 修改角色 -->
+    <el-dialog
+      title="修改角色"
+      :visible.sync="isUpdateDialog"
+      width="30%">
+      <el-form ref="roleForm" :model="roleForm" label-width="80px">
+        <!-- <el-form-item v-if="roleForm.groupId"  label="上级角色" prop="groupId" >
+          <el-select v-model="roleForm.groupId" disabled>
+            <el-option
+              v-for="item in roleArr"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item> -->
+        <el-form-item  label="角色名称">
+          <el-input v-model="roleForm.name" placeholder="请输入角色名称"></el-input>
+        </el-form-item>
+        <el-form-item  label="排序">
+          <el-input v-model="roleForm.sort" type="number" placeholder="数值越小越靠前" ></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="isAddDialog = false">取 消</el-button>
+        <el-button type="primary" @click="onClickUpdateAffirm">确 定</el-button>
       </span>
     </el-dialog>
   </div>
@@ -76,187 +128,93 @@
 
 <script>
 import columns from "./columns";
-import {
-  rqGetRoleList,
-  rqGetPermissionList,
-  rqQueryPermission,
-  rqModifyOrAddPermissions,
-} from "./api";
+import { getRole, postRole, putRole, deleteRole} from "./api";
 
+const errorMessages = {
+  name: '请输入角色名称',
+  sort: '请输入排序',
+};
 export default {
   name: "rolePermissions",
   data() {
     return {
-      columns,
       total: 0,
       query: {
-        pageNum: 1,
-        pageSize: 10,
+        current: 1,
+        size: 10,
+        groupId: -1
       },
-      loading: false,
-      ruleList: [],
-      dialogVisible: false,
+      roleArr: [],
+      isAddDialog: false,
+      roleForm: {
+        name: null,
+        sort: null,
+        groupId: null,
+      },
+      roleData: {}, // 点击新增选中的角色
+      isUpdateDialog: false,
 
-      // 一级角色列表
-      firstLevelRoleList: [],
-      // 一级id
-      firstLevelRoleid: "默认",
-      //操作角色列表
-      RoleList: [],
-      // 一级权限列表
-      LevelPermissionList: [],
-      // 一级id
-      firstLevelPermission: "",
-      defaultProps: {
-        children: "authorities",
-        label: "alias",
-      },
-      // 角色的id
-      formRC: {
-        roleid: "",
-        // 点击已经选中的id集合
-        authorityids: [],
-      },
-      // 进来已经选择的
-      selectedByDefault: [],
     };
   },
   created() {
-    this.getRoleList();
-    this.getPermissionList();
-    this.queryRoleList(592539677);
+    this.roleList();
   },
   methods: {
-    // 搜索按钮
-    searchForm() {
-      this.$message("正在搜索");
-    },
-    // 重置按钮
-    reset() {
-      this.bus.$emit("onCurrentContextmenuClick", {
-        id: 0,
-        path: this.$route.path,
-      });
-    },
-    // 添加
-    add() {
-      this.$message("角色新增请联系钉钉后台管理员");
-    },
-    // 删除
-    async deleteData(row) {
-      this.$message("该角色暂时无法删除");
-    },
-    // 编辑
-    async editData(item) {
-      this.formRC.roleid = item.id;
-      this.dialogVisible = true;
-      console.log(item);
-      let res = await rqQueryPermission(item.id);
-      if (res.code == 200) {
-        let arr = res.data.map((item, index) => {
-          return item.id;
-        });
-        this.selectedByDefault = arr;
-        this.$refs.treeOne.setCheckedKeys(arr);
-      } else {
-        this.$message.error("网络错误");
-      }
-    },
-    // 点击切换页数
-    onClickCurrent(val) {
-      this.query.pageNum = val;
-      this.getAttendanceFormData();
-    },
-    // 点击了每页页数
-    onClickSize(val) {
-      this.query.pageSize = val;
-      this.getAttendanceFormData();
-    },
-    handleClose(done) {
-      this.$confirm("确认关闭？")
-        .then((_) => {
-          done();
+    // 点击确定新增
+    onClickAffirm() {
+      console.log(this.roleForm)
+      let obj = { ...this.roleForm }
+      if(obj.name === null){
+        this.$message.error(errorMessages.name);
+      }else if(obj.sort === null){
+        this.$message.error(errorMessages.sort);
+      }else {
+        obj.groupId ? '' : obj.groupId = -1
+        postRole(obj).then(res =>{
+          this.roleList();
+          this.$message.success('新增成功')
+          this.isAddDialog = false
         })
-        .catch((_) => {});
-    },
-    // 获取角色列表分类
-    async getRoleList() {
-      try {
-        this.loading = true;
-        // let result = await rqGetRuleList(this.query.pageNum, this.query.pageSize);//做了分页
-        let result = await rqGetRoleList();
-        if (result.code == 200) {
-          this.loading = false;
-          this.firstLevelRoleList = result.data;
-          // this.total = result.data.total;
-        } else {
-          this.loading = false;
-          this.$message.error("服务器错误");
-        }
-      } catch (error) {
-        this.loading = false;
-        this.$message.error("网络错误");
       }
     },
-    // 查询角色列表
-    async queryRoleList(id) {
-      try {
-        this.loading = true;
-        // let result = await rqGetRuleList(this.query.pageNum, this.query.pageSize);//做了分页
-        let result = await rqGetRoleList(id);
-        if (result.code == 200) {
-          this.loading = false;
-          this.RoleList = result.data;
-          // this.total = result.data.total;
-        } else {
-          this.loading = false;
-          this.$message.error("网络错误");
-        }
-      } catch (error) {
-        this.loading = false;
-        this.$message.error("网络错误");
+    // 点击确定修改
+    onClickUpdateAffirm() {
+      console.log(this.roleForm)
+      putRole(this.roleForm).then(res =>{
+        this.roleList();
+        this.$message.success('修改成功')
+        this.isUpdateDialog = false
+      })
+    },
+    normalizer(node) {
+      if (node.childrenList && !node.childrenList.length) {
+        return { id: node.id,  label: node.name,  };
+      }else {
+        return { id: node.id, label: node.name, children: node.childrenList };
       }
     },
-    // 获取权限列表
-    async getPermissionList() {
-      console.log(111);
-      try {
-        this.loading = true;
-        // let result = await rqGetRuleList(this.query.pageNum, this.query.pageSize);//做了分页
-        let result = await rqGetPermissionList();
-        if (result.code == 200) {
-          this.loading = false;
-          this.LevelPermissionList = result.data;
-          // this.total = result.data.total;
-        } else {
-          this.loading = false;
-          this.$message.error("服务器错误");
-        }
-      } catch (error) {
-        this.loading = false;
-        this.$message.error("网络错误");
-      }
+    // 获取角色列表
+    roleList() {
+      getRole(this.query).then(res =>{
+        this.roleArr = res
+      })
     },
-
-    // 确认新增或者修改按钮
-    async confirmSettingRules() {
-      const treeInstance = this.$refs.treeOne;
-      // 调用 getCheckedNodes 方法获取已勾选的节点数组
-      const checkedNodes = treeInstance.getCheckedNodes();
-      console.log(checkedNodes);
-      let arr = checkedNodes.map((ion, index) => {
-        return ion.id;
-      });
-      this.formRC.authorityids = arr;
-      let res = await rqModifyOrAddPermissions(this.formRC);
-      if (res.code == 200) {
-        this.$message.success("设置成功");
-        this.dialogVisible = false;
-      } else {
-        this.dialogVisible = false;
-        this.$message.success("服务器错误");
-      }
+    // 点击删除
+    onClickDelete(item){
+      console.log(item)
+      deleteRole(item.id).then(res =>{
+        this.roleList();
+        this.$message.success('删除成功')
+      })
     },
+    // 重置表单
+    resetForm() {
+      this.roleForm = {
+        name: null,
+        sort: null,
+        groupId: null,
+      }
+    }
   },
 };
 </script>