From 2d93ef10892700a0f4902112fff07dc2933f40fe Mon Sep 17 00:00:00 2001
From: Sagi <chenshj@inspur.com>
Date: Mon, 7 Nov 2022 18:56:12 +0800
Subject: [PATCH 1/2] feature(message-box): support dispaly exception detail

---
 .../message-box/src/message-box.component.tsx | 31 ++++++++++++-------
 .../message-box/src/message-box.props.ts      |  3 +-
 .../message-box/src/message-box.service.tsx   |  5 +--
 packages/ui-vue/demos/message-box/errors.vue  | 25 +++++++++++++++
 packages/ui-vue/src/app.vue                   |  2 ++
 5 files changed, 52 insertions(+), 14 deletions(-)
 create mode 100644 packages/ui-vue/demos/message-box/errors.vue

diff --git a/packages/ui-vue/components/message-box/src/message-box.component.tsx b/packages/ui-vue/components/message-box/src/message-box.component.tsx
index a77adc1dd4b..1f99457d0bb 100644
--- a/packages/ui-vue/components/message-box/src/message-box.component.tsx
+++ b/packages/ui-vue/components/message-box/src/message-box.component.tsx
@@ -6,7 +6,7 @@ import { ModalButton } from "../../modal";
 export interface ExceptionInfo {
     date: string;
     message: string;
-    copyButton: ModalButton;
+    detail: string;
 }
 
 export default defineComponent({
@@ -17,7 +17,7 @@ export default defineComponent({
         const messageType = ref(props.type);
         const messageTitle = ref(props.title);
         const messageDetail = ref(props.detail);
-        const exception = ref<ExceptionInfo>({} as ExceptionInfo);
+        const exception = ref(props.exceptionInfo);
         const happend = ref('');
         const promptInputType = ref('');
         const promptFontSize = ref(14);
@@ -34,8 +34,9 @@ export default defineComponent({
         const showCancelButton = ref(true);
         const showOkButton = ref(true);
 
-        const showLines = ref('');
-        const exceptionMessageMaxHeight = ref(0);
+        const copyButtonText = ref('复制详细信息');
+        const showLines = ref(3);
+        const exceptionMessageMaxHeight = ref(200);
 
         const messageBoxContainerClass = computed(() => {
             const classObject = {
@@ -52,6 +53,8 @@ export default defineComponent({
             const styleObject = {} as Record<string, any>;
             if (messageType.value === 'prompt') {
                 styleObject.padding = '0.5rem 0.5rem 1rem 1.5rem';
+            } else if (messageType.value === 'error') {
+                styleObject.padding = '0.5rem 1.5rem 1rem 1.5rem';
             }
             return styleObject;
         });
@@ -85,11 +88,11 @@ export default defineComponent({
 
         const exceptionDateMessage = computed(() => {
             const exceptionDate = exception.value && exception.value.date || '';
-            return `${happend.value} : ${exceptionDate}`;
+            return `发生时间 : ${exceptionDate}`;
         });
 
         const shouldShowExceptionMessage = computed(() => {
-            return !!exception.value && !!exception.value.message;
+            return !!exception.value && !!exception.value.detail;
         });
 
         const exceptionMessageStyle = computed(() => {
@@ -110,7 +113,7 @@ export default defineComponent({
         });
 
         const safeExceptionMessage = computed(() => {
-            const safeMessage = exception.value && exception.value.message || '';
+            const safeMessage = exception.value && exception.value.detail || '';
             return safeMessage;
         });
 
@@ -201,7 +204,7 @@ export default defineComponent({
         });
 
         const shouldShowCopyButton = computed(() => {
-            return exception.value && exception.value.copyButton && exception.value.copyButton.text;
+            return exception.value && exception.value.date && exception.value.message && exception.value.detail;
         });
 
         function onClickCopyButton($event: MouseEvent) {
@@ -353,7 +356,7 @@ export default defineComponent({
                         {
                             shouldShowCopyButton.value &&
                             <span style="width: 100%;color: #2A87FF;padding-left: 37px;">
-                                <span onClick={onClickCopyButton} style="cursor: pointer;">{exception.value.copyButton.text}</span>
+                                <span onClick={onClickCopyButton} style="cursor: pointer;">{copyButtonText.value}</span>
                             </span>
 
                         }
@@ -408,7 +411,7 @@ export default defineComponent({
                                         {shouldShowExceptionDate.value && <div>{exceptionDateMessage.value}</div>}
                                         {shouldShowExceptionMessage.value &&
                                             <div id="exception_error_msg" ref="exceptionMessageRef" style={exceptionMessageStyle.value}>
-                                                {exceptionMessageDetail.value}: <span v-html={safeExceptionMessage.value}></span>
+                                                详细信息 : <span v-html={safeExceptionMessage.value}></span>
                                             </div >
                                         }
                                         {
@@ -452,6 +455,12 @@ export default defineComponent({
                     {
                         shouldShowOkCancelButtons.value &&
                         <div class="modal-footer">
+                            {
+                                shouldShowCopyButton.value &&
+                                <span style="width: 100%;color: #2A87FF;padding-left: 37px;">
+                                    <span onClick={onClickCopyButton} style="cursor: pointer;">{copyButtonText.value}</span>
+                                </span>
+                            }
                             {
                                 shouldShowCancelButton.value &&
                                 <button type="button" class="btn btn-secondary btn-lg" onClick={onClickCancelButton}>
@@ -471,7 +480,7 @@ export default defineComponent({
                             {
                                 shouldShowCopyButton.value &&
                                 <span style="width: 100%;color: #2A87FF;padding-left: 37px;">
-                                    <span onClick={onClickCopyButton} style="cursor: pointer;">{exception.value.copyButton.text}</span>
+                                    <span onClick={onClickCopyButton} style="cursor: pointer;">{copyButtonText.value}</span>
                                 </span>
                             }
                             {
diff --git a/packages/ui-vue/components/message-box/src/message-box.props.ts b/packages/ui-vue/components/message-box/src/message-box.props.ts
index fb762e9152a..4fc546e4a54 100644
--- a/packages/ui-vue/components/message-box/src/message-box.props.ts
+++ b/packages/ui-vue/components/message-box/src/message-box.props.ts
@@ -5,6 +5,7 @@ export const messageBoxProps = {
     title: { Type: String, default: '' },
     detail: { Type: String, default: '' },
     okButtonText: { Type: String, default: '确定' },
-    cancelButtonText: { Type: String, default: '取消' }
+    cancelButtonText: { Type: String, default: '取消' },
+    exceptionInfo: { Type: Object }
 };
 export type MessageBoxProps = ExtractPropTypes<typeof messageBoxProps>;
diff --git a/packages/ui-vue/components/message-box/src/message-box.service.tsx b/packages/ui-vue/components/message-box/src/message-box.service.tsx
index 6bb78b86ec6..e050fe37692 100644
--- a/packages/ui-vue/components/message-box/src/message-box.service.tsx
+++ b/packages/ui-vue/components/message-box/src/message-box.service.tsx
@@ -68,13 +68,14 @@ export default class MessageBoxService {
         this.show(props);
     }
 
-    static error(message: string, detail: string) {
+    static error(message: string, detail: string, date?: string): any {
         const props: MessageBoxProps = reactive({
             type: 'error',
             title: message,
             detail,
             okButtonText: '关闭',
-            cancelButtonText: ''
+            cancelButtonText: '',
+            exceptionInfo: { date, message, detail } as any
         });
         this.show(props);
     }
diff --git a/packages/ui-vue/demos/message-box/errors.vue b/packages/ui-vue/demos/message-box/errors.vue
new file mode 100644
index 00000000000..e5388b45003
--- /dev/null
+++ b/packages/ui-vue/demos/message-box/errors.vue
@@ -0,0 +1,25 @@
+<script setup>
+import { inject } from 'vue';
+
+const MessageBoxService = inject('MessageBoxService');
+const exceptionInfo = {
+    date: '2022/11/07 16:23:00',
+    message: '程序发生了错误',
+    detail: `
+        java.lang.RuntimeException: null
+        at io.iec.edp.caf.commons.event.entity.MethodDelegate.invoke(MethodDelegate.java:58)
+        at io.iec.edp.caf.commons.event.EventHandlerSet.fire(EventHandlerSet.java:89)
+        at io.iec.edp.caf.commons.event.EventHandlerSet$SynchronizedEventHandlerSet.fire(EventHandlerSet.java:167)
+        at io.iec.edp.caf.commons.event.EventManager.fire(EventManager.java:54)
+        at com.inspur.edp.lcm.metadata.core.event.MetadataEventManager.fireMetadataSavedEvent(MetadataEventManager.java:71)
+        at com.inspur.edp.lcm.metadata.core.event.MetadataEventBroker.fireMetadataSavedEvent(MetadataEventBroker.java:44)
+        at com.inspur.edp.lcm.metadata.core.MetadataCoreManager.saveMetadata(MetadataCoreManager.java:187)
+    `
+};
+function showError() {
+    MessageBoxService.error(exceptionInfo.message, exceptionInfo.detail, exceptionInfo.date);
+}
+</script>
+<template>
+    <f-button style="margin: 5px" :type="'danger'" @click="showError"> 显示异常 </f-button>
+</template>
diff --git a/packages/ui-vue/src/app.vue b/packages/ui-vue/src/app.vue
index 4c5c16be445..b2fc5044760 100644
--- a/packages/ui-vue/src/app.vue
+++ b/packages/ui-vue/src/app.vue
@@ -13,6 +13,7 @@ import ComboList from './components/combo-list.vue';
 import MessageBoxBasic from '../demos/message-box/basic.vue';
 import MessageBoxTypes from '../demos/message-box/types.vue';
 import MessageBoxPrompt from '../demos/message-box/prompt.vue';
+import MessageBoxErrors from '../demos/message-box/errors.vue';
 import Modal from './components/modal.vue';
 import Notify from './components/notify.vue';
 import Popover from './components/popover.vue';
@@ -34,6 +35,7 @@ const routes: Record<string, any> = {
     '/message-box/basic': MessageBoxBasic,
     '/message-box/types': MessageBoxTypes,
     '/message-box/prompt': MessageBoxPrompt,
+    '/message-box/errors': MessageBoxErrors,
     '/modal': Modal,
     '/notify': Notify,
     '/popover': Popover,
-- 
Gitee


From 165b2bf39239cf57b3911201f1d7d6da591634a0 Mon Sep 17 00:00:00 2001
From: Sagi <chenshj@inspur.com>
Date: Mon, 7 Nov 2022 19:14:58 +0800
Subject: [PATCH 2/2] feature(message-box): support expand and collapse
 exception detail

---
 .../message-box/src/message-box.component.tsx | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/ui-vue/components/message-box/src/message-box.component.tsx b/packages/ui-vue/components/message-box/src/message-box.component.tsx
index 1f99457d0bb..45ec0795971 100644
--- a/packages/ui-vue/components/message-box/src/message-box.component.tsx
+++ b/packages/ui-vue/components/message-box/src/message-box.component.tsx
@@ -36,7 +36,7 @@ export default defineComponent({
 
         const copyButtonText = ref('复制详细信息');
         const showLines = ref(3);
-        const exceptionMessageMaxHeight = ref(200);
+        const exceptionMessageMaxHeight = ref(480);
 
         const messageBoxContainerClass = computed(() => {
             const classObject = {
@@ -121,21 +121,21 @@ export default defineComponent({
             return true;
         });
 
+        const expandExceptionMessage = ref(false);
+        const expandText = ref('展开');
+        const collapseText = ref('收起');
         const expandHandleStyle = computed(() => {
             const styleObject = {
                 'display': 'block',
-                'text-align': 'right' as TextAlignProperty,
                 'color': '#2A87FF'
-            };
+            } as Record<string, any>;
+            styleObject['text-align'] = expandExceptionMessage.value ? '' : 'right';
             return styleObject;
         });
 
-        const expandExceptionMessage = ref(false);
-        const expandText = ref('');
-        const collapseText = ref('');
-
         function toggalExceptionMessage(expand: boolean, $event: Event) {
-
+            expandExceptionMessage.value = !expandExceptionMessage.value;
+            showLines.value = expandExceptionMessage.value ? 20 : 3;
         }
 
         function onClickExpand(payload: MouseEvent) {
@@ -420,13 +420,13 @@ export default defineComponent({
                                                 {
                                                     expandExceptionMessage.value &&
                                                     <span onClick={onClickExpand} style="cursor: pointer;">
-                                                        {expandText.value}
+                                                        {collapseText.value}
                                                     </span >
                                                 }
                                                 {
                                                     !expandExceptionMessage.value &&
                                                     <span onClick={onClickCollapse} style="cursor: pointer;">
-                                                        {collapseText.value}
+                                                        {expandText.value}
                                                     </span>
                                                 }
                                             </span >
-- 
Gitee