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.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 } })