feat: 修改登录过期提示，Tracking详情页邮箱位置

src/views/Login/src/loginView.vue

@@ -32,22 +32,26 @@ const handleTokenRedirect = () => {
       .then((res: any) => {
         if (res.code === 200) {
           const { data } = res
-          if (data.msg === 'today') {
-            ElMessageBox.alert('Your password will expire today, please reset', 'Prompt', {
-              confirmButtonText: 'OK',
-              type: 'warning',
-              confirmButtonClass: 'el-button--dark'
-            })
-          } else if (data.msg === 'last') {
-            ElMessageBox.alert(
-              `Your password will expire in${data.data}days, please reset`,
+          if (data.msg === 'today' || data.msg === 'last') {
+            const expiredDays = data.msg === 'today' ? 'today' : `in ${data.data} days`
+            ElMessageBox.confirm(
+              `Your password will expire ${expiredDays}, please reset your password`,
               'Prompt',
               {
                 confirmButtonText: 'OK',
+                cancelButtonText: 'Change Password',
                 type: 'warning',
-                confirmButtonClass: 'el-button--dark'
+                confirmButtonClass: 'el-button--dark',
+                cancelButtonClass: 'el-button--main',
+                distinguishCancelAndClose: true
               }
-            )
+            ).catch((action: any) => {
+              if (action === 'cancel') {
+                router.push({
+                  name: 'Reset Password'
+                })
+              }
+            })
           }
           userStore.setUsername(res.data.uname || '')
           router.push('/')
@@ -227,22 +231,26 @@ const handleLoginAfterVerify = () => {
         } else {
           clearCredentials()
         }
-        if (data.msg === 'today') {
-          ElMessageBox.alert('Your password will expire today, please reset', 'Prompt', {
-            confirmButtonText: 'OK',
-            type: 'warning',
-            confirmButtonClass: 'el-button--dark'
-          })
-        } else if (data.msg === 'last') {
-          ElMessageBox.alert(
-            `Your password will expire in${data.data}days, please reset`,
+        if (data.msg === 'today' || data.msg === 'last') {
+          const expiredDays = data.msg === 'today' ? 'today' : `in ${data.data} days`
+          ElMessageBox.confirm(
+            `Your password will expire ${expiredDays}, please reset your password`,
             'Prompt',
             {
               confirmButtonText: 'OK',
+              cancelButtonText: 'Change Password',
               type: 'warning',
-              confirmButtonClass: 'el-button--dark'
+              confirmButtonClass: 'el-button--dark',
+              cancelButtonClass: 'el-button--main',
+              distinguishCancelAndClose: true
+            }
+          ).catch((action: any) => {
+            if (action === 'cancel') {
+              router.push({
+                name: 'Reset Password'
+              })
             }
-          )
+          })
         }
         userStore.setUsername(res.data.uname || '')
         router.push('/')

src/views/Tracking/src/components/TrackingDetail/src/TrackingDetail.vue

@@ -286,8 +286,9 @@ const { isOverflow: isDestinationOverflow } = useOverflow(destinationRef, allDat
           </div>
         </template>
       </VueDraggable>
+      <EmailDrawer @sendEmailSuccess="getData" :data="allData" ref="emailDrawerRef"></EmailDrawer>
     </div>
-    <EmailDrawer @sendEmailSuccess="getData" ref="emailDrawerRef"></EmailDrawer>
+
     <AMSISFDrawer ref="AMSISFDrawerRef"></AMSISFDrawer>
   </div>
 </template>

src/views/Tracking/src/components/TrackingDetail/src/components/EmailDrawer.vue

@@ -6,17 +6,9 @@ import { i18nChangeLanguage, DomEditor } from '@wangeditor/editor'
 
 i18nChangeLanguage('en')
 
-const drawer = ref(false)
-const openDrawer = (data: any) => {
-  if (data) {
-    const email = data?.email
-    emailData.value.email = email?.email
-    emailData.value.ccEmail = email?.cc_email
-    emailData.value.serial_no = data?.serial_no
-    emailRecords.value = email?.emailRecords
-  }
-  drawer.value = true
-}
+const props = defineProps<{
+  data: any
+}>()
 
 const editorRef = shallowRef()
 const mode = ref('default')
@@ -68,6 +60,19 @@ const handleCreated = (editor: any) => {
 
 const emailRecords = ref()
 
+watch(
+  () => props.data,
+  (newVal) => {
+    emailData.value.email = newVal?.email?.email
+    emailData.value.ccEmail = newVal?.email?.cc_email
+    emailData.value.serial_no = newVal?.serial_no
+    emailRecords.value = newVal?.email?.emailRecords
+  },
+  {
+    immediate: true
+  }
+)
+
 const editorIconList = [
   {
     dataMenuKey: 'blockquote',
@@ -145,114 +150,103 @@ const sendEmail = () => {
       if (res.code === 200) {
         ElMessage.success('Email sent successfully')
         emailRecords.value = res.data.emailRecords
-        emit('sendEmailSuccess')
+        // emit('sendEmailSuccess')
       }
     })
     .catch((err: any) => {
       ElMessage.error('Failed to send email')
     })
 }
-
-const clearData = () => {
-  valueHtml.value = ''
-}
-
-defineExpose({
-  openDrawer
-})
 </script>
 
 <template>
-  <el-drawer
-    v-model="drawer"
-    @close="clearData"
-    :modal="false"
-    :size="1000"
-    title="Communication"
-    direction="rtl"
-  >
-    <div class="email-view">
-      <div class="email-path">
-        <span class="font_family icon-icon_email_b" style="font-size: 18px"></span>
-        <span class="label">Communication to Apex: &nbsp;</span>
-        <span class="content">{{ emailData.email }}</span>
-      </div>
-      <div class="separated-by">
-        <el-input v-model="emailData.ccEmail">
-          <template #prefix>
-            <div
-              style="
-                display: flex;
-                align-items: center;
-                color: var(--color-neutral-1);
-                cursor: default;
-              "
+  <div class="email-view">
+    <div class="email-path">
+      <span class="font_family icon-icon_email_b" style="font-size: 18px"></span>
+      <span class="label">Communication to Apex: &nbsp;</span>
+      <span class="content">{{ emailData.email }}</span>
+    </div>
+    <div class="separated-by">
+      <el-input v-model="emailData.ccEmail">
+        <template #prefix>
+          <div
+            style="
+              display: flex;
+              align-items: center;
+              color: var(--color-neutral-1);
+              cursor: default;
+            "
+          >
+            <span style="font-weight: 600">CC：</span>
+            <el-tooltip
+              class="box-item"
+              effect="dark"
+              content="Separated by；"
+              placement="top-start"
+              :offset="-8"
             >
-              <span style="font-weight: 600">CC：</span>
-              <el-tooltip
-                class="box-item"
-                effect="dark"
-                content="Separated by；"
-                placement="top-start"
-                :offset="-8"
-              >
-                <span class="font_family icon-icon_tipsfilled_b" style="font-size: 19px"></span>
-              </el-tooltip>
-            </div>
-          </template>
-        </el-input>
-      </div>
-      <div class="text-editor">
-        <Toolbar
-          style="border-bottom: 1px solid #ccc"
-          :editor="editorRef"
-          :defaultConfig="toolbarConfig"
-          :mode="mode"
-        />
-        <Editor
-          style="overflow-y: hidden"
-          v-model="valueHtml"
-          :defaultConfig="editorConfig"
-          :mode="mode"
-          @onCreated="handleCreated"
-          @click="handleFocusEditor"
-        />
-      </div>
-      <div style="border-bottom: 1px solid var(--color-border)">
-        <el-button
-          @click="sendEmail"
-          class="el-button--dark"
-          style="float: right; margin: 8px 0 14px 0; height: 40px"
-          ><span class="font_family icon-icon_submit_b" style="margin-right: 4px"></span> Send
-          Email</el-button
-        >
-      </div>
-      <div class="show-records">
-        <div class="record-item" v-for="(item, index) in emailRecords" :key="index">
-          <div class="header">
-            <div class="avatar">
-              <div>{{ item.name?.slice(0, 1) }}</div>
-            </div>
-            <div class="name">{{ item.name }}</div>
-            <div class="date">{{ dayjs(item.creatTime).format('MM-DD-YYYY HH:mm:ss') }}</div>
+              <span class="font_family icon-icon_tipsfilled_b" style="font-size: 19px"></span>
+            </el-tooltip>
           </div>
-          <div class="content">
-            {{ item.content }}
+        </template>
+      </el-input>
+    </div>
+    <div class="text-editor">
+      <Toolbar
+        style="border-bottom: 1px solid #ccc"
+        :editor="editorRef"
+        :defaultConfig="toolbarConfig"
+        :mode="mode"
+      />
+      <Editor
+        style="overflow-y: hidden"
+        v-model="valueHtml"
+        :defaultConfig="editorConfig"
+        :mode="mode"
+        @onCreated="handleCreated"
+        @click="handleFocusEditor"
+      />
+    </div>
+    <div style="border-bottom: 1px solid var(--color-border)">
+      <el-button
+        @click="sendEmail"
+        class="el-button--dark"
+        style="float: right; margin: 8px 0 14px 0; height: 40px"
+        ><span class="font_family icon-icon_submit_b" style="margin-right: 4px"></span> Send
+        Email</el-button
+      >
+    </div>
+    <div class="show-records">
+      <div class="record-item" v-for="(item, index) in emailRecords" :key="index">
+        <div class="header">
+          <div class="avatar">
+            <div>{{ item.name?.slice(0, 1) }}</div>
           </div>
+          <div class="name">{{ item.name }}</div>
+          <div class="date">{{ dayjs(item.creatTime).format('MM-DD-YYYY HH:mm:ss') }}</div>
+        </div>
+        <div class="content">
+          {{ item.content }}
         </div>
       </div>
     </div>
-  </el-drawer>
+  </div>
 </template>
 
 <style lang="scss" scoped>
 .email-view {
   display: flex;
   flex-direction: column;
+  margin-top: 8px;
   padding: 16px;
   border-radius: 12px;
   border-bottom: 1px solid var(--color-border);
   background: var(--color-header-bg);
+
+  .show-records {
+    max-height: 370px;
+    overflow: auto;
+  }
 }
 
 :deep(.w-e-text-container) {