uniProject/pages/admin/Kaoshi/checkList.vue

<template>
	<view class="phone-kscx-page">
		<view class="icon-title-navBar-box">
			<view @click="goUpPage" class="nav-bar-icon"></view>
			<text class="nav-bar-title">考试查询</text>
		</view>
		<view class="jiazheng-search-box">
			<uni-datetime-picker v-model="data.range" type="daterange" @change="onDateSelect" style="flex: 1" start-placeholder="录入开始时间" end-placeholder="录入结束时间"
				class="yishou-date-box" />
		</view>
		<view class="no-data-tip-box" v-if="!(data.showA || data.showB || data.showC || data.showD)">请选择时间段进行查询</view>
		<view v-show="data.showA||data.showB||data.showC||data.showD" class="phone-head-tab-box kscx-tab-box">
			<view class="tab-item-box" :class="{active: data.showA}" @click="handleShow(1)">需要考试:{{data.listA.length}}</view>
			<view class="tab-item-box" :class="{active: data.showB}" @click="handleShow(2)">考试通过:{{data.listB.length}}</view>
			<view class="tab-item-box" :class="{active: data.showC}" @click="handleShow(3)">考试未通过:{{data.listC.length}}</view>
			<view class="tab-item-box" :class="{active: data.showD}" @click="handleShow(4)">未考试:{{data.listD.length}}</view>
		</view>

		<view v-show="data.showA" class="kscx-body-box">
			<view class="kscx-card-list">
				<view v-for="item in data.listA" :key="item.userName" class="kscx-card-box">
					<view class="kscx-card-row"><icon class="user-icon"></icon>{{item.realName}}</view>
					<view class="kscx-card-row"><icon class="tel-icon"></icon>{{item.userName}}</view>
					<view class="kscx-card-row"><icon class="idcard-icon"></icon>职业名称：{{item.zyName}}</view>
					<view class="kscx-card-row"><icon class="zy-icon"></icon>职业等级：{{item.zyLevel}}</view>
					<view class="kscx-card-row"><icon class="bzjg-icon"></icon>办证机构：{{item.jgName}}</view>
          <view class="kscx-card-row"><icon class="data-icon"></icon>录入时间：{{item.createTime}}</view>
				</view>
			</view>
		</view>
		<view v-show="data.showB" class="kscx-body-box">
			<view class="kscx-card-list">
				<view v-for="item in data.listB" :key="item.userName" class="kscx-card-box">
					<view class="kscx-card-row"><icon class="user-icon"></icon>{{item.realName}}</view>
					<view class="kscx-card-row"><icon class="tel-icon"></icon>{{item.userName}}</view>
					<view class="kscx-card-row"><icon class="idcard-icon"></icon>职业名称：{{item.zyName}}</view>
					<view class="kscx-card-row"><icon class="zy-icon"></icon>职业等级：{{item.zyLevel}}</view>
					<view class="kscx-card-row"><icon class="bzjg-icon"></icon>办证机构：{{item.jgName}}</view>
          <view class="kscx-card-row"><icon class="data-icon"></icon>录入时间：{{item.createTime}}</view>
				</view>
			</view>
		</view>
		<view v-show="data.showC" class="kscx-body-box">
			<view class="kscx-card-list">
				<view v-for="item in data.listC" :key="item.userName" class="kscx-card-box">
					<view class="kscx-card-row"><icon class="user-icon"></icon>{{item.realName}}</view>
					<view class="kscx-card-row"><icon class="tel-icon"></icon>{{item.userName}}</view>
					<view class="kscx-card-row"><icon class="idcard-icon"></icon>职业名称：{{item.zyName}}</view>
					<view class="kscx-card-row"><icon class="zy-icon"></icon>职业等级：{{item.zyLevel}}</view>
					<view class="kscx-card-row"><icon class="bzjg-icon"></icon>办证机构：{{item.jgName}}</view>
          <view class="kscx-card-row"><icon class="data-icon"></icon>录入时间：{{item.createTime}}</view>
				</view>
			</view>
		</view>
		<view v-show="data.showD" class="kscx-body-box">
			<view class="kscx-card-list">
				<view v-for="item in data.listD" :key="item.userName" class="kscx-card-box">
					<view class="kscx-card-row"><icon class="user-icon"></icon>{{item.realName}}</view>
					<view class="kscx-card-row"><icon class="tel-icon"></icon>{{item.userName}}</view>
					<view class="kscx-card-row"><icon class="idcard-icon"></icon>职业名称：{{item.zyName}}</view>
					<view class="kscx-card-row"><icon class="zy-icon"></icon>职业等级：{{item.zyLevel}}</view>
					<view class="kscx-card-row"><icon class="bzjg-icon"></icon>办证机构：{{item.jgName}}</view>
          <view class="kscx-card-row"><icon class="data-icon"></icon>录入时间：{{item.createTime}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import * as httpApi from "@/api/zijiazhenggongsi"
	import {
		reactive,
		ref
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app"
  import {toast} from "../../../utils/common";

	const data = reactive({
		list: [], // 办证列表
		range: [],
		showA: false,
		showB: false,
		showC: false,
		showD: false,
		listA: [],
		listB: [],
		listC: [],
		listD: [],
	})

	function onDateSelect(data1) {

    if (!data1[0] || !data1[1]) {
      data.listA = [];
      data.listB =  [];
      data.listC = [];
      data.listD = [];
      data.showA = false;
      data.showB = false;
      data.showC = false;
      data.showD = false;
      toast('请选择录入时间')
      return;
    }


		data.range = data1;
		httpApi.getKzchaxunInfo({
			endDate: data.range[1],
			startDate: data.range[0]
		}).then(res => {
			data.listA = res.data.list;
			data.listB = res.data.ytgList;
			data.listC = res.data.wtgList;
			data.listD = res.data.wksList;

			data.showA = true;
			data.showB = false;
			data.showC = false;
			data.showD = false;
		})
	}

	function handleShow(code) {
		if (code == 1) {
			data.showA = true;
			data.showB = false;
			data.showC = false;
			data.showD = false;
		}
		if (code == 2) {
			data.showA = false;
			data.showB = true;
			data.showC = false;
			data.showD = false;
		}
		if (code == 3) {
			data.showA = false;
			data.showB = false;
			data.showC = true;
			data.showD = false;
		}
		if (code == 4) {
			data.showA = false;
			data.showB = false;
			data.showC = false;
			data.showD = true;
		}
	}

	function goUpPage() {
		uni.redirectTo({
			url: `/pages/admin/ShouYe/shouye`
		})
	}
</script>

<style>

</style>