<!-- filename: SearchBar.vue author: liubin date: 2023-11-23 14:01:17 description: --> <template> <div class="search-bar"> <div class="vertical-blue-line"></div> <el-form :inline="true" ref="search-bar__form" :model="form" class="search-bar__form"> <el-form-item :label="'产线'" prop="productionLineId"> <el-select size="small" placeholder="请选择产线" clearable filterable @change="getEquipmentByLineId" v-model="form.productionLineId"> <el-option v-for="item in listLine" :key="item.id" :label="item.name" :value="item.id"></el-option> </el-select> </el-form-item> <el-form-item :label="'设备'" prop="equipmentId"> <el-select size="small" placeholder="请选择设备" clearable filterable v-model="form.equipmentId"> <el-option v-for="item in listEq" :key="item.id" :label="item.name" :value="item.id"></el-option> </el-select> </el-form-item> </el-form> <el-button type="primary" @click="handleSearch" size="small"> 查询 </el-button> </div> </template> <script> export default { name: 'SearchBar', model: { prop: 'value', event: 'change', }, props: { value: { type: Object, default: () => {}, }, }, data() { return { listLine: [], listEq: [], }; }, computed: { form: { set(val) { this.emit(val); }, get() { return this.value; }, }, }, mounted() { this.getLine(); }, methods: { emit(newValue) { debugger; this.$emit('update', { ...this.form, ...newValue }); }, async getLine() { const { data, code } = await this.$axios({ url: '/base/core-production-line/listAll', }); if (code == 0) { this.listLine = data; } else { this.listLine.splice(0); } // 获得全部设备 const res = await this.$axios({ url: '/base/core-equipment/listAll', }); if (res.code == 0) { this.listEq = res.data; return; } this.listEq.splice(0); }, async getEquipmentByLineId(id) { if (id) { const { data, code } = await this.$axios({ url: '/base/core-equipment/listByLine', params: { id, }, }); if (code == 0) { this.listEq = data; return; } this.listEq.splice(0); } }, handleSearch() { this.$emit('action', { action: 'search', payload: this.form, }); }, }, }; </script> <style scoped lang="scss"> .search-bar { padding: 12px 0; font-size: 16px; position: relative; display: flex; align-items: center; gap: 12px; :deep(.el-form-item) { margin-bottom: 0 !important; margin-right: 0; &:not(:last-child) { margin-right: 18px; } } } .vertical-blue-line { width: 4px; height: 18px; background: #0b58ff; border-radius: 2px; } </style>