班级名单

src/layout/common/topInfos.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="topInfo">
+  <div id="topLeave">
     <el-row>
       <el-col :span="24" class="topInfos">
         <van-nav-bar title="日程安排" left-text="返回" right-text="请假" left-arrow fixed @click-left="onClickLeft" @click-right="onClickRight" />
@@ -10,7 +10,7 @@
 
 <script>
 export default {
-  name: 'topInfo',
+  name: 'topLeave',
   props: {},
   components: {},
   data: () => ({}),

src/layout/user/checkList.vue

@@ -1,19 +1,72 @@
 <template>
   <div id="checkList">
-    <p>checkList</p>
+    <el-row>
+      <van-col :span="24">
+        <van-collapse v-model="openCollapse">
+          <van-collapse-item :name="index" v-for="(item, index) in checkWorkList" :key="index">
+            <div slot="title" class="title">
+              <span class="name">{{ item.studentid }}</span>
+            </div>
+            <van-row class="attend" v-for="(tag, index) in item.attend" :key="index">
+              <van-col :span="20" class="dateTime">
+                <p>{{ tag.date }}</p>
+                <p>{{ tag.time }}</p>
+              </van-col>
+              <van-col :span="4" class="status">
+                {{ tag.status === '0' ? '未签到' : tag.status === '1' ? '签到' : '迟到' }}
+              </van-col>
+            </van-row>
+          </van-collapse-item>
+        </van-collapse>
+      </van-col>
+    </el-row>
   </div>
 </template>
 
 <script>
 export default {
   name: 'checkList',
-  props: {},
+  props: {
+    checkWorkList: null,
+  },
   components: {},
-  data: () => ({}),
+  data: () => ({
+    openCollapse: [],
+  }),
   created() {},
   computed: {},
   methods: {},
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+p {
+  padding: 0;
+  margin: 0;
+}
+.list {
+  background: #fff;
+  margin: 0 5px 5px 5px;
+  width: 97%;
+  padding: 0 10px;
+  border-radius: 15px;
+}
+.list .title {
+  float: left;
+  width: 100%;
+}
+.list .name {
+  float: left;
+  width: 80%;
+  font-size: 20px;
+}
+.attend {
+  border-bottom: 1px solid #f3f3f3;
+}
+.dateTime p {
+  padding: 2px 0;
+}
+.status {
+  padding: 12px 0;
+}
+</style>

src/layout/user/leaveRefuse.vue

@@ -0,0 +1,65 @@
+<template>
+  <div id="leaveRefuse">
+    <el-row>
+      <el-col :span="24">
+        <el-col :span="24" class="top">
+          请假审核结果
+        </el-col>
+        <el-col :span="24" class="main">
+          <el-col :span="24" class="message">
+            <p>开始时间</p>
+            <p class="info">{{ refuseInfo.starttime }}</p>
+          </el-col>
+          <el-col :span="24" class="message">
+            <p>結束时间</p>
+            <p class="info">{{ refuseInfo.endtime }}</p>
+          </el-col>
+          <el-col :span="24" class="message">
+            <p>请假理由</p>
+            <p class="info">{{ refuseInfo.reason }}</p>
+          </el-col>
+          <el-col :span="24" v-if="refuseInfo.status === '2'" class="message">
+            <p>拒绝理由</p>
+            <p class="info">{{ refuseInfo.refcause }}</p>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'leaveRefuse',
+  props: {
+    refuseInfo: null,
+  },
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+p {
+  padding: 0;
+  margin: 0;
+}
+.top {
+  text-align: center;
+  font-size: 20px;
+  padding: 15px 0;
+}
+.message {
+  padding: 0 10px;
+}
+.message p {
+  padding: 0 0 10px 0;
+  font-size: 18px;
+}
+.message p:last-child {
+  text-indent: 1rem;
+}
+</style>

src/layout/user/formLeave.vue

@@ -1,19 +1,28 @@
 <template>
-  <div id="formLeave">
+  <div id="leaveRequest">
     <el-row>
       <el-col :span="24">
-        <el-form ref="form" :model="form" label-width="100px">
-          <el-form-item label="开始日期">
+        <el-form ref="form" :model="form">
+          <el-form-item>
+            <span slot="label">
+              <i class="el-icon-date date"></i>
+              开始时间
+            </span>
             <el-date-picker v-model="form.starttime" type="date" placeholder="选择开始日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"> </el-date-picker>
           </el-form-item>
-          <el-form-item label="结束日期">
+          <el-form-item>
+            <span slot="label">
+              <i class="el-icon-date endDate"></i>
+              结束时间
+            </span>
             <el-date-picker v-model="form.endtime" type="date" placeholder="选择开始日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"> </el-date-picker>
           </el-form-item>
-          <el-form-item label="请假理由">
+          <el-form-item>
+            <span slot="label">请假事由</span>
             <el-input type="textarea" v-model="form.reason" :rows="4" placeholder="请输入请假理由"></el-input>
           </el-form-item>
           <el-form-item>
-            <el-button type="primary" @click="onSubmit">保存</el-button>
+            <el-button type="primary" @click="onSubmit">提交</el-button>
             <el-button @click="cancelClick()">取消</el-button>
           </el-form-item>
         </el-form>
@@ -24,12 +33,14 @@
 
 <script>
 export default {
-  name: 'formLeave',
+  name: 'leaveRequest',
   props: {
     form: null,
   },
   components: {},
-  data: () => ({}),
+  data: () => ({
+    date: require('@/assets/date.png'),
+  }),
   created() {},
   computed: {},
   methods: {
@@ -44,7 +55,26 @@ export default {
 </script>
 
 <style lang="less" scoped>
+/deep/.el-form-item__label {
+  width: 100%;
+  text-align: left;
+  float: none;
+}
+/deep/.el-form-item {
+  margin: 15px 0;
+  text-align: center;
+}
+.date {
+  color: blue;
+}
+.endDate {
+  color: red;
+}
+/deep/.el-textarea {
+  width: 90%;
+}
 /deep/.el-textarea__inner {
-  width: 98%;
+  background: #f5f5f5;
+  border: none;
 }
 </style>

src/layout/user/messageInfo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="topInfo">
+  <div id="messageInfo">
     <el-row>
       <el-col :span="24" class="message" @click.native="$router.push({ path: '/user/personalDetail', query: { id: info.id } })">
         <el-col :span="6" class="name">
@@ -17,7 +17,7 @@
 
 <script>
 export default {
-  name: 'topInfo',
+  name: 'messageInfo',
   props: {
     info: null,
   },

src/layout/user/messageInfo copy.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="messageInfo">
+  <div id="studentInfo">
     <el-row>
       <el-col :span="24" class="messageInfo">
         <el-col :span="24" class="images">
@@ -140,7 +140,7 @@
 
 <script>
 export default {
-  name: 'messageInfo',
+  name: 'studentInfo',
   props: {
     messInfo: null,
   },
@@ -159,6 +159,9 @@ p {
   padding: 0;
   margin: 0;
 }
+.messageInfo {
+  margin: 0 0 10px 0;
+}
 .images {
   text-align: center;
   padding: 15px 0;

src/views/user/checkWork.vue

@@ -1,20 +1,17 @@
 <template>
   <div id="checkWork">
     <el-row>
-      <el-col :span="24" class="info">
+      <el-col :span="24" class="style">
         <el-col :span="24" class="top">
-          <el-col :span="15" class="title">
-            学生考勤情况
-          </el-col>
-          <el-col :span="9" class="btn">
-            <el-button type="primary" @click="checkClick()">考勤</el-button>
-          </el-col>
+          <topInfo></topInfo>
         </el-col>
         <el-col :span="24" class="main">
-          <checkList></checkList>
-        </el-col>
-        <el-col :span="24" class="foot">
-          <footInfo></footInfo>
+          <el-col :span="24" class="leaveBtn">
+            <van-button round type="info" icon="smile" @click="onClickRight()">考勤打卡</van-button>
+          </el-col>
+          <el-col :span="24" class="leaveList">
+            <checkList :checkWorkList="checkWorkList"></checkList>
+          </el-col>
         </el-col>
       </el-col>
     </el-row>
@@ -22,58 +19,65 @@
 </template>
 
 <script>
+import topInfo from '@/layout/common/topInfo.vue';
 import checkList from '@/layout/user/checkList.vue';
-import footInfo from '@/layout/common/footInfo.vue';
-import { createNamespacedHelpers, mapGetters } from 'vuex';
-const { mapActions: mapCheck } = createNamespacedHelpers('attendance');
 export default {
   name: 'checkWork',
   props: {},
   components: {
+    topInfo, //头部导航
     checkList, //考勤列表
-    footInfo, //底部信息
-  },
-  data: () => ({}),
-  created() {
-    this.searchInfo();
   },
+  data: () => ({
+    checkWorkList: [
+      {
+        studentid: '流域',
+        attend: [
+          {
+            date: '2020-02-25',
+            time: '80:30',
+            status: '0',
+          },
+          {
+            date: '2020-02-25',
+            time: '80:30',
+            status: '1',
+          },
+          {
+            date: '2020-02-25',
+            time: '80:30',
+            status: '2',
+          },
+        ],
+      },
+    ],
+  }),
+  created() {},
   computed: {},
   methods: {
-    ...mapCheck(['query']),
-    async searchInfo({ skip = 0, limit = 10, ...info } = {}) {
-      const res = await this.query({ skip, limit, ...info });
-      console.log(res.data);
-      // this.$set(this, `leaveList`, res.data);
-    },
-    checkClick() {
-      console.log('考勤管理');
+    onClickRight() {
+      console.log('考勤打卡');
     },
   },
 };
 </script>
 
 <style lang="less" scoped>
-.info {
+.style {
   width: 100%;
   min-height: 667px;
   position: relative;
-  background-color: #edeae8;
+  background-color: #f9fafc;
 }
 .top {
-  height: 50px;
-  line-height: 50px;
-  margin: 0 0 10px 0;
-  background: #fff;
-}
-.top .title {
-  padding: 0 15px;
-  font-size: 20px;
-}
-.top .btn {
-  text-align: right;
-  padding: 0 30px;
+  height: 46px;
+  overflow: hidden;
 }
 .main {
-  margin: 0 0 50px 0;
+  min-height: 570px;
+}
+.main .leaveBtn {
+  text-align: center;
+  padding: 15px 0;
 }
 </style>

src/views/user/leave.vue

@@ -1,12 +1,17 @@
 <template>
   <div id="leave">
     <el-row>
-      <el-col :span="24" class="info">
-        <el-col :span="24" class="native">
-          <topNative></topNative>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="top">
+          <topInfo></topInfo>
         </el-col>
-        <el-col :span="24" class="leaves">
-          <leaveList :leaveList="leaveList"></leaveList>
+        <el-col :span="24" class="main">
+          <el-col :span="24" class="leaveBtn">
+            <van-button round type="info" icon="smile" @click="onClickRight()">请假申请</van-button>
+          </el-col>
+          <el-col :span="24" class="leaveList">
+            <leaveList :leaveList="leaveList"></leaveList>
+          </el-col>
         </el-col>
       </el-col>
     </el-row>
@@ -14,7 +19,7 @@
 </template>
 
 <script>
-import topNative from '@/layout/common/topInfos.vue';
+import topInfo from '@/layout/common/topInfo.vue';
 import leaveList from '@/layout/user/leaveList.vue';
 import { createNamespacedHelpers, mapGetters } from 'vuex';
 const { mapActions: mapLeave } = createNamespacedHelpers('leave');
@@ -22,8 +27,8 @@ export default {
   name: 'leave',
   props: {},
   components: {
-    topNative,
-    leaveList,
+    topInfo, //头部导航
+    leaveList, //请假列表
   },
   data: () => ({
     leaveList: [],
@@ -38,18 +43,30 @@ export default {
       const res = await this.query({ skip, limit, ...info });
       this.$set(this, `leaveList`, res.data);
     },
+    // 跳转到请假
+    onClickRight() {
+      this.$router.push({ path: '/user/leaveDetail' });
+    },
   },
 };
 </script>
 
 <style lang="less" scoped>
-.info {
+.style {
   width: 100%;
   min-height: 667px;
   position: relative;
   background-color: #f9fafc;
 }
-.native {
-  margin: 0 0 50px 0;
+.top {
+  height: 46px;
+  overflow: hidden;
+}
+.main {
+  min-height: 570px;
+}
+.main .leaveBtn {
+  text-align: center;
+  padding: 15px 0;
 }
 </style>

src/views/user/leaveDetail.vue

@@ -1,12 +1,12 @@
 <template>
   <div id="leaveDetail">
     <el-row>
-      <el-col :span="24" class="info">
-        <el-col :span="24" class="native">
-          <topNative></topNative>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="top">
+          <topInfo></topInfo>
         </el-col>
-        <el-col :span="24" class="form">
-          <formLeave :form="form" @submit="onSubmit" @cancelClick="cancelClick"></formLeave>
+        <el-col :span="24" class="main">
+          <leaveRequest :form="form" @submit="submitForm" @cancelClick="cancelClick"></leaveRequest>
         </el-col>
       </el-col>
     </el-row>
@@ -14,17 +14,16 @@
 </template>
 
 <script>
-import topNative from '@/layout/common/footInfo.vue';
-import formLeave from '@/layout/user/formLeave.vue';
-
+import topInfo from '@/layout/common/topInfo.vue';
+import leaveRequest from '@/layout/user/leaveRequest.vue';
 import { createNamespacedHelpers, mapGetters } from 'vuex';
 const { mapActions: mapLeave } = createNamespacedHelpers('leave');
 export default {
   name: 'leaveDetail',
   props: {},
   components: {
-    topNative, //导航
-    formLeave, //请假
+    topInfo, //头部导航
+    leaveRequest, //请假申请
   },
   data: () => ({
     form: {},
@@ -39,7 +38,7 @@ export default {
   },
   methods: {
     ...mapLeave(['create']),
-    async onSubmit(form) {
+    async submitForm(form) {
       this.form.studentid = '99991';
       let data = this.form;
       let res = await this.create(data);
@@ -54,14 +53,17 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.info {
+.style {
   width: 100%;
-  height: 100vh;
+  min-height: 667px;
   position: relative;
-  overflow: hidden;
   background-color: #f9fafc;
 }
-.native {
-  margin: 0 0 50px 0;
+.top {
+  height: 46px;
+  overflow: hidden;
+}
+.main {
+  min-height: 570px;
 }
 </style>

src/views/user/leaveReason.vue

@@ -1,23 +1,12 @@
 <template>
   <div id="leaveReason">
     <el-row>
-      <el-col :span="24" class="info">
+      <el-col :span="24" class="style">
         <el-col :span="24" class="top">
-          请假审核结果
+          <topInfo></topInfo>
         </el-col>
-        <el-col :span="24" class="reason">
-          <p>请假开始时间：{{ reasonInfo.starttime }}</p>
-          <p>请假结束时间：{{ reasonInfo.endtime }}</p>
-          <p>
-            请假理由：
-            <span class="span">{{ reasonInfo.reason }}</span>
-          </p>
-          <span v-if="reasonInfo.ispass === '0' || reasonInfo.ispass === '1'">
-            <p>
-              请假拒绝理由：
-              <span class="span">{{ reasonInfo.refcause }}</span>
-            </p>
-          </span>
+        <el-col :span="24" class="main">
+          <leaveRefuse :refuseInfo="refuseInfo"></leaveRefuse>
         </el-col>
       </el-col>
     </el-row>
@@ -25,19 +14,19 @@
 </template>
 
 <script>
+import topInfo from '@/layout/common/topInfo.vue';
+import leaveRefuse from '@/layout/user/leaveRefuse.vue';
 import { createNamespacedHelpers, mapGetters } from 'vuex';
 const { mapActions: mapLeave } = createNamespacedHelpers('leave');
 export default {
   name: 'leaveReason',
   props: {},
-  components: {},
+  components: {
+    topInfo, //头部导航
+    leaveRefuse, //拒绝理由
+  },
   data: () => ({
-    reasonInfo: {
-      starttime: '2020-02-18',
-      endtime: '2020-02-20',
-      reason: '请假理由请假理由请假理由请假理由请假理由请假理由请假理由请假理由',
-      refcause: '拒绝理由拒绝理由拒绝理由拒绝理由拒绝理由拒绝理由拒绝理由拒绝理由',
-    },
+    refuseInfo: {},
   }),
   created() {
     this.searchInfo();
@@ -52,7 +41,7 @@ export default {
     async searchInfo() {
       if (this.$route.query.id) {
         const res = await this.fetch(this.id);
-        this.$set(this, `reasonInfo`, res.data);
+        this.$set(this, `refuseInfo`, res.data);
       }
     },
   },
@@ -60,33 +49,17 @@ export default {
 </script>
 
 <style lang="less" scoped>
-p {
-  padding: 0;
-  margin: 0;
-}
-.info {
+.style {
   width: 100%;
-  height: 100vh;
+  min-height: 667px;
   position: relative;
-  overflow: hidden;
-  background-color: #edeae8;
+  background-color: #f9fafc;
 }
-.info .top {
-  text-align: center;
-  padding: 15px 0;
-  font-size: 30px;
-}
-.reason {
-  padding: 0 15px;
-  color: #333;
-}
-.reason p {
-  padding: 10px 0;
+.top {
+  height: 46px;
+  overflow: hidden;
 }
-.reason p .span {
-  width: 100%;
-  display: inline-block;
-  text-indent: 2rem;
-  line-height: 30px;
+.main {
+  min-height: 570px;
 }
 </style>

src/views/user/personalDetail.vue

@@ -1,12 +1,12 @@
 <template>
   <div id="personalDetail">
     <el-row>
-      <el-col :span="24" class="info">
+      <el-col :span="24" class="style">
         <el-col :span="24" class="top">
-          <topNative></topNative>
+          <topInfo></topInfo>
         </el-col>
-        <el-col :span="24" class="message">
-          <messageInfo :messInfo="messInfo"></messageInfo>
+        <el-col :span="24" class="main">
+          <studentInfo :messInfo="messInfo"></studentInfo>
         </el-col>
       </el-col>
     </el-row>
@@ -14,37 +14,34 @@
 </template>
 
 <script>
-import topNative from '@/layout/common/footInfo.vue';
-import messageInfo from '@/layout/user/messageInfo.vue';
-
+import topInfo from '@/layout/common/topInfo.vue';
+import studentInfo from '@/layout/user/studentInfo.vue';
 export default {
   name: 'personalDetail',
   props: {},
   components: {
-    topNative, //头部导航
-    messageInfo, //学生信息
+    topInfo, //头部导航
+    studentInfo, //学生详细信息
   },
   data: () => ({
     messInfo: {
-      name: '刘裕',
+      name: '测试学生',
       id_number: '220182199603257019',
       phone: '17319450324',
       gender: '男',
-      nation: '汉',
+      nation: '汉族',
       school_name: '吉林大学',
       faculty: '计算机学院',
       major: '应用软件技术专业',
-      entry_year: '2002',
-      finish_year: '2006',
+      entry_year: '2016',
+      finish_year: '2020',
       school_job: '班长',
       qq: '1345526645',
-      email: '17319450324@163.com',
+      email: 'guhongwei0324@163.com',
       family_place: '吉林省长春市朝阳区力旺广场B座16楼',
+      family_is_hard: '1',
+      have_grant: '1',
       job: '班长',
-      termid: '期id',
-      batchid: '批次id',
-      classid: '班级id',
-      bedroomid: '寝室id',
     },
   }),
   created() {},
@@ -54,34 +51,17 @@ export default {
 </script>
 
 <style lang="less" scoped>
-p {
-  padding: 0;
-  margin: 0;
-}
-.info {
+.style {
   width: 100%;
-  height: 100%;
+  min-height: 667px;
+  position: relative;
   background-color: #f9fafc;
 }
 .top {
   height: 46px;
-  background-color: #fff;
   overflow: hidden;
 }
-.message {
-  min-height: 667px;
+.main {
+  min-height: 570px;
 }
-// .message p {
-//   padding: 5px 0;
-// }
-// .message p .title {
-//   display: inline-block;
-//   text-align: left;
-//   width: 110px;
-// }
-// .message p .content {
-//   display: inline-block;
-//   text-align: left;
-//   width: 235px;
-// }
 </style>