BI主题菜单维护

src/views/theme/components/AddTheme.vue

@@ -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,

src/views/theme/index.vue

@@ -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>