123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122 |
- <template>
- <div class="en-search">
- <div style="width: 330px">
- <el-input v-if="true" size="small" 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" :width="advancedWidth" v-model:visible="popoverVisible">
- <slot name="advanced-content"></slot>
- <div style="text-align: right; margin: 0">
- <el-popover placement="top" width="160" v-model:visible="visibleDelPopover">
- <p>确定要清空表单吗?</p>
- <div style="text-align: right; margin: 0">
- <el-button size="mini" type="text" @click="visibleDelPopover = false">取消</el-button>
- <el-button type="primary" size="mini" @click="handleCleanForm">确定</el-button>
- </div>
- <template #reference>
- <el-button size="mini" type="text" class="clean-form">清空</el-button>
- </template>
- </el-popover>
- <el-button size="mini" type="text" @click="popoverVisible = false">取消</el-button>
- <el-button type="primary" size="mini" @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, defineProps, 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 { emit } = getCurrentInstance();
- const search = () => {
- popoverVisible.value = false;
- emit('search', keyword.value);
- };
- const advancedSearch = () => {
- visibleDelPopover.value = false;
- popoverVisible.value = false;
- emit('advancedSearch', keyword.value);
- };
- const handleCleanForm = (event: Event) => {
- const $parent = getCurrentInstance()?.proxy?.$parent?.$parent;
- if (!$parent?.$refs['advancedForm']) {
- $parent = $parent?.$parent?.$parent?.$parent;
- }
- 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>
|