index.vue 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. <template>
  2. <div class="business">
  3. <Head :headText="headText"></Head>
  4. <!-- <div class="count-top-right">
  5. <month-temp @pickerVal="pickerVal"></month-temp>
  6. </div> -->
  7. <el-calendar class="doBusinessContainer" v-model="value" :first-day-of-week="7">
  8. <template slot="dateCell" slot-scope="{date, data}">
  9. <template v-for="item in content" >
  10. <div
  11. class="time-duration"
  12. :key="item.id"
  13. v-if="showTimeDuration(date, item)"
  14. >
  15. <el-time-picker
  16. is-range
  17. v-model="item.timeRange"
  18. size="mini"
  19. range-separator="-"
  20. start-placeholder="开始时间"
  21. end-placeholder="结束时间"
  22. format="HH:mm"
  23. value-format="timestamp"
  24. @change="setHours"
  25. placeholder="选择时间范围">
  26. </el-time-picker>
  27. </div>
  28. </template>
  29. <div class="dataJoin">{{ data.day.split('-').slice(2).join('')}}</div>
  30. </template>
  31. </el-calendar>
  32. </div>
  33. </template>
  34. <script>
  35. import Head from "../main/index";
  36. import MonthTemp from "./monthTemp";
  37. import {queryHours,updateHours} from '@/api/doBusiness/business.js'
  38. import {toTimestamp,timestamp2String} from '@/utils/helper.js'
  39. export default {
  40. data() {
  41. return {
  42. headText: "营业时间调整",
  43. content:[],
  44. date:timestamp2String(+new Date()),
  45. value: new Date(),
  46. };
  47. },
  48. components: {
  49. Head,
  50. MonthTemp
  51. },
  52. computed:{
  53. gte(){
  54. let date = timestamp2String(+this.value)
  55. let month = parseInt(date.slice(4,6))-1
  56. return date.slice(0,4) + (month > 10 ? month : ('0'+month) )+ date.slice(6,8)
  57. },
  58. lt(){
  59. let date = timestamp2String(+this.value)
  60. let month = parseInt(date.slice(4,6))+1
  61. return date.slice(0,4) + (month > 10 ? month : ('0'+month) )+ date.slice(6,8)
  62. },
  63. },
  64. watch:{
  65. value(newVal, oldVal){
  66. if(newVal.getMonth() != oldVal.getMonth()) {
  67. this.getHours()
  68. }
  69. }
  70. },
  71. methods: {
  72. translate(){
  73. this.content.forEach(el=>{
  74. this.$set(el, 'timeRange', [new Date(toTimestamp(el.date+''+el.openTime)), new Date(toTimestamp(el.date+''+el.endTime))])
  75. })
  76. },
  77. pickerVal(val) {
  78. this.date = val
  79. console.log(this.date)
  80. },
  81. getHours(){
  82. this.content = []
  83. let params = {
  84. postParams:{
  85. criteria:{
  86. projectId:this.$store.state.projectId,
  87. date:{
  88. "$gte":this.gte,
  89. "$lt": this.lt
  90. }
  91. }
  92. }
  93. }
  94. queryHours(params).then(res=>{
  95. this.content= res.content?res.content:[]
  96. if(this.content.length>0){
  97. this.translate()
  98. }
  99. })
  100. },
  101. setHours(val){
  102. console.log(val)
  103. let params = {
  104. postParams:{
  105. projectId:this.$store.state.projectId,
  106. // 这里val[0]月份已经 +1 了,
  107. date: timestamp2String(val[0], true).substr(0,8),
  108. openTime:timestamp2String(val[0]).substr(8,6),
  109. endTime: timestamp2String(val[1]).substr(8,6),
  110. }
  111. }
  112. updateHours(params).then(res=>{
  113. console.log(res)
  114. })
  115. },
  116. // 只展示当前月份的
  117. showTimeDuration(date, item) {
  118. const currentMonth = this.value.getMonth() + 1
  119. const nodeMonth = date.getMonth() + 1
  120. return currentMonth == nodeMonth && timestamp2String(+date).substr(0, 8) == item.date
  121. }
  122. },
  123. mounted(){
  124. this.getHours()
  125. }
  126. };
  127. </script>
  128. <style lang="scss" scoped>
  129. .count-top-right {
  130. width: 148px;
  131. padding: 16px;
  132. }
  133. .doBusinessContainer {
  134. margin-top: 20px;
  135. background: #fff;
  136. .time-duration {
  137. .el-input__inner {
  138. width: 134px;
  139. padding: 0;
  140. border: none;
  141. font-size: 14px;
  142. font-family: PingFangSC-Regular, PingFang SC;
  143. font-weight: 400;
  144. color: rgba(100, 108, 115, 1);
  145. line-height: 24px;
  146. padding: 1px 12px;
  147. height: 24px;
  148. background: rgba(245, 246, 247, 1);
  149. border-radius: 12px;
  150. margin-right: 17px;
  151. }
  152. .el-range-editor .el-range-input {
  153. border: none;
  154. background: rgba(245, 246, 247, 1);
  155. }
  156. }
  157. }
  158. </style>
  159. <style lang="scss">
  160. .business {
  161. .el-calendar-table thead th {
  162. text-align: right;
  163. height: 20px;
  164. font-size: 14px;
  165. font-family: PingFangSC-Regular, PingFang SC;
  166. font-weight: 400;
  167. color: rgba(100, 106, 115, 1);
  168. line-height: 20px;
  169. padding-right: 15px;
  170. }
  171. // .el-calendar__header {
  172. // display: none;
  173. // }
  174. .el-range-editor--mini .el-range-input {
  175. background: #f5f6f7;
  176. }
  177. .el-calendar-table .el-calendar-day {
  178. display: flex;
  179. }
  180. }
  181. </style>