epmet-work-pc-chengyang/src/views/dataBoard/overview/components/MapResourceInfo.vue

<template>
  <div>
    <div class="dialog-small">

      <el-dialog
          :before-close="handleClose"
          :modal="true"
          :modal-append-to-body="false"
          :visible.sync="dialogVisible"
          title=""
          width="416px"
      >
        <template #title>
          <Title noBg text="资源信息卡"/>
        </template>
        <div class="content">
          <div class="items">
            <div class="label">资源类型：</div>
            <div class="value">{{ typeList[type] }}</div>
          </div>
          <template v-if="type === 2">

            <div class="items">
              <div class="label">单位名称：</div>
              <div class="value">{{ detail.unitName }}</div>
            </div>
            <div class="items">
              <div class="label">分类：</div>
              <div class="value">{{ detail.typeName }}</div>
            </div>
            <div class="items">
              <div class="label">服务事项：</div>
              <div class="value">{{ detail.serviceMatterNameList ? detail.serviceMatterNameList.join('、') : '' }}</div>
            </div>
            <div class="items">
              <div class="label">联系人：</div>
              <div class="value">{{ detail.contact }}</div>
            </div>
            <div class="items">
              <div class="label">联系电话：</div>
              <div class="value">{{ $sensitive( detail.contactMobile, 3, 7) }}</div>
              <CallPhone icon="el-icon-phone"/>
            </div>
            <div class="items">
              <div class="label">地理位置：</div>
              <div class="value">{{ detail.address }}</div>
            </div>
          </template>
          <template v-if="type === 3">

            <div class="items">
              <div class="label">组织名称：</div>
              <div class="value">{{ detail.organizationName }}</div>
            </div>
            <div class="items">
              <div class="label">分类：</div>
              <div class="value">{{ detail.categoryName }}</div>
            </div>
            <div class="items">
              <div class="label">服务事项：</div>
              <div class="value">{{ detail.serviceItem }}</div>
            </div>
            <div class="items">
              <div class="label">联系人：</div>
              <div class="value">{{ detail.principalName }}</div>
            </div>
            <div class="items">
              <div class="label">联系电话：</div>
              <div class="value">{{ detail.principalPhone }}</div>
              <CallPhone icon="el-icon-phone"/>
            </div>
            <div class="items">
              <div class="label">地理位置：</div>
              <div class="value">{{ detail.address }}</div>
            </div>
          </template>

          <template v-if="type === 4 || type === 5 || type === 1">

            <div class="items">
              <div class="label">姓名：</div>
              <div class="value">{{ detail.name }}</div>
            </div>

            <div class="items">
              <div class="label">联系电话：</div>
              <div class="value">{{ detail.mobile }}</div>
              <CallPhone icon="el-icon-phone"/>
            </div>

            <div class="items">
              <div class="label">年龄：</div>
              <div class="value">{{ detail.birthday?getAgeByDateOfBirth(detail.birthday):'未知' }}</div>
            </div>
            <div class="items">
              <div class="label">学历：</div>
              <div class="value">{{ education?education.cultureLevelName:'' }}</div>
            </div>

            <!--            <div class="items">
                          <div class="label">状态：</div>
                          <div class="value">巡查中</div>
                        </div>-->

            <div class="items">
              <div class="label">所在位置：</div>
              <div class="value">{{ detail.houseInfo? detail.houseInfo.homeName: '' }}</div>
            </div>
            <div class="items">
              <div class="label">兴趣爱好：</div>
              <div class="value">{{ hobby?hobby.hobbyRemark:'' }}</div>
            </div>
          </template>
          <div class="btn-group">
            <el-button class="sure" plain round type="warning" @click="handleSure">查看更多</el-button>
          </div>
        </div>
      </el-dialog>
    </div>

    <MapResourceInfoMore ref="MapResourceInfoMore" :currentLevelData="currentLevelData"/>
  </div>
</template>

<script>
import Title from "@/views/dataBoard/satisfactionEval/components/Title";
import CallPhone from "@/views/dataBoard/cpts/CallPhone";
import MapResourceInfoMore from "@/views/dataBoard/overview/components/MapResourceInfoMore";

export default {
  name: "MapResourceInfo",
  components: {Title, CallPhone, MapResourceInfoMore},
  props: {
    currentLevelData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      dialogVisible: false,
      explain: "",
      id: '',
      detail: '',
      type: '',
      typeList: {
        1: '志愿者',
        2: '联建单位',
        3: '社区自组织',
        4: '网格员',
        5: '公益岗'
      },
      education: '',
      hobby: '',
    }
  },
  mounted() {

  },
  methods: {
    getAgeByDateOfBirth(dateOfBirth) {
      let birthDate = this.$moment(dateOfBirth);
      let age = this.$moment().diff(birthDate, 'years');
      return age;
    },
    handleClose(done) {
      this.dialogVisible = false;
    },
    open(id, type) {
      console.log(id, type)
      //type  1志愿者、2联建单位、3社区自组织、4网格员、5公益岗
      this.dialogVisible = true;
      this.id = id
      this.type = type
      this.getData(type)
    },
    handleSure() {
      this.$refs.MapResourceInfoMore.open({
        detail: this.detail,
        type: this.type,
        education: this.education,
        hobby: this.hobby,
        id: this.id
      })
    },
    getData(type) {
      if (type === 1) {
        this.getVolunteer()
      }
      if (type === 2) {
        this.getCompany()
      }
      if (type === 3) {
        this.getCommunity()
      }
      if (type === 4) {
        this.getGridOperator()
      }
      if (type === 5) {
        this.getVolunteer()
      }
    },
    // 联建单位详情使用：/actual/base/icpartyunit/detail

    // 社区自组织详情使用：/actual/base/iccommunityselforganization/community-self-org-detail/{id}

    // 志愿者详情：即居民详情 /actual/base/residentBaseInfo/detail/{resi-id} +
    // 教育信息/actual/base/residentEduInfo/detail/{resi-id} +
    // 兴趣爱好信息/actual/base/residentHobbyInfo/detail/{resi-id}

    // 网格员详情：即工作人员详情：/data/aggregator/org/staffdetailv2 见apifox

    // 公益岗详情：同志愿者详情，也是查居民
    getVolunteer() {
      this.$http.post('/actual/base/residentBaseInfo/detail/' + this.id).then(({data: {data}}) => {
        this.detail = data || {};
      })
      this.$http.get('/actual/base/residentEduInfo/detail/' + this.id).then(({data: {data}}) => {
        this.education = data || {};
      })
      this.$http.get('/actual/base/residentHobbyInfo/detail/' + this.id).then(({data: {data}}) => {
        this.hobby = data || {};
      })
    },
    getCompany() {
      this.$http.post('/actual/base/icpartyunit/detail?id=' + this.id, {id: this.id}).then(({data: {data}}) => {
        this.detail = data || {};
      })
    },
    getCommunity() {
      this.$http.post('/actual/base/iccommunityselforganization/community-self-org-detail/' + this.id).then(({data: {data}}) => {
        this.detail = data || {};
      })
    },
    getGridOperator() {
      this.$http.post('/data/aggregator/org/staffdetailv2?staffId=' + this.id,{staffId: this.id}).then(({data: {data}}) => {
        this.detail = data || {};
      })
    },
  }
}
</script>

<style lang="scss" scoped src="@/assets/scss/dataBoard/dialog-small.scss"></style>
<style lang="scss" scoped>

.content {
  padding: 0 25px;

  .items {
    font-size: 14px;
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 17px;

    .label {
      color: #9CB4D3;
      white-space: nowrap;
    }

    .value {
      color: #FFFFFF;
    }
  }
}


.btn-group {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;

  .el-button {
    width: 136px;
    height: 36px;
    margin: 0 20px;
  }

  .sure {
    color: #8ED3FF;
    border: 1px solid #006CFF;
    background: rgba(0, 108, 255, 0.5);
  }

  .cancel {
    color: #B6D2FF;
    border: 1px solid #6496E8;
    background: rgba(116, 146, 194, 0.6);
  }

}

</style>