|
|
@@ -15,8 +15,8 @@
|
|
|
</ElInput>
|
|
|
</ElFormItem>
|
|
|
<div style=" width: 100%;height: calc(100vh - 350px); overflow-y: auto;" class="container">
|
|
|
- <div class="pad-1 roleitem " :class="{ active: roleId === item.id }" v-for="(item, index) in tenantList"
|
|
|
- :key="index" @click="roleitemClick(item)">
|
|
|
+ <div class="pad-1 roleitem " :class="{ active: roleInfo.systemCode === item.sysCode }"
|
|
|
+ v-for="(item, index) in tenantList" :key="index" @click="roleitemClick(item)">
|
|
|
<span>{{ item.sysName }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -29,37 +29,34 @@
|
|
|
<div class="flex j-s a-c">
|
|
|
<span class="strong">操作权限</span>
|
|
|
<div>
|
|
|
- <ElButton type="default" @click="roleSubmit">保存</ElButton>
|
|
|
+ <ElButton type="default" @click="roleSubmit" v-auth="'tenantPermissions.edit'">保存</ElButton>
|
|
|
</div>
|
|
|
</div>
|
|
|
<ElDivider style="margin-top: 10px;"></ElDivider>
|
|
|
- <ElTree style="max-height: 600px;overflow-y: auto;" ref="treeRef" :data="treeData" :props="defaultProps"
|
|
|
- show-checkbox node-key="id" :default-checked-keys="checkedKeys" @check="handleCheckChange"
|
|
|
- @check-change="treecheckChange" />
|
|
|
-
|
|
|
+ <div v-if="roleInfo.systemCode">
|
|
|
+ <el-checkbox v-model="treekAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">
|
|
|
+ 全选
|
|
|
+ </el-checkbox>
|
|
|
+ <el-checkbox-group v-model="checkedCities" class="flex f-c" @change="handleCheckedCitiesChange">
|
|
|
+ <el-checkbox v-for="item in treeDatalevelOne" :key="item" :label="item" :value="item">
|
|
|
+ {{ item }}
|
|
|
+ </el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
+ <el-empty v-else image="../../../src/assets/images/empty.png" />
|
|
|
</ElCol>
|
|
|
</ElRow>
|
|
|
|
|
|
</PageMain>
|
|
|
- <!-- <template #title>
|
|
|
- <div class="flex j-s a-c">
|
|
|
- <span class="strong">角色管理</span>
|
|
|
- <div>
|
|
|
- <ElButton type="primary" @click="roleSubmit">提交</ElButton>
|
|
|
- <ElButton v-if="roleInfo.id" type="danger" @click="roleDelClick">删除</ElButton>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script lang='ts' setup>
|
|
|
import { ref, reactive, onBeforeMount } from 'vue';
|
|
|
-import { ElTree, ElMessage } from 'element-plus';
|
|
|
+import { ElMessage } from 'element-plus';
|
|
|
import { TreeNode } from '@/utils/composables/routeUtils'; // 导入工具方法
|
|
|
import { Search } from '@element-plus/icons-vue'
|
|
|
import api from '@/api'
|
|
|
-import Message from 'vue-m-message'
|
|
|
|
|
|
onBeforeMount(() => {
|
|
|
findpage()//租户列表
|
|
|
@@ -70,88 +67,88 @@ interface tenantList {
|
|
|
id: string,
|
|
|
[key: string]: any
|
|
|
}
|
|
|
-const treeRef = ref<InstanceType<typeof ElTree>>();
|
|
|
-const roleId = ref<string>("");
|
|
|
-const PageNum = ref<number>(1);
|
|
|
-const PageSize = ref<number>(1000);
|
|
|
-const checkedKeys = ref<string[]>([])
|
|
|
-
|
|
|
-const identifier = ref(false)
|
|
|
const roleInfo = reactive<{
|
|
|
systemCode: string;
|
|
|
- permsId: (number | string)[],
|
|
|
perms: object[],
|
|
|
- systemConfig: object[],
|
|
|
+ permsStr: string,
|
|
|
}>({
|
|
|
systemCode: "",//角色
|
|
|
- systemConfig: [],//菜单json
|
|
|
- permsId: [],//权限id
|
|
|
+ permsStr: '',//菜单json
|
|
|
perms: [],//权限标识
|
|
|
});
|
|
|
-const searchValue = ref<string>()
|
|
|
-const tenantList = ref<tenantList>()
|
|
|
-const treeData = ref<TreeNode[]>([]);//菜单数据
|
|
|
-const selectedData = ref<TreeNode[]>([]);
|
|
|
-const defaultProps = {
|
|
|
- children: 'children',
|
|
|
- label: 'title',
|
|
|
-};
|
|
|
-/**
|
|
|
- *
|
|
|
- * @param checkedNodes 选中的节点数据
|
|
|
- * @param show 选中状态
|
|
|
- */
|
|
|
-const treecheckChange = (checkedNodes: any, show: boolean, item: any) => {
|
|
|
- if (show) {
|
|
|
- selectedData.value.push(checkedNodes)
|
|
|
- } else {
|
|
|
- let updatedNodes = selectedData.value.filter((node: any) => node.id !== checkedNodes.id);
|
|
|
- selectedData.value = updatedNodes;
|
|
|
- }
|
|
|
+const treekAll = ref(true)//全选
|
|
|
+const isIndeterminate = ref(true)
|
|
|
+const checkedCities = ref([])//默认选中
|
|
|
+const PageNum = ref<number>(1);//页数
|
|
|
+const PageSize = ref<number>(1000);//条数
|
|
|
+const searchValue = ref<string>()//检索条件
|
|
|
+const tenantList = ref<tenantList>()//租户列表
|
|
|
+const treeData = ref<TreeNode[]>([]);//菜单原始数据
|
|
|
+const treeDatalevelOne = ref();//一级菜单数据
|
|
|
+const handleCheckAllChange = (val: any) => {
|
|
|
+ checkedCities.value = val ? treeDatalevelOne.value : []
|
|
|
+ isIndeterminate.value = false
|
|
|
+}
|
|
|
+const handleCheckedCitiesChange = (value: string[]) => {
|
|
|
+ const checkedCount = value.length
|
|
|
+ treekAll.value = checkedCount === treeDatalevelOne.value.length
|
|
|
+ isIndeterminate.value = checkedCount > 0 && checkedCount < treeDatalevelOne.value.length;
|
|
|
+
|
|
|
+}
|
|
|
+const treeDatalevelFun = () => {
|
|
|
+ let list: any = [];
|
|
|
+ treeData.value.map((val: any) => {
|
|
|
+ list.push(val.title)
|
|
|
+ })
|
|
|
+ treeDatalevelOne.value = list;
|
|
|
+ checkedCities.value = treekAll.value ? treeDatalevelOne.value : []
|
|
|
+}
|
|
|
+
|
|
|
+const dataSetProcessing = () => {
|
|
|
+ let menuList: any = [];
|
|
|
+ treeData.value.map(value => {
|
|
|
+ checkedCities.value.map(val => {
|
|
|
+ if (value.title === val) {
|
|
|
+ menuList.push(value)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ roleInfo.perms = menuList;
|
|
|
+ roleInfo.permsStr = JSON.stringify(menuList);
|
|
|
}
|
|
|
-/**
|
|
|
- *
|
|
|
- * @param _checkedNodes 选中的节点id集合
|
|
|
- * @param checkedInfo 选中的节点对象
|
|
|
- */
|
|
|
-const handleCheckChange = (
|
|
|
- _checkedNodes: TreeNode[],
|
|
|
- checkedInfo: {
|
|
|
- checkedKeys: number[];
|
|
|
- checkedNodes: TreeNode[];
|
|
|
- halfCheckedKeys: number[];
|
|
|
- halfCheckedNodes: TreeNode[];
|
|
|
- }
|
|
|
-) => {
|
|
|
- roleInfo.permsId = checkedInfo.checkedKeys;
|
|
|
- let filteredNodes = checkedInfo.checkedNodes.filter(node => node.type === '2');
|
|
|
- roleInfo.perms = [];
|
|
|
- roleInfo.perms = filteredNodes;
|
|
|
-};
|
|
|
const getMenu = () => {
|
|
|
api.tenantApi.getSystemConfig().then((res: any) => {
|
|
|
if (res.code == '200') {
|
|
|
treeData.value = JSON.parse(res.data.sysConfig)
|
|
|
- console.log(treeData.value)
|
|
|
+ treeDatalevelFun();
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
+// 提交
|
|
|
async function roleSubmit() {
|
|
|
- api.tenantApi.updatePerms(roleInfo).then((res: any) => {
|
|
|
+ dataSetProcessing();
|
|
|
+ await api.tenantApi.updatePerms(roleInfo).then((res: any) => {
|
|
|
if (res.code == '200') {
|
|
|
ElMessage({
|
|
|
type: 'success',
|
|
|
- message: res.msg,
|
|
|
+ message: "租户权限保存成功",
|
|
|
plain: true,
|
|
|
})
|
|
|
+ findpage()//租户列表
|
|
|
} else {
|
|
|
}
|
|
|
});
|
|
|
-
|
|
|
}
|
|
|
-
|
|
|
+//租户列表事件
|
|
|
async function roleitemClick(item: { sysCode: string }) {
|
|
|
roleInfo.systemCode = item.sysCode;
|
|
|
+ api.tenantApi.getSystemPerms({ systemCode: item.sysCode }).then((res: any) => {
|
|
|
+ if (res.code == '200') {
|
|
|
+ findpage()//租户列表
|
|
|
+ getMenu();//获取租户菜单
|
|
|
+ } else {
|
|
|
+ }
|
|
|
+ });
|
|
|
}
|
|
|
const findpage = () => {
|
|
|
api.tenantApi.sysList({ pageNum: PageNum.value, pageSize: PageSize.value, searchValue: searchValue.value }).then((res: any) => {
|
|
|
@@ -160,15 +157,7 @@ const findpage = () => {
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
-function resetForm() {
|
|
|
- identifier.value = true;
|
|
|
- roleInfo.permsId = [];
|
|
|
- roleInfo.perms = [];
|
|
|
- roleInfo.systemConfig = [];
|
|
|
- if (treeRef.value) {
|
|
|
- treeRef.value.setCheckedKeys([]);
|
|
|
- }
|
|
|
-}
|
|
|
+
|
|
|
|
|
|
|
|
|
</script>
|