yjhtgl-web/src/views/comprehensiveGuarantee/reliefResourceManagement/rescueStationEdit.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" :rules="rules" :model="formData" label-width="auto">
          <el-form-item label="救助站名称：" prop="fwdmc">
            <el-input v-model="formData.fwdmc" style="width: 468px !important" />
          </el-form-item>
          <el-form-item label="服务对象：" prop="fwdx">
            <el-input v-model="formData.fwdx" style="width: 468px !important" />
          </el-form-item>
          <el-form-item label="所属区县：" prop="ssqx">
            <el-input v-model="formData.ssqx" style="width: 468px !important" />
          </el-form-item>
          <el-form-item label="所属镇街：" prop="zj">
            <el-input v-model="formData.zj" style="width: 468px !important" />
          </el-form-item>
          <el-form-item label="服务内容：" prop="fwnr">
            <el-input v-model="formData.fwnr" style="width: 468px !important" />
          </el-form-item>
          <el-form-item label="操作方式：" prop="cd_operation">
            <el-input v-model="formData.cd_operation" style="width: 468px !important" />
          </el-form-item>
          <el-form-item label="救助站类型：" prop="fwdlx">
            <el-input v-model="formData.fwdlx" style="width: 468px !important" />
          </el-form-item>
          <el-form-item label="联系电话：" prop="lxdh">
            <el-input v-model="formData.lxdh" style="width: 468px !important" />
          </el-form-item>
          <el-form-item label="开放时间：" prop="kfsj">
            <el-time-picker
              v-model="formData.kfsj"
              is-range
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="hh:mm"
            />
          </el-form-item>
          <el-form-item label="救助站简介：" prop="fwdjj">
            <el-input v-model="formData.fwdjj" style="width: 468px !important" />
          </el-form-item>
          <el-form-item label="联系人：" prop="lxr">
            <el-input v-model="formData.lxr" style="width: 468px !important" />
          </el-form-item>
<!--          <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-form-item label="服务点状态：" prop="fwdzt">
            <el-input v-model="formData.fwdzt" style="width: 468px !important" />
          </el-form-item>
          <el-form-item label="服务点地址：" prop="fwdaddr">
            <el-input v-model="formData.fwdaddr" 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="lng">
            <el-input v-model="formData.lng" style="width: 468px !important" />
          </el-form-item>
          <el-form-item label="纬度：" prop="lat">
            <el-input v-model="formData.lat" 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.fwdaddr" @confirm="handleMapChange"></company-map>
</template>

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

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

const formData = ref({
  fwdx: '',
  zj: '',
  ssqx: '',
  fwdmc: '',
  fwnr: '',
  cd_operation: '',
  fwdlx: '',
  lnglat: [],
  lxdh: '',
  kfsj: '',
  lng: '',
  lat: '',
  fwdjj: '',
  lxr: '',
  cd_time: '',
  fwdzt: '',
  fwdaddr: ''
});
const rules = ref({
  fwdmc: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
  fwdx: [{ required: true, message: '对象不能为空', trigger: 'blur' }],
  zj: [{ required: true, message: '所属镇街不能为空', trigger: 'blur' }],
  ssqx: [{ required: true, message: '所属区县不能为空', trigger: 'blur' }],
  fwnr: [{ required: true, message: '服务内容不能为空', trigger: 'blur' }],
  cd_operation: [{ required: true, message: '操作方式不能为空', trigger: 'blur' }],
  fwdlx: [{ required: true, message: '类型不能为空', trigger: 'blur' }],
  lxdh: [{ required: true, message: '联系电话不能为空', trigger: 'blur' }],
  kfsj: [{ required: true, message: '开放时间不能为空', trigger: 'blur' }],
  lng: [{ required: true, message: '经度不能为空', trigger: 'blur' }],
  lat: [{ required: true, message: '纬度不能为空', trigger: 'blur' }],
  fwdjj: [{ required: true, message: '救助站简介不能为空', trigger: 'blur' }],
  lxr: [{ required: true, message: '联系人不能为空', trigger: 'blur' }],
  cd_time: [{ required: true, message: '更新时间不能为空', trigger: 'blur' }],
  fwdzt: [{ required: true, message: '服务点状态不能为空', trigger: 'blur' }],
  fwdaddr: [{ required: true, message: '服务点地址不能为空', trigger: 'blur' }]
});

const closeDialog = () => {
  emits('close');
};
// 地图定位
const mapDialogVisible = ref(false);
const openMapDialog = () => {
  mapDialogVisible.value = true;
};

const handleMapChange = (data) => {
  formData.value.fwdaddr = data.address;
  formData.value.lnglat = data.lnglat;
  formData.value.lng = data.lnglat[0];
  formData.value.lat = data.lnglat[1];
  mapDialogVisible.value = false;
};
const fetchUnitData = async () => {
  const response = await getStation(props.eventId);
  const temp = response.station;
  temp.kfsj = temp.kfsj.split("-");
  formData.value = temp;
};
const submitForm = async () => {
  // 假设表单已经通过验证
  const response = await uploadStation(props.eventId, formData.value);
  if (response.code === 200) {
    ElMessage.success('提交成功');
    closeDialog();
    emits('refresh');
  } else {
    ElMessage.error(response.msg);
  }
};
onMounted(() => {
  fetchUnitData();
});
</script>

<style scoped></style>