|
@@ -3,10 +3,10 @@
|
|
|
<table class="time_table table" v-on:mouseleave="mouseleave">
|
|
|
<thead>
|
|
|
<tr>
|
|
|
- <th rowspan="2">日期/时间</th>
|
|
|
+ <th rowspan="2" style="width:120px">日期/时间</th>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
- <th class="unselectable" v-for="(num, index) in numData" :key="index">{{ num }}</th>
|
|
|
+ <th class="unselectable" v-for="(num, index) in numData" :key="index" style="width:30px">{{ num }}</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody>
|
|
@@ -24,141 +24,79 @@
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
+ <!-- <div style="height:200px;overflow:auto">
|
|
|
+ <span v-for="(item, index) of dataString" :key="index">
|
|
|
+ <a-tag v-if="item" closable :afterClose="() => handleClose(index)">
|
|
|
+ {{ setItemDate(index) }}
|
|
|
+ </a-tag>
|
|
|
+ </span>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
export default {
|
|
|
name: 'calendar-table',
|
|
|
+ props: {
|
|
|
+ scheduleTime: {
|
|
|
+ type: String
|
|
|
+ }
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
- numData: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
|
|
|
+ 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],
|
|
|
+ dateTime: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
|
|
timeData: [
|
|
|
{
|
|
|
date: '周一',
|
|
|
- time: [
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false }
|
|
|
- ]
|
|
|
+ time: []
|
|
|
},
|
|
|
{
|
|
|
date: '周二',
|
|
|
- time: [
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false }
|
|
|
- ]
|
|
|
+ time: []
|
|
|
},
|
|
|
{
|
|
|
date: '周三',
|
|
|
- time: [
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false }
|
|
|
- ]
|
|
|
+ time: []
|
|
|
},
|
|
|
{
|
|
|
date: '周四',
|
|
|
- time: [
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false }
|
|
|
- ]
|
|
|
+ time: []
|
|
|
},
|
|
|
{
|
|
|
date: '周五',
|
|
|
- time: [
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false }
|
|
|
- ]
|
|
|
+ time: []
|
|
|
},
|
|
|
{
|
|
|
date: '周六',
|
|
|
- time: [
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false }
|
|
|
- ]
|
|
|
+ time: []
|
|
|
},
|
|
|
{
|
|
|
date: '周日',
|
|
|
- time: [
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false },
|
|
|
- { isSelected: false, move: false }
|
|
|
- ]
|
|
|
+ time: []
|
|
|
}
|
|
|
],
|
|
|
selectFlag: false,
|
|
|
max: {
|
|
|
x: 0,
|
|
|
y: 0
|
|
|
- }
|
|
|
+ },
|
|
|
+ dataString: ''
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
- computed: {},
|
|
|
- created: {},
|
|
|
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
|
|
|
+ // this.timeData[index].time[key].isSelected = !this.timeData[index].time[key].isSelected
|
|
|
},
|
|
|
mousedown: function(index, key) {
|
|
|
this.selectStart = []
|
|
@@ -192,16 +130,21 @@ export default {
|
|
|
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 = 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)
|
|
|
- this.$set(this.timeData[i].time[j], 'show', true)
|
|
|
+ this.$set(this.timeData[i].time[j], 'isSelected', true)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -215,22 +158,32 @@ export default {
|
|
|
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)
|
|
|
+ /* 渲染选中的区域 */
|
|
|
+ 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
|
|
|
// }
|
|
|
// }
|
|
|
- /* 渲染选中的区域 */
|
|
|
- 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
|
|
|
- }
|
|
|
- }
|
|
|
- for (var i = start.x; i <= end.x; i++) {
|
|
|
- for (var j = start.y; j <= end.y; j++) {
|
|
|
- this.timeData[i].time[j].isSelected = !this.timeData[i].time[j].isSelected
|
|
|
+ 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,
|
|
@@ -239,13 +192,77 @@ export default {
|
|
|
},
|
|
|
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 < 24) {
|
|
|
+ this.timeData[0].time.push({ isSelected: arr[i] == 1 ? true : false, move: false, value: false })
|
|
|
+ } else if (i < 48 && i >= 24) {
|
|
|
+ this.timeData[1].time.push({ isSelected: arr[i] == 1 ? true : false, move: false, value: false })
|
|
|
+ } else if (i < 72 && i >= 48) {
|
|
|
+ this.timeData[2].time.push({ isSelected: arr[i] == 1 ? true : false, move: false, value: false })
|
|
|
+ } else if (i < 96 && i >= 72) {
|
|
|
+ this.timeData[3].time.push({ isSelected: arr[i] == 1 ? true : false, move: false, value: false })
|
|
|
+ } else if (i < 120 && i >= 96) {
|
|
|
+ this.timeData[4].time.push({ isSelected: arr[i] == 1 ? true : false, move: false, value: false })
|
|
|
+ } else if (i < 144 && i >= 120) {
|
|
|
+ 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 })
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.$nextTick(() => {})
|
|
|
- },
|
|
|
- //监听
|
|
|
- watch: {}
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
@@ -257,8 +274,11 @@ export default {
|
|
|
.time_table th,
|
|
|
.time_table td {
|
|
|
border: 1px solid #ccc;
|
|
|
- width: 30px;
|
|
|
- height: 40px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.time_table .unselectable {
|
|
|
+ // width: 30px !important;
|
|
|
+ height: 20px;
|
|
|
}
|
|
|
.active_select {
|
|
|
background: cornflowerblue;
|