文章目录
需求
之前实现过一版用 ElementPlus 的日历组件 Calendar 自定义渲染，是在 Vue3 项目中实现的，现在需求在 Vue2 中也实现一版
分析
1. 页面渲染
javascript
<el-calendar v-model="calendar" style="padding-bottom: 0">
<template slot="dateCell" slot-scope="{ data }">
<div class="calendar-day">
<div
:class="data.isSelected ? 'is-selected' : ''"
style="font-weight: bold"
>
{{ data.day.split("-").slice(1).join("-") }}
</div>
<div class="duty-text">
值班人员：
<span v-for="item in tableData" :key="item.id">
<span
v-if="item.dutyDate == data.day"
style="font-weight: bold"
>
{{ item.dutyUser }}
</span>
</span>
<div>
<el-button
size="mini"
type="text"
style="color: #1e80ff; margin-right: 10px"
@click.stop="handleEdit(data)"
>编辑</el-button
>
<el-button
slot="reference"
size="mini"
type="text"
style="color: #1e80ff"
@click="handleRemove(data)"
>删除</el-button
>
</div>
</div>
</div>
</template>
</el-calendar>
javascript
data(){
calendar: new Date(),
}2. 获取页面上的开始日期和结束日期
javascript
methods: {
// 获取日历显示时间范围
getRange (date) {
if (date) {
} else {
this.calendar = new Date()
}
// 日历第一天
let firstDay = ''
// 日历最后一天
let lastDay = ''
// 今天
const today = date || new Date()
// 上月
const m = today.getMonth()
// 本月
const cm = m + 1
// 下月
const lm = m + 2 > 12 ? 1 : m + 2
// 要显示的本月
const currentMonth = cm < 10 ? '0' + cm : cm
// 要显示的本本年
const currentYear = today.getFullYear()
// 要显示的上个月的年份，m = 0 则当前1月，上月则是去年12月
const prevYear = m == 0 ? currentYear - 1 : currentYear
const prevMonth = m == 0 ? 12 : m < 10 ? '0' + m : m
// 上个月天数
const pmd = new Date(prevYear, m, 0).getDate()
// 下个月的年份，当前12月，则需要加一年
const lastYear = cm + 1 > 12 ? currentYear + 1 : currentYear
const lastMonth = lm < 10 ? '0' + lm : lm
// 1号是周几
const firstWeek = new Date(today.setDate(1)).getDay()
// 如果是周日，则不需要显示上个月
if (firstWeek == 0) {
firstDay = `${currentYear}-${currentMonth}-01`
}
// 其他周几，对应用上个月的天数往前推算
else {
firstDay = `${prevYear}-${prevMonth}-${pmd - (firstWeek - 1)}`
}
// 这个月天数
const currentMonthDate = new Date(currentYear, cm, 0).getDate()
// 最后一天是周几
const lastWeek = new Date(today.setDate(currentMonthDate)).getDay()
// 周六显示当月最后一天
if (lastWeek == 6) {
lastDay = `${currentYear}-${currentMonth}-${currentMonthDate}`
}
// 其他周几，对应往后推算
else {
const day = ['06', '05', '04', '03', '02', '01']
lastDay = `${lastYear}-${lastMonth}-${day[lastWeek]}`
}
this.timeList.startDate = firstDay
this.timeList.endDate = lastDay
this.getPageList()
},
}3. 总的代码
- plan.vue
javascript
<template>
<div
v-loading="loading"
class="module-container"
element-loading-text="加载中...."
>
<!-- {{ timeList.startDate }}-{{ timeList.endDate }} -->
<MyCard :is-have-left="false">
<template slot="right-body">
<div class="split-head" style="margin-bottom: -40px">
<el-button
type="primary"
size="small"
style="margin-left: 20px"
@click="handlePlan()"
>
排班计划
</el-button>
</div>
<div class="split-body">
<template>
<el-calendar v-model="calendar" style="padding-bottom: 0">
<template slot="dateCell" slot-scope="{ data }">
<div class="calendar-day">
<div
:class="data.isSelected ? 'is-selected' : ''"
style="font-weight: bold"
>
{{ data.day.split("-").slice(1).join("-") }}
</div>
<div class="duty-text">
值班人员：
<span v-for="item in tableData" :key="item.id">
<span
v-if="item.dutyDate == data.day"
style="font-weight: bold"
>
{{ item.dutyUser }}
</span>
</span>
<div>
<el-button
size="mini"
type="text"
style="color: #1e80ff; margin-right: 10px"
@click.stop="handleEdit(data)"
>编辑</el-button
>
<el-button
slot="reference"
size="mini"
type="text"
style="color: #1e80ff"
@click="handleRemove(data)"
>删除</el-button
>
</div>
</div>
</div>
</template>
</el-calendar>
</template>
</div>
</template>
</MyCard>
<Edit
:scheduling-visible.sync="schedulingVisible"
:edit_visible.sync="edit_visible"
:duty-info="dutyInfo"
@getRange="getRange"
/>
</div>
</template>
<script>
import Edit from './child/edit.vue'
export default {
name: '',
components: {
Edit
},
props: {},
data () {
return {
projectId: this.$store.state.project.projectId,
structId: this.$store.state.struct.structId,
loading: false,
visible: false,
schedulingVisible: false,
calendar: new Date(),
editForm: {},
tableData: [],
timeList: {
startDate: '',
endDate: ''
},
edit_visible: false,
dutyInfo: {}
}
},
watch: {
calendar (n, o) {
if (n.getFullYear() !== o.getFullYear() || n.getMonth() !== o.getMonth()) {
this.getRange(n)
}
}
},
created () {
},
mounted () { this.getRange(this.calendar) },
beforeDestroy () { },
methods: {
// 获取日历显示时间范围
getRange (date) {
if (date) {
} else {
this.calendar = new Date()
}
// 日历第一天
let firstDay = ''
// 日历最后一天
let lastDay = ''
// 今天
const today = date || new Date()
// 上月
const m = today.getMonth()
// 本月
const cm = m + 1
// 下月
const lm = m + 2 > 12 ? 1 : m + 2
// 要显示的本月
const currentMonth = cm < 10 ? '0' + cm : cm
// 要显示的本本年
const currentYear = today.getFullYear()
// 要显示的上个月的年份，m = 0 则当前1月，上月则是去年12月
const prevYear = m == 0 ? currentYear - 1 : currentYear
const prevMonth = m == 0 ? 12 : m < 10 ? '0' + m : m
// 上个月天数
const pmd = new Date(prevYear, m, 0).getDate()
// 下个月的年份，当前12月，则需要加一年
const lastYear = cm + 1 > 12 ? currentYear + 1 : currentYear
const lastMonth = lm < 10 ? '0' + lm : lm
// 1号是周几
const firstWeek = new Date(today.setDate(1)).getDay()
// 如果是周日，则不需要显示上个月
if (firstWeek == 0) {
firstDay = `${currentYear}-${currentMonth}-01`
}
// 其他周几，对应用上个月的天数往前推算
else {
firstDay = `${prevYear}-${prevMonth}-${pmd - (firstWeek - 1)}`
}
// 这个月天数
const currentMonthDate = new Date(currentYear, cm, 0).getDate()
// 最后一天是周几
const lastWeek = new Date(today.setDate(currentMonthDate)).getDay()
// 周六显示当月最后一天
if (lastWeek == 6) {
lastDay = `${currentYear}-${currentMonth}-${currentMonthDate}`
}
// 其他周几，对应往后推算
else {
const day = ['06', '05', '04', '03', '02', '01']
lastDay = `${lastYear}-${lastMonth}-${day[lastWeek]}`
}
this.timeList.startDate = firstDay
this.timeList.endDate = lastDay
this.getPageList()
},
handlePlan () {
this.schedulingVisible = true
},
getPageList () {
this.loading = true
const url = `client/${this.projectId}/dh-duty-plan/list?startDate=${this.timeList.startDate}&endDate=${this.timeList.endDate}`
this.$axios
.get(url)
.then(res => {
if (res.code !== 200) return
this.tableData = res.data
// this.total = res.data.total / 1
})
.finally(() => {
this.loading = false
})
},
handleEdit (row) {
const url = `client/${this.projectId}/dh-duty-plan/list?dutyDate=${row.day}`
this.$axios
.get(url)
.then((res) => {
if (res.code !== 200) return
if (res.data.length) {
this.dutyInfo = res.data[0]
} else {
this.dutyInfo = {
id: '',
dutyUserId: '',
dutyDate: row.day
}
}
})
.finally(() => {
})
this.edit_visible = true
},
async handleRemove (row) {
const result = await this.$confirm(`确定要删除吗？`, {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
closeOnClickModal: false
}).catch((err) => err)
if (result === 'confirm') {
const url = `client/${this.projectId}/dh-duty-plan/list?dutyDate=${row.day}`
this.$axios
.get(url)
.then((res) => {
if (res.code !== 200) return
if (res.data.length) {
const info = res.data[0]
this.$axios.post(`client/${this.projectId}/dh-duty-plan/delete`, { id: info.id }).then(response => {
if (response.code !== 200) return
this.getPageList()
})
} else {
this.$message('该日期下未查询到值班人员')
}
})
.finally(() => {
// this.getPageList()
})
} else {
// this.$message('取消了删除')
}
},
}
}
</script>
<style lang="scss" scoped>
.module-container {
// padding-top: 15px;
padding-left: 22px;
height: 100%;
// ::v-deep .card-body {
// background: #f6f9ff !important;
// display: flex;
// padding: 0px;
// }
.split-head {
display: flex;
justify-content: center;
flex-direction: row;
}
}
.duty-text {
text-align: center;
// color: #939fb6;
font-size: large;
line-height: 25px;
padding-top: 5px;
}
.is-selected {
color: #1989fa;
font-weight: bold;
}
:deep(.el-calendar-table thead th) {
font-weight: bold;
}
</style>- 弹窗 edit.vue
js
<template>
<div class="container">
<el-dialog
:title="'排班计划'"
:visible="schedulingVisible"
width="30%"
top="20vh"
:close-on-click-modal="false"
:modal-append-to-body="false"
custom-class="alarm-strategy"
@update:visible="(bol) => $emit('update:schedulingVisible', bol)"
>
<div>
<el-button
v-show="activeName === '单人排班'"
type="text"
icon="el-icon-plus"
class="add-one-btn"
@click="handleaddNode"
>新增一条</el-button
>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="单人排班" name="单人排班">
<el-table :data="singleForm" style="width: 100%" height="250">
<el-table-column label="日期" align="center">
<template slot-scope="scope">
<el-date-picker
v-model="scope.row.dutyDate"
size="small"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期"
style="width: 70%"
/>
</template>
</el-table-column>
<el-table-column label="人员" align="center">
<template slot-scope="scope">
<el-select
v-model="scope.row.dutyUserId"
size="small"
clearable
placeholder="请选择"
style="width: 70%"
>
<el-option
v-for="item in person_options"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</template>
</el-table-column>
<el-table-column v-if="singleForm.length > 1" label="操作">
<template slot-scope="scope">
<div>
<el-button
type="text"
@click="handleremoveNode(scope.$index)"
>
移除
</el-button>
</div>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="批量排班" name="批量排班">
<div class="time-range batch-box">
<span>日期范围</span>
<el-date-picker
v-model="multiForm.time"
size="small"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
value-format="yyyy-MM-dd"
/>
</div>
<div class="personnel batch-box">
<span>人员添加</span>
<el-select
v-model="multiForm.dutyUserIdList"
size="small"
multiple
collapse-tags
clearable
placeholder="请选择"
>
<el-option
v-for="item in person_options"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</div>
</el-tab-pane>
</el-tabs>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="$emit('update:schedulingVisible', false)"
>取 消</el-button
>
<el-button type="primary" :loading="loading" @click="handleOk"
>确 定</el-button
>
</span>
</el-dialog>
<el-dialog
:title="'编辑'"
:visible="edit_visible"
width="30%"
top="20vh"
:close-on-click-modal="false"
:modal-append-to-body="false"
custom-class="alarm-strategy"
@update:visible="handleEditOk"
>
<div class="time-range batch-box">
<span>值班人</span>
<el-select
v-model="dutyInfo.dutyUserId"
size="small"
placeholder="请选择"
>
<el-option
v-for="item in person_options"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
<!-- {{ dutyInfo }} -->
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="$emit('update:edit_visible', false)"
>取 消</el-button
>
<el-button type="primary" @click="handleEditOk">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
name: '',
components: {},
props: {
schedulingVisible: {
type: Boolean,
default: false
},
edit_visible: {
type: Boolean,
default: false
},
dutyInfo: {
type: Object,
default: () => { }
}
},
data () {
return {
projectId: this.$store.state.project.projectId,
structId: this.$store.state.struct.structId,
loading: false,
activeName: '单人排班',
value: '',
person_options: [],
value1: '',
pickerOptions: {
shortcuts: [
{
text: '最近一周',
onClick (picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
picker.$emit('pick', [start, end])
}
},
{
text: '最近一个月',
onClick (picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
picker.$emit('pick', [start, end])
}
},
{
text: '最近三个月',
onClick (picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
picker.$emit('pick', [start, end])
}
}
]
},
value2: '',
singleForm: [{ dutyDate: '', dutyUserId: '' }],
multiForm: {
time: [],
dutyUserIdList: []
}
}
},
created () {
},
mounted () {
this.init()
},
beforeDestroy () { },
methods: {
handleClick (tab, event) {
if (tab.label == '单人排班') {
this.multiForm = {}
} else {
this.singleForm = [{ dutyDate: '', dutyUserId: '' }]
}
},
handleremoveNode (data) {
this.singleForm.splice(data, 1)
},
handleaddNode () {
this.singleForm.push({
dutyDate: null, // 日期
dutyUserId: null // 人员
})
},
// 提交
handleOk () {
if (this.activeName === '单人排班') {
const flag = this.singleForm.some(item =>
item.dutyDate == null || item.dutyUserId == null || item.dutyDate == undefined || item.dutyUserId == undefined || item.dutyDate == '' || item.dutyUserId == ''
)
if (!flag) {
const url = `client/${this.projectId}/dh-duty-plan/danGeAdd`
this.$axios
.post(url, { dhDutyPlanList: this.singleForm })
.then((res) => {
if (res.code === 200) {
this.$emit('getRange')
this.$emit('update:schedulingVisible', false)
}
})
.finally(() => {
this.handleClick('单人排班')
})
} else {
return this.$message.warning('请完整填写表单')
}
} else {
if (this.multiForm.time.length && this.multiForm.dutyUserIdList.length) {
const tempData = {
startDate: this.multiForm.time[0],
endDate: this.multiForm.time[1],
dutyUserIdList: this.multiForm.dutyUserIdList
}
const url = `client/${this.projectId}/dh-duty-plan/batchAdd`
this.$axios
.post(url, tempData)
.then((res) => {
if (res.code === 200) {
this.$emit('getRange')
this.$emit('update:schedulingVisible', false)
}
})
.finally(() => {
this.handleClick('单人排班')
})
} else {
return this.$message.warning('请完整填写表单')
}
}
},
getPersonList () {
const url = `client/${this.projectId}/dh-duty-user/list`
this.$axios
.get(url)
.then(res => {
if (res.code !== 200) return
this.person_options = res.data
})
.finally(() => {
})
},
handleEditOk () {
if (this.dutyInfo.dutyUserId) {
if (this.dutyInfo.id) {
const tempData = {
id: this.dutyInfo.id,
dutyUserId: this.dutyInfo.dutyUserId,
dutyDate: this.dutyInfo.dutyDate
}
const url = `client/${this.projectId}/dh-duty-plan/update`
this.$axios
.post(url, tempData)
.then((res) => {
if (res.code !== 200) return
this.$emit('getRange')
this.$emit('update:edit_visible', false)
})
.finally(() => {
})
} else {
const url = `client/${this.projectId}/dh-duty-plan/danGeAdd`
this.$axios
.post(url, { dhDutyPlanList: [{ dutyDate: this.dutyInfo.dutyDate, dutyUserId: this.dutyInfo.dutyUserId }] })
.then((res) => {
if (res.code === 200) {
this.$emit('getRange')
this.$emit('update:edit_visible', false)
}
})
.finally(() => {
})
}
} else {
return this.$message.warning('请完整填写表单')
}
},
init () {
this.getPersonList()
}
}
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
padding: 0 15px;
padding-right: 0px;
position: relative;
margin-bottom: 30px;
overflow: hidden;
}
.add-one-btn {
position: absolute;
right: 20px;
z-index: 22;
}
.single-person-box {
padding-right: 20px;
max-height: 360px;
overflow: auto;
.limit {
display: flex;
margin-bottom: 12px;
> div {
flex: 1;
margin-left: 10px;
}
.flex {
display: flex;
align-items: center;
.el-date-editor {
width: 160px;
}
.el-select {
width: 160px;
}
}
.time {
margin-right: 10px;
}
.staff {
}
span {
margin-right: 10px;
}
}
}
.batch-box {
display: flex;
align-items: center;
width: 70%;
margin-left: 10%;
margin-top: 15px;
span {
margin-right: 10px;
}
.el-select,
.el-date-editor {
flex: 1;
}
}
</style>