提交 c2102cad authored 作者: matian's avatar matian

updates

上级 04d8a0cd
......@@ -134,7 +134,6 @@
"useDisplayMedia": true,
"useDocumentVisibility": true,
"useDraggable": true,
"useDropZone": true,
"useElementBounding": true,
"useElementByPoint": true,
"useElementHover": true,
......
......@@ -135,7 +135,6 @@ declare global {
const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
const useDraggable: typeof import('@vueuse/core')['useDraggable']
const useDropZone: typeof import('@vueuse/core')['useDropZone']
const useElementBounding: typeof import('@vueuse/core')['useElementBounding']
const useElementByPoint: typeof import('@vueuse/core')['useElementByPoint']
const useElementHover: typeof import('@vueuse/core')['useElementHover']
......
<script setup lang="ts">
import { Files } from '@element-plus/icons-vue'
const props: any = defineProps<{ data: object }>()
</script>
<template>
<div class="card-item">
<div class="card-item-top">
<!-- <div class="title">基金产品(中)(初级)</div> -->
<!-- <img src="http://iph.href.lu/265x170" /> -->
<div class="title">基金产品(中)(初级)</div>
<div class="title">{{ props.data.name }}</div>
<div class="item-info">
<div class="info">文件大小:1MB</div>
<div class="info">文件大小:1MB</div>
<div class="info">学习人次:165人次</div>
<div class="info">文件大小:{{ props.data.size }}{{ props.data.size_name[1] }}</div>
<div class="info">关联次数:{{ props.data.relation_count }}</div>
<div class="info">学习人次:{{ props.data.learn_count }}人次</div>
</div>
<el-icon class="item-info-icon">
<Files />
</el-icon>
<div class="tool-pop-btn">
<router-link :to="`/resource/courseware/update?id=${props.data.id}`">
<div class="edit-btn">编辑</div>
</router-link>
<router-link :to="`/resource/courseware/view?id=${props.data.id}`">
<div class="view-btn">查看</div>
</router-link>
</div>
</div>
<div class="card-item-bottom">
<div class="item-t">
<div class="text">张三丰/紫荆教育</div>
<div class="tag green">失效</div>
<div class="text">{{ props.data.created_operator_name }}/{{ props.data.organ_id_name }}</div>
<div :class="props.data.status == 1 ? 'tag green' : 'tag'">{{ props.data.status_name }}</div>
</div>
<div class="item-b">
<div class="time">2022-03-21 12:34:21</div>
<div class="tag">新建</div>
<div class="time">{{ props.data.updated_time }}</div>
<!-- <div class="tag">新建</div> -->
</div>
</div>
</div>
......@@ -43,7 +48,7 @@ import { Files } from '@element-plus/icons-vue'
box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
background: #fff;
.card-item-top {
background: rgba(204,204,204, .5);
background: rgba(204, 204, 204, 0.5);
height: 170px;
position: relative;
display: flex;
......@@ -53,9 +58,9 @@ import { Files } from '@element-plus/icons-vue'
opacity: 1;
}
}
.item-info{
.item-info {
padding-left: 20px;
.info{
.info {
width: 150px;
font-size: 14px;
line-height: 100%;
......@@ -63,7 +68,7 @@ import { Files } from '@element-plus/icons-vue'
margin-bottom: 10px;
}
}
.item-info-icon{
.item-info-icon {
font-size: 50px;
color: #aa1941;
}
......@@ -78,17 +83,17 @@ import { Files } from '@element-plus/icons-vue'
left: 0;
width: 100%;
line-height: 37px;
background: rgba(0, 0, 0, .6);
background: rgba(0, 0, 0, 0.6);
font-size: 18px;
color: #ffffff;
padding-left: 16px;
box-sizing: border-box;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.tool-pop-btn {
transition: all .5s;
transition: all 0.5s;
position: absolute;
top: 0;
left: 0;
......@@ -96,71 +101,71 @@ import { Files } from '@element-plus/icons-vue'
height: 100%;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
.edit-btn{
.edit-btn {
width: 113px;
line-height: 32px;
border: 1px solid #D3D3D3;
border: 1px solid #d3d3d3;
border-radius: 18px;
text-align: center;
font-size: 14px;
color: #FFFFFF;
color: #ffffff;
margin: 52px auto 12px;
cursor: pointer;
}
.view-btn{
.view-btn {
width: 113px;
line-height: 32px;
background: #AA1941;
background: #aa1941;
border-radius: 18px;
text-align: center;
font-size: 14px;
color: #FFFFFF;
color: #ffffff;
margin: 0 auto;
cursor: pointer;
}
}
}
}
.card-item-bottom{
.card-item-bottom {
background: #fff;
padding: 20px 16px 30px;
.item-t{
.item-t {
display: flex;
align-items: center;
justify-content: space-between;
.text{
.text {
width: 150px;
font-size: 16px;
line-height: 100%;
color: #666666;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.tag{
.tag {
width: 48px;
line-height: 22px;
background: #AA1941;
background: #aa1941;
border-radius: 11px;
font-size: 14px;
color: #fff;
text-align: center;
&.green{
background: #1AB226;
&.green {
background: #1ab226;
}
}
}
.item-b{
.item-b {
margin-top: 18px;
display: flex;
align-items: center;
justify-content: space-between;
.time{
.time {
font-size: 14px;
line-height: 100%;
color: #999999;
}
.tag{
.tag {
font-size: 16px;
line-height: 100%;
color: #999999;
......
......@@ -43,3 +43,7 @@ export function updateCourse(data: {
export function getCourseDetails(params: { id: string }) {
return httpRequest.get('/api/resource/v1/resource/courseware/view', { params })
}
// 获取项目列表
export function getProjectList(params: { organization_id: string }) {
return httpRequest.get('/api/resource/v1/util/members', { params })
}
<script setup lang="ts">
import { getCourseList } from '../api'
import { getCourseList, getProjectList, getCategoryList } from '../api'
import CardListItem from '@/components/base/CardListItem.vue'
import { Expand, Search } from '@element-plus/icons-vue'
import { useMapStore } from '@/stores/map'
......@@ -14,6 +14,22 @@ const tabValue = ref('1')
const tabChange = () => {
appList.value.refetch()
}
// 筛选项目列表
let projectList: any = $ref([])
getProjectList({ organization_id: '' }).then(res => {
projectList = res.data.departments
})
// 下拉选择tree 视频分类
let selectTree = $ref([])
getCategoryList({ type: 'tree' }).then(res => {
selectTree = res.data
})
const defaultProps = {
children: 'children',
label: 'category_name',
value: 'id'
}
const listOptions = $computed(() => {
return {
remote: {
......@@ -27,25 +43,25 @@ const listOptions = $computed(() => {
filters: [
{
type: 'select',
prop: 'type',
prop: 'audit_status',
label: '状态',
options: store.mapList?.filter((item: any) => item.key === 'system_status')[0]?.values
},
{ type: 'select', prop: 'project_id', label: '项目' },
{ type: 'select', prop: 'category_id', label: '类别' },
{ type: 'select', prop: 'authorized', label: '项目', options: projectList, labelKey: 'name', valueKey: 'id' },
{ prop: 'classification', label: '类别', slots: 'filter-type' },
{ prop: 'search', slots: 'filter-search' }
// { type: 'input', prop: 'category_id', prefixIcon: 'Search' }
],
columns: [
{ label: '课件标题', prop: 'name' },
{ label: '课件分类', prop: 'classification_name' },
{ label: '知识点', prop: 'knowledge_points' },
{ label: '资源状态', prop: 'status_name' },
{ label: '审核状态', prop: 'audit_status_name' },
{ label: '更新人', prop: 'updated_operator_name' },
{ label: '更新人部门', prop: 'organ_id_name' },
{ label: '更新日期', prop: 'updated_time' },
{ label: '操作', slots: 'table-operate', align: 'right' }
{ label: '课件分类', prop: 'classification_name', align: 'center' },
{ label: '知识点', prop: 'knowledge_points', align: 'center' },
{ label: '资源状态', prop: 'status_name', align: 'center' },
{ label: '审核状态', prop: 'audit_status_name', align: 'center' },
{ label: '更新人', prop: 'updated_operator_name', align: 'center' },
{ label: '更新人部门', prop: 'organ_id_name', align: 'center' },
{ label: '更新日期', prop: 'updated_time', align: 'center' },
{ label: '操作', slots: 'table-operate', align: 'center', width: 200 }
]
}
})
......@@ -71,6 +87,9 @@ const listOptions = $computed(() => {
<template #filter-search="{ params }">
<el-input v-model="params.search" placeholder="搜索" :prefix-icon="Search" />
</template>
<template #filter-type="{ params }">
<el-tree-select :props="defaultProps" v-model="params.classification" :data="selectTree" />
</template>
<template #table-operate="{ row }">
<el-space>
<router-link :to="`/resource/courseware/update/?id=${row.id}`">
......@@ -87,7 +106,7 @@ const listOptions = $computed(() => {
<div class="card-list" v-if="data.length">
<CardListItem v-for="(item, index) in data" :data="item" :key="index"></CardListItem>
</div>
<el-empty v-else description="description" />
<el-empty v-else description="暂无数据" />
</template>
</AppList>
</AppCard>
......
......@@ -141,7 +141,7 @@ if (id !== '' && id) {
</script>
<template>
<AppCard title="新建课件资源">
<AppCard :title="id ? '编辑课件资源' : '新建课件资源'">
<div class="tool-btn-box" v-if="$route.query.id">
<div class="btn-item">部门共享</div>
<div class="btn-item">平台共享</div>
......
......@@ -2,6 +2,9 @@
import TopInfo from '../components/view/TopInfo.vue'
import CenterInfo from '../components/view/CenterInfo.vue'
import BottomInfo from '../components/view/BottomInfo.vue'
import { getCourseDetails } from '../api'
const router = useRouter()
const listOptions = {
columns: [
{ label: '课程图片', prop: 'img', align: 'center' },
......@@ -20,6 +23,13 @@ const listOptions = {
{ img: 5, cursor_name: '宏观经济学.pptx', type_name: '5', zhang: '5', jie: '吉林师范大学', update: '王重阳' }
]
}
const id = router.currentRoute.value.query.id as string
// 获取详情
let courseDetails: any = ref({})
getCourseDetails({ id: id }).then(res => {
courseDetails.value = res.data
console.log(courseDetails, '1111111aaaaaaaaa')
})
</script>
<template>
......@@ -39,12 +49,7 @@ const listOptions = {
<template #table-operate="{ row }">
<el-space>
<router-link :to="`/video/update/${row.id}`">
<el-button
style="color: #399EE8;"
type="primary"
link
>查看</el-button
>
<el-button style="color: #399ee8" type="primary" link>查看</el-button>
</router-link>
</el-space>
</template>
......@@ -52,17 +57,17 @@ const listOptions = {
</AppCard>
</template>
<style lang="scss" scoped>
.btn-box{
.btn-box {
display: flex;
justify-content: right;
.btn-item{
.btn-item {
width: 127px;
line-height: 36px;
background: #AA1941;
background: #aa1941;
border-radius: 20px;
margin-right: 10px;
font-size: 14px;
color: #FFFFFF;
color: #ffffff;
text-align: center;
}
}
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论