添加字段

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

@@ -15,6 +15,11 @@
           class="comment-form pl-2 pr-2 pt-2 pb-2 border-b-2"
         >
           <el-row :gutter="10">
+            <el-col :span="24">
+              <el-form-item label="区域别称" prop="excelAreaNicname">
+                <el-input v-model="formState.excelAreaNicname" clearable></el-input>
+              </el-form-item>
+            </el-col>
             <el-col :span="12">
               <el-form-item label="区域类型" prop="excelAreaType">
                 <el-select v-model="formState.excelAreaType" clearable>
@@ -24,23 +29,23 @@
                 </el-select>
               </el-form-item>
             </el-col>
-            <el-col :span="24">
-              <el-form-item label="区域别称" prop="excelAreaNicname">
-                <el-input v-model="formState.excelAreaNicname" clearable></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="24">
+            <el-col :span="12">
               <el-form-item label="循环体间隔" prop="checkNumber">
                 <el-input type="number" v-model="formState.checkNumber" clearable></el-input>
               </el-form-item>
             </el-col>
-            <el-col :span="24">
+            <el-col :span="12">
               <el-form-item label="标题区作为数据" prop="oneself" label-width="100px">
-                <el-checkbox
-                  true-label="Y"
-                  false-label="N"
-                  v-model="formState.oneself"
-                >是</el-checkbox>
+                <el-checkbox true-label="Y" false-label="N" v-model="formState.oneself"
+                  >是</el-checkbox
+                >
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="标题参与循环" prop="checkSelf" label-width="100px">
+                <el-checkbox true-label="Y" false-label="N" v-model="formState.checkSelf"
+                  >是</el-checkbox
+                >
               </el-form-item>
             </el-col>
             <el-col :span="24">
@@ -59,7 +64,12 @@
             :column="2"
           >
             <el-descriptions-item label-class-name="descriptions-label" :span="2" label="区域别称">
-              {{ currentAreaMark.excelAreaNicname || '--' }}
+              <template v-if="isEditCurrentArea">
+                <el-input v-model="currentAreaMark.excelAreaNicname" size="small"></el-input>
+              </template>
+              <template v-else>
+                {{ currentAreaMark.excelAreaNicname || '--' }}
+              </template>
             </el-descriptions-item>
             <el-descriptions-item label-class-name="descriptions-label" label="标记区域">
               {{
@@ -72,15 +82,55 @@
               }}
             </el-descriptions-item>
             <el-descriptions-item label-class-name="descriptions-label" label="区域类型">
-              {{ getAreaTypeText(currentAreaMark.excelAreaType) }}
+              <template v-if="isEditCurrentArea">
+                <el-select
+                  style="width: 80px"
+                  size="small"
+                  v-model="currentAreaMark.excelAreaType"
+                  clearable
+                >
+                  <template v-for="item in areaTypeSelectOption" :key="item.value">
+                    <el-option :label="item.label" :value="item.value"></el-option>
+                  </template>
+                </el-select>
+              </template>
+              <template v-else>
+                {{ getAreaTypeText(currentAreaMark.excelAreaType) }}
+              </template>
             </el-descriptions-item>
 
             <el-descriptions-item label-class-name="descriptions-label" label="循环体间隔">
-              {{ currentAreaMark.checkNumber || '--' }}
+              <template v-if="isEditCurrentArea">
+                <el-input
+                  style="width: 80px"
+                  size="small"
+                  type="number"
+                  v-model="currentAreaMark.checkNumber"
+                ></el-input>
+              </template>
+              <template v-else>
+                {{ currentAreaMark.checkNumber || '--' }}
+              </template>
             </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-checkbox
+                true-label="Y"
+                false-label="N"
+                size="small"
+                v-model="currentAreaMark.oneself"
+                :disabled="!isEditCurrentArea"
+                >是</el-checkbox
+              >
+            </el-descriptions-item>
+            <el-descriptions-item label-class-name="descriptions-label" label="标题参与循环">
+              <el-checkbox
+                true-label="Y"
+                false-label="N"
+                size="small"
+                v-model="currentAreaMark.checkSelf"
+                :disabled="!isEditCurrentArea"
+                >是</el-checkbox
+              >
             </el-descriptions-item>
           </el-descriptions>
 
@@ -106,7 +156,7 @@
           </vxe-table>
           <el-button type="primary" size="small" @click="saveAreaMark">保存</el-button>
           <el-button
-            v-if="currentAreaMark.excelAreaId"
+            v-if="isEditCurrentArea"
             type="default"
             size="small"
             @click="resetCurrentAreaState(true)"
@@ -244,7 +294,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, onUnmounted, reactive, unref, computed, watch } from 'vue'
+import { ref, onMounted, onUnmounted, reactive, unref, computed, watch, nextTick } from 'vue'
 import LuckyExcel from 'luckyexcel'
 import {
   areaMarksColor,
@@ -258,7 +308,13 @@ import { flatten, cloneDeep } from 'lodash-es'
 import { useCommentExcel } from '@/stores/commentExcel'
 import { storeToRefs } from 'pinia'
 import { isFunction } from '@/utils/is'
-import { ElMessage, ElMessageBox, type FormInstance, type FormItemRule } from 'element-plus'
+import {
+  ElLoading,
+  ElMessage,
+  ElMessageBox,
+  type FormInstance,
+  type FormItemRule
+} from 'element-plus'
 import {
   addExcelArea,
   addExcelAreaConnect,
@@ -338,7 +394,8 @@ const formState = reactive({
   excelAreaType: '',
   excelAreaNicname: '',
   checkNumber: 1,
-  oneself: 'N'
+  oneself: 'N',
+  checkSelf: 'N'
 })
 
 watch(
@@ -405,9 +462,13 @@ const cellClick = ({ row }) => {
 
 const currentAreaMark = reactive<Recordable>({
   oneself: 'N',
+  checkSelf: 'N',
+  checkNumber: 1,
   excelAreaTitle: []
 })
 
+const isEditCurrentArea = computed(() => !!currentAreaMark.excelAreaId)
+
 // const currentHeadAreaData = ref([])
 
 // watch(
@@ -443,10 +504,17 @@ const setAreaMark = async (type: 'data' | 'head' = 'data') => {
         })
       })
     }
-
+    console.log(formState)
+    debugger
     Object.assign(currentAreaMark, unref(formState))
     // 设置完成之后重置表单
-    settingForm.value?.resetFields(['excelAreaType', 'excelAreaNicname'])
+    settingForm.value?.resetFields([
+      'excelAreaType',
+      'excelAreaNicname',
+      'oneself',
+      'checkSelf',
+      'checkNumber'
+    ])
   } else {
     if (!currentAreaMark.excelAreaTitle) {
       return ElMessage.error('请先设置数据区！')
@@ -540,6 +608,7 @@ const resetCurrentAreaState = (isedit: boolean = false) => {
     excelAreaNicname: '',
     excelAreaTitle: [],
     oneself: 'N',
+    checkSelf: 'N',
     checkNumber: ''
   }
   isedit && (tmp.excelAreaId = '')
@@ -949,17 +1018,33 @@ 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
+  const loadingInstance = ElLoading.service({
+    fullscreen: true,
+    text: '解析中...'
+  })
+  try {
+    const { data } = await excelMarkRun(getFileInfo.value.orderFileId)
+    nextTick(() => {
+      // Loading should be closed asynchronously
+      loadingInstance.close()
+    })
+    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
+  } catch {
+    nextTick(() => {
+      // Loading should be closed asynchronously
+      loadingInstance.close()
+    })
   }
-  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()