guoxiaohuan 5 роки тому
батько
коміт
c0964a414a
1 змінених файлів з 173 додано та 180 видалено
  1. 173 180
      src/views/doBusiness/index.vue

+ 173 - 180
src/views/doBusiness/index.vue

@@ -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>