index.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. <template>
  2. <div class="en-search dark:!bg-[#060818]">
  3. <div style="width: 330px">
  4. <el-input v-if="true" size="small" class="dark:!bg-[#060818]" 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>
  11. </el-button>
  12. </template>
  13. </el-input>
  14. </div>
  15. <div v-if="advanced">
  16. <el-popover ref="popover" placement="bottom-start" trigger="click" :width="advancedWidth" v-model="popoverVisible">
  17. <slot name="advanced-content" @click.stop></slot>
  18. <div style="text-align: right; margin: 0">
  19. <el-popover placement="top" width="160" v-model="visibleDelPopover">
  20. <p>确定要清空表单吗?</p>
  21. <div style="text-align: right; margin: 0">
  22. <el-button size="small" link @click="visibleDelPopover = false">取消</el-button>
  23. <el-button type="primary" size="small" @click="handleCleanForm">确定</el-button>
  24. </div>
  25. <template #reference>
  26. <el-button size="small" link class="clean-form">清空</el-button>
  27. </template>
  28. </el-popover>
  29. <el-button size="small" link @click="popoverVisible = false">取消</el-button>
  30. <el-button type="primary" size="small" @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, 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 instance = getCurrentInstance();
  53. const emit = instance?.emit as (event: string, ...args: any[]) => void;
  54. const search = () => {
  55. popoverVisible.value = false;
  56. emit('search', keyword.value);
  57. };
  58. const advancedSearch = () => {
  59. visibleDelPopover.value = false;
  60. popoverVisible.value = false;
  61. emit('advancedSearch', keyword.value);
  62. };
  63. function getRootParent(instance: any): any {
  64. if (!instance || !instance.$parent) return instance;
  65. return getRootParent(instance.$parent);
  66. }
  67. const rootParent = getRootParent(instance?.proxy);
  68. const handleCleanForm = (event: Event) => {
  69. const $parent = rootParent;
  70. const $form = $parent?.$refs['advancedForm'];
  71. const $forms = $parent?.$refs['advancedForms'];
  72. const objs = JSON.parse(JSON.stringify($parent?.advancedForm || {}));
  73. Object.keys(objs).forEach((key) => {
  74. $parent.advancedForm[key] = '';
  75. });
  76. if ($forms) {
  77. const objss = JSON.parse(JSON.stringify($parent?.advancedForms || {}));
  78. Object.keys(objss).forEach((key) => {
  79. $parent.advancedForms[key] = '';
  80. });
  81. findClearValue($forms);
  82. }
  83. findClearValue($form);
  84. clearFuncs.value.forEach((func) => {
  85. func(event);
  86. });
  87. clearFuncs.value = [];
  88. visibleDelPopover.value = false;
  89. };
  90. const findClearValue = (component: any) => {
  91. const $ch = component.$children;
  92. $ch &&
  93. $ch.length &&
  94. $ch.forEach((item: any) => {
  95. const funs = clearFuncNames.value.filter((name) => typeof item[name] === 'function');
  96. if (funs.length) {
  97. clearFuncs.value.push(item[funs[0]]);
  98. } else {
  99. findClearValue(item);
  100. }
  101. });
  102. };
  103. </script>
  104. <style scoped>
  105. .en-search {
  106. display: flex;
  107. justify-content: center;
  108. align-items: center;
  109. }
  110. .clean-form {
  111. color: #f56c6c;
  112. margin-right: 10px;
  113. }
  114. </style>