toutiaoTime.vue 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313
  1. <template>
  2. <div class="calendar">
  3. <table class="time_table table" v-on:mouseleave="mouseleave">
  4. <thead>
  5. <tr>
  6. <th rowspan="2" style="width: 120px">日期/时间</th>
  7. </tr>
  8. <tr>
  9. <th class="unselectable" v-for="(num, index) in numData" :key="index" style="width: 30px">{{ num }}</th>
  10. </tr>
  11. </thead>
  12. <tbody>
  13. <tr v-for="(options, index) in timeData" :key="index">
  14. <th scope="row">{{ options.date }}</th>
  15. <td
  16. v-for="(timeItem, key) in options.time"
  17. :key="key"
  18. :class="[{ active_select: timeItem.isSelected, active_select_move: timeItem.show }]"
  19. v-on:mousedown="mousedown(index, key)"
  20. v-on:mouseover="mouseover(index, key)"
  21. v-on:mouseup="mouseup(index, key)"
  22. @click="showOne(index, key)"
  23. ></td>
  24. </tr>
  25. </tbody>
  26. </table>
  27. <!-- <div style="height:200px;overflow:auto">
  28. <span v-for="(item, index) of dataString" :key="index">
  29. <a-tag v-if="item" closable :afterClose="() => handleClose(index)">
  30. {{ setItemDate(index) }}
  31. </a-tag>
  32. </span>
  33. </div> -->
  34. </div>
  35. </template>
  36. <script>
  37. export default {
  38. name: 'calendar-table',
  39. props: {
  40. scheduleTime: {
  41. type: String,
  42. default() {
  43. return '000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000'
  44. },
  45. },
  46. },
  47. data() {
  48. return {
  49. show: false,
  50. 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],
  51. dateTime: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
  52. timeData: [
  53. {
  54. date: '周一',
  55. time: [],
  56. },
  57. {
  58. date: '周二',
  59. time: [],
  60. },
  61. {
  62. date: '周三',
  63. time: [],
  64. },
  65. {
  66. date: '周四',
  67. time: [],
  68. },
  69. {
  70. date: '周五',
  71. time: [],
  72. },
  73. {
  74. date: '周六',
  75. time: [],
  76. },
  77. {
  78. date: '周日',
  79. time: [],
  80. },
  81. ],
  82. selectFlag: false,
  83. max: {
  84. x: 0,
  85. y: 0,
  86. },
  87. dataString: '',
  88. }
  89. },
  90. methods: {
  91. // handleClose(item) {
  92. // var index = Math.floor(item / 24)
  93. // var key = item % 7
  94. // if (this.timeData[index].time[key].value == false) {
  95. // if (this.timeData[index].time[key].isSelected) {
  96. // this.timeData[index].time[key].isSelected = false
  97. // } else {
  98. // this.$set(this.timeData[index].time[key], 'isSelected', true)
  99. // }
  100. // }
  101. // },
  102. showOne(index, key) {
  103. // this.timeData[index].time[key].isSelected = !this.timeData[index].time[key].isSelected
  104. },
  105. mousedown: function (index, key) {
  106. this.selectStart = []
  107. this.selectFlag = true
  108. if (this.timeData[index].time[key].value == false) {
  109. if (this.timeData[index].time[key].isSelected) {
  110. this.timeData[index].time[key].isSelected = false
  111. } else {
  112. this.$set(this.timeData[index].time[key], 'isSelected', true)
  113. }
  114. }
  115. this.selectStart.push({
  116. index: index,
  117. key: key,
  118. })
  119. },
  120. mouseover: function (index, key) {
  121. // x 垂直方向 y 水平方向
  122. if (this.selectFlag) {
  123. if (index >= this.max.x) {
  124. this.max.x = index
  125. }
  126. if (key >= this.max.y) {
  127. this.max.y = key
  128. }
  129. var start = {
  130. x: this.selectStart[0].index,
  131. y: this.selectStart[0].key,
  132. }
  133. var end = {
  134. x: index,
  135. y: key,
  136. }
  137. for (var i = end.x; i <= this.max.x; i++) {
  138. for (var j = end.y; j <= this.max.y; j++) {
  139. this.$set(this.timeData[i].time[j], 'isSelected', false)
  140. }
  141. }
  142. /* 渲染选中的区域 */
  143. // for (var i = start.x; i <= end.x; i++) {
  144. // for (var j = start.y; j <= end.y; j++) {
  145. // // this.$set(this.timeData[i].time[j], 'isSelected', true)
  146. // this.$set(this.timeData[i].time[j], 'show', true)
  147. // }
  148. // }
  149. for (var i = start.x; i <= end.x; i++) {
  150. for (var j = start.y; j <= end.y; j++) {
  151. this.$set(this.timeData[i].time[j], 'isSelected', true)
  152. }
  153. }
  154. }
  155. },
  156. mouseup: function (index, key) {
  157. var start = {
  158. x: this.selectStart[0].index,
  159. y: this.selectStart[0].key,
  160. }
  161. var end = {
  162. x: index,
  163. y: key,
  164. }
  165. /* 渲染选中的区域 */
  166. var data = []
  167. var arr = []
  168. // for (let i = 0; i < this.timeData.length; i++) {
  169. // for (let j = 0; j < this.timeData[i].time.length; j++) {
  170. // this.timeData[i].time[j].show = false
  171. // }
  172. // }
  173. arr = data.concat(
  174. this.timeData[0].time,
  175. this.timeData[1].time,
  176. this.timeData[2].time,
  177. this.timeData[3].time,
  178. this.timeData[4].time,
  179. this.timeData[5].time,
  180. this.timeData[6].time
  181. )
  182. this.dataString = arr.map((item) => {
  183. if (item.isSelected) {
  184. return 1
  185. } else {
  186. return 0
  187. }
  188. })
  189. console.log(this.dataString.join(''))
  190. this.$emit('update:scheduleTime', this.dataString.join(''))
  191. this.selectFlag = false
  192. this.max = {
  193. x: 0,
  194. y: 0,
  195. }
  196. },
  197. mouseleave: function () {
  198. this.selectFlag = false
  199. },
  200. setItemDate(sum) {
  201. let i = sum
  202. if (i < 24) {
  203. return '周一' + i + ':00~' + (i + 1) + ':00'
  204. } else if (i < 48 && i >= 24) {
  205. return '周二' + (i - 24) + ':00~' + (i - 23) + ':00'
  206. } else if (i < 72 && i >= 48) {
  207. return '周三' + (i - 48) + ':00~' + (i - 47) + ':00'
  208. } else if (i < 96 && i >= 72) {
  209. return '周四' + (i - 72) + ':00~' + (i - 71) + ':00'
  210. } else if (i < 120 && i >= 96) {
  211. return '周五' + (i - 96) + ':00~' + (i - 95) + ':00'
  212. } else if (i < 144 && i >= 120) {
  213. return '周六' + (i - 120) + ':00~' + (i - 119) + ':00'
  214. } else {
  215. return '周日' + (i - 144) + ':00~' + (i - 143) + ':00'
  216. }
  217. },
  218. init() {
  219. var str = this.scheduleTime
  220. var arr = str.split('')
  221. this.timeData = [
  222. {
  223. date: '周一',
  224. time: [],
  225. },
  226. {
  227. date: '周二',
  228. time: [],
  229. },
  230. {
  231. date: '周三',
  232. time: [],
  233. },
  234. {
  235. date: '周四',
  236. time: [],
  237. },
  238. {
  239. date: '周五',
  240. time: [],
  241. },
  242. {
  243. date: '周六',
  244. time: [],
  245. },
  246. {
  247. date: '周日',
  248. time: [],
  249. },
  250. ]
  251. for (let i = 0; i < arr.length; i++) {
  252. if (i < 24) {
  253. this.timeData[0].time.push({ isSelected: arr[i] == 1 ? true : false, move: false, value: false })
  254. } else if (i < 48 && i >= 24) {
  255. this.timeData[1].time.push({ isSelected: arr[i] == 1 ? true : false, move: false, value: false })
  256. } else if (i < 72 && i >= 48) {
  257. this.timeData[2].time.push({ isSelected: arr[i] == 1 ? true : false, move: false, value: false })
  258. } else if (i < 96 && i >= 72) {
  259. this.timeData[3].time.push({ isSelected: arr[i] == 1 ? true : false, move: false, value: false })
  260. } else if (i < 120 && i >= 96) {
  261. this.timeData[4].time.push({ isSelected: arr[i] == 1 ? true : false, move: false, value: false })
  262. } else if (i < 144 && i >= 120) {
  263. this.timeData[5].time.push({ isSelected: arr[i] == 1 ? true : false, move: false, value: false })
  264. } else {
  265. this.timeData[6].time.push({ isSelected: arr[i] == 1 ? true : false, move: false, value: false })
  266. }
  267. }
  268. },
  269. },
  270. watch: {
  271. scheduleTime: {
  272. immediate: true, // immediate选项可以开启首次赋值监听
  273. handler(newVal, oldVal) {
  274. if (newVal == '' || newVal == null || newVal == undefined) {
  275. // this.scheduleTime=oldVal
  276. this.$emit('update:scheduleTime', oldVal)
  277. } else {
  278. this.init()
  279. }
  280. },
  281. },
  282. },
  283. }
  284. </script>
  285. <style lang="scss" scoped>
  286. .time_table {
  287. border: 1px solid #ccc;
  288. border-collapse: collapse;
  289. }
  290. .time_table th,
  291. .time_table td {
  292. border: 1px solid #ccc;
  293. text-align: center;
  294. }
  295. .time_table .unselectable {
  296. // width: 30px !important;
  297. height: 20px;
  298. }
  299. .active_select {
  300. background: cornflowerblue;
  301. }
  302. .active_select_move {
  303. background: aqua;
  304. }
  305. * {
  306. -webkit-touch-callout: none !important;
  307. -webkit-user-select: none !important;
  308. -moz-user-select: none !important;
  309. -ms-user-select: none !important;
  310. user-select: none !important;
  311. }
  312. </style>