页面布局随比例变化，

6 months ago · 5085e5a38a
parent f7614c883d
commit 5085e5a38a
8 changed files with 3648 additions and 2976 deletions
--- a/.env.development
+++ b/.env.development
@ -1,4 +1,4 @@
 # 变量必须以 VITE_ 为前缀才能暴露给外部读取
 NODE_ENV = 'development'
 VITE_APP_TITLE = '无糖运营平台'
-VITE_APP_BASE_API = '/api'
+VITE_APP_BASE_API = 'http://127.0.0.1:8080'
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/api/user/crouse.js
+++ b/src/api/user/crouse.js
@ -1,10 +1,10 @@
 import request from '@/utils/request'
 export const getCourseListApi = () => {
-  request.get('/coursesTeacher/page')
+ return request.get('/coursesteacher/page?teacherId=2140110334')
 }
-export const editCourse = () => {
-  request.put('/coursesTeacher')
+export const editCourseApi = () => {
+return  request.put('/coursesTeacher')
 }
-export const addCourse = (data) => {
-  request.post('/courseTeacher/addCourse', data)
+export const addCourseApi = (data) => {
+ return request.post('/courseTeacher/addCourse', data)
 }
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@ -17,7 +17,7 @@
          text-color="#fff"
          :collapse="LayoutSettingStoe.fold"
        >
-          <Menu :menuList="usePermissionStore.asyncRouter" />
+          <Menu :menuList="constantRoute" />
        </el-menu>
      </el-scrollbar>
    </div>
@ -49,6 +49,7 @@ import { useRoute } from 'vue-router'
 import Tabbar from './tabbar/index.vue'
 import LoGo from './logo/index.vue'
 import Menu from './menu/index.vue'
+import {constantRoute} from '@/router/routers'
 // 获取路由数据
 // import userUserStore from '@/store/modules/user'
 // import { onMounted, reactive, ref, toRefs, watch } from 'vue'
--- a/src/permission.ts
+++ b/src/permission.ts
@ -9,62 +9,64 @@ import 'nprogress/nprogress.css'
 const userStore = useUserStore(pinia)
 const usePermissionStore = permissionStore(pinia)
 // const whitelist = ['/login', '/404']
-router.beforeEach(async (to, form, next) => {
-  // 进度条开始\
-  nprogress.configure({ showSpinner: false })
-  nprogress.start()
-  //   判断是否登录
-  if (userStore.token) {
-    // 登录成功访问登录页则跳转到首页
-    if (to.path == '/login') {
-      next({ path: '/' })
-    } else {
-      // 登录成功判断是否获取到了用户信息
-      if (userStore.userName) {
-        next()
-      } else {
-        try {
-          // 没有获取到用户信息 就获取用户信息 然后放行
-          await userStore.getUserInfo()
-          // 获取筛选到的路由
-          const asyncRouter = await usePermissionStore.getAsyncRoutes(
-            userStore.routes,
-          )
-          // 遍历筛选出来的路由通过addRoute添加到路由表
-          asyncRouter.forEach((item: any) => {
-            router.addRoute(item)
-          })
-          // 在最后向路由表添加一个404规则
-          // 切记不要写到路由表内 否者刷新页面会跳转到404页面
-          router.addRoute({
-            path: '/:pathMatch(.*)*',
-            component: () => import('@/views/404/index.vue'),
-            name: 'Any',
-            meta: {
-              title: '任意',
-              hidden: true,
-            },
-          })
-          next({ ...to, replace: true }) // 这里相当于push到一个页面 不在进入路由拦截
-        } catch (error) {
-          // 如果获取用户信息失败了则执行登出操作让重新登录
-          console.log(error)
-          userStore.logout()
-          next({ path: '/login' })
-        }
-      }
-    }
-  } else {
-    // 没有token访问登录页放行
-    if (to.path == '/login') {
-      next()
-    } else {
-      // 访问其他页面则阻止
-      next({ path: '/login', query: { redirect: to.path } })
-    }
-  }
+// router.beforeEach(async (to, form, next) => {
+//   // 进度条开始\
+//   nprogress.configure({ showSpinner: false })
+//   nprogress.start()
+//   //   判断是否登录
+//   if (userStore.token) {
+//     // 登录成功访问登录页则跳转到首页
+//     if (to.path == '/login') {
+//       next({ path: '/' })
+//     } else {
+//       // 登录成功判断是否获取到了用户信息
+//       if (userStore.userName) {
+//         next()
+//       } else {
+//         try {
+//           // 没有获取到用户信息 就获取用户信息 然后放行
+//           await userStore.getUserInfo()
+//           // 获取筛选到的路由
+//           const asyncRouter = await usePermissionStore.getAsyncRoutes(
+//             userStore.routes,
+//           )
+//           // 遍历筛选出来的路由通过addRoute添加到路由表
+//           asyncRouter.forEach((item: any) => {
+//             router.addRoute(item)
+//           })
+//           // 在最后向路由表添加一个404规则
+//           // 切记不要写到路由表内 否者刷新页面会跳转到404页面
+//           router.addRoute({
+//             path: '/:pathMatch(.*)*',
+//             component: () => import('@/views/404/index.vue'),
+//             name: 'Any',
+//             meta: {
+//               title: '任意',
+//               hidden: true,
+//             },
+//           })
+//           next({ ...to, replace: true }) // 这里相当于push到一个页面 不在进入路由拦截
+//         } catch (error) {
+//           // 如果获取用户信息失败了则执行登出操作让重新登录
+//           console.log(error)
+//           userStore.logout()
+//           next({ path: '/login' })
+//         }
+//       }
+//     }
+//   } else {
+//     // 没有token访问登录页放行
+//     if (to.path == '/login') {
+//       next()
+//     } else {
+//       // 访问其他页面则阻止
+//       next({ path: '/login', query: { redirect: to.path } })
+//     }
+//   }
+// })
+router.beforeEach((to,form,next) => {
+  next()
 })
-
 router.afterEach((to, form, next) => {
  nprogress.done()
 })
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -1,6 +1,6 @@
 // 导入路由插件
 import { createRouter, createWebHashHistory } from 'vue-router'
-
+import {constantRoute} from './routers.ts'
 const routerList = [
  {
    path: '/login',
@ -14,7 +14,7 @@ const routerList = [
 ]
 const router = createRouter({
  history: createWebHashHistory(),
-  routes: routerList,
+  routes: [...routerList,...constantRoute],
  scrollBehavior() {
    return {
      left: 0,
--- a/src/views/course/basicCourseInformation.vue
+++ b/src/views/course/basicCourseInformation.vue
@ -1,117 +1,131 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
-// import axios from 'axios'
+import { ref, onMounted } from 'vue'
+import axios from 'axios'
 import courseEdit from './components/courseEdit.vue'
-// import { addCourseApi } from '@/api/course'
-// const courseList = ref([])
-// const getCourseList = async () => {
-//   const res = await addCourseApi()
-//   courseList.value = res.data
-// }
-// onMounted(() => {
-//   getCourseList()
-// })
-
+import { getCourseListApi } from '../../api/user/crouse.js'
 const courseList = ref([
-  {
-    id: 1,
-    category: '1',
-    nature: '1',
-    code: '1',
-    assessmenttype: '1',
-    assessmentway: '1',
-    teachermethod: '',
-    teacherway: '',
-    description: '',
-    name: '课程名称',
-    credit: '课程学分',
-    classhours: '课程学时',
-  },
-  {
-    id: 2,
-    category: '1',
-    nature: '1',
-    code: '1',
-    assessmenttype: '1',
-    assessmentway: '1',
-    teachermethod: '',
-    teacherway: '',
-    description: '',
-    name: '课程名称',
-    credit: '课程学分',
-    classhours: '课程学时',
-  },
-  {
-    id: 3,
-    category: '1',
-    nature: '1',
-    code: '1',
-    assessmenttype: '1',
-    assessmentway: '1',
-    teachermethod: '',
-    teacherway: '',
-    description: '',
-    name: '课程名称',
-    credit: '课程学分',
-    classhours: '课程学时',
-  },
-  {
-    id: 4,
-    category: '1',
-    nature: '1',
-    code: '1',
-    assessmenttype: '1',
-    assessmentway: '1',
-    teachermethod: '',
-    teacherway: '',
-    description: '',
-    name: '课程名称',
-    credit: '课程学分',
-    classhours: '课程学时',
-  },
-  {
-    id: 5,
-    category: '1',
-    nature: '1',
-    code: '1',
-    assessmenttype: '1',
-    assessmentway: '1',
-    teachermethod: '',
-    teacherway: '',
-    description: '',
-    name: '课程名称',
-    credit: '课程学分',
-    classhours: '课程学时',
-  },
-  {
-    id: 6,
-    category: '1',
-    nature: '1',
-    code: '1',
-    assessmenttype: '1',
-    assessmentway: '1',
-    teachermethod: '',
-    teacherway: '',
-    description: '',
-    name: '课程名称',
-    credit: '课程学分',
-    classhours: '课程学时',
-  },
-  {
-    id: 7,
-    category: '1',
-    nature: '1',
-    code: '1',
-    assessmenttype: '1',
-    assessmentway: '1',
-    teachermethod: '',
-    teacherway: '',
-    description: '',
-    name: '课程名称',
-    credit: '课程学分',
-    classhours: '课程学时',
-  },
+  // id: 1,
+  //     category: '',
+  //     nature: '',
+  //     code: '',
+  //     assessmenttype: '',
+  //     assessmentway: '',
+  //     teachermethod: '',
+  //     teacherway: '',
+  //     description: '',
+  //     name: '',
+  //     credit: '',
+  //     classhours: '',
 ])
+const getCourseList = async () => {
+  const res = await getCourseListApi()
+  courseList.value = res.result.list
+}
+
+onMounted(() => {
+  getCourseList()
+})
+
+// const courseList = ref([
+//   {
+//     id: 1,
+//     category: '1',
+//     nature: '1',
+//     code: '1',
+//     assessmenttype: '1',
+//     assessmentway: '1',
+//     teachermethod: '',
+//     teacherway: '',
+//     description: '',
+//     name: '课程名称',
+//     credit: '课程学分',
+//     classhours: '课程学时',
+//   },
+//   {
+//     id: 2,
+//     category: '1',
+//     nature: '1',
+//     code: '1',
+//     assessmenttype: '1',
+//     assessmentway: '1',
+//     teachermethod: '',
+//     teacherway: '',
+//     description: '',
+//     name: '课程名称',
+//     credit: '课程学分',
+//     classhours: '课程学时',
+//   },
+//   {
+//     id: 3,
+//     category: '1',
+//     nature: '1',
+//     code: '1',
+//     assessmenttype: '1',
+//     assessmentway: '1',
+//     teachermethod: '',
+//     teacherway: '',
+//     description: '',
+//     name: '课程名称',
+//     credit: '课程学分',
+//     classhours: '课程学时',
+//   },
+//   {
+//     id: 4,
+//     category: '1',
+//     nature: '1',
+//     code: '1',
+//     assessmenttype: '1',
+//     assessmentway: '1',
+//     teachermethod: '',
+//     teacherway: '',
+//     description: '',
+//     name: '课程名称',
+//     credit: '课程学分',
+//     classhours: '课程学时',
+//   },
+//   {
+//     id: 5,
+//     category: '1',
+//     nature: '1',
+//     code: '1',
+//     assessmenttype: '1',
+//     assessmentway: '1',
+//     teachermethod: '',
+//     teacherway: '',
+//     description: '',
+//     name: '课程名称',
+//     credit: '课程学分',
+//     classhours: '课程学时',
+//   },
+//   {
+//     id: 6,
+//     category: '1',
+//     nature: '1',
+//     code: '1',
+//     assessmenttype: '1',
+//     assessmentway: '1',
+//     teachermethod: '',
+//     teacherway: '',
+//     description: '',
+//     name: '课程名称',
+//     credit: '课程学分',
+//     classhours: '课程学时',
+//   },
+//   {
+//     id: 7,
+//     category: '1',
+//     nature: '1',
+//     code: '1',
+//     assessmenttype: '1',
+//     assessmentway: '1',
+//     teachermethod: '',
+//     teacherway: '',
+//     description: '',
+//     name: '课程名称',
+//     credit: '课程学分',
+//     classhours: '课程学时',
+//   },
+// ])

 const drawer = ref()
 const onAddCourse = () => {
@ -120,9 +134,9 @@ const onAddCourse = () => {
 const onEditCourse = (item) => {
  drawer.value.open(item)
 }
-// const onSuccess = () => {
-//   getCourseList()
-// }
+const onSuccess = () => {
+  getCourseList()
+}
 </script>
 <template>
  <div class="header">
@ -171,6 +185,7 @@ const onEditCourse = (item) => {
  display: flex;
  flex-direction: row;
 }
+
 .btn {
  // display: flex;
  width: 50%;
@ -181,11 +196,13 @@ const onEditCourse = (item) => {
  // margin: 20px;
  // padding-left: 50px;
 }
+
 .search {
  width: 50%;
-  // display: flex;
+  display: flex;
  height: 100%;
  padding: 10px 0 0 630px;
+
  // flex-direction: row-reverse;
  // padding: 0 40px 0;
  input {
@ -196,7 +213,9 @@ const onEditCourse = (item) => {
    font-size: 14px;
  }
 }
+
 .course {
+
  // display: flex;
  // flex: 0 0 25%;
  // justify-content: space-between;
@ -204,23 +223,29 @@ const onEditCourse = (item) => {
  .course_list {
    display: flex;
    // flex: 0 0 25%;
-    justify-content: space-between;
+    // justify-content: space-between;
    flex-wrap: wrap;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    column-gap: 50px;
  }

  li {
-    margin: 40px;
+    margin: 40px 0;
    width: 349px;
+    width: 100%;
    height: 297px;
    background: white;
    transition: all 0.5s;
    border-radius: 6px;
+
    // flex: 1; /* 子元素按比例伸缩 */
    &:hover {
      transform: translate3d(0, -3px, 0);
      box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
      cursor: pointer;
    }
+
    .course_name {
      font-family: Inter-Bold;
      color: #333;
@ -229,11 +254,13 @@ const onEditCourse = (item) => {
      margin-top: 10px;
      font-weight: bold;
    }
+
    img {
      background-color: #cccccc;
-      width: 349px;
+      width: 100%;
      height: 178px;
    }
+
    p {
      margin-left: 30px;
      margin-top: 10px;
@ -243,10 +270,12 @@ const onEditCourse = (item) => {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
+
      span {
        color: #0052ff;
      }
    }
+
    h2 {
      font-family: Inter-Bold;
      color: #333;
--- a/src/views/course/components/courseEdit.vue
+++ b/src/views/course/components/courseEdit.vue
@ -2,8 +2,8 @@
 import { ElMessage } from 'element-plus'
 import { requiredNumber } from 'element-plus/es/components/table-v2/src/common.mjs'
 import { ref } from 'vue'
-// import { addCourseApi } from '@/api/course'
-// import { editCourseApi } from '@/api/course'
+import { editCourseApi } from '../../../api/user/crouse'
+import { addCourseApi } from '../../../api/user/crouse'
 const formModel = ref({
  id: '',
  name: '',
@ -96,19 +96,19 @@ const open = async (item) => {
 // 组件对外暴露一个open,基于open传过来的参数判断是添加还是编辑
 defineExpose({ open })
 // 新增数据子传父
-// const emit = defineEmits(['success'])
+const emit = defineEmits(['success'])
 const onSubmit = async () => {
  await formRef.value.validate()
  const isEdit = formModel.value.id
  if (isEdit) {
-    // await editCourseApi(formModel.value)
+    await editCourseApi(formModel.value)
    ElMessage.success('编辑成功')
  } else {
-    // await addCourseApi(formModel.value)
+    await addCourseApi(formModel.value)
    ElMessage.success('添加成功')
  }
  visibleDrawer.value = false
-  // emit('success')
+  emit('success')
 }
 </script>