ddd

src/api/system/role.js

@@ -93,19 +93,68 @@ export function authUserCancel(data) {
 }
 
 // 批量取消用户授权角色
-export function authUserCancelAll(data) {
+// export function authUserCancelAll(data) {
+//   return request({
+//     url: '/system/role/authUser/cancelAll',
+//     method: 'put',
+//     params: data
+//   })
+// }
+
+// 授权用户选择
+export function authUserSelectAll(data) {
   return request({
-    url: '/system/role/authUser/cancelAll',
+    url: '/system/role/authUser/selectAll',
     method: 'put',
     params: data
   })
 }
 
-// 授权用户选择
-export function authUserSelectAll(data) {
+// 加载对应角色菜单列表树
+export function getRoleMenuTreeselect(roleId) {
   return request({
-    url: '/system/role/authUser/selectAll',
+    url: 'system/menu/roleMenuSelect/' + roleId,
+    method: 'get'
+  })
+}
+
+// 批量保存角色菜单权限
+export function saveRoleMenu(data) {
+  return request({
+    url: '/system/role/saveRoleMenu',
     method: 'put',
-    params: data
+    data: data
+  })
+}
+
+// 批量取消授权用户
+export function authUserCancelAll(data) {
+  return request({
+    url: '/system/role/cancelRoleMenu',
+    method: 'put',
+    data: data
+  })
+}
+
+// 查询角色菜单表头权限列表
+export function getTableHeadList(roleId, menuId) {
+  return request({
+    url: '/system/role/tableHeadList/?roleId=' + roleId + '&menuId=' + menuId,
+    method: 'get'
+  })
+}
+
+// 表头状态修改
+export function setSysTableCfgIsShow(cfgId, isShow, menuId, roleId) {
+  const data = {
+    cfgId,
+    isShow,
+    menuId,
+    roleId,
+  }
+  return request({
+    url: '/system/role/setSysTableCfgIsShow',
+    method: 'put',
+    data: data
   })
 }

src/store/modules/user.js

@@ -38,7 +38,7 @@ const user = {
 			return new Promise((resolve, reject) => {
 				login(username, password, code, uuid)
 					.then((res) => {
-						setToken(res.data.token)
+						setToken(res.token)
 						commit('SET_TOKEN', res.token)
 						resolve()
 					})

src/utils/request.js

@@ -1,46 +1,29 @@
 import axios from 'axios'
-import { Notification, MessageBox } from 'element-ui'
+import { Notification, MessageBox, Message, Loading } from 'element-ui'
 import store from '@/store'
 import { getToken } from '@/utils/auth'
 import errorCode from '@/utils/errorCode'
+import { tansParams, blobValidate } from '@/utils/tiegu'
+import { saveAs } from 'file-saver'
 
-let pending = []
-let cancelToken = axios.CancelToken
-let removePending = (config) => {
-	for (let p in pending) {
-		let key = +p
-		let item = pending[key]
-		if (item.url === config.url && item.method === config.method && JSON.stringify(item.params) === JSON.stringify(config.params) && JSON.stringify(item.data) === JSON.stringify(config.data)) {
-			item.cancel('操作太频繁，请稍后再试')
-			pending.splice(item, 1)
-		}
-	}
-}
+let downloadLoadingInstance
 
-// axios 配置
-var instance = axios.create({
-	headers: {
-		'Content-Type': 'application/json;charset=UTF-8'
-	},
-	timeout: 1000 * 30, //请求超时时间
-	baseURL: process.env.VUE_APP_BASE_API, //请求默认地址
-	withCredentials: true //允许请求携带cookie信息
+axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
+// 创建axios实例
+const service = axios.create({
+	// axios中请求配置有baseURL选项，表示请求URL公共部分
+	baseURL: process.env.VUE_APP_BASE_API,
+	// 超时
+	timeout: 10000
 })
 
-instance.interceptors.request.use(
+// request拦截器
+service.interceptors.request.use(
 	(config) => {
-		removePending(config)
-		config.cancelToken = new cancelToken((c) => {
-			pending.push({
-				url: config.url,
-				method: config.method,
-				params: config.params,
-				data: config.data,
-				cancel: c
-			})
-		})
-		if (getToken()) {
-			config.headers['Authorization'] = 'Bearer ' + getToken()
+		// 是否需要设置 token
+		const isToken = (config.headers || {}).isToken === false
+		if (getToken() && !isToken) {
+			config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
 		}
 		// get请求映射params参数
 		if (config.method === 'get' && config.params) {
@@ -52,44 +35,52 @@ instance.interceptors.request.use(
 		return config
 	},
 	(error) => {
-		return Promise.reject(error)
+		console.log(error)
+		Promise.reject(error)
 	}
 )
 
-instance.interceptors.response.use(
-	(response) => {
-		removePending(response.config)
-		const code = response.status || 200
-		const msg = errorCode[code] || response.data.msg || errorCode['default']
+// 响应拦截器
+service.interceptors.response.use(
+	(res) => {
+		// 未设置状态码则默认成功状态
+		const code = res.data.code || 200
+		// 获取错误信息
+		const msg = errorCode[code] || res.data.msg || errorCode['default']
+		// 二进制数据则直接返回
+		if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') {
+			return res.data
+		}
 		if (code === 401) {
 			MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
 				confirmButtonText: '重新登录',
 				cancelButtonText: '取消',
 				type: 'warning'
-			}).then(() => {
-				store.dispatch('LogOut').then(() => {
-					location.href = '/index'
-				})
 			})
+				.then(() => {
+					store.dispatch('LogOut').then(() => {
+						location.href = '/index'
+					})
+				})
+				.catch(() => {})
+			return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
 		} else if (code === 500) {
-			Notification({
-				title: 'code500',
+			Message({
 				message: msg,
-				type: 'error',
-				duration: 2000,
-				customClass: 'elemsg-notify'
+				type: 'error'
 			})
 			return Promise.reject(new Error(msg))
-		} else if (code === 501) {
-			return { code: 501, data: {} }
 		} else if (code !== 200) {
-			return { code: 0, data: {} }
+			Notification.error({
+				title: msg
+			})
+			return Promise.reject('error')
 		} else {
-			return response.data
+			return res.data
 		}
 	},
 	(error) => {
-		console.log('err:' + error)
+		console.log('err' + error)
 		let { message } = error
 		if (message == 'Network Error') {
 			message = '后端接口连接异常'
@@ -97,41 +88,47 @@ instance.interceptors.response.use(
 			message = '系统接口请求超时'
 		} else if (message.includes('Request failed with status code')) {
 			message = '系统接口' + message.substr(message.length - 3) + '异常'
-		} else if (error.includes('Cancel')) {
-			message = '操作太频繁，请稍后再试'
-		} else {
-			message = '系统错误，请联系管理员'
 		}
-		notif(message)
+		Message({
+			message: message,
+			type: 'error',
+			duration: 5 * 1000
+		})
+		return Promise.reject(error)
 	}
 )
-function notif(msg) {
-	Notification({
-		message: msg,
-		type: 'error',
-		duration: 3000,
-		customClass: 'elemsg-notify'
-	})
-}
-function tansParams(params) {
-	let result = ''
-	for (const propName of Object.keys(params)) {
-		const value = params[propName]
-		var part = encodeURIComponent(propName) + '='
-		if (value !== null && typeof value !== 'undefined') {
-			if (typeof value === 'object') {
-				for (const key of Object.keys(value)) {
-					if (value[key] !== null && typeof value[key] !== 'undefined') {
-						let params = propName + '[' + key + ']'
-						var subPart = encodeURIComponent(params) + '='
-						result += subPart + encodeURIComponent(value[key]) + '&'
-					}
+
+// 通用下载方法
+export function download(url, params, filename) {
+	downloadLoadingInstance = Loading.service({ text: '正在下载数据，请稍候', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' })
+	return service
+		.post(url, params, {
+			transformRequest: [
+				(params) => {
+					return tansParams(params)
 				}
+			],
+			headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+			responseType: 'blob'
+		})
+		.then(async (data) => {
+			const isLogin = await blobValidate(data)
+			if (isLogin) {
+				const blob = new Blob([data])
+				saveAs(blob, filename)
 			} else {
-				result += part + encodeURIComponent(value) + '&'
+				const resText = await data.text()
+				const rspObj = JSON.parse(resText)
+				const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
+				Message.error(errMsg)
 			}
-		}
-	}
-	return result
+			downloadLoadingInstance.close()
+		})
+		.catch((r) => {
+			console.error(r)
+			Message.error('下载文件出现错误，请联系管理员！')
+			downloadLoadingInstance.close()
+		})
 }
-export default instance
+
+export default service

src/views/login.vue

@@ -129,6 +129,7 @@
 				this.$store
 					.dispatch('Login', this.formData)
 					.then(() => {
+						console.log(1)
 						this.$router.push({ path: this.redirect || '/' }).catch(() => {})
 					})
 					.catch(() => {

src/views/system/role/index.vue

@@ -1,61 +1,17 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
-      <el-form-item label="角色名称" prop="roleName">
-        <el-input
-          v-model="queryParams.roleName"
-          placeholder="请输入角色名称"
-          clearable
-          size="small"
-          style="width: 240px"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="权限字符" prop="roleKey">
-        <el-input
-          v-model="queryParams.roleKey"
-          placeholder="请输入权限字符"
-          clearable
-          size="small"
-          style="width: 240px"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="状态" prop="status">
-        <el-select
-          v-model="queryParams.status"
-          placeholder="角色状态"
-          clearable
-          size="small"
-          style="width: 240px"
-        >
-          <el-option
-            v-for="dict in dict.type.sys_normal_disable"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="创建时间">
-        <el-date-picker
-          v-model="dateRange"
-          size="small"
-          style="width: 240px"
-          value-format="yyyy-MM-dd"
-          type="daterange"
-          range-separator="-"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-        ></el-date-picker>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
+    <div class="item">
+      <div class="left_tag">
+        <div class="role border_role" :class="{activeClass: over == 1}" @click="getRole">角色</div>
+        <div class="role functional" :class="{activeClass: over == 2}" @click="getFunctionalAuthority">功能权限</div>
+        <div class="role" :class="{activeClass: over == 3}" @click="getHeaderPermission">表头权限</div>
+      </div>
+      <div class="right_add">
+        <el-button type="primary" icon="el-icon-plus" class="add_btn" @click="handleAdd" v-show="roleShow" v-hasPermi="['system:role:add']">添加</el-button>
+      </div>
+    </div>
+    <!-- 编辑按钮 -->
+    <!-- <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button
           type="primary"
@@ -99,67 +55,96 @@
         >导出</el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
+    </el-row> -->
 
-    <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="角色编号" prop="roleId" width="120" />
-      <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" />
-      <el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="150" />
-      <el-table-column label="显示顺序" prop="roleSort" width="100" />
-      <el-table-column label="状态" align="center" width="100">
+    <!-- 角色列表 -->
+    <el-table v-loading="loading" :data="roleList" :row-class-name="tableRowClassName" :row-style="selectedstyle" border class="roleTable" @row-click="roleLineClick" @row-dblclick="roleLineDbclick" v-show="roleShow">
+      <el-table-column label="名称" prop="roleName" width="198" />
+      <el-table-column label="描述" prop="remark" width="416" />
+      <el-table-column label="创建时间" prop="createTime" width="200">
         <template slot-scope="scope">
-          <el-switch
-            v-model="scope.row.status"
-            active-value="0"
-            inactive-value="1"
-            @change="handleStatusChange(scope.row)"
-          ></el-switch>
+          <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+      <el-table-column label="状态" width="117" prop="status">
         <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.createTime) }}</span>
+          <span>{{ scope.row.status == 0? '正常': '停用' }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope" v-if="scope.row.roleId !== 1">
+      <el-table-column label="操作" class-name="small-padding fixed-width" width="222">
+        <template slot-scope="scope">
           <el-button
             size="mini"
             type="text"
             icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
             v-hasPermi="['system:role:edit']"
-          >修改</el-button>
+            @click="handleUpdate(scope.row)"
+          >编辑</el-button>
           <el-button
             size="mini"
             type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
+            icon="el-icon-remove-outline"
+            @click="handleStatusChange(scope.row)"
+          >{{ scope.row.status == '0'? '禁用': '启用' }}</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete-solid"
             v-hasPermi="['system:role:remove']"
+            @click="handleDelete(scope.row)"
           >删除</el-button>
-          <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:role:edit']">
-            <span class="el-dropdown-link">
-              <i class="el-icon-d-arrow-right el-icon--right"></i>更多
-            </span>
-            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item command="handleDataScope" icon="el-icon-circle-check"
-                v-hasPermi="['system:role:edit']">数据权限</el-dropdown-item>
-              <el-dropdown-item command="handleAuthUser" icon="el-icon-user"
-                v-hasPermi="['system:role:edit']">分配用户</el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
         </template>
       </el-table-column>
     </el-table>
 
-    <pagination
+    <!-- 功能权限列表 -->
+    <el-table v-loading="loading" :data="FuncListTree" row-key="menuId" :tree-props="{children: 'children'}" border class="roleTable" @row-click="functionalLineClick" @row-dblclick="functionalLineDbclick" v-show="functionalShow">
+      <el-table-column label="名称" prop="menuName" width="198" />
+      <el-table-column label="描述" prop="remark" width="231" />
+      <el-table-column label="权限" prop="createTime" width="55" align="center">
+        <template slot-scope="scope">
+          <span><el-checkbox @change="handleCheckedTreeConnect($event, 'menu', scope.row)"></el-checkbox></span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            :style="{color: checkedKeys.includes(item.menuId)? '#409EFF': '#909399'}"
+            v-for="(item, index) in btnListss(scope.row.menuId)"
+            :key="index"
+            @click="updateBtn(item)"
+          ><span>{{item.menuName}}</span>
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 表头权限列表 -->
+    <el-table v-loading="loading" :data="headList" border stripe class="dataTable" @row-click="headlLineClick" v-show="headShow">
+      <el-table-column label="列表名称" width="198">{{ listName }}</el-table-column>
+      <el-table-column label="列名称" prop="columnName" width="298" />
+      <el-table-column label="状态" class-name="small-padding fixed-width" width="159">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-remove-outline"
+            :style="{color: scope.row.isShow == 0 ? '#409EFF' : '#909399'}"
+            @click="showOrHide(scope.row)"
+          >显示</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- <pagination
       v-show="total>0"
       :total="total"
       :page.sync="queryParams.pageNum"
       :limit.sync="queryParams.pageSize"
       @pagination="getList"
-    />
+    /> -->
 
     <!-- 添加或修改角色配置对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
@@ -167,7 +152,7 @@
         <el-form-item label="角色名称" prop="roleName">
           <el-input v-model="form.roleName" placeholder="请输入角色名称" />
         </el-form-item>
-        <el-form-item prop="roleKey">
+        <!-- <el-form-item prop="roleKey">
           <span slot="label">
             <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasRole('admin')`)" placement="top">
               <i class="el-icon-question"></i>
@@ -175,10 +160,10 @@
             权限字符
           </span>
           <el-input v-model="form.roleKey" placeholder="请输入权限字符" />
-        </el-form-item>
-        <el-form-item label="角色顺序" prop="roleSort">
+        </el-form-item> -->
+        <!-- <el-form-item label="角色顺序" prop="roleSort">
           <el-input-number v-model="form.roleSort" controls-position="right" :min="0" />
-        </el-form-item>
+        </el-form-item> -->
         <el-form-item label="状态">
           <el-radio-group v-model="form.status">
             <el-radio
@@ -188,7 +173,7 @@
             >{{dict.label}}</el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label="菜单权限">
+        <!-- <el-form-item label="菜单权限">
           <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
           <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
           <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox>
@@ -202,8 +187,8 @@
             empty-text="加载中，请稍候"
             :props="defaultProps"
           ></el-tree>
-        </el-form-item>
-        <el-form-item label="备注">
+        </el-form-item> -->
+        <el-form-item label="描述">
           <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
         </el-form-item>
       </el-form>
@@ -214,7 +199,7 @@
     </el-dialog>
 
     <!-- 分配角色数据权限对话框 -->
-    <el-dialog :title="title" :visible.sync="openDataScope" width="500px" append-to-body>
+    <!-- <el-dialog :title="title" :visible.sync="openDataScope" width="500px" append-to-body>
       <el-form :model="form" label-width="80px">
         <el-form-item label="角色名称">
           <el-input v-model="form.roleName" :disabled="true" />
@@ -253,14 +238,15 @@
         <el-button type="primary" @click="submitDataScope">确 定</el-button>
         <el-button @click="cancelDataScope">取 消</el-button>
       </div>
-    </el-dialog>
+    </el-dialog> -->
   </div>
 </template>
 
 <script>
-import { listRole, getRole, delRole, addRole, updateRole, dataScope, changeRoleStatus } from "@/api/system/role";
+import { listRole, getRole, delRole, addRole, updateRole, dataScope, changeRoleStatus, getRoleMenuTreeselect, saveRoleMenu, getTableHeadList, authUserCancelAll, setSysTableCfgIsShow } from "@/api/system/role";
 import { treeselect as menuTreeselect, roleMenuTreeselect } from "@/api/system/menu";
 import { treeselect as deptTreeselect, roleDeptTreeselect } from "@/api/system/dept";
+import pinyin from 'js-pinyin'
 
 export default {
   name: "Role",
@@ -330,6 +316,7 @@ export default {
       },
       // 表单参数
       form: {},
+      form1: {},
       defaultProps: {
         children: "children",
         label: "label"
@@ -339,19 +326,50 @@ export default {
         roleName: [
           { required: true, message: "角色名称不能为空", trigger: "blur" }
         ],
-        roleKey: [
-          { required: true, message: "权限字符不能为空", trigger: "blur" }
-        ],
-        roleSort: [
-          { required: true, message: "角色顺序不能为空", trigger: "blur" }
-        ]
-      }
+      },
+      roleShow: true,
+      functionalShow: false,
+      headShow: false,
+      over: 1,
+      background: '',
+      getIndex: null,
+      getIndex1: null,
+      getIndex2: null,
+      functionList: [], // 功能权限列表
+      btnList: [], // 功能权限按钮列表
+      headList: [],
+      FuncList: [], 
+      FuncListTree: [],
+      objRole: {},
+      btnsLists: [],
+      btnsList: [],
+      checkedKeys: [],
+      checked: false,
+      roleId: '',
+      listName: '',
+      menuId: '',
     };
   },
   created() {
     this.getList();
   },
+  filters: {},
   methods: {
+    // 角色列表
+    getRole() {
+      this.getList()
+      this.over = 1
+      this.roleShow = true
+      this.functionalShow = false
+      this.headShow = false
+    },
+    // 功能权限列表
+    getFunctionalAuthority() {
+      this.roleLineDbclick(this.objRole)
+      this.headShow = false
+    },
+    // 表头权限；列表
+    getHeaderPermission() {},
     /** 查询角色列表 */
     getList() {
       this.loading = true;
@@ -362,6 +380,73 @@ export default {
         }
       );
     },
+    // 单击角色表格某一行 行点击事件,这里获取到的行对象(row)是没有index属性的
+    roleLineClick(row) {
+      this.getIndex = row.index;
+      this.objRole = row
+    },
+    //设置行对象(row)的样式(style)
+    selectedstyle({ row, rowIndex }) {
+      if (this.getIndex === rowIndex) {
+        return {
+          "background-color": "#EBEEF5",
+        };
+      }
+    },
+    //为行对象(row)设置index属性
+    tableRowClassName({ row, rowIndex }) {
+      row.index = rowIndex;
+    },
+    // 双击角色表格某一行
+    roleLineDbclick(row) {
+      this.roleId = ''
+      this.btnList = []
+      this.FuncList = []
+      this.FuncListTree = []
+      this.roleId = row.roleId
+      getRoleMenuTreeselect(row.roleId).then(res => {
+        console.log(res)
+        this.checkedKeys = res.checkedKeys
+        this.functionList = res.menus
+        this.btnList = this.functionList.filter((item, index, c) => item.menuType == 'F');
+        this.btnsLists = this.functionList.filter((item, index, c) => item.menuType == 'C');
+        this.FuncList = this.functionList.filter((item, index, c) => item.menuType == 'M' || item.menuType == 'C');
+        this.FuncListTree = this.handleTree(this.FuncList, "menuId",'parentId');
+        console.log(this.FuncListTree)
+        // this.btnsLists.forEach(element => {
+        //   this.checkedKeys.forEach(e => {
+        //     if (element.menuId == e) {
+        //       element.menuCheckStrictly == true
+        //     }
+        //   })
+        // });
+      })
+      this.functionalShow = true
+      this.roleShow = false
+      this.over = 2
+    },
+    // 单击功能权限表格某一行
+    functionalLineClick(row, event, column) {
+      // this.getIndex1 = row.index;
+    },
+    // 双击功能权限表格某一行
+    functionalLineDbclick(row, event, column) {
+      console.log(row)
+      this.functionalShow = false
+      this.headShow = true
+      this.over = 3
+      this.listName = row.menuName
+      this.menuId = row.menuId
+      console.log(this.listName)
+      getTableHeadList(this.roleId, row.menuId).then(res => {
+        console.log(res)
+        this.headList = res.data
+      })
+    },
+    // 单击表头权限表格某一行
+    headlLineClick(row, event, column) {
+      // this.getIndex2 = row.index;
+    },
     /** 查询菜单树结构 */
     getMenuTreeselect() {
       menuTreeselect().then(response => {
@@ -375,23 +460,23 @@ export default {
       });
     },
     // 所有菜单节点数据
-    getMenuAllCheckedKeys() {
-      // 目前被选中的菜单节点
-      let checkedKeys = this.$refs.menu.getCheckedKeys();
-      // 半选中的菜单节点
-      let halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys();
-      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
-      return checkedKeys;
-    },
-    // 所有部门节点数据
-    getDeptAllCheckedKeys() {
-      // 目前被选中的部门节点
-      let checkedKeys = this.$refs.dept.getCheckedKeys();
-      // 半选中的部门节点
-      let halfCheckedKeys = this.$refs.dept.getHalfCheckedKeys();
-      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
-      return checkedKeys;
-    },
+    // getMenuAllCheckedKeys() {
+    //   // 目前被选中的菜单节点
+    //   let checkedKeys = this.$refs.menu.getCheckedKeys();
+    //   // 半选中的菜单节点
+    //   let halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys();
+    //   checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
+    //   return checkedKeys;
+    // },
+    // // 所有部门节点数据
+    // getDeptAllCheckedKeys() {
+    //   // 目前被选中的部门节点
+    //   let checkedKeys = this.$refs.dept.getCheckedKeys();
+    //   // 半选中的部门节点
+    //   let halfCheckedKeys = this.$refs.dept.getHalfCheckedKeys();
+    //   checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
+    //   return checkedKeys;
+    // },
     /** 根据角色ID查询菜单树结构 */
     getRoleMenuTreeselect(roleId) {
       return roleMenuTreeselect(roleId).then(response => {
@@ -408,8 +493,10 @@ export default {
     },
     // 角色状态修改
     handleStatusChange(row) {
-      let text = row.status === "0" ? "启用" : "停用";
+      console.log(row)
+      let text = row.status === "0" ? "禁用" : "启用";
       this.$modal.confirm('确认要"' + text + '""' + row.roleName + '"角色吗？').then(function() {
+        row.status = row.status === "0" ? "1" : "0";
         return changeRoleStatus(row.roleId, row.status);
       }).then(() => {
         this.$modal.msgSuccess(text + "成功");
@@ -417,6 +504,40 @@ export default {
         row.status = row.status === "0" ? "1" : "0";
       });
     },
+    updateBtn(e) {
+      console.log(e)
+      let obj = {
+        menuId: e.menuId,
+        roleId: this.roleId
+      }
+      let arr = []
+      arr.push(obj)
+      let req = JSON.stringify(arr);
+      this.form1.json = req;
+      if (this.checkedKeys.includes(e.menuId)) {
+        authUserCancelAll(arr).then(res => {
+          if (res.code == 200) {
+            this.checkedKeys = this.checkedKeys.filter(item => item!= e.menuId)
+          }
+        })
+      }else{
+        saveRoleMenu(arr).then(res => {
+          if (res.code == 200) {
+            this.checkedKeys.push(e.menuId)
+          }
+        })
+      }
+    },
+    showOrHide(row) {
+      console.log(row)
+      let iss = row.isShow === 1  || row.isShow === null ? 0 : 1;
+      setSysTableCfgIsShow(row.id, iss, this.menuId, this.roleId).then(res => {
+        console.log(res)
+        if (res.code == 200) {
+          row.isShow = row.isShow == 1 || row.isShow == null? 0 : 1
+        }
+      })
+    },
     // 取消按钮
     cancel() {
       this.open = false;
@@ -429,9 +550,9 @@ export default {
     },
     // 表单重置
     reset() {
-      if (this.$refs.menu != undefined) {
-        this.$refs.menu.setCheckedKeys([]);
-      }
+      // if (this.$refs.menu != undefined) {
+      //   this.$refs.menu.setCheckedKeys([]);
+      // }
       this.menuExpand = false,
       this.menuNodeAll = false,
       this.deptExpand = true,
@@ -461,25 +582,6 @@ export default {
       this.resetForm("queryForm");
       this.handleQuery();
     },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.roleId)
-      this.single = selection.length!=1
-      this.multiple = !selection.length
-    },
-    // 更多操作触发
-    handleCommand(command, row) {
-      switch (command) {
-        case "handleDataScope":
-          this.handleDataScope(row);
-          break;
-        case "handleAuthUser":
-          this.handleAuthUser(row);
-          break;
-        default:
-          break;
-      }
-    },
     // 树权限（展开/折叠）
     handleCheckedTreeExpand(value, type) {
       if (type == 'menu') {
@@ -495,17 +597,25 @@ export default {
       }
     },
     // 树权限（全选/全不选）
-    handleCheckedTreeNodeAll(value, type) {
-      if (type == 'menu') {
-        this.$refs.menu.setCheckedNodes(value ? this.menuOptions: []);
-      } else if (type == 'dept') {
-        this.$refs.dept.setCheckedNodes(value ? this.deptOptions: []);
-      }
-    },
+    // handleCheckedTreeNodeAll(value, type) {
+    //   if (type == 'menu') {
+    //     this.$refs.menu.setCheckedNodes(value ? this.menuOptions: []);
+    //   } else if (type == 'dept') {
+    //     this.$refs.dept.setCheckedNodes(value ? this.deptOptions: []);
+    //   }
+    // },
     // 树权限（父子联动）
-    handleCheckedTreeConnect(value, type) {
+    handleCheckedTreeConnect(value, type, item) {
+      console.log(item)
+      if (this.checkedKeys.length > 0) {
+        // this.checkedKeys.forEach(element => {
+        //   if (item.menuId == element) {
+        //     this.checked = true
+        //   }
+        // });
+      }
       if (type == 'menu') {
-        this.form.menuCheckStrictly = value ? true: false;
+        item.menuCheckStrictly = value ? true: false;
       } else if (type == 'dept') {
         this.form.deptCheckStrictly = value ? true: false;
       }
@@ -521,29 +631,29 @@ export default {
     handleUpdate(row) {
       this.reset();
       const roleId = row.roleId || this.ids
-      const roleMenu = this.getRoleMenuTreeselect(roleId);
+      // const roleMenu = this.getRoleMenuTreeselect(roleId);
       getRole(roleId).then(response => {
         this.form = response.data;
         this.open = true;
-        this.$nextTick(() => {
-          roleMenu.then(res => {
-            let checkedKeys = res.checkedKeys
-            checkedKeys.forEach((v) => {
-                this.$nextTick(()=>{
-                    this.$refs.menu.setChecked(v, true ,false);
-                })
-            })
-          });
-        });
+        // this.$nextTick(() => {
+        //   roleMenu.then(res => {
+        //     let checkedKeys = res.checkedKeys
+        //     checkedKeys.forEach((v) => {
+        //         this.$nextTick(()=>{
+        //             this.$refs.menu.setChecked(v, true ,false);
+        //         })
+        //     })
+        //   });
+        // });
         this.title = "修改角色";
       });
     },
     /** 选择角色权限范围触发 */
-    dataScopeSelectChange(value) {
-      if(value !== '2') {
-        this.$refs.dept.setCheckedKeys([]);
-      }
-    },
+    // dataScopeSelectChange(value) {
+    //   if(value !== '2') {
+    //     this.$refs.dept.setCheckedKeys([]);
+    //   }
+    // },
     /** 分配数据权限操作 */
     handleDataScope(row) {
       this.reset();
@@ -551,11 +661,11 @@ export default {
       getRole(row.roleId).then(response => {
         this.form = response.data;
         this.openDataScope = true;
-        this.$nextTick(() => {
-          roleDeptTreeselect.then(res => {
-            this.$refs.dept.setCheckedKeys(res.checkedKeys);
-          });
-        });
+        // this.$nextTick(() => {
+        //   roleDeptTreeselect.then(res => {
+        //     this.$refs.dept.setCheckedKeys(res.checkedKeys);
+        //   });
+        // });
         this.title = "分配数据权限";
       });
     },
@@ -569,14 +679,18 @@ export default {
       this.$refs["form"].validate(valid => {
         if (valid) {
           if (this.form.roleId != undefined) {
-            this.form.menuIds = this.getMenuAllCheckedKeys();
+            // this.form.menuIds = this.getMenuAllCheckedKeys();
+            this.form.menuIds = []
             updateRole(this.form).then(response => {
+              console.log(response)
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
             });
           } else {
-            this.form.menuIds = this.getMenuAllCheckedKeys();
+            // this.form.menuIds = this.getMenuAllCheckedKeys();
+            let val = this.form.roleName
+            this.form.roleKey = pinyin.getFullChars(val)
             addRole(this.form).then(response => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
@@ -613,6 +727,55 @@ export default {
         ...this.queryParams
       }, `role_${new Date().getTime()}.xlsx`)
     }
-  }
+  },
+  computed: {
+    btnListss() {
+      return function(pid){
+        return this.btnList.filter(item=>item.parentId == pid)
+      }
+    },
+  },
 };
-</script>
+</script>
+<style scoped>
+.role{
+  width: 90px;
+  height: 40px;
+  text-align: center;
+  line-height: 40px;
+  font-size: 14px;
+  border: 1px solid #dfe6ec;
+  border-bottom: none;
+}
+.roleTable{
+  width: 1154px;
+}
+.add_btn{
+  width: 80px;
+  height: 35px;
+  text-align: center;
+}
+.item{
+  width: 1154px;
+  display: flex;
+  justify-content: space-between;
+}
+.dataTable{
+  width: 656px;
+}
+.left_tag{
+  display: flex;
+}
+.border_role{
+  border-right: none;
+}
+.functional{
+  border-right: none;
+}
+.activeClass{
+  color: #409EFF;
+}
+.tableRowClassName{
+  background: olive;
+}
+</style>

vue.config.js

@@ -21,7 +21,7 @@ module.exports = {
 		open: true,
 		proxy: {
 			[process.env.VUE_APP_BASE_API]: {
-				target: `http://182.92.174.150:9800`,
+				target: `http://192.168.0.102:8080`,
 				changeOrigin: true,
 				pathRewrite: {
 					['^' + process.env.VUE_APP_BASE_API]: ''