h5-elab-open-ownerUnion/components/subComponents/dmTopSearchView.vue

<template>
	<view class="searchContainer" :style="{'background': isBackThemeColor ? backgorundThemeColor || '#F1F5F9' : '#fff'}">
		<view class="liveContent" :style="`border: 2rpx solid ${themeColor25};`">
			<block v-if="isScreen && selectObj!=null">
				<view class="leftDiv" @click="showPicker">
					<view class="leftTex">{{selectObj.title}}</view>
					<image class="leftIcon" src="../../static/icons/icon_dropDown@2x.png" mode=""></image>
				</view>
				<view class="line"></view>
			</block>
			<block v-if="!isScreen">
				<view class="leftDiv" @click="showOptionPicker">
					<view class="leftTex">{{selectOption.title}}</view>
					<image class="leftIcon" src="../../static/icons/icon_dropDown@2x.png" mode=""></image>
				</view>
				<view class="line"></view>
			</block>
			<view class="searchIcon">
				<image style="width: 100%; height: 100%; margin-top: 0; margin-left: 0;" src="../../static/icons/icon_search@2x.png"
				 mode=""></image>
			</view>
			<!-- :style="`width: ${isScreen ? '280rpx' : '450rpx'};`" -->
			<input class="searchInput" v-model="keyword" confirm-type='search' type="text" maxlength="50" :placeholder="selectOption.placeholder"
			 @confirm='searchAction' @focus="focusAtion" @blur="blurAction" />
			<view v-if="keyword.length > 0" class="clearBtn" style="background: url(../../static/icons/lightGrayClearIcon.png) center/100% 100% no-repeat;"
			 @click="clearAction"></view>
			<view class="clearBtn" v-else></view>
			<view class="searchBtn" :style="`background-color: ${themeColor};`" @click="searchAction">搜索</view>
		</view>

		<dm-picker-view ref="picker" :options="screenList" v-if="selectObj!=null" :value="selectObj.value" title="搜索台账"
		 @confirm="confirmAction"></dm-picker-view>

		<dm-picker-view ref="optionPicker" :options="currentOption" v-if="!isScreen" :value="selectOption.value" title="搜索条件"
		 @confirm="optionConfirm"></dm-picker-view>
	</view>
</template>

<script>
	import dmPickerView from './dmPickerView.vue'
	import menuCodeConfig from '../../menuCodeConfig/menuCodeConfig.js'

	export default {
		props: {
			placeholder: {
				type: String,
				default: '搜索姓名，手机号'
			},
			isScreen: {
				type: Boolean,
				default: true
			},
			selChartId: {
				type: String,
				default: ''
			},
			houseList: {
				type: Array,
				default: () => {
					return []
				}
			},
			isBackThemeColor: {
				type: Boolean,
				default: false
			},
			isJiTuanCeng: { //有没有选全集团
				type: Boolean,
				default: false
			},
			secondTab: [Number, String]
		},
		data() {
			return {
				themeColor: '',
				themeColor25: '',
				backgorundThemeColor: '',
				tempScreenList: [{
						title: '线上获客',
						chartId: 'huoke',
						isShow: false,
						value: 1,
						menuCode: menuCodeConfig.c_huoke_list
					},
					{
						title: '获电情况',
						chartId: 'huodian',
						isShow: false,
						value: 2,
						menuCode: menuCodeConfig.c_huodian_list
					},
					{
						title: '客户跟进',
						chartId: 'genjin',
						isShow: false,
						value: 3,
						menuCode: menuCodeConfig.c_genjin_list
					},
					{
						title: '案场到访',
						chartId: 'daofang',
						isShow: false,
						value: 4,
						menuCode: menuCodeConfig.c_daofang_list
					},
					{
						title: '客户成交',
						chartId: 'chengjiao',
						isShow: false,
						value: 5,
						menuCode: menuCodeConfig.c_chengjiao_list
					},
					{
						title: '客户成交',
						chartId: 'chengjiao2',
						isShow: false,
						value: 5,
						menuCode: menuCodeConfig.c_chengjiao_list2
					},
					{
						title: '客户抢单',
						chartId: 'qiangdan',
						isShow: false,
						value: 6,
						menuCode: menuCodeConfig.c_qiangdan_list
					},
					{
						title: '公客分派',
						chartId: 'kehufenpai',
						isShow: false,
						value: 7,
						menuCode: menuCodeConfig.c_kehufenpai_list
					},
					{
						title: '特例审核',
						chartId: 'telishenhe',
						isShow: false,
						value: 8,
						menuCode: menuCodeConfig.c_telishenhe_list
					},
					{
						title: '渠道认证',
						chartId: 'renzheng',
						isShow: false,
						value: 9,
						menuCode: menuCodeConfig.c_renzheng_list
					},
					{
						title: '渠道报备',
						chartId: 'baobei',
						isShow: false,
						value: 10,
						menuCode: menuCodeConfig.c_baobei_list
					},
					{
						title: '到访凭证',
						chartId: 'daofangpingzheng',
						isShow: false,
						value: 11,
						menuCode: menuCodeConfig.c_daofangpingzheng_list
					},
					{
						title: '结佣凭证',
						chartId: 'jieyongpingzheng',
						isShow: false,
						value: 12,
						menuCode: menuCodeConfig.c_jieyongpingzheng_list
					},
					{
						title: '结佣凭证',
						chartId: 'jieyongpingzheng2',
						isShow: false,
						value: 13,
						menuCode: menuCodeConfig.c_jieyongpingzheng_list2
					},
					{
						title: '邀约台账',
						chartId: 'yaoyuetaizhang',
						isShow: false,
						value: 14,
						menuCode: menuCodeConfig.c_yaoyue_list
					},
					{
						title: '获券核销',
						chartId: 'huoquanhexiao',
						isShow: false,
						value: 15,
						menuCode: menuCodeConfig.c_hexiao
					},
					{
						title: '识别结果',
						chartId: 'shibiejieguo',
						isShow: false,
						value: 16,
						menuCode: menuCodeConfig.c_shibiejieguo_list
					},
					{
						title: '到访抓拍',
						chartId: 'daofangjilu',
						isShow: false,
						value: 17,
						menuCode: menuCodeConfig.c_daofangjilu_list
					},
					{
						title: '认证结果',
						chartId: 'renzhengjilu',
						isShow: false,
						value: 18,
						menuCode: menuCodeConfig.c_renzhengjilu_list
					},
					{
						title: '活动数据',
						chartId: 'huodongshuju',
						isShow: false,
						value: 19,
						menuCode: menuCodeConfig.c_activeData
					}
				],
				screenList: [],
				selectObj: null,
				keyword: '',
				isSingleProject: false,
				backgorundThemeColor: '',
				searctOptions: [{
						menuId: 'huoke',
						placeholder: '可搜索姓名、完整号码或后四位号码',
						items: [{
							title: '客户',
							value: 0
						}]
					},
					{
						menuId: 'huodian',
						placeholder: '可搜索姓名、完整号码或后四位号码',
						items: [{
								title: '客户',
								value: 0
							},
							{
								title: '关系人',
								value: 2
							}
						]
					},
					{
						menuId: 'genjin',
						placeholder: '可搜索姓名、完整号码或后四位号码',
						items: [{
								title: '客户',
								value: 0
							},
							{
								title: '顾问',
								value: 1
							}
						]
					},
					{
						menuId: 'daofang',
						placeholder: '可搜索姓名、完整号码或后四位号码',
						items: [{
								title: '客户',
								value: 0
							},
							{
								title: '顾问',
								value: 1
							},
							{
								title: '关系人',
								value: 2
							}
						]
					},
					{
						menuId: 'chengjiao',
						placeholder: '可搜索姓名、手机号码',
						items: [{
								title: '客户',
								value: 0
							}
							// {
							// 	title: '顾问',
							// 	value: 1
							// },
							// {
							// 	title: '关系人',
							// 	value: 2
							// }
						]
					},
					{
						menuId: 'chengjiao2',
						placeholder: '可搜索姓名、完整号码或后四位号码',
						items: [{
								title: '客户',
								value: 0
							},
							{
								title: '顾问',
								value: 1
							},
							{
								title: '关系人',
								value: 2
							},
							{
								title: '成交房间',
								value: 3
							}
						]
					},
					{
						menuId: 'kehufenpai',
						placeholder: '可搜索姓名、完整号码或后四位号码',
						items: [{
								title: '客户',
								value: 0
							},
							{
								title: '关系人',
								value: 2
							},
							{
								title: '上次跟进顾问',
								value: 3
							}
						]
					},
					{
						menuId: 'qiangdan',
						placeholder: '可搜索姓名、完整号码或后四位号码',
						items: [{
							title: '客户',
							value: 0
						}]
					},
					{
						menuId: 'telishenhe',
						placeholder: '可搜索姓名、完整号码或后四位号码',
						items: [{
							title: '客户',
							value: 0
						}]
					},
					{
						menuId: 'daofangpingzheng',
						placeholder: '可搜索姓名、完整号码或后四位号码',
						items: [{
								title: '客户',
								value: 0
							},
							{
								title: '顾问',
								value: 1
							},
							{
								title: '关系人',
								value: 2
							}
						]
					},
					{
						menuId: 'jieyongpingzheng',
						placeholder: '可搜索客户姓名、手机号或后四位',
						items: [{
								title: '客户',
								value: 0
							},
							{
								title: '顾问',
								value: 1
							},
							{
								title: '关系人',
								value: 2
							}
						]
					},
					{
						menuId: 'jieyongpingzheng2',
						placeholder: '可搜索客户姓名、手机号或后四位',
						items: [{
								title: '客户',
								value: 0
							}
							// {
							// 	title: '顾问',
							// 	value: 1
							// },
							// {
							// 	title: '关系人',
							// 	value: 2
							// }
						]
					},
					{
						menuId: 'yaoyuetaizhang',
						placeholder: '可搜索客户姓名、手机号或后四位',
						items: [{
								title: '客户',
								value: 0
							},
							{
								title: '邀约人',
								value: 1
							}
						]
					},
					{
						menuId: 'huoquanhexiao',
						placeholder: '可搜索完整号码或后四位号码',
						items: [{
								title: '客户',
								value: 0
							},
							{
								title: '活动名称',
								value: 1
							}
						]
					},
					{
						menuId: 'renzheng',
						placeholder: '可搜索姓名、完整号码或后四位号码',
						items: [{
								title: '客户',
								value: 0
							},
							{
								title: '关系人',
								value: 2
							}
						]
					},
					{
						menuId: 'baobei',
						placeholder: '可搜索姓名、完整号码或后四位号码',
						items: [{
								title: '客户',
								value: 0
							},
							{
								title: '顾问',
								value: 1
							},
							{
								title: '关系人',
								value: 2
							}
						]
					},
					{
						menuId: 'shibiejieguo',
						placeholder: '输入客户ID搜索',
						items: [{
							title: '客户',
							value: 0
						}]
					},
					{
						menuId: 'renzhengjilu',
						placeholder: '输入客户姓名、身份证号搜索',
						items: [{
							title: '客户',
							value: 0
						}]
					},
					{
						menuId: 'huodongshuju',
						placeholder: '请输入...',
						items: [
							{
								title: '页面ID',
								value: 0
							},
							{
								title: '页面名称',
								value: 1
							},
							{
								title: '活动ID',
								value: 2
							},
							{
								title: '活动名称',
								value: 3
							}
						]
					}
				],
				selectOption: {
					title: '客户',
					menuId: 'huoke',
					placeholder: '可搜索姓名、完整号码或后四位号码',
					value: 0
				},
				currentOption: [],
				roleMenuList: []
			}
		},
		mounted() {
			let globalData = getApp().globalData
			this.themeColor = globalData.themeColor
			this.themeColor25 = globalData.themeColor25
			this.backgorundThemeColor = globalData.backgorundThemeColor;
			var self = this
			uni.getStorage({
				key: 'userInfo',
				success: (res) => {
					if (res.data) {
						self.roleMenuList = res.data.roleMenuList || []
						self.reloadMenuStatus(self.roleMenuList)
					}
				}
			})
			this.reloadSecondAction()
			this.keyword = uni.getStorageSync('keyword')
			if (this.keyword.length > 0) {
				this.$emit('topSearchAction', null, this.keyword)
			}
		},
		methods: {
			reloadMenuStatus(list) {
				var self = this
				list.forEach((item, index) => {
					if (item.childMenus && item.childMenus.length > 0) {
						item.childMenus.forEach((item1, index1) => {
							self.tempScreenList.forEach((scrItem) => {
								if (item.menuCode == scrItem.menuCode) {
									scrItem.isShow = true
									if (self.selectObj && self.selectObj.chartId == scrItem.chartId) {
										self.selectObj.isShow = true
									}
								}
								else if (item1.menuCode == scrItem.menuCode) {
									// console.log(scrItem.title + ':' + scrItem.menuCode + ':' + item.menuCode)
									scrItem.isShow = true
									if (self.selectObj && self.selectObj.chartId == scrItem.chartId) {
										self.selectObj.isShow = true
									}
								}
							})
						})
					}
				})

				this.screenList = []
				this.tempScreenList.forEach((item, index) => {
					if (item.isShow == true) {
						self.screenList.push(item)
						if (self.selectObj == null) {
							self.selectObj = item
						}
					}
				})

				this.screenList = []
				this.tempScreenList.forEach((item, index) => {
					if (item.isShow == true) {
						self.screenList.push(item)
						if (self.selectObj == null) {
							self.selectObj = item
						}
					}
				})
			},
			showPicker() {
				this.$refs.picker.show()
			},
			confirmAction(e) {
				this.selectObj = e.selItem
			},
			showOptionPicker() {
				this.$refs.optionPicker.show()
			},
			optionConfirm(e) {
				if(this.selectOption.menuId=="kehufenpai"){
					if(e.selItem.title=='上次跟进顾问'){
						this.selectOption.placeholder = '请输入上次跟进顾问姓名'
					}else{
						this.selectOption.placeholder = '可搜索姓名、完整号码或后四位号码'
					}
				}
				else if(this.selectOption.menuId=="huoquanhexiao"){
					if(e.selItem.title=='客户'){
						this.selectOption.placeholder = '可搜索完整号码或后四位号码'
					}else{
						this.selectOption.placeholder = '请输入活动名称进行搜索'
					}
				}
				this.selectOption.title = e.selItem.title
				this.selectOption.value = e.selItem.value
				this.$emit('selectSearchOption', e.selItem.value)
			},
			searchAction() {
				// this.reloadSelectObj()
				this.reloadMenuStatus(this.roleMenuList)
				if (this.keyword == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入内容后搜索'
					})
					// return
				}
				if (this.selectObj && !this.selectObj.isShow) {
					uni.showToast({
						icon: 'none',
						title: '暂无数据，请在其他台账尝试搜索'
					})
					return
				}
				if (!this.isSingleProject && !(this.selChartId == 'huoke'&&this.secondTab==4) && this.selChartId!='huodongshuju') {
					uni.showToast({
						icon: 'none',
						title: '请选择项目后再进行搜索'
					})
					return
				}
				uni.onSocketOpen(function() {
					uni.closeSocket({
						complete(res) {
							// console.log('关闭socket', res)
							// debugger
						}
					})
				})
				if (this.$myRequest.requestTask) {
					this.$myRequest.requestTask.abort()
				}
				this.$emit('topSearchAction', this.selectObj, this.keyword)
				if (this.isScreen == true) {
					this.keyword = ''
				}
			},
			clearAction() {
				this.keyword = ''
				uni.setStorageSync('keyword', '')
				this.$emit('topSearchAction', this.selectObj, '', true)
				this.$emit('searchFocus', false)
			},
			reloadSelectObj() {
				var self = this
				this.tempScreenList.forEach((item) => {
					if (item.chartId == this.selChartId) {
						item.isShow = true
						self.selectObj = JSON.parse(JSON.stringify(item))
					}
				})

				this.searctOptions.forEach((item, idx) => {
					if (item.menuId == self.selChartId) {
						self.selectOption = {
							title: self.selChartId == 'huodongshuju' ? '页面ID' : '客户',
							menuId: item.menuId,
							placeholder: item.placeholder,
							value: 0
						}
						self.currentOption = item.items || []
						this.$emit('selectSearchOption', 0)
					}
				})
			},

			focusAtion() {
				// 关闭socket
				uni.onSocketOpen(function() {
					uni.closeSocket({
						complete(res) {
							console.log('关闭socket', res)
						}
					})
				})
				// console.log('this.$myRequest.requestTask：', this.$myRequest.requestTask)
				if (this.$myRequest.requestTask) {
					this.$myRequest.requestTask.abort()
				}
				this.$emit('searchFocus', true)
			},
			blurAction() {
				if (this.keyword.length == 0) {
					this.$emit('searchFocus', false)
				}
			},
			reloadScreenList() {
				var self = this
				this.screenList = []
				if (this.isJiTuanCeng) {
					this.tempScreenList.forEach((item) => {
						if ((item.chartId == 'huoke' || item.chartId == 'huodian') && item.isShow) {
							self.screenList.push(item)
						}
					})
				} else {
					this.tempScreenList.forEach((item) => {
						if (item.isShow) {
							self.screenList.push(item)
						}
					})
				}

			},
			
			reloadSecondAction() {
				if (this.selChartId != 'huoke') {
					return
				}
				if (this.secondTab == 4) {
					this.searctOptions[0].items[0] = {
						title: '项目',
						value: 0
					}
					this.selectOption.title = '项目'
					this.selectOption.placeholder = '按项目名称模糊查询'
				} else {
					this.searctOptions[0].items[0] = {
						title: '客户',
						value: 0
					}
					this.selectOption.title = '客户'
					this.selectOption.placeholder = '可搜索姓名、完整号码或后四位号码'
				}
				this.$forceUpdate()
			}
		},
		watch: {
			selChartId: {
				handler(newName, oldName) {
					this.reloadSelectObj()
					if (!oldName || oldName.length == 0) {
						return
					}
					if (!this.isScreen) {
						var self = this
						var tempKeyword = uni.getStorageSync('keyword')
						if (this.keyword != tempKeyword) {
							setTimeout(function() {
								self.keyword = tempKeyword
								self.$emit('topSearchAction', null, self.keyword)
							}, 500);
						}

					}
					this.reloadSecondAction()
				},
				immediate: true
			},
			houseList: {
				handler(e) {
					if (e.length == 1) {
						this.isSingleProject = true
					} else {
						this.isSingleProject = false
					}
					if (e.length == 0 && this.isJiTuanCeng) {
						this.isSingleProject = true
					}
				},
				deep: true,
				immediate: true
			},
			isJiTuanCeng: { //有没有选全集团
				handler(e) {
					console.log('e：', e)
					var placeholder = '可搜索姓名、完整号码或后四位号码'
					if (e == true) {
						placeholder = '可搜索姓名、完整号码'
						this.searctOptions[1].items = [{
							title: '客户',
							value: 0
						}]
						if (this.houseList.length == 0) {
							this.isSingleProject = true
						}
					} else {
						this.searctOptions[1].items = [{
								title: '客户',
								value: 0
							},
							{
								title: '关系人',
								value: 2
							}
						]
					}
					this.searctOptions[0].placeholder = placeholder
					this.searctOptions[1].placeholder = placeholder
					if (this.selChartId == 'huoke' || this.selChartId == 'huodian') {
						this.selectOption.placeholder = placeholder
					}
					this.reloadScreenList()
					this.$forceUpdate()
				},
				deep: true,
				immediate: true
			},
			secondTab: {
				handler(e) {
					this.reloadSecondAction()
				},
				immediate: true
			}
		},
		components: {
			dmPickerView
		}
	}
</script>

<style scoped lang="scss">
	.searchContainer {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		// background-color: #F4F7F7;

		.liveContent {
			height: 64rpx;
			min-height: 64rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-family: Verdana;
			border-radius: 32rpx;
			white-space: nowrap;
			padding-left: 20rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;

			.leftDiv {
				// margin-left: 20rpx;
				height: 100%;
				display: flex;
				align-items: center;
				font-size: 24rpx;

				.leftTex {
					width: 90rpx;
					min-width: 90rpx;
					text-align: center;
				}

				.leftIcon {
					width: 28rpx;
					height: 28rpx;
					margin-left: 8rpx;
				}
			}

			.line {
				width: 2rpx;
				height: 26rpx;
				background-color: #E0E0E0;
			}

			.searchIcon {
				width: 44rpx;
				min-width: 44rpx;
				height: 44rpx;
				// background-color: #DD524D;
			}

			.searchInput {
				width: 360rpx;
				min-width: 360rpx;
				max-width: 360rpx;
				font-size: 24rpx;
			}

			.clearBtn {
				width: 32rpx;
				height: 32rpx;
			}

			.searchBtn {
				font-size: 24rpx;
				border-radius: 32rpx;
				height: 100%;
				width: 112rpx;
				text-align: center;
				line-height: 60rpx;
				color: #FFFFFF;
			}
		}

	}
</style>