|
@@ -1,208 +1,201 @@
|
|
|
|
|
|
<template>
|
|
|
- <div class="business">
|
|
|
- <Head :headText="headText"></Head>
|
|
|
- <!-- <div class="count-top-right">
|
|
|
+ <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
|
|
|
- :disabled="isDisabled(date)"
|
|
|
- :class="{isBlue:item.isUpdate}"
|
|
|
- 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>
|
|
|
+ </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
|
|
|
+ :disabled='isDisabled(date)'
|
|
|
+ :class='{isBlue:item.isUpdate}'
|
|
|
+ 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'
|
|
|
+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,6)+'01'
|
|
|
- // + (month >= 10 ? month : ('0'+month) )+ date.slice(6,8)
|
|
|
-
|
|
|
- },
|
|
|
- lt(){
|
|
|
- let date = timestamp2String(+this.value)
|
|
|
- // let month = parseInt(date.slice(4,6))+1
|
|
|
- // console.log(date)
|
|
|
- // console.log(month)
|
|
|
- return date.slice(0,6)+'31'
|
|
|
- // + (month >= 10 ? month : ('0'+month) )+ date.slice(6,8)
|
|
|
- },
|
|
|
- },
|
|
|
- watch:{
|
|
|
- value(newVal, oldVal){
|
|
|
- if(newVal.getMonth() != oldVal.getMonth()) {
|
|
|
- this.getHours()
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- isDisabled(date) {
|
|
|
- const item = Number(timestamp2String(+date).substr(0, 8))
|
|
|
- const now = Number(timestamp2String(+new Date()).substr(0, 8))
|
|
|
- return item < now
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ headText: '营业时间调整',
|
|
|
+ content: [],
|
|
|
+ date: timestamp2String(+new Date()),
|
|
|
+ value: new Date()
|
|
|
+ }
|
|
|
},
|
|
|
- translate(){
|
|
|
- this.content.forEach(el=>{
|
|
|
- this.$set(el, 'timeRange', [new Date(toTimestamp(el.date+''+el.openTime)), new Date(toTimestamp(el.date+''+el.endTime))])
|
|
|
- })
|
|
|
+ components: {
|
|
|
+ Head,
|
|
|
+ MonthTemp
|
|
|
},
|
|
|
- pickerVal(val) {
|
|
|
- this.date = val
|
|
|
- console.log(this.date)
|
|
|
-
|
|
|
+ computed: {
|
|
|
+ gte() {
|
|
|
+ let date = timestamp2String(+this.value)
|
|
|
+ // let month = parseInt(date.slice(4,6))-1
|
|
|
+ return date.slice(0, 6) + '01'
|
|
|
+ // + (month >= 10 ? month : ('0'+month) )+ date.slice(6,8)
|
|
|
+ },
|
|
|
+ lt() {
|
|
|
+ let date = timestamp2String(+this.value)
|
|
|
+ // let month = parseInt(date.slice(4,6))+1
|
|
|
+ // console.log(date)
|
|
|
+ // console.log(month)
|
|
|
+ return date.slice(0, 6) + '31'
|
|
|
+ // + (month >= 10 ? month : ('0'+month) )+ date.slice(6,8)
|
|
|
+ }
|
|
|
},
|
|
|
- getHours(){
|
|
|
- this.content = []
|
|
|
- let params = {
|
|
|
- postParams:{
|
|
|
- criteria:{
|
|
|
- projectId:this.$store.state.projectId,
|
|
|
- date:{
|
|
|
- "$gte":this.gte,
|
|
|
- "$lt": this.lt
|
|
|
+ watch: {
|
|
|
+ value(newVal, oldVal) {
|
|
|
+ if (newVal.getMonth() != oldVal.getMonth()) {
|
|
|
+ this.getHours()
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- 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),
|
|
|
+ methods: {
|
|
|
+ isDisabled(date) {
|
|
|
+ const item = Number(timestamp2String(+date).substr(0, 8))
|
|
|
+ const now = Number(timestamp2String(+new Date()).substr(0, 8))
|
|
|
+ return item < now
|
|
|
+ },
|
|
|
+ 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 => {
|
|
|
+ this.getHours()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 只展示当前月份的
|
|
|
+ showTimeDuration(date, item) {
|
|
|
+ const currentMonth = this.value.getMonth() + 1
|
|
|
+ const nodeMonth = date.getMonth() + 1
|
|
|
+ return currentMonth == nodeMonth && timestamp2String(+date).substr(0, 8) == item.date
|
|
|
}
|
|
|
- }
|
|
|
- updateHours(params).then(res=>{
|
|
|
- this.getHours()
|
|
|
- })
|
|
|
},
|
|
|
- // 只展示当前月份的
|
|
|
- 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()
|
|
|
}
|
|
|
- },
|
|
|
- mounted(){
|
|
|
- this.getHours()
|
|
|
- }
|
|
|
-};
|
|
|
+}
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.count-top-right {
|
|
|
- width: 148px;
|
|
|
- padding: 16px;
|
|
|
+ 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);
|
|
|
+ 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;
|
|
|
- }
|
|
|
- .isBlue{
|
|
|
- color: #fff !important;
|
|
|
- background:rgba(0,145,255,1) !important;
|
|
|
- .el-range-input {
|
|
|
- color: #fff !important;
|
|
|
- background:rgba(0,145,255,1) !important;
|
|
|
- }
|
|
|
- .el-range-separator {
|
|
|
- color: #fff !important;
|
|
|
- }
|
|
|
- }
|
|
|
+ .el-calendar-table thead th {
|
|
|
+ text-align: center;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ .isBlue {
|
|
|
+ color: #fff !important;
|
|
|
+ background: rgba(0, 145, 255, 1) !important;
|
|
|
+ .el-range-input {
|
|
|
+ color: #fff !important;
|
|
|
+ background: rgba(0, 145, 255, 1) !important;
|
|
|
+ }
|
|
|
+ .el-range-separator {
|
|
|
+ color: #fff !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|