1111

src/api/stuMan/index.js

@@ -199,6 +199,39 @@ export function queryPlanAppointmentStatic(data) {
   });
 }
 
+/**
+ * 新增修改学员预约
+ */
+export function savePlanAppointment(data) {
+  return request({
+    url: '/PlanAppoiment/SetPlanAppointment',
+    method: 'post',
+    data
+  });
+}
+
+/**
+ * 获取预约时间段
+ */
+export function queryGetTimeList(data) {
+  return request({
+    url: '/PlanAppoiment/GetTimeList',
+    method: 'post',
+    data
+  });
+}
+
+/**
+ * 取消学员预约
+ */
+export function deletePlanAppointment(data) {
+  return request({
+    url: '/PlanAppoiment/RemovePlanAppointment',
+    method: 'post',
+    data
+  });
+}
+
 /**
  * 获取预约详情列表
  */

src/pages/stuMan/AppointmentStatistics.vue

@@ -13,10 +13,13 @@
       </div>
       <div class="col-2">
         <q-btn color="accent" size="sm" class="q-mr-md" label="下载" @click="DownLoadPlanAppointmentStatic()" />
+        <q-btn color="accent" size="sm" class="q-mr-md" label="新增" @click="ShowAddForm" />
       </div>
+
     </div>
     <stuAppointmentList :tableData="tableData" @chang="getPlanAppointmentList" @refresh="refreshPage"
       :loading="loading"></stuAppointmentList>
+    <appointmentForm v-if="isShowAddForm" :setingObj="setingObj" @refresh="refreshPage"></appointmentForm>
   </div>
 </template>
 
@@ -29,17 +32,21 @@
     EduDownLoad
   } from "../../api/common/common";
   import stuAppointmentList from "./components/stuAppointmentList";
+  import appointmentForm from "./components/appointmentForm";
   export default {
     meta: {
       title: "学员预约统计",
     },
     components: {
       stuAppointmentList,
+      appointmentForm,
     },
     data() {
       return {
         persistent: false,
         loading: false,
+        //是否显示新增弹窗
+        isShowAddForm:false,
         msg: {
           StartTime: "",
           EndTime: "",
@@ -58,6 +65,7 @@
             }
           },
         },
+        setingObj: {},
       };
     },
     created() {
@@ -84,6 +92,8 @@
         });
       },
       refreshPage() {
+        this.isShowAddForm=false;
+this.setingObj={};
         this.getPlanAppointmentList();
       },
       //获取学员预约统计
@@ -94,6 +104,12 @@
           }
         });
       },
+      //线索新增弹窗
+      ShowAddForm()
+      {
+this.isShowAddForm=true;
+this.setingObj={};
+      }
     },
   };
 </script>

src/pages/stuMan/components/appointmentForm.vue

+<style>
+
+</style>
+<template>
+  <q-dialog v-model="persistent" content-class="bg-grey-1" persistent transition-show="scale" transition-hide="scale">
+    <q-card style="width: 400px; max-width: 400px" class="stop">
+      <q-card-section>
+        <div class="text-h6">新增/修改学员预约</div>
+      </q-card-section>
+      <q-card-section class="q-pt-none" style="height: 30vh">
+        <q-input filled v-model="postMsg.Date" class="col-6 q-pr-lg q-pb-lg" mask="date" label="预约日期">
+          <template v-slot:append>
+            <q-icon name="event" class="cursor-pointer">
+              <q-popup-proxy ref="qDateProxy1" transition-show="scale" transition-hide="scale">
+                <q-date v-model="postMsg.Date" @input="() => $refs.qDateProxy1.hide()" />
+              </q-popup-proxy>
+            </q-icon>
+          </template>
+        </q-input>
+        <q-select filled stack-label option-value="Id" option-label="Name" v-model="postMsg.chooseTime" ref="Sort"
+          :options="TimeList" label="预约时段" :dense="false" emit-value map-options class="col-6 q-pr-lg q-pb-lg">
+        </q-select>
+
+        <q-select filled stack-label use-input option-value="StuId" option-label="StuName" v-model="postMsg.StuId"
+          ref="StuId" :options="StuList" label="学员" :dense="false" emit-value map-options class="col-6 q-pr-lg q-pb-lg"
+          @filter="filterStu">
+        </q-select>
+      </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="closeSaveForm" />
+        <q-btn label="立即提交" color="accent q-px-md" style="font-weight: 400 !important" :loading="saveLoading"
+          @click="saveAppointment" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script>
+  import {
+    savePlanAppointment,
+    queryGetTimeList
+  } from "../../../api/stuMan/index";
+
+  import {
+    GetStudentList,
+  } from '../../../api/course/class';
+
+  import Lockr from "lockr";
+  export default {
+    props: {
+      setingObj: {
+        type: Object,
+        default: null,
+      },
+    },
+    data() {
+      return {
+        persistent: true,
+        postMsg: {
+          Date: "",
+          StartTime: "",
+          EndTime: "",
+          DetailsId: "",
+          StuId: "",
+          Account_Id: "",
+          chooseTime: ""
+        },
+        TimeList: [],
+        StuList: [],
+        allStuList: [], //所有学员
+        //防止重复提交
+        saveLoading: false,
+      };
+    },
+    created() {
+      this.getTimeList();
+      this.queryStudentList();
+    },
+    mounted() {
+
+    },
+    methods: {
+      //筛选学生
+      filterStu(val, update) {
+        update(() => {
+          if (val === "") {
+            this.StuList = JSON.parse(JSON.stringify(this.allStuList));
+          } else {
+            const needle = val.toLowerCase();
+            this.StuList = this.allStuList.filter(
+              v => v.StuName.toLowerCase().indexOf(needle) > -1
+            );
+          }
+        });
+      },
+      //获取学员列表
+      queryStudentList() {
+        GetStudentList({}).then(res => {
+          if (res.Code == 1) {
+            this.StuList = res.Data;
+            this.allStuList = res.Data;
+          }
+        })
+      },
+      //获取可约时间段
+      getTimeList() {
+        this.TimeList = [];
+        queryGetTimeList({}).then(res => {
+          if (res.Code == 1) {
+            var tempData = res.Data;
+            if (tempData && tempData.length > 0) {
+              tempData.forEach(item => {
+                this.TimeList.push({
+                  Id: item.Sort,
+                  Name: item.StartTime + "-" + item.EndTime,
+                  StartTime: item.StartTime,
+                  EndTime: item.EndTime
+                });
+              })
+            }
+          }
+        })
+      },
+      //关闭弹窗
+      closeSaveForm() {
+        this.$emit("refresh");
+      },
+
+      //保存预约信息
+      saveAppointment() {
+
+        if (this.postMsg.chooseTime && this.postMsg.chooseTime > 0) {
+          let chooseTime = this.TimeList.find(x => x.Id == this.postMsg.chooseTime);
+          if (chooseTime) {
+            this.postMsg.StartTime = chooseTime.StartTime;
+            this.postMsg.EndTime = chooseTime.EndTime;
+          }
+        }
+        if (this.postMsg.StuId && this.postMsg.StuId > 0) {
+          let chooseStu = this.allStuList.find(x => x.StuId == this.postMsg.StuId);
+          if (chooseStu) {
+            this.postMsg.Account_Id = chooseStu.Account_Id
+          }
+        }
+        this.saveLoading = true;
+        savePlanAppointment(this.postMsg).then(res => {
+          this.saveLoading = false;
+          if (res.Code == 1) {
+            this.$q.notify({
+              icon: 'iconfont icon-chenggong',
+              color: 'accent',
+              timeout: 2000,
+              message: '预约成功!',
+              position: 'top'
+            });
+            this.closeSaveForm();
+          }
+        }).catch(() => {
+          this.saveLoading = false
+        })
+      }
+    },
+  };
+</script>
\ No newline at end of file

src/pages/stuMan/components/stuAppointmentList.vue

@@ -3,30 +3,27 @@
   <div style="padding: 20px 0;height: 700px;overflow-y: scroll;">
     <div class="page-content">
       <div class="list-box">
-        <!-- <div class="list-haeder">
-          <div>日期</div>
-          <div>上课学生</div>
-        </div> -->
-        <div v-for="item in tableData" class="listbox">
+
+        <div v-for="(item,index) in tableData" class="listbox" :key="index">
           <div class="list-content">
             <div class="content-week">
               <p>{{item.DateStr}}</p>
               <p>{{item.WeekStr}}</p>
             </div>
             <div class="content-right">
-              <div v-for="i in item.TimeList" class="right-box">
+              <div v-for="(subItem,subIndex) in item.TimeList" class="right-box" :key="subIndex">
                 <div class="content-class">
-                  <div v-if="i.StartTime=='09:30'">第一节课</div>
-                  <div v-if="i.StartTime=='11:10'">第二节课</div>
-                  <div v-if="i.StartTime=='13:30'">第三节课</div>
-                  <div v-if="i.StartTime=='15:10'">第四节课</div>
-                  <div v-if="i.StartTime=='16:50'">第五节课</div>
-                  <div v-if="i.StartTime=='19:00'">第六节课</div>
+                  <div v-if="subItem.StartTime=='09:30'">第一节课</div>
+                  <div v-if="subItem.StartTime=='11:10'">第二节课</div>
+                  <div v-if="subItem.StartTime=='13:30'">第三节课</div>
+                  <div v-if="subItem.StartTime=='15:10'">第四节课</div>
+                  <div v-if="subItem.StartTime=='16:50'">第五节课</div>
+                  <div v-if="subItem.StartTime=='19:00'">第六节课</div>
                 </div>
                 <div class="content-name">
-                  <div v-for="S in i.StuList">
-                    <q-badge color="blue" @click="getStuRight(S)">
-                      {{S.StuName}}
+                  <div v-for="(stuItem,stuIndex) in subItem.StuList" :key="stuIndex">
+                    <q-badge color="blue" @click="getStuRight(stuItem)">
+                      {{stuItem.StuName}}
                     </q-badge>
                   </div>
                 </div>
@@ -39,21 +36,14 @@
     </div>
     <appointmentDetails v-if="isShowDetails" :showItem="showItem" @refreshpage="refreshpage"></appointmentDetails>
     <!-- 学员信息抽屉 -->
-    <studentRight-form
-      v-if="isShowStuRight"
-      :isJudgeTrans="isJudgeTrans"
-      :BelongType="BelongType"
-      :save-obj="stuOption"
-      @close="closeStuForm"
-      @success="refreshStuList"
-      @reload="refreshStuList"
-    >
+    <studentRight-form v-if="isShowStuRight" :isJudgeTrans="isJudgeTrans" :BelongType="BelongType" :save-obj="stuOption"
+      @close="closeStuForm" @success="refreshStuList" @reload="refreshStuList">
     </studentRight-form>
   </div>
 </template>
 <script>
   import appointmentDetails from "./appointmentDetails";
-  import studentRightForm from "../../../components/school/student/studentRight-form";//学员信息
+  import studentRightForm from "../../../components/school/student/studentRight-form"; //学员信息
   export default {
     props: {
       tableData: {
@@ -94,8 +84,8 @@
         //是否显示预约详情
         isShowDetails: false,
         showItem: {},
-        isShowStuRight:false,
-        stuOption:null,
+        isShowStuRight: false,
+        stuOption: null,
         BelongType: 1,
         isJudgeTrans: 1,
       };
@@ -122,8 +112,8 @@
       },
       //刷新页面
       refreshpage() {
-        this.isShowDetails=false;
-        this.showItem={};
+        this.isShowDetails = false;
+        this.showItem = {};
       },
       //显示预约详情
       ShowStuAppoint(item) {
@@ -134,27 +124,31 @@
   };
 </script>
 <style>
-  .list-haeder div:first-child{
+  .list-haeder div:first-child {
     width: 270px;
     flex-shrink: 0;
     text-align: center;
     border-right: 1px solid #eeeeee;
   }
-  .list-haeder div:last-child{
+
+  .list-haeder div:last-child {
     padding: 0 0 0 10px;
   }
-  .list-haeder{
+
+  .list-haeder {
     line-height: 40px;
     display: flex;
     border-bottom: 1px solid #eeeeee;
     color: #ffffff;
     background: #305496;
   }
-  .content-name div{
+
+  .content-name div {
     margin-left: 5px;
     cursor: pointer;
   }
-  .content-name{
+
+  .content-name {
     height: 40px;
     overflow: hidden;
     flex-grow: 1;
@@ -165,10 +159,12 @@
     border-bottom: 1px solid #eeeeee;
     background: #ffffff;
   }
-  .right-box:last-child .content-name{
+
+  .right-box:last-child .content-name {
     border-bottom: 0;
   }
-  .content-class{
+
+  .content-class {
     width: 150px;
     line-height: 40px;
     height: 40px;
@@ -178,51 +174,61 @@
     background: #F2F4F7;
     border-bottom: 1px solid #eeeeee;
   }
-  .content-right .right-box:last-child .content-class{
+
+  .content-right .right-box:last-child .content-class {
     border: 0;
   }
-  .right-box{
+
+  .right-box {
     display: flex;
     align-items: center;
   }
-  .content-right{
+
+  .content-right {
     flex-grow: 1;
   }
-  .content-week{
+
+  .content-week {
     width: 120px;
     flex-shrink: 0;
     text-align: center;
-    
+
   }
-  .list-content{
+
+  .list-content {
     display: flex;
     align-items: center;
     /* box-shadow: 0px 6px 14px 0px rgba(176, 176, 176, 0.2); */
   }
-  .listbox{
+
+  .listbox {
     display: flex;
     flex-direction: column;
   }
-  .list-box{
+
+  .list-box {
     display: flex;
     flex-direction: column;
     border: 1px solid #eeeeee;
   }
-  .list-box .listbox:last-child .height10{
+
+  .list-box .listbox:last-child .height10 {
     height: 0;
     border: 0;
   }
-  .height10{
+
+  .height10 {
     width: 100%;
     height: 20px;
     background: #F2F4F7;
     border-top: 1px solid #eeeeee;
     border-bottom: 1px solid #eeeeee;
   }
-  .num-text{
-    cursor:pointer;
-    color:blue;
-    text-decoration:underline;
+
+  .num-text {
+    cursor: pointer;
+    color: blue;
+    text-decoration: underline;
     margin-left: 10px;
     margin-right: 30px;
   }