|
|
@@ -1,298 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="table-content">
|
|
|
- <!-- 搜索框 -->
|
|
|
- <div class="search-box">
|
|
|
- <el-input
|
|
|
- v-model="searchQuery"
|
|
|
- class="search-input"
|
|
|
- placeholder="请输入内容"
|
|
|
- prefix-icon="el-icon-search"
|
|
|
- clearable
|
|
|
- @keyup.enter="onSearch"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <!-- 筛选和排序区域 -->
|
|
|
- <div class="filter-sort-area">
|
|
|
- <div class="filter-item">
|
|
|
- <span>类型：</span>
|
|
|
- <span class="type-trigger" @click="showTypePicker">
|
|
|
- {{ selectedType || "请选择类型" }}
|
|
|
- <i class="el-icon-arrow-down" />
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <!-- 类型选择抽屉 -->
|
|
|
- <el-drawer
|
|
|
- v-model="typeDrawerVisible"
|
|
|
- title="选择类型"
|
|
|
- direction="btt"
|
|
|
- size="30%"
|
|
|
- >
|
|
|
- <ul>
|
|
|
- <li v-for="type in types" :key="type" @click="selectType(type)">
|
|
|
- {{ type }}
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </el-drawer>
|
|
|
- <div class="filter-item">
|
|
|
- <span>时间：</span>
|
|
|
- <span class="time-label" @click="showTimePicker">
|
|
|
- {{ selectedTimeLabel || "请选择时间" }}
|
|
|
- </span>
|
|
|
- <i class="el-icon-arrow-down" />
|
|
|
- </div>
|
|
|
- <div class="filter-item">
|
|
|
- <span>排序：</span>
|
|
|
- <span class="sort-order" @click="toggleSortOrder">
|
|
|
- {{ sortOrder === "asc" ? "↑" : "↓" }}
|
|
|
- <i
|
|
|
- :class="['el-icon-arrow-up', sortOrder === 'asc' ? 'active' : '']"
|
|
|
- />
|
|
|
- <i
|
|
|
- :class="[
|
|
|
- 'el-icon-arrow-down',
|
|
|
- sortOrder === 'desc' ? 'active' : ''
|
|
|
- ]"
|
|
|
- />
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 信息列表 -->
|
|
|
- <div v-for="(item, index) in sortedDataList" :key="index" class="info-box">
|
|
|
- <div class="status-icon" :class="getStatusClass(item.examine_status)" />
|
|
|
- <div class="info-content">
|
|
|
- <div class="info-header">
|
|
|
- <div class="info-title">{{ item.title }}</div>
|
|
|
- <div class="info-time">{{ item.publish_time }}</div>
|
|
|
- </div>
|
|
|
- <div class="info-description">
|
|
|
- <div>发布人：{{ item.nick_name }}</div>
|
|
|
- <div>部门：{{ item.dept_name }}</div>
|
|
|
- <div>发布渠道：{{ item.publish_channel }}</div>
|
|
|
- <div>阅读次数：{{ item.user_count }}</div>
|
|
|
- <div>审核状态：{{ item.examine_status }}</div>
|
|
|
- <div>发布状态：{{ item.publish_status }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 时间选择抽屉 -->
|
|
|
- <el-drawer
|
|
|
- v-model="drawerVisible"
|
|
|
- title="选择时间"
|
|
|
- direction="btt"
|
|
|
- size="30%"
|
|
|
- >
|
|
|
- <el-date-picker
|
|
|
- v-model="selectedTime"
|
|
|
- type="daterange"
|
|
|
- range-separator="至"
|
|
|
- start-placeholder="开始日期"
|
|
|
- end-placeholder="结束日期"
|
|
|
- @change="handleTimeChange"
|
|
|
- />
|
|
|
- <span class="drawer-footer">
|
|
|
- <el-button @click="drawerVisible = false">取消</el-button>
|
|
|
- <el-button type="primary" @click="confirmTime">确定</el-button>
|
|
|
- </span>
|
|
|
- </el-drawer>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script lang="ts" setup>
|
|
|
-import { ref, onMounted, onUnmounted, watch, computed } from "vue";
|
|
|
-import { InformationList } from "@/api/InformationReception/InformationReception";
|
|
|
-import { parseTime } from "@/utils/ruoyi";
|
|
|
-import {
|
|
|
- ElInput,
|
|
|
- ElDrawer,
|
|
|
- ElDatePicker,
|
|
|
- ElButton,
|
|
|
- ElIconArrowDown
|
|
|
-} from "element-plus";
|
|
|
-
|
|
|
-const dataList = ref([]);
|
|
|
-const selectedType = ref("↓");
|
|
|
-const types = ref(["预警", "灾情", "处置", "指挥救援", "公众防范"]);
|
|
|
-const selectedTime = ref([null, null]);
|
|
|
-const sortOrder = ref("desc");
|
|
|
-const drawerVisible = ref(false); // 确保使用 ref 定义
|
|
|
-const selectedTimeLabel = ref("↓");
|
|
|
-const typeDrawerVisible = ref(false);
|
|
|
-const searchQuery = ref("");
|
|
|
-
|
|
|
-const sortedDataList = computed(() => {
|
|
|
- return dataList.value.slice().sort((a, b) => {
|
|
|
- if (sortOrder.value === "asc") {
|
|
|
- return new Date(a.publish_time) - new Date(b.publish_time);
|
|
|
- } else {
|
|
|
- return new Date(b.publish_time) - new Date(a.publish_time);
|
|
|
- }
|
|
|
- });
|
|
|
-});
|
|
|
-
|
|
|
-const showTypePicker = () => {
|
|
|
- typeDrawerVisible.value = true;
|
|
|
-};
|
|
|
-
|
|
|
-const selectType = type => {
|
|
|
- selectedType.value = type;
|
|
|
- typeDrawerVisible.value = false;
|
|
|
- fetchData(); // 重新获取数据
|
|
|
-};
|
|
|
-
|
|
|
-const fetchData = async () => {
|
|
|
- try {
|
|
|
- const params = {
|
|
|
- publish_group: "",
|
|
|
- publish_status: "0",
|
|
|
- examine_status: "0",
|
|
|
- page: "1",
|
|
|
- page_size: "20"
|
|
|
- };
|
|
|
- const res = await InformationList(params);
|
|
|
- dataList.value = res.data.map(item => {
|
|
|
- item.publish_time = parseTime(item.publish_time);
|
|
|
- return item;
|
|
|
- });
|
|
|
- sortedDataList.value = dataList.value;
|
|
|
- } catch (error) {
|
|
|
- console.error("请求任务数据失败:", error);
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
-onMounted(() => {
|
|
|
- fetchData();
|
|
|
-});
|
|
|
-
|
|
|
-onUnmounted(() => {
|
|
|
- // 清除定时器等资源
|
|
|
-});
|
|
|
-
|
|
|
-const toggleSortOrder = () => {
|
|
|
- sortOrder.value = sortOrder.value === "asc" ? "desc" : "asc";
|
|
|
-};
|
|
|
-
|
|
|
-watch(
|
|
|
- () => [selectedType.value, selectedTime.value, sortOrder.value],
|
|
|
- () => {
|
|
|
- fetchData();
|
|
|
- }
|
|
|
-);
|
|
|
-
|
|
|
-const showTimePicker = () => {
|
|
|
- drawerVisible.value = true;
|
|
|
-};
|
|
|
-
|
|
|
-const handleTimeChange = value => {
|
|
|
- selectedTimeLabel.value = value ? `${value[0]} 至 ${value[1]}` : "请选择时间";
|
|
|
-};
|
|
|
-
|
|
|
-const confirmTime = () => {
|
|
|
- drawerVisible.value = false;
|
|
|
- fetchData(); // 重新获取数据
|
|
|
-};
|
|
|
-
|
|
|
-const getStatusClass = (status: string): string => {
|
|
|
- switch (status) {
|
|
|
- case "审核中":
|
|
|
- return "warning-icon";
|
|
|
- case "待审批":
|
|
|
- return "pending-icon";
|
|
|
- case "已通过":
|
|
|
- return "success-icon";
|
|
|
- case "已拒绝":
|
|
|
- return "error-icon";
|
|
|
- default:
|
|
|
- return "";
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
-//搜索
|
|
|
-const onSearch = () => {
|
|
|
- // 执行搜索操作
|
|
|
- console.log("搜索内容:", searchQuery.value);
|
|
|
- // 这里可以添加搜索的逻辑，比如调用 API 或更新数据列表
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped>
|
|
|
-.table-content {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
-}
|
|
|
-
|
|
|
-.filter-sort-area {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- margin-bottom: 16px;
|
|
|
-}
|
|
|
-
|
|
|
-.filter-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-right: 16px;
|
|
|
-}
|
|
|
-
|
|
|
-.info-box {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding: 10px;
|
|
|
- border-bottom: 1px solid #eee;
|
|
|
-}
|
|
|
-
|
|
|
-.status-icon {
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- margin-right: 10px;
|
|
|
-}
|
|
|
-
|
|
|
-.info-content {
|
|
|
- flex: 1;
|
|
|
-}
|
|
|
-
|
|
|
-.info-header {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-
|
|
|
-.info-title {
|
|
|
- font-weight: bold;
|
|
|
-}
|
|
|
-
|
|
|
-.info-time {
|
|
|
- font-size: 0.8em;
|
|
|
- color: #888;
|
|
|
-}
|
|
|
-
|
|
|
-.info-description {
|
|
|
- color: #333;
|
|
|
-}
|
|
|
-
|
|
|
-.el-icon-arrow-down {
|
|
|
- margin-left: 8px;
|
|
|
-}
|
|
|
-
|
|
|
-.sort-order {
|
|
|
- cursor: pointer;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-
|
|
|
-.el-icon-arrow-up,
|
|
|
-.el-icon-arrow-down {
|
|
|
- margin-left: 5px;
|
|
|
-}
|
|
|
-
|
|
|
-.search-box {
|
|
|
- padding: 10px;
|
|
|
- background-color: #f5f5f5;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-
|
|
|
-.search-input {
|
|
|
- width: 300px;
|
|
|
-}
|
|
|
-</style>
|
