|
|
@@ -0,0 +1,180 @@
|
|
|
+<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="handleReport()"> 上报 </el-button>
|
|
|
+ </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="primary" @click="handleSave()"> 保存 </el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button type="danger" @click="handleReturn()"> 返回 </el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+ <el-row :gutter="10" class="mb8">
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button type="primary" @click="handleAdd">批量导入</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button type="primary" @click="handleDownloadEmptyTable"> 下载空表格 </el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button type="primary" @click="handleAddRow"> 新增一行 </el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <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"
|
|
|
+ contenteditable="true"
|
|
|
+ @blur="saveHeader(column.label, $event.target.innerText)"
|
|
|
+ v-text="column.label"
|
|
|
+ ></span>
|
|
|
+ </template>
|
|
|
+ <template #default="{ row, $index }">
|
|
|
+ <span
|
|
|
+ class="editable-span"
|
|
|
+ contenteditable="true"
|
|
|
+ @blur="saveEdit($index, header, $event.target.innerText)"
|
|
|
+ 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 detailData = ref({
|
|
|
+ title: '测试表单',
|
|
|
+ start: '2024-10-15 17:02:22',
|
|
|
+ end: '2024-10-15 18:00:00'
|
|
|
+});
|
|
|
+
|
|
|
+const editableHeaders = ref(['时间', '地点', '损坏程度', '救援人员', '物资']);
|
|
|
+const tableData = ref([
|
|
|
+ {
|
|
|
+ 时间: '2024-01-01',
|
|
|
+ 地点: '某地',
|
|
|
+ 损坏程度: '轻度',
|
|
|
+ 救援人员: '张三, 李四',
|
|
|
+ 物资: '食品, 水'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 时间: '2024-01-02',
|
|
|
+ 地点: '某地',
|
|
|
+ 损坏程度: '中度',
|
|
|
+ 救援人员: '王五, 赵六',
|
|
|
+ 物资: '帐篷, 医疗用品'
|
|
|
+ }
|
|
|
+]);
|
|
|
+
|
|
|
+function saveEdit(rowIndex, header, value) {
|
|
|
+ tableData.value[rowIndex][header] = value;
|
|
|
+}
|
|
|
+
|
|
|
+function saveHeader(header, newValue) {
|
|
|
+ const index = editableHeaders.value.indexOf(header);
|
|
|
+ if (index !== -1) {
|
|
|
+ editableHeaders.value.splice(index, 1, newValue);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function addDefaultRow() {
|
|
|
+ tableData.value.push({
|
|
|
+ 时间: '',
|
|
|
+ 地点: '',
|
|
|
+ 损坏程度: '',
|
|
|
+ 救援人员: '',
|
|
|
+ 物资: ''
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ addDefaultRow();
|
|
|
+});
|
|
|
+
|
|
|
+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 handleAdd = () => console.log('批量导入');
|
|
|
+const handleDownloadEmptyTable = () => console.log('下载空表格');
|
|
|
+const handleAddRow = () => addDefaultRow();
|
|
|
+const handleReport = () => console.log('上报');
|
|
|
+const handleSave = () => console.log('保存');
|
|
|
+const handleReturn = () => console.log('返回');
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.app-container {
|
|
|
+ font-family: Avenir, Helvetica, Arial, sans-serif;
|
|
|
+ -webkit-font-smoothing: antialiased;
|
|
|
+ -moz-osx-font-smoothing: grayscale;
|
|
|
+ text-align: center;
|
|
|
+ color: #2c3e50;
|
|
|
+}
|
|
|
+.report-period {
|
|
|
+ margin-top: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #606266;
|
|
|
+}
|
|
|
+.editable-span {
|
|
|
+ cursor: pointer;
|
|
|
+ display: inline-block;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
+.editable-span[contenteditable='true'] {
|
|
|
+ white-space: normal;
|
|
|
+ outline: none; /* 移除编辑时的焦点边框 */
|
|
|
+}
|
|
|
+.editable-span[contenteditable='true']:empty::before {
|
|
|
+ content: attr(data-placeholder); /* 可选：为空时显示占位符 */
|
|
|
+ color: #999;
|
|
|
+}
|
|
|
+.editable-header {
|
|
|
+ cursor: pointer;
|
|
|
+ display: inline-block;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
+.editable-header[contenteditable='true'] {
|
|
|
+ white-space: normal;
|
|
|
+ outline: none; /* 移除编辑时的焦点边框 */
|
|
|
+}
|
|
|
+.editable-header[contenteditable='true']:empty::before {
|
|
|
+ content: attr(data-placeholder); /* 可选：为空时显示占位符 */
|
|
|
+ color: #999;
|
|
|
+}
|
|
|
+</style>
|
zhangyihao