init

package.json

@@ -36,6 +36,7 @@
     "vue-audio-player": "0.0.2",
     "vue-axios": "^2.1.2",
     "vue-bus": "^1.2.1",
+    "vue-calendar-component": "^2.8.2",
     "vue-clipboard2": "^0.3.0",
     "vue-cron": "^1.0.9",
     "vue-echarts": "^4.0.1",

src/api/modules/api.js

@@ -984,3 +984,27 @@ export function waitingForOperation(data) {
     data
   })
 }
+// 设备绑定
+export function scheduling(query) {
+  return request({
+    url: 'autoSR/zkAgentPoolCalendar/scheduling',
+    method:'get',
+    params:query
+  })
+}
+// 设备批量绑定
+export function schedulings(query) {
+  return request({
+    url: 'autoSR/zkAgentPoolCalendar/schedulings',
+    method:'get',
+    params:query
+  })
+}
+// 获取绑定的排版
+export function findByAgentId(query) {
+  return request({
+    url: 'autoSR/zkAgentPoolCalendar/findByAgentId',
+    method:'get',
+    params:query
+  })
+}

src/components/Calendar/calendar.js

@@ -0,0 +1,121 @@
+export default {
+    // 当某月的天数
+    getDaysInOneMonth(date) {
+        const year = date.getFullYear();
+        const month = date.getMonth() + 1;
+        const d = new Date(year, month, 0);
+        return d.getDate();
+    },
+    // 向前空几个
+    getMonthweek(date) {
+        const year = date.getFullYear();
+        const month = date.getMonth() + 1;
+        const dateFirstOne = new Date(year + '/' + month + '/1');
+        return this.sundayStart ?
+            dateFirstOne.getDay() == 0 ? 7 : dateFirstOne.getDay() :
+            dateFirstOne.getDay() == 0 ? 6 : dateFirstOne.getDay() - 1;
+    },
+    /**
+     * 获取当前日期上个月或者下个月
+    */
+    getOtherMonth(date, str = 'nextMonth') {
+        const timeArray = this.dateFormat(date).split('/');
+        const year = timeArray[0];
+        const month = timeArray[1];
+        const day = timeArray[2];
+        let year2 = year;
+        let month2;
+        if (str === 'nextMonth') {
+            month2 = parseInt(month) + 1;
+            if (month2 == 13) {
+                year2 = parseInt(year2) + 1;
+                month2 = 1;
+            }
+        } else {
+            month2 = parseInt(month) - 1;
+            if (month2 == 0) {
+                year2 = parseInt(year2) - 1;
+                month2 = 12;
+            }
+        }
+        let day2 = day;
+        const days2 = new Date(year2, month2, 0).getDate();
+        if (day2 > days2) {
+            day2 = days2;
+        }
+        if (month2 < 10) {
+            month2 = '0' + month2;
+        }
+        if (day2 < 10) {
+            day2 = '0' + day2;
+        }
+        const t2 = year2 + '/' + month2 + '/' + day2;
+        return new Date(t2);
+    },
+    // 上个月末尾的一些日期
+    getLeftArr(date) {
+        const arr = [];
+        const leftNum = this.getMonthweek(date);
+        const num = this.getDaysInOneMonth(this.getOtherMonth(date, 'preMonth')) - leftNum + 1;
+        const preDate = this.getOtherMonth(date, 'preMonth');
+        // 上个月多少开始
+        for (let i = 0; i < leftNum; i++) {
+            const nowTime = preDate.getFullYear() + '/' + (preDate.getMonth() + 1) + '/' + (num + i);
+            arr.push({
+                id: num + i,
+                date: nowTime,
+                isToday: false,
+                otherMonth: 'preMonth',
+            });
+        }
+        return arr;
+    },
+    // 下个月末尾的一些日期
+    getRightArr(date) {
+        const arr = [];
+        const nextDate = this.getOtherMonth(date, 'nextMonth');
+        const leftLength = this.getDaysInOneMonth(date) + this.getMonthweek(date);
+        const _length = 7 - leftLength % 7;
+        for (let i = 0; i < _length; i++) {
+            const nowTime = nextDate.getFullYear() + '/' + (nextDate.getMonth() + 1) + '/' + (i + 1);
+            arr.push({
+                id: i + 1,
+                date: nowTime,
+                isToday: false,
+                otherMonth: 'nextMonth',
+            });
+        }
+        return arr;
+    },
+    // format日期
+    dateFormat(date) {
+        date = typeof date === 'string' ? new Date(date.replace(/\-/g, '/')) : date;
+        return date.getFullYear() + '/' + (date.getMonth() + 1) + '/'
+            + date.getDate();
+    },
+    // 获取某月的列表不包括上月和下月
+    getMonthListNoOther(date) {
+        const arr = [];
+        const num = this.getDaysInOneMonth(date);
+        const year = date.getFullYear();
+        const month = date.getMonth() + 1;
+        const toDay = this.dateFormat(new Date());
+
+        for (let i = 0; i < num; i++) {
+            const nowTime = year + '/' + month + '/' + (i + 1);
+            arr.push({
+                id: i + 1,
+                date: nowTime,
+                isToday: toDay === nowTime,
+                otherMonth: 'nowMonth',
+            });
+        }
+        return arr;
+    },
+    // 获取某月的列表 用于渲染
+    getMonthList(date) {
+        return [...this.getLeftArr(date), ...this.getMonthListNoOther(date), ...this.getRightArr(date)];
+    },
+    // 默认是周一开始
+    sundayStart: false,
+};

src/components/Calendar/calendar.vue

@@ -0,0 +1,344 @@
+<style scoped>
+@media screen and (min-width: 500px) {
+  .wh_item_date:hover {
+    background: #71c7a5;
+    cursor: pointer;
+  }
+}
+* {
+  margin: 0;
+  padding: 0;
+}
+
+.wh_container {
+  max-width: 500px;
+  margin: auto;
+}
+
+li {
+  list-style-type: none;
+}
+.wh_top_changge {
+  display: flex;
+}
+
+.wh_top_changge li {
+  cursor: pointer;
+  display: flex;
+  /* color: #fff; */
+  font-size: 18px;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  height: 47px;
+}
+
+.wh_top_changge .wh_content_li {
+  cursor: auto;
+  flex: 2.5;
+}
+.wh_content_all {
+  /* font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
+    "Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif; */
+  /* background-color: #0fc37c; */
+  width: 100%;
+  overflow: hidden;
+  padding-bottom: 8px;
+}
+
+.wh_content {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0 3% 0 3%;
+  width: 100%;
+}
+
+.wh_content:first-child .wh_content_item_tag,
+.wh_content:first-child .wh_content_item {
+  color: #ddd;
+  font-size: 16px;
+}
+
+.wh_content_item,
+wh_content_item_tag {
+  font-size: 15px;
+  width: 11.4%;
+  text-align: center;
+  /* color: #fff; */
+  position: relative;
+  margin: 5px;
+}
+.wh_content_item {
+  height: 40px;
+}
+
+.wh_top_tag {
+  width: 40px;
+  height: 40px;
+  line-height: 40px;
+  margin: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.wh_item_date {
+  width: 40px;
+  height: 40px;
+  line-height: 40px;
+  margin: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.wh_jiantou1 {
+  width: 12px;
+  height: 12px;
+  border-top: 2px solid #ccc;
+  border-left: 2px solid #ccc;
+  transform: rotate(-45deg);
+}
+
+.wh_jiantou1:active,
+.wh_jiantou2:active {
+  border-color: #ddd;
+}
+
+.wh_jiantou2 {
+  width: 12px;
+  height: 12px;
+  border-top: 2px solid #ccc;
+  border-right: 2px solid #ccc;
+  transform: rotate(45deg);
+}
+.wh_content_item > .wh_isMark {
+  margin: auto;
+  border-radius: 100px;
+  background: blue;
+  z-index: 2;
+}
+.wh_content_item .wh_other_dayhide {
+  color: #bfbfbf;
+}
+.wh_content_item .wh_want_dayhide {
+  color: #bfbfbf;
+}
+.wh_content_item .wh_isToday {
+  background: yellow;
+  border-radius: 100px;
+}
+.wh_content_item .wh_chose_day {
+  /* background: red; */
+  border-radius: 100px;
+}
+</style>
+<template>
+  <section class="wh_container">
+    <div class="wh_content_all">
+      <div class="wh_top_changge">
+        <li @click="PreMonth(myDate,false)">
+          <div class="wh_jiantou1"></div>
+        </li>
+        <li class="wh_content_li">{{dateTop}}</li>
+        <li @click="NextMonth(myDate,false)">
+          <div class="wh_jiantou2"></div>
+        </li>
+      </div>
+      <div class="wh_content">
+        <div class="wh_content_item" v-for="tag in textTop">
+          <div class="wh_top_tag">{{tag}}</div>
+        </div>
+      </div>
+      <div class="wh_content">
+        <div class="wh_content_item" v-for="(item,index) in list" @click="clickDay(item,index)">
+          <div
+            class="wh_item_date"
+            v-bind:class="[{ wh_isMark: item.isMark},{wh_other_dayhide:item.otherMonth!=='nowMonth'},{wh_want_dayhide:item.dayHide},{wh_isToday:item.isToday},{wh_chose_day:item.chooseDay},setClass(item)]"
+          >{{item.id}}</div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+<script>
+import timeUtil from "./calendar";
+export default {
+  data() {
+    return {
+      myDate: [],
+      list: [],
+      historyChose: [],
+      dateTop: ""
+    };
+  },
+  props: {
+    markDate: {
+      type: Array,
+      default: () => []
+    },
+    markDateMore: {
+      type: Array,
+      default: () => []
+    },
+    textTop: {
+      type: Array,
+      default: () => ["一", "二", "三", "四", "五", "六", "日"]
+    },
+    sundayStart: {
+      type: Boolean,
+      default: () => false
+    },
+    agoDayHide: {
+      type: String,
+      default: `0`
+    },
+    futureDayHide: {
+      type: String,
+      default: `2554387200`
+    }
+  },
+  created() {
+    this.intStart();
+    this.myDate = new Date();
+  },
+  methods: {
+    intStart() {
+      timeUtil.sundayStart = this.sundayStart;
+    },
+    setClass(data) {
+      let obj = {};
+      obj[data.markClassName] = data.markClassName;
+      return obj;
+    },
+    clickDay: function(item, index) {
+      // console.log(item,'123');
+      if (item.otherMonth === "nowMonth" && !item.dayHide) {
+        this.getList(this.myDate, item.date);
+      }
+      if (item.otherMonth !== "nowMonth") {
+        item.otherMonth === "preMonth"
+          ? this.PreMonth(item.date)
+          : this.NextMonth(item.date);
+      }
+    },
+    ChoseMonth: function(date, isChosedDay = true) {
+      date = timeUtil.dateFormat(date);
+      this.myDate = new Date(date);
+      this.$emit("changeMonth", timeUtil.dateFormat(this.myDate));
+      if (isChosedDay) {
+        this.getList(this.myDate, date, isChosedDay);
+      } else {
+        this.getList(this.myDate);
+      }
+    },
+    PreMonth: function(date, isChosedDay = true) {
+      date = timeUtil.dateFormat(date);
+      this.myDate = timeUtil.getOtherMonth(this.myDate, "preMonth");
+      this.$emit("changeMonth", timeUtil.dateFormat(this.myDate));
+      if (isChosedDay) {
+        this.getList(this.myDate, date, isChosedDay);
+      } else {
+        this.getList(this.myDate);
+      }
+    },
+    NextMonth: function(date, isChosedDay = true) {
+      date = timeUtil.dateFormat(date);
+      this.myDate = timeUtil.getOtherMonth(this.myDate, "nextMonth");
+      this.$emit("changeMonth", timeUtil.dateFormat(this.myDate));
+      if (isChosedDay) {
+        this.getList(this.myDate, date, isChosedDay);
+      } else {
+        this.getList(this.myDate);
+      }
+    },
+    forMatArgs: function() {
+      let markDate = this.markDate;
+      let markDateMore = this.markDateMore;
+      markDate = markDate.map(k => {
+        return timeUtil.dateFormat(k);
+      });
+      markDateMore = markDateMore.map(k => {
+        k.date = timeUtil.dateFormat(k.date);
+        return k;
+      });
+      return [markDate, markDateMore];
+    },
+    getList: function(date, chooseDay, isChosedDay = true) {
+      const [markDate, markDateMore] = this.forMatArgs();
+      this.dateTop = `${date.getFullYear()}年${date.getMonth() + 1}月`;
+      let arr = timeUtil.getMonthList(this.myDate);
+      for (let i = 0; i < arr.length; i++) {
+        let markClassName = "";
+        let k = arr[i];
+        k.chooseDay = false;
+        const nowTime = k.date;
+        const t = new Date(nowTime).getTime() / 1000;
+        //看每一天的class
+        for (const c of markDateMore) {
+          if (c.date === nowTime) {
+            markClassName = c.className || "";
+          }
+        }
+        //标记选中某些天 设置class
+        k.markClassName = markClassName;
+        k.isMark = markDate.indexOf(nowTime) > -1;
+        //无法选中某天
+        k.dayHide = t < this.agoDayHide || t > this.futureDayHide;
+        if (k.isToday) {
+          this.$emit("isToday", nowTime);
+        }
+        let flag = !k.dayHide && k.otherMonth === "nowMonth";
+        if (chooseDay && chooseDay === nowTime && flag) {
+          this.$emit("choseDay", nowTime);
+          this.historyChose.push(nowTime);
+          k.chooseDay = true;
+        } else if (
+          this.historyChose[this.historyChose.length - 1] === nowTime &&
+          !chooseDay &&
+          flag
+        ) {
+          k.chooseDay = true;
+        }
+      }
+      this.list = arr;
+    }
+  },
+  mounted() {
+    this.getList(this.myDate);
+  },
+  watch: {
+    markDate: {
+      handler(val, oldVal) {
+        this.getList(this.myDate);
+      },
+      deep: true
+    },
+    markDateMore: {
+      handler(val, oldVal) {
+        this.getList(this.myDate);
+      },
+      deep: true
+    },
+    agoDayHide: {
+      handler(val, oldVal) {
+        this.getList(this.myDate);
+      },
+      deep: true
+    },
+    futureDayHide: {
+      handler(val, oldVal) {
+        this.getList(this.myDate);
+      },
+      deep: true
+    },
+    sundayStart: {
+      handler(val, oldVal) {
+        this.intStart();
+        this.getList(this.myDate);
+      },
+      deep: true
+    }
+  }
+};
+</script>

src/components/Calendar/index.js

@@ -0,0 +1,9 @@
+/**
+ * Created by ZWH on 2017/6/22.
+ */
+import Calendar from './calendar.vue';
+export default Calendar;
+
+if (typeof window !== 'undefined' && window.Vue) {
+  window.Vue.component('clock', Clock);
+}

src/views/Scheduling/index.vue

@@ -3,7 +3,7 @@
     <!-- 头 -->
     <div class="app-top">
       <div class="app-titel" style="margin-top: 5px">
-        <div class="label" v-if="orgType!=3">楼盘名称：</div>
+        <div class="label" v-if="orgType!=3" id="label1">楼盘名称：</div>
         <div style="width: 200px" v-if="orgType!=3">
           <el-select
             v-model="houseid"
@@ -65,12 +65,13 @@
           >
         </div>
         <div style="margin-left: 20px">
-          <el-button v-if="sch_index_del" style="background: #2671e2; color: #ffffff"
+          <el-button v-if="sch_index_del" :disabled='multipleSelection.length==0' style="background: #2671e2; color: #ffffff"
            @click="alldel()" >批量删除</el-button
           >
         </div>
         <div  style="margin-left: 20px">
-          <el-button v-if="sch_index_sort" style="background: #2671e2; color: #ffffff"
+          <el-button v-if="sch_index_sort" :disabled='multipleSelection.length==0' style="background: #2671e2; color: #ffffff"
+            @click="showDailog"
             >批量排班</el-button
           >
         </div>
@@ -113,7 +114,7 @@
           <template slot-scope="scope">
             <span style="color: #2671e2"  @click="switchstatus(scope.row,2)" v-if="scope.row.status == 0&&sch_index_pause">暂停接待</span>
             <span style="color: #2671e2"  @click="switchstatus(scope.row,0)" v-if="scope.row.status == 2&&sch_index_pause">空闲</span>
-            <span style="color: #2671e2;  margin-left: 10px"  v-if="sch_index_job">工作安排</span>
+            <span style="color: #2671e2;  margin-left: 10px"  v-if="sch_index_job" @click="showDailog1(scope.row)">工作安排</span>
             <span style="color: #2671e2; margin-left: 10px" v-if="sch_index_del" @click="del(scope.row)">删除</span>
           </template>
         </el-table-column>
@@ -152,12 +153,27 @@
         <el-button type="primary" @click="editor()">保存</el-button>
       </div>
     </el-dialog>
+
+
+    <el-dialog title="新增" :visible.sync="showVisible">
+      <div>
+         <div style="text-align: center;">
+           <Calendar v-on:choseDay="clickDay" ref="calendar" v-on:changeMonth="changeDate" :markDate='arr' />
+          </div>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="showVisible = false">取 消</el-button>
+        <el-button type="primary" @click="save()">保存</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import Calendar from "../../components/Calendar/calendar.vue";
 import { mapGetters } from "vuex";
 import Sortable from 'sortablejs'
+import index1Vue from '../admin/dept/index1.vue';
 export default {
   data() {
     const generateData = _ => {
@@ -177,6 +193,8 @@ export default {
       multipleSelection: [],
       orgType:localStorage.getItem("orgType"),
       dialogVisible: false,
+      showVisible: false,
+      arr: [],
       currentPage4: 1,
       tableData: [],
       houseList: [],
@@ -196,11 +214,17 @@ export default {
       Page: 1,
       size: 10,
       total: 0,
+      roleId:'',
+      arr1:[],
+      showFlag:false
     };
   },
     computed: {
     ...mapGetters(["permissions"]),
   },
+  components: {
+    Calendar,
+  },
   created() {
     this.sch_index_add = this.permissions["sch_index_add"];
     this.sch_index_del = this.permissions["sch_index_del"];
@@ -241,9 +265,87 @@ export default {
               // });
         });
     },
+    save(){
+      if(this.showFlag){
+        //  let arr2=[]
+        // this.arr.map((item,idx)=>{
+        //   let idx1=this.arr1.findIndex(item1=>item1==item)
+        //   if(idx1==-1){
+        //     // 没有重复的
+        //     console.log(item);
+        //     arr2.push(this.arr1[idx])
+        //   }
+        // })
+        // console.log(arr2);
+      this.$api.api.scheduling({
+        chosed:this.arr.join(','),
+        // unChosed:arr2.join(','),
+        id:this.roleId
+      })
+      .then(res=>{
+        // console.log(res);
+        this.$message.success('修改成功')
+        this.showVisible=false
+        this.AgentPoollist();
+      })
+      }else{
+        let arr=[]
+        this.multipleSelection.map(item=>{
+          arr.push(item.id)
+        })
+        this.$api.api.schedulings({
+        chosed:this.arr.join(','),
 
-
-
+        ids:arr.join(',')
+      })
+      .then(res=>{
+        // console.log(res);
+        this.$message.success('修改成功')
+        this.showVisible=false
+        this.AgentPoollist();
+      })
+      }
+    },
+    showDailog(){
+      this.arr=[]
+      this.showVisible=true
+      this.showFlag=false
+      // this.$refs.calendar.getList(new Date());
+    },
+    showDailog1(row){
+      this.showFlag=true
+      this.showVisible=true
+      this.roleId=row.id
+      this.arr=[]
+      //获取所选择的时间
+      this.$api.api.findByAgentId({
+        id:row.id
+      }).then(res=>{
+        console.log(res);
+        if(res.data.length==0)return
+        res.data.map(item=>{
+          this.arr.push(item.jobDate)
+        })
+        this.arr1=this.arr
+      })
+    },
+    clickDay(data) {
+      console.log(data,'1',this.arr); //选中某天
+      // 首先判断是否在已经选中的时间内如果是则对数据进行删除，如果没有则将数据放入数组
+      let idx=this.arr.findIndex(item=>item==data)
+      console.log(idx);
+      if(idx==-1){
+        this.arr.push(data)
+      }else{
+        this.arr.splice(idx,1)
+      }
+    },
+    changeDate(data) {
+      console.log(data,'2'); //左右点击切换月份
+    },
+    clickToday(data) {
+      console.log(data,'3'); //跳到了本月
+    },
     drag(ev,option) {
 　　　　this.draggingKey = option.key;
     },
@@ -553,5 +655,13 @@ height: 400px !important;
 /deep/.el-transfer-panel__list{
 height: 400px !important;
 }
-
+// /deep/ .wh_content_all{
+//   background: none;
+// }
+// /deep/ .wh_top_changge li {
+//   color: black;
+// }
+// /deep/ .wh_content_item_tag,.wh_content_item{
+//   color: black;
+// }
 </style>

vue.config.js

@@ -3,11 +3,11 @@
  * https://cli.vuejs.org/zh/config/
  */
 // const url = 'http://pigx-gateway'
-const url = 'http://39.97.167.65:9999' //测试
+// const url = 'http://39.97.167.65:9999' //测试
 // const url = 'http://192.168.31.169:9999' //长龙
 // const url = 'http://192.168.31.134:9999' //嘉豪
 // const url = 'http://192.168.31.100:9999' //王笑
-// const url = 'http://du2fr4.natappfree.cc' //王笑
+const url = 'http://nitu5e.natappfree.cc' //王笑
 
 const CompressionWebpackPlugin = require('compression-webpack-plugin')
 const productionGzipExtensions = ['js', 'css']