|
@@ -0,0 +1,205 @@
|
|
|
+<template>
|
|
|
+ <div class="page">
|
|
|
+ <!-- 日期选择 -->
|
|
|
+ <div class="time">
|
|
|
+ <div class="title">{{ time_title }}</div>
|
|
|
+ <div class="box">
|
|
|
+ <div class="item" v-for="(item,index) in List" @click="change_day(item,index)">
|
|
|
+ <div class="text">{{item.week.substring(item.week.length - 1)}}</div>
|
|
|
+ <div class="num" :style="index==active?'backgroundColor:#00A1E6;':''">{{item.date.substring(item.date.length - 2)}}</div>
|
|
|
+ </div>
|
|
|
+ </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)">
|
|
|
+ <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>
|
|
|
+
|
|
|
+<script>
|
|
|
+Date.prototype.format = function (fmt) {
|
|
|
+ var o = {
|
|
|
+ "M+": this.getMonth() + 1, //月份
|
|
|
+ "d+": this.getDate(), //日
|
|
|
+ "h+": this.getHours(), //小时
|
|
|
+ "m+": this.getMinutes(), //分
|
|
|
+ "s+": this.getSeconds(), //秒
|
|
|
+ "q+": Math.floor((this.getMonth() + 3) / 3), //季度
|
|
|
+ S: this.getMilliseconds(), //毫秒
|
|
|
+ };
|
|
|
+
|
|
|
+ if (/(y+)/.test(fmt)) {
|
|
|
+ fmt = fmt.replace(
|
|
|
+ RegExp.$1,
|
|
|
+ (this.getFullYear() + "").substr(4 - RegExp.$1.length)
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ for (var k in o) {
|
|
|
+ if (new RegExp("(" + k + ")").test(fmt)) {
|
|
|
+ fmt = fmt.replace(
|
|
|
+ RegExp.$1,
|
|
|
+ RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
|
|
|
+ );
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return fmt;
|
|
|
+};
|
|
|
+
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 时间标题
|
|
|
+ time_title: "",
|
|
|
+
|
|
|
+ List:[],
|
|
|
+
|
|
|
+ active:6,
|
|
|
+
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.get_list()
|
|
|
+
|
|
|
+ document.body.style.backgroundColor = "#00A1E9"; //背景色
|
|
|
+
|
|
|
+ this.time_title = new Date().format("yyyy年MM月");
|
|
|
+
|
|
|
+ },
|
|
|
+ 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);
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ change_day(item,index){
|
|
|
+ this.active = index
|
|
|
+ console.log(item.date)
|
|
|
+ },
|
|
|
+ go_detail(id){
|
|
|
+ this.$router.push(
|
|
|
+ `/zaoquan/yiqing/yiqing-fanningdetail?id=` + id
|
|
|
+ );
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.page {
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 15px 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.time {
|
|
|
+ width: 350px;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 20px 0;
|
|
|
+}
|
|
|
+.time .title {
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+}
|
|
|
+.time .box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+}
|
|
|
+.time .box .item {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+.time .box .item .text {
|
|
|
+ color: #999999;
|
|
|
+ margin-bottom: 5px;
|
|
|
+}
|
|
|
+.time .box .item .num {
|
|
|
+ padding: 5px;
|
|
|
+ border-radius: 50%;
|
|
|
+
|
|
|
+ background-color: #cdeefd;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+.content{
|
|
|
+ margin-top: 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 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;
|
|
|
+
|
|
|
+ padding: 10px 0;
|
|
|
+ border-bottom: 1px solid #E7E7E7;
|
|
|
+}
|
|
|
+.content .title .name{
|
|
|
+ width: 60px;
|
|
|
+}
|
|
|
+.content .title .full{
|
|
|
+ width: 220px;
|
|
|
+}
|
|
|
+.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 .item .name{
|
|
|
+ width: 60px;
|
|
|
+}
|
|
|
+.content .list .item .full{
|
|
|
+ width: 220px;
|
|
|
+
|
|
|
+}
|
|
|
+.content .list .item .icon{
|
|
|
+ width: 20px;
|
|
|
+ text-align: right;
|
|
|
+ padding-top: 5px;
|
|
|
+}
|
|
|
+</style>
|