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 class="title">
							业务类别
						</view>
						<view class="dept_wrap form_input_pointer_events">
							<ld-select :list="dicts.crmClueBiz" label-key="dictLabel" value-key="dictValue"
								placeholder="请选择业务类别" v-model="value.clueBizType" :border="false" clearable></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="dicts.crmClueObj" label-key="dictLabel" value-key="dictValue"
								placeholder="请选择物品类别" v-model="value.clueObjType" :border="false" clearable></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="dicts.crmClueType" label-key="dictLabel" value-key="dictValue"
								placeholder="请选择线索类别" v-model="value.clueAdType" :border="false" clearable></ld-select>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</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.deptIds"
						: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.deptIds = ids;
			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.clueBizType = undefined;
			this.value.clueObjType = undefined;
			this.value.clueAdType = undefined;
			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;
	padding-top: 40px;

	.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>