|
|
@@ -0,0 +1,329 @@
|
|
|
+<template>
|
|
|
+ <div class="container">
|
|
|
+ <!--搜索框-->
|
|
|
+ <van-search
|
|
|
+ v-model="queryParams.search_keyword"
|
|
|
+ class="common-search"
|
|
|
+ placeholder="请输入信息"
|
|
|
+ :left-icon="searchImg"
|
|
|
+ :right-icon="closeImg"
|
|
|
+ :clearable="false"
|
|
|
+ @search="on_search_keyword"
|
|
|
+ @click-right-icon.stop="on_search_cancel"
|
|
|
+ />
|
|
|
+ <!--三个类型选择-->
|
|
|
+ <van-dropdown-menu>
|
|
|
+ <van-dropdown-item
|
|
|
+ v-model="queryParams.info_type"
|
|
|
+ :title="!!queryParams.info_type ? '' : '审批类型'"
|
|
|
+ :options="opt_info_type"
|
|
|
+ @change="change_info_type"
|
|
|
+ />
|
|
|
+ <van-dropdown-item
|
|
|
+ v-model="queryParams.time_type"
|
|
|
+ :title="!!queryParams.time_type ? '' : '时间'"
|
|
|
+ :options="opt_time_type"
|
|
|
+ @change="change_time_type"
|
|
|
+ </van-dropdown-item>
|
|
|
+ <van-dropdown-item
|
|
|
+ v-model="queryParams.info_order"
|
|
|
+ :title="!!queryParams.info_order ? '' : '时间顺序'"
|
|
|
+ :options="opt_info_order"
|
|
|
+ @change="change_info_order"
|
|
|
+ />
|
|
|
+ </van-dropdown-menu>
|
|
|
+
|
|
|
+ <van-list
|
|
|
+ v-model:loading="loading"
|
|
|
+ v-model:error="error"
|
|
|
+ error-text="请求失败，点击重新加载"
|
|
|
+ :finished="finished"
|
|
|
+ finished-text="没有更多信息了"
|
|
|
+ class="list"
|
|
|
+ @load="getList"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in info_list"
|
|
|
+ :key="item.id"
|
|
|
+ class="event-list-item"
|
|
|
+ @click="handleInfo(item)"
|
|
|
+ >
|
|
|
+ <div class="item-title">
|
|
|
+ <div class="item-title-text">
|
|
|
+ {{ item.publish_group }}
|
|
|
+ </div>
|
|
|
+ <div :class="['info_type', get_info_type_color(item.info_type)]">
|
|
|
+ {{ get_info_type_text(item.info_type) }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="item-content" style="display: flex; align-items: center; justify-content:space-between;">
|
|
|
+ <div>申请时间：{{ item.add_time }} </div>
|
|
|
+ <div>申请人：{{ item.nick_name }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="item-content">
|
|
|
+ 信息摘要：{{ item.content || "暂无信息摘要"}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-list>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <script lang="ts" setup>
|
|
|
+ import { getCurrentInstance, onMounted, ref, toRefs } from "vue";
|
|
|
+ import { useRouter } from "vue-router";
|
|
|
+ import { WorkApprovalList } from "@/api/InformationReception/InformationReception";
|
|
|
+ import searchImg from "@/assets/images/search.png";
|
|
|
+ import closeImg from "@/assets/images/close.png";
|
|
|
+
|
|
|
+ interface Props {
|
|
|
+ status: number;
|
|
|
+ }
|
|
|
+
|
|
|
+ const props = withDefaults(defineProps<Props>(), {
|
|
|
+ status: 0
|
|
|
+ });
|
|
|
+
|
|
|
+ const router = useRouter();
|
|
|
+
|
|
|
+ const opt_info_type = [
|
|
|
+ { text: "全部", value: "" },
|
|
|
+ { text: "预警信息", value: "0" },
|
|
|
+ { text: "灾害事件", value: "1" },
|
|
|
+ { text: "灾情信息", value: "2" },
|
|
|
+ { text: "灾害资讯", value: "3" },
|
|
|
+ { text: "应急救援总结报告", value: "4" }
|
|
|
+ ];
|
|
|
+
|
|
|
+ const opt_time_type = [
|
|
|
+ { text: "全部", value: "" },
|
|
|
+ { text: "一周内", value: "0" },
|
|
|
+ { text: "一个月内", value: "1" },
|
|
|
+ { text: "六个月内", value: "2" }
|
|
|
+ ];
|
|
|
+
|
|
|
+ const opt_info_order = [
|
|
|
+ { text: "升序", value: "asc" },
|
|
|
+ { text: "降序", value: "desc" }
|
|
|
+ ];
|
|
|
+
|
|
|
+ const get_info_type_text = (val) => {
|
|
|
+ return opt_info_type.find(item => item.value == val).text
|
|
|
+ }
|
|
|
+
|
|
|
+ const get_info_type_color = (val) => {
|
|
|
+ return "info_type_" + val
|
|
|
+ }
|
|
|
+
|
|
|
+ const info_list = ref([]);
|
|
|
+ const total = ref(0);
|
|
|
+ const loading = ref(false);
|
|
|
+ const error = ref(false);
|
|
|
+ const finished = ref(false);
|
|
|
+
|
|
|
+ const queryParams = ref({
|
|
|
+ page: 0,
|
|
|
+ page_size: 5,
|
|
|
+ status: 0,
|
|
|
+ info_type: "",
|
|
|
+ time_type: "",
|
|
|
+ event_level: "",
|
|
|
+ info_order: "desc",
|
|
|
+ search_keyword: ""
|
|
|
+ });
|
|
|
+
|
|
|
+ const on_search_keyword = val => {
|
|
|
+ queryParams.value.search_keyword = val;
|
|
|
+ queryParams.value.page = 0;
|
|
|
+ getList();
|
|
|
+ };
|
|
|
+
|
|
|
+ const on_search_cancel = () => {
|
|
|
+ queryParams.value.search_keyword = "";
|
|
|
+ queryParams.value.page = 0;
|
|
|
+ getList();
|
|
|
+ };
|
|
|
+
|
|
|
+ const change_info_type = () => {
|
|
|
+ queryParams.value.page = 0;
|
|
|
+ getList();
|
|
|
+ };
|
|
|
+
|
|
|
+ const change_time_type = () => {
|
|
|
+ queryParams.value.page = 0;
|
|
|
+ getList();
|
|
|
+ };
|
|
|
+
|
|
|
+ const change_info_order = () => {
|
|
|
+ queryParams.value.page = 0;
|
|
|
+ getList();
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleInfo = (item) => {
|
|
|
+ router.push("/workApproval/detail?id=" + item.id);
|
|
|
+ }
|
|
|
+
|
|
|
+ const getList = () => {
|
|
|
+ queryParams.value.status = props.status;
|
|
|
+ queryParams.value.page++;
|
|
|
+ let params = queryParams.value;
|
|
|
+ WorkApprovalList(params)
|
|
|
+ .then(res => {
|
|
|
+ var items = res.data || [];
|
|
|
+ total.value = res.total;
|
|
|
+ if (queryParams.value.page == 1) {
|
|
|
+ info_list.value = [];
|
|
|
+ }
|
|
|
+ items.forEach(val => {
|
|
|
+ info_list.value.push(val);
|
|
|
+ });
|
|
|
+ if (queryParams.value.page_size * queryParams.value.page >= total.value) {
|
|
|
+ finished.value = true;
|
|
|
+ } else {
|
|
|
+ finished.value = false;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ error.value = true;
|
|
|
+ finished.value = false;
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ loading.value = false;
|
|
|
+ });
|
|
|
+ };
|
|
|
+ </script>
|
|
|
+
|
|
|
+ <style lang="scss" scoped>
|
|
|
+ .list {
|
|
|
+ height: calc(100vh - 102px);
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+ .van-doc-block__title {
|
|
|
+ color: var(--van-doc-text-color-4);
|
|
|
+ margin: 0;
|
|
|
+ padding: 32px 16px 16px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .event-list-item {
|
|
|
+ position: relative;
|
|
|
+ margin: 16px 16px 0;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 0.5px solid #eaedf7;
|
|
|
+ box-shadow: 0 0 4px 0 #4554661a;
|
|
|
+ &:first-child {
|
|
|
+ margin-top: 0;
|
|
|
+ }
|
|
|
+ .item-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content:space-between;
|
|
|
+ min-height: 46px;
|
|
|
+ background-image: linear-gradient(180deg, #f3f7fd 0%, #ffffff 100%);
|
|
|
+ padding: 0 12px;
|
|
|
+ .item-title-text {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #414f64;
|
|
|
+ font-weight: 600;
|
|
|
+ max-width: 200px;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info_type {
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 3px 10px;
|
|
|
+ color:#fff;
|
|
|
+ margin-right: 5px;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info_type_0 {
|
|
|
+ background: #FFAF00;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info_type_1 {
|
|
|
+ background: #FF1818;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info_type_2 {
|
|
|
+ background: #2c81ff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info_type_3 {
|
|
|
+ background: #FF9F9F;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info_type_4 {
|
|
|
+ background: #A4D3FF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-content {
|
|
|
+ padding: 0 12px 12px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #414f64;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .van-dropdown-menu {
|
|
|
+ :deep(.van-dropdown-menu__bar) {
|
|
|
+ background: transparent;
|
|
|
+ box-shadow: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .common-search {
|
|
|
+ :deep(.van-field__left-icon) {
|
|
|
+ .van-icon__image {
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ :deep(.van-field__right-icon) {
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ padding: 0;
|
|
|
+ .van-icon__image {
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .icon1 {
|
|
|
+ width: 17px;
|
|
|
+ height: 16px;
|
|
|
+ background: url("@/assets/images/event/icon1.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-right: 7px;
|
|
|
+ }
|
|
|
+ .icon2 {
|
|
|
+ width: 17px;
|
|
|
+ height: 16px;
|
|
|
+ background: url("@/assets/images/event/icon2.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-right: 7px;
|
|
|
+ }
|
|
|
+ .icon3 {
|
|
|
+ width: 17px;
|
|
|
+ height: 16px;
|
|
|
+ background: url("@/assets/images/event/icon3.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-right: 7px;
|
|
|
+ }
|
|
|
+ .icon4 {
|
|
|
+ width: 17px;
|
|
|
+ height: 16px;
|
|
|
+ background: url("@/assets/images/event/icon4.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-right: 7px;
|
|
|
+ }
|
|
|
+ .icon5 {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ background: url("@/assets/images/event/icon5.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-right: 7px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+
|
