dvcp_v2_webapp/project/sass/apps/AppSpecialPrison/components/Detail.vue

<template>
  <ai-detail class="AppSpecial" isHasSidebar>
    <template slot="title">
      <ai-title title="详情" isShowBack isShowBottomBorder @onBackClick="cancel(true)">
      </ai-title>
    </template>
    <template slot="content">
      <AiSidebar :tabTitle="tabTitle" v-model="currIndex"></AiSidebar>
      <ai-card title="基本信息" v-show="currIndex === 0">
        <template #content>
          <ai-wrapper>
            <ai-info-item label="姓名" :value="info.name"></ai-info-item>
            <ai-info-item label="身份证号" :value="info.idNumber"></ai-info-item>
            <ai-info-item label="性别" :value="idNumberInfo.gender"></ai-info-item>
            <ai-info-item label="出生日期" :value="idNumberInfo.birthday"></ai-info-item>
            <ai-info-item label="联系电话" :value="info.phone"></ai-info-item>
            <ai-info-item label="所属区域" :value="info.areaName"></ai-info-item>
            <ai-info-item label="详细地址" isLine :value="info.address"></ai-info-item>
            <ai-info-item label="所属网格" :value="info.girdName"></ai-info-item>
            <ai-info-item label="是否累犯" :value="dict.getLabel('yesOrNo', info.isSecond)"></ai-info-item>
            <ai-info-item label="原罪名" :value="dict.getLabel('appSpecialCrime', info.crime)"></ai-info-item>
            <ai-info-item label="服刑场所" isLine :value="info.place"></ai-info-item>
            <ai-info-item label="危险性评估" :value="dict.getLabel('appSpecialDenger', info.denger)"></ai-info-item>
            <ai-info-item label="安置情况" :value="dict.getLabel('appSpecialPlacement', info.placement)"></ai-info-item>
            <ai-info-item label="安置时间" :value="info.placeTime"></ai-info-item>
            <ai-info-item label="衔接情况" :value="dict.getLabel('appSpecialSituation', info.situation)"></ai-info-item>
            <ai-info-item label="衔接时间" :value="info.situationTime"></ai-info-item>
            <ai-info-item label="是否重新犯罪" :value="dict.getLabel('yesOrNo', info.isRepeat)"></ai-info-item>
          </ai-wrapper>
        </template>
      </ai-card>
      <div class="visit-list" v-show="currIndex === 1">
        <div class="visit-item" v-for="(item, index) in list" :key="index">
          <div class="visit-item__top">
            <div class="left">
              <div class="avatar">{{ item.name.substr(item.name.length - 2) }}</div>
              <h2>{{ item.name }}</h2>
            </div>
            <span>{{ item.visitTime }}</span>
          </div>
          <b>{{ item.title }}</b>
          <p>{{ item.description }}</p>
          <div class="visit-imgs">
            <ai-uploader v-model="item.images" :instance="instance" :limit="9" disabled/>
          </div>
          <div class="visit-status">
            <span>现实状态：</span>
            <i>{{ dict.getLabel('visitCondolenceReality', item.reality) }}</i>
          </div>
        </div>
        <ai-empty v-if="!list.length"></ai-empty>
      </div>
    </template>
  </ai-detail>
</template>

<script>
import {ID} from "dui/lib/js/utils";

export default {
  name: 'Detail',

  props: {
    instance: Function,
    dict: Object,
    params: Object
  },
  computed: {
    idNumberInfo: v => new ID(v.info.idNumber)
  },
  data() {
    return {
      currIndex: 0,
      tabTitle: ['人员信息', '走访记录'],
      info: {},
      list: [],
    }
  },

  created() {
    if (this.params && this.params.id) {
      this.id = this.params.id

      this.dict.load('appSpecialSituation', 'appSpecialPlacement', 'appSpecialDenger', 'appSpecialCrime',
          'appSpecialControl', 'appSpecialDebug', 'appSpecialDrug', 'appSpecialChangeType', 'appSpecialCure', 'appSpecialDengerLevel',
          'appSpecialDisableLevel', 'appSpecialDisableType', 'appSpecialHealth', 'appSpecialMarriage', 'appSpecialTypeFive', 'isReflection', 'yesOrNo').then(() => {
        this.getInfo(this.params.id)
      })
      this.dict.load('visitCondolenceReality').then(() => {
        this.getList()
      })
    }
  },

  methods: {
    getInfo(id) {
      this.instance.post(`/app/appspecialprison/queryDetailById?id=${id}`).then(res => {
        if (res.code === 0) {
          this.info = res.data
        }
      })
    },

    getList() {
      this.instance.post(`/app/appvisitvondolence/list`, null, {
        params: {
          applicationId: 4,
          size: 1000
        }
      }).then(res => {
        if (res.code == 0) {
          this.list = res.data.records
        }
      })
    },

    cancel(isRefresh) {
      this.$emit('change', {
        type: 'List',
        isRefresh: !!isRefresh
      })
    }
  }
}
</script>

<style scoped lang="scss">
.AppSpecial {
  .visit-list {
    .visit-item {
      padding: 10px 0;
      border-bottom: 1px solid #eee;

      &:first-child {
        padding-top: 0;
      }

      &:last-child {
        border-bottom: none;
      }

      .visit-status {
        display: flex;
        align-items: center;
        font-size: 14px;

        span {
          color: #333;
        }

        i {
          color: #999;
          font-style: normal;
        }
      }

      & > p {
        line-height: 1.4;
        margin-bottom: 4px;
        text-align: justify;
        color: #666;
        font-size: 16px;
      }

      .visit-item__top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;

        span {
          font-size: 14px;
          color: #999;
        }

        .left {
          display: flex;
          align-items: center;

          img, .avatar {
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            margin-right: 10px;
            border-radius: 50%;
            font-size: 14px;
            color: #fff;
            background: #26f;
          }

          h2 {
            font-size: 16px;
            font-weight: 500;
          }
        }
      }
    }
  }
}
</style>