message dialog

src/App.vue

@@ -2,16 +2,25 @@
   <n-config-provider inline-theme-disabled :theme-overrides="themeOverrides">
     <n-loading-bar-provider>
       <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-config-provider>
 </template>
 
 <script setup>
 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>
 
 <style lang="scss">

src/components/AppProvider/index.vue

@@ -1,24 +0,0 @@
-<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>

src/components/DataTable/tools/Tags.vue

@@ -4,7 +4,7 @@
       v-for="(item,index) in getData.data"
       :key="`tag_${index}`"
       v-bind="getProps"
-      :color="getFilter(item[getData.rowKey]).color || getProps.color"
+      :color="getFilter(item[getData.rowKey])?.color || getProps?.color"
     >
       {{ getFilter(item[getData.rowKey]).label }}
     </n-tag>
@@ -60,9 +60,11 @@ export default defineComponent({
       const data = filters.find(item => {
         return item.key === value
       })
-      return data
+      return data || {
+        key: value,
+        label: value
+      }
     }
-
     /* 获取传递的数据 */
     const getData = computed(() => {
       return {

src/components/Dialog/index.vue

@@ -1,6 +1,52 @@
 <template />
 
 <script setup>
+import { isNullOrUndef } from '@/utils/is'
 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>
+

src/components/Message/index.vue

@@ -8,12 +8,6 @@ const NMessage = useMessage()
 let loadingMessage = null
 
 class Message {
-  /**
-   * 规则：
-   * * loading message只显示一个，新的message会替换正在显示的loading message
-   * * loading message不会自动清除，除非被替换成非loading message，非loading message默认2秒后自动清除
-   */
-
   removeMessage(message, duration = 2000) {
     setTimeout(() => {
       if (message) {
@@ -25,16 +19,13 @@ class Message {
 
   showMessage(type, content, option = {}) {
     if (loadingMessage && loadingMessage.type === 'loading') {
-      // 如果存在则替换正在显示的loading message
       loadingMessage.type = type
       loadingMessage.content = content
 
       if (type !== 'loading') {
-        // 非loading message需设置自动清除
         this.removeMessage(loadingMessage, option.duration)
       }
     } else {
-      // 不存在正在显示的loading则新建一个message,如果新建的message是loading message则将message赋值存储下来
       const message = NMessage[type](content, option)
       if (type === 'loading') {
         loadingMessage = message

src/views/system/menu/components/MenuModal.vue

@@ -196,11 +196,10 @@ export default defineComponent({
           }
           addMenu(params)
             .then(res => {
-              console.log(res)
               handleClose()
             })
         } else {
-          // console.log('error')
+          $message.error('清先完成校验')
         }
       })
       return false