<template>
|
<a-card class='app' :loading='cardLoading' :bordered='false' style='height: 100%;overflow: hidden'>
|
|
<div style='overflow: hidden'>
|
<!-- <div class='ant-alert ant-alert-info' style='margin-bottom: 16px;'>
|
{{ week.today }} 第<a style='font-weight: 600'>{{ week.weekNo }}</a>周 星期<a
|
style='font-weight: 600'>{{ week.week }}</a>
|
</div>-->
|
|
<div class='account-header-box'>
|
<!-- <div class="avatar">
|
<img />
|
</div>-->
|
<div class='username'>{{ nickname() }}</div>
|
<div class='bio'>海纳百川，有容乃大</div>
|
</div>
|
<div class='week-info-box'>
|
<p>
|
<a-icon type='clock-circle'/>
|
第{{ week.weekNo }}周 （{{ getWeekNumberInMonth() }})
|
</p>
|
<p>
|
<a-icon type='info-circle'/>
|
{{ week.start }} ~ {{ week.end }}
|
</p>
|
<p>
|
<a-icon type='check-circle'/>
|
{{ week.today }} 星期{{ week.week }}
|
</p>
|
</div>
|
<a-divider :dashed='true'/>
|
|
|
<div class='section-title'>我的上级</div>
|
<div>
|
<template v-for='(tag, index) in userRelationList'>
|
<a-tooltip :key='tag.id' :title='tag.superiorsName'>
|
<a-tag :key='tag.id' :closable='true' @close='handleTagClose(tag)'>
|
{{ tag.superiorsName }}
|
</a-tag>
|
</a-tooltip>
|
</template>
|
<a-tag @click='showUserRelation' style='background: #fff; borderStyle: dashed;'>
|
<a-icon type='plus'/>
|
新增
|
</a-tag>
|
</div>
|
<a-divider :dashed='true'/>
|
|
|
<a-spin :spinning='loading'>
|
<!-- <a-input-search @search='handleSearch' style='width:100%;margin-top: 10px' placeholder='输入姓名查询...'
|
enterButton />
|
<p></p>-->
|
<div class='section-title'>我的</div>
|
<p @click='showModel(1)'>
|
<a-icon type='tag' style='margin-right: 10px'/>
|
<span :class="{'active':type === 1}">写周报</span></p>
|
<p @click='showModel(2)'>
|
<a-icon type='user' style='margin-right: 10px'/>
|
<span :class="{'active':type === 2}">我的周报</span></p>
|
<div v-has="'weekly:export'">
|
<p @click='showModel(5)'>
|
<a-icon type='pushpin' style='margin-right: 10px'/>
|
<span :class="{'active':type === 5}">周报统计</span></p>
|
|
<p @click='showModel(6)'>
|
<a-icon type='export' style='margin-right: 10px'/>
|
<span :class="{'active':type === 6}">批量导出</span></p>
|
</div>
|
|
<a-divider :dashed='true'/>
|
<template v-if='showJunior'>
|
<div class='section-title' style='margin-top: 15px'>下级</div>
|
|
<div>
|
<a-menu
|
:default-selected-keys="['1']"
|
:open-keys.sync='openKeys'
|
mode='inline'
|
>
|
|
<a-sub-menu v-for="(item,index) in juniorList" :key='item.title'>
|
<span slot='title'><a-icon type='appstore'/><span>{{ item.title }}</span></span>
|
<template v-if='item.children.length > 1'>
|
<a-menu-item v-for="(sub,i) in item.children" :key='sub.username' @click='subClick(sub,2)'>
|
{{ sub.realname }}
|
</a-menu-item>
|
</template>
|
|
|
</a-sub-menu>
|
|
</a-menu>
|
</div>
|
</template>
|
|
|
<div>
|
<div v-has="'weekly:project'">
|
<div class="section-title" style='margin-top: 15px'>项目</div>
|
<a-tree
|
showLine
|
checkStrictly
|
:expandedKeys.sync='expandedKeys2'
|
:selectedKeys='selectedKeys2'
|
:dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
|
:treeData='treeDataSource2'
|
@select='handleTreeSelect2'>
|
|
</a-tree>
|
</div>
|
</div>
|
<div>
|
<div v-has="'weekly:depart'">
|
<div class="section-title" style='margin-top: 15px'>团队</div>
|
<a-tree
|
showLine
|
checkStrictly
|
:expandedKeys.sync='expandedKeys'
|
:selectedKeys='selectedKeys'
|
:dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
|
:treeData='treeDataSource'
|
@select='handleTreeSelect'>
|
|
<template slot='depart' slot-scope='{ selected }'>
|
<a-icon :type="selected ? 'usergroup-add' : 'usergroup-delete'"/>
|
</template>
|
<template slot='user'>
|
<a-icon type='user'/>
|
</template>
|
</a-tree>
|
</div>
|
</div>
|
</a-spin>
|
|
|
<select-user-modal ref='selectUserModal' @selectOk='selectUserOK'></select-user-modal>
|
</div>
|
|
</a-card>
|
</template>
|
|
<script>
|
import {queryDepUserList, searchByKeywords} from '@/api/api'
|
import {getWeek} from '@/utils/util'
|
import {deleteAction, getAction, postAction} from '@api/manage'
|
import {mapGetters} from 'vuex'
|
import SelectUserModal from '@views/system/modules/SelectUserModal'
|
|
export default {
|
name: 'WeeklyLeft',
|
components: {SelectUserModal},
|
props: ['value'],
|
watch: {
|
openKeys(val) {
|
console.log('openKeys', val)
|
}
|
},
|
data() {
|
return {
|
openKeys: ['直属下级'],
|
type: 1,
|
cardLoading: true,
|
loading: false,
|
treeDataSource: [],
|
treeDataSource2: [],
|
selectedKeys: [],
|
selectedKeys2: [],
|
expandedKeys: [],
|
expandedKeys2: [],
|
userRelationList: [],
|
juniorList: [],
|
url: {
|
projectTreeList: '/pro/project/listTree',
|
userRelationList: '/wek/relation/list',
|
addUserRelation: '/wek/relation/add',
|
delUserRelation: '/wek/relation/delete',
|
juniorList: '/wek/relation/queryJunior'
|
}
|
|
}
|
},
|
mounted() {
|
this.queryTreeData()
|
this.queryTreeData2()
|
this.queryUserRelationList()
|
this.queryJuniorList()
|
|
|
},
|
methods: {
|
...mapGetters(['nickname', 'username', 'avatar']),
|
showModel(type) {
|
this.selectedKeys = []
|
this.selectedKeys2 = []
|
this.type = type
|
this.$emit('ok', type, {})
|
},
|
getWeekNumberInMonth() {
|
var now = new Date();
|
var start = new Date(now.getFullYear(), now.getMonth(), 1);
|
var dayOfWeekStart = start.getDay();
|
var today = now.getDate();
|
|
var offset = (dayOfWeekStart > 0 ? dayOfWeekStart - 1 : 6); // 计算本月第一天是星期几，0代表星期日，1代表星期一。。。
|
var daysSinceStart = today + offset;
|
|
return now.getMonth()+1 +"月第" +Math.ceil(daysSinceStart / 7) +"周";
|
},
|
|
queryTreeData(keyword) {
|
this.commonRequestThen(queryDepUserList({
|
realname: keyword ? keyword : undefined
|
}))
|
}
|
,
|
queryTreeData2(keyword) {
|
this.commonRequestThen2(getAction(this.url.projectTreeList, {
|
xmmc: keyword ? keyword : undefined
|
}))
|
}
|
,
|
|
handleSearch(value) {
|
if (value) {
|
this.commonRequestThen(queryDepUserList({username: value}))
|
} else {
|
this.queryTreeData()
|
}
|
}
|
,
|
|
handleTreeSelect(selectedKeys, event) {
|
this.type = 3
|
this.selectedKeys2 = []
|
if (selectedKeys.length > 0 && this.selectedKeys[0] !== selectedKeys[0]) {
|
this.selectedKeys = [selectedKeys[0]]
|
let record = event.node.dataRef
|
let orgCode = event.node.dataRef.orgCode
|
console.info(record)
|
this.$emit('ok', 3, record)
|
//this.emitInput(orgCode)
|
}
|
|
|
}
|
,
|
handleTreeSelect2(selectedKeys, event) {
|
this.type = 4
|
this.selectedKeys = []
|
if (selectedKeys.length > 0 && this.selectedKeys2[0] !== selectedKeys[0]) {
|
this.selectedKeys2 = [selectedKeys[0]]
|
let record = event.node.dataRef
|
let orgCode = event.node.dataRef.orgCode
|
this.$emit('ok', 4, record)
|
//this.emitInput(orgCode)
|
}
|
|
|
}
|
,
|
|
emitInput(orgCode) {
|
this.$emit('input', orgCode)
|
}
|
,
|
|
commonRequestThen(promise) {
|
this.loading = true
|
promise.then(res => {
|
if (res.success) {
|
this.treeDataSource = res.result
|
console.info('部门人员树:')
|
console.info(res.result)
|
// update-begin- --- author:wangshuai ------ date:20200102 ---- for:去除默认选中第一条数据、默认展开所有第一级
|
// 默认选中第一条数据、默认展开所有第一级
|
// if (res.result.length > 0) {
|
// this.expandedKeys = []
|
// res.result.forEach((item, index) => {
|
// if (index === 0) {
|
// this.selectedKeys = [item.id]
|
// this.emitInput(item.orgCode)
|
// }
|
// this.expandedKeys.push(item.id)
|
// })
|
// }
|
// update-end- --- author:wangshuai ------ date:20200102 ---- for:去除默认选中第一条数据、默认展开所有第一级
|
} else {
|
this.$message.warn(res.message)
|
console.error('组织机构查询失败:', res)
|
}
|
}).finally(() => {
|
this.loading = false
|
this.cardLoading = false
|
})
|
}
|
,
|
commonRequestThen2(promise) {
|
this.loading = true
|
promise.then(res => {
|
if (res.success) {
|
this.treeDataSource2 = res.result
|
console.info('项目列表树:')
|
console.info(res.result)
|
// update-begin- --- author:wangshuai ------ date:20200102 ---- for:去除默认选中第一条数据、默认展开所有第一级
|
// 默认选中第一条数据、默认展开所有第一级
|
// if (res.result.length > 0) {
|
// this.expandedKeys = []
|
// res.result.forEach((item, index) => {
|
// if (index === 0) {
|
// this.selectedKeys = [item.id]
|
// this.emitInput(item.orgCode)
|
// }
|
// this.expandedKeys.push(item.id)
|
// })
|
// }
|
// update-end- --- author:wangshuai ------ date:20200102 ---- for:去除默认选中第一条数据、默认展开所有第一级
|
} else {
|
this.$message.warn('项目列表查询失败，请重试')
|
console.error('项目列表查询失败:', res)
|
}
|
}).finally(() => {
|
this.loading = false
|
this.cardLoading = false
|
})
|
}
|
,
|
handleTagClose(tag) {
|
console.info(tag)
|
this.delUserRelation(tag.id)
|
|
}
|
,
|
showUserRelation() {
|
this.$refs.selectUserModal.add()
|
}
|
,
|
selectUserOK(data) {
|
console.info(data)
|
if (data && data.length > 0) {
|
data.forEach(i => {
|
let item = {
|
user: this.username(),
|
userName: this.nickname(),
|
superiors: i.username,
|
superiorsName: i.realname
|
}
|
this.addUserRelation(item)
|
})
|
}
|
|
}
|
,
|
addUserRelation(item) {
|
postAction(this.url.addUserRelation, item).then(res => {
|
if (res.success) {
|
this.$message.success('操作成功!')
|
this.queryUserRelationList()
|
|
}
|
|
})
|
}
|
,
|
delUserRelation(id) {
|
deleteAction(this.url.delUserRelation, {id: id}).then(res => {
|
if (res.success) {
|
this.$message.success('操作成功!')
|
this.queryUserRelationList()
|
}
|
|
})
|
}
|
,
|
queryUserRelationList() {
|
getAction(this.url.userRelationList, {pageNo: 1, pageSize: 1000, user: this.username()}).then(res => {
|
if (res.success) {
|
this.userRelationList = res.result.records
|
console.info(res)
|
|
}
|
})
|
}
|
,
|
//查询下级
|
queryJuniorList() {
|
getAction(this.url.juniorList).then(res => {
|
if (res.success) {
|
this.juniorList = res.result
|
console.info(res)
|
console.info(this.juniorList)
|
|
}
|
})
|
}
|
,
|
|
subClick(record, type) {
|
const t = record.type
|
if (t == 2) {
|
this.type = 10
|
console.info(record)
|
this.$emit('ok', 10, record)
|
|
} else if (t == 1) {
|
this.type = 11
|
if (record.username == 'gl1') {
|
const userList = this.juniorList[0].children
|
const names = userList.filter(user => user.username != 'gl1').map(user => user.username);
|
// 将拼接后的名字数组转换为字符串
|
const usernames = names.join(',');
|
record.usernames = usernames
|
console.info(usernames)
|
} else if (record.username == 'gl2') {
|
const userList = this.juniorList[1].children
|
const names = userList.filter(user => user.username != 'gl2').map(user => user.username);
|
// 将拼接后的名字数组转换为字符串
|
const usernames = names.join(',');
|
console.info(usernames)
|
record.usernames = usernames
|
}
|
|
if (record.usernames.length < 2) {
|
|
return false
|
}
|
|
console.info(record)
|
this.$emit('ok', 11, record)
|
}
|
}
|
|
},
|
computed: {
|
week() {
|
return getWeek()
|
}
|
,
|
showJunior() {
|
var show = false;
|
this.juniorList.forEach(item => {
|
if (item.children && item.children.length > 1) {
|
show = true
|
}
|
})
|
return show
|
}
|
,
|
showJunior1() {
|
var show = false;
|
this.juniorList[0].forEach(item => {
|
if (item.children && item.children.length > 1) {
|
show = true
|
}
|
})
|
return show
|
}
|
,
|
showJunior2() {
|
var show = false;
|
this.juniorList[1].forEach(item => {
|
if (item.children && item.children.length > 1) {
|
show = true
|
}
|
})
|
return show
|
}
|
,
|
}
|
}
|
</script>
|
|
<style lang='less' scoped>
|
|
.app {
|
p {
|
cursor: pointer;
|
}
|
|
.account-header-box {
|
text-align: center;
|
margin-bottom: 24px;
|
|
& > .avatar {
|
margin: 0 auto;
|
width: 104px;
|
height: 104px;
|
margin-bottom: 20px;
|
border-radius: 50%;
|
overflow: hidden;
|
|
img {
|
height: 100%;
|
width: 100%;
|
}
|
}
|
|
.username {
|
color: rgba(0, 0, 0, 0.85);
|
font-size: 20px;
|
line-height: 28px;
|
font-weight: 500;
|
margin-bottom: 4px;
|
}
|
}
|
|
.week-info-box {
|
|
p {
|
margin-bottom: 8px;
|
position: relative;
|
}
|
|
}
|
|
.section-title {
|
font-weight: 500;
|
color: rgba(0, 0, 0, .85);
|
margin-bottom: 12px;
|
}
|
|
}
|
|
.active {
|
display: inline-block;
|
background-color: #bae7ff
|
}
|
|
|
/deep/ .ant-alert {
|
padding: 10px 5px;
|
}
|
|
/deep/ .ant-tree {
|
margin-left: -4px;
|
}
|
|
/deep/ .ant-tree-title {
|
|
}
|
|
/deep/ .ant-tree > li:first-child {
|
padding-top: 0px;
|
}
|
|
/deep/ .ant-menu-inline {
|
border-right: none;
|
}
|
|
|
</style>
|
