zy-wechat/pages/searchSqType/searchSqType.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="selectData.includes(row.id) ? 'selectStyle' : ''">
						<view class="keyword-text">
							{{type=="startDept" || type=="checkoutDept" ? row.dept : row.name}}
						</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:[],
				// startDept: [],
				// checkoutDept: [],
				// testTube: [],
				// speState: []
				gdId:null
			};
		},
		onLoad(options) {
			this.hosId = uni.getStorageSync("userData").user.currentHospital.id;
			console.log(options, 'options');
			this.type = options.type
			this.gdId = options.id
			if(options.type=='startDept'){
				this.getStartDept()
			}else if (options.type=='checkoutDept'){
				this.getCheckoutDept()
			}else if (options.type=='testTube'){
				this.getTestTube()
			}else if (options.type=='speState'){
				this.getSpeState()
			}
		},
		methods: {
			searchKey(e){
				if(this.type=='startDept'){
					this.handleSearch1()
				}else if (this.type=='checkoutDept'){
					this.handleSearch2()
				}
			},
			handleSearch1: debounce(function() {
			  this.getStartDept();
			}, 500),
			handleSearch2: debounce(function() {
			  this.getCheckoutDept();
			}, 500),
			//获取起点科室
			getStartDept() {
				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
				})
			},
			// 获取检验科室
			getCheckoutDept(){
				let postData1 = {
					key:'dept_type',
					type: "list"
				}
				post("/common/common/getDictionary", postData1).then((res2) => {
					let item = res2.find(i=>i.name=='检验科室')
					let data1 = {
					  idx: 0,
					  sum: 20,
					  department: {
					    hospital: { id: this.hosId || "" },
					    type: { id: item.id || "" },
							dept: this.key,
					  },
					};
					post("/simple/data/fetchDataList/department", data1).then((res) => {
						this.dataList = res.list;
					});
				})
			},
			// 获取试管类型
			getTestTube(){
				let postData1 = {
					key:'specimen_tube_type',
					type: "list"
				}
				post("/common/common/getDictionary", postData1).then((res) => {
					this.dataList = res
				})
			},
			// 获取标本状态
			getSpeState(){
				let postData1 = {
					key:'speState',
					type: "list"
				}
				post("/common/common/getDictionary", postData1).then((res) => {
					this.dataList = res
				})
			},
			// 确认
			determine(type) {
				this.allData = []
				this.dataList.forEach(i=>{
					for(let x of this.selectData){
						if(i.id == x){
							this.allData.push(i)
						}
					}
				})
				console.log(3333, this.allData)
				if (type == 'back') {
					uni.navigateBack({
						delta: 1,
					})
				} else {
					if(this.type=='startDept'){
						let data = uni.getStorageSync('startDept')
						if(data){
							let arr = JSON.parse(data)
							for(let i of this.allData){
								arr.push(i)
							}
							uni.setStorageSync('startDept', JSON.stringify(arr))
						}else{
							uni.setStorageSync('startDept', JSON.stringify(this.allData))
						}
					}else if (this.type=='checkoutDept'){
						let data = uni.getStorageSync('checkoutDept')
						if(data){
							let arr = JSON.parse(data)
							for(let i of this.allData){
								arr.push(i)
							}
							uni.setStorageSync('checkoutDept', JSON.stringify(arr))
						}else{
							uni.setStorageSync('checkoutDept', JSON.stringify(this.allData))
						}
					}else if (this.type=='testTube'){
						uni.setStorageSync('testTube', JSON.stringify(this.allData))
					}else if (this.type=='speState'){
						uni.setStorageSync('speState', JSON.stringify(this.allData))
					}
					uni.navigateTo({
						url: `../speConfigurationGather/speConfigurationGather?type=${this.type}&id=${this.gdId}&back=1`
					});
				}
			},
			// 选择楼栋
			itemClick(item) {
				let index = this.selectData.indexOf(item.id)
				if (index == -1) {
					this.selectData.push(item.id)
				} else {
					this.selectData.splice(index, 1)
				}
			}
		},
	};
</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>