139 lines
2.4 KiB
Vue
139 lines
2.4 KiB
Vue
<!--
|
|
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="请选择产线"
|
|
@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="请选择设备"
|
|
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;
|
|
return;
|
|
}
|
|
this.listLine.splice(0);
|
|
},
|
|
async getEquipmentByLineId(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() {},
|
|
},
|
|
};
|
|
</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>
|