bug fixes

src/components/base/AppUpload.vue

@@ -5,9 +5,19 @@ import type { UploadProps, UploadUserFile } from 'element-plus'
 import md5 from 'blueimp-md5'
 import { getSignature } from '@/api/base'
 
-const props = withDefaults(defineProps<{ modelValue: string | []; prefix?: string; isPost?: string }>(), {
-  prefix: 'upload/admin/'
-})
+const props = withDefaults(
+  defineProps<{
+    modelValue: string | []
+    prefix?: string
+    size?: number
+    beforeUploadFiles?: (file: any) => boolean | void
+    onChange?: (file: any, files: any) => void
+  }>(),
+  {
+    prefix: 'upload/admin/'
+  }
+)
+
 const emit = defineEmits(['update:modelValue'])
 
 const uploadData = ref()
@@ -39,35 +49,15 @@ const handleBeforeUpload = async (file: any) => {
     url: `${response.host}/${key}`
   }
   file.url = `${response.host}/${key}`
-  if (props.isPost) {
-    if (
-      fileList.value.filter((item: any) => item.name.includes('.png')).length +
-        fileList.value.filter((item: any) => item.name.includes('.jpg')).length +
-        fileList.value.filter((item: any) => item.name.includes('.jpeg')).length >
-      10
-    ) {
-      const videoList = fileList.value.filter((item: any) => item.name.includes('.mp4')).slice(0, 1)
-      const imgList = fileList.value
-        .filter((item: any) => item.name.includes('.png') || item.name.includes('.jpg') || item.name.includes('.jpeg'))
-        .slice(0, 10)
-      fileList.value = [...videoList, ...imgList]
-      ElMessage.warning('支持最多上传10张图片，格式支持jpg，jpeg，png')
-    } else if (fileList.value.filter((item: any) => item.name.includes('.mp4')).length > 1) {
-      const videoList = fileList.value.filter((item: any) => item.name.includes('.mp4')).slice(0, 1)
-      const imgList = fileList.value
-        .filter((item: any) => item.name.includes('.png') || item.name.includes('.jpg') || item.name.includes('.jpeg'))
-        .slice(0, 10)
-      fileList.value = [...videoList, ...imgList]
-      ElMessage.warning('视频最多长传1个')
-    }
+  if (props.beforeUploadFiles) {
+    return props.beforeUploadFiles(file)
   }
 }
 
 // 上传成功
-const handleSuccess = (response: any, file: any, files: any) => {
+const handleSuccess: UploadProps['onSuccess'] = (response, file: any, files: any) => {
   if (!files.every((item: any) => item.status === 'success')) return
   if (showFileList.value) {
-    console.log(files)
     emit(
       'update:modelValue',
       files.map((item: any) => {
@@ -90,11 +80,11 @@ const handleExceed: UploadProps['onExceed'] = () => {
 }
 
 // 删除
-const handleRemove: UploadProps['onRemove'] = (file, files) => {
+const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
   if (showFileList.value) {
     emit(
       'update:modelValue',
-      files.map((item: any) => {
+      uploadFiles.map((item: any) => {
         return { name: item.name, url: item.url || item.raw.url }
       })
     )

src/modules/teach/posts/components/AddPostDialog.vue

 <script lang="ts" setup>
 import AppUpload from '@/components/base/AppUpload.vue'
 import type { FormInstance, FormRules } from 'element-plus'
+import { ElMessage } from 'element-plus'
+
 import { useProjectList } from '@/composables/useGetProjectList'
 import { createPosts, getConditionList } from '../api'
 import { useMapStore } from '@/stores/map'
@@ -9,6 +11,7 @@ const typeList = store.getMapValuesByKey('learning_discussion_type')
 const departmentList: any = useProjectList('', '79806610719731712').departmentList
 const ruleFormRef = ref<FormInstance>()
 const emit = defineEmits<Emits>()
+const loading = ref(false)
 defineProps({
   isShowAddDialog: {
     type: Boolean
@@ -125,12 +128,14 @@ const handleCancel = () => {
 }
 // 确认
 const handleConfirm = async (formEl: FormInstance | undefined) => {
+  loading.value = true
   if (!formEl) return
   await formEl.validate(valid => {
     if (valid) {
       form.files = JSON.stringify(form.files)
       const params: any = Object.assign({}, form)
       createPosts(params).then(() => {
+        loading.value = false
         emit('update:isShowAddDialog', false)
         emit('create')
       })
@@ -165,10 +170,38 @@ const handleChangeCourse = () => {
   form.chapter_id = ''
   chapterList.value = []
 }
+const videoLimit = $computed(() => {
+  return form.files.filter((item: any) => item.url.includes('.mp4'))
+})
+const imgLimit = $computed(() => {
+  return form.files.filter(
+    (item: any) => item.url.includes('.png') || item.url.includes('.jpg') || item.url.includes('.jpeg')
+  )
+})
+
+const beforeUploadFiles = (file: any) => {
+  console.log(file)
+  if (file.type.includes('video/') && file.size > 104857600) {
+    ElMessage.warning('视频大小不能超过100MB')
+    return false
+  }
+  if (file.type.includes('image/') && file.size > 2097152) {
+    ElMessage.warning('图片大小不能超过2MB')
+    return false
+  }
+  if (imgLimit.length >= 10 && (file.url.includes('.png') || file.url.includes('.jpg') || file.url.includes('.jpeg'))) {
+    ElMessage.warning('最多只能上传10张图片')
+    return false
+  }
+  if (videoLimit.length >= 1 && file.url.includes('.mp4')) {
+    ElMessage.warning('最多只能上传1个视频')
+    return false
+  }
+}
 </script>
 <template>
-  <el-dialog :model-value="isShowAddDialog" draggable title="新建帖子" :before-close="handleCancel">
-    <div style="height: 40vh; overflow-y: auto">
+  <el-dialog :model-value="isShowAddDialog" title="新建帖子" :before-close="handleCancel">
+    <div style="height: 65vh; overflow-y: auto">
       <el-form
         :model="form"
         label-position="right"
@@ -242,10 +275,9 @@ const handleChangeCourse = () => {
         </el-form-item>
 
         <el-form-item label="标题" prop="title">
-          <el-input v-model="form.title" />
+          <el-input v-model="form.title" placeholder="标题" />
         </el-form-item>
         <el-form-item label="正文内容" prop="content">
-          <!-- <v-editor v-model="form.content" class="editor" :height="200"></v-editor> -->
           <el-input
             v-model="form.content"
             maxlength="500"
@@ -254,23 +286,13 @@ const handleChangeCourse = () => {
             type="textarea"
           />
         </el-form-item>
-        <el-form-item>
-          <div>
-            <div class="upload-video">
-              <div class="upload-box">
-                <AppUpload
-                  accept=".mp4,.png,.jpeg,.jpg"
-                  :multiple="true"
-                  :limit="11"
-                  v-model="form.files"
-                  :isPost="'1'"
-                ></AppUpload>
-              </div>
-            </div>
-            <div class="tips">
-              支持最多上传10张图片，格式支持jpg，jpeg，png，2MB以内 <br />视频最多长传1个，100Mb以内
-            </div>
-          </div>
+        <el-form-item prop="files">
+          <AppUpload v-model="form.files" accept="image/*,video/*" :beforeUploadFiles="beforeUploadFiles">
+            <el-button size="default">上传图片/视频附件</el-button>
+            <template #tip
+              >支持最多上传10张图片，格式支持jpg，jpeg，png，2MB以内<br />视频最多上传1个，100Mb以内
+            </template>
+          </AppUpload>
         </el-form-item>
       </el-form>
     </div>
@@ -278,7 +300,7 @@ const handleChangeCourse = () => {
     <template #footer>
       <span>
         <el-button @click="handleCancel">取消</el-button>
-        <el-button type="primary" @click="handleConfirm(ruleFormRef)">确认</el-button>
+        <el-button type="primary" @click="handleConfirm(ruleFormRef)" :loading="loading">确认</el-button>
       </span>
     </template>
   </el-dialog>

src/modules/teach/posts/components/ReplyPostItem.vue

@@ -166,18 +166,13 @@ const handleDelFloor = (val: any) => {
               alt=""
               class="top_img"
             />
-            <!-- <div
-              class="top_name"
-              v-html="
-                item.from_name !== item.to_name
-                  ? `${item.from_name} &nbsp;回复 &nbsp; ${item.to_name} `
-                  : `${item.to_name}`
-              "
-            ></div> -->
-            <div class="top_name" v-if="item.from_name !== item.to_name">
+
+            <div class="top_name" v-if="item.floor_id !== item.reply_id">
               {{ item.from_name }}&nbsp;回复 &nbsp;<span style="color: #3571e0">{{ item.to_name }}</span>
             </div>
-            <div class="top_name" v-else>{{ item.to_name }}</div>
+            <div class="top_name" v-if="item.floor_id === item.reply_id">
+              {{ item.from_name }}
+            </div>
           </div>
           <div class="list_con" v-html="item.content"></div>
           <div class="list_bottom">