|
@@ -2,14 +2,14 @@
|
|
|
<div :class="ui" class="hc-date-calendar-box">
|
|
|
<div class="hc-date-picker-box">
|
|
|
<div class="hc-date-picker">
|
|
|
- <el-date-picker v-model="toPicker" class="block" size="large" type="month" @change="datePickerChange"/>
|
|
|
+ <el-date-picker v-model="toPicker" class="block" size="large" type="month" @change="datePickerChange" />
|
|
|
</div>
|
|
|
<div class="hc-date-btn-box">
|
|
|
<div class="hc-div-btn" @click="prevMonthClick">
|
|
|
- <HcIcon name="arrow-left"/>
|
|
|
+ <HcIcon name="arrow-left" />
|
|
|
</div>
|
|
|
<div class="hc-div-btn" @click="nextMonthClick">
|
|
|
- <HcIcon name="arrow-right"/>
|
|
|
+ <HcIcon name="arrow-right" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -27,41 +27,39 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import {nextTick, watch, ref} from "vue";
|
|
|
-import {getObjVal} from "js-fast-way"
|
|
|
-import dayjs from "dayjs"
|
|
|
+import { nextTick, ref, watch } from 'vue'
|
|
|
+import { getObjVal } from 'js-fast-way'
|
|
|
+import dayjs from 'dayjs'
|
|
|
import 'dayjs/locale/zh-cn'
|
|
|
|
|
|
-dayjs.locale('zh-cn')
|
|
|
const props = defineProps({
|
|
|
ui: {
|
|
|
type: String,
|
|
|
- default: ''
|
|
|
+ default: '',
|
|
|
},
|
|
|
recordDate: {
|
|
|
type: Object,
|
|
|
- default: () => ({})
|
|
|
+ default: () => ({}),
|
|
|
},
|
|
|
dateData: {
|
|
|
type: Array,
|
|
|
- default: () => ([])
|
|
|
+ default: () => ([]),
|
|
|
},
|
|
|
})
|
|
|
-
|
|
|
-//变量
|
|
|
-const weekdays = ['日', '一', '二', '三', '四', '五', '六'] //星期头
|
|
|
-const toDays = ref({year: '', month: '', date: '', obj: {}})
|
|
|
-const selectedDate = ref({year: '', month: ''}) //选择年月的日期
|
|
|
-const toPicker = ref('') //年月下拉框
|
|
|
-const selectedDatas = ref(props.dateData)
|
|
|
-const choiceDate = ref({year: '', month: '', date: ''}) //选择的日期,年月日
|
|
|
-const curDateData = ref([]) //设置的日期
|
|
|
-const datesDay = ref([]) //日期数据
|
|
|
+//日期数据
|
|
|
|
|
|
//事件
|
|
|
const emit = defineEmits(['choice-date'])
|
|
|
-
|
|
|
-//监听
|
|
|
+dayjs.locale('zh-cn')
|
|
|
+//变量
|
|
|
+const weekdays = ['日', '一', '二', '三', '四', '五', '六'] //星期头
|
|
|
+const toDays = ref({ year: '', month: '', date: '', obj: {} })
|
|
|
+const selectedDate = ref({ year: '', month: '' }) //选择年月的日期
|
|
|
+const toPicker = ref('') //年月下拉框
|
|
|
+const selectedDatas = ref(props.dateData)
|
|
|
+const choiceDate = ref({ year: '', month: '', date: '' }) //选择的日期,年月日
|
|
|
+const curDateData = ref([]) //设置的日期
|
|
|
+const datesDay = ref([])//监听
|
|
|
watch(() => [
|
|
|
props.dateData,
|
|
|
props.recordDate,
|
|
@@ -72,21 +70,21 @@ watch(() => [
|
|
|
|
|
|
//渲染完成
|
|
|
nextTick(() => {
|
|
|
- const toDayJs = dayjs();
|
|
|
+ const toDayJs = dayjs()
|
|
|
toDays.value = {
|
|
|
year: toDayJs.get('year'),
|
|
|
month: toDayJs.get('month') + 1,
|
|
|
date: toDayJs.get('date'),
|
|
|
- obj: toDayJs
|
|
|
+ obj: toDayJs,
|
|
|
}
|
|
|
selectedDate.value = {
|
|
|
year: toDayJs.get('year'),
|
|
|
- month: toDayJs.get('month') + 1
|
|
|
+ month: toDayJs.get('month') + 1,
|
|
|
}
|
|
|
choiceDate.value = {
|
|
|
year: toDayJs.get('year'),
|
|
|
month: toDayJs.get('month') + 1,
|
|
|
- date: toDayJs.get('date')
|
|
|
+ date: toDayJs.get('date'),
|
|
|
}
|
|
|
toPicker.value = toDayJs.format('YYYY-MM')
|
|
|
emit('choice-date', isDayDateFormat(toDays.value))
|
|
@@ -95,17 +93,17 @@ nextTick(() => {
|
|
|
|
|
|
//处理设置的日期
|
|
|
const setCurDateData = (dateData, recordDate) => {
|
|
|
- let curData = [];
|
|
|
+ let curData = []
|
|
|
for (let i = 0; i < dateData.length; i++) {
|
|
|
- let toDate = dayjs(dateData[i]).format("YYYY-MM-DD");
|
|
|
- const toDayJs = dayjs(toDate);
|
|
|
+ let toDate = dayjs(dateData[i]).format('YYYY-MM-DD')
|
|
|
+ const toDayJs = dayjs(toDate)
|
|
|
curData.push({
|
|
|
year: toDayJs.get('year'),
|
|
|
month: toDayJs.get('month') + 1,
|
|
|
- date: toDayJs.get('date')
|
|
|
+ date: toDayJs.get('date'),
|
|
|
})
|
|
|
}
|
|
|
- curDateData.value = curData;
|
|
|
+ curDateData.value = curData
|
|
|
//判断是否选择了日期
|
|
|
if (getObjVal(recordDate)) {
|
|
|
getDatesDay(recordDate.year, recordDate.month)
|
|
@@ -117,35 +115,35 @@ const setCurDateData = (dateData, recordDate) => {
|
|
|
//获取日期
|
|
|
const getDatesDay = (year, month) => {
|
|
|
if (year && month) {
|
|
|
- let toDate = dayjs(year + '-' + month).format("YYYY-MM-DD"); //格式化一下先
|
|
|
- let days = dayjs(toDate).daysInMonth(); //天数
|
|
|
- let monthOneDay = dayjs(toDate).startOf("month").format("YYYY-MM-DD"); //获取当月第一天
|
|
|
- let weekday = dayjs(monthOneDay, "YYYY-MM-DD").day(); //获取当月第一天是星期几
|
|
|
- toPicker.value = dayjs(year + '-' + month).format('YYYY-MM');
|
|
|
+ let toDate = dayjs(year + '-' + month).format('YYYY-MM-DD') //格式化一下先
|
|
|
+ let days = dayjs(toDate).daysInMonth() //天数
|
|
|
+ let monthOneDay = dayjs(toDate).startOf('month').format('YYYY-MM-DD') //获取当月第一天
|
|
|
+ let weekday = dayjs(monthOneDay, 'YYYY-MM-DD').day() //获取当月第一天是星期几
|
|
|
+ toPicker.value = dayjs(year + '-' + month).format('YYYY-MM')
|
|
|
setDatesDay(days, weekday)
|
|
|
} else {
|
|
|
- const toDayJs = toDays.value?.obj ?? {};
|
|
|
- let days = toDayJs.daysInMonth(); //天数
|
|
|
- let monthOneDay = toDayJs.startOf("month").format("YYYY-MM-DD"); //获取当月第一天
|
|
|
- let weekday = dayjs(monthOneDay, "YYYY-MM-DD").day(); //获取当月第一天是星期几
|
|
|
- toPicker.value = toDayJs.format('YYYY-MM');
|
|
|
+ const toDayJs = toDays.value?.obj ?? {}
|
|
|
+ let days = toDayJs.daysInMonth() //天数
|
|
|
+ let monthOneDay = toDayJs.startOf('month').format('YYYY-MM-DD') //获取当月第一天
|
|
|
+ let weekday = dayjs(monthOneDay, 'YYYY-MM-DD').day() //获取当月第一天是星期几
|
|
|
+ toPicker.value = toDayJs.format('YYYY-MM')
|
|
|
setDatesDay(days, weekday)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
//设置日期
|
|
|
const setDatesDay = (days, weekday) => {
|
|
|
- let datesDayData = [];
|
|
|
- const selected = selectedDate.value; //选择的日期
|
|
|
- const choiceData = choiceDate.value; //选择的日期
|
|
|
- const dayData = toDays.value; //今天日期
|
|
|
+ let datesDayData = []
|
|
|
+ const selected = selectedDate.value //选择的日期
|
|
|
+ const choiceData = choiceDate.value //选择的日期
|
|
|
+ const dayData = toDays.value //今天日期
|
|
|
//添加头部
|
|
|
for (let i = 0; i < weekday; i++) {
|
|
|
- datesDayData.push({type: 'excluded', key: '-'})
|
|
|
+ datesDayData.push({ type: 'excluded', key: '-' })
|
|
|
}
|
|
|
//处理日期
|
|
|
for (let i = 0; i < days; i++) {
|
|
|
- let day = i + 1, type = '';
|
|
|
+ let day = i + 1, type = ''
|
|
|
type = setCurDate(selected, day)
|
|
|
if (selected.year === dayData.year && selected.month === dayData.month && dayData.date === day) {
|
|
|
type += ' selected'
|
|
@@ -153,18 +151,18 @@ const setDatesDay = (days, weekday) => {
|
|
|
if (choiceData.year === selected.year && choiceData.month === selected.month && choiceData.date === day) {
|
|
|
type += ' choice'
|
|
|
}
|
|
|
- datesDayData.push({type: type, key: day})
|
|
|
+ datesDayData.push({ type: type, key: day })
|
|
|
}
|
|
|
//添加尾数
|
|
|
- let lastNum = 42 - (weekday + days);
|
|
|
+ let lastNum = 42 - (weekday + days)
|
|
|
for (let i = 0; i < lastNum; i++) {
|
|
|
- datesDayData.push({type: 'excluded', key: '-'})
|
|
|
+ datesDayData.push({ type: 'excluded', key: '-' })
|
|
|
}
|
|
|
- datesDay.value = datesDayData;
|
|
|
+ datesDay.value = datesDayData
|
|
|
}
|
|
|
|
|
|
const setCurDate = (selected, day) => {
|
|
|
- const curDate = curDateData.value; //设置的日期
|
|
|
+ const curDate = curDateData.value //设置的日期
|
|
|
for (let x = 0; x < curDate.length; x++) {
|
|
|
if (selected.year === curDate[x].year && selected.month === curDate[x].month && curDate[x].date === day) {
|
|
|
return 'cur'
|
|
@@ -175,44 +173,44 @@ const setCurDate = (selected, day) => {
|
|
|
|
|
|
//上一月
|
|
|
const prevMonthClick = () => {
|
|
|
- let {year, month} = selectedDate.value
|
|
|
- let years = year, months;
|
|
|
+ let { year, month } = selectedDate.value
|
|
|
+ let years = year, months
|
|
|
if (month === 1) {
|
|
|
- years = year - 1;
|
|
|
- months = 12;
|
|
|
+ years = year - 1
|
|
|
+ months = 12
|
|
|
} else {
|
|
|
- months = month - 1;
|
|
|
+ months = month - 1
|
|
|
}
|
|
|
selectedDate.value = {
|
|
|
year: years,
|
|
|
- month: months
|
|
|
+ month: months,
|
|
|
}
|
|
|
getDatesDay(years, months)
|
|
|
}
|
|
|
//下一月
|
|
|
const nextMonthClick = () => {
|
|
|
- let {year, month} = selectedDate.value
|
|
|
- let years, months;
|
|
|
+ let { year, month } = selectedDate.value
|
|
|
+ let years, months
|
|
|
if (month === 12) {
|
|
|
- years = year + 1;
|
|
|
- months = 1;
|
|
|
+ years = year + 1
|
|
|
+ months = 1
|
|
|
} else {
|
|
|
- years = year;
|
|
|
- months = month + 1;
|
|
|
+ years = year
|
|
|
+ months = month + 1
|
|
|
}
|
|
|
selectedDate.value = {
|
|
|
year: years,
|
|
|
- month: months
|
|
|
+ month: months,
|
|
|
}
|
|
|
getDatesDay(years, months)
|
|
|
}
|
|
|
|
|
|
//天被点击
|
|
|
const datesDayClick = (item) => {
|
|
|
- console.log(selectedDate.value, 'selectedDate');
|
|
|
+ console.log(selectedDate.value, 'selectedDate')
|
|
|
if (item.type !== 'excluded') {
|
|
|
- let {year, month} = selectedDate.value
|
|
|
- choiceDate.value = {year: year, month: month, date: item.key}
|
|
|
+ let { year, month } = selectedDate.value
|
|
|
+ choiceDate.value = { year: year, month: month, date: item.key }
|
|
|
getDatesDay(year, month)
|
|
|
backChoiceDate()
|
|
|
}
|
|
@@ -220,11 +218,11 @@ const datesDayClick = (item) => {
|
|
|
|
|
|
//下拉日期选择
|
|
|
const datePickerChange = (val) => {
|
|
|
- const toDayJs = dayjs(val);
|
|
|
+ const toDayJs = dayjs(val)
|
|
|
toPicker.value = toDayJs.format('YYYY-MM')
|
|
|
selectedDate.value = {
|
|
|
year: toDayJs.year(),
|
|
|
- month: toDayJs.month() + 1
|
|
|
+ month: toDayJs.month() + 1,
|
|
|
}
|
|
|
getDatesDay(toDayJs.year(), toDayJs.month() + 1)
|
|
|
|
|
@@ -238,6 +236,7 @@ const backChoiceDate = () => {
|
|
|
const today = isDayDateFormat(toDays.value)
|
|
|
//判断处理
|
|
|
if (choiceVal.choice > today.choice) {
|
|
|
+ window.$message.warning('只能填报当天及以前的日志')
|
|
|
backToDay()
|
|
|
} else {
|
|
|
emit('choice-date', choiceVal)
|
|
@@ -246,23 +245,23 @@ const backChoiceDate = () => {
|
|
|
|
|
|
//回到今天
|
|
|
const backToDay = () => {
|
|
|
- const {year, month, date} = toDays.value ?? {};
|
|
|
- selectedDate.value = {year: year, month: month}
|
|
|
- choiceDate.value = {year: year, month: month, date: date}
|
|
|
+ const { year, month, date } = toDays.value ?? {}
|
|
|
+ selectedDate.value = { year: year, month: month }
|
|
|
+ choiceDate.value = { year: year, month: month, date: date }
|
|
|
getDatesDay(year, month)
|
|
|
emit('choice-date', isDayDateFormat(toDays.value))
|
|
|
}
|
|
|
|
|
|
//格式转换
|
|
|
-const isDayDateFormat = ({year, month, date}) => {
|
|
|
+const isDayDateFormat = ({ year, month, date }) => {
|
|
|
const today = {
|
|
|
year: year,
|
|
|
month: zpadStart(month, 2, '0'),
|
|
|
- date: zpadStart(date, 2, '0')
|
|
|
+ date: zpadStart(date, 2, '0'),
|
|
|
}
|
|
|
const choice = today.year + today.month + today.date
|
|
|
const choices = `${today.year}-${today.month}-${today.date}`
|
|
|
- return {date: today, choice, choices, dates: {year, month, date}}
|
|
|
+ return { date: today, choice, choices, dates: { year, month, date } }
|
|
|
}
|
|
|
|
|
|
const zpadStart = (val, leng, pad) => {
|
|
@@ -272,7 +271,6 @@ const zpadStart = (val, leng, pad) => {
|
|
|
}
|
|
|
return val
|
|
|
}
|
|
|
-
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|