feat: 修改密码弹窗样式

src/views/Layout/src/components/Header/components/ChangePasswordDialog.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const dialogVisible = ref(false)
+const dialogVisible = ref(true)
 
 const openDialog = () => {
   dialogVisible.value = true
@@ -10,6 +10,11 @@ const pwdData = ref({
   newPassword: '',
   confirmPassword: ''
 })
+const loginError: any = ref({
+  oldPassword: false,
+  newPassword: false,
+  confirmPassword: false
+})
 
 const handleUpdate = () => {
   // if (pwdData.value.newPassword !== pwdData.value.confirmPassword) {
@@ -26,12 +31,28 @@ const handleUpdate = () => {
   ElMessage.success('Password updated successfully')
 }
 
+const hiddenError = (key: string) => {
+  loginError.value[key] = false
+}
+const confirmPwd = () => {
+  if (pwdData.value.confirmPassword !== pwdData.value.newPassword) {
+    loginError.value.confirmPassword = true
+  } else {
+    loginError.value.confirmPassword = false
+  }
+}
+
 const clearData = () => {
   pwdData.value = {
     oldPassword: '',
     newPassword: '',
     confirmPassword: ''
   }
+  loginError.value = {
+    oldPassword: false,
+    newPassword: false,
+    confirmPassword: false
+  }
 }
 defineExpose({
   openDialog
@@ -50,30 +71,54 @@ defineExpose({
     <div>
       <div class="form-item">
         <span class="label">Old Password</span>
-        <el-input v-model="pwdData.oldPassword" placeholder="Please input Old Password">
+        <el-input
+          v-model="pwdData.oldPassword"
+          type="password"
+          show-password
+          :class="{ 'is-error': loginError.oldPassword }"
+          placeholder="Please input Old Password"
+          @focus="hiddenError('oldPassword')"
+        >
           <template #prefix>
             <span class="font_family icon-icon_password_b"></span>
           </template>
         </el-input>
+        <div class="error" v-if="loginError.oldPassword">Incorrect password. Please try again.</div>
       </div>
       <div class="form-item">
         <span class="label">New Password</span>
         <el-input
           v-model="pwdData.newPassword"
+          type="password"
+          show-password
+          :class="{ 'is-error': loginError.newPassword }"
           placeholder="New password must contain both letter and numeral"
+          @focus="hiddenError('newPassword')"
         >
           <template #prefix>
             <span class="font_family icon-icon_password_b"></span>
           </template>
         </el-input>
+        <div class="error" v-if="loginError.newPassword">Incorrect password. Please try again.</div>
       </div>
       <div class="form-item">
         <span class="label">Confirm Password</span>
-        <el-input v-model="pwdData.confirmPassword" placeholder="Please Confirm Password">
+        <el-input
+          v-model="pwdData.confirmPassword"
+          type="password"
+          show-password
+          :class="{ 'is-error': loginError.confirmPassword }"
+          placeholder="Please Confirm Password"
+          @focus="hiddenError('confirmPassword')"
+          @blur="confirmPwd"
+        >
           <template #prefix>
             <span class="font_family icon-icon_password_b"></span>
           </template>
         </el-input>
+        <div class="error" v-if="loginError.confirmPassword">
+          The password does not match. Please try again.
+        </div>
       </div>
     </div>
     <template #footer>
@@ -97,6 +142,19 @@ defineExpose({
     .label {
       font-size: 12px;
     }
+    .error {
+      font-size: 12px;
+      color: var(--color-danger);
+      line-height: 14px;
+    }
+    .el-input {
+      height: 40px;
+      &.is-error {
+        .el-input__wrapper {
+          box-shadow: 0 0 0 1px var(--color-danger) inset;
+        }
+      }
+    }
   }
   .el-button {
     padding: 8px 24px;

src/views/Login/src/components/ChangePasswordCard.vue

@@ -60,6 +60,9 @@ const handleChangePwd = () => {
     })
 }
 
+const hiddenError = (key: string) => {
+  loginError.value[key] = false
+}
 const confirmPwd = () => {
   if (loginForm.value.confirmPassword !== loginForm.value.newPassword) {
     loginError.value.confirmPassword = true
@@ -113,6 +116,7 @@ const errorTipsRef = ref()
         type="password"
         placeholder="Please input password"
         show-password
+        @focus="hiddenError('oldPassword')"
       >
         <template #prefix>
           <span class="font_family icon-icon_password_b"></span>
@@ -129,6 +133,7 @@ const errorTipsRef = ref()
         type="password"
         placeholder="Please input password"
         show-password
+        @focus="hiddenError('newPassword')"
       >
         <template #prefix>
           <span class="font_family icon-icon_password_b"></span>
@@ -145,7 +150,8 @@ const errorTipsRef = ref()
         type="password"
         placeholder="Please input password"
         show-password
-        @change="confirmPwd"
+        @focus="hiddenError('confirmPassword')"
+        @blur="confirmPwd"
       >
         <template #prefix>
           <span class="font_family icon-icon_password_b"></span>

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

@@ -137,10 +137,10 @@ const openUploadFilesDialog = () => {
 
 <template>
   <div class="attachment">
-    <el-button @click="openUploadFilesDialog" class="el-button--text title">
+    <!-- <el-button @click="openUploadFilesDialog" class="el-button--text title">
       <span class="font_family icon-icon_upload_b"></span>
       Upload Files
-    </el-button>
+    </el-button> -->
     <vxe-grid class="radius-bottom" ref="tableRef" v-bind="tableData">
       <template #action="{ row }">
         <el-button @click="handleDownload(row)" class="el-button--icon">