年月周

src/assets/css/cssReset.css

@@ -639,4 +639,10 @@ vertical-align:middle
 ._height_auto.el-select .el-input{
     height: auto !important;
 }
+.personTable .choose2 .block input{
+    height: 33px;
+    background-color: #333333;
+    border: none;
+    color: white;
+  }
 /************************** luochao 重新定义表格样式 END *******************************/
\ No newline at end of file

src/components/activity/PersonnelManagement.vue

@@ -69,6 +69,34 @@
               <img v-else src="../../assets/img/champion/right1.png" alt />
             </span>
           </div>
+          <div class="choose choose2">
+            <div class="block" v-if="index1 === 0">
+              <el-date-picker
+                v-model="weekVal"
+                type="week"
+                format="yyyy 第 W 周"
+                placeholder="请选择周"
+                @change="getNewWeek">
+              </el-date-picker>
+            </div>
+            <div class="block" v-if="index1 === 1">
+              <el-date-picker
+                v-model="monthVal"
+                type="month"
+                value-format="yyyyM"
+                placeholder="请选择月">
+              </el-date-picker>
+            </div>
+            <div class="block" v-if="index1 === 2">
+              <el-date-picker
+                v-model="yearVal"
+                align="right"
+                type="year"
+                value-format="yyyy"
+                placeholder="请选择年">
+              </el-date-picker>
+            </div>
+          </div>
           <div class="slide-txt">
             <transition name="el-fade-in-linear">
               <p class="text" :key="text.id">{{text.val}}</p>
@@ -375,7 +403,11 @@
 export default {
   data() {
     return {
-      choose1: ["本周", "本月", "本年", "全部"],
+      weekVal: '',
+      monthVal: '',
+      yearVal: '',
+      NewWeekVal: '',
+      choose1: ["周", "月", "年", "全部"],
       choose2: ["个人", "部门", "公司"],
       index1: 0,
       index2: 0,
@@ -407,8 +439,12 @@ export default {
     };
   },
   created() {
+    let date = new Date();
+    this.yearVal = date.getFullYear() + '';
+    this.monthVal = date.getFullYear() + '' + (date.getMonth() + 1);
     let Height = document.body.clientHeight;
     this.listHeight = Height - 470;
+    this.getNewWeek(date)
   },
   computed: {
     text () {
@@ -432,6 +468,16 @@ export default {
     document.onkeydown=null;
   },
   methods: {
+    getNewWeek(time){
+      let dateNow = time ? new Date(time) : new Date(this.weekVal);
+      let dateFirst = new Date(dateNow.getFullYear(), 0, 1);
+      let dataNumber = Math.round((dateNow.valueOf() - dateFirst.valueOf()) / 86400000);
+      let num = Math.ceil((dataNumber + ((dateFirst.getDay() + 1) - 1)) / 7)
+      this.NewWeekVal = num === 53 ? 1 : dateNow.getFullYear() + '' + num
+      if(time) {
+        this.weekVal = time
+      }
+    },
     showCareer(){
       let temp=this.tableData[this.chosenTD.row].EmployeeId
       if (temp!=0) {
@@ -1169,4 +1215,8 @@ export default {
 .personTable .second .show-btn:hover{
   background: url('../../assets/img/champion/btnhover.png');
 }
+.personTable .choose2{
+  margin-left: 10px;
+}
+
 </style>