修改布局

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

@@ -34,6 +34,15 @@
                 <el-input type="number" v-model="formState.checkNumber" clearable></el-input>
               </el-form-item>
             </el-col>
+            <el-col :span="24">
+              <el-form-item label="标题区作为数据" prop="oneself" label-width="100px">
+                <el-checkbox
+                  true-label="Y"
+                  false-label="N"
+                  v-model="formState.oneself"
+                >是</el-checkbox>
+              </el-form-item>
+            </el-col>
             <el-col :span="24">
               <el-button type="primary" @click="setAreaMark('data')">设置数据区</el-button>
               <el-button type="primary" @click="setAreaMark('head')">设置标题区</el-button>
@@ -49,6 +58,9 @@
             size="small"
             :column="2"
           >
+            <el-descriptions-item label-class-name="descriptions-label" :span="2" label="区域别称">
+              {{ currentAreaMark.excelAreaNicname || '--' }}
+            </el-descriptions-item>
             <el-descriptions-item label-class-name="descriptions-label" label="标记区域">
               {{
                 getRangetxt(
@@ -62,19 +74,18 @@
             <el-descriptions-item label-class-name="descriptions-label" label="区域类型">
               {{ getAreaTypeText(currentAreaMark.excelAreaType) }}
             </el-descriptions-item>
-            <el-descriptions-item label-class-name="descriptions-label" :span="2" label="区域别称">
-              {{ currentAreaMark.excelAreaNicname || '--' }}
-            </el-descriptions-item>
+
             <el-descriptions-item label-class-name="descriptions-label" label="循环体间隔">
               {{ currentAreaMark.checkNumber || '--' }}
             </el-descriptions-item>
+            <el-descriptions-item label-class-name="descriptions-label" label="标题作为数据">
+              {{ currentAreaMark.oneself == 'Y' ? '是' : '否' }}
+              <!-- <el-checkbox v-model="currentAreaMark.oneself" disabled></el-checkbox> -->
+            </el-descriptions-item>
           </el-descriptions>
 
-          <el-checkbox true-label="Y" false-label="N" v-model="currentAreaMark.oneself"
-            >标题区作为数据</el-checkbox
-          >
           <vxe-table
-            class="mb-2"
+            class="mb-2 mt-2"
             :row-config="{ isCurrent: true }"
             border
             :data="currentAreaMark.excelAreaTitle"
@@ -326,7 +337,8 @@ const formState = reactive({
   endColum: '',
   excelAreaType: '',
   excelAreaNicname: '',
-  checkNumber: 1
+  checkNumber: 1,
+  oneself: 'N'
 })
 
 watch(
@@ -449,7 +461,7 @@ const setAreaMark = async (type: 'data' | 'head' = 'data') => {
      * 判断选择的 head区域 是否在数据区域 内部
      * 判断是否有重复的单元格添加，如有重复无需添加此单元格
      */
-    const result = []
+    const result: Recordable[] = []
     const rangeData = luckysheet.getRangeValue()
     console.log(rangeData, '-----')
     // return
@@ -460,7 +472,7 @@ const setAreaMark = async (type: 'data' | 'head' = 'data') => {
     const isVertical = rangeData.length > 1
     // const isDirection = rangeData.length == 1
     if (isVertical) {
-      if ((er - br + 1) != rangeData.length) {
+      if (er - br + 1 != rangeData.length) {
         return ElMessage.error('请选择区域边缘作为标题区！')
       }
       for (let r = 0; r < rangeData.length; r++) {
@@ -477,7 +489,7 @@ const setAreaMark = async (type: 'data' | 'head' = 'data') => {
         }
       }
     } else {
-      if ((ec - bc + 1) != rangeData[0].length) {
+      if (ec - bc + 1 != rangeData[0].length) {
         return ElMessage.error('请选择区域边缘作为标题区！')
       }
       for (let c = 0; c < rangeData[0].length; c++) {
@@ -512,7 +524,6 @@ const setAreaMark = async (type: 'data' | 'head' = 'data') => {
   }
 
   setTimeout(() => {
-    
     // 设置区域颜色
     luckysheet.setRangeFormat('bg', areaMarksColor[type])
   }, 100)
@@ -969,7 +980,7 @@ onUnmounted(() => {
 <style lang="scss">
 .current-area-mark {
   .el-descriptions__label {
-    width: 7em;
+    width: 8em;
   }
 }
 </style>