'fix:修改前端路由模式,修复选择历史数据时，页面跟着滚动,feat:升级vue新版本以及compiler-sfc'

@@ -60,7 +60,7 @@
     "sortablejs": "^1.14.0",
     "tinymce": "^5.8.2",
     "vditor": "^3.8.6",
-    "vue": "3.2.2",
+    "vue": "^3.2.31",
     "vue-i18n": "9.1.7",
     "vue-json-pretty": "^2.0.4",
     "vue-router": "^4.0.11",
@@ -90,7 +90,7 @@
     "@vitejs/plugin-legacy": "^1.5.1",
     "@vitejs/plugin-vue": "^1.4.0",
     "@vitejs/plugin-vue-jsx": "^1.1.7",
-    "@vue/compiler-sfc": "3.2.2",
+    "@vue/compiler-sfc": "^3.2.31",
     "@vue/test-utils": "^2.0.0-rc.12",
     "autoprefixer": "^10.3.1",
     "commitizen": "^4.2.4",

@@ -189,7 +189,6 @@ export const getGATEWAY = (tbDeviceId: string) => {
 
 // 获取子设备的分页
 export const getChildDevicePage = (params: ChildDeviceParams) => {
-  console.log(params);
   return defHttp.get({
     url: '/device/relation',
     params,

 import type { RouteRecordRaw } from 'vue-router';
 import type { App } from 'vue';
 
-import { createRouter, createWebHashHistory } from 'vue-router';
+import { createRouter, createWebHistory } from 'vue-router';
 import { basicRoutes } from './routes';
 
 // 白名单应该包含基本静态路由
@@ -15,7 +15,7 @@ getRouteNames(basicRoutes);
 
 // app router
 export const router = createRouter({
-  history: createWebHashHistory(import.meta.env.VITE_PUBLIC_PATH),
+  history: createWebHistory(import.meta.env.VITE_PUBLIC_PATH),
   routes: basicRoutes as unknown as RouteRecordRaw[],
   strict: true,
   scrollBehavior: () => ({ left: 0, top: 0 }),

@@ -107,7 +107,7 @@ const setting: ProjectConfig = {
     // Fold trigger position
     trigger: TriggerEnum.HEADER,
     // Turn on accordion mode, only show a menu
-    accordion: true,
+    accordion: false,
     // Switch page to close menu
     closeMixSidebarOnChange: false,
     // Module opening method ‘click’ |'hover'

@@ -328,6 +328,7 @@ export const schemas: FormSchema[] = [
       return {
         onChange(value) {
           const { updateSchema } = formActionType;
+          console.log(value);
           formModel.interval = '';
           updateSchema({
             field: 'interval',
@@ -337,6 +338,7 @@ export const schemas: FormSchema[] = [
             },
           });
         },
+        getPopupContainer: () => document.body,
         options: [
           {
             label: '最近1小时',
@@ -386,6 +388,7 @@ export const schemas: FormSchema[] = [
     },
     componentProps: {
       placeholder: '请选择分组间隔',
+      getPopupContainer: () => document.body,
       options: [
         {
           label: '5分钟',
@@ -419,6 +422,7 @@ export const schemas: FormSchema[] = [
     label: '数据聚合功能',
     component: 'Select',
     componentProps: {
+      getPopupContainer: () => document.body,
       options: [
         {
           label: '最小值',

@@ -29,13 +29,14 @@
       @register="registerModal"
       title="历史数据"
       width="70%"
+      :minHeight="400"
       :footer="null"
       @cancel="cancelHistoryModal"
       :canFullscreen="false"
     >
       <BasicForm @register="registerForm" />
-      <Empty v-show="!isNull" />
       <div v-show="isNull" ref="chartRef" :style="{ height: '600px', width }"></div>
+      <Empty v-show="!isNull" />
     </BasicModal>
     <DeviceDetailDrawer @register="registerDetailDrawer" />
   </div>
@@ -109,7 +110,7 @@
           // 表单验证
           await validate();
           let { endTs, interval, agg } = getFieldsValue();
-          if (!endTs) return;
+          if (!endTs || !keys.length) return;
           // 数据收集
           const dataArray: any[] = [];
           const startTs = Date.now() - endTs;

@@ -58,6 +58,7 @@
     schemas: formSchema,
   });
 
+  // 初始化编辑器
   const initEditor = (jsScript?: string) => {
     aceEditor.value = ace.edit(aceRef.value, {
       maxLines: 12, // 最大行数，超过会自动出现滚动条

@@ -224,3 +224,9 @@
   });
   defineExpose({ aceEditor });
 </script>
+
+<style scope>
+  .jsoneditor {
+    border: none;
+  }
+</style>

@@ -89,21 +89,18 @@
           const menuListModel = await getMenuList();
           processChildren(menuListModel);
           treeData.value = menuListModel;
-          // console.log(treeData.value);
         }
-
         // 更新
         if (unref(isUpdate)) {
           //通过角色id去获取角色对应的菜单的ids
           roleMenus.value = await getMenusIdsByRoleId(data.record.id);
-          // TODO: 此处算法还可以优化一下。 循环跑了200+次
-          treeData.value.map((m) => {
-            roleMenus.value.map((m1) => {
-              if (m.key === m1 && m.children.length) {
-                useChildrenIdsRemoveParentId(m1, roleMenus.value);
-              }
-            });
-          });
+          for (let m of treeData.value) {
+            for (let m1 of roleMenus.value) {
+              // 利用continue特性优化一下性能
+              if (!(m.key === m1 && m.children.length)) continue;
+              useChildrenIdsRemoveParentId(m1, roleMenus.value);
+            }
+          }
           treeRef.value.setCheckedKeys(roleMenus.value);
           roleId.value = data.record.id;
           setFieldsValue(data.record);

@@ -17,7 +17,7 @@
           :checkedkeys="roleMenus"
           checkable
           toolbar
-          ref="tree"
+          ref="treeRef"
           title="菜单分配"
           @check="handleCheckClick"
           :defaultExpandAll="true"
@@ -27,7 +27,7 @@
   </BasicDrawer>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, computed, unref, getCurrentInstance } from 'vue';
+  import { defineComponent, ref, computed, unref } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { formSchema } from './role.data';
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
@@ -47,13 +47,12 @@
     components: { BasicDrawer, BasicForm, BasicTree },
     emits: ['success', 'register'],
     setup(_, { emit }) {
-      const { proxy } = getCurrentInstance();
       const isUpdate = ref(true);
       const treeData = ref<TreeItem[]>([]);
       const roleMenus = ref<string[]>([]);
       const roleId = ref('');
       const allCheckedKeys = ref<string[]>([]);
-
+      const treeRef = ref();
       const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
         labelWidth: 90,
         schemas: formSchema,
@@ -84,58 +83,30 @@
       const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
         resetFields();
         roleId.value = '';
-        setDrawerProps({ confirmLoading: false });
+        isUpdate.value = data.isUpdate;
         // 需要在setFieldsValue之前先填充treeData，否则Tree组件可能会报key not exist警告
-        if (unref(treeData).length === 0) {
+        if (!unref(treeData).length) {
+          // 获取全部的菜单
           const menuListModel = await getMenuList();
           processChildren(menuListModel);
-          let treeValues = new Array<TreeItem>();
-          menuListModel.map((item) => {
-            const data = {
-              menuName: t(item.meta.title),
-              icon: item.meta.icon,
-              key: item.id,
-              children: item.children as any as TreeItem[],
-            };
-            treeValues.push(data);
-          });
-          treeData.value = treeValues;
+          treeData.value = menuListModel;
         }
+        // 更新
         if (unref(isUpdate)) {
-          if (data.record) {
-            //通过角色id去获取角色对应的菜单的ids
-            roleMenus.value = await getMenusIdsByRoleId(data.record.id);
-            treeData.value.map((m) => {
-              roleMenus.value.map((m1) => {
-                if (m.key === m1 && m.children.length !== 0) {
-                  proxy.useChildrenIdsRemoveParentId(m1, roleMenus.value);
-                }
-              });
-            });
-            proxy.$refs.tree.setCheckedKeys(roleMenus.value);
-            roleId.value = data.record.id;
+          //通过角色id去获取角色对应的菜单的ids
+          roleMenus.value = await getMenusIdsByRoleId(data.record.id);
+          for (let m of treeData.value) {
+            for (let m1 of roleMenus.value) {
+              // 利用continue特性优化一下性能
+              if (!(m.key === m1 && m.children.length)) continue;
+              useChildrenIdsRemoveParentId(m1, roleMenus.value);
+            }
           }
-          setFieldsValue({
-            ...data.record,
-          });
+          treeRef.value.setCheckedKeys(roleMenus.value);
+          roleId.value = data.record.id;
+          setFieldsValue(data.record);
         }
       });
-
-      // Tree check事件
-      const handleCheckClick = (_, e) => {
-        allCheckedKeys.value = [];
-        let nodes = e.checkedNodes;
-        let halfKeys = e.halfCheckedKeys;
-        nodes.map((node) => {
-          if (node.key != halfKeys[0] && halfKeys.length == []) {
-            allCheckedKeys.value.push(node.key);
-          } else {
-            allCheckedKeys.value.push(node.key);
-          }
-        });
-        allCheckedKeys.value.push(...halfKeys);
-      };
-
       const getTitle = computed(() => (!unref(isUpdate) ? '新增角色' : '编辑角色'));
 
       async function handleSubmit() {
@@ -159,15 +130,14 @@
       }
 
       return {
-        allCheckedKeys,
         useChildrenIdsRemoveParentId,
-        handleCheckClick,
         registerDrawer,
         registerForm,
         getTitle,
         handleSubmit,
         treeData,
         roleMenus,
+        treeRef,
       };
     },
   });