二期：预约列表开发

electron.vite.config.mjs

@@ -24,8 +24,8 @@ export default defineConfig({
     server: {
       proxy: {
         '/dev-api': {
-          target: 'http://27.128.240.72:7865',
+          // target: 'http://27.128.240.72:7865',
-          // target: 'http://192.168.2.52:7863',
+          target: 'http://192.168.2.52:7863',
           changeOrigin: true,
           rewrite: (p) => p.replace(/^\/dev-api/, '')
         }

src/renderer/src/api/classManage/index.js

@@ -130,3 +130,19 @@ export function addStudentmainByNameArray(data) {
     data: data
   })
 }
+//新增课程预约
+export function addSmartClassReserv(data) {
+  return request({
+    url: '/smarttalk/classReserv/addSmartClassReserv',
+    method: 'post',
+    data: data
+  })
+}
+//查询课程预约
+export function getSelfReserv() {
+  return request({
+    url: '/smarttalk/classReserv/getSelfReserv',
+    method: 'get'
+  })
+}
+

src/renderer/src/layout/components/Header.vue

@@ -35,6 +35,7 @@
             <template #dropdown>
               <el-dropdown-menu>
                 <el-dropdown-item @click="changePage('/profile')">个人中心</el-dropdown-item>
+                <el-dropdown-item @click="changePage('/classReserv')">课程预约</el-dropdown-item>
                 <el-dropdown-item @click="changePage('/class')">班级中心</el-dropdown-item>
                 <el-dropdown-item divided command="logout">
                   <span>退出登录</span>

src/renderer/src/router/index.js

@@ -45,6 +45,12 @@ export const constantRoutes = [
         name: 'profile',
         meta: {title: '个人中心'}
       },
+      {
+        path: '/classReserv',
+        component: () => import('@/views/classManage/classReserv.vue'),
+        name: 'classReserv',
+        meta: {title: '课程预约'}
+      },
       {
         path: '/class',
         component: () => import('@/views/classManage/index.vue'),

src/renderer/src/views/classManage/classReserv.vue

@@ -0,0 +1,56 @@
+<template>
+  <el-container class="class-reserv-wrap">
+    <div class="class-reserv-tabs">
+      <el-segmented block v-model="tabActive" :options="tabOptions" size="large" />
+    </div>
+    <div class="class-reserv-body">
+      <reserv-item v-for="(item, index) in activeDataList" :key="index" :item="item" v-show="tabActive === '进行中'"></reserv-item>
+      <reserv-item v-for="(item, index) in doneDataList" :key="index" :item="item" v-show="tabActive === '已结束'"></reserv-item>
+    </div>
+  </el-container>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from 'vue'
+import { getSelfReserv } from '@/api/classManage'
+import ReservItem from '@/views/classManage/reserv-item.vue'
+
+const tabOptions = ref(['进行中','已结束'])
+const tabActive = ref('进行中')
+const dataList = ref([])
+
+const activeDataList = computed(() => {
+  return dataList.value.filter(item => {
+    return item.status !== "已结束"
+  })
+})
+const doneDataList = computed(() => {
+  return dataList.value.filter(item => {
+    return item.status === "已结束"
+  })
+})
+onMounted(() => {
+  getSelfReserv().then(res => {
+    dataList.value = res.data
+  })
+})
+</script>
+
+<style scoped lang="scss">
+.class-reserv-wrap{
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 15px 30px;
+  .class-reserv-tabs{
+    width: 30%;
+    text-align: left;
+  }
+  .class-reserv-body{
+    height: 100%;
+    flex: 1;
+    overflow: auto;
+    padding: 10px 0;
+  }
+}
+</style>

src/renderer/src/views/classManage/reserv-item.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="class-reserv-item">
+    <div class="class-reserv-item-img">
+      <img :src="basePath + item.bookImg" alt="封面"/>
+    </div>
+    <div class="class-reserv-item-body">
+      <div class="class-reserv-item-title1">
+        <label>{{item.className}}</label>
+        <el-tag style="margin-left: 5px;" type="primary"> {{ item.classType }}</el-tag>
+        <el-tag style="margin-left: 5px;" type="primary"> {{ item.classSubject }}</el-tag>
+      </div>
+      <div class="class-reserv-item-title2">
+        {{item.classDay}}&nbsp;{{item.startTime}} ~ {{item.classDay}}&nbsp;{{item.endTime}} {{item.createUserName}}老师
+      </div>
+      <div class="class-reserv-item-title3">
+        <span style="margin-left: 5px;" v-for="(tag, index) in item.classItemList" :key="index"> {{ index===0? tag.name:'、'+tag.name }}</span>
+      </div>
+    </div>
+    <div class="class-reserv-item-tool">
+      <el-button type="primary">上课</el-button>
+      <el-button>编辑</el-button>
+      <el-button type="info">下课</el-button>
+      <el-button type="danger">删除</el-button>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref } from 'vue'
+const props = defineProps({
+  item: {
+    type: Object,
+    default: () => {}
+  }
+})
+const basePath = import.meta.env.VITE_APP_BUILD_BASE_PATH
+</script>
+<style scoped lang="scss">
+.class-reserv-item{
+  display: flex;
+  background-color: white;
+  border-radius: 10px;
+  padding: 5px;
+  margin-bottom: 10px;
+  .class-reserv-item-img{
+    width: 80px;
+    padding-left: 20px;
+    img{
+      width: 100%;
+    }
+  }
+  .class-reserv-item-body{
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+    padding-left: 30px;
+    font-size: 14px;
+    .class-reserv-item-title1{
+      flex: 1;
+      label{
+        font-size: 20px;
+        font-weight: bold;
+      }
+    }
+  }
+  .class-reserv-item-tool{
+    margin-left: 15px;
+    display: flex;
+    align-items: center;
+  }
+}
+</style>

src/renderer/src/views/prepare/container/reserv.vue

@@ -78,8 +78,19 @@
 </template>
 <script setup>
 import { ref, defineExpose, onMounted, reactive, computed } from 'vue'
-import { listClassmain } from '@/api/classManage'
+import { addSmartClassReserv, listClassmain } from '@/api/classManage'
 import useUserStore from '@/store/modules/user'
+import { ElMessage } from 'element-plus'
+const props = defineProps({
+  subject: {
+    type: String,
+    default: ''
+  },
+  bookId: {
+    type: Number,
+    default: ''
+  }
+})
 const ruleFormDialog = ref(null)
 const userStore = useUserStore().user
 const centerDialogVisible = ref(false)
@@ -87,7 +98,7 @@ const form = reactive({
   name: '',
   type: '常规课',
   day: '',
-  time: '',
+  time: [],
   resource: [],
   classRoom: ''
 })
@@ -141,10 +152,39 @@ const submitForm = async () => {
   if (!formEl) return
   await formEl.validate((valid) => {
     if (valid) {
+      addClassReserv(form)
       centerDialogVisible.value = false
     }
   })
 }
+const addClassReserv = (formData) => {
+  let ids = formData.resource.join(",")
+  let param = {
+    className: formData.name,
+    classType: formData.type,
+    classDay: formData.day,
+    startTime: formData.time[0],
+    endTime: formData.time[1],
+    classList: ids,
+    classRoom: formData.classRoom,
+    classSubject: props.subject,
+    ex1: props.bookId
+   }
+  addSmartClassReserv(param).then((res) => {
+    if (res.data === true) {
+      closeDialog();
+      ElMessage({
+        type: 'success',
+        message: '预约成功！'
+      })
+    } else {
+      ElMessage({
+        type: 'error',
+        message: res.message
+      })
+    }
+  })
+}
 defineExpose({
   openDialog,
   closeDialog

src/renderer/src/views/prepare/index.vue

@@ -102,7 +102,7 @@
       @on-close="closeHomework"
     />
   </div>
-  <reserv ref="reservDialog"></reserv>
+  <reserv :subject="currentNode.edusubject" :book-id="uploadData.textbookId" ref="reservDialog"></reserv>
 </template>
 <script setup>
 import { Check } from '@element-plus/icons-vue'