|
|
@@ -49,7 +49,12 @@
|
|
|
<div v-show="activeSchedule === '1'" class="member-list">
|
|
|
<el-checkbox v-model="checkAllMember" :indeterminate="isIndeterminate" style="margin: 0 20px 0 5px" @change="checkAllChange">全选</el-checkbox>
|
|
|
<el-checkbox-group v-model="checkedMembers" @change="membersChange">
|
|
|
- <el-checkbox v-for="item in memberList" :key="item.idap" :label="item.idap">{{ item.name }}</el-checkbox>
|
|
|
+ <el-checkbox v-for="item in memberList" :key="item.idap" :label="item.idap">
|
|
|
+ <div class="check-point">
|
|
|
+ {{ item.name }}
|
|
|
+ <div class="point" :style="{'background-color': mapMemberColor.get(item.idap).bgColor}" />
|
|
|
+ </div>
|
|
|
+ </el-checkbox>
|
|
|
</el-checkbox-group>
|
|
|
</div>
|
|
|
<MyFullCalendar
|
|
|
@@ -167,7 +172,16 @@ export default {
|
|
|
visible: false,
|
|
|
data: null
|
|
|
},
|
|
|
- visibleSchedule: false // 排期任务弹框
|
|
|
+ visibleSchedule: false, // 排期任务弹框
|
|
|
+ colorList: [
|
|
|
+ 'rgba(8,172,133,1)', 'rgba(12,119,229,1)', 'rgba(237,82,9,1)', 'rgba(209,194,0,1)', 'rgba(126,211,33,1)',
|
|
|
+ 'rgba(245,108,108,1)', 'rgba(88,118,240,1)', 'rgba(235,103,175,1)', 'rgba(255,256,110,1)', 'rgba(186,230,55,1)'
|
|
|
+ ],
|
|
|
+ bgColorList: [
|
|
|
+ 'rgba(8,172,133,0.6)', 'rgba(12,119,229,0.6)', 'rgba(237,82,9,0.6)', 'rgba(209,194,0,0.6)', 'rgba(126,211,33,0.6)',
|
|
|
+ 'rgba(245,108,108,0.6)', 'rgba(88,118,240,0.6)', 'rgba(235,103,175,0.6)', 'rgba(255,256,110,0.6)', 'rgba(186,230,55,0.6)'
|
|
|
+ ],
|
|
|
+ mapMemberColor: new Map()// 人员对应颜色表
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
@@ -203,8 +217,18 @@ export default {
|
|
|
this.checkedMembers = this.memberList.map(item => item.idap)
|
|
|
this.checkAllMember = true
|
|
|
this.queryTeamWorkListByTime(this.calendarView)
|
|
|
+ this.colorHandler(this.memberList)
|
|
|
}
|
|
|
},
|
|
|
+ colorHandler(arr) { // 成员对应颜色处理
|
|
|
+ this.mapMemberColor.clear()
|
|
|
+ arr.map((item, index) => {
|
|
|
+ this.mapMemberColor.set(item.idap, {
|
|
|
+ color: this.colorList[index % 10],
|
|
|
+ bgColor: this.bgColorList[index % 10]
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
handleMember(arr) {
|
|
|
const newMap = new Map()
|
|
|
return arr.filter(item => {
|
|
|
@@ -322,14 +346,11 @@ export default {
|
|
|
teamSearchInfo: this.searchForm,
|
|
|
searchScheduleInfo: { origin: this.origin }
|
|
|
}
|
|
|
-
|
|
|
params.peoples = this.checkedMembers
|
|
|
const res = await queryTeamWorkListByTime(params)
|
|
|
if (res.code === 200) {
|
|
|
- const colorList = ['rgba(8,172,133,1)', 'rgba(12,119,229,1)', 'rgba(237,82,9,1)', 'rgba(209,194,0,1)']
|
|
|
- const bgList = ['rgba(97,211,184,0.6)', 'rgba(64,157,254,0.6)', 'rgba(255,137,82,0.6)', 'rgba(245,227,0,0.6)']
|
|
|
this.calendarEvents = res.data.map((item, index) => {
|
|
|
- item.textColor = colorList[index % 4]
|
|
|
+ const colorObj = this.mapMemberColor.get(item.peopleObject.idap)
|
|
|
const title = item.origin ? '日程' : '排期'
|
|
|
const require = `${item.requireNames && item.requireNames.length > 0 ? item.requireNames.join(',') : '无'}`
|
|
|
return {
|
|
|
@@ -339,8 +360,8 @@ export default {
|
|
|
end: moment(item.endTime).add(1, 'day').toDate(),
|
|
|
detailData: item,
|
|
|
className: item.origin ? 'schedule1' : 'schedule2',
|
|
|
- backgroundColor: bgList[index % 4],
|
|
|
- textColor: item.textColor
|
|
|
+ backgroundColor: colorObj && colorObj.bgColor || null,
|
|
|
+ textColor: colorObj && colorObj.color || null
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
@@ -396,6 +417,16 @@ export default {
|
|
|
color: #333B4A;
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
+.check-point {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .point {
|
|
|
+ margin-left: 5px;
|
|
|
+ height: 6px;
|
|
|
+ width: 6px;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+}
|
|
|
>>>.el-dropdown-menu__item {
|
|
|
max-width: 20vw;
|
|
|
overflow: scroll;
|
wangziqian