|
|
@@ -1,839 +0,0 @@
|
|
|
-<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() {
|
|
|
- this.form={}
|
|
|
- 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: auto;
|
|
|
- padding-left: 20%;
|
|
|
- height: 161px;
|
|
|
- background-color: #d8eaf6;
|
|
|
- border-radius: 10px;
|
|
|
-}
|
|
|
-
|
|
|
-.rlitable2 {
|
|
|
- max-height: 161px;
|
|
|
- overflow-y: auto;
|
|
|
- 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