Showing
10 changed files
with
46 additions
and
68 deletions
| ... | ... | @@ -60,7 +60,7 @@ | 
| 60 | 60 | "sortablejs": "^1.14.0", | 
| 61 | 61 | "tinymce": "^5.8.2", | 
| 62 | 62 | "vditor": "^3.8.6", | 
| 63 | - "vue": "3.2.2", | |
| 63 | + "vue": "^3.2.31", | |
| 64 | 64 | "vue-i18n": "9.1.7", | 
| 65 | 65 | "vue-json-pretty": "^2.0.4", | 
| 66 | 66 | "vue-router": "^4.0.11", | 
| ... | ... | @@ -90,7 +90,7 @@ | 
| 90 | 90 | "@vitejs/plugin-legacy": "^1.5.1", | 
| 91 | 91 | "@vitejs/plugin-vue": "^1.4.0", | 
| 92 | 92 | "@vitejs/plugin-vue-jsx": "^1.1.7", | 
| 93 | - "@vue/compiler-sfc": "3.2.2", | |
| 93 | + "@vue/compiler-sfc": "^3.2.31", | |
| 94 | 94 | "@vue/test-utils": "^2.0.0-rc.12", | 
| 95 | 95 | "autoprefixer": "^10.3.1", | 
| 96 | 96 | "commitizen": "^4.2.4", | ... | ... | 
| 1 | 1 | import type { RouteRecordRaw } from 'vue-router'; | 
| 2 | 2 | import type { App } from 'vue'; | 
| 3 | 3 | |
| 4 | -import { createRouter, createWebHashHistory } from 'vue-router'; | |
| 4 | +import { createRouter, createWebHistory } from 'vue-router'; | |
| 5 | 5 | import { basicRoutes } from './routes'; | 
| 6 | 6 | |
| 7 | 7 | // 白名单应该包含基本静态路由 | 
| ... | ... | @@ -15,7 +15,7 @@ getRouteNames(basicRoutes); | 
| 15 | 15 | |
| 16 | 16 | // app router | 
| 17 | 17 | export const router = createRouter({ | 
| 18 | - history: createWebHashHistory(import.meta.env.VITE_PUBLIC_PATH), | |
| 18 | + history: createWebHistory(import.meta.env.VITE_PUBLIC_PATH), | |
| 19 | 19 | routes: basicRoutes as unknown as RouteRecordRaw[], | 
| 20 | 20 | strict: true, | 
| 21 | 21 | scrollBehavior: () => ({ left: 0, top: 0 }), | ... | ... | 
| ... | ... | @@ -107,7 +107,7 @@ const setting: ProjectConfig = { | 
| 107 | 107 | // Fold trigger position | 
| 108 | 108 | trigger: TriggerEnum.HEADER, | 
| 109 | 109 | // Turn on accordion mode, only show a menu | 
| 110 | - accordion: true, | |
| 110 | + accordion: false, | |
| 111 | 111 | // Switch page to close menu | 
| 112 | 112 | closeMixSidebarOnChange: false, | 
| 113 | 113 | // Module opening method ‘click’ |'hover' | ... | ... | 
| ... | ... | @@ -328,6 +328,7 @@ export const schemas: FormSchema[] = [ | 
| 328 | 328 | return { | 
| 329 | 329 | onChange(value) { | 
| 330 | 330 | const { updateSchema } = formActionType; | 
| 331 | + console.log(value); | |
| 331 | 332 | formModel.interval = ''; | 
| 332 | 333 | updateSchema({ | 
| 333 | 334 | field: 'interval', | 
| ... | ... | @@ -337,6 +338,7 @@ export const schemas: FormSchema[] = [ | 
| 337 | 338 | }, | 
| 338 | 339 | }); | 
| 339 | 340 | }, | 
| 341 | + getPopupContainer: () => document.body, | |
| 340 | 342 | options: [ | 
| 341 | 343 | { | 
| 342 | 344 | label: '最近1小时', | 
| ... | ... | @@ -386,6 +388,7 @@ export const schemas: FormSchema[] = [ | 
| 386 | 388 | }, | 
| 387 | 389 | componentProps: { | 
| 388 | 390 | placeholder: '请选择分组间隔', | 
| 391 | + getPopupContainer: () => document.body, | |
| 389 | 392 | options: [ | 
| 390 | 393 | { | 
| 391 | 394 | label: '5分钟', | 
| ... | ... | @@ -419,6 +422,7 @@ export const schemas: FormSchema[] = [ | 
| 419 | 422 | label: '数据聚合功能', | 
| 420 | 423 | component: 'Select', | 
| 421 | 424 | componentProps: { | 
| 425 | + getPopupContainer: () => document.body, | |
| 422 | 426 | options: [ | 
| 423 | 427 | { | 
| 424 | 428 | label: '最小值', | ... | ... | 
| ... | ... | @@ -29,13 +29,14 @@ | 
| 29 | 29 | @register="registerModal" | 
| 30 | 30 | title="历史数据" | 
| 31 | 31 | width="70%" | 
| 32 | + :minHeight="400" | |
| 32 | 33 | :footer="null" | 
| 33 | 34 | @cancel="cancelHistoryModal" | 
| 34 | 35 | :canFullscreen="false" | 
| 35 | 36 | > | 
| 36 | 37 | <BasicForm @register="registerForm" /> | 
| 37 | - <Empty v-show="!isNull" /> | |
| 38 | 38 | <div v-show="isNull" ref="chartRef" :style="{ height: '600px', width }"></div> | 
| 39 | + <Empty v-show="!isNull" /> | |
| 39 | 40 | </BasicModal> | 
| 40 | 41 | <DeviceDetailDrawer @register="registerDetailDrawer" /> | 
| 41 | 42 | </div> | 
| ... | ... | @@ -109,7 +110,7 @@ | 
| 109 | 110 | // 表单验证 | 
| 110 | 111 | await validate(); | 
| 111 | 112 | let { endTs, interval, agg } = getFieldsValue(); | 
| 112 | - if (!endTs) return; | |
| 113 | + if (!endTs || !keys.length) return; | |
| 113 | 114 | // 数据收集 | 
| 114 | 115 | const dataArray: any[] = []; | 
| 115 | 116 | const startTs = Date.now() - endTs; | ... | ... | 
| ... | ... | @@ -89,21 +89,18 @@ | 
| 89 | 89 | const menuListModel = await getMenuList(); | 
| 90 | 90 | processChildren(menuListModel); | 
| 91 | 91 | treeData.value = menuListModel; | 
| 92 | - // console.log(treeData.value); | |
| 93 | 92 | } | 
| 94 | - | |
| 95 | 93 | // 更新 | 
| 96 | 94 | if (unref(isUpdate)) { | 
| 97 | 95 | //通过角色id去获取角色对应的菜单的ids | 
| 98 | 96 | roleMenus.value = await getMenusIdsByRoleId(data.record.id); | 
| 99 | - // TODO: 此处算法还可以优化一下。 循环跑了200+次 | |
| 100 | - treeData.value.map((m) => { | |
| 101 | - roleMenus.value.map((m1) => { | |
| 102 | - if (m.key === m1 && m.children.length) { | |
| 103 | - useChildrenIdsRemoveParentId(m1, roleMenus.value); | |
| 104 | - } | |
| 105 | - }); | |
| 106 | - }); | |
| 97 | + for (let m of treeData.value) { | |
| 98 | + for (let m1 of roleMenus.value) { | |
| 99 | + // 利用continue特性优化一下性能 | |
| 100 | + if (!(m.key === m1 && m.children.length)) continue; | |
| 101 | + useChildrenIdsRemoveParentId(m1, roleMenus.value); | |
| 102 | + } | |
| 103 | + } | |
| 107 | 104 | treeRef.value.setCheckedKeys(roleMenus.value); | 
| 108 | 105 | roleId.value = data.record.id; | 
| 109 | 106 | setFieldsValue(data.record); | ... | ... | 
| ... | ... | @@ -17,7 +17,7 @@ | 
| 17 | 17 | :checkedkeys="roleMenus" | 
| 18 | 18 | checkable | 
| 19 | 19 | toolbar | 
| 20 | - ref="tree" | |
| 20 | + ref="treeRef" | |
| 21 | 21 | title="菜单分配" | 
| 22 | 22 | @check="handleCheckClick" | 
| 23 | 23 | :defaultExpandAll="true" | 
| ... | ... | @@ -27,7 +27,7 @@ | 
| 27 | 27 | </BasicDrawer> | 
| 28 | 28 | </template> | 
| 29 | 29 | <script lang="ts"> | 
| 30 | - import { defineComponent, ref, computed, unref, getCurrentInstance } from 'vue'; | |
| 30 | + import { defineComponent, ref, computed, unref } from 'vue'; | |
| 31 | 31 | import { BasicForm, useForm } from '/@/components/Form/index'; | 
| 32 | 32 | import { formSchema } from './role.data'; | 
| 33 | 33 | import { BasicDrawer, useDrawerInner } from '/@/components/Drawer'; | 
| ... | ... | @@ -47,13 +47,12 @@ | 
| 47 | 47 | components: { BasicDrawer, BasicForm, BasicTree }, | 
| 48 | 48 | emits: ['success', 'register'], | 
| 49 | 49 | setup(_, { emit }) { | 
| 50 | - const { proxy } = getCurrentInstance(); | |
| 51 | 50 | const isUpdate = ref(true); | 
| 52 | 51 | const treeData = ref<TreeItem[]>([]); | 
| 53 | 52 | const roleMenus = ref<string[]>([]); | 
| 54 | 53 | const roleId = ref(''); | 
| 55 | 54 | const allCheckedKeys = ref<string[]>([]); | 
| 56 | - | |
| 55 | + const treeRef = ref(); | |
| 57 | 56 | const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({ | 
| 58 | 57 | labelWidth: 90, | 
| 59 | 58 | schemas: formSchema, | 
| ... | ... | @@ -84,58 +83,30 @@ | 
| 84 | 83 | const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => { | 
| 85 | 84 | resetFields(); | 
| 86 | 85 | roleId.value = ''; | 
| 87 | - setDrawerProps({ confirmLoading: false }); | |
| 86 | + isUpdate.value = data.isUpdate; | |
| 88 | 87 | // 需要在setFieldsValue之前先填充treeData,否则Tree组件可能会报key not exist警告 | 
| 89 | - if (unref(treeData).length === 0) { | |
| 88 | + if (!unref(treeData).length) { | |
| 89 | + // 获取全部的菜单 | |
| 90 | 90 | const menuListModel = await getMenuList(); | 
| 91 | 91 | processChildren(menuListModel); | 
| 92 | - let treeValues = new Array<TreeItem>(); | |
| 93 | - menuListModel.map((item) => { | |
| 94 | - const data = { | |
| 95 | - menuName: t(item.meta.title), | |
| 96 | - icon: item.meta.icon, | |
| 97 | - key: item.id, | |
| 98 | - children: item.children as any as TreeItem[], | |
| 99 | - }; | |
| 100 | - treeValues.push(data); | |
| 101 | - }); | |
| 102 | - treeData.value = treeValues; | |
| 92 | + treeData.value = menuListModel; | |
| 103 | 93 | } | 
| 94 | + // 更新 | |
| 104 | 95 | if (unref(isUpdate)) { | 
| 105 | - if (data.record) { | |
| 106 | - //通过角色id去获取角色对应的菜单的ids | |
| 107 | - roleMenus.value = await getMenusIdsByRoleId(data.record.id); | |
| 108 | - treeData.value.map((m) => { | |
| 109 | - roleMenus.value.map((m1) => { | |
| 110 | - if (m.key === m1 && m.children.length !== 0) { | |
| 111 | - proxy.useChildrenIdsRemoveParentId(m1, roleMenus.value); | |
| 112 | - } | |
| 113 | - }); | |
| 114 | - }); | |
| 115 | - proxy.$refs.tree.setCheckedKeys(roleMenus.value); | |
| 116 | - roleId.value = data.record.id; | |
| 96 | + //通过角色id去获取角色对应的菜单的ids | |
| 97 | + roleMenus.value = await getMenusIdsByRoleId(data.record.id); | |
| 98 | + for (let m of treeData.value) { | |
| 99 | + for (let m1 of roleMenus.value) { | |
| 100 | + // 利用continue特性优化一下性能 | |
| 101 | + if (!(m.key === m1 && m.children.length)) continue; | |
| 102 | + useChildrenIdsRemoveParentId(m1, roleMenus.value); | |
| 103 | + } | |
| 117 | 104 | } | 
| 118 | - setFieldsValue({ | |
| 119 | - ...data.record, | |
| 120 | - }); | |
| 105 | + treeRef.value.setCheckedKeys(roleMenus.value); | |
| 106 | + roleId.value = data.record.id; | |
| 107 | + setFieldsValue(data.record); | |
| 121 | 108 | } | 
| 122 | 109 | }); | 
| 123 | - | |
| 124 | - // Tree check事件 | |
| 125 | - const handleCheckClick = (_, e) => { | |
| 126 | - allCheckedKeys.value = []; | |
| 127 | - let nodes = e.checkedNodes; | |
| 128 | - let halfKeys = e.halfCheckedKeys; | |
| 129 | - nodes.map((node) => { | |
| 130 | - if (node.key != halfKeys[0] && halfKeys.length == []) { | |
| 131 | - allCheckedKeys.value.push(node.key); | |
| 132 | - } else { | |
| 133 | - allCheckedKeys.value.push(node.key); | |
| 134 | - } | |
| 135 | - }); | |
| 136 | - allCheckedKeys.value.push(...halfKeys); | |
| 137 | - }; | |
| 138 | - | |
| 139 | 110 | const getTitle = computed(() => (!unref(isUpdate) ? '新增角色' : '编辑角色')); | 
| 140 | 111 | |
| 141 | 112 | async function handleSubmit() { | 
| ... | ... | @@ -159,15 +130,14 @@ | 
| 159 | 130 | } | 
| 160 | 131 | |
| 161 | 132 | return { | 
| 162 | - allCheckedKeys, | |
| 163 | 133 | useChildrenIdsRemoveParentId, | 
| 164 | - handleCheckClick, | |
| 165 | 134 | registerDrawer, | 
| 166 | 135 | registerForm, | 
| 167 | 136 | getTitle, | 
| 168 | 137 | handleSubmit, | 
| 169 | 138 | treeData, | 
| 170 | 139 | roleMenus, | 
| 140 | + treeRef, | |
| 171 | 141 | }; | 
| 172 | 142 | }, | 
| 173 | 143 | }); | ... | ... |