标记区域功能，添加区域关联配置

src/api/excel.ts

@@ -178,3 +178,32 @@ export const getExcelAreaByFileId = (orderFileId: string) => {
     headers: formHeader
   })
 }
+export const removeExcelArea = (excelAreaId: string) => {
+  return axios.get('/api/excelMark/removeExcelArea', {
+    params: { excelAreaId },
+    headers: formHeader
+  })
+}
+export const getExcelConnectByFileId = (orderFileId: string) => {
+  return axios.get('/api/excelMark/getExcelAreaConnectByFileID', {
+    params: { orderFileId },
+    headers: formHeader
+  })
+}
+export const removeExcelAreaConnect = (excelAreaConnectId: string) => {
+  return axios.get('/api/excelMark/removeExcelAreaConnect', {
+    params: { excelAreaConnectId },
+    headers: formHeader
+  })
+}
+export const addExcelAreaConnect = (data: any) => {
+  return axios.post('/api/excelMark/addExcelAreaConnect', data)
+}
+export const excelMarkRun = (orderFileId: string) => {
+  return axios.get('/api/excelMark/run', {
+    params: {
+      orderFileId
+    },
+    headers: formHeader
+  })
+}

src/types/global.d.ts

-declare module 'luckyexcel'
+declare module 'luckyexcel';
 
 export type Nullable<T> = T | null
 export type NonNullable<T> = T extends null | undefined ? never : T
@@ -6,3 +6,8 @@ export type Recordable<T = any> = Record<string, T>
 export type ReadonlyRecordable<T = any> = {
   readonly [key: string]: T
 }
+
+
+declare interface Window {
+  luckusheet: any
+}
\ No newline at end of file

src/types/luckyexcel.d.ts

+declare module 'luckyexcel';
\ No newline at end of file

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

@@ -2,6 +2,7 @@
   <div class="flex h-full">
     <div id="luckysheet" class="flex-1"></div>
 
+    <el-scrollbar height="100%">
       <div class="w-[400px] h-full bg-white">
         <p class="pl-2 text-lg font-bold leading-[40px] bg-slate-200">标注配置</p>
 
@@ -39,6 +40,7 @@
           <p class="text-slate-600">区域类型：{{ cachAreaMark.excelAreaType || '--' }}</p>
           <p class="text-slate-600">区域别称：{{ cachAreaMark.excelAreaNicname || '--' }}</p>
           <vxe-table
+            class="mb-2"
             :row-config="{ isCurrent: true }"
             border
             :data="cachHeadAreaData"
@@ -52,13 +54,13 @@
               </template>
             </vxe-column>
           </vxe-table>
-        <el-button type="primary" size="small" @click="resetCachArea()">重置选区</el-button>
-        <el-button type="primary" size="small" @click="resetCachHeadArea">重置标题区</el-button>
           <el-button type="primary" size="small" @click="saveAreaMark">保存</el-button>
+          <el-button type="default" size="small" @click="resetCachArea()">重置选区</el-button>
+          <el-button type="default" size="small" @click="resetCachHeadArea">重置标题区</el-button>
         </div>
 
-      <div class="p-2 text-sm">
-        <p class="font-bold">已标记记录：</p>
+        <div class="mt-6 pl-2 pr-2 pb-2 text-sm border-b-2">
+          <p class="font-bold">标记区域</p>
           <vxe-table
             @cell-click="cellClick"
             :row-config="{ isCurrent: true }"
@@ -74,14 +76,98 @@
                 {{ getRangetxt(row.beginRow, row.endRow, row.beginColum, row.endColum) }}
               </template>
             </vxe-column>
+            <vxe-column title="操作" field="action" width="90">
+              <template #default="{ row }">
+                <el-link
+                  class="mr-1"
+                  style="font-size: 12px"
+                  type="primary"
+                  @click.stop="chooseConnect(row)"
+                  >关联</el-link
+                >
+                <el-link style="font-size: 12px" type="danger" @click="delAreaMark(row)"
+                  >删除</el-link
+                >
+              </template>
+            </vxe-column>
           </vxe-table>
         </div>
+
+        <div class="p-2 text-sm">
+          <p class="font-bold">区域关联信息</p>
+          <vxe-table border :data="connectList" size="mini" height="200">
+            <vxe-column title="关联名称" field="excelAreaId_dictText"></vxe-column>
+            <vxe-column title="别关联名称" field="excelAreaBeId_dictText"></vxe-column>
+            <vxe-column title="操作" field="action" width="60">
+              <template #default="{ row, $rowIndex }">
+                <el-link style="font-size: 12px" type="danger" @click="delConnect(row, $rowIndex)"
+                  >删除</el-link
+                >
+              </template>
+            </vxe-column>
+          </vxe-table>
         </div>
+
+        <el-button type="primary" size="small" @click="toRun">执行解析</el-button>
+      </div>
+    </el-scrollbar>
+
+    <vxe-modal
+      width="600"
+      @hide="chooseConnectOnHide"
+      v-model="chooseVisible"
+      title="选择被关联的区域"
+      show-footer
+    >
+      <vxe-table ref="beConnectTable" border size="mini" :data="beConnectData" height="400">
+        <vxe-column type="radio" width="40"></vxe-column>
+        <vxe-column title="sheet" field="sheetNum" width="60"></vxe-column>
+        <vxe-column title="别称" field="excelAreaNicname"></vxe-column>
+        <vxe-column title="区域" field="area" width="90">
+          <template #default="{ row }">
+            {{ getRangetxt(row.beginRow, row.endRow, row.beginColum, row.endColum) }}
+          </template>
+        </vxe-column>
+      </vxe-table>
+
+      <template #footer>
+        <el-button type="primary" @click="confirmBeConnect">确认</el-button>
+      </template>
+    </vxe-modal>
+
+    <vxe-modal v-model="connectVisible" width="700" title="关联信息配置" show-footer>
+      <p>关联区域信息：</p>
+      <p>被关联信息：</p>
+
+      <vxe-table
+        class="mt-2"
+        size="mini"
+        :data="connectConfigData"
+        border
+        height="400"
+        ref="xTableConnect"
+      >
+        <vxe-column type="checkbox" width="40"></vxe-column>
+        <vxe-column title="关联title" field="title"></vxe-column>
+        <vxe-column title="被关联title" field="betitle">
+          <template #default="{ row }">
+            <el-select v-model="row.betitle" size="small" @change="(v) => changeBeConnect(v, row)">
+              <template v-for="item in beConnectSelectOptions" :key="item.title">
+                <el-option :value="item.title" :label="item.title"></el-option>
+              </template>
+            </el-select>
+          </template>
+        </vxe-column>
+      </vxe-table>
+      <template #footer>
+        <el-button type="primary" @click="confirmConnect">确认</el-button>
+      </template>
+    </vxe-modal>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, onUnmounted, reactive, unref, computed } from 'vue'
+import { ref, onMounted, onUnmounted, reactive, unref, computed, watch } from 'vue'
 import LuckyExcel from 'luckyexcel'
 import {
   areaMarksColor,
@@ -96,12 +182,38 @@ import { useCommentExcel } from '@/stores/commentExcel'
 import { storeToRefs } from 'pinia'
 import { isFunction } from '@/utils/is'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { addExcelArea, getExcelAreaByFileId } from '@/api/excel'
+import {
+  addExcelArea,
+  addExcelAreaConnect,
+  excelMarkRun,
+  getExcelAreaByFileId,
+  getExcelConnectByFileId,
+  removeExcelArea,
+  removeExcelAreaConnect
+} from '@/api/excel'
 import type { Recordable } from '@/types/global'
 import { getRangetxt } from '@/utils/excel'
+import type { VxeTableInstance } from 'vxe-table'
 
+const connectVisible = ref(false)
+const xTableConnect = ref<VxeTableInstance>()
+const beConnectTable = ref<VxeTableInstance>()
+const luckysheet = (window as any).luckysheet
 const commentExcelStore = useCommentExcel()
 const { getFileInfo } = storeToRefs(commentExcelStore)
+const connectList = ref<any[]>([])
+const chooseVisible = ref(false)
+const currentConnectInfo = reactive<Recordable>({
+  excelAreaConnectId: '',
+  excelAreaId: '',
+  excelAreaBeId: '',
+  connectFiled: [],
+  beConnectFiled: [],
+  fileId: ''
+})
+const beConnectData = computed(() =>
+  areaList.value.filter((v: any) => v.excelAreaId != currentConnectInfo.excelAreaId)
+)
 const formState = reactive({
   excelAreaId: '',
   fileId: '',
@@ -114,6 +226,11 @@ const formState = reactive({
   excelAreaNicname: ''
 })
 
+const isSetSheetMark = ref<any>([])
+const initIsSetSheetMark = (length: number) => {
+  isSetSheetMark.value = Array.from({ length }).fill(false)
+}
+
 /**
  * 存储在本地的区域标记
  * locaExcelAreaMarks = {
@@ -123,7 +240,7 @@ const formState = reactive({
 const locaExcelAreaMarks: Recordable = reactive({})
 const areaList = computed(() => flatten(Object.values(locaExcelAreaMarks)))
 
-const initExcelAreaMarksKey = (len) => {
+const initExcelAreaMarksKey = (len: number) => {
   Array.from({ length: len }).forEach((item, index) => {
     Reflect.set(locaExcelAreaMarks, index, [])
   })
@@ -142,16 +259,16 @@ const setSheetAuthority = (exportJson: any) => {
 
 const cellClick = ({ row }) => {
   // 判断是否是当前sheet页标记
-  const sheet = window.luckysheet.getSheet()
-  if (sheet.order !== row.sheetNum) {
-    window.luckysheet.setSheetActive(row.sheetNum)
+  const sheet = luckysheet.getSheet()
+  if (sheet.order != row.sheetNum) {
+    luckysheet.setSheetActive(row.sheetNum)
   }
-  window.luckysheet.scroll({
+  luckysheet.scroll({
     targetRow: row.beginRow,
     targetColumn: row.beginColum
   })
   setTimeout(() => {
-    window.luckysheet.setRangeShow({
+    luckysheet.setRangeShow({
       row: [row.beginRow, row.endRow],
       column: [row.beginColum, row.endColum]
     })
@@ -173,7 +290,7 @@ const setAreaMark = async (type: 'data' | 'head' = 'data') => {
       })
       resetCachArea(() => {
         // 设置当前选区
-        window.luckysheet.setRangeShow({
+        luckysheet.setRangeShow({
           row: [formState.beginRow, formState.endRow],
           column: [formState.beginColum, formState.endColum]
         })
@@ -198,7 +315,7 @@ const setAreaMark = async (type: 'data' | 'head' = 'data') => {
      * 判断是否有重复的单元格添加，如有重复无需添加此单元格
      */
     const result = []
-    const rangeData = window.luckysheet.getRangeValue()
+    const rangeData = luckysheet.getRangeValue()
     console.log('rangeData', rangeData)
     const { beginColum, beginRow, endColum, endRow } = formState
     for (let i = beginRow, r = 0; i <= endRow; i++) {
@@ -222,7 +339,7 @@ const setAreaMark = async (type: 'data' | 'head' = 'data') => {
 
   setTimeout(() => {
     // 设置区域颜色
-    window.luckysheet.setRangeFormat('bg', areaMarksColor[type])
+    luckysheet.setRangeFormat('bg', areaMarksColor[type])
   }, 100)
 }
 const resetCachAreaState = () => {
@@ -243,7 +360,7 @@ const resetCachAreaState = () => {
 }
 const resetCachArea = (fn?: Function) => {
   // 清除区域颜色
-  window.luckysheet.setRangeShow(
+  luckysheet.setRangeShow(
     {
       row: [cachAreaMark.beginRow, cachAreaMark.endRow],
       column: [cachAreaMark.beginColum, cachAreaMark.endColum]
@@ -251,7 +368,7 @@ const resetCachArea = (fn?: Function) => {
     {
       show: false,
       success: () => {
-        window.luckysheet.setRangeFormat('bg', areaMarksColor['default'])
+        luckysheet.setRangeFormat('bg', areaMarksColor['default'])
         resetCachAreaState()
         fn && fn()
       }
@@ -260,7 +377,7 @@ const resetCachArea = (fn?: Function) => {
 }
 const resetCachHeadArea = () => {
   // 清除标题区域颜色 -> 设置成数据区域颜色
-  window.luckysheet.setRangeShow(
+  luckysheet.setRangeShow(
     {
       row: [cachAreaMark.beginRow, cachAreaMark.endRow],
       column: [cachAreaMark.beginColum, cachAreaMark.endColum]
@@ -268,13 +385,14 @@ const resetCachHeadArea = () => {
     {
       show: false,
       success: () => {
-        window.luckysheet.setRangeFormat('bg', areaMarksColor['data'])
+        luckysheet.setRangeFormat('bg', areaMarksColor['data'])
         // 删除 excelAreaTitle 属性
         delete cachAreaMark.excelAreaTitle
       }
     }
   )
 }
+
 const saveAreaMark = async () => {
   cachAreaMark.fileId = getFileInfo.value.orderFileId
   const { data } = await addExcelArea(cachAreaMark)
@@ -283,27 +401,183 @@ const saveAreaMark = async () => {
   resetCachAreaState()
 }
 
+const cachDelOtherSheetArea = reactive<Recordable>({})
+const delAreaMark = async (row: any) => {
+  // 调用接口删除
+  await removeExcelArea(row.excelAreaId)
+  const sheet = luckysheet.getSheet()
+  /**
+   * 如果在本sheet那么直接删除，并且改变区域颜色
+   * 如果不在当前sheet，保存删除的数据，在切换sheet的hook中删除颜色
+   */
+  if (row.sheetNum == sheet.order) {
+    const range: Recordable = {
+      row: [row.beginRow, row.endRow],
+      column: [row.beginColum, row.endColum]
+    }
+    luckysheet.setRangeShow(range)
+    setTimeout(() => {
+      luckysheet.setRangeFormat('bg', areaMarksColor['default'])
+    }, 100)
+  } else {
+    // 保存本地
+    if (!Reflect.has(cachDelOtherSheetArea, row.sheetNum)) {
+      cachDelOtherSheetArea[row.sheetNum] = []
+    }
+    cachDelOtherSheetArea[row.sheetNum].push(row)
+  }
+
+  // 删除本地标记 locaExcelAreaMark[row.sheetNum] 对应的区域
+  const index = locaExcelAreaMarks[row.sheetNum].findIndex(
+    (item: any) => item.excelAreaId == row.excelAreaId
+  )
+  locaExcelAreaMarks[row.sheetNum].splice(index, 1)
+}
+
 const queryArea = async () => {
   const { data } = await getExcelAreaByFileId(getFileInfo.value.orderFileId)
-  data.result.forEach((item) => locaExcelAreaMarks[item.sheetNum].push(item))
+  data.result.forEach((item: any) => locaExcelAreaMarks[item.sheetNum || 0].push(item))
+}
+const confirmConnect = () => {
+  /**
+   * 1. 验证是否选择了要关联的title
+   * 2. 验证选择的title是否有被关联的title
+   * 3. 添加关联关系
+   */
+  const list = xTableConnect.value?.getCheckboxRecords()
+  if (!list?.length) {
+    addConnect([])
+    return
+    // return ElMessage.warning('请选择有效数据！')
+  }
+
+  try {
+    list.forEach((item) => {
+      if (!item.betitle) {
+        throw new Error('请选择被关联的title！！')
+      }
+    })
+  } catch (e: any) {
+    ElMessage.warning(e.message)
+  }
+
+  addConnect(list)
+}
+const addConnect = async (list: any) => {
+
+  list.forEach((item: any) => {
+    currentConnectInfo.connectFiled.push({
+      title: item.title,
+      sheet: item.sheet,
+      row: item.row,
+      colum: item.colum
+    })
+
+    currentConnectInfo.beConnectFiled.push({
+      title: item.betitle,
+      sheet: item.besheet,
+      row: item.berow,
+      colum: item.becolum
+    })
+  })
+  currentConnectInfo.fileId = getFileInfo.value.orderFileId
+
+  const { data } = await addExcelAreaConnect(currentConnectInfo)
+
+  if (!data?.success) {
+    ElMessage.error(data?.message || '操作失败！')
+    return
+  }
+  ElMessage.success('添加成功！')
+  connectVisible.value = false
+  // 添加成功 手动更新页面数据
+  connectList.value.push(data.result)
+}
+const chooseConnect = (row: any) => {
+  currentConnectInfo.excelAreaId = row.excelAreaId
+  chooseVisible.value = true
 }
 
+const connectConfigData = ref([])
+const beConnectSelectOptions = computed(
+  () =>
+    areaList.value.find((v: any) => v.excelAreaId == currentConnectInfo.excelAreaBeId)
+      ?.excelAreaTitle || []
+)
+watch(connectVisible, (val) => {
+  if (val) {
+    const titles = areaList.value.find((v: any) => v.excelAreaId == currentConnectInfo.excelAreaId)
+      ?.excelAreaTitle
+
+    connectConfigData.value = titles.map((item: any) => {
+      return {
+        title: item.title,
+        sheet: item.sheet,
+        row: item.row,
+        colum: item.colum,
+        betitle: '',
+        berow: '',
+        becolum: '',
+        besheet: ''
+      }
+    })
+  }
+})
+const changeBeConnect = (v: string, row: any) => {
+  const option = beConnectSelectOptions.value.find((item: any) => item.title == v)
+  console.log('option', option)
+  row.becolum = option.colum
+  row.besheet = option.sheet
+  row.berow = option.row
+  row.betitle = option.title
+}
+const confirmBeConnect = () => {
+  const data = beConnectTable.value?.getRadioRecord()
+  if (!data) {
+    return ElMessage.warning('请选择有效数据！')
+  }
+  currentConnectInfo.excelAreaBeId = data.excelAreaId
+  // 打开关联弹窗。
+  chooseVisible.value = false
+  connectVisible.value = true
+}
+const chooseConnectOnHide = () => {
+  Object.assign(currentConnectInfo, {
+    // excelAreaConnectId: '',
+    // excelAreaId: '',
+    // excelAreaBeId: '',
+    connectFiled: [],
+    beConnectFiled: [],
+    // fileId: ''
+  })
+}
+const delConnect = async (row: any, index: number) => {
+  const { data } = await removeExcelAreaConnect(row.excelAreaConnectId)
+  if (data?.success) {
+    ElMessage.success('删除成功！')
+  }
+  // 手动删除
+  connectList.value.splice(index, 1)
+}
+const queryConnectList = async () => {
+  const { data } = await getExcelConnectByFileId(getFileInfo.value.orderFileId)
+  connectList.value = data.result
+}
 const loadExcel = () => {
   LuckyExcel.transformExcelToLuckyByUrl(
     '/api/sys/static/' + getFileInfo.value.mergeFilePath,
     new Date().getTime() + '.xlsx',
     async (exportJson: any) => {
       console.log('---exportJson', exportJson)
-
+      initIsSetSheetMark(exportJson.sheets.length)
       initExcelAreaMarksKey(exportJson.sheets.length)
 
       // 查询区域标记
       await queryArea()
 
       setSheetAuthority(exportJson)
-      isFunction(window?.luckysheet?.destroy) && window.luckysheet.destroy()
-
-      window.luckysheet.create({
+      isFunction((window as any)?.luckysheet?.destroy) && luckysheet.destroy()
+      luckysheet.create({
         container: 'luckysheet', //luckysheet is the container id
         showinfobar: false,
         showtoolbar: false,
@@ -331,22 +605,83 @@ const loadExcel = () => {
               formState.endRow = endRow
             }
           },
-          sheetActivate: () => {},
+          sheetActivate: (index: any) => {
+            const sheet = luckysheet.getSheet({ index })
+            if (!!isSetSheetMark.value[sheet.order]) {
+              return
+            }
+            isSetSheetMark.value[sheet.order] = true
+            console.log(isSetSheetMark, locaExcelAreaMarks)
+
+            if (locaExcelAreaMarks[sheet.order].length) {
+              locaExcelAreaMarks[sheet.order].forEach((item: any) => {
+                // 设置数据区标记
+                setTimeout(() => {
+                  luckysheet.menuButton.customUpdateFormat(
+                    null,
+                    'bg',
+                    areaMarksColor['data'],
+                    item.beginRow,
+                    item.endRow,
+                    item.beginColum,
+                    item.endColum,
+                    false
+                  )
+                }, 50)
+                if (item.excelAreaTitle.length) {
+                  item.excelAreaTitle.forEach((cell: any) => {
+                    // 设置数据区head标记
+                    setTimeout(() => {
+                      luckysheet.menuButton.customUpdateFormat(
+                        null,
+                        'bg',
+                        areaMarksColor['head'],
+                        cell.row,
+                        cell.row,
+                        cell.colum,
+                        cell.colum,
+                        false
+                      )
+                    }, 50)
+                  })
+                }
+              })
+            }
+          },
           workbookCreateAfter: () => {
+            // 修改当前sheet 已经标记
+            isSetSheetMark.value[0] = true
+
             // 判断本地是否有第一个sheet页的标记
             if (locaExcelAreaMarks[0].length) {
-              locaExcelAreaMarks[0].forEach((item) => {
+              locaExcelAreaMarks[0].forEach((item: any) => {
                 // 设置数据区标记
-                window.luckysheet.menuButton.customUpdateFormat(
+                luckysheet.menuButton.customUpdateFormat(
                   null,
                   'bg',
                   areaMarksColor['data'],
                   item.beginRow,
                   item.endRow,
                   item.beginColum,
-                  item.endColum
+                  item.endColum,
+                  false
                 )
-
+                if (item.excelAreaTitle.length) {
+                  item.excelAreaTitle.forEach((cell: any) => {
+                    // 设置数据区head标记
+                    // luckysheet.setCellValue()
+                    luckysheet.menuButton.customUpdateFormat(
+                      null,
+                      'bg',
+                      areaMarksColor['head'],
+                      cell.row,
+                      cell.row,
+                      cell.colum,
+                      cell.colum,
+                      false
+                    )
+                  })
+                }
               })
             }
           }
@@ -355,11 +690,20 @@ const loadExcel = () => {
     }
   )
 }
+
+const toRun = async () => {
+  const { data } = await excelMarkRun(getFileInfo.value.orderFileId)
+  if (data?.code != 200) {
+    ElMessage.error(data?.message || '操作失败！')
+    return
+  }
+}
 onMounted(() => {
   loadExcel()
+  queryConnectList()
 })
 onUnmounted(() => {
-  isFunction(window?.luckysheet?.destroy) && window.luckysheet.destroy()
+  isFunction((window as any)?.luckysheet?.destroy) && luckysheet.destroy()
 })
 </script>
 <style lang="scss" scoped>

tsconfig.app.json

 {
   "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "src/**/*.ts"],
+  "include": ["env.d.ts", "global.d.ts", "src/**/*", "src/**/*.vue", "src/**/*.ts"],
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
     "composite": true,