|
|
@@ -0,0 +1,174 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container p-2">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="6">
|
|
|
+ <h2>编辑</h2>
|
|
|
+ <p class="report-period">申报金额：20000.00元</p>
|
|
|
+ </el-col>
|
|
|
+ <el-col :lg="24" :xs="24">
|
|
|
+ <el-table :data="tableData" border height="400">
|
|
|
+ <el-table-column label="序号" prop="seqNo" width="80">
|
|
|
+ <template #default="{ $index }">
|
|
|
+ <span>{{ $index + 1 }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="物资类型" prop="materialType">
|
|
|
+ <template #default="{ row, $index }">
|
|
|
+ <span
|
|
|
+ class="editable-span"
|
|
|
+ contenteditable="true"
|
|
|
+ @blur="saveEdit($index, 'materialType', $event.target.innerText)"
|
|
|
+ v-text="row.materialType"
|
|
|
+ ></span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="物资名称" prop="materialName">
|
|
|
+ <template #default="{ row, $index }">
|
|
|
+ <span
|
|
|
+ class="editable-span"
|
|
|
+ contenteditable="true"
|
|
|
+ @blur="saveEdit($index, 'materialName', $event.target.innerText)"
|
|
|
+ v-text="row.materialName"
|
|
|
+ ></span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="物资数量（件）" prop="quantity">
|
|
|
+ <template #default="{ row, $index }">
|
|
|
+ <span
|
|
|
+ class="editable-span"
|
|
|
+ contenteditable="true"
|
|
|
+ @blur="saveEdit($index, 'quantity', $event.target.innerText)"
|
|
|
+ v-text="row.quantity"
|
|
|
+ ></span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="物资单价（元）" prop="unitPrice">
|
|
|
+ <template #default="{ row, $index }">
|
|
|
+ <span
|
|
|
+ class="editable-span"
|
|
|
+ contenteditable="true"
|
|
|
+ @blur="saveEdit($index, 'unitPrice', $event.target.innerText)"
|
|
|
+ v-text="row.unitPrice"
|
|
|
+ ></span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="物资用途" prop="purpose">
|
|
|
+ <template #default="{ row, $index }">
|
|
|
+ <span
|
|
|
+ class="editable-span"
|
|
|
+ contenteditable="true"
|
|
|
+ @blur="saveEdit($index, 'purpose', $event.target.innerText)"
|
|
|
+ v-text="row.purpose"
|
|
|
+ ></span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-col>
|
|
|
+ <div class="common-dialog-footer" style="width: 100%; justify-content: center; display: flex">
|
|
|
+ <el-row :span="24" :gutter="10" class="mb8">
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button type="primary" @click="handleAddRow">新增一项</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>
|
|
|
+ </div>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { ref, onMounted } from 'vue';
|
|
|
+import { ElTable, ElButton, ElCol, ElRow, ElTableColumn } from 'element-plus';
|
|
|
+import axios from 'axios'; // 引入axios
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ eventId: String
|
|
|
+});
|
|
|
+
|
|
|
+const emits = defineEmits(['close']);
|
|
|
+
|
|
|
+const tableData = ref([
|
|
|
+ { materialType: '三防物资', materialName: '雨衣', quantity: '100', unitPrice: '5.00', purpose: '2025年汛期储备' },
|
|
|
+ { materialType: '三防物资', materialName: '水鞋', quantity: '10', unitPrice: '5000.00', purpose: '2025年汛期储备' },
|
|
|
+ { materialType: '三防物资', materialName: '雨伞', quantity: '50', unitPrice: '100.00', purpose: '2025年汛期储备' }
|
|
|
+]);
|
|
|
+
|
|
|
+const addDefaultRow = () => {
|
|
|
+ const newRow = {
|
|
|
+ materialType: '',
|
|
|
+ materialName: '',
|
|
|
+ quantity: '',
|
|
|
+ unitPrice: '',
|
|
|
+ purpose: ''
|
|
|
+ };
|
|
|
+ tableData.value.push(newRow);
|
|
|
+};
|
|
|
+
|
|
|
+const saveEdit = (index: number, key: string, value: string) => {
|
|
|
+ if (key === 'quantity' || key === 'unitPrice') {
|
|
|
+ const numValue = parseFloat(value);
|
|
|
+ if (isNaN(numValue)) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ value = numValue.toString();
|
|
|
+ }
|
|
|
+ tableData.value[index][key] = value;
|
|
|
+};
|
|
|
+
|
|
|
+const handleAddRow = () => addDefaultRow();
|
|
|
+
|
|
|
+const handleReturn = () => {
|
|
|
+ emits('close');
|
|
|
+};
|
|
|
+
|
|
|
+const handleSave = async () => {
|
|
|
+ try {
|
|
|
+ const response = await axios.post('/api/submitData', { data: tableData.value });
|
|
|
+ console.log('数据已成功提交:', response.data);
|
|
|
+ } catch (error) {
|
|
|
+ console.error('提交数据时发生错误:', error);
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ // 如果需要从后端加载数据，可以在这里调用相应的API
|
|
|
+});
|
|
|
+</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;
|
|
|
+}
|
|
|
+.common-dialog-footer {
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+</style>
|
zhangyihao