|
@@ -1,107 +1,113 @@
|
|
|
<template>
|
|
|
- <div class="app-container Profile-container">
|
|
|
- <el-tabs tab-position="left" style="height:100%" v-model="activeTab" class="profile-tabs"
|
|
|
- v-loading="userLoading">
|
|
|
- <el-tab-pane label="个人资料" name="user">
|
|
|
- <UserInfo ref="user" :user='user' v-if="visible.user" @updateInfo="getInfo" />
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane label="租户信息" name="tenantInfo" v-if="isTenant">
|
|
|
- <TenantInfo ref="tenantInfo" v-if="visible.tenantInfo" :tenantData="tenantData" />
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane label="修改密码" name="password">
|
|
|
- <Password ref="password" v-if="visible.password" />
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane disabled name="line"></el-tab-pane>
|
|
|
- <el-tab-pane label="我的组织" name="organize">
|
|
|
- <div class="JNPF-common-title mb-10 ">
|
|
|
- <h2 class="bold">我的组织
|
|
|
- <el-tooltip content="用户可以自行切换组织信息,我的组织默认只能进行单选" placement="right">
|
|
|
- <a class="tooltip-question el-icon-question"></a>
|
|
|
- </el-tooltip>
|
|
|
- </h2>
|
|
|
- </div>
|
|
|
- <div class="organize-list">
|
|
|
- <el-row :gutter="80" v-if="organizeList.length">
|
|
|
- <el-col :span="12" class="organize-item" v-for="(item,i) in organizeList" :key="i">
|
|
|
- <div class="organize-item-main" :class="{active:activeOrganize===item.id}"
|
|
|
- @click="changeMajor(item.id,'Organize')">
|
|
|
- <i class="icon-ym icon-ym-organization"></i>
|
|
|
- <p class="organize-name">{{item.fullName}}</p>
|
|
|
- <p class="btn">默认</p>
|
|
|
- <div class="icon-checked">
|
|
|
- <i class="el-icon-check"></i>
|
|
|
+ <div class="app-container Profile-container">
|
|
|
+ <el-tabs tab-position="left" style="height:100%" v-model="activeTab" class="profile-tabs"
|
|
|
+ v-loading="userLoading">
|
|
|
+ <el-tab-pane label="个人资料" name="user">
|
|
|
+ <UserInfo ref="user" :user='user' v-if="visible.user" @updateInfo="getInfo" />
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="租户信息" name="tenantInfo" v-if="isTenant">
|
|
|
+ <TenantInfo ref="tenantInfo" v-if="visible.tenantInfo" :tenantData="tenantData" />
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="修改密码" name="password">
|
|
|
+ <Password ref="password" v-if="visible.password" />
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane disabled name="line"></el-tab-pane>
|
|
|
+ <el-tab-pane label="我的组织" name="organize">
|
|
|
+ <div class="JNPF-common-title mb-10 ">
|
|
|
+ <h2 class="bold">我的组织
|
|
|
+ <el-tooltip content="用户可以自行切换组织信息,我的组织默认只能进行单选" placement="right">
|
|
|
+ <a class="tooltip-question el-icon-question"></a>
|
|
|
+ </el-tooltip>
|
|
|
+ </h2>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-empty description="暂无数据" :image-size="120" v-else></el-empty>
|
|
|
- </div>
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane label="我的岗位" name="position">
|
|
|
- <div class="JNPF-common-title mb-10">
|
|
|
- <h2 class="bold">我的岗位
|
|
|
- <el-tooltip content="用户可以自行切换我的组织内的岗位信息,我的岗位默认只能进行单选" placement="right">
|
|
|
- <a class="el-icon-question tooltip-question"></a>
|
|
|
- </el-tooltip>
|
|
|
- </h2>
|
|
|
- </div>
|
|
|
- <div class="organize-list">
|
|
|
- <el-row :gutter="80" v-if="positionList.length">
|
|
|
- <el-col :span="12" class="organize-item" v-for="(item,i) in positionList" :key="i">
|
|
|
- <div class="organize-item-main" :class="{active:activePosition===item.id}"
|
|
|
- @click="changeMajor(item.id,'Position')">
|
|
|
- <i class="icon-ym icon-ym-wf-outgoingApply"></i>
|
|
|
- <p class="organize-name">{{item.fullName}}</p>
|
|
|
- <p class="btn">主岗</p>
|
|
|
- <div class="icon-checked">
|
|
|
- <i class="el-icon-check"></i>
|
|
|
+ <div class="organize-list">
|
|
|
+ <el-row :gutter="80" v-if="organizeList.length">
|
|
|
+ <el-col :span="12" class="organize-item" v-for="(item,i) in organizeList"
|
|
|
+ :key="i">
|
|
|
+ <div class="organize-item-main"
|
|
|
+ :class="{active:activeOrganize===item.id}"
|
|
|
+ @click="changeMajor(item.id,'Organize')">
|
|
|
+ <i class="icon-ym icon-ym-organization"></i>
|
|
|
+ <p class="organize-name">{{item.fullName}}</p>
|
|
|
+ <p class="btn">默认</p>
|
|
|
+ <div class="icon-checked">
|
|
|
+ <i class="el-icon-check"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-empty description="暂无数据" :image-size="120" v-else></el-empty>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-empty description="暂无数据" :image-size="120" v-else></el-empty>
|
|
|
- </div>
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane label="我的下属" name="subordinate">
|
|
|
- <div class="JNPF-common-title mb-10">
|
|
|
- <h2 class="bold">我的下属</h2>
|
|
|
- </div>
|
|
|
- <div class="subordinate-list">
|
|
|
- <el-tree :data="treeData" :props="props" check-on-click-node node-key="id" lazy
|
|
|
- v-loading="loading" :load="loadNode" class="JNPF-common-el-tree subordinate-tree">
|
|
|
- <el-card class="subordinate-tree-node" shadow="never" slot-scope="{ data }">
|
|
|
- <el-avatar :size="50" :src="define.comUrl+ data.avatar"></el-avatar>
|
|
|
- <div class="text">
|
|
|
- <p>{{data.userName}}</p>
|
|
|
- <p class="user-text">{{data.department}}{{data.position?'/'+data.position:''}}</p>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </el-tree>
|
|
|
- </div>
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane label="绑定设置" name="justAuth" v-if="useSocials">
|
|
|
- <JustAuth ref="justAuth" v-if="visible.justAuth" />
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane label="系统权限" name="authorize" class="el-tab-pane-authorize">
|
|
|
- <Authorize ref="authorize" v-if="visible.authorize" />
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane label="登录日志" name="sysLog">
|
|
|
- <SysLog ref="sysLog" v-if="visible.sysLog" />
|
|
|
- </el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
- <div class="head">
|
|
|
- <el-upload class="avatar-uploader" :action="define.comUploadUrl+'/userAvatar'"
|
|
|
- :headers="uploadHeaders" :on-success="handleSuccess" :show-file-list="false"
|
|
|
- accept="image/*" :before-upload="beforeUpload">
|
|
|
- <div class="avatar-box">
|
|
|
- <el-avatar :size="50" :src="define.comUrl + user.avatar" class="avatar"
|
|
|
- v-if="user.avatar" />
|
|
|
- <div class="avatar-hover">更换头像</div>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="我的岗位" name="position">
|
|
|
+ <div class="JNPF-common-title mb-10">
|
|
|
+ <h2 class="bold">我的岗位
|
|
|
+ <el-tooltip content="用户可以自行切换我的组织内的岗位信息,我的岗位默认只能进行单选" placement="right">
|
|
|
+ <a class="el-icon-question tooltip-question"></a>
|
|
|
+ </el-tooltip>
|
|
|
+ </h2>
|
|
|
+ </div>
|
|
|
+ <div class="organize-list">
|
|
|
+ <el-row :gutter="80" v-if="positionList.length">
|
|
|
+ <el-col :span="12" class="organize-item" v-for="(item,i) in positionList"
|
|
|
+ :key="i">
|
|
|
+ <div class="organize-item-main"
|
|
|
+ :class="{active:activePosition===item.id}"
|
|
|
+ @click="changeMajor(item.id,'Position')">
|
|
|
+ <i class="icon-ym icon-ym-wf-outgoingApply"></i>
|
|
|
+ <p class="organize-name">{{item.fullName}}</p>
|
|
|
+ <p class="btn">主岗</p>
|
|
|
+ <div class="icon-checked">
|
|
|
+ <i class="el-icon-check"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-empty description="暂无数据" :image-size="120" v-else></el-empty>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="我的下属" name="subordinate">
|
|
|
+ <div class="JNPF-common-title mb-10">
|
|
|
+ <h2 class="bold">我的下属</h2>
|
|
|
+ </div>
|
|
|
+ <div class="subordinate-list">
|
|
|
+ <el-tree :data="treeData" :props="props" check-on-click-node node-key="id" lazy
|
|
|
+ v-loading="loading" :load="loadNode"
|
|
|
+ class="JNPF-common-el-tree subordinate-tree">
|
|
|
+ <el-card class="subordinate-tree-node" shadow="never" slot-scope="{ data }">
|
|
|
+ <el-avatar :size="50" :src="define.comUrl+ data.avatar"></el-avatar>
|
|
|
+ <div class="text">
|
|
|
+ <p>{{data.userName}}</p>
|
|
|
+ <p class="user-text">
|
|
|
+ {{data.department}}{{data.position?'/'+data.position:''}}</p>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-tree>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="绑定设置" name="justAuth" v-if="useSocials">
|
|
|
+ <JustAuth ref="justAuth" v-if="visible.justAuth" />
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="系统权限" name="authorize" class="el-tab-pane-authorize">
|
|
|
+ <Authorize ref="authorize" v-if="visible.authorize" />
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="登录日志" name="sysLog">
|
|
|
+ <SysLog ref="sysLog" v-if="visible.sysLog" />
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ <div class="head">
|
|
|
+ <el-upload class="avatar-uploader" :action="define.comUploadUrl+'/userAvatar'"
|
|
|
+ :headers="uploadHeaders" :on-success="handleSuccess" :show-file-list="false"
|
|
|
+ accept="image/*" :before-upload="beforeUpload">
|
|
|
+ <div class="avatar-box">
|
|
|
+ <el-avatar :size="50" :src="define.comUrl + user.avatar" class="avatar"
|
|
|
+ v-if="user.avatar" />
|
|
|
+ <div class="avatar-hover">更换头像</div>
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
+ <span class="username">{{user.realName}}</span>
|
|
|
</div>
|
|
|
- </el-upload>
|
|
|
- <span class="username">{{user.realName}}</span>
|
|
|
</div>
|
|
|
- </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import { UserSettingInfo, getSubordinate, UpdateAvatar, UpdateLanguage, getUserOrganizes, getUserPositions, setMajor } from '@/api/permission/userSetting'
|
|
@@ -112,377 +118,377 @@ import SysLog from './components/SysLog'
|
|
|
import JustAuth from './components/JustAuth'
|
|
|
import TenantInfo from './components/TenantInfo'
|
|
|
export default {
|
|
|
- name: 'profile',
|
|
|
- components: { UserInfo, Password, Authorize, SysLog, JustAuth, TenantInfo },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- user: {},
|
|
|
- treeData: [],
|
|
|
- activeTab: '',
|
|
|
- organizeList: [],
|
|
|
- positionList: [],
|
|
|
- activeOrganize: '',
|
|
|
- activePosition: '',
|
|
|
- visible: {
|
|
|
- tenantInfo: false,
|
|
|
- user: true,
|
|
|
- password: false,
|
|
|
- theme: false,
|
|
|
- authorize: false,
|
|
|
- sysLog: false,
|
|
|
- justAuth: false,
|
|
|
- },
|
|
|
- props: {
|
|
|
- children: 'children',
|
|
|
- label: 'userName',
|
|
|
- isLeaf: 'isLeaf'
|
|
|
- },
|
|
|
- loading: false,
|
|
|
- userLoading: false,
|
|
|
- nodeId: '0',
|
|
|
- uploadHeaders: { Authorization: this.$store.getters.token },
|
|
|
- tenantData: {},
|
|
|
- isTenant: false
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- '$route': 'getInfo',
|
|
|
- activeTab(val) {
|
|
|
- for (let key of Object.keys(this.visible)) {
|
|
|
- this.visible[key] = false
|
|
|
- }
|
|
|
- this.visible[val] = true
|
|
|
- if (val === 'subordinate') {
|
|
|
- this.nodeId = '0'
|
|
|
- this.getSubordinate()
|
|
|
- return
|
|
|
- }
|
|
|
- if (val === 'organize') {
|
|
|
- this.getUserOrganizes()
|
|
|
- return
|
|
|
- }
|
|
|
- if (val === 'position') {
|
|
|
- this.getUserPositions()
|
|
|
- return
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.getInfo()
|
|
|
- },
|
|
|
- computed: {
|
|
|
- useSocials() {
|
|
|
- return localStorage.getItem('useSocials') && localStorage.getItem('useSocials') != '0'
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- beforeUpload(file) {
|
|
|
- let isAccept = new RegExp('image/*').test(file.type)
|
|
|
- if (!isAccept) {
|
|
|
- this.$message.error(`请上传图片`)
|
|
|
- }
|
|
|
- return isAccept;
|
|
|
- },
|
|
|
- getInfo() {
|
|
|
- this.userLoading = true
|
|
|
- UserSettingInfo().then(res => {
|
|
|
- this.user = res.data
|
|
|
- this.activeTab = 'user'
|
|
|
- this.userLoading = false
|
|
|
- this.tenantData = this.user.currentTenantInfo
|
|
|
- this.isTenant = this.user.isTenant
|
|
|
- let flag = this.$router.history.current.query.flag
|
|
|
- if (flag == "1") {
|
|
|
- this.activeTab = "justAuth"
|
|
|
+ name: 'profile',
|
|
|
+ components: { UserInfo, Password, Authorize, SysLog, JustAuth, TenantInfo },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ user: {},
|
|
|
+ treeData: [],
|
|
|
+ activeTab: '',
|
|
|
+ organizeList: [],
|
|
|
+ positionList: [],
|
|
|
+ activeOrganize: '',
|
|
|
+ activePosition: '',
|
|
|
+ visible: {
|
|
|
+ tenantInfo: false,
|
|
|
+ user: true,
|
|
|
+ password: false,
|
|
|
+ theme: false,
|
|
|
+ authorize: false,
|
|
|
+ sysLog: false,
|
|
|
+ justAuth: false,
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ children: 'children',
|
|
|
+ label: 'userName',
|
|
|
+ isLeaf: 'isLeaf'
|
|
|
+ },
|
|
|
+ loading: false,
|
|
|
+ userLoading: false,
|
|
|
+ nodeId: '0',
|
|
|
+ uploadHeaders: { Authorization: this.$store.getters.token },
|
|
|
+ tenantData: {},
|
|
|
+ isTenant: false
|
|
|
}
|
|
|
- })
|
|
|
},
|
|
|
- getSubordinate() {
|
|
|
- this.loading = true
|
|
|
- getSubordinate(this.nodeId).then(res => {
|
|
|
- this.treeData = res.data
|
|
|
- this.loading = false
|
|
|
- })
|
|
|
- },
|
|
|
- loadNode(node, resolve) {
|
|
|
- if (node.level === 0) {
|
|
|
- this.nodeId = '0'
|
|
|
- return resolve(this.treeData)
|
|
|
- }
|
|
|
- this.nodeId = node.data.id
|
|
|
- getSubordinate(this.nodeId).then(res => {
|
|
|
- resolve(res.data)
|
|
|
- })
|
|
|
- },
|
|
|
- handleSuccess(res, file) {
|
|
|
- if (res.code == 200) {
|
|
|
- this.updateAvatar(res.data)
|
|
|
- } else {
|
|
|
- this.$message({
|
|
|
- message: '上传失败',
|
|
|
- type: 'error',
|
|
|
- duration: 1000,
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- updateAvatar(data) {
|
|
|
- UpdateAvatar(data.name).then(res => {
|
|
|
- this.user.avatar = data.url
|
|
|
- this.$store.commit('user/SET_USERINFO_HEADICON', data.url)
|
|
|
- this.$message({
|
|
|
- message: res.msg,
|
|
|
- type: 'success',
|
|
|
- duration: 1000,
|
|
|
- })
|
|
|
- })
|
|
|
+ watch: {
|
|
|
+ '$route': 'getInfo',
|
|
|
+ activeTab(val) {
|
|
|
+ for (let key of Object.keys(this.visible)) {
|
|
|
+ this.visible[key] = false
|
|
|
+ }
|
|
|
+ this.visible[val] = true
|
|
|
+ if (val === 'subordinate') {
|
|
|
+ this.nodeId = '0'
|
|
|
+ this.getSubordinate()
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (val === 'organize') {
|
|
|
+ this.getUserOrganizes()
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (val === 'position') {
|
|
|
+ this.getUserPositions()
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
- getUserOrganizes() {
|
|
|
- getUserOrganizes().then(res => {
|
|
|
- this.organizeList = res.data || []
|
|
|
- const list = this.organizeList.filter(o => o.isDefault)
|
|
|
- if (!list.length) return this.activeOrganize = ''
|
|
|
- const activeItem = list[0]
|
|
|
- this.activeOrganize = activeItem.id
|
|
|
- })
|
|
|
+ created() {
|
|
|
+ this.getInfo()
|
|
|
},
|
|
|
- getUserPositions() {
|
|
|
- getUserPositions().then(res => {
|
|
|
- this.positionList = res.data || []
|
|
|
- const list = this.positionList.filter(o => o.isDefault)
|
|
|
- if (!list.length) return this.activePosition = ''
|
|
|
- const activeItem = list[0]
|
|
|
- this.activePosition = activeItem.id
|
|
|
- })
|
|
|
+ computed: {
|
|
|
+ useSocials() {
|
|
|
+ return localStorage.getItem('useSocials') && localStorage.getItem('useSocials') != '0'
|
|
|
+ }
|
|
|
},
|
|
|
- changeMajor(majorId, majorType) {
|
|
|
- if (this['active' + majorType] === majorId) return
|
|
|
- let query = {
|
|
|
- majorId,
|
|
|
- majorType
|
|
|
- }
|
|
|
- setMajor(query).then(res => {
|
|
|
- this['active' + majorType] = majorId
|
|
|
- this.$message({
|
|
|
- message: res.msg,
|
|
|
- type: 'success',
|
|
|
- duration: 1500,
|
|
|
- onClose() {
|
|
|
- location.reload()
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
+ methods: {
|
|
|
+ beforeUpload(file) {
|
|
|
+ let isAccept = new RegExp('image/*').test(file.type)
|
|
|
+ if (!isAccept) {
|
|
|
+ this.$message.error(`请上传图片`)
|
|
|
+ }
|
|
|
+ return isAccept;
|
|
|
+ },
|
|
|
+ getInfo() {
|
|
|
+ this.userLoading = true
|
|
|
+ UserSettingInfo().then(res => {
|
|
|
+ this.user = res.data
|
|
|
+ this.activeTab = 'user'
|
|
|
+ this.userLoading = false
|
|
|
+ this.tenantData = this.user.currentTenantInfo
|
|
|
+ this.isTenant = this.user.isTenant
|
|
|
+ let flag = this.$router.history.current.query.flag
|
|
|
+ if (flag == "1") {
|
|
|
+ this.activeTab = "justAuth"
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getSubordinate() {
|
|
|
+ this.loading = true
|
|
|
+ getSubordinate(this.nodeId).then(res => {
|
|
|
+ this.treeData = res.data
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ loadNode(node, resolve) {
|
|
|
+ if (node.level === 0) {
|
|
|
+ this.nodeId = '0'
|
|
|
+ return resolve(this.treeData)
|
|
|
+ }
|
|
|
+ this.nodeId = node.data.id
|
|
|
+ getSubordinate(this.nodeId).then(res => {
|
|
|
+ resolve(res.data)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleSuccess(res, file) {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.updateAvatar(res.data)
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ message: '上传失败',
|
|
|
+ type: 'error',
|
|
|
+ duration: 1000,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ updateAvatar(data) {
|
|
|
+ UpdateAvatar(data.name).then(res => {
|
|
|
+ this.user.avatar = data.url
|
|
|
+ this.$store.commit('user/SET_USERINFO_HEADICON', data.url)
|
|
|
+ this.$message({
|
|
|
+ message: res.msg,
|
|
|
+ type: 'success',
|
|
|
+ duration: 1000,
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getUserOrganizes() {
|
|
|
+ getUserOrganizes().then(res => {
|
|
|
+ this.organizeList = res.data || []
|
|
|
+ const list = this.organizeList.filter(o => o.isDefault)
|
|
|
+ if (!list.length) return this.activeOrganize = ''
|
|
|
+ const activeItem = list[0]
|
|
|
+ this.activeOrganize = activeItem.id
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getUserPositions() {
|
|
|
+ getUserPositions().then(res => {
|
|
|
+ this.positionList = res.data || []
|
|
|
+ const list = this.positionList.filter(o => o.isDefault)
|
|
|
+ if (!list.length) return this.activePosition = ''
|
|
|
+ const activeItem = list[0]
|
|
|
+ this.activePosition = activeItem.id
|
|
|
+ })
|
|
|
+ },
|
|
|
+ changeMajor(majorId, majorType) {
|
|
|
+ if (this['active' + majorType] === majorId) return
|
|
|
+ let query = {
|
|
|
+ majorId,
|
|
|
+ majorType
|
|
|
+ }
|
|
|
+ setMajor(query).then(res => {
|
|
|
+ this['active' + majorType] = majorId
|
|
|
+ this.$message({
|
|
|
+ message: res.msg,
|
|
|
+ type: 'success',
|
|
|
+ duration: 1500,
|
|
|
+ onClose() {
|
|
|
+ location.reload()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.Profile-container {
|
|
|
- position: relative;
|
|
|
- padding-top: 10px;
|
|
|
- .profile-tabs {
|
|
|
- >>> .el-tabs__nav-scroll {
|
|
|
- padding-top: 70px;
|
|
|
- }
|
|
|
- >>> .el-tabs__item {
|
|
|
- text-align: left !important;
|
|
|
- }
|
|
|
- >>> .el-tabs__content {
|
|
|
- height: 100%;
|
|
|
- .el-tab-pane {
|
|
|
- height: 100%;
|
|
|
- overflow: auto;
|
|
|
- overflow-x: hidden;
|
|
|
+ position: relative;
|
|
|
+ padding-top: 10px;
|
|
|
+ .profile-tabs {
|
|
|
+ >>> .el-tabs__nav-scroll {
|
|
|
+ padding-top: 70px;
|
|
|
+ }
|
|
|
+ >>> .el-tabs__item {
|
|
|
+ text-align: left !important;
|
|
|
+ }
|
|
|
+ >>> .el-tabs__content {
|
|
|
+ height: 100%;
|
|
|
+ .el-tab-pane {
|
|
|
+ height: 100%;
|
|
|
+ overflow: auto;
|
|
|
+ overflow-x: hidden;
|
|
|
|
|
|
- &.el-tab-pane-authorize {
|
|
|
- overflow: hidden;
|
|
|
+ &.el-tab-pane-authorize {
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ >>> #tab-line {
|
|
|
+ height: 20px;
|
|
|
+ width: 160px;
|
|
|
+ &::after {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 1px;
|
|
|
+ background: #ddd;
|
|
|
+ content: '';
|
|
|
+ display: block;
|
|
|
+ overflow: hidden;
|
|
|
+ top: 10px;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
- >>> #tab-line {
|
|
|
- height: 20px;
|
|
|
- width: 160px;
|
|
|
- &::after {
|
|
|
+ .head {
|
|
|
position: absolute;
|
|
|
- width: 100%;
|
|
|
- height: 1px;
|
|
|
- background: #ddd;
|
|
|
- content: '';
|
|
|
- display: block;
|
|
|
- overflow: hidden;
|
|
|
+ left: 10px;
|
|
|
top: 10px;
|
|
|
- left: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .head {
|
|
|
- position: absolute;
|
|
|
- left: 10px;
|
|
|
- top: 10px;
|
|
|
- height: 70px;
|
|
|
- width: 160px;
|
|
|
- padding-top: 10px;
|
|
|
- >>> .avatar-uploader {
|
|
|
- display: inline-block;
|
|
|
- vertical-align: top;
|
|
|
- .avatar-hover {
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- font-size: 12px;
|
|
|
- display: none;
|
|
|
- overflow: hidden;
|
|
|
- width: 50px;
|
|
|
- height: 50px;
|
|
|
- text-align: center;
|
|
|
- border-radius: 50%;
|
|
|
- line-height: 50px;
|
|
|
- color: #fff;
|
|
|
- cursor: pointer;
|
|
|
- background: rgba(0, 0, 0, 0.5);
|
|
|
- }
|
|
|
- &:hover {
|
|
|
- & .avatar-hover {
|
|
|
- display: block;
|
|
|
+ height: 70px;
|
|
|
+ width: 160px;
|
|
|
+ padding-top: 10px;
|
|
|
+ >>> .avatar-uploader {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: top;
|
|
|
+ .avatar-hover {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ font-size: 12px;
|
|
|
+ display: none;
|
|
|
+ overflow: hidden;
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 50%;
|
|
|
+ line-height: 50px;
|
|
|
+ color: #fff;
|
|
|
+ cursor: pointer;
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ & .avatar-hover {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .avatar-box {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .avatar {
|
|
|
+ display: inline-block;
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ overflow: hidden;
|
|
|
+ border-radius: 50%;
|
|
|
+ vertical-align: top;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .username {
|
|
|
+ line-height: 50px;
|
|
|
+ font-size: 14px;
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- .avatar-box {
|
|
|
- position: relative;
|
|
|
- }
|
|
|
- .avatar {
|
|
|
- display: inline-block;
|
|
|
- width: 50px;
|
|
|
- height: 50px;
|
|
|
- overflow: hidden;
|
|
|
- border-radius: 50%;
|
|
|
- vertical-align: top;
|
|
|
- margin-right: 10px;
|
|
|
- }
|
|
|
- .username {
|
|
|
- line-height: 50px;
|
|
|
- font-size: 14px;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- >>> .el-select,
|
|
|
- >>> .el-date-editor {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- .subordinate-tree {
|
|
|
- height: 100%;
|
|
|
- margin: 0;
|
|
|
- .subordinate-tree-node {
|
|
|
- width: 300px;
|
|
|
- }
|
|
|
- >>> .el-tree-node:focus > .el-tree-node__content {
|
|
|
- background-color: #fff;
|
|
|
- }
|
|
|
- >>> .el-tree-node__expand-icon.el-icon-caret-right {
|
|
|
- font-size: 20px;
|
|
|
- }
|
|
|
- >>> .el-tree-node__content {
|
|
|
- height: 80px;
|
|
|
- &:hover {
|
|
|
- background: #fff;
|
|
|
- }
|
|
|
+ >>> .el-select,
|
|
|
+ >>> .el-date-editor {
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
- >>> .el-card__body {
|
|
|
- display: flex;
|
|
|
- padding: 10px 10px;
|
|
|
- align-items: center;
|
|
|
- .el-avatar {
|
|
|
- margin-right: 10px;
|
|
|
- flex-shrink: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .text {
|
|
|
- font-size: 14px;
|
|
|
- width: calc(100% - 60px);
|
|
|
- p {
|
|
|
- line-height: 25px;
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
- overflow: hidden;
|
|
|
- word-break: break-all;
|
|
|
+ .subordinate-tree {
|
|
|
+ height: 100%;
|
|
|
+ margin: 0;
|
|
|
+ .subordinate-tree-node {
|
|
|
+ width: 300px;
|
|
|
}
|
|
|
- }
|
|
|
- .user-text {
|
|
|
- color: #999;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- #pane-subordinate {
|
|
|
- overflow: hidden;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- .subordinate-list {
|
|
|
- flex: 1;
|
|
|
- overflow: auto;
|
|
|
- }
|
|
|
- }
|
|
|
- .organize-list {
|
|
|
- width: 100%;
|
|
|
- padding: 50px;
|
|
|
- .organize-item {
|
|
|
- margin-bottom: 30px;
|
|
|
- .organize-item-main {
|
|
|
- height: 70px;
|
|
|
- position: relative;
|
|
|
- border-radius: 4px;
|
|
|
- border: 1px solid #dcdfe6;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding: 0 20px;
|
|
|
- cursor: pointer;
|
|
|
- box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
|
|
|
- color: #606266;
|
|
|
- &.active {
|
|
|
- border: 1px solid #1890ff;
|
|
|
- box-shadow: 0 0 6px rgba(6, 58, 108, 0.26);
|
|
|
- color: #1890ff;
|
|
|
- .btn,
|
|
|
- .icon-checked {
|
|
|
- display: block;
|
|
|
- }
|
|
|
+ >>> .el-tree-node:focus > .el-tree-node__content {
|
|
|
+ background-color: #fff;
|
|
|
}
|
|
|
- .icon-ym {
|
|
|
- font-size: 24px;
|
|
|
- margin-right: 10px;
|
|
|
+ >>> .el-tree-node__expand-icon.el-icon-caret-right {
|
|
|
+ font-size: 20px;
|
|
|
}
|
|
|
- .organize-name {
|
|
|
- line-height: 24px;
|
|
|
- font-size: 14px;
|
|
|
+ >>> .el-tree-node__content {
|
|
|
+ height: 80px;
|
|
|
+ &:hover {
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
}
|
|
|
- .btn {
|
|
|
- display: none;
|
|
|
- position: absolute;
|
|
|
- right: 45px;
|
|
|
- bottom: 7px;
|
|
|
- font-size: 12px;
|
|
|
+ >>> .el-card__body {
|
|
|
+ display: flex;
|
|
|
+ padding: 10px 10px;
|
|
|
+ align-items: center;
|
|
|
+ .el-avatar {
|
|
|
+ margin-right: 10px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ font-size: 14px;
|
|
|
+ width: calc(100% - 60px);
|
|
|
+ p {
|
|
|
+ line-height: 25px;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ word-break: break-all;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .user-text {
|
|
|
+ color: #999;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
}
|
|
|
- .icon-checked {
|
|
|
- display: none;
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- border: 20px solid #1890ff;
|
|
|
- border-left: 20px solid transparent;
|
|
|
- border-top: 20px solid transparent;
|
|
|
- border-bottom-right-radius: 2px;
|
|
|
- position: absolute;
|
|
|
- transform: scale(0.9);
|
|
|
- right: -2px;
|
|
|
- bottom: -2px;
|
|
|
- i {
|
|
|
- position: absolute;
|
|
|
- top: -2px;
|
|
|
- left: -3px;
|
|
|
- font-size: 20px;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
+ }
|
|
|
+ #pane-subordinate {
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .subordinate-list {
|
|
|
+ flex: 1;
|
|
|
+ overflow: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .organize-list {
|
|
|
+ width: 100%;
|
|
|
+ padding: 50px;
|
|
|
+ .organize-item {
|
|
|
+ margin-bottom: 30px;
|
|
|
+ .organize-item-main {
|
|
|
+ height: 70px;
|
|
|
+ position: relative;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
|
|
|
+ color: #606266;
|
|
|
+ &.active {
|
|
|
+ border: 1px solid #1890ff;
|
|
|
+ box-shadow: 0 0 6px rgba(6, 58, 108, 0.26);
|
|
|
+ color: #1890ff;
|
|
|
+ .btn,
|
|
|
+ .icon-checked {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .icon-ym {
|
|
|
+ font-size: 24px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .organize-name {
|
|
|
+ line-height: 24px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ display: none;
|
|
|
+ position: absolute;
|
|
|
+ right: 45px;
|
|
|
+ bottom: 7px;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ .icon-checked {
|
|
|
+ display: none;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ border: 20px solid #1890ff;
|
|
|
+ border-left: 20px solid transparent;
|
|
|
+ border-top: 20px solid transparent;
|
|
|
+ border-bottom-right-radius: 2px;
|
|
|
+ position: absolute;
|
|
|
+ transform: scale(0.9);
|
|
|
+ right: -2px;
|
|
|
+ bottom: -2px;
|
|
|
+ i {
|
|
|
+ position: absolute;
|
|
|
+ top: -2px;
|
|
|
+ left: -3px;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
</style>
|