填报管理在线表格

src/views/dataFilling/tableDetails.vue

@@ -82,8 +82,7 @@
     </el-form>
   </div>
   <div style="height: 350px; margin-left: 10px">
-    <hot-table v-if="tableData && tableData.length > 0" ref="wrapper" :data="tableData" :settings="hotSettings" />
-    <hot-table v-if="isShowTable" ref="wrapper" :data="hotData" :settings="hotSettings" />
+    <hot-table v-if="showTable" ref="wrapper" :data="hotData" :settings="hotSettings" />
   </div>
   <informantSelect v-model="isShowSelect" :tree-data="treeData" :default-check-data="reportInfo.user_ids" @confirm="handleContactSelectData" />
 </template>
@@ -137,7 +136,6 @@ const rules = {
   user_ids: [{ required: true, message: '请选择填报人', trigger: 'blur' }],
 }
 const is_filling_ended = ref(0);
-const tableData = ref([]);
 const selectedReporter = ref(null);
 const router = useRouter();
 
@@ -147,12 +145,6 @@ const props = defineProps({
 const reportId = ref(props.eventId);
 
 watch(reportId, async (newVal) => {
-  // tableData.value = [];
-  //
-  //
-  // nextTick(() => {
-  //   tableData.value = [{id: 1}];
-  // })
   if (newVal) {
     await fetchReportDetails(newVal);
   }
@@ -160,7 +152,6 @@ watch(reportId, async (newVal) => {
 
 // 初始化表格数据
 onMounted(async () => {
-  created();
   if (reportId.value) {
     await fetchReportDetails(reportId.value);
   }
@@ -171,7 +162,10 @@ const fetchReportDetails = (reportId) => {
   return fillingList(reportId).then((res: any) => {
     res.report_info.user_ids = [7, 8, 11, 4, 1, 12];
     reportInfo.value = res.report_info;
-    tableData.value = res.table_data;
+    hotData.value = res.table_data;
+    nextTick(() => {
+      showTable.value = true;
+    })
   });
 };
 
@@ -207,15 +201,14 @@ const handleContactSelectData = (data) => {
 };
 
 function saveEdit(rowIndex, header, value) {
-  tableData.value[rowIndex][header] = value;
+  hotData.value[rowIndex][header] = value;
 }
 
 const hotData = ref([]);
 const showTable = ref(false);
-const isShowTable = ref(false);
 const handleNewTemplate = () => {
-  tableData.value = [];
-  isShowTable.value = true;
+  hotData.value = [];
+  showTable.value = true;
   created();
 };
 
@@ -307,7 +300,7 @@ const hotSettings = reactive({
 const handleImportExcel = () => {
   const input = document.createElement('input');
   input.type = 'file';
-  input.accept = '.xlsx';
+  input.accept = '.xlsx,.xls';
   input.onchange = async (e) => {
     const file = e.target.files[0];
     const reader = new FileReader();
@@ -316,8 +309,14 @@ const handleImportExcel = () => {
       const workbook = XLSX.read(data, { type: 'array' });
       const firstSheetName = workbook.SheetNames[0];
       const worksheet = workbook.Sheets[firstSheetName];
-      field_names.value = XLSX.utils.sheet_to_json(worksheet);
-      alert('Excel文件已导入');
+      const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
+      showTable.value = false;
+      hotData.value = jsonData.splice(0, 1); // 假设第一行是标题行，我们跳过它
+      nextTick(() => {
+        showTable.value = true;
+      })
+      // reportInfo.value.field_names = XLSX.utils.sheet_to_json(worksheet);
+      // alert('Excel文件已导入');
     };
     reader.readAsArrayBuffer(file);
   };
@@ -325,7 +324,7 @@ const handleImportExcel = () => {
 };
 
 const handleReload = () => {
-  tableData.value = [];
+  hotData.value = [];
   alert('表格已清空');
 };
 
@@ -340,7 +339,7 @@ const handleSaveTemporarily = async (formEl,statuCode) => {
             data2.push(item);
           }
         })
-        reportInfo.value.field_names = tableData.value;
+        reportInfo.value.field_names = hotData.value;
       }
 
       reportInfo.value.issued_status = statuCode;