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