yjhtgl-web/src/views/comprehensiveGuarantee/reliefResourceManagement/rescueStationView.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" label-width="auto" class="custom-disabled">
          <el-form-item label="救助站名称：" prop="fwdmc">
            <el-input v-model="formData.fwdmc" style="width: 468px !important" disabled />
          </el-form-item>
          <el-form-item label="服务对象：" prop="fwdx">
            <el-input v-model="formData.fwdx" style="width: 468px !important" disabled />
          </el-form-item>
          <el-form-item label="所属区县：" prop="ssqx">
            <el-input v-model="formData.ssqx" style="width: 468px !important" disabled />
          </el-form-item>
          <el-form-item label="所属镇街：" prop="zj">
            <el-input v-model="formData.zj" style="width: 468px !important" disabled />
          </el-form-item>
          <el-form-item label="服务内容：" prop="fwnr">
            <el-input v-model="formData.fwnr" style="width: 468px !important" disabled />
          </el-form-item>
          <el-form-item label="操作方式：" prop="cd_operation">
            <el-input v-model="formData.cd_operation" style="width: 468px !important" disabled />
          </el-form-item>
          <el-form-item label="救助站类型：" prop="fwdlx">
            <el-input v-model="formData.fwdlx" style="width: 468px !important" disabled />
          </el-form-item>
          <el-form-item label="联系电话：" prop="lxdh">
            <el-input v-model="formData.lxdh" style="width: 468px !important" disabled />
          </el-form-item>
          <el-form-item label="开放时间：" prop="kfsj">
            <el-input v-model="formData.kfsj" style="width: 468px !important" disabled />
          </el-form-item>
          <el-form-item label="经度：" prop="lng">
            <el-input v-model="formData.lng" style="width: 468px !important" disabled />
          </el-form-item>
          <el-form-item label="纬度：" prop="lat">
            <el-input v-model="formData.lat" style="width: 468px !important" disabled />
          </el-form-item>
          <el-form-item label="救助站简介：" prop="fwdjj">
            <el-input v-model="formData.fwdjj" style="width: 468px !important" disabled />
          </el-form-item>
          <el-form-item label="联系人：" prop="lxr">
            <el-input v-model="formData.lxr" style="width: 468px !important" disabled />
          </el-form-item>
          <el-form-item label="更新时间：" prop="cd_time">
            <el-input v-model="formData.cd_time" style="width: 468px !important" disabled />
          </el-form-item>
          <el-form-item label="服务点状态：" prop="fwdzt">
            <el-input v-model="formData.fwdzt" style="width: 468px !important" disabled />
          </el-form-item>
          <el-form-item label="服务点地址：" prop="fwdaddr">
            <el-input v-model="formData.fwdaddr" style="width: 468px !important" disabled />
          </el-form-item>
        </el-form>
        <div class="common-dialog-footer">
          <el-button type="primary" @click="closeDialog">返回</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

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

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

const formData = ref({
  name: '',
  type: '',
  county: '',
  town: '',
  address: '',
  contacts: '',
  phone: '',
  open_time: '',
  update_time: '',
  id: ''
});

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

const fetchStationData = async () => {
  const response = await getStation(props.eventId);
  if (response.code === 200) {
    response.station.cd_time = parseTime(response.station.cd_time);
    response.station.kfsj = formatTimeRange(response.station.kfsj);
    formData.value = response.station;
  } else {
    ElMessage.error('未找到相关数据');
  }
};

const formatTimeRange = (timeStr) => {
  // 使用正则表达式匹配小时部分并去除前导零（仅当小时为单个数字时）
  return timeStr.replace(/(^|-)0([1-9]):/g, '$1$2:');
}
onMounted(() => {
  fetchStationData();
});
</script>

<style scoped>
.custom-disabled {
  :deep(.el-select__wrapper.is-disabled),
  :deep(.el-input__wrapper) {
    background-color: #ffffff !important;
  }
  :deep(.el-select__wrapper.is-disabled .el-select__selected-item),
  :deep(.el-input__inner) {
    color: rgba(0, 0, 0, 0.85) !important;
    -webkit-text-fill-color: rgba(0, 0, 0, 0.85) !important;
  }
}
</style>