134 lines
3.1 KiB
Vue
134 lines
3.1 KiB
Vue
<template>
|
|
<div class="search-form">
|
|
<a-form-model ref="form" :colon="false" :model="formModel" v-bind="$attrs" @keyup.enter.native="onSearch">
|
|
<a-row v-if="type == 'single-line'" :gutter="20" style="margin-right: 0 !important;">
|
|
<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>
|
|
<!-- 多行自定义 -->
|
|
<template v-else-if="type == 'multi-line'">
|
|
<a-row v-for="(item, index) in items" :key="index" :gutter="20" :style="item.style">
|
|
<a-col
|
|
class="search-form-item"
|
|
v-for="(child, index) in item.list"
|
|
:key="index"
|
|
:style="child.style"
|
|
>
|
|
<a-form-model-item :label="child.label" :prop="child.name" :labelCol="child.labelCol">
|
|
<component :is="child.type" v-bind="child.props" v-model="formModel[child.name]" v-on="child.on"></component>
|
|
</a-form-model-item>
|
|
</a-col>
|
|
</a-row>
|
|
</template>
|
|
</a-form-model>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { cloneDeep } from 'lodash'
|
|
export default {
|
|
props: {
|
|
items: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
value: {
|
|
type: Object,
|
|
default: () => ({})
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: 'single-line'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
formModel: cloneDeep(this.value)
|
|
}
|
|
},
|
|
methods: {
|
|
onSearch() {
|
|
this.$emit('search', this.formModel)
|
|
}
|
|
},
|
|
watch: {
|
|
value: {
|
|
handler(val) {
|
|
this.formModel = val
|
|
},
|
|
deep: true
|
|
},
|
|
// 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;
|
|
background-color: rgba(12, 235, 201, 0.05);
|
|
|
|
&-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;
|
|
height: 32px;
|
|
}
|
|
.ant-form-item-label {
|
|
flex-shrink: 0;
|
|
margin-right: 10px;
|
|
label {
|
|
font-size: 16px;
|
|
&::after {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
.ant-form-item-control-wrapper {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.search-btn {
|
|
margin-bottom: 10px;
|
|
img {
|
|
width: 16px;
|
|
height: 17px;
|
|
margin-right: 9px;
|
|
}
|
|
}
|
|
</style>
|