|
|
@@ -1,84 +1,84 @@
|
|
|
<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">
|
|
|
- <!-- <a-checkbox-group class="commonCheckboxGroup"
|
|
|
+ <!-- 新增权限模板 -->
|
|
|
+ <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>
|
|
|
+ <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">
|
|
|
@@ -106,9 +106,8 @@
|
|
|
const name = ref<string>('')
|
|
|
watchEffect(() => {
|
|
|
if (visible.value) {
|
|
|
- queryResultLoadingAndInfo(QueryAccMgrRoleMenu, loading).then((res) => {
|
|
|
- console.log('res', res);
|
|
|
-
|
|
|
+ const param = {userid: getUserId(), roleid: '0'}
|
|
|
+ queryResultLoadingAndInfo(QueryAccMgrRoleMenu, loading, param).then((res) => {
|
|
|
tableList.value = res;
|
|
|
});
|
|
|
}
|
|
|
@@ -190,157 +189,156 @@
|
|
|
</script>
|
|
|
|
|
|
<style lang="less">
|
|
|
- .add-roles {
|
|
|
- .ant-modal-content {
|
|
|
- .ant-modal-body {
|
|
|
- overflow-x: hidden;
|
|
|
- }
|
|
|
+.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;
|
|
|
+ .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;
|
|
|
+ .ant-checkbox-group.commonCheckboxGroup .ant-checkbox-wrapper {
|
|
|
+ width: 120px;
|
|
|
|
|
|
- span + span {
|
|
|
- margin-right: 0;
|
|
|
- }
|
|
|
+ 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;
|
|
|
- }
|
|
|
+ .powerRow {
|
|
|
+ width: 100%;
|
|
|
+ display: inline-flex;
|
|
|
+ border-bottom: 3px solid @m-grey11;
|
|
|
|
|
|
- .powerLeft {
|
|
|
- width: 120px;
|
|
|
- padding: 0 8px;
|
|
|
- }
|
|
|
+ > div {
|
|
|
+ align-self: center;
|
|
|
+ align-items: center;
|
|
|
+ white-space: nowrap;
|
|
|
+ line-height: 40px;
|
|
|
+ }
|
|
|
|
|
|
- .powerRight {
|
|
|
- flex: 1;
|
|
|
- max-width: calc(100% - 120px);
|
|
|
- .flex;
|
|
|
- flex-direction: column;
|
|
|
+ .powerLeft {
|
|
|
+ width: 120px;
|
|
|
+ padding: 0 8px;
|
|
|
+ }
|
|
|
|
|
|
- .line {
|
|
|
- width: 100%;
|
|
|
- display: inline-flex;
|
|
|
- border-bottom: 3px solid @m-grey11;
|
|
|
+ .powerRight {
|
|
|
+ flex: 1;
|
|
|
+ max-width: calc(100% - 120px);
|
|
|
+ .flex;
|
|
|
+ flex-direction: column;
|
|
|
|
|
|
- > div {
|
|
|
- padding: 0 8px;
|
|
|
- }
|
|
|
+ .line {
|
|
|
+ width: 100%;
|
|
|
+ display: inline-flex;
|
|
|
+ border-bottom: 3px solid @m-grey11;
|
|
|
|
|
|
- .left {
|
|
|
- width: 140px;
|
|
|
- min-width: 140px;
|
|
|
- border-left: 3px solid @m-grey11;
|
|
|
- border-right: 3px solid @m-grey11;
|
|
|
- }
|
|
|
+ > div {
|
|
|
+ padding: 0 8px;
|
|
|
+ }
|
|
|
|
|
|
- .right {
|
|
|
- flex: 1;
|
|
|
- width: calc(100% - 120px);
|
|
|
- }
|
|
|
+ .left {
|
|
|
+ width: 140px;
|
|
|
+ min-width: 140px;
|
|
|
+ border-left: 3px solid @m-grey11;
|
|
|
+ border-right: 3px solid @m-grey11;
|
|
|
}
|
|
|
|
|
|
- .line:last-child {
|
|
|
- border-bottom: 0;
|
|
|
+ .right {
|
|
|
+ flex: 1;
|
|
|
+ width: calc(100% - 120px);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- // .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;
|
|
|
- // }
|
|
|
- // }
|
|
|
+ .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-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;
|
|
|
- }
|
|
|
- }
|
|
|
+ }
|
|
|
+ .ant-checkbox.ant-checkbox-checked {
|
|
|
+ .ant-checkbox-inner {
|
|
|
&::after {
|
|
|
- border-color: #3A87F7;
|
|
|
+ border-color: #3a87f7;
|
|
|
}
|
|
|
}
|
|
|
- span+span {
|
|
|
- margin-right: 15px;
|
|
|
+ &::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-wrapper-disabled {
|
|
|
- .ant-checkbox-disabled {
|
|
|
- outline-color: #2B3F52;
|
|
|
- .ant-checkbox-input {
|
|
|
- color: @m-white0;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
- .ant-checkbox-inner {
|
|
|
- border-color: #2B3F52 !important;
|
|
|
- }
|
|
|
+ .ant-checkbox-inner {
|
|
|
+ border-color: #2b3f52 !important;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
+}
|
|
|
</style
|
|
|
>;
|
yu.jie