apply-assistant-v3/root/person/todayData.vue

<template>
	<view class="g_fs_16 g_pb_32">
		<view class="g_border_e_b">
			<u-tabs bg-color="#fff" from="index" :list="tabInfo.list" :is-scroll="false" :current="tabInfo.active" :active-color="globalData.themeColor" bar-width="64" bar-height="6" @change="handleUpdateTab" font-size="32" duration="0.05" height="76"></u-tabs>
		</view>
		<view v-if="tabInfo.active == 1">
			<u-tabs bg-color="#fff" from="index" :list="tabInfo.list[tabInfo.active].children.list" :current="tabInfo.list[tabInfo.active].children.active" :active-color="globalData.themeColor" bar-width="64" bar-height="6" @change="onTabClick" font-size="32"></u-tabs>
		</view>
		<view class="g_flex_row_between flex_center g_p_10 g_fs_16">
			<view class="g_flex_row_start">
				<view v-for="item in dateList.list" :key="item.value" class="g_mr_20" :class="dateList.active == item.value ? 'g_c_main' : ''" @click="changeDate(item)">{{ item.name }}</view>
			</view>
			<view class="g_text_u g_bg_f g_radius_8 g_p_8" :class="dateList.active == -1 && dateList.popActive == -1 ? 'g_c_main' : ''" @click="customDateShow = true">自定义</view>
		</view>
		<view class="g_bg_f g_ml_10 g_mr_10 g_radius_8" v-if="dataList.length > 0">
			<view class="tableTitle g_fs_16">
				<view class="show_all" style="width: 100px">姓名</view>
				<view class="g_flex_1 g_flex_row_between">
					<view class="dataNum">报名</view>
					<view class="dataNum">到面</view>
					<view class="dataNum">通过</view>
					<view class="dataNum">入职</view>
					<view class="dataNum leftLine">
						在职
						<!-- <i class="t-icon t-icon-zhuyi f14" @click="showToast"></i> -->
					</view>
				</view>
			</view>
			<view class="tableSub g_fs_16" v-for="(item, index) in dataList" :key="index">
				<view class="g_text_l show_all" style>{{ index * 1 + 1 + " " }}{{ item.aliasName || item.agencyTeamName }}</view>
				<view class="dataNum" hover-class="thover" @click="toDataDetail(item, 10)">{{ item.signUps }}</view>
				<view class="dataNum" hover-class="thover" @click="toDataDetail(item, 20)">{{ item.arrived }}</view>
				<view class="dataNum" hover-class="thover" @click="toDataDetail(item, 30)">{{ item.passed }}</view>
				<view class="dataNum" hover-class="thover" @click="toDataDetail(item, 40)">{{ item.entry }}</view>
				<view class="dataNum" hover-class="thover" @click="toDataDetail(item, 50)">{{ item.obJob }}</view>
			</view>

			<view class="tableSub g_fw_600 g_fs_16">
				<view class="show_all g_pl_12" style="width: 100px; box-sizing: border-box">总计</view>
				<view class="g_text_c g_flex_1">{{ totalObj.signUps }}</view>
				<view class="g_text_c g_flex_1">{{ totalObj.arrived }}</view>
				<view class="g_text_c g_flex_1">{{ totalObj.passed }}</view>
				<view class="g_text_c g_flex_1">{{ totalObj.entry }}</view>
				<view class="g_text_c g_flex_1">{{ totalObj.obJob }}</view>
			</view>
		</view>
		<u-popup v-model="showPop" mode="bottom" uZindex="9999" border-radius="12" @close="showPop = false" :mask-close-able="true">
			<view class="g_pb_32">
				<view v-for="(item, index) in dateList.popList" :key="item.value" class="g_mr_20 g_text_c g_p_16" :class="[dateList.popActive == item.value ? 'g_c_main' : '', index > 0 ? 'g_border_e_t' : '']" @click="changeDate(item)">{{ item.name }}</view>
			</view>
		</u-popup>
		<u-popup v-model="customDateShow" mode="bottom" uZindex="9999" border-radius="12" @close="customDateShow = false" :mask-close-able="true">
			<view class="g_flex_row_center flex_center dateSelect"  >
				<view class="g_flex_row_start flex_center g_border_d g_radius_8 g_p_10">
					<picker mode="date" :value="startTime" :end="notAllowTime" @change="changeDateTime($event, 'start')" style="color: #333">{{ !!startTime ? startTime : "----" }}</picker>
					<i class="iconfont icon-rili g_fs_16 g_ml_10 g_c_9" style="line-height: 1"></i>
				</view>
				<view class="g_ml_8 g_mr_8"> - </view>
				<view class="afterDate g_flex_row_start flex_center g_border_d g_radius_8 g_p_10">
					<picker mode="date" :value="endTime" :end="notAllowTime" @change="changeDateTime($event, 'end')" style="color: #333">{{ !!endTime ? endTime : "----" }}</picker>
					<i class="iconfont icon-rili g_fs_16 g_ml_10 g_c_9" style="line-height: 1"></i>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import updateLocale from "dayjs/plugin/updateLocale"; //
import localeData from "dayjs/plugin/localeData"; // 这个是可以查看国际化语言配置的插件，

dayjs.extend(updateLocale);
dayjs.extend(localeData);
dayjs.locale("zh-cn");
dayjs.updateLocale("zh-cn", {
	weekStart: 1, // 配置为周一
});
export default {
	onLoad() {
		this.getGroupList();
	},
	data() {
		return {
			globalData: getApp().globalData,
			dataList: [], // 数据列表
			totalObj: {}, // 数据总计
			currentGroup: {},
			startTime: dayjs().format("YYYY-MM-DD"),
			endTime: dayjs().format("YYYY-MM-DD"),
			notAllowTime: dayjs().format("YYYY-MM-DD"),
			tabInfo: {
				list: [
					{
						name: "全部成员",
						tip: "1",
					},
					{
						name: "团队排序",
						tip: "2",
						children: {
							list: [],
							active: 0,
						},
					},
				],
				active: 0,
			},
			dateList: {
				list: [
					{
						name: "今日",
						value: 6,
						type: "list",
					},
					{
						name: "本周",
						value: 2,
						type: "list",
					},
					{
						name: "本月",
						value: 4,
						type: "list",
					},
					{
						name: "更多",
						value: 8,
						type: "list",
					},
				],
				popList: [
					{
						name: "昨日",
						value: 7,
						type: "popList",
					},
					{
						name: "上周",
						value: 3,
						type: "popList",
					},
					{
						name: "上月",
						value: 5,
						type: "popList",
					},
					{
						name: "近7日",
						value: 0,
						type: "popList",
					},
					{
						name: "近30日",
						value: 1,
						type: "popList",
					},
				],
				active: 6,
				popActive: -1,
			},
			showPop: false,
			customDateShow: false,
		};
	},

	methods: {
		handleUpdateTab(e) {
			this.tabInfo.active = e;
			this.getGroupList("all");
		},
		formatDate(tag) {
			let start, end;
			console.log("tag", tag);
			let today = dayjs();
			if (tag == 0) {
				// 7天前
				start = today.subtract(6, "day").format("YYYY-MM-DD");
				end = today.format("YYYY-MM-DD");
			} else if (tag == 1) {
				// 30天前
				start = today.subtract(29, "day").format("YYYY-MM-DD");
				end = today.format("YYYY-MM-DD");
			} else if (tag == 2) {
				// 本周
				start = today.startOf("week").format("YYYY-MM-DD");
				end = today.format("YYYY-MM-DD");
			} else if (tag == 3) {
				// 上周
				start = today.subtract(1, "week").startOf("week").format("YYYY-MM-DD");
				end = today.subtract(1, "week").endOf("week").format("YYYY-MM-DD");
				// return
			} else if (tag == 4) {
				// 本月
				start = today.startOf("month").format("YYYY-MM-DD");
				end = today.format("YYYY-MM-DD");
			} else if (tag == 5) {
				// 上月
				start = today.subtract(1, "month").startOf("month").format("YYYY-MM-DD");
				end = today.subtract(1, "month").endOf("month").format("YYYY-MM-DD");
			} else if (tag == 6) {
				// 今日
				start = today.format("YYYY-MM-DD");
				end = today.format("YYYY-MM-DD");
			} else if (tag == 7) {
				// 昨日
				start = today.subtract(1, "day").format("YYYY-MM-DD");
				end = today.subtract(1, "day").format("YYYY-MM-DD");
			}
			this.startTime = start;
			this.endTime = end;
			console.log(start);
			console.log(end);
			this.getGroupList();
		},
		changeDate(_item) {
			if (_item.value != 8) {
				this.dateList.active = -1;
				this.dateList.popActive = -1;
			}
			if (_item.type == "list") {
				if (_item.value != 8) {
					this.dateList.active = _item.value;
					this.dateList.list[3].name = "更多";
					this.formatDate(this.dateList.active);
				} else {
					this.showPop = true;
				}
			} else {
				this.dateList.list[3].name = _item.name;
				this.dateList.popActive = _item.value;
				this.dateList.active = 8;
				this.formatDate(this.dateList.popActive);
				this.showPop = false;
			}
		},
		changeDateTime(e, type) {
			console.log(e);
			if (type == "start") {
				this.startTime = e.detail.value;
			} else if (type == "end") {
				this.endTime = e.detail.value;
			}
			let time1 = new Date(this.startTime).getTime();
			let time2 = new Date(this.endTime).getTime();
			console.log(time1);
			console.log(time2);
			if (time1 > time2) {
				uni.showToast({
					duration: 2000,
					title: "结束时间不能早于开始时间",
					mask: true,
					icon: "none",
				});
				return;
			}
			this.dateList.active = -1;
			this.dateList.popActive = -1;
			this.dateList.list[3].name = "更多";
			this.getGroupList();
			// this.getDataList();
		},
		/**
		 * 详情跳转
		 */
		toDataDetail(_item, _type) {
			let info = _item;
			let type = _type;
			console.log(type);
			console.log(info);
			let nav = true;
			switch (type) {
				case 10:
					nav = _item.signUps == 0 ? false : true;
					break;
				case 20:
					nav = _item.arrived == 0 ? false : true;
					break;
				case 30:
					nav = _item.passed == 0 ? false : true;
					break;
				case 40:
					nav = _item.entry == 0 ? false : true;
					break;
				case 50:
					nav = _item.obJob == 0 ? false : true;
					break;
			}
			if (nav) {
				let data = { userId: info.id, type, start: this.startTime, end: this.endTime, agencyTeamId: info.agencyTeamId };
				console.log(data);

				uni.navigateTo({
					url: "/root/person/dataDetail?info=" + JSON.stringify(data),
				});
			} else {
				uni.showToast({
					title: "该数据为空,没有详情",
					icon: "none",
				});
			}
			// console.log(e.currentTarget.dataset.info);
			// console.log(JSON.parse(e.currentTarget.dataset.info));
		},
		/**
		 * 获取团队列表
		 */
		getGroupList() {
			let that = this;
			uni.showLoading({
				title: "加载中",
				mask: true,
			});
			that.G.Post(that.api.merchantManagement_todayData, { start: this.startTime, end: this.endTime }, (res) => {
				console.log("merchantManagement_todayData", res);
				let list = res.list;
				// res.list.forEach((item) => {
				// 	list = list.concat(item.users);
				// });

				console.log(list);
				let totalObj = {
					arrived: 0,
					entry: 0,
					obJob: 0,
					passed: 0,
					signUps: 0,
					finshedGPA: 0,
					entryGPA: 0,
				};
				list.forEach((item, index) => {
					console.log(item);
					totalObj.arrived += item.arrived;
					totalObj.entry += item.entry;
					totalObj.obJob += item.obJob;
					totalObj.passed += item.passed;
					totalObj.signUps += item.signUps;
					totalObj.finshedGPA += item.finshedGPA;
					totalObj.entryGPA += item.entryGPA;
					totalObj.index = index + 2;
				});
				that.totalObj = totalObj;
				console.log("totalObj", totalObj);
				let newList = [];
				list.forEach((item, index) => {
					newList = newList.concat(item.users);
				});
				console.log("newList", newList);
				that.tabInfo.list[1].children.list = that.G.fullCopy(list);

				that.tabInfo.list[1].children.list.forEach((item) => {
					item.name = item.agencyTeamName;
				});
				that.tabInfo.list[1].children.list.unshift({
					name: "全部部门",
				});
				if (that.tabInfo.active != 0) {
					that.dataList = that.G.fullCopy(list);
					if (JSON.stringify(that.currentGroup) != "{}") {
						that.selectGroup(that.currentGroup);
					}
				} else {
					newList.sort((a, b) => b.funnel - a.funnel);
					that.dataList = that.G.fullCopy(newList);
				}
				console.log("that.dataList", that.dataList);

				uni.hideLoading();
			});
		},
		/**
		 * 团队排序的分组点击
		 */
		onTabClick(e) {
			let that = this;
			console.log(e);
			this.tabInfo.list[1].children.active = e;
			if (e != 0) {
				let val = that.tabInfo.list[1].children.list[e];
				this.selectGroup(val);
			} else {
				this.selectGroup("all");
			}
		},
		selectGroup(val) {
			console.log("val", val);
			console.log("typeof val", typeof val);
			if (typeof val == "object") {
				this.currentGroup = val;
				this.tabInfo.list[1].children.list.forEach((item) => {
					console.log("groupDataList", item);
					console.log();
					if (item.agencyTeamId == val.agencyTeamId) {
						this.dataList = item.users;
						this.totalObj.arrived = 0;
						this.totalObj.entry = 0;
						this.totalObj.obJob = 0;
						this.totalObj.passed = 0;
						this.totalObj.signUps = 0;
						this.totalObj.finshedGPA = 0;
						this.totalObj.entryGPA = 0;
						this.dataList.forEach((item1) => {
							this.totalObj.arrived += item1.arrived;
							this.totalObj.entry += item1.entry;
							this.totalObj.obJob += item1.obJob;
							this.totalObj.passed += item1.passed;
							this.totalObj.signUps += item1.signUps;
							this.totalObj.finshedGPA += item1.finshedGPA;
							this.totalObj.entryGPA += item1.entryGPA;
						});
					}
				});
				this.dataList.sort((a, b) => b.funnel - a.funnel);
				console.log(this.dataList);
			} else {
				this.currentGroup = {};
				this.getGroupList();
			}
		},
	},
};
</script>

<style lang="less" scoped>
page {
	background-color: #f5f5f5;
}
.tableTitle {
	display: flex;
	text-align: center;
	justify-content: space-between;
	align-items: center;
	padding: 12px 20px;
	// padding-right: 24px;
}
.tableSub {
	display: flex;
	text-align: center;
	justify-content: space-between;
	align-items: center;
	padding: 12px;
	border-top: 1px solid #f5f5f5;
	/* overflow: hidden; */
	.dataNum {
		/* padding-left: 8px; */
		flex: 1;
		text-align: center;
		color: #576b95;
		text-decoration: underline;
	}
}
.show_all {
	width: 100px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: left;
}
.leftLine {
	position: relative;
	&:after {
		content: "";
		position: absolute;
		left: -8px;
		top: 3px;
		width: 1px;
		height: 18px;
		background-color: #ddd;
	}
}
.dateSelect {
	padding: 30px 20px 60px;
}
</style>