epmet-work-pc-chengyang/src/views/modules/visual/communityGovern/zhongdianxingcheng/detail.vue

<template>
  <div class="m-pop">
    <div class="wrap">
      <cpt-card>
        <div class="title">
          <img src="@/assets/img/shuju/title-tip.png" />
          <span>详情</span>
        </div>

        <!-- <div class="div_tuomin">
          <el-button size="mini"
                     class="diy-button--search"
                     @click="handleTuomin">显示脱敏信息</el-button>
        </div> -->

        <div class="btn-close"
             @click="handleClose">
          <img src="@/assets/img/shuju/people/close.png" />
        </div>
        <div class="m-content">
          <div class="m-info">
            <div class="info-prop">
              <span class="info-title-3">姓名：</span>
              <span class="info-content">{{ formData.name||'--'  }}</span>
            </div>

            <div class="info-prop">
              <span class="info-title-3">手机号：</span>
              <span class="info-content">{{ formData.showMobile||'--' }}</span>
            </div>

            <div class="info-prop">
              <span class="info-title-3">证件号：</span>
              <span class="info-content">{{ formData.showIdCard||'--' }}</span>
            </div>
            <div class="info-prop">
              <span class="info-title-3">户籍地：</span>
              <span class="info-content">{{ formData.registeredResidence||'--' }}</span>
            </div>
            <div class="info-prop">
              <span class="info-title-3">来源地：</span>
              <span class="info-content">{{ formData.sourceAddress||'--'  }}</span>
            </div>

            <div class="info-prop">
              <span class="info-title-3">详细地址：</span>
              <span class="info-content">{{ formData.sourceDetailAddress||'--'  }}</span>
            </div>
            <div class="info-prop">
              <span class="info-title-3">7天内到达或途经：</span>
              <span class="info-content">{{ formData.passBy||'--'  }}</span>
            </div>
            <div class="info-prop">
              <span class="info-title-3">来曹事由：</span>
              <span class="info-content">{{ formData.describeContent||'--'  }}</span>
            </div>
            <div class="info-prop">
              <span class="info-title-3">48小时核酸：</span>
              <span class="info-content">{{ formData.natOutcomeName||'--'  }}</span>
            </div>

            <div class="info-prop">
              <span class="info-title-3">来到本地时间：</span>
              <span class="info-content">{{ formData.arriveDate||'--'  }}</span>
            </div>

            <div class="info-prop">
              <span class="info-title-3">在曹居住地点：</span>
              <span class="info-content">{{ formData.presentAddress||'--'  }}</span>
            </div>
            <div class="info-prop">
              <span class="info-title-3">详细地址：</span>
              <span class="info-content">{{ formData.detailAddress||'--'  }}</span>
            </div>
            <div class="info-prop">
              <span class="info-title-3">返回方式：</span>
              <span class="info-content">{{ formData.trafficTypeName||'--'  }}</span>
            </div>
            <div v-if="formData.trafficTypeExplain"
                 class="info-prop">
              <span class="info-title-3">具体方式：</span>
              <span class="info-content">{{ formData.trafficTypeExplain||'--'  }}</span>
            </div>
            <div class="info-prop">
              <span class="info-title-3">7天内旅居史情况：</span>
              <span class="info-content">{{ formData.sojournHistoryName||'--'  }}</span>
            </div>
            <div class="info-prop">
              <span class="info-title-3">隔离状态：</span>
              <span class="info-content">{{ formData.isolateTypeName||'--'  }}</span>
            </div>
            <div class="info-prop">
              <span class="info-title-3">备注：</span>
              <span class="info-content">{{ formData.remark||'--'  }}</span>
            </div>
            <div class="info-prop">
              <span class="info-title-3">是否落实"落地检"：</span>
              <span class="info-content">{{ formData.isArriveCheckName||'--'  }}</span>
            </div>
            <div class="info-prop">
              <span class="info-title-3">是否到达曹县：</span>
              <span class="info-content">{{ formData.isArriveName||'--'  }}</span>
            </div>

            <div class="info-prop">
              <span class="info-title-3">上报时间：</span>
              <span class="info-content">{{ formData.reportingTime||'--'  }}</span>
            </div>
            <div class="info-prop">
              <span class="info-title-3">管控措施：</span>
              <span class="info-content">{{ formData.controlMeasures||'--'  }}</span>
            </div>
            <div class="info-prop">
              <span class="info-title-3">类型：</span>
              <span class="info-content">{{ formData.tripDataTypeName||'--'  }}</span>
            </div>
            <div class="info-prop">
              <span class="info-title-3">上报人：</span>
              <span class="info-content">{{ formData.createdByName||'--'  }}</span>
            </div>

          </div>

        </div>
      </cpt-card>
    </div>
  </div>
</template>

<script>
import cptCard from "@/views/modules/visual/cpts/card";
import screenLoading from "@/views/modules/visual/cpts/loading";
import { requestPost } from "@/js/dai/request";

import dateFormat from "dai-js/tools/dateFormat";

export default {
  name: "demandInfo",
  props: {
    detailId: {
      type: String,
      default: "",
    },

  },

  components: {
    cptCard,

    screenLoading,
  },

  data () {
    return {
      formData: {
        name: "",
        mobile: "",
        idCard: "",
        sourceAddress: "",
        describeContent: "",
        natOutcome: "",
        sojournHistory: "",
        isolateType: "",
        arriveDate: '',


      },


    };
  },

  computed: {},

  watch: {
    detailId () {
      this.getApiData();
    },
  },

  mounted () {
    this.getApiData();
  },

  methods: {
    async handleTuomin () {
      const url = "/data/aggregator/epmetuser/detailByType";

      const { data, code, msg } = await requestPost(url, {
        id: this.detailId,
        type: "routeFollow",
      });

      if (code === 0) {
        this.$set(this.formData, 'mobile', data.mobile)
        this.$set(this.formData, 'idCard', data.idCard)
      } else {
        this.$message.error(msg);
      }

    },
    handleClose () {
      this.$emit("close");
    },

    async getApiData () {

      await this.getInfo();

    },

    //加载组织数据
    async getInfo () {
      const url = "/epmetuser/tripreport/detail";
      // const url = "http://yapi.elinkservice.cn/mock/245/epmetuser/icTripReportRecord/emphasisTripDetail";
      let params = {
        id: this.detailId,
      };

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        this.formData = data

        if (this.formData.topicInfo && this.formData.topicInfo.publishedTime) {
          this.formData.topicInfo.publishedTimeShow = dateFormat(new Date(this.formData.topicInfo.publishedTime * 1000), "yyyy-MM-dd")

        }
      } else {
        this.$message.error(msg);
      }
    },



  },
};
</script>

<style
  lang="scss"
  src="@/assets/scss/modules/visual/issue-info.scss"
  scoped
></style>


<style lang="scss" scoped>
.div_tuomin {
  position: absolute;
  top: 10px;
  right: 60px;
  z-index: 1000;
}
</style>