yjhtgl-web/src/views/comprehensiveGuarantee/reliefResourceManagement/hydraulicEngineeringView.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-row :gutter="20" class="mb8">
            <el-col :span="10">
              <el-form-item label="水利设施和水利工程名称：" prop="slsshslgcmc">
                <el-input v-model="formData.slsshslgcmc" style="width: 468px !important" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="建设单位名称：" prop="jsdwmc">
                <el-input v-model="formData.jsdwmc" style="width: 468px !important" disabled />
              </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" style="width: 468px !important" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="建设单位证件类型：" prop="jsdwzjlx">
                <el-input v-model="formData.jsdwzjlx" style="width: 468px !important" disabled />
              </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" style="width: 468px !important" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="数据提供部门统一社会信用代码：" prop="sjtgbmtyshxydm">
                <el-input v-model="formData.sjtgbmtyshxydm" style="width: 468px !important" disabled />
              </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" style="width: 468px !important" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="插入时间：" prop="cd_time">
                <el-input v-model="formData.cd_time" style="width: 468px !important" disabled />
              </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" style="width: 468px !important" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="灌溉面积：" prop="ggmj">
                <el-input v-model="formData.ggmj" style="width: 468px !important" disabled />
              </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" style="width: 468px !important" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="建设单位证件号码：" prop="jsdwzjhm">
                <el-input v-model="formData.jsdwzjhm" style="width: 468px !important" disabled />
              </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" style="width: 468px !important" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="占地面积：" prop="zdmj">
                <el-input v-model="formData.zdmj" style="width: 468px !important" disabled />
              </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-input v-model="formData.etl_time" style="width: 468px !important" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="建设时间：" prop="jssj">
                <el-input v-model="formData.jssj" style="width: 468px !important" disabled />
              </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" style="width: 468px !important" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="监督管理机关：" prop="jdgljg">
                <el-input v-model="formData.jdgljg" style="width: 468px !important" disabled />
              </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" style="width: 468px !important" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="纬度：" prop="weidu">
                <el-input v-model="formData.weidu" style="width: 468px !important" disabled />
              </el-form-item>
            </el-col>
          </el-row>
        </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 { getHydraulic } from '@/api/comprehensiveGuarantee/reliefResourceManagement/hydraulicEngineering';
import { parseTime } from '@/utils/ruoyi';

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

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

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

const fetchHydraulicData = async () => {
  const response = await getHydraulic(props.eventId);
  if (response.code === 200) {
    response.project.cd_time = parseTime(response.project.cd_time);
    response.project.etl_time = parseTime(response.project.etl_time);
    formData.value = response.project;
  } else {
    ElMessage.error('未找到相关数据');
  }
};
onMounted(() => {
  fetchHydraulicData();
});
</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>