sk_fems_ui commit
This commit is contained in:
unknown
339
components/common/Calendar.vue
Normal file
339
components/common/Calendar.vue
Normal file
@ -0,0 +1,339 @@
|
||||
<template>
|
||||
<div class="custom-vc-calender">
|
||||
<div class="custom-vc-calender-title text-center" v-if="headerVisible">
|
||||
<span>{{ selectedYear }}년 {{ selectedMonth }}월</span>
|
||||
</div>
|
||||
<vc-calendar
|
||||
ref="myCalendar"
|
||||
:attributes="calendarAttributes"
|
||||
class="custom-calendar"
|
||||
>
|
||||
<!-- disable-page-swipe
|
||||
is-expanded -->
|
||||
<template v-slot:day-content="{ day, attributes }">
|
||||
<div class="plusButton" style="overflow:auto">
|
||||
<!-- <p class="plusButton mr-1" >+</p> -->
|
||||
<span
|
||||
:class="['day-label', { 'is-holiday': hldyValues(day.day) }]"
|
||||
@click="addPlan(day.year, day.month, day.day)"
|
||||
>{{ day.day }}</span
|
||||
>
|
||||
<span v-for="attr in attributes" :key="attr.key" class="day-hldyNm">
|
||||
{{ attr.customData.title }}
|
||||
</span>
|
||||
<div class="">
|
||||
<p
|
||||
v-for="attr in attributes"
|
||||
:key="attr.key"
|
||||
:class="attr.customData.planColor"
|
||||
@click="updatePlan(attr.customData.planSeq)"
|
||||
>
|
||||
{{ attr.customData.planTitle }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</vc-calendar>
|
||||
<component
|
||||
ref="planPop"
|
||||
:is="'PlanPop'"
|
||||
v-show="false"
|
||||
:detailList="detailList"
|
||||
:label="planLabel"
|
||||
:parentPrgmId="parentPrgmId"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
import Utility from '~/plugins/utility';
|
||||
import PlanPop from '@/components/common/modal/PlanPop';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
parentPrgmId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
gridName: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
headerVisible: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
pageData(state) {
|
||||
return state.pageData[this.parentPrgmId];
|
||||
},
|
||||
}),
|
||||
gridData() {
|
||||
return this.pageData[this.gridName].data;
|
||||
},
|
||||
planData() {
|
||||
return this.pageData.planData;
|
||||
},
|
||||
calendarDtValue() {
|
||||
const dt = this.pageData['fromDt'];
|
||||
return dt;
|
||||
},
|
||||
selectedYear() {
|
||||
return Utility.setFormatDate(this.calendarDtValue, 'YYYY');
|
||||
//return this.calendarDtValue.split("-")[0];
|
||||
},
|
||||
selectedMonth() {
|
||||
return Utility.setFormatDate(this.calendarDtValue, 'MM');
|
||||
//return this.calendarDtValue.split("-")[1];
|
||||
},
|
||||
hldyValues() {
|
||||
const filter = this.gridData.filter(
|
||||
data => data.hldyFg === '1' || data.hldyNm,
|
||||
);
|
||||
const map = filter.map(item => {
|
||||
const dt = item.dt.split(' ')[0];
|
||||
const dtArr = dt.split('-');
|
||||
const dd = dtArr[2] * 1;
|
||||
return dd;
|
||||
});
|
||||
|
||||
return day => {
|
||||
return map.includes(day);
|
||||
};
|
||||
},
|
||||
calendarAttributes() {
|
||||
if (this.planData.length > 0) {
|
||||
let attrArr = [];
|
||||
this.planData.forEach((item, idx) => {
|
||||
const dt = item.dt.split(' ')[0];
|
||||
const dtArr = dt.split('-');
|
||||
const yy = dtArr[0] * 1;
|
||||
const mm = dtArr[1] * 1 - 1;
|
||||
const dd = dtArr[2] * 1;
|
||||
attrArr.push({
|
||||
key: idx,
|
||||
customData: {
|
||||
title: item.hldyNm,
|
||||
hldyFg: item.hldyFg,
|
||||
planTitle: item.planTitle,
|
||||
planSeq: item.planSeq,
|
||||
planColor:
|
||||
// item.endDt < Utility.setFormatDate(new Date(), 'YYYY-MM-DD')
|
||||
// ? 'grey':
|
||||
item.planColor,
|
||||
},
|
||||
dates: new Date(yy, mm, dd),
|
||||
});
|
||||
});
|
||||
return attrArr;
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
calendarDtValue(val) {
|
||||
// if (val) {
|
||||
// this.$refs.myCalendar.move(this.calendarDtValue);
|
||||
// }
|
||||
if (val) {
|
||||
const yy = Utility.setFormatDate(this.calendarDtValue, 'YYYY');
|
||||
const mm = Utility.setFormatDate(this.calendarDtValue, 'MM') - 1;
|
||||
this.$refs.myCalendar.showPageRange(new Date(yy, mm, 1));
|
||||
}
|
||||
},
|
||||
},
|
||||
components: {
|
||||
PlanPop,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
detailList: myDetail,
|
||||
planPopDisableFlag: false,
|
||||
planLabel: '일정',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
addPlan(year, month, day) {
|
||||
this.planLabel = '일정 등록';
|
||||
this.$refs['planPop'].popUpAction = 'insert';
|
||||
// this.$refs['planPop'].strtDt = year + '-' + month + '-' + day;
|
||||
// this.$refs['planPop'].endDt = year + '-' + month + '-' + day;
|
||||
// this.$refs['planPop'].strtDt = year + '-' + String(month).padStart(2, '0') + '-' + String(day).padStart(2, '0');
|
||||
// this.$refs['planPop'].endDt = year + '-' + String(month).padStart(2, '0') + '-' + String(day).padStart(2, '0');
|
||||
this.$refs['planPop'].strtDt = '';
|
||||
this.$refs['planPop'].endDt = '';
|
||||
this.$refs['planPop'].addPlanData = {
|
||||
year : year,
|
||||
month : month,
|
||||
day : day
|
||||
}
|
||||
this.$refs['planPop'].blocId = this.pageData.blocMstrList[
|
||||
this.pageData.blocId
|
||||
].blocId;
|
||||
this.$refs['planPop'].dialog = true;
|
||||
},
|
||||
updatePlan(val) {
|
||||
this.$refs['planPop'].popUpAction = 'update';
|
||||
this.$refs['planPop'].planSeq = val;
|
||||
this.$refs['planPop'].strtDt = '';
|
||||
this.$refs['planPop'].endDt = '';
|
||||
this.$refs['planPop'].blocId = this.pageData.blocMstrList[
|
||||
this.pageData.blocId
|
||||
].blocId;
|
||||
this.$refs['planPop'].dialog = true;
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
};
|
||||
const myDetail = [];
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/assets/scss/var.scss';
|
||||
@import '@/assets/scss/mixin.scss';
|
||||
::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
display: none;
|
||||
}
|
||||
.custom-vc-calender {
|
||||
&-title {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
::v-deep {
|
||||
.custom-calendar.vc-container {
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
.vc-header,
|
||||
.vc-arrows-container {
|
||||
display: none;
|
||||
}
|
||||
.vc-weeks {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
> div {
|
||||
flex: 1 0 calc(100% / 7);
|
||||
}
|
||||
}
|
||||
.vc-weekday {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 36px;
|
||||
padding: 0;
|
||||
}
|
||||
.vc-day {
|
||||
height: 10.889vh;
|
||||
min-height: auto;
|
||||
|
||||
.day-label {
|
||||
font-size: 1rem;
|
||||
line-height: 1.235;
|
||||
}
|
||||
.day-hldyNm {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
max-width: 80%;
|
||||
float: right;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
> div {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
.vc-day.is-not-in-month {
|
||||
* {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
.plusButton:hover > span:first-child {
|
||||
font-weight: bolder;
|
||||
cursor: pointer;
|
||||
}
|
||||
.red {
|
||||
//background-color: rgba(229,62,62,var(--bg-opacity));
|
||||
background-color: #e53e3e !important;
|
||||
color: #fff;
|
||||
border-radius: 0.125rem;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.25;
|
||||
text-align: left;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.blue {
|
||||
//background-color: rgba(66,153,225,var(--bg-opacity));
|
||||
background-color: #4299e1 !important;
|
||||
color: #fff;
|
||||
border-radius: 0.125rem;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.25;
|
||||
text-align: left;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.puple {
|
||||
//background-color: rgba(102,126,234,var(--bg-opacity));
|
||||
background-color: #667eea !important;
|
||||
color: #fff;
|
||||
border-radius: 0.125rem;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.25;
|
||||
text-align: left;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.green {
|
||||
//background-color: rgba(56,178,172,var(--bg-opacity));
|
||||
background-color: #38b2ac !important;
|
||||
color: #fff;
|
||||
border-radius: 0.125rem;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.25;
|
||||
text-align: left;
|
||||
margin-bottom: 0.25rem;
|
||||
width: 90%;
|
||||
}
|
||||
.orange {
|
||||
//background-color: rgba(237,137,54,var(--bg-opacity));
|
||||
background-color: #ed8936 !important;
|
||||
color: #fff;
|
||||
border-radius: 0.125rem;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.25;
|
||||
text-align: left;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.pink {
|
||||
//background-color: rgba(237,100,166,var(--bg-opacity));
|
||||
background-color: #ed64a6 !important;
|
||||
color: #fff;
|
||||
border-radius: 0.125rem;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.25;
|
||||
text-align: left;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.grey {
|
||||
background-color: #6d6d6d;
|
||||
color: #fff;
|
||||
border-radius: 0.125rem;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.25;
|
||||
text-align: left;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user