提交 67ac6b1a authored 作者: matian's avatar matian

教案列表和其他资料列表更新

上级 5f225105
......@@ -17,12 +17,12 @@ const tabChange = () => {
// 筛选项目列表
let projectList: any = $ref([])
getProjectList({ organization_id: '' }).then(res => {
getProjectList({ organization_id: '' }).then((res: any) => {
projectList = res.data.departments
})
// 下拉选择tree 视频分类
let selectTree = $ref([])
getCategoryList({ type: 'tree' }).then(res => {
getCategoryList({ type: 'tree' }).then((res: any) => {
selectTree = res.data
})
const defaultProps = {
......
import httpRequest from '@/utils/axios'
// 获取视频列表
export function getVideoList(params?: { type?: string; page?: number; page_size?: number }) {
return httpRequest.get('/api/psp/backend/video/index', { params })
// 获取教案列表
export function getLessonList(params?: {
tab: string
status?: string
authorized?: string
classification?: string
page?: number
['per-page']?: number
}) {
return httpRequest.get('/api/resource/v1/resource/lesson-plan/list', { params })
}
// 创建视频
export function createVideo(data: { course_name: string; cover_page: string; type: string; weight?: string }) {
return httpRequest.post('/api/psp/backend/video/create', data)
// 获取项目列表
export function getProjectList(params: { organization_id: string }) {
return httpRequest.get('/api/resource/v1/util/members', { params })
}
// 更新视频
export function updateVideo(data: { id: string; course_name: string; cover_page: string; type: string; weight?: string }) {
return httpRequest.post('/api/psp/backend/video/update', data)
}
// 获取视频详情
export function getVideo(params: { id: string }) {
return httpRequest.get('/api/psp/backend/video/view', { params })
// 获取分类列表
export function getCategoryList(params: { type: string; category_name?: string }) {
return httpRequest.get('/api/resource/v1/backend/category/list', { params })
}
......@@ -7,8 +7,8 @@ export const routes: Array<RouteRecordRaw> = [
component: AppLayout,
children: [
{ path: '', component: () => import('./views/List.vue') },
{ path: 'update', component: () => import('./views/Update.vue') },
{ path: 'view', component: () => import('./views/View.vue') }
{ path: '/resource/lessonplan/update', component: () => import('./views/Update.vue') },
{ path: '/resource/lessonplan/view', component: () => import('./views/View.vue') }
// { path: 'update/:id', component: () => import('./views/Update.vue'), props: true }
]
}
......
<script setup lang="ts">
// import { getVideoList } from '../api'
import { getLessonList, getProjectList, getCategoryList } from '../api'
import CardListItem from '@/components/base/CardListItem.vue'
import { Expand, Search } from '@element-plus/icons-vue'
import { useMapStore } from '@/stores/map'
const store = useMapStore()
const appList = ref()
const isCard = ref(true)
const listOptions = {
// 资源出处 tab触发
const tabValue = ref('1')
const tabChange = () => {
appList.value.refetch()
}
// 筛选项目列表
let projectList: any = $ref([])
getProjectList({ organization_id: '' }).then((res: any) => {
projectList = res.data.departments
})
// 下拉选择tree 视频分类
let selectTree = $ref([])
getCategoryList({ type: 'tree' }).then((res: any) => {
selectTree = res.data
})
const defaultProps = {
children: 'children',
label: 'category_name',
value: 'id'
}
const listOptions = $computed(() => {
return {
remote: {
// httpRequest: getVideoList,
params: { type: '' },
httpRequest: getLessonList,
params: { tab: tabValue, status: '', authorized: '' },
beforeRequest(params: any) {
// params.type = 选项卡类型
return params
}
},
filters: [
{ type: 'select', prop: 'type', label: '状态' },
{ type: 'select', prop: 'project_id', label: '项目' },
{ type: 'select', prop: 'category_id', label: '类别' },
{
type: 'select',
prop: 'audit_status',
label: '状态',
options: store.mapList?.filter((item: any) => item.key === 'system_status')[0]?.values
},
{ 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: 'title' },
{ label: '视频分类', prop: 'type' },
{ label: '知识点', prop: 'zsd' },
{ label: '封面', slots: 'table-cover', width: 100 },
{ label: '资源状态', prop: 'state' },
{ label: '审核状态', prop: 'state2' },
{ label: '更新人', prop: 'update' },
{ label: '更新人部门', prop: 'updatebm' },
{ label: '更新日期', prop: 'update_time' },
{ label: '操作', slots: 'table-operate', align: 'right' }
],
data: [
{ id: 1, title: '视频标题', type: '视频分类' },
{ id: 2, title: '视频标题', type: '视频分类' }
{ label: '教案标题', prop: 'name' },
{ 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 }
]
}
}
})
</script>
<template>
<AppCard>
<!-- <el-switch v-model="isCard"></el-switch> -->
<div class="video-head">
<el-tabs>
<el-tabs @tab-change="tabChange" v-model="tabValue">
<el-tab-pane label="我的资源"></el-tab-pane>
<el-tab-pane label="部门资源"></el-tab-pane>
<el-tab-pane label="公开资源"></el-tab-pane>
......@@ -63,12 +86,15 @@ const listOptions = {
<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="`/video/update/${row.id}`">
<router-link :to="`/resource/lessonplan/update/?id=${row.id}`">
<el-button plain>编辑</el-button>
</router-link>
<router-link :to="`/video/view/${row.id}`">
<router-link :to="`/resource/lessonplan/view/?id=${row.id}`">
<el-button type="primary" plain>查看</el-button>
</router-link>
</el-space>
......@@ -76,17 +102,17 @@ const listOptions = {
<!-- 卡片 -->
<template #body="{ data }" v-if="isCard">
<div class="card-list">
<div class="card-list" v-if="data.length">
<CardListItem v-for="(item, index) in data" :data="item" :key="index"></CardListItem>
</div>
<!-- <div class="resource-video-item" v-for="item in data" :key="item.id">{{ item.title }}</div> -->
<el-empty v-else description="暂无数据" />
</template>
</AppList>
</AppCard>
</template>
<style lang="scss">
.card-list{
background: #FAFAFA;
.card-list {
background: #fafafa;
padding: 20px;
display: flex;
}
......
import httpRequest from '@/utils/axios'
// 获取视频列表
export function getVideoList(params?: { type?: string; page?: number; page_size?: number }) {
return httpRequest.get('/api/psp/backend/video/index', { params })
// 获取其他资料列表
export function getOtherList(params?: {
tab: string
status?: string
authorized?: string
classification?: string
page?: number
['per-page']?: number
}) {
return httpRequest.get('/api/resource/v1/resource/other-information/list', { params })
}
// 创建视频
export function createVideo(data: { course_name: string; cover_page: string; type: string; weight?: string }) {
return httpRequest.post('/api/psp/backend/video/create', data)
// 获取项目列表
export function getProjectList(params: { organization_id: string }) {
return httpRequest.get('/api/resource/v1/util/members', { params })
}
// 更新视频
export function updateVideo(data: { id: string; course_name: string; cover_page: string; type: string; weight?: string }) {
return httpRequest.post('/api/psp/backend/video/update', data)
}
// 获取视频详情
export function getVideo(params: { id: string }) {
return httpRequest.get('/api/psp/backend/video/view', { params })
// 获取分类列表
export function getCategoryList(params: { type: string; category_name?: string }) {
return httpRequest.get('/api/resource/v1/backend/category/list', { params })
}
<script setup lang="ts">
// import { getVideoList } from '../api'
import { getOtherList, getProjectList, getCategoryList } from '../api'
import CardListItem from '@/components/base/CardListItem.vue'
import { Expand, Search } from '@element-plus/icons-vue'
import { useMapStore } from '@/stores/map'
const store = useMapStore()
const appList = ref()
// 列表切换
const isCard = ref(true)
const listOptions = {
// 资源出处 tab触发
const tabValue = ref('1')
const tabChange = () => {
appList.value.refetch()
}
// 筛选项目列表
let projectList: any = $ref([])
getProjectList({ organization_id: '' }).then((res: any) => {
projectList = res.data.departments
})
// 下拉选择tree 视频分类
let selectTree = $ref([])
getCategoryList({ type: 'tree' }).then((res: any) => {
selectTree = res.data
})
const defaultProps = {
children: 'children',
label: 'category_name',
value: 'id'
}
const listOptions = $computed(() => {
return {
remote: {
// httpRequest: getVideoList,
params: { type: '' },
httpRequest: getOtherList,
params: { tab: tabValue, title: '', status: '', authorized: '', classification: '' },
beforeRequest(params: any) {
// params.type = 选项卡类型
return params
}
},
filters: [
{ type: 'select', prop: 'type', label: '状态' },
{ type: 'select', prop: 'project_id', label: '项目' },
{ type: 'select', prop: 'category_id', label: '类别' },
{
type: 'select',
prop: 'audit_status',
label: '状态',
options: store.mapList?.filter((item: any) => item.key === 'system_status')[0]?.values
},
{ 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: 'title' },
{ label: '视频分类', prop: 'type' },
{ label: '知识点', prop: 'zsd' },
{ label: '封面', slots: 'table-cover', width: 100 },
{ label: '资源状态', prop: 'state' },
{ label: '审核状态', prop: 'state2' },
{ label: '更新人', prop: 'update' },
{ label: '更新人部门', prop: 'updatebm' },
{ label: '更新日期', prop: 'update_time' },
{ label: '操作', slots: 'table-operate', align: 'right' }
],
data: [
{ id: 1, title: '视频标题', type: '视频分类' },
{ id: 2, title: '视频标题', type: '视频分类' }
{ label: '课件标题', prop: 'name' },
{ 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 }
]
}
}
})
</script>
<template>
<AppCard>
<!-- <el-switch v-model="isCard"></el-switch> -->
<div class="video-head">
<el-tabs>
<el-tabs @tab-change="tabChange" v-model="tabValue">
<el-tab-pane label="我的资源"></el-tab-pane>
<el-tab-pane label="部门资源"></el-tab-pane>
<el-tab-pane label="公开资源"></el-tab-pane>
......@@ -54,8 +78,8 @@ const listOptions = {
<el-icon class="video-head-icon" @click="isCard = !isCard"><Expand /></el-icon>
</div>
<div class="video-tool-btn">
<router-link to="/resource/other/update">
<el-button type="primary" round>新建其他资料</el-button>
<router-link to="/resource/courseware/update">
<el-button type="primary" round>新建课件资源</el-button>
</router-link>
</div>
<AppList v-bind="listOptions" ref="appList">
......@@ -63,12 +87,15 @@ const listOptions = {
<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="`/video/update/${row.id}`">
<router-link :to="`/resource/courseware/update/?id=${row.id}`">
<el-button plain>编辑</el-button>
</router-link>
<router-link :to="`/video/view/${row.id}`">
<router-link :to="`/resource/courseware/view/?id=${row.id}`">
<el-button type="primary" plain>查看</el-button>
</router-link>
</el-space>
......@@ -76,17 +103,17 @@ const listOptions = {
<!-- 卡片 -->
<template #body="{ data }" v-if="isCard">
<div class="card-list">
<div class="card-list" v-if="data.length">
<CardListItem v-for="(item, index) in data" :data="item" :key="index"></CardListItem>
</div>
<!-- <div class="resource-video-item" v-for="item in data" :key="item.id">{{ item.title }}</div> -->
<el-empty v-else description="暂无数据" />
</template>
</AppList>
</AppCard>
</template>
<style lang="scss">
.card-list{
background: #FAFAFA;
.card-list {
background: #fafafa;
padding: 20px;
display: flex;
}
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论