添加 区域的别称自带默认名称，导出功能，当选择公共区时，不能设置关联字段，标题区，可以手动填写

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

@@ -52,15 +52,23 @@
             区域类型：{{ getAreaTypeText(currentAreaMark.excelAreaType) }}
           </p>
           <p class="text-slate-600">区域别称：{{ currentAreaMark.excelAreaNicname || '--' }}</p>
+          <el-checkbox true-label="1" false-label="0" v-model="currentAreaMark.oneself"
+            >是否包含自身</el-checkbox
+          >
           <vxe-table
             class="mb-2"
             :row-config="{ isCurrent: true }"
             border
-            :data="currentHeadAreaData"
+            :data="currentAreaMark.excelAreaTitle"
             size="mini"
             height="200"
+            :edit-config="{ trigger: 'click', mode: 'cell' }"
           >
-            <vxe-column title="title" field="title"></vxe-column>
+            <vxe-column title="title" field="title" :edit-render="{}">
+              <template #edit="{ row }">
+                <el-input 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) }}
@@ -166,8 +174,8 @@
     </vxe-modal>
 
     <vxe-modal v-model="connectVisible" width="700" title="关联信息配置" show-footer>
-      <p>关联区域信息：</p>
-      <p>被关联信息：</p>
+      <p>关联区域信息：{{ currentConnectInfo.excelAreaNicname }}</p>
+      <p>被关联信息：{{ cachCurrentBeConnectInfo.excelAreaNicname }}</p>
 
       <vxe-table
         class="mt-2"
@@ -195,7 +203,8 @@
     </vxe-modal>
 
     <vxe-modal width="1200" title="解析结果" v-model="runResultVisible">
-      <vxe-table size="mini" :data="runResultData" border height="600">
+      <el-button @click="exportRunData">导出数据</el-button>
+      <vxe-table ref="runDataTable" 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>
@@ -234,7 +243,6 @@ 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>()
@@ -259,6 +267,7 @@ const currentConnectInfo = reactive<Recordable>({
   beConnectFiled: [],
   fileId: ''
 })
+const runDataTable = ref<VxeTableInstance>()
 const cachCurrentConnectInfo = reactive<Recordable>({})
 const cachCurrentBeConnectInfo = reactive<Recordable>({})
 const beConnectData = computed(() => {
@@ -289,6 +298,15 @@ const formState = reactive({
   excelAreaNicname: ''
 })
 
+watch(
+  () => formState.excelAreaType,
+  (val) => {
+    formState.excelAreaNicname = val
+      ? areaTypeSelectOption.value.find((v) => v.value == val).label +
+        (areaList.value.filter((v) => v.excelAreaType == val).length + 1)
+      : ''
+  }
+)
 const isSetSheetMark = ref<any>([])
 const initIsSetSheetMark = (length: number) => {
   isSetSheetMark.value = Array.from({ length }).fill(false)
@@ -309,6 +327,10 @@ const initExcelAreaMarksKey = (len: number) => {
   })
 }
 
+const exportRunData = () => {
+  runDataTable.value?.exportData({ type: 'csv' })
+}
+
 const setSheetAuthority = (exportJson: any) => {
   exportJson.sheets.forEach((sheet: any) => {
     // 工作表格权限
@@ -338,8 +360,23 @@ const cellClick = ({ row }) => {
   }, 100)
 }
 
-const currentAreaMark = reactive<Recordable>({})
-const currentHeadAreaData = computed(() => currentAreaMark?.excelAreaTitle || [])
+const currentAreaMark = reactive<Recordable>({
+  oneself: '0',
+  excelAreaTitle: []
+})
+
+// const currentHeadAreaData = ref([])
+
+// watch(
+//   () => currentAreaMark.excelAreaTitle,
+//   (val) => {
+//     currentHeadAreaData.value = val || []
+//   },
+//   {
+//     deep: true
+//   }
+// )
+// const currentHeadAreaData = computed(() => currentAreaMark?.excelAreaTitle || [])
 const setAreaMark = async (type: 'data' | 'head' = 'data') => {
   if (type === 'data') {
     /**
@@ -380,8 +417,29 @@ const setAreaMark = async (type: 'data' | 'head' = 'data') => {
      */
     const result = []
     const rangeData = luckysheet.getRangeValue()
+    const { beginColum, beginRow, endColum, endRow } = formState as Recordable
+    const { beginColum: bc, beginRow: br, endColum: ec, endRow: er } = currentAreaMark
+    // 判断所在区域，和位置，选择的单元格，只能在数据区边缘
+    if (beginColum == endColum) {
+      // 一列
+      if (beginRow != br && endRow != er) {
+        luckysheet.setRangeShow({
+          row: [br, er],
+          column: [bc, ec]
+        })
+        return ElMessage.error('请在当前区域选择标题区！')
+      }
+    } else if (beginRow == endRow) {
+      // 一行
+      if (beginColum != bc && endColum != ec) {
+        luckysheet.setRangeShow({
+          row: [br, er],
+          column: [bc, ec]
+        })
+        return ElMessage.error('请在当前区域选择标题区！')
+      }
+    }
 
-    const { beginColum, beginRow, endColum, endRow } = formState
     for (let i = beginRow, r = 0; i <= endRow; i++) {
       for (let k = beginColum, c = 0; k <= endColum; k++) {
         result.push({
@@ -407,8 +465,6 @@ const setAreaMark = async (type: 'data' | 'head' = 'data') => {
   }, 100)
 }
 const resetCurrentAreaState = (isedit: boolean = false) => {
-  // 删除 excelAreaTitle 属性
-  delete currentAreaMark.excelAreaTitle
   // 重置 其他属性
   const tmp: Recordable = {
     sheetNum: 0,
@@ -417,7 +473,9 @@ const resetCurrentAreaState = (isedit: boolean = false) => {
     endRow: '',
     endColum: '',
     excelAreaType: '',
-    excelAreaNicname: ''
+    excelAreaNicname: '',
+    excelAreaTitle: [],
+    oneself: '0'
   }
   isedit && (tmp.excelAreaId = '')
   Object.assign(currentAreaMark, tmp)
@@ -645,6 +703,17 @@ const confirmBeConnect = () => {
   }
   Object.assign(cachCurrentBeConnectInfo, unref(data))
   currentConnectInfo.excelAreaBeId = data.excelAreaId
+
+  // 如果是附加区域，那么直接关联
+  if (
+    cachCurrentConnectInfo.excelAreaType == 'attach_area' ||
+    data.excelAreaType == 'attach_area'
+  ) {
+    return addConnect([]).then(() => {
+      chooseVisible.value = false
+    })
+  }
+
   // 打开关联弹窗。
   chooseVisible.value = false
   connectVisible.value = true