添加区域标记修改

src/api/excel.ts

@@ -171,6 +171,9 @@ export const apiClearMark = (fileId: any) => {
 export const addExcelArea = (data: any) => {
   return axios.post('/api/excelMark/addExcelArea', data)
 }
+export const editExcelArea = (data: any) => {
+  return axios.post('/api/excelMark/editExcelArea', data)
+}
 
 export const getExcelAreaByFileId = (orderFileId: string) => {
   return axios.get('/api/excelMark/getExcelAreaByFileID', {

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

@@ -30,20 +30,20 @@
           <p class="text-slate-600">
             选择区域：{{
               getRangetxt(
-                cachAreaMark.beginRow,
-                cachAreaMark.endRow,
-                cachAreaMark.beginColum,
-                cachAreaMark.endColum
+                currentAreaMark.beginRow,
+                currentAreaMark.endRow,
+                currentAreaMark.beginColum,
+                currentAreaMark.endColum
               )
             }}
           </p>
-          <p class="text-slate-600">区域类型：{{ cachAreaMark.excelAreaType || '--' }}</p>
-          <p class="text-slate-600">区域别称：{{ cachAreaMark.excelAreaNicname || '--' }}</p>
+          <p class="text-slate-600">区域类型：{{ currentAreaMark.excelAreaType || '--' }}</p>
+          <p class="text-slate-600">区域别称：{{ currentAreaMark.excelAreaNicname || '--' }}</p>
           <vxe-table
             class="mb-2"
             :row-config="{ isCurrent: true }"
             border
-            :data="cachHeadAreaData"
+            :data="currentHeadAreaData"
             size="mini"
             height="200"
           >
@@ -55,8 +55,17 @@
             </vxe-column>
           </vxe-table>
           <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>
+          <el-button
+            v-if="currentAreaMark.excelAreaId"
+            type="default"
+            size="small"
+            @click="resetCurrentAreaState(true)"
+            >取消修改</el-button
+          >
+          <el-button type="default" size="small" @click="resetCurrentArea()">重置选区</el-button>
+          <el-button type="default" size="small" @click="resetCurrentHeadArea"
+            >重置标题区</el-button
+          >
         </div>
 
         <div class="mt-6 pl-2 pr-2 pb-2 text-sm border-b-2">
@@ -71,12 +80,12 @@
           >
             <vxe-column title="sheet" field="sheetNum" width="60"></vxe-column>
             <vxe-column title="别称" field="excelAreaNicname"></vxe-column>
-            <vxe-column title="区域" field="area" width="90">
+            <vxe-column title="区域" field="area" width="80">
               <template #default="{ row }">
                 {{ getRangetxt(row.beginRow, row.endRow, row.beginColum, row.endColum) }}
               </template>
             </vxe-column>
-            <vxe-column title="操作" field="action" width="90">
+            <vxe-column title="操作" field="action" width="110">
               <template #default="{ row }">
                 <el-link
                   class="mr-1"
@@ -85,6 +94,9 @@
                   @click.stop="chooseConnect(row)"
                   >关联</el-link
                 >
+                <el-link class="mr-1" style="font-size: 12px" type="primary" @click="toModify(row)"
+                  >修改</el-link
+                >
                 <el-link style="font-size: 12px" type="danger" @click="delAreaMark(row)"
                   >删除</el-link
                 >
@@ -98,8 +110,9 @@
           <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">
+            <vxe-column title="操作" field="action" width="80">
               <template #default="{ row, $rowIndex }">
+                <el-link style="font-size: 12px" type="primary">修改</el-link>
                 <el-link style="font-size: 12px" type="danger" @click="delConnect(row, $rowIndex)"
                   >删除</el-link
                 >
@@ -177,7 +190,7 @@ import {
   showsheetbarConfig,
   showstatisticBarConfig
 } from '@/constants/excelConfig'
-import { flatten } from 'lodash-es'
+import { flatten, cloneDeep } from 'lodash-es'
 import { useCommentExcel } from '@/stores/commentExcel'
 import { storeToRefs } from 'pinia'
 import { isFunction } from '@/utils/is'
@@ -185,6 +198,7 @@ import { ElMessage, ElMessageBox } from 'element-plus'
 import {
   addExcelArea,
   addExcelAreaConnect,
+  editExcelArea,
   excelMarkRun,
   getExcelAreaByFileId,
   getExcelConnectByFileId,
@@ -215,7 +229,7 @@ const beConnectData = computed(() =>
   areaList.value.filter((v: any) => v.excelAreaId != currentConnectInfo.excelAreaId)
 )
 const formState = reactive({
-  excelAreaId: '',
+  // excelAreaId: '',
   fileId: '',
   sheetNum: 0,
   beginRow: '',
@@ -275,20 +289,20 @@ const cellClick = ({ row }) => {
   }, 100)
 }
 
-const cachAreaMark = reactive<Recordable>({})
-const cachHeadAreaData = computed(() => cachAreaMark?.excelAreaTitle || [])
+const currentAreaMark = reactive<Recordable>({})
+const currentHeadAreaData = computed(() => currentAreaMark?.excelAreaTitle || [])
 const setAreaMark = async (type: 'data' | 'head' = 'data') => {
   if (type === 'data') {
     /**
      * 判断是否有未保存的区域
      * 如果有未保存的标记 -> 提示用户，是否覆盖
      */
-    if (cachAreaMark.beginRow !== '' && cachAreaMark.beginRow !== undefined) {
+    if (currentAreaMark.beginRow !== '' && currentAreaMark.beginRow !== undefined) {
       await ElMessageBox.confirm('检测到未保存的标记，是否在覆盖当前标记区域？', '提示消息', {
         confirmButtonText: '覆盖',
         cancelButtonText: '取消'
       })
-      resetCachArea(() => {
+      resetCurrentArea(() => {
         // 设置当前选区
         luckysheet.setRangeShow({
           row: [formState.beginRow, formState.endRow],
@@ -297,7 +311,7 @@ const setAreaMark = async (type: 'data' | 'head' = 'data') => {
       })
     }
 
-    Object.assign(cachAreaMark, unref(formState))
+    Object.assign(currentAreaMark, unref(formState))
     // 设置完成之后重置表单
     Object.assign(formState, {
       excelAreaType: '',
@@ -305,7 +319,7 @@ const setAreaMark = async (type: 'data' | 'head' = 'data') => {
     })
   } else {
     // 判断是否在同一sheet
-    if (formState.sheetNum !== cachAreaMark.sheetNum) {
+    if (formState.sheetNum !== currentAreaMark.sheetNum) {
       return ElMessage.error('请在同一sheet页中选择数据！')
     }
 
@@ -332,9 +346,9 @@ const setAreaMark = async (type: 'data' | 'head' = 'data') => {
     }
 
     // 合并组装的表头区域数据
-    cachAreaMark.excelAreaTitle
-      ? cachAreaMark.excelAreaTitle.push(...result)
-      : (cachAreaMark.excelAreaTitle = result)
+    currentAreaMark.excelAreaTitle
+      ? currentAreaMark.excelAreaTitle.push(...result)
+      : (currentAreaMark.excelAreaTitle = result)
   }
 
   setTimeout(() => {
@@ -342,13 +356,11 @@ const setAreaMark = async (type: 'data' | 'head' = 'data') => {
     luckysheet.setRangeFormat('bg', areaMarksColor[type])
   }, 100)
 }
-const resetCachAreaState = () => {
+const resetCurrentAreaState = (isedit: boolean = false) => {
   // 删除 excelAreaTitle 属性
-  delete cachAreaMark.excelAreaTitle
+  delete currentAreaMark.excelAreaTitle
   // 重置 其他属性
-  Object.assign(cachAreaMark, {
-    excelAreaId: '',
-    fileId: '',
+  const tmp: Recordable = {
     sheetNum: 0,
     beginRow: '',
     beginColum: '',
@@ -356,51 +368,65 @@ const resetCachAreaState = () => {
     endColum: '',
     excelAreaType: '',
     excelAreaNicname: ''
-  })
+  }
+  isedit && (tmp.excelAreaId = '')
+  Object.assign(currentAreaMark, tmp)
 }
-const resetCachArea = (fn?: Function) => {
+const resetCurrentArea = (fn?: Function) => {
   // 清除区域颜色
   luckysheet.setRangeShow(
     {
-      row: [cachAreaMark.beginRow, cachAreaMark.endRow],
-      column: [cachAreaMark.beginColum, cachAreaMark.endColum]
+      row: [currentAreaMark.beginRow, currentAreaMark.endRow],
+      column: [currentAreaMark.beginColum, currentAreaMark.endColum]
     },
     {
       show: false,
       success: () => {
         luckysheet.setRangeFormat('bg', areaMarksColor['default'])
-        resetCachAreaState()
+        resetCurrentAreaState()
         fn && fn()
       }
     }
   )
 }
-const resetCachHeadArea = () => {
+const resetCurrentHeadArea = () => {
   // 清除标题区域颜色 -> 设置成数据区域颜色
   luckysheet.setRangeShow(
     {
-      row: [cachAreaMark.beginRow, cachAreaMark.endRow],
-      column: [cachAreaMark.beginColum, cachAreaMark.endColum]
+      row: [currentAreaMark.beginRow, currentAreaMark.endRow],
+      column: [currentAreaMark.beginColum, currentAreaMark.endColum]
     },
     {
       show: false,
       success: () => {
         luckysheet.setRangeFormat('bg', areaMarksColor['data'])
         // 删除 excelAreaTitle 属性
-        delete cachAreaMark.excelAreaTitle
+        delete currentAreaMark.excelAreaTitle
       }
     }
   )
 }
 
 const saveAreaMark = async () => {
-  cachAreaMark.fileId = getFileInfo.value.orderFileId
-  const { data } = await addExcelArea(cachAreaMark)
-  // 接口保存成功之后，保存一份在本地 locaExcelAreaMarks
-  locaExcelAreaMarks[cachAreaMark.sheetNum].push(data.result)
-  resetCachAreaState()
+  currentAreaMark.fileId = getFileInfo.value.orderFileId
+  // 如果有id 调用修改，否则调用新增
+  const isEdit = !!currentAreaMark.excelAreaId
+  const { data } = isEdit
+    ? await editExcelArea(currentAreaMark)
+    : await addExcelArea(currentAreaMark)
+  // 接口保存成功之后，保存/更新 locaExcelAreaMarks
+  if (isEdit) {
+    const idx = locaExcelAreaMarks[cachAreaMark.sheetNum].findIndex(
+      (v) => v.excelAreaId == cachAreaMark.excelAreaId
+    )
+    locaExcelAreaMarks[cachAreaMark.sheetNum].splice(idx, 1, cloneDeep(currentAreaMark))
+  } else {
+    locaExcelAreaMarks[currentAreaMark.sheetNum].push(data.result)
+  }
+  resetCurrentAreaState(true)
 }
 
+const cachAreaMark = reactive<Recordable>({})
 const cachDelOtherSheetArea = reactive<Recordable>({})
 const delAreaMark = async (row: any) => {
   // 调用接口删除
@@ -433,7 +459,19 @@ const delAreaMark = async (row: any) => {
   )
   locaExcelAreaMarks[row.sheetNum].splice(index, 1)
 }
+const toModify = (row) => {
+  // 判断当前区域是否关联了其他区域
+  if (
+    connectList.value.find(
+      (v) => row.excelAreaId == v.excelAreaId || row.excelAreaId == v.excelAreaBeId
+    )
+  ) {
+    return ElMessage.warning('当前区域绑定与其他区域绑定了关联信息，请先删除关联信息之后再做修改！')
+  }
 
+  Object.assign(cachAreaMark, cloneDeep(row))
+  Object.assign(currentAreaMark, row)
+}
 const queryArea = async () => {
   const { data } = await getExcelAreaByFileId(getFileInfo.value.orderFileId)
   data.result.forEach((item: any) => locaExcelAreaMarks[item.sheetNum || 0].push(item))
@@ -464,7 +502,6 @@ const confirmConnect = () => {
   addConnect(list)
 }
 const addConnect = async (list: any) => {
-
   list.forEach((item: any) => {
     currentConnectInfo.connectFiled.push({
       title: item.title,
@@ -547,7 +584,7 @@ const chooseConnectOnHide = () => {
     // excelAreaId: '',
     // excelAreaBeId: '',
     connectFiled: [],
-    beConnectFiled: [],
+    beConnectFiled: []
     // fileId: ''
   })
 }