vue3组件式开发示例

1，定义组件（根据实际调整提交分析结果方法）

<template>
  <!-- 分析结果上传对话框组件 -->
  <el-dialog
    v-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-input
          v-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>

    <!-- 引用封装的组件 -->
    <UploadResultDialog
      v-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>