机构筛选

pages.json

@@ -599,11 +599,6 @@
 			"selectedIconPath": "static/icons/tabs_show_02.png",
 			"pagePath": "pages/work/index",
 			"text": "工作台"
-		},{
-			"iconPath": "static/icons/tabs_icon_04.png",
-			"selectedIconPath": "static/icons/tabs_icon_04.png",
-			"pagePath": "pages/im/msg",
-			"text": "消息"
 		}, {
 			"iconPath": "static/icons/tabs_icon_03.png",
 			"selectedIconPath": "static/icons/tabs_show_03.png",

pages/index/index.vue

@@ -110,13 +110,6 @@
 				</view>
 			</view>
 		</u-popup>
-		<!-- 机构选择 -->
-		<button @click="onOpen">弹出层</button>
-		<oct-mechanism-picker
-			ref="MecanisPicker"
-			title="选择办理机构"
-			:columns="jgArr"
-		/>
 	</view>
 </template>
 
@@ -126,18 +119,6 @@
 	export default {
 		data() {
 			return {
-				jgArr		: [
-					{ name: '中信' },
-					{ name: '哈尔滨' },
-					{ name: '广州' },
-					{ name: '发展银行' },
-					{ name: '其他机构' },
-					{ name: '中信' },
-					{ name: '哈尔滨' },
-					{ name: '广州' },
-					{ name: '发展银行' },
-					{ name: '其他机构' }
-				],
 				theTabs		: [
 					{ category_id: '', title: '全部' }
 				],
@@ -165,9 +146,6 @@
             this.getZf()
         },
 		methods: {
-			onOpen(){
-				this.$refs.MecanisPicker.open()
-			},
             // 获取金法列表
             getJf(){
                 let params = {

pages/work/generate.vue

@@ -11,12 +11,16 @@
 				<!-- 机构 -->
 				<view class="block-item">
 					<label class="block-item-label"><text>*</text>机构</label>
-					<picker :range="item.institution" range-key="title" :value="item.institutionIndex" @change="institutionChange($event, item, index)">
+					<!-- <picker :range="item.institution" range-key="title" :value="item.institutionIndex" @change="institutionChange($event, item, index)">
 						<view class="institution-picker">
 							<view class="institution-picker-text nowrap">{{item.institution[item.institutionIndex].title}}</view>
 							<u-icon size="12" color="#999" name="arrow-down-fill"></u-icon>
 						</view>
-					</picker>
+					</picker> -->
+					<view class="institution-picker" @click="onShowInstitution(item.institution, item, index)">
+						<view class="institution-picker-text nowrap">{{item.institution[item.institutionIndex].title}}</view>
+						<u-icon size="12" color="#999" name="arrow-down-fill"></u-icon>
+					</view>
 				</view>
 				<!-- 业务类型 -->
 				<view class="block-item">
@@ -103,6 +107,13 @@
 				<button @click="onSubmit">提交</button>
 			</view>
 		</view>
+		<!-- 机构弹出层 -->
+		<oct-mechanism-picker
+			ref="institutionPicker"
+			title="选择办理机构"
+			:columns="columns"
+			@choose="institutionChange"
+		/>
 	</view>
 </template>
 
@@ -113,9 +124,12 @@
 		components: { octpicker },
 		data() {
 			return {
+				columns	   : [],
 				businessArr: [],
 				serviceUser: '',
 				serviceArr : [],
+				old		   : {},
+				cIndex	   : 0
 			};
 		},
 		created() {
@@ -125,6 +139,13 @@
 			this.serviceUser = serviceUser
 		},
 		methods: {
+			// 显示选择机构
+			onShowInstitution(e, item, index){
+				this.columns = e
+				this.old	 = item
+				this.cIndex	 = index
+				this.$refs.institutionPicker.open()
+			},
 			// 移出选项
 			onRemove(index){
 				this.serviceArr.splice(index, 1)
@@ -202,10 +223,12 @@
 				})
 			},
 			// 机构变更更新业务
-			institutionChange(e, old, index){
+			institutionChange(e){
-				let { value } 	= e.detail;
+				let index		= this.cIndex
+				let old			= this.old
+				let value 		= old.institution.findIndex(val => val.institution_id === e.val.institution_id);
 				let businessId  = old.subVal.business_id
-				
+
 				// 获取机构的子业务类型
 				let forms = this.getForms(old.institution[value].institution_id)
 				forms.then(institutionVal => {

uni_modules/oct-mechanism-picker/components/oct-mechanism-picker/oct-mechanism-picker.vue

@@ -3,16 +3,42 @@
 		<uni-popup ref="octMechanismPicker">
 			<view class="mechanism--content">
 				<view class="mechanism--title" v-if="title != null">{{title}}</view>
+				<view class="mechanism--input">
+					<input type="text" placeholder="输入关键字筛选" v-model="searchValue" @input="onSearch($event)">
+					<view class="mechanism--clear" @click="onClear" v-if="searchValue.length > 0">
+						<uni-icons type="clear" size="20" color="#c3c3c3"></uni-icons>
+					</view>
+				</view>
 				<scroll-view class="mechanism--scroll" scroll-y show-scrollbar>
-					<view class="mechanism--item" v-for="(item, index) in columns" :key="index">{{item.name}}</view>
+					<block v-if="searchValue.length > 0">
+						<view class="mechanism--item" v-for="(item, index) in searchArr" :key="index" v-if="searchArr.length > 0" @click="onChoose(item, index)">
+							<view class="mechanism--text">{{item.title}}</view>
+							<uni-icons type="right" size="20" color="#c3c3c3"></uni-icons>
+						</view>
+						<view class="mechanism--null" v-if="searchArr.length <= 0">
+							<view>暂无与<text>[{{searchValue}}]</text>相关的搜索结果</view>
+						</view>
+					</block>
+					<block v-else>
+						<view class="mechanism--item" v-for="(item, index) in columns" :key="index" @click="onChoose(item, index)">
+							<view class="mechanism--text">{{item.title}}</view>
+							<uni-icons type="right" size="20" color="#c3c3c3"></uni-icons>
+						</view>
+					</block>
 				</scroll-view>
-				<button class="mechanism--button">确认</button>
+				<button class="mechanism--button" @click="clear">取消</button>
 			</view>
 		</uni-popup>
 	</view>
 </template>
 <script>
 	export default{
+		data(){
+			return{
+				searchValue: '',
+				searchArr  : []
+			}
+		},
 		props	: {
 			// 弹出层标题
 			title	: {
@@ -33,8 +59,36 @@
 			}
 		},
 		methods	: {
+			// 弹出层
 			open(type){
 				this.$refs.octMechanismPicker.open(type || 'bottom')
+			},
+			// 关闭弹出层
+			clear(){
+				this.$refs.octMechanismPicker.close()
+				this.onClear()
+			},
+			// 选择选项
+			onChoose(val, index){
+				this.$emit('choose', {val, index})
+				this.clear()
+			},
+			// 筛选输入框
+			onSearch(e){
+				let { value }	= e.target
+				let columns		= this.columns
+				let searchArr	= []
+				for(let obj of columns){
+					if(obj.title.includes(value)){
+						searchArr.push(obj)
+					}
+				}
+				this.searchArr = searchArr
+			},
+			// 清理搜索内容
+			onClear(){
+				this.searchValue = ''
+				this.searchArr	 = []
 			}
 		}
 	}
@@ -43,6 +97,7 @@
 	.mechanism--content{
 		background: white;
 		border-radius: 20rpx 20rpx 0 0;
+		overflow: hidden;
 		.mechanism--title{
 			text-align: center;
 			position: relative;
@@ -59,10 +114,64 @@
 				background-image: linear-gradient(0deg, $border-color 50%, transparent 50%);
 			}
 		}
-		.mechanism--scroll{
+		.mechanism--input{
 			padding: 30rpx 50rpx;
+			position: relative;
+			& > input{
+				background: #f8f8f8;
+				padding: 0 30rpx;
+				height: 80rpx;
+				border-radius: 10rpx;
+				font-size: 30rpx;
+			}
+			.mechanism--clear{
+				position: absolute;
+				top: 30rpx;
+				right: 50rpx;
+				height: 80rpx;
+				width: 80rpx;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
+		}
+		.mechanism--scroll{
+			padding: 0 50rpx;
+			box-sizing: border-box;
 			height: 50vh;
-			.mechanism--item{ line-height: 90rpx; }
+			.mechanism--item{
+				line-height: 90rpx;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				.mechanism--text{
+					width: 80%;
+					overflow: hidden;
+					white-space: nowrap;
+					text-overflow: ellipsis;
+				}
+			}
+			.mechanism--null{
+				height: 40vh;
+				line-height: 40vh;
+				font-size: 30rpx;
+				color: gray;
+				text-align: center;
+				text{
+					color: #446EFE;
+				}
+			}
+		}
+		.mechanism--button{
+			margin: 30rpx 50rpx;
+			background: #446EFE;
+			color: white;
+			font-size: 34rpx;
+			height: 90rpx;
+			line-height: 90rpx;
+			padding: 0;
+			border-radius: 10rpx;
+			&::after{ display: none; }
 		}
 	}
 </style>