ldb-safe-hh/pages/fill-in/safeThingsType.vue

// 事件类型选择
<template>
	<view class="my-fillin-container">
		<title-status />
		<h-navbar title="事件类型选择" />
		<nav-button :menus="menuDatas" @itemClick="menuClick"></nav-button>
		<view class="search-layout">
			<u-search v-model="searchStr" placeholder="请输入事件标题" shape="square" :showAction="false"></u-search>
		</view>
		<scroll-view scroll-y style="flex: auto;">
			<u-radio-group v-model="safeThingsType" style="flex-direction: column;padding-left: 32rpx;">
				<u-radio
					v-for="(item, index) in safeThingsTypesSearch"
					:key="index"
					class="radio-item"
					:label="item.name"
					:name="item.id">
				</u-radio>
			</u-radio-group>
		</scroll-view>
		<view style="height: 160rpx;" v-if="safeThingsTypesSearch && safeThingsTypesSearch.length > 0"></view>
	</view>
</template>

<script>
	import { getSafeThingsTypeList } from '@/network/module/fill-in.api.js'
	import TitleStatus from '@/components/title-status/title-status'
	import HNavbar from '@/components/h-navbar/h-navbar.vue'
	import NavButton from '@/components/nav-bottom/nav-button.vue'
	
	export default {
		components: {
			TitleStatus,
			HNavbar,
			NavButton
		},
		data() {
			return {
				searchStr: null,
				menuDatas: [
					{
						title: '确定',
						plain: false,
						disabled: false,
						bgColor: '#4983FB'
					}
				],
				safeThingsTypes: [],
				safeThingsTypesSearch: [],
				safeThingsType: null
			}
		},
		watch: {
			searchStr(nValue) {
				uni.$u.debounce(this.search, 700)
			}
		},
		onLoad(options) {
			if(options && options.type) {
				this.safeThingsType = Number(options.type)
			}
			this.getSafeThingsTypes()
		},
		methods: {
			// 获取事件类型列表
			getSafeThingsTypes() {
				getSafeThingsTypeList({loadingText: '正在加载...', hasMsg: true}).then(res => {
					if(res.data && res.data.length > 0) {
						this.safeThingsTypes = res.data.map(item => {
							return {
								id: item.safeThingsTypeId,
								name: item.safeThingsTypeName
							}
						})
						this.safeThingsTypesSearch = JSON.parse(JSON.stringify(this.safeThingsTypes))
					} else {
						this.safeThingsTypes = []
						this.safeThingsTypesSearch = []
					}
				}).catch(error => {
					this.safeThingsTypes = []
					this.safeThingsTypesSearch = []
				})
			},
			search() {
				if(!this.safeThingsTypes || this.safeThingsTypes.length <= 0) {
					this.safeThingsTypesSearch = []
					return
				}
				if(!this.searchStr || this.searchStr.trim().length <= 0) {
					this.safeThingsTypesSearch = this.safeThingsTypes
					return
				}
				// 是否需要筛选的时候清除选中的
				// this.safeThingsType = null
				this.safeThingsTypesSearch = this.safeThingsTypes.filter(item => {
					return item.name.includes(this.searchStr)
				})
			},
			menuClick() {
				if(!this.safeThingsType) {
					uni.$u.toast('未选中项!')
					return
				}
				const safeThingsTypeObj = this.safeThingsTypes.find(item => {
					return item.id === this.safeThingsType
				})
				if(!safeThingsTypeObj) {
					uni.$u.toast('选中项值为空,请重新选择!')
					return
				}
				this.getOpenerEventChannel().emit('changeSuccess', safeThingsTypeObj)
				this.$navigate.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-fillin-container {
		display: flex;
		flex-direction: column;
		.search-layout {
			padding: 32rpx 30rpx;
		}
		.radio-item {
			margin-top: 40rpx;
			&:first-of-type {
				margin-top: 0;
			}
		}
	}
</style>