|
@@ -4,217 +4,256 @@
|
|
|
|
|
|
<!-- <breadcrumb class="breadcrumb-container" /> -->
|
|
<!-- <breadcrumb class="breadcrumb-container" /> -->
|
|
<div class="left-menu">
|
|
<div class="left-menu">
|
|
- <i class='el-icon-location-information topIcon'></i>
|
|
|
|
|
|
+ <i class="el-icon-location-information topIcon"></i>
|
|
|
|
|
|
- <el-popover placement="top-start"
|
|
|
|
- width="300"
|
|
|
|
- trigger="hover">
|
|
|
|
|
|
+ <el-popover placement="top-start" width="300" trigger="hover">
|
|
<div class="popover-container">
|
|
<div class="popover-container">
|
|
<!-- <p style="color: red">{{ organName }}</p> -->
|
|
<!-- <p style="color: red">{{ organName }}</p> -->
|
|
- <el-tag class="navbar_tag" type="info" v-for="item in organNameList" :key="item">{{ item }}</el-tag>
|
|
|
|
|
|
+ <el-tag
|
|
|
|
+ class="navbar_tag"
|
|
|
|
+ type="info"
|
|
|
|
+ v-for="item in organNameList"
|
|
|
|
+ :key="item"
|
|
|
|
+ >{{ item }}</el-tag
|
|
|
|
+ >
|
|
</div>
|
|
</div>
|
|
- <span slot="reference">{{ organName.length > 10 ? organName.substr(0, 10) + '...' : organName}}</span>
|
|
|
|
|
|
+ <span slot="reference">{{
|
|
|
|
+ organName.length > 10 ? organName.substr(0, 10) + "..." : organName
|
|
|
|
+ }}</span>
|
|
</el-popover>
|
|
</el-popover>
|
|
</div>
|
|
</div>
|
|
<div class="right-menu">
|
|
<div class="right-menu">
|
|
- <div class="msginfo"
|
|
|
|
- v-permission="'/journals'"
|
|
|
|
- @click="gotoRecode">
|
|
|
|
- <img src='@/assets/images/base/base-bell.svg'/>
|
|
|
|
|
|
+ <div class="msginfo" v-permission="'/journals'" @click="gotoRecode">
|
|
|
|
+ <img src="@/assets/images/base/base-bell.svg" />
|
|
<!-- <div class="active"></div> -->
|
|
<!-- <div class="active"></div> -->
|
|
</div>
|
|
</div>
|
|
- <el-dropdown class="avatar-container"
|
|
|
|
- trigger="click">
|
|
|
|
-
|
|
|
|
|
|
+ <el-dropdown class="avatar-container" trigger="click">
|
|
<div class="avatar-wrapper">
|
|
<div class="avatar-wrapper">
|
|
- <img v-if="$store.getters.avatar"
|
|
|
|
- :src="$store.getters.avatar"
|
|
|
|
- class="user-avatar" />
|
|
|
|
- <img v-else
|
|
|
|
- class="user-avatar"
|
|
|
|
- src="@/assets/images/base/placehorder-icon.png" />
|
|
|
|
|
|
+ <img
|
|
|
|
+ v-if="$store.getters.avatar"
|
|
|
|
+ :src="$store.getters.avatar"
|
|
|
|
+ class="user-avatar"
|
|
|
|
+ />
|
|
|
|
+ <img
|
|
|
|
+ v-else
|
|
|
|
+ class="user-avatar"
|
|
|
|
+ src="@/assets/images/base/placehorder-icon.png"
|
|
|
|
+ />
|
|
<!-- <i class="el-icon-caret-bottom" /> -->
|
|
<!-- <i class="el-icon-caret-bottom" /> -->
|
|
<span>{{ username }}</span>
|
|
<span>{{ username }}</span>
|
|
</div>
|
|
</div>
|
|
- <el-dropdown-menu slot="dropdown"
|
|
|
|
- class="user-dropdown">
|
|
|
|
|
|
+ <el-dropdown-menu slot="dropdown" class="user-dropdown">
|
|
<!-- divided -->
|
|
<!-- divided -->
|
|
|
|
|
|
<el-dropdown-item>
|
|
<el-dropdown-item>
|
|
- <span style="display:block;"
|
|
|
|
- @click="resetPassWord">修改密码</span>
|
|
|
|
|
|
+ <span style="display: block" @click="resetPassWord">修改密码</span>
|
|
</el-dropdown-item>
|
|
</el-dropdown-item>
|
|
<el-dropdown-item>
|
|
<el-dropdown-item>
|
|
- <span style="display:block;"
|
|
|
|
- @click="logout">退出</span>
|
|
|
|
|
|
+ <span style="display: block" @click="logout">退出</span>
|
|
</el-dropdown-item>
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown-menu>
|
|
-
|
|
|
|
</el-dropdown>
|
|
</el-dropdown>
|
|
</div>
|
|
</div>
|
|
- <el-dialog title="修改密码"
|
|
|
|
- width="500px"
|
|
|
|
- append-to-body
|
|
|
|
- :visible.sync="resetVisible">
|
|
|
|
- <el-form :model="resetForm"
|
|
|
|
- label-position='right'
|
|
|
|
- label-width="100px"
|
|
|
|
- ref='pwdForm'>
|
|
|
|
- <el-form-item label="手机号"
|
|
|
|
- prop="phone">
|
|
|
|
- <div>{{this.$store.getters.phone}}</div>
|
|
|
|
|
|
+ <el-dialog
|
|
|
|
+ title="修改密码"
|
|
|
|
+ width="500px"
|
|
|
|
+ append-to-body
|
|
|
|
+ :visible.sync="resetVisible"
|
|
|
|
+ >
|
|
|
|
+ <el-form
|
|
|
|
+ :model="resetForm"
|
|
|
|
+ label-position="right"
|
|
|
|
+ label-width="100px"
|
|
|
|
+ ref="pwdForm"
|
|
|
|
+ >
|
|
|
|
+ <el-form-item label="手机号" prop="phone">
|
|
|
|
+ <div>{{ this.$store.getters.phone }}</div>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
- <el-form-item label="新密码"
|
|
|
|
- :rules="[{ required: true, message: '密码不能为空',trigger: 'blur'},{pattern:/^[\w]{6,20}$/,message:'密码为6-20位',trigger: 'blur'}]"
|
|
|
|
- prop="password">
|
|
|
|
- <el-input v-model.trim="resetForm.password"
|
|
|
|
- type='password'
|
|
|
|
- style="width:180px"
|
|
|
|
- autocomplete="off"></el-input>
|
|
|
|
|
|
+ <el-form-item
|
|
|
|
+ label="新密码"
|
|
|
|
+ :rules="[
|
|
|
|
+ { required: true, message: '密码不能为空', trigger: 'blur' },
|
|
|
|
+ {
|
|
|
|
+ pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/,
|
|
|
|
+ message: '密码为6-20位数字和字母组合',
|
|
|
|
+ trigger: 'blur',
|
|
|
|
+ },
|
|
|
|
+ ]"
|
|
|
|
+ prop="password"
|
|
|
|
+ >
|
|
|
|
+ <el-input
|
|
|
|
+ v-model.trim="resetForm.password"
|
|
|
|
+ type="password"
|
|
|
|
+ style="width: 180px"
|
|
|
|
+ autocomplete="off"
|
|
|
|
+ ></el-input>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
- <el-form-item label="再次输入"
|
|
|
|
- :rules="[{ required: true, message: '密码不能为空',trigger: 'blur'},{pattern:/^[\w]{6,20}$/,message:'密码为6-20位',trigger: 'blur'}]"
|
|
|
|
- prop="password2">
|
|
|
|
- <el-input v-model.trim="resetForm.password2"
|
|
|
|
- type='password'
|
|
|
|
- style="width:180px"
|
|
|
|
- autocomplete="off"></el-input>
|
|
|
|
|
|
+ <el-form-item
|
|
|
|
+ label="再次输入"
|
|
|
|
+ :rules="[
|
|
|
|
+ { required: true, message: '密码不能为空', trigger: 'blur' },
|
|
|
|
+ {
|
|
|
|
+ pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/,
|
|
|
|
+ message: '密码为6-20位数字和字母组合',
|
|
|
|
+ trigger: 'blur',
|
|
|
|
+ },
|
|
|
|
+ ]"
|
|
|
|
+ prop="password2"
|
|
|
|
+ >
|
|
|
|
+ <el-input
|
|
|
|
+ v-model.trim="resetForm.password2"
|
|
|
|
+ type="password"
|
|
|
|
+ style="width: 180px"
|
|
|
|
+ autocomplete="off"
|
|
|
|
+ ></el-input>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
- <el-form-item label="验证码"
|
|
|
|
- :rules="[{ required: true, message: '验证码不能为空',trigger: 'blur'}]"
|
|
|
|
- prop="authCode"
|
|
|
|
- style="">
|
|
|
|
- <el-input v-model.trim="resetForm.authCode"
|
|
|
|
- style="width:180px"
|
|
|
|
- autocomplete="off"></el-input>
|
|
|
|
- <el-button :disabled="isDisable"
|
|
|
|
- @click="getCode">{{ btnName }}</el-button>
|
|
|
|
|
|
+ <el-form-item
|
|
|
|
+ label="验证码"
|
|
|
|
+ :rules="[
|
|
|
|
+ { required: true, message: '验证码不能为空', trigger: 'blur' },
|
|
|
|
+ ]"
|
|
|
|
+ prop="authCode"
|
|
|
|
+ style=""
|
|
|
|
+ >
|
|
|
|
+ <el-input
|
|
|
|
+ v-model.trim="resetForm.authCode"
|
|
|
|
+ style="width: 180px"
|
|
|
|
+ autocomplete="off"
|
|
|
|
+ ></el-input>
|
|
|
|
+ <el-button :disabled="isDisable" @click="getCode">{{
|
|
|
|
+ btnName
|
|
|
|
+ }}</el-button>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-form>
|
|
- <div slot="footer"
|
|
|
|
- class="dialog-footer">
|
|
|
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
<el-button @click="resetVisible = false">取 消</el-button>
|
|
<el-button @click="resetVisible = false">取 消</el-button>
|
|
- <el-button type="primary"
|
|
|
|
- @click="submitResetPassWord">确 定</el-button>
|
|
|
|
|
|
+ <el-button type="primary" @click="submitResetPassWord">确 定</el-button>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
</el-dialog>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
-import qs from 'qs'
|
|
|
|
-import axios from 'axios'
|
|
|
|
|
|
+import qs from "qs";
|
|
|
|
+import axios from "axios";
|
|
import { mapGetters } from "vuex";
|
|
import { mapGetters } from "vuex";
|
|
// import Breadcrumb from '@/components/Breadcrumb'
|
|
// import Breadcrumb from '@/components/Breadcrumb'
|
|
// import Hamburger from '@/components/Hamburger'
|
|
// import Hamburger from '@/components/Hamburger'
|
|
-import { resetPassword } from '@/api/buildTeam'
|
|
|
|
|
|
+import { resetPassword } from "@/api/buildTeam";
|
|
export default {
|
|
export default {
|
|
- data () {
|
|
|
|
|
|
+ data() {
|
|
return {
|
|
return {
|
|
- username: '',
|
|
|
|
|
|
+ username: "",
|
|
organName: this.$store.getters.organName,
|
|
organName: this.$store.getters.organName,
|
|
organNameList: [],
|
|
organNameList: [],
|
|
resetVisible: false,
|
|
resetVisible: false,
|
|
resetForm: {
|
|
resetForm: {
|
|
- phone: '',
|
|
|
|
- authCode: '',
|
|
|
|
- password: '',
|
|
|
|
- password2: ''
|
|
|
|
|
|
+ phone: "",
|
|
|
|
+ authCode: "",
|
|
|
|
+ password: "",
|
|
|
|
+ password2: "",
|
|
},
|
|
},
|
|
isDisable: false, // 是否允许发送验证码
|
|
isDisable: false, // 是否允许发送验证码
|
|
timerCount: 60,
|
|
timerCount: 60,
|
|
- btnName: '获取验证码'
|
|
|
|
- }
|
|
|
|
|
|
+ btnName: "获取验证码",
|
|
|
|
+ };
|
|
},
|
|
},
|
|
components: {
|
|
components: {
|
|
// Breadcrumb,
|
|
// Breadcrumb,
|
|
// Hamburger
|
|
// Hamburger
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
- ...mapGetters(["sidebar", "avatar"])
|
|
|
|
|
|
+ ...mapGetters(["sidebar", "avatar"]),
|
|
},
|
|
},
|
|
- mounted () {
|
|
|
|
|
|
+ mounted() {
|
|
// 手动加入
|
|
// 手动加入
|
|
this.toggleSideBar();
|
|
this.toggleSideBar();
|
|
this.username = this.$store.getters.name;
|
|
this.username = this.$store.getters.name;
|
|
- this.organNameList = this.organName.split(',')
|
|
|
|
|
|
+ this.organNameList = this.organName.split(",");
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
- toggleSideBar () {
|
|
|
|
|
|
+ toggleSideBar() {
|
|
this.$store.dispatch("app/toggleSideBar");
|
|
this.$store.dispatch("app/toggleSideBar");
|
|
},
|
|
},
|
|
- async logout () {
|
|
|
|
|
|
+ async logout() {
|
|
await this.$store.dispatch("user/logout");
|
|
await this.$store.dispatch("user/logout");
|
|
// await this.$store.dispatch("permission/removePermission")
|
|
// await this.$store.dispatch("permission/removePermission")
|
|
this.$router.push(`/login`);
|
|
this.$router.push(`/login`);
|
|
- window.location.reload()
|
|
|
|
-
|
|
|
|
|
|
+ window.location.reload();
|
|
},
|
|
},
|
|
- gotoRecode () {
|
|
|
|
- this.$router.push('/journal/journal')
|
|
|
|
|
|
+ gotoRecode() {
|
|
|
|
+ this.$router.push("/journal/journal");
|
|
},
|
|
},
|
|
- resetPassWord () {
|
|
|
|
|
|
+ resetPassWord() {
|
|
this.resetVisible = true;
|
|
this.resetVisible = true;
|
|
},
|
|
},
|
|
- submitResetPassWord () {
|
|
|
|
|
|
+ submitResetPassWord() {
|
|
if (this.resetForm.password !== this.resetForm.password2) {
|
|
if (this.resetForm.password !== this.resetForm.password2) {
|
|
- this.$message.error('两次密码必须相同')
|
|
|
|
- return
|
|
|
|
|
|
+ this.$message.error("两次密码必须相同");
|
|
|
|
+ return;
|
|
}
|
|
}
|
|
- this.$refs['pwdForm'].validate(res => {
|
|
|
|
|
|
+ this.$refs["pwdForm"].validate((res) => {
|
|
if (res) {
|
|
if (res) {
|
|
// 发请求
|
|
// 发请求
|
|
- resetPassword({ authCode: this.resetForm.authCode, mobile: this.$store.getters.phone, newPassword: this.resetForm.password }).then(res => {
|
|
|
|
|
|
+ resetPassword({
|
|
|
|
+ authCode: this.resetForm.authCode,
|
|
|
|
+ mobile: this.$store.getters.phone,
|
|
|
|
+ newPassword: this.resetForm.password,
|
|
|
|
+ }).then((res) => {
|
|
if (res.code == 200) {
|
|
if (res.code == 200) {
|
|
// 修改成功
|
|
// 修改成功
|
|
- this.$message.success('修改成功')
|
|
|
|
- this.logout()
|
|
|
|
|
|
+ this.$message.success("修改成功");
|
|
|
|
+ this.logout();
|
|
}
|
|
}
|
|
- })
|
|
|
|
|
|
+ });
|
|
}
|
|
}
|
|
- })
|
|
|
|
|
|
+ });
|
|
},
|
|
},
|
|
- getCode () {
|
|
|
|
|
|
+ getCode() {
|
|
// 获取验证码
|
|
// 获取验证码
|
|
if (!this.$store.getters.phone) {
|
|
if (!this.$store.getters.phone) {
|
|
- this.$message.error('请输入正确的手机号')
|
|
|
|
- return
|
|
|
|
|
|
+ this.$message.error("请输入正确的手机号");
|
|
|
|
+ return;
|
|
}
|
|
}
|
|
if (!this.isDisable) {
|
|
if (!this.isDisable) {
|
|
this.isDisable = true;
|
|
this.isDisable = true;
|
|
// 发请求成功后开启定时器
|
|
// 发请求成功后开启定时器
|
|
// 发送验证码
|
|
// 发送验证码
|
|
- axios.post('/api-web/code/sendSms', qs.stringify({ mobile: this.$store.getters.phone })).then(res => {
|
|
|
|
- if (res.data.code == 200) {
|
|
|
|
- let timer = setInterval(res => {
|
|
|
|
- if (this.timerCount <= 0) {
|
|
|
|
- clearInterval(timer)
|
|
|
|
- this.isDisable = false;
|
|
|
|
- this.btnName = '获取验证码';
|
|
|
|
- this.timerCount = 60;
|
|
|
|
- } else {
|
|
|
|
- this.timerCount--;
|
|
|
|
- this.btnName = `${this.timerCount}s后重试`
|
|
|
|
- }
|
|
|
|
- }, 1000)
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
-
|
|
|
|
|
|
+ axios
|
|
|
|
+ .post(
|
|
|
|
+ "/api-web/code/sendSms",
|
|
|
|
+ qs.stringify({ mobile: this.$store.getters.phone })
|
|
|
|
+ )
|
|
|
|
+ .then((res) => {
|
|
|
|
+ if (res.data.code == 200) {
|
|
|
|
+ let timer = setInterval((res) => {
|
|
|
|
+ if (this.timerCount <= 0) {
|
|
|
|
+ clearInterval(timer);
|
|
|
|
+ this.isDisable = false;
|
|
|
|
+ this.btnName = "获取验证码";
|
|
|
|
+ this.timerCount = 60;
|
|
|
|
+ } else {
|
|
|
|
+ this.timerCount--;
|
|
|
|
+ this.btnName = `${this.timerCount}s后重试`;
|
|
|
|
+ }
|
|
|
|
+ }, 1000);
|
|
|
|
+ }
|
|
|
|
+ });
|
|
}
|
|
}
|
|
- }
|
|
|
|
|
|
+ },
|
|
},
|
|
},
|
|
watch: {
|
|
watch: {
|
|
- resetVisible (val) {
|
|
|
|
|
|
+ resetVisible(val) {
|
|
if (!val) {
|
|
if (!val) {
|
|
this.resetForm = {
|
|
this.resetForm = {
|
|
- phone: '',
|
|
|
|
- authCode: '',
|
|
|
|
- password: '',
|
|
|
|
- password2: ''
|
|
|
|
- }
|
|
|
|
|
|
+ phone: "",
|
|
|
|
+ authCode: "",
|
|
|
|
+ password: "",
|
|
|
|
+ password2: "",
|
|
|
|
+ };
|
|
}
|
|
}
|
|
- }
|
|
|
|
- }
|
|
|
|
|
|
+ },
|
|
|
|
+ },
|
|
};
|
|
};
|
|
</script>
|
|
</script>
|
|
|
|
|