和志哥来个同步

周超
1 parent 8ab6a817
Showing 1 changed file with 91 additions and 5 deletions
src/views/user/InterviewSchedule.vue
@@ -41,6 +41,16 @@
       </div>
  
     </div>
+    <div              > 
+      <el-calendar v-model="query.date">
+        <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+        <template slot="dateCell" slot-scope="{date, data}">
+          <p :class="data.isSelected ? 'is-selected' : ''" v-html="getContent(data,date)">
+    
+          </p>
+        </template>
+      </el-calendar>
+    </div>
     <el-table :data="userList" id="QuestionTable" border
       style="width: 100%;border-radius: 5px;box-shadow: 0 0 10px #efefef;margin-top: 10px;" :stripe='true'>
       <el-table-column type="index" prop="date" width="50" align="center"></el-table-column>
@@ -56,8 +66,8 @@
       <el-table-column prop="date" label="姓名">
         <template slot-scope="scope">
           <span>{{ scope.row.fullName }}</span>
-          <el-tag v-for="item in scope.row.taglist" size="mini" style="margin-right:5px"  
-                  :disable-transitions="false"  >{{item}}</el-tag>
+          <el-tag v-for="item in scope.row.taglist" size="mini" style="margin-right:5px" :disable-transitions="false">
+            {{item}}</el-tag>
  
         </template>
       </el-table-column>
@@ -149,6 +159,7 @@
         }
       };
       return {
+
         title: '添加管理员',
         buttonText: '立即创建',
         userList: [],
@@ -173,18 +184,92 @@
           Password: '',
           checkPass: '',
         },
+        accountlist:[],
         Count: 0,
         query: {
           PageIndex: 1,
           PageSize: 1000,
-
+          date: '',
+          month:0,
+          day:1
         },
       }
     },
     created() {
-      this.GetUser()
+      this.GetUser();
+
+      this.$nextTick(() => {
+        // 点击前一个月
+        let prevBtn = document.querySelector(
+          ".el-calendar__button-group .el-button-group>button:nth-child(1)"
+        );
+        prevBtn.addEventListener("click", e => {
+          console.log(this.query.date);
+          this.handlemonth(1);
+        });
+
+        //点击下一个月
+        let nextBtn = document.querySelector(
+          ".el-calendar__button-group .el-button-group>button:nth-child(3)"
+        );
+        nextBtn.addEventListener("click", () => {
+          console.log(this.query.date);
+          this.handlemonth(-1);
+        });
+
+        //点击今天
+        let todayBtn = document.querySelector(
+          ".el-calendar__button-group .el-button-group>button:nth-child(2)"
+        );
+        todayBtn.addEventListener("click", () => {
+          this.handlemonth(0);
+        });
+      }); 
     },
     methods: {
+      getContent(data,date){
+        // {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
+        var html = [];
+        html.push( data.day.split('-').slice(1).join('-'));
+        try {
+          var d = this.accountlist.filter(o=>o.startTime == data.day);
+          if(d){
+           d.forEach((item)=>{
+             html.push(`<el-tag type="success" style="    background-color: #ecf5ff;
+    display: inline-block;
+    height: 32px;
+    padding: 0 10px;
+    line-height: 30px;
+    font-size: 12px;
+    color: #409eff;
+    border: 1px solid #d9ecff;
+    border-radius: 4px;
+    box-sizing: border-box;
+    white-space: nowrap;">${item.qujian+':'+item.count}</el-tag>`);
+           });
+          }
+        } catch (error) {
+          
+        }
+        return html.join(' &nbsp;');
+      },
+      handlemonth(val) {
+        switch (val) {
+          case -1:
+           this.query.day=0;
+           this.query.month--;  
+          break;
+          case 0:
+           this.query.month = 0;
+           this.query.day =1;  
+          break;
+          case 1: 
+          this.query.month++;
+           this.query.day =0;
+          break;
+        }
+        this.GetUser();
+      },
       search() {
         this.GetUser();
       },
@@ -229,7 +314,8 @@
  
       GetUser() {
         GetCompanyInvitation(this.query).then(res => {
-          this.userList = res.data.data
+          this.userList = res.data.data.list || [];
+          this.accountlist = res.data.data.account || []
           this.Count = res.data.records
         })
       },