删除过滤栏保存过滤条件的相关功能
This commit is contained in:
parent
17c9a52f94
commit
e042093af4
@ -158,54 +158,15 @@
|
|||||||
>
|
>
|
||||||
<i class="fa fa-times"></i>
|
<i class="fa fa-times"></i>
|
||||||
</button>
|
</button>
|
||||||
<button
|
|
||||||
class="action-btn save-btn"
|
|
||||||
@click="showSaveDialog = true"
|
|
||||||
:title="t('保存当前过滤条件')"
|
|
||||||
>
|
|
||||||
<i class="fa fa-bookmark"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 保存过滤条件对话框 -->
|
|
||||||
<n-modal v-model:show="showSaveDialog">
|
|
||||||
<n-card
|
|
||||||
style="width: 400px"
|
|
||||||
:title="t('保存筛选条件')"
|
|
||||||
:bordered="false"
|
|
||||||
size="huge"
|
|
||||||
role="dialog"
|
|
||||||
aria-modal="true"
|
|
||||||
>
|
|
||||||
<n-form :model="saveForm" ref="saveFormRef">
|
|
||||||
<n-form-item :label="t('过滤器名称')" path="name">
|
|
||||||
<n-input
|
|
||||||
v-model:value="saveForm.name"
|
|
||||||
:placeholder="t('请输入过滤器名称')"
|
|
||||||
size="small"
|
|
||||||
/>
|
|
||||||
</n-form-item>
|
|
||||||
</n-form>
|
|
||||||
<template #footer>
|
|
||||||
<div class="dialog-footer">
|
|
||||||
<n-button @click="showSaveDialog = false" size="small">
|
|
||||||
{{ t('取消') }}
|
|
||||||
</n-button>
|
|
||||||
<n-button type="primary" @click="saveFilter" size="small">
|
|
||||||
{{ t('保存') }}
|
|
||||||
</n-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</n-card>
|
|
||||||
</n-modal>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
|
import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
|
||||||
import { NInput, NSelect, NInputNumber, NDatePicker, NModal, NCard, NForm, NFormItem, NButton, useMessage } from 'naive-ui'
|
import { NInput, NSelect, NInputNumber, NDatePicker } from 'naive-ui'
|
||||||
import { t } from '@/shared/i18n'
|
import { t } from '@/shared/i18n'
|
||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
import { get_session_api_headers } from '@/shared/api/auth'
|
import { get_session_api_headers } from '@/shared/api/auth'
|
||||||
@ -233,11 +194,6 @@ interface Emits {
|
|||||||
const props = defineProps<Props>()
|
const props = defineProps<Props>()
|
||||||
const emit = defineEmits<Emits>()
|
const emit = defineEmits<Emits>()
|
||||||
|
|
||||||
const message = useMessage()
|
|
||||||
const showSaveDialog = ref(false)
|
|
||||||
const saveForm = ref({ name: '' })
|
|
||||||
const saveFormRef = ref()
|
|
||||||
|
|
||||||
// 过滤条件
|
// 过滤条件
|
||||||
const filters = ref<Record<string, any>>({ ...props.modelValue })
|
const filters = ref<Record<string, any>>({ ...props.modelValue })
|
||||||
|
|
||||||
@ -326,23 +282,6 @@ function clearAllFilters() {
|
|||||||
onFilterChange()
|
onFilterChange()
|
||||||
}
|
}
|
||||||
|
|
||||||
// 保存过滤条件
|
|
||||||
function saveFilter() {
|
|
||||||
if (!saveForm.value.name.trim()) {
|
|
||||||
message.warning(t('请输入过滤器名称'))
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// 这里可以保存到本地存储或发送到服务器
|
|
||||||
const savedFilters = JSON.parse(localStorage.getItem('savedFilters') || '{}')
|
|
||||||
savedFilters[saveForm.value.name] = { ...filters.value }
|
|
||||||
localStorage.setItem('savedFilters', JSON.stringify(savedFilters))
|
|
||||||
|
|
||||||
message.success(t('过滤条件已保存'))
|
|
||||||
showSaveDialog.value = false
|
|
||||||
saveForm.value.name = ''
|
|
||||||
}
|
|
||||||
|
|
||||||
// 初始化Link字段的下拉状态
|
// 初始化Link字段的下拉状态
|
||||||
function initLinkDropdownState(fieldName: string) {
|
function initLinkDropdownState(fieldName: string) {
|
||||||
if (!linkDropdownStates.value[fieldName]) {
|
if (!linkDropdownStates.value[fieldName]) {
|
||||||
@ -740,18 +679,6 @@ watch(() => filterableFields.value, (fields) => {
|
|||||||
color: #dc2626;
|
color: #dc2626;
|
||||||
}
|
}
|
||||||
|
|
||||||
.save-btn:hover {
|
|
||||||
background: #f0f9ff;
|
|
||||||
border-color: #93c5fd;
|
|
||||||
color: #2563eb;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dialog-footer {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 响应式设计 */
|
/* 响应式设计 */
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.filter-row {
|
.filter-row {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user