|
|
@@ -0,0 +1,839 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <!-- <div class="calendar">
|
|
|
+ <div class="arrow">
|
|
|
+ <i class="el-icon-arrow-left" @click="arrow('left')"></i>
|
|
|
+ <i class="el-icon-arrow-right" @click="arrow('right')"></i>
|
|
|
+ </div>
|
|
|
+ <el-calendar v-model="value" :range="dateRange"></el-calendar>
|
|
|
+ </div> -->
|
|
|
+ <!-- 下面的日历 -->
|
|
|
+ <div class="date">
|
|
|
+ <div class="arrow0">
|
|
|
+ <i class="el-icon-arrow-left" style="font-weight: 900;" @click="weekPre"></i>
|
|
|
+ <i class="el-icon-arrow-right" style="font-weight: 900;" @click="weekNext"></i>
|
|
|
+ </div>
|
|
|
+ <!-- 年份 月份 -->
|
|
|
+ <div class="month">
|
|
|
+ <span style="text-align: left;font-size: 16px;font-weight: 600;position: absolute;left: 20px;">我的日程</span>
|
|
|
+ <p>{{ currentYear }}年{{ currentMonth }}月</p>
|
|
|
+ </div>
|
|
|
+ <!-- 星期 -->
|
|
|
+ <ul class="weekdays">
|
|
|
+ <li>一</li>
|
|
|
+ <li>二</li>
|
|
|
+ <li>三</li>
|
|
|
+ <li>四</li>
|
|
|
+ <li>五</li>
|
|
|
+ <li>六</li>
|
|
|
+ <li>日</li>
|
|
|
+ </ul>
|
|
|
+ <!-- 日期 -->
|
|
|
+ <ul class="days">
|
|
|
+ <li @click="pick(day, index)" v-for="(day, index) in days" :key="index">
|
|
|
+ <!--本月-->
|
|
|
+ <span v-if="day.getMonth() + 1 != currentMonth" class="other-month">{{ day.getDate() }}</span>
|
|
|
+ <span v-else>
|
|
|
+ <!--今天-->
|
|
|
+ <span
|
|
|
+ v-if="day.getFullYear() == new Date().getFullYear() && day.getMonth() == new Date().getMonth() && day.getDate() == new Date().getDate()"
|
|
|
+ class="active">{{ day.getDate() }}</span>
|
|
|
+ <span v-else>{{ day.getDate() }}</span>
|
|
|
+ </span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <div style="padding: 10px 0px;" @click="addnewr">
|
|
|
+ <div class="rlitable" v-if="tableData.length > 0">
|
|
|
+ <span v-for="(item, index) in tableData" :key="index"
|
|
|
+ :style="'color:' + item.textColor + ';padding:12px;display:inline-block;'">
|
|
|
+ <span @click.stop="handleEventClick(item)" style="cursor:;">{{ item.title }}</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div v-else class="rlitable2">
|
|
|
+ <div style="padding:10px;text-align: center;">
|
|
|
+ 暂无日程
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <el-table v-loading="loading" :data="tableData" style="width: 100%;" height="123">
|
|
|
+ <el-table-column prop="date" label="日期" width="180" align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="name" label="姓名" width="180" align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="address" label="地址" align="center">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-pagination @current-change="currchange" :current-page="page" :page-size="size"
|
|
|
+ layout="total,prev, pager, next" :total="total">
|
|
|
+ </el-pagination> -->
|
|
|
+ <!--日程新增弹窗start-->
|
|
|
+ <el-dialog :title="titleNew" :visible.sync="dialogVisible" :before-close="close" :modal="false" width="45%">
|
|
|
+ <el-form :model="form" :rules="rules" ref="form" label-width="120px" size="small" class="demo-ruleForm"
|
|
|
+ :disabled="auth ? false : 'disabled'">
|
|
|
+ <el-form-item label="会议名称" prop="title">
|
|
|
+ <el-input v-model="form.title"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="参会角色" prop="orgId">
|
|
|
+ <el-select v-model="form.orgId" style="width: 70%; overflow: hidden" clearable filterable
|
|
|
+ placeholder="参会角色" multiple>
|
|
|
+ <el-option v-for="item in roleNameList" :key="item.userId" :label="item.name"
|
|
|
+ :value="item.userId">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="是否是党会" prop="isParty">
|
|
|
+ <el-select v-model="form.isParty" clearable style="width: 70%" filterable placeholder="是否是党会">
|
|
|
+ <el-option v-for="item in isParrty" :key="item.is_party" :label="item.name"
|
|
|
+ :value="item.is_party">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="发起科室" prop="leaderName">
|
|
|
+ <el-input v-model="form.leaderName"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="会议开始时间" required>
|
|
|
+ <el-col :span="11">
|
|
|
+ <el-form-item prop="begindate" style="margin-bottom: 0">
|
|
|
+ <el-date-picker type="date" disabled format="yyyy-MM-dd" value-format="yyyy-MM-dd"
|
|
|
+ placeholder="选择日期" v-model="form.begindate" style="width: 100%">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col class="line" :span="2">-</el-col>
|
|
|
+ <el-col :span="11">
|
|
|
+ <el-form-item prop="startTime" style="margin-bottom: 0">
|
|
|
+ <el-select v-model="form.startTime" placeholder="选择时间" clearable>
|
|
|
+ <el-option v-for="item in timeOptions" :key="item.time" :disabled="item.disabled"
|
|
|
+ :label="item.time" :value="item.time" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="会议结束时间" required>
|
|
|
+ <el-col :span="11">
|
|
|
+ <el-form-item prop="enddate" style="margin-bottom: 0">
|
|
|
+ <el-date-picker type="date" disabled format="yyyy-MM-dd" value-format="yyyy-MM-dd"
|
|
|
+ placeholder="选择日期" v-model="form.enddate" style="width: 100%">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col class="line" :span="2">-</el-col>
|
|
|
+ <el-col :span="11">
|
|
|
+ <el-form-item prop="endTime" style="margin-bottom: 0">
|
|
|
+ <el-select v-model="form.endTime" placeholder="选择时间" clearable>
|
|
|
+ <el-option v-for="item in timeOptions" :key="item.time" :disabled="item.disabled"
|
|
|
+ :label="item.time" :value="item.time" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="会议备注" prop="remark">
|
|
|
+ <el-input type="textarea" v-model="form.remark"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button @click="resetForm('form')">取消</el-button>
|
|
|
+ <el-button type="primary" @click="submitForm('form')">提交</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-dialog>
|
|
|
+ <!--日程新增弹窗end-->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getNowdata, } from "../../../http/api.js";//../../../http/api.js
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 上
|
|
|
+ value: "",
|
|
|
+ endDate: "",
|
|
|
+ dateRange: [],
|
|
|
+ dateNum: 0,
|
|
|
+ // 下
|
|
|
+ currentYear: "", // 年份
|
|
|
+ currentMonth: "", // 月份
|
|
|
+ currentDay: "", // 日期
|
|
|
+ currentWeek: "", // 星期
|
|
|
+ days: [],
|
|
|
+ tableData: [
|
|
|
+ {
|
|
|
+ date: '2016-05-02',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1518 弄'
|
|
|
+ }, {
|
|
|
+ date: '2016-05-04',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1517 弄'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: '2016-05-01',
|
|
|
+ name: '王小虎',
|
|
|
+ address: '上海市普陀区金沙江路 1519 弄'
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ loading: false,
|
|
|
+ params: {},
|
|
|
+ page: 1, //第几页
|
|
|
+ size: 10, //一页多少条
|
|
|
+ total: 50, //总条目数
|
|
|
+ subList: [],
|
|
|
+ array: [],
|
|
|
+ auth: false,
|
|
|
+ roleNameList: [
|
|
|
+ {
|
|
|
+ userId: 1,
|
|
|
+ name: "分管公司领导/部门负责人",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ userId: 2,
|
|
|
+ name: "部门负责人",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ userId: 3,
|
|
|
+ name: "部门分管线条领导/科室主任",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ isParrty: [
|
|
|
+ {
|
|
|
+ is_party: "1",
|
|
|
+ name: "是",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ is_party: "0",
|
|
|
+ name: "否",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ dialogVisible: false,
|
|
|
+ titleNew: "",
|
|
|
+ form: {
|
|
|
+ title: "",
|
|
|
+ userId: "",
|
|
|
+ begindate: "",
|
|
|
+ startTime: "",
|
|
|
+ enddate: "",
|
|
|
+ endTime: "",
|
|
|
+ remark: "",
|
|
|
+ leaderName: "",
|
|
|
+ roleId: "",
|
|
|
+ roleColor: "",
|
|
|
+ id: "",
|
|
|
+ isParty: "否",
|
|
|
+ // roleName: '分管公司领导/部门负责人'
|
|
|
+ // roleName: [],
|
|
|
+ orgId: [2, 3],
|
|
|
+ // orgIds: "[2,3]",
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ title: [{ required: true, message: "请输入会议主题", trigger: "blur" }],
|
|
|
+ userid: [
|
|
|
+ { required: true, message: "请选择会议室使用人", trigger: "change" },
|
|
|
+ ],
|
|
|
+ begindate: [
|
|
|
+ { required: true, message: "请选择开始日期", trigger: "change" },
|
|
|
+ ],
|
|
|
+ startTime: [
|
|
|
+ { required: true, message: "请选择开始时间", trigger: "change" },
|
|
|
+ ],
|
|
|
+ enddate: [
|
|
|
+ { required: true, message: "请选择结束日期", trigger: "change" },
|
|
|
+ ],
|
|
|
+ endTime: [
|
|
|
+ { required: true, message: "请选择结束时间", trigger: "change" },
|
|
|
+ ],
|
|
|
+ remark: [
|
|
|
+ { required: true, message: "请填写会议备注", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ leaderName: [{ required: true, message: "发起科室", trigger: "blur" }],
|
|
|
+ isParty: [{ required: true, message: "是否是党会", trigger: "change" }],
|
|
|
+ // roleName:[{required: true, message: '参会角色', trigger: 'change'}],
|
|
|
+ orgId: [{ required: true, message: "参会角色", trigger: "change" }],
|
|
|
+ // orgIds: [{required: true, message: '参会角色', trigger: 'change'}]
|
|
|
+ },
|
|
|
+ // 时间选项
|
|
|
+ timeOptions: [
|
|
|
+ { time: "08:00" },
|
|
|
+ { time: "08:30" },
|
|
|
+ { time: "09:00" },
|
|
|
+ { time: "09:30" },
|
|
|
+ { time: "10:00" },
|
|
|
+ { time: "10:30" },
|
|
|
+ { time: "11:00" },
|
|
|
+ { time: "11:30" },
|
|
|
+ { time: "12:00" },
|
|
|
+ { time: "12:30" },
|
|
|
+ { time: "13:00" },
|
|
|
+ { time: "13:30" },
|
|
|
+ { time: "14:00" },
|
|
|
+ { time: "14:30" },
|
|
|
+ { time: "15:00" },
|
|
|
+ { time: "15:30" },
|
|
|
+ { time: "16:00" },
|
|
|
+ { time: "16:30" },
|
|
|
+ { time: "17:00" },
|
|
|
+ { time: "17:30" },
|
|
|
+ { time: "18:00" },
|
|
|
+ ],
|
|
|
+ // 备份
|
|
|
+ backupTimeOptions: [
|
|
|
+ { time: "08:00" },
|
|
|
+ { time: "08:30" },
|
|
|
+ { time: "09:00" },
|
|
|
+ { time: "09:30" },
|
|
|
+ { time: "10:00" },
|
|
|
+ { time: "10:30" },
|
|
|
+ { time: "11:00" },
|
|
|
+ { time: "11:30" },
|
|
|
+ { time: "12:00" },
|
|
|
+ { time: "12:30" },
|
|
|
+ { time: "13:00" },
|
|
|
+ { time: "13:30" },
|
|
|
+ { time: "14:00" },
|
|
|
+ { time: "14:30" },
|
|
|
+ { time: "15:00" },
|
|
|
+ { time: "15:30" },
|
|
|
+ { time: "16:00" },
|
|
|
+ { time: "16:30" },
|
|
|
+ { time: "17:00" },
|
|
|
+ { time: "17:30" },
|
|
|
+ { time: "18:00" },
|
|
|
+ ],
|
|
|
+ nowdata: '',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // 上面的日历
|
|
|
+ this.dateList(this.dateNum);
|
|
|
+ console.log(this.dateRange);
|
|
|
+ // 下面的日历
|
|
|
+ this.initData();
|
|
|
+ this.getList();
|
|
|
+ this.queryRole();
|
|
|
+ this.getnowdata()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getnowdata(val) {
|
|
|
+ let yy = new Date().getFullYear()
|
|
|
+ let mm = new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1
|
|
|
+ let dd = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
|
|
|
+ this.nowdata = yy + '-' + mm + '-' + dd
|
|
|
+ },
|
|
|
+ //重置数据
|
|
|
+ resetForm(formName) {
|
|
|
+ this.dialogVisible = false;
|
|
|
+ this.$refs[formName].resetFields();
|
|
|
+ },
|
|
|
+ // 获取会议信息
|
|
|
+ queryRole() {
|
|
|
+ this.$http({
|
|
|
+ url: "/market/calendarnet/queryRole",
|
|
|
+ method: "post",
|
|
|
+ headers: {
|
|
|
+ "Content-Type": "application/json",
|
|
|
+ },
|
|
|
+ data: { isFile: "0" },
|
|
|
+ }).then((res) => {
|
|
|
+ // console.log(res);
|
|
|
+ // console.log('res====', typeof res.data)
|
|
|
+ // console.log(res.data)
|
|
|
+ this.auth = res.data;
|
|
|
+ // console.log("res.data", res.data)
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 提交数据
|
|
|
+ submitForm(formName) {
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.form.begindate = `${this.form.begindate} ${this.form.startTime}`;
|
|
|
+ this.form.enddate = `${this.form.enddate} ${this.form.endTime}`;
|
|
|
+ // console.log(this.form, "数据");
|
|
|
+ this.dialogVisible = false;
|
|
|
+ if (this.form.id === "") {
|
|
|
+ this.form === "";
|
|
|
+ }
|
|
|
+ if (new Date(this.form.enddate) < new Date(this.form.begindate)) {
|
|
|
+ this.$message({
|
|
|
+ message: "会议时间填写错误",
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$http({
|
|
|
+ url:
|
|
|
+ this.form.id === ""
|
|
|
+ ? "/market/calendarnet/add"
|
|
|
+ : "/market/calendarnet/update",
|
|
|
+ method: "post",
|
|
|
+ headers: {
|
|
|
+ "Content-Type": "application/json",
|
|
|
+ },
|
|
|
+ data: this.form,
|
|
|
+ }).then((res) => {
|
|
|
+ // console.log(res);
|
|
|
+ this.loadinged = false;
|
|
|
+ if (res.data.result === 1) {
|
|
|
+ this.$message({
|
|
|
+ message: res.data.desc,
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ message: "成功",
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ // location.reload();
|
|
|
+ this.getList();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // console.log("error submit!!");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 日历日程点击事件
|
|
|
+ handleEventClick(e) {
|
|
|
+ this.titleNew = "会议修改";
|
|
|
+ this.dialogVisible = true;
|
|
|
+ let id = e.id;
|
|
|
+ let info = this.subList.filter((item) => {
|
|
|
+ return item.id == id;
|
|
|
+ });
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.form = _.cloneDeep(info[0]);
|
|
|
+ // 处理时间回显
|
|
|
+ this.getShowTime(this.form.begindate, this.form.enddate);
|
|
|
+ // this.gitPeople(this.form.roleName);
|
|
|
+ this.orgId = this.form.roleName;
|
|
|
+ // this.orgIds=this.form.roleName
|
|
|
+ // this.roleNameList.userId=info[0].roleName
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getShowTime(beginDate, endDate) {
|
|
|
+ this.form.begindate = this.dealWithTime(beginDate);
|
|
|
+ this.form.startTime = this.getHoursMin(beginDate);
|
|
|
+ this.form.enddate = this.dealWithTime(endDate);
|
|
|
+ this.form.endTime = this.getHoursMin(endDate);
|
|
|
+ // console.log(this.form);
|
|
|
+ // this.$forceUpdate()
|
|
|
+ this.form = { ...this.form };
|
|
|
+ },
|
|
|
+ //新增会议
|
|
|
+ addnewr() {
|
|
|
+ console.log(111);
|
|
|
+ this.form.orgId = [];
|
|
|
+ this.form.isParty = "";
|
|
|
+ this.titleNew = "会议新增";
|
|
|
+ if (!this.auth) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ //开始时间
|
|
|
+ this.form.begindate = this.nowdata;
|
|
|
+ //结束时间
|
|
|
+ this.form.enddate = this.nowdata;
|
|
|
+
|
|
|
+ this.dialogVisible = true;
|
|
|
+ },
|
|
|
+ //关闭弹窗，重置表单
|
|
|
+ close() {
|
|
|
+ this.dialogVisible = false;
|
|
|
+ this.$refs["form"].resetFields();
|
|
|
+ },
|
|
|
+ // 获取会议信息
|
|
|
+ getList() {
|
|
|
+ this.$http({
|
|
|
+ url: "/market/calendarnet/queryList",
|
|
|
+ method: "post",
|
|
|
+ headers: {
|
|
|
+ "Content-Type": "application/json",
|
|
|
+ },
|
|
|
+ data: { isFile: "0" },
|
|
|
+ }).then((res) => {
|
|
|
+ console.log("res", res);
|
|
|
+ if (res.data && res.data.length > 0) {
|
|
|
+ this.array = res.data;
|
|
|
+ // this.getReservationList(this.array.scheduleList0);
|
|
|
+ this.getReservationList(this.array);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getReservationList(arrayData) {
|
|
|
+ let newArr = [];
|
|
|
+ let newAr2r = [];
|
|
|
+ this.subList = arrayData;
|
|
|
+ arrayData.forEach((item) => {
|
|
|
+ newArr.push({
|
|
|
+ newBeginTime: item.begindate.split(" ")[1].substr(0, 5),
|
|
|
+ newEndTime: item.enddate.split(" ")[1].substr(0, 5),
|
|
|
+ start: this.dealWithTime(item.begindate),
|
|
|
+ end: this.addDate(this.dealWithTime(item.enddate), 1),
|
|
|
+ textColor: item.roleColor,
|
|
|
+ id: item.id,
|
|
|
+ title: `${this.getTitle(
|
|
|
+ item.begindate,
|
|
|
+ item.enddate,
|
|
|
+ item.isParty
|
|
|
+ )} ${item.title} ${"召集人:" + item.leaderName}`,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ console.log(newArr);
|
|
|
+ console.log(this.nowdata);
|
|
|
+ newArr.map((item) => {
|
|
|
+ if (item.start == this.nowdata) {
|
|
|
+ newAr2r.push(item)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.tableData = newAr2r;
|
|
|
+ },
|
|
|
+ // 获取时分时间
|
|
|
+ getHoursMin(value) {
|
|
|
+ return value.substring(11, 16);
|
|
|
+ },
|
|
|
+ // 处理会议时间格式
|
|
|
+ dealWithTime(date) {
|
|
|
+ let newDate = /\d{4}-\d{1,2}-\d{1,2}/g.exec(date)[0];
|
|
|
+ return newDate;
|
|
|
+ },
|
|
|
+ // 获取会议事件title
|
|
|
+ getTitle(date1, date2, isParty) {
|
|
|
+ let start =
|
|
|
+ isParty == "1"
|
|
|
+ ? "★" + date1.substring(11, 16)
|
|
|
+ : date1.substring(11, 16);
|
|
|
+ let end = date2.substring(11, 16);
|
|
|
+ return `${start}~${end}`;
|
|
|
+ },
|
|
|
+ // 日期加1天
|
|
|
+ addDate(date, days) {
|
|
|
+ var d = new Date(date);
|
|
|
+ d.setDate(d.getDate() + days);
|
|
|
+ var mon =
|
|
|
+ d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
|
|
|
+ let endD = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();
|
|
|
+ return `${d.getFullYear()}-${mon}-${endD}`;
|
|
|
+ },
|
|
|
+ // 上面的日历
|
|
|
+
|
|
|
+ // 获取当前时间的周一
|
|
|
+ getMonday(date) {
|
|
|
+ var day = date.getDay();
|
|
|
+ var deltaDay;
|
|
|
+ if (day == 0) {
|
|
|
+ deltaDay = 6;
|
|
|
+ } else {
|
|
|
+ deltaDay = day - 1;
|
|
|
+ }
|
|
|
+ var monday = new Date(date.getTime() - deltaDay * 24 * 60 * 60 * 1000);
|
|
|
+ monday.setHours(0);
|
|
|
+ monday.setMinutes(0);
|
|
|
+ monday.setSeconds(0);
|
|
|
+ return monday; //返回选定时间的周一的0时0分0秒
|
|
|
+ },
|
|
|
+ getDateNew(time) {
|
|
|
+ console.log(time);
|
|
|
+ let times = new Date(time);
|
|
|
+ let year = times.getFullYear();
|
|
|
+ let month = times.getMonth() + 1 < 10 ? "0" + (times.getMonth() * 1 + 1) : times.getMonth() * 1 + 1;
|
|
|
+ let day = times.getDate() < 10 ? "0" + times.getDate() * 1 : times.getDate() * 1;
|
|
|
+ return year + "-" + month + "-" + day;
|
|
|
+ },
|
|
|
+ dateList(delta) {
|
|
|
+ //将时间对象转换为时间戳并加几天后转换为时间对象
|
|
|
+ var DateNews = this.getMonday(
|
|
|
+ new Date((new Date().getTime() / 1000 + 86400 * 7 * delta) * 1000)
|
|
|
+ );
|
|
|
+ let startDate = this.getDateNew(DateNews, delta);
|
|
|
+ this.endDate = this.getDateNew(
|
|
|
+ new Date((DateNews.getTime() / 1000 + 6 * 86400) * 1000)
|
|
|
+ );
|
|
|
+ this.dateRange = [startDate, this.endDate];
|
|
|
+ },
|
|
|
+ arrow(arrow) {
|
|
|
+ if (arrow == "left") {
|
|
|
+ this.dateNum--;
|
|
|
+ this.dateList(this.dateNum);
|
|
|
+ } else if (arrow == "right") {
|
|
|
+ this.dateNum++;
|
|
|
+ this.dateList(this.dateNum);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 下面的日历
|
|
|
+
|
|
|
+ formatDate(year, month, day) {
|
|
|
+ const y = year
|
|
|
+ let m = month
|
|
|
+ if (m < 10) m = `0${m}`
|
|
|
+ let d = day
|
|
|
+ if (d < 10) d = `0${d}`
|
|
|
+ return `${y}-${m}-${d}`
|
|
|
+ },
|
|
|
+ initData(cur) {
|
|
|
+ let date = ''
|
|
|
+ if (cur) {
|
|
|
+ date = new Date(cur)
|
|
|
+ } else {
|
|
|
+ date = new Date()
|
|
|
+ }
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ const str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay) // 今日日期 年-月-日
|
|
|
+ this.days.length = 0
|
|
|
+ // 今天是周日，放在第一行第7个位置，前面6个 这里默认显示一周，如果需要显示一个月，则第二个循环为 i<= 35- this.currentWeek
|
|
|
+ /* eslint-disabled */
|
|
|
+ for (let i = this.currentWeek - 1; i >= 0; i -= 1) {
|
|
|
+ const d = new Date(str)
|
|
|
+ d.setDate(d.getDate() - i)
|
|
|
+ // console.log(y:" + d.getDate())
|
|
|
+ this.days.push(d)
|
|
|
+ }
|
|
|
+ for (let i = 1; i <= 7 - this.currentWeek; i += 1) {
|
|
|
+ const d = new Date(str)
|
|
|
+ d.setDate(d.getDate() + i)
|
|
|
+ this.days.push(d)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 上个星期
|
|
|
+ weekPre() {
|
|
|
+ const d = this.days[0] // 如果当期日期是7号或者小于7号
|
|
|
+ d.setDate(d.getDate() - 7)
|
|
|
+ this.initData(d)
|
|
|
+ let days = document.querySelector(".days");
|
|
|
+ for (var i = 0; i <= 6; i++) {
|
|
|
+ days.childNodes[i].childNodes[0].childNodes[0].className = ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 下个星期
|
|
|
+ weekNext() {
|
|
|
+ const d = this.days[6] // 如果当期日期是7号或者小于7号
|
|
|
+ d.setDate(d.getDate() + 7)
|
|
|
+ this.initData(d)
|
|
|
+ let days = document.querySelector(".days");
|
|
|
+ for (var i = 0; i <= 6; i++) {
|
|
|
+ days.childNodes[i].childNodes[0].childNodes[0].className = ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 上一個月 传入当前年份和月份
|
|
|
+ pickPre(year, month) {
|
|
|
+ const d = new Date(this.formatDate(year, month, 1))
|
|
|
+ d.setDate(0)
|
|
|
+ this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
|
|
|
+ },
|
|
|
+ // 下一個月 传入当前年份和月份
|
|
|
+ pickNext(year, month) {
|
|
|
+ const d = new Date(this.formatDate(year, month, 1))
|
|
|
+ d.setDate(35)
|
|
|
+ this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
|
|
|
+ },
|
|
|
+ // 当前选择日期
|
|
|
+ pick(date, index) {
|
|
|
+ // console.log(date);
|
|
|
+ console.log(index);
|
|
|
+ let days = document.querySelector(".days");
|
|
|
+ console.log(days.childNodes[index].childNodes[0].childNodes);
|
|
|
+ console.log(days.childNodes);
|
|
|
+ for (var i = 0; i <= 6; i++) {
|
|
|
+ days.childNodes[i].childNodes[0].childNodes[0].className = ''
|
|
|
+ }
|
|
|
+ if (days.childNodes[index].childNodes[0].childNodes[0].className == '') {
|
|
|
+ days.childNodes[index].childNodes[0].childNodes[0].className = 'active'
|
|
|
+ } else {
|
|
|
+ days.childNodes[index].childNodes[0].childNodes[0].className = ''
|
|
|
+ }
|
|
|
+ this.nowdata = this.formatDate(date.getFullYear(), date.getMonth() + 1, date.getDate())
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+::v-deep .el-table .el-table__cell {
|
|
|
+ padding: 8px 0;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-table__header-wrapper {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+.rlitable {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ max-height: 161px;
|
|
|
+ overflow-y: scroll;
|
|
|
+ padding-left: 20%;
|
|
|
+ height: 161px;
|
|
|
+ background-color: #d8eaf6;
|
|
|
+ border-radius: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.rlitable2 {
|
|
|
+ max-height: 161px;
|
|
|
+ overflow-y: scroll;
|
|
|
+ height: 161px;
|
|
|
+ background-color: #d8eaf6;
|
|
|
+ border-radius: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+ul {
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+
|
|
|
+li {
|
|
|
+ list-style-type: none;
|
|
|
+}
|
|
|
+
|
|
|
+/* 上面的日历 */
|
|
|
+.calendar {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ background: #fff;
|
|
|
+ margin-top: 10px;
|
|
|
+ border-radius: 10px;
|
|
|
+ margin-left: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.el-calendar__header {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.el-calendar-table .el-calendar-day {
|
|
|
+ height: auto;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.el-calendar-table td.is-selected {
|
|
|
+ background-color: #24b18d;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.el-calendar-table .el-calendar-day:hover {
|
|
|
+ background-color: #24b18d;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.el-calendar-table {
|
|
|
+ border-bottom: 1px solid #e4e4e4;
|
|
|
+ padding-bottom: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.el-calendar-table .next {
|
|
|
+ color: rgb(143, 143, 143);
|
|
|
+}
|
|
|
+
|
|
|
+.el-calendar__title,
|
|
|
+.el-calendar__button-group {
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.arrow {
|
|
|
+ width: 100%;
|
|
|
+ max-height: 46px;
|
|
|
+ position: absolute;
|
|
|
+ top: 15px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.arrow i {
|
|
|
+ font-size: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.arrow i:nth-child(1) {
|
|
|
+ margin-right: 10%;
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+
|
|
|
+.arrow i:nth-child(2) {
|
|
|
+ margin-left: 10%;
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+
|
|
|
+/* 下面的日历 */
|
|
|
+.date {
|
|
|
+ position: relative;
|
|
|
+ margin-top: 10px;
|
|
|
+ padding: 10px 20px;
|
|
|
+ border-radius: 10px;
|
|
|
+ background-color: #ffffff;
|
|
|
+}
|
|
|
+
|
|
|
+.arrow0 {
|
|
|
+ width: 100%;
|
|
|
+ max-height: 46px;
|
|
|
+ position: absolute;
|
|
|
+ top: 10px;
|
|
|
+ left: 0px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.arrow0 i {
|
|
|
+ font-size: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.arrow0 i:nth-child(1) {
|
|
|
+ margin-right: 10%;
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+
|
|
|
+.arrow0 i:nth-child(2) {
|
|
|
+ margin-left: 10%;
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+
|
|
|
+.month {
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.weekdays {
|
|
|
+ display: flex;
|
|
|
+ margin: 10px 0px;
|
|
|
+}
|
|
|
+
|
|
|
+.weekdays li {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.days {
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+
|
|
|
+.days li {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.days li span {
|
|
|
+ display: inline-block;
|
|
|
+ width: 22px;
|
|
|
+ height: 22px;
|
|
|
+ line-height: 22px;
|
|
|
+}
|
|
|
+
|
|
|
+.days li span:hover {
|
|
|
+ color: #fff;
|
|
|
+ background-color: #409EFF;
|
|
|
+ border-radius: 50%;
|
|
|
+}
|
|
|
+
|
|
|
+.active {
|
|
|
+ display: inline-block;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #52d4fc !important;
|
|
|
+}
|
|
|
+
|
|
|
+.other-month {
|
|
|
+ color: #e4393c;
|
|
|
+}
|
|
|
+</style>
|
hujunwei@agilestar.cn