权限

src/api/basic/role/index.js

@@ -57,4 +57,32 @@ export function FindAllMenus(params) {
 		params: params,
 	})
 }
-
+export function changeMenuShow(params) {
+	return httpService({
+		url: `/user/jurisdiction/isShowMenus`,
+		method: 'post',
+		data: params,
+	})
+}
+export function getActions(params) {
+	return httpService({
+		url: `/user/jurisdiction/findOperationByMId`,
+		method: 'get',
+		params: params,
+	})
+}
+export function changeActions(params) {
+	return httpService({
+		url: `/user/jurisdiction/isCheckOperation`,
+		method: 'post',
+		data: params,
+	})
+}
+// 当前用户菜单
+export function getMenu(params) {
+	return httpService({
+		url: `/user/manageUser/findAllMenusByUser`,
+		method: 'GET',
+		params: params,
+	})
+}

src/views/Basic/Authority/depend/permissions.vue

@@ -4,61 +4,36 @@
       <!-- 角色列表 -->
       <a-col :span="5">
         <div class="cardTitle">所有角色</div>
-        <a-button class="add-btn" style="margin: 10px" @click="add.show = true"
-          >新增角色</a-button
-        >
         <a-collapse accordion @change="rolechange">
           <a-collapse-panel
             v-for="(item, index) in roleList"
             :key="index"
             :header="item.name"
           >
-		  	<a-button
-                  type="link"
-                  icon="form"
-                  slot="extra"
-                  @click.stop="editRole(item.id)"
-                >
-                </a-button>
-                <a-button
-                  type="link"
-                  slot="extra"
-                  style="color: #ff4d4f"
-                  icon="delete"
-                  @click.stop="delRole(item.id)"
-                ></a-button>
             <div
               v-for="(rolechild, indexs) in item.childrenList"
               class="role-card"
               :key="indexs"
+              @click="rolechoose(rolechild.id)"
             >
               <span class="role-li">
                 <span>{{ rolechild.name || "无" }}</span>
-                <span v-show="rolechild.name"
+                <span v-show="rolechild.name"> </span>
-                  ><a-button type="link" icon="form" @click="editRole(rolechild.id)">
-                  </a-button>
-                  <a-button
-                    type="link"
-                    style="color: #ff4d4f"
-                    icon="delete"
-                    @click="delRole(rolechild.id)"
-                  ></a-button
-                ></span>
               </span>
             </div>
           </a-collapse-panel>
         </a-collapse>
       </a-col>
-      <!-- 人员表格 -->
+      <!-- 功能表格 -->
       <a-col :span="19">
         <div class="treebox">
           <a-tree
             class="tree"
             v-model="checkedKeys"
             checkable
+            checkStrictly
             :replace-fields="replaceFields"
             :expanded-keys="expandedKeys"
-            :auto-expand-parent="autoExpandParent"
             :selected-keys="selectedKeys"
             :tree-data="menus"
             @expand="onExpand"
@@ -68,31 +43,40 @@
         </div>
       </a-col>
     </a-row>
-    <add-form
+    <a-drawer
-      :show="add.show"
+      title="操作"
-      :title="add.title"
+      placement="right"
-      :list="roleList"
+      :closable="false"
-      @close="addClose"
+      :visible="actions.show"
-	  @success='success'
+      @close="onClose"
-	  :id='add.editId'
+    >
-    ></add-form>
+      <div class="content">
+        <div v-if="actionsList.length === 0">无可配置操作</div>
+        <a-checkbox
+          v-for="action in actionsList"
+          :checked="action.isCheck"
+          :key="action.id"
+          @change="onChange($event, action.id)"
+        >
+          {{ action.name }}</a-checkbox
+        >
+      </div>
+    </a-drawer>
   </div>
 </template>
 
 <script>
-import { getrolelist, FindAllMenus, roleDel } from "@/api/basic/role";
+import {
-import addForm from "./form.vue";
+	getrolelist,
+	FindAllMenus,
+	changeMenuShow,
+	getActions,
+	changeActions,
+} from "@/api/basic/role";
 export default {
-	components: {
-		addForm,
-	},
 	data() {
 		return {
-			add: {
+			roleId: null,
-				show: false,
-				title: "新增角色",
-				editId:null
-			},
 			roleList: [],
 			expandedKeys: [],
 			replaceFields: {
@@ -100,11 +84,13 @@ export default {
 				title: "name",
 				key: "id",
 			},
-			autoExpandParent: true,
 			checkedKeys: [],
 			selectedKeys: [],
-			ActionsList: [],
+			menus: [], //页面菜单
-			menus: [],
+			actionsList: [], //操作
+			actions: {
+				show: false,
+			},
 		};
 	},
 	mounted() {
@@ -116,60 +102,86 @@ export default {
 				this.roleList = res.data;
 			});
 		},
+		rolechoose(data) {
+			this.checkedKeys = [];
+			if (data !== undefined) {
+				this.roleId = data;
+				FindAllMenus({ roleId: this.roleId }).then((res) => {
+					this.menus = res.data;
+					this.defaultCheck(this.menus);
+				});
+			} else if (data === undefined) {
+				this.roleId = null;
+			}
+		},
 		rolechange(data) {
 			if (data) {
-				this.searchForm.roleId = this.roleList[data].id;
+				this.checkedKeys = [];
-				FindAllMenus({ roleId: this.searchForm.roleId }).then((res) => {
+				this.roleId = this.roleList[data].id;
+				FindAllMenus({ roleId: this.roleId }).then((res) => {
 					this.menus = res.data;
+					this.defaultCheck(this.menus);
 				});
 			} else {
-				this.searchForm.roleId = null;
+				this.roleId = null;
+				this.menus = [];
 			}
 		},
-		success(){
+		defaultCheck(arr) {
-			this.getData()
+			for (let item of arr) {
-		},
+				if (item.isShow === true && item.childrenList !== null) {
-		addClose() {
+					this.checkedKeys.push(item.id);
-			this.add.show = false;
+					this.defaultCheck(item.childrenList);
-			this.add.editId = undefined;
+				} else if (item.isShow === true) {
-		},
+					this.checkedKeys.push(item.id);
-		// 编辑角色
-		editRole(id){
-			this.add.editId = id
-			this.add.title = '修改角色'
-			this.add.show= true;
-		},
-		// 删除角色
-		delRole(id) {
-			var vm = this;
-			this.$confirm({
-				title: "是否删除",
-				// okText:'删除',
-				// cancelText:'取消',
-				icon: "delete",
-				onOk:()=> {
-					roleDel({roleId:id}).then(res=>{
-						if(res.code === 200){
-							this.$message.success(res.msg)
-							this.getData()
-						}else{
-							this.$message.error(res.msg)
 				}
-					})
 			}
-			});
 		},
 		onExpand(expandedKeys) {
 			this.expandedKeys = expandedKeys;
 			this.autoExpandParent = false;
 		},
-		onCheck(checkedKeys) {
+		onCheck(checkedKeys, e) {
-			// console.log('onCheck', checkedKeys);
 			this.checkedKeys = checkedKeys;
+			// console.log(e.node.eventKey);
+			changeMenuShow({
+				roleId: this.roleId,
+				showMenusId: e.node.eventKey,
+			}).then((res) => {
+				if (res.code === 200) {
+					this.$message.success(res.msg);
+				} else {
+					this.$message.error(res.msg);
+				}
+			});
 		},
 		onSelect(selectedKeys, info) {
 			// console.log('onSelect', info);
 			this.selectedKeys = selectedKeys;
+			// console.log(selectedKeys);
+			getActions({ roleId: this.roleId, menusId: this.selectedKeys[0] }).then(
+				(res) => {
+					this.actionsList = res.data;
+					this.actions.show = true;
+				}
+			);
+		},
+		onChange(e, id) {
+			changeActions({
+				roleId: this.roleId,
+				menusId: this.selectedKeys[0],
+				operationId: id,
+			}).then((res) => {
+				if (res.code === 200) {
+					this.$message.success(res.msg);
+					this.onSelect(this.selectedKeys)
+				} else {
+					this.$message.error(res.msg);
+				}
+			});
+		},
+		onClose() {
+			this.actions.show = false;
 		},
 	},
 	watch: {
@@ -200,12 +212,11 @@ export default {
   display: flex;
   justify-content: space-between;
 }
-/deep/.ant-tree ul {
+.treebox {
-  width: 200px;
+  padding-left: 30px;
 }
 .tree {
   display: flex;
-  margin-left: 20px;
 }
 .role-card {
   line-height: 30px;
@@ -221,4 +232,7 @@ export default {
   justify-content: space-between;
   width: 100%;
 }
+/deep/.ant-checkbox-wrapper + .ant-checkbox-wrapper {
+  margin: 0px;
+}
 </style>

src/views/Basic/Authority/index.vue

@@ -228,6 +228,7 @@ export default {
 		addClose() {
 			this.add.show = false;
 			this.add.editId = undefined;
+			this.add.title = "新增角色";
 		},
 		// 编辑角色
 		editRole(id) {

src/views/Login/index.vue

@@ -47,13 +47,37 @@
             </a-row>
           </div>
           <div class="login-input" v-else-if="activeName === '2'">
-            <a-cascader :options="cityList" placeholder="请选择城市" v-model='cityvalue' :show-search="{ filter }" @change="onChange" :field-names="{ label: 'name', value: 'id', children: 'cityList' }"/>
+            <a-cascader
+              :options="cityList"
+              placeholder="请选择城市"
+              v-model="cityvalue"
+              :show-search="{ filter }"
+              @change="onChange"
+              :field-names="{
+                label: 'name',
+                value: 'id',
+                children: 'cityList',
+              }"
+            />
 
             <span class="form">
-              <a-select v-model="communityCode" notFoundContent='该城市无可选择小区' :disabled='cityvalue.length===0' placeholder="请选择小区">
+              <a-select
-                <a-select-option v-for="item in communityList" :key='item.id' :value='item.code'>{{item.name}}</a-select-option>
+                v-model="communityCode"
+                notFoundContent="该城市无可选择小区"
+                :disabled="cityvalue.length === 0"
+                placeholder="请选择小区"
+              >
+                <a-select-option
+                  v-for="item in communityList"
+                  :key="item.id"
+                  :value="item.code"
+                  >{{ item.name }}</a-select-option
+                >
               </a-select>
-              <a-input placeholder="请输入手机号码" v-model="form.tel"></a-input>
+              <a-input
+                placeholder="请输入手机号码"
+                v-model="form.tel"
+              ></a-input>
               <a-input
                 placeholder="请输入验证码"
                 v-model="form.code"
@@ -69,7 +93,12 @@
             <a-button
               type="primary"
               @click="login"
-              style="width: 90%; margin-left: 30px;margin-top:20px;margin-bottom:10px"
+              style="
+                width: 90%;
+                margin-left: 30px;
+                margin-top: 20px;
+                margin-bottom: 10px;
+              "
             >
               登录
             </a-button>
@@ -194,7 +223,7 @@
 </template>
 
 <script>
-import { loginTel, sendTelCode, } from "../../api/public/login";
+import { loginTel, sendTelCode } from "../../api/public/login";
 export default {
 	name: "Login",
 	data() {
@@ -205,7 +234,7 @@ export default {
 				tel: "",
 				code: "",
 			},
-			communityCode:undefined,
+			communityCode: undefined,
 			rules: {
 				tel: [
 					{
@@ -234,56 +263,62 @@ export default {
 					},
 				],
 			},
-			cityList:[],//城市列表
+			cityList: [], //城市列表
-			cityvalue:[], //省市区级联绑定值
+			cityvalue: [], //省市区级联绑定值
-			communityList:[] //小区列表
+			communityList: [], //小区列表
 		};
 	},
 	created() {
 		this.keyupEnter();
-		this.getAllCity()
+		this.getAllCity();
 	},
 	watch: {
-		communityCode:{
+		communityCode: {
-			handler(value){
+			handler(value) {
 				this.setCommunityCode(value);
-			}
+			},
-		}
+		},
 	},
 	methods: {
-		getAllCity(){
+		getAllCity() {
 			this.$axios({
-				method:'get',
+				method: "get",
-				url:process.env.VUE_APP_URL+'manage/city/allCity',//【api不需要communityCode】
+				url: process.env.VUE_APP_URL + "manage/city/allCity", //【api不需要communityCode】
-			}).then((response) =>{        
+			})
-				this.cityList = response.data.data
+				.then((response) => {
+					this.cityList = response.data.data;
 					this.setCity(response.data.data);
-			}).catch((error) =>{
-				console.log(error)       //请求失败返回的数据
 				})
+				.catch((error) => {
+					console.log(error); //请求失败返回的数据
+				});
 		},
-		getCommunity(cityId){
+		getCommunity(cityId) {
 			this.$axios({
-				method:'get',
+				method: "get",
-				url:process.env.VUE_APP_URL+'manage/community/findAll',//【api不需要communityCode】
+				url: process.env.VUE_APP_URL + "manage/community/findAll", //【api不需要communityCode】
-				params:{    //这里是发送给后台的数据
+				params: {
-					cityId:cityId
+					cityId: cityId,
-				}
+				},
-			}).then((response) =>{          //这里使用了ES6的语法
-				this.communityList = response.data.data
-			}).catch((error) =>{
-				console.log(error)       //请求失败返回的数据
 			})
-            
+				.then((response) => {
+					this.communityList = response.data.data;
+				})
+				.catch((error) => {
+					console.log(error); //请求失败返回的数据
+				});
 		},
 		// 选择城市后获取该城市小区
-		onChange(data){
+		onChange(data) {
-			this.getCommunity(data[2])
+			this.getCommunity(data[2]);
-			this.communityCode=undefined
+			this.communityCode = undefined;
 		},
 		// 级联筛选
 		filter(inputValue, path) {
-			return path.some(cityList => cityList.name.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
+			return path.some(
+				(cityList) =>
+					cityList.name.toLowerCase().indexOf(inputValue.toLowerCase()) > -1
+			);
 		},
 		// 绑定enter事件
 		keyupEnter() {
@@ -295,9 +330,9 @@ export default {
 			};
 		},
 		login() {
-			if(this.communityCode===undefined) {
+			if (this.communityCode === undefined) {
-				this.$message.error('先选择小区')
+				this.$message.error("先选择小区");
-				return
+				return;
 			}
 			loginTel(this.form).then((res) => {
 				if (res.code === 200) {
@@ -312,9 +347,9 @@ export default {
 		},
 		// 获取验证码
 		getCode() {
-			if(this.communityCode === undefined) {
+			if (this.communityCode === undefined) {
-				this.$message.error('先选择小区')
+				this.$message.error("先选择小区");
-				return
+				return;
 			}
 			console.log(this.getCommunityCode);
 			sendTelCode(this.form).then((res) => {
@@ -405,7 +440,7 @@ export default {
 /deep/.ant-form-item {
   margin-top: -10px;
 }
-.login-input .form{
+.login-input .form {
   text-align: left;
   margin-top: 20px;
   /deep/.ant-input {
@@ -426,10 +461,10 @@ export default {
     margin-bottom: 15px;
   }
 }
-/deep/.ant-cascader-picker{
+/deep/.ant-cascader-picker {
   text-align: left;
   margin-top: 20px;
   margin-left: 25px;
-  width:90%;
+  width: 90%;
 }
 </style>