yufei0306
7 months ago
14 changed files with 143 additions and 283 deletions
@ -1,179 +0,0 @@ |
|||||
import type { CrudSchema } from '@/hooks/web/useCrudSchemas' |
|
||||
import { dateFormatter } from '@/utils/formatTime' |
|
||||
|
|
||||
// 表单校验
|
|
||||
export const HolidayCalendarRules = reactive({ |
|
||||
endTime: [required], |
|
||||
concurrencyStamp: [required], |
|
||||
}) |
|
||||
|
|
||||
export const HolidayCalendar = useCrudSchemas(reactive<CrudSchema[]>([ |
|
||||
{ |
|
||||
label: 'ID', |
|
||||
field: 'id', |
|
||||
sort: 'custom', |
|
||||
isForm: false, |
|
||||
}, |
|
||||
{ |
|
||||
label: '日期', |
|
||||
field: 'holidayDate', |
|
||||
sort: 'custom', |
|
||||
formatter: dateFormatter, |
|
||||
isSearch: true, |
|
||||
search: { |
|
||||
component: 'DatePicker', |
|
||||
componentProps: { |
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss', |
|
||||
type: 'daterange', |
|
||||
defaultTime: [new Date('1 00:00:00'), new Date('1 23:59:59')] |
|
||||
} |
|
||||
}, |
|
||||
form: { |
|
||||
component: 'DatePicker', |
|
||||
componentProps: { |
|
||||
type: 'datetime', |
|
||||
valueFormat: 'x' |
|
||||
} |
|
||||
}, |
|
||||
}, |
|
||||
{ |
|
||||
label: '结束时间', |
|
||||
field: 'endTime', |
|
||||
sort: 'custom', |
|
||||
formatter: dateFormatter, |
|
||||
isSearch: true, |
|
||||
search: { |
|
||||
component: 'DatePicker', |
|
||||
componentProps: { |
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss', |
|
||||
type: 'daterange', |
|
||||
defaultTime: [new Date('1 00:00:00'), new Date('1 23:59:59')] |
|
||||
} |
|
||||
}, |
|
||||
form: { |
|
||||
component: 'DatePicker', |
|
||||
componentProps: { |
|
||||
type: 'datetime', |
|
||||
valueFormat: 'x' |
|
||||
} |
|
||||
}, |
|
||||
}, |
|
||||
{ |
|
||||
label: '备用字段一', |
|
||||
field: 'textOne', |
|
||||
sort: 'custom', |
|
||||
isSearch: true, |
|
||||
}, |
|
||||
{ |
|
||||
label: '备用字段二', |
|
||||
field: 'textTwo', |
|
||||
sort: 'custom', |
|
||||
isSearch: true, |
|
||||
}, |
|
||||
{ |
|
||||
label: '备用字段三', |
|
||||
field: 'textThree', |
|
||||
sort: 'custom', |
|
||||
isSearch: true, |
|
||||
}, |
|
||||
{ |
|
||||
label: '备用字段四', |
|
||||
field: 'textFour', |
|
||||
sort: 'custom', |
|
||||
isSearch: true, |
|
||||
}, |
|
||||
{ |
|
||||
label: '备用字段五', |
|
||||
field: 'textFive', |
|
||||
sort: 'custom', |
|
||||
isSearch: true, |
|
||||
}, |
|
||||
{ |
|
||||
label: '删除时间', |
|
||||
field: 'deleteTime', |
|
||||
sort: 'custom', |
|
||||
formatter: dateFormatter, |
|
||||
isSearch: true, |
|
||||
search: { |
|
||||
component: 'DatePicker', |
|
||||
componentProps: { |
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss', |
|
||||
type: 'daterange', |
|
||||
defaultTime: [new Date('1 00:00:00'), new Date('1 23:59:59')] |
|
||||
} |
|
||||
}, |
|
||||
form: { |
|
||||
component: 'DatePicker', |
|
||||
componentProps: { |
|
||||
type: 'datetime', |
|
||||
valueFormat: 'x' |
|
||||
} |
|
||||
}, |
|
||||
}, |
|
||||
{ |
|
||||
label: '状态', |
|
||||
field: 'status', |
|
||||
sort: 'custom', |
|
||||
isSearch: true, |
|
||||
form: { |
|
||||
component: 'Radio' |
|
||||
}, |
|
||||
}, |
|
||||
{ |
|
||||
label: '并发乐观锁', |
|
||||
field: 'concurrencyStamp', |
|
||||
sort: 'custom', |
|
||||
isSearch: true, |
|
||||
form: { |
|
||||
component: 'InputNumber', |
|
||||
value: 0 |
|
||||
}, |
|
||||
}, |
|
||||
{ |
|
||||
label: '备注', |
|
||||
field: 'remark', |
|
||||
sort: 'custom', |
|
||||
isSearch: true, |
|
||||
}, |
|
||||
{ |
|
||||
label: '创建时间', |
|
||||
field: 'createTime', |
|
||||
sort: 'custom', |
|
||||
formatter: dateFormatter, |
|
||||
isSearch: true, |
|
||||
search: { |
|
||||
component: 'DatePicker', |
|
||||
componentProps: { |
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss', |
|
||||
type: 'daterange', |
|
||||
defaultTime: [new Date('1 00:00:00'), new Date('1 23:59:59')] |
|
||||
} |
|
||||
}, |
|
||||
isForm: false, |
|
||||
}, |
|
||||
{ |
|
||||
label: '删除用户名', |
|
||||
field: 'deleter', |
|
||||
sort: 'custom', |
|
||||
isSearch: true, |
|
||||
}, |
|
||||
{ |
|
||||
label: '位置ID', |
|
||||
field: 'siteId', |
|
||||
sort: 'custom', |
|
||||
isSearch: true, |
|
||||
form: { |
|
||||
component: 'InputNumber', |
|
||||
value: 0 |
|
||||
}, |
|
||||
}, |
|
||||
{ |
|
||||
label: '操作', |
|
||||
field: 'action', |
|
||||
isForm: false, |
|
||||
table: { |
|
||||
width: 150, |
|
||||
fixed: 'right' |
|
||||
} |
|
||||
} |
|
||||
])) |
|
@ -1,75 +0,0 @@ |
|||||
<template> |
|
||||
<div> |
|
||||
<el-calendar> |
|
||||
<template #date-cell="{ data }"> |
|
||||
<div |
|
||||
style="height: 100" |
|
||||
:class="data.isSelected ? 'is-selected' : ''" |
|
||||
@click="handleClick(data.day)" |
|
||||
> |
|
||||
<div>{{ data.day.split('-').slice(1).join('-') }}</div> |
|
||||
<div v-if="arr.find((v) => v.date === data.day)">{{ arr.find((v) => v.date === data.day).content }} |
|
||||
</div> |
|
||||
<!-- <div>{{ data.isSelected ? '打羽毛球' : '' }}</div> --> |
|
||||
</div> |
|
||||
</template> |
|
||||
</el-calendar> |
|
||||
<!-- 自定义弹出框 --> |
|
||||
<el-dialog v-model="dialogFormVisible" title="日程安排" width="600" draggable="true"> |
|
||||
<el-form :model="calendar" :label-width="100"> |
|
||||
<el-form-item label="日程内容"> |
|
||||
<el-input v-model="calendar.content" autocomplete="off" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="创建时间"> |
|
||||
<el-input v-model="calendar.content" autocomplete="off" /> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
<template #footer> |
|
||||
<div class="dialog-footer"> |
|
||||
<el-button type="primary" @click="save"> 确定 </el-button> |
|
||||
<el-button @click="dialogFormVisible = false"> 取消 </el-button> |
|
||||
</div> |
|
||||
</template> |
|
||||
</el-dialog> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { reactive, ref } from 'vue' |
|
||||
import { HolidayCalendar, HolidayCalendarRules } from './holidayCalendar.data' |
|
||||
import * as HolidayCalendarApi from '@/api/mes/holidayCalendar' |
|
||||
|
|
||||
const dialogTableVisible = ref(false) |
|
||||
const dialogFormVisible = ref(false) |
|
||||
const formLabelWidth = '160px' |
|
||||
|
|
||||
|
|
||||
export default { |
|
||||
name: 'Calendar', |
|
||||
data() { |
|
||||
return { |
|
||||
value: new Date(), |
|
||||
arr: [ |
|
||||
{ date: '2024-04-01', content: '打球' }, |
|
||||
{ date: '2024-04-02', content: '打台球' }, |
|
||||
{ date: '2024-04-03', content: '打篮球' }, |
|
||||
{ date: '2024-04-04', content: '踢足球' } |
|
||||
], |
|
||||
dialogFormVisible:false, |
|
||||
calendar: {} |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
handleClick(date) { |
|
||||
this.dialogFormVisible = true |
|
||||
this.calendar.date=date |
|
||||
}, |
|
||||
save(){ |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style scoped> |
|
||||
</style> |
|
@ -1,8 +0,0 @@ |
|||||
<template> |
|
||||
<el-calendar v-model="value" /> |
|
||||
</template> |
|
||||
|
|
||||
<script lang="ts" setup> |
|
||||
import { ref } from 'vue' |
|
||||
const value = ref(new Date()) |
|
||||
</script> |
|
Loading…
Reference in new issue