<template> <section> <div v-if="!show" class="from"> <div class="icon-wrap"><i class="icon" /> <span>搜索</span></div> <el-form ref="ruleForm" :model="form" label-width="95px"> <el-form-item label="机型" prop="model"> <el-select v-model="form.model" clearable class="input-with-select el-input--small"> <el-option v-for="item in dataModel" :key="item.id" :label="item.defName" :value="item.id" /> </el-select> </el-form-item> <el-form-item label="架次" prop="sortie"> <el-select v-model="form.sortie" clearable class="input-with-select el-input--small" :loading="sortiesLoading"> <el-option v-for="item in dataSortie" :key="item.id" :label="item.defName" :value="item.id" /> </el-select> </el-form-item> <!-- <el-form-item v-if="labelShow()" label="AO(号/名称)" prop="aoName"> <el-input v-model="form.aoName" clearable class="input-with-select el-input--small" @change="searchAoname" /> </el-form-item> --> <p class="btn"> <el-button size="small" type="primary" @click="searchForm">查询</el-button> <el-button size="small" @click="resetForm('ruleForm')">重置</el-button> </p> </el-form> </div> </section> </template> <script> export default { name: 'Left', props: { show: { type: Boolean, default: null }, dataModel: { type: Array, default: () => { return [] } } }, data() { return { form: { model: '', modelName: '', sortie: '', sortieName: '', aoName: '' }, sortiesLoading: true, dataSortie: [], isCollapse: false } }, watch: { dataModel(newV) { if (newV.length <= 0) return this.$nextTick(() => { this.form.model = newV[0].id this.form.modelName = newV[0].defName this.getAddRecursion() }) }, 'form.model': { immediate: true, handler(val) { if (!val) { return } const model = this.dataModel.find((r) => r.id === val) this.$set(this.form, 'modelName', (model && model.defName) || '') this.getAddRecursion() } }, 'form.sortie': { immediate: true, handler(val) { if (!val) { return } const sorties = this.dataSortie.find((r) => r.id === val) this.$set(this.form, 'sortieName', (sorties && sorties.defName) || '') } } }, mounted() { this.getAddRecursion() }, methods: { labelShow() { if (this.$parent.$parent && this.$parent.$parent.name === 'right' && this.$parent.$parent.isActive === 'ag') { return false } else { return true } }, searchForm() { this.$parent.$children .filter(function(item) { return item.name === 'tree' })[0] .getTreeData(this.form) }, searchAoname() { const that = this if (that.$parent.$parent.name === 'right') { that.$parent.$parent.getTableData() } else { this.searchForm() } }, /** * 获取架次数据 */ getAddRecursion() { this.sortiesLoading = true const params = { searchItems: { items: [{ fieldName: 'aircraftTypeId', operator: 'EQ', value: this.form.model }] }, sortItem: [{ fieldName: 'modifyTime', sortOrder: 'asc' }] } params.openProps = [{ name: 'aircraftType' }] this.$api .searchApi('AircraftSorties', params) .then((res) => { this.dataSortie = [] if (res) { this.dataSortie = res && res.items && res.items.content this.$nextTick(() => { if (this.dataSortie.length) { this.form.sortie = this.dataSortie[0].id this.form.sortieName = this.dataSortie[0].defName this.searchForm() } }) } else { this.$message({ showClose: true, message: res.message, type: 'error' }) } }) .catch((err) => console.log(err)) .finally(() => { this.$nextTick(() => { this.sortiesLoading = false }) }) }, resetForm() { if (this.dataModel.length) { this.form.model = this.dataModel[0].id this.getAddRecursion() } this.form.aoName = null } } } </script> <style lang="scss" > .from { border: 1px solid #ccc; padding: 20px 20px 5px 20px; border-radius: 5px; box-sizing: border-box; .icon-collapse { display: inline-block; width: 21px; height: 21px; background-size: contain; cursor: pointer; position: absolute; z-index: 10; top: 20px; right: 20px; } .tobottom { background: url("/icons/tobottom.png") no-repeat; } .totop { background: url("/icons/totop.png") no-repeat; } .icon-wrap { margin-bottom: 10px; position: relative; .icon { display: inline-block; width: 21px; height: 21px; background: url("/icons/r-access.png") no-repeat; background-size: contain; vertical-align: middle; } span { vertical-align: middle; // font-size: 12px; } } .btn { text-align: center; } .el-form-item { margin-bottom: 8px; } } /deep/.el-input { height: 32px; } /deep/.el-button { border-radius: 5px; padding: 12px 30px; } </style>