Skip to content

C
center-resource
提交 66db47db authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

feat: 持久化卡片列表切换状态并优化卡片栅格布局

上级 55d41116
显示空白字符变更
内嵌 并排
正在显示 包含 96 行增加 和 98 行删除
src/components/base/CardListItem.vue
浏览文件 @ 66db47db
......@@ -63,11 +63,8 @@ const bytesToSize = (bytes: number) => {
</template>
<style lang="scss" scoped>
.card-item {
width: 17%;
border-radius: 6px;
overflow: hidden;
margin-right: 20px;
margin-bottom: 20px;
box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
background: #fff;
.card-item-top {
......
src/modules/course/create/components/stepTwoComponents/AddVideoDialog.vue
浏览文件 @ 66db47db
<script setup lang="ts">
import { useStorage } from '@vueuse/core'
import { getVideoList, createCharacter, getCourseListSearch, getLessonList, getOtherList } from '../../api'
import CardListItem from './CardListItem.vue'
import { useGetCategoryList } from '@/composables/useGetCategoryList'
......@@ -11,30 +12,30 @@ const path = ref('')
let tableData: any = $ref({
list: [],
title: '',
total: ''
total: '',
})
const emit = defineEmits<Emits>()
const props = defineProps({
isShowAddDialog: {
type: Boolean,
required: true
required: true,
},
course_id: {
type: String,
required: true
required: true,
},
chapterName: {
type: String,
required: true
required: true,
},
chapterID: {
type: String,
required: true
required: true,
},
btnInfo: {
type: Object,
required: true
}
required: true,
},
})
interface Emits {
(e: 'update:isShowAddDialog', isShowVideoDialog: boolean): void
......@@ -45,7 +46,7 @@ let { list: selectTree }: any = useGetCategoryList()
const defaultProps = {
children: 'children',
label: 'category_name',
value: 'id'
value: 'id',
}
const typeFilter = () => {
appList.value.refetch()
......@@ -77,11 +78,11 @@ const listOptions = computed(() => {
tableData = data
return { list: data.list, total: data.total }
},
params: { tab: tabValue, status: '1', authorized: '', name: '', course_id: props.course_id || '' }
params: { tab: tabValue, status: '1', authorized: '', name: '', course_id: props.course_id || '' },
},
filters: [
{ prop: 'classification', label: '类别：', slots: 'filter-type' },
{ type: 'input', prop: 'name', label: '标题：' }
{ type: 'input', prop: 'name', label: '标题：' },
],
columns: [
{ type: 'selection' },
......@@ -91,7 +92,7 @@ const listOptions = computed(() => {
align: 'center',
computed({ row }: any) {
return row.name?.length > 10 ? `${row.name.slice(0, 10)}...` : row.name
}
},
},
{ label: '视频分类', prop: 'classification_name', align: 'center' },
{ label: '知识点', prop: 'knowledge_points', align: 'center' },
......@@ -100,9 +101,9 @@ const listOptions = computed(() => {
{ 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: '更新日期', prop: 'updated_time', align: 'center' },
],
data: tableData.list
data: tableData.list,
}
})
// tab切换
......@@ -124,7 +125,7 @@ const handleAdd = (val: any) => {
course_id: props.course_id,
resource_type: props.btnInfo.resource_type,
parent_id: props.chapterID,
resource_id: val.id
resource_id: val.id,
}
createCharacter(params).then(() => {
emit('update:isShowAddDialog', false)
......@@ -189,7 +190,7 @@ const addRequest = function (item: any, index: number, data: any) {
course_id: props.course_id,
resource_type: props.btnInfo.resource_type,
parent_id: props.chapterID,
resource_id: item.id
resource_id: item.id,
}
createCharacter(params).then(() => {
if (index === data.length - 1) {
......@@ -202,9 +203,9 @@ const addRequest = function (item: any, index: number, data: any) {
}
// 列表切换
let isCard = $ref(true)
const isCard = useStorage('isCard', true)
const changeCard = () => {
isCard = !isCard
isCard.value = !isCard.value
}
let checkBox = $ref([])
......@@ -225,8 +226,7 @@ const addVideoList = function () {
draggable
:before-close="handleCancel"
size="60%"
:title="`添加${props.btnInfo.btn_name}`"
>
:title="`添加${props.btnInfo.btn_name}`">
<div class="video-head">
<el-tabs @tab-change="tabChange" v-model="tabValue">
<el-tab-pane label="我的资源" name="1"></el-tab-pane>
......@@ -251,8 +251,7 @@ const addVideoList = function () {
display: block;
height: 83px;
background-size: cover;
background-image: url(${row.cover});`"
></div>
background-image: url(${row.cover});`"></div>
</div>
</template>
<template #filter-type="{ params }">
......@@ -263,8 +262,7 @@ const addVideoList = function () {
:props="defaultProps"
v-model="params.classification"
:data="selectTree"
:default-expanded-keys="selectTree.length ? [selectTree[0]?.id] : []"
/>
:default-expanded-keys="selectTree.length ? [selectTree[0]?.id] : []" />
</template>
<template #body="{ data }" v-if="isCard">
<div class="card-list" v-if="data.length">
......@@ -279,8 +277,7 @@ const addVideoList = function () {
:tabIndex="tabValue"
:data="item"
:path="path"
@add="handleAdd"
>
@add="handleAdd">
<el-checkbox @change="checkboxSelect" v-model="item.check_status"></el-checkbox>
</CardListItem>
</div>
......@@ -298,8 +295,9 @@ const addVideoList = function () {
.card-list-con {
background: #fafafa;
padding: 20px;
display: flex;
flex-wrap: wrap;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 20px;
}
.video-head {
position: relative;
......
src/modules/course/create/components/stepTwoComponents/CardListItem.vue
浏览文件 @ 66db47db
......@@ -70,11 +70,8 @@ const bytesToSize = (bytes: number) => {
</template>
<style lang="scss" scoped>
.card-item {
width: 265px;
border-radius: 6px;
overflow: hidden;
margin-right: 20px;
margin-bottom: 20px;
.card-item-top {
background: rgba(204, 204, 204, 0.5);
......
src/modules/course/my/components/CardListItem.vue
浏览文件 @ 66db47db
......@@ -57,11 +57,9 @@ const copyCourse = () => {
</template>
<style lang="scss" scoped>
.card-item {
width: 17%;
background-color: #fff;
border-radius: 6px;
overflow: hidden;
margin-right: 20px;
margin-bottom: 20px;
.card-item-top {
height: 170px;
position: relative;
......
src/modules/course/my/views/List.vue
浏览文件 @ 66db47db
<script setup lang="ts">
import { useStorage } from '@vueuse/core'
import { getCourseList } from '../api'
import CardListItem from '../components/CardListItem.vue'
import { PictureFilled } from '@element-plus/icons-vue'
......@@ -23,7 +24,7 @@ const tabChange = () => {
}
// 列表切换
let isCard = $ref(true)
const isCard = useStorage('isCard', true)
// table 数据
const listOptions = computed(() => {
......@@ -34,7 +35,7 @@ const listOptions = computed(() => {
align: 'center',
computed({ row }: any) {
return row.name?.length > 10 ? `${row.name.slice(0, 10)}...` : row.name
}
},
},
{ label: '课程分类', prop: 'classification_name', align: 'center' },
{ label: '封面', slots: 'table-cover', width: 150, align: 'center' },
......@@ -43,7 +44,7 @@ const listOptions = computed(() => {
{ 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, fixed: 'right' }
{ label: '操作', slots: 'table-operate', align: 'center', width: 200, fixed: 'right' },
]
if (tabValue.value === '2') {
columns.splice(2, 0, { label: '部门共享', prop: 'department_public_name', align: 'center' })
......@@ -54,16 +55,16 @@ const listOptions = computed(() => {
return {
remote: {
httpRequest: getCourseList,
params: { tab: tabValue, status: '', authorized: '', name: '' }
params: { tab: tabValue, status: '', authorized: '', name: '' },
},
filters: [
{ type: 'input', prop: 'name', label: '名称：' },
{
prop: 'authorized',
slots: 'filter-department'
}
slots: 'filter-department',
},
],
columns
columns,
}
})
......@@ -72,7 +73,7 @@ const typeFilter = () => {
}
const changeCard = () => {
isCard = !isCard
isCard.value = !isCard.value
}
</script>
......@@ -144,9 +145,10 @@ const changeCard = () => {
<style lang="scss" scoped>
.card-list {
background: #fafafa;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 20px;
padding: 20px;
display: flex;
flex-wrap: wrap;
}
.video-head {
position: relative;
......
src/modules/resource/courseware/views/List.vue
浏览文件 @ 66db47db
<script setup lang="ts">
import { useStorage } from '@vueuse/core'
import { getCourseList } from '../api'
import CardListItem from '@/components/base/CardListItem.vue'
import { useMapStore } from '@/stores/map'
......@@ -20,15 +21,15 @@ let { list: selectTree }: any = useGetCategoryList()
const defaultProps = {
children: 'children',
label: 'category_name',
value: 'id'
value: 'id',
}
const appList = ref()
// 列表切换
let isCard = $ref(true)
const isCard = useStorage('isCard', true)
const changeCard = () => {
isCard = !isCard
isCard.value = !isCard.value
}
// 资源出处 tab触发
......@@ -45,7 +46,7 @@ const listOptions = $computed(() => {
align: 'center',
computed({ row }: any) {
return row.name?.length > 10 ? `${row.name.slice(0, 10)}...` : row.name
}
},
},
{ label: '课件分类', prop: 'classification_name', align: 'center' },
{ label: '知识点', prop: 'knowledge_points', align: 'center' },
......@@ -54,7 +55,7 @@ const listOptions = $computed(() => {
{ 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, fixed: 'right' }
{ label: '操作', slots: 'table-operate', align: 'center', width: 200, fixed: 'right' },
]
if (tabValue.value === '2') {
columns.splice(2, 0, { label: '部门共享', prop: 'department_public_name', align: 'center' })
......@@ -65,23 +66,23 @@ const listOptions = $computed(() => {
return {
remote: {
httpRequest: getCourseList,
params: { tab: tabValue, status: '', authorized: '', name: '' }
params: { tab: tabValue, status: '', authorized: '', name: '' },
},
filters: [
{
type: 'select',
prop: 'status',
label: '状态：',
options: store.getMapValuesByKey('system_status')
options: store.getMapValuesByKey('system_status'),
},
{ prop: 'classification', label: '类别：', slots: 'filter-type' },
{ type: 'input', prop: 'name', label: '标题：' },
{
prop: 'authorized',
slots: 'filter-department'
}
slots: 'filter-department',
},
],
columns
columns,
}
})
......@@ -159,9 +160,10 @@ const typeFilter = () => {
<style lang="scss" scoped>
.card-list {
background: #fafafa;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 20px;
padding: 20px;
display: flex;
flex-wrap: wrap;
}
.video-head {
position: relative;
......
src/modules/resource/lessonplan/views/List.vue
浏览文件 @ 66db47db
<script setup lang="ts">
import { useStorage } from '@vueuse/core'
import { getLessonList } from '../api'
import CardListItem from '@/components/base/CardListItem.vue'
import { useMapStore } from '@/stores/map'
......@@ -15,9 +16,9 @@ const store = useMapStore()
const appList = ref()
// 列表切换
let isCard = $ref(true)
const isCard = useStorage('isCard', true)
const changeCard = () => {
isCard = !isCard
isCard.value = !isCard.value
}
// 筛选部门列表
......@@ -28,7 +29,7 @@ let { list: selectTree }: any = useGetCategoryList()
const defaultProps = {
children: 'children',
label: 'category_name',
value: 'id'
value: 'id',
}
// 资源出处 tab触发
......@@ -45,7 +46,7 @@ const listOptions = $computed(() => {
align: 'center',
computed({ row }: any) {
return row.name?.length > 10 ? `${row.name.slice(0, 10)}...` : row.name
}
},
},
{ label: '教案分类', prop: 'classification_name', align: 'center' },
{ label: '知识点', prop: 'knowledge_points', align: 'center' },
......@@ -54,7 +55,7 @@ const listOptions = $computed(() => {
{ 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, fixed: 'right' }
{ label: '操作', slots: 'table-operate', align: 'center', width: 200, fixed: 'right' },
]
if (tabValue.value === '2') {
columns.splice(2, 0, { label: '部门共享', prop: 'department_public_name', align: 'center' })
......@@ -65,23 +66,23 @@ const listOptions = $computed(() => {
return {
remote: {
httpRequest: getLessonList,
params: { tab: tabValue, status: '', authorized: '', name: '' }
params: { tab: tabValue, status: '', authorized: '', name: '' },
},
filters: [
{
type: 'select',
prop: 'status',
label: '状态：',
options: store.getMapValuesByKey('system_status')
options: store.getMapValuesByKey('system_status'),
},
{ prop: 'classification', label: '类别：', slots: 'filter-type' },
{ type: 'input', prop: 'name', label: '标题：' },
{
prop: 'authorized',
slots: 'filter-department'
}
slots: 'filter-department',
},
],
columns
columns,
}
})
......@@ -159,9 +160,10 @@ const typeFilter = () => {
<style lang="scss" scoped>
.card-list {
background: #fafafa;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 20px;
padding: 20px;
display: flex;
flex-wrap: wrap;
}
.video-head {
position: relative;
......
src/modules/resource/other/views/List.vue
浏览文件 @ 66db47db
<script setup lang="ts">
import { useStorage } from '@vueuse/core'
import { getOtherList } from '../api'
import CardListItem from '@/components/base/CardListItem.vue'
import { useMapStore } from '@/stores/map'
......@@ -16,9 +17,9 @@ const store = useMapStore()
const appList = ref()
// 列表切换
let isCard = $ref(true)
const isCard = useStorage('isCard', true)
const changeCard = () => {
isCard = !isCard
isCard.value = !isCard.value
}
// 资源出处 tab触发
......@@ -35,7 +36,7 @@ let { list: selectTree }: any = useGetCategoryList()
const defaultProps = {
children: 'children',
label: 'category_name',
value: 'id'
value: 'id',
}
const listOptions = $computed(() => {
......@@ -46,7 +47,7 @@ const listOptions = $computed(() => {
align: 'center',
computed({ row }: any) {
return row.name?.length > 10 ? `${row.name.slice(0, 10)}...` : row.name
}
},
},
{ label: '课件分类', prop: 'classification_name', align: 'center' },
{ label: '知识点', prop: 'knowledge_points', align: 'center' },
......@@ -55,7 +56,7 @@ const listOptions = $computed(() => {
{ 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, fixed: 'right' }
{ label: '操作', slots: 'table-operate', align: 'center', width: 200, fixed: 'right' },
]
if (tabValue.value === '2') {
columns.splice(2, 0, { label: '部门共享', prop: 'department_public_name', align: 'center' })
......@@ -66,23 +67,23 @@ const listOptions = $computed(() => {
return {
remote: {
httpRequest: getOtherList,
params: { tab: tabValue, status: '', authorized: '', name: '' }
params: { tab: tabValue, status: '', authorized: '', name: '' },
},
filters: [
{
type: 'select',
prop: 'status',
label: '状态：',
options: store.getMapValuesByKey('system_status')
options: store.getMapValuesByKey('system_status'),
},
{ prop: 'classification', label: '类别：', slots: 'filter-type' },
{ type: 'input', prop: 'name', label: '标题：' },
{
prop: 'authorized',
slots: 'filter-department'
}
slots: 'filter-department',
},
],
columns
columns,
}
})
......@@ -160,9 +161,10 @@ const typeFilter = () => {
<style lang="scss" scoped>
.card-list {
background: #fafafa;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 20px;
padding: 20px;
display: flex;
flex-wrap: wrap;
}
.video-head {
position: relative;
......
src/modules/resource/video/components/CardListItem.vue
浏览文件 @ 66db47db
......@@ -44,11 +44,9 @@ const props: any = defineProps<{ data: object; tabIndex: string }>()
</template>
<style lang="scss" scoped>
.card-item {
width: 18%;
background: #fff;
border-radius: 6px;
overflow: hidden;
margin-right: 10px;
margin-bottom: 20px;
.card-item-top {
height: 170px;
position: relative;
......
src/modules/resource/video/views/List.vue
浏览文件 @ 66db47db
<script setup lang="ts">
import { useStorage } from '@vueuse/core'
import { getVideoList } from '../api'
import CardListItem from '../components/CardListItem.vue'
import { PictureFilled } from '@element-plus/icons-vue'
......@@ -24,7 +25,7 @@ let { list: selectTree }: any = useGetCategoryList()
const defaultProps = {
children: 'children',
label: 'category_name',
value: 'id'
value: 'id',
}
// 资源出处 tab触发
const tabValue = ref('1')
......@@ -34,7 +35,7 @@ const tabChange = () => {
appList.value.refetch()
}
// 列表切换
let isCard = $ref(true)
const isCard = useStorage('isCard', true)
// table 数据
const listOptions = $computed(() => {
const columns = [
......@@ -44,7 +45,7 @@ const listOptions = $computed(() => {
align: 'center',
computed({ row }: any) {
return row.name?.length > 10 ? `${row.name.slice(0, 10)}...` : row.name
}
},
},
{ label: '视频分类', prop: 'classification_name', align: 'center' },
{ label: '知识点', prop: 'knowledge_points', align: 'center' },
......@@ -54,7 +55,7 @@ const listOptions = $computed(() => {
{ 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, fixed: 'right' }
{ label: '操作', slots: 'table-operate', align: 'center', width: 200, fixed: 'right' },
]
if (tabValue.value === '2') {
columns.splice(2, 0, { label: '部门共享', prop: 'department_public_name', align: 'center' })
......@@ -65,23 +66,23 @@ const listOptions = $computed(() => {
return {
remote: {
httpRequest: getVideoList,
params: { tab: tabValue, status: '', authorized: '', name: '' }
params: { tab: tabValue, status: '', authorized: '', name: '' },
},
filters: [
{
type: 'select',
prop: 'status',
label: '状态：',
options: store.getMapValuesByKey('system_status')
options: store.getMapValuesByKey('system_status'),
},
{ prop: 'classification', label: '类别：', slots: 'filter-type' },
{ type: 'input', prop: 'name', label: '标题：' },
{
prop: 'authorized',
slots: 'filter-department'
}
slots: 'filter-department',
},
],
columns
columns,
}
})
......@@ -90,7 +91,7 @@ const typeFilter = () => {
}
const changeCard = () => {
isCard = !isCard
isCard.value = !isCard.value
}
// 批量上传
const handleBatchImport = () => {
......@@ -182,9 +183,10 @@ const handleBatchImport = () => {
<style lang="scss" scoped>
.card-list {
background: #fafafa;
display: flex;
flex-wrap: wrap;
padding: 20px 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 20px;
padding: 20px;
}
.video-head {
position: relative;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论