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

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/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,