feat: 修改表格

src/packages/components/Tables/Tables/TableScrollBoard/config.vue

@@ -143,28 +143,31 @@ const alignOption = [
 // const headerConfigMap: Ref<{ [k: string]: any }> = ref(props.optionData.headerConfigMap)
 // const headerConfig: Ref<any[]> = ref(props.optionData.headerConfig)
 
-const { headerConfigMap, headerConfig } = toRefs(props.optionData) as ToRefs<{ headerConfigMap: { [k: string] : MapType }, headerConfig: MapType[] }>
+const headerConfigMap = computed(() => props.optionData.headerConfigMap)
+const headerConfig = computed(() => props.optionData.headerConfig)
 
-watch(() => props.optionData.dataset, (v) => {
+// const { headerConfigMap, headerConfig } = toRefs(props.optionData) as ToRefs<{ headerConfigMap: { [k: string] : MapType }, headerConfig: MapType[] }>
-  v.dimensions.forEach((k: string) => {
+//
-    // 初始化
+// watch(() => props.optionData.dataset, (v) => {
-    if(!Object.prototype.hasOwnProperty.call(headerConfigMap.value, k)) {
+//   v.dimensions.forEach((k: string) => {
-      headerConfigMap.value[k] = {
+//     // 初始化
-        show: true,
+//     if(!Object.prototype.hasOwnProperty.call(headerConfigMap.value, k)) {
-        key: k,
+//       headerConfigMap.value[k] = {
-        header: k,
+//         show: true,
-        align: AlignEnum.LEFT,
+//         key: k,
-        columnWidth: 100
+//         header: k,
-      }
+//         align: AlignEnum.LEFT,
-    }
+//         columnWidth: 100
-    headerConfig.value = v.dimensions.map((k: string) => {
+//       }
-      return headerConfigMap.value[k]
+//     }
-    })
+//     headerConfig.value = v.dimensions.map((k: string) => {
-    headerConfig.value.unshift(headerConfigMap.value['index'])
+//       return headerConfigMap.value[k]
-  })
+//     })
-}, {
+//     headerConfig.value.unshift(headerConfigMap.value['index'])
-  immediate: true,
+//   })
-  deep: true
+// }, {
-})
+//   immediate: true,
+//   deep: true
+// })
 
 </script>

src/packages/components/Tables/Tables/TableScrollBoard/index.vue

@@ -49,13 +49,12 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, onUnmounted, reactive, toRefs, watch, onMounted } from 'vue'
+import { PropType, onUnmounted, reactive, toRefs, watch, onMounted, ref } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import {useChartCommonData, useChartDataFetch} from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import merge from 'lodash/merge'
+import { merge, cloneDeep, debounce } from 'lodash'
-import cloneDeep from 'lodash/cloneDeep'
+import { MapType, AlignEnum } from './config'
-import { MapType } from './config'
 import { useOriginStore } from "@/store/modules/originStore/originStore";
 
 const props = defineProps({
@@ -267,19 +266,37 @@ const calcRowsData = () => {
     let keys = headerConfig.filter((_: MapType) => _.show).map((_: MapType) => _.key)
     let statusIndex = keys.findIndex((_: string) => _ === 'status')
     if(statusIndex > -1) {
-      dataset.forEach((item: {ceils: string[]}) => {
+      dataset = dataset.map((item: any, i: number) => {
-        if(statusIndex <= item.ceils.length) {
+        let v:any = item.ceils[statusIndex]
-          let v = item.ceils[statusIndex]
         let obj = statusOption.find((_: any) => _.value === v.toString()) || {label: ''}
-          console.log(obj)
+        let newValue = ''
         if(obj.remark) {
-            item.ceils[statusIndex] = `<span style="background: ${colorToRgba(obj.remark)};color: ${obj.remark};border: 1px solid ${obj.remark};border-radius: 4px;padding: 2px 8px;font-size: 12px;">${obj.label}</span>`
+          newValue = `<span style="background: ${colorToRgba(obj.remark)};color: ${obj.remark};border: 1px solid ${obj.remark};border-radius: 4px;padding: 2px 8px;font-size: 12px;">${obj.label}</span>`
-          }
-          else item.ceils[statusIndex] = obj.label
         }
+        else newValue = obj.label
+        return { ...item, ceils: [...item.ceils.slice(0, statusIndex), newValue, ...item.ceils.slice(statusIndex + 1)]}
       })
     }
   }
+
+  // if(props.chartConfig.commonData.currentSource === 'pointTable') {
+  //   let statusOption = originStore.getOriginStore.user.systemConstant.node_status || []
+  //   let keys = headerConfig.filter((_: MapType) => _.show).map((_: MapType) => _.key)
+  //   let statusIndex = keys.findIndex((_: string) => _ === 'status')
+  //   if(statusIndex > -1) {
+  //     dataset.forEach((item: {ceils: string[]}) => {
+  //       if(statusIndex <= item.ceils.length) {
+  //         let v = item.ceils[statusIndex]
+  //         let obj = statusOption.find((_: any) => _.value === v.toString()) || {label: ''}
+  //         console.log(obj.remark)
+  //         if(obj.remark) {
+  //           item.ceils[statusIndex] = `<span style="background: ${colorToRgba(obj.remark)};color: ${obj.remark};border: 1px solid ${obj.remark};border-radius: 4px;padding: 2px 8px;font-size: 12px;">${obj.label}</span>`
+  //         }
+  //         else item.ceils[statusIndex] = obj.label
+  //       }
+  //     })
+  //   }
+  // }
   status.rowsData = dataset
   status.rows = dataset
 }
@@ -367,7 +384,7 @@ const stopAnimation = () => {
   clearTimeout(status.animationHandler)
 }
 
-const onRestart = async () => {
+const onRestart = debounce(async() => {
   try {
     if (!status.mergedConfig) return
     stopAnimation()
@@ -375,7 +392,7 @@ const onRestart = async () => {
   } catch (error) {
     console.log(error)
   }
-}
+}, 200)
 
 watch(
   () => w.value,
@@ -406,8 +423,30 @@ watch(
 //   onRestart()
 // })
 
-useChartCommonData(props.chartConfig, useChartEditStore, (resData: {}) => {
+const fn = (v: any) => {
-  props.chartConfig.option.dataset = resData
+  v.dimensions.forEach((k: string, index: number) => {
+    // 初始化
+    if(!Object.prototype.hasOwnProperty.call(props.chartConfig.option.headerConfigMap, k)) {
+      props.chartConfig.option.headerConfigMap[k] = {
+        show: true,
+        key: k,
+        header: k,
+        align: AlignEnum.LEFT,
+        columnWidth: 100
+      }
+    }
+    props.chartConfig.option.headerConfig = v.dimensions.map((k: string) => {
+      return props.chartConfig.option.headerConfigMap[k]
+    })
+    props.chartConfig.option.headerConfig.unshift(props.chartConfig.option.headerConfigMap['index'])
+  })
+}
+
+let resData = {}
+useChartCommonData(props.chartConfig, useChartEditStore, (res: any) => {
+  resData = res
+  fn(res)
+  props.chartConfig.option.dataset = res
   onRestart()
 })