|
|
@@ -7,7 +7,11 @@
|
|
|
@ok="handleUploadOk"
|
|
|
@cancel="handleUploadCancel"
|
|
|
>
|
|
|
- <a-form :model="uploadForm" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
|
|
|
+ <a-form :model="uploadForm"
|
|
|
+ ref="formRef"
|
|
|
+ :rules="formRules"
|
|
|
+ :label-col="{ span: 6 }"
|
|
|
+ :wrapper-col="{ span: 16 }">
|
|
|
<!-- <a-form-item label="资源名称" name="resourceName">
|
|
|
<a-input v-model:value="uploadForm.resourceName" placeholder="请输入资源名称" />
|
|
|
</a-form-item> -->
|
|
|
@@ -24,122 +28,139 @@
|
|
|
</a-form-item> -->
|
|
|
|
|
|
<a-form-item label="资源描述" name="courseDesc">
|
|
|
- <a-textarea v-model:value="uploadForm.resourceDesc" placeholder="请输入资源描述" :rows="4" />
|
|
|
+ <a-textarea v-model:value="uploadForm.courseDesc" placeholder="请输入资源描述" :rows="4"/>
|
|
|
</a-form-item>
|
|
|
|
|
|
<a-form-item label="上传封面" name="coverImageId">
|
|
|
- <coverUpload @handleChangeCover="handleChangeCover" @handleRemoveCover="handleRemoveCover"></coverUpload>
|
|
|
+ <coverUpload @handleChangeCover="handleChangeCover"
|
|
|
+ @handleRemoveCover="handleRemoveCover"></coverUpload>
|
|
|
</a-form-item>
|
|
|
</a-form>
|
|
|
</a-modal>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
- import { ref, reactive } from 'vue'
|
|
|
- import { Modal, Upload, message } from 'ant-design-vue'
|
|
|
- import { PlusOutlined } from '@ant-design/icons-vue'
|
|
|
- import coverUpload from './coverUpload/index.vue'
|
|
|
- import tool from '@/utils/tool'
|
|
|
- import sysConfig from "@/config";
|
|
|
-
|
|
|
- // const props = defineProps({
|
|
|
- // isState: {
|
|
|
- // type: Number,
|
|
|
- // required: true,
|
|
|
- // default: 0
|
|
|
- // }
|
|
|
- // })
|
|
|
- const headers = ref({
|
|
|
- token: tool.data.get('TOKEN')
|
|
|
- })
|
|
|
- const action = ref(sysConfig.API_URL+'/api/webapp/dev/file/uploadMinioReturnId')
|
|
|
- const emit = defineEmits(['close', 'confirm'])
|
|
|
-
|
|
|
- // 表单数据
|
|
|
- const uploadForm = reactive({
|
|
|
+import {ref, reactive} from 'vue'
|
|
|
+import {Modal, Upload, message} from 'ant-design-vue'
|
|
|
+import {PlusOutlined} from '@ant-design/icons-vue'
|
|
|
+import coverUpload from './coverUpload/index.vue'
|
|
|
+import tool from '@/utils/tool'
|
|
|
+import sysConfig from "@/config";
|
|
|
+import {required} from "@/utils/formRules";
|
|
|
+import dictApi from "@/api/dev/dictApi";
|
|
|
+
|
|
|
+// const props = defineProps({
|
|
|
+// isState: {
|
|
|
+// type: Number,
|
|
|
+// required: true,
|
|
|
+// default: 0
|
|
|
+// }
|
|
|
+// })
|
|
|
+const headers = ref({
|
|
|
+ token: tool.data.get('TOKEN')
|
|
|
+})
|
|
|
+const formRef = ref(null)
|
|
|
+
|
|
|
+const formRules = {
|
|
|
+ courseDesc: [required('请输入资源描述', 'blur')],
|
|
|
+ coverImageId: [required('请选择封面', 'change')],
|
|
|
+}
|
|
|
+const action = ref(sysConfig.API_URL + '/api/webapp/dev/file/uploadMinioReturnId')
|
|
|
+const emit = defineEmits(['close', 'confirm'])
|
|
|
+
|
|
|
+// 表单数据
|
|
|
+const uploadForm = reactive({
|
|
|
+ // resourceName: null,
|
|
|
+ // resourceType: null,
|
|
|
+ // courseName: null,
|
|
|
+ courseDesc: undefined,
|
|
|
+ coverImageId: undefined
|
|
|
+})
|
|
|
+
|
|
|
+// 封面文件列表
|
|
|
+const coverFileList = ref([])
|
|
|
+const fileList = ref([])
|
|
|
+
|
|
|
+const uploadModalVisible = ref(true)
|
|
|
+
|
|
|
+// 显示上传模态框
|
|
|
+// const showUploadModal = () => {
|
|
|
+// uploadModalVisible.value = true
|
|
|
+// }
|
|
|
+
|
|
|
+// 关闭模态框
|
|
|
+const handleUploadCancel = () => {
|
|
|
+ // uploadModalVisible.value = false
|
|
|
+ Object.assign(uploadForm, {
|
|
|
// resourceName: null,
|
|
|
- // resourceType: null,
|
|
|
+ courseDesc: undefined,
|
|
|
// courseName: null,
|
|
|
- resourceDesc: null,
|
|
|
- coverImageId: '123'
|
|
|
+ // courseDesc: null,
|
|
|
+ coverImageId: undefined
|
|
|
})
|
|
|
+ fileList.value = []
|
|
|
+ coverFileList.value = []
|
|
|
+ emit('close')
|
|
|
+}
|
|
|
|
|
|
- // 封面文件列表
|
|
|
- const coverFileList = ref([])
|
|
|
- const fileList = ref([])
|
|
|
-
|
|
|
- const uploadModalVisible = ref(true)
|
|
|
-
|
|
|
- // 显示上传模态框
|
|
|
- // const showUploadModal = () => {
|
|
|
- // uploadModalVisible.value = true
|
|
|
- // }
|
|
|
+const handleUploadOk = () => {
|
|
|
+ formRef.value.validate().then(() => {
|
|
|
|
|
|
- // 关闭模态框
|
|
|
- const handleUploadCancel = () => {
|
|
|
- // uploadModalVisible.value = false
|
|
|
- Object.assign(uploadForm, {
|
|
|
- // resourceName: null,
|
|
|
- resourceDesc: null,
|
|
|
- // courseName: null,
|
|
|
- // courseDesc: null,
|
|
|
- coverImageId: null
|
|
|
- })
|
|
|
- fileList.value = []
|
|
|
- coverFileList.value = []
|
|
|
- emit('close')
|
|
|
- }
|
|
|
-
|
|
|
- const handleUploadOk = () => {
|
|
|
// 这里可以添加实际的上传逻辑
|
|
|
- console.log('Upload confirmed:', uploadForm.fileId, fileList.value, coverFileList.value)
|
|
|
- emit('confirm', uploadForm)
|
|
|
+ // console.log('Upload confirmed:', uploadForm.fileId, fileList.value, coverFileList.value)
|
|
|
+ console.log('追一下',uploadForm)
|
|
|
+ let json = JSON.parse(JSON.stringify(uploadForm))
|
|
|
+ emit('confirm', json)
|
|
|
// uploadModalVisible.value = false
|
|
|
Object.assign(uploadForm, {
|
|
|
// resourceName: null,
|
|
|
// resourceType: null,
|
|
|
// courseName: null,
|
|
|
- resourceDesc: null,
|
|
|
- coverImageId: null
|
|
|
+ courseDesc: undefined,
|
|
|
+ coverImageId: undefined
|
|
|
})
|
|
|
fileList.value = []
|
|
|
coverFileList.value = []
|
|
|
- }
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+}
|
|
|
|
|
|
- // 封面文件id
|
|
|
- const handleChangeCover = (fileId) => {
|
|
|
- uploadForm.coverImageId = fileId
|
|
|
- }
|
|
|
+// 封面文件id
|
|
|
+const handleChangeCover = (fileId) => {
|
|
|
+ uploadForm.coverImageId = fileId
|
|
|
+}
|
|
|
|
|
|
- // 移除封面文件
|
|
|
- const handleRemoveCover = () => {
|
|
|
- uploadForm.coverImageId = null
|
|
|
- }
|
|
|
+// 移除封面文件
|
|
|
+const handleRemoveCover = () => {
|
|
|
+ uploadForm.coverImageId = undefined
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
- .upload-area {
|
|
|
- border: 2px dashed #3ca9f5;
|
|
|
- padding: 40px;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .upload-area p {
|
|
|
- margin: 10px 0;
|
|
|
- }
|
|
|
-
|
|
|
- .file-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin: 10px 0;
|
|
|
- }
|
|
|
-
|
|
|
- .file-item .ant-progress {
|
|
|
- flex: 1;
|
|
|
- margin: 0 10px;
|
|
|
- }
|
|
|
- .ant-upload-picture-card-wrapper .ant-upload-list-item-info .ant-upload-list-item-filename {
|
|
|
- display: block; /* 确保文件名显示为块级元素 */
|
|
|
- margin-top: 8px; /* 调整文件名与图片之间的间距 */
|
|
|
- }
|
|
|
+.upload-area {
|
|
|
+ border: 2px dashed #3ca9f5;
|
|
|
+ padding: 40px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.upload-area p {
|
|
|
+ margin: 10px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.file-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin: 10px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.file-item .ant-progress {
|
|
|
+ flex: 1;
|
|
|
+ margin: 0 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.ant-upload-picture-card-wrapper .ant-upload-list-item-info .ant-upload-list-item-filename {
|
|
|
+ display: block; /* 确保文件名显示为块级元素 */
|
|
|
+ margin-top: 8px; /* 调整文件名与图片之间的间距 */
|
|
|
+}
|
|
|
</style>
|
于添