zhangzhang
1 year ago
11 changed files with 409 additions and 183 deletions
@ -0,0 +1,192 @@ |
|||
<template> |
|||
<div class="from-content" style="width: 100%"> |
|||
<div class="InputSearch input" v-if="params && types == 'input'"> |
|||
<ElInput |
|||
style="width: 100%" |
|||
v-model="value" |
|||
:placeholder="placeholder" |
|||
@change="handleSearch" |
|||
></ElInput> |
|||
<img src="./search.svg" @click="handleFormShow" /> |
|||
</div> |
|||
<ElPopover |
|||
v-else |
|||
ref="PopoverRef" |
|||
placement="bottom" |
|||
popper-class="global-input-search-popover" |
|||
:popperOptions="popperOptions" |
|||
:visibleArrow="false" |
|||
:width="this.width" |
|||
trigger="click" |
|||
@show="handleShow" |
|||
style="width: 100%" |
|||
> |
|||
<div class="InputSearch" slot="reference" ref="ReferenceInputRef"> |
|||
<span>{{ placeholder }}</span> |
|||
<img src="./search.svg" @click="handleFormShow" /> |
|||
</div> |
|||
|
|||
<div style="width: 100%; max-height: 360px"> |
|||
<slot> |
|||
<Form |
|||
v-if="formList && formList.length" |
|||
class="form" |
|||
ref="FormConfigRef" |
|||
:formList="formList" |
|||
v-bind="getFormConfigOptions" |
|||
/> |
|||
<!-- <ElEmpty v-else description="暂无搜索内容"></ElEmpty> --> |
|||
<div v-else class="no-data">暂无数据</div> |
|||
</slot> |
|||
|
|||
<div class="footer"> |
|||
<Button |
|||
style="background-color: rgba(0, 179, 204, 0.3)" |
|||
@click.native="handleResetForm" |
|||
> |
|||
重置 |
|||
</Button> |
|||
<Button @click.native="handleSearch"> 搜索 </Button> |
|||
</div> |
|||
</div> |
|||
</ElPopover> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Button from "@screen/components/Buttons/Button.vue"; |
|||
import Form from "@screen/components/FormConfig"; |
|||
import { cloneDeep } from "lodash"; |
|||
|
|||
export default { |
|||
name: "InputSearch", |
|||
components: { |
|||
Button, |
|||
Form, |
|||
}, |
|||
props: { |
|||
type: { |
|||
type: String, |
|||
default: "form", |
|||
}, |
|||
placeholder: { |
|||
type: String, |
|||
default: "请点击右侧图标筛选", |
|||
}, |
|||
valueData: { |
|||
type: String, |
|||
}, |
|||
params: { |
|||
type: String, |
|||
}, |
|||
queryParams: { |
|||
type: Array, |
|||
}, |
|||
formConfigOptions: { |
|||
type: Object, |
|||
default: null, |
|||
}, |
|||
formList: { |
|||
type: Array, |
|||
default: () => [], |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
types: this.type, |
|||
value: this.valueData, |
|||
width: null, |
|||
popperOptions: { |
|||
popHideCallBack: () => { |
|||
// console.log("---") |
|||
}, |
|||
}, |
|||
}; |
|||
}, |
|||
emit: ["handleSearch"], |
|||
computed: { |
|||
getFormConfigOptions() { |
|||
return { |
|||
column: "1", |
|||
labelWidth: "120px", |
|||
...this.formConfigOptions, |
|||
}; |
|||
}, |
|||
}, |
|||
methods: { |
|||
handleFormShow() { |
|||
console.log(this.params, this.types); |
|||
if (this.params) { |
|||
if (this.types == "form") { |
|||
this.types = "input"; |
|||
} else { |
|||
this.types = "form"; |
|||
} |
|||
} else { |
|||
this.types = "form"; |
|||
} |
|||
console.log(this.params, this.types); |
|||
}, |
|||
handleShow() { |
|||
if (this.width) return; |
|||
|
|||
this.width = this.$refs.ReferenceInputRef.getBoundingClientRect().width; |
|||
}, |
|||
handleResetForm() { |
|||
this.$refs.FormConfigRef?.reset(); |
|||
|
|||
this.$refs.PopoverRef.doClose(); |
|||
|
|||
this.$emit("handleSearch", cloneDeep(this.$refs.FormConfigRef?.formData)); |
|||
}, |
|||
handleSearch() { |
|||
if (this.types == "form") { |
|||
this.$refs.FormConfigRef.validate() |
|||
.then((result) => { |
|||
this.$refs.PopoverRef.doClose(); |
|||
this.$emit("handleSearch", result); |
|||
}) |
|||
.catch((err) => { |
|||
console.log("catch"); |
|||
}); |
|||
} else { |
|||
let params = {}; |
|||
params[this.params] = this.value; |
|||
this.$emit("handleSearch", params); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.InputSearch { |
|||
width: 100%; |
|||
height: 26px; |
|||
background: linear-gradient(180deg, #005c79 0%, #009bcc 100%) !important; |
|||
color: #fff; |
|||
border-radius: 2px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 3px 15px; |
|||
padding-right: 9px; |
|||
cursor: pointer; |
|||
|
|||
font-size: 12px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 400; |
|||
color: #ffffff; |
|||
line-height: 14px; |
|||
} |
|||
.input ::v-deep .el-input__inner { |
|||
background: none; |
|||
height: auto !important; |
|||
font-size: 12px; |
|||
padding: 0px 0; |
|||
line-height: 14px; |
|||
} |
|||
::v-deep .el-input__inner::placeholder { |
|||
font-size: 12px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue