update

src/common/constants/buttonType.ts

@@ -44,6 +44,10 @@ export interface ButtonType {
     account_info_manager_btn_child_add: string; // 管理子账户 新增
     account_info_manager_btn_modify: string; // 管理账户 修改
     account_info_manager_btn_setting: string; // 管理账户 权限设置
+    account_info_manager_btn_setting_modify: string; // 管理账户 权限修改
+    account_info_manager_btn_setting_delete: string; // 管理账户 权限删除
+    account_info_manager_btn_setting_detail: string; // 管理账户 权限详情
+
     account_info_manager_btn_permission_add: string; // 管理账户 新增
     account_info_manager_btn_reset: string; // 管理账户 重置密码
     account_info_manager_btn_locked: string; // 管理账户 锁定

src/common/setup/table/event.ts

@@ -16,7 +16,12 @@ export function getTableEvent<T>(param: TableEventCB) {
             onClick: () => {  // 表格点击
                 selectedRow.value = record
                 const value = expandedRowKeys.value;
-                expandedRowKeys.value = value.length ? [] : [`${index}`];
+                if (value.length) {
+                    const key = value[1];
+                    expandedRowKeys.value = key === index.toString() ? [] : [`${index}`];
+                } else {
+                    expandedRowKeys.value = [`${index}`]
+                }
                 param.clickCB && param.clickCB()
             },
             // onDblclick: () => { // 双击
@@ -29,6 +34,8 @@ export function getTableEvent<T>(param: TableEventCB) {
         };
     }
     function btnClick(record: T) {
+        console.log('record', record);
+
         selectedRow.value = record
     }
     return { expandedRowKeys, selectedRow, Rowclick, btnClick }

src/views/information/account_info/compoments/managers-permission-delete/index.vue

@@ -0,0 +1,348 @@
+<template>
+  <!-- 新增权限模板 -->
+  <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">
+            <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>
+          </div>
+        </a-col>
+      </a-row>
+    </a-form>
+  </a-modal>
+</template>
+
+<script lang="ts">
+    import {closeModal} from '@/common/setup/modal/index';
+    import {defineComponent, PropType, ref, watchEffect} from 'vue';
+    import {handleBusinessForm} from '../setup';
+    import {ErmcpRole, 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_setting_delete',
+            props: {
+        selectedData: {
+            default: {},
+            type: Object as PropType<ErmcpRole>,
+        },
+    },
+        setup(props, context) {
+            // 控制关闭弹窗
+            const {visible, cancel} = closeModal('account_info_manager_btn_setting_delete');
+            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) => {
+                        tableList.value = res;
+                    });
+                    name.value = props.selectedData.modifiername
+                }
+            });
+
+            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 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,
+            };
+        },
+    });
+</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;
+            }
+        }
+
+        .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);
+                    }
+                }
+
+                .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;
+            //     }
+            // }
+        }
+    }
+    .ant-checkbox-wrapper {
+        color: @m-white0;
+        font-size: 14px;
+        .ant-checkbox {
+            margin-right: 2px;
+            .ant-checkbox-inner {
+                background: #15202b;
+                border: 1px solid #2b3f52;
+                border-radius: 3px;
+            }
+        }
+        .ant-checkbox.ant-checkbox-checked {
+            .ant-checkbox-inner {
+                &::after {
+                    border-color: #3a87f7;
+                }
+            }
+            &::after {
+                border-color: #3a87f7;
+            }
+        }
+        span + span {
+            margin-right: 15px;
+            color: @m-white0;
+            font-size: 14px;
+        }
+    }
+    .ant-checkbox-wrapper-disabled {
+        .ant-checkbox-disabled {
+            outline-color: #2b3f52;
+            .ant-checkbox-input {
+                color: @m-white0;
+                font-size: 14px;
+            }
+            .ant-checkbox-inner {
+                border-color: #2b3f52 !important;
+            }
+        }
+    }
+}
+</style
+>;

src/views/information/account_info/compoments/managers-permission-detail/index.vue

@@ -0,0 +1,348 @@
+<template>
+  <!-- 权限模板详情 -->
+  <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">
+            <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>
+          </div>
+        </a-col>
+      </a-row>
+    </a-form>
+  </a-modal>
+</template>
+
+<script lang="ts">
+    import {closeModal} from '@/common/setup/modal/index';
+    import {defineComponent, PropType, ref, watchEffect} from 'vue';
+    import {handleBusinessForm} from '../setup';
+    import {ErmcpRole, 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_setting_detail',
+            props: {
+        selectedData: {
+            default: {},
+            type: Object as PropType<ErmcpRole>,
+        },
+    },
+        setup(props, context) {
+            // 控制关闭弹窗
+            const {visible, cancel} = closeModal('account_info_manager_btn_setting_detail');
+            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) => {
+                        tableList.value = res;
+                    });
+                    name.value = props.selectedData.modifiername
+                }
+            });
+
+            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 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,
+            };
+        },
+    });
+</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;
+            }
+        }
+
+        .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);
+                    }
+                }
+
+                .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;
+            //     }
+            // }
+        }
+    }
+    .ant-checkbox-wrapper {
+        color: @m-white0;
+        font-size: 14px;
+        .ant-checkbox {
+            margin-right: 2px;
+            .ant-checkbox-inner {
+                background: #15202b;
+                border: 1px solid #2b3f52;
+                border-radius: 3px;
+            }
+        }
+        .ant-checkbox.ant-checkbox-checked {
+            .ant-checkbox-inner {
+                &::after {
+                    border-color: #3a87f7;
+                }
+            }
+            &::after {
+                border-color: #3a87f7;
+            }
+        }
+        span + span {
+            margin-right: 15px;
+            color: @m-white0;
+            font-size: 14px;
+        }
+    }
+    .ant-checkbox-wrapper-disabled {
+        .ant-checkbox-disabled {
+            outline-color: #2b3f52;
+            .ant-checkbox-input {
+                color: @m-white0;
+                font-size: 14px;
+            }
+            .ant-checkbox-inner {
+                border-color: #2b3f52 !important;
+            }
+        }
+    }
+}
+</style
+>;

src/views/information/account_info/compoments/managers-permission-modify/index.vue

@@ -0,0 +1,349 @@
+<template>
+  <!-- 修改权限模板 -->
+  <a-modal class="commonModal add-roles"
+           title="修改权限模板"
+           v-model:visible="visible"
+           @cancel="cancel"
+           centered
+           :loading="loading"
+           :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">
+            <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>
+          </div>
+        </a-col>
+      </a-row>
+    </a-form>
+  </a-modal>
+</template>
+
+<script lang="ts">
+    import {closeModal} from '@/common/setup/modal/index';
+    import {defineComponent, PropType, ref, watchEffect} from 'vue';
+    import {handleBusinessForm} from '../setup';
+    import {ErmcpRole, 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_setting_modify',
+            props: {
+        selectedData: {
+            default: {},
+            type: Object as PropType<ErmcpRole>,
+        },
+    },
+        setup(props, context) {
+            // 控制关闭弹窗
+            const {visible, cancel} = closeModal('account_info_manager_btn_setting_modify');
+            const {rules, formState, formRef} = handleBusinessForm();
+            const loading = ref<boolean>(false);
+            const tableList = ref<ErmcpRoleMenuEx[]>([]);
+            const name = ref<string>('')
+            watchEffect(() => {
+                if (visible.value) {
+                    name.value = props.selectedData.modifiername
+                    queryResultLoadingAndInfo(QueryAccMgrRoleMenu, loading).then((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 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,
+            };
+        },
+    });
+</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;
+            }
+        }
+
+        .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);
+                    }
+                }
+
+                .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;
+            //     }
+            // }
+        }
+    }
+    .ant-checkbox-wrapper {
+        color: @m-white0;
+        font-size: 14px;
+        .ant-checkbox {
+            margin-right: 2px;
+            .ant-checkbox-inner {
+                background: #15202b;
+                border: 1px solid #2b3f52;
+                border-radius: 3px;
+            }
+        }
+        .ant-checkbox.ant-checkbox-checked {
+            .ant-checkbox-inner {
+                &::after {
+                    border-color: #3a87f7;
+                }
+            }
+            &::after {
+                border-color: #3a87f7;
+            }
+        }
+        span + span {
+            margin-right: 15px;
+            color: @m-white0;
+            font-size: 14px;
+        }
+    }
+    .ant-checkbox-wrapper-disabled {
+        .ant-checkbox-disabled {
+            outline-color: #2b3f52;
+            .ant-checkbox-input {
+                color: @m-white0;
+                font-size: 14px;
+            }
+            .ant-checkbox-inner {
+                border-color: #2b3f52 !important;
+            }
+        }
+    }
+}
+</style
+>;

src/views/information/account_info/compoments/managers-permission/index.vue

@@ -15,26 +15,48 @@
                 @click="cancel">完成</a-button>
     </template>
     <a-table :columns="columns"
-             class="dialogTable"
+             class="dialogTable topTable hiddenFirstCol"
              :data-source="tableList"
+             rowKey="key"
+             :expandedRowKeys="expandedRowKeys"
+             :customRow="Rowclick"
              :pagination="false">
       <!-- 额外的展开行 -->
-      <template #expandedRowRender="{  }">
-        <!-- <BtnList :btnList="forDataBtn" /> -->
+      <template #expandedRowRender="{ record }">
+        <BtnList :selectedData="record"
+                 :btnList="btnList"
+                 @onClick="btnClick" />
       </template>
     </a-table>
+    <Modify :selectedData="selectedRow"
+            @refresh="queryTable" />
+    <Delete :selectedData="selectedRow"
+            @refresh="queryTable" />
+    <Detail :selectedData="selectedRow"
+            @refresh="queryTable" />
   </a-modal>
 </template>
 
 <script lang="ts">
-import { closeModal } from '@/common/setup/modal/index';
-import { defineComponent, ref, watchEffect } from 'vue';
-import { ErmcpRole } from '@/services/go/ermcp/account/interface';
+import { closeModal, openModal } from '@/common/setup/modal/index';
+import { ref, watchEffect } from 'vue';
+import { ErmcpRole, } from '@/services/go/ermcp/account/interface';
 import { queryResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
 import { QueryAccMgrRole } from '@/services/go/ermcp/account';
+import { defineComponent, getTableEvent, BtnList } from '@/common/export/table';
+import { BtnList as btnType} from '@/common/setup/table/interface'
+import Modify from '../managers-permission-modify/index.vue';
+import Delete from '../managers-permission-delete/index.vue'
+import Detail from '../managers-permission-detail/index.vue'
 
 export default defineComponent({
     name: 'account_info_manager_btn_setting',
+    components: {
+        BtnList,
+        Modify,
+        Delete,
+        Detail,
+    },
     setup() {
         // 控制关闭弹窗
         const { visible, cancel } = closeModal('account_info_manager_btn_setting');
@@ -45,20 +67,34 @@ export default defineComponent({
             { title: '创建时间', dataIndex: 'modifytime', key: 'modifytime' },
             { title: '状态', dataIndex: 'rolestatus', key: 'rolestatus' },
         ];
+        // 表格事件
+        const { expandedRowKeys, selectedRow, Rowclick, btnClick } = getTableEvent<ErmcpRole>({});
+        // 按钮
+        const btnList = ref<btnType[]>([
+            {lable: '修改', callback: openModal('account_info_manager_btn_setting_modify').openAction, className: 'btnPrimary'},
+            {lable: '删除', callback: openModal('account_info_manager_btn_setting_delete').openAction, className: 'btnDanger'},
+            {lable: '详情', callback: openModal('account_info_manager_btn_setting_detail').openAction, className: 'btnDeafault'},
+        ]);
         const tableList = ref<ErmcpRole[]>([]);
+        
+        function queryTable() {
+             queryResultLoadingAndInfo(QueryAccMgrRole, loading).then((res) => {
+                    tableList.value = res.map((e: ErmcpRole, i: number) => Object.assign(e, {key: `${i}`}))
+                });
+        }
         watchEffect(() => {
             if (visible.value) {
-                queryResultLoadingAndInfo(QueryAccMgrRole, loading).then((res) => {
-                    tableList.value = res;
-                });
+               queryTable()
             }
         });
         return {
             visible,
             cancel,
+             expandedRowKeys, selectedRow, Rowclick, btnClick,queryTable,
             loading,
             tableList,
             columns,
+            btnList,
         };
     },
 });