|
|
|
|
@ -1,11 +1,15 @@ |
|
|
|
|
<script lang="ts" setup> |
|
|
|
|
<script setup> |
|
|
|
|
import { ref } from 'vue' |
|
|
|
|
// import axios from 'axios' |
|
|
|
|
|
|
|
|
|
import { CourseResourceControllerService } from '../../../../generated/services/CourseResourceControllerService' |
|
|
|
|
const props = defineProps(['dafulIndex']) |
|
|
|
|
import { QuillEditor } from '@vueup/vue-quill' |
|
|
|
|
import '@vueup/vue-quill/dist/vue-quill.snow.css' |
|
|
|
|
import tool from '@/utils/oss.js' |
|
|
|
|
import { ElMessage } from 'element-plus' |
|
|
|
|
|
|
|
|
|
const emit = defineEmits(['getpptresourceList']) |
|
|
|
|
const getresourceList = () => { |
|
|
|
|
emit('getpptresourceList', 'type') |
|
|
|
|
} |
|
|
|
|
//默认抽屉隐藏 |
|
|
|
|
const visibleDramwer = ref(false) |
|
|
|
|
//默认数据 |
|
|
|
|
@ -25,6 +29,10 @@ const formModel = ref({ |
|
|
|
|
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' }, |
|
|
|
|
], |
|
|
|
|
} |
|
|
|
|
@ -32,8 +40,6 @@ const rules = { |
|
|
|
|
//组件对外暴露一个open 方法 根据传来的参数区分添加还是编辑 |
|
|
|
|
const open = async (row) => { |
|
|
|
|
visibleDramwer.value = true |
|
|
|
|
//console.log(row.id) |
|
|
|
|
|
|
|
|
|
if (row.id) { |
|
|
|
|
//需要基于row.id 发送请求，获取编辑的详情数据，进行回显 |
|
|
|
|
const res = await CourseResourceControllerService.getAllUsingGet1(row.id) |
|
|
|
|
@ -42,7 +48,7 @@ const open = async (row) => { |
|
|
|
|
console.log(res) |
|
|
|
|
|
|
|
|
|
//图片回显 |
|
|
|
|
//富文本框回显 |
|
|
|
|
|
|
|
|
|
console.log('编辑回显') |
|
|
|
|
} else { |
|
|
|
|
//重置表单数据 |
|
|
|
|
@ -57,6 +63,7 @@ defineExpose({ |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
const selectVal = ref(props.dafulIndex) |
|
|
|
|
|
|
|
|
|
const selectOp = ref([ |
|
|
|
|
{ label: 'ppt', value: '1' }, |
|
|
|
|
{ label: '图片', value: '2' }, |
|
|
|
|
@ -66,35 +73,40 @@ const selectOp = ref([ |
|
|
|
|
{ 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([]) |
|
|
|
|
function clearFileList() { |
|
|
|
|
const clearFileList = () => { |
|
|
|
|
console.log(fileList) |
|
|
|
|
fileList.value.length = 0 |
|
|
|
|
fileList.value = [] |
|
|
|
|
} |
|
|
|
|
const handleSel = () => { |
|
|
|
|
fileList.value.length = 0 |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
//上传图片 |
|
|
|
|
import type { UploadProps } from 'element-plus' |
|
|
|
|
|
|
|
|
|
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => { |
|
|
|
|
console.log(uploadFile, uploadFiles) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const handlePreview: UploadProps['onPreview'] = (file) => { |
|
|
|
|
console.log(file) |
|
|
|
|
} |
|
|
|
|
const formRef = ref() |
|
|
|
|
function isSubmit() { |
|
|
|
|
formRef.value.validate((valid, fields) => { |
|
|
|
|
const isSubmit = async () => { |
|
|
|
|
formRef.value.validate(async (valid, fields) => { |
|
|
|
|
if (valid) { |
|
|
|
|
const params = { |
|
|
|
|
name: formModel.value.name, |
|
|
|
|
type: selectVal.value, |
|
|
|
|
img: fileList.value[0]?.raw, |
|
|
|
|
img: formModel.value.img, |
|
|
|
|
description: formModel.value.description, |
|
|
|
|
path: formModel.value.img, |
|
|
|
|
} |
|
|
|
|
console.log('根据参数：', params, '去调用接口？？？') |
|
|
|
|
console.log(params) |
|
|
|
|
await CourseResourceControllerService.saveCourseResourceUsingGet1(params) |
|
|
|
|
visibleDramwer.value = false |
|
|
|
|
clearFileList() |
|
|
|
|
ElMessage.success('添加成功') |
|
|
|
|
getresourceList() |
|
|
|
|
} else { |
|
|
|
|
console.log('error submit!', fields) |
|
|
|
|
} |
|
|
|
|
@ -109,57 +121,65 @@ const beforeAvatarUpload = (rawFile) => { |
|
|
|
|
clearFileList() |
|
|
|
|
ElMessage.error('必须是ppt文件！') |
|
|
|
|
} else { |
|
|
|
|
clearFileList() |
|
|
|
|
fileList.value.push(rawFile) |
|
|
|
|
} |
|
|
|
|
break |
|
|
|
|
case 2: |
|
|
|
|
if (!rawFile.type.startsWith('image/')) { |
|
|
|
|
clearFileList() |
|
|
|
|
ElMessage.error('必须是??文件！') |
|
|
|
|
ElMessage.error('必须是图片文件！') |
|
|
|
|
} else { |
|
|
|
|
fileList.value.push(rawFile) |
|
|
|
|
} |
|
|
|
|
break |
|
|
|
|
|
|
|
|
|
case 3: |
|
|
|
|
if (!rawFile.type.startsWith('video/')) { |
|
|
|
|
clearFileList() |
|
|
|
|
ElMessage.error('必须是视频文件！') |
|
|
|
|
} else { |
|
|
|
|
clearFileList() |
|
|
|
|
fileList.value.push(rawFile) |
|
|
|
|
} |
|
|
|
|
break |
|
|
|
|
case 4: |
|
|
|
|
if (!rawFile.type.startsWith('application/pdf')) { |
|
|
|
|
clearFileList() |
|
|
|
|
ElMessage.error('必须是pdf文件！') |
|
|
|
|
} else { |
|
|
|
|
clearFileList() |
|
|
|
|
fileList.value.push(rawFile) |
|
|
|
|
} |
|
|
|
|
break |
|
|
|
|
case 5: |
|
|
|
|
if ( |
|
|
|
|
!rawFile.type.startsWith( |
|
|
|
|
'application/vnd.openxmlformats-officedocument.wordprocessingml.document', |
|
|
|
|
) && |
|
|
|
|
!rawFile.type.startsWith('application/msword') |
|
|
|
|
) { |
|
|
|
|
clearFileList() |
|
|
|
|
ElMessage.error('必须是word文件！') |
|
|
|
|
} else { |
|
|
|
|
clearFileList() |
|
|
|
|
fileList.value.push(rawFile) |
|
|
|
|
} |
|
|
|
|
break |
|
|
|
|
case 6: |
|
|
|
|
if (!rawFile.type.startsWith('audio/')) { |
|
|
|
|
clearFileList() |
|
|
|
|
ElMessage.error('必须是音频文件！') |
|
|
|
|
} else { |
|
|
|
|
clearFileList() |
|
|
|
|
fileList.value.push(rawFile) |
|
|
|
|
} |
|
|
|
|
break |
|
|
|
|
// case 3: |
|
|
|
|
// if (false) { |
|
|
|
|
// clearFileList() |
|
|
|
|
// ElMessage.error('必须是??文件！') |
|
|
|
|
// } else { |
|
|
|
|
// clearFileList() |
|
|
|
|
// fileList.value.push(rawFile) |
|
|
|
|
// } |
|
|
|
|
// break |
|
|
|
|
// case 4: |
|
|
|
|
// if (false) { |
|
|
|
|
// clearFileList() |
|
|
|
|
// ElMessage.error('必须是??文件！') |
|
|
|
|
// } else { |
|
|
|
|
// clearFileList() |
|
|
|
|
// fileList.value.push(rawFile) |
|
|
|
|
// } |
|
|
|
|
// break |
|
|
|
|
// case 5: |
|
|
|
|
// if (false) { |
|
|
|
|
// clearFileList() |
|
|
|
|
// ElMessage.error('必须是??文件！') |
|
|
|
|
// } else { |
|
|
|
|
// clearFileList() |
|
|
|
|
// fileList.value.push(rawFile) |
|
|
|
|
// } |
|
|
|
|
// break |
|
|
|
|
// case 6: |
|
|
|
|
// if (false) { |
|
|
|
|
// clearFileList() |
|
|
|
|
// ElMessage.error('必须是??文件！') |
|
|
|
|
// } else { |
|
|
|
|
// clearFileList() |
|
|
|
|
// fileList.value.push(rawFile) |
|
|
|
|
// } |
|
|
|
|
// break |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
const isabolish = () => { |
|
|
|
|
clearFileList() |
|
|
|
|
visibleDramwer.value = false |
|
|
|
|
} |
|
|
|
|
</script> |
|
|
|
|
<template> |
|
|
|
|
<el-drawer |
|
|
|
|
@ -201,33 +221,25 @@ const beforeAvatarUpload = (rawFile) => { |
|
|
|
|
<el-form-item label="上传资源" prop="fileList"> |
|
|
|
|
<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" |
|
|
|
|
:on-preview="handlePreview" |
|
|
|
|
:on-remove="handleRemove" |
|
|
|
|
list-type="picture" |
|
|
|
|
:before-upload="beforeAvatarUpload" |
|
|
|
|
> |
|
|
|
|
<el-button type="primary">点击上传资源</el-button> |
|
|
|
|
<template #tip> |
|
|
|
|
<div class="el-upload__tip"> |
|
|
|
|
jpg/png files with a size less than 500kb |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<template #file></template> |
|
|
|
|
</el-upload> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="资源简介" prop="description"> |
|
|
|
|
<div class="editor"> |
|
|
|
|
<quill-editor |
|
|
|
|
v-model:content="formModel.description" |
|
|
|
|
content-type="html" |
|
|
|
|
theme="snow" |
|
|
|
|
></quill-editor> |
|
|
|
|
</div> |
|
|
|
|
<el-input |
|
|
|
|
v-model="formModel.description" |
|
|
|
|
placeholder="请输入资源简介" |
|
|
|
|
></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item> |
|
|
|
|
<el-button type="primary">取消</el-button> |
|
|
|
|
<el-button type="primary" @click="isabolish">取消</el-button> |
|
|
|
|
<el-button type="info" @click="isSubmit">确定</el-button> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-form> |
|
|
|
|
|
edana
