修改角色下拉框为平铺展示

src/components/Calendar/calendar.vue

@@ -1,4 +1,4 @@
-<style scoped>
+<style scoped lang="scss">
 @media screen and (min-width: 500px) {
   .wh_item_date:hover {
     background: #538fe9;
@@ -13,6 +13,7 @@
 }
 
 .wh_container {
+  position: relative;
   max-width: 500px;
   margin: auto;
 }
@@ -43,7 +44,7 @@ li {
   /* font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
     "Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif; */
   /* background-color: #0fc37c; */
-  width: 90%;
+  width: 100%;
   overflow: hidden;
   /* padding-bottom: 8px; */
   border: 1px solid #a1a1a1;
@@ -144,34 +145,77 @@ wh_content_item_tag {
   /* background: red; */
   border-radius: 100px;
 }
+
+.select {
+  position: absolute;
+  top: 40%;
+  right: -170px;
+  width: 150px;
+  height: auto;
+  display: flex;
+  flex-direction: column;
+
+  div {
+    margin: 0 0 20px 0;
+    width: 150px;
+    height: 50px;
+    border: 1px solid #bfbfbf;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    font-size: 18px;
+    border-radius: 8px;
+  }
+}
 </style>
 <template>
   <section class="wh_container">
     <div class="wh_content_all">
       <div class="wh_top_changge">
-        <li @click="PreMonth(myDate,false)">
+        <li @click="PreMonth(myDate, false)">
           <div class="wh_jiantou1"></div>
         </li>
-        <li class="wh_content_li">{{dateTop}}</li>
-        <li @click="NextMonth(myDate,false)">
+        <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,i) in textTop" :key="i" >
-          <div class="wh_top_tag">{{tag}}</div>
+        <div class="wh_content_item" v-for="(tag, i) in textTop" :key="i">
+          <div class="wh_top_tag">{{ tag }}</div>
         </div>
       </div>
       <div class="wh_content">
-        <div class="wh_content_item" v-for="(item,index) in list" :key="index" @click="clickDay(item,index)">
+        <div
+          class="wh_content_item"
+          v-for="(item, index) in list"
+          :key="index"
+          @click="clickDay(item, index)"
+        >
           <div
             class="wh_item_date"
-            :style="{background:item.isMark?theme:''}"
-            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>
+            :style="{ background: item.isMark ? theme : '' }"
+            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>
+    <template v-if="selectAll">
+      <div class="select">
+        <div @click="selectAllFnc">全选</div>
+        <div @click="unSelectAllFnc">反选</div>
+      </div>
+    </template>
   </section>
 </template>
 <script>
@@ -184,43 +228,73 @@ export default {
       myDate: [],
       list: [],
       historyChose: [],
-      dateTop: ""
+      dateTop: "",
+      arr: [], // 存放选中的日期
     };
   },
   props: {
     markDate: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     markDateMore: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     textTop: {
       type: Array,
-      default: () => ["一", "二", "三", "四", "五", "六", "日"]
+      default: () => ["一", "二", "三", "四", "五", "六", "日"],
     },
     sundayStart: {
       type: Boolean,
-      default: () => false
+      default: () => false,
     },
     agoDayHide: {
       type: String,
-      default: `0`
+      default: `0`,
     },
     futureDayHide: {
       type: String,
-      default: `2554387200`
-    }
+      default: `2554387200`,
+    },
+    selectAll: {
+      type: Boolean,
+      default: false,
+    },
   },
   created() {
     this.intStart();
     this.myDate = new Date();
   },
-  computed:{
-    ...mapGetters(['theme'])
+  computed: {
+    ...mapGetters(["theme"]),
   },
   methods: {
+    // 全选
+    selectAllFnc() {
+      let arr = [];
+      this.list.map((item) => {
+        if (item.otherMonth == "nowMonth" && !item.dayHide) {
+          item.chooseDay = true;
+          item.isMark = true;
+          arr.push(item.date);
+        }
+      });
+      this.arr = arr;
+      this.$emit('changeArr', this.arr)
+    },
+    // 全选
+    unSelectAllFnc() {
+      this.arr = [];
+      this.list.map((item) => {
+        if (item.otherMonth == "nowMonth" && !item.dayHide) {
+          item.chooseDay = false;
+          item.isMark = false;
+        }
+      });
+      this.$emit('changeArr', this.arr)
+    },
+
     intStart() {
       timeUtil.sundayStart = this.sundayStart;
     },
@@ -229,8 +303,8 @@ export default {
       obj[data.markClassName] = data.markClassName;
       return obj;
     },
-    clickDay: function(item, index) {
-      // console.log(item,'123');
+    clickDay: function (item, index) {
+      console.log(item, "123");
       if (item.otherMonth === "nowMonth" && !item.dayHide) {
         this.getList(this.myDate, item.date);
       }
@@ -240,7 +314,7 @@ export default {
           : this.NextMonth(item.date);
       }
     },
-    ChoseMonth: function(date, isChosedDay = true) {
+    ChoseMonth: function (date, isChosedDay = true) {
       date = timeUtil.dateFormat(date);
       this.myDate = new Date(date);
       this.$emit("changeMonth", timeUtil.dateFormat(this.myDate));
@@ -250,7 +324,7 @@ export default {
         this.getList(this.myDate);
       }
     },
-    PreMonth: function(date, isChosedDay = true) {
+    PreMonth: function (date, isChosedDay = true) {
       date = timeUtil.dateFormat(date);
       this.myDate = timeUtil.getOtherMonth(this.myDate, "preMonth");
       this.$emit("changeMonth", timeUtil.dateFormat(this.myDate));
@@ -260,7 +334,7 @@ export default {
         this.getList(this.myDate);
       }
     },
-    NextMonth: function(date, isChosedDay = true) {
+    NextMonth: function (date, isChosedDay = true) {
       date = timeUtil.dateFormat(date);
       this.myDate = timeUtil.getOtherMonth(this.myDate, "nextMonth");
       this.$emit("changeMonth", timeUtil.dateFormat(this.myDate));
@@ -270,22 +344,24 @@ export default {
         this.getList(this.myDate);
       }
     },
-    forMatArgs: function() {
+    forMatArgs: function () {
       let markDate = this.markDate;
       let markDateMore = this.markDateMore;
-      markDate = markDate.map(k => {
+      markDate = markDate.map((k) => {
         return timeUtil.dateFormat(k);
       });
-      markDateMore = markDateMore.map(k => {
+      markDateMore = markDateMore.map((k) => {
         k.date = timeUtil.dateFormat(k.date);
         return k;
       });
       return [markDate, markDateMore];
     },
-    getList: function(date, chooseDay, isChosedDay = true) {
+    getList: function (date, chooseDay, isChosedDay = true) {
       const [markDate, markDateMore] = this.forMatArgs();
       this.dateTop = `${date.getFullYear()}年${date.getMonth() + 1}月`;
       let arr = timeUtil.getMonthList(this.myDate);
+      console.log(this.myDate)
+      console.log(arr)
       for (let i = 0; i < arr.length; i++) {
         let markClassName = "";
         let k = arr[i];
@@ -320,7 +396,7 @@ export default {
         }
       }
       this.list = arr;
-    }
+    },
   },
   mounted() {
     this.getList(this.myDate);
@@ -330,33 +406,33 @@ export default {
       handler(val, oldVal) {
         this.getList(this.myDate);
       },
-      deep: true
+      deep: true,
     },
     markDateMore: {
       handler(val, oldVal) {
         this.getList(this.myDate);
       },
-      deep: true
+      deep: true,
     },
     agoDayHide: {
       handler(val, oldVal) {
         this.getList(this.myDate);
       },
-      deep: true
+      deep: true,
     },
     futureDayHide: {
       handler(val, oldVal) {
         this.getList(this.myDate);
       },
-      deep: true
+      deep: true,
     },
     sundayStart: {
       handler(val, oldVal) {
         this.intStart();
         this.getList(this.myDate);
       },
-      deep: true
-    }
-  }
+      deep: true,
+    },
+  },
 };
 </script>

src/views/Scheduling/index.vue

@@ -161,7 +161,7 @@
     <el-dialog title="工作安排" :visible.sync="showVisible" :center="true">
       <div>
          <div style="text-align: center;">
-           <Calendar v-on:choseDay="clickDay" ref="calendar" v-on:changeMonth="changeDate" :agoDayHide='timeAcc' :markDate='arr' />
+           <Calendar :selectAll="true" v-on:choseDay="clickDay" ref="calendar" v-on:changeMonth="changeDate" :agoDayHide='timeAcc' :markDate='arr' @changeArr="changeArr" />
           </div>
       </div>
       <div slot="footer" class="dialog-footer" style="border-top:1px solid #eee;padding-top: 20px;display: flex;justify-content: end;">
@@ -246,6 +246,9 @@ export default {
     console.log(this.timeAcc,'sadasdasdas')
   },
   methods: {
+    changeArr(arr) {
+      this.arr = arr
+    },
     switchstatus(row,i){
        let obj = {
         agentId: row.agentId,
@@ -370,16 +373,14 @@ export default {
       })
     },
     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)
-
       }
+      console.log(this.arr)
     },
     changeDate(data) {
       console.log(data,'2'); //左右点击切换月份