修改展示解析结果样式，调整设置区域修改为按步骤进行

src/utils/excel.ts

@@ -59,16 +59,9 @@ export function getRangeState(range: any) {
   }
 }
 
-export function handleRangeTitle(range: any, dataArea: Recordable) {
-  const {
-    beginColum,
-    beginRow,
-    endRow,
-    endColum,
-    sheetNum,
-    rowLen,
-    columnLen
-  } = getRangeState(range)
+export function handleRangeTitle(range: any) {
+  const { beginColum, beginRow, endRow, endColum, sheetNum, rowLen, columnLen } =
+    getRangeState(range)
   const titles: Recordable[] = []
   let isVertical = false
 
@@ -81,45 +74,42 @@ export function handleRangeTitle(range: any, dataArea: Recordable) {
   ) {
     isVertical = true
   }
-
   /**
-   * 取最后一个单元格的坐标，值为最后一个单元格，如果当前单元格没有值，继承前一个单元格值
+   * 由底向上循环
+   * 横向 -> row 不变  纵向 -> column 不变
    *
-   * 横向：以列为单位取值，多值取最后有值单元格
-   *
-   * 纵向：以行为单位，多值取最后有值单元格
    */
   for (let c = 0; c < (isVertical ? rowLen : columnLen); c++) {
     const title = {
       title: '',
       sheet: sheetNum,
-      row: 0,
-      colum: 0
+      row: !isVertical ? +beginRow + rowLen - 1 : endRow - rowLen - 1,
+      colum: isVertical ? +beginColum + columnLen - 1 : endColum - columnLen - 1
     }
-    for (let r = 0; r < (isVertical ? columnLen : rowLen); r++) {
+    for (let r = (isVertical ? columnLen : rowLen) - 1; r >= 0; r--) {
       const cell = isVertical ? range[c][r] : range[r][c]
-      let v = ''
+
+      isVertical ? (title.row = +beginRow + c) : (title.colum = +beginColum + c)
       // 如果获取值报错，那么断定单元格值为空，直接取上一个单元格的值
       try {
-        v = cell.v || cell?.ct?.s.map((itm) => itm.v).join('')
-      } catch {
-        v = title.title
+        title.title = cell.v || cell?.ct?.s.map((itm) => itm.v).join('')
+        // 如果有值那么直接进入下一列或者下一行
+        if (title.title) {
+          // 如果有合并单元格，直接跳过合并的单元格
+          if (cell?.mc?.rs > 1 || cell?.mc?.cs > 1) {
+            c += (isVertical ? cell.mc.rs : cell.mc.cs) - 1
           }
-      // 如果有单元格合并，跳过单元格
-      if (cell?.mc) {
-        r += isVertical ? cell.mc.cs - 1 : cell.mc.rs - 1
-        c += isVertical ? cell.mc.rs - 1 : cell.mc.cs - 1
+          break
+        }
+      } catch {
+        continue
       }
-      title.title = v.replaceAll(/(\s+)/g, '')
-      title.colum = +beginColum + (isVertical ? r : c)
-      title.row = +beginRow + (isVertical ? c : r)
     }
     titles.push(title)
   }
 
   return titles
 }
-
 /**
  * 获取当前选取的坐标
  * @returns

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

+<template>
+  <el-form size="small" inline>
+    <el-row :gutter="12">
+      <el-col>
+        <el-form-item label="数据区域">
+          <el-tag>{{
+            getRangetxt(
+              currentForm.beginRow,
+              currentForm.endRow,
+              currentForm.beginColum,
+              currentForm.endColum
+            )
+          }}</el-tag>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="区域别称" prop="excelAreaNicname">
+          <el-input v-model="currentForm.excelAreaNicname"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="区域类型" prop="excelAreaType">
+          <el-select v-model="currentForm.excelAreaType">
+            <template v-for="item in areaTypeSelectOption" :key="item.value">
+              <el-option :label="item.label" :value="item.value"></el-option>
+            </template>
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="循环体间隔" prop="checkNumber">
+          <el-input type="number" v-model="currentForm.checkNumber"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="标题作为数据" prop="oneself">
+          <el-checkbox v-model="currentForm.oneself" true-label="Y" false-label="N">是</el-checkbox>
+        </el-form-item>
+      </el-col>
+    </el-row>
+
+    <vxe-table
+      :row-config="{ isCurrent: true }"
+      border
+      :data="currentForm.excelAreaTitle"
+      size="mini"
+      height="200"
+      :edit-config="{ trigger: 'click', mode: 'cell' }"
+    >
+      <vxe-column title="标题" field="title" :edit-render="{}">
+        <template #edit="{ row }">
+          <el-input v-model="row.title" size="small"></el-input>
+        </template>
+      </vxe-column>
+      <vxe-column title="单元格" field="cell" width="90">
+        <template #default="{ row }">
+          {{ getRangetxt(row.row, row.row, row.colum, row.colum) }}
+        </template>
+      </vxe-column>
+      <vxe-column title="操作" field="action" width="50">
+        <template #default="{ row, $rowIndex }">
+          <el-link style="font-size: 12px" type="danger" @click="delAreaTitle($rowIndex)"
+            >删除</el-link
+          >
+        </template>
+      </vxe-column>
+    </vxe-table>
+  </el-form>
+
+  <p>
+    附加信息：<el-tag>{{
+      getRangetxt(attchInfo.beginRow, attchInfo.endRow, attchInfo.beginColum, attchInfo.endColum)
+    }}</el-tag>
+  </p>
+  <vxe-table
+    style="margin-top: 8px"
+    :row-config="{ isCurrent: true }"
+    border
+    :data="attchInfo.groupTitles"
+    size="mini"
+    max-height="200"
+    :edit-config="{ trigger: 'click', mode: 'cell' }"
+  >
+    <vxe-column title="别称" field="title" :edit-render="{}">
+      <template #edit="{ row }">
+        <el-input size="small" v-model="row.title"></el-input>
+      </template>
+    </vxe-column>
+    <vxe-column title="单元格" field="area" width="100">
+      <template #default="{ row }">
+        {{ getRangetxt(row.row, row.row, row.colum, row.colum) }}
+      </template>
+    </vxe-column>
+    <vxe-column title="操作" field="action" width="50">
+      <template #default="{ row, $rowIndex }">
+        <el-link style="font-size: 12px" type="danger" @click="delGroupTitle($rowIndex)"
+          >删除</el-link
+        >
+      </template>
+    </vxe-column>
+  </vxe-table>
+
+  <vxe-table
+    style="margin-top: 8px"
+    :row-config="{ isCurrent: true }"
+    border
+    :data="attchInfo.areaTitles"
+    size="mini"
+    max-height="200"
+    :edit-config="{ trigger: 'click', mode: 'cell' }"
+  >
+    <vxe-column title="标题" field="title" :edit-render="{}">
+      <template #edit="{ row }">
+        <el-input v-model="row.title" size="small"></el-input>
+      </template>
+    </vxe-column>
+    <vxe-column title="单元格" field="cell" width="100">
+      <template #default="{ row }">
+        {{ getRangetxt(row.row, row.row, row.colum, row.colum) }}
+      </template>
+    </vxe-column>
+    <vxe-column title="操作" field="action" width="50">
+      <template #default="{ row, $rowIndex }">
+        <el-link style="font-size: 12px" type="danger" @click="delGroupAreaTitle($rowIndex)"
+          >删除</el-link
+        >
+      </template>
+    </vxe-column>
+  </vxe-table>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch, onMounted } from 'vue'
+import { cloneDeep } from 'lodash-es'
+import { getRangetxt } from '@/utils/excel'
+import type { Recordable } from '@/types/global'
+import { apiDictList } from '@/api/common'
+import { ElMessage } from 'element-plus'
+
+const props = defineProps({
+  currentAreaMark: {
+    type: Object,
+    defualt: () => ({})
+  }
+})
+const areaTypeSelectOption = ref<Recordable[]>([])
+
+const currentForm = reactive<Recordable>({
+  beginRow: '',
+  endRow: '',
+  beginColum: '',
+  endColum: '',
+  sheetNum: 0,
+  excelAreaTitle: []
+})
+const attchInfo = reactive<Recordable>({
+  beginRow: '',
+  endRow: '',
+  beginColum: '',
+  endColum: '',
+  sheetNum: 0,
+  areaTitles: [],
+  groupTitles: []
+})
+
+watch(
+  () => props.currentAreaMark,
+  (val) => {
+    Object.assign(currentForm, val)
+    if (val?.desGroups.length) {
+      Object.assign(attchInfo, cloneDeep(val.desGroups[0]))
+    }
+  },
+  { deep: true, immediate: true }
+)
+
+const delAreaTitle = (index: number) => {
+  currentForm.excelAreaTitle.splice(index, 1)
+}
+const delGroupAreaTitle = (index: number) => {
+  attchInfo.areaTitles.splice(index, 1)
+}
+const delGroupTitle = (index: number) => {
+  if (attchInfo.groupTitles.length == 1) {
+    return ElMessage.error('附加信息必须有别称！')
+  }
+  attchInfo.groupTitles.splice(index, 1)
+}
+
+const queryDict = async (code: string) => {
+  const { data } = await apiDictList({
+    dictCodes: code
+  })
+  areaTypeSelectOption.value = data.result[code]
+}
+onMounted(() => {
+  queryDict('excel_area_type')
+})
+
+const getAreaData = () => {
+  return {
+    ...currentForm,
+    desGroups: [{ ...attchInfo }]
+  }
+}
+defineExpose({
+  getAreaData
+})
+</script>

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

@@ -57,7 +57,11 @@ const nextStep = (index = 1, data: any) => {
       break
     case 2:
       if (index != -1) {
+        if (data.desGroups.beginRow != '') {
           currentAreaMark.desGroups = [data.desGroups]
+        } else {
+          currentAreaMark.desGroups = []
+        }
         try {
           // 保存
           saveArea()

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

@@ -46,11 +46,11 @@
           <el-checkbox true-label="Y" false-label="N" v-model="formState.oneself">是</el-checkbox>
         </el-form-item>
       </el-col>
-      <el-col :span="12">
+      <!-- <el-col :span="12">
         <el-form-item label="标题参与循环" prop="checkSelf" label-width="7em">
           <el-checkbox true-label="Y" false-label="N" v-model="formState.checkSelf">是</el-checkbox>
         </el-form-item>
-      </el-col>
+      </el-col> -->
       <el-col>
         <el-form-item label-width="0">
           <el-button type="primary" @click="setAreaMark('data')">标记数据区</el-button>
@@ -72,7 +72,7 @@ import { onMounted, reactive, ref, watch } from 'vue'
 const luckysheet = (window as any).luckysheet
 const emits = defineEmits(['next'])
 const areaTypeSelectOption = ref<Recordable>([])
-const formState = reactive({
+const formState = reactive<Recordable>({
   excelAreaNicname: '',
   excelAreaType: '',
   checkNumber: 1,
@@ -89,7 +89,7 @@ watch(
   () => formState.excelAreaType,
   (val) => {
     if (val) {
-      formState.excelAreaNicname = areaTypeSelectOption.value.find((v) => v.value == val).label
+      formState.excelAreaNicname = areaTypeSelectOption.value.find((v: any) => v.value == val).label
     }
   }
 )
@@ -100,7 +100,7 @@ const rules = reactive({
   excelAreaType: [{ required: true, message: '请选择区域类型！', trigger: 'change' }],
   checkNumber: [
     {
-      validator: (rule, value, cb) => {
+      validator: (rule: any, value: any, cb: Function) => {
         if (value <= 0) {
           cb(new Error('请输入正整数！'))
           return false
@@ -113,13 +113,7 @@ const rules = reactive({
 })
 const resetFormState = () => {
   // 重置字段
-  form.value?.resetFields([
-    'excelAreaNicname',
-    'excelAreaType',
-    'checkNumber',
-    'checkSelf',
-    'oneself'
-  ])
+  form.value?.resetFields(['excelAreaNicname', 'excelAreaType', 'checkNumber', 'oneself'])
   // 清空位置信息
   Object.assign(formState, {
     sheetNum: 0,