返宁人员，出省人员改为切换月份

src/views/zaoquan/yiqing/yiqing-chushenglist.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="page">
     <!-- 日期选择 -->
-    <div class="time" v-if="List.length != 0">
+    <!-- <div class="time" v-if="List.length != 0">
       <div class="title">{{List[6].date.split("-")[0] + "年" + List[6].date.split("-")[1] + "月"}}</div>
       <div class="box">
         <div class="item" v-for="(item,index) in List" @click="change_day(item,index)" :key="index">
@@ -9,24 +9,38 @@
           <div class="num" :style="index==active?'backgroundColor:#00A1E6;':''">{{item.date.split("-")[2]}}</div>
         </div>
       </div>
+    </div> -->
+    <div class="time_box">
+      <div class="icon" @click="icon_left()">
+        <van-icon name="arrow-left" />
+      </div>
+      <div class="title">{{ year }}年{{ ("0" + month).substr(-2) }}月</div>
+      <div class="icon" @click="icon_right()">
+        <van-icon name="arrow" />
+      </div>
     </div>
 
     <!-- 近期填写人员列表 -->
     <div class="content">
-        <div class="title">
-            <div class="name">姓名</div>
-            <div class="full">工作单位</div>
-            <div class="icon"></div>
-        </div>
-        <div class="list" v-if="List.length != 0">
-            <div class="item" v-for="(item,index) in List[active].data" @click="go_detail(item.id)" :key="index">
-                <div class="name">{{item.name}}</div>
-                <div class="full">{{item.work_unit}}</div>
-                <div class="icon">
-                    <van-icon name="arrow" />
-                </div>
-            </div>
+      <div class="title">
+        <div class="name">姓名</div>
+        <div class="full">工作单位</div>
+        <div class="icon"></div>
+      </div>
+      <div class="list" v-if="List.length != 0">
+        <div
+          class="item"
+          v-for="(item, index) in List"
+          @click="go_detail(item.id)"
+          :key="index"
+        >
+          <div class="name">{{ item.name }}</div>
+          <div class="full">{{ item.work_unit }}</div>
+          <div class="icon">
+            <van-icon name="arrow" />
+          </div>
         </div>
+      </div>
     </div>
   </div>
 </template>
@@ -35,39 +49,73 @@
 export default {
   data() {
     return {
-      List:[],
+      List: [],
 
-      active:6,
+      active: 6,
 
+      title: "",
+      year: 0,
+      month: 0,
     };
   },
   mounted() {
-    this.get_list()
-
     document.body.style.backgroundColor = "#00A1E9"; //背景色
 
+    this.year = new Date().getFullYear();
+    this.month = new Date().getMonth() + 1;
+
+    console.log(this.year + "-" + ("0" + this.month).substr(-2));
+    this.get_list(this.year, this.month);
   },
   methods: {
-    get_list(){
-       this.$http.post("http://zaoquan.nxjiewei.com:8011/api/workbench/put_on_record/get_nearly_a_week_list",{
-            
-        }).then(res=>{
-            this.List = res.data.data.reverse()
-            
-            // console.log(this.List);
-        })
+    get_list(year, month) {
+      this.$http
+        .post(
+          "http://zaoquan.nxjiewei.com:8011/api/workbench/put_on_record/get_nearly_a_week_list",
+          {
+            year: year,
+            month: month,
+          }
+        )
+        .then((res) => {
+          console.log(res.data.data);
+          this.List = res.data.data;
+        });
     },
 
-    change_day(item,index){
-      this.active = index
+    change_day(item, index) {
+      this.active = index;
       // console.log(item.date)
     },
-    go_detail(id){
-      this.$router.push(
-        `/zaoquan/yiqing/yiqing-chushengdetail?id=` + id
-      );
+    go_detail(id) {
+      this.$router.push(`/zaoquan/yiqing/yiqing-chushengdetail?id=` + id);
     },
 
+    icon_left() {
+      //判断month
+      if (this.month == 1) {
+        this.year = this.year - 1;
+        this.month = 12;
+      } else {
+        this.month = this.month - 1;
+      }
+
+      console.log(this.year, this.month);
+      this.get_list(this.year, this.month);
+    },
+    icon_right() {
+      //判断month
+      if (this.month == 12) {
+        this.year = this.year + 1;
+        this.month = 1;
+      } else {
+        this.month = this.month + 1;
+      }
+
+      // console.log(this.year+'-'+('0' + this.month).substr(-2))
+      console.log(this.year, this.month);
+      this.get_list(this.year, this.month);
+    },
   },
 };
 </script>
@@ -110,61 +158,78 @@ export default {
   background-color: #cdeefd;
 }
 
+.content {
+  margin-top: 15px;
+  box-sizing: border-box;
+  padding: 10px;
 
-
-.content{
-    margin-top: 15px;
-    box-sizing: border-box;
-    padding: 10px;
-
-    width: 350px;
-    background-color: #fff;
-    border-radius: 10px;
-
+  width: 350px;
+  background-color: #fff;
+  border-radius: 10px;
 }
-.content .title{
-    display: flex;
-    justify-content: space-between;
-    color: #009DE7;
-    font-size: 16px;
-    text-align: center;
+.content .title {
+  display: flex;
+  justify-content: space-between;
+  color: #009de7;
+  font-size: 16px;
+  text-align: center;
 
-    padding: 10px 0;
-    border-bottom: 1px solid #E7E7E7;
+  padding: 10px 0;
+  border-bottom: 1px solid #e7e7e7;
+}
+.content .title .name {
+  width: 60px;
 }
-.content .title .name{
-    width: 60px;
+.content .title .full {
+  width: 220px;
 }
-.content .title .full{
-    width: 220px;
+.content .title .icon {
+  width: 20px;
 }
-.content .title .icon{
-    width: 20px;
+.content .list {
+}
+.content .list .item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 14px;
+  text-align: center;
+  padding: 10px 0;
+  border-bottom: 1px solid #e7e7e7;
 }
-.content .list{
 
+.content .list .item .name {
+  width: 60px;
+}
+.content .list .item .full {
+  width: 220px;
 }
-.content .list .item{
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 14px;
-    text-align: center;
-    padding: 10px 0;
-    border-bottom: 1px solid #E7E7E7;
+.content .list .item .icon {
+  width: 20px;
+  text-align: right;
+  padding-top: 5px;
 }
+.time_box {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
 
+  box-sizing: border-box;
+  padding: 0 10px;
 
-.content .list .item .name{
-    width: 60px;
-}
-.content .list .item .full{
-    width: 220px;
+  width: 350px;
+  background-color: #fff;
+  border-radius: 10px;
 
+  height: 50px;
+  background-color: #fff;
+}
+.time_box .icon {
+  padding-top: 5px;
+  width: 50px;
+  text-align: center;
+  color: #00a1e9;
 }
-.content .list .item .icon{
-    width: 20px;
-    text-align: right;
-    padding-top: 5px;
+.time_box .title {
 }
 </style>

src/views/zaoquan/yiqing/yiqing-fanninglist.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="page">
     <!-- 日期选择 -->
-    <div class="time" v-if="List.length != 0">
+    <!-- <div class="time" v-if="List.length != 0">
       <div class="title">{{List[6].date.split("-")[0] + "年" + List[6].date.split("-")[1] + "月"}}</div>
       <div class="box">
         <div class="item" v-for="(item,index) in List" @click="change_day(item,index)" :key="index">
@@ -9,24 +9,38 @@
           <div class="num" :style="index==active?'backgroundColor:#00A1E6;':''">{{item.date.split("-")[2]}}</div>
         </div>
       </div>
+    </div> -->
+    <div class="time_box">
+      <div class="icon" @click="icon_left()">
+        <van-icon name="arrow-left" />
+      </div>
+      <div class="title">{{year}}年{{ ('0' + month).substr(-2) }}月</div>
+      <div class="icon" @click="icon_right()">
+        <van-icon name="arrow" />
+      </div>
     </div>
 
     <!-- 近期填写人员列表 -->
     <div class="content">
-        <div class="title">
-            <div class="name">姓名</div>
-            <div class="full">工作单位</div>
-            <div class="icon"></div>
-        </div>
-        <div class="list" v-if="List.length != 0">
-            <div class="item" v-for="(item,index) in List[active].data" @click="go_detail(item.id)" :key="index">
-                <div class="name">{{item.name}}</div>
-                <div class="full">{{item.work_unit}}</div>
-                <div class="icon">
-                    <van-icon name="arrow" />
-                </div>
-            </div>
+      <div class="title">
+        <div class="name">姓名</div>
+        <div class="full">工作单位</div>
+        <div class="icon"></div>
+      </div>
+      <div class="list" v-if="List.length != 0">
+        <div
+          class="item"
+          v-for="(item, index) in List"
+          @click="go_detail(item.id)"
+          :key="index"
+        >
+          <div class="name">{{ item.name }}</div>
+          <div class="full">{{ item.work_unit }}</div>
+          <div class="icon">
+            <van-icon name="arrow" />
+          </div>
         </div>
+      </div>
     </div>
   </div>
 </template>
@@ -35,39 +49,79 @@
 export default {
   data() {
     return {
-      List:[],
+      List: [],
 
-      active:6,
+      active: 6,
 
+      title: "",
+      year: 0,
+      month: 0,
     };
   },
   mounted() {
-    this.get_list()
 
     document.body.style.backgroundColor = "#00A1E9"; //背景色
 
+    this.year = new Date().getFullYear();
+    this.month = new Date().getMonth() + 1;
+
+    console.log(this.year + '-' + ('0' + this.month).substr(-2))
+    this.get_list(this.year,this.month);
+
+
   },
   methods: {
-    get_list(){
-       this.$http.post("http://zaoquan.nxjiewei.com:8011/api/workbench/person_register/get_nearly_a_week_list",{
-            
-        }).then(res=>{
-            this.List = res.data.data.reverse()
-            
-            // console.log(this.List);
-        })
+    get_list(year,month) {
+      this.$http
+        .post(
+          "http://zaoquan.nxjiewei.com:8011/api/workbench/person_register/get_nearly_a_week_list",
+          {
+            year:year,
+            month:month
+          }
+        )
+        .then((res) => {
+          console.log(res.data.data)
+          this.List = res.data.data;
+        });
     },
 
-    change_day(item,index){
-      this.active = index
+    change_day(item, index) {
+      this.active = index;
       // console.log(item.date)
     },
-    go_detail(id){
-      this.$router.push(
-        `/zaoquan/yiqing/yiqing-fanningdetail?id=` + id
-      );
+    go_detail(id) {
+      this.$router.push(`/zaoquan/yiqing/yiqing-fanningdetail?id=` + id);
+    },
+
+    icon_left() {
+      //判断month
+      if (this.month == 1) {
+        this.year = this.year - 1;
+        this.month = 12;
+      } else {
+        this.month = this.month - 1;
+      }
+
+      console.log(this.year,this.month)
+      this.get_list(this.year,this.month)
+
     },
+    icon_right() {
+      //判断month
+      if (this.month == 12) {
+        this.year = this.year + 1;
+        this.month = 1;
+      } else {
+        this.month = this.month + 1;
+      }
+
+      // console.log(this.year+'-'+('0' + this.month).substr(-2))
+      console.log(this.year,this.month)
+      this.get_list(this.year,this.month)
 
+
+    },
   },
 };
 </script>
@@ -110,61 +164,79 @@ export default {
   background-color: #cdeefd;
 }
 
+.content {
+  margin-top: 15px;
+  box-sizing: border-box;
+  padding: 10px;
 
-
-.content{
-    margin-top: 15px;
-    box-sizing: border-box;
-    padding: 10px;
-
-    width: 350px;
-    background-color: #fff;
-    border-radius: 10px;
-
+  width: 350px;
+  background-color: #fff;
+  border-radius: 10px;
 }
-.content .title{
-    display: flex;
-    justify-content: space-between;
-    color: #009DE7;
-    font-size: 16px;
-    text-align: center;
+.content .title {
+  display: flex;
+  justify-content: space-between;
+  color: #009de7;
+  font-size: 16px;
+  text-align: center;
 
-    padding: 10px 0;
-    border-bottom: 1px solid #E7E7E7;
+  padding: 10px 0;
+  border-bottom: 1px solid #e7e7e7;
+}
+.content .title .name {
+  width: 60px;
 }
-.content .title .name{
-    width: 60px;
+.content .title .full {
+  width: 220px;
 }
-.content .title .full{
-    width: 220px;
+.content .title .icon {
+  width: 20px;
 }
-.content .title .icon{
-    width: 20px;
+.content .list {
+}
+.content .list .item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 14px;
+  text-align: center;
+  padding: 10px 0;
+  border-bottom: 1px solid #e7e7e7;
 }
-.content .list{
 
+.content .list .item .name {
+  width: 60px;
 }
-.content .list .item{
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 14px;
-    text-align: center;
-    padding: 10px 0;
-    border-bottom: 1px solid #E7E7E7;
+.content .list .item .full {
+  width: 220px;
 }
+.content .list .item .icon {
+  width: 20px;
+  text-align: right;
+  padding-top: 5px;
+}
+
+.time_box {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
 
+  box-sizing: border-box;
+  padding: 0 10px;
 
-.content .list .item .name{
-    width: 60px;
-}
-.content .list .item .full{
-    width: 220px;
+  width: 350px;
+  background-color: #fff;
+  border-radius: 10px;
 
+  height: 50px;
+  background-color: #fff;
+}
+.time_box .icon {
+  padding-top: 5px;
+  width: 50px;
+  text-align: center;
+  color: #00a1e9;
 }
-.content .list .item .icon{
-    width: 20px;
-    text-align: right;
-    padding-top: 5px;
+.time_box .title {
 }
 </style>