yjhtgl-web/src/views/comprehensiveGuarantee/reliefResourceManagement/hydraulicEngineeringAdd.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-row :gutter="20" class="mb8">
            <el-col :span="10">
              <el-form-item label="水利设施和水利工程名称：" prop="slsshslgcmc">
                <el-input v-model="formData.slsshslgcmc" placeholder="请输入水利设施和水利工程名称" style="width: 468px !important" />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="建设单位名称：" prop="jsdwmc">
                <el-input v-model="formData.jsdwmc" placeholder="请输入建设单位名称" style="width: 468px !important" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="mb8">
            <el-col :span="10">
              <el-form-item label="水利设施和水利工程地点：" prop="slsshslgcdd">
                <el-input v-model="formData.slsshslgcdd" placeholder="请输入水利设施和水利工程地点" style="width: 468px !important" readonly>
                  <template #append>
                    <el-button type="primary" @click="openMapDialog">地图定位</el-button>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="建设单位证件类型：" prop="jsdwzjlx">
                <el-input v-model="formData.jsdwzjlx" placeholder="请输入建设单位证件类型" style="width: 468px !important" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="mb8">
            <el-col :span="10">
              <el-form-item label="联系方式：" prop="lxfs">
                <el-input v-model="formData.lxfs" placeholder="请输入联系方式" style="width: 468px !important" />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="数据提供部门统一社会信用代码：" prop="sjtgbmtyshxydm">
                <el-input v-model="formData.sjtgbmtyshxydm" placeholder="请输入数据提供部门统一社会信用代码" style="width: 468px !important" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="mb8">
            <el-col :span="10">
              <el-form-item label="监督管理机关编码：" prop="jdgljgbm">
                <el-input v-model="formData.jdgljgbm" placeholder="请输入监督管理机关编码" style="width: 468px !important" />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="监督管理机关：" prop="jdgljg">
                <el-input v-model="formData.jdgljg" placeholder="请输入监督管理机关" style="width: 468px !important" />
              </el-form-item>
            </el-col>
<!--            <el-col :span="10">-->
<!--              <el-form-item label="插入时间：" prop="cd_time">-->
<!--                <el-date-picker-->
<!--                  v-model="formData.cd_time"-->
<!--                  type="datetime"-->
<!--                  placeholder="请选择时间"-->
<!--                  style="width: 468px !important"-->
<!--                />-->
<!--              </el-form-item>-->
<!--            </el-col>-->
          </el-row>
          <el-row :gutter="20" class="mb8">
            <el-col :span="10">
              <el-form-item label="数据提供部门名称：" prop="sjtgbmmc">
                <el-input v-model="formData.sjtgbmmc" placeholder="请输入数据提供部门名称" style="width: 468px !important" />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="灌溉面积：" prop="ggmj">
                <el-input v-model="formData.ggmj" placeholder="请输入灌溉面积" style="width: 468px !important" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="mb8">
            <el-col :span="10">
              <el-form-item label="数据提供部门行政区划代码：" prop="sjtgbmxzqhdm">
                <el-input v-model="formData.sjtgbmxzqhdm" placeholder="请输入数据提供部门行政区划代码" style="width: 468px !important" />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="建设单位证件号码：" prop="jsdwzjhm">
                <el-input v-model="formData.jsdwzjhm" placeholder="请输入建设单位证件号码" style="width: 468px !important" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="mb8">
            <el-col :span="10">
              <el-form-item label="水利设施和水利工程所在地行政区划代码：" prop="xzqhdm">
                <el-input v-model="formData.xzqhdm" placeholder="请输入水利设施和水利工程所在地行政区划代码" style="width: 468px !important" />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="占地面积：" prop="zdmj">
                <el-input v-model="formData.zdmj" placeholder="请输入占地面积" style="width: 468px !important" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="mb8">
<!--            <el-col :span="10">-->
<!--              <el-form-item label="ETL时间：" prop="etl_time">-->
<!--                <el-date-picker-->
<!--                  v-model="formData.etl_time"-->
<!--                  type="datetime"-->
<!--                  placeholder="请选择时间"-->
<!--                  style="width: 468px !important"-->
<!--                />-->
<!--              </el-form-item>-->
<!--            </el-col>-->
            <el-col :span="10">
              <el-form-item label="建设时间：" prop="jssj">
                <el-date-picker
                  v-model="formData.jssj"
                  type="datetime"
                  placeholder="请选择时间"
                  style="width: 468px !important"
                />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="纬度：" prop="latitude">
                <el-input v-model="formData.weidu" placeholder="请输入纬度" style="width: 468px !important" />
              </el-form-item>
            </el-col>
          </el-row>
<!--          <el-row :gutter="20" class="mb8">-->
<!--            <el-col :span="10">-->
<!--              <el-form-item label="数据批次号：" prop="cd_batch">-->
<!--                <el-input v-model="formData.cd_batch" placeholder="请输入数据批次号" style="width: 468px !important" />-->
<!--              </el-form-item>-->
<!--            </el-col>-->

<!--          </el-row>-->
          <el-row :gutter="20" class="mb8">
            <el-col :span="10">
              <el-form-item label="经度：" prop="jingdu">
                <el-input v-model="formData.jingdu" placeholder="请输入经度" style="width: 468px !important" />
              </el-form-item>
            </el-col>

          </el-row>
        </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>
  <!-- 地图弹窗 -->
  <company-map v-model:visible="mapDialogVisible" :latAndLong="formData.lnglat" :address="formData.slsshslgcdd" @confirm="handleMapChange"></company-map>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { addHydraulic } from '@/api/comprehensiveGuarantee/reliefResourceManagement/hydraulicEngineering';
import { parseTime } from '@/utils/ruoyi';

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

const formData = ref({
  slsshslgcmc: '',
  jsdwmc: '',
  slsshslgcdd: '',
  jsdwzjlx: '',
  lxfs: '',
  sjtgbmtyshxydm: '',
  jdgljgbm: '',
  cd_time: '',
  sjtgbmmc: '',
  ggmj: '',
  sjtgbmxzqhdm: '',
  jsdwzjhm: '',
  xzqhdm: '',
  lnglat: [],
  zdmj: '',
  etl_time: '',
  jssj: '',
  cd_batch: '',
  jdgljg: '',
  jingdu: '',
  weidu: ''
});

const rules = ref({
  slsshslgcmc: [{ required: true, message: '水利设施和水利工程名称不能为空', trigger: 'blur' }],
  jsdwmc: [{ required: true, message: '建设单位名称不能为空', trigger: 'blur' }],
  slsshslgcdd: [{ required: true, message: '水利设施和水利工程地点不能为空', trigger: 'blur' }],
  jsdwzjlx: [{ required: true, message: '建设单位证件类型不能为空', trigger: 'blur' }],
  lxfs: [{ required: true, message: '联系方式不能为空', trigger: 'blur' }],
  sjtgbmtyshxydm: [{ required: true, message: '数据提供部门统一社会信用代码不能为空', trigger: 'blur' }],
  jdgljgbm: [{ required: true, message: '监督管理机关编码不能为空', trigger: 'blur' }],
  sjtgbmmc: [{ required: true, message: '数据提供部门名称不能为空', trigger: 'blur' }],
  ggmj: [{ required: true, message: '灌溉面积不能为空', trigger: 'blur' }],
  sjtgbmxzqhdm: [{ required: true, message: '数据提供部门行政区划代码不能为空', trigger: 'blur' }],
  jsdwzjhm: [{ required: true, message: '建设单位证件号码不能为空', trigger: 'blur' }],
  xzqhdm: [{ required: true, message: '水利设施和水利工程所在地行政区划代码不能为空', trigger: 'blur' }],
  zdmj: [{ required: true, message: '占地面积不能为空', trigger: 'blur' }],
  jssj: [{ required: true, message: '建设时间不能为空', trigger: 'blur' }],
  jdgljg: [{ required: true, message: '监督管理机关不能为空', trigger: 'blur' }],
  jingdu: [{ required: true, message: '经度不能为空', trigger: 'blur' }],
  latitude: [{ required: true, message: '纬度不能为空', trigger: 'blur' }]
});

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

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

const router = useRouter();
// 地图定位
const mapDialogVisible = ref(false);
const openMapDialog = () => {
  mapDialogVisible.value = true;
};

const handleMapChange = (data) => {
  formData.value.slsshslgcdd = data.address;
  formData.value.lnglat = data.lnglat;
  formData.value.jingdu = data.lnglat[0];
  formData.value.weidu = data.lnglat[1];
  mapDialogVisible.value = false;
};
// 提交表单
const submitForm = async () => {
  try {
    await form.value.validate();
    formData.value.cd_time = parseTime(formData.value.cd_time)
    formData.value.etl_time = parseTime(formData.value.etl_time)
    formData.value.jssj = parseTime(formData.value.jssj)
    const payload = {
      projects: [formData.value]
    };
    const response = await addHydraulic(payload);
    if (response.code === 200) {
      ElMessage.success('提交成功');
      closeDialog();
      emits('refresh');
    } else {
      ElMessage.error(response.msg || '提交失败，请稍后再试');
    }
  } catch (error) {
    ElMessage.error('表单验证失败，请检查输入');
  }
};
</script>

<style scoped></style>