|
@@ -1,542 +1,10 @@
|
|
|
<template >
|
|
|
- <div id="" style=" background: #f2f2f2;height:100%; position: absolute;width: 100%; ">
|
|
|
- <el-row :gutter="20" style="margin-bottom: 20px;">
|
|
|
- <el-col :span="16" style="border-radius: 4px;">
|
|
|
- <div style="height: 310px; background: #fff;margin: 11px 79px 0px 21px;border-radius: 10px;">
|
|
|
- <div style=" line-height:30px; margin: 0px 0px 0px 15px; ">
|
|
|
- <div style="float: left;margin-top: 8px;width: 4px;height: 16px;background: #329BFF;"></div> <span style="font-family :微软雅黑,sans-serif;font-weight:200px;margin-left: 9px;"> 快捷办公</span>
|
|
|
- <!-- <a href="#" style="float: right;color:#BCBCBC;margin: 5px 10px 0px 0px;">更多>></a> -->
|
|
|
- </div>
|
|
|
- <hr style="height:1px;border:none;border-top:2px solid #ECECEC" />
|
|
|
- <router-link to="attendance/attence" align="center" style="width:6%;height: 23%;background:#3E60F7;position: absolute;left: 5%;;border-radius: 4px;"><img src="../assets/images/kj_01.png" alt="Forest" style=" position:absolute;left:50%;top:50%;margin-left: -23px;margin-top: -25px;">
|
|
|
- <div style="font-size: 13px;margin-top: 100%;text-align:center;">考勤管理</div>
|
|
|
- </router-link>
|
|
|
- <router-link to="expenses/expenses" align="center" style="width:6%;height: 23%;background:#349CFF;position: absolute;left: 14%;border-radius: 4px;"><img src="../assets/images/kj_02.png" alt="Forest" style="position:absolute;left:50%;top:50%;margin-left: -23px;margin-top: -25px;">
|
|
|
- <div style="font-size: 13px;margin-top: 100%;text-align:center;">报销管理</div>
|
|
|
- </router-link>
|
|
|
- <router-link to="contract/contract" align="center" style="width:6%;height: 23%;background:#FBDD0B;position: absolute;left: 23%;border-radius: 4px;"><img src="../assets/images/biao.png" alt="Forest" style="position:absolute;left:50%;top:50%;margin-left: -23px;margin-top: -30px;height: 52px;width: 44px;">
|
|
|
- <div style="font-size: 13px;margin-top: 100%;text-align:center;">合同管理</div>
|
|
|
- </router-link>
|
|
|
- <!-- <a href="office/wageManage" align="center" style="width:79px;height: 66px;background:#FBDD0B;position: absolute;left: 300px;;border-radius: 4px;"><img src="../assets/images/kj_03.png" alt="Forest" style="align:center;line-height:66px;margin-top: 16px;height: 39px;width: 38px;"><div style="font-size: 12px;;margin-top: 10px;">智慧薪酬</div></a> -->
|
|
|
- <router-link to="recruit/recruitNeed" align="center" style="width:6%;height: 23%;background:#349CFF;position: absolute;left: 32%;border-radius: 4px;"><img src="../assets/images/kj_04.png" alt="Forest" style="position:absolute;left:50%;top:50%;margin-left: -23px;margin-top: -25px;">
|
|
|
- <div style="font-size: 13px;margin-top: 100%;text-align:center;">招聘简历管理</div>
|
|
|
- </router-link>
|
|
|
- <router-link to="dataManage/fileManage" align="center" style="width:6%;height: 23%;background:#12C993;position: absolute;left:41%;border-radius: 4px;"><img src="../assets/images/kj_05.png" alt="Forest" style="position:absolute;left:50%;top:50%;margin-left: -23px;margin-top: -25px;">
|
|
|
- <div style="font-size: 13px;margin-top: 100%;text-align:center;">资料管理</div>
|
|
|
- </router-link>
|
|
|
- <router-link to="travel/reimbursement" align="center" style="width:6%;height: 23%;;background:#F4830B;position: absolute;left:50%;border-radius: 4px;"><img src="../assets/images/kj_06.png" alt="Forest" style="position:absolute;left:50%;top:50%;margin-left: -23px;margin-top: -25px;">
|
|
|
- <div style="font-size: 13px;margin-top: 100%;text-align:center;">差旅管理</div>
|
|
|
- </router-link>
|
|
|
- <router-link to="project/project" align="center" style="width:6%;height: 23%;background:#12C993;position: absolute;left: 5%;top: 184px;border-radius: 4px;"><img src="../assets/images/kj_07.png" alt="Forest" style="position:absolute;left:50%;top:50%;margin-left: -23px;margin-top: -25px;">
|
|
|
- <div style="font-size: 13px;margin-top: 100%;text-align:center;">项目管理</div>
|
|
|
- </router-link>
|
|
|
- <!-- <a href="#" align="center" style="width:79px;height: 66px;background:#D5D9E2;position: absolute;left: 199px;top: 184px;border-radius: 4px;"><img src="../assets/images/kj_08.png" alt="Forest" style="align:center;line-height:66px;margin-top: 16px;height: 39px;width: 38px;"><div style="font-size: 12px;;margin-top: 10px;">更多</div></a> -->
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <!-- 考勤管理 -->
|
|
|
- <el-col :span="8" style="border-radius: 4px;">
|
|
|
- <div style="height: 310px; background: #fff;margin: 11px 21px 0px -80px;border-radius: 10px;">
|
|
|
- <div style=" line-height:30px;margin: 0px 0px 0px 15px; ">
|
|
|
- <div style="float: left;margin-top: 8px;width: 4px;height: 16px;background: #329BFF;"></div><a href="#" style="float: right;color:#BCBCBC;margin: 5px 10px 0px 0px;">更多>></a><span style="margin-left: 9px;">
|
|
|
- 考勤管理
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <hr style="height:1px;border:none;border-top:2px solid #ECECEC" />
|
|
|
- <div id='calendar'>
|
|
|
- <!-- 年份 月份 -->
|
|
|
- <div class='month'>
|
|
|
- <ul>
|
|
|
- <!--点击会触发pickpre函数,重新刷新当前日期 @click(vue v-on:click缩写) -->
|
|
|
- <li class='arrow' @click='pickPre(currentYear,currentMonth)'>上个月</li>
|
|
|
- <li class='year-month' style="width: 20px;">
|
|
|
- <span class='choose-year' style="width: 73px;float: left;margin-left: -110px;">{{ currentYear }}年</span>
|
|
|
- <span class='choose-month' style="width: 30px;">{{ currentMonth }}月</span>
|
|
|
- </li>
|
|
|
- <li class='arrow' @click='pickNext(currentYear,currentMonth)' style="width: 260px;">下个月</li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- <!-- 星期 -->
|
|
|
- <ul class='weekdays'>
|
|
|
- <li>S</li>
|
|
|
- <li>Mo</li>
|
|
|
- <li>Tu</li>
|
|
|
- <li>We</li>
|
|
|
- <li>Th</li>
|
|
|
- <li>Fr</li>
|
|
|
- <li>S</li>
|
|
|
- </ul>
|
|
|
- <!-- 日期 -->
|
|
|
- <ul class='days'>
|
|
|
- <!-- 核心 v-for循环 每一次循环用<li>标签创建一天 -->
|
|
|
- <li v-for='(dayobject,i) in days' :key='i'>
|
|
|
- <!--本月-->
|
|
|
- <!--如果不是本月 改变类名加灰色-->
|
|
|
- <span v-if='dayobject.day.getMonth()+1 != currentMonth' class='other-month' @click="getDayTime(dayobject.day)">{{ dayobject.day.getDate() }}</span>
|
|
|
- <!--如果是本月 还需要判断是不是这一天-->
|
|
|
- <span v-else>
|
|
|
- <!--今天 同年同月同日-->
|
|
|
- <span v-if='dayobject.day.getFullYear() == new Date().getFullYear() && dayobject.day.getMonth() == new Date().getMonth() && dayobject.day.getDate() == new Date().getDate()' class='active' @click="getDayTime(dayobject.day)">{{ dayobject.day.getDate() }}</span>
|
|
|
- <span v-else @click="getDayTime(dayobject.day)">{{ dayobject.day.getDate() }}</span>
|
|
|
- </span>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <!-- 我的代办 -->
|
|
|
- <el-row :gutter="20" style=" margin-bottom: 20px;">
|
|
|
- <el-col :span="8" style="border-radius: 4px;">
|
|
|
- <div style="height: 300px; background:#fff;margin: -10px 22px 0px 21px;border-radius: 10px;line-height: 30px;">
|
|
|
- <div style=" line-height:30px; margin: 0px 0px 0px 15px; ">
|
|
|
- <!-- <div style="float: left;margin-top: 8px;width: 4px;height: 16px;background: #329BFF;"></div> -->
|
|
|
- <!-- <a href="#" style="float: right;color:#BCBCBC;margin: 5px 10px 0px 0px;">更多>></a> -->
|
|
|
- <!-- <span style="margin-left: 9px;">
|
|
|
- 我的待办
|
|
|
- </span> -->
|
|
|
- </div>
|
|
|
- <v-approval style="width:100%;"></v-approval>
|
|
|
- <!-- <hr style="height:1px;border:none;border-top:2px solid #ECECEC" />
|
|
|
- <div>
|
|
|
- <el-link href="#" style="margin-left:10px;">待办</el-link>
|
|
|
- <el-link href="#" style="margin-left:10px;">待阅</el-link>
|
|
|
- <el-link href="#" style="margin-left:10px;">待处理</el-link>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <a href="#">
|
|
|
- <li style="list-style:none;color:#82848a;font-size: 10px;margin-left:10px">>华科全体员工双休培训会议将于2021年... <span style="margin-left:10px">管理员</span><span style="float: right;margin-right:10px">2021-5-1</span></li>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- <hr style="border-top:0px solid #ECECEC;margin-top: -4px;" />
|
|
|
- <div>
|
|
|
- <a href="#">
|
|
|
- <li style="list-style:none;color:#82848a;font-size: 10px;margin-left:10px">>华科全体员工双休培训会议将于2021年... <span style="margin-left:10px">管理员</span><span style="float: right;margin-right:10px">2021-5-1</span></li>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- <hr style="border-top:0px solid #ECECEC;margin-top: -4px;" />
|
|
|
- <div>
|
|
|
- <a href="#">
|
|
|
- <li style="list-style:none;color:#82848a;font-size: 10px;margin-left:10px">>华科全体员工双休培训会议将于2021年... <span style="margin-left:10px">管理员</span><span style="float: right;margin-right:10px">2021-5-1</span></li>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- <hr style="border-top:0px solid #ECECEC;margin-top: -4px;" />
|
|
|
- <div>
|
|
|
- <a href="#">
|
|
|
- <li style="list-style:none;color:#82848a;font-size: 10px;margin-left:10px">>华科全体员工双休培训会议将于2021年... <span style="margin-left:10px">管理员</span><span style="float: right;margin-right:10px">2021-5-1</span></li>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- <hr style="border-top:0px solid #ECECEC;margin-top: -4px;" />
|
|
|
- <div>
|
|
|
- <a href="#">
|
|
|
- <li style="list-style:none;color:#82848a;font-size: 10px;margin-left:10px">>华科全体员工双休培训会议将于2021年... <span style="margin-left:10px">管理员</span><span style="float: right;margin-right:10px">2021-5-1</span></li>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- <hr style="border-top:0px solid #ECECEC;margin-top: -4px;" />
|
|
|
- <div>
|
|
|
- <a href="#">
|
|
|
- <li style="list-style:none;color:#82848a;font-size: 10px;margin-left:10px">>华科全体员工双休培训会议将于2021年... <span style="margin-left:10px">管理员</span><span style="float: right;margin-right:10px">2021-5-1</span></li>
|
|
|
- </a>
|
|
|
- </div> -->
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <!-- 待办统计 -->
|
|
|
- <el-col :span="8" style="border-radius: 4px;">
|
|
|
- <div style="height:300px; background: #fff;margin: -10px 78px 0px -32px;border-radius: 10px;">
|
|
|
- <div style=" line-height:30px; margin: 0px 0px 0px 15px; ">
|
|
|
- <div style="float: left;margin-top: 8px;width: 4px;height: 16px;background: #329BFF;"></div><a href="#" style="float: right;color:#BCBCBC;margin: 5px 10px 0px 0px;">更多>></a><span style="margin-left: 9px;">
|
|
|
- 待办统计
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <hr style="height:1px;border:none;border-top:2px solid #ECECEC" />
|
|
|
- <div id="myChart114" style="height:257px;width:400px;"></div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <!-- 通知公告 -->
|
|
|
- <el-col :span="8" style="border-radius: 4px;">
|
|
|
- <div style="height: 300px; background: #fff;margin: -10px 21px 0px -80px;border-radius: 10px;">
|
|
|
- <div style=" line-height:30px;margin: 0px 0px 0px 15px; ">
|
|
|
- <div style="float: left;margin-top: 8px;width: 4px;height: 16px;background: #329BFF;"></div><router-link to="system/notice" style="float: right;color:#BCBCBC;margin: 5px 10px 0px 0px;">更多>></router-link><span style="margin-left: 9px;">通知公告 </span>
|
|
|
- <hr style="border-top:1px solid #ECECEC;" />
|
|
|
- </div>
|
|
|
- <div v-for="(item,index) in noticeList" :key="index" >
|
|
|
- <el-button butt.titleLabel.lineBreakMode = NSLineBreakByTruncatingTail; size="mini" type="text" @click="handleInfo(item)" style=" margin-left:10px;color:#82848a;font-size: 14px;">
|
|
|
- <li style="float:left;text-align:left;width: 250px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;">{{item.noticeTitle}}</li><img src="../assets/images/new.png" style="margin-left: 10px;float:left;" v-if="index == '0'||index == '1'">
|
|
|
- </el-button>
|
|
|
- <li style="float:right;margin-right:10px; color:#82848a;font-size: 14px;list-style:none;margin-top: 5px;">{{item.createTime}}</li>
|
|
|
-
|
|
|
- <!-- <el-pagination
|
|
|
- @size-change="handleSizeChange"
|
|
|
- @current-change="handleCurrentChange"
|
|
|
- :current-page="currentPage"
|
|
|
- :page-sizes="[8]"
|
|
|
- :page-size="pageSize"
|
|
|
- layout="total, sizes, prev, pager, next, jumper"
|
|
|
- :total="noticeList.length-1"
|
|
|
- style=" float: right;">
|
|
|
- </el-pagination> -->
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
-
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <!-- 添加或修改公告对话框 -->
|
|
|
- <el-dialog :title="title" :visible.sync="open1" width="780px" append-to-body>
|
|
|
- <el-form ref="form" :model="form" label-width="80px" style="height:380px;">
|
|
|
- <el-row>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="" prop="noticeTitle" style="border:0px; outline:none;">
|
|
|
- <div style="width: 599px;font-size: 26px;font-weight: bolder;overflow-y: auto;height: 73px;" v-html="form.noticeTitle" placeholder="" />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="24">
|
|
|
- <el-form-item label="">
|
|
|
- <div style="border:0px; width:600px;overflow-y:auto;height:320px;" v-html="form.noticeContent"></div>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-form>
|
|
|
- <div slot="footer" class="dialog-footer">
|
|
|
- </div>
|
|
|
- </el-dialog>
|
|
|
- </div>
|
|
|
+
|
|
|
</template>
|
|
|
<script>
|
|
|
-import * as echarts from "echarts";
|
|
|
-import { noticeList } from "@/api/index.js";
|
|
|
-import Editor from '@/components/Editor';
|
|
|
-import approval from "@/components/OfficeSystem/myStartedList";
|
|
|
-export default {
|
|
|
- components: {
|
|
|
- Editor,
|
|
|
- "v-approval" : approval,
|
|
|
-
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
-
|
|
|
- // 弹出层标题
|
|
|
- title: "",
|
|
|
- // 是否显示弹出层
|
|
|
- open1: false,
|
|
|
- currentDay: 1,
|
|
|
- currentMonth: 1,
|
|
|
- currentYear: 1970,
|
|
|
- currentWeek: 1,
|
|
|
- days: [],
|
|
|
- // 表单参数
|
|
|
- form: {},
|
|
|
- noticeList:[],
|
|
|
- queryParams: {
|
|
|
- pageNum: 1,
|
|
|
- pageSize: 8,
|
|
|
- }
|
|
|
- };
|
|
|
- },
|
|
|
- created: function () {
|
|
|
- // 在vue初始化时调用
|
|
|
- this.initData(null);
|
|
|
- this.getNotice()
|
|
|
- },
|
|
|
- activated () {
|
|
|
- // 在vue初始化时调用
|
|
|
- this.initData(null);
|
|
|
- this.getNotice()
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.draw(); //饼环图
|
|
|
- },
|
|
|
- methods: {
|
|
|
- /** 查看按钮操作 */
|
|
|
- handleInfo(item) {
|
|
|
- this.open1 = true;
|
|
|
- this.form.noticeTitle = item.noticeTitle
|
|
|
- this.form.noticeContent = item.noticeContent
|
|
|
- },
|
|
|
- // //一级菜单点击事件
|
|
|
- // handleClickOutside() {
|
|
|
- // this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
|
|
|
- // },
|
|
|
- initData: function (cur) {
|
|
|
- // var leftcount = 0 // 存放剩余数量
|
|
|
- var date;
|
|
|
- if (cur) {
|
|
|
- date = new Date(cur);
|
|
|
- } else {
|
|
|
- var now = new Date();
|
|
|
- var d = new Date(
|
|
|
- this.formatDate(now.getFullYear(), now.getMonth(), 1)
|
|
|
- );
|
|
|
- d.setDate(35);
|
|
|
- date = new Date(
|
|
|
- this.formatDate(d.getFullYear(), d.getMonth() + 1, 1)
|
|
|
- );
|
|
|
- }
|
|
|
- this.currentDay = date.getDate();
|
|
|
- this.currentYear = date.getFullYear();
|
|
|
- this.currentMonth = date.getMonth() + 1;
|
|
|
- this.currentWeek = date.getDay(); // 1...6,0
|
|
|
- if (this.currentWeek === 0) {
|
|
|
- this.currentWeek = 7;
|
|
|
- }
|
|
|
- var str = this.formatDate(
|
|
|
- this.currentYear,
|
|
|
- this.currentMonth,
|
|
|
- this.currentDay
|
|
|
- );
|
|
|
- this.days.length = 0;
|
|
|
- // 今天是周日,放在第一行第7个位置,前面6个
|
|
|
- // 初始化本周
|
|
|
- for (var i = this.currentWeek; i >= 0; i--) {
|
|
|
- var d2 = new Date(str);
|
|
|
- d2.setDate(d2.getDate() - i);
|
|
|
- var dayobjectSelf = {}; // 用一个对象包装Date对象 以便为以后预定功能添加属性
|
|
|
- dayobjectSelf.day = d2;
|
|
|
- this.days.push(dayobjectSelf); // 将日期放入data 中的days数组 供页面渲染使用
|
|
|
- }
|
|
|
- // 其他周
|
|
|
- for (var j = 1; j <= 35 - this.currentWeek; j++) {
|
|
|
- var d3 = new Date(str);
|
|
|
- d3.setDate(d3.getDate() + j);
|
|
|
- var dayobjectOther = {};
|
|
|
- dayobjectOther.day = d3;
|
|
|
- this.days.push(dayobjectOther);
|
|
|
- }
|
|
|
- },
|
|
|
- getDayTime(el) {
|
|
|
-
|
|
|
- },
|
|
|
- pickPre: function (year, month) {
|
|
|
- // setDate(0); 上月最后一天
|
|
|
- // setDate(-1); 上月倒数第二天
|
|
|
- // setDate(dx) 参数dx为 上月最后一天的前后dx天
|
|
|
- var d = new Date(this.formatDate(year, month, 1));
|
|
|
- d.setDate(0);
|
|
|
- this.initData(
|
|
|
- this.formatDate(d.getFullYear(), d.getMonth() + 1, 1)
|
|
|
- );
|
|
|
- },
|
|
|
- pickNext: function (year, month) {
|
|
|
- var d = new Date(this.formatDate(year, month, 1));
|
|
|
- d.setDate(35);
|
|
|
- this.initData(
|
|
|
- this.formatDate(d.getFullYear(), d.getMonth() + 1, 1)
|
|
|
- );
|
|
|
- },
|
|
|
- // 返回 类似 2016-01-02 格式的字符串
|
|
|
- formatDate: function (year, month, day) {
|
|
|
- var y = year;
|
|
|
- var m = month;
|
|
|
- if (m < 10) m = "0" + m;
|
|
|
- var d = day;
|
|
|
- if (d < 10) d = "0" + d;
|
|
|
- return y + "-" + m + "-" + d;
|
|
|
- },
|
|
|
- draw() {
|
|
|
- var chartDom = document.getElementById("myChart114");
|
|
|
- var myChart = echarts.init(chartDom);
|
|
|
- var option;
|
|
|
- option = {
|
|
|
- tooltip: {
|
|
|
- trigger: "item",
|
|
|
- },
|
|
|
- legend: {
|
|
|
- top: "3%",
|
|
|
- width: "1px",
|
|
|
- left: "0px",
|
|
|
- },
|
|
|
- graphic: {
|
|
|
- type: "text",
|
|
|
- left: "center",
|
|
|
- top: "center",
|
|
|
- z: 1,
|
|
|
- zlevel: 100,
|
|
|
- style: {
|
|
|
- text: "进度达成率 48%",
|
|
|
- x: 100,
|
|
|
- y: 100,
|
|
|
- textAlign: "center",
|
|
|
- fill: "#000",
|
|
|
-
|
|
|
- with: 20,
|
|
|
- height: 30,
|
|
|
- },
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: "",
|
|
|
- type: "pie",
|
|
|
- radius: ["50%", "40%"],
|
|
|
- avoidLabelOverlap: false,
|
|
|
- label: {
|
|
|
- show: false,
|
|
|
- position: "center",
|
|
|
- },
|
|
|
- emphasis: {
|
|
|
- label: {
|
|
|
- fontSize: "16",
|
|
|
- },
|
|
|
- },
|
|
|
- labelLine: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- data: [
|
|
|
- {
|
|
|
- value: 1048,
|
|
|
- name: "待我审批",
|
|
|
- itemStyle: { color: "#2F9DFF" },
|
|
|
- },
|
|
|
- {
|
|
|
- value: 735,
|
|
|
- name: "待我阅读",
|
|
|
- itemStyle: { color: "#12C993" },
|
|
|
- },
|
|
|
- {
|
|
|
- value: 580,
|
|
|
- name: "待我处理",
|
|
|
- itemStyle: { color: "#F2DC4A" },
|
|
|
- },
|
|
|
- {
|
|
|
- value: 484,
|
|
|
- name: "工作任务",
|
|
|
- itemStyle: { color: "#E48E97" },
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- ],
|
|
|
- };
|
|
|
- option && myChart.setOption(option);
|
|
|
- },
|
|
|
- open() {
|
|
|
- this.$refs.calendar.open();
|
|
|
- },
|
|
|
- confirm(e) {
|
|
|
- console.log(e);
|
|
|
- },
|
|
|
- submitForm: function () {
|
|
|
- this.$refs["form"].validate((valid) => {
|
|
|
- if (valid) {
|
|
|
- if (this.form.noticeId != undefined) {
|
|
|
- updateNotice(this.form).then((response) => {
|
|
|
- this.msgSuccess("修改成功");
|
|
|
- this.open1 = false;
|
|
|
- this.getList();
|
|
|
- });
|
|
|
- } else {
|
|
|
- addNotice(this.form).then((response) => {
|
|
|
- this.msgSuccess("新增成功");
|
|
|
- this.open1 = false;
|
|
|
- this.getList();
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- // 取消按钮
|
|
|
- cancel() {
|
|
|
- this.open = false;
|
|
|
- this.reset();
|
|
|
- },
|
|
|
- getNotice(){
|
|
|
- noticeList(this.queryParams).then((response) => {
|
|
|
- console.log(response)
|
|
|
- this.noticeList = response.rows
|
|
|
- this.total = response.total;
|
|
|
- });
|
|
|
- },
|
|
|
|
|
|
- },
|
|
|
-};
|
|
|
</script>
|
|
|
<style>
|
|
|
-#calendar {
|
|
|
- font-size: 12px;
|
|
|
- width: 60%;
|
|
|
- margin: 0 auto;
|
|
|
- box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
|
|
|
- 0 3px 1px -2px rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
|
|
-}
|
|
|
-.month {
|
|
|
- width: 130%;
|
|
|
- color: #333333;
|
|
|
-}
|
|
|
-.month ul {
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- height: 35px;
|
|
|
-}
|
|
|
-.year-month {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-around;
|
|
|
- margin-top: 10px;
|
|
|
-}
|
|
|
-.choose-month {
|
|
|
- text-align: center;
|
|
|
- font-size: 12px;
|
|
|
-}
|
|
|
-/* 月份 */
|
|
|
-.arrow {
|
|
|
- padding: 15px;
|
|
|
- color: #999999;
|
|
|
- width: 280px;
|
|
|
-}
|
|
|
-.month ul li {
|
|
|
- font-size: 12px;
|
|
|
- text-transform: uppercase;
|
|
|
- letter-spacing: 3px;
|
|
|
-}
|
|
|
-/* 星期 */
|
|
|
-.weekdays {
|
|
|
- margin: 0;
|
|
|
- padding: 10px;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- color: #6b6f72;
|
|
|
- justify-content: space-around;
|
|
|
- background-color: #fbfbfd;
|
|
|
-}
|
|
|
-.weekdays li {
|
|
|
- display: inline-block;
|
|
|
- width: 13.6%;
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
-.days {
|
|
|
- padding: 10px;
|
|
|
- background: #ffffff;
|
|
|
- margin: 0;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- background-color: #fbfbfd;
|
|
|
-}
|
|
|
-.days li {
|
|
|
- list-style-type: none;
|
|
|
- display: inline-block;
|
|
|
- width: 14.2%;
|
|
|
- text-align: center;
|
|
|
- padding-bottom: 4px;
|
|
|
- padding-top: 10px;
|
|
|
- font-size: 12px;
|
|
|
- color: #000;
|
|
|
-}
|
|
|
-.days li .active {
|
|
|
- padding: 6px 10px;
|
|
|
- border-radius: 50%;
|
|
|
- background: #12c490;
|
|
|
- color: #fff;
|
|
|
-}
|
|
|
-.days li .other-month {
|
|
|
- padding: 5px;
|
|
|
- color: gainsboro;
|
|
|
-}
|
|
|
-.days li:hover > span > span {
|
|
|
- padding: 6px 10px;
|
|
|
- border-radius: 50%;
|
|
|
- background: #f88400;
|
|
|
- color: #fff;
|
|
|
-}
|
|
|
|
|
|
|
|
|
</style>
|