忘记密码修改

src/views/forgetpassword/index.vue

@@ -3,98 +3,57 @@
     <!-- Reset Password -->
     <el-page-header :content="$t('passwordReset:title:reset')" @back="goBack" />
     <div class="box-wrapper">
-      <el-form
-        ref="resetForm"
-        v-loading="formLoading"
-        :model="form"
-        label-width="150px"
-        :rules="rules"
-        class="demo-ruleForm"
-        size="small"
-      >
+      <el-form ref="resetForm" v-loading="formLoading" :model="form" label-width="150px" :rules="rules"
+        class="demo-ruleForm" size="small">
         <!-- 邮箱 -->
-        <el-form-item
-          :label="$t('passwordReset:form:email')"
-          prop="EmailOrPhone"
-        >
-          <el-input
-            v-model="form.EmailOrPhone"
-            autocomplete="off"
-            @change="handleEmailChange"
-            v-if="!IsCanConnectInternet"
-          />
+        <el-form-item :label="$t('passwordReset:form:email')" prop="EmailOrPhone">
+          <el-input v-model="form.EmailOrPhone" autocomplete="off" @change="handleEmailChange"
+            v-if="!IsCanConnectInternet" />
           <template v-else>
             <el-col :span="18">
-              <el-input
-                v-model="form.EmailOrPhone"
-                autocomplete="off"
-                @change="handleEmailChange"
-              />
+              <el-input v-model="form.EmailOrPhone" autocomplete="off" @change="handleEmailChange" />
             </el-col>
             <el-col :span="6" style="text-align: right">
-              <el-button
-                size="small"
-                type="primary"
-                style="width: 80%"
-                :disabled="sendDisabled"
-                @click="handleSendCode"
-                >{{ sendTitle }}</el-button
-              >
+              <el-button size="small" type="primary" style="width: 80%" :disabled="sendDisabled"
+                @click="handleSendCode">{{ sendTitle }}</el-button>
             </el-col>
           </template>
         </el-form-item>
         <!-- 验证码 -->
-        <el-form-item
-          :label="
-            !IsCanConnectInternet
-              ? $t('trials:researchForm:form:checkCode')
-              : $t('trials:researchForm:form:verifyCode')
-          "
-          required
-        >
+        <el-form-item :label="!IsCanConnectInternet
+          ? $t('trials:researchForm:form:checkCode')
+          : $t('trials:researchForm:form:verifyCode')
+          " required>
           <el-col :span="18">
             <el-form-item prop="VerificationCode">
               <el-input v-model="form.VerificationCode" autocomplete="off" />
             </el-form-item>
           </el-col>
           <el-col :span="6" style="text-align: right">
-            <i
-              :title="
-                isVerify === null
-                  ? $t('passwordReset:button:verify')
-                  : isVerify
-                  ? $t('passwordReset:button:verifySuccess')
-                  : $t('passwordReset:button:Failed')
-              "
-              :class="
-                isVerify === null
-                  ? 'el-icon-question'
-                  : isVerify
+            <i :title="isVerify === null
+              ? $t('passwordReset:button:verify')
+              : isVerify
+                ? $t('passwordReset:button:verifySuccess')
+                : $t('passwordReset:button:Failed')
+              " :class="isVerify === null
+                ? 'el-icon-question'
+                : isVerify
                   ? 'el-icon-success'
                   : 'el-icon-error'
-              "
-              :style="{
-                marginRight: '5px',
-                color:
-                  isVerify === null
-                    ? '#909399'
-                    : isVerify
-                    ? '#67c23a'
-                    : '#f56c6c',
-              }"
-            ></i>
+                " :style="{
+                  marginRight: '5px',
+                  color:
+                    isVerify === null
+                      ? '#909399'
+                      : isVerify
+                        ? '#67c23a'
+                        : '#f56c6c',
+                }"></i>
             <!-- 校验 -->
-            <el-button
-              size="small"
-              type="primary"
-              :style="{
-                width: '80%',
-              }"
-              :disabled="
-                form.VerificationCode === '' || form.EmailOrPhone === ''
-              "
-              @click="verifyCode"
-            >
+            <el-button size="small" type="primary" :style="{
+              width: '80%',
+            }" :disabled="form.VerificationCode === '' || form.EmailOrPhone === ''
+              " @click="verifyCode">
               {{ $t("passwordReset:button:verify") }}
             </el-button>
           </el-col>
@@ -104,55 +63,35 @@
         </el-form-item>
         <!-- 用户名 -->
         <el-form-item :label="$t('passwordReset:form:userName')" prop="UserId">
-          <el-select
-            v-model="form.UserId"
-            clearable
-            filterable
-            style="width: 100%"
-            @change="handleUserChange"
-          >
-            <el-option
-              v-for="item of users"
-              :key="item.UserId"
-              :label="item.UserName"
-              :value="item.UserId"
-            >
+          <span :title="userMsg">{{ userMsg }}</span>
+          <!-- <el-select v-model="form.UserId" clearable filterable style="width: 100%" @change="handleUserChange">
+            <el-option v-for="item of users" :key="item.UserId" :label="item.UserName" :value="item.UserId">
               <span style="float: left">{{ item.UserName }}</span>
               <span style="float: right; color: #8492a6; font-size: 13px">{{
                 item.UserType
               }}</span>
             </el-option>
-          </el-select>
+          </el-select> -->
         </el-form-item>
         <!-- 用户类型 -->
-        <el-form-item
+        <!-- <el-form-item
           v-if="form.UserId"
           :label="$t('passwordReset:form:userType')"
         >
           <el-input v-model="form.UserType" disabled />
-        </el-form-item>
+        </el-form-item> -->
         <!-- 新密码 -->
-        <el-form-item
-          class="my_new_pwd"
-          :label="$t('passwordReset:form:password')"
-          prop="NewPwd"
-          style="position: relative"
-        >
+        <el-form-item class="my_new_pwd" :label="$t('passwordReset:form:password')" prop="NewPwd"
+          style="position: relative">
           <el-input v-model="form.NewPwd" show-password autocomplete="off" />
           <span style="position: absolute; right: -30px">
-            <el-tooltip
-              :content="$t('passwordReset:form:passwordtip')"
-              placement="top"
-            >
+            <el-tooltip :content="$t('passwordReset:form:passwordtip')" placement="top">
               <i class="el-icon-question" />
             </el-tooltip>
           </span>
         </el-form-item>
         <!-- 确认密码 -->
-        <el-form-item
-          :label="$t('passwordReset:form:confirmPassword')"
-          prop="CheckPass"
-        >
+        <el-form-item :label="$t('passwordReset:form:confirmPassword')" prop="CheckPass">
           <el-input v-model="form.CheckPass" show-password autocomplete="off" />
         </el-form-item>
         <el-form-item style="text-align: right">
@@ -262,13 +201,13 @@ export default {
             trigger: ["blur", "change"],
           },
         ],
-        UserId: [
-          {
-            required: true,
-            message: this.$t("common:ruleMessage:select"),
-            trigger: ["blur", "change"],
-          },
-        ],
+        // UserId: [
+        //   {
+        //     required: true,
+        //     message: this.$t("common:ruleMessage:select"),
+        //     trigger: ["blur", "change"],
+        //   },
+        // ],
       },
       sendDisabled: true,
       sendTitle: this.$t("passwordReset:button:send"),
@@ -276,6 +215,19 @@ export default {
       IsCanConnectInternet: true,
     };
   },
+  computed: {
+    userMsg() {
+      if (!this.users || this.users.length <= 0) return ''
+      let str = ''
+      this.users.forEach((item, index) => {
+        str += `${item.UserName}(${item.UserType})`
+        if (index < this.users.length - 1) {
+          str += '; '
+        }
+      })
+      return str
+    }
+  },
   created() {
     this.getInfo();
   },
@@ -338,6 +290,9 @@ export default {
         .then((res) => {
           this.formLoading = false;
           this.users = res.Result;
+          if (this.users && this.users.length > 0) {
+            this.form.UserId = this.users[0].UserId
+          }
           this.isVerify = true;
           this.$message.success(this.$t("passwordReset:button:verifySuccess"));
         })
@@ -394,12 +349,14 @@ export default {
 .reset-wrapper {
   padding: 20px;
 }
+
 .reset-wrapper .el-page-header {
   line-height: 50px;
   border: 1px solid #ebeef5;
   border-radius: 4px;
   background-color: #fff;
 }
+
 .reset-wrapper .box-wrapper {
   width: 700px;
   margin: 20px auto;