绘制icd文件管理页面

src/views/system/icd/form.vue

@@ -0,0 +1,120 @@
+<template>
+    <el-dialog draggable width="600px" v-model="dialogVisible" :title="title">
+        <el-form :inline="false" :model="form" label-width="auto" class="form-one" :rules="rules" ref="formRef">
+            <el-form-item label="文件名称" prop="name">
+                <el-input
+                    v-model.trim="form.name"
+                    clearable
+                    maxlength="32"
+                    show-word-limit
+                    placeholder="请输入icd文件名称"
+                />
+            </el-form-item>
+            <el-form-item label="存储的地址" prop="path">
+                <el-input
+                    v-model.trim="form.path"
+                    clearable
+                    maxlength="32"
+                    show-word-limit
+                    placeholder="请输入icd文件名称"
+                />
+            </el-form-item>
+            <el-form-item label="文件" prop="path">
+                <el-upload
+                    v-model:file-list="form.reportPath"
+                    ref="uploadRef"
+                    action=""
+                    accept=""
+                    :limit="1"
+                    :on-exceed="handleExceed"
+                    :auto-upload="false"
+                    :on-remove="removeFile"
+                >
+                    <template #trigger>
+                        <el-button type="primary">上传文件</el-button>
+                    </template>
+                </el-upload>
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="dialogVisible = false">取消</el-button>
+                <el-button type="primary" @click="submit">确认</el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+<script lang="ts" setup>
+import { ref, inject, onMounted } from 'vue'
+import { reactive } from 'vue'
+import { getActionClasses, addTimer, updateTimer } from '@/api/system-boot/csDictData'
+import { UploadInstance, UploadProps, UploadRawFile, ElMessage, genFileId } from 'element-plus'
+const emit = defineEmits(['submit'])
+const dialogVisible = ref(false)
+const title = ref('')
+// 注意不要和表单ref的命名冲突
+const form = reactive<anyObj>({
+    cron: '',
+    path: '',
+    reportPath: []
+})
+const formRef = ref()
+const rules = {
+    path: [{ required: true, message: '请选择任务执行器', trigger: 'change' }],
+    name: [{ required: true, message: '请输入任务名称', trigger: 'blur' }]
+}
+
+const open = (text: string, data?: anyObj) => {
+    title.value = text
+    dialogVisible.value = true
+    if (data) {
+        // 表单赋值
+        for (let key in form) {
+            form[key] = data[key]
+        }
+    } else {
+        // 在此处恢复默认表单
+        for (let key in form) {
+            key == 'sort' ? (form[key] = 100) : (form[key] = '')
+        }
+    }
+}
+// 上传报告
+const uploadRef = ref()
+
+const handleExceed: UploadProps['onExceed'] = files => {
+    uploadRef.value!.clearFiles()
+    const file = files[0] as UploadRawFile
+    file.uid = genFileId()
+    uploadRef.value!.handleStart(file)
+}
+
+//移除文件上传
+const removeFile = (file: any, uploadFiles: any) => {
+    console.log(file, uploadFiles)
+}
+onMounted(() => {})
+const submit = () => {
+    console.log('🚀 ~ form:', form)
+
+    formRef.value.validate(async (valid: boolean) => {
+        if (valid) {
+            if (title.value == '新增定时任务') {
+                // addTimer(form).then(res => {
+                //     ElMessage.success('新增成功')
+                //     dialogVisible.value = false
+                //     emit('submit')
+                // })
+            } else {
+                // updateTimer(form).then(res => {
+                //     ElMessage.success('新增成功')
+                //     dialogVisible.value = false
+                //     emit('submit')
+                // })
+            }
+        }
+    })
+}
+
+defineExpose({ open })
+</script>