|
|
@@ -1,267 +1,308 @@
|
|
|
<template>
|
|
|
- <!-- 新增权限模板 -->
|
|
|
- <a-modal class="commonModal add-roles"
|
|
|
- title="新增权限模板"
|
|
|
- v-model:visible="visible"
|
|
|
- @cancel="cancel"
|
|
|
- centered
|
|
|
- :maskClosable="false"
|
|
|
- width="1230px">
|
|
|
- <template #footer>
|
|
|
- <a-button key="submit"
|
|
|
- type="primary"
|
|
|
- :loading="loading"
|
|
|
- @click="submit">完成</a-button>
|
|
|
- </template>
|
|
|
- <a-form class="inlineForm"
|
|
|
- ref="formRef"
|
|
|
- :model="formState"
|
|
|
- :rules="rules">
|
|
|
- <a-row :gutter="24">
|
|
|
- <a-col :span="24">
|
|
|
- <a-form-item label="模板名称">
|
|
|
- <a-input class="dialogInput"
|
|
|
- style="width: 200px"
|
|
|
- v-model:value="name"
|
|
|
- placeholder="请输入模板名称" />
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :span="24">
|
|
|
- <a-form-item label="权限功能"
|
|
|
- name="">
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :span="24">
|
|
|
- <div class="powerTable">
|
|
|
- <!-- <a-checkbox-group class="commonCheckboxGroup"
|
|
|
-
|
|
|
- > -->
|
|
|
- <div class="powerRow"
|
|
|
- v-for="(item, i) in tableList"
|
|
|
- :key="i + '0'">
|
|
|
- <div class="powerLeft">
|
|
|
- <a-checkbox v-model:checked="item.Menu.ishadrole">
|
|
|
- {{item.Menu.resourcename}}
|
|
|
- </a-checkbox>
|
|
|
- </div>
|
|
|
- <div class="powerRight">
|
|
|
- <div class="line"
|
|
|
- v-for="(sub, j) in item.SubMenu"
|
|
|
- :key="j + '1'">
|
|
|
- <div class="left">
|
|
|
- <a-checkbox v-model:checked="sub.Menu.ishadrole"
|
|
|
- @change="secondChange(item, sub)"
|
|
|
- :value="sub.Menu.resourcecode">
|
|
|
- {{sub.Menu.resourcename}}
|
|
|
- </a-checkbox>
|
|
|
- </div>
|
|
|
- <div class="right">
|
|
|
- <a-checkbox v-for="(subNext, l) in sub.SubMenu"
|
|
|
- :key="l + '3'"
|
|
|
- v-model:checked="subNext.Menu.ishadrole"
|
|
|
- @change="thirdChange(item, sub, subNext)"
|
|
|
- :value="subNext.Menu.resourcecode">
|
|
|
- {{subNext.Menu.resourcename}}
|
|
|
- </a-checkbox>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- </a-checkbox-group> -->
|
|
|
- </div>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- </a-form>
|
|
|
- </a-modal>
|
|
|
+ <!-- 新增权限模板 -->
|
|
|
+ <a-modal class="commonModal add-roles"
|
|
|
+ title="新增权限模板"
|
|
|
+ v-model:visible="visible"
|
|
|
+ @cancel="cancel"
|
|
|
+ centered
|
|
|
+ :maskClosable="false"
|
|
|
+ width="1230px">
|
|
|
+ <template #footer>
|
|
|
+ <a-button key="cancel"
|
|
|
+ type="primary"
|
|
|
+ :loading="loading"
|
|
|
+ @click="cancel">取消
|
|
|
+ </a-button>
|
|
|
+ <a-button key="submit"
|
|
|
+ type="primary"
|
|
|
+ :loading="loading"
|
|
|
+ @click="submit">新增
|
|
|
+ </a-button>
|
|
|
+ </template>
|
|
|
+ <a-form class="inlineForm"
|
|
|
+ ref="formRef"
|
|
|
+ :model="formState"
|
|
|
+ :rules="rules">
|
|
|
+ <a-row :gutter="24">
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-form-item label="模板名称">
|
|
|
+ <a-input class="dialogInput"
|
|
|
+ style="width: 200px"
|
|
|
+ v-model:value="name"
|
|
|
+ placeholder="请输入模板名称"/>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-form-item label="权限功能"
|
|
|
+ name="">
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="24">
|
|
|
+ <div class="powerTable">
|
|
|
+ <!-- <a-checkbox-group class="commonCheckboxGroup"
|
|
|
+
|
|
|
+ > -->
|
|
|
+ <div class="powerRow"
|
|
|
+ v-for="(item, i) in tableList"
|
|
|
+ :key="i + '0'">
|
|
|
+ <div class="powerLeft">
|
|
|
+ <a-checkbox v-model:checked="item.Menu.ishadrole">
|
|
|
+ {{item.Menu.resourcename}}
|
|
|
+ </a-checkbox>
|
|
|
+ </div>
|
|
|
+ <div class="powerRight">
|
|
|
+ <div class="line"
|
|
|
+ v-for="(sub, j) in item.SubMenu"
|
|
|
+ :key="j + '1'">
|
|
|
+ <div class="left">
|
|
|
+ <a-checkbox v-model:checked="sub.Menu.ishadrole"
|
|
|
+ @change="secondChange(item, sub)"
|
|
|
+ :value="sub.Menu.resourcecode">
|
|
|
+ {{sub.Menu.resourcename}}
|
|
|
+ </a-checkbox>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <a-checkbox v-for="(subNext, l) in sub.SubMenu"
|
|
|
+ :key="l + '3'"
|
|
|
+ v-model:checked="subNext.Menu.ishadrole"
|
|
|
+ @change="thirdChange(item, sub, subNext)"
|
|
|
+ :value="subNext.Menu.resourcecode">
|
|
|
+ {{subNext.Menu.resourcename}}
|
|
|
+ </a-checkbox>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- </a-checkbox-group> -->
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-form>
|
|
|
+ </a-modal>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
-import { closeModal } from '@/common/setup/modal/index';
|
|
|
-import { defineComponent, ref, watchEffect } from 'vue';
|
|
|
-import { handleBusinessForm } from '../setup';
|
|
|
-import { ErmcpRoleMenuEx } from '@/services/go/ermcp/account/interface';
|
|
|
-import { queryResultLoadingAndInfo, requestResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
|
|
|
-import { QueryAccMgrRoleMenu } from '@/services/go/ermcp/account';
|
|
|
-import { message } from 'ant-design-vue';
|
|
|
-import {roleOperate} from '@/services/proto/accountinfo'
|
|
|
+ import {closeModal} from '@/common/setup/modal/index';
|
|
|
+ import {defineComponent, ref, watchEffect} from 'vue';
|
|
|
+ import {handleBusinessForm} from '../setup';
|
|
|
+ import {ErmcpRoleMenuEx} from '@/services/go/ermcp/account/interface';
|
|
|
+ import {queryResultLoadingAndInfo, requestResultLoadingAndInfo} from '@/common/methods/request/resultInfo';
|
|
|
+ import {QueryAccMgrRoleMenu} from '@/services/go/ermcp/account';
|
|
|
+ import {message} from 'ant-design-vue';
|
|
|
+ import {roleOperate} from '@/services/proto/accountinfo'
|
|
|
+ import {ManagerRoleOperateReq, MemberFuncMenu} from "@/services/proto/accountinfo/interface";
|
|
|
+ import {getUserId} from "@/services/bus/account";
|
|
|
+ import {getAreaUserId} from "@/services/bus/user";
|
|
|
+ import {getLongTypeLoginID} from "@/services/bus/login";
|
|
|
+
|
|
|
+ export default defineComponent({
|
|
|
+ name: 'account_info_manager_btn_add',
|
|
|
+ setup(props, context) {
|
|
|
+ // 控制关闭弹窗
|
|
|
+ const {visible, cancel} = closeModal('account_info_manager_btn_add');
|
|
|
+ const {rules, formState, formRef} = handleBusinessForm();
|
|
|
+ const loading = ref<boolean>(false);
|
|
|
+ const tableList = ref<ErmcpRoleMenuEx[]>([]);
|
|
|
+ const name = ref<string>('')
|
|
|
+ watchEffect(() => {
|
|
|
+ if (visible.value) {
|
|
|
+ queryResultLoadingAndInfo(QueryAccMgrRoleMenu, loading).then((res) => {
|
|
|
+ console.log('res', res);
|
|
|
+
|
|
|
+ tableList.value = res;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
|
|
|
-export default defineComponent({
|
|
|
- name: 'account_info_manager_btn_add',
|
|
|
- setup(props, context) {
|
|
|
- // 控制关闭弹窗
|
|
|
- const { visible, cancel } = closeModal('account_info_manager_btn_add');
|
|
|
- const { rules, formState, formRef } = handleBusinessForm();
|
|
|
- const loading = ref<boolean>(false);
|
|
|
- const tableList = ref<ErmcpRoleMenuEx[]>([]);
|
|
|
- const name = ref<string>('')
|
|
|
- watchEffect(() => {
|
|
|
- if (visible.value) {
|
|
|
- queryResultLoadingAndInfo(QueryAccMgrRoleMenu, loading).then((res) => {
|
|
|
- console.log('res', res);
|
|
|
-
|
|
|
- tableList.value = res;
|
|
|
+ function submit() {
|
|
|
+ const result: string[] = []
|
|
|
+ // 处理已经勾选的数据
|
|
|
+ tableList.value.forEach(first => {
|
|
|
+ if (first.Menu.ishadrole) {
|
|
|
+ result.push(first.Menu.resourcecode)
|
|
|
+ first.SubMenu.forEach(second => {
|
|
|
+ if (second.Menu.ishadrole) {
|
|
|
+ result.push(second.Menu.resourcecode)
|
|
|
+ second.SubMenu.forEach(third => {
|
|
|
+ if (third.Menu.ishadrole) {
|
|
|
+ result.push(third.Menu.resourcecode)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (!name) {
|
|
|
+ message.error('请输入模板名称')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (result.length === 0) {
|
|
|
+ message.error('请至少选择一个权限')
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ debugger
|
|
|
+ const reqParam: ManagerRoleOperateReq = {
|
|
|
+ autoid: getUserId(), // uint64 角色ID
|
|
|
+ operatetype: 1, // uint32 操作类型-1:新增 2:修改
|
|
|
+ areauserid: getAreaUserId(), // uint64 所属机构
|
|
|
+ modifierid: Number(getLongTypeLoginID()), // uint64 修改人ID
|
|
|
+ rolename: name.value, // string 角色名称
|
|
|
+ memberfuncmenus: result.map(item => {
|
|
|
+ return {
|
|
|
+ resourcecode: item
|
|
|
+ } as MemberFuncMenu
|
|
|
+ }) // MemberFuncMenu 机构菜单
|
|
|
+
|
|
|
+ }
|
|
|
+ requestResultLoadingAndInfo(roleOperate, reqParam, loading, ['新增成功', '新增失败:']).then(() => {
|
|
|
+ cancel();
|
|
|
+ context.emit('refresh');
|
|
|
});
|
|
|
}
|
|
|
- });
|
|
|
- function submit() {
|
|
|
- const result: string[] = []
|
|
|
- // 处理已经勾选的数据
|
|
|
- tableList.value.forEach(first => {
|
|
|
- if(first.Menu.ishadrole) {
|
|
|
- result.push(first.Menu.resourcecode)
|
|
|
- first.SubMenu.forEach(second => {
|
|
|
- if(second.Menu.ishadrole) {
|
|
|
- result.push(second.Menu.resourcecode)
|
|
|
- second.SubMenu.forEach(third => {
|
|
|
- if(third.Menu.ishadrole) {
|
|
|
- result.push(third.Menu.resourcecode)
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
+
|
|
|
+ function secondChange(item: ErmcpRoleMenuEx, sub: ErmcpRoleMenuEx) {
|
|
|
+ if (sub.Menu.ishadrole) {
|
|
|
+ item.Menu.ishadrole = true
|
|
|
}
|
|
|
- })
|
|
|
- if(!name) {
|
|
|
- message.error('请输入模板名称')
|
|
|
- return
|
|
|
}
|
|
|
- if(result.length === 0) {
|
|
|
- message.error('请至少选择一个权限')
|
|
|
- return
|
|
|
+
|
|
|
+ function thirdChange(item: ErmcpRoleMenuEx, sub: ErmcpRoleMenuEx, subNext: ErmcpRoleMenuEx) {
|
|
|
+ if (subNext.Menu.ishadrole) {
|
|
|
+ sub.Menu.ishadrole = true
|
|
|
+ item.Menu.ishadrole = true
|
|
|
+ }
|
|
|
}
|
|
|
- const reqParam = {}
|
|
|
- requestResultLoadingAndInfo(roleOperate, reqParam, loading, ['新增成功', '新增失败:']).then(() => {
|
|
|
- cancel();
|
|
|
- context.emit('refresh');
|
|
|
- });
|
|
|
- }
|
|
|
- function secondChange(item: ErmcpRoleMenuEx, sub: ErmcpRoleMenuEx) {
|
|
|
- if(sub.Menu.ishadrole) {
|
|
|
- item.Menu.ishadrole = true
|
|
|
- }
|
|
|
- }
|
|
|
- function thirdChange(item: ErmcpRoleMenuEx, sub: ErmcpRoleMenuEx, subNext: ErmcpRoleMenuEx) {
|
|
|
- if(subNext.Menu.ishadrole) {
|
|
|
- sub.Menu.ishadrole = true
|
|
|
- item.Menu.ishadrole = true
|
|
|
- }
|
|
|
- }
|
|
|
- return {
|
|
|
- formState,
|
|
|
- rules,
|
|
|
- formRef,
|
|
|
- visible,
|
|
|
- name,
|
|
|
- cancel,
|
|
|
- submit,
|
|
|
- secondChange,
|
|
|
- thirdChange,
|
|
|
- loading,
|
|
|
- tableList,
|
|
|
- };
|
|
|
- },
|
|
|
-});
|
|
|
+
|
|
|
+ return {
|
|
|
+ formState,
|
|
|
+ rules,
|
|
|
+ formRef,
|
|
|
+ visible,
|
|
|
+ name,
|
|
|
+ cancel,
|
|
|
+ submit,
|
|
|
+ secondChange,
|
|
|
+ thirdChange,
|
|
|
+ loading,
|
|
|
+ tableList,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ });
|
|
|
</script>
|
|
|
|
|
|
<style lang="less">
|
|
|
-.add-roles {
|
|
|
- .ant-modal-content {
|
|
|
- .ant-modal-body {
|
|
|
- overflow-x: hidden;
|
|
|
- }
|
|
|
- }
|
|
|
- .powerTable {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- border: 3px solid @m-grey11;
|
|
|
- background-color: @m-black12;
|
|
|
- font-size: 14px;
|
|
|
- color: @m-white0;
|
|
|
- .flex;
|
|
|
- flex-direction: column;
|
|
|
- overflow-x: auto;
|
|
|
- overflow-y: hidden;
|
|
|
- .ant-checkbox-group.commonCheckboxGroup .ant-checkbox-wrapper {
|
|
|
- width: 120px;
|
|
|
- span + span {
|
|
|
- margin-right: 0;
|
|
|
+ .add-roles {
|
|
|
+ .ant-modal-content {
|
|
|
+ .ant-modal-body {
|
|
|
+ overflow-x: hidden;
|
|
|
}
|
|
|
}
|
|
|
- .powerRow {
|
|
|
+
|
|
|
+ .powerTable {
|
|
|
width: 100%;
|
|
|
- display: inline-flex;
|
|
|
- border-bottom: 3px solid @m-grey11;
|
|
|
- > div {
|
|
|
- align-self: center;
|
|
|
- align-items: center;
|
|
|
- white-space: nowrap;
|
|
|
- line-height: 40px;
|
|
|
- }
|
|
|
- .powerLeft {
|
|
|
+ height: 100%;
|
|
|
+ border: 3px solid @m-grey11;
|
|
|
+ background-color: @m-black12;
|
|
|
+ font-size: 14px;
|
|
|
+ color: @m-white0;
|
|
|
+ .flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow-x: auto;
|
|
|
+ overflow-y: hidden;
|
|
|
+
|
|
|
+ .ant-checkbox-group.commonCheckboxGroup .ant-checkbox-wrapper {
|
|
|
width: 120px;
|
|
|
- padding: 0 8px;
|
|
|
+
|
|
|
+ span + span {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
}
|
|
|
- .powerRight {
|
|
|
- flex: 1;
|
|
|
- max-width: calc(100% - 120px);
|
|
|
- .flex;
|
|
|
- flex-direction: column;
|
|
|
- .line {
|
|
|
- width: 100%;
|
|
|
- display: inline-flex;
|
|
|
- border-bottom: 3px solid @m-grey11;
|
|
|
- > div {
|
|
|
- padding: 0 8px;
|
|
|
- }
|
|
|
- .left {
|
|
|
- width: 140px;
|
|
|
- min-width: 140px;
|
|
|
- border-left: 3px solid @m-grey11;
|
|
|
- border-right: 3px solid @m-grey11;
|
|
|
+
|
|
|
+ .powerRow {
|
|
|
+ width: 100%;
|
|
|
+ display: inline-flex;
|
|
|
+ border-bottom: 3px solid @m-grey11;
|
|
|
+
|
|
|
+ > div {
|
|
|
+ align-self: center;
|
|
|
+ align-items: center;
|
|
|
+ white-space: nowrap;
|
|
|
+ line-height: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .powerLeft {
|
|
|
+ width: 120px;
|
|
|
+ padding: 0 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .powerRight {
|
|
|
+ flex: 1;
|
|
|
+ max-width: calc(100% - 120px);
|
|
|
+ .flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .line {
|
|
|
+ width: 100%;
|
|
|
+ display: inline-flex;
|
|
|
+ border-bottom: 3px solid @m-grey11;
|
|
|
+
|
|
|
+ > div {
|
|
|
+ padding: 0 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .left {
|
|
|
+ width: 140px;
|
|
|
+ min-width: 140px;
|
|
|
+ border-left: 3px solid @m-grey11;
|
|
|
+ border-right: 3px solid @m-grey11;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ flex: 1;
|
|
|
+ width: calc(100% - 120px);
|
|
|
+ }
|
|
|
}
|
|
|
- .right {
|
|
|
- flex: 1;
|
|
|
- width: calc(100% - 120px);
|
|
|
+
|
|
|
+ .line:last-child {
|
|
|
+ border-bottom: 0;
|
|
|
}
|
|
|
}
|
|
|
- .line:last-child {
|
|
|
- border-bottom: 0;
|
|
|
- }
|
|
|
+
|
|
|
+ // .powerMiddle {
|
|
|
+ // width: 180px;
|
|
|
+ // .flex;
|
|
|
+ // flex-direction: column;
|
|
|
+ // div {
|
|
|
+ // width: 100%;
|
|
|
+ // height: 40px;
|
|
|
+ // line-height: 40px;
|
|
|
+ // padding: 0 8px;
|
|
|
+ // border: 3px solid @m-grey11;
|
|
|
+ // border-top: 0;
|
|
|
+ // }
|
|
|
+ // div:last-child {
|
|
|
+ // border-bottom: 0;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // .powerRight {
|
|
|
+ // flex: 1;
|
|
|
+ // .flex;
|
|
|
+ // flex-direction: column;
|
|
|
+ // div {
|
|
|
+ // width: 100%;
|
|
|
+ // height: 40px;
|
|
|
+ // line-height: 40px;
|
|
|
+ // padding: 0 8px;
|
|
|
+ // justify-content: flex-start;
|
|
|
+ // border-bottom: 3px solid @m-grey11;
|
|
|
+ // }
|
|
|
+ // div:last-child {
|
|
|
+ // border-bottom: 0;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
}
|
|
|
- // .powerMiddle {
|
|
|
- // width: 180px;
|
|
|
- // .flex;
|
|
|
- // flex-direction: column;
|
|
|
- // div {
|
|
|
- // width: 100%;
|
|
|
- // height: 40px;
|
|
|
- // line-height: 40px;
|
|
|
- // padding: 0 8px;
|
|
|
- // border: 3px solid @m-grey11;
|
|
|
- // border-top: 0;
|
|
|
- // }
|
|
|
- // div:last-child {
|
|
|
- // border-bottom: 0;
|
|
|
- // }
|
|
|
- // }
|
|
|
- // .powerRight {
|
|
|
- // flex: 1;
|
|
|
- // .flex;
|
|
|
- // flex-direction: column;
|
|
|
- // div {
|
|
|
- // width: 100%;
|
|
|
- // height: 40px;
|
|
|
- // line-height: 40px;
|
|
|
- // padding: 0 8px;
|
|
|
- // justify-content: flex-start;
|
|
|
- // border-bottom: 3px solid @m-grey11;
|
|
|
- // }
|
|
|
- // div:last-child {
|
|
|
- // border-bottom: 0;
|
|
|
- // }
|
|
|
- // }
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
</style
|
|
|
>;
|
huangbin