初始化用户页面表格调整

src/views/email-recompose/index.vue

@@ -1,11 +1,29 @@
 <template>
-  <div style="display: flex;justify-content: center">
-    <div style="width: 600px;text-align: center;border: 1px solid #e6e6e6;margin-top:40px;padding:10px;">
-      <div class="trial-myinfo-head" style="font-size: 30px;line-height: 120px;">
+  <div style="display: flex; justify-content: center">
+    <div
+      style="
+        width: 600px;
+        text-align: center;
+        border: 1px solid #e6e6e6;
+        margin-top: 40px;
+        padding: 10px;
+      "
+    >
+      <div
+        class="trial-myinfo-head"
+        style="font-size: 30px; line-height: 120px"
+      >
         <!-- 首次登录修改密码 -->
         {{ $t('recompose:title:init') }}
       </div>
-      <el-form ref="passwordForm" v-loading="loading" label-position="right" :model="password" :rules="passwordFormRules" label-width="200px">
+      <el-form
+        ref="passwordForm"
+        v-loading="loading"
+        label-position="right"
+        :model="password"
+        :rules="passwordFormRules"
+        :label-width="$i18n.locale == 'zh' ? '100px' : '200px'"
+      >
         <!-- 邮箱 -->
         <el-form-item :label="$t('recompose:form:email')" prop="Email">
           <el-input v-model="password.Email" disabled />
@@ -19,70 +37,106 @@
           <el-input v-model="password.NewUserName" />
         </el-form-item>
         <!-- 新密码 -->
-        <el-form-item :label="$t('recompose:form:newPassword')" prop="NewPassWord">
-          <el-input v-model="password.NewPassWord" type="password" show-password auto-complete="new-password" />
+        <el-form-item
+          :label="$t('recompose:form:newPassword')"
+          prop="NewPassWord"
+        >
+          <el-input
+            v-model="password.NewPassWord"
+            type="password"
+            show-password
+            auto-complete="new-password"
+          />
         </el-form-item>
         <!-- 确认密码 -->
-        <el-form-item :label="$t('recompose:form:confirmPassword')" prop="ConfirmPassWord">
-          <el-input v-model="password.ConfirmPassWord" type="password" show-password auto-complete="new-password" />
-        </el-form-item>
-        <el-form-item style="text-align:right">
-          <!-- 取消 -->
-          <el-button
-            size="small"
-            @click="cancel"
+        <el-form-item
+          :label="$t('recompose:form:confirmPassword')"
+          prop="ConfirmPassWord"
         >
+          <el-input
+            v-model="password.ConfirmPassWord"
+            type="password"
+            show-password
+            auto-complete="new-password"
+          />
+        </el-form-item>
+        <el-form-item style="text-align: right">
+          <!-- 取消 -->
+          <el-button size="small" @click="cancel">
             {{ $t('recompose:button:cancel') }}
           </el-button>
           <!-- 保存 -->
-          <el-button
-            type="primary"
-            size="small"
-            @click="save"
-          >
+          <el-button type="primary" size="small" @click="save">
             {{ $t('recompose:button:save') }}
           </el-button>
         </el-form-item>
       </el-form>
-
     </div>
   </div>
 </template>
 <script>
 import { initSetUserNameAndPwd } from '@/api/admin.js'
 import md5 from 'js-md5'
-import {mapGetters, mapMutations} from "vuex";
+import { mapGetters, mapMutations } from 'vuex'
 export default {
   data() {
     return {
       password: {
         NewUserName: null,
-        UserId: null
+        UserId: null,
       },
       passwordFormRules: {
-        NewUserName: [{ required: true, validator: (rule, value, callback) => {!value ? callback(new Error(this.$t('trials:researchForm:formRule:specify'))) : callback()}, trigger: 'blur' }],
+        NewUserName: [
+          {
+            required: true,
+            validator: (rule, value, callback) => {
+              !value
+                ? callback(
+                    new Error(this.$t('trials:researchForm:formRule:specify'))
+                  )
+                : callback()
+            },
+            trigger: 'blur',
+          },
+        ],
         NewPassWord: [
-          { required: true, validator: (rule, value, callback) => {!value ? callback(new Error(this.$t('trials:researchForm:formRule:specify'))) : callback()}, trigger: 'blur' },
+          {
+            required: true,
+            validator: (rule, value, callback) => {
+              !value
+                ? callback(
+                    new Error(this.$t('trials:researchForm:formRule:specify'))
+                  )
+                : callback()
+            },
+            trigger: 'blur',
+          },
           {
             required: true,
             trigger: 'blur',
-            validator: this.$validatePassword
+            validator: this.$validatePassword,
           },
         ],
         ConfirmPassWord: [
-          { required: true, validator: (rule, value, callback) => {!value ? callback(new Error(this.$t('trials:researchForm:formRule:specify'))) : callback()}, trigger: 'blur' }
-        ]
+          {
+            required: true,
+            validator: (rule, value, callback) => {
+              !value
+                ? callback(
+                    new Error(this.$t('trials:researchForm:formRule:specify'))
+                  )
+                : callback()
+            },
+            trigger: 'blur',
+          },
+        ],
       },
       userId: null,
-      loading: false
+      loading: false,
     }
   },
   computed: {
-    ...mapGetters([
-      'asyncRoutes',
-      'routes',
-      'language'
-    ])
+    ...mapGetters(['asyncRoutes', 'routes', 'language']),
   },
   mounted() {
     this.password.UserId = this.$route.query.UserId
@@ -112,7 +166,7 @@ export default {
       this.$updateDictionary()
     },
     save() {
-      this.$refs.passwordForm.validate(valid => {
+      this.$refs.passwordForm.validate((valid) => {
         if (valid) {
           if (this.password.NewPassWord !== this.password.ConfirmPassWord) {
             // 两次密码输入不一致
@@ -123,26 +177,32 @@ export default {
             NewUserName: this.password.NewUserName,
             UserId: this.password.UserId,
             NewPwd: md5(this.password.NewPassWord),
-            access_token: this.password.access_token
+            access_token: this.password.access_token,
           }
           this.loading = true
-          initSetUserNameAndPwd(param).then(res => {
+          initSetUserNameAndPwd(param)
+            .then((res) => {
               this.loading = false
               if (res.IsSuccess) {
                 // 修改成功,请重新登录账号
-              this.$message.success(this.$t('recompose:message:updatedSuccessfully'))
+                this.$message.success(
+                  this.$t('recompose:message:updatedSuccessfully')
+                )
                 setTimeout(() => {
                   this.logout()
                 }, 500)
               }
-          }).catch(() => { this.loading = false })
+            })
+            .catch(() => {
+              this.loading = false
+            })
         }
       })
     },
     cancel() {
       this.$refs['passwordForm'].resetFields()
-    }
-  }
+    },
+  },
 }
 </script>
 <style>
@@ -166,12 +226,12 @@ export default {
 input:-webkit-autofill {
   -webkit-text-fill-color: #ededed !important;
   box-shadow: 0 0 0px 1000px transparent inset !important;
-  background-color:transparent;
+  background-color: transparent;
   background-image: none;
   transition: background-color 50000s ease-in-out 0s;
 }
 input {
-  background-color:transparent;
+  background-color: transparent;
   caret-color: #fff;
 }
 </style>