Skip to content

C
center-resource
提交 b532f1cf authored 作者: matian's avatar matian
浏览文件
操作

updates:一期二期部分页面优化

上级 5ff09657
隐藏空白字符变更
内嵌 并排
正在显示 包含 459 行增加 和 266 行删除
src/components/base/CardListItem.vue
浏览文件 @ b532f1cf
......@@ -39,16 +39,21 @@ const bytesToSize = (bytes: number) => {
</el-icon>
<div class="tool-pop-btn">
<router-link v-if="props.data.auth_edit" :to="`${props.path}/update?id=${props.data.id}`">
<div class="edit-btn">编辑</div>
<div class="edit-btn btn">编辑</div>
</router-link>
<router-link v-permission="props.permission.view" :to="`${props.path}/view?id=${props.data.id}`">
<div class="view-btn">查看</div>
<div class="view-btn btn">查看</div>
</router-link>
</div>
</div>
<div class="card-item-bottom">
<div class="item-t">
<div class="text">{{ props.data.created_operator_name }}/{{ props.data.organ_id_name }}</div>
<el-popover trigger="hover" placement="right">
<div v-html="props.data.created_operator_name + '/' + props.data.organ_id_name"></div>
<template #reference>
<div class="text">{{ props.data.created_operator_name }}/{{ props.data.organ_id_name }}</div>
</template>
</el-popover>
<div :class="props.data.status == 1 ? 'tag green' : 'tag'">{{ props.data.status_name }}</div>
</div>
<div class="item-b">
......@@ -126,14 +131,15 @@ const bytesToSize = (bytes: number) => {
.edit-btn {
width: 113px;
line-height: 32px;
border: 1px solid #d3d3d3;
border-radius: 18px;
text-align: center;
font-size: 14px;
color: #ffffff;
margin: 0 auto 12px;
cursor: pointer;
background: #aa1941;
}
.view-btn {
width: 113px;
line-height: 32px;
......@@ -145,6 +151,10 @@ const bytesToSize = (bytes: number) => {
margin: 0 auto;
cursor: pointer;
}
.btn:hover {
background: none;
border: 1px solid #d3d3d3;
}
}
}
}
......
src/modules/course/create/components/stepTwoComponents/AddExamDialog.vue
浏览文件 @ b532f1cf
......@@ -144,12 +144,16 @@ const typeFilter = () => {
size="70%"
:title="`添加${props.btnInfo.btn_name}`"
>
<div class="btn-box">
<el-button type="primary" @click="handleSave">保存</el-button>
</div>
<div class="video-head">
<el-tabs @tab-change="tabChange" v-model="tabValue">
<el-tab-pane label="我的资源" name="1"></el-tab-pane>
<el-tab-pane label="公开资源" name="2"></el-tab-pane>
</el-tabs>
</div>
<AppList v-bind="listOptions" ref="appList" @select="handleSelection">
<template #filter-type="{ params }">
<el-tree-select
......@@ -164,13 +168,15 @@ const typeFilter = () => {
/>
</template>
</AppList>
<div class="btn-box" style="display: flex; justify-content: center">
<el-button type="primary" @click="handleSave">保存</el-button>
</div>
</el-drawer>
</template>
<style lang="scss" scoped>
:deep(.el-table__header-wrapper .el-checkbox) {
display: none;
}
.btn-box {
display: flex;
justify-content: flex-end;
margin-bottom: -20px;
}
</style>
src/modules/course/create/components/stepTwoComponents/AddVideoDialog.vue
浏览文件 @ b532f1cf
......@@ -3,7 +3,6 @@ import { getVideoList, createCharacter, getCourseListSearch, getLessonList, getO
import CardListItem from './CardListItem.vue'
import { useGetCategoryList } from '@/composables/useGetCategoryList'
const appList = ref()
const currentResource: any = $ref('')
// 资源出处 tab触发
const tabValue = ref('1')
const path = ref('')
......@@ -90,13 +89,13 @@ const handleCancel = () => {
emit('update:isShowAddDialog', false)
}
// 保存 添加
const handleSave = () => {
const handleAdd = (val: any) => {
const params: any = {
name: tableData.list.filter((item: any) => item.id === currentResource)[0]?.name,
name: val.name,
course_id: props.course_id,
resource_type: props.btnInfo.resource_type,
parent_id: props.chapterID,
resource_id: currentResource
resource_id: val.id
}
createCharacter(params).then(() => {
emit('update:isShowAddDialog', false)
......@@ -142,26 +141,20 @@ if (props.btnInfo.resource_type === '2') {
<template #body="{ data }">
<div class="card-list" v-if="data.length">
<div class="card-list-con">
<el-radio-group v-model="currentResource">
<div style="position: relative" v-for="(item, index) in data" :key="index">
<el-radio
v-model="item.check_status"
:label="item.id"
style="position: absolute; right: 15px; bottom: 22px"
>
{{ '' }}</el-radio
>
<CardListItem :tabIndex="tabValue" :data="item" :path="path"> </CardListItem>
</div>
</el-radio-group>
<CardListItem
v-for="(item, index) in data"
:key="index"
:tabIndex="tabValue"
:data="item"
:path="path"
@add="handleAdd"
>
</CardListItem>
</div>
</div>
<el-empty v-else description="暂无数据" />
</template>
</AppList>
<div class="btn-box" style="display: flex; justify-content: center">
<el-button type="primary" @click="handleSave">保存</el-button>
</div>
</el-drawer>
</template>
<style lang="scss" scoped>
......
src/modules/course/create/components/stepTwoComponents/CardListItem.vue
浏览文件 @ b532f1cf
<script setup lang="ts">
const props: any = defineProps<{ data: object; tabIndex: string; path: string }>()
const emit = defineEmits<Emits>()
interface Emits {
(e: 'add', id: object): void
}
const handleAdd = () => {
emit('add', props.data)
}
</script>
<template>
<!-- <div>{{ props.data }}</div> -->
<div class="card-item">
<div class="card-item-top">
<div class="title">{{ props.data.name }}</div>
<!-- <img :src="props.data.cover" /> -->
<div class="cover-img" :style="`background-image:url(${props.data.cover})`"></div>
<div class="tool-pop-btn">
<div style="min-width: 100%">
<!-- <router-link v-if="props.data.auth_edit" :to="`/resource/video/update?id=${props.data.id}`">
<div class="edit-btn">编辑</div>
</router-link> -->
<div class="edit-btn btn" @click="handleAdd">添加</div>
</div>
<div style="min-width: 100%">
<router-link v-if="props.data.auth_view" :to="`${props.path}?id=${props.data.id}`">
<div class="view-btn">查看</div>
<div class="view-btn btn">查看</div>
</router-link>
</div>
</div>
......@@ -85,13 +87,13 @@ const props: any = defineProps<{ data: object; tabIndex: string; path: string }>
.edit-btn {
width: 113px;
line-height: 32px;
border: 1px solid #d3d3d3;
border-radius: 18px;
text-align: center;
font-size: 14px;
color: #ffffff;
margin: 0 auto 12px;
cursor: pointer;
background: #aa1941;
}
.view-btn {
width: 113px;
......@@ -104,6 +106,10 @@ const props: any = defineProps<{ data: object; tabIndex: string; path: string }>
margin: 0 auto;
cursor: pointer;
}
.btn:hover {
background: none;
border: 1px solid #d3d3d3;
}
}
}
}
......
src/modules/course/create/views/StepOne.vue
浏览文件 @ b532f1cf
<script setup lang="ts">
import { createCourse, getCourseDetails, updateCourse } from '../api'
// getMajorList
import { createCourse, getCourseDetails, updateCourse, getMajorList } from '../api'
//
// setStatus
import { useGetCategoryList } from '@/composables/useGetCategoryList'
import { useMapStore } from '@/stores/map'
......@@ -20,8 +20,8 @@ const route = useRoute()
const router = useRouter()
const id = route.query.id as string
// const majorList: any = ref([])
// const allMajorList: any = ref([])
const majorList: any = ref([])
const allMajorList: any = ref([])
// is 编辑 新建
const isUpdate = $computed(() => {
......@@ -47,7 +47,7 @@ const electiveType = computed<ICourseList[]>(() => {
})
// 下拉选择tree 视频分类
let { list: selectTree } = useGetCategoryList()
let { list: selectTree }: any = useGetCategoryList()
const defaultProps = { children: 'children', label: 'category_name', value: 'id' }
// form
......@@ -65,8 +65,8 @@ const form = reactive<Record<string, any>>({
previous_preparation: '',
target: '',
exam_id: '',
live_id: ''
// specialty_id: ''
live_id: '',
specialty_id: []
})
// 表单验证
......@@ -79,8 +79,8 @@ const rules = reactive<FormRules>({
{ required: true, message: '请输入学分' },
{ pattern: /\d/, message: '请输入数字' }
],
lecturer_id: [{ required: true, message: '请添加课程讲师' }]
// specialty_id: [{ required: true, message: '请选择适用专业' }]
lecturer_id: [{ required: true, message: '请添加课程讲师' }],
specialty_id: [{ required: true, message: '请选择适用专业' }]
})
// 课程封面dialog
......@@ -107,9 +107,12 @@ let loading = $ref<boolean>(false)
function fetchDetail() {
loading = true
getCourseDetails({ id }).then((res: any) => {
console.log(res.data)
Object.assign(form, res.data)
examList.value = res.data.examinations
form.exam_id = res.data.examinations.map((item: any) => item.id).toString()
form.specialty_id = res.data.specialty.map((item: any) => item.id)
console.log(form.specialty_id, 'form.specialty_id')
loading = false
})
}
......@@ -119,7 +122,6 @@ onMounted(() => {
watchEffect(() => {
form.lecturer_id = setDefaultData(form.lecturers)
// form.exam_id = setDefaultData(examList.value)
form.live_id = setDefaultData(form.meetings)
})
......@@ -129,6 +131,7 @@ watch(
ruleFormRef?.validateField('lecturer_id')
}
)
function setDefaultData(data: any[] = []) {
return data.map((item: any) => item.id).join()
}
......@@ -145,6 +148,8 @@ function handleSubmit() {
}
// 创建课程
function handleCreate() {
form.specialty_id = form.specialty_id.toString()
createCourse(form).then((res: any) => {
if (res.code === 0) {
// 操作第二部
......@@ -157,6 +162,8 @@ function handleCreate() {
}
// 修改课程
function handleUpdate() {
console.log(form, '0000')
form.specialty_id = form.specialty_id.toString()
updateCourse(form).then((res: any) => {
if (res.code === 0) {
// 操作第二部
......@@ -170,18 +177,19 @@ function handleUpdate() {
// const handleMajorList = (query: string) => {
// if (query) {
// getMajorList({ name: query, 'per-page': '100' }).then((res: any) => {
// majorList.value = res.data.list
// majorList.value.forEach((item: any) => {
// const findItem = allMajorList.value.find((cItem: any) => cItem.id === item.id)
// if (!findItem) {
// allMajorList.value.push(item)
// }
// })
// })
// } else {
// majorList.value = []
// }
getMajorList({ name: '', 'per-page': '100' }).then((res: any) => {
majorList.value = res.data.list
majorList.value.forEach((item: any) => {
console.log(item, 'ppp')
const findItem = allMajorList.value.find((cItem: any) => cItem.id === item.id)
if (!findItem) {
allMajorList.value.push(item)
}
})
})
// } else {
// majorList.value = []
// }
// }
</script>
......@@ -214,22 +222,18 @@ function handleUpdate() {
style="width: 100%"
v-model="form.classification"
:data="selectTree"
node-key="id"
:default-expanded-keys="selectTree.length ? [selectTree[0]?.id] : []"
placeholder="请选择课程分类"
/>
</el-form-item>
<el-form-item label="课程学分" prop="credit">
<el-input v-model="form.credit" maxlength="3" />
</el-form-item>
<!-- <el-form-item label="适用专业" prop="specialty_id">
<el-select
v-model="form.specialty_id"
placeholder="请选择适用专业"
style="width: 100%"
clearable
filterable
remote
:remote-method="handleMajorList"
:loading="loading"
>
<el-form-item label="适用专业" prop="specialty_id">
<el-select v-model="form.specialty_id" placeholder="请选择适用专业" style="width: 100%" clearable multiple>
<!-- :remote-method="handleMajorList" -->
<el-option
v-for="(item, index) in majorList"
:key="index"
......@@ -237,7 +241,7 @@ function handleUpdate() {
:value="item.id"
></el-option>
</el-select>
</el-form-item> -->
</el-form-item>
</el-form>
</div>
<el-form
......
src/modules/course/my/components/CardListItem.vue
浏览文件 @ b532f1cf
......@@ -17,24 +17,22 @@ const copyCourse = () => {
}
</script>
<template>
<!-- <div>{{ props.data }}</div> -->
<div class="card-item">
<div class="card-item-top">
<div class="title">{{ props.data.name }}</div>
<!-- <img :src="props.data.cover" /> -->
<div class="cover-img" :style="`background-image:url(${props.data.cover})`"></div>
<div class="tool-pop-btn">
<div style="min-width: 100%">
<router-link v-if="props.data.auth_edit" :to="`/course/update-course?id=${props.data.id}`">
<div class="edit-btn">编辑</div>
<div class="edit-btn btn">编辑</div>
</router-link>
</div>
<div style="min-width: 100%">
<router-link v-if="props.data.auth_view" :to="`/course/my/view?id=${props.data.id}`">
<div class="view-btn">查看</div>
<div class="view-btn btn">查看</div>
</router-link>
<div style="min-width: 100%" v-if="props.data.auth_copy">
<div class="copy-btn" plain @click="copyCourse">复制</div>
<div class="copy-btn btn" plain @click="copyCourse">复制</div>
</div>
</div>
</div>
......@@ -105,12 +103,12 @@ const copyCourse = () => {
.edit-btn {
width: 113px;
line-height: 32px;
border: 1px solid #d3d3d3;
border-radius: 18px;
text-align: center;
font-size: 14px;
color: #ffffff;
margin: 0 auto 5px;
background: #aa1941;
cursor: pointer;
}
.view-btn {
......@@ -132,7 +130,11 @@ const copyCourse = () => {
font-size: 14px;
color: #ffffff;
margin: 5px auto;
background: #aa1941;
cursor: pointer;
}
.btn:hover {
background: none;
border: 1px solid #d3d3d3;
}
}
......
src/modules/course/my/components/Statistics.vue
浏览文件 @ b532f1cf
......@@ -69,12 +69,12 @@ const bytesToSize = (bytes: number) => {
justify-content: space-around;
.item {
padding-top: 15px;
min-width: 110px;
min-width: 19%;
height: 140px;
border: 1px solid #e5e5e5;
border-radius: 6px;
box-sizing: border-box;
margin-right: 20px;
margin-right: 1%;
margin-top: 20px;
// &:nth-child(1) {
// .icon {
......
src/modules/course/my/components/ViewCourseChapter.vue
浏览文件 @ b532f1cf
......@@ -93,6 +93,7 @@ const id = route.query.id ? route.query.id : (route.params.courseId as string)
color: #ffffff;
margin-bottom: 20px;
cursor: pointer;
text-indent: 1em;
}
}
}
......
src/modules/course/my/components/ViewCourseInfo.vue
浏览文件 @ b532f1cf
......@@ -14,88 +14,6 @@ watch(
}
)
interface IBasicInfo {
icon: string
label: string
value: string
key: string
}
const basicInfo = computed((): IBasicInfo[] => {
const basicList = [
{
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon1.png',
label: '课程类型',
value: '',
key: 'online_type_name'
},
{
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon2.png',
label: '课程分类',
value: '',
key: 'classification_name'
},
{
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon3.png',
label: '课程学分',
value: '',
key: 'credit'
},
{
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon14.png',
label: '适用专业',
value: '',
key: 'specialty'
},
{
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon4.png',
label: '创建人',
value: '',
key: 'created_operator_name'
},
{
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon6.png',
label: '更新人',
value: '',
key: 'updated_operator_name'
},
{
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon13.png',
label: '负责人',
value: '',
key: 'belong_operator_name'
},
{
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon5.png',
label: '选课类型',
value: '',
key: 'elective_type_name'
},
{
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon7.png',
label: '是否有效',
value: '',
key: 'status_name'
},
{
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon8.png',
label: '创建时间',
value: '',
key: 'created_time'
},
{
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon9.png',
label: '更新时间',
value: '',
key: 'updated_time'
}
]
basicList.map((item: any) => {
item.value = props?.data[item.key] || '-'
return item
})
return basicList
})
const add0 = (m: number) => {
return m < 10 ? '0' + m : m
}
......@@ -178,50 +96,32 @@ const liveOptions = computed(() => {
</script>
<template>
<div class="info-box">
<div class="top-info">
<div class="cover"></div>
<div class="infos">
<div class="item" v-for="item in basicInfo" :key="item.key">
<img :src="item.icon" />
<div class="item-right">
<div class="label">{{ item.label }}</div>
<div class="value">{{ item.value.toString() || '-' }}</div>
</div>
</div>
</div>
</div>
<div class="info_title">课程授权信息</div>
<div class="bottom-info">
<div class="lecturer-list">
<div v-for="item in props.data.lecturers" :key="item.id">
<el-popover :title="item.name" trigger="hover" placement="right">
<div v-html="item.summarize"></div>
<template #reference>
<div class="item">
<div class="avatar" :style="`background-image:url(${item.avatar})`"></div>
<div class="name">{{ item.name }}</div>
</div>
</template>
</el-popover>
</div>
</div>
<div class="other-info">
<div class="item">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon11.png" />
<div class="label">课程所属部门</div>
<div class="value">{{ props.data.organ_id_name }}</div>
<div>
<div class="label">课程所属部门</div>
<div class="value">{{ props.data.organ_id_name }}</div>
</div>
</div>
<div class="item">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon12.png" />
<div class="label">课程公开信息</div>
<div class="value">{{ props.data.department_public_name }}</div>
<div class="value">{{ props.data.platform_public_name }}</div>
<div>
<div class="label">课程公开信息</div>
<div class="value">{{ props.data.department_public_name }}</div>
<div class="value">{{ props.data.platform_public_name }}</div>
</div>
</div>
<div class="item">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon15.png" />
<div class="label">课程授权信息</div>
<div class="value" v-for="(item, index) in props.data.auth_departments" :key="index">
{{ item.department_name }}
<div>
<div class="label">课程授权信息</div>
<div class="value" v-for="(item, index) in props.data.auth_departments" :key="index">
{{ item.department_name }}
</div>
</div>
</div>
</div>
......@@ -250,66 +150,43 @@ const liveOptions = computed(() => {
</template>
<style lang="scss" scoped>
.info-box {
background: #f7f7f7;
// background: #f7f7f7;
background: #fff;
border-radius: 10px;
padding: 25px 17px;
}
.top-info {
display: flex;
.cover {
min-width: 240px;
height: 180px;
background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course_default.png);
background-size: cover;
}
.infos {
padding-left: 20px;
display: flex;
flex-wrap: wrap;
.item {
width: 180px;
display: flex;
align-items: center;
height: fit-content;
margin: 10px 0 0;
.item-right {
margin-left: 15px;
.label {
font-size: 14px;
line-height: 100%;
color: #999999;
margin-bottom: 8px;
}
.value {
font-size: 16px;
font-weight: 500;
line-height: 100%;
color: #333333;
}
}
}
}
.info_title {
font-size: 18px;
font-weight: 500;
color: #333333;
opacity: 1;
}
.bottom-info {
display: flex;
padding-top: 20px;
.other-info {
width: 594px;
background: #ebe4d9;
width: 100%;
height: 140px;
background: rgba(244, 244, 244, 0.39);
border-radius: 6px;
display: flex;
padding: 64px 0 38px;
justify-content: space-around;
padding: 27px 55px 24px 32px;
box-sizing: border-box;
.item {
flex: 1;
&:nth-child(2) {
// height: 150px;
border-left: 1px solid #ddb67c;
border-right: 1px solid #ddb67c;
display: flex;
align-items: center;
justify-content: center;
border-right: 1px dashed #ddb67c;
width: 33%;
&:last-child {
border: none;
}
img {
width: 52px;
height: 52px;
display: block;
margin: 0 auto;
}
.label {
font-size: 14px;
......@@ -317,7 +194,8 @@ const liveOptions = computed(() => {
color: #666666;
padding-top: 10px;
padding-bottom: 13px;
text-align: center;
text-align: left;
margin-left: 15px;
}
.value {
font-size: 16px;
......@@ -325,7 +203,8 @@ const liveOptions = computed(() => {
line-height: 100%;
color: #333333;
margin-bottom: 10px;
text-align: center;
text-align: left;
margin-left: 15px;
}
}
}
......
src/modules/course/my/components/ViewCourseInfoTop.vue 0 → 100644
浏览文件 @ b532f1cf
<script setup lang="ts">
const props: any = defineProps({
data: {
type: Object
}
})
interface IBasicInfo {
icon: string
label: string
value: string
key: string
border: string
}
const basicInfo = computed((): IBasicInfo[] => {
const basicList = [
{
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon1.png',
label: '课程类型',
value: '',
key: 'online_type_name',
border: '1'
},
{
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon5.png',
label: '选课类型',
value: '',
key: 'elective_type_name',
border: '1'
},
{
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon3.png',
label: '课程学分',
value: '',
key: 'credit',
border: '1'
},
{
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon13.png',
label: '负责人',
value: '',
key: 'belong_operator_name',
border: '1'
},
{
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon8.png',
label: '创建时间',
value: '',
key: 'created_time',
border: '0'
},
{
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon2.png',
label: '课程分类',
value: '',
key: 'classification_name',
border: '1'
},
{
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon14.png',
label: '适用专业',
value: '',
key: 'specialty',
border: '1'
},
{
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon7.png',
label: '是否有效',
value: '',
key: 'status_name',
border: '1'
},
{
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon6.png',
label: '更新人',
value: '',
key: 'updated_operator_name',
border: '1'
},
{
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon9.png',
label: '更新时间',
value: '',
key: 'updated_time',
border: '0'
}
]
basicList.map((item: any) => {
item.value = props?.data[item.key] || '-'
return item
})
return basicList
})
</script>
<template>
<div class="top-info">
<div class="cover"></div>
<div class="info">
<div class="info-list">
<div
class="item"
v-for="item in basicInfo"
:key="item.key"
:style="item.border === '1' ? 'border-right:1px dashed #BFBFBF' : 'border-right:none'"
>
<img :src="item.icon" />
<div class="item-right">
<div class="label">{{ item.label }}</div>
<div class="value">{{ item.value.toString() || '-' }}</div>
</div>
</div>
</div>
<div class="lecturer-list">
<div class="list-name">讲师</div>
<div v-for="item in props.data.lecturers" :key="item.id">
<el-popover :title="item.name" trigger="hover" placement="right">
<div v-html="item.summarize"></div>
<template #reference>
<div class="item">
<div class="avatar" :style="`background-image:url(${item.avatar})`"></div>
<div class="name">{{ item.name }}</div>
</div>
</template>
</el-popover>
</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.top-info {
display: flex;
justify-content: center;
background: #fff;
border-radius: 10px;
padding: 25px 20px;
.cover {
min-width: 240px;
height: 180px;
background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course_default.png);
background-size: cover;
border-radius: 6px;
}
.info {
display: flex;
flex-direction: column;
align-items: flex-start;
box-sizing: border-box;
width: calc(100vw - 400px);
.info-list {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
.item {
width: 15%;
display: flex;
align-items: center;
height: fit-content;
margin-left: 2%;
margin-bottom: 21px;
.item-right {
margin-left: 15px;
.label {
font-size: 14px;
line-height: 100%;
color: #999999;
margin-bottom: 8px;
}
.value {
font-size: 16px;
font-weight: 500;
line-height: 100%;
color: #333333;
}
}
}
}
.lecturer-list {
width: 230px;
display: flex;
justify-content: center;
.list-name {
width: 18px;
height: 40px;
font-size: 18px;
font-weight: 500;
line-height: 26px;
color: #333333;
opacity: 1;
}
.item {
margin-left: 25px;
width: 115px;
display: flex;
justify-content: center;
align-items: center;
.avatar {
width: 40px;
height: 40px;
background-size: cover;
border-radius: 50%;
margin: 0 auto;
}
.name {
text-align: center;
font-size: 16px;
font-weight: 500;
line-height: 100%;
color: #333333;
margin-top: 10px;
}
}
}
}
}
</style>
src/modules/course/my/components/ViewDetailsVideo.vue
浏览文件 @ b532f1cf
......@@ -100,5 +100,6 @@ const changeVideo = (index: number) => {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #fff;
}
</style>
src/modules/course/my/views/List.vue
浏览文件 @ b532f1cf
<script setup lang="ts">
import { getCourseList } from '../api'
import CardListItem from '../components/CardListItem.vue'
import { Expand, PictureFilled } from '@element-plus/icons-vue'
import { PictureFilled } from '@element-plus/icons-vue'
import { useProjectList } from '@/composables/useGetProjectList'
import { useUserStore } from '@/stores/user'
......@@ -87,7 +87,14 @@ const changeCard = () => {
<el-tab-pane label="部门课程" name="2"></el-tab-pane>
<el-tab-pane label="公开课程" name="3"></el-tab-pane>
</el-tabs>
<el-icon class="video-head-icon" @click="changeCard"><Expand /></el-icon>
<div class="video-head-icon" @click="changeCard">
<img
v-if="!isCard"
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/change_card.png"
alt=""
/>
<img v-else src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/change_list.png" alt="" />
</div>
</div>
<div class="video-tool-btn">
<router-link v-if="tabValue === '1'" to="/course/update-course">
......
src/modules/course/my/views/View.vue
浏览文件 @ b532f1cf
<script setup lang="ts">
import ViewCourseInfo from '../components/ViewCourseInfo.vue'
import ViewCourseInfoTop from '../components/ViewCourseInfoTop.vue'
import ViewCourseChapter from '../components/ViewCourseChapter.vue'
import Operation from '../components/Operation.vue'
import { getViewCourseDetails } from '../api'
......@@ -29,11 +30,14 @@ const handleFresh = () => {
<AppCard title="查阅课程">
<Operation :data="courseDetails" @update="handleFresh"></Operation>
<div class="course-view">
<ViewCourseInfoTop :data="courseDetails"></ViewCourseInfoTop>
<div class="course-left_info">
<ViewCourseInfo :data="courseDetails"></ViewCourseInfo>
<ViewCourseInfo :data="courseDetails" class="info_bottom"></ViewCourseInfo>
<ViewCourseChapter
v-if="Object.keys(courseDetails).length"
:data="courseDetails.chapters[0]?.children || []"
class="info_chapter"
></ViewCourseChapter>
</div>
</div>
......@@ -41,10 +45,19 @@ const handleFresh = () => {
</template>
<style lang="scss" scoped>
.course-view {
border: 1px solid #bfbfbf;
border-radius: 10px;
display: flex;
flex-direction: column;
.course-left_info {
width: 840px;
display: flex;
.info_bottom {
width: 67%;
}
.info_chapter {
width: 25%;
}
}
}
</style>
src/modules/resource/courseware/views/List.vue
浏览文件 @ b532f1cf
<script setup lang="ts">
import { getCourseList } from '../api'
import CardListItem from '@/components/base/CardListItem.vue'
import { Expand } from '@element-plus/icons-vue'
import { useMapStore } from '@/stores/map'
import { useGetCategoryList } from '@/composables/useGetCategoryList'
import { useProjectList } from '@/composables/useGetProjectList'
......@@ -17,7 +16,7 @@ const store = useMapStore()
const departmentList: any = useProjectList('', '79806610719731712').departmentList
// 下拉选择tree 视频分类
let { list: selectTree } = useGetCategoryList()
let { list: selectTree }: any = useGetCategoryList()
const defaultProps = {
children: 'children',
label: 'category_name',
......@@ -99,10 +98,21 @@ const typeFilter = () => {
<el-tab-pane label="部门资源" name="2"></el-tab-pane>
<el-tab-pane label="公开资源" name="3"></el-tab-pane>
</el-tabs>
<el-icon class="video-head-icon" @click="changeCard"><Expand /></el-icon>
<div class="video-head-icon" @click="changeCard">
<img
v-if="!isCard"
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/change_card.png"
alt=""
/>
<img v-else src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/change_list.png" alt="" />
</div>
</div>
<div class="video-tool-btn">
<router-link v-if="tabValue === '1'" v-permission="'v1-resource-courseware-create'" to="/resource/courseware/update">
<router-link
v-if="tabValue === '1'"
v-permission="'v1-resource-courseware-create'"
to="/resource/courseware/update"
>
<el-button type="primary" round>新建课件资源</el-button>
</router-link>
</div>
......@@ -110,11 +120,13 @@ const typeFilter = () => {
<template #header-aside></template>
<template #filter-type="{ params }">
<el-tree-select
node-key="id"
@change="typeFilter"
clearable
:props="defaultProps"
v-model="params.classification"
:data="selectTree"
:default-expanded-keys="selectTree.length ? [selectTree[0]?.id] : []"
/>
</template>
<template v-if="tabValue == '3' && isAdmin" #filter-department="{ params }">
......
src/modules/resource/courseware/views/Update.vue
浏览文件 @ b532f1cf
......@@ -31,7 +31,7 @@ if (isUpdate) {
}
// 下拉选择tree 视频分类
let { list: selectTree } = useGetCategoryList()
let { list: selectTree }: any = useGetCategoryList()
const defaultProps = {
children: 'children',
label: 'category_name',
......@@ -173,6 +173,8 @@ const changeProtocol = (data: any) => {
v-model="form.classification"
:data="selectTree"
placeholder="请选择课件分类"
node-key="id"
:default-expanded-keys="selectTree.length ? [selectTree[0]?.id] : []"
/>
</el-form-item>
<el-form-item label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;知识点：">
......
src/modules/resource/dashboard/components/Statistics.vue
浏览文件 @ b532f1cf
......@@ -40,16 +40,16 @@ const bytesToSize = (bytes: number) => {
<style lang="scss" scoped>
.statistics-list {
display: flex;
flex-wrap: wrap;
// flex-wrap: wrap;
margin-top: -20px;
.item {
padding-top: 15px;
min-width: 110px;
min-width: 10%;
height: 140px;
border: 1px solid #e5e5e5;
border-radius: 6px;
box-sizing: border-box;
margin-right: 20px;
margin-right: 1%;
margin-top: 20px;
&:nth-child(1) {
.icon {
......
src/modules/resource/lessonplan/views/List.vue
浏览文件 @ b532f1cf
<script setup lang="ts">
import { getLessonList } from '../api'
import CardListItem from '@/components/base/CardListItem.vue'
import { Expand } from '@element-plus/icons-vue'
import { useMapStore } from '@/stores/map'
import { useGetCategoryList } from '@/composables/useGetCategoryList'
import { useProjectList } from '@/composables/useGetProjectList'
......@@ -25,7 +24,7 @@ const changeCard = () => {
const departmentList: any = useProjectList('', '79806610719731712').departmentList
// 下拉选择tree 视频分类
let { list: selectTree } = useGetCategoryList()
let { list: selectTree }: any = useGetCategoryList()
const defaultProps = {
children: 'children',
label: 'category_name',
......@@ -99,10 +98,21 @@ const typeFilter = () => {
<el-tab-pane label="部门资源" name="2"></el-tab-pane>
<el-tab-pane label="公开资源" name="3"></el-tab-pane>
</el-tabs>
<el-icon class="video-head-icon" @click="changeCard"><Expand /></el-icon>
<div class="video-head-icon" @click="changeCard">
<img
v-if="!isCard"
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/change_card.png"
alt=""
/>
<img v-else src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/change_list.png" alt="" />
</div>
</div>
<div class="video-tool-btn">
<router-link v-if="tabValue === '1'" v-permission="'v1-resource-lesson-plan-create'" to="/resource/lessonplan/update">
<router-link
v-if="tabValue === '1'"
v-permission="'v1-resource-lesson-plan-create'"
to="/resource/lessonplan/update"
>
<el-button type="primary" round>新建教案资源</el-button>
</router-link>
</div>
......@@ -110,11 +120,13 @@ const typeFilter = () => {
<template #header-aside></template>
<template #filter-type="{ params }">
<el-tree-select
node-key="id"
@change="typeFilter"
clearable
:props="defaultProps"
v-model="params.classification"
:data="selectTree"
:default-expanded-keys="selectTree.length ? [selectTree[0]?.id] : []"
/>
</template>
<template v-if="tabValue == '3' && isAdmin" #filter-department="{ params }">
......
src/modules/resource/lessonplan/views/Update.vue
浏览文件 @ b532f1cf
......@@ -31,7 +31,7 @@ if (isUpdate) {
}
// 下拉选择tree 视频分类
let { list: selectTree } = useGetCategoryList()
let { list: selectTree }: any = useGetCategoryList()
const defaultProps = {
children: 'children',
label: 'category_name',
......@@ -171,6 +171,8 @@ const changeProtocol = (data: any) => {
style="width: 100%"
v-model="form.classification"
:data="selectTree"
node-key="id"
:default-expanded-keys="selectTree.length ? [selectTree[0]?.id] : []"
/>
</el-form-item>
<el-form-item label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;知识点：">
......
src/modules/resource/other/views/List.vue
浏览文件 @ b532f1cf
<script setup lang="ts">
import { getOtherList } from '../api'
import CardListItem from '@/components/base/CardListItem.vue'
import { Expand } from '@element-plus/icons-vue'
import { useMapStore } from '@/stores/map'
import { useProjectList } from '@/composables/useGetProjectList'
// 下拉选择tree 视频分类
......@@ -100,7 +99,14 @@ const typeFilter = () => {
<el-tab-pane label="部门资源" name="2"></el-tab-pane>
<el-tab-pane label="公开资源" name="3"></el-tab-pane>
</el-tabs>
<el-icon class="video-head-icon" @click="changeCard"><Expand /></el-icon>
<div class="video-head-icon" @click="changeCard">
<img
v-if="!isCard"
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/change_card.png"
alt=""
/>
<img v-else src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/change_list.png" alt="" />
</div>
</div>
<div class="video-tool-btn">
<router-link
......
src/modules/resource/video/components/CardListItem.vue
浏览文件 @ b532f1cf
......@@ -10,19 +10,24 @@ const props: any = defineProps<{ data: object; tabIndex: string }>()
<div class="tool-pop-btn">
<div style="min-width: 100%">
<router-link v-if="props.data.auth_edit" :to="`/resource/video/update?id=${props.data.id}`">
<div class="edit-btn">编辑</div>
<div class="edit-btn btn">编辑</div>
</router-link>
</div>
<div style="min-width: 100%">
<router-link v-if="props.data.auth_view" :to="`/resource/video/view?id=${props.data.id}`">
<div class="view-btn">查看</div>
<div class="view-btn btn">查看</div>
</router-link>
</div>
</div>
</div>
<div class="card-item-bottom">
<div class="item-t">
<div class="text">{{ props.data.created_operator_name }}/{{ props.data.organ_id_name }}</div>
<el-popover trigger="hover" placement="right">
<div v-html="props.data.created_operator_name + '/' + props.data.organ_id_name"></div>
<template #reference>
<div class="text">{{ props.data.created_operator_name }}/{{ props.data.organ_id_name }}</div>
</template>
</el-popover>
<div :class="props.data.status == 1 ? 'tag green' : 'tag'">{{ props.data.status_name }}</div>
</div>
<div class="item-b">
......@@ -82,7 +87,7 @@ const props: any = defineProps<{ data: object; tabIndex: string }>()
.edit-btn {
width: 113px;
line-height: 32px;
border: 1px solid #d3d3d3;
background: #aa1941;
border-radius: 18px;
text-align: center;
font-size: 14px;
......@@ -90,6 +95,10 @@ const props: any = defineProps<{ data: object; tabIndex: string }>()
margin: 0 auto 12px;
cursor: pointer;
}
.btn:hover {
background: none;
border: 1px solid #d3d3d3;
}
.view-btn {
width: 113px;
line-height: 32px;
......
src/modules/resource/video/views/List.vue
浏览文件 @ b532f1cf
<script setup lang="ts">
import { getVideoList } from '../api'
import CardListItem from '../components/CardListItem.vue'
import { Expand, PictureFilled } from '@element-plus/icons-vue'
import { PictureFilled } from '@element-plus/icons-vue'
import { useGetCategoryList } from '@/composables/useGetCategoryList'
import { useProjectList } from '@/composables/useGetProjectList'
import { useMapStore } from '@/stores/map'
......@@ -17,13 +17,12 @@ const store = useMapStore()
const departmentList: any = useProjectList('', '79806610719731712').departmentList
// 筛选下拉选择tree 视频分类
let { list: selectTree } = useGetCategoryList()
let { list: selectTree }: any = useGetCategoryList()
const defaultProps = {
children: 'children',
label: 'category_name',
value: 'id'
}
// 资源出处 tab触发
const tabValue = ref('1')
const appList = ref()
......@@ -101,7 +100,14 @@ const changeCard = () => {
<el-tab-pane label="部门资源" name="2"></el-tab-pane>
<el-tab-pane label="公开资源" name="3"></el-tab-pane>
</el-tabs>
<el-icon class="video-head-icon" @click="changeCard"><Expand /></el-icon>
<div class="video-head-icon" @click="changeCard">
<img
v-if="!isCard"
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/change_card.png"
alt=""
/>
<img v-else src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/change_list.png" alt="" />
</div>
</div>
<div class="video-tool-btn">
<router-link
......@@ -132,11 +138,13 @@ const changeCard = () => {
</template>
<template #filter-type="{ params }">
<el-tree-select
node-key="id"
@change="typeFilter"
clearable
:props="defaultProps"
v-model="params.classification"
:data="selectTree"
:default-expanded-keys="selectTree.length ? [selectTree[0]?.id] : []"
/>
</template>
<template v-if="tabValue == '3' && isAdmin" #filter-department="{ params }">
......
src/modules/resource/video/views/Update.vue
浏览文件 @ b532f1cf
......@@ -27,7 +27,7 @@ if (isUpdate) {
}
// 下拉选择tree 视频分类
let { list: selectTree } = useGetCategoryList()
let { list: selectTree }: any = useGetCategoryList()
const defaultProps = {
children: 'children',
label: 'category_name',
......@@ -175,6 +175,8 @@ const changeProtocol = (data: any) => {
style="width: 100%"
v-model="form.data.classification"
:data="selectTree"
node-key="id"
:default-expanded-keys="selectTree.length ? [selectTree[0]?.id] : []"
/>
</el-form-item>
<el-form-item label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;知识点：">
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论