zdxtLawEnforcementCodeView/src/views/enforce/enforceNotice.vue

<template>
    <div class="home app_content">
        <!-- 导航栏 -->
        <!-- <div class="header_body">
         <header-nav
        :leftArrow="false"
                :titelText="`通知公告`"
            >
            </header-nav>
      <header-nav :slefBack="true" @goBack="goBack" :titelText="`通知公告`"></header-nav>
        </div>-->
        <van-search
                v-model="searchParam.searchText"
                show-action
                placeholder="请输入计划名称/单位"
                clearable="true"
                clear-icon="clear"
                clear-trigger="always"
                @search="onSearch"
        >
            <template #action>
                <div @click="onClickButton">搜索</div>
            </template>
        </van-search>


        <!-- 中间 -->
        <div class="shop-center">

            <van-pull-refresh v-model="data.refreshing" @refresh="onRefresh">
                <van-list v-model:loading="data.loading" :finished="data.finished" finished-text="没有更多了" @load="onLoad">
                  <div class="goods_box" v-for="(item, index) in data.dataList" :key="index">
                    <div class="notice-item"><i></i>
                        <div class="item-cont">
                            <span class="item-title">{{ item.planName }}</span>
                            <!--           <span class="item-time"> {{ item.enforcementDepartment }} - {{ item.createTime }}</span>-->
<!--                            <div class="item-time" style="display: flex; justify-content: space-between;">
                               <span>{{ item.bureauDeptName }}</span>
                               <span>{{ item.createTime }}</span>
                            </div>-->
                            <div class="item-text">
                              <p><label class="card_box_label">执法部门：</label> <span>{{ item.bureauDeptName }}</span>
                              </p>
                            </div>
                            <div class="item-text">
                              <p><label class="card_box_label">执法区域：</label> <span>{{ item.enforcementArea }}</span></p>
                            </div>
                            <div class="item-text">
                              <p><label class="card_box_label">发布时间：</label> <span>{{ item.createTime }}</span></p>
                            </div>
                            <div class="item-text">
                              <p><label class="card_box_label">附&nbsp; &nbsp; &nbsp; &nbsp;件：</label> <span> <a @click="toPdfView(null==item.fileObject?'':item.fileObject.fileUrl)">{{ null==item.fileObject?'':item.fileObject.fileName }}</a></span></p>
                            </div>
                        </div>
                    </div>
                  </div>
                </van-list>
            </van-pull-refresh>
        </div>

        <!-- 底部 -->
        <div class="shop_footer_body">
            <footer-enforcement-nav></footer-enforcement-nav>
        </div>
    </div>
</template>

<script setup name="enforcementInspectionProgram">
    import {queryEnforcementInspectionProgramListNoPermission} from "@/api/enforce";

    const {useCommon} = $globalStore;

    const router = useRouter();
    let allchecked = ref(false); // 是否全选
    let refreshLoad = ref(false); // 是否加载中

    let searchParam = reactive({
        // 分页
        pageNum: 1,
        pageSize: 6,
        userId: useCommon.userId,
        //搜索框
        searchText: ref(''),
        //日期查询
        searchDate: ref(''),
        //是否发布 1 是
        isPublish: 1,
        searchType:"notice"
    });

    const data = reactive({
        cartList: [],
        dataList: [],
        dateSearch: ref(),
        showDatePicker: false,
        currentDate: ref(['2024', '01']),
        minDate: new Date(2020, 0, 1),
        maxDate: new Date(2125, 5, 1),
        columnsType: ['year', 'month'],
        loading: false,
        finished: false,
        refreshing: false,
        curPage: 1,
        total: 0,
    });

    // 设置初始值为当前时间
    onMounted(() => {
        console.log(useCommon.enterpriseNumber);
        // getCard();
        searchParam.enterpriseNumber = useCommon.enterpriseNumber;
        // queryList();
        data.dateSearch = nowDate(new Date());
    });
    const queryList = () => {
        searchParam.pageNum = (data.curPage-1)*searchParam.pageSize;
        queryEnforcementInspectionProgramListNoPermission(searchParam, success => {
            //debugger
            data.curPage++;
            data.loading = false;   
            if (success.total <= data.dataList.length) {
                // 查到最后没数据
                data.finished = ref(true);
                return;
            }
            for (let index = 0; index < success.rows.length; index++) {
              const element = success.rows[index];
              console.log(element);
              // element.planName = element.planYear + element.planName;
              if(element.timeType == 'quarter'){
                let val = "";
                if(element.quarter == "1") val = "一季度";
                if(element.quarter == "2") val = "二季度";
                if(element.quarter == "3") val = "三季度";
                if(element.quarter == "4") val = "四季度";
                element.planName = element.planYear + "年" + val +  element.planName;
              }else if (element.timeType == 'mouth') {
                const val = element.mouth + "月";
                element.planName = element.planYear + "年" + val +  element.planName;
              }
              element.planName = element.bureauDeptName + element.planName;
            }
            // data.dataList = success.data;
            data.dataList.push(...success.rows);
            freshMap.refreshLoad = false;
            freshMap.listLoading = false;
            freshMap.listFinished = true;
            isLodding.value = false;
        }, error => {

        })
    }

    const onSearch = (val) => {
        // queryEnforcementInspectionProgramListNoPermission(searchParam
        //     , success => {
        //         console.log(success)
        //         data.dataList = success.data;
        //     }, error => {

        //     })
        data.dataList = [];
        queryList();
    };
    const onClickButton = () => {
        data.curPage = 1;
        data.dataList = [];
        onRefresh();
    }
    onActivated(() => {
    });

    onDeactivated(() => {

    });

    // 返回
    const goBack = () => {
        router.go(-1);
    };

    let resetScroll = ref(0); // 滚动记录
    let isLodding = ref(true); // 是否加载中
    let freshMap = reactive({
        refreshLoad: false, // 是否刷新
        listLoading: false, // 是否加载中
        listFinished: false, // 是否加载完成标识
    });

    //下拉刷新
    const onRefresh = () => {
        data.curPage = 1;
        // 清空列表数据
        data.dataList = [];
        data.finished = false;

        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        data.loading = true;
        onLoad();
    };
    // 触底加载
    const onLoad = () => {
        setTimeout(() => {
            if (data.refreshing) {
                data.refreshing = false;
            }
            queryList();
        }, 1000);
    };


    //获取分类下的商品列表
    const getGoodslist = async (onLoad) => {
        // const res = await useClassify.classifyGoods();
        // if (res?.code === 20000) {
        // 	goodsList = onLoad ? goodsList.concat(res?.data) : res?.data;
        // 	freshMap.refreshLoad = false;
        // 	freshMap.listLoading = false;
        // 	freshMap.listFinished = res?.listFinished;
        // 	if (goodsList.length > 50) {
        // 		freshMap.listFinished = true;
        // 	}
        // }
        freshMap.refreshLoad = false;
        freshMap.listLoading = false;
        freshMap.listFinished = true;
        isLodding.value = false;
    };

    onMounted(async () => {
        // let res = await getClassify();
        // if (res && res?.length) {
        // 	classifyId = res?.[0]?.id;
        // 	classifyId && getGoodslist();
        // } else {
        // 	isLodding.value = false;
        // }
        // queryList();
    });

    const selectDate = () => {
        data.showDatePicker = true;
        console.log(data.showDatePicker)
    }

    const onDateConfirm = (value) => {
        console.log(value);
        value.selectedValues.forEach((item, index) => {
            console.log(item);
        });
        data.dateSearch = value.selectedValues[0] + "/" + value.selectedValues[1]
        data.showDatePicker = false;
        searchParam.dateSearch = value.selectedValues[0] + "-" + value.selectedValues[1];

        data.curPage = 1;
        data.dataList = [];
        onRefresh();
    }
    const nowDate = (time) => {
        var year = time.getFullYear(); // 年
        var month = (time.getMonth() + 1).toString().padStart(2, '0'); // 月
        var date = time.getDate().toString().padStart(2, '0'); // 日
        var hour = time.getHours().toString().padStart(2, '0'); // 时
        var minute = time.getMinutes().toString().padStart(2, '0'); // 分
        var second = time.getSeconds().toString().padStart(2, '0'); // 秒
        return (
            year + "/" + month
        )
    }


    const searchDateType = (val) => {
        searchParam.dateType = val;
        searchParam.isComplaint = null;

        data.curPage = 1;
        data.dataList = [];
        onRefresh();
    }
    const searchComplaint = (val) => {
        searchParam.isComplaint = val;
        searchParam.dateType = null;

        data.curPage = 1;
        data.dataList = [];
        onRefresh();
    }

    const toPdfView = (url) => {
        console.log(url)
        router.push(
            {
                path: "/pdfView",
                query: {
                    url: url
                }
            });
    }
</script>

<style lang="less" scoped>
    .home {
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background-color: #ebf3fb;

        .header_body {
            height: 1.33rem;
        }

      .shop-center {
            flex: 1;
            overflow-y: scroll;
            position: relative;

            .goods_box {
                display: flex;
                background-color: #fff;
                margin: 0.27rem;
                border-radius: 0.27rem;

                .swipe_cell {
                    width: 100%;
                }

                .card_box {
                    display: flex;
                    width: 100%;
                    padding: 0.27rem 0;
                    flex-direction: column;

                    .card_body {
                        background-color: #fff;
                        border-radius: 0.27rem;
                        flex: 1;
                    }

                    .card_box_span {
                        display: flex;
                        align-items: center;
                        margin: 2% 0;
                        padding: 0 3%;
                        color: #666;
                        font-size: 0.35rem;
                        line-height: 1.5;

                        p {
                          display: flex;
                          margin: 0;
                        }
                    }

                    .card_box_action {
                        position: absolute;
                        right: 4%;
                    }
                }
            }
        }

        .shop_footer_body {
            //height: 101px;
            position: relative;

            .footer-one-btn {
                height: 1.33rem;
                bottom: 1.34rem;
            }
        }
    }

    .search-button-list {
        height: 0.7rem;
        display: flex;
        flex-direction: row;
        padding-left: 0.27rem;
        margin-top: 0.27rem;
        align-items: end;

        .search-button {
          width: 15%;
          height: 90%;
          background: #ebebeb;
          border-color: #ebebeb;
          color: #999;
          font-size: 0.3rem;
          line-height: 1.5;
        }

        .search-button.active {
          background-color: #d9e6fd;
          border-color: #75a5fb;
          color: #1367fe;
        }
    }

    .search-button-date {
        display: flex;
        flex-direction: row;
        align-items: end;
        position: relative;

        .date-select {
            margin: 3% 0 0 4%;
            color: #c1bfbf;
            font-size: 0.52rem;

            i {
                transform: rotate(90deg);
                font-size: 0.4rem;
            }
        }

        .search-button {
            width: 15%;
            height: 80%;
            position: absolute;
            top: 1%;
            right: 1%;
        }
    }

    .noticebox {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        border-radius: 0.2rem;
    }

    .notice-item {
        display: flex;
        position: relative;
        margin: 1% 0;
        padding: 1% 1% 3% 0;
        width: 98%;
        align-items: flex-start;
        /*border-bottom: 1px solid #f3f4f5;*/
    }

    .notice-item > i {
        display: inline-block;
        margin: 0.5% 0 0 0.2rem;
        width: 1.2rem;
        height: 1.2rem;
        background: url("../../assets/images/icon_notice2.png") no-repeat left top 50%;
        background-size: auto 80%;
    }

    .item-cont {
        display: inline-block;
        margin: 3% 0 0 0;
        width: calc(100% - 1.4rem);
    }

    .item-time {
        float: left;
        margin: 2% 0;
        width: 100%;
        color: #c1bfbf;
        font-size: 0.3rem;
        //height: 0.75rem;
        //line-height: 1rem;
    }

    .item-title, .item-text {
        float: left;
        margin: 0;
        width: 100%;
        font-size: 0.40rem;
        font-weight: 600;
        line-height: 1.5;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .item-text {
        width: 100%;
        color: #666;
        font-size: 0.35rem;
        font-weight: normal;
    }

    .item-text a {
        color: #2b75fd;
    }

    .item-text p {
      display: flex;
      margin: 0;
      padding: 0.1rem 0;
      line-height: 1.25;
    }

    .item-text label {
      color: #323233;
    }

    .item-text p span {
      white-space: break-spaces;
    }


    /deep/ .van-search__content {
        height: 0.9rem;
        border: 1px solid #ececec;
        border-radius: 0.15rem 0 0 0.15rem;
    }

    /deep/ .van-search__action {
        margin: 0 3% 0 0;
        width: 10%;
        height: 0.9rem;
        background: #1367fe;
        border: 1px solid #1367fe;
        border-radius: 0 0.15rem 0.15rem 0;
        color: #fff;
        text-align: center;
        line-height: 0.9rem;
    }



</style>