|
|
|
|
@ -1,69 +1,53 @@ |
|
|
|
|
<script setup> |
|
|
|
|
import { ref } from 'vue' |
|
|
|
|
|
|
|
|
|
import { CourseResourceControllerService } from '../../../../generated/services/CourseResourceControllerService' |
|
|
|
|
const props = defineProps(['dafulIndex']) |
|
|
|
|
import tool from '@/utils/oss.js' |
|
|
|
|
const visibilerDrawer = ref(false) |
|
|
|
|
import { ElMessage } from 'element-plus' |
|
|
|
|
|
|
|
|
|
const emit = defineEmits(['getpptresourceList']) |
|
|
|
|
const getresourceList = () => { |
|
|
|
|
emit('getpptresourceList', 'type') |
|
|
|
|
} |
|
|
|
|
//默认抽屉隐藏 |
|
|
|
|
const visibleDramwer = ref(false) |
|
|
|
|
import { CourseResourceControllerService } from '../../../../generated/services/CourseResourceControllerService' |
|
|
|
|
//默认数据 |
|
|
|
|
const defaultForm = { |
|
|
|
|
description: '', |
|
|
|
|
id: '', |
|
|
|
|
img: '', |
|
|
|
|
img: '', //封面 |
|
|
|
|
name: '', |
|
|
|
|
type: '', |
|
|
|
|
type: '', //资源类型 |
|
|
|
|
path: '', |
|
|
|
|
} |
|
|
|
|
const imageUrl = ref('') |
|
|
|
|
const onSelectFile = (uploadFile) => { |
|
|
|
|
// console.log(uploadFile) |
|
|
|
|
//预览图片 |
|
|
|
|
imageUrl.value = URL.createObjectURL(uploadFile.raw) |
|
|
|
|
//将图片存入 |
|
|
|
|
formModel.value.img = uploadFile.raw |
|
|
|
|
} |
|
|
|
|
//准备数据 |
|
|
|
|
|
|
|
|
|
const formModel = ref({ |
|
|
|
|
...defaultForm, |
|
|
|
|
}) |
|
|
|
|
//表单的校验 |
|
|
|
|
const rules = { |
|
|
|
|
name: [ |
|
|
|
|
{ required: true, message: '请输入资源名称', trigger: 'blur' }, |
|
|
|
|
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }, |
|
|
|
|
], |
|
|
|
|
description: [ |
|
|
|
|
{ required: true, message: '请输入资源简介', trigger: 'blur' }, |
|
|
|
|
{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }, |
|
|
|
|
], |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
//组件对外暴露一个open 方法 根据传来的参数区分添加还是编辑 |
|
|
|
|
const open = async (row) => { |
|
|
|
|
visibleDramwer.value = true |
|
|
|
|
const open = (row) => { |
|
|
|
|
visibilerDrawer.value = true |
|
|
|
|
// console.log(row) |
|
|
|
|
if (row.id) { |
|
|
|
|
//需要基于row.id 发送请求，获取编辑的详情数据，进行回显 |
|
|
|
|
const res = await CourseResourceControllerService.getAllUsingGet1(row.id) |
|
|
|
|
//回显 |
|
|
|
|
formModel.value = res.data.records |
|
|
|
|
console.log(res) |
|
|
|
|
|
|
|
|
|
//图片回显 |
|
|
|
|
|
|
|
|
|
//需要基于row.id发送请求，获取编辑对应的详情数据，进行回显 |
|
|
|
|
console.log('编辑回显') |
|
|
|
|
} else { |
|
|
|
|
//重置表单数据 |
|
|
|
|
formModel.value = { |
|
|
|
|
...defaultForm, |
|
|
|
|
} //重置form表单 |
|
|
|
|
//重置图片 |
|
|
|
|
imageUrl.value = '' |
|
|
|
|
console.log('添加') |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
//表单的校验 |
|
|
|
|
const rules = { |
|
|
|
|
name: [ |
|
|
|
|
{ required: true, message: '请输入资源名称', trigger: 'blur' }, |
|
|
|
|
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }, |
|
|
|
|
], |
|
|
|
|
type: [{ required: true, trigger: 'blur' }], |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
defineExpose({ |
|
|
|
|
open, |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
const selectVal = ref(props.dafulIndex) |
|
|
|
|
|
|
|
|
|
const selectOp = ref([ |
|
|
|
|
{ label: 'ppt', value: '1' }, |
|
|
|
|
{ label: '图片', value: '2' }, |
|
|
|
|
@ -72,52 +56,18 @@ const selectOp = ref([ |
|
|
|
|
{ label: '文件', value: '5' }, |
|
|
|
|
{ label: '音频', value: '6' }, |
|
|
|
|
]) |
|
|
|
|
|
|
|
|
|
const upload = async (option) => { |
|
|
|
|
const res = await tool.oss.upload(option.file) |
|
|
|
|
const url = 'https://wenyu132.oss-cn-beijing.aliyuncs.com/' + res.name |
|
|
|
|
|
|
|
|
|
formModel.value.img = url |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const fileList = ref([]) |
|
|
|
|
const clearFileList = () => { |
|
|
|
|
console.log(fileList) |
|
|
|
|
fileList.value.length = 0 |
|
|
|
|
|
|
|
|
|
fileList.value = [] |
|
|
|
|
} |
|
|
|
|
const handleSel = () => { |
|
|
|
|
fileList.value.length = 0 |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const formRef = ref() |
|
|
|
|
const isSubmit = async () => { |
|
|
|
|
formRef.value.validate(async (valid, fields) => { |
|
|
|
|
if (valid) { |
|
|
|
|
const params = { |
|
|
|
|
name: formModel.value.name, |
|
|
|
|
type: selectVal.value, |
|
|
|
|
img: formModel.value.img, |
|
|
|
|
description: formModel.value.description, |
|
|
|
|
path: formModel.value.img, |
|
|
|
|
} |
|
|
|
|
console.log(params) |
|
|
|
|
await CourseResourceControllerService.saveCourseResourceUsingGet1(params) |
|
|
|
|
visibleDramwer.value = false |
|
|
|
|
clearFileList() |
|
|
|
|
ElMessage.success('添加成功') |
|
|
|
|
getresourceList() |
|
|
|
|
} else { |
|
|
|
|
console.log('error submit!', fields) |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
// upd |
|
|
|
|
const beforeAvatarUpload = (rawFile) => { |
|
|
|
|
console.log('执行了') |
|
|
|
|
switch (+selectVal.value) { |
|
|
|
|
switch (+formModel.value.type.value) { |
|
|
|
|
case 1: |
|
|
|
|
if (rawFile.type !== 'application/vnd.ms-powerpoint') { |
|
|
|
|
if (rawFile.type !== 'applicationnd.ms-powerpoint') { |
|
|
|
|
clearFileList() |
|
|
|
|
ElMessage.error('必须是ppt文件！') |
|
|
|
|
} else { |
|
|
|
|
@ -143,7 +93,7 @@ const beforeAvatarUpload = (rawFile) => { |
|
|
|
|
} |
|
|
|
|
break |
|
|
|
|
case 4: |
|
|
|
|
if (!rawFile.type.startsWith('application/pdf')) { |
|
|
|
|
if (!rawFile.type.startsWith('applicationf')) { |
|
|
|
|
clearFileList() |
|
|
|
|
ElMessage.error('必须是pdf文件！') |
|
|
|
|
} else { |
|
|
|
|
@ -154,7 +104,7 @@ const beforeAvatarUpload = (rawFile) => { |
|
|
|
|
case 5: |
|
|
|
|
if ( |
|
|
|
|
!rawFile.type.startsWith( |
|
|
|
|
'application/vnd.openxmlformats-officedocument.wordprocessingml.document', |
|
|
|
|
'applicationnd.openxmlformats-officedocument.wordprocessingml.document', |
|
|
|
|
) && |
|
|
|
|
!rawFile.type.startsWith('application/msword') |
|
|
|
|
) { |
|
|
|
|
@ -176,36 +126,45 @@ const beforeAvatarUpload = (rawFile) => { |
|
|
|
|
break |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
//提交 |
|
|
|
|
const emit = defineEmits('success') |
|
|
|
|
const isSubmit = async () => { |
|
|
|
|
//发请求 |
|
|
|
|
if (formModel.value.id) { |
|
|
|
|
console.log('编辑') |
|
|
|
|
} else { |
|
|
|
|
console.log(formModel.value) |
|
|
|
|
await CourseResourceControllerService.saveCourseResourceUsingGet1( |
|
|
|
|
formModel.value, |
|
|
|
|
) |
|
|
|
|
ElMessage.success('添加成功') |
|
|
|
|
visibilerDrawer.value = false |
|
|
|
|
//通知父组件 |
|
|
|
|
emit('success', 'add') |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
const isabolish = () => { |
|
|
|
|
clearFileList() |
|
|
|
|
visibleDramwer.value = false |
|
|
|
|
visibilerDrawer.value = false |
|
|
|
|
formModel.value = [] |
|
|
|
|
imageUrl.value = '' |
|
|
|
|
// console.log(formModel.value) |
|
|
|
|
} |
|
|
|
|
defineExpose({ |
|
|
|
|
open, |
|
|
|
|
}) |
|
|
|
|
</script> |
|
|
|
|
<template> |
|
|
|
|
<el-drawer |
|
|
|
|
v-model="visibleDramwer" |
|
|
|
|
:title="formModel.id ? '编辑资源' : '添加资源'" |
|
|
|
|
direction="rtl" |
|
|
|
|
size="50%" |
|
|
|
|
> |
|
|
|
|
<!-- 添加资源表单 --> |
|
|
|
|
<el-form |
|
|
|
|
class="resourceformModel" |
|
|
|
|
:model="formModel" |
|
|
|
|
ref="formRef" |
|
|
|
|
:rules="rules" |
|
|
|
|
label-width="100px" |
|
|
|
|
> |
|
|
|
|
<el-drawer v-model="visibilerDrawer" title="标题" direction="rtl" size="50%"> |
|
|
|
|
<el-form :model="formModel" ref="fromRef" :rules="rules"> |
|
|
|
|
<el-form-item label="资源名称" prop="name"> |
|
|
|
|
<el-input |
|
|
|
|
v-model="formModel.name" |
|
|
|
|
placeholder="请输入资源名称" |
|
|
|
|
></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="资源类型"> |
|
|
|
|
<el-form-item label="资源类型" prop="type"> |
|
|
|
|
<el-select |
|
|
|
|
@change="handleSel" |
|
|
|
|
v-model="selectVal" |
|
|
|
|
v-model="formModel.type" |
|
|
|
|
placeholder="请选择资源类型" |
|
|
|
|
size="large" |
|
|
|
|
style="width: 100%" |
|
|
|
|
@ -218,18 +177,17 @@ const isabolish = () => { |
|
|
|
|
/> |
|
|
|
|
</el-select> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="上传资源" prop="fileList"> |
|
|
|
|
<el-form-item label="资源封面" prop="img"> |
|
|
|
|
<!-- 此处需要关闭自动上传 --> |
|
|
|
|
<el-upload |
|
|
|
|
v-model:file-list="fileList" |
|
|
|
|
:http-request="upload" |
|
|
|
|
:limit="1" |
|
|
|
|
class="upload-demo" |
|
|
|
|
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" |
|
|
|
|
list-type="picture" |
|
|
|
|
class="avatar-uploader" |
|
|
|
|
:show-file-list="false" |
|
|
|
|
:auto-upload="false" |
|
|
|
|
:before-upload="beforeAvatarUpload" |
|
|
|
|
:on-change="onSelectFile" |
|
|
|
|
> |
|
|
|
|
<el-button type="primary">点击上传资源</el-button> |
|
|
|
|
<template #file></template> |
|
|
|
|
<img v-if="imageUrl" :src="imageUrl" class="avatar" /> |
|
|
|
|
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon> |
|
|
|
|
</el-upload> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="资源简介" prop="description"> |
|
|
|
|
@ -246,11 +204,31 @@ const isabolish = () => { |
|
|
|
|
</el-drawer> |
|
|
|
|
</template> |
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
.editor { |
|
|
|
|
width: 100%; |
|
|
|
|
|
|
|
|
|
:deep(.ql-editor) { |
|
|
|
|
min-height: 200px; |
|
|
|
|
.avatar-uploader { |
|
|
|
|
:deep() { |
|
|
|
|
.avatar { |
|
|
|
|
width: 178px; |
|
|
|
|
height: 178px; |
|
|
|
|
display: block; |
|
|
|
|
} |
|
|
|
|
.el-upload { |
|
|
|
|
border: 1px dashed var(--el-border-color); |
|
|
|
|
border-radius: 6px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
position: relative; |
|
|
|
|
overflow: hidden; |
|
|
|
|
transition: var(--el-transition-duration-fast); |
|
|
|
|
} |
|
|
|
|
.el-upload:hover { |
|
|
|
|
border-color: var(--el-color-primary); |
|
|
|
|
} |
|
|
|
|
.el-icon.avatar-uploader-icon { |
|
|
|
|
font-size: 28px; |
|
|
|
|
color: #8c939d; |
|
|
|
|
width: 178px; |
|
|
|
|
height: 178px; |
|
|
|
|
text-align: center; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
ww
5 months ago