项目初始化

web-vue/packages/core/layouts/screen/welcome/Erp/index.vue

@@ -7,17 +7,9 @@
     </div>
 
     <div class="erp-section erp-upper-section">
-      <div 
+      <div v-for="item in getComponentsBySortRange(1, 3)" :key="item.sort" class="erp-col erp-col-1-3">
-        v-for="item in getComponentsBySortRange(1, 3)" 
-        :key="item.sort"
-        class="erp-col erp-col-1-3"
-      >
         <div class="erp-card">
-          <component
+          <component :is="componentMap[item.vueName]" :formParams="FormValues" v-if="componentMap[item.vueName]" />
-            :is="componentMap[item.vueName]"
-            :formParams="FormValues"
-            v-if="componentMap[item.vueName]"
-          />
         </div>
       </div>
     </div>
@@ -25,17 +17,9 @@
     <div class="erp-section erp-middle-section">
       <div class="erp-col erp-col-1-2">
         <div class="erp-inner-layout">
-          <div 
+          <div v-for="item in getComponentsBySortRange(4, 5)" :key="item.sort" class="erp-col erp-col-1-2">
-            v-for="item in getComponentsBySortRange(4, 5)" 
-            :key="item.sort"
-            class="erp-col erp-col-1-2"
-          >
             <div class="erp-card">
-              <component
+              <component :is="componentMap[item.vueName]" :formParams="FormValues" v-if="componentMap[item.vueName]" />
-                :is="componentMap[item.vueName]"
-                :formParams="FormValues"
-                v-if="componentMap[item.vueName]"
-              />
             </div>
           </div>
         </div>
@@ -54,17 +38,9 @@
     <div class="erp-section erp-lower-section">
       <div class="erp-col erp-col-1-2">
         <div class="erp-inner-layout">
-          <div 
+          <div v-for="item in getComponentsBySortRange(7, 8)" :key="item.sort" class="erp-col erp-col-1-2">
-            v-for="item in getComponentsBySortRange(7, 8)" 
-            :key="item.sort"
-            class="erp-col erp-col-1-2"
-          >
             <div class="erp-card">
-              <component
+              <component :is="componentMap[item.vueName]" :formParams="FormValues" v-if="componentMap[item.vueName]" />
-                :is="componentMap[item.vueName]"
-                :formParams="FormValues"
-                v-if="componentMap[item.vueName]"
-              />
             </div>
           </div>
         </div>
@@ -91,57 +67,54 @@ import { MyChartInfo, myChartInfoListAll } from '@jeesite/biz/api/biz/myChartInf
 
   const route = useRoute();
 
-// 1. 完善类型定义，避免 any 类型
   const FormValues = ref({
-  yearDate: route.query.yearDate || ''
+    yearDate: route.query.yearDate || '',
   });
 
-// 2. 定义组件映射的类型
   interface ComponentMap {
     [key: string]: Component;
   }
 
-// 3. 初始化时赋空数组，避免 undefined 问题
   const componentMap = ref<ComponentMap>({});
   const chartData = ref<MyChartInfo[]>([]);
 
-// 4. 优化空值处理
+  const getSortValue = (item: MyChartInfo) => Number(item.sort ?? 0);
+
   const getComponentBySort = (sort: number): MyChartInfo | undefined => {
     if (!chartData.value.length) return undefined;
-  return chartData.value.find(item => item.sort === sort);
+    return chartData.value.find((item) => getSortValue(item) === sort);
   };
 
   const getComponentsBySortRange = (start: number, end: number): MyChartInfo[] => {
     if (!chartData.value.length) return [];
-  return chartData.value.filter(item => item.sort >= start && item.sort <= end);
+    return chartData.value.filter((item) => {
+      const sort = getSortValue(item);
+      return sort >= start && sort <= end;
+    });
   };
 
-// 5. 优化组件加载函数
   const loadComponent = (vueName: string) => {
     return defineAsyncComponent({
       loader: () => import(`./components/${vueName}.vue`),
       delay: 200,
-    timeout: 5000
+      timeout: 5000,
     });
   };
 
-// 6. 封装数据获取逻辑
   async function getChartList() {
     try {
       const reqParams = {
-      chartCode: 'erp'
+        chartCode: 'erp',
       };
       const res = await myChartInfoListAll(reqParams);
       chartData.value = res || [];
-    // 排序确保顺序正确
+      chartData.value.sort((a, b) => getSortValue(a) - getSortValue(b));
-    chartData.value.sort((a, b) => a.sort - b.sort);
     } catch (error) {
       console.error('获取数据失败:', error);
       chartData.value = [];
     }
   }
 
-// 7. 监听路由参数变化
   watch(
     () => route.query.yearDate,
     (newVal) => {
@@ -149,8 +122,8 @@ watch(
     },
     {
       deep: true,
-    immediate: true
+      immediate: true,
-  }
+    },
   );
 
   onMounted(async () => {
@@ -158,10 +131,7 @@ onMounted(async () => {
       await getChartList();
 
       const newComponentMap: ComponentMap = {};
-    // 获取唯一的组件名称
+      const uniqueComponents = [...new Set(chartData.value.map((item) => item.vueName))];
-    const uniqueComponents = [...new Set(chartData.value.map(item => item.vueName))];
-    
-    // 加载所有需要的组件
       for (const vueName of uniqueComponents) {
         if (vueName) {
           newComponentMap[vueName] = loadComponent(vueName);

web-vue/packages/core/layouts/screen/welcome/Home/index.vue

@@ -8,44 +8,20 @@
 
     <div class="work-section work-main-section">
       <div class="work-row work-row-1-3">
-        <div
+        <div v-for="item in getComponentsBySortRange(1, 3)" :key="item.sort" class="work-card work-card-1-3">
-          v-for="item in getComponentsBySortRange(1, 3)"
+          <component :is="componentMap[item.vueName]" :formParams="FormValues" v-if="componentMap[item.vueName]" />
-          :key="item.sort"
-          class="work-card work-card-1-3"
-        >
-          <component
-            :is="componentMap[item.vueName]"
-            :formParams="FormValues"
-            v-if="componentMap[item.vueName]"
-          />
         </div>
       </div>
 
       <div class="work-row work-row-1-3">
-        <div
+        <div v-for="item in getComponentsBySortRange(4, 5)" :key="item.sort" class="work-card work-card-1-2">
-          v-for="item in getComponentsBySortRange(4, 5)"
+          <component :is="componentMap[item.vueName]" :formParams="FormValues" v-if="componentMap[item.vueName]" />
-          :key="item.sort"
-          class="work-card work-card-1-2"
-        >
-          <component
-            :is="componentMap[item.vueName]"
-            :formParams="FormValues"
-            v-if="componentMap[item.vueName]"
-          />
         </div>
       </div>
 
       <div class="work-row work-row-1-3">
-        <div
+        <div v-for="item in getComponentsBySortRange(6, 7)" :key="item.sort" class="work-card work-card-1-2">
-          v-for="item in getComponentsBySortRange(6, 7)"
+          <component :is="componentMap[item.vueName]" :formParams="FormValues" v-if="componentMap[item.vueName]" />
-          :key="item.sort"
-          class="work-card work-card-1-2"
-        >
-          <component
-            :is="componentMap[item.vueName]"
-            :formParams="FormValues"
-            v-if="componentMap[item.vueName]"
-          />
         </div>
       </div>
     </div>
@@ -54,6 +30,7 @@
 
 <script lang="ts" setup>
   import { ref, watch, onMounted } from 'vue';
+  import type { Component } from 'vue';
   import { useRoute } from 'vue-router';
   import ChartTop from './components/ChartTop.vue';
   import { MyChartInfo, myChartInfoListAll } from '@jeesite/biz/api/biz/myChartInfo';
@@ -61,28 +38,37 @@ import { MyChartInfo, myChartInfoListAll } from '@jeesite/biz/api/biz/myChartInf
   const route = useRoute();
 
   const FormValues = ref({
-  yearDate: route.query.yearDate
+    yearDate: route.query.yearDate || '',
   });
 
   watch(
     () => route.query.yearDate,
     (newVal) => {
-    FormValues.value.yearDate = newVal;
+      FormValues.value.yearDate = newVal || '';
     },
     {
       deep: true,
-    immediate: true
+      immediate: true,
-  }
+    },
   );
 
-const componentMap = ref({});
+  interface ComponentMap {
-const chartData = ref([]);
+    [key: string]: Component;
+  }
 
-const getComponentsBySortRange = (start, end) => {
+  const componentMap = ref<ComponentMap>({});
-  return chartData.value.filter(item => item.sort >= start && item.sort <= end);
+  const chartData = ref<MyChartInfo[]>([]);
+
+  const getSortValue = (item: MyChartInfo) => Number(item.sort ?? 0);
+
+  const getComponentsBySortRange = (start: number, end: number): MyChartInfo[] => {
+    return chartData.value.filter((item) => {
+      const sort = getSortValue(item);
+      return sort >= start && sort <= end;
+    });
   };
 
-const loadComponent = async (vueName) => {
+  const loadComponent = async (vueName: string): Promise<Component | null> => {
     try {
       const module = await import(`./components/${vueName}.vue`);
       return module.default;
@@ -95,28 +81,28 @@ const loadComponent = async (vueName) => {
   async function getChartList() {
     try {
       const reqParams = {
-      chartCode: 'home'
+        chartCode: 'home',
-    }
+      };
-    const res = await myChartInfoListAll(reqParams)
+      const res = await myChartInfoListAll(reqParams);
-    chartData.value = res || []
+      chartData.value = res || [];
     } catch (error) {
       console.error('获取数据失败:', error);
-    chartData.value = []
+      chartData.value = [];
     }
   }
 
   onMounted(async () => {
     try {
       await getChartList();
-    chartData.value = chartData.value.sort((a, b) => a.sort - b.sort);
+  
-    const newComponentMap = {};
+      const newComponentMap: ComponentMap = {};
-    const uniqueComponents = [...new Set(chartData.value.map(item => item.vueName))];
+      const uniqueComponents = [...new Set(chartData.value.map((item) => item.vueName))];
       for (const vueName of uniqueComponents) {
-      const component = await loadComponent(vueName);
+        if (vueName) {
-      if (component) {
+          newComponentMap[vueName] = loadComponent(vueName);
-        newComponentMap[vueName] = component;
         }
       }
+  
       componentMap.value = newComponentMap;
     } catch (error) {
       console.error('加载图表数据失败：', error);

web-vue/packages/core/layouts/screen/welcome/Sys/index.vue

@@ -8,44 +8,20 @@
 
     <div class="work-section work-main-section">
       <div class="work-row work-row-1-3">
-        <div
+        <div v-for="item in getComponentsBySortRange(1, 3)" :key="item.sort" class="work-card work-card-1-3">
-          v-for="item in getComponentsBySortRange(1, 3)"
+          <component :is="componentMap[item.vueName]" :formParams="FormValues" v-if="componentMap[item.vueName]" />
-          :key="item.sort"
-          class="work-card work-card-1-3"
-        >
-          <component
-            :is="componentMap[item.vueName]"
-            :formParams="FormValues"
-            v-if="componentMap[item.vueName]"
-          />
         </div>
       </div>
 
       <div class="work-row work-row-1-3">
-        <div
+        <div v-for="item in getComponentsBySortRange(4, 6)" :key="item.sort" class="work-card work-card-1-3">
-          v-for="item in getComponentsBySortRange(4, 6)"
+          <component :is="componentMap[item.vueName]" :formParams="FormValues" v-if="componentMap[item.vueName]" />
-          :key="item.sort"
-          class="work-card work-card-1-3"
-        >
-          <component
-            :is="componentMap[item.vueName]"
-            :formParams="FormValues"
-            v-if="componentMap[item.vueName]"
-          />
         </div>
       </div>
 
       <div class="work-row work-row-1-3">
-        <div
+        <div v-for="item in getComponentsBySortRange(7, 9)" :key="item.sort" class="work-card work-card-1-3">
-          v-for="item in getComponentsBySortRange(7, 9)"
+          <component :is="componentMap[item.vueName]" :formParams="FormValues" v-if="componentMap[item.vueName]" />
-          :key="item.sort"
-          class="work-card work-card-1-3"
-        >
-          <component
-            :is="componentMap[item.vueName]"
-            :formParams="FormValues"
-            v-if="componentMap[item.vueName]"
-          />
         </div>
       </div>
     </div>
@@ -54,6 +30,7 @@
 
 <script lang="ts" setup>
   import { ref, watch, onMounted } from 'vue';
+  import type { Component } from 'vue';
   import { useRoute } from 'vue-router';
   import ChartTop from './components/ChartTop.vue';
   import { MyChartInfo, myChartInfoListAll } from '@jeesite/biz/api/biz/myChartInfo';
@@ -61,28 +38,37 @@ import { MyChartInfo, myChartInfoListAll } from '@jeesite/biz/api/biz/myChartInf
   const route = useRoute();
 
   const FormValues = ref({
-  yearDate: route.query.year
+    yearDate: route.query.yearDate || '',
   });
 
   watch(
     () => route.query.yearDate,
     (newVal) => {
-    FormValues.value.yearDate = newVal;
+      FormValues.value.yearDate = newVal || '';
     },
     {
       deep: true,
-    immediate: true
+      immediate: true,
-  }
+    },
   );
 
-const componentMap = ref({});
+  interface ComponentMap {
-const chartData = ref([]);
+    [key: string]: Component;
+  }
 
-const getComponentsBySortRange = (start, end) => {
+  const componentMap = ref<ComponentMap>({});
-  return chartData.value.filter(item => item.sort >= start && item.sort <= end);
+  const chartData = ref<MyChartInfo[]>([]);
+
+  const getSortValue = (item: MyChartInfo) => Number(item.sort ?? 0);
+
+  const getComponentsBySortRange = (start: number, end: number): MyChartInfo[] => {
+    return chartData.value.filter((item) => {
+      const sort = getSortValue(item);
+      return sort >= start && sort <= end;
+    });
   };
 
-const loadComponent = async (vueName) => {
+  const loadComponent = async (vueName: string): Promise<Component | null> => {
     try {
       const module = await import(`./components/${vueName}.vue`);
       return module.default;
@@ -95,28 +81,28 @@ const loadComponent = async (vueName) => {
   async function getChartList() {
     try {
       const reqParams = {
-	  		chartCode: 'sys'
+        chartCode: 'sys',
-	  	}
+      };
-	  const res = await myChartInfoListAll(reqParams)
+      const res = await myChartInfoListAll(reqParams);
-	  chartData.value = res || []
+      chartData.value = res || [];
     } catch (error) {
       console.error('获取数据失败:', error);
-	  chartData.value = []
+      chartData.value = [];
     }
   }
 
   onMounted(async () => {
     try {
       await getChartList();
-    chartData.value = chartData.value.sort((a, b) => a.sort - b.sort);
+  
-    const newComponentMap = {};
+      const newComponentMap: ComponentMap = {};
-    const uniqueComponents = [...new Set(chartData.value.map(item => item.vueName))];
+      const uniqueComponents = [...new Set(chartData.value.map((item) => item.vueName))];
       for (const vueName of uniqueComponents) {
-      const component = await loadComponent(vueName);
+        if (vueName) {
-      if (component) {
+          newComponentMap[vueName] = loadComponent(vueName);
-        newComponentMap[vueName] = component;
         }
       }
+  
       componentMap.value = newComponentMap;
     } catch (error) {
       console.error('加载图表数据失败：', error);

web-vue/packages/core/layouts/screen/welcome/Work/index.vue

@@ -7,35 +7,19 @@
     </div>
     <div class="work-section work-main-section">
       <div class="work-col work-col-1-3 work-left-col">
-        <div
+        <div v-for="item in getComponentsBySortRange(1, 3)" :key="item.sort" class="work-card work-card-1-3">
-          v-for="item in getComponentsBySortRange(1, 3)"
+          <component :is="componentMap[item.vueName]" :formParams="FormValues" v-if="componentMap[item.vueName]" />
-          :key="item.sort"
-          class="work-card work-card-1-3"
-        >
-          <component
-            :is="componentMap[item.vueName]"
-            :formParams="FormValues"
-            v-if="componentMap[item.vueName]"
-          />
         </div>
       </div>
       <div class="work-col work-col-1-3 work-middle-col">
-        <div
+        <div :key="getComponentBySort(4)?.sort" class="work-card work-card-2-3" v-if="getComponentBySort(4)">
-          :key="getComponentBySort(4)?.sort"
-          class="work-card work-card-2-3"
-          v-if="getComponentBySort(4)"
-        >
           <component
             :is="componentMap[getComponentBySort(4).vueName]"
             :formParams="FormValues"
             v-if="componentMap[getComponentBySort(4).vueName]"
           />
         </div>
-        <div
+        <div :key="getComponentBySort(5)?.sort" class="work-card work-card-1-3" v-if="getComponentBySort(5)">
-          :key="getComponentBySort(5)?.sort"
-          class="work-card work-card-1-3"
-          v-if="getComponentBySort(5)"
-        >
           <component
             :is="componentMap[getComponentBySort(5).vueName]"
             :formParams="FormValues"
@@ -44,16 +28,8 @@
         </div>
       </div>
       <div class="work-col work-col-1-3 work-right-col">
-        <div
+        <div v-for="item in getComponentsBySortRange(6, 8)" :key="item.sort" class="work-card work-card-1-3">
-          v-for="item in getComponentsBySortRange(6, 8)"
+          <component :is="componentMap[item.vueName]" :formParams="FormValues" v-if="componentMap[item.vueName]" />
-          :key="item.sort"
-          class="work-card work-card-1-3"
-        >
-          <component
-            :is="componentMap[item.vueName]"
-            :formParams="FormValues"
-            v-if="componentMap[item.vueName]"
-          />
         </div>
       </div>
     </div>
@@ -62,6 +38,7 @@
 
 <script lang="ts" setup>
   import { ref, watch, onMounted } from 'vue';
+  import type { Component } from 'vue';
   import { useRoute } from 'vue-router';
   import ChartTop from './components/ChartTop.vue';
   import { MyChartInfo, myChartInfoListAll } from '@jeesite/biz/api/biz/myChartInfo';
@@ -69,32 +46,41 @@ import { MyChartInfo, myChartInfoListAll } from '@jeesite/biz/api/biz/myChartInf
   const route = useRoute();
 
   const FormValues = ref({
-  yearDate: route.query.yearDate
+    yearDate: route.query.yearDate || '',
   });
 
   watch(
     () => route.query.yearDate,
     (newVal) => {
-    FormValues.value.yearDate = newVal;
+      FormValues.value.yearDate = newVal || '';
     },
     {
       deep: true,
-    immediate: true
+      immediate: true,
-  }
+    },
   );
 
-const componentMap = ref({});
+  interface ComponentMap {
-const chartData = ref([]);
+    [key: string]: Component;
+  }
 
-const getComponentBySort = (sort) => {
+  const componentMap = ref<ComponentMap>({});
-  return chartData.value.find(item => item.sort === sort);
+  const chartData = ref<MyChartInfo[]>([]);
+
+  const getSortValue = (item: MyChartInfo) => Number(item.sort ?? 0);
+
+  const getComponentBySort = (sort: number): MyChartInfo | undefined => {
+    return chartData.value.find((item) => getSortValue(item) === sort);
   };
 
-const getComponentsBySortRange = (start, end) => {
+  const getComponentsBySortRange = (start: number, end: number): MyChartInfo[] => {
-  return chartData.value.filter(item => item.sort >= start && item.sort <= end);
+    return chartData.value.filter((item) => {
+      const sort = getSortValue(item);
+      return sort >= start && sort <= end;
+    });
   };
 
-const loadComponent = async (vueName) => {
+  const loadComponent = async (vueName: string): Promise<Component | null> => {
     try {
       const module = await import(`./components/${vueName}.vue`);
       return module.default;
@@ -107,28 +93,28 @@ const loadComponent = async (vueName) => {
   async function getChartList() {
     try {
       const reqParams = {
-	  			chartCode: 'work'
+        chartCode: 'work',
-	  		}
+      };
-	  const res = await myChartInfoListAll(reqParams)
+      const res = await myChartInfoListAll(reqParams);
-	  chartData.value = res || []
+      chartData.value = res || [];
     } catch (error) {
       console.error('获取数据失败:', error);
-	  chartData.value = []
+      chartData.value = [];
     }
   }
 
   onMounted(async () => {
     try {
       await getChartList();
-    chartData.value = chartData.value.sort((a, b) => a.sort - b.sort);
+  
-    const newComponentMap = {};
+      const newComponentMap: ComponentMap = {};
-    const uniqueComponents = [...new Set(chartData.value.map(item => item.vueName))];
+      const uniqueComponents = [...new Set(chartData.value.map((item) => item.vueName))];
       for (const vueName of uniqueComponents) {
-      const component = await loadComponent(vueName);
+        if (vueName) {
-      if (component) {
+          newComponentMap[vueName] = loadComponent(vueName);
-        newComponentMap[vueName] = component;
         }
       }
+  
       componentMap.value = newComponentMap;
     } catch (error) {
       console.error('加载图表数据失败：', error);
@@ -176,7 +162,9 @@ onMounted(async () => {
     width: calc((100% - 4px) / 3);
   }
 
-.work-left-col, .work-middle-col, .work-right-col {
+  .work-left-col,
+  .work-middle-col,
+  .work-right-col {
     display: flex;
     flex-direction: column;
     gap: 2px;
@@ -293,12 +281,15 @@ onMounted(async () => {
       width: 100%;
       height: auto;
     }
-  .work-left-col, .work-middle-col, .work-right-col {
+    .work-left-col,
+    .work-middle-col,
+    .work-right-col {
       flex-direction: column;
       height: auto;
       gap: 2px;
     }
-  .work-card-1-3, .work-card-2-3 {
+    .work-card-1-3,
+    .work-card-2-3 {
       height: 120px;
       margin-bottom: 2px;
     }