|
@@ -0,0 +1,336 @@
|
|
|
|
+<template>
|
|
|
|
+ <div class="calendar">
|
|
|
|
+ <table class="time_table table" v-on:mouseleave="mouseleave">
|
|
|
|
+ <thead>
|
|
|
|
+ <tr>
|
|
|
|
+ <th rowspan="2" style="width:120px">日期/时间(时)</th>
|
|
|
|
+ </tr>
|
|
|
|
+ <tr>
|
|
|
|
+ <th class="unselectable" colspan="2" v-for="(num, index) in numData" :key="index" style="width:50px">{{ num }}</th>
|
|
|
|
+ </tr>
|
|
|
|
+ </thead>
|
|
|
|
+ <tbody>
|
|
|
|
+ <tr v-for="(options, index) in timeData" :key="index">
|
|
|
|
+ <th scope="row">{{ options.date }}</th>
|
|
|
|
+ <td v-for="(timeItem, key) in options.time" :key="key" style="width:15px"
|
|
|
|
+ :class="[{ active_select: timeItem.isSelected, active_select_move: timeItem.show }]"
|
|
|
|
+ v-on:mousedown="mousedown(index, key)" v-on:mouseover="mouseover(index, key)"
|
|
|
|
+ v-on:mouseup="mouseup(index, key)" @click="showOne(index, key)"></td>
|
|
|
|
+ </tr>
|
|
|
|
+ </tbody>
|
|
|
|
+ </table>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+<script>
|
|
|
|
+ var arr = []
|
|
|
|
+ for (let i = 0; i < 48; i++) {
|
|
|
|
+ arr.push(i / 2)
|
|
|
|
+ }
|
|
|
|
+ export default {
|
|
|
|
+ name: 'calendar-table',
|
|
|
|
+ props: {
|
|
|
|
+ scheduleTime: {
|
|
|
|
+ type: String,
|
|
|
|
+ default () {
|
|
|
|
+ var str = ''
|
|
|
|
+ for (let i = 0; i < 7 * 48; i++) {
|
|
|
|
+ str += '0'
|
|
|
|
+ }
|
|
|
|
+ return str
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ show: false,
|
|
|
|
+ numData: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, ],
|
|
|
|
+ // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, ],
|
|
|
|
+ dateTime: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
|
|
|
+ timeData: [{
|
|
|
|
+ date: '周一',
|
|
|
|
+ time: []
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ date: '周二',
|
|
|
|
+ time: []
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ date: '周三',
|
|
|
|
+ time: []
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ date: '周四',
|
|
|
|
+ time: []
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ date: '周五',
|
|
|
|
+ time: []
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ date: '周六',
|
|
|
|
+ time: []
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ date: '周日',
|
|
|
|
+ time: []
|
|
|
|
+ }
|
|
|
|
+ ],
|
|
|
|
+ selectFlag: false,
|
|
|
|
+ max: {
|
|
|
|
+ x: 0,
|
|
|
|
+ y: 0
|
|
|
|
+ },
|
|
|
|
+ dataString: ''
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ // handleClose(item) {
|
|
|
|
+ // var index = Math.floor(item / 24)
|
|
|
|
+ // var key = item % 7
|
|
|
|
+ // if (this.timeData[index].time[key].value == false) {
|
|
|
|
+ // if (this.timeData[index].time[key].isSelected) {
|
|
|
|
+ // this.timeData[index].time[key].isSelected = false
|
|
|
|
+ // } else {
|
|
|
|
+ // this.$set(this.timeData[index].time[key], 'isSelected', true)
|
|
|
|
+ // }
|
|
|
|
+ // }
|
|
|
|
+ // },
|
|
|
|
+ showOne(index, key) {
|
|
|
|
+ // this.timeData[index].time[key].isSelected = !this.timeData[index].time[key].isSelected
|
|
|
|
+ },
|
|
|
|
+ mousedown: function (index, key) {
|
|
|
|
+ this.selectStart = []
|
|
|
|
+ this.selectFlag = true
|
|
|
|
+ if (this.timeData[index].time[key].value == false) {
|
|
|
|
+ if (this.timeData[index].time[key].isSelected) {
|
|
|
|
+ this.timeData[index].time[key].isSelected = false
|
|
|
|
+ } else {
|
|
|
|
+ this.$set(this.timeData[index].time[key], 'isSelected', true)
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ this.selectStart.push({
|
|
|
|
+ index: index,
|
|
|
|
+ key: key
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ mouseover: function (index, key) {
|
|
|
|
+ // x 垂直方向 y 水平方向
|
|
|
|
+ if (this.selectFlag) {
|
|
|
|
+ if (index >= this.max.x) {
|
|
|
|
+ this.max.x = index
|
|
|
|
+ }
|
|
|
|
+ if (key >= this.max.y) {
|
|
|
|
+ this.max.y = key
|
|
|
|
+ }
|
|
|
|
+ var start = {
|
|
|
|
+ x: this.selectStart[0].index,
|
|
|
|
+ y: this.selectStart[0].key
|
|
|
|
+ }
|
|
|
|
+ var end = {
|
|
|
|
+ x: index,
|
|
|
|
+ y: key
|
|
|
|
+ }
|
|
|
|
+ for (var i = end.x; i <= this.max.x; i++) {
|
|
|
|
+ for (var j = end.y; j <= this.max.y; j++) {
|
|
|
|
+ this.$set(this.timeData[i].time[j], 'isSelected', false)
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ /* 渲染选中的区域 */
|
|
|
|
+ // for (var i = start.x; i <= end.x; i++) {
|
|
|
|
+ // for (var j = start.y; j <= end.y; j++) {
|
|
|
|
+ // // this.$set(this.timeData[i].time[j], 'isSelected', true)
|
|
|
|
+ // this.$set(this.timeData[i].time[j], 'show', true)
|
|
|
|
+ // }
|
|
|
|
+ // }
|
|
|
|
+ for (var i = start.x; i <= end.x; i++) {
|
|
|
|
+ for (var j = start.y; j <= end.y; j++) {
|
|
|
|
+ this.$set(this.timeData[i].time[j], 'isSelected', true)
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ mouseup: function (index, key) {
|
|
|
|
+ var start = {
|
|
|
|
+ x: this.selectStart[0].index,
|
|
|
|
+ y: this.selectStart[0].key
|
|
|
|
+ }
|
|
|
|
+ var end = {
|
|
|
|
+ x: index,
|
|
|
|
+ y: key
|
|
|
|
+ }
|
|
|
|
+ /* 渲染选中的区域 */
|
|
|
|
+ var data = []
|
|
|
|
+ var arr = []
|
|
|
|
+ // for (let i = 0; i < this.timeData.length; i++) {
|
|
|
|
+ // for (let j = 0; j < this.timeData[i].time.length; j++) {
|
|
|
|
+ // this.timeData[i].time[j].show = false
|
|
|
|
+ // }
|
|
|
|
+ // }
|
|
|
|
+ arr = data.concat(
|
|
|
|
+ this.timeData[0].time,
|
|
|
|
+ this.timeData[1].time,
|
|
|
|
+ this.timeData[2].time,
|
|
|
|
+ this.timeData[3].time,
|
|
|
|
+ this.timeData[4].time,
|
|
|
|
+ this.timeData[5].time,
|
|
|
|
+ this.timeData[6].time
|
|
|
|
+ )
|
|
|
|
+ this.dataString = arr.map(item => {
|
|
|
|
+ if (item.isSelected) {
|
|
|
|
+ return 1
|
|
|
|
+ } else {
|
|
|
|
+ return 0
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ console.log(this.dataString.join(''))
|
|
|
|
+ this.$emit('update:scheduleTime', this.dataString.join(''))
|
|
|
|
+ this.selectFlag = false
|
|
|
|
+ this.max = {
|
|
|
|
+ x: 0,
|
|
|
|
+ y: 0
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ mouseleave: function () {
|
|
|
|
+ this.selectFlag = false
|
|
|
|
+ },
|
|
|
|
+ setItemDate(sum) {
|
|
|
|
+ let i = sum
|
|
|
|
+ if (i < 24) {
|
|
|
|
+ return '周一' + i + ':00~' + (i + 1) + ':00'
|
|
|
|
+ } else if (i < 48 && i >= 24) {
|
|
|
|
+ return '周二' + (i - 24) + ':00~' + (i - 23) + ':00'
|
|
|
|
+ } else if (i < 72 && i >= 48) {
|
|
|
|
+ return '周三' + (i - 48) + ':00~' + (i - 47) + ':00'
|
|
|
|
+ } else if (i < 96 && i >= 72) {
|
|
|
|
+ return '周四' + (i - 72) + ':00~' + (i - 71) + ':00'
|
|
|
|
+ } else if (i < 120 && i >= 96) {
|
|
|
|
+ return '周五' + (i - 96) + ':00~' + (i - 95) + ':00'
|
|
|
|
+ } else if (i < 144 && i >= 120) {
|
|
|
|
+ return '周六' + (i - 120) + ':00~' + (i - 119) + ':00'
|
|
|
|
+ } else {
|
|
|
|
+ return '周日' + (i - 144) + ':00~' + (i - 143) + ':00'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ init() {
|
|
|
|
+ var str = this.scheduleTime
|
|
|
|
+ var arr = str.split('')
|
|
|
|
+ this.timeData = [{
|
|
|
|
+ date: '周一',
|
|
|
|
+ time: []
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ date: '周二',
|
|
|
|
+ time: []
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ date: '周三',
|
|
|
|
+ time: []
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ date: '周四',
|
|
|
|
+ time: []
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ date: '周五',
|
|
|
|
+ time: []
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ date: '周六',
|
|
|
|
+ time: []
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ date: '周日',
|
|
|
|
+ time: []
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
|
|
+ for (let i = 0; i < arr.length; i++) {
|
|
|
|
+ if (i < 48) {
|
|
|
|
+ this.timeData[0].time.push({
|
|
|
|
+ isSelected: arr[i] == 1 ? true : false,
|
|
|
|
+ move: false,
|
|
|
|
+ value: false
|
|
|
|
+ })
|
|
|
|
+ } else if (i < 96 && i >= 48) {
|
|
|
|
+ this.timeData[1].time.push({
|
|
|
|
+ isSelected: arr[i] == 1 ? true : false,
|
|
|
|
+ move: false,
|
|
|
|
+ value: false
|
|
|
|
+ })
|
|
|
|
+ } else if (i < 144 && i >= 96) {
|
|
|
|
+ this.timeData[2].time.push({
|
|
|
|
+ isSelected: arr[i] == 1 ? true : false,
|
|
|
|
+ move: false,
|
|
|
|
+ value: false
|
|
|
|
+ })
|
|
|
|
+ } else if (i < 192 && i >= 144) {
|
|
|
|
+ this.timeData[3].time.push({
|
|
|
|
+ isSelected: arr[i] == 1 ? true : false,
|
|
|
|
+ move: false,
|
|
|
|
+ value: false
|
|
|
|
+ })
|
|
|
|
+ } else if (i < 240 && i >= 192) {
|
|
|
|
+ this.timeData[4].time.push({
|
|
|
|
+ isSelected: arr[i] == 1 ? true : false,
|
|
|
|
+ move: false,
|
|
|
|
+ value: false
|
|
|
|
+ })
|
|
|
|
+ } else if (i < 288 && i >= 240) {
|
|
|
|
+ this.timeData[5].time.push({
|
|
|
|
+ isSelected: arr[i] == 1 ? true : false,
|
|
|
|
+ move: false,
|
|
|
|
+ value: false
|
|
|
|
+ })
|
|
|
|
+ } else {
|
|
|
|
+ this.timeData[6].time.push({
|
|
|
|
+ isSelected: arr[i] == 1 ? true : false,
|
|
|
|
+ move: false,
|
|
|
|
+ value: false
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ watch: {
|
|
|
|
+ scheduleTime: {
|
|
|
|
+ immediate: true, // immediate选项可以开启首次赋值监听
|
|
|
|
+ handler(newVal, oldVal) {
|
|
|
|
+ this.init()
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="scss">
|
|
|
|
+ .time_table {
|
|
|
|
+ border: 1px solid #ccc;
|
|
|
|
+ border-collapse: collapse;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .time_table th,
|
|
|
|
+ .time_table td {
|
|
|
|
+ border: 1px solid #ccc;
|
|
|
|
+ text-align: center;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .time_table .unselectable {
|
|
|
|
+ width: 5px !important;
|
|
|
|
+ height: 30px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .active_select {
|
|
|
|
+ background: cornflowerblue;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .active_select_move {
|
|
|
|
+ background: aqua;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ * {
|
|
|
|
+ -webkit-touch-callout: none;
|
|
|
|
+ -webkit-user-select: none;
|
|
|
|
+ -moz-user-select: none;
|
|
|
|
+ -ms-user-select: none;
|
|
|
|
+ user-select: none;
|
|
|
|
+ }
|
|
|
|
+</style>
|