提交 36e3fece authored 作者: lihuihui's avatar lihuihui

修改bug

上级 3b8f9f17
<script setup lang="ts"> <script setup lang="ts">
import { Files } from '@element-plus/icons-vue' import { Files } from '@element-plus/icons-vue'
const props: any = defineProps<{ data: object; path: string; permission?: { edit: string; view: string } }>() const props: any = defineProps<{ data: object; path: string; permission?: { edit: string; view: string }, tabIndex: string }>()
const fileType = ['doc', 'docx', 'xls', 'xlsx', 'pdf', 'ppt', 'pptx', 'mp3', 'mp4', 'png', 'jpeg', 'jpg'] const fileType = ['doc', 'docx', 'xls', 'xlsx', 'pdf', 'ppt', 'pptx', 'mp3', 'mp4', 'png', 'jpeg', 'jpg']
</script> </script>
...@@ -36,7 +36,8 @@ const fileType = ['doc', 'docx', 'xls', 'xlsx', 'pdf', 'ppt', 'pptx', 'mp3', 'mp ...@@ -36,7 +36,8 @@ const fileType = ['doc', 'docx', 'xls', 'xlsx', 'pdf', 'ppt', 'pptx', 'mp3', 'mp
</div> </div>
<div class="item-b"> <div class="item-b">
<div class="time">{{ props.data.updated_time }}</div> <div class="time">{{ props.data.updated_time }}</div>
<!-- <div class="tag">新建</div> --> <div class="tag" v-if="tabIndex === '2'">{{ props.data.department_public_name }}</div>
<div class="tag" v-if="tabIndex === '3'">{{ props.data.platform_public_name }}</div>
</div> </div>
</div> </div>
</div> </div>
......
...@@ -17,57 +17,71 @@ const props = defineProps({ ...@@ -17,57 +17,71 @@ const props = defineProps({
<!-- <img src="https://iph.href.lu/211x146"> --> <!-- <img src="https://iph.href.lu/211x146"> -->
</div> </div>
<div class="info-items"> <div class="info-items">
<div class="i-items"> <div class="flex-box">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon1.png" class="icons" /> <div class="i-items">
<div class="text-box"> <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon1.png" class="icons" />
<div class="name">状态</div> <div class="text-box">
<div class="value active">{{ props.data?.status_name }}</div> <div class="name">状态</div>
<div class="value active">{{ props.data?.status_name }}</div>
</div>
</div> </div>
</div> <div class="i-items">
<div class="i-items"> <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon12.png" class="icons" />
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon12.png" class="icons" /> <div class="text-box">
<div class="text-box"> <div class="name">创建者</div>
<div class="name">创建者</div> <div class="value">{{ props.data?.created_operator_name }}</div>
<div class="value">{{ props.data?.created_operator_name }}</div> </div>
</div> </div>
</div> <div class="i-items">
<div class="i-items"> <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon3.png" class="icons" />
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon3.png" class="icons" /> <div class="text-box">
<div class="text-box"> <div class="name">创建时间</div>
<div class="name">创建时间</div> <div class="value">{{ props.data?.created_time }}</div>
<div class="value">{{ props.data?.created_time }}</div> </div>
</div> </div>
</div> </div>
<div class="i-items"> <div class="flex-box">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon4.png" class="icons" /> <div class="i-items">
<div class="text-box"> <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon4.png" class="icons" />
<div class="name">更新时间</div> <div class="text-box">
<div class="value">{{ props.data?.updated_time }}</div> <div class="name">更新时间</div>
<div class="value">{{ props.data?.updated_time }}</div>
</div>
</div> </div>
</div> <div class="i-items">
<div class="i-items"> <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon5.png" class="icons" />
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon5.png" class="icons" /> <div class="text-box">
<div class="text-box"> <div class="name">课件名称</div>
<div class="name">课件名称</div> <div class="value">{{ props.data?.name }}</div>
<div class="value">{{ props.data?.name }}</div> </div>
</div> </div>
</div> <div class="i-items">
<div class="i-items"> <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon6.png" class="icons">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon6.png" class="icons" /> <div class="text-box">
<div class="text-box"> <div class="name">负责人</div>
<div class="name">课件分类</div> <div class="value">{{ props.data?.belong_operator_name }}</div>
<div class="value">{{ props.data?.classification_name || '暂无' }}</div> </div>
</div> </div>
</div> </div>
<div class="i-items" style="align-items: flex-start"> <div class="flex-box">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon8.png" class="icons" /> <div class="i-items">
<div class="text-box"> <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon6.png" class="icons" />
<div class="name">知识点</div> <div class="text-box">
<div class="value">{{ props.data?.knowledge_points || '暂无' }}</div> <div class="name">课件分类</div>
<!-- <div class="textarea-box" style="min-width:500px;"> <div class="value">{{ props.data?.classification_name || '暂无' }}</div>
{{ props.data?.knowledge_points || '暂无' }} </div>
</div> -->
</div> </div>
<div class="i-items" style="align-items: flex-start">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon8.png" class="icons" />
<div class="text-box">
<div class="name">知识点</div>
<div class="value">{{ props.data?.knowledge_points || '暂无' }}</div>
<!-- <div class="textarea-box" style="min-width:500px;">
{{ props.data?.knowledge_points || '暂无' }}
</div> -->
</div>
</div>
<div class="i-items"></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -94,10 +108,16 @@ const props = defineProps({ ...@@ -94,10 +108,16 @@ const props = defineProps({
} }
} }
.info-items { .info-items {
display: flex; // display: flex;
flex-wrap: wrap; // flex-wrap: wrap;
flex: 1;
padding-left: 12px; padding-left: 12px;
.i-items { .flex-box{
display: flex;
justify-content: flex-start;
}
.i-items{
width: 30%;
display: flex; display: flex;
align-items: center; align-items: center;
height: fit-content; height: fit-content;
......
...@@ -34,6 +34,30 @@ const tabChange = () => { ...@@ -34,6 +34,30 @@ const tabChange = () => {
} }
const listOptions = $computed(() => { const listOptions = $computed(() => {
const columns = [
{
label: '课件标题',
prop: 'name',
align: 'center',
computed: (row: any) => {
return row.row.name.length > 10 ? `${row.row.name.slice(0, 10)}...` : row.row.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 }
]
if (tabValue.value === '2') {
columns.splice(2, 0, { label: '部门共享', prop: 'department_public_name', align: 'center' })
}
if (tabValue.value === '3') {
columns.splice(2, 0, { label: '平台共享', prop: 'platform_public_name', align: 'center' })
}
return { return {
remote: { remote: {
httpRequest: getCourseList, httpRequest: getCourseList,
...@@ -53,24 +77,7 @@ const listOptions = $computed(() => { ...@@ -53,24 +77,7 @@ const listOptions = $computed(() => {
slots: 'filter-department' slots: 'filter-department'
} }
], ],
columns: [ columns
{
label: '课件标题',
prop: 'name',
align: 'center',
computed: (row: any) => {
return row.row.name.length > 10 ? `${row.row.name.slice(0, 10)}...` : row.row.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 }
]
} }
}) })
...@@ -131,6 +138,7 @@ const typeFilter = () => { ...@@ -131,6 +138,7 @@ const typeFilter = () => {
v-for="(item, index) in data" v-for="(item, index) in data"
:data="item" :data="item"
:key="index" :key="index"
:tabIndex="tabValue"
></CardListItem> ></CardListItem>
</div> </div>
<el-empty v-else description="暂无数据" /> <el-empty v-else description="暂无数据" />
......
...@@ -66,11 +66,16 @@ const rules = { ...@@ -66,11 +66,16 @@ const rules = {
} }
// 新建编辑表单提交 // 新建编辑表单提交
const ruleFormRef = ref<FormInstance>() const ruleFormRef = ref<FormInstance>()
let submitFlag = true
const submitForm = async (formEl: FormInstance | undefined) => { const submitForm = async (formEl: FormInstance | undefined) => {
if (!formEl) return if (!formEl) return
if (!submitFlag) return
submitFlag = false
await formEl.validate(valid => { await formEl.validate(valid => {
if (valid) { if (valid) {
if (!protocol.value) { if (!protocol.value) {
submitFlag = true
ElMessage('请勾选用户协议') ElMessage('请勾选用户协议')
return return
} }
...@@ -88,6 +93,7 @@ const submitForm = async (formEl: FormInstance | undefined) => { ...@@ -88,6 +93,7 @@ const submitForm = async (formEl: FormInstance | undefined) => {
createResources(params) createResources(params)
} }
} else { } else {
submitFlag = true
ElMessage('请完善信息') ElMessage('请完善信息')
} }
}) })
...@@ -95,30 +101,42 @@ const submitForm = async (formEl: FormInstance | undefined) => { ...@@ -95,30 +101,42 @@ const submitForm = async (formEl: FormInstance | undefined) => {
// 更新 // 更新
const updateResources = (params: any) => { const updateResources = (params: any) => {
updateCourse(params).then((res: any) => { updateCourse(params)
if (res.code === 0) { .then((res: any) => {
ElMessage({ message: '更新成功', type: 'success' }) if (res.code === 0) {
setTimeout(() => { ElMessage({ message: '更新成功', type: 'success' })
router.push({ setTimeout(() => {
path: '/resource/courseware' router.push({
}) path: '/resource/courseware'
}, 1000) })
} }, 1000)
}) } else {
submitFlag = true
}
})
.catch(() => {
submitFlag = true
})
} }
// 新建 // 新建
const createResources = (params: any) => { const createResources = (params: any) => {
createCourse(params).then((res: any) => { createCourse(params)
if (res.code === 0) { .then((res: any) => {
ElMessage({ message: '创建成功', type: 'success' }) if (res.code === 0) {
setTimeout(() => { ElMessage({ message: '创建成功', type: 'success' })
router.push({ setTimeout(() => {
path: '/resource/courseware' router.push({
}) path: '/resource/courseware'
}, 1000) })
} }, 1000)
}) } else {
submitFlag = true
}
})
.catch(() => {
submitFlag = true
})
} }
// 协议 // 协议
...@@ -144,6 +162,7 @@ const protocol = ref(false) ...@@ -144,6 +162,7 @@ const protocol = ref(false)
</el-form-item> </el-form-item>
<el-form-item label="课件分类:" prop="classification"> <el-form-item label="课件分类:" prop="classification">
<el-tree-select <el-tree-select
:render-after-expand="false"
style="width: 100%" style="width: 100%"
:props="defaultProps" :props="defaultProps"
v-model="form.classification" v-model="form.classification"
......
...@@ -17,57 +17,71 @@ const props = defineProps({ ...@@ -17,57 +17,71 @@ const props = defineProps({
<!-- <img src="https://iph.href.lu/211x146"> --> <!-- <img src="https://iph.href.lu/211x146"> -->
</div> </div>
<div class="info-items"> <div class="info-items">
<div class="i-items"> <div class="flex-box">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon1.png" class="icons" /> <div class="i-items">
<div class="text-box"> <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon1.png" class="icons" />
<div class="name">状态</div> <div class="text-box">
<div class="value active">{{ props.data?.status_name }}</div> <div class="name">状态</div>
<div class="value active">{{ props.data?.status_name }}</div>
</div>
</div> </div>
</div> <div class="i-items">
<div class="i-items"> <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon12.png" class="icons" />
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon12.png" class="icons" /> <div class="text-box">
<div class="text-box"> <div class="name">创建者</div>
<div class="name">创建者</div> <div class="value">{{ props.data?.created_operator_name }}</div>
<div class="value">{{ props.data?.created_operator_name }}</div> </div>
</div> </div>
</div> <div class="i-items">
<div class="i-items"> <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon3.png" class="icons" />
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon3.png" class="icons" /> <div class="text-box">
<div class="text-box"> <div class="name">创建时间</div>
<div class="name">创建时间</div> <div class="value">{{ props.data?.created_time }}</div>
<div class="value">{{ props.data?.created_time }}</div> </div>
</div> </div>
</div> </div>
<div class="i-items"> <div class="flex-box">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon4.png" class="icons" /> <div class="i-items">
<div class="text-box"> <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon4.png" class="icons" />
<div class="name">更新时间</div> <div class="text-box">
<div class="value">{{ props.data?.updated_time }}</div> <div class="name">更新时间</div>
<div class="value">{{ props.data?.updated_time }}</div>
</div>
</div> </div>
</div> <div class="i-items">
<div class="i-items"> <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon5.png" class="icons" />
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon5.png" class="icons" /> <div class="text-box">
<div class="text-box"> <div class="name">教案名称</div>
<div class="name">教案名称</div> <div class="value">{{ props.data?.name }}</div>
<div class="value">{{ props.data?.name }}</div> </div>
</div> </div>
</div> <div class="i-items">
<div class="i-items"> <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon6.png" class="icons">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon6.png" class="icons" /> <div class="text-box">
<div class="text-box"> <div class="name">负责人</div>
<div class="name">教案分类</div> <div class="value">{{ props.data?.belong_operator_name }}</div>
<div class="value">{{ props.data?.classification_name || '暂无' }}</div> </div>
</div> </div>
</div> </div>
<div class="i-items" style="align-items: flex-start;"> <div class="flex-box">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon8.png" class="icons" /> <div class="i-items">
<div class="text-box"> <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon6.png" class="icons" />
<div class="name">知识点</div> <div class="text-box">
<div class="value">{{ props.data?.knowledge_points || '暂无' }}</div> <div class="name">教案分类</div>
<!-- <div class="textarea-box" style="min-width:500px;"> <div class="value">{{ props.data?.classification_name || '暂无' }}</div>
{{ props.data?.knowledge_points || '暂无' }} </div>
</div> -->
</div> </div>
<div class="i-items" style="align-items: flex-start;">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon8.png" class="icons" />
<div class="text-box">
<div class="name">知识点</div>
<div class="value">{{ props.data?.knowledge_points || '暂无' }}</div>
<!-- <div class="textarea-box" style="min-width:500px;">
{{ props.data?.knowledge_points || '暂无' }}
</div> -->
</div>
</div>
<div class="i-items"></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -94,10 +108,16 @@ const props = defineProps({ ...@@ -94,10 +108,16 @@ const props = defineProps({
} }
} }
.info-items { .info-items {
display: flex; // display: flex;
flex-wrap: wrap; // flex-wrap: wrap;
padding-left: 12px; padding-left: 12px;
.i-items { flex: 1;
.flex-box{
display: flex;
justify-content: flex-start;
}
.i-items{
width: 30%;
display: flex; display: flex;
align-items: center; align-items: center;
height: fit-content; height: fit-content;
......
...@@ -34,6 +34,30 @@ const tabChange = () => { ...@@ -34,6 +34,30 @@ const tabChange = () => {
} }
const listOptions = $computed(() => { const listOptions = $computed(() => {
const columns = [
{
label: '教案标题',
prop: 'name',
align: 'center',
computed: (row: any) => {
return row.row.name.length > 10 ? `${row.row.name.slice(0, 10)}...` : row.row.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 }
]
if (tabValue.value === '2') {
columns.splice(2, 0, { label: '部门共享', prop: 'department_public_name', align: 'center' })
}
if (tabValue.value === '3') {
columns.splice(2, 0, { label: '平台共享', prop: 'platform_public_name', align: 'center' })
}
return { return {
remote: { remote: {
httpRequest: getLessonList, httpRequest: getLessonList,
...@@ -53,24 +77,7 @@ const listOptions = $computed(() => { ...@@ -53,24 +77,7 @@ const listOptions = $computed(() => {
slots: 'filter-department' slots: 'filter-department'
} }
], ],
columns: [ columns
{
label: '教案标题',
prop: 'name',
align: 'center',
computed: (row: any) => {
return row.row.name.length > 10 ? `${row.row.name.slice(0, 10)}...` : row.row.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 }
]
} }
}) })
...@@ -126,6 +133,7 @@ const typeFilter = () => { ...@@ -126,6 +133,7 @@ const typeFilter = () => {
<template #body="{ data }" v-if="isCard"> <template #body="{ data }" v-if="isCard">
<div class="card-list" v-if="data.length"> <div class="card-list" v-if="data.length">
<CardListItem <CardListItem
:tabIndex="tabValue"
:permission="{ edit: 'v1-resource-lesson-plan-update', view: 'v1-resource-lesson-plan-view' }" :permission="{ edit: 'v1-resource-lesson-plan-update', view: 'v1-resource-lesson-plan-view' }"
path="/resource/lessonplan" path="/resource/lessonplan"
v-for="(item, index) in data" v-for="(item, index) in data"
......
...@@ -66,11 +66,15 @@ const rules = { ...@@ -66,11 +66,15 @@ const rules = {
} }
// 新建编辑表单提交 // 新建编辑表单提交
const ruleFormRef = ref<FormInstance>() const ruleFormRef = ref<FormInstance>()
let submitFlag = true
const submitForm = async (formEl: FormInstance | undefined) => { const submitForm = async (formEl: FormInstance | undefined) => {
if (!submitFlag) return
submitFlag = false
if (!formEl) return if (!formEl) return
await formEl.validate(valid => { await formEl.validate(valid => {
if (valid) { if (valid) {
if (!protocol.value) { if (!protocol.value) {
submitFlag = true
ElMessage('请勾选用户协议') ElMessage('请勾选用户协议')
return return
} }
...@@ -88,6 +92,7 @@ const submitForm = async (formEl: FormInstance | undefined) => { ...@@ -88,6 +92,7 @@ const submitForm = async (formEl: FormInstance | undefined) => {
createResources(params) createResources(params)
} }
} else { } else {
submitFlag = true
ElMessage('请完善信息') ElMessage('请完善信息')
} }
}) })
...@@ -95,30 +100,42 @@ const submitForm = async (formEl: FormInstance | undefined) => { ...@@ -95,30 +100,42 @@ const submitForm = async (formEl: FormInstance | undefined) => {
// 更新 // 更新
const updateResources = (params: any) => { const updateResources = (params: any) => {
updateLessonPlan(params).then((res: any) => { updateLessonPlan(params)
if (res.code === 0) { .then((res: any) => {
ElMessage({ message: '更新成功', type: 'success' }) if (res.code === 0) {
setTimeout(() => { ElMessage({ message: '更新成功', type: 'success' })
router.push({ setTimeout(() => {
path: '/resource/lessonplan' router.push({
}) path: '/resource/lessonplan'
}, 1000) })
} }, 1000)
}) } else {
submitFlag = true
}
})
.catch(() => {
submitFlag = true
})
} }
// 新建 // 新建
const createResources = (params: any) => { const createResources = (params: any) => {
createLessonPlan(params).then((res: any) => { createLessonPlan(params)
if (res.code === 0) { .then((res: any) => {
ElMessage({ message: '创建成功', type: 'success' }) if (res.code === 0) {
setTimeout(() => { ElMessage({ message: '创建成功', type: 'success' })
router.push({ setTimeout(() => {
path: '/resource/lessonplan' router.push({
}) path: '/resource/lessonplan'
}, 1000) })
} }, 1000)
}) } else {
submitFlag = true
}
})
.catch(() => {
submitFlag = true
})
} }
// 协议 // 协议
...@@ -143,7 +160,13 @@ const protocol = ref(false) ...@@ -143,7 +160,13 @@ const protocol = ref(false)
<el-input maxlength="40" v-model="form.name" /> <el-input maxlength="40" v-model="form.name" />
</el-form-item> </el-form-item>
<el-form-item label="教案分类:" prop="classification"> <el-form-item label="教案分类:" prop="classification">
<el-tree-select :props="defaultProps" style="width: 100%" v-model="form.classification" :data="selectTree" /> <el-tree-select
:render-after-expand="false"
:props="defaultProps"
style="width: 100%"
v-model="form.classification"
:data="selectTree"
/>
</el-form-item> </el-form-item>
<el-form-item label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;知识点:"> <el-form-item label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;知识点:">
<el-input <el-input
......
...@@ -17,57 +17,71 @@ const props = defineProps({ ...@@ -17,57 +17,71 @@ const props = defineProps({
<!-- <img src="https://iph.href.lu/211x146"> --> <!-- <img src="https://iph.href.lu/211x146"> -->
</div> </div>
<div class="info-items"> <div class="info-items">
<div class="i-items"> <div class="flex-box">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon1.png" class="icons" /> <div class="i-items">
<div class="text-box"> <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon1.png" class="icons" />
<div class="name">状态</div> <div class="text-box">
<div class="value active">{{ props.data?.status_name }}</div> <div class="name">状态</div>
<div class="value active">{{ props.data?.status_name }}</div>
</div>
</div> </div>
</div> <div class="i-items">
<div class="i-items"> <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon12.png" class="icons" />
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon12.png" class="icons" /> <div class="text-box">
<div class="text-box"> <div class="name">创建者</div>
<div class="name">创建者</div> <div class="value">{{ props.data?.created_operator_name }}</div>
<div class="value">{{ props.data?.created_operator_name }}</div> </div>
</div> </div>
</div> <div class="i-items">
<div class="i-items"> <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon3.png" class="icons" />
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon3.png" class="icons" /> <div class="text-box">
<div class="text-box"> <div class="name">创建时间</div>
<div class="name">创建时间</div> <div class="value">{{ props.data?.created_time }}</div>
<div class="value">{{ props.data?.created_time }}</div> </div>
</div> </div>
</div> </div>
<div class="i-items"> <div class="flex-box">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon4.png" class="icons" /> <div class="i-items">
<div class="text-box"> <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon4.png" class="icons" />
<div class="name">更新时间</div> <div class="text-box">
<div class="value">{{ props.data?.updated_time }}</div> <div class="name">更新时间</div>
<div class="value">{{ props.data?.updated_time }}</div>
</div>
</div> </div>
</div> <div class="i-items">
<div class="i-items"> <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon5.png" class="icons" />
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon5.png" class="icons" /> <div class="text-box">
<div class="text-box"> <div class="name">其他名称</div>
<div class="name">其他名称</div> <div class="value">{{ props.data?.name }}</div>
<div class="value">{{ props.data?.name }}</div> </div>
</div> </div>
</div> <div class="i-items">
<div class="i-items"> <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon6.png" class="icons">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon6.png" class="icons" /> <div class="text-box">
<div class="text-box"> <div class="name">负责人</div>
<div class="name">其他分类</div> <div class="value">{{ props.data?.belong_operator_name }}</div>
<div class="value">{{ props.data?.classification_name || '暂无' }}</div> </div>
</div> </div>
</div> </div>
<div class="i-items" style="align-items: flex-start;"> <div class="flex-box">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon8.png" class="icons" /> <div class="i-items">
<div class="text-box"> <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon6.png" class="icons" />
<div class="name">知识点</div> <div class="text-box">
<div class="value">{{ props.data?.knowledge_points || '暂无' }}</div> <div class="name">其他分类</div>
<!-- <div class="textarea-box" style="min-width:500px;"> <div class="value">{{ props.data?.classification_name || '暂无' }}</div>
{{ props.data?.knowledge_points || '暂无' }} </div>
</div> -->
</div> </div>
<div class="i-items" style="align-items: flex-start">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon8.png" class="icons" />
<div class="text-box">
<div class="name">知识点</div>
<div class="value">{{ props.data?.knowledge_points || '暂无' }}</div>
<!-- <div class="textarea-box" style="min-width:500px;">
{{ props.data?.knowledge_points || '暂无' }}
</div> -->
</div>
</div>
<div class="i-items"></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -94,10 +108,16 @@ const props = defineProps({ ...@@ -94,10 +108,16 @@ const props = defineProps({
} }
} }
.info-items { .info-items {
display: flex; // display: flex;
flex-wrap: wrap; // flex-wrap: wrap;
padding-left: 12px; padding-left: 12px;
flex: 1;
.flex-box{
display: flex;
justify-content: flex-start;
}
.i-items { .i-items {
width: 30%;
display: flex; display: flex;
align-items: center; align-items: center;
height: fit-content; height: fit-content;
......
...@@ -35,6 +35,30 @@ const defaultProps = { ...@@ -35,6 +35,30 @@ const defaultProps = {
} }
const listOptions = $computed(() => { const listOptions = $computed(() => {
const columns = [
{
label: '其他标题',
prop: 'name',
align: 'center',
computed: (row: any) => {
return row.row.name.length > 10 ? `${row.row.name.slice(0, 10)}...` : row.row.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 }
]
if (tabValue.value === '2') {
columns.splice(2, 0, { label: '部门共享', prop: 'department_public_name', align: 'center' })
}
if (tabValue.value === '3') {
columns.splice(2, 0, { label: '平台共享', prop: 'platform_public_name', align: 'center' })
}
return { return {
remote: { remote: {
httpRequest: getOtherList, httpRequest: getOtherList,
...@@ -54,24 +78,7 @@ const listOptions = $computed(() => { ...@@ -54,24 +78,7 @@ const listOptions = $computed(() => {
slots: 'filter-department' slots: 'filter-department'
} }
], ],
columns: [ columns
{
label: '其他标题',
prop: 'name',
align: 'center',
computed: (row: any) => {
return row.row.name.length > 10 ? `${row.row.name.slice(0, 10)}...` : row.row.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 }
]
} }
}) })
...@@ -127,6 +134,7 @@ const typeFilter = () => { ...@@ -127,6 +134,7 @@ const typeFilter = () => {
<template #body="{ data }" v-if="isCard"> <template #body="{ data }" v-if="isCard">
<div class="card-list" v-if="data.length"> <div class="card-list" v-if="data.length">
<CardListItem <CardListItem
:tabIndex="tabValue"
:permission="{ edit: 'v1-resource-other-information-update', view: 'v1-resource-other-information-view' }" :permission="{ edit: 'v1-resource-other-information-update', view: 'v1-resource-other-information-view' }"
path="/resource/other" path="/resource/other"
v-for="(item, index) in data" v-for="(item, index) in data"
......
...@@ -51,9 +51,12 @@ let form: any = $ref({ ...@@ -51,9 +51,12 @@ let form: any = $ref({
}) })
// 监听文件上传 // 监听文件上传
watch(() => form.file, value => { watch(
form.name = value[0]?.name || '' () => form.file,
}) value => {
form.name = value[0]?.name || ''
}
)
// 表单验证 // 表单验证
const rules = { const rules = {
...@@ -63,11 +66,15 @@ const rules = { ...@@ -63,11 +66,15 @@ const rules = {
} }
// 新建编辑表单提交 // 新建编辑表单提交
const ruleFormRef = ref<FormInstance>() const ruleFormRef = ref<FormInstance>()
let submitFlag = true
const submitForm = async (formEl: FormInstance | undefined) => { const submitForm = async (formEl: FormInstance | undefined) => {
if (!submitFlag) return
submitFlag = false
if (!formEl) return if (!formEl) return
await formEl.validate((valid) => { await formEl.validate(valid => {
if (valid) { if (valid) {
if (!protocol.value) { if (!protocol.value) {
submitFlag = true
ElMessage('请勾选用户协议') ElMessage('请勾选用户协议')
return return
} }
...@@ -85,6 +92,7 @@ const submitForm = async (formEl: FormInstance | undefined) => { ...@@ -85,6 +92,7 @@ const submitForm = async (formEl: FormInstance | undefined) => {
createResources(params) createResources(params)
} }
} else { } else {
submitFlag = true
ElMessage('请完善信息') ElMessage('请完善信息')
} }
}) })
...@@ -92,30 +100,42 @@ const submitForm = async (formEl: FormInstance | undefined) => { ...@@ -92,30 +100,42 @@ const submitForm = async (formEl: FormInstance | undefined) => {
// 更新 // 更新
const updateResources = (params: any) => { const updateResources = (params: any) => {
updateOther(params).then((res: any) => { updateOther(params)
if (res.code === 0) { .then((res: any) => {
ElMessage({ message: '更新成功', type: 'success' }) if (res.code === 0) {
setTimeout(() => { ElMessage({ message: '更新成功', type: 'success' })
router.push({ setTimeout(() => {
path: '/resource/other' router.push({
}) path: '/resource/other'
}, 1000) })
} }, 1000)
}) } else {
submitFlag = true
}
})
.catch(() => {
submitFlag = true
})
} }
// 新建 // 新建
const createResources = (params: any) => { const createResources = (params: any) => {
createOther(params).then((res: any) => { createOther(params)
if (res.code === 0) { .then((res: any) => {
ElMessage({ message: '创建成功', type: 'success' }) if (res.code === 0) {
setTimeout(() => { ElMessage({ message: '创建成功', type: 'success' })
router.push({ setTimeout(() => {
path: '/resource/other' router.push({
}) path: '/resource/other'
}, 1000) })
} }, 1000)
}) } else {
submitFlag = true
}
})
.catch(() => {
submitFlag = true
})
} }
// 协议 // 协议
...@@ -129,7 +149,11 @@ const protocol = ref(false) ...@@ -129,7 +149,11 @@ const protocol = ref(false)
<div> <div>
<div class="upload-video"> <div class="upload-video">
<div class="upload-box"> <div class="upload-box">
<AppUpload accept=".doc,.docx,.xls,.xlsx,.pdf,.ppt,.pptx,.mp3,.mp4,.png,.jpeg,.jpg" :limit="1" v-model="form.file"></AppUpload> <AppUpload
accept=".doc,.docx,.xls,.xlsx,.pdf,.ppt,.pptx,.mp3,.mp4,.png,.jpeg,.jpg"
:limit="1"
v-model="form.file"
></AppUpload>
<div class="upload-btn">本地文件</div> <div class="upload-btn">本地文件</div>
</div> </div>
</div> </div>
...@@ -140,10 +164,22 @@ const protocol = ref(false) ...@@ -140,10 +164,22 @@ const protocol = ref(false)
<el-input maxlength="40" v-model="form.name" /> <el-input maxlength="40" v-model="form.name" />
</el-form-item> </el-form-item>
<el-form-item label="其他分类:" prop="classification"> <el-form-item label="其他分类:" prop="classification">
<el-tree-select :props="defaultProps" style="width: 100%" v-model="form.classification" :data="selectTree" /> <el-tree-select
:render-after-expand="false"
:props="defaultProps"
style="width: 100%"
v-model="form.classification"
:data="selectTree"
/>
</el-form-item> </el-form-item>
<el-form-item label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;知识点:"> <el-form-item label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;知识点:">
<el-input placeholder="请输入该视频相关知识点,多个知识点请使用“,”分隔" maxlength="100" v-model="form.knowledge_points" :rows="2" type="textarea" /> <el-input
placeholder="请输入该视频相关知识点,多个知识点请使用“,”分隔"
maxlength="100"
v-model="form.knowledge_points"
:rows="2"
type="textarea"
/>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div class="protocol-box"> <div class="protocol-box">
...@@ -160,7 +196,7 @@ const protocol = ref(false) ...@@ -160,7 +196,7 @@ const protocol = ref(false)
<style lang="scss"> <style lang="scss">
.upload-box { .upload-box {
position: relative; position: relative;
.el-progress__text{ .el-progress__text {
transform: translate(20px, -5px); transform: translate(20px, -5px);
} }
.app-upload-btn { .app-upload-btn {
......
<script setup lang="ts"> <script setup lang="ts">
const props:any = defineProps<{ data: object }>() const props:any = defineProps<{ data: object, tabIndex: string }>()
</script> </script>
<template> <template>
<!-- <div>{{ props.data }}</div> --> <!-- <div>{{ props.data }}</div> -->
...@@ -28,7 +28,8 @@ const props:any = defineProps<{ data: object }>() ...@@ -28,7 +28,8 @@ const props:any = defineProps<{ data: object }>()
</div> </div>
<div class="item-b"> <div class="item-b">
<div class="time">{{ props.data.updated_time }}</div> <div class="time">{{ props.data.updated_time }}</div>
<!-- <div class="tag">新建</div> --> <div class="tag" v-if="tabIndex === '2'">{{ props.data.department_public_name }}</div>
<div class="tag" v-if="tabIndex === '3'">{{ props.data.platform_public_name }}</div>
</div> </div>
</div> </div>
</div> </div>
......
...@@ -5,16 +5,16 @@ import { getCreateAuth, updateAuth } from '@/api/base' ...@@ -5,16 +5,16 @@ import { getCreateAuth, updateAuth } from '@/api/base'
* progress 上传进度 * progress 上传进度
**/ **/
interface IUpload { interface IUpload {
code: number, code: number
name?: string, name?: string
msg?: string, msg?: string
progress?: number, progress?: number
videoId?: string videoId?: string
} }
let uploadData = $ref<IUpload>({ code: -1 }) let uploadData = $ref<IUpload>({ code: -1 })
const emit = defineEmits(['upload']) const emit = defineEmits(['upload'])
const form:any = reactive({ const form: any = reactive({
timeout: '', timeout: '',
partSize: '', partSize: '',
parallel: '', parallel: '',
...@@ -27,20 +27,21 @@ const form:any = reactive({ ...@@ -27,20 +27,21 @@ const form:any = reactive({
uploader: null, uploader: null,
statusText: '' statusText: ''
}) })
const fileChange = (e:any) => { const fileChange = (e: any) => {
form.file = e.target.files[0] form.file = e.target.files[0]
window.localStorage.uploadFile = e.target.files[0]
var userData = '{"Vod":{}}' var userData = '{"Vod":{}}'
if (form.uploader) { if (form.uploader) {
form.uploader.stopUpload() form.uploader.stopUpload()
form.authProgress = 0 form.authProgress = 0
form.statusText = "" form.statusText = ''
} }
form.uploader = createUploader() form.uploader = createUploader()
form.uploader.addFile(form.file, null, null, null, userData) form.uploader.addFile(form.file, null, null, null, userData)
form.uploader.startUpload() form.uploader.startUpload()
} }
const createUploader:any = () => { const createUploader: any = () => {
const w = window as any const w = window as any
const uploader = new w.AliyunUpload.Vod({ const uploader = new w.AliyunUpload.Vod({
timeout: form.timeout || 60000, timeout: form.timeout || 60000,
...@@ -51,7 +52,7 @@ const createUploader:any = () => { ...@@ -51,7 +52,7 @@ const createUploader:any = () => {
region: form.region, region: form.region,
userId: form.userId, userId: form.userId,
// 开始上传 // 开始上传
onUploadstarted: function (uploadInfo:any) { onUploadstarted: function (uploadInfo: any) {
const fileData = JSON.parse(window.localStorage.fileData || '{}') const fileData = JSON.parse(window.localStorage.fileData || '{}')
// 判断有没有上传过 // 判断有没有上传过
const isFile = !!fileData.sourceId const isFile = !!fileData.sourceId
...@@ -65,7 +66,12 @@ const createUploader:any = () => { ...@@ -65,7 +66,12 @@ const createUploader:any = () => {
fileName: uploadInfo.file.name, fileName: uploadInfo.file.name,
fileSize: uploadInfo.file.size fileSize: uploadInfo.file.size
}) })
uploader.setUploadAuthAndAddress(uploadInfo, data.data.upload_auth, data.data.upload_address, data.data.source_id) uploader.setUploadAuthAndAddress(
uploadInfo,
data.data.upload_auth,
data.data.upload_address,
data.data.source_id
)
}) })
} else { } else {
// 上传过判断一下上次上传的文件和本次上传的文件一不一样,一样的话继续上传 // 上传过判断一下上次上传的文件和本次上传的文件一不一样,一样的话继续上传
...@@ -73,7 +79,12 @@ const createUploader:any = () => { ...@@ -73,7 +79,12 @@ const createUploader:any = () => {
uploader.setUploadAuthAndAddress(uploadInfo, fileData.uploadAuth, fileData.uploadAddress, fileData.videoId) uploader.setUploadAuthAndAddress(uploadInfo, fileData.uploadAuth, fileData.uploadAddress, fileData.videoId)
} else { } else {
getCreateAuth({ title: uploadInfo.file.name, file_name: uploadInfo.file.name }).then((data: any) => { getCreateAuth({ title: uploadInfo.file.name, file_name: uploadInfo.file.name }).then((data: any) => {
uploader.setUploadAuthAndAddress(uploadInfo, data.data.upload_auth, data.data.upload_address, data.data.source_id) uploader.setUploadAuthAndAddress(
uploadInfo,
data.data.upload_auth,
data.data.upload_address,
data.data.source_id
)
}) })
} }
} }
...@@ -84,7 +95,7 @@ const createUploader:any = () => { ...@@ -84,7 +95,7 @@ const createUploader:any = () => {
} }
}, },
// 文件上传成功 // 文件上传成功
onUploadSucceed: function (uploadInfo:any) { onUploadSucceed: function (uploadInfo: any) {
const fileData = window.localStorage.fileData ? JSON.parse(window.localStorage.fileData) : {} const fileData = window.localStorage.fileData ? JSON.parse(window.localStorage.fileData) : {}
uploadData = { uploadData = {
code: 0, code: 0,
...@@ -96,7 +107,7 @@ const createUploader:any = () => { ...@@ -96,7 +107,7 @@ const createUploader:any = () => {
}, },
// 文件上传失败 // 文件上传失败
// code:any, message:any // code:any, message:any
onUploadFailed: function (uploadInfo:any) { onUploadFailed: function (uploadInfo: any) {
uploadData = { uploadData = {
code: 2, code: 2,
name: uploadInfo.file.name, name: uploadInfo.file.name,
...@@ -104,13 +115,13 @@ const createUploader:any = () => { ...@@ -104,13 +115,13 @@ const createUploader:any = () => {
} }
}, },
// 文件上传进度,单位:字节, 可以在这个函数中拿到上传进度并显示在页面上 // 文件上传进度,单位:字节, 可以在这个函数中拿到上传进度并显示在页面上
onUploadProgress: function (uploadInfo:any, totalSize:any, progress:any) { onUploadProgress: function (uploadInfo: any, totalSize: any, progress: any) {
let progressPercent = Math.ceil(progress * 100) let progressPercent = Math.ceil(progress * 100)
form.authProgress = progressPercent form.authProgress = progressPercent
uploadData.progress = progressPercent uploadData.progress = progressPercent
}, },
// 上传凭证超时 // 上传凭证超时
onUploadTokenExpired: function (uploadInfo:any) { onUploadTokenExpired: function (uploadInfo: any) {
const fileData = JSON.parse(window.localStorage.fileData || '{}') const fileData = JSON.parse(window.localStorage.fileData || '{}')
updateAuth({ source_id: fileData.videoId }).then(({ data }) => { updateAuth({ source_id: fileData.videoId }).then(({ data }) => {
let uploadAuth = data.UploadAuth let uploadAuth = data.UploadAuth
...@@ -134,41 +145,37 @@ const createUploader:any = () => { ...@@ -134,41 +145,37 @@ const createUploader:any = () => {
} }
</script> </script>
<template> <template>
<div> <div>
<div class="upload-video"> <div class="upload-video">
<div class="upload-btn"> <div class="upload-btn">
本地文件 本地文件
<input accept=".mp4" type="file" id="fileUpload" @change="fileChange($event)"> <input accept=".mp4" type="file" id="fileUpload" @change="fileChange($event)" />
</div>
<div class="demo-progress" v-if="uploadData.code === 1">
<el-progress style="width: 340px" :percentage="uploadData.progress" status="success" />
<span> {{ uploadData.progress }}% </span>
</div>
<div class="error video-info" v-if="uploadData.code === 2">
<div class="name">上传失败(请重新选择文件进行上传)</div>
</div>
<div class="video-info" v-if="uploadData.code === 0">
<div class="name">{{ uploadData.name }}</div>
</div>
</div> </div>
<div class="demo-progress" v-if="uploadData.code === 1"> <div class="tips">推荐视频格式:帧率为25fps\输出码率为4M\输出格式为mp4,建议采用格式工厂等工具处理后上传。</div>
<el-progress style="width:340px" :percentage="uploadData.progress" status="success" />
<span>
{{ uploadData.progress }}%
</span>
</div>
<div class="error video-info" v-if="uploadData.code === 2">
<div class="name">上传失败</div>
</div>
<div class="video-info" v-if="uploadData.code === 0">
<div class="name">{{ uploadData.name }}</div>
</div>
</div>
<div class="tips">
推荐视频格式:帧率为25fps\输出码率为4M\输出格式为mp4,建议采用格式工厂等工具处理后上传。
</div> </div>
</div>
</template> </template>
<style lang="scss"> <style lang="scss">
.demo-progress { .demo-progress {
width: 350px; width: 350px;
display: flex; display: flex;
span{ span {
color: #999999; color: #999999;
font-size: 14px; font-size: 14px;
transform: translateX(-20px); transform: translateX(-20px);
} }
} }
#fileUpload{ #fileUpload {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
...@@ -213,4 +220,4 @@ const createUploader:any = () => { ...@@ -213,4 +220,4 @@ const createUploader:any = () => {
} }
} }
} }
</style> </style>
\ No newline at end of file
...@@ -14,61 +14,68 @@ const props = defineProps(['data']) ...@@ -14,61 +14,68 @@ const props = defineProps(['data'])
<div class="name">视频封面</div> <div class="name">视频封面</div>
</div> </div>
<div class="info-items"> <div class="info-items">
<div class="i-items"> <div class="flex-box">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon1.png" class="icons"> <div class="i-items">
<div class="text-box"> <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon1.png" class="icons">
<div class="name">状态</div> <div class="text-box">
<div :class="props.data.status == '1' ? 'value active' : 'value'">{{ props.data.status_name }}</div> <div class="name">状态</div>
<div :class="props.data.status == '1' ? 'value active' : 'value'">{{ props.data.status_name }}</div>
</div>
</div> </div>
</div> <div class="i-items">
<div class="i-items"> <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon12.png" class="icons">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon12.png" class="icons"> <div class="text-box">
<div class="text-box"> <div class="name">创建者</div>
<div class="name">创建者</div> <div class="value">{{ props.data.created_operator_name }}</div>
<div class="value">{{ props.data.created_operator_name }}</div> </div>
</div>
</div>
<div class="i-items">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon3.png" class="icons">
<div class="text-box">
<div class="name">创建时间</div>
<div class="value">{{ props.data.created_time }}</div>
</div> </div>
</div> <div class="i-items">
<div class="i-items"> <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon3.png" class="icons">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon4.png" class="icons"> <div class="text-box">
<div class="text-box"> <div class="name">创建时间</div>
<div class="name">更新时间</div> <div class="value">{{ props.data.created_time }}</div>
<div class="value">{{ props.data.updated_time }}</div> </div>
</div> </div>
</div> </div>
<div class="i-items"> <div class="flex-box">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon5.png" class="icons"> <div class="i-items">
<div class="text-box"> <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon4.png" class="icons">
<div class="name">视频名称</div> <div class="text-box">
<div class="value">{{ props.data.name }}</div> <div class="name">更新时间</div>
<div class="value">{{ props.data.updated_time }}</div>
</div>
</div> </div>
</div> <div class="i-items">
<!-- <div class="i-items"> <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon5.png" class="icons">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon6.png" class="icons"> <div class="text-box">
<div class="text-box"> <div class="name">视频名称</div>
<div class="name">资源来源</div> <div class="value">{{ props.data.name }}</div>
<div class="value">{{ props.data.source_name }}</div> </div>
</div> </div>
</div> --> <div class="i-items">
<div class="i-items"> <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon6.png" class="icons">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon7.png" class="icons"> <div class="text-box">
<div class="text-box"> <div class="name">负责人</div>
<div class="name">视频分类</div> <div class="value">{{ props.data.belong_operator_name }}</div>
<div class="value">{{ props.data.classification_name || '暂无' }}</div> </div>
</div> </div>
</div> </div>
<div class="i-items" style="align-items: flex-start;"> <div class="flex-box">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon8.png" class="icons"> <div class="i-items">
<div class="text-box"> <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon7.png" class="icons">
<div class="name">知识点</div> <div class="text-box">
<div class="value">{{ props.data?.knowledge_points || '暂无' }}</div> <div class="name">视频分类</div>
<div class="value">{{ props.data.classification_name || '暂无' }}</div>
</div>
</div>
<div class="i-items" style="align-items: flex-start;">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/video-view-icon8.png" class="icons">
<div class="text-box">
<div class="name">知识点</div>
<div class="value">{{ props.data?.knowledge_points || '暂无' }}</div>
</div>
</div> </div>
<div class="i-items"></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -95,10 +102,16 @@ const props = defineProps(['data']) ...@@ -95,10 +102,16 @@ const props = defineProps(['data'])
} }
} }
.info-items{ .info-items{
display: flex; // display: flex;
flex-wrap: wrap; // flex-wrap: wrap;
padding-left: 12px; padding-left: 12px;
flex: 1;
.flex-box{
display: flex;
justify-content: flex-start;
}
.i-items{ .i-items{
width: 30%;
display: flex; display: flex;
align-items: center; align-items: center;
height: fit-content; height: fit-content;
......
...@@ -20,7 +20,7 @@ const defaultProps = { ...@@ -20,7 +20,7 @@ const defaultProps = {
} }
// 资源出处 tab触发 // 资源出处 tab触发
const tabValue: any = ref('1') const tabValue = ref('1')
const appList = ref() const appList = ref()
const tabChange = () => { const tabChange = () => {
appList.value.refetch() appList.value.refetch()
...@@ -31,6 +31,31 @@ let isCard = $ref(true) ...@@ -31,6 +31,31 @@ let isCard = $ref(true)
// table 数据 // table 数据
const listOptions = $computed(() => { const listOptions = $computed(() => {
const columns = [
{
label: '视频标题',
prop: 'name',
align: 'center',
computed: (row: any) => {
return row.row.name.length > 10 ? `${row.row.name.slice(0, 10)}...` : row.row.name
}
},
{ label: '视频分类', prop: 'classification_name', align: 'center' },
{ label: '知识点', prop: 'knowledge_points', align: 'center' },
{ label: '封面', slots: 'table-cover', width: 150, 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 }
]
if (tabValue.value === '2') {
columns.splice(2, 0, { label: '部门共享', prop: 'department_public_name', align: 'center' })
}
if (tabValue.value === '3') {
columns.splice(2, 0, { label: '平台共享', prop: 'platform_public_name', align: 'center' })
}
return { return {
remote: { remote: {
httpRequest: getVideoList, httpRequest: getVideoList,
...@@ -50,26 +75,7 @@ const listOptions = $computed(() => { ...@@ -50,26 +75,7 @@ const listOptions = $computed(() => {
slots: 'filter-department' slots: 'filter-department'
} }
], ],
columns: [ columns
{
label: '视频标题',
prop: 'name',
align: 'center',
computed: (row: any) => {
return row.row.name.length > 10 ? `${row.row.name.slice(0, 10)}...` : row.row.name
}
},
{ label: '视频分类', prop: 'classification_name', align: 'center' },
{ label: '知识点', prop: 'knowledge_points', align: 'center' },
{ label: '封面', slots: 'table-cover', width: 150, 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: 'table-share', align: 'center' },
{ label: '更新日期', prop: 'updated_time', align: 'center' },
{ label: '操作', slots: 'table-operate', align: 'center', width: 200 }
]
} }
}) })
...@@ -143,7 +149,7 @@ const changeCard = () => { ...@@ -143,7 +149,7 @@ const changeCard = () => {
<!-- 卡片 --> <!-- 卡片 -->
<template #body="{ data }" v-if="isCard"> <template #body="{ data }" v-if="isCard">
<div class="card-list" v-if="data.length"> <div class="card-list" v-if="data.length">
<CardListItem v-for="(item, index) in data" :data="item" :key="index"></CardListItem> <CardListItem :tabIndex="tabValue" v-for="(item, index) in data" :data="item" :key="index"></CardListItem>
</div> </div>
<el-empty v-else description="description" /> <el-empty v-else description="description" />
</template> </template>
......
...@@ -71,11 +71,15 @@ const rules = { ...@@ -71,11 +71,15 @@ const rules = {
source_id: [{ required: true, message: '' }] source_id: [{ required: true, message: '' }]
} }
const ruleFormRef = ref<FormInstance>() const ruleFormRef = ref<FormInstance>()
let submitFlag = true
const submitForm = async (formEl: FormInstance | undefined) => { const submitForm = async (formEl: FormInstance | undefined) => {
if (!submitFlag) return
submitFlag = false
if (!formEl) return if (!formEl) return
await formEl.validate(valid => { await formEl.validate(valid => {
if (valid) { if (valid) {
if (!protocol.value) { if (!protocol.value) {
submitFlag = true
ElMessage('请勾选用户协议') ElMessage('请勾选用户协议')
return return
} }
...@@ -85,6 +89,7 @@ const submitForm = async (formEl: FormInstance | undefined) => { ...@@ -85,6 +89,7 @@ const submitForm = async (formEl: FormInstance | undefined) => {
createResources() createResources()
} }
} else { } else {
submitFlag = true
ElMessage('请完善信息') ElMessage('请完善信息')
} }
}) })
...@@ -101,7 +106,11 @@ const updateResources = () => { ...@@ -101,7 +106,11 @@ const updateResources = () => {
path: '/resource/video' path: '/resource/video'
}) })
}, 1000) }, 1000)
} else {
submitFlag = true
} }
}).catch(() => {
submitFlag = true
}) })
} }
...@@ -115,7 +124,11 @@ const createResources = () => { ...@@ -115,7 +124,11 @@ const createResources = () => {
path: '/resource/video' path: '/resource/video'
}) })
}, 1000) }, 1000)
} else {
submitFlag = true
} }
}).catch(() => {
submitFlag = true
}) })
} }
...@@ -174,7 +187,7 @@ const watchSwiper = (index: number) => { ...@@ -174,7 +187,7 @@ const watchSwiper = (index: number) => {
<div v-else class="cover-img" :style="`background-image:url(${form.data.cover})`"></div> <div v-else class="cover-img" :style="`background-image:url(${form.data.cover})`"></div>
</div> </div>
<div class="video-cover_right"> <div class="video-cover_right">
<UploadImg accept=".jpg,.jpeg,.gif,.png" v-model="form.data.cover" ></UploadImg> <UploadImg accept=".jpg,.jpeg,.gif,.png" v-model="form.data.cover"></UploadImg>
<div class="list"> <div class="list">
<div class="item"> <div class="item">
<img <img
...@@ -229,7 +242,9 @@ const watchSwiper = (index: number) => { ...@@ -229,7 +242,9 @@ const watchSwiper = (index: number) => {
</el-carousel> </el-carousel>
</div> </div>
<el-icon v-if="isSwiperBtn != 0" class="arrow left" @click="swiperChange('prev')"><ArrowLeftBold /></el-icon> <el-icon v-if="isSwiperBtn != 0" class="arrow left" @click="swiperChange('prev')"><ArrowLeftBold /></el-icon>
<el-icon v-if="isSwiperBtn != 1" class="arrow right" @click="swiperChange('next')"><ArrowRightBold /></el-icon> <el-icon v-if="isSwiperBtn != 1" class="arrow right" @click="swiperChange('next')"
><ArrowRightBold
/></el-icon>
</div> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论