1，定义组件（根据实际调整提交分析结果方法）
<template><!-- 分析结果上传对话框组件 --><el-dialogv-model="uploadResultDialog":title="title":width="width":before-close="handleBeforeClose"><el-form:model="uploadResultModel":rules="uploadResultRules"ref="uploadResultRef"label-width="80px"><el-form-item label="结果" prop="result"><el-inputv-model="uploadResultModel.result"type="textarea"autocomplete="off":rows="rows"/></el-form-item></el-form><template #footer><div class="dialog-footer"><el-button @click="handleCancel">取消</el-button><el-button type="primary" @click="handleUploadResultSubmit">提交</el-button></div></template></el-dialog>
</template><script setup lang="js">
import { ref, reactive, computed, onMounted, nextTick, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { uploadResult } from '@/api/business/arbovirus/denv/denvSample';// 定义组件 props
const props = defineProps({// 对话框标题title: {type: String,default: '提交分析结果'},// 对话框宽度width: {type: String,default: '500px'},// 文本域行数rows: {type: Number,default: 4},// 数据ID（用于更新操作）ids: {type: [String, Number],default: ''},// 查询条件（用于新增操作）query: {type: Object,default: () => ({})},// 是否显示对话框visible: {type: Boolean,default: false}
});// 定义组件事件
const emit = defineEmits(['update:visible','success','error','close'
]);// 组件状态
const uploadResultDialog = ref(false);
const uploadResultModel = ref({result: ''
});
const uploadResultRef = ref(null);
const uploadResultRules = ref({result: [{ required: true, message: '请输入分析结果', trigger: 'blur' }]
});// 打开对话框
const openDialog = (options = {}) => {// 合并传入的选项if (options.title) {uploadResultDialog.value = true;uploadResultModel.value.result = '';} else {uploadResultDialog.value = true;uploadResultModel.value.result = '';}
};// 关闭前回调
const handleBeforeClose = (done) => {uploadResultDialog.value = false;emit('close');done();
};// 取消按钮点击事件
const handleCancel = () => {uploadResultDialog.value = false;emit('update:visible', false);
};// 提交分析结果
const handleUploadResultSubmit = async () => {try {if (props.ids === 123) {ElMessage.success('上传成功!');uploadResultDialog.value = false;emit('update:visible', false);emit('success', "success");} else {ElMessage.error(props.ids || '上传失败');emit('error', "error");}} catch (error) {console.error('上传失败:', error);ElMessage.error('上传过程中发生错误，请稍后再试');emit('error', error);}
};// 监听visible属性变化
watch(() => props.visible, (newVal) => {if (newVal) {openDialog();} else {uploadResultDialog.value = false;}
});// 组件加载时重置表单
onMounted(() => {uploadResultModel.value.result = '';
});// 暴露组件方法
defineExpose({openDialog,handleUploadResultSubmit
});
</script><style scoped>
.dialog-footer {display: flex;justify-content: flex-end;gap: 10px;
}
</style>
2，组件调用（根据实际情况进行调整）
<template><div><el-button type="primary" @click="openUploadDialog">上传分析结果</el-button><!-- 引用封装的组件 --><UploadResultDialogv-model:visible="dialogVisible":ids="currentId":query="searchQuery"@success="handleUploadSuccess"@error="handleUploadError"/></div>
</template><script setup lang="js">
import { ref } from 'vue';
import UploadResultDialog from '@/components/business/uploadResultDialog.vue';const dialogVisible = ref(false);
const currentId = ref(123); // 当前数据ID
const searchQuery = ref({ /* 查询条件 */ });const openUploadDialog = () => {dialogVisible.value = true;
};const handleUploadSuccess = (data) => {console.log('上传成功:', data);// 刷新数据或执行其他操作
};const handleUploadError = (error) => {console.error('上传错误:', error);
};
</script>
