123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187 |
- <template>
- <div class="business">
- <Head :headText="headText"></Head>
- <!-- <div class="count-top-right">
- <month-temp @pickerVal="pickerVal"></month-temp>
- </div> -->
- <el-calendar class="doBusinessContainer" v-model="value" :first-day-of-week="7">
- <template slot="dateCell" slot-scope="{date, data}">
- <template v-for="item in content" >
- <div
- class="time-duration"
- :key="item.id"
- v-if="showTimeDuration(date, item)"
- >
- <el-time-picker
- is-range
- v-model="item.timeRange"
- size="mini"
- range-separator="-"
- start-placeholder="开始时间"
- end-placeholder="结束时间"
- format="HH:mm"
- value-format="timestamp"
- @change="setHours"
- placeholder="选择时间范围">
- </el-time-picker>
- </div>
- </template>
- <div class="dataJoin">{{ data.day.split('-').slice(2).join('')}}</div>
- </template>
- </el-calendar>
- </div>
- </template>
- <script>
- import Head from "../main/index";
- import MonthTemp from "./monthTemp";
- import {queryHours,updateHours} from '@/api/doBusiness/business.js'
- import {toTimestamp,timestamp2String} from '@/utils/helper.js'
- export default {
- data() {
- return {
- headText: "营业时间调整",
- content:[],
- date:timestamp2String(+new Date()),
- value: new Date(),
- };
- },
- components: {
- Head,
- MonthTemp
- },
- computed:{
- gte(){
- let date = timestamp2String(+this.value)
- let month = parseInt(date.slice(4,6))-1
- return date.slice(0,4) + (month > 10 ? month : ('0'+month) )+ date.slice(6,8)
-
- },
- lt(){
- let date = timestamp2String(+this.value)
- let month = parseInt(date.slice(4,6))+1
- return date.slice(0,4) + (month > 10 ? month : ('0'+month) )+ date.slice(6,8)
- },
- },
- watch:{
- value(newVal, oldVal){
- if(newVal.getMonth() != oldVal.getMonth()) {
- this.getHours()
- }
- }
- },
- methods: {
- translate(){
- this.content.forEach(el=>{
- this.$set(el, 'timeRange', [new Date(toTimestamp(el.date+''+el.openTime)), new Date(toTimestamp(el.date+''+el.endTime))])
- })
- },
- pickerVal(val) {
- this.date = val
- console.log(this.date)
-
- },
- getHours(){
- this.content = []
- let params = {
- postParams:{
- criteria:{
- projectId:this.$store.state.projectId,
- date:{
- "$gte":this.gte,
- "$lt": this.lt
- }
- }
- }
- }
- queryHours(params).then(res=>{
- this.content= res.content?res.content:[]
- if(this.content.length>0){
- this.translate()
- }
-
- })
- },
- setHours(val){
- console.log(val)
- let params = {
- postParams:{
- projectId:this.$store.state.projectId,
- // 这里val[0]月份已经 +1 了,
- date: timestamp2String(val[0], true).substr(0,8),
- openTime:timestamp2String(val[0]).substr(8,6),
- endTime: timestamp2String(val[1]).substr(8,6),
- }
- }
- updateHours(params).then(res=>{
- console.log(res)
- })
- },
- // 只展示当前月份的
- showTimeDuration(date, item) {
- const currentMonth = this.value.getMonth() + 1
- const nodeMonth = date.getMonth() + 1
- return currentMonth == nodeMonth && timestamp2String(+date).substr(0, 8) == item.date
- }
- },
- mounted(){
- this.getHours()
- }
- };
- </script>
- <style lang="scss" scoped>
- .count-top-right {
- width: 148px;
- padding: 16px;
- }
- .doBusinessContainer {
- margin-top: 20px;
- background: #fff;
- .time-duration {
- .el-input__inner {
- width: 134px;
- padding: 0;
- border: none;
- font-size: 14px;
- font-family: PingFangSC-Regular, PingFang SC;
- font-weight: 400;
- color: rgba(100, 108, 115, 1);
- line-height: 24px;
- padding: 1px 12px;
- height: 24px;
- background: rgba(245, 246, 247, 1);
- border-radius: 12px;
- margin-right: 17px;
- }
- .el-range-editor .el-range-input {
- border: none;
- background: rgba(245, 246, 247, 1);
- }
- }
- }
- </style>
- <style lang="scss">
- .business {
- .el-calendar-table thead th {
- text-align: right;
- height: 20px;
- font-size: 14px;
- font-family: PingFangSC-Regular, PingFang SC;
- font-weight: 400;
- color: rgba(100, 106, 115, 1);
- line-height: 20px;
- padding-right: 15px;
- }
- // .el-calendar__header {
- // display: none;
- // }
- .el-range-editor--mini .el-range-input {
- background: #f5f6f7;
- }
- .el-calendar-table .el-calendar-day {
- display: flex;
- }
- }
- </style>
|