修改excel解析结果字段显示顺序

src/views/comment-excel/components/ExcelOperate/ExcelOperate.vue

@@ -134,6 +134,7 @@
         ref="runDataTable"
         size="mini"
         show-overflow="tooltip"
+        show-header-overflow="tooltip"
         :data="runResultData"
         border
         :expand-config="expandConfig"
@@ -144,19 +145,40 @@
           <template #content="{ row, rowIndex }">
             <div style="padding: 10px">
               <template v-for="attchName of filterObjKeys(row.expendData)">
-                <el-descriptions
-                  direction="vertical"
+                <p>{{ attchName }}</p>
+                <vxe-table
+                  :data="row.expendData[attchName]"
+                  header-row-class-name="expandTableHeader"
+                  min-height="72"
+                  height="72"
+                  size="mini"
+                  show-overflow="tooltip"
+                  show-header-overflow="tooltip"
+                  style="width: 70vw;"
                   border
-                  :column="filterObjKeys(row.expendData[attchName]).length"
-                  size="small"
-                  :title="attchName"
                 >
-                  <el-descriptions-item
-                    v-for="pro in filterObjKeys(row.expendData[attchName])"
-                    :label="pro"
-                    >{{ row.expendData[attchName][pro] }}</el-descriptions-item
+                  <vxe-column
+                    v-for="key in filterObjKeys(row.expendData[attchName][0])"
+                    :title="key"
+                    :field="key"
+                    width="140"
+                  ></vxe-column>
+                </vxe-table>
+                <!-- <el-scrollbar>
+                  <el-descriptions
+                    direction="vertical"
+                    border
+                    :column="filterObjKeys(row.expendData[attchName]).length"
+                    size="small"
+                    :title="attchName"
                   >
-                </el-descriptions>
+                    <el-descriptions-item
+                      v-for="pro in filterObjKeys(row.expendData[attchName])"
+                      :label="pro"
+                      >{{ row.expendData[attchName][pro] }}</el-descriptions-item
+                    >
+                  </el-descriptions>
+                </el-scrollbar> -->
               </template>
             </div>
           </template>
@@ -618,8 +640,8 @@ const setSheetAreaMark = (sheet: any) => {
   }
 }
 
-const runResultData = ref([])
-const runResultTitle = ref([])
+const runResultData = ref<any[]>([])
+const runResultTitle = ref<any[]>([])
 const runResultVisible = ref(false)
 const toRun = async () => {
   const loadingInstance = ElLoading.service({
@@ -639,19 +661,14 @@ const toRun = async () => {
 
     if (!data.result.length) return
 
-    const tableData: any[] = []
-    data.result.forEach((item: any) => {
-      tableData.push(filterTableData(item))
-    })
+    const { res, titles } = filterTableData(data.result)
 
-    runResultData.value = tableData
-    runResultTitle.value = filterRunDataTitle(tableData).filter((field) => {
+    runResultData.value = res
+    runResultTitle.value = titles.filter((field) => {
       return field != 'sortNum' && field != '数据区' && field != 'expendData'
     })
-    // const idx = runResultTitle.value.findIndex((v) => v == 'sortNum')
-    // runResultTitle.value.splice(idx, 1)
+
     runResultVisible.value = true
-    console.log('runResultData.value', runResultData.value)
   } catch {
     nextTick(() => {
       // Loading should be closed asynchronously
@@ -660,39 +677,44 @@ const toRun = async () => {
   }
 }
 
-const filterTableData = (row: any) => {
-  const res: Recordable = {}
-  row.order.forEach((itm) => {
-    res[itm.title] = itm.value
-  })
-  // 是否有附加信息
-  if (row?.groups?.length) {
-    res['expendData'] = {}
-    row.groups.forEach((itm) => {
-      res['expendData'][itm.title] = {}
-      itm.item.forEach((v) => {
-        res['expendData'][itm.title][v.title] = v.value
-      })
+const filterTableData = (data: any[]) => {
+  const res: Recordable[] = []
+  const titles: string[] = []
+  data.forEach((row) => {
+    const rw = {}
+    row.order.forEach((itm) => {
+      Reflect.set(rw, itm.title, itm.value)
+      if (!titles.includes(itm.title)) {
+        titles.push(itm.title)
+      }
     })
-  }
+    // 是否有附加信息
+    if (row?.groups?.length) {
+      Reflect.set(rw, 'expendData', {})
+      row.groups.forEach((itm) => {
+        rw['expendData'][itm.title] = []
+        const r = {}
+        itm.item.forEach((v) => {
+          r[v.title] = v.value
+        })
+        rw['expendData'][itm.title].push(r)
+      })
+    }
 
-  return res
-}
+    res.push(rw)
+  })
 
-const filterRunDataTitle = (data: any) => {
-  const titles = []
-  for (const row of data) {
-    titles.push(...Object.keys(row))
+  return {
+    res,
+    titles
   }
-
-  return Array.from(new Set(titles))
 }
+
 const filterObjKeys = (data: any) => {
-  return Object.keys(data)
+  return Object.keys(data).filter((v) => v !== '_X_ROW_KEY')
 }
 const expandConfig = reactive({
   visibleMethod({ row }) {
-    console.log('row', row)
     if (typeof row.expendData === 'object') {
       return true
     }
@@ -721,4 +743,7 @@ onUnmounted(() => {
     width: 8em;
   }
 }
+.expandTableHeader {
+  background: #ccc;
+}
 </style>