账号信息页修改
parent
55ba8988c6
commit
feefc93e3f
|
|
@ -27,3 +27,9 @@ export function setNewUserName(newPhone) {
|
|||
method: 'put'
|
||||
})
|
||||
}
|
||||
export function SetNewCheckCode(newCheckCode) {
|
||||
return request({
|
||||
url: `/User/SetNewCheckCode/${newCheckCode}`,
|
||||
method: 'put'
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,13 +14,13 @@
|
|||
|
||||
<div class="right-menu">
|
||||
<div class="navbar-flex-wrapper">
|
||||
<template v-if="device!=='mobile'">
|
||||
<template v-if="device !== 'mobile'">
|
||||
<screenfull id="screenfull" class="right-menu-item hover-effect" />
|
||||
</template>
|
||||
<!-- <div class="avatar-container">
|
||||
<img src="@/assets/avatar.png" class="user-avatar">
|
||||
</div> -->
|
||||
<div style="margin-left:20px;">
|
||||
<div style="margin-left: 20px">
|
||||
<el-dropdown class="dropdown-container" trigger="click">
|
||||
<span class="el-dropdown-link">
|
||||
{{ name }}
|
||||
|
|
@ -29,13 +29,17 @@
|
|||
</span>
|
||||
<el-dropdown-menu slot="dropdown" class="user-dropdown">
|
||||
<el-dropdown-item v-if="!isReviewer">
|
||||
<span style="display:block;" @click="editInfo">Edit Info</span>
|
||||
<span style="display: block" @click="editInfo">{{
|
||||
$t("trials:trials-myinfo:title:accountInfo")
|
||||
}}</span>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item>
|
||||
<!-- <el-dropdown-item>
|
||||
<span style="display:block;" @click="account">Account</span>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-item> -->
|
||||
<el-dropdown-item divided>
|
||||
<span style="display:block;" @click="logout">Log Out</span>
|
||||
<span style="display: block" @click="logout">{{
|
||||
$t("trials:trials-myinfo:button:loginout")
|
||||
}}</span>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
|
@ -46,62 +50,62 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import {mapGetters, mapMutations} from 'vuex'
|
||||
import Breadcrumb from '@/components/Breadcrumb'
|
||||
import Hamburger from '@/components/Hamburger'
|
||||
import Screenfull from '@/components/Screenfull'
|
||||
import { mapGetters, mapMutations } from "vuex";
|
||||
import Breadcrumb from "@/components/Breadcrumb";
|
||||
import Hamburger from "@/components/Hamburger";
|
||||
import Screenfull from "@/components/Screenfull";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Breadcrumb,
|
||||
Hamburger,
|
||||
Screenfull
|
||||
Screenfull,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isReviewer: false,
|
||||
userTypeShortName: zzSessionStorage.getItem('userTypeShortName')
|
||||
}
|
||||
userTypeShortName: zzSessionStorage.getItem("userTypeShortName"),
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['sidebar', 'name', 'device'])
|
||||
...mapGetters(["sidebar", "name", "device"]),
|
||||
},
|
||||
created() {
|
||||
this.isReviewer = JSON.parse(zzSessionStorage.getItem('IsReviewer'))
|
||||
this.isReviewer = JSON.parse(zzSessionStorage.getItem("IsReviewer"));
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setLanguage: 'lang/setLanguage' }),
|
||||
...mapMutations({ setLanguage: "lang/setLanguage" }),
|
||||
toggleSideBar() {
|
||||
this.$store.dispatch('app/toggleSideBar')
|
||||
this.$store.dispatch("app/toggleSideBar");
|
||||
},
|
||||
async logout() {
|
||||
var loginType = zzSessionStorage.getItem('loginType')
|
||||
await this.$store.dispatch('user/logout')
|
||||
var loginType = zzSessionStorage.getItem("loginType");
|
||||
await this.$store.dispatch("user/logout");
|
||||
if (loginType) {
|
||||
this.$router.push(`/login?loginType=${loginType}`)
|
||||
this.$router.push(`/login?loginType=${loginType}`);
|
||||
} else {
|
||||
this.$router.push(`/login`)
|
||||
this.$router.push(`/login`);
|
||||
}
|
||||
this.$i18n.locale = 'zh'
|
||||
this.setLanguage('zh')
|
||||
this.$updateDictionary()
|
||||
this.$i18n.locale = "zh";
|
||||
this.setLanguage("zh");
|
||||
this.$updateDictionary();
|
||||
},
|
||||
editInfo() {
|
||||
this.$router.push({ name: 'BaiscInfo' })
|
||||
this.$router.push({ name: "BaiscInfo" });
|
||||
},
|
||||
account() {
|
||||
this.$router.push({ name: 'Account' })
|
||||
}
|
||||
}
|
||||
}
|
||||
this.$router.push({ name: "Account" });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.navbar-flex-wrapper{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.navbar-flex-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.navbar {
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,255 @@
|
|||
<template>
|
||||
<div class="trial-myinfo-right">
|
||||
<div class="trial-myinfo-right-box">
|
||||
<div class="trial-myinfo-head">
|
||||
<!-- 账号信息 -->
|
||||
{{ $t("trials:trials-myinfo:title:accountInfo") }}
|
||||
</div>
|
||||
<el-form label-position="right" label-width="100px">
|
||||
<!-- 用户名 -->
|
||||
<el-form-item
|
||||
:label="$t('trials:trials-myinfo:form:userName')"
|
||||
style="margin-bottom: 5px"
|
||||
prop="UserName"
|
||||
>
|
||||
<span>{{ user.UserName }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="" style="position: relative" prop="UserName">
|
||||
<el-input
|
||||
v-model="userForm.UserName"
|
||||
:placeholder="$t('trials:trials-myinfo:form:userName')"
|
||||
/>
|
||||
<!-- 修改 -->
|
||||
<el-button
|
||||
:disabled="!userForm.UserName"
|
||||
class="saveBtn"
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="setNewUserName"
|
||||
>
|
||||
{{ $t("trials:trials-myinfo:button:update") }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<!-- 校验码 -->
|
||||
<el-form-item
|
||||
:label="$t('trials:researchForm:form:checkCode')"
|
||||
style="margin-bottom: 5px"
|
||||
prop="CheckCode"
|
||||
>
|
||||
<!-- <span>{{ user.UserName }}</span> -->
|
||||
</el-form-item>
|
||||
<el-form-item label="" style="position: relative" prop="CheckCode">
|
||||
<el-input
|
||||
v-model="userForm.CheckCode"
|
||||
:placeholder="$t('trials:researchForm:form:checkCode')"
|
||||
:maxlength="10"
|
||||
type="number"
|
||||
/>
|
||||
<!-- 修改 -->
|
||||
<el-button
|
||||
:disabled="!userForm.CheckCode"
|
||||
class="saveBtn"
|
||||
type="primary"
|
||||
size="small"
|
||||
@click.stop="setNewUserCheckCode"
|
||||
>
|
||||
{{ $t("trials:trials-myinfo:button:update") }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<!-- 电话 -->
|
||||
<el-form-item
|
||||
:label="$t('trials:trials-myinfo:form:phone')"
|
||||
style="margin-bottom: 5px"
|
||||
prop="UserName"
|
||||
>
|
||||
<span>{{ user.Phone }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="" style="position: relative" prop="UserName">
|
||||
<el-input
|
||||
v-model="userForm.Phone"
|
||||
:placeholder="$t('trials:trials-myinfo:form:phone')"
|
||||
/>
|
||||
<!-- 修改 -->
|
||||
<el-button
|
||||
:disabled="!userForm.Phone"
|
||||
class="saveBtn"
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="setNewPhone"
|
||||
>
|
||||
{{ $t("trials:trials-myinfo:button:update") }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<!-- 邮箱 -->
|
||||
<el-form-item
|
||||
:label="$t('trials:trials-myinfo:form:email')"
|
||||
style="margin-bottom: 5px"
|
||||
prop="UserName"
|
||||
>
|
||||
<span>{{ user.EMail }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label=""
|
||||
style="margin-bottom: 10px; position: relative"
|
||||
prop="EMail"
|
||||
v-if="IsCanConnectInternet"
|
||||
>
|
||||
<el-input
|
||||
v-model="userForm.EMail"
|
||||
@input="handleEmailChange"
|
||||
:placeholder="$t('trials:trials-myinfo:form:email')"
|
||||
/>
|
||||
<el-button
|
||||
class="sendCode"
|
||||
:disabled="sendDisabled"
|
||||
type="primary"
|
||||
size="mini"
|
||||
@click="sendVerificationCode"
|
||||
>{{ sendTitle }}</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label=""
|
||||
style="position: relative"
|
||||
prop="VerificationCode"
|
||||
v-if="IsCanConnectInternet"
|
||||
>
|
||||
<el-input
|
||||
v-model="userForm.VerificationCode"
|
||||
:placeholder="$t('trials:researchForm:form:verifyCode')"
|
||||
/>
|
||||
<!-- 修改 -->
|
||||
<el-button
|
||||
:disabled="
|
||||
!userForm.EMail || !userForm.VerificationCode || sendDisabled
|
||||
"
|
||||
class="saveBtn"
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="setNewEmail"
|
||||
>
|
||||
{{ $t("trials:trials-myinfo:button:update") }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
sendVerificationCode,
|
||||
setNewEmail,
|
||||
setNewPhone,
|
||||
setNewUserName,
|
||||
SetNewCheckCode,
|
||||
} from "@/api/system/user.js";
|
||||
var timer = "";
|
||||
var countdown = 60;
|
||||
export default {
|
||||
name: "account",
|
||||
props: {
|
||||
user: {
|
||||
required: true,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
IsCanConnectInternet: {
|
||||
required: true,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
userForm: {},
|
||||
sendDisabled: true,
|
||||
sendTitle: this.$t("trials:trials-myinfo:button:getVCode"),
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 修改校验码
|
||||
async setNewUserCheckCode() {
|
||||
try {
|
||||
let res = await SetNewCheckCode(this.userForm.CheckCode);
|
||||
if (res.IsSuccess) {
|
||||
this.userForm.CheckCode = "";
|
||||
this.$message.success(
|
||||
this.$t("trials:trials-myinfo:message:updateSuccessfully")
|
||||
);
|
||||
this.$emit("getUserInfo");
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
},
|
||||
setNewEmail() {
|
||||
setNewEmail(this.userForm.EMail, this.userForm.VerificationCode).then(
|
||||
() => {
|
||||
this.userForm.EMail = "";
|
||||
this.userForm.VerificationCode = "";
|
||||
this.$message.success(
|
||||
this.$t("trials:trials-myinfo:message:updateSuccessfully")
|
||||
);
|
||||
this.$emit("getUserInfo");
|
||||
}
|
||||
);
|
||||
},
|
||||
setNewUserName() {
|
||||
setNewUserName(this.userForm.UserName).then(() => {
|
||||
this.userForm.UserName = "";
|
||||
this.$message.success(
|
||||
this.$t("trials:trials-myinfo:message:updateSuccessfully")
|
||||
);
|
||||
this.$emit("getUserInfo");
|
||||
});
|
||||
},
|
||||
setNewPhone() {
|
||||
setNewPhone(this.userForm.Phone).then(() => {
|
||||
this.userForm.Phone = "";
|
||||
this.$message.success(
|
||||
this.$t("trials:trials-myinfo:message:updateSuccessfully")
|
||||
);
|
||||
this.$emit("getUserInfo");
|
||||
});
|
||||
},
|
||||
handleEmailChange() {
|
||||
var reg =
|
||||
/^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/;
|
||||
if (this.userForm.EMail && reg.test(this.userForm.EMail)) {
|
||||
this.sendDisabled = false;
|
||||
} else {
|
||||
this.sendDisabled = true;
|
||||
}
|
||||
},
|
||||
sendVerificationCode() {
|
||||
sendVerificationCode(this.userForm.EMail).then(() => {
|
||||
this.settime(this);
|
||||
// 发送成功
|
||||
this.$message.success(
|
||||
this.$t("trials:trials-myinfo:message:sendSuccessfully")
|
||||
);
|
||||
});
|
||||
},
|
||||
settime(obj) {
|
||||
if (countdown === 0) {
|
||||
obj.sendDisabled = false;
|
||||
obj.sendTitle = this.$t("trials:trials-myinfo:button:getVCode"); // '获取验证码'
|
||||
countdown = 60;
|
||||
clearTimeout(timer);
|
||||
return;
|
||||
} else {
|
||||
obj.sendDisabled = true;
|
||||
obj.sendTitle = `${this.$t(
|
||||
"trials:trials-myinfo:button:wait"
|
||||
)}(${countdown}s)`;
|
||||
countdown--;
|
||||
// eslint-disable-next-line no-self-assign
|
||||
countdown = countdown;
|
||||
timer = setTimeout(function () {
|
||||
obj.settime(obj);
|
||||
}, 1000);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,385 +1,202 @@
|
|||
<template>
|
||||
<div class="trial-myinfo">
|
||||
<div class="trial-myinfo-left">
|
||||
<div class="trial-myinfo-left-top">
|
||||
<div class="trial-myinfo-head">
|
||||
<!-- 个人头像 -->
|
||||
{{ $t('trials:trials-myinfo:title:avater') }}
|
||||
</div>
|
||||
<div class="trial-myinfo-body">
|
||||
<div>
|
||||
{{ user.LastName }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="trial-myinfo-left-bottom">
|
||||
<div class="trial-myinfo-head">
|
||||
<!-- 用户基本信息 -->
|
||||
{{ $t('trials:trials-myinfo:title:basicInfo') }}
|
||||
</div>
|
||||
<el-form ref="userForm" label-position="right" :model="user" :rules="userFormRules" label-width="120px">
|
||||
<el-form-item v-if="user.Code" label="ID: " prop="Code">
|
||||
<el-input v-model="user.Code" disabled />
|
||||
</el-form-item>
|
||||
<!-- 姓 -->
|
||||
<el-form-item :disabled="user.UserTypeEnum === 8" :label="$t('trials:trials-myinfo:form:surname')" prop="LastName">
|
||||
<el-input v-model="user.LastName" :placeholder="$t('trials:trials-myinfo:form:surname')"/>
|
||||
</el-form-item>
|
||||
<!-- 名 -->
|
||||
<el-form-item :disabled="user.UserTypeEnum === 8" :label="$t('trials:trials-myinfo:form:givenname')" prop="FirstName">
|
||||
<el-input v-model="user.FirstName" :placeholder="$t('trials:trials-myinfo:form:givenname')"/>
|
||||
</el-form-item>
|
||||
<!-- 性别 -->
|
||||
<el-form-item :label="$t('trials:trials-myinfo:form:gender')" prop="Sex" style="margin-right:40px;">
|
||||
<el-radio-group v-model="user.Sex">
|
||||
<el-radio :label="1">Male</el-radio>
|
||||
<el-radio :label="0">Female</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<!-- 单位 -->
|
||||
<el-form-item :label="$t('trials:trials-myinfo:form:organization')" prop="OrganizationName">
|
||||
<el-input v-model="user.OrganizationName" :placeholder="$t('trials:trials-myinfo:form:organization')"/>
|
||||
</el-form-item>
|
||||
<!-- 部门 -->
|
||||
<el-form-item :label="$t('trials:trials-myinfo:form:department')" prop="DepartmentName">
|
||||
<el-input v-model="user.DepartmentName" :placeholder="$t('trials:trials-myinfo:form:organization')"/>
|
||||
</el-form-item>
|
||||
<!-- 职位 -->
|
||||
<el-form-item :label="$t('trials:trials-myinfo:form:position')" prop="PositionName">
|
||||
<el-input v-model="user.PositionName" :placeholder="$t('trials:trials-myinfo:form:position')"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- 保存 -->
|
||||
<el-button
|
||||
class="trial-info-btn"
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="handleSave"
|
||||
>
|
||||
{{ $t('trials:trials-myinfo:button:save') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="trial-myinfo-right">
|
||||
<div class="trial-myinfo-right-box">
|
||||
<div class="trial-myinfo-head">
|
||||
<!-- 账号信息 -->
|
||||
{{ $t('trials:trials-myinfo:title:accountInfo') }}
|
||||
</div>
|
||||
<el-form label-position="right" label-width="150px">
|
||||
<!-- 用户名 -->
|
||||
<el-form-item :label="$t('trials:trials-myinfo:form:userName')" style="margin-bottom: 5px;" prop="UserName">
|
||||
<span>{{ user.UserName }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="" style="position: relative" prop="UserName">
|
||||
<el-input v-model="userForm.UserName" :placeholder="$t('trials:trials-myinfo:form:userName')"/>
|
||||
<!-- 修改 -->
|
||||
<el-button :disabled="!userForm.UserName" class="saveBtn" type="primary" size="small" @click="setNewUserName">
|
||||
{{ $t('trials:trials-myinfo:button:update') }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<!-- 电话 -->
|
||||
<el-form-item :label="$t('trials:trials-myinfo:form:phone')" style="margin-bottom: 5px;" prop="UserName">
|
||||
<span>{{ user.Phone }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="" style="position: relative" prop="UserName">
|
||||
<el-input v-model="userForm.Phone" :placeholder="$t('trials:trials-myinfo:form:phone')"/>
|
||||
<!-- 修改 -->
|
||||
<el-button :disabled="!userForm.Phone" class="saveBtn" type="primary" size="small" @click="setNewPhone">
|
||||
{{ $t('trials:trials-myinfo:button:update') }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<!-- 邮箱 -->
|
||||
<el-form-item :label="$t('trials:trials-myinfo:form:email')" style="margin-bottom: 5px;" prop="UserName">
|
||||
<span>{{ user.EMail }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="" style="margin-bottom: 10px;position: relative" prop="EMail">
|
||||
<el-input v-model="userForm.EMail" @input="handleEmailChange" :placeholder="$t('trials:trials-myinfo:form:email')"/>
|
||||
<el-button class="sendCode" :disabled="sendDisabled" type="primary" size="mini" @click="sendVerificationCode">{{ sendTitle }}</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="" style="position: relative" prop="VerificationCode">
|
||||
<el-input v-model="userForm.VerificationCode" :placeholder="$t('trials:researchForm:form:verifyCode')"/>
|
||||
<!-- 修改 -->
|
||||
<el-button :disabled="!userForm.EMail || !userForm.VerificationCode || sendDisabled" class="saveBtn" type="primary" size="small" @click="setNewEmail">
|
||||
{{ $t('trials:trials-myinfo:button:update') }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="trial-myinfo-right-box">
|
||||
<div class="trial-myinfo-head">
|
||||
<!-- 修改密码 -->
|
||||
{{ $t('trials:trials-myinfo:title:updatePaasord') }}
|
||||
</div>
|
||||
<el-form ref="passwordForm" label-position="right" :model="password" :rules="passwordFormRules" label-width="150px">
|
||||
<!-- 旧密码 -->
|
||||
<el-form-item :label="$t('recompose:form:oldPassword')" prop="OldPassWord">
|
||||
<el-input v-model="password.OldPassWord" type="password" show-password auto-complete="new-password" :placeholder="$t('recompose:form:oldPassword')"/>
|
||||
</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" :placeholder="$t('recompose:form:newPassword')"/>
|
||||
</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" :placeholder="$t('recompose:form:confirmPassword')"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
class="trial-info-btn"
|
||||
@click="save"
|
||||
>
|
||||
{{ $t('trials:trials-myinfo:button:save') }}
|
||||
</el-button>
|
||||
</div>
|
||||
<el-menu
|
||||
:default-active="activeIndex"
|
||||
@select="handleSelect"
|
||||
class="el-menu-demo"
|
||||
style="width: 200px"
|
||||
>
|
||||
<el-menu-item index="1">{{
|
||||
$t("trials:trials-myinfo:menuTitle:mine")
|
||||
}}</el-menu-item>
|
||||
<el-menu-item index="2">{{
|
||||
$t("trials:trials-myinfo:menuTitle:account")
|
||||
}}</el-menu-item>
|
||||
<el-menu-item index="3">{{
|
||||
$t("trials:trials-myinfo:menuTitle:password")
|
||||
}}</el-menu-item>
|
||||
<el-menu-item index="4">{{
|
||||
$t("trials:trials-myinfo:menuTitle:loginLog")
|
||||
}}</el-menu-item>
|
||||
</el-menu>
|
||||
<div class="contentBox">
|
||||
<mine
|
||||
:user="user"
|
||||
:userTypeOptions="userTypeOptions"
|
||||
v-if="activeIndex === '1'"
|
||||
/>
|
||||
<account
|
||||
:user="user"
|
||||
@getUserInfo="getUserInfo"
|
||||
:IsCanConnectInternet="IsCanConnectInternet"
|
||||
v-if="activeIndex === '2'"
|
||||
/>
|
||||
<password v-if="activeIndex === '3'" />
|
||||
<login-log v-if="activeIndex === '4'" :name="userName" :isMine="true" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getUserTypeList, getUser, updateUser, modifyPassword } from '@/api/admin.js'
|
||||
import { sendVerificationCode, setNewEmail, setNewPhone, setNewUserName } from '@/api/system/user.js'
|
||||
import md5 from 'js-md5'
|
||||
var timer = ''
|
||||
var countdown = 60
|
||||
import store from '@/store'
|
||||
import {mapGetters, mapMutations} from 'vuex'
|
||||
import mine from "./mine.vue";
|
||||
import account from "./account.vue";
|
||||
import password from "./password.vue";
|
||||
import loginLog from "@/views/trials/trials-panel/trial-summary/login-log";
|
||||
import { getUserTypeList, getUser } from "@/api/admin.js";
|
||||
import { getHospital } from "@/api/hospital.js";
|
||||
import store from "@/store";
|
||||
import { mapGetters } from "vuex";
|
||||
|
||||
export default {
|
||||
|
||||
name: 'TrialsMyinfo',
|
||||
name: "TrialsMyinfo",
|
||||
components: { mine, account, password, "login-log": loginLog },
|
||||
data() {
|
||||
return {
|
||||
activeIndex: "1",
|
||||
|
||||
userTypeOptions: [],
|
||||
user: {},
|
||||
password: {},
|
||||
userForm: {},
|
||||
sendDisabled: true,
|
||||
sendTitle: this.$t('trials:trials-myinfo:button:getVCode'),
|
||||
userFormRules: {
|
||||
UserName: [{ required: true, message: this.$t('common:ruleMessage:specify'), trigger: 'blur' }],
|
||||
UserTypeId: [{ required: true, message: this.$t('common:ruleMessage:select'), trigger: ['blur', 'change'] }],
|
||||
IsZhiZhun: [{ required: true, message: this.$t('common:ruleMessage:select'), trigger: ['blur', 'change'] }],
|
||||
OrganizationName: [{ required: true, message: this.$t('common:ruleMessage:specify'), trigger: 'blur' }],
|
||||
LastName: [{ required: true, message: this.$t('common:ruleMessage:specify'), trigger: 'blur' }, { max: 50, message: `${this.$t('common:ruleMessage:maxLength')} 50` }],
|
||||
FirstName: [{ required: true, message: this.$t('common:ruleMessage:specify'), trigger: 'blur' }, { max: 50, message: `${this.$t('common:ruleMessage:maxLength')} 50` }],
|
||||
Sex: [{ required: true, message: this.$t('common:ruleMessage:specify'), trigger: 'blur' }],
|
||||
Status: [{ required: true, message: this.$t('common:ruleMessage:specify'), trigger: 'blur' }]
|
||||
},
|
||||
passwordFormRules: {
|
||||
OldPassWord: [{ required: true, message: this.$t('common:ruleMessage:specify'), trigger: 'blur' }],
|
||||
NewPassWord: [
|
||||
{ required: true, message: this.$t('common:ruleMessage:specify'), trigger: 'blur' },
|
||||
{
|
||||
required: true,
|
||||
trigger: 'blur',
|
||||
validator: this.$validatePassword
|
||||
},
|
||||
],
|
||||
ConfirmPassWord: [
|
||||
{ required: true, message: this.$t('common:ruleMessage:specify'), trigger: 'blur' },
|
||||
{
|
||||
required: true,
|
||||
trigger: 'blur',
|
||||
validator: this.$validatePassword
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
IsCanConnectInternet: true, // 是否可以链接互联网
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['userId', 'name'])
|
||||
...mapGetters(["userId", "name"]),
|
||||
},
|
||||
mounted() {
|
||||
this.getUserInfo()
|
||||
this.getUserTypeList()
|
||||
this.getUserInfo();
|
||||
this.getUserTypeList();
|
||||
this.getInfo();
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setLanguage: 'lang/setLanguage' }),
|
||||
handleSave() {
|
||||
this.$refs.userForm.validate(valid => {
|
||||
console.log(valid)
|
||||
if (valid) {
|
||||
this.isDisabled = true
|
||||
const selectedUserType = this.userTypeOptions.filter((item) => {
|
||||
return item.Id === this.user.UserTypeId
|
||||
})
|
||||
if (selectedUserType.length > 0) {
|
||||
this.user.userTypeEnum = selectedUserType[0].UserTypeEnum
|
||||
}
|
||||
// if (this.user.IsZhiZhun === true) {
|
||||
// this.user.OrganizationName = 'ZhiZhun'
|
||||
// }
|
||||
if (this.user.Id) {
|
||||
updateUser(this.user).then(res => {
|
||||
this.isDisabled = false
|
||||
this.$message.success(this.$t('trials:trials-myinfo:message:updateSuccessfully'))
|
||||
this.getUserInfo()
|
||||
}).catch(() => { this.isDisabled = false })
|
||||
}
|
||||
// 获取医院信息
|
||||
async getInfo() {
|
||||
try {
|
||||
let res = await getHospital();
|
||||
if (res.IsSuccess) {
|
||||
this.IsCanConnectInternet = res.Result.IsCanConnectInternet;
|
||||
}
|
||||
})
|
||||
},
|
||||
handleEmailChange() {
|
||||
var reg = /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/
|
||||
if (this.userForm.EMail && reg.test(this.userForm.EMail)) {
|
||||
this.sendDisabled = false
|
||||
} else {
|
||||
this.sendDisabled = true
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
},
|
||||
sendVerificationCode() {
|
||||
sendVerificationCode(this.userForm.EMail).then(() => {
|
||||
this.settime(this)
|
||||
// 发送成功
|
||||
this.$message.success(this.$t('trials:trials-myinfo:message:sendSuccessfully'))
|
||||
})
|
||||
},
|
||||
save() {
|
||||
this.$refs.passwordForm.validate(valid => {
|
||||
if (valid) {
|
||||
if (this.password.NewPassWord !== this.password.ConfirmPassWord) {
|
||||
this.$alert(this.$t('passwordReset:formRule:passwordsDiffer'))
|
||||
return
|
||||
}
|
||||
const param = {
|
||||
UserId: this.userId,
|
||||
NewPassWord: md5(this.password.NewPassWord),
|
||||
OldPassWord: md5(this.password.OldPassWord)
|
||||
}
|
||||
modifyPassword(param).then(res => {
|
||||
if (res.IsSuccess) {
|
||||
// 修改成功,请重新登录账号
|
||||
this.$message.success(this.$t('trials:trials-myinfo:message:modifyPWSuccessfully'))
|
||||
setTimeout(() => {
|
||||
this.logout()
|
||||
}, 1000)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
setNewEmail() {
|
||||
setNewEmail(this.userForm.EMail, this.userForm.VerificationCode).then(() => {
|
||||
this.userForm.EMail = ''
|
||||
this.userForm.VerificationCode = ''
|
||||
this.$message.success(this.$t('trials:trials-myinfo:message:updateSuccessfully'))
|
||||
this.getUserInfo()
|
||||
})
|
||||
},
|
||||
setNewUserName() {
|
||||
setNewUserName(this.userForm.UserName).then(() => {
|
||||
this.userForm.UserName = ''
|
||||
this.$message.success(this.$t('trials:trials-myinfo:message:updateSuccessfully'))
|
||||
this.getUserInfo()
|
||||
})
|
||||
},
|
||||
setNewPhone() {
|
||||
setNewPhone(this.userForm.Phone).then(() => {
|
||||
this.userForm.Phone = ''
|
||||
this.$message.success(this.$t('trials:trials-myinfo:message:updateSuccessfully'))
|
||||
this.getUserInfo()
|
||||
})
|
||||
handleSelect(index) {
|
||||
this.activeIndex = index;
|
||||
},
|
||||
getUserInfo() {
|
||||
const loading = this.$loading({
|
||||
fullscreen: false,
|
||||
lock: true,
|
||||
text: 'Loading',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.07)'
|
||||
})
|
||||
getUser(this.userId).then(async res => {
|
||||
this.user = res.Result
|
||||
/* eslint-disable */
|
||||
zzSessionStorage.setItem('realName', this.user.RealName)
|
||||
await store.dispatch('user/updateInfo')
|
||||
loading.close()
|
||||
}).catch(() => { loading.close() })
|
||||
},
|
||||
settime(obj) {
|
||||
if (countdown === 0) {
|
||||
obj.sendDisabled = false
|
||||
obj.sendTitle = this.$t('trials:trials-myinfo:button:getVCode')// '获取验证码'
|
||||
countdown = 60
|
||||
clearTimeout(timer)
|
||||
return
|
||||
} else {
|
||||
obj.sendDisabled = true
|
||||
obj.sendTitle = `${this.$t('trials:trials-myinfo:button:wait')}(${countdown}s)`
|
||||
countdown--
|
||||
// eslint-disable-next-line no-self-assign
|
||||
countdown = countdown
|
||||
timer = setTimeout(function() {
|
||||
obj.settime(obj)
|
||||
}, 1000)
|
||||
}
|
||||
text: "Loading",
|
||||
spinner: "el-icon-loading",
|
||||
background: "rgba(0, 0, 0, 0.07)",
|
||||
});
|
||||
getUser(this.userId)
|
||||
.then(async (res) => {
|
||||
this.user = res.Result;
|
||||
/* eslint-disable */
|
||||
zzSessionStorage.setItem("realName", this.user.RealName);
|
||||
await store.dispatch("user/updateInfo");
|
||||
loading.close();
|
||||
})
|
||||
.catch(() => {
|
||||
loading.close();
|
||||
});
|
||||
},
|
||||
getUserTypeList() {
|
||||
getUserTypeList().then(res => {
|
||||
getUserTypeList().then((res) => {
|
||||
if (res.IsSuccess) {
|
||||
this.userTypeOptions = res.Result
|
||||
this.userTypeOptions = res.Result;
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
async logout() {
|
||||
/* eslint-disable */
|
||||
var loginType = zzSessionStorage.getItem('loginType')
|
||||
await this.$store.dispatch('user/logout')
|
||||
if (loginType) {
|
||||
this.$router.push(`/login?loginType=${loginType}`)
|
||||
} else {
|
||||
this.$router.push(`/login`)
|
||||
}
|
||||
this.$i18n.locale = 'zh'
|
||||
this.setLanguage('zh')
|
||||
this.$updateDictionary()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.trial-myinfo{
|
||||
flex: 1;overflow: auto;display: flex;flex-direction: row;justify-content: space-around;
|
||||
.trial-myinfo-head{
|
||||
position: absolute;top: 40px;left: -10%;font-size: 14px;
|
||||
}
|
||||
.trial-myinfo-left{
|
||||
overflow: auto;
|
||||
background: #fff;width: calc(50% - 9px);margin: 6px 0;
|
||||
padding-bottom: 50px;
|
||||
.trial-myinfo-left-top{
|
||||
width: 70%;padding-top: 100px;position: relative;margin: 0 auto;margin-bottom: 10px;
|
||||
.trial-myinfo-body{
|
||||
width:160px;height:160px;border-radius: 50%;background: #428bca;display: flex;justify-content: center;align-items: center;
|
||||
div{
|
||||
color:#fff;font-size: 30px;
|
||||
}
|
||||
.trial-myinfo {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
.contentBox {
|
||||
width: calc(100% - 220px);
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
// padding-bottom: 50px;
|
||||
}
|
||||
.trial-myinfo-head {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.trial-myinfo-left {
|
||||
overflow: auto;
|
||||
background: #fff;
|
||||
// width: calc(50% - 9px);
|
||||
margin: 6px 0;
|
||||
height: 100%;
|
||||
// padding-bottom: 50px;
|
||||
.trial-myinfo-left-top {
|
||||
width: 70%;
|
||||
padding-top: 100px;
|
||||
position: relative;
|
||||
// margin: 0 auto;
|
||||
margin-bottom: 10px;
|
||||
.trial-myinfo-body {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
border-radius: 50%;
|
||||
background: #428bca;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 30px;
|
||||
div {
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.saveBtn{
|
||||
position: absolute;right: -10px;top:2px;transform: translateX(100%)
|
||||
}
|
||||
.saveBtn {
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
top: 2px;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
.trial-info-btn {
|
||||
position: absolute;
|
||||
bottom: -60px;
|
||||
left: calc(100% + 10px);
|
||||
min-width: 97px;
|
||||
}
|
||||
.trial-myinfo-left-bottom {
|
||||
width: 40%;
|
||||
padding-top: 100px;
|
||||
position: relative;
|
||||
// margin: 0 auto;
|
||||
}
|
||||
.trial-myinfo-right {
|
||||
overflow: auto;
|
||||
background: #fff;
|
||||
// width: calc(50% - 9px);
|
||||
margin: 6px 0;
|
||||
padding-bottom: 50px;
|
||||
.sendCode {
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
top: 50%;
|
||||
transform: translate(100%, -50%);
|
||||
}
|
||||
.trial-info-btn{
|
||||
position: absolute;bottom: -60px;left: calc(100% + 10px);min-width: 97px;
|
||||
}
|
||||
.trial-myinfo-left-bottom{
|
||||
width: 70%;padding-top: 100px;position: relative;margin: 0 auto;
|
||||
}
|
||||
.trial-myinfo-right{
|
||||
overflow: auto;
|
||||
background: #fff;width: calc(50% - 9px);margin: 6px 0;
|
||||
padding-bottom: 50px;
|
||||
.sendCode {
|
||||
position: absolute;right: -10px;top: 50%;transform: translate(100%, -50%);
|
||||
}
|
||||
.trial-myinfo-right-box{
|
||||
width: 70%;padding-top: 100px;position: relative;margin: 0 auto;
|
||||
}
|
||||
.trial-myinfo-right-box {
|
||||
width: 40%;
|
||||
padding-top: 100px;
|
||||
position: relative;
|
||||
// margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,209 @@
|
|||
<template>
|
||||
<div class="trial-myinfo-left">
|
||||
<div class="trial-myinfo-left-top">
|
||||
<div class="trial-myinfo-head">
|
||||
<!-- 个人头像 -->
|
||||
{{ $t("trials:trials-myinfo:title:avater") }}
|
||||
</div>
|
||||
<div class="trial-myinfo-body">
|
||||
<div>
|
||||
{{ user.LastName }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="trial-myinfo-left-bottom">
|
||||
<div class="trial-myinfo-head">
|
||||
<!-- 用户基本信息 -->
|
||||
{{ $t("trials:trials-myinfo:title:basicInfo") }}
|
||||
</div>
|
||||
<el-form
|
||||
ref="userForm"
|
||||
label-position="right"
|
||||
:model="user"
|
||||
:rules="userFormRules"
|
||||
label-width="120px"
|
||||
>
|
||||
<el-form-item v-if="user.Code" label="ID: " prop="Code">
|
||||
<el-input v-model="user.Code" disabled />
|
||||
</el-form-item>
|
||||
<!-- 姓 -->
|
||||
<el-form-item
|
||||
:disabled="user.UserTypeEnum === 8"
|
||||
:label="$t('trials:trials-myinfo:form:surname')"
|
||||
prop="LastName"
|
||||
>
|
||||
<el-input
|
||||
v-model="user.LastName"
|
||||
:placeholder="$t('trials:trials-myinfo:form:surname')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- 名 -->
|
||||
<el-form-item
|
||||
:disabled="user.UserTypeEnum === 8"
|
||||
:label="$t('trials:trials-myinfo:form:givenname')"
|
||||
prop="FirstName"
|
||||
>
|
||||
<el-input
|
||||
v-model="user.FirstName"
|
||||
:placeholder="$t('trials:trials-myinfo:form:givenname')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- 单位 -->
|
||||
<el-form-item
|
||||
:label="$t('trials:trials-myinfo:form:organization')"
|
||||
prop="OrganizationName"
|
||||
>
|
||||
<el-input
|
||||
v-model="user.OrganizationName"
|
||||
:placeholder="$t('trials:trials-myinfo:form:organization')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- 部门 -->
|
||||
<el-form-item
|
||||
:label="$t('trials:trials-myinfo:form:department')"
|
||||
prop="DepartmentName"
|
||||
>
|
||||
<el-input
|
||||
v-model="user.DepartmentName"
|
||||
:placeholder="$t('trials:trials-myinfo:form:organization')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- 职位 -->
|
||||
<el-form-item
|
||||
:label="$t('trials:trials-myinfo:form:position')"
|
||||
prop="PositionName"
|
||||
>
|
||||
<el-input
|
||||
v-model="user.PositionName"
|
||||
:placeholder="$t('trials:trials-myinfo:form:position')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- 保存 -->
|
||||
<el-button
|
||||
class="trial-info-btn"
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="handleSave"
|
||||
>
|
||||
{{ $t("trials:trials-myinfo:button:save") }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { updateUser } from "@/api/admin.js";
|
||||
export default {
|
||||
name: "mine",
|
||||
props: {
|
||||
user: {
|
||||
required: true,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
userTypeOptions: {
|
||||
required: true,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
userFormRules: {
|
||||
UserName: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t("common:ruleMessage:specify"),
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
UserTypeId: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t("common:ruleMessage:select"),
|
||||
trigger: ["blur", "change"],
|
||||
},
|
||||
],
|
||||
IsZhiZhun: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t("common:ruleMessage:select"),
|
||||
trigger: ["blur", "change"],
|
||||
},
|
||||
],
|
||||
OrganizationName: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t("common:ruleMessage:specify"),
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
LastName: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t("common:ruleMessage:specify"),
|
||||
trigger: "blur",
|
||||
},
|
||||
{ max: 50, message: `${this.$t("common:ruleMessage:maxLength")} 50` },
|
||||
],
|
||||
FirstName: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t("common:ruleMessage:specify"),
|
||||
trigger: "blur",
|
||||
},
|
||||
{ max: 50, message: `${this.$t("common:ruleMessage:maxLength")} 50` },
|
||||
],
|
||||
Sex: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t("common:ruleMessage:specify"),
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
Status: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t("common:ruleMessage:specify"),
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleSave() {
|
||||
this.$refs.userForm.validate((valid) => {
|
||||
console.log(valid);
|
||||
if (valid) {
|
||||
this.isDisabled = true;
|
||||
const selectedUserType = this.userTypeOptions.filter((item) => {
|
||||
return item.Id === this.user.UserTypeId;
|
||||
});
|
||||
if (selectedUserType.length > 0) {
|
||||
this.user.userTypeEnum = selectedUserType[0].UserTypeEnum;
|
||||
}
|
||||
// if (this.user.IsZhiZhun === true) {
|
||||
// this.user.OrganizationName = 'ZhiZhun'
|
||||
// }
|
||||
if (this.user.Id) {
|
||||
updateUser(this.user)
|
||||
.then((res) => {
|
||||
this.isDisabled = false;
|
||||
this.$message.success(
|
||||
this.$t("trials:trials-myinfo:message:updateSuccessfully")
|
||||
);
|
||||
this.getUserInfo();
|
||||
})
|
||||
.catch(() => {
|
||||
this.isDisabled = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,156 @@
|
|||
<template>
|
||||
<div class="trial-myinfo-right">
|
||||
<div class="trial-myinfo-right-box">
|
||||
<div class="trial-myinfo-head">
|
||||
<!-- 修改密码 -->
|
||||
{{ $t("trials:trials-myinfo:title:updatePaasord") }}
|
||||
</div>
|
||||
<el-form
|
||||
ref="passwordForm"
|
||||
label-position="right"
|
||||
:model="password"
|
||||
:rules="passwordFormRules"
|
||||
label-width="100px"
|
||||
>
|
||||
<!-- 旧密码 -->
|
||||
<el-form-item
|
||||
:label="$t('recompose:form:oldPassword')"
|
||||
prop="OldPassWord"
|
||||
>
|
||||
<el-input
|
||||
v-model="password.OldPassWord"
|
||||
type="password"
|
||||
show-password
|
||||
auto-complete="new-password"
|
||||
:placeholder="$t('recompose:form:oldPassword')"
|
||||
/>
|
||||
</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"
|
||||
:placeholder="$t('recompose:form:newPassword')"
|
||||
/>
|
||||
</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"
|
||||
:placeholder="$t('recompose:form:confirmPassword')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
class="trial-info-btn"
|
||||
@click="save"
|
||||
>
|
||||
{{ $t("trials:trials-myinfo:button:save") }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import md5 from "js-md5";
|
||||
import { mapGetters, mapMutations } from "vuex";
|
||||
import { modifyPassword } from "@/api/admin.js";
|
||||
export default {
|
||||
name: "password",
|
||||
data() {
|
||||
return {
|
||||
password: {},
|
||||
passwordFormRules: {
|
||||
OldPassWord: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t("common:ruleMessage:specify"),
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
NewPassWord: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t("common:ruleMessage:specify"),
|
||||
trigger: "blur",
|
||||
},
|
||||
{
|
||||
required: true,
|
||||
trigger: "blur",
|
||||
validator: this.$validatePassword,
|
||||
},
|
||||
],
|
||||
ConfirmPassWord: [
|
||||
{
|
||||
required: true,
|
||||
message: this.$t("common:ruleMessage:specify"),
|
||||
trigger: "blur",
|
||||
},
|
||||
{
|
||||
required: true,
|
||||
trigger: "blur",
|
||||
validator: this.$validatePassword,
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["userId"]),
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({ setLanguage: "lang/setLanguage" }),
|
||||
save() {
|
||||
this.$refs.passwordForm.validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.password.NewPassWord !== this.password.ConfirmPassWord) {
|
||||
this.$alert(this.$t("passwordReset:formRule:passwordsDiffer"));
|
||||
return;
|
||||
}
|
||||
const param = {
|
||||
UserId: this.userId,
|
||||
NewPassWord: md5(this.password.NewPassWord),
|
||||
OldPassWord: md5(this.password.OldPassWord),
|
||||
};
|
||||
modifyPassword(param).then((res) => {
|
||||
if (res.IsSuccess) {
|
||||
// 修改成功,请重新登录账号
|
||||
this.$message.success(
|
||||
this.$t("trials:trials-myinfo:message:modifyPWSuccessfully")
|
||||
);
|
||||
setTimeout(() => {
|
||||
this.logout();
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
async logout() {
|
||||
/* eslint-disable */
|
||||
var loginType = zzSessionStorage.getItem("loginType");
|
||||
await this.$store.dispatch("user/logout");
|
||||
if (loginType) {
|
||||
this.$router.push(`/login?loginType=${loginType}`);
|
||||
} else {
|
||||
this.$router.push(`/login`);
|
||||
}
|
||||
this.$i18n.locale = "zh";
|
||||
this.setLanguage("zh");
|
||||
this.$updateDictionary();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<BaseContainer>
|
||||
<template slot="search-container">
|
||||
<template slot="search-container" v-if="!isMine">
|
||||
<el-form :inline="true">
|
||||
<el-form-item
|
||||
:label="$t('trials:loginLog:table:optType')"
|
||||
|
|
@ -96,7 +96,7 @@
|
|||
<template slot="main-container">
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
v-adaptive="{ bottomOffset: 60 }"
|
||||
v-adaptive="{ bottomOffset: isMine ? 80 : 60 }"
|
||||
height="100"
|
||||
:data="list"
|
||||
class="table"
|
||||
|
|
@ -199,12 +199,23 @@ const searchDataDefault = () => {
|
|||
EndDate: "",
|
||||
Asc: false,
|
||||
SortField: "CreateTime",
|
||||
LoginUserName: null,
|
||||
PageIndex: 1,
|
||||
PageSize: 20,
|
||||
};
|
||||
};
|
||||
export default {
|
||||
components: { BaseContainer, Pagination },
|
||||
props: {
|
||||
isMine: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
moment,
|
||||
|
|
@ -222,6 +233,9 @@ export default {
|
|||
getList() {
|
||||
this.loading = true;
|
||||
this.searchData.TrialId = this.$route.query.trialId;
|
||||
if (this.isMine) {
|
||||
this.searchData.LoginUserName = this.name;
|
||||
}
|
||||
getUserLogList(this.searchData)
|
||||
.then((res) => {
|
||||
this.loading = false;
|
||||
|
|
|
|||
|
|
@ -1,247 +1,11 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-form
|
||||
ref="userForm"
|
||||
size="small"
|
||||
:model="user"
|
||||
:rules="userFormRules"
|
||||
label-width="150px"
|
||||
style="width:800px;"
|
||||
>
|
||||
<el-card class="Basic" shadow="never" size="small">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>Basic Information</span>
|
||||
</div>
|
||||
<el-form-item v-if="user.Code" label="ID: " prop="Code">
|
||||
<el-input v-model="user.Code" disabled />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="User Name: " prop="UserName">
|
||||
<el-input v-model="user.UserName" disabled />
|
||||
</el-form-item>
|
||||
|
||||
<!-- <el-form-item label="Real Name: " prop="RealName">
|
||||
<el-input v-model="user.RealName" />
|
||||
</el-form-item> -->
|
||||
<el-form-item v-if="user.UserTypeEnum !== 8" label="Surname: " prop="LastName">
|
||||
<el-input v-model="user.LastName" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="user.UserTypeEnum !== 8" label="Given Name: " prop="FirstName">
|
||||
<el-input v-model="user.FirstName" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Gender: " prop="Sex" style="margin-right:40px;">
|
||||
<el-radio-group v-model="user.Sex">
|
||||
<el-radio :label="1">Male</el-radio>
|
||||
<el-radio :label="0">Female</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="Email: " prop="EMail">
|
||||
<el-input v-model="user.EMail" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Phone: ">
|
||||
<el-input v-model="user.Phone" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="user.UserTypeEnum !== 8" label="Disable">
|
||||
<el-switch v-model="user.Status" :active-value="0" :inactive-value="1" disabled />
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="User Type: " prop="UserTypeId">
|
||||
<el-select v-model="user.UserTypeId" size="small" placeholder="Please select" disabled>
|
||||
<el-option
|
||||
v-for="(value,key) of dictionaryList.UserType"
|
||||
:key="key"
|
||||
:label="value"
|
||||
:value="key"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<!-- <el-form-item label="User Type: " prop="UserTypeId">
|
||||
<el-select ref="userType" v-model="user.UserTypeId" size="small" placeholder="Please select" style="width:100%;">
|
||||
<el-option
|
||||
v-for="(userType,key) of userTypeOptions"
|
||||
:key="key"
|
||||
:label="userType.UserType"
|
||||
:value="userType.Id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
|
||||
<el-form-item label="User Type: " prop="UserType">
|
||||
<el-input v-model="user.UserType" disabled />
|
||||
</el-form-item>
|
||||
</el-card>
|
||||
|
||||
<el-card v-if="user.UserTypeEnum !== 8" class="Affiliation" shadow="never" style="margin-top:10px;" size="small">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>Affiliation</span>
|
||||
</div>
|
||||
<el-form-item prop="IsZhiZhun">
|
||||
<el-radio-group v-model="user.IsZhiZhun">
|
||||
<el-radio :label="true">Internal</el-radio>
|
||||
<el-radio :label="false">External</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="user.IsZhiZhun === false" label="Organization Name: " prop="OrganizationName">
|
||||
<el-input v-model="user.OrganizationName" />
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="Orgnization Type: " prop="OrganizationTypeId">
|
||||
<el-select
|
||||
v-model="user.OrganizationTypeId"
|
||||
placeholder="Please select"
|
||||
@change="handelOrgnizationTypeChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="(value,key) of dictionaryList.InstitutionalType"
|
||||
:key="key"
|
||||
:label="value"
|
||||
:value="key"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-show="user.OrganizationTypeId" label="Orgnization: " prop="OrganizationId">
|
||||
<el-select v-model="user.OrganizationId" placeholder="Please select">
|
||||
<el-option
|
||||
v-for="(item) of OrganizationOptions"
|
||||
:key="item.Id"
|
||||
:label="item.InstitutionName"
|
||||
:value="item.Id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
|
||||
<el-form-item label="Department: " prop="DepartmentName">
|
||||
<el-input v-model="user.DepartmentName" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Position: " prop="PositionName">
|
||||
<el-input v-model="user.PositionName" />
|
||||
</el-form-item>
|
||||
</el-card>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
:disabled="isDisabled"
|
||||
style="margin:10px 15px"
|
||||
@click="handleSave"
|
||||
>Save</el-button>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
</div>
|
||||
<trials-info />
|
||||
</template>
|
||||
<script>
|
||||
import { getUserTypeList, getInstitutionList, getUser, addUser, updateUser } from '@/api/admin.js'
|
||||
import store from '@/store'
|
||||
import { mapGetters } from 'vuex'
|
||||
import TrialsMyinfo from "@/views/trials/trials-myinfo";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
user: {},
|
||||
userFormRules: {
|
||||
UserName: [{ required: true, message: 'Please specify', trigger: 'blur' }],
|
||||
UserTypeId: [{ required: true, message: 'Please Select', trigger: ['blur', 'change'] }],
|
||||
// OrganizationId: [{ required: true, message: 'Please specify', trigger: 'blur' }],
|
||||
// OrganizationTypeId: [{ required: true, message: 'Please specify', trigger: 'blur' }],
|
||||
// RealName: [{ required: true, message: 'Please specify', trigger: 'blur' }],
|
||||
IsZhiZhun: [{ required: true, message: 'Please Select', trigger: ['blur', 'change'] }],
|
||||
OrganizationName: [{ required: true, message: 'Please specify', trigger: 'blur' }],
|
||||
LastName: [{ required: true, message: 'Please specify', trigger: 'blur' }, { max: 50, message: 'The maximum length is 50' }],
|
||||
FirstName: [{ required: true, message: 'Please specify', trigger: 'blur' }, { max: 50, message: 'The maximum length is 50' }],
|
||||
|
||||
// Phone: [
|
||||
// { max: 20, min: 7, message: 'The length is 7 to 20' }
|
||||
// ],
|
||||
EMail: [
|
||||
{
|
||||
required: true,
|
||||
message: 'Please input the email address',
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
type: 'email',
|
||||
message: 'Please input the correct email address',
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
{ max: 50, message: 'The maximum length is 50' }
|
||||
],
|
||||
Sex: [{ required: true, message: 'Please specify', trigger: 'blur' }],
|
||||
Status: [{ required: true, message: 'Please specify', trigger: 'blur' }]
|
||||
},
|
||||
// OrganizationOptions: [],
|
||||
userTypeOptions: [],
|
||||
isDisabled: false
|
||||
}
|
||||
components: {
|
||||
"trials-info": TrialsMyinfo,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['userId'])
|
||||
},
|
||||
mounted() {
|
||||
// this.getUserTypeList()
|
||||
this.initPage()
|
||||
},
|
||||
methods: {
|
||||
handleSave() {
|
||||
this.$refs.userForm.validate(valid => {
|
||||
if (valid) {
|
||||
this.isDisabled = true
|
||||
const selectedUserType = this.userTypeOptions.filter((item) => {
|
||||
return item.Id === this.user.UserTypeId
|
||||
})
|
||||
if (selectedUserType.length > 0) {
|
||||
this.user.userTypeEnum = selectedUserType[0].UserTypeEnum
|
||||
}
|
||||
if (this.user.IsZhiZhun === true) {
|
||||
this.user.OrganizationName = 'ZhiZhun'
|
||||
}
|
||||
if (this.user.Id) {
|
||||
updateUser(this.user).then(res => {
|
||||
this.isDisabled = false
|
||||
this.$message.success('Updated successfully')
|
||||
}).catch(() => { this.isDisabled = false })
|
||||
} else {
|
||||
addUser(this.user).then(res => {
|
||||
this.isDisabled = false
|
||||
this.$emit('getUserId', res.Result.Id)
|
||||
this.$message.success('Added successfully')
|
||||
}).catch(() => { this.isDisabled = false })
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
getUserInfo() {
|
||||
getUser(this.userId).then(res => {
|
||||
this.user = res.Result
|
||||
// res.Result.OrganizationTypeId !== '00000000-0000-0000-0000-000000000000' ? this.getOrgnizationList(res.Result.OrganizationTypeId) : this.user.OrganizationTypeId = ''
|
||||
})
|
||||
},
|
||||
getUserTypeList() {
|
||||
getUserTypeList().then(res => {
|
||||
if (res.IsSuccess) {
|
||||
this.userTypeOptions = res.Result
|
||||
}
|
||||
})
|
||||
},
|
||||
handelOrgnizationTypeChange(val) {
|
||||
if (val) {
|
||||
this.user.OrganizationId = ''
|
||||
this.getOrgnizationList(val)
|
||||
}
|
||||
},
|
||||
getOrgnizationList(OrganizationTypeId) {
|
||||
getInstitutionList(OrganizationTypeId).then(res => {
|
||||
if (res.IsSuccess) {
|
||||
this.OrganizationOptions = res.Result
|
||||
}
|
||||
})
|
||||
},
|
||||
async initPage() {
|
||||
this.userId === '' ? await store.dispatch('user/getInfo') : ''
|
||||
|
||||
if (this.userId === '') {
|
||||
await store.dispatch('user/getInfo')
|
||||
}
|
||||
this.getUserInfo()
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue