pqs-9100_client/frontend/src/views/resourceManage/components/resourceManagePopup.vue

<template>
    <el-dialog
        v-model="dialogVisible"
        :title="dialogTitle"
        width="520px"
        :destroy-on-close="true"
        :close-on-click-modal="!submitting"
        draggable
    >
        <el-form ref="formRef" :model="form" :rules="rules" label-width="90px">
            <el-form-item label="资源名称" prop="name">
                <el-input v-model="form.name" maxlength="250" placeholder="请输入资源名称" />
            </el-form-item>
            <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 v-if="mode === 'add'" label="文件" prop="file">
                <el-upload
                    ref="uploadRef"
                    action="#"
                    :auto-upload="false"
                    :limit="1"
                    accept=".mp4,video/mp4"
                    :file-list="fileList"
                    :on-change="handleFileChange"
                    :on-remove="handleFileRemove"
                    :on-exceed="handleExceed"
                >
                    <el-button type="primary" :icon="Upload">选择文件</el-button>
                    <template #tip>
                        <div class="el-upload__tip">仅支持 MP4 文件，最大 250MB</div>
                    </template>
                </el-upload>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button :disabled="submitting" @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" :loading="submitting" @click="submit">确定</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue'
import {
    ElMessage,
    genFileId,
    type FormInstance,
    type FormRules,
    type UploadFile,
    type UploadInstance,
    type UploadProps,
    type UploadRawFile
} from 'element-plus'
import { Upload } from '@element-plus/icons-vue'
import { addResourceManage, updateResourceManage } from '@/api/resourceManage'
import type { ResourceManage } from '@/api/resourceManage/interface'

const MAX_FILE_SIZE = 250 * 1024 * 1024

const props = defineProps<{
    refreshTable?: () => void
}>()

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 文件'))
        return
    }
    callback()
}

const rules = reactive<FormRules>({
    name: [{ required: true, message: '请输入资源名称', trigger: 'blur' }],
    remark: [{ required: true, message: '请输入备注', trigger: 'blur' }],
    file: [{ validator: validateFile, trigger: 'change' }]
})

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) => {
    return file.name.toLowerCase().endsWith('.mp4') && (!file.type || file.type === 'video/mp4')
}

const handleFileChange: UploadProps['onChange'] = uploadFile => {
    const raw = uploadFile.raw
    if (!raw) return
    if (!isValidMp4(raw)) {
        ElMessage.error('仅支持上传 MP4 文件')
        fileList.value = []
        form.file = null
        return
    }
    if (raw.size > MAX_FILE_SIZE) {
        ElMessage.error('文件大小不能超过 250MB')
        fileList.value = []
        form.file = null
        return
    }
    fileList.value = [uploadFile]
    form.file = raw
    formRef.value?.validateField('file')
}

const handleFileRemove = () => {
    form.file = null
    fileList.value = []
    formRef.value?.validateField('file')
}

const handleExceed: UploadProps['onExceed'] = files => {
    uploadRef.value?.clearFiles()
    const file = files[0] as UploadRawFile
    file.uid = genFileId()
    uploadRef.value?.handleStart(file)
}

const submit = async () => {
    if (!formRef.value) return
    await formRef.value.validate()

    const name = form.name.trim()
    const remark = form.remark.trim()

    submitting.value = true
    try {
        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 {
        submitting.value = false
    }
}

defineExpose({
    open
})
</script>