IOT/SourceCode/ui/fbs-ui_app2/pages/inspector/components/search.vue

<template>
	<u-collapse :value="collapseOpen">
		<u-collapse-item title="查询条件" icon="search">
			<u--form labelPosition="left">
				<u-form-item label="企业名称" labelWidth="80" borderBottom><u--input placeholder="请输入企业名称" v-model="searchInfo.company_name" border="none"></u--input></u-form-item>

				<u-form-item
					label="告警类型"
					borderBottom
					labelWidth="80"
					@click="
						showAlarmType = true;
						hideKeyboard();
					"
				>
					<u--input v-model="alarmTypeName" disabled disabledColor="#ffffff" placeholder="请选择告警类型" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<view class="btn-search-group">
					<u-button type="primary" customStyle="margin:0 20px;" text="查询" @click="confirm"></u-button>
					<u-button type="error" customStyle="margin:0 20px;" text="重置" @click="reset"></u-button>
				</view>
			</u--form>
			<u-action-sheet :show="showAlarmType" :actions="alarmTypeActions" title="请选择告警类型" @close="showAlarmType = false" @select="alarmTypeSelect"></u-action-sheet>
		</u-collapse-item>
	</u-collapse>
</template>

<script>
import { log } from "@/utils/base.js";
import api from "@/common/api.js";
export default {
	name: "inspector_search",
	data() {
		return {
			collapseOpen: [],
			needQuery: true,
			isQuerying: false,
			showAlarmType: false,
			alarmTypeActions: [],
			searchInfo: {
				company_name: "",
				warn_type: "",
			},
		};
	},
	computed: {
		alarmTypeName: {
			get() {
				if (this.alarmTypeActions && this.alarmTypeActions.length) {
					var active = this.alarmTypeActions.find(v => v.code == this.searchInfo.warn_type);
					if (active) {
						return active.name;
					}
				}
				return "";
			},
			set() {},
		},
	},
	mounted() {
		this.getExceedWarnTypeAction();
	},
	methods: {
		hideKeyboard() {
			uni.hideKeyboard();
		},
		alarmTypeSelect(e) {
			this.searchInfo.warn_type = e.code;
		},
		getExceedWarnTypeAction() {
			api.getExceedWarnType(1).then(({ data }) => {
				log("getExceedWarnType", data);
				this.alarmTypeActions = data.list;
			});
		},
		reset() {
			this.searchInfo.company_name = "";
			this.searchInfo.warn_type = "";
			this.$emit("reset");
		},
		confirm() {
			this.$emit("confirm");
			this.collapseOpen = [];
			console.log(this.collapseOpen);
		},
	},
};
</script>

<style lang="scss">
.btn-search-group {
	display: flex;
	justify-content: space-between;
	margin-top: 15px;
}
/deep/ .u-collapse-item {
	position: relative;
	&__content {
		position: absolute;
		top: 43px;
		width: 100%;
		z-index: 1000;
		background: #f5f5f5;
	}
}
/deep/ .u-input.u-input--square {
	background: transparent !important;
}
</style>