zdxtLawEnforcementCodeView/src/views/enterprise/enterpriseInspectionList.vue

<template>
	<div class="shop app_content">
		<!-- 导航栏 -->
		<div class="header_body">
      <header-nav :leftArrow="false" titelText="行政检查通知"></header-nav>
		</div>
    <van-search
    v-model="searchParam.searchValue"
    show-action
    placeholder="请输入关键字查询"
    @search="onSearch"
    >
      <template #action>
        <div  @click="onClickButton">搜索</div>
      </template>
    </van-search>
    
    
    <!-- 顶部弹出 -->
    <van-popup v-model:show="data.showTop" position="top" :style="{ height: '30%' }" >
      <van-cell-group>
        <van-field
          v-model="searchParam.beginTime"
          label="时间范围"
          @click=""
          readonly
        />
      </van-cell-group>
    </van-popup>
    <div class="search-button-list">
      <van-button plain hairline class="search-button" @click="searchDateType()" round type="primary" size="mini">全部</van-button>
      <van-button plain hairline class="search-button" @click="searchDateType(1)" round type="primary" size="mini">本月</van-button>
      <van-button plain hairline class="search-button" @click="searchDateType(2)" round type="primary" size="mini">本季度</van-button>
      <van-button plain hairline class="search-button" @click="searchDateType(3)" round type="primary" size="mini">本年度</van-button>
      <van-button plain hairline class="search-button" @click="searchFilter" round type="primary" size="mini">筛选</van-button>
    </div>
    <div class="search-button-date">
      <span class="date-select" @click="selectDate">{{  data.dateSearch }}</span>
      <div style="border-color: black;" class="van-hairline--bottom"></div>
      <van-button class="search-button"  type="primary" size="mini">统计分析</van-button>
      <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">
			<lodding-card :isLodding="isLodding">
				<refresh-list v-model:freshMap="freshMap" :classMap="classMap" @refresh="onRefresh" @onLoad="onLoad"
						:resetScroll="resetScroll" class="refresh_box">
					<div class="refresh_content" v-if="data?.dataList.length">
						<div class="goods_box" v-for="(item, index) in data?.dataList" :key="index">
							<van-swipe-cell class="swipe_cell">
								<div class="card_box">
                  <div class="card_box_span">
                    <p>执法时间：{{ item.createTime }} <span class="card_box_action">
                      <!-- <van-button @click="toComplaintView(item.id,item.lawEnforcementIncident)" type="primary" size="mini">投诉</van-button> -->
                    </span></p>
                  </div>
                  <!-- <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa',padding: '0 5px' }" /> -->
                  <div  style="border-color: aqua; border: 2px;" class="van-hairline--bottom"></div>
                  <div class="card_box_span">
                    <p style="font-size: 16px;font-weight: bold;">{{ item.checkItem }}</p>
                  </div>
                  
                  <div class="card_box_span">
                    <p><span class="card_box_label">登记编号：</span> {{ item.lawEnforcementCode }}</p>
                  </div>
                  <div class="card_box_span">
                    <p><span class="card_box_label">执法部门：</span> {{ item.lawEnforcement }}</p>
                  </div>
                  <div class="card_box_span">
                    <p><span class="card_box_label">企业名称：</span> {{ item.enterpriseName }}</p>
                  </div>
								</div>
							</van-swipe-cell>
						</div>
					</div>
					<van-empty v-else class="no_data" description="暂无数据" />
				</refresh-list>
			</lodding-card>
		</div>

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

<script setup name="registrationList">
import { showToast } from "vant"; 
import {queryEnforcementList} from '../../api/enterprise';
import { setGoodsNum } from "@/util/util";
const { useCommon, useShopCard } = $globalStore;

const router = useRouter();
let allchecked = ref(false); // 是否全选
let refreshLoad = ref(false); // 是否加载中
let value = ref('')
let totalPrice = ref(0); // 总钱数

let searchParam = reactive({
  //执法事件
  lawEnforcementIncident:"",
  //执法部门
  lawEnforcement:"",
  //搜索框
    searchValue: ref(''),
  //时间类型 
  dateType: null,
  //是否投诉
  isComplaint: null,
  //企业统一信用码
  enterpriseNumber: ref(useCommon.enterpriseNumber),
  //查询日期
  searchDate:null,
  beginTime:"",
  endTime:""

});

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'],
  showTop:false,
});

 // 设置初始值为当前时间
onMounted(() => {
  console.log(useCommon.enterpriseNumber);
	// getCard();
  searchParam.enterpriseNumber = useCommon.enterpriseNumber;
  console.log(useCommon.enterpriseNumber)
  queryList();
  data.dateSearch = nowDate(new Date());
});
const queryList = () =>{
  queryEnforcementList(searchParam,success =>{
    console.log(success)
    data.dataList = success.data;
  },error =>{

  })
}

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

  })
};
const onClickButton = () =>{
  console.log(searchParam.searchValue)
  queryList();
}

const toComplaintView = (id,name) =>{
  console.log(id,name)
  router.push(
        { 
          path: "/enterprise/complaint",
          query: {
            id: id,
            lawEnforcementIncident: name
            } 
      });
}
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 = () => {
	freshMap.listFinished = false;
	freshMap.listLoading = true;
	getGoodslist();
};

// 触底加载
const onLoad = () => {
	freshMap.listFinished = true;
	getGoodslist(true);
};



//获取分类下的商品列表
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();
  isLodding.value = false;
});

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];
      searchParam.searchDate = value.selectedValues[0] + "-" + value.selectedValues[1];
      data.showDatePicker = false;
      //查询数据
      queryList();
}
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;
  queryList();
}
const searchFilter = () =>{
  data.showTop =  true;
  queryList();
}
const searchComplaint = (val) =>{
  searchParam.isComplaint =  val;
  searchParam.dateType =  null;
  queryList();
}
</script>

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

	.header_body {
		height: 50px;
	}

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

		.goods_box {
			display: flex;
			background-color: #fff;
			margin: 6px;
			border-radius: 10px;

			.swipe_cell {
				width: 100%;
			}

			.card_box {
				display: flex;
				width: 100%;
        padding: 10px,0px;
        flex-direction: column;
				.card_body {
					background-color: #fff;
					border-radius: 10px;
					flex: 1;
				}
        .card_box_span{
          font-size: 13px;
          padding-left: 5%;
          height: 35px;
          align-items: center;
          display: flex;
          align-items: center;
        }
        .card_box_action{
          position: absolute;
          right: 4%;
        }
			}
		}
	}

	.shop_footer_body {
		height: 101px;
		position: relative;
		.footer-one-btn {
			height: 50px;
			bottom: 51px;
		}
	}
}

.search-button-list{
    height: 3%;
    display: flex;
    flex-direction: row;
    padding-left: 10px;
    margin-top: 6px;
    align-items: end;
    .search-button{
        width: 15%;
        height: 80%;
    }
}
.search-button-date{
    height: 3%;
    display: flex;
    flex-direction: row;
    padding-left: 10px;
    margin-top: 6px;
    align-items: end;
    position: relative;
    .date-select{
      font-size: 20px;
      margin-left: 2%;
    }
    .search-button{
        width: 15%;
        height: 80%;
        position: absolute;
        top: 1%;
        right: 1%;
    }
}

</style>