jhlapp/pagesT/statement/VisitRepor.vue

<template>
	<view>
		<view class="home">
			<view class="search-icon" @click="openSearch"><text class="custom-icon custom-icon-shaixuan"></text></view>
			<view class="charts-box"><qiun-data-charts type="column" :echartsH5="true" :echartsApp="true" :chartData="chartData" background="none" :animation="false" /></view>
		</view>
		<view class="top-view">
			<view class="thead">
				<view class="flex1 sort-li">#</view>
				<view class="flex1 staff-li">员工</view>
				<view class="flex1 cutomer-li">部门</view>
				<view class="flex1 phone-li">客户数</view>
				<view class="flex1 phone-li2">订单数</view>
				<view class="flex1 phone-li3">下单金额</view>
				<view class="flex1 phone-li4">跟进次数</view>
			</view>
			<scroll-view class="cont-ul" scroll-y="true">
				<view class="flex" v-for="(item, index) in goods_list" :key="index">
					<view class="flex1 sort-li">{{ item.staffId }}</view>
					<view class="flex1 staff-li">{{ item.staffName }}</view>
					<view class="flex1 cutomer-li">{{ item.departmentName }}</view>
					<view class="flex1 phone-li">{{ item.customerNum }}</view>
					<view class="flex1 phone-li2">{{ item.customerOrderNum }}</view>
					<view class="flex1 phone-li3">{{ item.customerOrderAmount }}</view>
					<view class="flex1 phone-li4" ><u-button @click="goPage(`/pagesT/statement/VisitReporDetails?id=${item.staffId}&name=${item.staffName}`)" type="primary" size="mini">{{ item.num }}</u-button></view>
				</view>
				<u-loadmore :status="load_status" :load-text="loadText" @loadmore="loadmoreData" />
			</scroll-view>
		</view>
		<u-popup v-model="search_show" mode="right">
			<view class="search-pop">
				<view class="form-view">
					<u-form label-width="160rpx" label-position="left">
						<u-form-item label-position="top" label="下单日期">
							<view class="date-li">
								<picker mode="date" @change="bindDateStartChange">
									<text class="date-li">{{ search_data.start ? $u.timeFormat(search_data.start, 'yyyy-mm-dd') : '开始日期' }}</text>
								</picker>
							</view>
							<view class="date-line">-</view>
							<view class="date-li">
								<picker mode="date" @change="bindDateEndChange">
									<text class="date-li">{{ search_data.end ? $u.timeFormat(search_data.end, 'yyyy-mm-dd') : '结束日期' }}</text>
								</picker>
							</view>
						</u-form-item>
						<u-form-item label="部门">
							<view class="clearfix form-val" @click="openSel('cate_show')">
								<text class="float_left ellipsis">{{ search_data.department_name ? search_data.department_name : '请选择' }}</text>
								<view class="float_right"><u-icon :name="!search_data.departmentId ? 'arrow-right' : 'close-circle-fill'" size="28" color="#999999"></u-icon></view>
							</view>
						</u-form-item>
					</u-form>
				</view>
				<view class="search-btn">
					<view class="btn-li" @click="clearValue()">重置</view>
					<view class="btn-li" @click="searchConfirm">确定</view>
				</view>
			</view>
		</u-popup>
		<tki-tree style="z-index: 99;" ref="tkitree" :selectParent="true" :range="cate_list" rangeKey="title" @confirm="cateConfirm"></tki-tree>
	</view>
</template>

<script>
import tkiTree from '@/components/tki-tree/tki-tree.vue';
export default {
	components: {
		tkiTree
	},
	data() {
		return {
			loadText: {
				loadmore: '点击加载更多',
				loading: '努力加载中',
				nomore: '没有更多了'
			},
			chartData: {
				categories: [],
				series: []
			},
			page: 1,
			pageSize: 10,
			total: 0,
			goods_list: {},
			load_status: 'nomore',
			search_show: false,
			search_data: {
				start: '',
				end: '',
				department_name: '',
				departmentId: ''
			},
			cate_list: []
		};
	},
	onLoad() {
		this.getCustomerCallOnReportForm();
		this.getAllDepartment();
	},
	onPullDownRefresh() {
		this.page = 1;
		this.getCustomerCallOnReportForm();
	},
	methods: {
		loadmoreData() {
			if (this.total / this.pageSize > this.page) {
				this.page += 1;
				this.getCustomerCallOnReportForm();
			}
		},
		openSearch() {
			this.search_show = true;
		},
		getCustomerCallOnReportForm() {
			this.load_status = 'loading';
			this.$u.api
				.getCustomerCallOnReportForm({
					page: this.page,
					pageSize: this.pageSize,
					departmentId: this.search_data.departmentId,
					start: this.search_data.start,
					end: this.search_data.end
				})
				.then(res => {
					uni.stopPullDownRefresh();
					if (this.page === 1) {
						this.goods_list = res.data;
					} else {
						this.goods_list = this.goods_list.concat(res.data);
					}
					this.total = res.pageTotal;
					this.load_status = this.$utils.loadStatus(this.page, this.pageSize, this.total);
					const staffName = [];
					const orderNum = [];
					this.$nextTick(() => {
						res.data.forEach(value => {
							staffName.push(value.staffName);
							orderNum.push(Number(value.num));
						});
						this.setChartData(staffName, orderNum);
					});
				})
				.catch(err => {
					console.log(err);
				});
		},
		setChartData(staffName, orderNum) {
			this.chartData = {
				categories: staffName,
				series: [
					{
						name: '客户数量',
						data: orderNum
					}
				]
			};
		},
		bindDateStartChange(e) {
			this.search_data.start = this.$utils.timeByTimestamp(e.detail.value + ' 00:00:00');
		},
		bindDateEndChange(e) {
			this.search_data.end = this.$utils.timeByTimestamp(e.detail.value + ' 23:59:59');
		},
		getAllDepartment() {
			this.$u.api.getAllDepartment().then(res => {
				// this.list = this.reduceList(res.data);
				this.cate_list = res.data;
			});
		},
		openSel(key) {
			if (key === 'cate_show') {
				this.$refs.tkitree._show();
				return;
			}
		},
		cateConfirm(arr) {
			this.search_data.department_name = arr[0].title;
			this.search_data.departmentId = [arr[0].id];
		},
		clearValue() {
			this.search_data = {
				start: '',
				end: '',
				department_name: '',
				departmentId: ''
			};
			this.searchConfirm();
		},
		searchConfirm() {
			this.search_show = false;
			this.page = 1;
			this.getCustomerCallOnReportForm();
		}
	}
};
</script>

<style lang="scss" scoped>
.charts-box {
	width: 730rpx;
	height: 550rpx;
	margin: 0 auto;
}

.home {
	position: relative;
	padding-top: 50rpx;
	.search-icon {
		position: absolute;
		right: 30rpx;
		top: 20rpx;
		width: 80rpx;
		height: 80rpx;
		text-align: center;
		z-index: 1;
	}
}

.top-view {
	width: 100%;
	z-index: 9;

	.thead {
		line-height: 60rpx;
		height: 60rpx;
		font-size: 24rpx;
		background-color: #f5f5f5;
		display: flex;
		width: 100%;
	}

	.search-view {
		width: 100%;
	}
}

.flex1 {
	display: table-cell;

	text-align: center;
	position: relative;
	height: 100%;
	vertical-align: middle;

	&.staff-li {
		width: 14.2%;
	}

	&.sort-li {
		width: 14.2%;
	}

	&.cutomer-li {
		width: 14.2%;
	}

	&.phone-li {
		width: 14.2%;
	}

	&.phone-li2 {
		width: 14.2%;
	}

	&.phone-li3 {
		width: 14.2%;
	}

	&.phone-li4 {
		width: 14.2%;
	}
}

.cont-ul {
	height: calc(100vh - 666rpx);
	background-color: #FFFFFF;
	.flex {
		height: 70rpx;
	}
}

.flex {
	display: table;
	width: 750rpx;

	font-size: 24rpx;
}
</style>