123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127 |
- <template>
- <div class="en-search dark:!bg-[#060818]">
- <div style="width: 330px">
- <el-input v-if="true" size="small" class="dark:!bg-[#060818]" clearable :placeholder="placeholder" v-model="keyword" @keyup.enter="search">
- <template #append>
- <el-button @click="search">
- <el-icon style="vertical-align: middle">
- <Search />
- </el-icon>
- <span style="vertical-align: middle"> </span>
- </el-button>
- </template>
- </el-input>
- </div>
- <div v-if="advanced">
- <el-popover ref="popover" placement="bottom-start" trigger="click" :width="advancedWidth" v-model="popoverVisible">
- <slot name="advanced-content" @click.stop></slot>
- <div style="text-align: right; margin: 0">
- <el-popover placement="top" width="160" v-model="visibleDelPopover">
- <p>确定要清空表单吗?</p>
- <div style="text-align: right; margin: 0">
- <el-button size="small" link @click="visibleDelPopover = false">取消</el-button>
- <el-button type="primary" size="small" @click="handleCleanForm">确定</el-button>
- </div>
- <template #reference>
- <el-button size="small" link class="clean-form">清空</el-button>
- </template>
- </el-popover>
- <el-button size="small" link @click="popoverVisible = false">取消</el-button>
- <el-button type="primary" size="small" @click="advancedSearch">确定</el-button>
- </div>
- <template #reference>
- <el-button size="small" style="margin-left: 10px">高级搜索</el-button>
- </template>
- </el-popover>
- </div>
- </div>
- </template>
- <script lang="ts" setup>
- import { ref, getCurrentInstance } from 'vue';
- const props = defineProps<{
- inputSearch?: boolean;
- advanced?: boolean;
- advancedWidth?: number;
- placeholder?: string;
- }>();
- const keyword = ref('');
- const popoverVisible = ref(false);
- const visibleDelPopover = ref(false);
- const clearFuncs = ref<Function[]>([]);
- const clearFuncNames = ref(['clearValue', 'deleteSelected']);
- const instance = getCurrentInstance();
- const emit = instance?.emit as (event: string, ...args: any[]) => void;
- const search = () => {
- popoverVisible.value = false;
- emit('search', keyword.value);
- };
- const advancedSearch = () => {
- visibleDelPopover.value = false;
- popoverVisible.value = false;
- emit('advancedSearch', keyword.value);
- };
- function getRootParent(instance: any): any {
- if (!instance || !instance.$parent) return instance;
- return getRootParent(instance.$parent);
- }
- const rootParent = getRootParent(instance?.proxy);
- const handleCleanForm = (event: Event) => {
- const $parent = rootParent;
- const $form = $parent?.$refs['advancedForm'];
- const $forms = $parent?.$refs['advancedForms'];
- const objs = JSON.parse(JSON.stringify($parent?.advancedForm || {}));
- Object.keys(objs).forEach((key) => {
- $parent.advancedForm[key] = '';
- });
- if ($forms) {
- const objss = JSON.parse(JSON.stringify($parent?.advancedForms || {}));
- Object.keys(objss).forEach((key) => {
- $parent.advancedForms[key] = '';
- });
- findClearValue($forms);
- }
- findClearValue($form);
- clearFuncs.value.forEach((func) => {
- func(event);
- });
- clearFuncs.value = [];
- visibleDelPopover.value = false;
- };
- const findClearValue = (component: any) => {
- const $ch = component.$children;
- $ch &&
- $ch.length &&
- $ch.forEach((item: any) => {
- const funs = clearFuncNames.value.filter((name) => typeof item[name] === 'function');
- if (funs.length) {
- clearFuncs.value.push(item[funs[0]]);
- } else {
- findClearValue(item);
- }
- });
- };
- </script>
- <style scoped>
- .en-search {
- display: flex;
- justify-content: center;
- align-items: center;
- }
- .clean-form {
- color: #f56c6c;
- margin-right: 10px;
- }
- </style>
|