<template>
|
<a-form-model ref='form' :label-col='labelCol' :wrapper-col='wrapperCol' :model='model'
|
:rules='validatorRules'>
|
|
<a-list
|
class='demo-loadmore-list'
|
item-layout='horizontal'
|
:data-source='model.result'
|
style='padding-bottom: 20px'>
|
|
<div v-if='showLoadingMore'
|
slot='loadMore'
|
:style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }">
|
<a-spin v-if='loadingMore' />
|
<a-button v-else-if='!loadingMore & showLoadModel' @click='onLoadMore'>
|
前一周周报
|
</a-button>
|
|
</div>
|
<a-list-item slot='renderItem' slot-scope='week, weekIndex'>
|
|
<div style='width: 100%;'>
|
<div class='head-week'>
|
<span class='head-week-title'>{{ week.year }}年 第{{ week.week }}周 {{ getThisWeek( week.week)}} {{week.xmName}} </span>
|
<span :class="{ 'head-week-icon-up': week.show, 'head-week-icon-down': !week.show }"
|
@click='showWeekItem(week)'></span>
|
</div>
|
<!--一周周报内容start-->
|
<div v-show='week.show'>
|
<!--本周完成内容start-->
|
<div class='this-week-box'>
|
<span class='this-week-text'>本周总结 </span>
|
<span class='this-week-date'> {{ week.startDateStr1 }}- {{ week.endDateStr1 }} </span>
|
</div>
|
<div class='week-form-box'>
|
<!-- 主表单区域 -->
|
<a-row class='row-title' type='flex' :gutter='16'>
|
<a-col class='col-title' :span='2'></a-col>
|
<a-col class='col-title' :span='2'>姓名</a-col>
|
<a-col class='col-title' :span='4'>项目</a-col>
|
<a-col class='col-title' :span='4'>wbs</a-col>
|
<a-col class='col-title' :span='8'>工作描述</a-col>
|
<a-col class='col-title' :span='2'>进度</a-col>
|
<a-col class='col-title' :span='2'>工时(h)</a-col>
|
|
</a-row>
|
<a-row class='row-text' type='flex' :gutter='16'
|
v-for='(rootItem, rootIndex) in week.wekRecordList' :key="rootIndex + 'wekRecordList' ">
|
<a-col class='col-text' :span='2'>
|
|
<!-- <div style='text-align: center'>
|
<span :style='{ borderColor: week.colorMap[rootItem.user] }' class='col-no'> {{ rootIndex + 1
|
}}</span>
|
</div>-->
|
<div>
|
<a-popover v-model='rootItem.attach' placement='rightTop' trigger="click">
|
<div slot="title"><span>附件</span> <a style='float: right;font-size: 12px' @click="rootItem.attach=false">关闭</a></div>
|
<div slot="content">
|
<j-upload :id="'upload'+rootIndex" ref='upload' v-model="rootItem.attachFiles"></j-upload>
|
</div>
|
<span :style='{ borderColor: week.colorMap[rootItem.user] }'>
|
<a-icon v-if='rootItem.attachFiles' style='color: #1890FF;cursor: pointer' type="link" />
|
<a-icon v-else style='cursor: pointer' type="link" />
|
{{ rootIndex + 1 }}
|
</span>
|
</a-popover>
|
|
</div>
|
<a-input v-model='rootItem.id' class='hide-input-caret' v-show='false' readOnly />
|
<a-input v-model='rootItem.week' class='hide-input-caret' v-show='false' readOnly />
|
<a-input v-model='rootItem.year' class='hide-input-caret' v-show='false' readOnly />
|
<a-input v-model='rootItem.type' class='hide-input-caret' v-show='false' readOnly />
|
</a-col>
|
|
<a-col class='col-text' :span='2'>
|
<a-form-model-item :labelCol='labelCol' :wrapperCol='wrapperCol'>
|
|
<a-tooltip placement='topLeft'>
|
<template slot='title'>
|
<span v-if='rootItem.user'>{{ rootItem.user }}</span>
|
</template>
|
<a-input :value='getDictText(rootItem.user)' class='text-ellipsis' readOnly />
|
</a-tooltip>
|
</a-form-model-item>
|
</a-col>
|
|
<a-col class='col-text' :span='4'>
|
<a-form-model-item :labelCol='labelCol' :wrapperCol='wrapperCol'>
|
<a-tooltip placement='topLeft'>
|
<template slot='title'>
|
<span v-if='rootItem.xmName'>{{ rootItem.xmName }}</span>
|
</template>
|
<a-input v-model='rootItem.xmName' class='hide-input-caret text-ellipsis' readOnly />
|
</a-tooltip>
|
</a-form-model-item>
|
</a-col>
|
<a-col class='col-text' :span='4'>
|
<a-form-model-item :labelCol='labelCol' :wrapperCol='wrapperCol'>
|
<a-tooltip placement='topLeft'>
|
<template slot='title'>
|
<span v-if='rootItem.wbsName'>{{ rootItem.wbsName }}</span>
|
</template>
|
<a-input v-model='rootItem.wbsName'
|
class='hide-input-caret text-ellipsis' readOnly />
|
</a-tooltip>
|
</a-form-model-item>
|
</a-col>
|
<a-col class='col-text' :span='8'>
|
<a-form-model-item :labelCol='labelCol' :wrapperCol='wrapperCol'>
|
|
<a-tooltip placement='topLeft'>
|
<template slot='title'>
|
<span v-if='rootItem.gzms'>{{ rootItem.gzms }}</span>
|
</template>
|
<a-input v-model='rootItem.gzms' class='hide-input-caret text-ellipsis' readOnly />
|
</a-tooltip>
|
</a-form-model-item>
|
</a-col>
|
<a-col class='col-text' :span='2'>
|
<a-form-model-item :labelCol='labelCol' :wrapperCol='wrapperCol'>
|
<a-input v-model='rootItem.jdName' class='hide-input-caret' readOnly />
|
</a-form-model-item>
|
</a-col>
|
<a-col class='col-text' :span='2'>
|
<a-form-model-item :labelCol='labelCol' :wrapperCol='wrapperCol'>
|
<a-input v-model='rootItem.gsName' class='hide-input-caret' readOnly />
|
</a-form-model-item>
|
</a-col>
|
|
|
</a-row>
|
|
</div>
|
<!--本周完成内容end-->
|
|
|
</div>
|
<!--一周周报内容end-->
|
</div>
|
</a-list-item>
|
</a-list>
|
|
</a-form-model>
|
</template>
|
|
<script>
|
import { filterMultiDictText, initDictOptions } from '@comp/dict/JDictSelectUtil'
|
import { getWeek } from '@/utils/util'
|
|
export default {
|
name: 'WeeklyListProjectCompent',
|
props: {
|
//数据
|
model: {
|
type: Object,
|
default: {},
|
required: true
|
},
|
//是否显示加载下周按钮
|
showLoadModel: {
|
type: Boolean,
|
default: false,
|
required: true
|
},
|
//数据加载状态
|
loadingMore: {
|
type: Boolean,
|
default: false,
|
required: true
|
}
|
},
|
data() {
|
return {
|
//是否显示加载更多模块
|
showLoadingMore: true,
|
labelCol: {
|
xs: { span: 0 },
|
sm: { span: 0 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 24 }
|
},
|
validatorRules: {},
|
//项目列表
|
proList: [],
|
//本周其他工作
|
extWorkList: [],
|
//项目缓存所有的wbs （缓存为map形式，键为项目id，值为项目的子任务列表）
|
proLinkWbs: {},
|
//当前项目的子任务列表wbs
|
proLinklist: [],
|
//用户字典信息
|
userDictOptions: []
|
}
|
},
|
created() {
|
this.initDictConfig()
|
},
|
methods: {
|
onLoadMore() {
|
this.$emit('onLoadMore')
|
},
|
reload() {
|
this.$emit('reload')
|
},
|
|
getThisWeek(week){
|
const thisweek = getWeek().weekNo;
|
if(week == thisweek){
|
return "（本周）"
|
}
|
return ""
|
|
},
|
|
|
/**
|
* 本周视图是否展开
|
* @param weekItem
|
*/
|
showWeekItem(weekItem) {
|
weekItem.show = !weekItem.show
|
},
|
initDictConfig() {
|
//初始化字典 - 性别
|
initDictOptions('sys_user,realname,username').then((res) => {
|
if (res.success) {
|
this.$set(this.userDictOptions, 'username', res.result)
|
console.info('字典')
|
console.info(this.userDictOptions)
|
}
|
})
|
|
},
|
getDictText(text) {
|
return filterMultiDictText(this.userDictOptions['username'], text)
|
}
|
},
|
|
}
|
</script>
|
|
<style lang='less' scoped>
|
.head-week {
|
padding-left: 10px;
|
position: relative;
|
overflow: hidden;
|
|
.head-week-title {
|
display: inline-block;
|
color: #fe7300;
|
font-size: 26px;
|
font-weight: bold;
|
padding-top: 30px;
|
}
|
|
.head-week-icon-up {
|
height: 15px;
|
line-height: 15px;
|
background: url(~@assets/weekly/icon_top.png) no-repeat;
|
cursor: pointer;
|
width: 15px;
|
margin-left: 10px;
|
display: inline;
|
padding: 0px 10px;
|
}
|
|
.head-week-icon-down {
|
height: 15px;
|
line-height: 15px;
|
background: url(~@assets/weekly/icon_down.png) no-repeat;
|
cursor: pointer;
|
width: 15px;
|
margin-left: 10px;
|
display: inline;
|
padding: 0px 10px;
|
}
|
}
|
|
.this-week-box {
|
padding-top: 5px;
|
padding-bottom: 5px;
|
padding-left: 10px;
|
|
.this-week-text {
|
color: #fe7300;
|
font-weight: bold;
|
}
|
|
.this-week-date {
|
margin-left: 10px;
|
}
|
}
|
|
.week-form-box {
|
border: 2px solid #cdcdcd;
|
border-left: 3px solid #cdcdcd;
|
box-shadow: 4px 4px 4px #dad8d8;
|
overflow: hidden;
|
|
.row-title {
|
margin: 0;
|
padding: 0;
|
background: #F5F5F5;
|
height: 40px;
|
|
.col-title {
|
padding: 0 !important;
|
text-align: center;
|
line-height: 40px;
|
color: #7e7e7e;
|
border-right: 1px solid #e9e9e9;
|
}
|
|
}
|
|
.row-text {
|
margin: 0;
|
padding: 0;
|
height: 40px;
|
|
.col-text {
|
padding: 0 !important;
|
text-align: center;
|
line-height: 40px;
|
color: #7e7e7e;
|
|
.col-no {
|
display: block;
|
margin: 5px 5px 5px 10px;
|
height: 30px;
|
line-height: 30px;
|
border-left-width: 3px;
|
border-left-style: solid;
|
}
|
|
.col-no-red {
|
display: block;
|
margin: 5px 5px 5px 10px;
|
height: 30px;
|
line-height: 30px;
|
border-left: 3px solid red;
|
}
|
|
.col-no-green {
|
display: block;
|
margin: 5px 5px 5px 10px;
|
height: 30px;
|
line-height: 30px;
|
border-left: 3px solid green;
|
}
|
}
|
|
}
|
|
.row-text:nth-child(odd) {
|
background: #FFFFFF;
|
}
|
|
.row-text:nth-child(odd) {
|
background: #F5F5F5;
|
}
|
|
.row-text:hover {
|
background: #FCEEE5;
|
}
|
}
|
|
//custom
|
.borderLeft3 {
|
border-left: 3px solid #cdcdcd;
|
}
|
|
.marginTop5 {
|
margin-top: 5px;
|
}
|
|
.paddingTop10 {
|
padding: 10px 10px !important;
|
}
|
|
.fontsize12 {
|
font-size: 12px;
|
}
|
|
.hide-input-caret {
|
caret-color: transparent;
|
|
}
|
|
.text-ellipsis {
|
display: inline-block; //这个看情况加
|
overflow: hidden; //必须
|
white-space: nowrap; //必须
|
text-overflow: ellipsis; //必须
|
}
|
|
|
/**input start**/
|
/deep/ .ant-input {
|
width: 100%;
|
padding: 0px 5px;
|
border: 1px solid transparent;
|
background: transparent;
|
outline: none;
|
margin: 0;
|
border-radius: 0;
|
height: 40px;
|
line-height: 40px;
|
|
}
|
|
/deep/ .ant-form-item-children {
|
display: inline-block;
|
width: 100%;
|
}
|
|
/deep/ .ant-form-item-children input {
|
border: none;
|
background: transparent;
|
outline: none;
|
-webkit-box-shadow: none;
|
}
|
|
/deep/ .ant-form-item-children input:focus {
|
border: 1px solid #7eadd9;
|
background: transparent;
|
outline: none;
|
-webkit-box-shadow: none;
|
|
}
|
|
/**input end**/
|
|
/**select start**/
|
/deep/ .ant-select-selection {
|
border: none;
|
background-color: transparent;
|
|
}
|
|
/deep/ .ant-select-arrow .ant-select-arrow-icon {
|
display: none;
|
}
|
|
/**select end**/
|
|
/*清除list分割线 start*/
|
/deep/ .ant-list-split .ant-list-item {
|
border: none;
|
}
|
|
/deep/ .ant-list-something-after-last-item .ant-spin-container > .ant-list-items > .ant-list-item:last-child {
|
border: none;
|
}
|
|
/*清除list分割线 end*/
|
|
/*调整empty view 位置 start*/
|
/deep/ .ant-empty-normal .ant-empty-image {
|
margin-top: 150px;
|
}
|
/****上传按钮**/
|
/deep/ .ant-upload.ant-upload-select{
|
display: none;
|
}
|
</style>
|
