yjhtgl-web/src/views/comprehensiveGuarantee/reliefResourceManagement/reliefTalentsEdit.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="contact_number">
            <el-input v-model="formData.contact_number" style="width: 468px !important"  />
          </el-form-item>
          <el-form-item label="性别：" prop="gender">
            <el-input v-model="formData.gender" style="width: 468px !important"  />
          </el-form-item>
          <el-form-item label="现在地址：" prop="current_address">
            <el-input v-model="formData.current_address" placeholder="请输入现在地址" style="width: 468px !important" readonly>
              <template #append>
                <el-button type="primary" @click="openMapDialog">地图定位</el-button>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="职务：" prop="position">
            <el-input v-model="formData.position" style="width: 468px !important"  />
          </el-form-item>
          <el-form-item label="所属救援人员单位：" prop="unit_name">
            <el-input v-model="formData.unit_name" 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>
  <!-- 地图弹窗 -->
  <company-map v-model:visible="mapDialogVisible" :latAndLong="formData.lnglat" :address="formData.current_address" @confirm="handleMapChange"></company-map>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { getPersonnel2,uploadPersonnel } from '@/api/comprehensiveGuarantee/reliefResourceManagement/reliefTalents';

const emits = defineEmits(['close']);
const props = defineProps<{
  eventId: string | number;
}>();

const formData = ref({
  name: '',
  contact_number: '',
  gender: '',
  current_address: '',
  lnglat: [],
  longitude: '', // 经度
  latitude: '', // 纬度
  position: '',
  unit_name: ''
});
const rules = ref({
  name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
  contact_number: [{ required: true, message: '联系电话不能为空', trigger: 'blur' }],
  gender: [{ required: true, message: '性别不能为空', trigger: 'blur' }],
  current_address: [{ required: true, message: '地址不能为空', trigger: 'blur' }],
  position: [{ required: true, message: '职务不能为空', trigger: 'blur' }],
  unit_name: [{ required: true, message: '所属救援人员单位不能为空', trigger: 'blur' }]
});
const closeDialog = () => {
  emits('close');
};
// 地图定位
const mapDialogVisible = ref(false);
const openMapDialog = () => {
  mapDialogVisible.value = true;
};
const handleMapChange = (data) => {
  formData.value.current_address = data.address;
  formData.value.lnglat = data.lnglat;
  formData.value.longitude = data.lnglat[0];
  formData.value.latitude = data.lnglat[1];
  mapDialogVisible.value = false;
};
const fetchPersonnelData = async () => {
  const response = await getPersonnel2(props.eventId);
  if (response.code === 200) {
    formData.value = response.personnel;
  } else {
    ElMessage.error('未找到相关数据');
  }
};
const submitForm = async () => {
  // 假设表单已经通过验证
  const response = await uploadPersonnel(props.eventId, formData.value );
  if (response.code === 200) {
    ElMessage.success('提交成功');
    closeDialog();
    emits('refresh');
  } else {
    ElMessage.error(response.msg);
  }
};
onMounted(() => {
  fetchPersonnelData();
});
</script>

<style scoped></style>