<n-config-provider inline-theme-disabled :theme-overrides="themeOverrides"> | <n-config-provider inline-theme-disabled :theme-overrides="themeOverrides"> | ||||
<n-loading-bar-provider> | <n-loading-bar-provider> | ||||
<loading-bar /> | <loading-bar /> | ||||
<router-view v-slot="{ Component }"> | |||||
<component :is="Component" /> | |||||
</router-view> | |||||
<n-dialog-provider> | |||||
<dialog-content /> | |||||
<n-message-provider> | |||||
<message-content /> | |||||
</n-message-provider> | |||||
<router-view v-slot="{ Component }"> | |||||
<component :is="Component" /> | |||||
</router-view> | |||||
</n-dialog-provider> | |||||
</n-loading-bar-provider> | </n-loading-bar-provider> | ||||
</n-config-provider> | </n-config-provider> | ||||
</template> | </template> | ||||
<script setup> | <script setup> | ||||
import themeOverrides from '@/utils/ui/theme.js' | import themeOverrides from '@/utils/ui/theme.js' | ||||
import LoadingBar from '@/components/LoadingBar/index.vue' | |||||
import loadingBar from '@/components/LoadingBar/index.vue' | |||||
import messageContent from '@/components/Message/index.vue' | |||||
import dialogContent from '@/components/Dialog/index.vue' | |||||
</script> | </script> | ||||
<template> | |||||
<n-config-provider inline-theme-disabled :theme-overrides="themeOverrides"> | |||||
<n-loading-bar-provider> | |||||
<!-- <loading-bar /> --> | |||||
<n-dialog-provider> | |||||
<dialog-content /> | |||||
<n-message-provider> | |||||
<message-content /> | |||||
<slot /> | |||||
</n-message-provider> | |||||
</n-dialog-provider> | |||||
</n-loading-bar-provider> | |||||
</n-config-provider> | |||||
</template> | |||||
<script setup> | |||||
import themeOverrides from '@/utils/ui/theme.js' | |||||
// import MessageContent from './MessageContent.vue' | |||||
// import DialogContent from './DialogContent.vue' | |||||
// import LoadingBar from './LoadingBar.vue' | |||||
// import { useAppStore } from '@/store/modules/app' | |||||
// const appStore = useAppStore() | |||||
</script> |
v-for="(item,index) in getData.data" | v-for="(item,index) in getData.data" | ||||
:key="`tag_${index}`" | :key="`tag_${index}`" | ||||
v-bind="getProps" | v-bind="getProps" | ||||
:color="getFilter(item[getData.rowKey]).color || getProps.color" | |||||
:color="getFilter(item[getData.rowKey])?.color || getProps?.color" | |||||
> | > | ||||
{{ getFilter(item[getData.rowKey]).label }} | {{ getFilter(item[getData.rowKey]).label }} | ||||
</n-tag> | </n-tag> | ||||
const data = filters.find(item => { | const data = filters.find(item => { | ||||
return item.key === value | return item.key === value | ||||
}) | }) | ||||
return data | |||||
return data || { | |||||
key: value, | |||||
label: value | |||||
} | |||||
} | } | ||||
/* 获取传递的数据 */ | /* 获取传递的数据 */ | ||||
const getData = computed(() => { | const getData = computed(() => { | ||||
return { | return { |
<template /> | <template /> | ||||
<script setup> | <script setup> | ||||
import { isNullOrUndef } from '@/utils/is' | |||||
import { useDialog } from 'naive-ui' | import { useDialog } from 'naive-ui' | ||||
window['$dialog'] = useDialog() | |||||
const NDialog = useDialog() | |||||
class Dialog { | |||||
success(title, option) { | |||||
this.showDialog('success', { title, ...option }) | |||||
} | |||||
warning(title, option) { | |||||
this.showDialog('warning', { title, ...option }) | |||||
} | |||||
error(title, option) { | |||||
this.showDialog('error', { title, ...option }) | |||||
} | |||||
showDialog(type = 'success', option) { | |||||
if (isNullOrUndef(option.title)) { | |||||
option.showIcon = false | |||||
} | |||||
NDialog[type]({ | |||||
positiveText: 'OK', | |||||
closable: false, | |||||
...option | |||||
}) | |||||
} | |||||
confirm(option = {}) { | |||||
this.showDialog(option.type || 'error', { | |||||
positiveText: '确定', | |||||
negativeText: '取消', | |||||
onPositiveClick: option.confirm, | |||||
onNegativeClick: option.cancel, | |||||
onMaskClick: option.cancel, | |||||
...option | |||||
}) | |||||
} | |||||
} | |||||
window['$dialog'] = new Dialog() | |||||
Object.freeze(window.$dialog) | |||||
Object.defineProperty(window, '$dialog', { | |||||
configurable: false, | |||||
writable: false | |||||
}) | |||||
</script> | </script> | ||||
let loadingMessage = null | let loadingMessage = null | ||||
class Message { | class Message { | ||||
/** | |||||
* 规则: | |||||
* * loading message只显示一个,新的message会替换正在显示的loading message | |||||
* * loading message不会自动清除,除非被替换成非loading message,非loading message默认2秒后自动清除 | |||||
*/ | |||||
removeMessage(message, duration = 2000) { | removeMessage(message, duration = 2000) { | ||||
setTimeout(() => { | setTimeout(() => { | ||||
if (message) { | if (message) { | ||||
showMessage(type, content, option = {}) { | showMessage(type, content, option = {}) { | ||||
if (loadingMessage && loadingMessage.type === 'loading') { | if (loadingMessage && loadingMessage.type === 'loading') { | ||||
// 如果存在则替换正在显示的loading message | |||||
loadingMessage.type = type | loadingMessage.type = type | ||||
loadingMessage.content = content | loadingMessage.content = content | ||||
if (type !== 'loading') { | if (type !== 'loading') { | ||||
// 非loading message需设置自动清除 | |||||
this.removeMessage(loadingMessage, option.duration) | this.removeMessage(loadingMessage, option.duration) | ||||
} | } | ||||
} else { | } else { | ||||
// 不存在正在显示的loading则新建一个message,如果新建的message是loading message则将message赋值存储下来 | |||||
const message = NMessage[type](content, option) | const message = NMessage[type](content, option) | ||||
if (type === 'loading') { | if (type === 'loading') { | ||||
loadingMessage = message | loadingMessage = message |
} | } | ||||
addMenu(params) | addMenu(params) | ||||
.then(res => { | .then(res => { | ||||
console.log(res) | |||||
handleClose() | handleClose() | ||||
}) | }) | ||||
} else { | } else { | ||||
// console.log('error') | |||||
$message.error('清先完成校验') | |||||
} | } | ||||
}) | }) | ||||
return false | return false |