|
|
@@ -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>
|
