zdxtLawEnforcementCodeView/src/views/enforce/historyCheck.vue

<template>
    <div class="shop app_content">
        <!-- 导航栏 -->
        <!-- <div class="header_body">
           <header-nav :slefBack="true" @goBack="goBack" :titelText="`行政检查信息查询`"/>
          <header-nav :slefBack="true" @goBack="goBack" :titelText="`历史检查信息`"/>
       </div> -->
      <van-search v-model="searchParam.searchValue" show-action placeholder="检查事项/执法部门/执法人员/企业名称 " @search="onSearch">
        <template #action>
          <div @click="onClickButton">搜索</div>
        </template>
      </van-search>

        <div class="search-button-list">
            <van-button plain hairline :class="null==data.checkNum?'search-button active':'search-button'"
                        @click="searchDateType(null)" round type="primary" size="mini">
                全部
            </van-button>
            <van-button plain hairline :class="1==data.checkNum?'search-button active':'search-button'"
                        @click="searchDateType(1)" round type="primary"
                        size="mini">本月
            </van-button>
            <van-button plain hairline :class="2==data.checkNum?'search-button active':'search-button'"
                        @click="searchDateType(2)" round type="primary"
                        size="mini">本季
            </van-button>
            <van-button plain hairline :class="3==data.checkNum?'search-button active':'search-button'"
                        @click="searchDateType(3)" round type="primary"
                        size="mini">本年
            </van-button>
            <van-button plain hairline :class="9==data.checkNum?'search-button active':'search-button'"
                        @click="selectDate" round type="primary" size="mini">筛选
            </van-button>
        </div>
        <div class="search-button-date">
            <span class="date-select" v-show="data.dateShow" @click="selectDate">{{  data.dateSearch }}</span>
            <div style="border-color: black;" class="van-hairline--bottom"></div>
            <van-popup v-model:show="data.showDatePicker" position="bottom">
                <van-date-picker
                        title="选择月度"
                        v-model="data.currentDate"
                        :min-date="data.minDate"
                        :max-date="data.maxDate"
                        :columns-type="data.columnsType"
                        @confirm="onDateConfirm"
                        @cancel="cancelSelectDate"
                />
            </van-popup>
        </div>

        <!-- 中间 -->
        <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 v-for="(item, index) in data?.dataList" :key="index"
                             :class="item.isComplaint==1?'goods_box addbg':'goods_box'">
                            <van-swipe-cell class="swipe_cell">
                                <div class="card_box">
                                    <div class="card_box_span">
                                        <p>检查时间：{{ item.enforcementTime }}
                                            <span v-if="null != item.enforce" class="remsty">未扫码</span>
                                        </p>
                                    </div>
                                    <!--									 <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa',padding: '0 5px' }" />-->
                                    <div @click="toDetailView(item.id)">
                                        <div class="van-hairline--bottom"></div>
                                        <div class="card_box_span card-title">
                                            <p>{{ item.lawEnforcementItemText }}</p>
                                        </div>
                                        <div class="card_box_span">
                                            <p><label class="card_box_label">执法部门：</label> <span>{{ item.bureauDeptName }}</span></p>
                                        </div>
<!--                                        <div class="card_box_span">
                                            <p><label class="card_box_label">执法人员：</label> <span>{{ item.lawEnforcer }} , {{
                                                item.lawEnforcerTwo }}</span></p>
                                        </div>-->
                                      <div class="card_box_span">
                                        <p>
                                          <label class="card_box_label">执法人员：</label>
                                        <div>
                                          <div>{{ item.lawEnforcer }}</div>
                                          <div v-for="(item, index) in item.lawEnforcer2List">{{ item }}</div>
                                        </div>
                                        </p>
                                      </div>
                                        <div class="card_box_span">
                                            <p><label class="card_box_label">企业名称：</label> <span>{{ item.enterpriseName }}</span></p>
                                        </div>
                                        <div class="btn-list" v-if="item.isSubmit == 0">
                                            <a @click.stop="toEditView(item)">
                                                <van-icon name="edit"/>
                                                编辑</a>
                                        </div>
                                    </div>
                                    <!--                                    <div class="card_box_action" v-if="item.isSubmit == 0">
                                                                            <span><van-button @click="toEditView(item)" type="primary"
                                                                                              size="mini">编辑</van-button></span>
                                                                        </div>-->

                                    <div class="card_box_action" v-if="item.comOrOpi == 1">
                                        <!--                                        <span><van-button @click="toComplaint(item.id, item.lawEnforcementItemText)" type="primary"-->
                                        <!--                                                          size="mini">建议</van-button></span>-->
                                    </div>
                                </div>
                            </van-swipe-cell>
                        </div>
                </van-list>
            </van-pull-refresh>
        </div>

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

<script setup name="registrationList">
    import {queryRegistrationList, getAttr} from '../../api/enforce';
    import {queryLinkage, queryLinkageById, queryLinkageDictByValueAndParentId} from "@/api/linkage";

    const {useCommon, useShopCard} = $globalStore;

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

    let searchParam = reactive({
        userId: useCommon.userId,
        "dataScopeId": useCommon.userId,
        // 分页
        pageNum: 1,
        pageSize: 6,
        //执法事件
        // lawEnforcementIncident:"",
        //执法部门
        lawEnforcement: "",
        //搜索框
        searchValue: ref(''),
        //时间类型
        dateType: null,
        //是否投诉
        isComplaint: null,
        //企业统一信用码
        // enterpriseNumber: ref(useCommon.enterpriseNumber),
        lawEnforcerId: ref(useCommon.userId),
        //日期搜索
        dateSearch: ref(),
    });

    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'],
        ga_columns: [],
        dateShow: false,
        checkNum: null,
        loading: false,
        finished: false,
        refreshing: false,
        curPage: 1,
    });

    const toComplaint = (id, checkItem) => {
        router.push({
            path: "/enterprise/complaintDetail",
            query: {
                comOrOpi: 1,
                isSelect: false,
                id: id,
                lawEnforcementItemText: checkItem,
            }
        });
    }

    // 设置初始值为当前时间
    onMounted(async () => {
        // getCard();
        searchParam.lawEnforcerId = useCommon.userId;
        // queryList();
        searchDateType(null);

        data.dateSearch = nowDate(new Date());

        // queryLinkageDictByValueAndParentId({"value": "check_item", "parentId": "100"}, success => {
        // 	getLinkageByParentIdToItem(success.id)
        // },error=>{});
    });

    const getLinkageByParentIdToItem = (parentId) => {
        // 查询检查要求字典信息
        queryLinkage({"parentId": parentId}, success => {
            for (var i = 0; i < success.length; i++) {
                data.ga_columns.push({text: success[i].title, value: success[i].id, id: success[i].id})
            }
            queryList();
        }, error => {
        });
    }
    const queryList = () => {
        // searchParam.isSubmit = 1;
        searchParam.pageNum = (data.curPage-1)*searchParam.pageSize;
        queryRegistrationList(searchParam, success => {
            data.curPage++;
            data.loading = false;   // 查出结果停止加载
            if (success.total <= data.dataList.length) {
                // 查到最后没数据
                data.finished = true;
                return;
            }
            // data.dataList = success.data;
            data.dataList.push(...success.rows);
            // for (var i = 0; i < success.data.length; i++) {
                // var itemTxt = success.data[i].lawEnforcementItem;
                // console.log(itemTxt);
                // 	for (var j=0; j<data.ga_columns.length; j++) {
                // 		if (itemTxt == data.ga_columns[j].value) {
                // 			success.data[i].lawEnforcementItem = data.ga_columns[j].text;
                // 			break;
                // 		}
                // 	}
                // setLinkageItem(success.data[i].lawEnforcementItem,success.data[i]);
            // }


        }, error => {

        })
    }

    const onSearch = (val) => {
        searchParam.dateSearch = null;
        queryRegistrationList(
            {
                "searchValue": searchParam.searchValue
            }
            , success => {
                data.dataList = success.data;
            }, error => {

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

    const toEditView = (item) => {
        router.push(
            {
                path: "/registrationEdit",
                query: {
                    enterpriseNumber: item.enterpriseNumber,
                    reason: item.enforce,
                    checkCss: item.checkCss,
                    isNoScan: null == item.isNoScan || "" == item.isNoScan ? false : true,
                }
            });
        // router.push(
        //     {
        //         path: "/registrationEdit",
        //         query: {
        //             id: id
        //         }
        //     });
    }
    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;
    };

    const selectDate = () => {
        data.checkNum = 9
        data.showDatePicker = true;
    }

    const onDateConfirm = (value) => {
        data.dateSearch = value.selectedValues[0] + "/" + value.selectedValues[1];
        data.showDatePicker = false;

        //日期搜索条件
        searchParam.dateSearch = value.selectedValues[0] + "-" + value.selectedValues[1];
        //取消投诉
        searchParam.isComplaint = null;
        searchParam.dateType = null;
        data.dateShow = true;

        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) => {
        data.checkNum = val;
        searchParam.dateSearch = null;
        searchParam.dateType = val;
        searchParam.isComplaint = null;
        data.dateShow = false;

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

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

    /**
     * 查看执法登记详情
     * @param {} id
     * @param {*} name
     */
    const toDetailView = (id) => {
        router.push(
            {
                path: "/registrationDetail",
                query: {
                    id: id,
                }
            });
    }
    const setLinkageItem = (id, item) => {
        queryLinkageById({"id": id}, success => {
            item.lawEnforcementItem = success.title
            data.dataList.push(item);
        }, error => {
        });
    }
</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 {
            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.1rem 0 0.2rem;
                    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%;
                        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;
            }
        }
    }

    .shop .shop-center .goods_box .card_box .card_box_action {
        /*position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        background-color: rgba(46, 119, 249, .15);
        border-radius: 0.27rem;*/
    }

    .shop .shop-center .goods_box .card_box .card_box_action span {
        position: absolute;
        right: 0.2rem;
        top: 1.2rem;
        width: 1.25rem;
        height: 0.6rem;
        background: #1989fa;
        border-radius: 30px;
        box-shadow: 0 0 5px rgba(5, 99, 193, .3)
    }

    .shop .shop-center .goods_box .card_box .card_box_action span button {
        position: absolute;
        top: 0.1rem;
        left: 0.2rem;
        height: 70%;
        font-size: 0.3rem;
    }

    .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 {
            position: absolute;
            top: 1%;
            right: 3%;
            width: 15%;
            height: 100%;
            font-size: 0.3rem;
        }
    }

    /deep/ .van-hairline--bottom {
        margin: -1% 0 3% 0;
        height: 0;
        background-color: transparent;
        border: 1px;
    }

    /deep/ .card_box_span:first-child p {
        color: #c1bfbf !important;
    }

    .card-title p {
      display: block !important;
        color: #000;
        font-size: 0.40rem;
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .card_box_label {
        color: #323233;
        white-space: nowrap;
    }

    .remsty {
        position: absolute;
        top: 0;
        right: 0;
        margin: 0.25rem 0.25rem 0;
        padding-left: 0.5rem;
        background: url(/src/assets/images/icon_remind.png) no-repeat left center;
        background-size: auto 80%;
        font-size: 0.35rem;
    }

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

    .addbg {
        background: linear-gradient(90deg, rgba(251, 77, 7, .1) 20%, #fff);
        border-left: 0.08rem solid #fb740d;
    }

    .btn-list {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin: 0.3rem 3% 0;
        width: 94%;
        border-top: 1px solid #f4f5f6;
    }

    .btn-list a {
        margin: 3% 3% 1%;
        font-size: 0.35rem;
        color: #1367fe;
        white-space: nowrap;
    }

    .btn-list a i {
        margin: 0 0.12rem;
        font-size: 0.4rem;
    }
</style>