epmet-work-pc-chengyang/src/views/modules/base/epidemic/natInfo/natDetail.vue

<template>
  <div class="epidemic-form">
    <div class="dialog-h-content scroll-h">

      <div v-if="view_real_data"
           class="div_tuomin">
        <el-button size="mini"
                   class="diy-button--search"
                   @click="handleTuomin">显示脱敏信息</el-button>
      </div>
      <div v-if="initLoading"
           class="m-row">
        <div class="m-info">
          <div class="info-prop">
            <span class="info-title-2">姓名：</span>
            <span>{{ formData.name||'--'  }}</span>
          </div>

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

          <div class="info-prop">
            <span class="info-title-2">证件号：</span>
            <span>{{ formData.showIdCard||'--'  }}</span>
          </div>

          <div class="info-prop">
            <span class="info-title-2">检检测地点：</span>
            <span>{{ formData.natAddress||'--'  }}</span>
          </div>
          <div class="info-prop">
            <span class="info-title-2">检测结果：</span>
            <span>{{ formData.natResult==='0'?'阴性':'阳性' }}</span>
          </div>

          <div class="info-prop"
               v-if="fileList.length>0">
            <span class="info-title-2">照片：</span>

            <div class="info-pics">

              <img v-for="(item,index) in fileList"
                   style="width:80px;height:80px"
                   :key="index"
                   :src="item.url"
                   @click="watchImg(item)">

            </div>
          </div>

        </div>
      </div>

    </div>

    <div class="div-btn">
      <el-button size="small"
                 @click="handleCancle">关 闭</el-button>
      <!-- <el-button v-if="formType != 'detail'"
                 size="small"
                 type="primary"
                 :disabled="btnDisable"
                 @click="handleComfirm">确 定</el-button> -->
    </div>

  </div>
</template>

<script>

import { Loading } from 'element-ui' // 引入Loading服务
import { requestPost } from '@/js/dai/request'
import { dateFormats } from '@/utils/index'


let loading // 加载动画
export default {
  data () {
    return {
      initLoading: false,

      icNatId: '',
      formData: {},

      fileList: [],


    }
  },
  components: {},
  async mounted () {
    const { user } = this.$store.state
    this.agencyId = user.agencyId

  },

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

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

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

    },

    async initForm (icNatId) {
      this.startLoading()
      this.formData.agencyId = this.agencyId

      this.icNatId = icNatId
      this.formData.icNatId = icNatId

      await this.loadFormData()
      this.initLoading = true
      this.endLoading()


    },

    async loadFormData () {

      // const url = 'http://yapi.elinkservice.cn/mock/245/epmetuser/icNat/detail'
      const url = '/epmetuser/icNat/detail'
      let params = {
        icNatId: this.icNatId,
      }
      const { data, code, msg } = await requestPost(url, params)
      if (code === 0) {
        this.formData = data

        console.log(this.formData.isSelChannel)

        this.formData.icNatId = this.icNatId

        this.fileList = []
        if (data.fileName) {
          let obj = {
            name: data.fileName,
            type: data.attachmentType,
            url: data.attachmentUrl,
          }
          // data.attachmentList.forEach(element => {
          //   element.name = element.fileName
          //   element.type = element.attachmentType
          //   element.size = element.attachmentSize
          // });
          this.fileList.push(obj)

        }

        this.hideUploadEdit = this.fileList.length >= this.limitNum;

      } else {
        this.$message.error(msg)
      }
    },
    handleCancle () {
      // this.resetData()
      this.$emit('dialogCancle')

    },

    watchImg (src) {
      window.open(src);
    },

    resetData () {

      this.formData = {}
    },
    // 开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: '正在加载……', // 加载中需要显示的文字
        background: 'rgba(0,0,0,.7)' // 背景颜色
      })
    },
    // 结束加载动画
    endLoading () {
      // clearTimeout(timer);
      if (loading) {
        loading.close()
      }
    }
  },
  computed: {


  },
  props: {
    view_real_data: {//显示【显示脱敏信息】按钮
      type: Boolean,
      default: false,
    }
  },
}
</script>


<style lang="scss" scoped>
@import "@/assets/scss/modules/management/detail-main.scss";

.div_tuomin {
  position: absolute;
  top: 0;
  right: 40px;
  z-index: 1000;
}
</style>