Commit 53e9703e authored by 孙浩然's avatar 孙浩然

BI主题菜单维护

parent 8c2efea8
......@@ -82,7 +82,7 @@
roleList.value = ret.data.map((item) => {
return {
label: item.roleName,
value: item.roleCode
value: item.roleId
};
});
}
......@@ -99,7 +99,7 @@
required: true
},
{
label: '主题',
label: '关联角色',
prop: 'roleIds',
type: 'multipleSelect',
options: roleList.value,
......
......@@ -2,7 +2,7 @@
<ele-loading :loading="pageLoading" class="h-full">
<div class="wrapper">
<div class="wrapper-item">
<vxe-grid ref="xGrid" v-bind="lgridOptions">
<vxe-grid ref="xGrid" v-bind="lgridOptions" v-on="gridEvents">
<template #left_buttons_slot>
<div class="p-l-4px flex flex-content-start">
<FcCardTip title="主题" />
......@@ -22,15 +22,21 @@
<div class="wrapper-right-item">
<div class="flex flex-content-start">
<FcCardTip title="移动端" />
<el-button type="primary" size="small" class="m-l-4px">
<el-button
type="primary"
size="small"
class="m-l-4px"
@click="handleSaveByMobile"
>
保存配置
</el-button>
</div>
<el-tree
ref="mobileTreeRef"
class="m-t-6px"
:props="props"
:load="loadNode"
lazy
:data="mobileData"
node-key="menuId"
show-checkbox
@check-change="handleCheckChange"
/>
......@@ -39,44 +45,94 @@
<div class="wrapper-right-item">
<div class="flex flex-content-start">
<FcCardTip title="Web端" />
<el-button type="primary" size="small" class="m-l-4px">
<el-button
type="primary"
size="small"
class="m-l-4px"
@click="handleSaveByWeb"
>
保存配置
</el-button>
</div>
<el-tree
ref="webTreeRef"
class="m-t-6px"
:props="props"
:load="loadNode"
lazy
:data="webData"
node-key="menuId"
show-checkbox
@check-change="handleCheckChange"
/>
</div>
</div>
</div>
<AddTheme ref="AddThemeRef" />
<!-- 添加主题 弹窗-->
<AddTheme ref="AddThemeRef" @reload="fetchTheme" />
</ele-loading>
</template>
<script lang="ts" setup>
import { VxeGridProps, VxeGridListeners } from 'vxe-table';
import { tryit } from 'radash';
// tools
import { FcCardTip } from '@fancy-design/coms';
import { EleMessage } from 'ele-admin-plus';
// apis
import themeApi from '@/api/themeApi';
// types
// coms
import AddTheme from './components/AddTheme.vue';
// 获取主题
onMounted(() => {
fetchTheme();
fetchTheme(); // 获取主题
});
const pageLoading = ref(false);
const xGrid = ref();
const lgridOptions = reactive<VxeGridProps>({
round: true,
stripe: true,
size: 'mini',
height: '100%',
rowConfig: {
isCurrent: true,
isHover: true
},
columns: [
{
field: 'themeName',
title: 'BI主题'
},
{
field: 'roleNames',
title: '关联角色'
}
],
toolbarConfig: {
slots: {
buttons: 'left_buttons_slot'
}
}
});
const themeData: any = ref({}); // 选中的主题
const mobileTreeRef = ref(); // 移动端菜单树
const webTreeRef = ref(); // web菜单树
// 获取主题
const fetchTheme = async () => {
pageLoading.value = true;
const [, ret] = await tryit(themeApi.getThemeList)();
if (ret?.code === 200) {
lgridOptions.data = ret.data;
lgridOptions.data = ret.data || [];
if (lgridOptions.data.length) {
xGrid.value.setCurrentRow(ret.data[0]);
themeData.value = ret.data[0];
getMenuByMobile(); // 获取移动端菜单
getMenuByWeb(); // 获取web端菜单
}
}
pageLoading.value = false;
};
......@@ -93,8 +149,94 @@
let count = 1;
const props = {
label: 'name',
children: 'zones'
label: 'menuName',
children: 'children'
};
const mobileData: any = ref([]); // 移动端菜单
const webData: any = ref([]); // web端菜单
// 获取移动端菜单
const getMenuByMobile = async () => {
let params = {
menuType: 1,
themeId: themeData.value.themeId
};
const res = await themeApi.getMenuTreeWithThemeTag(params);
if (res.code === 200) {
mobileData.value = res.data;
let list = getTagOneMenuIds(res.data);
mobileTreeRef.value.setCheckedKeys(list); // 设置选中菜单
}
};
// 获取web端菜单
const getMenuByWeb = async () => {
let params = {
menuType: 0,
themeId: themeData.value.themeId
};
const res = await themeApi.getMenuTreeWithThemeTag(params);
if (res.code === 200) {
webData.value = res.data;
let list = getTagOneMenuIds(res.data);
webTreeRef.value.setCheckedKeys(list); // 设置选中菜单
}
};
// 获取选中菜单id
const getTagOneMenuIds = (data) => {
let result: any = [];
data.forEach((item) => {
if (item.tag === 1) {
result.push(item.menuId);
}
if (item.children && item.children.length > 0) {
result = result.concat(getTagOneMenuIds(item.children));
}
});
return result;
};
// 表格事件
const gridEvents: VxeGridListeners = {
cellClick({ rowIndex }) {
xGrid.value.setCurrentRow(lgridOptions.data[rowIndex]);
themeData.value = lgridOptions.data[rowIndex];
getMenuByMobile(); // 获取移动端菜单
getMenuByWeb(); // 获取web端菜单
}
};
// 移动端保存配置
const handleSaveByMobile = async () => {
console.log(mobileTreeRef.value.getCheckedKeys(true));
let menuIds = mobileTreeRef.value.getCheckedKeys(true);
let params = {
themeId: themeData.value.themeId,
menuType: 1,
menuIds: menuIds // 获取选中的菜单ID
};
const res = await themeApi.addThemeMenu(params);
if (res.code === 200) {
EleMessage.success('保存成功');
getMenuByMobile(); // 获取移动端菜单
}
};
// web端保存配置
const handleSaveByWeb = async () => {
let menuIds = webTreeRef.value.getCheckedKeys(true);
let params = {
themeId: themeData.value.themeId,
menuType: 0,
menuIds: menuIds // 获取选中的菜单ID
};
const res = await themeApi.addThemeMenu(params);
if (res.code === 200) {
EleMessage.success('保存成功');
getMenuByWeb(); // 获取Web菜单
}
};
const handleCheckChange = (
......@@ -102,7 +244,7 @@
checked: boolean,
indeterminate: boolean
) => {
console.log(data, checked, indeterminate);
// console.log(data, checked, indeterminate);
};
const loadNode = (node, resolve) => {
......@@ -138,27 +280,6 @@
resolve(data);
}, 500);
};
const pageLoading = ref(false);
import { VxeGridProps } from 'vxe-table';
import { tryit } from 'radash';
const lgridOptions = reactive<VxeGridProps>({
round: true,
size: 'mini',
height: '100%',
columns: [
{
field: 'name',
title: '姓名'
}
],
toolbarConfig: {
slots: {
buttons: 'left_buttons_slot'
}
}
});
</script>
<style lang="scss" scoped>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment