填报管理

src/types/components.d.ts

@@ -22,14 +22,11 @@ declare module 'vue' {
     ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
     ElBadge: typeof import('element-plus/es')['ElBadge']
     ElButton: typeof import('element-plus/es')['ElButton']
-    ElCard: typeof import('element-plus/es')['ElCard']
-    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
+    ElColumn: typeof import('element-plus/es')['ElColumn']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
-    ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
-    ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
@@ -40,35 +37,21 @@ declare module 'vue' {
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElIcon: typeof import('element-plus/es')['ElIcon']
-    ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
-    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
-    ElLink: typeof import('element-plus/es')['ElLink']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
-    ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElPopover: typeof import('element-plus/es')['ElPopover']
     ElRadio: typeof import('element-plus/es')['ElRadio']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
-    ElSelect: typeof import('element-plus/es')['ElSelect']
-    ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
-    ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']
-    ElSlider: typeof import('element-plus/es')['ElSlider']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
-    ElTag: typeof import('element-plus/es')['ElTag']
     ElText: typeof import('element-plus/es')['ElText']
-    ElTimeline: typeof import('element-plus/es')['ElTimeline']
-    ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
-    ElTree: typeof import('element-plus/es')['ElTree']
-    ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
-    ElUpload: typeof import('element-plus/es')['ElUpload']
     ExcelEditor: typeof import('./../components/ExcelEditor/index.vue')['default']
     FileUpload: typeof import('./../components/FileUpload/index.vue')['default']
     FooterSection: typeof import('./../components/FooterSection/index.vue')['default']
@@ -79,9 +62,6 @@ declare module 'vue' {
     HikvisionPlayer: typeof import('./../components/HKVideo/hikvision-player.vue')['default']
     HKVideo: typeof import('./../components/HKVideo/index.vue')['default']
     IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
-    IEpCaretBottom: typeof import('~icons/ep/caret-bottom')['default']
-    IEpCaretTop: typeof import('~icons/ep/caret-top')['default']
-    IEpUploadFilled: typeof import('~icons/ep/upload-filled')['default']
     IFrame: typeof import('./../components/iFrame/index.vue')['default']
     ImagePreview: typeof import('./../components/ImagePreview/index.vue')['default']
     ImageUpload: typeof import('./../components/ImageUpload/index.vue')['default']

src/views/dataFilling/fillingAdd.vue

@@ -0,0 +1,153 @@
+<template>
+  <div>
+    <div v-show="!fillingAddState.show && !tableDetailsState.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.table_name" placeholder="请输入联系人姓名"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="联系电话：" prop="table_name" label-width="auto">
+                    <el-input v-model="queryParams.table_name" placeholder="请输入联系电话"></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="选择填报人：" prop="table_name" label-width="auto"> </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="截止时间：" prop="release_time">
+                    <el-date-picker
+                      v-model="selectedTime"
+                      type="daterange"
+                      range-separator="至"
+                      start-placeholder="开始日期"
+                      end-placeholder="结束日期"
+                      @change="handleTimeChange"
+                    />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-button type="primary" @click="handleQuery">查询</el-button>
+                  <el-button type="primary" @click="resetQuery">重置</el-button>
+                  <el-button type="primary" @click="exportTableData()">导出</el-button>
+                  <el-button type="primary" @click="handleAdd()">新增</el-button>
+                </el-col>
+              </el-row>
+            </el-form>
+          </div>
+        </transition>
+        <!-- 表格组件 -->
+        <el-table ref="multipleTable" v-loading="loading" :data="tableData" @selection-change="handleSelectionChange"> </el-table>
+        <pagination v-show="total > 0" v-model:page="queryParams.page" v-model:limit="queryParams.pageSize" :total="total" @pagination="tableData" />
+      </div>
+    </div>
+  </div>
+  <FillingAdd v-if="fillingAddState.show" :event-id="fillingAddState.eventId" @close="handleCancel" />
+  <TableDetails v-if="tableDetailsState.show" :event-id="tableDetailsState.eventId" @close="handleCancel" />
+</template>
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue';
+import FillingAdd from './fillingAdd.vue';
+import TableDetails from './tableDetails.vue';
+import { ElButton, ElCol } from 'element-plus';
+
+const loading = ref(true);
+const showSearch = ref(true);
+const selectedTime = ref([]);
+const ids = ref<Array<number | string>>([]);
+const total = ref(0);
+const tableData = ref([]);
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const initFormData = reactive({
+  table_id: '',
+  table_name: '',
+  filling_time: '',
+  release_time: '',
+  release_status: '',
+  task_status: ''
+});
+const data = reactive({
+  form: { ...initFormData },
+  queryParams: {
+    page: 1,
+    pageSize: 10,
+    table_name: '',
+    release_status: '',
+    task_status: ''
+  }
+});
+
+const { queryParams, form } = toRefs(data);
+
+let fillingAddState = reactive({
+  show: false,
+  eventId: ''
+});
+
+let tableDetailsState = reactive({
+  show: false,
+  eventId: ''
+});
+
+const handleCancel = () => {
+  fillingAddmState.show = false;
+  tableDetailsState.show = false;
+};
+const handleAdd = () => {
+  fillingAddState.eventId = null; // 表示新增记录
+  fillingAddState.show = true;
+};
+const handleView = (row) => {
+  if (row) {
+    tableDetailsState.eventId = row.id;
+    tableDetailsState.show = true;
+  }
+};
+
+// 初始化数据
+onMounted(() => {
+  tableData.value = staticData;
+  total.value = staticData.length;
+  loading.value = false;
+});
+const handleQuery = () => {
+  queryParams.value.page = 1;
+  fetchWorkrData();
+};
+// 重置查询条件
+const resetQuery = () => {
+  queryParams.value = { page: 1, pageSize: 10, table_name: '', release_status: '', task_status: '' };
+  selectedTime.value = [];
+  handleQuery();
+};
+const handleSelectionChange = (selection) => {
+  ids.value = selection.map((item) => item.id);
+};
+
+const handleTimeChange = (value) => {
+  selectedTimeLabel.value = value ? `${value[0]} 至 ${value[1]}` : '请选择时间';
+};
+
+const exportTableData = () => {
+  const dataForExport = tableData.value.map((item) => ({
+    table_id: item.table_id,
+    table_name: item.table_name,
+    release_time: item.release_time,
+    release_status: item.release_status,
+    filling_time: item.filling_time,
+    status: item.status
+  }));
+
+  // 使用 xlsx库创建一个工作簿和工作表，然后填入数据
+  const workbook = XLSXLSX.utils.book_new();
+  XLSX.utils.sheet_add_aoa(workbook, dataForExport, { name: 'sheet1' });
+
+  // 生成Excel文件并下载
+  XLSX.utils.save_a(workbook, 'tableData.xlsx');
+};
+</script>

src/views/dataFilling/fillingManage.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div v-show="!writeFormState.show && !formDetailState.show" class="app-container">
+    <div v-show="!fillingAddState.show && !tableDetailsState.show" class="app-container">
       <div>
         <transition name="fade">
           <div v-show="showSearch">
@@ -41,7 +41,9 @@
                 </el-col>
                 <el-col :span="6">
                   <el-button type="primary" @click="handleQuery">查询</el-button>
-                  <el-button @click="resetQuery">重置</el-button>
+                  <el-button type="primary" @click="resetQuery">重置</el-button>
+                  <el-button type="primary" @click="exportTableData()">导出</el-button>
+                  <el-button type="primary" @click="handleAdd()">新增</el-button>
                 </el-col>
               </el-row>
             </el-form>
@@ -57,7 +59,7 @@
           <el-table-column label="任务状态" align="center" prop="status" />
           <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
             <template #default="scope">
-              <el-text v-if="scope.row.release_status === '待发布'" class="common-btn-text-primary" @click="handleWrite(scope.row)">下发</el-text>
+              <el-text v-if="scope.row.release_status === '待发布'" class="common-btn-text-primary" @click="scope.row;">下发</el-text>
               <el-text class="common-btn-text-primary" @click="handleView(scope.row)">详情</el-text>
             </template>
           </el-table-column>
@@ -66,20 +68,19 @@
       </div>
     </div>
   </div>
-  <WriteForm v-if="writeFormState.show" :event-id="writeFormState.eventId" @close="handleCancel" />
-  <FormDetail v-if="formDetailState.show" :event-id="formDetailState.eventId" @close="handleCancel" />
+  <FillingAdd v-if="fillingAddState.show" :event-id="fillingAddState.eventId" @close="handleCancel" />
+  <TableDetails v-if="tableDetailsState.show" :event-id="tableDetailsState.eventId" @close="handleCancel" />
 </template>
 <script setup lang="ts">
 import { onMounted, reactive, ref } from 'vue';
-import WriteForm from './writeForm.vue';
-import FormDetail from './formDetail.vue';
+import FillingAdd from './fillingAdd.vue';
+import TableDetails from './tableDetails.vue';
+import { ElButton, ElCol } from 'element-plus';
 
 const loading = ref(true);
 const showSearch = ref(true);
 const selectedTime = ref([]);
-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;
@@ -130,30 +131,31 @@ const staticData = [
     status: '在用'
   }
 ];
-let writeFormState = reactive({
+let fillingAddState = reactive({
   show: false,
   eventId: ''
 });
-let formDetailState = reactive({
+
+let tableDetailsState = reactive({
   show: false,
   eventId: ''
 });
+
 const handleCancel = () => {
-  writeFormState.show = false;
-  formDetailState.show = false;
+  fillingAddmState.show = false;
+  tableDetailsState.show = false;
 };
-const handleWrite = (row) => {
-  if (row) {
-    writeFormState.eventId = row.id;
-    writeFormState.show = true;
-  }
+const handleAdd = () => {
+  fillingAddState.eventId = null; // 表示新增记录
+  fillingAddState.show = true;
 };
 const handleView = (row) => {
   if (row) {
-    formDetailState.eventId = row.id;
-    formDetailState.show = true;
+    tableDetailsState.eventId = row.id;
+    tableDetailsState.show = true;
   }
 };
+
 // 初始化数据
 onMounted(() => {
   tableData.value = staticData;
@@ -177,4 +179,22 @@ const handleSelectionChange = (selection) => {
 const handleTimeChange = (value) => {
   selectedTimeLabel.value = value ? `${value[0]} 至 ${value[1]}` : '请选择时间';
 };
+
+const exportTableData = () => {
+  const dataForExport = tableData.value.map((item) => ({
+    table_id: item.table_id,
+    table_name: item.table_name,
+    release_time: item.release_time,
+    release_status: item.release_status,
+    filling_time: item.filling_time,
+    status: item.status
+  }));
+
+  // 使用 xlsx库创建一个工作簿和工作表，然后填入数据
+  const workbook = XLSXLSX.utils.book_new();
+  XLSX.utils.sheet_add_aoa(workbook, dataForExport, { name: 'sheet1' });
+
+  // 生成Excel文件并下载
+  XLSX.utils.save_a(workbook, 'tableData.xlsx');
+};
 </script>

src/views/dataFilling/tableDetails.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>