<template>
|
<div class='container'>
|
<div style='width: 256px;'>
|
<!-- <a-button type="primary" style="margin-bottom: 16px" @click="toggleCollapsed">
|
<a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'" />
|
</a-button>-->
|
<div style='display: flex;align-items: center'>
|
<a-week-picker v-model='plcaehold' @change='changeWeek' @ok='selectWeek' style='width: 120px'></a-week-picker>
|
<a-button style='margin-left: 8px' type='primary' icon='reload' @click='handleRefresh'>刷新</a-button>
|
</div>
|
<a-menu
|
v-model='selectKey'
|
:inlineIndent='18'
|
:default-selected-keys='[]'
|
:open-keys='openKeys'
|
mode='inline'
|
:inline-collapsed='collapsed'
|
@openChange='onOpenChange'
|
@select='selectMenu'
|
@click='handleClick'
|
>
|
<template v-for='item in departTreeList'>
|
<a-menu-item v-if='!item.children' :key='item.key'>
|
<a-icon type='cluster'/>
|
<span>{{ subTitle(item.title) }}</span>
|
</a-menu-item>
|
<sub-menu @titleClick='titleClick' v-else :key='item.key' :menuInfo='item'/>
|
</template>
|
</a-menu>
|
</div>
|
<div class='content'>
|
<div>
|
<a-alert :message="selectResult.title" type="info" show-icon/>
|
</div>
|
|
<div style='width: 100%;display: flex;flex-wrap: wrap;justify-content:start'>
|
<!-- <a-tag style='width: 10%' v-for='item in userList' :key='item.id' :color="item.wsubmit ? 'green' : 'orange'">
|
{{item.realname}}
|
</a-tag>-->
|
<template v-for='item in userList'>
|
<a @click="showWeeklyDetail(item)" v-if='item.wsubmit' style='margin-top: 6px;margin-right: 10px;'
|
:key='item.id' :type="item.wsubmit ? 'primary' : ''">
|
{{ item.realname }}
|
</a>
|
<a v-else style='margin-top: 6px;margin-right: 10px;color: #727272' :key='item.id'
|
:type="item.wsubmit ? 'primary' : ''">
|
{{ item.realname }}
|
</a>
|
|
</template>
|
|
|
</div>
|
|
|
</div>
|
|
<weekly-detail-modal ref="detailModal"></weekly-detail-modal>
|
</div>
|
</template>
|
|
<script>
|
import {queryDepartTreeList, queryDepUserList} from '@api/api'
|
import moment from 'moment'
|
import {Menu} from 'ant-design-vue'
|
import {getAction} from '@api/manage'
|
import {getWeek} from '@/utils/util'
|
import get from 'lodash.get'
|
import WeeklyDetailModal from "@views/week/modules/WeeklyDetailModal";
|
|
const SubMenu = {
|
template: `
|
<a-sub-menu :key='menuInfo.key' v-bind='$props' v-on='$listeners'>
|
<span slot='title'>
|
<a-icon type='apartment'/><span>{{ subTitle(menuInfo.title) }}</span>
|
</span>
|
<template v-for='item in menuInfo.children'>
|
<a-menu-item v-if='!item.children' :key='item.key'>
|
<a-icon type='apartment'/>
|
<span>{{ subTitle(item.title) }}</span>
|
</a-menu-item>
|
<sub-menu @titleClick='titleClick' v-else :key='item.key' :menu-info='item'/>
|
</template>
|
</a-sub-menu>
|
`,
|
name: 'SubMenu',
|
// must add isSubMenu: true
|
isSubMenu: true,
|
props: {
|
...Menu.SubMenu.props,
|
// Cannot overlap with properties within Menu.SubMenu.props
|
menuInfo: {
|
type: Object,
|
default: () => ({})
|
}
|
},
|
methods: {
|
subTitle(title) {
|
if (title && title.length > 6) {
|
return title.substring(0, 4)
|
}
|
return title
|
},
|
titleClick(sub) {
|
this.$emit('titleClick', sub)
|
}
|
}
|
}
|
|
export default {
|
name: 'WeeklySubmitView',
|
components: {
|
WeeklyDetailModal,
|
'sub-menu': SubMenu
|
},
|
data() {
|
return {
|
moment,
|
plcaehold: null,
|
model: {},
|
openKeys: [],
|
selectKey: [],
|
userList: [],
|
result: [],
|
selectResult: {},
|
resultMap: {},
|
collapsed: false,
|
departTreeList: [],
|
url: {
|
submitList: '/wek/record/submitReview'
|
}
|
}
|
},
|
watch: {
|
selectKey(val) {
|
if (val) {
|
this.selectResult = this.resultMap[val[0]]
|
this.userList = this.selectResult.userList || []
|
}
|
}
|
},
|
created() {
|
this.loadData()
|
},
|
methods: {
|
showWeeklyDetail(user) {
|
if (!this.model.week) {
|
this.model.week = this.week.weekNo
|
this.model.year = this.week.yearNo
|
}
|
let params = {}
|
params.username = user.username
|
params.year = this.model.year
|
params.week = this.model.week
|
this.$refs.detailModal.showModal(params)
|
},
|
|
handleRefresh() {
|
this.model = {}
|
this.plcaehold = null
|
this.querySubmitList()
|
},
|
handleClick({item, key, keyPath}) {
|
//console.info('点击item', item)
|
|
},
|
titleClick(sub) {
|
//console.info('点击submenu', sub)
|
this.selectKey = []
|
this.selectKey.push(sub.key)
|
|
},
|
selectMenu(menu) {
|
|
},
|
onOpenChange(openKeys) { // 当菜单被展开时触发此处
|
this.openKeys = openKeys
|
},
|
selectWeek() {
|
},
|
changeWeek(date, str) {
|
this.model.week = moment(date).week()
|
this.model.year = moment(date).year()
|
this.querySubmitList()
|
},
|
loadData() {
|
this.queryDepartList()
|
this.querySubmitList()
|
|
},
|
listToMap(list, map) {
|
list.forEach(item => {
|
map[item.id] = item;
|
if (item.children) {
|
this.listToMap(item.children, map)
|
}
|
})
|
},
|
|
queryDepartList() {
|
queryDepartTreeList().then(res => {
|
if (res.success) {
|
let result = get(res, 'result[0].children')
|
//置空openkeys
|
this.openKeys = []
|
this.getOpenKeys(result)
|
this.departTreeList = result
|
}
|
|
|
})
|
},
|
getOpenKeys(list) {
|
list.forEach(item => {
|
this.openKeys.push(item.key)
|
if (item.children) {
|
this.getOpenKeys(item.children)
|
}
|
})
|
|
},
|
querySubmitList() {
|
if (!this.model.week) {
|
this.model.week = this.week.weekNo
|
this.model.year = this.week.yearNo
|
}
|
|
getAction(this.url.submitList, this.model).then(res => {
|
if (res.success) {
|
this.result = get(res, 'result[0].children')
|
this.resultMap = {}
|
//默认选择第一个部门
|
if (this.result.length > 0) {
|
this.selectKey.push(this.result[0].key)
|
}
|
|
this.listToMap(this.result, this.resultMap)
|
}
|
})
|
},
|
subTitle(title) {
|
if (title && title.length > 6) {
|
return title.substring(0, 4)
|
}
|
return title
|
},
|
toggleCollapsed() {
|
this.collapsed = !this.collapsed
|
}
|
|
|
},
|
computed: {
|
week() {
|
return getWeek()
|
}
|
}
|
}
|
</script>
|
|
<style lang='less' scoped>
|
.container {
|
display: flex;
|
}
|
|
.content {
|
width: 100%;
|
height: 100%;
|
padding-left: 10px;
|
}
|
|
|
</style>
|
