添加设置数据区说明，添加排除区说明

src/constants/excelConfig.ts

@@ -77,11 +77,12 @@ export const colors = [
 ]
 
 export const areaMarksColor = {
-  data: '#65d0ea',
-  head: '#34718d',
-  default: '#ffffff',
-  attch: '#e6ccb2',
-  attch_title: '#e58e26',
-  attch_head: '#b08968',
-  filter: '#ff0000'
+  data: '#65d0ea', // 数据区
+  head: '#34718d', // 标题区
+  default: '#ffffff', // 默认
+  attch: '#e6ccb2', // 附加信息区
+  attch_title: '#e58e26', // 附加区标题
+  attch_head: '#b08968', // 附加区别称
+  caption: '#bc5090', // 说明
+  exclude: '#ff6361' // 排除
 }

src/utils/excel.ts

@@ -92,7 +92,7 @@ export function handleRangeTitle(range: any) {
       isVertical ? (title.row = +beginRow + c) : (title.colum = +beginColum + c)
       // 如果获取值报错，那么断定单元格值为空，直接取上一个单元格的值
       try {
-        title.title = cell.v || cell?.ct?.s.map((itm) => itm.v).join('')
+        title.title = (cell.v || cell?.ct?.s.map((itm) => itm.v).join('')).replaceAll(/(\s+)/g, '')
         // 如果有值那么直接进入下一列或者下一行
         if (title.title) {
           // 如果有合并单元格，直接跳过合并的单元格
@@ -131,3 +131,60 @@ export function getRangePosition() {
     return
   }
 }
+
+/**
+ * 是否是当前sheet
+ * @param sheetNum 当前sheet order
+ * @returns
+ */
+export function isCurrentSheet(sheetNum: number | string) {
+  return luckysheet.getSheet().order == sheetNum
+}
+
+/**
+ * 设置显示sheet页
+ * @param sheetNum 显示sheet的order值
+ * @returns
+ */
+export function setCurrentSheet(sheetNum: number | string) {
+  if (isCurrentSheet(sheetNum)) {
+    return
+  }
+  luckysheet.setSheetActive(sheetNum)
+}
+
+/**
+ * 设置单元格背景颜色
+ * @param range
+ * @param bg
+ */
+export function setRangeBackground(range: Recordable, bg: string) {
+  const r = {
+    beginRow: '',
+    endRow: '',
+    beginColum: '',
+    endColum: '',
+    sheetNum: ''
+  }
+  if (Reflect.has(range, 'beginRow')) {
+    Object.assign(r, range)
+  } else {
+    r.beginRow = range.row
+    r.endRow = range.row
+    r.beginColum = range.colum
+    r.endColum = range.colum
+    r.sheetNum = range.sheet
+  }
+  setCurrentSheet(r.sheetNum)
+
+  luckysheet.menuButton.customUpdateFormat(
+    null,
+    'bg',
+    bg,
+    r.beginRow,
+    r.endRow,
+    r.beginColum,
+    r.endColum,
+    false
+  )
+}

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

 <template>
   <el-form size="small" inline>
     <el-row :gutter="12">
-      <el-col>
+      <el-col :span="6">
         <el-form-item label="数据区域">
           <el-tag>{{
             getRangetxt(
@@ -13,12 +13,12 @@
           }}</el-tag>
         </el-form-item>
       </el-col>
-      <el-col :span="12">
+      <el-col :span="6">
         <el-form-item label="区域别称" prop="excelAreaNicname">
           <el-input v-model="currentForm.excelAreaNicname"></el-input>
         </el-form-item>
       </el-col>
-      <el-col :span="12">
+      <el-col :span="6">
         <el-form-item label="区域类型" prop="excelAreaType">
           <el-select v-model="currentForm.excelAreaType">
             <template v-for="item in areaTypeSelectOption" :key="item.value">
@@ -27,112 +27,193 @@
           </el-select>
         </el-form-item>
       </el-col>
-      <el-col :span="12">
+      <el-col :span="6">
         <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-col :span="6">
         <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>
+  <el-row :gutter="24" style="margin-bottom: 12px">
+    <el-col :span="12" style="margin-bottom: 12px">
+      <!-- excludeArea -->
+      <p class="table-des">排除区：</p>
+      <vxe-table
+        :row-config="{ isCurrent: true }"
+        border
+        :data="currentForm.excludeArea"
+        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="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="delCaptionAndExclude(row, $rowIndex, 2)"
+              >删除</el-link
+            >
+          </template>
+        </vxe-column>
+      </vxe-table>
+    </el-col>
+    <el-col :span="12">
+      <!-- dataTitles -->
+      <p class="table-des">说明区：</p>
+      <vxe-table
+        :row-config="{ isCurrent: true }"
+        border
+        :data="currentForm.dataTitles"
+        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="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="delCaptionAndExclude(row, $rowIndex, 1)"
+              >删除</el-link
+            >
+          </template>
+        </vxe-column>
+      </vxe-table>
+    </el-col>
+
+    <el-col :span="12">
+      <!-- excelAreaTitle -->
+      <p class="table-des">标题区：</p>
+      <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-col>
+  </el-row>
 
-  <p>
+  <p class="table-tag">
     附加信息：<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>
+  <el-row :gutter="24">
+    <el-col :span="12">
+      <p class="table-des">附加别称</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>
+    </el-col>
+
+    <el-col :span="12">
+      <p class="table-des">附加标题</p>
+      <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>
+    </el-col>
+  </el-row>
 </template>
 
 <script setup lang="ts">
 import { ref, reactive, watch, onMounted } from 'vue'
 import { cloneDeep } from 'lodash-es'
-import { getRangetxt } from '@/utils/excel'
+import { getRangetxt, setCurrentSheet } from '@/utils/excel'
 import type { Recordable } from '@/types/global'
 import { apiDictList } from '@/api/common'
 import { ElMessage } from 'element-plus'
@@ -153,6 +234,7 @@ const currentForm = reactive<Recordable>({
   sheetNum: 0,
   excelAreaTitle: []
 })
+const delCapAndExc = ref<Recordable[]>([])
 const attchInfo = reactive<Recordable>({
   beginRow: '',
   endRow: '',
@@ -177,6 +259,14 @@ watch(
 const delAreaTitle = (index: number) => {
   currentForm.excelAreaTitle.splice(index, 1)
 }
+
+// 删除说明单元格和排除单元格
+const delCaptionAndExclude = (row: any, index: number, type: number) => {
+  delCapAndExc.value.push(row);
+  // 删除本行
+  (type == 1 ? currentForm.dataTitles : currentForm.excludeArea).splice(index, 1)
+
+}
 const delGroupAreaTitle = (index: number) => {
   attchInfo.areaTitles.splice(index, 1)
 }
@@ -203,7 +293,24 @@ const getAreaData = () => {
     desGroups: [{ ...attchInfo }]
   }
 }
+
+const getDelCapAndExc = () => {
+  return [...delCapAndExc.value]
+}
 defineExpose({
-  getAreaData
+  getAreaData,
+  getDelCapAndExc
 })
 </script>
+
+<style lang="scss" scoped>
+.table-des {
+  font-size: 14px;
+  font-weight: 600;
+}
+.table-tag {
+  font-size: 16px;
+  border-top: 2px solid #333;
+  padding-top: 10px;
+}
+</style>

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

@@ -68,7 +68,7 @@
       </div>
     </el-scrollbar>
 
-    <vxe-modal width="600" height="600" v-model="editVisible" title="编辑区域" show-footer>
+    <vxe-modal width="80%" height="600" v-model="editVisible" title="编辑区域" show-footer>
       <EditArea ref="editAreaRef" :current-area-mark="currentAreaMark" />
       <template #footer>
         <el-button type="primary" @click="confirmEdit">提交</el-button>
@@ -199,7 +199,7 @@ import {
   removeExcelAreaConnect
 } from '@/api/excel'
 import type { Recordable } from '@/types/global'
-import { getRangetxt } from '@/utils/excel'
+import { getRangetxt, setRangeBackground } from '@/utils/excel'
 import type { VxeTableInstance } from 'vxe-table'
 import EditArea from '../EditArea/EditArea.vue'
 
@@ -352,8 +352,14 @@ const toModify = (row) => {
 }
 const confirmEdit = async () => {
   const areaData = editAreaRef.value.getAreaData()
+  const delCapAndExc = editAreaRef.value.getDelCapAndExc()
   const { data } = await editExcelArea(areaData)
   if (data.code == 200) {
+    if (delCapAndExc.length) {
+      delCapAndExc.forEach((item) => {
+        setRangeBackground(item, areaMarksColor['data'])
+      })
+    }
     ElMessage.success('修改成功！')
     editVisible.value = false
 
@@ -660,9 +666,11 @@ const toRun = async () => {
     if (!data.result.length) return
 
     data.result.forEach((item) => {
-      item.expendData = {}
       for (const key in item) {
         if (typeof item[key] == 'object' && key != 'expendData') {
+          if (!Reflect.has(item, 'expendData')) {
+            item.expendData = {}
+          }
           item.expendData[key] = item[key]
           delete item[key]
         }

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

@@ -61,7 +61,7 @@
         </template>
       </vxe-column>
     </vxe-table>
-    <el-button size="small" @click="back">返回</el-button>
+    <el-button size="small" @click="back">上一步</el-button>
     <el-button type="primary" size="small" @click="setAttch">设置附加信息</el-button>
     <el-button type="primary" size="small" @click="setNickName">设置别称</el-button>
     <el-button type="primary" size="small" @click="setAttchTitle">设置标题</el-button>

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

@@ -51,9 +51,46 @@
           <el-checkbox true-label="Y" false-label="N" v-model="formState.checkSelf">是</el-checkbox>
         </el-form-item>
       </el-col> -->
-      <el-col>
+      <el-col :span="24">
+        <p class="table-title">数据说明区</p>
+        <vxe-table border max-height="200" :data="captionArea" size="mini">
+          <vxe-column title="单元格值" field="title"></vxe-column>
+          <vxe-column title="单元格" width="90">
+            <template #default="{ row }">{{
+              getRangetxt(row.row, row.row, row.colum, row.colum)
+            }}</template>
+          </vxe-column>
+          <vxe-column title="操作" width="50">
+            <template #default="{ row, $rowIndex }">
+              <el-link type="danger" style="font-size: 12px" @click="delCaptionAndExclude(row, $rowIndex, 1)"
+                >删除</el-link
+              >
+            </template>
+          </vxe-column>
+        </vxe-table>
+
+        <p class="table-title mt-2">排除区</p>
+        <vxe-table border max-height="200" :data="excludeArea" size="mini">
+          <vxe-column title="单元格值" field="title"></vxe-column>
+          <vxe-column title="单元格" width="90">
+            <template #default="{ row }">{{
+              getRangetxt(row.row, row.row, row.colum, row.colum)
+            }}</template>
+          </vxe-column>
+          <vxe-column title="操作" width="50">
+            <template #default="{ row, $rowIndex }">
+              <el-link type="danger" style="font-size: 12px" @click="delCaptionAndExclude(row, $rowIndex, 2)"
+                >删除</el-link
+              >
+            </template>
+          </vxe-column>
+        </vxe-table>
+      </el-col>
+      <el-col style="margin-top: 10px">
         <el-form-item label-width="0">
           <el-button type="primary" @click="setAreaMark('data')">标记数据区</el-button>
+          <el-button type="primary" @click="setCaptionArea">标记说明区</el-button>
+          <el-button type="primary" @click="setExcludeArea">标记排除区</el-button>
           <el-button type="success" @click="nextStep">下一步</el-button>
         </el-form-item>
       </el-col>
@@ -65,9 +102,9 @@
 import { apiDictList } from '@/api/common'
 import { areaMarksColor } from '@/constants/excelConfig'
 import type { Recordable } from '@/types/global'
-import { getRangePosition, getRangetxt } from '@/utils/excel'
+import { getRangePosition, getRangetxt, setRangeBackground } from '@/utils/excel'
 import { ElMessage, type FormInstance } from 'element-plus'
-import { onMounted, reactive, ref, watch } from 'vue'
+import { onMounted, reactive, ref, unref, watch } from 'vue'
 
 const luckysheet = (window as any).luckysheet
 const emits = defineEmits(['next'])
@@ -94,6 +131,7 @@ watch(
   }
 )
 
+const tableData = ref([])
 const form = ref<FormInstance>()
 const rules = reactive({
   excelAreaNicname: [{ required: true, message: '请输入区域别称！', trigger: 'change' }],
@@ -122,6 +160,9 @@ const resetFormState = () => {
     endRow: '',
     endColum: ''
   })
+
+  excludeArea.value = []
+  captionArea.value = []
 }
 
 const setAreaMark = (type: 'data') => {
@@ -145,6 +186,61 @@ const setAreaMark = (type: 'data') => {
 
   Object.assign(formState, position)
 }
+
+const captionArea = ref<Recordable[]>([])
+const excludeArea = ref<Recordable[]>([])
+// 设置说明区
+const setCaptionArea = () => {
+  captionArea.value = getRangeCellValue('exclude')
+}
+// 设置排除区
+const setExcludeArea = () => {
+  excludeArea.value = getRangeCellValue('caption')
+}
+
+const delCaptionAndExclude = (row: any, index: number, type = 1) => {
+  ;(type == 1 ? captionArea : excludeArea).value.splice(index, 1)
+  setRangeBackground(row, areaMarksColor['data'])
+}
+// 获取有值的单元格
+const getRangeCellValue = (type: 'caption' | 'exclude') => {
+  const position = getRangePosition()
+  const sheet = luckysheet.getSheet()
+  const rangeValue = luckysheet.getRangeValue()
+  const cells: any = []
+  rangeValue.forEach((row: any, r: number) => {
+    row.forEach((cell: any, c: number) => {
+      const p = {
+        r: position?.beginRow + r,
+        c: position?.beginColum + c
+      }
+      let v = ''
+      try {
+        v = cell.v || cell?.ct?.s.map((itm) => itm.v).join('')
+        if (v) {
+          cells.push({
+            title: v,
+            row: p.r,
+            colum: p.c,
+            sheet: sheet.order
+          })
+          luckysheet.menuButton.customUpdateFormat(
+            null,
+            'bg',
+            areaMarksColor[type],
+            p.r,
+            p.r,
+            p.c,
+            p.c,
+            false
+          )
+        }
+      } catch {}
+    })
+  })
+  return cells
+}
+
 const queryDict = async (code: string) => {
   const { data } = await apiDictList({
     dictCodes: code
@@ -161,7 +257,11 @@ const nextStep = async () => {
   await form.value?.validateField(['excelAreaNicname', 'excelAreaType'])
 
   // 下一步去设置标题
-  emits('next', 1, formState)
+  emits('next', 1, {
+    ...formState,
+    excludeArea: unref(excludeArea),
+    dataTitles: unref(captionArea)
+  })
 }
 
 onMounted(() => {
@@ -177,4 +277,7 @@ defineExpose({
 .set-area-form {
   padding: 6px;
 }
+.table-title {
+  font-size: 14px;
+}
 </style>

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

@@ -26,7 +26,7 @@
         </template>
       </vxe-column>
     </vxe-table>
-    <el-button size="small" @click="nextStep(-1)">返回</el-button>
+    <el-button size="small" @click="nextStep(-1)">上一步</el-button>
     <el-button size="small" type="primary" @click="setAreaTitle">标记标题</el-button>
     <el-button size="small" type="primary" @click="resetAreaTitle">重置</el-button>
     <el-button size="small" type="success" @click="nextStep()">下一步</el-button>
@@ -60,7 +60,7 @@ const setAreaTitle = () => {
   const [sr, er] = sheet.luckysheet_select_save[0].row
   const [sc, ec] = sheet.luckysheet_select_save[0].column
   const rangeData = luckysheet.getRangeValue()
-  const titles = handleRangeTitle(rangeData, unref(props.currentAreaMark))
+  const titles = handleRangeTitle(rangeData)
 
   titleArea.value.push({
     excelAreaNicname: props.currentAreaMark.excelAreaNicname,