fix : 修复实施图片
This commit is contained in:
@@ -1,164 +1,164 @@
|
||||
<template>
|
||||
<el-form
|
||||
:model="form"
|
||||
v-bind="$attrs"
|
||||
label-width="auto"
|
||||
ref="formInstance"
|
||||
class="search-form"
|
||||
@submit.prevent="getValues"
|
||||
>
|
||||
<el-row>
|
||||
<el-col
|
||||
v-for="(item, index) in filterConfig"
|
||||
:span="5"
|
||||
:offset="index == 0 || index / 4 ==1 ? 0 : 1"
|
||||
:key="item.prop"
|
||||
>
|
||||
<el-form-item
|
||||
v-bind="item"
|
||||
:key="item.prop"
|
||||
>
|
||||
<template #default>
|
||||
<component
|
||||
:is="item.component"
|
||||
v-bind="item.props || {}"
|
||||
v-on="item.on || {}"
|
||||
v-model="form[item.prop]"
|
||||
@keyup.enter.native="getValues"
|
||||
@change="elChange"
|
||||
>
|
||||
</component>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- class="btn-col"-->
|
||||
<el-col :span="filterConfig.length % 4 == 0 ? 4 : 6" :offset="1">
|
||||
<el-form-item>
|
||||
<el-button v-if="searchConfig.length>=4" link type="primary" @click="showMore = !showMore">
|
||||
{{ showMore ? '收起' : '展开' }}
|
||||
</el-button>
|
||||
<el-button @click="getValues" color="#DED0B2" :icon="Search">搜索</el-button>
|
||||
<el-button @click="handleReset" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {Refresh, Search} from '@element-plus/icons-vue'
|
||||
|
||||
const props = defineProps({
|
||||
searchConfig: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
//搜索参数
|
||||
searchProp: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
//搜索值
|
||||
searchValue: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
|
||||
const emits = defineEmits(['getInstance', 'search'])
|
||||
|
||||
const form = ref({})
|
||||
const formInstance = ref(null)
|
||||
|
||||
const showMore = ref(false)
|
||||
|
||||
const filterConfig = computed(() => {
|
||||
const arr = props.searchConfig.filter(item => {
|
||||
if (item.prop) return true
|
||||
})
|
||||
return arr.length >= 4 && showMore.value ? arr : arr.slice(0, 3)
|
||||
})
|
||||
const setForm=(prop,value)=>{
|
||||
form.value[prop]=value
|
||||
return form.value;
|
||||
}
|
||||
// 搜索功能表单元素默认值
|
||||
// const setDefaultFormValues = () => {
|
||||
// filterConfig.value.forEach(item => {
|
||||
// form.value[item.prop] = item.props?.defaultValue || null
|
||||
// })
|
||||
// }
|
||||
|
||||
watchEffect(() => {
|
||||
if (filterConfig.value.length) {
|
||||
// setDefaultFormValues()
|
||||
}
|
||||
if(props.searchProp&&props.searchValue){
|
||||
setForm(props.searchProp,props.searchValue)
|
||||
}
|
||||
})
|
||||
|
||||
const elChange = () => {
|
||||
setTimeout(() => {
|
||||
getValues()
|
||||
}, 500)
|
||||
}
|
||||
|
||||
const getValues = () => {
|
||||
emits('search', form.value)
|
||||
return form.value
|
||||
}
|
||||
|
||||
//重置
|
||||
const handleReset = () => {
|
||||
form.value = {}
|
||||
// setDefaultFormValues()
|
||||
emits('search', form.value)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
emits('getInstance', Object.assign({}, unref(formInstance), {
|
||||
getValues,
|
||||
handleReset,
|
||||
}))
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search-form {
|
||||
padding-top: 18px;
|
||||
}
|
||||
|
||||
.btn-col {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.search-form{
|
||||
//绘制下拉选择框远程搜索时右侧的箭头
|
||||
.el-select {
|
||||
.el-select__wrapper {
|
||||
.el-select__suffix::before {
|
||||
content: "";
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border: solid #a8abb2;
|
||||
border-width: 0 0 1px 1px;
|
||||
transform: translate(-50%, -50%) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.is-focused {
|
||||
.el-select__suffix::before {
|
||||
margin-top: 10px;
|
||||
transform: translate(-50%, -50%) rotate(-225deg) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<el-form
|
||||
:model="form"
|
||||
v-bind="$attrs"
|
||||
label-width="auto"
|
||||
ref="formInstance"
|
||||
class="search-form"
|
||||
@submit.prevent="getValues"
|
||||
>
|
||||
<el-row>
|
||||
<el-col
|
||||
v-for="(item, index) in filterConfig"
|
||||
:span="5"
|
||||
:offset="index == 0 || index / 4 ==1 ? 0 : 1"
|
||||
:key="item.prop"
|
||||
>
|
||||
<el-form-item
|
||||
v-bind="item"
|
||||
:key="item.prop"
|
||||
>
|
||||
<template #default>
|
||||
<component
|
||||
:is="item.component"
|
||||
v-bind="item.props || {}"
|
||||
v-on="item.on || {}"
|
||||
v-model="form[item.prop]"
|
||||
@keyup.enter.native="getValues"
|
||||
@change="elChange"
|
||||
>
|
||||
</component>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- class="btn-col"-->
|
||||
<el-col :span="filterConfig.length % 4 == 0 ? 4 : 6" :offset="1">
|
||||
<el-form-item>
|
||||
<el-button v-if="searchConfig.length>=4" link type="primary" @click="showMore = !showMore">
|
||||
{{ showMore ? '收起' : '展开' }}
|
||||
</el-button>
|
||||
<el-button @click="getValues" color="#DED0B2" :icon="Search">搜索</el-button>
|
||||
<el-button @click="handleReset" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {Refresh, Search} from '@element-plus/icons-vue'
|
||||
|
||||
const props = defineProps({
|
||||
searchConfig: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
//搜索参数
|
||||
searchProp: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
//搜索值
|
||||
searchValue: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
|
||||
const emits = defineEmits(['getInstance', 'search'])
|
||||
|
||||
const form = ref({})
|
||||
const formInstance = ref(null)
|
||||
|
||||
const showMore = ref(false)
|
||||
|
||||
const filterConfig = computed(() => {
|
||||
const arr = props.searchConfig.filter(item => {
|
||||
if (item.prop) return true
|
||||
})
|
||||
return arr.length >= 4 && showMore.value ? arr : arr.slice(0, 3)
|
||||
})
|
||||
const setForm=(prop,value)=>{
|
||||
form.value[prop]=value
|
||||
return form.value;
|
||||
}
|
||||
// 搜索功能表单元素默认值
|
||||
// const setDefaultFormValues = () => {
|
||||
// filterConfig.value.forEach(item => {
|
||||
// form.value[item.prop] = item.props?.defaultValue || null
|
||||
// })
|
||||
// }
|
||||
|
||||
watchEffect(() => {
|
||||
if (filterConfig.value.length) {
|
||||
// setDefaultFormValues()
|
||||
}
|
||||
if(props.searchProp&&props.searchValue){
|
||||
setForm(props.searchProp,props.searchValue)
|
||||
}
|
||||
})
|
||||
|
||||
const elChange = () => {
|
||||
setTimeout(() => {
|
||||
getValues()
|
||||
}, 500)
|
||||
}
|
||||
|
||||
const getValues = () => {
|
||||
emits('search', form.value)
|
||||
return form.value
|
||||
}
|
||||
|
||||
//重置
|
||||
const handleReset = () => {
|
||||
form.value = {}
|
||||
// setDefaultFormValues()
|
||||
emits('search', form.value)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
emits('getInstance', Object.assign({}, unref(formInstance), {
|
||||
getValues,
|
||||
handleReset,
|
||||
}))
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search-form {
|
||||
padding-top: 18px;
|
||||
}
|
||||
|
||||
.btn-col {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.search-form{
|
||||
//绘制下拉选择框远程搜索时右侧的箭头
|
||||
.el-select {
|
||||
.el-select__wrapper {
|
||||
.el-select__suffix::before {
|
||||
content: "";
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border: solid #a8abb2;
|
||||
border-width: 0 0 1px 1px;
|
||||
transform: translate(-50%, -50%) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.is-focused {
|
||||
.el-select__suffix::before {
|
||||
margin-top: 10px;
|
||||
transform: translate(-50%, -50%) rotate(-225deg) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user