22

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@quasar/extras": "^1.0.0",
+    "@quasar/quasar-ui-qcalendar": "^3.4.1",
     "@riophae/vue-treeselect": "^0.4.0",
     "ali-oss": "^6.12.0",
     "apexcharts": "^3.32.0",

src/api/studyabroad/subscribe.js

+import request from '../../utils/request'
+/**
+ * 获取预约课管理统计
+ */
+export function GetAppointmentPlanStat(data) {
+    return request({
+        url: '/TeacherClass/GetAppointmentPlanStat',
+        method: 'post',
+        data
+    })
+}
+/**
+ * 获取约课配置
+ */
+export function GetAppointmentConfig(data) {
+    return request({
+        url: '/Scroll/GetAppointmentConfig',
+        method: 'post',
+        data
+    })
+}
+/**
+ * 获取老师的空闲上课时段
+ */
+export function GetCanTeacherClassTimeList(data) {
+    return request({
+        url: '/Scroll/GetCanTeacherClassTimeList',
+        method: 'post',
+        data
+    })
+}
+/**
+ * 获取可预约的学生列表
+ */
+export function GetCanAppointmentStuList(data) {
+    return request({
+        url: '/Scroll/GetCanAppointmentStuList',
+        method: 'post',
+        data
+    })
+}
+/**
+ * 获取预约学生的详情
+ */
+export function GetStuAppointmentInfo(data) {
+    return request({
+        url: '/Scroll/GetStuAppointmentInfo',
+        method: 'post',
+        data
+    })
+}
+/**
+ * 后台约课
+ */
+export function SetAdminScrollAppointment(data) {
+    return request({
+        url: '/Scroll/SetAdminScrollAppointment',
+        method: 'post',
+        data
+    })
+}/**
+ * 后台取消预约
+ */
+export function CancelAppointment(data) {
+    return request({
+        url: '/Scroll/CancelAppointment',
+        method: 'post',
+        data
+    })
+}/**
+ * 后台确认约课
+ */
+export function SetSureAppointment(data) {
+    return request({
+        url: '/Scroll/SetSureAppointment',
+        method: 'post',
+        data
+    })
+}
\ No newline at end of file

src/components/school/student/transfer-order/tickMode.vue

+<template>
+  <div class="q-pa-md businessModel">
+    <div class="full-width business-header">
+      请选择上课模式：
+    </div>
+    <div class="box-businessModel" :class="{ 'checked-border': type == 1 }" @click="chooseChange(1)">
+      <i class="iconfont icon-banjixinxi" style="font-size:38px"></i>
+      <div>班课学习</div>
+      <div class="right" v-if="type == 1">
+        <q-icon name="check" class="check-icon" />
+      </div>
+    </div>
+    <div class="box-businessModel" :class="{ 'checked-border': type == 2 }" @click="chooseChange(2)">
+      <i class="iconfont icon-yueke" style="font-size:38px"></i>
+      <div>约课学习</div>
+      <div class="right" v-if="type == 2">
+        <q-icon name="check" class="check-icon" />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    model:{
+      prop:'type',
+      event:"changeType"
+    },
+    props: {
+      type: {
+        type: [String, Number],
+        default: 1
+      }
+    },
+    methods: {
+      chooseChange(n) {
+        this.$emit('changeType',n)
+      }
+    }
+  };
+
+</script>
+<style lang="scss" scoped>
+  .businessModel {
+    overflow: hidden;
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0 auto;
+    width: 700px;
+    justify-content: space-between;
+    margin: 50px 0;
+
+    .business-header {
+      font-size: 16px;
+      font-weight: 700;
+      margin-bottom: 15px;
+    }
+
+    .box-businessModel {
+      cursor: pointer;
+      width: 311px;
+      height: 198px;
+      background: #f9f9f9;
+      border-radius: 5px;
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      align-items: center;
+      position: relative;
+
+      .right {
+        position: absolute;
+        right: -20px;
+        bottom: -20px;
+        display: block;
+        width: 0;
+        height: 0;
+        transform: rotate(45deg);
+        border: 20px solid transparent;
+        border-left: 20px solid #3470ff;
+
+        .check-icon {
+          position: absolute;
+          top: -8px;
+          left: -19px;
+          transform: rotate(-45deg);
+          font-size: 14px;
+          font-weight: 700;
+          color: #fff;
+        }
+      }
+    }
+  }
+
+  .checked-border {
+    background-color: #edf2fd !important;
+    border: 2px solid #3470ff !important;
+    color: #3470ff;
+  }
+
+</style>

src/components/school/student/transfer-order/yueke.vue

+<template>
+  <div>
+    <div class="page-search row items-center">
+      <div class="col row wrap q-mr-lg q-col-gutter-md">
+        <div class="col-4">
+          <q-input
+            @input="resetSearch"
+            clearable
+            filled
+            v-model="msg.CourseName"
+            label="课程名称"
+            @clear="resetSearch"
+            maxlength="20"
+          />
+        </div>
+        <!-- <div class="col-4">
+          <select-tree
+            :treeData="TreeCategoryList"
+            :defaultArray="returnString"
+            nodeKey="CateId"
+            :multiple="true"
+            labelKey="CateName"
+            childrenKey="ChildList"
+            tipText="课程系列"
+            @getChild="getChild"
+          ></select-tree>
+        </div> -->
+        <div class="col-4">
+          <q-select
+            @input="resetSearch"
+            filled
+            v-model="msg.CourseSubject"
+            :options="CourseSubjectList"
+            option-label="SubjectName"
+            option-value="Id"
+            emit-value
+            map-options
+            label="所属科目"
+            clearable
+          />
+        </div>
+      </div>
+    </div>
+    <q-table
+      :pagination="msg"
+      selection="single"
+      :selected.sync="selection"
+      no-data-label="暂无相关数据"
+      flat
+      class="sticky-tow-column-table sticky-two-header-table"
+      separator="none"
+      :data="dataList"
+      :columns="columns"
+      row-key="ClassId"
+      @update:selected="emitSel"
+      table-class="table"
+    >
+     <template v-slot:body-cell-CourseName="props">
+        <q-td :props="props">
+            {{ props.row.CourseName }}-{{props.row.ClassNo}}
+        </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>
+    </q-table>
+  </div>
+</template>
+
+<script>
+import {
+  queryCoursePage,
+  queryCourseCategoryTree,
+  deleteCourseInfo,
+  querySaleplatList,
+  getCourseSubject
+} from "../../../../api/course/index";
+import {
+  getClassPruductList //获取日语培训列表
+} from "../../../../api/sale/sale";
+// import selectTree from "../../../../components/common/select-tree";
+export default {
+  components: {
+    // selectTree
+  },
+  props: {
+    select: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      selection: [],
+      columns: [
+        {
+          name: "CourseName",
+          label: "课程",
+          field: "CourseName",
+          align: "left"
+        },
+        {
+          name: "CourseSubjectName",
+          required: true,
+          label: "所属科目",
+          align: "left",
+          field: row => row.CourseSubjectName
+        },
+        // {
+        //   name: "CateName",
+        //   required: true,
+        //   label: "系列",
+        //   align: "left",
+        //   field: row => row.CateName
+        // },
+        {
+          name: "SellPrice",
+          required: true,
+          label: "直客价",
+          align: "left",
+          field: row => row.SellPrice.toFixed(2)
+        }
+      ],
+      // msg: {
+      //   pageIndex: 1,
+      //   pageSize: 10,
+      //   rowsPerPage: 10,
+      //   CourseName: "",
+      //   QCateIds: "",
+      //   IsQPrice: 1,
+      //   Status: "0",
+      //   Saleplat: 0,
+      //   CourseSubject: "", //所属科目
+      //   ClassScrollType :2
+      // },
+      msg: {
+        pageIndex: 1,
+        pageSize: 8,
+        ClassName: "", //班级名称
+        StartTime: "", //开始时间
+        EndTime: "", //结束时间
+        School_Id: "", //关联校区
+        CouseId: 0, //课程id
+        Teacher_Id: 0, //教师id
+        Q_CanApply: "0", //是否可以报名 1是
+        JoinStartTime: "", //报名截止日期开始
+        JoinEndTime: "", //报名截止日期结束
+        ClassNo: "", //班号
+        CourseSubject: "", //所属科目
+        CourseName:"",
+        ClassScrollType :2,
+      },
+      CourseSubjectList: [],
+      //课程分类树形列表
+      TreeCategoryList: [],
+      returnString: [], //默认值
+      dataList: [],
+      pageCount: 0
+    };
+  },
+  mounted() {
+    this.selection = this.select;
+    this.getCourseList();
+    this.queryCourseSubject();
+    // this.getCategorytree();
+  },
+  methods: {
+    emitSel(val) {
+      this.$emit("select", val);
+    },
+    //获取课程分页列表
+    getCourseList() {
+      getClassPruductList(this.msg).then(res => {
+        this.dataList = res.Data.PageData;
+        this.pageCount = res.Data.PageCount;
+      });
+    },
+
+    // 课程翻页
+    changePage(val) {
+      this.msg.pageIndex = val;
+      this.getCourseList();
+    },
+    //获取分页列表
+    // getCourseList() {
+    //   this.loading = true;
+    //   queryCoursePage(this.msg)
+    //     .then(res => {
+    //       this.loading = false;
+    //       this.dataList = res.Data.PageData;
+    //       this.pageCount = res.Data.PageCount;
+    //     })
+    //     .catch(() => {
+    //       this.loading = false;
+    //     });
+    // },
+    //重新查询
+    resetSearch() {
+      this.msg.pageIndex = 1;
+      this.getCourseList();
+    },
+    //翻页
+    // changePage(val) {
+    //   this.msg.pageIndex = val;
+    //   this.getCourseList();
+    // },
+    getCategorytree() {
+      this.TreeCategoryList = [];
+      var qMsg = {};
+      queryCourseCategoryTree(qMsg).then(res => {
+        this.TreeCategoryList = res.Data;
+      });
+    },
+    queryCourseSubject() {
+      getCourseSubject({}).then(res => {
+        if (res.Code == 1) {
+          this.CourseSubjectList = res.Data;
+        }
+      });
+    },
+    //分类改变
+    getChild(cateObj) {
+      var tempStr = "";
+      if (cateObj && cateObj != "") {
+        tempStr = cateObj;
+      }
+      this.msg.QCateIds = tempStr;
+      this.msg.pageIndex = 1;
+      this.getCourseList();
+    }
+  }
+};
+</script>
+<style>
+.table {
+  max-height: 400px;
+}
+
+.table::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+
+.table::-webkit-scrollbar-track {
+  background: #fff;
+  border-radius: 2px;
+}
+
+.table::-webkit-scrollbar-thumb {
+  background: #444;
+  border-radius: 10px;
+}
+
+.table::-webkit-scrollbar-thumb:hover {
+  background: #999;
+}
+
+.table::-webkit-scrollbar-corner {
+  background: #204754;
+}
+</style>

src/components/stuMan/subscribe/subscribeForm.vue

+<template>
+  <q-dialog
+    v-model="show"
+    content-class="bg-grey-1"
+    persistent
+    transition-show="scale"
+    transition-hide="scale"
+    @input="changeDig"
+  >
+    <q-card style="width: 800px;max-width:900px;">
+      <q-card-section>
+        <div class="text-h6">编辑</div>
+      </q-card-section>
+      <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
+        <div class="row col q-mr-lg q-col-gutter-md">
+          <q-field filled label="日期" stack-label class="col-6">
+            <template v-slot:control>
+              <div>{{ dateObj.date }}</div>
+            </template>
+          </q-field>
+          <q-select
+            filled
+            stack-label
+            use-input
+            option-value="CourseId"
+            option-label="CourseName"
+            v-model="teaClassMsg.CourseId"
+            ref="CourseId"
+            :options="CourseList"
+            label="课程"
+            :dense="false"
+            class="col-6"
+            emit-value
+            map-options
+            @filter="filterCourse"
+            @input="getCanTeacherClassTimeList()"
+          />
+          <q-select
+            v-if="teaClassMsg.CourseId>0"
+            filled
+            v-model="teaClassMsg.TeacherId"
+            option-value="TId"
+            option-label="TeacherName"
+            :options="teacherList"
+            emit-value
+            map-options
+            label="老师"
+            class="col-6"
+            @input="getCanTeacherClassTimeList()"
+          />
+        </div>
+      </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="changeDig(false)"
+        />
+        <q-btn
+          label="立即提交"
+          color="accent"
+          class="q-px-md"
+          style="font-weight:400 !important"
+          @click=""
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+<script>
+import {
+  GetCanTeacherClassTimeList,
+  GetCanAppointmentStuList,
+  GetStuAppointmentInfo,
+  SetAdminScrollAppointment
+} from "../../../api/studyabroad/subscribe.js";
+import { queryCourseDropdownList } from "../../../api/course/index";
+export default {
+  model: {
+    prop: "show",
+    event: "changeshow"
+  },
+  props: {
+    dateObj: {
+      type: Object,
+      default: null
+    },
+    saveObj: {
+      type: Object,
+      default: null
+    },
+    show: {
+      type: Boolean,
+      default: false
+    },
+    teacherList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  watch: {
+    dateObj: {
+      handler(val) {
+        console.log(63, val);
+      },
+      deep: true
+    }
+  },
+  data() {
+    return {
+      CourseList: [], //关联课程下拉数据
+      AllCourseList: [], //所有课程列表
+      teacherTimeList: [],
+      teaClassMsg: {
+        Date: "",
+        TeacherId: 0,
+        CourseId: 0
+      },
+      stuList: [],
+      stuMsg: {
+        CourseId: 0,
+        NextChapterNo: 0
+      },
+      detailObj: {},
+      detailMsg: {
+        StuId: 0,
+        GuestId: 0
+      },
+      saveMsg: {
+        Date: "",
+        TeacherId: 0,
+        ShiftSort: "",
+        StuId: 0,
+        GuestId: 0,
+        CourseId: 0,
+        ChapterNo: 0
+      }
+    };
+  },
+  created() {},
+  mounted() {
+    this.getCourseList();
+  },
+  methods: {
+    //开关弹窗
+    changeDig(val) {
+      this.$emit("changeshow", val);
+    },
+    //获取课程
+    getCourseList() {
+      queryCourseDropdownList({
+        IsQPrice: 1,
+        IsQuerySalePlat: 1
+      }).then(res => {
+        if (res.Code == 1) {
+          this.CourseList = res.Data;
+          var obj = {
+            CourseName: "请选择",
+            CourseId: 0
+          };
+          this.CourseList.unshift(obj);
+          this.AllCourseList = res.Data;
+        }
+      });
+    },
+    //筛选课程
+    filterCourse(val, update) {
+      update(() => {
+        if (val === "") {
+          this.CourseList = JSON.parse(JSON.stringify(this.AllCourseList));
+        } else {
+          const needle = val.toLowerCase();
+          this.CourseList = this.AllCourseList.filter(
+            v => v.CourseName.toLowerCase().indexOf(needle) > -1
+          );
+        }
+      });
+    },
+
+    //获取老师的空闲上课时段
+    getCanTeacherClassTimeList() {
+      this.teaClassMsg.Date=this.dateObj.date
+      GetCanTeacherClassTimeList(this.teaClassMsg).then(res=>{
+        console.log(187,res)
+      });
+    }
+  },
+  watch: {}
+};
+</script>
+<style>
+.q-calendar-daily__day-interval:hover {
+  background: rgba(0, 0, 255, 0.1);
+}
+
+.q-calendar-weekly__workweek:hover {
+  background: rgba(0, 0, 255, 0.1);
+}
+
+.q-calendar-weekly__day:hover {
+  background: rgba(0, 0, 255, 0.1);
+}
+
+.q-calendar-weekly__head-weekday:hover {
+  background: rgba(0, 0, 255, 0.1);
+}
+
+.q-calendar-scheduler__day:hover {
+  background: rgba(0, 0, 255, 0.1);
+}
+
+.q-calendar-resource__resource-interval:hover {
+  background: rgba(0, 0, 255, 0.1);
+}
+
+.q-calendar-daily__day:hover {
+  background: rgba(0, 0, 255, 0.1);
+}
+</style>
+<style>
+.upload-assiatant-box .q-uploader__list {
+  display: none;
+}
+
+.upload-assiatant-box .q-uploader {
+  width: auto;
+}
+</style>