学员出勤

src/api/stuMan/index.js

@@ -22,12 +22,23 @@ export function PlanAppointmentConfig(data) {
   });
 }
 
+/**
+ * 修改学员上课方式
+ */
+ export function SetGuestCheckStyle(data) {
+  return request({
+    url: '/ScheduleCourse/SetGuestCheckStyle',
+    method: 'post',
+    data
+  });
+}
+
 /**
  * 获取学员出勤情况
  */
 export function getStudentAttendanceDayStatistics(data) {
   return request({
-    url: '/stu/GetStudentAttendanceDayStatistics',
+    url: '/ScheduleCourse/GetAppointCheckPage',
     method: 'post',
     data
   });

src/pages/stuMan/studentManage.vue

@@ -15,34 +15,14 @@
   <div class="page-body studentManage">
     <div class="page-search row items-center ">
       <div class="col row wrap q-mr-lg q-col-gutter-md">
-        <div class="col-3">
-          <q-select @input="getClass" standout="bg-primary text-white" option-value="SId" option-label="SName"
-            v-model="msg.School_Id" :options="schoolList" emit-value map-options label="关联校区" />
-        </div>
-        <div class="col-3">
-          <q-select @input="getClass" standout="bg-primary text-white" option-value="CourseId" option-label="CourseName"
-            v-model="msg.CouseId" :options="CourseList" emit-value map-options label="课程" use-input
-            @filter="filterCourse">
-            <template v-slot:no-option>
-              <q-item>
-                <q-item-section class="text-grey">
-                  未找到相关数据
-                </q-item-section>
-              </q-item>
-            </template>
-          </q-select>
-        </div>
-        <div class="col-3">
-          <q-select @input="refreshPage" standout="bg-primary text-white" option-value="ClassId"
-            option-label="ClassName" v-model="msg.ClassId" :options="ClassList" emit-value map-options label="班级"
-            use-input @filter="filterClass" />
-        </div>
         <div class="col-3 Sysuser_Date">
-          <q-field filled>
+          <q-field filled label="日期" stack-label>
             <template v-slot:control>
-              <el-date-picker v-model="msg.StartDate" type="date" placeholder="开始日期" value-format="yyyy-MM-dd"
-                :picker-options="option" :clearable='false' @change="resetSearch">
-              </el-date-picker>    
+              <div class="self-center full-width no-outline" tabindex="0">{{ daterangeTimes }}</div>
+                <q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
+                    <q-date v-model="dateRange" :options="optionsFn" range mask="YYYY/MM/DD" landscape
+                    @range-end="dateRangeHandler"></q-date>
+                </q-popup-proxy>
             </template>
           </q-field>
         </div>
@@ -64,60 +44,23 @@
           <div class="col-2 q-table__title">学员出勤管理</div>
           <q-space />
           <div class="page-option">
-            <q-btn color="accent" size="sm" class="q-mr-md" label="导出" @click="getexport()" />
+            <!-- <q-btn color="accent" size="sm" class="q-mr-md" label="导出" @click="getexport()" /> -->
           </div>
         </template>
         <template v-slot:body-cell-GuestName="props">
           <q-td :props="props" style="padding-right:0px">
-            <div v-for="(x,index) in props.row.GuestList" :key="index">
-              <div class="border-bottom">
-                {{ x.GuestName }}
-              </div>
-            </div>
-            <div v-if="!props.row.GuestList || props.row.GuestList.length == 0">
-              <div class="remark-font">暂无</div>
-            </div>
-          </q-td>
-        </template>
-        <template v-slot:body-cell-CurrentDeductionHours="props">
-          <q-td :props="props">
-            <div v-for="(x,index) in props.row.GuestList" :key="index">
-              <div class="border-bottom">
-                {{ x.CurrentDeductionHours }}
-              </div>
-            </div>
-            <div v-if="!props.row.GuestList || props.row.GuestList.length == 0">
-              <div class="remark-font">暂无</div>
-            </div>
+            {{props.row.GuestName}}
           </q-td>
         </template>
-        <template v-slot:body-cell-CheckStatus="props">
+        <template v-slot:body-cell-optioned="props">
           <q-td :props="props">
-            <div v-for="(x,index) in props.row.GuestList" :key="index">
-              <div class="border-bottom">
-                <span v-if="x.CheckStatus == 0">正常</span>
-                <span v-if="x.CheckStatus == 1">缺席</span>
-                <span v-if="x.CheckStatus == 2">请假</span>
-              </div>
-            </div>
-            <div v-if="!props.row.GuestList || props.row.GuestList.length == 0">
-              <div class="remark-font">暂无</div>
-            </div>
+            <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="修改上课方式"
+                  @click="EditClassMode(props.row)" />
           </q-td>
         </template>
         <template v-slot:bottom>
-          <!-- <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="pageCount"
-              :input="true" @input="changePage" /> -->
-        </template>
-        <template v-slot:body-cell-optioned="props">
-          <q-td :props="props">
-            <div v-for="(x,index) in props.row.GuestList" :key="index">
-              <div class="border-bottom">
-                <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="编辑"
-                  @click="EditCourse(x,props.row)" />
-              </div>
-            </div>
-          </q-td>
+          <q-pagination class="full-width justify-end" v-model="msg.PageIndex" color="primary" :max="pageCount"
+              :input="true" @input="changePage" />
         </template>
       </q-table>
     </div>
@@ -135,7 +78,25 @@
         <q-card-actions align="right" class="bg-white">
           <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" @click="IsShowDialog=false" />
           <q-btn label="立即提交" color="accent" class="q-px-md" style="font-weight:400 !important"
-            @click="saveAttendance" />
+            @click="saveAttendance"/>
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
+    <!-- 修改上课方式 -->
+    <q-dialog v-model="IsShowGuestCheck" persistent transition-show="scale" transition-hide="scale">
+      <q-card style="width: 400px;max-width:500px;">
+        <q-card-section>
+          <div class="text-h6">修改上课方式</div>
+        </q-card-section>
+        <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
+          <q-select standout="bg-primary text-white" option-value="Id" option-label="Name" v-model="ClassModeMsg.AttendanceMethod"
+            :options="GuestCheckList" emit-value map-options label="上课方式" />
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right" class="bg-white">
+          <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" @click="IsShowGuestCheck=false" />
+          <q-btn label="立即提交" color="accent" class="q-px-md" style="font-weight:400 !important"
+            @click="setGuestCheck" :loading="GuestCheckLoading"/>
         </q-card-actions>
       </q-card>
     </q-dialog>
@@ -155,7 +116,7 @@
     getClassDropDownList
   } from '../../api/school/index';
   import {
-    getStudentAttendanceDayStatistics
+    getStudentAttendanceDayStatistics,SetGuestCheckStyle
   } from "../../api/stuMan/index"
   import selectTree from "../../components/common/select-tree";
   import {
@@ -164,6 +125,7 @@
   import {
     EduDownLoad,
   } from '../../api/common/common';
+  import { date } from 'quasar'
   export default {
     meta: {
       title: "学员出勤管理"
@@ -174,11 +136,11 @@
     data() {
       return {
         columns: [{
-            name: "ClassName",
+            name: "GuestName",
             required: true,
-            label: "班级",
+            label: "学生",
             align: "left",
-            field: row => row.ClassName
+            field: row => row.GuestName
           },
           {
             name: "CourseName",
@@ -195,39 +157,25 @@
             field: row => row.TeacherName
           },
           {
-            name: "ClassDate",
+            name: "StartTime",
             required: true,
-            label: "上课日期",
+            label: "上课时间",
             align: "left",
-            field: row => row.ClassDate
+            field: row => row.StartTime
           },
           {
-            name: "TimeBucket",
+            name: "EndTime",
             required: true,
-            label: "上课时间段",
+            label: "下课时间",
             align: "left",
-            field: row => row.TimeBucket
+            field: row => row.EndTime
           },
           {
-            name: "GuestName",
+            name: "AttendanceMethodName",
             required: true,
-            label: "学生",
+            label: "上课方式",
             align: "left",
-            field: row => row.GuestName
-          },
-          {
-            name: "CurrentDeductionHours",
-            required: true,
-            label: "课时",
-            align: "left",
-            field: row => row.CurrentDeductionHours
-          },
-          {
-            name: "CheckStatus",
-            required: true,
-            label: "状态",
-            align: "left",
-            field: row => row.CheckStatus
+            field: row => row.AttendanceMethodName
           },
           {
             name: "optioned",
@@ -252,13 +200,11 @@
           }
         ],
         msg: {
+          PageIndex:1,
+          PageSize: 10,
           StartDate: '',
-          School_Id: '',
-          CouseId: 0,
-          ClassId: 0,
-          OrderGuestId: '',
+          EndDate: '',
           GuestName: '',
-          CheckStatus: -1,
         },
         IsShowDialog: false,
         //课程分类树形列表
@@ -299,6 +245,29 @@
           StudyNum: 0,
         },
         iseditjurisdiction: false,
+        ClassModeMsg: {
+          ClassCheckId: 0,
+          AttendanceMethod: null,
+        },
+        pageCount: 0,
+        total:0,
+        daterangeTimes:'',
+        IsShowGuestCheck: false,
+        GuestCheckList: [{
+          Name: '线下',
+          Id: 1
+        }, {
+          Name: '线上',
+          Id: 2
+        }, {
+          Name: '录播',
+          Id: 3
+        }, ],
+        GuestCheckLoading: false,
+        dateRange: {
+          to: '',
+          from:''
+        }
       };
     },
     mounted() {
@@ -315,13 +284,60 @@
       let day = d.getDate();
       day = day < 10 ? '0' + day : day;
       let today = year + '-' + month + '-' + day;
-      this.msg.StartDate = today;
+
+      this.msg.StartDate = date.formatDate(date.addToDate(new Date(), { days: -31 }), 'YYYY-MM-DD');
+      this.msg.EndDate = date.formatDate(date.addToDate(new Date(), { days: 0 }), 'YYYY-MM-DD');;
+      this.daterangeTimes = `${this.msg.StartDate}/${today}`
+
+      this.dateRange.to = date.formatDate(date.addToDate(new Date(), { days: -31 }), 'YYYY/MM/DD');
+      this.dateRange.from = date.formatDate(date.addToDate(new Date(), { days: 0 }), 'YYYY/MM/DD');
       this.getlist();
       this.getSchool()
       this.getClass()
       this.getCourseList()
     },
     methods: {
+      // 修改上课方式
+      EditClassMode(item) {
+        this.ClassModeMsg.ClassCheckId = item.ClassCheckId
+        this.ClassModeMsg.AttendanceMethod = item.AttendanceMethod
+        this.IsShowGuestCheck = true
+      },
+      setGuestCheck() {
+        if(!this.ClassModeMsg.AttendanceMethod) return this.$q.notify({
+                type: 'negative',
+                position: "top",
+                message: `请选择上课方式!`
+              })
+        this.GuestCheckLoading = true;
+        SetGuestCheckStyle(this.ClassModeMsg)
+          .then(res => {
+            this.ClassModeMsg = {
+              ClassCheckId: 0,
+              AttendanceMethod: null,
+            },
+            this.IsShowGuestCheck = false
+            this.GuestCheckLoading = false;
+            this.resetSearch()
+          })
+          .catch(() => {
+            this.GuestCheckLoading = false;
+          });
+      },
+      optionsFn(cd) {
+        return cd >= date.formatDate(date.addToDate(new Date(), { days: 1 }), 'YYYY-MM-DD')
+      },
+      dateRangeHandler(e) {
+        this.msg.StartDate = `${e.from.year}-${e.from.month>9?e.from.month:'0'+e.from.month}-${e.from.day>9?e.from.day:'0'+e.from.day}`
+        this.msg.EndDate = `${e.to.year}-${e.to.month>9?e.to.month:'0'+e.to.month}-${e.to.day>9?e.to.day:'0'+e.to.day}`
+        this.daterangeTimes = `${this.msg.StartDate} / ${this.msg.EndDate} `
+
+        this.dateRange.to = `${e.from.year}/${e.from.month}/${e.from.day}`
+        this.dateRange.from =  `${e.to.year}/${e.to.month}/${e.to.day}`
+
+        if (this.$refs.qDateProxy) this.$refs.qDateProxy.hide()
+        this.resetSearch()
+      },
       //获取校区列表
       getSchool() {
         getSchoolDropdown({}).then(res => {
@@ -398,13 +414,20 @@
       resetSearch() {
         this.getlist();
       },
+      //翻页
+      changePage(val) {
+        this.msg.PageIndex = val;
+        this.getList();
+      },
       //获取菜单分页列表
       getlist() {
         this.loading = true;
         getStudentAttendanceDayStatistics(this.msg)
           .then(res => {
             this.loading = false;
-            this.data = res.Data;
+            this.data = res.Data.PageData;
+            this.total = res.data.data.count;
+            this.pageCount = res.Data.pageModel.PageCount;
           })
           .catch(() => {
             this.loading = false;
@@ -464,4 +487,4 @@
 </style>
 <style lang="sass">
   @import url('~assets/css/table.sass')
-</style>
\ No newline at end of file
+</style>