index.vue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. <template>
  2. <div class="en-search">
  3. <div style="width: 330px">
  4. <el-input v-if="true" size="small" clearable :placeholder="placeholder" v-model="keyword" @keyup.enter="search">
  5. <template #append>
  6. <el-button @click="search"
  7. ><el-icon style="vertical-align: middle">
  8. <Search />
  9. </el-icon>
  10. <span style="vertical-align: middle"> </span></el-button
  11. >
  12. </template>
  13. </el-input>
  14. </div>
  15. <div v-if="advanced">
  16. <el-popover ref="popover" placement="bottom-start" :width="advancedWidth" v-model:visible="popoverVisible">
  17. <slot name="advanced-content"></slot>
  18. <div style="text-align: right; margin: 0">
  19. <el-popover placement="top" width="160" v-model:visible="visibleDelPopover">
  20. <p>确定要清空表单吗?</p>
  21. <div style="text-align: right; margin: 0">
  22. <el-button size="mini" type="text" @click="visibleDelPopover = false">取消</el-button>
  23. <el-button type="primary" size="mini" @click="handleCleanForm">确定</el-button>
  24. </div>
  25. <template #reference>
  26. <el-button size="mini" type="text" class="clean-form">清空</el-button>
  27. </template>
  28. </el-popover>
  29. <el-button size="mini" type="text" @click="popoverVisible = false">取消</el-button>
  30. <el-button type="primary" size="mini" @click="advancedSearch">确定</el-button>
  31. </div>
  32. <template #reference>
  33. <el-button size="small" style="margin-left: 10px">高级搜索</el-button>
  34. </template>
  35. </el-popover>
  36. </div>
  37. </div>
  38. </template>
  39. <script lang="ts" setup>
  40. import { ref, defineProps, getCurrentInstance } from 'vue';
  41. const props = defineProps<{
  42. inputSearch?: boolean;
  43. advanced?: boolean;
  44. advancedWidth?: number;
  45. placeholder?: string;
  46. }>();
  47. const keyword = ref('');
  48. const popoverVisible = ref(false);
  49. const visibleDelPopover = ref(false);
  50. const clearFuncs = ref<Function[]>([]);
  51. const clearFuncNames = ref(['clearValue', 'deleteSelected']);
  52. const { emit } = getCurrentInstance();
  53. const search = () => {
  54. popoverVisible.value = false;
  55. emit('search', keyword.value);
  56. };
  57. const advancedSearch = () => {
  58. visibleDelPopover.value = false;
  59. popoverVisible.value = false;
  60. emit('advancedSearch', keyword.value);
  61. };
  62. const handleCleanForm = (event: Event) => {
  63. const $parent = getCurrentInstance()?.proxy?.$parent?.$parent;
  64. if (!$parent?.$refs['advancedForm']) {
  65. $parent = $parent?.$parent?.$parent?.$parent;
  66. }
  67. const $form = $parent?.$refs['advancedForm'];
  68. const $forms = $parent?.$refs['advancedForms'];
  69. const objs = JSON.parse(JSON.stringify($parent?.advancedForm));
  70. Object.keys(objs).forEach((key) => {
  71. $parent.advancedForm[key] = '';
  72. });
  73. if ($forms) {
  74. const objss = JSON.parse(JSON.stringify($parent?.advancedForms));
  75. Object.keys(objss).forEach((key) => {
  76. $parent.advancedForms[key] = '';
  77. });
  78. findClearValue($forms);
  79. }
  80. findClearValue($form);
  81. clearFuncs.value.forEach((func) => {
  82. func(event);
  83. });
  84. clearFuncs.value = [];
  85. visibleDelPopover.value = false;
  86. };
  87. const findClearValue = (component: any) => {
  88. const $ch = component.$children;
  89. $ch &&
  90. $ch.length &&
  91. $ch.forEach((item: any) => {
  92. const funs = clearFuncNames.value.filter((name) => typeof item[name] === 'function');
  93. if (funs.length) {
  94. clearFuncs.value.push(item[funs[0]]);
  95. } else {
  96. findClearValue(item);
  97. }
  98. });
  99. };
  100. </script>
  101. <style scoped>
  102. .en-search {
  103. display: flex;
  104. justify-content: center;
  105. align-items: center;
  106. }
  107. .clean-form {
  108. color: #f56c6c;
  109. margin-right: 10px;
  110. }
  111. </style>