diff --git a/src/App.vue b/src/App.vue
index e809c43..87a7d19 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -45,21 +45,4 @@
-
-
-
-
-
{{ ui.confirmTitle }}
-
{{ ui.confirmDesc }}
-
{{ c }}
-
-
-
-
- {{ ui.toastMsg }}
-
-
diff --git a/src/main.js b/src/main.js
index 7adf515..ae5dbc0 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,6 +3,8 @@ import App from './App.vue'
import router from './router'
import { setupStore } from './stores'
import './styles/prototype.css'
+import 'tdesign-vue-next/es/message/style/css.js'
+import 'tdesign-vue-next/es/dialog/style/css.js'
const app = createApp(App)
setupStore(app)
diff --git a/src/stores/modules/uiStore.js b/src/stores/modules/uiStore.js
index 3331569..3b31f28 100644
--- a/src/stores/modules/uiStore.js
+++ b/src/stores/modules/uiStore.js
@@ -1,33 +1,53 @@
import { defineStore } from 'pinia'
-import { ref } from 'vue'
+import { DialogPlugin, MessagePlugin } from 'tdesign-vue-next'
+import { h } from 'vue'
export const useUiStore = defineStore('ui', () => {
- const toastMsg = ref('')
- const toastVisible = ref(false)
- let toastTimer = null
function toast(message) {
- toastMsg.value = message
- toastVisible.value = true
- clearTimeout(toastTimer)
- toastTimer = setTimeout(() => { toastVisible.value = false }, 2200)
+ MessagePlugin.info({ content: String(message ?? ''), duration: 2200 })
}
- const confirmVisible = ref(false)
- const confirmTitle = ref('')
- const confirmDesc = ref('')
- const confirmChecks = ref([])
- let confirmResolve = null
- function confirm(title, desc = '系统将校验设备状态和流程互斥条件,确认通过后提交本次操作。', checks = ['设备在线', '无活动告警', '指令互斥检查']) {
- confirmTitle.value = title
- confirmDesc.value = desc
- confirmChecks.value = checks
- confirmVisible.value = true
- return new Promise((resolve) => { confirmResolve = resolve })
- }
- function resolveConfirm(ok) {
- confirmVisible.value = false
- if (confirmResolve) { confirmResolve(ok); confirmResolve = null }
+ function confirm(
+ title,
+ desc = '系统将校验设备状态和流程互斥条件,确认通过后提交本次操作。',
+ checks = ['设备在线', '无活动告警', '指令互斥检查']
+ ) {
+ return new Promise((resolve) => {
+ const list = Array.isArray(checks) ? checks.filter(Boolean) : []
+ const body = list.length
+ ? () =>
+ h('div', { class: 'ui-confirm-body' }, [
+ h('p', desc),
+ h(
+ 'div',
+ { class: 'ui-confirm-checks' },
+ list.map((item) => h('div', { class: 'ui-confirm-check' }, item))
+ ),
+ ])
+ : desc
+
+ const dialog = DialogPlugin.confirm({
+ header: title,
+ body,
+ confirmBtn: '确认执行',
+ cancelBtn: '取消',
+ theme: 'warning',
+ onConfirm: () => {
+ dialog.hide()
+ resolve(true)
+ },
+ onClose: () => {
+ resolve(false)
+ },
+ onCloseBtnClick: () => {
+ resolve(false)
+ },
+ onCancel: () => {
+ resolve(false)
+ },
+ })
+ })
}
- return { toastMsg, toastVisible, toast, confirmVisible, confirmTitle, confirmDesc, confirmChecks, confirm, resolveConfirm }
+ return { toast, confirm }
})