|
|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<div class="cover-upload-row">
|
|
|
<div v-if="form.coverUrl != ''" class="cover-upload-box">
|
|
|
- <a-image :src="form.coverUrl" class="cover-img"/>
|
|
|
+ <a-image :src="form.coverUrl" class="cover-img" />
|
|
|
</div>
|
|
|
<a-upload
|
|
|
:show-upload-list="false"
|
|
|
@@ -9,218 +9,221 @@
|
|
|
accept=".jpg,.png"
|
|
|
:action="action"
|
|
|
:headers="headers"
|
|
|
- @change ="handleChange"
|
|
|
+ @change="handleChange"
|
|
|
>
|
|
|
-<!-- <div class="cover-upload-box">-->
|
|
|
-<!-- <PictureOutlined style="font-size: 32px; color: #bbb"/>-->
|
|
|
-<!-- </div>-->
|
|
|
- <a-button v-if="form.coverUrl == ''" >上传图片</a-button>
|
|
|
- <a-button v-if="form.coverUrl != ''" >更改图片</a-button>
|
|
|
+ <!-- <div class="cover-upload-box">-->
|
|
|
+ <!-- <PictureOutlined style="font-size: 32px; color: #bbb"/>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <a-button v-if="form.coverUrl == ''">上传图片</a-button>
|
|
|
+ <a-button v-if="form.coverUrl != ''">更改图片</a-button>
|
|
|
</a-upload>
|
|
|
|
|
|
-
|
|
|
<div class="cover-tip" style="margin-left: 10px">支持jpg、png等格式文件上传，文件大小不超过10MB</div>
|
|
|
</div>
|
|
|
-
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import {ref, reactive, watch, defineProps, defineEmits} from 'vue'
|
|
|
-import {message} from 'ant-design-vue'
|
|
|
-import {PictureOutlined, CloudUploadOutlined} from '@ant-design/icons-vue'
|
|
|
-import tool from "@/utils/tool";
|
|
|
-import sysConfig from '@/config/index'
|
|
|
-
|
|
|
-const action = ref(sysConfig.API_URL + `/api/webapp/dev/file/${props.urlType==1?'uploadMinioReturnId':'uploadMinioReturnUrl'}`)
|
|
|
-const headers = ref({
|
|
|
- token: tool.data.get('TOKEN')
|
|
|
-})
|
|
|
-
|
|
|
-const props = defineProps({
|
|
|
- count: Number,
|
|
|
- default : () => 1,
|
|
|
- modelValue: [String, Number, Boolean, Object, Array, null],
|
|
|
- urlType: {
|
|
|
- type: [String,Number],
|
|
|
- default: 1
|
|
|
- }
|
|
|
-})
|
|
|
+ import { ref, reactive, watch, defineProps, defineEmits } from 'vue'
|
|
|
+ import { message } from 'ant-design-vue'
|
|
|
+ import { PictureOutlined, CloudUploadOutlined } from '@ant-design/icons-vue'
|
|
|
+ import tool from '@/utils/tool'
|
|
|
+ import sysConfig from '@/config/index'
|
|
|
+ const props = defineProps({
|
|
|
+ count: Number,
|
|
|
+ modelValue: [String, Number, Boolean, Object, Array, null],
|
|
|
+ urlType: {
|
|
|
+ type: [String, Number],
|
|
|
+ default: 1
|
|
|
+ }
|
|
|
+ })
|
|
|
|
|
|
-const emit = defineEmits(['update:visible','update:modelValue', 'ok','handlerUpSelect','handlerNewSelect','handlerUpImage'])
|
|
|
+ const emit = defineEmits([
|
|
|
+ 'update:visible',
|
|
|
+ 'update:modelValue',
|
|
|
+ 'ok',
|
|
|
+ 'handlerUpSelect',
|
|
|
+ 'handlerNewSelect',
|
|
|
+ 'handlerUpImage',
|
|
|
+ 'upload-done'
|
|
|
+ ])
|
|
|
+ const action = ref(
|
|
|
+ sysConfig.API_URL + `/api/webapp/dev/file/${props.urlType === 1 ? 'uploadMinioReturnId' : 'uploadMinioReturnUrl'}`
|
|
|
+ )
|
|
|
+ const headers = ref({
|
|
|
+ token: tool.data.get('TOKEN')
|
|
|
+ })
|
|
|
|
|
|
-const modalVisible = ref(props.visible)
|
|
|
-watch(
|
|
|
- () => props.visible,
|
|
|
- (v) => {
|
|
|
- modalVisible.value = v
|
|
|
- }
|
|
|
-)
|
|
|
-watch(modalVisible, (v) => {
|
|
|
- emit('update:visible', v)
|
|
|
-})
|
|
|
-
|
|
|
-const formRef = ref()
|
|
|
-const file = ref({
|
|
|
- id : '',
|
|
|
- name: '',
|
|
|
-})
|
|
|
-const form = reactive({
|
|
|
-
|
|
|
- id : '',
|
|
|
- title: '',
|
|
|
- video: '',
|
|
|
- coverUrl: '',
|
|
|
- docUrl: '',
|
|
|
- srtUrl: ''
|
|
|
-})
|
|
|
-
|
|
|
-
|
|
|
-const beforeUploadImg = (file)=> {
|
|
|
- const isImg = file.type === 'image/jpeg' || file.type === 'image/png'
|
|
|
- const isLt10M = file.size / 1024 / 1024 < 10
|
|
|
- if (!isImg) {
|
|
|
- message.error('只能上传jpg/png图片')
|
|
|
- return false
|
|
|
+ const modalVisible = ref(props.visible)
|
|
|
+ watch(
|
|
|
+ () => props.visible,
|
|
|
+ (v) => {
|
|
|
+ modalVisible.value = v
|
|
|
+ }
|
|
|
+ )
|
|
|
+ watch(modalVisible, (v) => {
|
|
|
+ emit('update:visible', v)
|
|
|
+ })
|
|
|
+
|
|
|
+ const formRef = ref()
|
|
|
+ const file = ref({
|
|
|
+ id: '',
|
|
|
+ name: ''
|
|
|
+ })
|
|
|
+ const form = reactive({
|
|
|
+ id: '',
|
|
|
+ title: '',
|
|
|
+ video: '',
|
|
|
+ coverUrl: '',
|
|
|
+ docUrl: '',
|
|
|
+ srtUrl: ''
|
|
|
+ })
|
|
|
+
|
|
|
+ const beforeUploadImg = (file) => {
|
|
|
+ const isImg = file.type === 'image/jpeg' || file.type === 'image/png'
|
|
|
+ const isLt10M = file.size / 1024 / 1024 < 10
|
|
|
+ if (!isImg) {
|
|
|
+ message.error('只能上传jpg/png图片')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ if (!isLt10M) {
|
|
|
+ message.error('图片不能超过10MB')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ // mock上传
|
|
|
+ const reader = new FileReader()
|
|
|
+ reader.onload = (e) => {
|
|
|
+ form.coverUrl = e.target.result
|
|
|
+ }
|
|
|
+ reader.readAsDataURL(file)
|
|
|
+ return true
|
|
|
}
|
|
|
- if (!isLt10M) {
|
|
|
- message.error('图片不能超过10MB')
|
|
|
- return false
|
|
|
+
|
|
|
+ //回显用显示图片
|
|
|
+ const setData = (data) => {
|
|
|
+ if (!data.url || data.url === '') {
|
|
|
+ form.coverUrl = ''
|
|
|
+ } else {
|
|
|
+ // 如果已经是完整URL，直接使用；否则拼接文件服务器地址
|
|
|
+ form.coverUrl = data.url.startsWith('http') ? data.url : sysConfig.FILE_URL + data.url
|
|
|
+ }
|
|
|
+
|
|
|
+ form.id = data.id
|
|
|
+ emit('handlerUpImage', form.id)
|
|
|
+ emit('update:modelValue', form.id)
|
|
|
}
|
|
|
- // mock上传
|
|
|
- const reader = new FileReader()
|
|
|
- reader.onload = (e) => {
|
|
|
- form.coverUrl = e.target.result
|
|
|
+
|
|
|
+ const handleChange = (res) => {
|
|
|
+ console.log('上传图片', res)
|
|
|
+ if (res.file && res.file.response && res.file.response.code == 200) {
|
|
|
+ message.success('上传成功')
|
|
|
+ form.id = res.file.response.data
|
|
|
+ emit('handlerUpImage', form.id)
|
|
|
+ emit('update:modelValue', form.id)
|
|
|
+ emit('upload-done', [{ id: form.id, url: form.coverUrl }])
|
|
|
+ } else if (res.file && res.file.status === 'error') {
|
|
|
+ message.error('上传失败')
|
|
|
+ }
|
|
|
}
|
|
|
- reader.readAsDataURL(file)
|
|
|
- return true
|
|
|
-}
|
|
|
-
|
|
|
-//回显用显示图片
|
|
|
-const setData = (data) => {
|
|
|
- if(data.url == ''){
|
|
|
- form.coverUrl = ''
|
|
|
- }else{
|
|
|
- form.coverUrl = sysConfig.FILE_URL+data.url
|
|
|
+ const setFile = (fileData) => {
|
|
|
+ console.log('设置了文件', fileData)
|
|
|
+ file.value.id = fileData.id
|
|
|
+ file.value.name = fileData.fileName
|
|
|
}
|
|
|
|
|
|
- form.id = data.id
|
|
|
- emit('handlerUpImage',form.id)
|
|
|
- emit('update:modelValue', form.id)
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
+ const handleOk = () => {
|
|
|
+ formRef.value.validate().then(() => {
|
|
|
+ emit('ok', { ...form })
|
|
|
+ modalVisible.value = false
|
|
|
+ })
|
|
|
+ }
|
|
|
|
|
|
-const handleChange = (res) => {
|
|
|
- console.log('上传图片',res)
|
|
|
- if (res.file && res.file.response && res.file.response.code == 200) {
|
|
|
- message.success('上传成功')
|
|
|
- form.id = res.file.response.data
|
|
|
- emit('handlerUpImage',form.id)
|
|
|
- emit('update:modelValue', form.id)
|
|
|
- } else {
|
|
|
- // message.error('上传失败')
|
|
|
+ const getData = (callBack) => {
|
|
|
+ formRef.value.validate().then(() => {
|
|
|
+ callBack({ ...form })
|
|
|
+ })
|
|
|
}
|
|
|
-}
|
|
|
-const setFile = (fileData) => {
|
|
|
- console.log("设置了文件",fileData)
|
|
|
- file.value.id = fileData.id
|
|
|
- file.value.name = fileData.fileName
|
|
|
-}
|
|
|
-
|
|
|
-const handleOk = () =>{
|
|
|
- formRef.value.validate().then(() => {
|
|
|
- emit('ok', {...form})
|
|
|
+
|
|
|
+ const handleCancel = () => {
|
|
|
modalVisible.value = false
|
|
|
- })
|
|
|
-}
|
|
|
+ }
|
|
|
|
|
|
-const getData = (callBack) => {
|
|
|
- formRef.value.validate().then(() => {
|
|
|
- callBack({...form})
|
|
|
+ defineExpose({
|
|
|
+ getData,
|
|
|
+ setFile,
|
|
|
+ setData
|
|
|
})
|
|
|
-}
|
|
|
-
|
|
|
-const handleCancel = () => {
|
|
|
- modalVisible.value = false
|
|
|
-}
|
|
|
-
|
|
|
-defineExpose({
|
|
|
- getData,setFile,setData
|
|
|
-})
|
|
|
</script>
|
|
|
|
|
|
-
|
|
|
<style lang="less" scoped>
|
|
|
-.add-class-hours-modal {
|
|
|
- .ant-modal-content {
|
|
|
- border-radius: 10px;
|
|
|
- }
|
|
|
+ .add-class-hours-modal {
|
|
|
+ .ant-modal-content {
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
|
|
|
- .ant-modal-header {
|
|
|
- border-radius: 10px 10px 0 0;
|
|
|
- }
|
|
|
+ .ant-modal-header {
|
|
|
+ border-radius: 10px 10px 0 0;
|
|
|
+ }
|
|
|
|
|
|
- .ant-form-item {
|
|
|
- margin-bottom: 24px;
|
|
|
- }
|
|
|
+ .ant-form-item {
|
|
|
+ margin-bottom: 24px;
|
|
|
+ }
|
|
|
|
|
|
- .video-select-row {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
+ .video-select-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-}
|
|
|
+ .cover-upload-row {
|
|
|
+ // display: flex;
|
|
|
+ // align-items: center;
|
|
|
|
|
|
-.cover-upload-row {
|
|
|
- // display: flex;
|
|
|
- // align-items: center;
|
|
|
-
|
|
|
- .cover-upload-box {
|
|
|
- width: 120px;
|
|
|
- height: 120px;
|
|
|
- background: #f7f8fa;
|
|
|
- border-radius: 8px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- margin-right: 24px;
|
|
|
- border: 1px dashed #d9d9d9;
|
|
|
- cursor: pointer;
|
|
|
-
|
|
|
- .cover-img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- object-fit: cover;
|
|
|
+ .cover-upload-box {
|
|
|
+ width: 120px;
|
|
|
+ height: 120px;
|
|
|
+ background: #f7f8fa;
|
|
|
border-radius: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .cover-placeholder {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- color: #bbb;
|
|
|
- font-size: 32px;
|
|
|
+ margin-right: 24px;
|
|
|
+ border: 1px dashed #d9d9d9;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ .cover-img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ border-radius: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cover-placeholder {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ color: #bbb;
|
|
|
+ font-size: 32px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .cover-tip {
|
|
|
+ color: #888;
|
|
|
+ font-size: 13px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .cover-tip {
|
|
|
+ .upload-tip {
|
|
|
color: #888;
|
|
|
font-size: 13px;
|
|
|
+ margin-left: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer-btns {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ gap: 16px;
|
|
|
+ margin-top: 24px;
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-.upload-tip {
|
|
|
- color: #888;
|
|
|
- font-size: 13px;
|
|
|
- margin-left: 12px;
|
|
|
-}
|
|
|
-
|
|
|
-.footer-btns {
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- gap: 16px;
|
|
|
- margin-top: 24px;
|
|
|
-}
|
|
|
</style>
|
tanshanming