日历颜色设置

src/views/workbench/person/components/calenderDetail.vue

@@ -1,7 +1,7 @@
 <template>
   <article v-if="showDetail" ref="show-schedule-detail" class="show-schedule-detail">
     <template v-if="nowDetailData && nowDetailData.origin === 0">
-      <div class="detail-title">【任务排期】{{ nowDetailData.name }}：{{ nowDetailData.desc }}</div>
+      <div class="detail-title" :style="{ color : nowDetailData.textColor }">【任务排期】{{ nowDetailData.name }}：{{ nowDetailData.desc }}</div>
       <div class="detail-time item">
         <div class="label">排期：</div>
         <div>{{ nowDetailData.seperateDaysNoHoliday }}（用时<span>{{ nowDetailData.needDays }}</span>天）</div>
@@ -15,7 +15,7 @@
       </div>
     </template>
     <template v-if="nowDetailData && nowDetailData.origin === 1">
-      <div class="detail-title">【日程】{{ nowDetailData.name }}：{{ nowDetailData.desc }}</div>
+      <div class="detail-title" :style="{ color : nowDetailData.textColor }">【日程】{{ nowDetailData.name }}：{{ nowDetailData.desc }}</div>
       <div class="detail-time item">
         <div class="label">排期：</div>
         <div>{{ nowDetailData.seperateDaysNoHoliday }}（用时<span>{{ nowDetailData.needDays }}</span>天）</div>

src/views/workbench/person/index.vue

@@ -323,7 +323,10 @@ export default {
       }
       const res = await queryWorkListByTime(params)
       if (res.code === 200) {
-        this.calendarEvents = res.data.map(item => {
+        const colorList = ['#08AC85', '#0C77E5', '#ED5209', '#D1C200']
+        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) => {
+          const textColor = colorList[index % 4]
           const title = item.origin ? '日程' : '排期'
           const require = `${item.requireNames && item.requireNames.length > 0 ? item.requireNames.join(',') : '无'}`
           return {
@@ -331,10 +334,13 @@ export default {
             title: `${title}：${item.peopleObject.name}：${item.name}-${item.desc || '无'};所属需求：${require}`,
             start: moment(item.startTime).toDate(),
             end: moment(item.endTime).add(1, 'day').toDate(),
-            detailData: item,
+            detailData: {
+              ...item,
+              textColor: textColor
+            },
             className: item.origin ? 'schedule1' : 'schedule2',
-            backgroundColor: item.origin ? 'rgba(97,211,184,0.6)' : 'rgba(64,157,254,0.6)',
-            textColor: item.origin ? '#08AC85' : '#0C77E5'
+            backgroundColor: bgList[index % 4],
+            textColor: textColor
           }
         })
       }

src/views/workbench/team/index.vue

@@ -328,7 +328,10 @@ export default {
       }
       const res = await queryTeamWorkListByTime(params)
       if (res.code === 200) {
-        this.calendarEvents = res.data.map(item => {
+        const colorList = ['#08AC85', '#0C77E5', '#ED5209', '#D1C200']
+        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) => {
+          const textColor = colorList[index % 4]
           const title = item.origin ? '日程' : '排期'
           const require = `${item.requireNames && item.requireNames.length > 0 ? item.requireNames.join(',') : '无'}`
           return {
@@ -336,10 +339,13 @@ export default {
             title: `${title}：${item.peopleObject.name}：${item.name}-${item.desc || '无'};所属需求：${require}`,
             start: moment(item.startTime).toDate(),
             end: moment(item.endTime).add(1, 'day').toDate(),
-            detailData: item,
+            detailData: {
+              ...item,
+              textColor: textColor
+            },
             className: item.origin ? 'schedule1' : 'schedule2',
-            backgroundColor: item.origin ? 'rgba(97,211,184,0.6)' : 'rgba(64,157,254,0.6)',
-            textColor: item.origin ? '#08AC85' : '#0C77E5'
+            backgroundColor: bgList[index % 4],
+            textColor: textColor
           }
         })
       }