提交 eed548e1 authored 作者: lihuihui's avatar lihuihui
...@@ -70,25 +70,27 @@ const fetchList = (isReset = false) => { ...@@ -70,25 +70,27 @@ const fetchList = (isReset = false) => {
// } // }
// } // }
loading.value = true loading.value = true
httpRequest(requestParams) return (
.then((res: any) => { httpRequest(requestParams)
const { list = [], total = 0 } = callback ? callback(res.data) : res.data || {} .then((res: any) => {
page.total = total const { list = [], total = 0 } = callback ? callback(res.data) : res.data || {}
dataList.value = list page.total = total
}) dataList.value = list
// .catch(() => { })
// page.total = 0 // .catch(() => {
// dataList.value = [] // page.total = 0
// }) // dataList.value = []
.finally(() => { // })
loading.value = false .finally(() => {
}) loading.value = false
})
)
} }
// 搜索 // 搜索
const search = () => { const search = () => {
page.currentPage = 1 page.currentPage = 1
fetchList() return fetchList()
} }
// 重置 // 重置
...@@ -98,12 +100,12 @@ const reset = () => { ...@@ -98,12 +100,12 @@ const reset = () => {
// 初始化页码 // 初始化页码
page.currentPage = 1 page.currentPage = 1
// 刷新列表 // 刷新列表
fetchList(true) return fetchList(true)
} }
// 刷新 // 刷新
const refetch = (isForce = false) => { const refetch = (isForce = false) => {
isForce ? reset() : fetchList() return isForce ? reset() : fetchList()
} }
// 页数改变 // 页数改变
...@@ -117,7 +119,7 @@ onMounted(() => { ...@@ -117,7 +119,7 @@ onMounted(() => {
fetchList() fetchList()
}) })
defineExpose({ refetch }) defineExpose({ refetch, tableRef })
</script> </script>
<template> <template>
......
...@@ -93,25 +93,28 @@ const handleUpdate = () => { ...@@ -93,25 +93,28 @@ const handleUpdate = () => {
// 扁平列表数据 // 扁平列表数据
let tableDataList = $ref<ICategory[]>([]) let tableDataList = $ref<ICategory[]>([])
// 列表配置 // 列表配置
const listOptions = { const listOptions = computed(() => {
remote: { return {
httpRequest: getCategoryList, remote: {
params: { type: 'tree', category_name: '' }, httpRequest: getCategoryList,
callback(data: ICategory[]) { params: { type: 'tree', category_name: '' },
tableData = data callback(data: ICategory[]) {
tableDataList = flatten(data) tableData = data
return { list: data } tableDataList = flatten(data)
} return { list: data }
}, }
filters: [{ type: 'input', prop: 'name', label: '类别名称:' }], },
columns: [ filters: [{ type: 'input', prop: 'name', label: '类别名称:' }],
{ align: 'center', slots: 'table-drag' }, columns: [
{ label: '类别名称', prop: 'category_name', align: 'center' }, { align: 'center', slots: 'table-drag' },
{ label: '层级', prop: 'depth', align: 'center' }, { label: '类别名称', prop: 'category_name', align: 'center' },
{ label: '状态', prop: 'status_name', align: 'center' }, { label: '层级', prop: 'depth', align: 'center' },
{ label: '操作', slots: 'table-operate', width: 230, align: 'center' } { label: '状态', prop: 'status_name', align: 'center' },
] { label: '操作', slots: 'table-operate', width: 230, align: 'center' }
} ],
data: tableData
}
})
// 数据扁平化 // 数据扁平化
function flatten(data: any[], pid = '0') { function flatten(data: any[], pid = '0') {
return data.reduce((acc: any[], item: any) => { return data.reduce((acc: any[], item: any) => {
...@@ -142,23 +145,37 @@ function useSortable() { ...@@ -142,23 +145,37 @@ function useSortable() {
}, },
onEnd(evt: SortableEvent) { onEnd(evt: SortableEvent) {
const { oldIndex, newIndex } = evt const { oldIndex, newIndex } = evt
if (oldIndex === undefined || newIndex === undefined) return if (oldIndex === undefined || newIndex === undefined || oldIndex === newIndex) return
const draggedRow = tableDataList[oldIndex] const draggedRow = tableDataList[oldIndex]
const relatedRow = tableDataList[newIndex] const relatedRow = tableDataList[newIndex]
moveCategory({ id: draggedRow.id, brother_id: relatedRow.id, type: newIndex > oldIndex ? 'after' : 'before' }).then(() => {
moveCategory({ id: draggedRow.id, brother_id: relatedRow.id, type: 'before' }).then(() => { // 修复拖拽后数据顺序不对的问题
if (oldIndex < newIndex) {
tableData = []
}
handleUpdate() handleUpdate()
}) })
} }
}) })
} }
// 展开行
let expandRowKeys = $ref<string[]>([])
function onExpandChange(row: ICategory, expanded: boolean) {
if (expanded) {
expandRowKeys.push(row.id)
} else {
expandRowKeys = expandRowKeys.filter(id => id !== row.id)
}
}
onMounted(() => { onMounted(() => {
useSortable() useSortable()
}) })
</script> </script>
<template> <template>
<AppCard title="类别管理"> <AppCard title="类别管理">
<AppList v-bind="listOptions" :has-pagination="false" row-key="id" ref="appList"> <AppList v-bind="listOptions" :has-pagination="false" row-key="id" ref="appList" :expand-row-keys="expandRowKeys" @expand-change="onExpandChange">
<el-button type="primary" @click="handleAddCategory">新增类别</el-button> <el-button type="primary" @click="handleAddCategory">新增类别</el-button>
<template #table-drag> <template #table-drag>
<el-icon><Operation /></el-icon> <el-icon><Operation /></el-icon>
...@@ -170,13 +187,5 @@ onMounted(() => { ...@@ -170,13 +187,5 @@ onMounted(() => {
</template> </template>
</AppList> </AppList>
</AppCard> </AppCard>
<AddDialog <AddDialog v-model:dialogVisible="dialogVisible" @updatePage="handleUpdate" :editData="editData" :isEdit="isEdit" :title="title" :prevCategoryName="prevCategoryName" v-if="dialogVisible" />
v-model:dialogVisible="dialogVisible"
@updatePage="handleUpdate"
:editData="editData"
:isEdit="isEdit"
:title="title"
:prevCategoryName="prevCategoryName"
v-if="dialogVisible"
/>
</template> </template>
import httpRequest from '@/utils/axios' import httpRequest from '@/utils/axios'
// 获取视频列表 // 获取课件列表
export function getVideoList(params?: { type?: string; page?: number; page_size?: number }) { export function getCourseList(params: {
return httpRequest.get('/api/psp/backend/video/index', { params }) tab: string
status?: string
authorized?: string
classification?: string
page?: number
['per-page']?: number
}) {
return httpRequest.get('/api/resource/v1/resource/courseware/list', { params })
} }
// 创建视频 // 创建
export function createVideo(data: { course_name: string; cover_page: string; type: string; weight?: string }) { export function createCourse(data: {
return httpRequest.post('/api/psp/backend/video/create', data) url: string
name: string
source: string
classification: string
knowledge_points: string
}) {
return httpRequest.post('/api/resource/v1/resource/courseware/create', data)
} }
// 更新视频 // 获取分类列表
export function updateVideo(data: { id: string; course_name: string; cover_page: string; type: string; weight?: string }) { export function getCategoryList(params: { type: string; category_name?: string }) {
return httpRequest.post('/api/psp/backend/video/update', data) return httpRequest.get('/api/resource/v1/backend/category/list', { params })
} }
// 获取视频详情 // 更新课件
export function getVideo(params: { id: string }) { export function updateCourse(data: {
return httpRequest.get('/api/psp/backend/video/view', { params }) id: string
url: string
name: string
source: string
classification: string
knowledge_points: string
}) {
return httpRequest.post('/v1/resource/courseware/update', data)
}
// 获取课件详情
export function getCourseDetails(params: { id: string }) {
return httpRequest.get('/api/resource/v1/resource/courseware/view', { params })
} }
...@@ -7,8 +7,8 @@ export const routes: Array<RouteRecordRaw> = [ ...@@ -7,8 +7,8 @@ export const routes: Array<RouteRecordRaw> = [
component: AppLayout, component: AppLayout,
children: [ children: [
{ path: '', component: () => import('./views/List.vue') }, { path: '', component: () => import('./views/List.vue') },
{ path: 'update', component: () => import('./views/Update.vue') }, { path: '/resource/courseware/update', component: () => import('./views/Update.vue') },
{ path: 'view', component: () => import('./views/View.vue') } { path: '/resource/courseware/view', component: () => import('./views/View.vue') }
// { path: 'update/:id', component: () => import('./views/Update.vue'), props: true } // { path: 'update/:id', component: () => import('./views/Update.vue'), props: true }
] ]
} }
......
<script setup lang="ts"> <script setup lang="ts">
// import { getVideoList } from '../api' import { getCourseList } from '../api'
import CardListItem from '@/components/base/CardListItem.vue' import CardListItem from '@/components/base/CardListItem.vue'
import { Expand, Search } from '@element-plus/icons-vue' import { Expand, Search } from '@element-plus/icons-vue'
import { useMapStore } from '@/stores/map'
const store = useMapStore()
const appList = ref() const appList = ref()
// 列表切换
const isCard = ref(true) const isCard = ref(true)
const listOptions = { // 资源出处 tab触发
remote: { const tabValue = ref('1')
// httpRequest: getVideoList, const tabChange = () => {
params: { type: '' }, appList.value.refetch()
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: '类别' },
{ 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: '视频分类' }
]
} }
const listOptions = $computed(() => {
return {
remote: {
httpRequest: getCourseList,
params: { tab: tabValue, title: '', status: '', authorized: '', classification: '' },
beforeRequest(params: any) {
// params.type = 选项卡类型
return params
}
},
filters: [
{
type: 'select',
prop: 'type',
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: '类别' },
{ 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' }
]
}
})
</script> </script>
<template> <template>
<AppCard> <AppCard>
<!-- <el-switch v-model="isCard"></el-switch> -->
<div class="video-head"> <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> <el-tab-pane label="部门资源"></el-tab-pane>
<el-tab-pane label="公开资源"></el-tab-pane> <el-tab-pane label="公开资源"></el-tab-pane>
...@@ -65,10 +73,10 @@ const listOptions = { ...@@ -65,10 +73,10 @@ const listOptions = {
</template> </template>
<template #table-operate="{ row }"> <template #table-operate="{ row }">
<el-space> <el-space>
<router-link :to="`/video/update/${row.id}`"> <router-link :to="`/resource/courseware/update/?id=${row.id}`">
<el-button plain>编辑</el-button> <el-button plain>编辑</el-button>
</router-link> </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> <el-button type="primary" plain>查看</el-button>
</router-link> </router-link>
</el-space> </el-space>
...@@ -76,17 +84,17 @@ const listOptions = { ...@@ -76,17 +84,17 @@ const listOptions = {
<!-- 卡片 --> <!-- 卡片 -->
<template #body="{ data }" v-if="isCard"> <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> <CardListItem v-for="(item, index) in data" :data="item" :key="index"></CardListItem>
</div> </div>
<!-- <div class="resource-video-item" v-for="item in data" :key="item.id">{{ item.title }}</div> --> <el-empty v-else description="description" />
</template> </template>
</AppList> </AppList>
</AppCard> </AppCard>
</template> </template>
<style lang="scss"> <style lang="scss">
.card-list{ .card-list {
background: #FAFAFA; background: #fafafa;
padding: 20px; padding: 20px;
display: flex; display: flex;
} }
......
...@@ -7,8 +7,8 @@ export function getVideoList(params?: { type?: string; page?: number; page_size? ...@@ -7,8 +7,8 @@ export function getVideoList(params?: { type?: string; page?: number; page_size?
// 获取字典列表 // 获取字典列表
export function getDictionaryList(params?: { export function getDictionaryList(params?: {
name?: string name?: string
key?: number key?: string
status?: boolean status?: string
created_time_start?: string created_time_start?: string
created_time_end?: string created_time_end?: string
page?: number page?: number
......
...@@ -18,6 +18,7 @@ const listOptions = $computed(() => { ...@@ -18,6 +18,7 @@ const listOptions = $computed(() => {
remote: { remote: {
httpRequest: getDictionaryList, httpRequest: getDictionaryList,
params: { params: {
status: '',
type: '', type: '',
created_time_start: '', created_time_start: '',
created_time_end: '' created_time_end: ''
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论