dlsx
/
Teaching_integration_platform_admin_template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

页面布局随比例变化，

Browse Source
develoop
Alan 6 months ago
parent f7614c883d
commit 5085e5a38a
8 changed files with 3648 additions and 2976 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      .env.development
  2. 5972
      pnpm-lock.yaml
  3. 10
      src/api/user/crouse.js
  4. 3
      src/layout/index.vue
  5. 110
      src/permission.ts
  6. 4
      src/router/index.ts
  7. 263
      src/views/course/basicCourseInformation.vue
  8. 12
      src/views/course/components/courseEdit.vue

2
.env.development
Unescape View File

@ -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'

5972
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

10
src/api/user/crouse.js
Unescape View File

@ -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)
}

3
src/layout/index.vue
Unescape View File

@ -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'

110
src/permission.ts
Unescape View File

@ -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) {
// 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()
} 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.afterEach((to, form, next) => {
nprogress.done()
})

4
src/router/index.ts
Unescape View File

@ -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,

263
src/views/course/basicCourseInformation.vue
Unescape View File

@ -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;

12
src/views/course/components/courseEdit.vue
Unescape View File

@ -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>

Write Preview
Loading…
Cancel
Save