123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314 |
- <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" v-for="(num, index) in numData" :key="index" style="width: 30px">{{ 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"
- :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 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,
- default() {
- return '000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000'
- },
- },
- },
- 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],
- 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 = ''
- if (this.scheduleTime) {
- str = this.scheduleTime
- } else {
- str =
- '000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000'
- }
- 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 })
- }
- }
- },
- },
- watch: {
- scheduleTime: {
- immediate: true, // immediate选项可以开启首次赋值监听
- handler(newVal, oldVal) {
- this.init()
- },
- },
- },
- }
- </script>
- <style lang="scss" scoped>
- .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: 30px !important;
- height: 20px;
- }
- .active_select {
- background: cornflowerblue;
- }
- .active_select_move {
- background: aqua;
- }
- * {
- -webkit-touch-callout: none !important;
- -webkit-user-select: none !important;
- -moz-user-select: none !important;
- -ms-user-select: none !important;
- user-select: none !important;
- }
- </style>
|