添加区域类型，关联区域限制

src/api/common.ts

 import axios from 'axios'
 const formHeader = {
   'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
-  }
+}
 
 /**
  * 根据id查询码表及明细表
@@ -9,8 +9,20 @@ const formHeader = {
  * @returns
  */
 export const apiDictFindById = (dictCode: string) => {
-    return axios.get('/api/dict/findDictItemsByDictCode',{
+  return axios.get('/api/dict/findDictItemsByDictCode', {
     params: { dictCode },
     headers: formHeader
   })
-  }
+}
\ No newline at end of file
+
+/**
+ * 获取码表分组
+ * @param params 
+ * @returns 
+ */
+export const apiDictList = (params: any) => {
+  return axios.get('/api/dict/list', {
+    params,
+    headers: formHeader
+  })
+}

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

@@ -106,7 +106,8 @@ const submitForm = async () => {
     customerId: formState.customerId
   }
   apiSaveUpload(params).then(({ data }) => {
-    useCommentExcel(data.result)
+    const { setFileInfo } = useCommentExcel()
+    setFileInfo(data.result)
     emit('upload', data.result)
   })
 }

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

@@ -3,19 +3,30 @@
     <div id="luckysheet" class="flex-1"></div>
 
     <el-scrollbar height="100%">
-      <div class="w-[400px] h-full bg-white">
+      <div class="w-[420px] h-full bg-white">
         <p class="pl-2 text-lg font-bold leading-[40px] bg-slate-200">标注配置</p>
 
-        <el-form size="small" label-width="5em" class="comment-form pl-2 pr-2 pt-2 pb-2 border-b-2">
+        <el-form
+          ref="settingForm"
+          size="small"
+          :rules="rules"
+          :model="formState"
+          label-width="6em"
+          class="comment-form pl-2 pr-2 pt-2 pb-2 border-b-2"
+        >
           <el-row :gutter="10">
             <el-col :span="12">
-              <el-form-item label="区域类型">
-                <el-select v-model="formState.excelAreaType"></el-select>
+              <el-form-item label="区域类型" prop="excelAreaType">
+                <el-select v-model="formState.excelAreaType" clearable>
+                  <template v-for="item in areaTypeSelectOption" :key="item.value">
+                    <el-option :label="item.label" :value="item.value"></el-option>
+                  </template>
+                </el-select>
               </el-form-item>
             </el-col>
             <el-col :span="24">
-              <el-form-item label="区域别称">
-                <el-input v-model="formState.excelAreaNicname"></el-input>
+              <el-form-item label="区域别称" prop="excelAreaNicname">
+                <el-input v-model="formState.excelAreaNicname" clearable></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="24">
@@ -37,7 +48,9 @@
               )
             }}
           </p>
-          <p class="text-slate-600">区域类型：{{ currentAreaMark.excelAreaType || '--' }}</p>
+          <p class="text-slate-600">
+            区域类型：{{ getAreaTypeText(currentAreaMark.excelAreaType) }}
+          </p>
           <p class="text-slate-600">区域别称：{{ currentAreaMark.excelAreaNicname || '--' }}</p>
           <vxe-table
             class="mb-2"
@@ -78,14 +91,15 @@
             size="mini"
             height="200"
           >
-            <vxe-column title="sheet" field="sheetNum" width="60"></vxe-column>
+            <vxe-column title="sheet" field="sheetNum" width="55"></vxe-column>
             <vxe-column title="别称" field="excelAreaNicname"></vxe-column>
+            <vxe-column title="类型" field="excelAreaType_dictText" width="60"></vxe-column>
             <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="110">
+            <vxe-column title="操作" field="action" width="100">
               <template #default="{ row }">
                 <el-link
                   class="mr-1"
@@ -112,7 +126,9 @@
             <vxe-column title="别关联名称" field="excelAreaBeId_dictText"></vxe-column>
             <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="primary" @click="toModifyConnect(row)"
+                  >修改</el-link
+                > -->
                 <el-link style="font-size: 12px" type="danger" @click="delConnect(row, $rowIndex)"
                   >删除</el-link
                 >
@@ -136,6 +152,7 @@
         <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="excelAreaType_dictText" width="100"></vxe-column>
         <vxe-column title="区域" field="area" width="90">
           <template #default="{ row }">
             {{ getRangetxt(row.beginRow, row.endRow, row.beginColum, row.endColum) }}
@@ -176,6 +193,15 @@
         <el-button type="primary" @click="confirmConnect">确认</el-button>
       </template>
     </vxe-modal>
+
+    <vxe-modal width="1200" title="解析结果" v-model="runResultVisible">
+      <vxe-table size="mini" :data="runResultData" border height="600">
+        <vxe-column title="行号" field="sortNum" width="120"></vxe-column>
+        <template v-for="item in runResultTitle" :key="item">
+          <vxe-column :title="item" :field="item" width="120"></vxe-column>
+        </template>
+      </vxe-table>
+    </vxe-modal>
   </div>
 </template>
 
@@ -194,7 +220,7 @@ import { flatten, cloneDeep } from 'lodash-es'
 import { useCommentExcel } from '@/stores/commentExcel'
 import { storeToRefs } from 'pinia'
 import { isFunction } from '@/utils/is'
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElMessage, ElMessageBox, type FormInstance } from 'element-plus'
 import {
   addExcelArea,
   addExcelAreaConnect,
@@ -208,7 +234,14 @@ import {
 import type { Recordable } from '@/types/global'
 import { getRangetxt } from '@/utils/excel'
 import type { VxeTableInstance } from 'vxe-table'
+import axios from 'axios'
+import { apiDictFindById, apiDictList } from '@/api/common'
 
+const settingForm = ref<FormInstance>()
+const rules = reactive({
+  excelAreaNicname: [{ required: true, message: '请输入区域别称！', trigger: 'change' }],
+  excelAreaType: [{ required: true, message: '请选择区域类型！', trigger: 'change' }]
+})
 const connectVisible = ref(false)
 const xTableConnect = ref<VxeTableInstance>()
 const beConnectTable = ref<VxeTableInstance>()
@@ -217,6 +250,7 @@ const commentExcelStore = useCommentExcel()
 const { getFileInfo } = storeToRefs(commentExcelStore)
 const connectList = ref<any[]>([])
 const chooseVisible = ref(false)
+const areaTypeSelectOption = ref<any[]>([])
 const currentConnectInfo = reactive<Recordable>({
   excelAreaConnectId: '',
   excelAreaId: '',
@@ -225,9 +259,23 @@ const currentConnectInfo = reactive<Recordable>({
   beConnectFiled: [],
   fileId: ''
 })
-const beConnectData = computed(() =>
-  areaList.value.filter((v: any) => v.excelAreaId != currentConnectInfo.excelAreaId)
-)
+const cachCurrentConnectInfo = reactive<Recordable>({})
+const beConnectData = computed(() => {
+  /**
+   * 如果公共区域 和 附加区域关联 只能关联 数据区域
+   *
+   * 并且数据区不能关联数据区
+   */
+  if (cachCurrentConnectInfo.excelAreaType == 'data_area') {
+    return areaList.value
+      .filter((v) => v.excelAreaType != 'data_area')
+      .filter((v: any) => v.excelAreaId != currentConnectInfo.excelAreaId)
+  } else {
+    return areaList.value
+      .filter((v) => v.excelAreaType == 'data_area')
+      .filter((v: any) => v.excelAreaId != currentConnectInfo.excelAreaId)
+  }
+})
 const formState = reactive({
   // excelAreaId: '',
   fileId: '',
@@ -278,8 +326,8 @@ const cellClick = ({ row }) => {
     luckysheet.setSheetActive(row.sheetNum)
   }
   luckysheet.scroll({
-    targetRow: row.beginRow,
-    targetColumn: row.beginColum
+    targetRow: row.beginRow - 3 < 0 ? 0 : row.beginRow - 3,
+    targetColumn: row.beginColum - 3 < 0 ? 0 : row.beginColum - 3
   })
   setTimeout(() => {
     luckysheet.setRangeShow({
@@ -297,6 +345,10 @@ const setAreaMark = async (type: 'data' | 'head' = 'data') => {
      * 判断是否有未保存的区域
      * 如果有未保存的标记 -> 提示用户，是否覆盖
      */
+
+    // 验证表单
+    await settingForm.value?.validate()
+
     if (currentAreaMark.beginRow !== '' && currentAreaMark.beginRow !== undefined) {
       await ElMessageBox.confirm('检测到未保存的标记，是否在覆盖当前标记区域？', '提示消息', {
         confirmButtonText: '覆盖',
@@ -313,10 +365,7 @@ const setAreaMark = async (type: 'data' | 'head' = 'data') => {
 
     Object.assign(currentAreaMark, unref(formState))
     // 设置完成之后重置表单
-    Object.assign(formState, {
-      excelAreaType: '',
-      excelAreaNicname: ''
-    })
+    settingForm.value?.resetFields(['excelAreaType', 'excelAreaNicname'])
   } else {
     // 判断是否在同一sheet
     if (formState.sheetNum !== currentAreaMark.sheetNum) {
@@ -330,7 +379,7 @@ const setAreaMark = async (type: 'data' | 'head' = 'data') => {
      */
     const result = []
     const rangeData = luckysheet.getRangeValue()
-    console.log('rangeData', rangeData)
+
     const { beginColum, beginRow, endColum, endRow } = formState
     for (let i = beginRow, r = 0; i <= endRow; i++) {
       for (let k = beginColum, c = 0; k <= endColum; k++) {
@@ -423,12 +472,21 @@ const saveAreaMark = async () => {
   } else {
     locaExcelAreaMarks[currentAreaMark.sheetNum].push(data.result)
   }
+  ElMessage.success('操作成功！')
   resetCurrentAreaState(true)
 }
 
 const cachAreaMark = reactive<Recordable>({})
 const cachDelOtherSheetArea = reactive<Recordable>({})
 const delAreaMark = async (row: any) => {
+  // 判断当前区域是否关联了其他区域
+  if (
+    connectList.value.find(
+      (v) => row.excelAreaId == v.excelAreaId || row.excelAreaId == v.excelAreaBeId
+    )
+  ) {
+    return ElMessage.warning('当前区域绑定与其他区域绑定了关联信息，请先删除关联信息之后再做修改！')
+  }
   // 调用接口删除
   await removeExcelArea(row.excelAreaId)
   const sheet = luckysheet.getSheet()
@@ -476,17 +534,24 @@ const queryArea = async () => {
   const { data } = await getExcelAreaByFileId(getFileInfo.value.orderFileId)
   data.result.forEach((item: any) => locaExcelAreaMarks[item.sheetNum || 0].push(item))
 }
+const toModifyConnect = (row: any) => {
+  Object.assign(currentConnectInfo, row)
+  connectVisible.value = true
+}
 const confirmConnect = () => {
   /**
    * 1. 验证是否选择了要关联的title
    * 2. 验证选择的title是否有被关联的title
    * 3. 添加关联关系
    */
+
   const list = xTableConnect.value?.getCheckboxRecords()
   if (!list?.length) {
+    if (cachCurrentConnectInfo.excelAreaType == 'attach_area') {
+      return ElMessage.warning('请选择关联的字段！')
+    }
     addConnect([])
     return 
-    // return ElMessage.warning('请选择有效数据！')
   }
 
   try {
@@ -532,6 +597,7 @@ const addConnect = async (list: any) => {
 }
 const chooseConnect = (row: any) => {
   currentConnectInfo.excelAreaId = row.excelAreaId
+  Object.assign(cachCurrentConnectInfo, unref(row))
   chooseVisible.value = true
 }
 
@@ -728,16 +794,37 @@ const loadExcel = () => {
   )
 }
 
+const queryDict = async (code: string) => {
+  const { data } = await apiDictList({
+    dictCodes: code
+  })
+  areaTypeSelectOption.value = data.result[code]
+}
+const getAreaTypeText = (value: string) => {
+  const item = areaTypeSelectOption.value.find((v) => v.value == value)
+  return item?.label || '--'
+}
+
+const runResultData = ref([])
+const runResultTitle = ref([])
+const runResultVisible = ref(false)
 const toRun = async () => {
   const { data } = await excelMarkRun(getFileInfo.value.orderFileId)
   if (data?.code != 200) {
     ElMessage.error(data?.message || '操作失败！')
     return
   }
+  if (!data.result.length) return
+  runResultData.value = data.result
+  runResultTitle.value = Object.keys(data.result[0])
+  const idx = runResultTitle.value.findIndex((v) => v == 'sortNum')
+  runResultTitle.value.splice(idx, 1)
+  runResultVisible.value = true
 }
 onMounted(() => {
   loadExcel()
   queryConnectList()
+  queryDict('excel_area_type')
 })
 onUnmounted(() => {
   isFunction((window as any)?.luckysheet?.destroy) && luckysheet.destroy()
@@ -746,7 +833,7 @@ onUnmounted(() => {
 <style lang="scss" scoped>
 .comment-form {
   .el-form-item--small {
-    margin-bottom: 10px;
+    margin-bottom: 15px;
   }
 }
 </style>