123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134 |
- <template>
- <div class="en-search">
- <div style="width: 330px">
- <el-input v-if="inputSearch" size="small" clearable :placeholder="placeholder" v-model="keyword"
- @keyup.native.enter="search">
- <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
- </el-input>
- </div>
- <div v-if="advanced">
- <el-popover ref="popover" placement="bottom-start" :width="advancedWidth" v-model="popoverVisible">
- <slot name="advanced-content"></slot>
- <div style="text-align: right; margin: 0">
- <el-popover placement="top" width="160" v-model="visible_del_popover">
- <p>确定要清空表单吗?</p>
- <div style="text-align: right; margin: 0">
- <el-button size="mini" type="text" @click="visible_del_popover = false">取消</el-button>
- <el-button type="primary" size="mini" @click="handleCleanForm">确定</el-button>
- </div>
- <el-button size="mini" type="text" slot="reference" class="clean-form">清空</el-button>
- </el-popover>
- <el-button size="mini" type="text" @click="popoverVisible = false">取消</el-button>
- <el-button type="primary" size="mini" @click="advancedSearch">确定</el-button>
- </div>
- <el-button size="small" style="margin-left: 10px" slot="reference">
- 高级搜索
- </el-button>
- </el-popover>
- </div>
- </div>
- </template>
- <script>
- export default {
- name: 'EnTableSearch',
- props: {
- // 是否显示普通搜索
- inputSearch: {
- type: Boolean,
- default: true
- },
- // 是否为高级搜索
- advanced: {
- type: Boolean,
- default: false
- },
- advancedWidth: {
- default: 405
- },
- placeholder: {
- type: String,
- default: '请输入关键字'
- }
- },
- data: function() {
- return {
- keyword: '',
- popoverVisible: false,
- visible_del_popover: false,
- clearFuncs: [],
- clearFuncNames: ['clearValue', 'deleteSelected']
- }
- },
- methods: {
- /** 普通搜索 */
- search: function() {
- this.popoverVisible = false
- this.$emit('search', this.$data.keyword)
- },
- /** 高级搜索 */
- advancedSearch: function() {
- this.visible_del_popover = false
- this.popoverVisible = false
- this.$emit('advancedSearch', this.$data.keyword)
- },
- /** 清空表单 */
- handleCleanForm: function(event) {
- let $parent = this.$parent.$parent
- if (!this.$parent.$parent.$refs['advancedForm']) {
- $parent = this.$parent.$parent.$parent.$parent
- }
- let $form = $parent.$refs['advancedForm']
- let $forms = $parent.$refs['advancedForms']
- let objs = this.MixinClone($parent.advancedForm)
- Object.keys(objs).forEach(function(key) {
- $parent.advancedForm[key] = ''
- })
- if ($forms) {
- let objss = this.MixinClone($parent.advancedForms)
- Object.keys(objss).forEach(function(key) {
- $parent.advancedForms[key] = ''
- })
- this.findClearValue($forms)
- }
- this.findClearValue($form)
- this.clearFuncs.forEach(function(func) {
- func(event)
- })
- this.clearFuncs = []
- this.visible_del_popover = false
- },
- /** 递归查找组件清空的方法 */
- findClearValue: function(component) {
- let _this = this
- let clearFuncs = _this.clearFuncs
- let clearFuncNames = _this.clearFuncNames
- let $ch = component.$children
- $ch && $ch.length && $ch.forEach(function(item) {
- let funs = clearFuncNames.filter(function(name) {
- return typeof item[name] === 'function'
- })
- if (funs.length) {
- clearFuncs.push(item[funs[0]])
- } else {
- _this.findClearValue(item)
- }
- })
- }
- }
- }
- </script>
- <style type="text/scss" lang="scss" scoped>
- .en-search {
- display: flex;
- justify-content: center;
- align-items: center;
- }
- .clean-form {
- color: #F56C6C;
- margin-right: 10px;
- }
- </style>
|