yjhtgl-web/src/views/dataManagement/dataManagementADD.vue

<template>
  <div class="common-dialog">
    <div class="common-dialog-content">
      <div class="common-dialog-title-box">
        <h3 class="common-dialog-title">新建数据</h3>
      </div>
      <div class="common-dialog-box">
        <el-form ref="form" :model="formData" :rules="rules" label-width="auto">
          <el-form-item label="工程名称：" prop="name">
            <el-input v-model="formData.name" style="width: 468px !important" />
          </el-form-item>
          <el-form-item label="建设单位：" prop="unit">
            <el-input v-model="formData.unit" style="width: 468px !important" />
          </el-form-item>
          <el-form-item label="维护单位：" prop="maintainUnit">
            <el-input v-model="formData.maintainUnit" style="width: 468px !important" />
          </el-form-item>
          <el-form-item label="人防专业监理工程师：" prop="engineer">
            <el-input v-model="formData.engineer" style="width: 468px !important" />
          </el-form-item>
          <el-form-item label="建设地点：" prop="location">
            <el-input v-model="formData.location" style="width: 468px !important" />
          </el-form-item>
          <el-form-item label="操作方式：" prop="operation">
            <el-input v-model="formData.operation" style="width: 468px !important" />
          </el-form-item>
          <el-form-item label="应建人防地下室面积（㎡）：" prop="plannedArea">
            <el-input v-model="formData.plannedArea" style="width: 468px !important" />
          </el-form-item>
          <el-form-item label="实建人防地下室面积（㎡）：" prop="actualArea">
            <el-input v-model="formData.actualArea" style="width: 468px !important" />
          </el-form-item>
          <el-form-item label="更新时间：" prop="updateTime">
            <el-input v-model="formData.updateTime" style="width: 468px !important" />
          </el-form-item>
        </el-form>
        <div class="common-dialog-footer">
          <el-button @click="closeDialog">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { addPersonnel } from '@/api/dataManagement/dataManagement';
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';

const emits = defineEmits(['close']);

const formData = ref({
  id: '',
  name: '',
  unit: '',
  maintainUnit: '',
  engineer: '',
  location: '',
  operation: '',
  plannedArea: '',
  actualArea: '',
  updateTime: ''
});

const rules = ref({
  name: [{ required: true, message: '工程名称不能为空', trigger: 'blur' }],
  unit: [{ required: true, message: '建设单位不能为空', trigger: 'blur' }],
  maintainUnit: [{ required: true, message: '维护单位不能为空', trigger: 'blur' }],
  engineer: [{ required: true, message: '人防专业监理工程师不能为空', trigger: 'blur' }],
  location: [{ required: true, message: '建设地点不能为空', trigger: 'blur' }],
  operation: [{ required: true, message: '操作方式不能为空', trigger: 'blur' }],
  plannedArea: [{ required: true, message: '应建人防地下室面积不能为空', trigger: 'blur' }],
  actualArea: [{ required: true, message: '实建人防地下室面积不能为空', trigger: 'blur' }],
  updateTime: [{ required: true, message: '更新时间不能为空', trigger: 'blur' }]
});

const form = ref(null); // 定义 form 变量

const closeDialog = () => {
  emits('close');
};

const router = useRouter();

// 提交表单
const submitForm = async () => {
  try {
    await form.value.validate();
    const payload = {
      personnel_list: [formData.value]
    };
    const response = await addPersonnel(payload);
    if (response.code === 200) {
      ElMessage.success('提交成功');
      closeDialog();
      emits('refresh');
    } else {
      ElMessage.error(response.msg || '提交失败，请稍后再试');
    }
  } catch (error) {
    ElMessage.error('表单验证失败，请检查输入');
  }
};
</script>

<style scoped></style>