<script lang="ts" setup>
|
import { computed, reactive, toRefs } from 'vue';
|
|
import { $t } from '#/locales';
|
|
interface State {
|
popoverVisible: boolean;
|
loading: boolean;
|
list: any[];
|
keyword: string;
|
}
|
|
const props = defineProps({
|
list: { type: Array, default: () => [] },
|
});
|
|
const emit = defineEmits(['confirm']);
|
|
defineExpose({ closePopover });
|
|
const columns: any[] = [{ title: '常用语', dataIndex: 'commonWordsText', key: 'commonWordsText', ellipsis: true }];
|
const state = reactive<State>({
|
popoverVisible: false,
|
loading: false,
|
list: [],
|
keyword: '',
|
});
|
const { popoverVisible, loading, keyword } = toRefs(state);
|
|
const getList = computed(() => (state.keyword ? props.list.filter((o: any) => o.commonWordsText.includes(state.keyword)) : props.list));
|
|
function openPopover() {
|
state.keyword = '';
|
}
|
function closePopover() {
|
state.popoverVisible = false;
|
}
|
async function handleSubmit(commonWordsText) {
|
emit('confirm', commonWordsText || '');
|
state.popoverVisible = false;
|
}
|
</script>
|
<template>
|
<a-popover placement="top" trigger="click" overlay-class-name="commonWords-popover" v-model:open="popoverVisible" @open-change="openPopover">
|
<a-button type="link" post-icon="icon-ym icon-ym-arrow-down" class="!px-0">{{ $t('common.moreText') }}</a-button>
|
<template #content>
|
<div class="commonWords-content">
|
<a-input-search :placeholder="$t('common.enterKeyword')" allow-clear v-model:value="keyword" />
|
<a-table :data-source="getList" :columns="columns" size="small" :pagination="false" :show-header="false" :loading="loading" :scroll="{ y: 220 }">
|
<template #bodyCell="{ column, record }">
|
<template v-if="column.key === 'commonWordsText'">
|
<span class="cursor-pointer" @click="handleSubmit(record.commonWordsText)">{{ record.commonWordsText }}</span>
|
</template>
|
</template>
|
</a-table>
|
</div>
|
</template>
|
</a-popover>
|
</template>
|
<style lang="scss">
|
.commonWords-popover {
|
z-index: 1001 !important;
|
|
.ant-popover-inner-content {
|
width: 300px;
|
padding: 10px;
|
|
.commonWords-content {
|
display: flex;
|
flex-direction: column;
|
}
|
}
|
}
|
</style>
|
