数据档案管理-首页、详情

src/views/dataFilling/dossierDetail.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/fileManagement.vue

@@ -0,0 +1,125 @@
+<template>
+  <div>
+    <div v-show=" !dossierDetailState.show" class="app-container">
+      <div>
+        <transition name="fade">
+          <div v-show="showSearch">
+            <el-form ref="queryFormRef" :model="queryParams">
+              <el-row :gutter="20">
+                <el-col :span="6">
+                  <el-form-item label="字段名称：" prop="table_name" label-width="auto">
+                    <el-input v-model="queryParams.field_name" placeholder="请输入内容"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-button type="primary" @click="handleQuery">查询</el-button>
+                  <el-button @click="resetQuery">重置</el-button>
+                </el-col>
+              </el-row>
+            </el-form>
+          </div>
+        </transition>
+        <!-- 表格组件 -->
+        <el-table ref="multipleTable" v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
+          <el-table-column label="序号" align="center" prop="table_id" />
+          <el-table-column label="表格名称" align="center" prop="table_name" />
+          <el-table-column label="收取时间" align="center" prop="collect_time" />
+          <el-table-column label="收取状态" align="center" prop="collect_status" />
+          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template #default="scope">
+              <el-text v-if="scope.row.collect_status === '收取'" class="common-btn-text-primary" @click="handleWrite(scope.row)">收取</el-text>
+              <el-text class="common-btn-text-primary" @click="handleView(scope.row)">详情</el-text>
+            </template>
+          </el-table-column>
+        </el-table>
+        <pagination v-show="total > 0" v-model:page="queryParams.page" v-model:limit="queryParams.pageSize" :total="total" @pagination="tableData" />
+      </div>
+    </div>
+  </div>
+<!--  <WriteForm v-if="writeFormState.show" :event-id="writeFormState.eventId" @close="handleCancel" />-->
+  <dossierDetail v-if="dossierDetailState.show" :event-id="dossierDetailState.eventId" @close="handleCancel" />
+</template>
+<script setup lang="ts">
+import dossierDetail from "@/views/dataFilling/dossierDetail.vue";
+import {onMounted, reactive, ref} from "vue";
+
+const loading = ref(true);
+const showSearch = ref(true);
+const multiple = ref(true);
+const ids = ref<Array<number | string>>([]);
+const single = ref(true);
+const total = ref(0);
+const tableData = ref([]);
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const initFormData = reactive({
+  table_id: '',
+  table_name: '',
+  collect_time: '',
+  collect_status: ''
+});
+
+const data = reactive({
+  form: { ...initFormData },
+  queryParams: {
+    page: 1,
+    pageSize: 10,
+    field_name: '',
+  }
+});
+
+const { queryParams, form } = toRefs(data);
+
+const staticData = [
+  {
+    table_id: 1,
+    table_name: '旅游景点数据表单',
+    collect_time: '2024-10-15',
+    collect_status: '待填报'
+  },
+  {
+    table_id: 2,
+    table_name: '非煤矿山数据表单',
+    collect_time: '2024-10-16',
+    collect_status: '待填报'
+  },
+  {
+    table_id: 3,
+    table_name: '专家数据表单',
+    collect_time: '2024-10-17',
+    collect_status: '收取'
+  }
+];
+const handleQuery = () => {
+  queryParams.value.page = 1;
+  fetchWorkrData();
+};
+const resetQuery = () => {
+  queryParams.value = { page: 1, pageSize: 10, field_name: '' };
+  handleQuery();
+};
+const handleSelectionChange = (selection) => {
+  ids.value = selection.map((item) => item.id);
+};
+//需要改动，这里的功能是收取
+const handleWrite = (row) => {
+  if (row) {
+    writeFormState.eventId = row.id;
+    writeFormState.show = true;
+  }
+};
+const handleView = (row) => {
+  if (row) {
+    dossierDetail.eventId = row.id;
+    dossierDetail.show = true;
+  }
+};
+let dossierDetailState = reactive({
+  show: false,
+  eventId: ''
+});
+onMounted(() => {
+  tableData.value = staticData;
+  total.value = staticData.length;
+  loading.value = false;
+});
+</script>