迭代八数据填报：实现保存功能以及详情界面

src/views/dataFilling/formDetail.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="app-container p-2">
+    <el-row :gutter="20">
+      <el-col :lg="30" :xs="24" style="">
+        <el-row :span="24" :gutter="10">
+          <el-col :span="18" label="任务名称">
+            <h2 v-if="detailData.title" key="business" style="font-weight: bolder">{{ detailData.title }}</h2>
+            <p class="report-period">【填报周期】：{{ detailData.start }} 至 {{ detailData.end }}</p>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="primary" @click="exportToExcel()"> 导出表格 </el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="danger" @click="handleReturn()"> 返回 </el-button>
+          </el-col>
+        </el-row>
+      </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">
+            <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>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { ElTable, ElButton, ElCol, ElRow, ElTableColumn } from 'element-plus';
+import * as XLSX from 'xlsx';
+
+const emits = defineEmits(['close']);
+const detailData = ref({
+  title: '测试表单',
+  start: '2024-10-15 17:02:22',
+  end: '2024-10-15 18:00:00'
+});
+
+const editableHeaders = ref(['时间', '地点', '损坏程度', '救援人员', '物资']);
+const tableData = ref([]);
+
+onMounted(() => {
+  loadFromLocalStorage();
+  addDefaultRow();
+});
+
+function loadFromLocalStorage() {
+  const storedData = localStorage.getItem('tableData');
+  if (storedData) {
+    tableData.value = JSON.parse(storedData);
+  } else {
+    tableData.value = [
+      {
+        时间: '2024-01-01',
+        地点: '某地',
+        损坏程度: '轻度',
+        救援人员: '张三, 李四',
+        物资: '食品, 水'
+      },
+      {
+        时间: '2024-01-02',
+        地点: '某地',
+        损坏程度: '中度',
+        救援人员: '王五, 赵六',
+        物资: '帐篷, 医疗用品'
+      }
+    ];
+  }
+}
+
+function addDefaultRow() {
+  tableData.value.push({
+    时间: '',
+    地点: '',
+    损坏程度: '',
+    救援人员: '',
+    物资: ''
+  });
+}
+
+const exportToExcel = () => {
+  const worksheet = XLSX.utils.json_to_sheet(tableData.value);
+  const workbook = { Sheets: { data: worksheet }, SheetNames: ['data'] };
+  const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
+
+  const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+  const link = document.createElement('a');
+  const url = window.URL.createObjectURL(blob);
+  link.href = url;
+  link.download = 'SheetJS.xlsx';
+  link.click();
+  window.URL.revokeObjectURL(url); // 清理
+};
+const handleReturn = () => {
+  emits('close');
+};
+</script>
+
+<style scoped>
+.app-container {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #2c3e50;
+}
+.report-period {
+  margin-top: 10px;
+  font-size: 14px;
+  color: #606266;
+}
+.editable-span {
+  cursor: default;
+}
+.editable-header {
+  cursor: default;
+}
+</style>

src/views/dataFilling/myFilling.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div v-show="!writeFormState.show" class="app-container">
+    <div v-show="!writeFormState.show && !formDetailState.show" class="app-container">
       <div>
         <transition name="fade">
           <div v-show="showSearch">
@@ -46,10 +46,12 @@
     </div>
   </div>
   <WriteForm v-if="writeFormState.show" :event-id="writeFormState.eventId" @close="handleCancel" />
+  <FormDetail v-if="formDetailState.show" :event-id="formDetailState.eventId" @close="handleCancel" />
 </template>
 <script setup lang="ts">
 import { onMounted, reactive, ref } from 'vue';
 import WriteForm from './writeForm.vue';
+import FormDetail from './formDetail.vue';
 const loading = ref(true);
 const showSearch = ref(true);
 const multiple = ref(true);
@@ -104,8 +106,13 @@ let writeFormState = reactive({
   show: false,
   eventId: ''
 });
+let formDetailState = reactive({
+  show: false,
+  eventId: ''
+});
 const handleCancel = () => {
   writeFormState.show = false;
+  formDetailState.show = false;
 };
 const handleWrite = (row) => {
   if (row) {
@@ -113,6 +120,12 @@ const handleWrite = (row) => {
     writeFormState.show = true;
   }
 };
+const handleView = (row) => {
+  if (row) {
+    formDetailState.eventId = row.id;
+    formDetailState.show = true;
+  }
+};
 // 初始化数据
 onMounted(() => {
   tableData.value = staticData;

src/views/dataFilling/writeForm.vue

@@ -62,7 +62,7 @@
 import { ref, onMounted } from 'vue';
 import { ElTable, ElButton, ElCol, ElRow, ElTableColumn } from 'element-plus';
 import * as XLSX from 'xlsx';
-
+const emits = defineEmits(['close']);
 const detailData = ref({
   title: '测试表单',
   start: '2024-10-15 17:02:22',
@@ -70,22 +70,38 @@ const detailData = ref({
 });
 
 const editableHeaders = ref(['时间', '地点', '损坏程度', '救援人员', '物资']);
-const tableData = ref([
-  {
-    时间: '2024-01-01',
-    地点: '某地',
-    损坏程度: '轻度',
-    救援人员: '张三, 李四',
-    物资: '食品, 水'
-  },
-  {
-    时间: '2024-01-02',
-    地点: '某地',
-    损坏程度: '中度',
-    救援人员: '王五, 赵六',
-    物资: '帐篷, 医疗用品'
+const tableData = ref([]);
+
+// 初始化表格数据
+onMounted(() => {
+  loadFromLocalStorage();
+  addDefaultRow();
+});
+
+// 加载数据
+function loadFromLocalStorage() {
+  const storedData = localStorage.getItem('tableData');
+  if (storedData) {
+    tableData.value = JSON.parse(storedData);
+  } else {
+    tableData.value = [
+      {
+        时间: '2024-01-01',
+        地点: '某地',
+        损坏程度: '轻度',
+        救援人员: '张三, 李四',
+        物资: '食品, 水'
+      },
+      {
+        时间: '2024-01-02',
+        地点: '某地',
+        损坏程度: '中度',
+        救援人员: '王五, 赵六',
+        物资: '帐篷, 医疗用品'
+      }
+    ];
   }
-]);
+}
 
 function saveEdit(rowIndex, header, value) {
   tableData.value[rowIndex][header] = value;
@@ -108,10 +124,6 @@ function addDefaultRow() {
   });
 }
 
-onMounted(() => {
-  addDefaultRow();
-});
-
 const exportToExcel = () => {
   const worksheet = XLSX.utils.json_to_sheet(tableData.value);
   const workbook = { Sheets: { data: worksheet }, SheetNames: ['data'] };
@@ -130,8 +142,15 @@ const handleAdd = () => console.log('批量导入');
 const handleDownloadEmptyTable = () => console.log('下载空表格');
 const handleAddRow = () => addDefaultRow();
 const handleReport = () => console.log('上报');
-const handleSave = () => console.log('保存');
-const handleReturn = () => console.log('返回');
+
+const handleSave = () => {
+  // 保存本地状态
+  localStorage.setItem('tableData', JSON.stringify(tableData.value));
+  alert('数据已保存');
+};
+const handleReturn = () => {
+  emits('close');
+};
 </script>
 
 <style scoped>