yjhtgl-web/src/views/dataFilling/formDetail.vue

<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>