lcw
This commit is contained in:
496
src/views/backOfficeSystem/calendar/index.vue
Normal file
496
src/views/backOfficeSystem/calendar/index.vue
Normal file
@ -0,0 +1,496 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="titleBox">
|
||||
<PageTitle title="敏感节点"> </PageTitle>
|
||||
</div>
|
||||
<div class="tabBox contentBox">
|
||||
<div class="leftBox">
|
||||
<el-calendar ref="calendar" v-model="currentDate">
|
||||
<template #header="{ date }">
|
||||
<div style="display: flex;">
|
||||
<el-select @change="goToSelectedMonth" v-model="selectedYear" style="margin-right: 10px;">
|
||||
<el-option v-for="year in years" :key="year" :label="year + '年'" :value="year" />
|
||||
</el-select>
|
||||
<el-select @change="goToSelectedMonth" v-model="selectedMonth">
|
||||
<el-option v-for="month in months" :key="month.value" :label="month.label" :value="month.value" />
|
||||
</el-select>
|
||||
</div>
|
||||
<div style="color: #000;display: flex;align-items: center;">
|
||||
<div style="margin-right: 10px;"> {{ dateVal }}</div> <el-button
|
||||
@click="selectDate('today')">今天</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<template #dateCell="{ data }">
|
||||
<div @click="chooseDay(data)" class="dayonChage"
|
||||
:class="{ 'day': dateVal == data.day,
|
||||
'special': dataIntegration.includes(data.day)}"
|
||||
>
|
||||
<div> {{ data.day.split("-")[2] }}</div>
|
||||
<div v-for="(item, index) in getAllFestivals(data.day)" :key="index"> {{ item.name }}</div>
|
||||
<div v-if="getWorkdayType(data.day)" class="holiday-badge"
|
||||
:class="getWorkdayType(data.day) == '班' ? 'holiday-work' : 'holiday-rest'">
|
||||
{{ getWorkdayType(data.day) }}
|
||||
</div>
|
||||
<div> {{ getLunarMonthDay(data.date) }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-calendar>
|
||||
</div>
|
||||
<div class="riteBox">
|
||||
<div class="sensitive-list-header">
|
||||
<h3>敏感时间节点</h3>
|
||||
<div class="add-form">
|
||||
<el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
|
||||
<el-form-item prop="jdbt">
|
||||
<el-input v-model="ruleForm.jdbt" placeholder="请输入敏感事件名称" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="jdnr">
|
||||
<el-input v-model="ruleForm.jdnr" type="textarea" placeholder="请输入敏感事件内容" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm(ruleFormRef)">
|
||||
{{ submitZt ? '新增' : '修改' }}
|
||||
</el-button>
|
||||
<el-button @click="resetForm(ruleFormRef)">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sensitive-list">
|
||||
<div v-for="(item, index) in sensitiveNodes" :key="index" class="sensitive-item">
|
||||
<div class="sensitive-date">{{ item.date }}</div>
|
||||
<div class="sensitive-content">{{ item.jdbt }}</div>
|
||||
<el-button type="text" @click="modification(item)" size="small">修改</el-button>
|
||||
<el-button type="text" @click="deleteSensitiveNode(item.id)" size="small">删除</el-button>
|
||||
</div>
|
||||
<div v-if="sensitiveNodes.length === 0" class="empty-tip">暂无敏感时间节点</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import PageTitle from "@/components/aboutTable/PageTitle.vue";
|
||||
import { ref, computed, onMounted } from "vue";
|
||||
import { Solar, HolidayUtil } from 'lunar-javascript'
|
||||
import { timeValidate } from "@/utils/tools";
|
||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||
import { tbGsxtMgjdSave, tbGsxtMgjdSelectList, tbGsxtMgjdUpdate, tbGsxtMgjdDelete } from "@/api/tbGsxtMgjd";
|
||||
const dateVal = ref();
|
||||
const ruleFormRef = ref()
|
||||
// 获取工作日类型
|
||||
const getWorkdayType = (date) => {
|
||||
try {
|
||||
const time = new Date(date)
|
||||
const year = time.getFullYear()
|
||||
const month = time.getMonth() + 1 // JavaScript月份从0开始
|
||||
const day = time.getDate()
|
||||
|
||||
// 正确调用HolidayUtil.getHoliday方法，传入数值类型的年、月、日
|
||||
const holiday = HolidayUtil.getHoliday(year, month, day)
|
||||
|
||||
if (holiday) {
|
||||
// 如果是调休需要上班
|
||||
if (holiday.isWork()) {
|
||||
return '班'
|
||||
}
|
||||
// 如果是法定节假日放假
|
||||
return '休'
|
||||
}
|
||||
return null
|
||||
} catch (error) {
|
||||
console.error('获取节假日信息失败:', error)
|
||||
return null
|
||||
}
|
||||
}
|
||||
// 获取农历月日
|
||||
const getLunarMonthDay = (date) => {
|
||||
if (!date) return ''
|
||||
const solar = Solar.fromDate(date)
|
||||
const lunar = solar.getLunar()
|
||||
return lunar.getJieQi() ? lunar.getJieQi() : lunar.getDayInChinese()
|
||||
}
|
||||
const getAllFestivals = (date) => {
|
||||
const time = new Date(date)
|
||||
const solar = Solar.fromDate(time)
|
||||
const lunar = solar.getLunar()
|
||||
const result = []
|
||||
// 获取农历节日
|
||||
const lunarFestivals = lunar.getFestivals()
|
||||
lunarFestivals.forEach(festival => {
|
||||
result.push({
|
||||
type: '农历节日',
|
||||
name: festival,
|
||||
})
|
||||
})
|
||||
|
||||
// 获取公历节日
|
||||
const solarFestivals = solar.getFestivals()
|
||||
solarFestivals.forEach(festival => {
|
||||
result.push({
|
||||
type: '公历节日',
|
||||
name: festival,
|
||||
})
|
||||
})
|
||||
|
||||
// 获取其他纪念日
|
||||
const otherFestivals = solar.getOtherFestivals()
|
||||
otherFestivals.forEach(festival => {
|
||||
result.push({
|
||||
type: '纪念日',
|
||||
name: festival,
|
||||
})
|
||||
})
|
||||
|
||||
return result
|
||||
}
|
||||
const selectedYear = ref();
|
||||
const selectedMonth = ref('');
|
||||
const calendar = ref(null)
|
||||
// 生成年份选项（前后10年）
|
||||
const years = computed(() => {
|
||||
const currentYear = new Date().getFullYear();
|
||||
const years = [];
|
||||
for (let i = currentYear - 10; i <= currentYear + 10; i++) {
|
||||
years.push(i);
|
||||
}
|
||||
return years;
|
||||
});
|
||||
|
||||
// 月份选项
|
||||
const months = ref([
|
||||
{ label: '1月', value: 0 },
|
||||
{ label: '2月', value: 1 },
|
||||
{ label: '3月', value: 2 },
|
||||
{ label: '4月', value: 3 },
|
||||
{ label: '5月', value: 4 },
|
||||
{ label: '6月', value: 5 },
|
||||
{ label: '7月', value: 6 },
|
||||
{ label: '8月', value: 7 },
|
||||
{ label: '9月', value: 8 },
|
||||
{ label: '10月', value: 9 },
|
||||
{ label: '11月', value: 10 },
|
||||
{ label: '12月', value: 11 }
|
||||
]);
|
||||
// 切换日期
|
||||
const chooseDay = (data) => {
|
||||
dateVal.value = data.day
|
||||
ruleForm.value.jdrq = data.day
|
||||
querySensitiveNodes()
|
||||
submitZt.value = true
|
||||
ruleForm.value = {}
|
||||
ruleForm.value.jdrq = dateVal.value
|
||||
}
|
||||
const currentDate = ref(new Date());
|
||||
|
||||
// 敏感时间节点数据
|
||||
const sensitiveNodes = ref([]);
|
||||
onMounted(() => {
|
||||
initialize()
|
||||
gettingData()
|
||||
})
|
||||
|
||||
// 获取选项初始值
|
||||
const initialize = () => {
|
||||
const year = timeValidate(currentDate.value, 'yd')
|
||||
const month = timeValidate(currentDate.value, 'ym')
|
||||
dateVal.value = timeValidate(currentDate.value, 'ymd')
|
||||
selectedYear.value = parseFloat(year)
|
||||
selectedMonth.value = parseFloat(month) - 1
|
||||
ruleForm.value.jdrq = dateVal.value
|
||||
querySensitiveNodes()
|
||||
}
|
||||
const goToSelectedMonth = () => {
|
||||
if (selectedYear.value && selectedMonth.value !== '') {
|
||||
const newDate = new Date(selectedYear.value, selectedMonth.value, 1);
|
||||
currentDate.value = newDate;
|
||||
dateVal.value = timeValidate(currentDate.value, 'ymd')
|
||||
gettingData()
|
||||
}
|
||||
};
|
||||
|
||||
const ruleForm = ref({})
|
||||
const rules = {
|
||||
jdrq: [
|
||||
{ required: true, message: '请选择日期', trigger: 'blur' }
|
||||
],
|
||||
jdnr: [
|
||||
{ required: true, message: '请输入敏感事件内容', trigger: 'blur' }
|
||||
],
|
||||
jdbt: [
|
||||
{ required: true, message: '请输入敏感事件名称', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
const selectDate = (val) => {
|
||||
if (!calendar.value) return
|
||||
calendar.value.selectDate(val)
|
||||
dateVal.value = timeValidate(currentDate.value, 'ymd')
|
||||
initialize()
|
||||
gettingData()
|
||||
}
|
||||
const submitZt = ref(true)
|
||||
// 提交表单
|
||||
const submitForm = async (formEl) => {
|
||||
if (!formEl) return
|
||||
try {
|
||||
await formEl.validate()
|
||||
const promes = { ...ruleForm.value }
|
||||
console.log(promes);
|
||||
|
||||
if (submitZt.value) {
|
||||
tbGsxtMgjdSave(promes).then(() => {
|
||||
ElMessage.success('新增成功')
|
||||
querySensitiveNodes()
|
||||
// 在API调用成功后再重置表单
|
||||
resetForm(formEl)
|
||||
})
|
||||
} else {
|
||||
tbGsxtMgjdUpdate(promes).then(() => {
|
||||
ElMessage.success('修改成功')
|
||||
querySensitiveNodes()
|
||||
// 在API调用成功后再重置表单
|
||||
resetForm(formEl)
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('验证失败:', error)
|
||||
}
|
||||
}
|
||||
// 查询敏感事件
|
||||
const querySensitiveNodes = () => {
|
||||
tbGsxtMgjdSelectList({ jdrq: dateVal.value }).then((res) => {
|
||||
sensitiveNodes.value = res && res.length > 0 ? res : []
|
||||
})
|
||||
}
|
||||
// 重置表单
|
||||
const resetForm = (formEl) => {
|
||||
if (!formEl) return
|
||||
try {
|
||||
formEl.resetFields()
|
||||
} catch (error) {
|
||||
// 手动重置表单数据
|
||||
ruleForm.value = { jdrq: dateVal.value || '', jdbt: '', jdnr: '' }
|
||||
}
|
||||
// 重置提交状态为新增
|
||||
submitZt.value = true
|
||||
}
|
||||
|
||||
// 删除敏感时间节点
|
||||
const deleteSensitiveNode = (id) => {
|
||||
ElMessageBox.confirm('确定要删除这个敏感时间节点吗？', '确认删除', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
tbGsxtMgjdDelete({ ids: [id] }).then(() => {
|
||||
ElMessage.success('删除成功')
|
||||
querySensitiveNodes()
|
||||
})
|
||||
}).catch(() => {
|
||||
ElMessage.info('已取消删除')
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 修改
|
||||
const modification = (item) => {
|
||||
ruleForm.value = { ...item }
|
||||
submitZt.value = false
|
||||
}
|
||||
const dataIntegration = ref([])
|
||||
// 获取当前月份的所有信息
|
||||
const gettingData = () => {
|
||||
const date = new Date(dateVal.value);
|
||||
date.setDate(1)
|
||||
const startTime = timeValidate(date.toLocaleDateString(), 'ymd')
|
||||
date.setMonth(date.getMonth() + 1);
|
||||
date.setDate(0);
|
||||
const endTime = timeValidate(date.toLocaleDateString(), 'ymd')
|
||||
const params = { startTime, endTime }
|
||||
tbGsxtMgjdSelectList(params).then(res => {
|
||||
if (res&&res.length>0) {
|
||||
dataIntegration.value=[...new Set(res.map(item => item.jdrq))]?[...new Set(res.map(item => item.jdrq))] : []
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.contentBox {
|
||||
height: calc(100vh - 190px);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10px;
|
||||
color: #000;
|
||||
|
||||
.leftBox {
|
||||
width: calc(100% - 20px - 20%)
|
||||
}
|
||||
|
||||
.riteBox {
|
||||
width: calc(100% - 20px - 80%);
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sensitive-list-header {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.sensitive-list-header h3 {
|
||||
margin: 0 0 10px 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.add-form {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
gap: 5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.sensitive-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.sensitive-item {
|
||||
padding: 10px;
|
||||
margin-bottom: 8px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.sensitive-date {
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.sensitive-content {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
flex: 1;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.empty-tip {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// ::v-deep .el-calendar__header {
|
||||
// padding: 4px 20px !important;
|
||||
// color: #fff;
|
||||
// }
|
||||
|
||||
// ::v-deep .el-calendar__body {
|
||||
// padding: 3px 20px 35px !important;
|
||||
// }
|
||||
|
||||
::v-deep .el-calendar-table thead th {
|
||||
// padding: 4px 0 !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-calendar-table td.is-today {
|
||||
color: #35ff02;
|
||||
}
|
||||
|
||||
::v-deep .el-calendar-table thead th {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
::v-deep .el-calendar {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-calendar-day {
|
||||
background-color: #fff;
|
||||
text-align: center !important;
|
||||
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
::v-deep .el-calendar-table:not(.is-range) td.prev {
|
||||
color: #bbbbbb8f !important;
|
||||
}
|
||||
|
||||
::v-deep .el-calendar-table:not(.is-range) td.next,
|
||||
.el-calendar-table:not(.is-range) td.prev {
|
||||
color: #bbbbbb8f !important;
|
||||
}
|
||||
|
||||
::v-deep .el-calendar-table td {
|
||||
color: #000 !important;
|
||||
}
|
||||
.dayonChage.special.day {
|
||||
background-color: #e6a23c;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.day {
|
||||
background-color: rgb(76, 134, 243);
|
||||
color: #35ff02;
|
||||
}
|
||||
.special{
|
||||
background-color: rgba(253, 112, 112, 0.856);
|
||||
color: #ffffff;
|
||||
}
|
||||
// 敏感日期样式
|
||||
.sensitive-day {
|
||||
background-color: rgba(255, 214, 0, 0.3);
|
||||
border: 1px solid #ffd600;
|
||||
}
|
||||
|
||||
.dayonChage {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
/* 水平居中 */
|
||||
justify-content: center;
|
||||
/* 垂直居中 */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 节假日徽章样式 */
|
||||
.holiday-badge {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
}
|
||||
|
||||
/* 调休上班样式 - 红底白字 */
|
||||
.holiday-work {
|
||||
|
||||
background-color: red;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* 法定节假日样式 - 绿底白字 */
|
||||
.holiday-rest {
|
||||
background-color: green;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user