填报管理

src/types/components.d.ts

@@ -19,13 +19,10 @@ declare module 'vue' {
     Dialog: typeof import('./../components/Dialog/index.vue')['default']
     DictTag: typeof import('./../components/DictTag/index.vue')['default']
     Editor: typeof import('./../components/Editor/index.vue')['default']
-    ElAnchor: typeof import('element-plus/es')['ElAnchor']
-    ElAnchorLink: typeof import('element-plus/es')['ElAnchorLink']
     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']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
@@ -45,7 +42,6 @@ declare module 'vue' {
     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']
@@ -57,15 +53,11 @@ declare module 'vue' {
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSegmented: typeof import('element-plus/es')['ElSegmented']
     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']
-    ElTabPane: typeof import('element-plus/es')['ElTabPane']
-    ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElText: typeof import('element-plus/es')['ElText']
     ElTimeline: typeof import('element-plus/es')['ElTimeline']
@@ -86,7 +78,6 @@ declare module 'vue' {
     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/fillingManage.vue

@@ -0,0 +1,180 @@
+<template>
+  <div>
+    <div v-show="!writeFormState.show && !formDetailState.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="task_status">
+                    <el-radio-group v-model="queryParams.task_status">
+                      <el-radio value="0" size="large">在用</el-radio>
+                      <el-radio value="1" size="large">禁止</el-radio>
+                    </el-radio-group>
+                  </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-form-item label="下发状态：" prop="release_status">
+                    <el-radio-group v-model="queryParams.release_status">
+                      <el-radio value="0" size="large">待发布</el-radio>
+                      <el-radio value="1" size="large">已发布</el-radio>
+                    </el-radio-group>
+                  </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="release_time" />
+          <el-table-column label="发布状态" align="center" prop="release_status" />
+          <el-table-column label="截止填报时间" align="center" prop="filling_time" />
+          <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 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" />
+  <FormDetail v-if="formDetailState.show" :event-id="formDetailState.eventId" @close="handleCancel" />
+</template>
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue';
+import WriteForm from './writeForm.vue';
+import FormDetail from './formDetail.vue';
+
+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;
+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);
+// 模拟数据源
+const staticData = [
+  {
+    table_id: 1,
+    table_name: '测试表单',
+    release_time: '2024-10-15',
+    release_status: '已发布',
+    filling_time: '2024-10-15 18:00:00',
+    status: '在用'
+  },
+  {
+    table_id: 2,
+    table_name: '应急工单数据表',
+    release_time: '2024-06-24',
+    release_status: '待发布',
+    filling_time: '2025-06-24 18:00:00',
+    status: '在用'
+  },
+  {
+    table_id: 3,
+    table_name: '安全风险通告数据表',
+    release_time: '2024-06-24',
+    release_status: '已发布',
+    filling_time: '2025-06-24 18:00:00',
+    status: '在用'
+  }
+];
+let writeFormState = reactive({
+  show: false,
+  eventId: ''
+});
+let formDetailState = reactive({
+  show: false,
+  eventId: ''
+});
+const handleCancel = () => {
+  writeFormState.show = false;
+  formDetailState.show = false;
+};
+const handleWrite = (row) => {
+  if (row) {
+    writeFormState.eventId = row.id;
+    writeFormState.show = true;
+  }
+};
+const handleView = (row) => {
+  if (row) {
+    formDetailState.eventId = row.id;
+    formDetailState.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]}` : '请选择时间';
+};
+</script>