资源管理页面微调

frontend/src/views/resourceManage/components/resourceManagePopup.vue

@@ -1,7 +1,7 @@
 <template>
     <el-dialog
         v-model="dialogVisible"
-        title="新增资源"
+        :title="dialogTitle"
         width="520px"
         :destroy-on-close="true"
         :close-on-click-modal="!submitting"
@@ -14,7 +14,7 @@
             <el-form-item label="备注" prop="remark">
                 <el-input v-model="form.remark" maxlength="250" placeholder="请输入备注" type="textarea" :rows="3" />
             </el-form-item>
-            <el-form-item label="文件" prop="file">
+            <el-form-item v-if="mode === 'add'" label="文件" prop="file">
                 <el-upload
                     ref="uploadRef"
                     action="#"
@@ -41,7 +41,7 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref } from 'vue'
+import { computed, reactive, ref } from 'vue'
 import {
     ElMessage,
     genFileId,
@@ -53,7 +53,8 @@ import {
     type UploadRawFile
 } from 'element-plus'
 import { Upload } from '@element-plus/icons-vue'
-import { addResourceManage } from '@/api/resourceManage'
+import { addResourceManage, updateResourceManage } from '@/api/resourceManage'
+import type { ResourceManage } from '@/api/resourceManage/interface'
 
 const MAX_FILE_SIZE = 250 * 1024 * 1024
 
@@ -63,20 +64,25 @@ const props = defineProps<{
 
 const dialogVisible = ref(false)
 const submitting = ref(false)
+const mode = ref<'add' | 'edit'>('add')
 const formRef = ref<FormInstance>()
 const uploadRef = ref<UploadInstance>()
 const fileList = ref<UploadFile[]>([])
 
 const form = reactive<{
+    id: string
     name: string
     remark: string
     file: File | null
 }>({
+    id: '',
     name: '',
     remark: '',
     file: null
 })
 
+const dialogTitle = computed(() => (mode.value === 'edit' ? '编辑资源' : '新增资源'))
+
 const validateFile = (_rule: unknown, value: File | null, callback: (error?: Error) => void) => {
     if (!value) {
         callback(new Error('请选择 MP4 文件'))
@@ -91,12 +97,15 @@ const rules = reactive<FormRules>({
     file: [{ validator: validateFile, trigger: 'change' }]
 })
 
-const open = () => {
-    form.name = ''
-    form.remark = ''
+const open = (type: 'add' | 'edit' = 'add', row?: ResourceManage.ResResourceManage) => {
+    mode.value = type
+    form.id = row?.id ?? ''
+    form.name = row?.name ?? ''
+    form.remark = row?.remark ?? ''
     form.file = null
     fileList.value = []
     dialogVisible.value = true
+    formRef.value?.clearValidate()
 }
 
 const isValidMp4 = (file: File) => {
@@ -139,17 +148,27 @@ const handleExceed: UploadProps['onExceed'] = files => {
 const submit = async () => {
     if (!formRef.value) return
     await formRef.value.validate()
-    if (!form.file) return
 
-    const formData = new FormData()
-    formData.append('name', form.name.trim())
-    formData.append('remark', form.remark.trim())
-    formData.append('file', form.file)
+    const name = form.name.trim()
+    const remark = form.remark.trim()
 
     submitting.value = true
     try {
-        await addResourceManage(formData)
-        ElMessage.success('新增成功')
+        if (mode.value === 'edit') {
+            await updateResourceManage({
+                id: form.id,
+                name,
+                remark
+            })
+        } else {
+            if (!form.file) return
+            const formData = new FormData()
+            formData.append('name', name)
+            formData.append('remark', remark)
+            formData.append('file', form.file)
+            await addResourceManage(formData)
+        }
+        ElMessage.success(mode.value === 'edit' ? '编辑成功' : '新增成功')
         dialogVisible.value = false
         props.refreshTable?.()
     } finally {