main.vue 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. <template>
  2. <div class="en-search">
  3. <div style="width: 330px">
  4. <el-input v-if="inputSearch" size="small" clearable :placeholder="placeholder" v-model="keyword"
  5. @keyup.native.enter="search">
  6. <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
  7. </el-input>
  8. </div>
  9. <div v-if="advanced">
  10. <el-popover ref="popover" placement="bottom-start" :width="advancedWidth" v-model="popoverVisible">
  11. <slot name="advanced-content"></slot>
  12. <div style="text-align: right; margin: 0">
  13. <el-popover placement="top" width="160" v-model="visible_del_popover">
  14. <p>确定要清空表单吗?</p>
  15. <div style="text-align: right; margin: 0">
  16. <el-button size="mini" type="text" @click="visible_del_popover = false">取消</el-button>
  17. <el-button type="primary" size="mini" @click="handleCleanForm">确定</el-button>
  18. </div>
  19. <el-button size="mini" type="text" slot="reference" class="clean-form">清空</el-button>
  20. </el-popover>
  21. <el-button size="mini" type="text" @click="popoverVisible = false">取消</el-button>
  22. <el-button type="primary" size="mini" @click="advancedSearch">确定</el-button>
  23. </div>
  24. <el-button size="small" style="margin-left: 10px" slot="reference">
  25. 高级搜索
  26. </el-button>
  27. </el-popover>
  28. </div>
  29. </div>
  30. </template>
  31. <script>
  32. export default {
  33. name: 'EnTableSearch',
  34. props: {
  35. // 是否显示普通搜索
  36. inputSearch: {
  37. type: Boolean,
  38. default: true
  39. },
  40. // 是否为高级搜索
  41. advanced: {
  42. type: Boolean,
  43. default: false
  44. },
  45. advancedWidth: {
  46. default: 405
  47. },
  48. placeholder: {
  49. type: String,
  50. default: '请输入关键字'
  51. }
  52. },
  53. data: function() {
  54. return {
  55. keyword: '',
  56. popoverVisible: false,
  57. visible_del_popover: false,
  58. clearFuncs: [],
  59. clearFuncNames: ['clearValue', 'deleteSelected']
  60. }
  61. },
  62. methods: {
  63. /** 普通搜索 */
  64. search: function() {
  65. this.popoverVisible = false
  66. this.$emit('search', this.$data.keyword)
  67. },
  68. /** 高级搜索 */
  69. advancedSearch: function() {
  70. this.visible_del_popover = false
  71. this.popoverVisible = false
  72. this.$emit('advancedSearch', this.$data.keyword)
  73. },
  74. /** 清空表单 */
  75. handleCleanForm: function(event) {
  76. let $parent = this.$parent.$parent
  77. if (!this.$parent.$parent.$refs['advancedForm']) {
  78. $parent = this.$parent.$parent.$parent.$parent
  79. }
  80. let $form = $parent.$refs['advancedForm']
  81. let $forms = $parent.$refs['advancedForms']
  82. let objs = this.MixinClone($parent.advancedForm)
  83. Object.keys(objs).forEach(function(key) {
  84. $parent.advancedForm[key] = ''
  85. })
  86. if ($forms) {
  87. let objss = this.MixinClone($parent.advancedForms)
  88. Object.keys(objss).forEach(function(key) {
  89. $parent.advancedForms[key] = ''
  90. })
  91. this.findClearValue($forms)
  92. }
  93. this.findClearValue($form)
  94. this.clearFuncs.forEach(function(func) {
  95. func(event)
  96. })
  97. this.clearFuncs = []
  98. this.visible_del_popover = false
  99. },
  100. /** 递归查找组件清空的方法 */
  101. findClearValue: function(component) {
  102. let _this = this
  103. let clearFuncs = _this.clearFuncs
  104. let clearFuncNames = _this.clearFuncNames
  105. let $ch = component.$children
  106. $ch && $ch.length && $ch.forEach(function(item) {
  107. let funs = clearFuncNames.filter(function(name) {
  108. return typeof item[name] === 'function'
  109. })
  110. if (funs.length) {
  111. clearFuncs.push(item[funs[0]])
  112. } else {
  113. _this.findClearValue(item)
  114. }
  115. })
  116. }
  117. }
  118. }
  119. </script>
  120. <style type="text/scss" lang="scss" scoped>
  121. .en-search {
  122. display: flex;
  123. justify-content: center;
  124. align-items: center;
  125. }
  126. .clean-form {
  127. color: #F56C6C;
  128. margin-right: 10px;
  129. }
  130. </style>