Guoxiaohuan 5 years ago
parent
commit
6b22d9f6d5
2 changed files with 97 additions and 77 deletions
  1. 75 66
      src/views/doBusiness/index.vue
  2. 22 11
      src/views/doBusiness/monthTemp.vue

+ 75 - 66
src/views/doBusiness/index.vue

@@ -7,25 +7,21 @@
     </div>
     <el-calendar class="doBusinessContainer" :first-day-of-week="7">
       <template slot="dateCell" slot-scope="{date, data}">
-        <template v-for="(item,index) in content" >
-          <div 
-          class="time-duration" 
-          :key="index"
-          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 v-for="(item,index) in content">
+          <div class="time-duration" :key="index" 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>
@@ -35,83 +31,96 @@
 <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 { queryHours, updateHours } from "@/api/doBusiness/business.js";
+import { toTimestamp, timestamp2String } from "@/utils/helper.js";
 export default {
   data() {
     return {
       headText: "营业时间调整",
-      content:[],
-      date:timestamp2String(+new Date())
+      content: [],
+      date: timestamp2String(+new Date())
     };
   },
   components: {
     Head,
     MonthTemp
   },
-  computed:{
-    gte(){
-      let month = parseInt(this.date.slice(4,6))-1
-      return this.date.slice(0,4) + (month > 10 ? month : ('0'+month) )+ this.date.slice(6,8)
-     
-    },
-    lt(){
-       let month = parseInt(this.date.slice(4,6))+1
-       return this.date.slice(0,4) + (month > 10 ? month : ('0'+month) )+ this.date.slice(6,8)
+  computed: {
+    gte() {
+      let month = parseInt(this.date.slice(4, 6)) - 1;
+      return (
+        this.date.slice(0, 4) +
+        (month > 10 ? month : "0" + month) +
+        this.date.slice(6, 8)
+      );
     },
+    lt() {
+      let month = parseInt(this.date.slice(4, 6)) + 1;
+      return (
+        this.date.slice(0, 4) +
+        (month > 10 ? month : "0" + month) +
+        this.date.slice(6, 8)
+      );
+    }
   },
 
   methods: {
-    translate(){
-      this.content.forEach(el=>{
-        this.$set(el, 'timeRange', [new Date(toTimestamp(el.date+''+el.openTime)), new Date(toTimestamp(el.date+''+el.endTime))])
-      })
+    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) {
       console.log(val);
-      this.date = val
+      this.date = val;
+      this.getHours();
+
+      console.log(this.date);
     },
-    getHours(){
-      console.log(this.date)
+    getHours() {
+      console.log(this.date);
       let params = {
-        postParams:{
-          criteria:{
-            projectId:this.$store.state.projectId,
-            date:{
-              "$gte":this.gte,
-              "$lt": this.lt
+        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()
+      };
+      queryHours(params).then(res => {
+        this.content = res.content ? res.content : [];
+        if (this.content.length > 0) {
+          this.translate();
         }
-       
-      })
+      });
     },
-    setHours(val){
-      console.log(val)
+    setHours(val) {
+      console.log(val);
       let params = {
-        postParams:{
-          projectId:this.$store.state.projectId,
-          date: timestamp2String(val[0]).substr(0,8),
-          openTime:timestamp2String(val[0]).substr(8,6),
-          endTime: timestamp2String(val[1]).substr(8,6),
+        postParams: {
+          projectId: this.$store.state.projectId,
+          date: timestamp2String(val[0]).substr(0, 8),
+          openTime: timestamp2String(val[0]).substr(8, 6),
+          endTime: timestamp2String(val[1]).substr(8, 6)
         }
-      }
-      updateHours(params).then(res=>{
-        console.log(res)
-      })
+      };
+      updateHours(params).then(res => {
+        console.log(res);
+      });
     },
     showTimeDuration(date, item) {
-      return timestamp2String(+date).substr(0, 8) == item.date
+      return timestamp2String(+date).substr(0, 8) == item.date;
     }
   },
-  mounted(){
-    this.getHours()
+  mounted() {
+    console.log(this.date);
+    this.getHours();
   }
 };
 </script>

+ 22 - 11
src/views/doBusiness/monthTemp.vue

@@ -2,7 +2,13 @@
   <div class="date-temp">
     <span class="arrow-left" @click="pickerChangeLeft"></span>
     <span class="arrow-line arrow-line1" @click="pickerChangeLeft"></span>
-    <el-date-picker v-model="pickerVal1" type="month" format="yyyy.MM" value-format="yyyy.MM"></el-date-picker>
+    <el-date-picker
+      v-model="pickerVal1"
+      @change="changeVal"
+      type="month"
+      format="yyyy.MM"
+      value-format="yyyyMMddhhmmss"
+    ></el-date-picker>
     <span class="arrow-line" @click="pickerChangeRight"></span>
     <span class="arrow-right" @click="pickerChangeRight"></span>
   </div>
@@ -35,18 +41,23 @@ export default {
       }
       this.$emit("pickerVal", this.pickerVal1);
     },
+    changeVal(val) {
+      console.log(val)
+      this.$emit("pickerVal", val);
+    },
     pickerChangeRight() {
       if (this.pickerVal1) {
-        let dateTime = new Date(this.pickerVal1);
-        let newData = this.formatter(
-          new Date(dateTime.setMonth(dateTime.getMonth() + 1))
-        );
-        this.pickerVal1 =
-          newData.slice(0, 4) +
-          "." +
-          newData.slice(4, 6) +
-          "." +
-          newData.slice(6, 8);
+        console.log(this.pickerVal1);
+        // let dateTime = new Date(this.pickerVal1);
+        // let newData = this.formatter(
+        //   new Date(dateTime.setMonth(dateTime.getMonth() + 1))
+        // );
+        // this.pickerVal1 =
+        //   newData.slice(0, 4) +
+        //   "." +
+        //   newData.slice(4, 6) +
+        //   "." +
+        //   newData.slice(6, 8);
       }
       this.$emit("pickerVal", this.pickerVal1);
     }