信件详细页面

src/api/detail.js

@@ -0,0 +1,6 @@
+import { get, post} from "@/util/request"
+
+export function getdetail(id) {
+    return post('/mailbox/detail',id)
+}
+

src/api/holiday.js

@@ -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)
+}
+

src/components/MailDetail.vue

@@ -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>

src/components/ManageMail.vue

@@ -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>

src/layout/Index.vue

@@ -1,7 +1,7 @@
 <template>
     <header class="flex v-center between">
         <div>
-            <div class="title"><a href="">局长信箱</a></div>
+            <div class="title"><a href="">局长信箱即接即办管理端</a></div>
         </div>
         <div>
             <el-button type="primary">退出</el-button>
@@ -9,31 +9,21 @@
     </header>
     <div class="flex">
         <aside>
+
             <nav>
                 <a class="flex v-center center wrap pointer" @click="router.push('/')">
                     <el-icon><HomeFilled /></el-icon>
-                    <span>首页</span>
+                    <span>信件管理</span>
                 </a>
-                <a class="flex v-center center wrap pointer" @click="router.push('/')">
+                <a class="flex v-center center wrap pointer" @click="router.push('/holiday')">
                     <el-icon><Platform /></el-icon>
-                    <span>我的大屏</span>
+                    <span>节假日管理</span>
                 </a>
                 <a class="flex v-center center wrap pointer" @click="router.push('/')">
                     <el-icon><Menu /></el-icon>
-                    <span>我的工作</span>
-                </a>
-                <a class="flex v-center center wrap pointer" @click="router.push('/')">
-                    <el-icon><HomeFilled /></el-icon>
-                    <span>来信初筛</span>
-                </a>
-                <a class="flex v-center center wrap pointer" @click="router.push('/')">
-                    <el-icon><HomeFilled /></el-icon>
-                    <span>数据分析</span>
-                </a>
-                <a class="flex v-center center wrap pointer" @click="router.push('/')">
-                    <el-icon><Setting /></el-icon>
-                    <span>系统管理</span>
+                    <span>用户管理</span>
                 </a>
+                
             </nav>
         </aside>
         <main><router-view /></main>
@@ -68,7 +58,7 @@ aside {
     background-color: #071254;
     color: #fff;
     width: 100px;
-    height: calc(100vh - var(--header-height));
+    height: calc(155vh - var(--header-height));
     nav {
         a {
             height: 100px;

src/main.js

@@ -7,8 +7,11 @@ import IconComponent from '@/components/Icon.vue'
 
 import './assets/style/style.scss'
 
+import ElementPlus from 'element-plus';
+import locale from "element-plus/es/locale/lang/zh-cn";
 createApp(App)
     .use(router)
     .use(createPinia())
+    .use(ElementPlus, {locale})
     .component('Icon', IconComponent)
     .mount('#app')

src/router/index.js

@@ -1,9 +1,8 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 
 import Home from '@/views/Home.vue'
-
+import HolidayList from '@/views/holiday/List.vue'
 import Layout from '@/layout/Index.vue'
-
 import NotFound from '@/views/error/404.vue'
 
 const constantRoutes = [
@@ -17,6 +16,10 @@ const constantRoutes = [
             {
                 path: '/',
                 component: Home
+            },
+            {
+                path: '/holiday',
+                component: HolidayList
             }
         ]
     },

src/util/request.js

@@ -6,15 +6,23 @@ export function post(url, data) {
         fetch(`${basePath}${url}`, {
             method: 'POST',
             body: data? JSON.stringify(data) : '',
-        }).then(res => {
-            return res.json();
-        }).then(res => {
-            if (res.ok()) {
-                resolve(res)
-            } else {
-                reject(res)
-            }
         })
+        // .then(res => {
+        //     return res.json();
+        // }).then(res => {
+        //     if (res.ok()) {
+        //         resolve(res)
+        //     } else {
+        //         reject(res)
+        //     }
+        // })
+        .then(res => {
+            resolve(res);
+          }).catch(e => {
+            console.error("请求失败了,详细信息:" + JSON.stringify(e));
+            reject(e);
+          })
+
     })
 }
 
@@ -22,14 +30,30 @@ export function get(url) {
     return new Promise((resolve, reject) => {
         fetch(`${basePath}${url}`, {
             method: 'GET',
-        }).then(res => {
-            return res.json();
-        }).then(res => {
-            if (res.ok()) {
-                resolve(res)
-            } else {
-                reject(res)
-            }
         })
+        .then(res => {
+            let data = res.text();//转成字符串判断
+            return data.then(r => {
+            if (r.length === 0) return null;
+            else return JSON.parse(r);
+            })
+          }) 
+        // .then(res => {
+        //     return res.json();
+        // }) 
+        // .then(res => {
+        //     if (res.ok()) {
+        //         resolve(res)
+        //     } else {
+        //         reject(res)
+        //     }
+        // })
+        .then(res => {
+            resolve(res);
+          }).catch(e => {
+            console.error("请求失败了,详细信息:" + JSON.stringify(e));
+            reject(e);
+          })
+
     })
 }

src/views/holiday/List.vue

@@ -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>

vite.config.js

@@ -45,7 +45,7 @@ export default defineConfig({
     host: '0.0.0.0',
     proxy: {
       '/api': {
-        target: 'http://127.0.0.1:8081',
+        target: 'http://127.0.0.1:8083',
         changeOrigin: true,
         rewrite: (p) => p.replace(/^\/api/, '')
       }