herenshan112
/
hxgksystemapp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

日历视图

lwx_15
超级管理员 1 year ago
parent
fb050d09c2
commit
0faf0b3b9a
9 changed files with 385 additions and 71 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 78
      src/api/calendar/Calendar.ts
  2. 31
      src/api/calendar/DateClass.ts
  3. 105
      src/components/DesignForm/app/calendar/calendar1/calendarItem.vue
  4. 36
      src/components/DesignForm/app/calendar/calendar1/calendarPage.vue
  5. 131
      src/components/DesignForm/app/calendar/calendar1/dayPage.vue
  6. 3
      src/components/DesignForm/app/calendar/calendar1/monthPage.vue
  7. 27
      src/components/DesignForm/app/calendar/calendar1/weekPage.vue
  8. 28
      src/components/DesignForm/app/index.vue
  9. 17
      src/components/DesignForm/app/timeAxis.vue

78
src/api/calendar/Calendar.ts
View File

@ -2,6 +2,7 @@ import constValue from '@/api/calendar/const';
import constVal from '@/api/calendar/const';
import DateClass from '@/api/calendar/DateClass';
import { clockFactory } from '@/api/calendar/utils';
import { formToJSON } from 'axios';
export interface dateBase {
isCurrent: boolean;
@ -194,6 +195,83 @@ class Calendar {
// console.log("日历数据",dateArray)
return dateArray;
}
//获取单一日期格式
gainOneDay(y: number, m: number, d: number){
let dateStr = y + "-" + m + "-" + d; // 要转换的日期字符串
let now = new Date(dateStr); //当前日期字符串转换成Date对象
const lun = DateClass.getLunars(y, m, d);
const l = lun.split('-');
let currentTime = DateClass.getCurrent()
return {
title: d,
isCurrent: true,
isHolidays: DateClass.getHolidays([y, m, d]),
isWorks: DateClass.getWorks([y, m, d]),
date: `${y}-${clockFactory(m)}-${clockFactory(d)}`,
lunars: lun,
lunarsChinese:
DateClass.toChinaMonth(Number(l[1])) + DateClass.toChinaDay(Number(l[2])),
lunarsChina: DateClass.toChinaDay(Number(l[2])),
isNow: currentTime[2] === d ? true : false,
solarDay: DateClass.getSolarDay(m, d ),
lunarDay: DateClass.getlunarDay(Number(l[0]), Number(l[1]), Number(l[2])),
animal: DateClass.getAnimal(Number(l[0])),
astro: DateClass.toAstro(y, m, d),
term: getTerm(Number(l[0]), m, d),
}
}
//获取指定日期所在周的时间
gainDayOfWeek(year: number, month: number, taday: number){
let dateStr = year + "-" + month + "-" + taday; // 要转换的日期字符串
let now = new Date(dateStr); //当前日期字符串转换成Date对象
let nowTime = now.getTime();
let nowDayOfWeek = now.getDay()==0?7:now.getDay(); //今天本周的第几天
let taDay = now.getDate()
let firstTime = now.setDate(taDay - nowDayOfWeek + 1)
let currentTime = DateClass.getCurrent()
const dateArray: dateBase[] = [];
for(let i=1; i<=7;i++){
let nextWeekFirstDaty = new Date(firstTime + 86400000 * (i - 1))
let y: any = nextWeekFirstDaty.getFullYear();
let m: any = nextWeekFirstDaty.getMonth() + 1;
let d: any = nextWeekFirstDaty.getDate();
const lun = DateClass.getLunars(y, m, d);
const l = lun.split('-');
dateArray.push({
title: d,
isCurrent: true,
isHolidays: DateClass.getHolidays([y, m, d]),
isWorks: DateClass.getWorks([y, m, d - i]),
date: `${y}-${clockFactory(m)}-${clockFactory(d)}`,
lunars: lun,
lunarsChinese:
DateClass.toChinaMonth(Number(l[1])) + DateClass.toChinaDay(Number(l[2])),
lunarsChina: DateClass.toChinaDay(Number(l[2])),
isNow: currentTime[2] === d ? true : false,
solarDay: DateClass.getSolarDay(m, d + i),
lunarDay: DateClass.getlunarDay(Number(l[0]), Number(l[1]), Number(l[2])),
animal: DateClass.getAnimal(Number(l[0])),
astro: DateClass.toAstro(y, m, d),
term: getTerm(Number(l[0]), m, d),
});
}
// console.log("dateStr=========>",dateStr)
// console.log("now=========>",now)
// console.log("nowTime=========>",nowTime)
// console.log("nowDayOfWeek=========>",nowDayOfWeek)
// console.log("taDay=========>",taDay)
// console.log("kjsd=========>",firstTime)
// console.log("dateArray=========>",dateArray)
return dateArray
}
//获得一周的所有日期
getWeekNumber(year: number, month: number, taday: number) {
let dateStr = year + "-" + month + "-" + taday; // 要转换的日期字符串

31
src/api/calendar/DateClass.ts
View File

@ -333,6 +333,14 @@ class DateClass {
}
break;
case 3:
let dateStr = y + "-" + m + "-" + d; // 要转换的日期字符串
let now = new Date(dateStr); //当前日期字符串转换成Date对象
let nowTime = now.getTime();
let nextWeekFirstDaty = new Date(nowTime + 86400000)
let yy: any = nextWeekFirstDaty.getFullYear();
let mm: any = nextWeekFirstDaty.getMonth() + 1;
let dd: any = nextWeekFirstDaty.getDate();
return [yy,mm,dd]
break;
default:
let month = m + 1
@ -369,21 +377,14 @@ class DateClass {
}
break;
case 3:
let day = d-1
if(day <= 0){
let month = m - 1
if(month <= 0){
y = y -1;
m = 12
d = this.solarMonth(y,m)
}else{
m = month
d = this.solarMonth(y,month)
}
}else{
d = day
}
return [y,m,d]
let dateStr = y + "-" + m + "-" + d; // 要转换的日期字符串
let now = new Date(dateStr); //当前日期字符串转换成Date对象
let nowTime = now.getTime();
let nextWeekFirstDaty = new Date(nowTime - 86400000)
let yy: any = nextWeekFirstDaty.getFullYear();
let mm: any = nextWeekFirstDaty.getMonth() + 1;
let dd: any = nextWeekFirstDaty.getDate();
return [yy,mm,dd]
break;
default:
let month = m - 1

105
src/components/DesignForm/app/calendar/calendar1/calendarItem.vue
View File

@ -1,28 +1,3 @@
<template>
<div
class="calendar-item-container"
:class="[
{
'is-current': col.isCurrent,
'is-holidays': col.isHolidays,
'is-week': col.isWeek,
'is-selected': col.date === props.time,
'is-current-month': isCurrentMonth(col.date),
},
]"
@click="changeTargetDate(col)"
>
<div class="dayStyle">
<span >{{ col.title }}</span>
<div v-if="col.isHolidays">休</div>
<span >{{ col.lunarsChina }}</span>
</div>
</div>
</template>
<script lang="ts" setup>
import { PropType } from 'vue';
import DateClass from '@/api/calendar/DateClass';
@ -40,16 +15,75 @@ const props = defineProps({
},
});
function isCurrentMonth(time: string) {
const isCurrentMonth = (time: string) => {
const months = time.split('-')[1];
return DateClass.getCurrent()[1] === Number(months);
}
const emit = defineEmits(['changeTargetDate']);
function changeTargetDate(time: dateBase) {
const changeTargetDate = (time: dateBase) => {
emit('changeTargetDate', time);
}
/**
@ 作者: 秦东
@ 时间: 2024-07-16 10:32:41
@ 功能: 搜索数据
*/
const searchtData = (val:any,time?:any) => {
return time
}
</script>
<template>
<div
class="calendar-item-container"
:class="[
{
'is-current': col.isCurrent,
'is-holidays': col.isHolidays,
'is-week': col.isWeek,
'is-selected': col.date === props.time,
'is-current-month': isCurrentMonth(col.date),
},
]"
@click="changeTargetDate(col)"
>
<div class="dayStyle">
<span >{{ col.title }}</span>
<div v-if="col.isHolidays">休</div>
<span >{{ col.lunarsChina }}</span>
</div>
<div class="dayList">
<div class="dayLogCont">Squeezed by parent element</div>
<div class="dayLogCont">
{{ searchtData(1,col)}}
</div>
<div class="dayLogCont">
{{ searchtData(1,col)}}
</div>
<div class="dayLogCont">
{{ searchtData(1,col)}}
</div>
<div class="dayLogCont">
{{ searchtData(1,col)}}
</div>
<div class="dayLogCont">
{{ searchtData(1,col)}}
</div>
<div class="dayLogCont">
{{ searchtData(1,col)}}
</div>
<div class="dayLogCont">
{{ searchtData(1,col)}}
</div>
<div class="dayLogCont">
{{ searchtData(1,col)}}
</div>
</div>
</div>
</template>
<style scoped lang="less">
.calendar-item-container {
@ -61,13 +95,28 @@ function changeTargetDate(time: dateBase) {
box-sizing: border-box;
border-radius: 6px;
border: 2px solid #ffffff;
.dayList{
height: calc(100% - 20px);
overflow-y: auto;
}
.dayLogCont{
white-space: nowrap; /* 确保文本在一行内显示 */
overflow: hidden; /* 隐藏溢出的内容 */
text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
font-size: 0.95rem;
border: 1px solid #bcbcbc;
border-radius: 5px;
margin-bottom:5px;
padding: 0 5px;
}
.dayStyle{
display: flex;
// align-items: top;
justify-content: space-between;
font-size: 12px;
padding: 0 5px;
color: #999999;
}
.calendar-title {
font-size: 1.2rem;

36
src/components/DesignForm/app/calendar/calendar1/calendarPage.vue
View File

@ -21,11 +21,21 @@ const props = defineProps({
},
},
bodyHight:Number,
searchSend:{
type:Object,
default(){
return {}
}
}
});
const taday = ref<any>([]);
const curtteDayType = ref(1)
const curtteDay = ref(1)
const monthPageRef = ref(null)
const weekPageRef = ref(null)
const dayPageRef = ref(null)
onMounted(() => {
if(taday.value.length <= 0){
taday.value = DateClass.getCurrent()
@ -135,6 +145,26 @@ const goTady = () => {
let time = taday.value[0] + "-" + clockFactory(taday.value[1]) + "-" + clockFactory(taday.value[2])
emit('getDate', time);
}
/**
@ 作者: 秦东
@ 时间: 2024-07-16 13:06:23
@ 功能: 查询数据
*/
const calendarSearchData = (val:any) => {
switch(curtteDayType.value){
case 2:
break;
case 3:
dayPageRef.value.searchatDayList(val);
default:
break;
}
console.log("查询数据",props.searchSend)
}
defineExpose({
calendarSearchData
})
</script>
<template>
<div class="calBox" :style="'height:calc(100vh - '+ props.bodyHight +'px)'">
@ -157,9 +187,9 @@ const goTady = () => {
</div>
</div>
<div class="weekNumber">
<MonthPage v-if="curtteDayType==1" :body-hight="props.bodyHight" :ta-day="taday" />
<WeekPage v-if="curtteDayType==2" :body-hight="props.bodyHight" :ta-day="taday" />
<DayPage v-if="curtteDayType==3" :body-hight="props.bodyHight" />
<MonthPage ref="monthPageRef" v-if="curtteDayType==1" :body-hight="props.bodyHight" :ta-day="taday" :search-send="props.searchSend" />
<WeekPage ref="weekPageRef" v-if="curtteDayType==2" :body-hight="props.bodyHight" :ta-day="taday" :search-send="props.searchSend" />
<DayPage ref="dayPageRef" v-if="curtteDayType==3" :body-hight="props.bodyHight" :ta-day="taday" :search-send="props.searchSend" />
</div>
</div>
</template>

131
src/components/DesignForm/app/calendar/calendar1/dayPage.vue
View File

@ -4,21 +4,150 @@
@ 备注: 日日历
-->
<script lang='ts' setup>
import Calendar from '@/api/calendar/Calendar';
import DateClass from '@/api/calendar/DateClass';
import { dateBase } from '@/api/calendar/Calendar';
import { clockFactory } from '@/api/calendar/utils';
const props = defineProps({
bodyHight:Number,
taDay:{
type:Array,
default() {
return [2024,7,13];
},
},
searchSend:{
type:Object,
default(){
return {}
}
}
});
//画板高度
const drawingBoardHeight = computed(()=>{
return props.bodyHight + 50
})
const curttWeek = computed(()=>{
console.log("画板高度---------->",props.taDay[0])
return DateClass.getWeek(DateClass.solarWeek(props.taDay[0],props.taDay[1],props.taDay[2]))
})
const dayInfo = ref<any>();
onMounted(()=>{
dayInfo.value = Calendar.gainOneDay(props.taDay[0],props.taDay[1],props.taDay[2])
console.log("初次加载",dayInfo.value,props.searchSend)
searchatDayList(props.searchSend)
nextTick(()=>{
let ddTime = DateClass.getCurrent()
selectedTime.value = ddTime[0] + "-" + clockFactory(ddTime[1]) + "-" + clockFactory(ddTime[2])
})
})
watch(()=>props.taDay,(val:any)=>{
dayInfo.value = Calendar.gainOneDay(val[0],val[1],val[2])
console.log("监听变化",dayInfo.value)
searchatDayList(props.searchSend)
},{
deep: true,
})
const selectedTime = ref(props.taDay[0] + "-" + clockFactory(props.taDay[1]) + "-" + clockFactory(props.taDay[2]))
const emit = defineEmits(['getDate']);
const changeDate = (time: dateBase) => {
selectedTime.value = time.date;
emit('getDate', time);
}
/**
@ 作者: 秦东
@ 时间: 2024-07-16 11:53:35
@ 功能: 获取数据
*/
const searchatDayList = (val:any) => {
val.viewClass = {
class:"date",
sortWord:"creater_time",
sort:1,
startTime:"",
endTime:"",
dayType:"",
mapWord:""
}
console.log("获取每天数据",val)
let sendInfo = {
search:val,
timeAry:[dayInfo.value]
}
console.log("获取每天数据条件",sendInfo)
}
defineExpose({
searchatDayList
})
</script>
<template>
<div class="monthCalendarBox" :style="'height:calc(100vh - '+ drawingBoardHeight +'px)'"></div>
<div class="monthCalendarBox" :style="'height:calc(100vh - '+ drawingBoardHeight +'px)'">
<ul class="t-calendar-header">
<li>
{{ curttWeek }}
</li>
</ul>
<div class="t-calendar-day">
<template v-if="dayInfo">
<div
class="t-calendar-row"
>
<CalendarItem
:col="dayInfo"
:time="selectedTime"
@changeTargetDate="changeDate"
></CalendarItem>
</div>
</template>
<template v-else>
<div class="no-date">抱歉,暂无数据</div>
</template>
</div>
</div>
</template>
<style lang='scss' scoped>
.monthCalendarBox{
width: 100%;
margin-top: 10px;
.t-calendar-header {
display: flex;
width: 100%;
height: 42px;
padding: 0;
box-sizing: border-box;
li {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
font-size: 0.95rem;
}
}
.t-calendar-day {
display: flex;
width: 100%;
height: calc(100% - 42px);
padding: 0;
box-sizing: border-box;
border-right: 1px solid #ebeef5;
.t-calendar-row {
width: 100%;
font-size: 0.95rem;
border-bottom: 1px solid #ebeef5;
border-top: 1px solid #ebeef5;
border-left: 1px solid #ebeef5;
}
}
}
</style>

3
src/components/DesignForm/app/calendar/calendar1/monthPage.vue
View File

@ -30,7 +30,7 @@ onMounted(()=>{
const selectedTime = ref(props.taDay[0] + "-" + clockFactory(props.taDay[1]) + "-" + clockFactory(props.taDay[2]))
const emit = defineEmits(['getDate']);
function changeDate(time: dateBase) {
const changeDate = (time: dateBase) => {
selectedTime.value = time.date;
emit('getDate', time);
}
@ -115,6 +115,7 @@ const TBody = computed(() =>
padding: 2px;
font-size: 16px;
transition: all 0.2s;
width: calc(100%/7);
}
.t-calendar-col:last-child {
border-right: 1px solid #ebeef5;

27
src/components/DesignForm/app/calendar/calendar1/weekPage.vue
View File

@ -26,11 +26,24 @@ const drawingBoardHeight = computed(()=>{
//周期
const THeader = Calendar.title();
const WeekBody = computed(()=>{
console.log("画板高度--->",props.taDay.start[0]);
return Calendar.getWeekNumber(props.taDay.start[0],props.taDay.start[1],props.taDay.start[2]);
Calendar.gainDayOfWeek(props.taDay.start[0],props.taDay.start[1],props.taDay.start[2]);
console.log("画板高度--->",props.taDay.start[0]);
return Calendar.gainDayOfWeek(props.taDay.start[0],props.taDay.start[1],props.taDay.start[2]);
});
onMounted(()=>{
nextTick(()=>{
let ddTime = DateClass.getCurrent()
selectedTime.value = ddTime[0] + "-" + clockFactory(ddTime[1]) + "-" + clockFactory(ddTime[2])
})
})
const selectedTime = ref(props.taDay[0] + "-" + clockFactory(props.taDay[1]) + "-" + clockFactory(props.taDay[2]))
const emit = defineEmits(['getDate']);
const changeDate = (time: dateBase) => {
selectedTime.value = time.date;
emit('getDate', time);
}
</script>
<template>
<div class="monthCalendarBox" :style="'height:calc(100vh - '+ drawingBoardHeight +'px)'">
@ -46,7 +59,11 @@ const WeekBody = computed(()=>{
v-for="(item, index) in WeekBody"
:key="index"
>
{{ item }}
<CalendarItem
:col="item"
:time="selectedTime"
@changeTargetDate="changeDate"
></CalendarItem>
</div>
</template>
<template v-else>
@ -81,7 +98,7 @@ const WeekBody = computed(()=>{
box-sizing: border-box;
border-right: 1px solid #ebeef5;
.t-calendar-row {
width: 100%;
width: calc(100%/7);
font-size: 0.95rem;
border-bottom: 1px solid #ebeef5;

28
src/components/DesignForm/app/index.vue
View File

@ -22,7 +22,7 @@ import { softDeletion,retractRunWorkFlow } from '@/api/taskapi/management'
import FormPageCont from '@/components/DesignForm/tableListPage/formPageCont.vue'
import TableFlow from '@/views/sysworkflow/lowcodepage/pageFlow/appTableFlow.vue'
import TimeAxisPage from '@/components/DesignForm/app/timeAxis.vue'
import CalendarPage from '@/components/DesignForm/app/calendarPage.vue'
import CalendarPage from '@/components/DesignForm/app/calendar/calendar1/calendarPage.vue'
const props = withDefaults(
@ -296,6 +296,7 @@ watch(()=>props.formId,(val:any)=>{
})
const timeAxisRef = ref(null)
const calendarPageRef = ref(null)
const searchSend = reactive({
formId:props.formId,
page:state.currentPage,
@ -310,22 +311,27 @@ const searchSend = reactive({
*/
const getPageData = () => {
// let sendData = {
// formId:props.formId,
// page:state.currentPage,
// pagesize:state.pageSize,
// searchData:json2string(props.searchData)
// }
// console.log("获取列表详细信息",sendData)
let sendData = {
formId:props.formId,
page:state.currentPage,
pagesize:state.pageSize,
searchData:json2string(props.searchData)
}
console.log("获取列表详细信息",sendData)
switch(viewType.value){
case 2:
nextTick(()=>{
console.log("获取列表详细信息-------555---------->",calendarPageRef.value)
calendarPageRef.value.calendarSearchData(sendData)
})
// calendarPageRef.value.calendarSearchData()
break;
case 3:
nextTick(()=>{
console.log("获取列表详细信息-------222---------->",timeAxisRef.value)
// timeAxisRef.value.searchTimeList(searchSend)
timeAxisRef.value.searchTimeList(sendData,1)
})
break;
@ -335,7 +341,7 @@ const getPageData = () => {
break;
default:
state.loading = true;
gainFormPageListCont(searchSend)
gainFormPageListCont(sendData)
.then((data)=>{
console.log("获取列表详细信息----------------->",data)
tableDataList.value = data.data.list
@ -857,7 +863,7 @@ const tabsView = (val:any,types:number) => {
</div>
</el-col>
<el-col v-if="viewType==2" :span="24">
<CalendarPage v-if="viewType==2" />
<CalendarPage ref="calendarPageRef" :search-send="searchSend" :body-hight="265" />
</el-col>
<el-col v-if="viewType==3" :span="24">
<TimeAxisPage ref="timeAxisRef" :data="tableDataList" :view-layout="viewLayout" :columns-filter="columnsFilter" :search-send="searchSend" />

17
src/components/DesignForm/app/timeAxis.vue
View File

@ -67,7 +67,7 @@ const timeInfoList = ref<any[]>([])
@ 时间: 2024-07-08 13:11:43
@ 功能: 时间轴数据搜索
*/
const searchTimeList = (val:any) =>{
const searchTimeList = (val:any,clas?:number) =>{
loadTimePage.value = true
console.log("时间轴数据搜索",val)
console.log("时间轴数据搜索--->",props.columnsFilter)
@ -80,13 +80,16 @@ const searchTimeList = (val:any) =>{
dayType:"",
mapWord:""
}
console.log("时间轴数据搜索-11111-->",timeInfoList.value.length)
if(timeInfoList.value.length > 0){
val.oldData = json2string(timeInfoList.value)
}else{
val.oldData = ""
if(clas && clas != 1){
console.log("时间轴数据搜索-11111-->",timeInfoList.value.length)
if(timeInfoList.value.length > 0){
val.oldData = json2string(timeInfoList.value)
}else{
val.oldData = ""
}
}
multiViewPage(val)
.then((data:any) =>{
console.log("时间轴数据搜索--1->",data)
@ -118,7 +121,7 @@ defineExpose({
@ 功能: 判断当前值
*/
const judgeGainVal = (key:string,val:any) => {
console.log("判断当前值--1->",val)
// console.log("判断当前值--1->",val)
if(val[key]){
return val[key]
}

Write Preview
Loading…
Cancel
Save