|
|
@@ -1,22 +1,50 @@
|
|
|
<template>
|
|
|
<div class="app-container p-2">
|
|
|
+ <el-row :gutter="20" class="mb8" style="margin-top:5px">
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-upload
|
|
|
+ class="upload-demo"
|
|
|
+ :http-request="handleFileUpload"
|
|
|
+ :before-upload="beforeUpload"
|
|
|
+ :file-list="fileList"
|
|
|
+ accept=".xlsx, .xls"
|
|
|
+ >
|
|
|
+ <el-button slot="trigger" size="big" type="primary">选择Excel文件</el-button>
|
|
|
+ </el-upload>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button type="primary" @click="handleNewTemplate">空白模板</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button type="primary" @click="handleReload">重新加载</el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button type="primary" @click="handleSaveTemporarily">暂存</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-row :gutter="20">
|
|
|
- <el-col :lg="30" :xs="24" style="">
|
|
|
+ <el-col :lg="30" :xs="24" style="margin-top: -10px">
|
|
|
<el-row :span="24" :gutter="10">
|
|
|
<!-- 联系人姓名 -->
|
|
|
- <el-col :span="12">
|
|
|
+ <el-col :span="8">
|
|
|
<el-form-item label="联系人姓名：" prop="table_name" label-width="auto">
|
|
|
<el-input v-model="creator_name" placeholder="请输入联系人姓名" style="width: 300px"></el-input>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<!-- 联系电话 -->
|
|
|
- <el-col :span="12">
|
|
|
+ <el-col :span="8">
|
|
|
<el-form-item label="联系电话：" prop="table_phone" label-width="auto">
|
|
|
<el-input v-model="creator_phone" placeholder="请输入联系电话" style="width: 300px"></el-input>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<!-- 选择填报人 -->
|
|
|
- <el-col :span="12">
|
|
|
+ <el-col :span="8">
|
|
|
<el-form-item label="选择填报人：" prop="table_name" label-width="auto">
|
|
|
<el-select v-model="selectedReporter" placeholder="请选择填报人" style="width: 300px">
|
|
|
<el-option v-for="reporter in reporters" :key="reporter.id" :label="reporter.name" :value="reporter.id" />
|
|
|
@@ -24,52 +52,28 @@
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<!-- 截止时间 -->
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="截止时间：" prop="release_time">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="截 止 时 间 ：" prop="release_time">
|
|
|
<el-date-picker v-model="selectedTime" type="date" placeholder="选择截止时间" @change="handleTimeChange" style="width: 150px" />
|
|
|
<span class="label" style="margin-left: 20px">前报送该表</span>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<!-- 操作按钮 -->
|
|
|
- <el-col :span="6">
|
|
|
- <el-input v-model="table_name" placeholder="请输入表名"></el-input>
|
|
|
- </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="handleSaveTemporarily">暂存</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 :span="8">
|
|
|
+ <el-form-item label="表       名：" prop="table_name" label-width="auto">
|
|
|
+ <el-input v-model="table_name" placeholder="请输入表名" style="width: 300px"></el-input>
|
|
|
+ </el-form-item>
|
|
|
</el-col>
|
|
|
+<!-- <el-col :span="1.5">-->
|
|
|
+<!-- <el-button type="primary" @click="handleReport()"> 智能识别 </el-button>-->
|
|
|
+<!-- </el-col>-->
|
|
|
+
|
|
|
</el-row>
|
|
|
</el-col>
|
|
|
- <el-row :gutter="20" class="mb8">
|
|
|
- <el-col :span="1.5">
|
|
|
- <el-button type="primary" @click="handleImportExcel">导入Excel文件</el-button>
|
|
|
- </el-col>
|
|
|
- <el-col :span="1.5">
|
|
|
- <el-button type="primary" @click="handleNewTemplate">空白模板</el-button>
|
|
|
- </el-col>
|
|
|
- <el-col :span="1.5">
|
|
|
- <el-button type="primary" @click="handleReload">重新加载</el-button>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <!-- 表格组件 -->
|
|
|
- <el-col :lg="30" :xs="24">
|
|
|
- <el-table :data="field_names" border>
|
|
|
- <el-table-column v-for="header in editableHeaders" :key="header" :label="header" :prop="header">
|
|
|
- <template #default="{ row, $index }">
|
|
|
- <el-input v-model="row[header]" @blur="saveEdit($index, header, row[header])" />
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- </el-col>
|
|
|
</el-row>
|
|
|
+ <div style="height: 350px">
|
|
|
+ <hot-table v-if="showTable" :data="hotData" ref="wrapper" :settings="hotSettings2" />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -78,14 +82,22 @@ import { onMounted, ref } from 'vue';
|
|
|
import { ElButton, ElCol, ElDatePicker, ElFormItem, ElInput, ElOption, ElRow, ElSelect, ElTable, ElTableColumn } from 'element-plus';
|
|
|
import * as XLSX from 'xlsx';
|
|
|
import { fillingAdd } from '@/api/dataFilling/fillingManage';
|
|
|
+import { HotTable } from '@handsontable/vue3'
|
|
|
+import Handsontable from 'handsontable'
|
|
|
+import 'handsontable/languages';
|
|
|
+import 'handsontable/dist/handsontable.full.css'
|
|
|
+import { registerAllModules } from 'handsontable/registry'
|
|
|
+registerAllModules()
|
|
|
|
|
|
+const fileList = ref([])
|
|
|
+const { proxy } = getCurrentInstance();
|
|
|
const emits = defineEmits(['close']);
|
|
|
const detailData = ref({
|
|
|
title: '表单数据',
|
|
|
start: '2024-10-15 17:02:22',
|
|
|
end: '2024-10-15 18:00:00'
|
|
|
});
|
|
|
-
|
|
|
+const hotData = ref([]);
|
|
|
const field_names = ref([]);
|
|
|
const editableHeaders = ref([]);
|
|
|
const creator_name = ref('');
|
|
|
@@ -107,24 +119,10 @@ function saveEdit(rowIndex, header, value) {
|
|
|
field_names.value[rowIndex][header] = value;
|
|
|
localStorage.setItem('field_names', JSON.stringify(field_names.value));
|
|
|
}
|
|
|
-
|
|
|
+const showTable = ref(false);
|
|
|
const handleNewTemplate = () => {
|
|
|
- // 创建一个新的10x10的数组，每个元素是一个对象，对象的键为列名，值为空字符串
|
|
|
- const newHeaders = Array.from({ length: 10 }, (_, index) => `列${String.fromCharCode(65 + index)}`); // 生成列名
|
|
|
- field_names.value = Array.from({ length: 10 }, (v, k) => {
|
|
|
- const obj = {
|
|
|
- 序号: k + 1
|
|
|
- };
|
|
|
- newHeaders.forEach((header) => {
|
|
|
- obj[header] = '';
|
|
|
- });
|
|
|
- return obj;
|
|
|
- });
|
|
|
-
|
|
|
- // 更新editableHeaders
|
|
|
- editableHeaders.value = ['序号', ...newHeaders];
|
|
|
-
|
|
|
- alert('空白模板已创建');
|
|
|
+ showTable.value = true;
|
|
|
+ created()
|
|
|
};
|
|
|
|
|
|
const handleImportExcel = () => {
|
|
|
@@ -195,6 +193,103 @@ const handleSave = async () => {
|
|
|
const handleReturn = () => {
|
|
|
emits('close');
|
|
|
};
|
|
|
+
|
|
|
+const hotSettings = reactive({
|
|
|
+ autoColumnSize:true,
|
|
|
+ language: 'zh-CN', // 语言设置
|
|
|
+ // colWidths:129, // 默认单元格宽度
|
|
|
+ // rowHeights:28, // 默认单元格高度
|
|
|
+ wordWrap:true, // 单元格文字是否换行展示
|
|
|
+ width:'100%', // auto or 100%
|
|
|
+ height:'100%', // auto or 100%
|
|
|
+ className:'htMiddle, htCenter',
|
|
|
+ licenseKey: 'non-commercial-and-evaluation', // 隐藏版权文字
|
|
|
+});
|
|
|
+const created = () => {
|
|
|
+ let data = []
|
|
|
+ for(let i = 0; i < 10; i++) {
|
|
|
+ let arr = []
|
|
|
+ for(let x = 0; x < 10; x++) {
|
|
|
+ arr.push('')
|
|
|
+ }
|
|
|
+ data.push(arr);
|
|
|
+ }
|
|
|
+ showTable.value = false;
|
|
|
+ nextTick(() => {
|
|
|
+ hotData.value = data;
|
|
|
+ showTable.value = true;
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+//
|
|
|
+// const hotContainer = ref(null);
|
|
|
+// let hotInstance = null;
|
|
|
+// const handleFileUpload = (event) => {
|
|
|
+// const file = event.target.files[0];
|
|
|
+// const reader = new FileReader();
|
|
|
+//
|
|
|
+// reader.onload = (e) => {
|
|
|
+// const data = new Uint8Array(e.target.result);
|
|
|
+// const workbook = XLSX.read(data, { type: 'array' });
|
|
|
+// const firstSheetName = workbook.SheetNames[0];
|
|
|
+// const worksheet = workbook.Sheets[firstSheetName];
|
|
|
+// const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
|
|
|
+//
|
|
|
+// // 如果Handsontable实例已经存在，销毁它以避免内存泄漏
|
|
|
+// if (hotInstance) {
|
|
|
+// hotInstance.destroy();
|
|
|
+// }
|
|
|
+//
|
|
|
+// // 初始化Handsontable实例
|
|
|
+// hotInstance = new Handsontable(hotContainer.value, {
|
|
|
+// data: jsonData,
|
|
|
+// rowHeaders: true,
|
|
|
+// colHeaders: true,
|
|
|
+// // 其他Handsontable配置...
|
|
|
+// });
|
|
|
+// };
|
|
|
+//
|
|
|
+// reader.readAsArrayBuffer(file);
|
|
|
+// };
|
|
|
+
|
|
|
+
|
|
|
+const hotSettings2 = reactive({
|
|
|
+ language: 'zh-CN',
|
|
|
+ colHeaders: true,
|
|
|
+ rowHeaders: true,
|
|
|
+ autoColumnSize:true,
|
|
|
+ width:'100%', // auto or 100%
|
|
|
+ height:'100%', // auto or 100%
|
|
|
+ licenseKey: 'non-commercial-and-evaluation', // 隐藏版权文字
|
|
|
+ colWidths:129, // 默认单元格宽度
|
|
|
+ rowHeights:28, // 默认单元格高度
|
|
|
+ wordWrap:true, // 单元格文字是否换行展示
|
|
|
+});
|
|
|
+const beforeUpload = (file) => {
|
|
|
+ const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.type === 'application/vnd.ms-excel';
|
|
|
+ if (!isExcel) {
|
|
|
+ proxy.$modal.msgError('只能上传xlsx/xls文件!');
|
|
|
+ }
|
|
|
+ return isExcel;
|
|
|
+};
|
|
|
+const handleFileUpload = ({ file }) => {
|
|
|
+ const reader = new FileReader();
|
|
|
+ reader.onload = (event) => {
|
|
|
+ showTable.value = false;
|
|
|
+ nextTick(() => {
|
|
|
+ const data = new Uint8Array(event.target.result);
|
|
|
+ const workbook = XLSX.read(data, { type: 'array' });
|
|
|
+ const firstSheetName = workbook.SheetNames[0];
|
|
|
+ const worksheet = workbook.Sheets[firstSheetName];
|
|
|
+ const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
|
|
|
+ hotData.value = jsonData.slice(1); // 假设第一行是标题行，我们跳过它
|
|
|
+ showTable.value = true;
|
|
|
+ })
|
|
|
+ };
|
|
|
+ reader.readAsArrayBuffer(file);
|
|
|
+ fileList.value = [];
|
|
|
+ return { success: true, file }; // 告诉 el-upload 上传成功（尽管实际上没有发送到服务器）
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
@@ -240,4 +335,8 @@ const handleReturn = () => {
|
|
|
content: attr(data-placeholder); /* 可选：为空时显示占位符 */
|
|
|
color: #999;
|
|
|
}
|
|
|
+.upload-demo {
|
|
|
+ display: inline-block;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
</style>
|
