crm-app-vue3/pages/clue/components/filterQuery.vue

<template>
	<view>
		<u-popup :show="showFilter" mode="bottom" closeable @close="handleClose" @open="handleOpen">
			<scroll-view scroll-y :style="{ height: mapHeight }" @touchmove.stop="() => {}">
				<view class="filterQuery" :style="{ height : mapHeight }">
						<view class="query_wrap">
							<view class="title">
								线索创建时间
							</view>
							<view class="dept_wrap form_input_pointer_events" @click="handleShowJtimePickerPopup">
								<u--input v-model="createTimeTxt" disabled style='pointer-events: none !important'
									disabledColor="#ffffff" placeholder="点击选择" border="none">
								</u--input>
								<u-icon slot="right" name="arrow-right"></u-icon>
							</view>
				
							<view class="title">
								归属机构
							</view>
							<view class="dept_wrap form_input_pointer_events" @click="handleShowclueDept">
								<u--input v-model="value.deptName" disabled style='pointer-events: none !important'
									disabledColor="#ffffff" placeholder="点击选择" border="none">
								</u--input>
								<u-icon slot="right" name="arrow-right"></u-icon>
							</view>
				
							<view class="title">
								来源
							</view>
							<view class="dept_wrap form_input_pointer_events" @click="handleShowclueAppName">
								<u--input v-model="value.appNameLabel" disabled style='pointer-events: none !important'
									disabledColor="#ffffff" placeholder="点击选择" border="none">
								</u--input>
								<u-icon slot="right" name="arrow-right"></u-icon>
							</view>
				
							<view class="title">
								是否撞单
							</view>
							<view class="dept_wrap form_input_pointer_events">
								<ld-select :list="repetitionDict" label-key="dictLabel" value-key="dictValue"
									placeholder="请选择" v-model="value.isRepetitionOperationName" :border="false"></ld-select>
								<u-icon slot="right" name="arrow-right"></u-icon>
							</view>
				
				
							<!-- <view class="title">
								是否微信撞单
							</view>
							<view class="dept_wrap form_input_pointer_events">
								<ld-select :list="repetitionDict" label-key="dictLabel" value-key="dictValue"
									placeholder="请选择" v-model="value.isRepetitionOperWeixinName" :border="false"></ld-select>
								<u-icon slot="right" name="arrow-right"></u-icon>
							</view> -->
							
							
							<view class="title">
								是否有视频ID
							</view>
							<view class="dept_wrap form_input_pointer_events">
								<ld-select :list="repetitionDict" label-key="dictLabel" value-key="dictValue"
									placeholder="请选择" v-model="value.isVideoIdIsNull" :border="false"></ld-select>
								<u-icon slot="right" name="arrow-right"></u-icon>
							</view>
				
				
							<view class="title">
								归属人
							</view>
							<view class="person_wrap">
								<view class="person_item" v-for="(item,index) in clueOwners.userInfos" :key="item.userId">
									<view class="person_top">
										<u-avatar :src="$avatar(item.avatar)" size="40px"></u-avatar>
									</view>
									<view class="person_bottom">
										{{item.nickName}}
									</view>
								</view>
								<view class="person_item more_item" @click="handleShowclueOwner">
									<view class="person_top">
										<image src="/static/case/icon-more.png" mode="" class="more"></image>
									</view>
									<view class="person_bottom">
										更多
									</view>
								</view>
							</view>
							<view class="title">
								运营人
							</view>
							<view class="person_wrap">
								<view class="person_item" v-for="(item,index) in clueOperations.userInfos" :key="item.userId">
									<view class="person_top">
										<u-avatar :src="$avatar(item.avatar)" size="40px"></u-avatar>
									</view>
									<view class="person_bottom">
										{{item.nickName}}
									</view>
								</view>
								<view class="person_item more_item" @click="handleShowclueOperation">
									<view class="person_top">
										<image src="/static/case/icon-more.png" mode="" class="more"></image>
									</view>
									<view class="person_bottom">
										更多
									</view>
								</view>
							</view>
				
							<view class="title">
								线索阶段
							</view>
							<view class="option_list">
								<u-tag :text="item.dictLabel" plain :color="item.isCheck ? '#bd0017' : '#aaa'"
									:borderColor="item.isCheck ? '#bd0017' : '#aaa'" class="option_item"
									v-for="(item,index) in clueStateDicts" :key="index"
									@click="handleClickTag(item,'clueStateList')"></u-tag>
							</view>
				
							<!-- 	<view class="title">
								线索标签
							</view>
							<view class="option_list">
								<ld-select :list="clueTagGroupVoList" label-key="name" value-key="id" placeholder="请选择线索标签"
									v-model="value.allTagList" multiple clearable></ld-select>
							</view> -->
				
							<view class="title">
								手机号码或微信
							</view>
							<view class="search_input">
								<u--input clearable prefixIcon="search" v-model="value.telephone"
									placeholder="请输入手机号码或微信"></u--input>
							</view>
				
							<view class="title">
								姓名
							</view>
							<view class="search_input">
								<u--input clearable prefixIcon="search" v-model="value.name" placeholder="请输入姓名"></u--input>
							</view>
				
							<view class="title">
								广告主名称
							</view>
							<view class="search_input">
								<u--input clearable prefixIcon="search" v-model="value.advName"
									placeholder="请输入广告主名称"></u--input>
							</view>
				
							<view class="title">
								广告名称
							</view>
							<view class="search_input">
								<u--input clearable prefixIcon="search" v-model="value.promotionName"
									placeholder="请输入广告名称"></u--input>
							</view>
				
							<view class="title">
								广告主ID
							</view>
							<view class="search_input">
								<u--input clearable prefixIcon="search" v-model="value.advId" placeholder="请输入广告主ID"></u--input>
							</view>
				
							<view class="title">
								广告ID
							</view>
							<view class="search_input">
								<u--input clearable prefixIcon="search" v-model="value.promotionId"
									placeholder="请输入广告ID"></u--input>
							</view>
				
							<view class="title">
								标题ID
							</view>
							<view class="search_input">
								<u--input clearable prefixIcon="search" v-model="value.titleId"
									placeholder="请输入标题ID"></u--input>
							</view>
				
							<view class="title">
								视频ID
							</view>
							<view class="search_input">
								<u--input clearable prefixIcon="search" v-model="value.videoId"
									placeholder="请输入视频ID"></u--input>
							</view>
				
							<view class="title">
								自动定位城市
							</view>
							<view class="pick_regions_wrap form_input_pointer_events">
								<pick-regions :defaultRegion="defaultRegion" @getRegion="handleGetRegion1">
									<view class="province">
										<template v-if="value.autoProvince">
											<u--input :value="value.autoProvince + '/' + value.autoCity + '/' + value.autoArea"
												placeholder="点击选择" readonly suffixIcon="arrow-right"
												suffixIconStyle="color : #c0c4cc"></u--input>
										</template>
										<template v-else>
											<u--input placeholder="点击选择" readonly suffixIcon="arrow-right"
												suffixIconStyle="color : #c0c4cc"></u--input>
										</template>
									</view>
								</pick-regions>
							</view>
				
							<view class="title">
								手动填写地域
							</view>
							<view class="pick_regions_wrap form_input_pointer_events">
								<pick-regions :defaultRegion="defaultRegion" @getRegion="handleGetRegion2">
									<view class="province">
										<template v-if="value.manualProvince">
											<u--input
												:value="value.manualProvince + '/' + value.manualCity + '/' + value.manualArea"
												placeholder="点击选择" readonly suffixIcon="arrow-right"
												suffixIconStyle="color : #c0c4cc"></u--input>
										</template>
										<template v-else>
											<u--input placeholder="点击选择" readonly suffixIcon="arrow-right"
												suffixIconStyle="color : #c0c4cc"></u--input>
										</template>
									</view>
								</pick-regions>
							</view>
				
							<view class="title">
								跟进状态
							</view>
							<view class="option_list">
								<u-tag :text="item.dictLabel" plain :color="item.isCheck ? '#bd0017' : '#aaa'"
									:borderColor="item.isCheck ? '#bd0017' : '#aaa'" class="option_item"
									v-for="(item,index) in followStatusDicts" :key="index"
									@click="handleClickTag(item,'handleStateList')"></u-tag>
							</view>
				
							<view class="title">
								通话状态
							</view>
							<view class="option_list">
								<u-tag :text="item.dictLabel" plain :color="item.isCheck ? '#bd0017' : '#aaa'"
									:borderColor="item.isCheck ? '#bd0017' : '#aaa'" class="option_item"
									v-for="(item,index) in callStatusDicts" :key="index"
									@click="handleClickTag(item,'followStatusList')"></u-tag>
							</view>
				
							<view class="title">
								入池方式
							</view>
							<view class="option_list">
								<u-tag :text="item.dictLabel" plain :color="item.isCheck ? '#bd0017' : '#aaa'"
									:borderColor="item.isCheck ? '#bd0017' : '#aaa'" class="option_item"
									v-for="(item,index) in clueEntranceTypeDicts" :key="index"
									@click="handleClickTag(item,'clueEntranceType')"></u-tag>
							</view>
				
						</view>
						<u-tabbar :fixed="true" inactiveColor="#ffffff" class="case_tabbar" :placeholder="true"
							:safeAreaInsetBottom="true">
							<u-tabbar-item text="重置" :customStyle="{backgroundColor : '#fff'}" class="uTabbarItem close_btn"
								@click="handleReset"></u-tabbar-item>
							<u-tabbar-item text="确定" :customStyle="{backgroundColor : '#4c8afe'}" class="uTabbarItem"
								@click="handleEnter"></u-tabbar-item>
						</u-tabbar>
				
						<ba-tree-picker :selectParent="false" v-if="clueOwnerListData.length > 0" ref="clueOwner" :multiple="false"
							border title="归属人" :localdata="clueOwnerListData" valueKey="id" textKey="label" childrenKey="children"
							:selectedValues="value.clueOwnerId" @select-change="clueOwnerSeletchang" />
				
						<ba-tree-picker :selectParent="false" v-if="clueOperationListData.length > 0" ref="clueOperation" :multiple="false"
							border title="运营人" :localdata="clueOperationListData" valueKey="id" textKey="label" childrenKey="children"
							:selectedValues="value.clueOperationId" @select-change="clueOperationSeletchang" />
				
						<ba-tree-picker :selectParent="true" v-if="deptList.length > 0" ref="dept" :multiple='false'
							@select-change="deptSeletchang" border title="归属机构" :localdata="deptList" valueKey="deptId"
							textKey="deptName" childrenKey="children" :selectedValues="value.deptId"
							:personNames="value.deptName" />
				
						<ba-tree-picker :selectParent="true" v-if="dictCascadeData.length > 0" ref="appName" :multiple='false'
							@select-change="appNameSeletchang" border title="来源" :localdata="dictCascadeData" valueKey="id"
							textKey="name" childrenKey="children" :selectedValues="value.appNames"
							:personNames="value.appNameLabel" />
				
						<jtimePickerPopup :isShowShortTimeList="true" shortTimeTitle="快捷时间" :shortTimeList="shortTimeList"
							:isShowSeletTimeTitle="true" seletTimeTitle="时间选择" cancelText="取消" confirmText="确认"
							:endSelectMonth="-1" :endSelectDay="-1" beginTimePlaceHolder='开始时间' endTimePlaceHolder="结束时间"
							:isDateTypeRange="true" :isShowSelectedTimeEcho="true" @confirm="getSelectTime"
							ref="jtimePickerPopup" :defaultSelect="1">
						</jtimePickerPopup>
				
					</view>
			</scroll-view>
		</u-popup>
	</view>
</template>

<script>
	import {
		filterCustomerManager,
		handleTree
	} from '@/utils/util';
	import jtimePickerPopup from '@/uni_modules/jtime-picker-popup/components/JTimePicker/JTimePicker.vue';
	export default {
		components: {
			jtimePickerPopup
		},
		props: {
			value: {
				type: Object,
			},
			mapHeight: {
				type: String,
			},
			dicts: {
				type: Object
			},
		},
		emits: ["getList"],
		computed: {
			clueStateDicts() {
				this.dicts.caseStatusDicts.forEach(v => {
					const item = this.value.clueStateList.find(s => s == v.dictValue);
					v.isCheck = item ? true : false;
				});
				return this.dicts.caseStatusDicts;
			},
			followStatusDicts() {
				this.dicts.crmFollowStatus.forEach(v => {
					const item = this.value.handleStateList.find(s => s == v.dictValue);
					v.isCheck = item ? true : false;
				});
				return this.dicts.crmFollowStatus;
			},
			callStatusDicts() {
				this.dicts.crmCallStatus.forEach(v => {
					const item = this.value.followStatusList.find(s => s == v.dictValue);
					v.isCheck = item ? true : false;
				});
				return this.dicts.crmCallStatus;
			},
			clueEntranceTypeDicts() {
				this.dicts.clueEntranceType.forEach(v => {
					const item = this.value.clueEntranceType.find(s => s == v.dictValue);
					v.isCheck = item ? true : false;
				});
				return this.dicts.clueEntranceType;
			},
		},
		data() {
			return {

				repetitionDict: [{
						dictLabel: '是',
						dictValue: '1'
					},
					{
						dictLabel: '否',
						dictValue: '2'
					},
					{
						dictLabel: '查所有',
						dictValue: ''
					},
				],


				showFilter: false,

				dictCascadeData: [],

				clueOwnerListData: [], // 人员列表 
				clueOperationListData: [], // 人员列表 

				deptList: [],

				dateRange: [], // 日期范围

				shortTimeList: [{
						unit: 'day',
						key: '全部',
						value: 0
					},
					{
						unit: 'day',
						key: '今天',
						value: 1
					},
					{
						unit: 'day',
						key: '昨天',
						value: -1
					},
					{
						unit: 'day',
						key: '近3天',
						value: 3
					},
					{
						unit: 'day',
						key: '近7天',
						value: 7
					},
					{
						unit: 'day',
						key: '近15天',
						value: 15
					},
					{
						unit: 'month',
						key: '本月',
						value: 1
					},
					{
						unit: 'month',
						key: '上月',
						value: -1
					},
				],

				createTimeTxt: null,

				clueOwners: {
					ids: [],
					names: [],
					userInfos: [],
				},

				clueOperations: {
					ids: [],
					names: [],
					userInfos: [],
				},

				clueTagGroupVoList: [],

				defaultRegion: ['广东省', '广州市', '番禺区'],

				sortParams: [{
					value: 1,
					text: '企业名称'
				}, {
					value: 2,
					text: '项目名称'
				}, {
					value: 3,
					text: '项目状态'
				}, {
					value: 4,
					text: '项目等级'
				}, {
					value: 5,
					text: '省市区'
				}, {
					value: 6,
					text: '委托日期'
				}, {
					value: 7,
					text: '创建日期'
				}, {
					value: 8,
					text: '跟进时间'
				}]
			}
		},
		mounted() {
			this.handleInitTag();
		},
		methods: {
			handleOpen(){
				if(this.createTimeTxt === null){
					this.$refs.jtimePickerPopup.handleInit();
				}
			},
			handleShowclueAppName() {
				this.$refs.appName._show();
			},
			getSelectTime(timeValue) {
				this.value.createTimeStart = timeValue.beginTime;
				this.value.createTimeEnd = timeValue.endTime;
				if (this.value.createTimeStart && this.value.createTimeEnd) {
					this.createTimeTxt = this.value.createTimeStart + "至" + this.value.createTimeEnd;
				} else {
					this.createTimeTxt = "";
				}
			},
			deptSeletchang(ids, names) {
				this.value.deptId = ids[0];
				this.value.deptName = names[0];
			},
			handleShowJtimePickerPopup() {
				this.$refs.jtimePickerPopup.pickerShow();
			},
			handleShowclueDept() {
				this.$refs.dept._show();
			},
			// 自动定位城市
			handleGetRegion1(region) {
				const {
					0: provinceData,
					1: cityData,
					2: areaData
				} = region;
				this.value.autoProvince = provinceData.name;
				this.value.autoCity = cityData.name;
				this.value.autoArea = areaData.name;
			},
			// 手动填写地域
			handleGetRegion2(region) {
				const {
					0: provinceData,
					1: cityData,
					2: areaData
				} = region;
				this.value.manualProvince = provinceData.name;
				this.value.manualCity = cityData.name;
				this.value.manualArea = areaData.name;
			},
			appNameSeletchang(ids, names) {
				this.value.appNames = ids;
				this.value.appNameLabel = names[0];
			},
			clueOperationSeletchang(ids, names) {
				this.clueOperations.ids = ids;
				this.clueOperations.names = ids;
				this.value.clueOperationId = ids[0];
				if (ids.length > 0) {
					// 暂时只做单向
					uni.$u.api.getUserByUserIds({
						userIds: ids.join(",")
					}).then(res => {
						const {
							data
						} = res;
						this.clueOperations.userInfos = data;
					})
				} else {
					this.clueOperations.userInfos = [];
				}
			},
			clueOwnerSeletchang(ids, names) {
				this.clueOwners.ids = ids;
				this.clueOwners.names = ids;
				this.value.clueOwnerId = ids[0];
				if (ids.length > 0) {
					// 暂时只做单向
					uni.$u.api.getUserByUserIds({
						userIds: ids.join(",")
					}).then(res => {
						const {
							data
						} = res;
						this.clueOwners.userInfos = data;
					})
				} else {
					this.clueOwners.userInfos = [];
				}
			},
			handleShowclueOperation() {
				this.$refs.clueOperation._show();
			},
			handleShowclueOwner() {
				this.$refs.clueOwner._show();
			},
			handleInitTag() {
				uni.$u.api.selectAllDeptList({
					isDept: 2
				}).then(({
					data
				}) => {
					this.deptList = handleTree(data, 'deptId');
				});

				// 获取人员
				uni.$u.api.getDeptOwner({ excludeDeptIds : [100,369,378,356] }).then(res => {
					this.clueOwnerListData = filterCustomerManager(res.data);
				});
				
				// 获取人员
				uni.$u.api.getDeptCustomerByOrg({ deptId : 369 }).then(res => {
					this.clueOperationListData = filterCustomerManager(res.data);
				});

				// 获取所有线索标签
				uni.$u.api.getClueTagGroupVoList({ tagGroupApplication : '1' }).then(({
					data
				}) => {
					this.clueTagGroupVoList = data.reduce((acc, cur) => {
						return acc.concat(cur.clueTagDataList);
					}, []);
				});

				// 来源
				uni.$u.api.getDictCascadeData().then(({
					data
				}) => {
					this.dictCascadeData = handleTree(data, 'id');
				});
			},
			handleClose() {
				this.showFilter = false;
			},
			handleClickTag(item, attr) {
				if (item.isCheck) {
					const index = this.value[attr].findIndex(v => v == item.dictValue);
					this.value[attr].splice(index, 1);
				} else {
					this.value[attr].push(item.dictValue);
				}
			},
			handleReset() {
				this.value.clueStateList = [];
				this.value.followStatusList = [];
				this.value.handleStateList = [];
				this.value.clueEntranceType = [];
				this.value.manualProvince = undefined;
				this.value.manualCity = undefined;
				this.value.manualArea = undefined;
				this.value.autoProvince = undefined;
				this.value.autoCity = undefined;
				this.value.autoArea = undefined;
				this.value.clueOperationId = undefined;
				this.value.clueOwnerId = undefined;
				this.value.allTagList = [];
				this.value.telephone = undefined;
				this.value.deptId = undefined;
				this.value.deptName = undefined;
				this.value.appNames = [];
				this.value.appNameLabel = undefined;
				this.value.isRepetitionOperWeixinName = '';
				this.value.isRepetitionOperationName = '';
				this.value.isVideoIdIsNull = '';
				this.value.advName = "";
				this.value.promotionName = "";
				this.value.advId = "";
				this.value.promotionId = "";
				this.value.titleId = "";
				this.value.videoId = "";
				this.clueOwners = {
					ids: [],
					names: [],
					userInfos: [],
				};
				this.clueOperations = {
					ids: [],
					names: [],
					userInfos: [],
				};
			},
			handleEnter() {
				if (this.value.titleId && isNaN(this.value.titleId)) {
					this.$u.toast("标题ID必须为纯数值");
					return;
				}
				if (this.value.videoId && isNaN(this.value.videoId)) {
					this.$u.toast("视频ID必须为纯数值");
					return;
				}
				if (this.value.promotionId && isNaN(this.value.promotionId)) {
					this.$u.toast("广告ID必须为纯数值");
					return;
				}
				if (this.value.advId && isNaN(this.value.advId)) {
					this.$u.toast("广告主ID必须为纯数值");
					return;
				}
				this.$emit("getList");
				this.showFilter = false;
			},
			handleChangeSort(sort) {
				this.value.sort = sort;
			},
			handleChangeSortField(value) {
				this.value.sortField = value;
			},
			show() {
				this.showFilter = true;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.filterQuery {
		padding: 20px;
		box-sizing: border-box;
		overflow: scroll;

		.dept_wrap {
			border: 2px solid #ddd;
			display: flex;
			padding: 10rpx 20rpx;
			border-radius: 6rpx;
			margin-bottom: 20rpx;
		}

		.pick_regions_wrap {}

		.person_wrap {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			margin-bottom: 15px;

			.person_item {
				width: 10%;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 10px;

				.person_top {
					width: 40px;
					height: 40px;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.person_bottom {
					margin-top: 5px;
					font-size: 12px;
					color: #202020;
				}
			}

			.more_item {
				.more {
					width: 28px;
					height: 28px;
				}

				.person_bottom {
					color: #4c8afe;
					font-size: 12px;
					margin-top: 0px;
				}
			}
		}

		.search_input {
			border: 1px solid #ddd;
			border-radius: 4px;
			overflow: hidden;
			margin-bottom: 15px;
		}

		.query_wrap {
			.title {
				font-size: 18px;
				color: #202020;
				margin-bottom: 10px;
			}

			.option_list {
				display: flex;
				flex-wrap: wrap;
				margin-bottom: 15px;

				.option_item {
					width: calc(33.33% - 10px);
					margin-right: 10px;
					margin-bottom: 10px;

					::v-deep .u-tag__text {
						margin: auto;
						font-size: 14px;
					}

					&:nth-child(6n) {
						margin-right: 0px;
					}
				}
			}

			.follow_option_list {
				.option_item {
					::v-deep .u-tag__text {
						font-size: 12px;
					}
				}
			}
		}
	}

	.case_tabbar {
		.uTabbarItem {
			::v-deep .u-tabbar-item__text {
				font-size: 18px;
			}
		}

		.close_btn {
			::v-deep .u-tabbar-item__text {
				font-size: 18px;
				color: #606060 !important;
			}
		}
	}
</style>