资源管理页面微调

frontend/src/api/resourceManage/index.ts

@@ -9,6 +9,10 @@ export const addResourceManage = (params: FormData) => {
     return http.upload('/resourceManage/add', params)
 }
 
+export const updateResourceManage = (params: ResourceManage.ReqUpdateResourceManage) => {
+    return http.post('/resourceManage/update', params)
+}
+
 export const getResourceManagePlayUrl = (id: string) => {
     return http.get<ResourceManage.PlayVO>(`/resourceManage/play?id=${id}`)
 }

frontend/src/api/resourceManage/interface/index.ts

@@ -22,6 +22,12 @@ export namespace ResourceManage {
 
     export interface ResResourceManagePage extends ResPage<ResResourceManage> {}
 
+    export interface ReqUpdateResourceManage {
+        id: string
+        name: string
+        remark: string
+    }
+
     export interface PlayVO {
         url: string
     }

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 {

frontend/src/views/resourceManage/index.vue

@@ -16,6 +16,15 @@
                 >
                     播放
                 </el-button>
+                <el-button
+                    v-auth.resourceManage="'edit'"
+                    type="primary"
+                    link
+                    :icon="EditPen"
+                    @click="openEditDialog(scope.row)"
+                >
+                    编辑
+                </el-button>
             </template>
         </ProTable>
     </div>
@@ -25,7 +34,7 @@
 
 <script setup lang="tsx" name="resourceManage">
 import { reactive, ref } from 'vue'
-import { CirclePlus, VideoPlay } from '@element-plus/icons-vue'
+import { CirclePlus, EditPen, VideoPlay } from '@element-plus/icons-vue'
 import ProTable from '@/components/ProTable/index.vue'
 import type { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
 import type { ResourceManage } from '@/api/resourceManage/interface'
@@ -97,7 +106,7 @@ const columns = reactive<ColumnProps<ResourceManage.ResResourceManage>[]>([
     {
         prop: 'relativePath',
         label: '路径',
-        minWidth: 260,
+        width: 200,
         showOverflowTooltip: true
     },
     {
@@ -112,11 +121,15 @@ const columns = reactive<ColumnProps<ResourceManage.ResResourceManage>[]>([
         width: 180,
         render: scope => formatDateTime(scope.row.createTime)
     },
-    { prop: 'operation', label: '操作', fixed: 'right', width: 100 }
+    { prop: 'operation', label: '操作', fixed: 'right', width: 180 }
 ])
 
 const openAddDialog = () => {
-    resourceManagePopup.value?.open()
+    resourceManagePopup.value?.open('add')
+}
+
+const openEditDialog = (row: ResourceManage.ResResourceManage) => {
+    resourceManagePopup.value?.open('edit', row)
 }
 
 const handlePlay = async (row: ResourceManage.ResResourceManage) => {