添加附加信息标题区

src/constants/excelConfig.ts

@@ -82,5 +82,6 @@ export const authorityConfig = {
     'head': '#34718d',
     'default': '#ffffff',
     'attch': '#e6ccb2',
-    'attch_head': '#b08968'
+    'attch_title': '#e58e26',
+    'attch_head': '#b08968',
   }
\ No newline at end of file

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

@@ -4,8 +4,9 @@
 
     <el-scrollbar height="100%">
       <div class="w-[420px] h-full bg-white">
+        
         <p class="pl-2 text-lg font-bold leading-[40px] bg-slate-200">标注配置</p>
-
+        <!-- <SetArea /> -->
         <el-form
           ref="settingForm"
           size="small"
@@ -56,6 +57,9 @@
               <el-button-group>
                 <el-button type="primary" @click="setAreaMark('attch')">设置附加信息</el-button>
                 <el-button type="primary" @click="setAreaMark('attch_head')"
+                  >设置附加别称</el-button
+                >
+                <el-button type="primary" @click="setAreaMark('attch_title')"
                   >设置附加标题</el-button
                 >
               </el-button-group>
@@ -163,10 +167,10 @@
             </vxe-column>
           </vxe-table>
 
-          <template v-if="currentAreaMark.desGroups.length">
+
             <p class="font-bold">附加信息</p>
             <vxe-table
-              :data="currentAreaMark.desGroups"
+              :data="currentAttchInfo.groupTitles"
               @cell-click="cellClick"
               border
               size="mini"
@@ -174,12 +178,12 @@
             >
               <vxe-column title="附加区域" field="area" width="120">
                 <template #default="{ row }">
-                  {{ getRangetxt(row.beginRow, row.endRow, row.beginColum, row.endColum) }}
+                  {{ getRangetxt(row.row, row.row, row.colum, row.colum) }}
                 </template>
               </vxe-column>
               <vxe-column title="附加title" field="area">
                 <template #default="{ row }">
-                  {{ row.titles[0].title }}
+                  {{ row.title }}
                 </template>
               </vxe-column>
 
@@ -194,7 +198,32 @@
                 </template>
               </vxe-column>
             </vxe-table>
-          </template>
+
+            <vxe-table
+              class="mb-2 mt-2"
+              :row-config="{ isCurrent: true }"
+              border
+              :data="currentAttchInfo.areaTitles"
+              size="mini"
+              height="200"
+              :edit-config="{ trigger: 'click', mode: 'cell' }"
+            >
+              <vxe-column title="title" field="title" :edit-render="{}">
+                <template #edit="{ row }">
+                  <el-input
+                    :disabled="isEditCurrentArea"
+                    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-table>
+
 
           <el-button type="primary" size="small" @click="saveAreaMark">保存</el-button>
           <el-button
@@ -346,6 +375,7 @@
 <script lang="ts" setup>
 import { ref, onMounted, onUnmounted, reactive, unref, computed, watch, nextTick } from 'vue'
 import LuckyExcel from 'luckyexcel'
+import SetArea from '../SetArea/SetArea.vue'
 import {
   areaMarksColor,
   authorityConfig,
@@ -493,19 +523,24 @@ const setSheetAuthority = (exportJson: any) => {
 }
 
 const cellClick = ({ row }) => {
+  const sheetNum = row?.sheetNum || row.sheet
+  const beginRow = row?.beginRow || row.row
+  const beginColum = row?.beginColum || row.colum
+  const endColum = row?.endColum || row.colum
+  const endRow = row?.endRow || row.row
   // 判断是否是当前sheet页标记
   const sheet = luckysheet.getSheet()
-  if (sheet.order != row.sheetNum) {
-    luckysheet.setSheetActive(row.sheetNum)
+  if (sheet.order != sheetNum) {
+    luckysheet.setSheetActive(sheetNum)
   }
   luckysheet.scroll({
-    targetRow: row.beginRow - 3 < 0 ? 0 : row.beginRow - 3,
-    targetColumn: row.beginColum - 3 < 0 ? 0 : row.beginColum - 3
+    targetRow: beginRow - 3 < 0 ? 0 : beginRow - 3,
+    targetColumn: beginColum - 3 < 0 ? 0 : beginColum - 3
   })
   setTimeout(() => {
     luckysheet.setRangeShow({
-      row: [row.beginRow, row.endRow],
-      column: [row.beginColum, row.endColum]
+      row: [beginRow, endRow],
+      column: [beginColum, endColum]
     })
   }, 100)
 }
@@ -526,7 +561,9 @@ const currentAttchInfo = reactive({
   beginRow: '',
   beginColum: '',
   endRow: '',
-  titles: []
+  endColum: '',
+  groupTitles: [],
+  areaTitles: []
 })
 
 // 删除附加信息
@@ -547,10 +584,28 @@ const resetAttchInfo = () => {
     beginRow: '',
     beginColum: '',
     endRow: '',
-    titles: []
+    endColum: '',
+    groupTitles: [],
+    areaTitles: []
   })
 }
-const setAreaMark = async (type: 'data' | 'head' | 'attch' | 'attch_head' = 'data') => {
+const saveAttchInfo = () => {
+  const res = Object.assign({}, currentAttchInfo)
+  const haveAttch = res.beginRow != ''
+  if (haveAttch) {
+    // 判断是否有 groupTitles
+    if (!res.groupTitles.length) {
+      ElMessage.error('请设置附加信息的别称！')
+      return false
+    }
+    Object.assign(currentAreaMark, { desGroups: currentAreaMark.desGroups.concat(res) })
+  }
+  return true
+}
+
+const setAreaMark = async (
+  type: 'data' | 'head' | 'attch' | 'attch_head' | 'attch_title' = 'data'
+) => {
   if (type === 'data') {
     /**
      * 判断是否有未保存的区域
@@ -653,7 +708,8 @@ const setAreaMark = async (type: 'data' | 'head' | 'attch' | 'attch_head' = 'dat
       beginColum: formState.beginColum,
       endRow: formState.endRow,
       endColum: formState.endColum,
-      titles: []
+      groupTitles: [],
+      areaTitles: []
     }
 
     Object.assign(currentAttchInfo, area)
@@ -664,16 +720,20 @@ const setAreaMark = async (type: 'data' | 'head' | 'attch' | 'attch_head' = 'dat
       return ElMessage.error('请先设置附加信息区域！')
     }
 
-    const res = {}
     const rangeData = luckysheet.getRangeValue()
-    const titles = handleRangeTitle(rangeData, unref(currentAttchInfo))
-    Object.assign(res, currentAttchInfo, { titles })
-
-    // 设置完title 直接添加
-    currentAreaMark.desGroups.push(res)
+    const groupTitles = handleRangeTitle(rangeData, unref(currentAttchInfo))
+    Object.assign(currentAttchInfo, { groupTitles })
+  } else if (type === 'attch_title') {
+    // 验证是否在附加区域
+    // 验证是否设置附加区域
+    if (currentAttchInfo.beginRow == '') {
+      return ElMessage.error('请先设置附加信息区域！')
+    }
 
-    // 重置附加信息区域
-    resetAttchInfo()
+    const rangeData = luckysheet.getRangeValue()
+    const areaTitles = handleRangeTitle(rangeData, unref(currentAttchInfo))
+    console.log('areaTitles', areaTitles)
+    Object.assign(currentAttchInfo, { areaTitles })
   }
 
   function uniqArrayObject(arr = []) {
@@ -741,7 +801,19 @@ const resetCurrentArea = (fn?: Function) => {
   )
 }
 
+const hasRepeatValue = (data: any[], field: string) => {
+  const datas = data.map(item => item[field])
+  const res = Array.from(new Set(datas))
+  return res.length == datas.length
+}
 const saveAreaMark = async () => {
+  if (!hasRepeatValue(currentAreaMark.excelAreaTitle, 'title')) {
+    return ElMessage.error('有重复标题！请修改后保存！')
+  }
+  // 保存附加信息
+  if(!saveAttchInfo()) {
+    return
+  }
   currentAreaMark.fileId = getFileInfo.value.orderFileId
   currentAreaMark.titleArea = JSON.stringify(unref(currentTitlesArea))
   // 如果有id 调用修改，否则调用新增
@@ -819,6 +891,7 @@ const toModify = (row) => {
 
   Object.assign(cachAreaMark, cloneDeep(row))
   Object.assign(currentAreaMark, row)
+  // Object.assign(currentAttchInfo)
 
   currentTitlesArea.value = JSON.parse(currentAreaMark.titleArea)
 }
@@ -1047,7 +1120,7 @@ const setSheetAreaMark = (sheet: any) => {
       )
       if (item.excelAreaTitle.length) {
         const areas = JSON.parse(item.titleArea)
-        areas.forEach((area: any) => {
+        areas?.forEach((area: any) => {
           luckysheet.menuButton.customUpdateFormat(
             null,
             'bg',
@@ -1061,7 +1134,7 @@ const setSheetAreaMark = (sheet: any) => {
         })
       }
       if (item.desGroups.length) {
-        item.desGroups.forEach((area) => {
+        item?.desGroups.forEach((area) => {
           luckysheet.menuButton.customUpdateFormat(
             null,
             'bg',
@@ -1073,8 +1146,8 @@ const setSheetAreaMark = (sheet: any) => {
             false
           )
 
-          if (area.titles.length) {
-            area.titles.forEach((a) => {
+          if (area.groupTitles.length) {
+            area.groupTitles.forEach((a) => {
               luckysheet.menuButton.customUpdateFormat(
                 null,
                 'bg',
@@ -1087,6 +1160,21 @@ const setSheetAreaMark = (sheet: any) => {
               )
             })
           }
+
+          if (area.areaTitles.length) {
+            area.areaTitles.forEach((a) => {
+              luckysheet.menuButton.customUpdateFormat(
+                null,
+                'bg',
+                areaMarksColor['attch_title'],
+                a.row,
+                a.row,
+                a.colum,
+                a.colum,
+                false
+              )
+            })
+          }
         })
       }
     })
@@ -1124,9 +1212,20 @@ const toRun = async () => {
     }
 
     if (!data.result.length) return
+
+    // data.result.forEach(item => {
+    //   item.expendData = {}
+    //   for(const key in item) {
+    //     if (typeof item[key] == 'object') {
+    //       item.expendData[key] = item[key]
+    //       delete item[key]
+    //     }
+    //   }
+    // })
+
     runResultData.value = data.result
     runResultTitle.value = Object.keys(data.result[0]).filter((field) => {
-      return field != 'sortNum' && field != '数据区'
+      return field != 'sortNum' && field != '数据区' && field != 'expendData'
     })
     // const idx = runResultTitle.value.findIndex((v) => v == 'sortNum')
     // runResultTitle.value.splice(idx, 1)