zy-wechat/pages/taskTypeSearch/taskTypeSearch.vue

<template>
	<view class="content">
		<view class="search-keyword">
			<view class="padding">
				<uni-easyinput prefixIcon="search" v-model="key" :clearable="false" placeholder="请输入" @input="searchKey">
				</uni-easyinput>
			</view>
			<scroll-view class="keyword-list-box" scroll-y>
				<label v-for="(row, index) in dataList" :key="row.id" @click="itemClick(row)"
					>
					<view class="keyword-entry" :class="selectId == row.id ? 'selectStyle' : ''">
						<view class="keyword-text">
							{{row.dept}}
						</view>
					</view>
				</label>
			</scroll-view>
		</view>
		<view class="toolbar">
			<view class="btn cancel" @click="determine('back')" hover-class="seimin-btn-hover">
				取消
			</view>
			<view class="btn affirm" @click="determine('submit')" hover-class="seimin-btn-hover">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	import {
		post,
		webHandle
	} from "../../http/http.js";
	import debounce from 'lodash-es/debounce'
	export default {
		data() {
			return {
				key:null,
				type: "", //进入该页面的类型
				hosId: "",
				dataList: [],
				selectData: [],
				allData:[],
				gdId:null,
				startTarget:null,
				endTarget:null,
				selectId:null,
				taskTypeData:null,
				taskTypeId:null,
				taskName:null
			};
		},
		onLoad(options) {
			this.hosId = uni.getStorageSync("userData").user.currentHospital.id;
			this.taskTypeData = JSON.parse(options.taskTypeData)
			console.log(this.options, '777');
			console.log(this.taskTypeData, '123');
			this.taskTypeId = options.taskTypeId
			this.taskName = options.taskName
			this.type = options.type
			// 科室类型：201：默认发起科室
			// 科室类型：202：固定科室范围
			// 科室类型：203：固定科室
			// 科室类型：204：自主填写
			// 科室类型：205：固定科室类型
			this.startTarget = this.taskTypeData.startStatus
			this.endTarget = this.taskTypeData.endStatus
			this.gdId = options.id
			if(options.type=='applyDept'){
				this.getapplyDept()
			}else if (options.type=='startDept'){
				this.getStartDept()
			}else if (options.type=='endDept'){
				this.getEndDept()
			}
		},
		methods: {
			searchKey(e){
				if(this.type=='applyDept'){
					this.handleSearch1()
				}else if (this.type=='startDept'){
					this.handleSearch2()
				}else if (this.type=='endDept'){
					this.handleSearch3()
				}
			},
			handleSearch1: debounce(function() {
			  this.getapplyDept();
			}, 500),
			handleSearch2: debounce(function() {
			  this.getStartDept();
			}, 500),
			handleSearch3: debounce(function() {
			  this.getEndDept();
			}, 500),
			//获取申请科室
			getapplyDept() {
				let postData = {
					idx: 0,
					sum: 20,
					department:{
						searchType: 1,
						hospital: {
							id: this.hosId
						},
						dept: this.key
					}
				}
				post("/simple/data/fetchDataList/department", postData).then((res) => {
					this.dataList = res.list
				})
			},
			//获取起点科室
			getStartDept() {
				// 科室类型：201：默认发起科室
				// 科室类型：202：固定科室范围
				// 科室类型：203：固定科室
				// 科室类型：204：自主填写
				// 科室类型：205：固定科室类型
				if(this.startTarget == 204 || this.startTarget== 205){
					let postData = {
						idx: 0,
						sum: 20,
						department:{
							searchType: 1,
							cascadeHosId: this.hosId,
							type:{
								id: null
							},
							dept: this.key
						}
					}
					if(this.startTarget == 204){
						delete postData.department.type
					}else{
						postData.department.type.id = this.taskTypeData.startTypeId
					}
					post("/simple/data/fetchDataList/department", postData).then((res) => {
						this.dataList = res.list
					})
				}else if(this.startTarget== 202){
					if(this.key){
						this.dataList = this.taskTypeData.startDept.filter(i=>i.dept.indexOf(this.key)!=-1)
					}else{
						this.dataList = this.taskTypeData.startDept
					}
				}else{
					this.dataList = this.taskTypeData.startDept
				}
			},
			// 获取终点科室
			getEndDept(){
				// 科室类型：201：默认发起科室
				// 科室类型：202：固定科室范围
				// 科室类型：203：固定科室
				// 科室类型：204：自主填写
				// 科室类型：205：固定科室类型
				if(this.endTarget == 204 || this.endTarget== 205){
					let postData = {
						idx: 0,
						sum: 20,
						department:{
							searchType: 1,
							cascadeHosId: this.hosId,
							type:{
								id: null
							},
							dept: this.key
						}
					}
					if(this.endTarget == 204){
						delete postData.department.type
					}else{
						postData.department.type.id = this.taskTypeData.endTypeId
					}
					post("/simple/data/fetchDataList/department", postData).then((res) => {
						this.dataList = res.list
					})
				}else if(this.endTarget== 202){
					if(this.key){
						this.dataList = this.taskTypeData.endDept.filter(i=>i.dept.indexOf(this.key)!=-1)
					}else{
						this.dataList = this.taskTypeData.endDept
					}
				}else{
					this.dataList = this.taskTypeData.endDept
				}
			},
			// 确认
			determine(type) {
				this.allData = this.selectData
				if (type == 'back') {
					uni.navigateBack({
						delta: 1,
					})
				} else {
					if(this.type=='applyDept'){
						uni.setStorageSync('applyDept', JSON.stringify(this.allData))
					}else if (this.type=='startDept'){
						uni.setStorageSync('taskStartDept', JSON.stringify(this.allData))
					}else if (this.type=='endDept'){
						uni.setStorageSync('taskEndDept', JSON.stringify(this.allData))
					}
					uni.redirectTo ({
						url: `../sponsorTaskBuild/sponsorTaskBuild?type=${this.type}&startTarget=${this.startTarget}&endTarget=${this.endTarget}&taskTypeId=${this.taskTypeId}&taskName=${this.taskName}`
					});
				}
			},
			// 选择楼栋
			itemClick(item) {
				this.selectData = item
				this.selectId = item.id
			}
		},
	};
</script>
<style scoped>
	.is-input-border{
		border-color: #eee !important
	}
</style>
<style scoped lang="less">
	view {
		display: block;
	}

	.title {
		padding: 30rpx;
		font-size: 32rpx;
		text-align: center;
		font-weight: bold;
	}

	// 底部
	.toolbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 30rpx;
		width: 96%;
		margin-left: 2%;
		z-index: 9999;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;

		.btn {
			width: 48%;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			border-radius: 10rpx;
		}

		.affirm {
			background-color: #49B856;
			color: #fff;
		}

		.cancel {
			background-color: #AFAFAF;
			color: #fff;
		}
	}

	.search-box {
		width: 95%;
		background-color: rgb(242, 242, 242);
		padding: 15upx 2.5%;
		display: flex;
		justify-content: space-between;
		position: sticky;
		top: 0;
	}

	.search-box .mSearch-input-box {
		width: 100%;
	}

	.search-box .input-box {
		width: 85%;
		flex-shrink: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.search-box .search-btn {
		width: 15%;
		margin: 0 0 0 2%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-shrink: 0;
		font-size: 28upx;
		color: #fff;
		background: linear-gradient(to right, #ff9801, #ff570a);
		border-radius: 60upx;
	}

	.search-box .input-box>input {
		width: 100%;
		height: 60upx;
		font-size: 32upx;
		border: 0;
		border-radius: 60upx;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		padding: 0 3%;
		margin: 0;
		background-color: #ffffff;
	}

	.placeholder-class {
		color: #9e9e9e;
	}

	.search-keyword {
		width: 100%;
		background-color: rgb(242, 242, 242);
	}
	
	.padding{
		// padding: 0 20rpx;
	}
	
	.keyword-list-box {
		height: calc(100vh - 220rpx);
		padding-top: 10upx;
		border-radius: 20upx 20upx 0 0;
		background-color: #fff;
	}

	.selectStyle {
		color: #49B856 !important;
	}

	.keyword-entry-tap {
		background-color: #eee;
	}

	.keyword-entry {
		width: 94%;
		height: 80rpx;
		margin: 0 3%;
		font-size: 30rpx;
		color: #333;
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: solid 1rpx #DEDEDE;
	}

	.keyword-entry image {
		width: 60upx;
		height: 60upx;
	}

	.keyword-entry .keyword-text,
	.keyword-entry .keyword-img {
		height: 80upx;
		display: flex;
		align-items: center;
	}

	.keyword-entry .keyword-text {
		// width: 90%;
	}

	.keyword-entry .keyword-img {
		width: 10%;
		justify-content: center;
	}

	.keyword-box {
		height: calc(100vh - 110upx);
		border-radius: 20upx 20upx 0 0;
		background-color: #fff;
	}

	.keyword-box .keyword-block {
		padding: 10upx 0;
	}

	.keyword-box .keyword-block .keyword-list-header {
		width: 94%;
		padding: 10upx 3%;
		font-size: 27upx;
		color: #333;
		display: flex;
		justify-content: space-between;
	}

	.keyword-box .keyword-block .keyword-list-header image {
		width: 40upx;
		height: 40upx;
	}

	.keyword-box .keyword-block .keyword {
		width: 94%;
		padding: 3px 3%;
		display: flex;
		flex-flow: wrap;
		justify-content: flex-start;
	}

	.keyword-box .keyword-block .hide-hot-tis {
		display: flex;
		justify-content: center;
		font-size: 28upx;
		color: #6b6b6b;
	}

	.keyword-box .keyword-block .keyword>view {
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 60upx;
		padding: 0 20upx;
		margin: 10upx 20upx 10upx 0;
		height: 60upx;
		font-size: 28upx;
		background-color: rgb(242, 242, 242);
		color: #6b6b6b;
	}
</style>