|
|
@@ -2,12 +2,14 @@
|
|
|
<div class="header">
|
|
|
<div class="content">
|
|
|
<div class="content_left">
|
|
|
- <img :src="$store.state.ip+'/api/pic/16038707135247'"
|
|
|
- alt="">
|
|
|
+ <img :src="$store.state.ip + '/api/pic/16038707135247'" alt="" />
|
|
|
<span class="title">
|
|
|
- <span v-for="item in menuList"
|
|
|
- @click="handleTitleClick(item)"
|
|
|
- :key="item.id">{{item.title}}</span>
|
|
|
+ <span
|
|
|
+ v-for="item in menuList"
|
|
|
+ @click="handleTitleClick(item)"
|
|
|
+ :key="item.id"
|
|
|
+ >{{ item.title }}</span
|
|
|
+ >
|
|
|
</span>
|
|
|
</div>
|
|
|
<div class="header-right">
|
|
|
@@ -16,105 +18,135 @@
|
|
|
<Icon type="ios-search"
|
|
|
slot="suffix" />
|
|
|
</Input> -->
|
|
|
- <Dropdown @on-click='dropClick'>
|
|
|
- <Avatar style="margin-right:10px;"
|
|
|
- src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
|
|
|
+ <Dropdown @on-click="dropClick">
|
|
|
+ <Avatar
|
|
|
+ style="margin-right:10px;"
|
|
|
+ src="https://i.loli.net/2017/08/21/599a521472424.jpg"
|
|
|
+ />
|
|
|
<DropdownMenu slot="list">
|
|
|
- <DropdownItem :name='1'>修改密码</DropdownItem>
|
|
|
- <DropdownItem :name='3'>修改个人信息</DropdownItem>
|
|
|
+ <DropdownItem :name="1">修改密码</DropdownItem>
|
|
|
+ <DropdownItem :name="3">修改个人信息</DropdownItem>
|
|
|
<DropdownItem :name="2">退出登录</DropdownItem>
|
|
|
</DropdownMenu>
|
|
|
</Dropdown>
|
|
|
- <label style="margin-right:20px;">{{userInfo.nickname}}</label>
|
|
|
- <Divider type="vertical"
|
|
|
- style="margin-right:20px;" />
|
|
|
- <Badge style="margin-right:20px;cursor:pointer"
|
|
|
- :count="noticeNum">
|
|
|
- <Icon @click="goNotice"
|
|
|
- type="ios-notifications-outline"
|
|
|
- size="26"></Icon>
|
|
|
+ <label style="margin-right:20px;">{{ userInfo.nickname }}</label>
|
|
|
+ <Divider type="vertical" style="margin-right:20px;" />
|
|
|
+ <Badge style="margin-right:20px;cursor:pointer" :count="noticeNum">
|
|
|
+ <Icon
|
|
|
+ @click="goNotice"
|
|
|
+ type="ios-notifications-outline"
|
|
|
+ size="26"
|
|
|
+ ></Icon>
|
|
|
</Badge>
|
|
|
- <Dropdown trigger="custom"
|
|
|
- :visible="visible"
|
|
|
- placement="bottom-start"
|
|
|
- @on-clickoutside='clickoutside'>
|
|
|
- <Icon size='26'
|
|
|
- type="ios-cloud-download-outline"
|
|
|
- @click="visible = true" />
|
|
|
- <DropdownMenu slot="list"
|
|
|
- style="width:300px;">
|
|
|
+ <Dropdown
|
|
|
+ trigger="custom"
|
|
|
+ :visible="visible"
|
|
|
+ placement="bottom-start"
|
|
|
+ @on-clickoutside="clickoutside"
|
|
|
+ >
|
|
|
+ <Icon
|
|
|
+ size="26"
|
|
|
+ type="ios-cloud-download-outline"
|
|
|
+ @click="visible = true"
|
|
|
+ />
|
|
|
+ <DropdownMenu slot="list" style="width:300px;">
|
|
|
<div style="color:#333;padding-left:15px;">模板下载</div>
|
|
|
- <DropdownItem v-for="item of template_list"
|
|
|
- :key="item.id">
|
|
|
- <div class='drop-dowan-item'>
|
|
|
- <span>{{item.title}}</span>
|
|
|
- <Icon @click="downLoadTemlate(item)"
|
|
|
- size='20'
|
|
|
- type="md-download" />
|
|
|
+ <DropdownItem v-for="item of template_list" :key="item.id">
|
|
|
+ <div class="drop-dowan-item">
|
|
|
+ <span>{{ item.title }}</span>
|
|
|
+ <Icon
|
|
|
+ @click="downLoadTemlate(item)"
|
|
|
+ size="20"
|
|
|
+ type="md-download"
|
|
|
+ />
|
|
|
</div>
|
|
|
</DropdownItem>
|
|
|
- <div style="text-align: right;margin:10px;border-top:1px solid #F4F4F4;padding-top:10px;">
|
|
|
- <Button style="text-align: right"
|
|
|
- type="primary"
|
|
|
- size='small'
|
|
|
- @click="visible = false">关闭</Button>
|
|
|
+ <div
|
|
|
+ style="text-align: right;margin:10px;border-top:1px solid #F4F4F4;padding-top:10px;"
|
|
|
+ >
|
|
|
+ <Button
|
|
|
+ style="text-align: right"
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ @click="visible = false"
|
|
|
+ >关闭</Button
|
|
|
+ >
|
|
|
</div>
|
|
|
</DropdownMenu>
|
|
|
</Dropdown>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <Modal class-name="vertical-center-modal"
|
|
|
- v-model="replacePassword"
|
|
|
- title='修改密码'
|
|
|
- :width="300"
|
|
|
- @on-visible-change="changePass">
|
|
|
- <Form ref='passwordInfo'
|
|
|
- :model="passwordInfo"
|
|
|
- :rules='rules'
|
|
|
- :label-width="80">
|
|
|
- <FormItem label='原始密码'
|
|
|
- prop='old_password'>
|
|
|
- <Input type="password"
|
|
|
- v-model="passwordInfo.old_password"
|
|
|
- placeholder="请输入原始密码"></Input>
|
|
|
+ <Modal
|
|
|
+ class-name="vertical-center-modal"
|
|
|
+ v-model="replacePassword"
|
|
|
+ title="修改密码"
|
|
|
+ :width="300"
|
|
|
+ @on-visible-change="changePass"
|
|
|
+ >
|
|
|
+ <Form
|
|
|
+ ref="passwordInfo"
|
|
|
+ :model="passwordInfo"
|
|
|
+ :rules="rules"
|
|
|
+ :label-width="80"
|
|
|
+ >
|
|
|
+ <FormItem label="原始密码" prop="old_password">
|
|
|
+ <Input
|
|
|
+ type="password"
|
|
|
+ v-model="passwordInfo.old_password"
|
|
|
+ placeholder="请输入原始密码"
|
|
|
+ ></Input>
|
|
|
</FormItem>
|
|
|
- <FormItem label='新密码'
|
|
|
- prop='new_password'>
|
|
|
- <Input type="password"
|
|
|
- v-model="passwordInfo.new_password"
|
|
|
- placeholder="请输入新密码"></Input>
|
|
|
+ <FormItem label="新密码" prop="new_password">
|
|
|
+ <Input
|
|
|
+ type="password"
|
|
|
+ v-model="passwordInfo.new_password"
|
|
|
+ placeholder="请输入新密码"
|
|
|
+ ></Input>
|
|
|
</FormItem>
|
|
|
- <FormItem label='确认密码'
|
|
|
- prop='verify_password'>
|
|
|
- <Input type="password"
|
|
|
- v-model="passwordInfo.verify_password"
|
|
|
- placeholder="确认密码"></Input>
|
|
|
+ <FormItem label="确认密码" prop="verify_password">
|
|
|
+ <Input
|
|
|
+ type="password"
|
|
|
+ v-model="passwordInfo.verify_password"
|
|
|
+ placeholder="确认密码"
|
|
|
+ ></Input>
|
|
|
</FormItem>
|
|
|
</Form>
|
|
|
- <div slot="footer"
|
|
|
- class="footer-modal">
|
|
|
+ <div slot="footer" class="footer-modal">
|
|
|
<Button>取消</Button>
|
|
|
- <Button type="primary"
|
|
|
- @click="replace_password('passwordInfo')">保存</Button>
|
|
|
+ <Button type="primary" @click="replace_password('passwordInfo')"
|
|
|
+ >保存</Button
|
|
|
+ >
|
|
|
</div>
|
|
|
</Modal>
|
|
|
- <Modal class-name="vertical-center-modal"
|
|
|
- v-model="showUserInfo"
|
|
|
- title='修改个人信息'
|
|
|
- @on-ok="replaceUserInfo">
|
|
|
+ <Modal
|
|
|
+ class-name="vertical-center-modal"
|
|
|
+ v-model="showUserInfo"
|
|
|
+ title="修改个人信息"
|
|
|
+ @on-ok="replaceUserInfo"
|
|
|
+ >
|
|
|
<Form :label-width="70">
|
|
|
<FormItem label="修改头像">
|
|
|
- <Upload :show-upload-list='false'
|
|
|
- :headers='headers'
|
|
|
- :on-success='uploadSuccess'
|
|
|
- :action="$store.state.ip+'/api/upload_pic'">
|
|
|
+ <Upload
|
|
|
+ :show-upload-list="false"
|
|
|
+ :headers="headers"
|
|
|
+ :on-success="uploadSuccess"
|
|
|
+ :action="$store.state.ip + '/api/upload_pic'"
|
|
|
+ >
|
|
|
<div class="upload-avatar">
|
|
|
- <Icon v-if="!info.avatar"
|
|
|
- size='30'
|
|
|
- type="ios-cloud-upload-outline" />
|
|
|
- <img v-if="info.avatar||userInfo.avatar"
|
|
|
- :src="info.avatar ? $store.state.ip+info.avatar : $store.state.ip+userInfo.avatar"
|
|
|
- alt="">
|
|
|
+ <Icon
|
|
|
+ v-if="!info.avatar"
|
|
|
+ size="30"
|
|
|
+ type="ios-cloud-upload-outline"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-if="info.avatar || userInfo.avatar"
|
|
|
+ :src="
|
|
|
+ info.avatar
|
|
|
+ ? $store.state.ip + info.avatar
|
|
|
+ : $store.state.ip + userInfo.avatar
|
|
|
+ "
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
</div>
|
|
|
</Upload>
|
|
|
</FormItem>
|
|
|
@@ -127,126 +159,139 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { mapState, mapMutations, mapActions } from 'vuex'
|
|
|
+import { mapState, mapMutations, mapActions } from "vuex";
|
|
|
export default {
|
|
|
- data () {
|
|
|
+ data() {
|
|
|
return {
|
|
|
replacePassword: false,
|
|
|
passwordInfo: {
|
|
|
- old_password: '',
|
|
|
- new_password: '',
|
|
|
- verify_password: '',
|
|
|
+ old_password: "",
|
|
|
+ new_password: "",
|
|
|
+ verify_password: "",
|
|
|
},
|
|
|
rules: {
|
|
|
old_password: [
|
|
|
- { required: true, message: '请输入原始密码', trigger: 'blur' }
|
|
|
+ { required: true, message: "请输入原始密码", trigger: "blur" },
|
|
|
],
|
|
|
new_password: [
|
|
|
- { required: true, message: '请输入新密码', trigger: 'blur' }
|
|
|
+ { required: true, message: "请输入新密码", trigger: "blur" },
|
|
|
],
|
|
|
verify_password: [
|
|
|
- { required: true, message: '确认密码', trigger: 'blur' }
|
|
|
+ { required: true, message: "确认密码", trigger: "blur" },
|
|
|
],
|
|
|
},
|
|
|
showUserInfo: false,
|
|
|
info: {
|
|
|
- nickname: '',
|
|
|
- avatar: '',
|
|
|
+ nickname: "",
|
|
|
+ avatar: "",
|
|
|
},
|
|
|
- headers: { 'Authorization': localStorage.getItem('token') },
|
|
|
+ headers: { Authorization: localStorage.getItem("token") },
|
|
|
visible: false,
|
|
|
template_list: [],
|
|
|
menuList: [],
|
|
|
- }
|
|
|
+ };
|
|
|
},
|
|
|
- created () {
|
|
|
- this.axios({ method: 'get', url: '/api/menu', }).then((res) => { this.menuList = res.data })
|
|
|
- this.saveUser()
|
|
|
+ created() {
|
|
|
+ this.axios({ method: "get", url: "/api/menu" }).then((res) => {
|
|
|
+ this.menuList = res.data;
|
|
|
+ // this.undata_navData();
|
|
|
+ });
|
|
|
+ this.saveUser();
|
|
|
},
|
|
|
computed: {
|
|
|
- ...mapState(['userInfo', 'noticeNum'])
|
|
|
+ ...mapState(["userInfo", "noticeNum"]),
|
|
|
},
|
|
|
- mounted () {
|
|
|
- this.getTemplateDown_list()
|
|
|
- this.update_notice()
|
|
|
+ mounted() {
|
|
|
+ this.getTemplateDown_list();
|
|
|
+ this.update_notice();
|
|
|
},
|
|
|
methods: {
|
|
|
- ...mapMutations(['saveUser']),
|
|
|
- ...mapActions(['update_notice']),
|
|
|
- loginOut () {
|
|
|
- this.axios.post('/api/login_out').then(res => {
|
|
|
+ ...mapMutations(["saveUser"]),
|
|
|
+ ...mapActions(["undata_navData"]),
|
|
|
+ ...mapActions(["update_notice"]),
|
|
|
+ loginOut() {
|
|
|
+ this.axios.post("/api/login_out").then((res) => {
|
|
|
if (res.code == 200) {
|
|
|
- this.$Message.success(res.msg || '已退出登录');
|
|
|
- localStorage.removeItem('token')
|
|
|
- localStorage.removeItem('autoLogin')
|
|
|
- setTimeout(() => this.$router.push({ name: 'Login' }), 500)
|
|
|
+ this.$Message.success(res.msg || "已退出登录");
|
|
|
+ localStorage.removeItem("token");
|
|
|
+ localStorage.removeItem("autoLogin");
|
|
|
+ setTimeout(() => this.$router.push({ name: "Login" }), 500);
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
- openPasswordModal () {
|
|
|
+ openPasswordModal() {
|
|
|
this.replacePassword = true;
|
|
|
},
|
|
|
- openUserInfoModal () {
|
|
|
+ openUserInfoModal() {
|
|
|
this.showUserInfo = true;
|
|
|
},
|
|
|
- replaceUserInfo () {
|
|
|
- this.axios.post('/api/replace_userinfo', this.info).then(res => {
|
|
|
+ replaceUserInfo() {
|
|
|
+ this.axios.post("/api/replace_userinfo", this.info).then((res) => {
|
|
|
if (res.code == 200) {
|
|
|
- this.$Message.success(res.msg)//这里可以继续取出缓存更换头像再存入缓存以达到同步更新效果
|
|
|
- let user = JSON.parse(localStorage.getItem('user_info'));
|
|
|
+ this.$Message.success(res.msg); //这里可以继续取出缓存更换头像再存入缓存以达到同步更新效果
|
|
|
+ let user = JSON.parse(localStorage.getItem("user_info"));
|
|
|
user.nickname = this.info.nickname;
|
|
|
user.avatar = this.info.avatar;
|
|
|
- localStorage.setItem('user_info', JSON.stringify(user))
|
|
|
+ localStorage.setItem("user_info", JSON.stringify(user));
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
- uploadSuccess (e) {
|
|
|
+ uploadSuccess(e) {
|
|
|
this.info.avatar = e.data.url;
|
|
|
},
|
|
|
- replace_password (name) {
|
|
|
+ replace_password(name) {
|
|
|
this.$refs[name].validate((valid) => {
|
|
|
if (valid) {
|
|
|
- this.axios.post('/api/replace_password', this.passwordInfo).then(res => {
|
|
|
- if (res.code == 200) {
|
|
|
- this.$Message.success(res.msg)
|
|
|
- this.replacePassword = false;
|
|
|
- localStorage.removeItem('token')
|
|
|
- setTimeout(() => this.$router.push({ name: 'Login' }), 500)
|
|
|
- }
|
|
|
- })
|
|
|
+ this.axios
|
|
|
+ .post("/api/replace_password", this.passwordInfo)
|
|
|
+ .then((res) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.$Message.success(res.msg);
|
|
|
+ this.replacePassword = false;
|
|
|
+ localStorage.removeItem("token");
|
|
|
+ setTimeout(() => this.$router.push({ name: "Login" }), 500);
|
|
|
+ }
|
|
|
+ });
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
- changePass (e) {
|
|
|
- !e ? this.passwordInfo = {} : ''
|
|
|
+ changePass(e) {
|
|
|
+ !e ? (this.passwordInfo = {}) : "";
|
|
|
},
|
|
|
- dropClick (name) {
|
|
|
- name == 2 ? this.loginOut() : (name == 1 ? this.openPasswordModal() : (name == 3 ? this.openUserInfoModal() : ''));
|
|
|
+ dropClick(name) {
|
|
|
+ name == 2
|
|
|
+ ? this.loginOut()
|
|
|
+ : name == 1
|
|
|
+ ? this.openPasswordModal()
|
|
|
+ : name == 3
|
|
|
+ ? this.openUserInfoModal()
|
|
|
+ : "";
|
|
|
},
|
|
|
- goNotice () {
|
|
|
+ goNotice() {
|
|
|
this.$router.push({
|
|
|
- path: '/cms/notice/menote'
|
|
|
- })
|
|
|
+ path: "/cms/notice/menote",
|
|
|
+ });
|
|
|
},
|
|
|
- clickoutside (e) {
|
|
|
- e && (this.visible = false)
|
|
|
+ clickoutside(e) {
|
|
|
+ e && (this.visible = false);
|
|
|
},
|
|
|
- getTemplateDown_list () {
|
|
|
- this.axios('/api/template_list')
|
|
|
- .then(res => {
|
|
|
- res.code == 200 ? (() => {
|
|
|
- this.template_list = res.data.data;
|
|
|
- })() : ''
|
|
|
- })
|
|
|
+ getTemplateDown_list() {
|
|
|
+ this.axios("/api/template_list").then((res) => {
|
|
|
+ res.code == 200
|
|
|
+ ? (() => {
|
|
|
+ this.template_list = res.data.data;
|
|
|
+ })()
|
|
|
+ : "";
|
|
|
+ });
|
|
|
},
|
|
|
- downLoadTemlate (row) {
|
|
|
+ downLoadTemlate(row) {
|
|
|
location.href = row.url;
|
|
|
},
|
|
|
- handleTitleClick (e) {
|
|
|
- this.$emit('handleTitleClick', e)
|
|
|
+ handleTitleClick(e) {
|
|
|
+ this.$emit("handleTitleClick", e);
|
|
|
},
|
|
|
},
|
|
|
-}
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
@@ -265,7 +310,7 @@ export default {
|
|
|
justify-content: space-between;
|
|
|
padding: 0 20px;
|
|
|
color: #fff;
|
|
|
- .content_left{
|
|
|
+ .content_left {
|
|
|
display: flex;
|
|
|
justify-content: flex-start;
|
|
|
}
|
|
|
@@ -311,4 +356,4 @@ export default {
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|