Compare commits
2 Commits
| Author | SHA1 | Date |
|---|---|---|
laishajiang
|
2368c5b436 | 2 years ago |
|
laishajiang
|
ba8c9b1abb | 2 years ago |
10 changed files with 853 additions and 37 deletions
@ -0,0 +1,6 @@ |
|||||||
|
import { get, post} from "@/util/request" |
||||||
|
|
||||||
|
export function getdetail(id) { |
||||||
|
return post('/mailbox/detail',id) |
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,13 @@ |
|||||||
|
import { get, post} from "@/util/request" |
||||||
|
export function getholiday(search) { |
||||||
|
return get('/outer/holiday/getholiday?search='+search) |
||||||
|
} |
||||||
|
|
||||||
|
export function showholiday() { |
||||||
|
return get('/outer/holiday/showholiday') |
||||||
|
} |
||||||
|
|
||||||
|
export function saveholiday(search) { |
||||||
|
return post('/outer/holiday/saveholiday',search) |
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,111 @@ |
|||||||
|
<template> |
||||||
|
<div class="detail-list" > |
||||||
|
<label style="width: 100px; font-size: 30px; ">信件详情</label> |
||||||
|
<el-button @click="back()" style="margin-left:1500px; width: 100px; font-size: 16px; border: solid;">返回</el-button> |
||||||
|
|
||||||
|
<el-form ref="form" :model="form" label-width="120px" style="margin-top: 50px;"> |
||||||
|
<el-form-item label="案件编号"> |
||||||
|
<el-col :span="12" > |
||||||
|
<el-input v-model="form.id" style="border: groove; font-size: 16px;" type="text" readonly="readonly"></el-input> |
||||||
|
</el-col> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="姓名"> |
||||||
|
<el-col :span="12"> |
||||||
|
<el-input v-model="form.contactName" style="border: groove; font-size: 16px; " type="text" readonly="readonly"></el-input> |
||||||
|
</el-col> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="手机号" > |
||||||
|
<el-col :span="12"> |
||||||
|
<el-input v-model="form.contactPhone" style="border: groove; font-size: 16px;" type="text" readonly="readonly"></el-input> |
||||||
|
</el-col> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="身份证号码" > |
||||||
|
<el-col :span="12"> |
||||||
|
<el-input v-model="form.contactIdCard" style="border: groove; font-size: 16px;" type="text" readonly="readonly"></el-input> |
||||||
|
</el-col> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="信件内容"> |
||||||
|
<el-col :span="12"> |
||||||
|
<el-input type="textarea" :rows="12" v-model="form.content" style="border: groove; font-size: 16px;" readonly="readonly"></el-input> |
||||||
|
</el-col> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="评价"> |
||||||
|
<el-col :span="12"> |
||||||
|
<el-input v-model="form.satisfaction" style="border: groove; font-size: 16px;" type="text" readonly="readonly"></el-input> |
||||||
|
</el-col> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
</el-form> |
||||||
|
|
||||||
|
<!-- <h1>{{ mailID }}</h1> --> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<!-- <script setup> |
||||||
|
import { onMounted } from 'vue'; |
||||||
|
import router from '../router'; |
||||||
|
import axios from 'axios'; |
||||||
|
const mailID = router.currentRoute.value.params.id; |
||||||
|
|
||||||
|
onMounted(() => { |
||||||
|
console.log(mailID); |
||||||
|
axios.post('/api/mailbox/detail', { id: mailID }).then(res => { |
||||||
|
console.log(res.data); |
||||||
|
}).catch(err => { |
||||||
|
console.log(err); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
</script> --> |
||||||
|
<script> |
||||||
|
import router from '../router'; |
||||||
|
import { getdetail } from '@/api/detail' |
||||||
|
import axios from 'axios'; |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
mailID:router.currentRoute.value.params.id, |
||||||
|
form: { |
||||||
|
id: '', |
||||||
|
date: '', |
||||||
|
contactName: '', |
||||||
|
contactPhone: '', |
||||||
|
contactIdCard: '', |
||||||
|
content: '', |
||||||
|
satisfaction: '', |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted(){ |
||||||
|
axios.post('/api/mailbox/detail', { id: this.mailID }).then(res => { |
||||||
|
this.form = res.data |
||||||
|
if(res.data.satisfaction == "SATISFIED"){ |
||||||
|
this.form.satisfaction = "满意" |
||||||
|
}else if(res.data.satisfaction == "NOT_SATISFIED"){ |
||||||
|
this.form.satisfaction = "不满意" |
||||||
|
}else if(res.data.satisfaction == "BASICALLY_SATISFIED"){ |
||||||
|
this.form.satisfaction = "基本满意" |
||||||
|
}else{ |
||||||
|
this.form.satisfaction = "暂无评价" |
||||||
|
} |
||||||
|
}).catch(err => { |
||||||
|
console.log(err); |
||||||
|
}); |
||||||
|
|
||||||
|
}, |
||||||
|
methods: { |
||||||
|
back() { |
||||||
|
router.push('/mailbox') |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style> |
||||||
|
.detail-list .el-form-item__label{ |
||||||
|
margin-left:20px ; |
||||||
|
width: 200px; |
||||||
|
} |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,204 @@ |
|||||||
|
<template> |
||||||
|
<el-form :model="form" label-width="100px" :inline="true"> |
||||||
|
<el-form-item label="来信时间"> |
||||||
|
<el-date-picker v-model="form.date" type="daterange" range-separator="至" start-placeholder="开始日期" |
||||||
|
end-placeholder="结束日期" value-format="YYYY-MM-DD"></el-date-picker> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="群众姓名"> |
||||||
|
<el-input v-model="form.contactName"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="群众手机号"> |
||||||
|
<el-input v-model="form.contactPhone"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="群众身份证号"> |
||||||
|
<el-input v-model="form.contactIdCard"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="案件编号"> |
||||||
|
<el-input v-model="form.id"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="信件内容"> |
||||||
|
<el-input v-model="form.content"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="评价结果"> |
||||||
|
<el-input v-model="form.evaluate"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item> |
||||||
|
<el-button type="primary" @click="search">搜索</el-button> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item> |
||||||
|
<el-button type="default" @click="reset">重置</el-button> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
|
||||||
|
<el-button type="primary" @click="out">导出信件</el-button> |
||||||
|
<el-table :data="tableData" border height="680px" table-layout="fixed" |
||||||
|
:header-cell-style="{ 'background-color': '#EBEEFC', 'color': '#1D2C86' }"> |
||||||
|
<el-table-column fixed="left" prop="id" label="案件编号" width="flexColumnWidth(label,prop)"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="createTime" label="来信日期" width="flexColumnWidth(label,prop)"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="contactName" label="联系人姓名" width="flexColumnWidth(label,prop)"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="contactIdCard" label="联系人身份证号码" width="flexColumnWidth(label,prop)"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="contactPhone" label="联系人手机号码" width="flexColumnWidth(label,prop)"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="content" label="信件内容" width="flexColumnWidth(label,prop)"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="evaluate" label="评价结果" width="flexColumnWidth(label,prop)"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column fixed="right" label="详情" width="100"> |
||||||
|
<template v-slot="scope"> |
||||||
|
<el-button @click="handleDetail(scope.$index + 1)">详情</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<el-pagination background @size-change="handleSizeChange" @current-change="handlePageChange" |
||||||
|
:current-page="pageData.currentPage" :page-sizes="[2, 4, 6, 8, 10]" :page-size="pageData.pageSize" |
||||||
|
layout="total,sizes, prev, pager, next, jumper" :total="pageData.totalSize"> |
||||||
|
</el-pagination> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup> |
||||||
|
import { ref } from 'vue' |
||||||
|
import axios from 'axios' |
||||||
|
import { onMounted, onUpdated } from 'vue'; |
||||||
|
import router from '../router'; |
||||||
|
|
||||||
|
const form = ref({ |
||||||
|
date: '', |
||||||
|
contactName: '', |
||||||
|
contactPhone: '', |
||||||
|
contactIdCard: '', |
||||||
|
id: '', |
||||||
|
content: '', |
||||||
|
evaluate: '' |
||||||
|
}) |
||||||
|
|
||||||
|
// 定义可变的tableData变量，并用axios请求数据 |
||||||
|
const tableData = ref([]) |
||||||
|
|
||||||
|
const pageData = ref({ |
||||||
|
currentPage: 1, |
||||||
|
pageSize: 2, |
||||||
|
totalSize: 0 |
||||||
|
}) |
||||||
|
|
||||||
|
|
||||||
|
onMounted(() => { |
||||||
|
const data = JSON.stringify(pageData.value) |
||||||
|
console.log(data) |
||||||
|
axios.post('api/mailbox/list', data, { headers: { 'Content-Type': 'application/json' } }) |
||||||
|
.then(function (response) { |
||||||
|
console.log(response); |
||||||
|
tableData.value = response.data.mails; |
||||||
|
pageData.value.totalSize = response.data.pageSet.totalSize; |
||||||
|
}) |
||||||
|
.catch(function (error) { console.log(error) }) |
||||||
|
}) |
||||||
|
|
||||||
|
onUpdated(() => { |
||||||
|
console.log('updated') |
||||||
|
}) |
||||||
|
|
||||||
|
const flexColumnWidth = (label, prop) => { |
||||||
|
const width = Math.max(label.length * 12, 120) |
||||||
|
return `${width}px` |
||||||
|
} |
||||||
|
|
||||||
|
const handleDetail = (index) => { |
||||||
|
console.log(index) |
||||||
|
console.log(tableData.value[index - 1].id) |
||||||
|
router.push('/mailbox/detail/' + tableData.value[index - 1].id) |
||||||
|
} |
||||||
|
|
||||||
|
const handleSizeChange = (size) => { |
||||||
|
const requestData = { |
||||||
|
formData: form.value, |
||||||
|
pageData: pageData.value |
||||||
|
} |
||||||
|
pageData.value.pageSize = size |
||||||
|
const data = JSON.stringify(requestData) |
||||||
|
console.log(data) |
||||||
|
axios.post('api/mailbox/list-submit', data, { headers: { 'Content-Type': 'application/json' } }) |
||||||
|
.then(function (response) { |
||||||
|
tableData.value = response.data.mails; |
||||||
|
pageData.value.totalSize = response.data.pageSet.totalSize; |
||||||
|
}) |
||||||
|
.catch(function (error) { console.log(error) }) |
||||||
|
} |
||||||
|
|
||||||
|
const handlePageChange = (currentPage) => { |
||||||
|
const requestData = { |
||||||
|
formData: form.value, |
||||||
|
pageData: pageData.value |
||||||
|
} |
||||||
|
pageData.value.currentPage = currentPage |
||||||
|
const data = JSON.stringify(requestData) |
||||||
|
console.log(data) |
||||||
|
axios.post('api/mailbox/list-submit', data, { headers: { 'Content-Type': 'application/json' } }) |
||||||
|
.then(function (response) { |
||||||
|
tableData.value = response.data.mails; |
||||||
|
pageData.value.totalSize = response.data.pageSet.totalSize; |
||||||
|
}) |
||||||
|
.catch(function (error) { console.log(error) }) |
||||||
|
} |
||||||
|
|
||||||
|
const search = () => { |
||||||
|
const requestData = { |
||||||
|
formData: form.value, |
||||||
|
pageData: pageData.value |
||||||
|
} |
||||||
|
const data = JSON.stringify(requestData) |
||||||
|
console.log(data) |
||||||
|
axios.post('api/mailbox/list-submit', data, { headers: { 'Content-Type': 'application/json' } }) |
||||||
|
.then(function (response) { |
||||||
|
tableData.value = response.data.mails; |
||||||
|
pageData.value.totalSize = response.data.pageSet.totalSize; |
||||||
|
}) |
||||||
|
.catch(function (error) { console.log(error) }) |
||||||
|
} |
||||||
|
|
||||||
|
const reset = () => { |
||||||
|
form.value = { |
||||||
|
date: '', |
||||||
|
name: '', |
||||||
|
phone: '', |
||||||
|
id_card: '', |
||||||
|
mail_id: '', |
||||||
|
mail_context: '', |
||||||
|
mail_appraise: '' |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const out = () => { |
||||||
|
const requestData = { |
||||||
|
formData: form.value, |
||||||
|
pageData: pageData.value |
||||||
|
} |
||||||
|
const data = JSON.stringify(requestData) |
||||||
|
console.log(data) |
||||||
|
axios.post('api/mailbox/exportexcel', data, { headers: { 'Content-Type': 'application/json'},responseType: 'blob' }).then(function (res) { |
||||||
|
var blob = new Blob([res.data], { type: 'application/octet-stream;charset=UTF-8'}) |
||||||
|
var contentDisposition = res.headers['content-disposition'] |
||||||
|
var patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*') |
||||||
|
var result = patt.exec(contentDisposition) |
||||||
|
var filename = result[1] |
||||||
|
var downloadElement = document.createElement('a') |
||||||
|
var href = window.URL.createObjectURL(blob) // 创建下载的链接 |
||||||
|
var reg = /^["](.*)["]$/g |
||||||
|
downloadElement.style.display = 'none' |
||||||
|
downloadElement.href = href |
||||||
|
downloadElement.download = decodeURI(filename.replace(reg, '$1')) // 下载后文件名 |
||||||
|
document.body.appendChild(downloadElement) |
||||||
|
downloadElement.click() // 点击下载 |
||||||
|
document.body.removeChild(downloadElement) // 下载完成移除元素 |
||||||
|
window.URL.revokeObjectURL(href) |
||||||
|
}) |
||||||
|
|
||||||
|
.catch(function (error) { console.log(error) }) |
||||||
|
} |
||||||
|
|
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped></style> |
||||||
@ -0,0 +1,462 @@ |
|||||||
|
<template> |
||||||
|
<div class="main" |
||||||
|
style="height:1360px;" |
||||||
|
v-loading="loading" |
||||||
|
element-loading-text="正在同步数据，请稍候..." |
||||||
|
element-loading-spinner="el-icon-loading" |
||||||
|
element-loading-background="rgba(0, 0, 0, 0.5)" |
||||||
|
> |
||||||
|
<el-col :span="8" class="el-col"> |
||||||
|
<el-select v-model="search" placeholder="请选择年份"> |
||||||
|
<el-option |
||||||
|
v-for="item in options" |
||||||
|
:key="item.search" |
||||||
|
:label="item.label" |
||||||
|
:value="item.search"> |
||||||
|
</el-option> |
||||||
|
</el-select> |
||||||
|
</el-col> |
||||||
|
<el-button type="text" @click="SearchHoliday(search)"> |
||||||
|
<i></i>查询节假日 |
||||||
|
</el-button> |
||||||
|
<el-button type="text" @click="Save(search)" style="margin-left: 200px;"> |
||||||
|
<i></i>同步节假日 |
||||||
|
</el-button> |
||||||
|
<br/> |
||||||
|
<span id="tip"></span> |
||||||
|
<div class="calendar_1"> |
||||||
|
<el-calendar ref="cal_1" v-model="change1"> |
||||||
|
<template #dateCell="{date, data}"> |
||||||
|
{{ data.day.split('-').slice(2).join('-') }} |
||||||
|
<div style="width:100%;" v-for="item in scheduleData1" :key="item"> |
||||||
|
<el-tag type="danger" v-if="(item.workingday).indexOf(data.day.split('-').slice(2).join('-'))!=-1"> |
||||||
|
{{item.content}} |
||||||
|
</el-tag> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-calendar> |
||||||
|
</div> |
||||||
|
<div class="calendar_2"> |
||||||
|
<el-calendar v-model="change2"> |
||||||
|
<template #dateCell="{date, data}"> |
||||||
|
{{ data.day.split('-').slice(2).join('-') }} |
||||||
|
<div style="width:100%;" v-for="item in scheduleData2" :key="item"> |
||||||
|
<el-tag type="danger" v-if="(item.workingday).indexOf(data.day.split('-').slice(2).join('-'))!=-1"> |
||||||
|
{{item.content}} |
||||||
|
</el-tag> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-calendar> |
||||||
|
</div> |
||||||
|
<div class="calendar_3"> |
||||||
|
<el-calendar v-model="change3"> |
||||||
|
<template #dateCell="{date, data}"> |
||||||
|
{{ data.day.split('-').slice(2).join('-') }} |
||||||
|
<div style="width:100%;" v-for="item in scheduleData3" :key="item"> |
||||||
|
<el-tag type="danger" v-if="(item.workingday).indexOf(data.day.split('-').slice(2).join('-'))!=-1"> |
||||||
|
{{item.content}} |
||||||
|
</el-tag> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-calendar> |
||||||
|
</div> |
||||||
|
<div class="calendar_4"> |
||||||
|
<el-calendar v-model="change4"> |
||||||
|
<template #dateCell="{date, data}"> |
||||||
|
{{ data.day.split('-').slice(2).join('-') }} |
||||||
|
<div style="width:100%;" v-for="item in scheduleData4" :key="item"> |
||||||
|
<el-tag type="danger" v-if="(item.workingday).indexOf(data.day.split('-').slice(2).join('-'))!=-1"> |
||||||
|
{{item.content}} |
||||||
|
</el-tag> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-calendar> |
||||||
|
</div> |
||||||
|
<div class="calendar_5"> |
||||||
|
<el-calendar v-model="change5"> |
||||||
|
<template #dateCell="{date, data}"> |
||||||
|
{{ data.day.split('-').slice(2).join('-') }} |
||||||
|
<div style="width:100%;" v-for="item in scheduleData5" :key="item"> |
||||||
|
<el-tag type="danger" v-if="(item.workingday).indexOf(data.day.split('-').slice(2).join('-'))!=-1"> |
||||||
|
{{item.content}} |
||||||
|
</el-tag> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-calendar> |
||||||
|
</div> |
||||||
|
<div class="calendar_6"> |
||||||
|
<el-calendar v-model="change6"> |
||||||
|
<template #dateCell="{date, data}"> |
||||||
|
{{ data.day.split('-').slice(2).join('-') }} |
||||||
|
<div style="width:100%;" v-for="item in scheduleData6" :key="item"> |
||||||
|
<el-tag type="danger" v-if="(item.workingday).indexOf(data.day.split('-').slice(2).join('-'))!=-1"> |
||||||
|
{{item.content}} |
||||||
|
</el-tag> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-calendar> |
||||||
|
</div> |
||||||
|
<div class="calendar_7"> |
||||||
|
<el-calendar v-model="change7"> |
||||||
|
<template #dateCell="{date, data}"> |
||||||
|
{{ data.day.split('-').slice(2).join('-') }} |
||||||
|
<div style="width:100%;" v-for="item in scheduleData7" :key="item"> |
||||||
|
<el-tag type="danger" v-if="(item.workingday).indexOf(data.day.split('-').slice(2).join('-'))!=-1"> |
||||||
|
{{item.content}} |
||||||
|
</el-tag> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-calendar> |
||||||
|
</div> |
||||||
|
<div class="calendar_8"> |
||||||
|
<el-calendar v-model="change8"> |
||||||
|
<template #dateCell="{date, data}"> |
||||||
|
{{ data.day.split('-').slice(2).join('-') }} |
||||||
|
<div style="width:100%;" v-for="item in scheduleData8" :key="item"> |
||||||
|
<el-tag type="danger" v-if="(item.workingday).indexOf(data.day.split('-').slice(2).join('-'))!=-1"> |
||||||
|
{{item.content}} |
||||||
|
</el-tag> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-calendar> |
||||||
|
</div> |
||||||
|
<div class="calendar_9"> |
||||||
|
<el-calendar v-model="change9"> |
||||||
|
<template #dateCell="{date, data}"> |
||||||
|
{{ data.day.split('-').slice(2).join('-') }} |
||||||
|
<div style="width:100%;" v-for="item in scheduleData9" :key="item"> |
||||||
|
<el-tag type="danger" v-if="(item.workingday).indexOf(data.day.split('-').slice(2).join('-'))!=-1"> |
||||||
|
{{item.content}} |
||||||
|
</el-tag> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-calendar> |
||||||
|
</div> |
||||||
|
<div class="calendar_10"> |
||||||
|
<el-calendar v-model="change10"> |
||||||
|
<template #dateCell="{date, data}"> |
||||||
|
{{ data.day.split('-').slice(2).join('-') }} |
||||||
|
<div style="width:100%;" v-for="item in scheduleData10" :key="item"> |
||||||
|
<el-tag type="danger" v-if="(item.workingday).indexOf(data.day.split('-').slice(2).join('-'))!=-1"> |
||||||
|
{{item.content}} |
||||||
|
</el-tag> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-calendar> |
||||||
|
</div> |
||||||
|
<div class="calendar_11"> |
||||||
|
<el-calendar v-model="change11"> |
||||||
|
<template #dateCell="{date, data}"> |
||||||
|
{{ data.day.split('-').slice(2).join('-') }} |
||||||
|
<div style="width:100%;" v-for="item in scheduleData11" :key="item"> |
||||||
|
<el-tag type="danger" v-if="(item.workingday).indexOf(data.day.split('-').slice(2).join('-'))!=-1"> |
||||||
|
{{item.content}} |
||||||
|
</el-tag> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-calendar> |
||||||
|
</div> |
||||||
|
<div class="calendar_12"> |
||||||
|
<el-calendar v-model="change12"> |
||||||
|
<template #dateCell="{date, data}"> |
||||||
|
{{ data.day.split('-').slice(2).join('-') }} |
||||||
|
<div style="width:100%;" v-for="item in scheduleData12" :key="item"> |
||||||
|
<el-tag type="danger" v-if="(item.workingday).indexOf(data.day.split('-').slice(2).join('-'))!=-1"> |
||||||
|
{{item.content}} |
||||||
|
</el-tag> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-calendar> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
// import {getholiday} from "@/api/holiday" |
||||||
|
import { getholiday } from '@/api/holiday' |
||||||
|
import { showholiday } from '@/api/holiday' |
||||||
|
import { timePanelSharedProps } from 'element-plus/es/components/time-picker/src/props/shared' |
||||||
|
import { saveholiday } from '@/api/holiday' |
||||||
|
|
||||||
|
|
||||||
|
export default { |
||||||
|
|
||||||
|
data() { |
||||||
|
return { |
||||||
|
loading:false, |
||||||
|
options: [{ |
||||||
|
search: new Date().getFullYear(), |
||||||
|
label: new Date().getFullYear(), |
||||||
|
}, { |
||||||
|
search: new Date().getFullYear()+1, |
||||||
|
label: new Date().getFullYear()+1 |
||||||
|
}, { |
||||||
|
search: new Date().getFullYear()+2, |
||||||
|
label: new Date().getFullYear()+2 |
||||||
|
}, { |
||||||
|
search: new Date().getFullYear()+3, |
||||||
|
label: new Date().getFullYear()+3 |
||||||
|
},], |
||||||
|
|
||||||
|
|
||||||
|
scheduleData1: [], |
||||||
|
scheduleData2: [], |
||||||
|
scheduleData3: [], |
||||||
|
scheduleData4: [], |
||||||
|
scheduleData5: [], |
||||||
|
scheduleData6: [], |
||||||
|
scheduleData7: [], |
||||||
|
scheduleData8: [], |
||||||
|
scheduleData9: [], |
||||||
|
scheduleData10: [], |
||||||
|
scheduleData11: [], |
||||||
|
scheduleData12: [], |
||||||
|
search:new Date().getFullYear(), |
||||||
|
change1:new Date(new Date().getFullYear()+'-1'), |
||||||
|
change2:new Date(new Date().getFullYear()+'-2'), |
||||||
|
change3:new Date(new Date().getFullYear()+'-3'), |
||||||
|
change4:new Date(new Date().getFullYear()+'-4'), |
||||||
|
change5:new Date(new Date().getFullYear()+'-5'), |
||||||
|
change6:new Date(new Date().getFullYear()+'-6'), |
||||||
|
change7:new Date(new Date().getFullYear()+'-7'), |
||||||
|
change8:new Date(new Date().getFullYear()+'-8'), |
||||||
|
change9:new Date(new Date().getFullYear()+'-9'), |
||||||
|
change10:new Date(new Date().getFullYear()+'-10'), |
||||||
|
change11:new Date(new Date().getFullYear()+'-11'), |
||||||
|
change12:new Date(new Date().getFullYear()+'-12'), |
||||||
|
|
||||||
|
} |
||||||
|
}, |
||||||
|
mounted(){ |
||||||
|
|
||||||
|
getholiday(new Date().getFullYear()).then(res => { |
||||||
|
console.log(res.data.mouth01); |
||||||
|
this.scheduleData1=res.data.mouth01; |
||||||
|
this.scheduleData2=res.data.mouth02; |
||||||
|
this.scheduleData3=res.data.mouth03; |
||||||
|
this.scheduleData4=res.data.mouth04; |
||||||
|
this.scheduleData5=res.data.mouth05; |
||||||
|
this.scheduleData6=res.data.mouth06; |
||||||
|
this.scheduleData7=res.data.mouth07; |
||||||
|
this.scheduleData8=res.data.mouth08; |
||||||
|
this.scheduleData9=res.data.mouth09; |
||||||
|
this.scheduleData10=res.data.mouth10; |
||||||
|
this.scheduleData11=res.data.mouth11; |
||||||
|
this.scheduleData12=res.data.mouth12; |
||||||
|
}) |
||||||
|
|
||||||
|
}, |
||||||
|
methods: { |
||||||
|
SearchHoliday(search) { |
||||||
|
this.scheduleData1= [],this.scheduleData2=[],this.scheduleData3=[],this.scheduleData4=[],this.scheduleData5=[],this.scheduleData6=[], |
||||||
|
this.scheduleData7=[],this.scheduleData8=[],this.scheduleData9=[],this.scheduleData10=[],this.scheduleData11=[],this.scheduleData12=[]; |
||||||
|
if(search == ""){ |
||||||
|
search=new Date().getFullYear(); |
||||||
|
}else if(search!=new Date().getFullYear()){ |
||||||
|
this.ShowBaseHoliday(search); |
||||||
|
console.log("年份"+search) |
||||||
|
alert("暂无该年份节假日数据"); |
||||||
|
// tip.value="暂无该年份节假日数据"; |
||||||
|
|
||||||
|
return; |
||||||
|
} |
||||||
|
this.ShowBaseHoliday(search); |
||||||
|
this.getHolidayList(search); |
||||||
|
}, |
||||||
|
getHolidayList(search) { |
||||||
|
getholiday(search).then(res => { |
||||||
|
|
||||||
|
this.scheduleData1=res.data.mouth01; |
||||||
|
this.scheduleData2=res.data.mouth02; |
||||||
|
this.scheduleData3=res.data.mouth03; |
||||||
|
this.scheduleData4=res.data.mouth04; |
||||||
|
this.scheduleData5=res.data.mouth05; |
||||||
|
this.scheduleData6=res.data.mouth06; |
||||||
|
this.scheduleData7=res.data.mouth07; |
||||||
|
this.scheduleData8=res.data.mouth08; |
||||||
|
this.scheduleData9=res.data.mouth09; |
||||||
|
this.scheduleData10=res.data.mouth10; |
||||||
|
this.scheduleData11=res.data.mouth11; |
||||||
|
this.scheduleData12=res.data.mouth12; |
||||||
|
}) |
||||||
|
}, |
||||||
|
ShowBaseHoliday(search){ |
||||||
|
this.change1 = new Date(search+'-1') |
||||||
|
this.change2 = new Date(search+'-2') |
||||||
|
this.change3 = new Date(search+'-3') |
||||||
|
this.change4 = new Date(search+'-4') |
||||||
|
this.change5 = new Date(search+'-5') |
||||||
|
this.change6 = new Date(search+'-6') |
||||||
|
this.change7 = new Date(search+'-7') |
||||||
|
this.change8 = new Date(search+'-8') |
||||||
|
this.change9 = new Date(search+'-9') |
||||||
|
this.change10 = new Date(search+'-10') |
||||||
|
this.change11 = new Date(search+'-11') |
||||||
|
this.change12 = new Date(search+'-12') |
||||||
|
}, |
||||||
|
Save(search){ |
||||||
|
if(search!=new Date().getFullYear()){ |
||||||
|
this.ShowBaseHoliday(search); |
||||||
|
console.log("年份"+search) |
||||||
|
alert("暂无该年份节假日数据"); |
||||||
|
return; |
||||||
|
} |
||||||
|
// if(confirm('此操作将同步节假日数据, 是否继续?')){ |
||||||
|
// this.loading=true, |
||||||
|
// saveholiday(search).then(res => { |
||||||
|
// this.loading=false, |
||||||
|
// alert("同步成功"); |
||||||
|
// }) |
||||||
|
// }else{ |
||||||
|
// alert("操作取消"); |
||||||
|
// } |
||||||
|
this.$confirm('此操作将同步节假日数据, 是否继续?', '提示', { |
||||||
|
confirmButtonText: '确定', |
||||||
|
cancelButtonText: '取消', |
||||||
|
type: 'warning', |
||||||
|
center: true |
||||||
|
}).then(() => { |
||||||
|
this.loading=true, |
||||||
|
saveholiday(search).then(res => { |
||||||
|
this.loading=false, |
||||||
|
alert("同步成功"); |
||||||
|
this.ShowBaseHoliday(search); |
||||||
|
this.getHolidayList(search); |
||||||
|
}) |
||||||
|
|
||||||
|
// this.$message({ |
||||||
|
// type: 'success', |
||||||
|
// message: '删除成功!' |
||||||
|
// }); |
||||||
|
}).catch(() => { |
||||||
|
this.$message({ |
||||||
|
// type: 'info', |
||||||
|
// message: '已取消删除' |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
}, |
||||||
|
|
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style> |
||||||
|
.demo-table-expand { |
||||||
|
font-size: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.demo-table-expand label { |
||||||
|
width: 90px; |
||||||
|
color: #99a9bf; |
||||||
|
} |
||||||
|
|
||||||
|
.demo-table-expand .el-form-item { |
||||||
|
margin-right: 0; |
||||||
|
margin-bottom: 0; |
||||||
|
width: 50%; |
||||||
|
} |
||||||
|
.el-calendar__button-group{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.el-calendar__header{ |
||||||
|
margin-bottom: 2px; |
||||||
|
padding: 1px; |
||||||
|
} |
||||||
|
.el-calendar-table{ |
||||||
|
|
||||||
|
width: 400px; |
||||||
|
height: 100px; |
||||||
|
} |
||||||
|
.el-calendar{ |
||||||
|
|
||||||
|
width: 300px; |
||||||
|
height: 300px; |
||||||
|
} |
||||||
|
.el-calendar__body{ |
||||||
|
margin-top: 2px; |
||||||
|
padding-top: 5px; |
||||||
|
padding-left: 0px; |
||||||
|
} |
||||||
|
.calendar_1,.calendar_2,.calendar_3,.calendar_4,.calendar_5,.calendar_6,.calendar_7,.calendar_8,.calendar_9,.calendar_10,.calendar_11,.calendar_12{ |
||||||
|
display: inline-block; |
||||||
|
height: 400px; |
||||||
|
width: 400px; |
||||||
|
margin-right: 20px; |
||||||
|
margin-bottom: 20px; |
||||||
|
margin-left: 10px; |
||||||
|
margin-top: 10px; |
||||||
|
border-style:solid solid solid solid; |
||||||
|
pointer-events: none; |
||||||
|
} |
||||||
|
|
||||||
|
.input{ |
||||||
|
border:2px, black,solid; |
||||||
|
height: 30px; |
||||||
|
width:600px; |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
|
.el-button{ |
||||||
|
font-size: 20px; |
||||||
|
margin-left: 200px; |
||||||
|
} |
||||||
|
.el-calendar-table .el-calendar-day{ |
||||||
|
height: 50px; |
||||||
|
width: 50px; |
||||||
|
padding-left: 20px; |
||||||
|
margin-bottom: 6px; |
||||||
|
} |
||||||
|
.el-calendar-table thead th{ |
||||||
|
margin-top: 1px; |
||||||
|
padding-bottom: 2px; |
||||||
|
} |
||||||
|
.el-calendar__title{ |
||||||
|
margin-left: 30px; |
||||||
|
} |
||||||
|
.el-col{ |
||||||
|
width: 300px; |
||||||
|
height: 0px; |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
|
.el-tag{ |
||||||
|
width: 20px; |
||||||
|
height: 20px; |
||||||
|
padding-left: 2px; |
||||||
|
} |
||||||
|
.prev{ |
||||||
|
visibility: hidden; |
||||||
|
} |
||||||
|
.next{ |
||||||
|
visibility: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.el-message-box{ |
||||||
|
position: relative; |
||||||
|
left: 550px; |
||||||
|
bottom: 1300px; |
||||||
|
background: #00a7d0; |
||||||
|
width: 550px; |
||||||
|
} |
||||||
|
.el-message-box__headerbtn{ |
||||||
|
position: relative; |
||||||
|
left: 520px; |
||||||
|
bottom: 10px; |
||||||
|
} |
||||||
|
.main .el-loading-text{ |
||||||
|
font-size: 50px; |
||||||
|
position: relative; |
||||||
|
top: 0px; |
||||||
|
} |
||||||
|
.el-loading-spinner{ |
||||||
|
position: relative; |
||||||
|
top: 100px; |
||||||
|
margin-top:0px; |
||||||
|
} |
||||||
|
.main .circular{ |
||||||
|
color: #00a7d0; |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue