数据档案管理

src/api/dataFilling/fileManagement.ts

@@ -8,10 +8,10 @@ export function fillList(data) {
   });
 }
 // 查询详情
-export function fillDetail(data) {
+export function fillDetail(params) {
   return request({
-    url: '/api/dataFilling/submission_status',
-    method: 'post',
-    data: data
+    url: '/api/dataFilling/dataArchiveDetails',
+    method: 'get',
+    params: params
   });
 }

src/views/dataFilling/dossierDetail.vue

@@ -17,12 +17,12 @@
       </el-col>
       <el-col :lg="30" :xs="24">
         <el-table :data="tableData" border>
-          <el-table-column v-for="header in editableHeaders" :key="header" :label="header" :prop="header">
+          <el-table-column v-for="header in editableHeaders" :key="header.prop" :label="header.label" :prop="header.prop">
             <template #header="{ column }">
               <span class="editable-header" v-text="column.label"></span>
             </template>
             <template #default="{ row, $index }">
-              <span class="editable-span" v-text="row[header]"></span>
+              <span class="editable-span" v-text="row[header.prop]"></span>
             </template>
           </el-table-column>
         </el-table>
@@ -38,53 +38,46 @@ import * as XLSX from 'xlsx';
 import {fillDetail} from "@/api/dataFilling/fileManagement";
 
 const emits = defineEmits(['close']);
-const detailData = ref({
-  title: '测试表单',
-  start: '2024-10-15 17:02:22',
-  end: '2024-10-15 18:00:00'
+const props = defineProps({
+  eventId: String | Number,
+  // table_name: string
 });
-
-const editableHeaders = ref<Array<{label:string;prop:string}>>([]);
+//初始化表头和表格数据
+const editableHeaders = ref([])
 const tableData = ref([]);
+const detailData = ref({
+  title: '',
+  start: '',
+  end: ''
+});
 
 onMounted(() => {
-  // loadFromLocalStorage();
-  addDefaultRow();
+  console.log('table_name:', props.table_name);
+  console.log('eventId:', props.eventId);
+  fetchFillDetail();
 });
 
-function loadFromLocalStorage() {
-  const storedData = localStorage.getItem('tableData');
-  if (storedData) {
-    tableData.value = JSON.parse(storedData);
-  } else {
-    tableData.value = [
-      {
-        时间: '2024-01-01',
-        地点: '某地',
-        损坏程度: '轻度',
-        救援人员: '张三, 李四',
-        物资: '食品, 水'
-      },
-      {
-        时间: '2024-01-02',
-        地点: '某地',
-        损坏程度: '中度',
-        救援人员: '王五, 赵六',
-        物资: '帐篷, 医疗用品'
-      }
-    ];
-  }
-}
+const fetchFillDetail = async () => {
+  try {
 
-function addDefaultRow() {
-  tableData.value.push({
-    时间: '',
-    地点: '',
-    损坏程度: '',
-    救援人员: '',
-    物资: ''
-  });
-}
+    const res = await fillDetail({ report_id: props.eventId });
+    // console.log(res);
+    // 动态设置表头
+    editableHeaders.value = res.columns;
+    // 转换表格数据格式以匹配表头
+    tableData.value = res.rows.map(row => {
+      const formattedRow = {};
+      editableHeaders.value.forEach(header => {
+        formattedRow[header.prop] = row[header.prop];
+      });
+      return formattedRow;
+    });
+    detailData.value.start = res.start_time;
+    detailData.value.end = res.end_time;
+  } catch (error) {
+    console.error('Error fetching data:', error);
+  }
+};
 
 const exportToExcel = () => {
   const worksheet = XLSX.utils.json_to_sheet(tableData.value);
@@ -102,6 +95,7 @@ const exportToExcel = () => {
 const handleReturn = () => {
   emits('close');
 };
+
 </script>
 
 <style scoped>