97 lines
2.0 KiB
Vue
97 lines
2.0 KiB
Vue
<template>
|
|
<div class="search-form">
|
|
<a-form-model ref="form" :model="formModel" v-bind="$attrs" @keyup.enter.native="onSearch">
|
|
<a-row :gutter="20">
|
|
<a-col
|
|
class="search-form-item"
|
|
v-for="(item, index) in items"
|
|
:key="index"
|
|
:span="item.span || 6"
|
|
:style="item.style"
|
|
>
|
|
<a-form-model-item :label="item.label" :prop="item.name" :labelCol="item.labelCol">
|
|
<component :is="item.type" v-bind="item.props" v-model="formModel[item.name]" v-on="item.on"></component>
|
|
</a-form-model-item>
|
|
</a-col>
|
|
<a-button class="search-btn" type="primary" @click="onSearch">
|
|
<img src="@/assets/images/global/search.png" alt="" />
|
|
search
|
|
</a-button>
|
|
<slot name="additional"></slot>
|
|
</a-row>
|
|
</a-form-model>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { cloneDeep } from 'lodash'
|
|
export default {
|
|
props: {
|
|
items: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
value: {
|
|
type: Object,
|
|
default: () => ({})
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
formModel: cloneDeep(this.value)
|
|
}
|
|
},
|
|
methods: {
|
|
onSearch() {
|
|
this.$emit('search', this.formModel)
|
|
}
|
|
},
|
|
watch: {
|
|
value(val) {
|
|
this.formModel = val
|
|
},
|
|
formModel: {
|
|
handler(val) {
|
|
this.$emit('input', val)
|
|
},
|
|
deep: true
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.search-form {
|
|
padding: 10px;
|
|
padding-bottom: 0;
|
|
border-top: 1px solid rgba(12, 235, 201, 0.3);
|
|
border-bottom: 1px solid rgba(12, 235, 201, 0.3);
|
|
margin-bottom: 18px;
|
|
&-item {
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
::v-deep .ant-form-item {
|
|
display: flex;
|
|
margin-bottom: 0;
|
|
.ant-form-item-label,
|
|
.ant-form-item-control {
|
|
line-height: 32px;
|
|
}
|
|
.ant-form-item-label {
|
|
flex-shrink: 0;
|
|
}
|
|
.ant-form-item-control-wrapper {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.search-btn {
|
|
img {
|
|
width: 16px;
|
|
height: 17px;
|
|
margin-right: 9px;
|
|
}
|
|
}
|
|
</style>
|