chore: update

src/components/base/AppUpload.vue

@@ -5,10 +5,17 @@ import type { UploadProps, UploadUserFile } from 'element-plus'
 import md5 from 'blueimp-md5'
 import { getSignature } from '@/api/base'
 
-const props = withDefaults(defineProps<{ modelValue: string | UploadUserFile[]; prefix?: string }>(), {
+interface Props {
+  modelValue: string | { name: string; url: string }[]
+  prefix?: string
+  size?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
   prefix: 'upload/saas-learn/'
 })
-const emit = defineEmits(['update:modelValue'])
+
+const emit = defineEmits(['update:modelValue', 'success'])
 
 const uploadData = ref()
 
@@ -17,7 +24,7 @@ const fileList = ref<UploadUserFile[]>([])
 watch(
   () => props.modelValue,
   value => {
-    fileList.value = Array.isArray(value) ? [...value] : []
+    fileList.value = Array.isArray(value) ? value.map(item => ({ ...item })) : []
   }
 )
 
@@ -27,6 +34,10 @@ const showFileList = computed(() => {
 
 // 上传之前
 const handleBeforeUpload = async (file: any) => {
+  if (props.size && file.size > props.size) {
+    ElMessage.error(`文件大小不能超过${props.size / 1024 / 1024}M`)
+    return false
+  }
   const fileName = file.name
   const key = props.prefix + md5(fileName + new Date().getTime()) + fileName.substr(fileName.lastIndexOf('.'))
   const response: Record<string, any> = await getSignature()
@@ -54,6 +65,7 @@ const handleSuccess = (response: any, file: any, files: any) => {
   } else {
     emit('update:modelValue', file.raw.url)
   }
+  emit('success', file, files)
 }
 
 // 上传限制
@@ -77,7 +89,7 @@ const handleRemove: UploadProps['onRemove'] = (file, files) => {
 
 // 预览
 const handlePreview: UploadProps['onPreview'] = uploadFile => {
-  console.log(uploadFile)
+  window.open(uploadFile.url)
 }
 </script>
 
@@ -100,7 +112,7 @@ const handlePreview: UploadProps['onPreview'] = uploadFile => {
           <el-icon><Plus /></el-icon>
         </template>
         <template v-else>
-          <el-button type="primary" round>点击上传</el-button>
+          <el-button size="default" round>点击上传</el-button>
         </template>
       </template>
       <div class="avatar-uploader" v-else>
@@ -142,9 +154,4 @@ const handlePreview: UploadProps['onPreview'] = uploadFile => {
   height: 100%;
   text-align: center;
 }
-.suggestion-file {
-  display: inline-block;
-  margin-top: 10px;
-  color: blue;
-}
 </style>

src/modules/settings/components/Suggestions.vue

@@ -45,7 +45,9 @@ function handleUpdate() {
       </template>
       <div class="suggestion-main">
         <div class="suggestion-content" v-html="item.content"></div>
-        <a :href="item.files" target="_blank" class="suggestion-file" v-if="item.files">下载附件</a>
+        <a :href="file.url" target="_blank" class="suggestion-file" v-for="file in item.files" :key="file.url">
+          {{ file.name }}
+        </a>
         <p class="t1">发布于：{{ item.created_time }}</p>
         <template v-if="item.status === 2">
           <h2 class="suggestion-title">问题回复</h2>
@@ -86,4 +88,9 @@ function handleUpdate() {
     max-width: 100%;
   }
 }
+.suggestion-file {
+  display: inline-block;
+  margin-top: 10px;
+  color: blue;
+}
 </style>

src/modules/settings/components/SuggestionsForm.vue

@@ -13,7 +13,7 @@ const formRef = $ref<FormInstance>()
 const form = reactive({
   title: '',
   content: '',
-  files: ''
+  files: []
 })
 const rules = ref<FormRules>({
   title: [{ required: true, message: '请输入问题描述', trigger: 'blur' }],
@@ -25,7 +25,8 @@ function handleSubmit() {
 }
 // 修改
 const update = () => {
-  submitSuggestion(form).then(() => {
+  const params = Object.assign({}, form, { files: JSON.stringify(form.files) })
+  submitSuggestion(params).then(() => {
     ElMessage({ message: '提交成功', type: 'success' })
     emit('update')
     formRef?.resetFields()
@@ -43,12 +44,10 @@ const update = () => {
         <AppEditor v-model="form.content" />
       </el-form-item>
       <el-form-item label="上传附件" prop="files">
-        <AppUpload v-model="form.files">
-          <el-button round>点击上传</el-button>
+        <AppUpload v-model="form.files" :limit="1">
           <template #tip>
             （可以上传 word、ppt、png、jpg、zip、rar等资源，多文件请先压缩打包成一个文件后，再上传）
           </template>
-          <p>{{ form.files }}</p>
         </AppUpload>
       </el-form-item>
       <el-form-item>

src/modules/settings/types.ts

 export interface SuggestionType {
   content: string
   created_time: string
-  files: string
+  files: { name: string; url: string }[]
   id: string
   reply: string
   title: string