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