zdxtLawEnforcementCodeView/src/views/enforce/enforceNotice.vue

<template>
    <div class="shop 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="请输入关键字查询"
                @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="notice-item" v-for="(item, index) in data.dataList" :key="index"><i></i>
                        <div class="item-cont">
                            <span class="item-title">{{ item.planName }}</span>
                            <!--           <span class="item-time"> {{ item.enforcementDepartment }} - {{ item.createTime }}</span>-->
                            <span class="item-time">
               <div style="display: flex; justify-content: space-between;">
                   <div>{{ item.enforcementDepartment }}</div>
                   <div>{{ item.createTime }}</div>
               </div>
           </span>
                            <div class="item-text" @click="toPdfView(null==item.fileObject?'':item.fileObject.fileUrl)">
                                <a>{{ null==item.fileObject?'':item.fileObject.fileName }}</a></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,
        //搜索框
        searchText: ref(''),
        //日期查询
        searchDate: ref(''),
        //是否发布 1 是
        isPublish: 1
    });

    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;
        console.log(useCommon.enterpriseNumber)
        // queryList();
        data.dateSearch = nowDate(new Date());
    });
    const queryList = () => {
        searchParam.pageNum = (data.curPage-1)*searchParam.pageSize;
        queryEnforcementInspectionProgramListNoPermission(searchParam, success => {
            data.curPage++;
            data.loading = false;   // 查4出结果停止加载
            if (success.total <= data.dataList.length) {
                // 查到最后没数据
                data.finished = ref(true);
                return;
            }
            // 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(
            {
                "searchText": searchParam.searchText
            }
            , success => {
                console.log(success)
                data.dataList = success.data;
            }, error => {

            })
    };
    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.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>
    .shop {
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background-color: #ebf3fb;

        .header_body {
            height: 1.33rem;
        }

        .shop-center {
            display: flex;
            position: relative;
            margin: 2% 0;
            height: 100%;
            background: #fff;
            overflow-y: scroll;

            .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-left: 3%;
                        font-size: 0.35rem;
                        line-height: 1.5;

                        p {
                            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: 100%;
            background: #e3e0e0;
            border-color: #e3e0e0;
            color: #4c4c4c;
            font-size: 0.3rem;
        }
    }

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

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

            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: 3% 0.26rem;
        height: 10vh;
        align-items: center;
        border-bottom: 1px solid #f3f4f5;
    }

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

    .item-cont {
        display: inline-block;
        width: calc(100% - 2.0rem);
    }

    .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: #999;
        font-size: 0.35rem;
        font-weight: normal;
    }

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

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