|
|
|
|
@ -1,7 +1,9 @@ |
|
|
|
|
<script setup> |
|
|
|
|
<script lang="ts" setup> |
|
|
|
|
import { ref } from 'vue' |
|
|
|
|
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' |
|
|
|
|
//默认抽屉隐藏 |
|
|
|
|
const visibleDramwer = ref(false) |
|
|
|
|
//默认数据 |
|
|
|
|
@ -17,28 +19,28 @@ const defaultForm = { |
|
|
|
|
const formModel = ref({ |
|
|
|
|
...defaultForm, |
|
|
|
|
}) |
|
|
|
|
//图片上传逻辑 |
|
|
|
|
const imgUrl = ref('') |
|
|
|
|
const onSelectFile = (uploadFile) => { |
|
|
|
|
imgUrl.value = URL.createObjectURL(uploadFile.raw) |
|
|
|
|
//表单的校验 |
|
|
|
|
const rules = { |
|
|
|
|
name: [ |
|
|
|
|
{ required: true, message: '请输入资源名称', trigger: 'blur' }, |
|
|
|
|
{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }, |
|
|
|
|
], |
|
|
|
|
} |
|
|
|
|
//定义一个selectedOption属性，用于存储当前选中的值 |
|
|
|
|
// const selectedOption = ref('') |
|
|
|
|
//上传文件 |
|
|
|
|
// import tool from '@/utils/oss.js' |
|
|
|
|
// const FileList = ref([]) |
|
|
|
|
// const upload = async (option) => { |
|
|
|
|
// const res = await tool.oss.upload(option.file) |
|
|
|
|
// console.log(22, res) |
|
|
|
|
// console.log(res.name) |
|
|
|
|
// const url = 'https://wenyu132.oss-cn-beijing.aliyuncs.com/' + res.name |
|
|
|
|
// console.log(url) |
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
//组件对外暴露一个open 方法 根据传来的参数区分添加还是编辑 |
|
|
|
|
const open = (row) => { |
|
|
|
|
const open = async (row) => { |
|
|
|
|
visibleDramwer.value = true |
|
|
|
|
//console.log(row.id) |
|
|
|
|
|
|
|
|
|
if (row.id) { |
|
|
|
|
//需要基于row.id 发送请求，获取编辑的详情数据，进行回显 |
|
|
|
|
const res = await CourseResourceControllerService.getAllUsingGet1(row.id) |
|
|
|
|
//回显 |
|
|
|
|
formModel.value = res.data.records |
|
|
|
|
console.log(res) |
|
|
|
|
|
|
|
|
|
//图片回显 |
|
|
|
|
//富文本框回显 |
|
|
|
|
console.log('编辑回显') |
|
|
|
|
} else { |
|
|
|
|
//重置表单数据 |
|
|
|
|
@ -61,7 +63,20 @@ const selectOp = ref([ |
|
|
|
|
{ label: '文件', value: '5' }, |
|
|
|
|
{ label: '音频', value: '6' }, |
|
|
|
|
]) |
|
|
|
|
function handleSel() {} |
|
|
|
|
const handleSel = () => {} |
|
|
|
|
|
|
|
|
|
//上传图片 |
|
|
|
|
import type { UploadProps, UploadUserFile } from 'element-plus' |
|
|
|
|
|
|
|
|
|
const fileList = ref<UploadUserFile[]>([]) |
|
|
|
|
|
|
|
|
|
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => { |
|
|
|
|
console.log(uploadFile, uploadFiles) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const handlePreview: UploadProps['onPreview'] = (file) => { |
|
|
|
|
console.log(file) |
|
|
|
|
} |
|
|
|
|
</script> |
|
|
|
|
<template> |
|
|
|
|
<el-drawer |
|
|
|
|
@ -71,7 +86,13 @@ function handleSel() {} |
|
|
|
|
size="50%" |
|
|
|
|
> |
|
|
|
|
<!-- 添加资源表单 --> |
|
|
|
|
<el-form :model="formModel" ref="formRef" label-width="100px"> |
|
|
|
|
<el-form |
|
|
|
|
class="resourceformModel" |
|
|
|
|
:model="formModel" |
|
|
|
|
ref="formRef" |
|
|
|
|
:rules="rules" |
|
|
|
|
label-width="100px" |
|
|
|
|
> |
|
|
|
|
<el-form-item label="资源名称" prop="name"> |
|
|
|
|
<el-input |
|
|
|
|
v-model="formModel.name" |
|
|
|
|
@ -79,13 +100,12 @@ function handleSel() {} |
|
|
|
|
></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="资源类型"> |
|
|
|
|
<div class="flex flex-wrap gap-4 items-center"> |
|
|
|
|
<el-select |
|
|
|
|
@change="handleSel" |
|
|
|
|
v-model="selectVal" |
|
|
|
|
placeholder="Select" |
|
|
|
|
placeholder="请选择资源类型" |
|
|
|
|
size="large" |
|
|
|
|
style="width: 240px" |
|
|
|
|
style="width: 100%" |
|
|
|
|
> |
|
|
|
|
<el-option |
|
|
|
|
v-for="item in selectOp" |
|
|
|
|
@ -94,48 +114,46 @@ function handleSel() {} |
|
|
|
|
:value="item.value" |
|
|
|
|
/> |
|
|
|
|
</el-select> |
|
|
|
|
</div> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="资源简介" prop="description"> |
|
|
|
|
资源简介 |
|
|
|
|
<!-- <el-input |
|
|
|
|
v-model="formModel.description" |
|
|
|
|
placeholder="请输入资源简介" |
|
|
|
|
></el-input> --> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="上传资源" prop="img"> |
|
|
|
|
<!-- 此处需要关闭element-plus的自动上传，不需要配置action等参数 |
|
|
|
|
只需要前端的本地预览图片，无需在提交前上传图标 |
|
|
|
|
--> |
|
|
|
|
<el-form-item label="上传资源" prop="fileList"> |
|
|
|
|
<el-upload |
|
|
|
|
class="avatar-uploader" |
|
|
|
|
:show-file-list="false" |
|
|
|
|
:auto-upload="false" |
|
|
|
|
:onchange="onSelectFile" |
|
|
|
|
> |
|
|
|
|
<img v-if="imgUrl" :src="imgUrl" class="avatar" /> |
|
|
|
|
<el-icon v-else class="avatar-uploader-icon"> |
|
|
|
|
<Plus /> |
|
|
|
|
</el-icon> |
|
|
|
|
</el-upload> |
|
|
|
|
<!-- <el-upload |
|
|
|
|
v-model:file-list="FileList" |
|
|
|
|
:http-request="upload" |
|
|
|
|
v-model:file-list="fileList" |
|
|
|
|
class="upload-demo" |
|
|
|
|
multiple |
|
|
|
|
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" |
|
|
|
|
:on-preview="handlePreview" |
|
|
|
|
:on-remove="handleRemove" |
|
|
|
|
list-type="picture" |
|
|
|
|
> |
|
|
|
|
<el-button type="primary">点击上传</el-button> |
|
|
|
|
<el-button type="primary">点击上传资源</el-button> |
|
|
|
|
<template #tip> |
|
|
|
|
<div class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> |
|
|
|
|
<div class="el-upload__tip"> |
|
|
|
|
jpg/png files with a size less than 500kb |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
</el-upload> --> |
|
|
|
|
</el-upload> |
|
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
|
|
<el-form-item class="bottom-box"> |
|
|
|
|
<el-button type="info" @click="onRemoval">取消</el-button> |
|
|
|
|
<el-button type="primary">确定</el-button> |
|
|
|
|
<el-form-item label="资源简介" prop="description"> |
|
|
|
|
<div class="editor"> |
|
|
|
|
<quill-editor |
|
|
|
|
v-model:description="formModel.description" |
|
|
|
|
content-type="html" |
|
|
|
|
theme="snow" |
|
|
|
|
></quill-editor> |
|
|
|
|
</div> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item> |
|
|
|
|
<el-button type="primary">取消</el-button> |
|
|
|
|
<el-button type="info">确定</el-button> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-form> |
|
|
|
|
</el-drawer> |
|
|
|
|
</template> |
|
|
|
|
<style scoped></style> |
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
.editor { |
|
|
|
|
width: 100%; |
|
|
|
|
|
|
|
|
|
:deep(.ql-editor) { |
|
|
|
|
min-height: 200px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
