yjxp-web/src/views/workApproval/approvalList.vue

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