xiangan_pc/src/components/360View/followUpRecord/index.vue

<template>
  <!-- 随访记录 -->
  <div class="follow-up-record">
    <div style="display: flex">
      <!-- 随访内容 -->
      <div class="content-left">
        <div class="buttonBackground">
          <el-button type="primary" plain size="small" icon="el-icon-plus" class="addfollow" @click="addFollowHandle">新增随访</el-button>
        </div>
        <time-line-follow-up ref="timeline" :time-axis-data="timeAxisDataVisit" class="time-line" @refreshDataVisitList="childInit" />
      </div>
      <div class="content-right">
        <div class="btnGroup">
          <el-button type="primary" size="small" @click="addOrUpdateHandle()">保存</el-button>
          <el-button type="danger" size="small" @click="deleteHandle">删除</el-button>
          <el-button v-print="'#followFunc'" size="small">打印</el-button>
        </div>
        <div class="table_form">
          <invalid v-if="curFormType==='无效联系'" id="followFunc" ref="followRef" :json-text="dataForm.jsonText" :follow-id="dataForm.id" />
          <phone-follow v-else-if="curFormType==='电话随访'" id="followFunc" ref="followRef" :json-text="dataForm.jsonText" :follow-id="dataForm.id" />
          <out-follow v-else id="followFunc" ref="followRef" :patient-id="patientId" :json-text="dataForm.jsonText" :follow-id="dataForm.id" :platform="platform" />
        </div>
      </div>
      <!-- 没有随访数据 -->
      <div v-show="timeAxisData.length <= 0 && loading==false" class="no-follow-up-father">
        <div class="no-follow-up">
          <img src="@/assets/img/nodata.png" alt="">
          <div class="no-follow-up-content">
            <p class="title-one">暂无随访记录</p>
            <p class="title-two">你可以点击新增记录按钮，新增随访记录</p>
            <el-button type="primary" icon="el-icon-plus" round @click="addFollowHandle">新增记录</el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 新增随访记录 -->
    <add-follow-record v-if="followRecordVisible" ref="followRecordRef" :platform="platform" :patient-id="patientId" @getTimeAxisData="getAxisData" @closeDialog="followRecordVisible=false" />
    <!-- 弹窗, 新增 / 修改 -->
    <!--    <follow-up v-if="followUpVisible" ref="followUp" updata-file="getTimeAxisData" :is-sign="true" :is-close-refresh="isCloseRefresh" @refreshDataList="childInit()" @getTimeAxisData="getTimeAxisData" @closeDialog="followUpVisible=false" />-->
  </div>
</template>

<script>
import eventBus from '@/page-subspecialty/utils/eventBus'
import timeLineFollowUp from '@/components/360View/time-line-follow-up'
import followUp from '@/components/hm-crf/followUp.vue'
import editFullCaseTemplate from '@/components/hm-crf/edit-full-case-template.vue'
import intelligentFull from '@/components/hm-crf/intelligent-full.vue'
import addFollowRecord from './add-follow-record.vue'
import IntelligentFill from '@/mixins/IntelligentFill'
import Invalid from '@/components/360View/followUpRecord/formList/invalid.vue'
import PhoneFollow from '@/components/360View/followUpRecord/formList/phoneFollow.vue'
import OutFollow from '@/components/360View/followUpRecord/formList/outFollow.vue'
const Base64 = require('js-base64').Base64
export default {
  components: {
    OutFollow,
    PhoneFollow,
    Invalid,
    timeLineFollowUp,
    addFollowRecord,
    followUp,
    editFullCaseTemplate,
    intelligentFull
  },
  mixins: [IntelligentFill],
  props: {
    patientIdNumber: {
      type: String,
      default: ''
    },
    patientCentreId: {
      type: String,
      default: ''
    },
    patientId: {
      type: String,
      default: ''
    },
    platform: {
      type: String,
      default: ''
    }
  },
  inject: ['refresh'],
  data() {
    return {
      visible: true,
      timeAxisData: [], // 左侧时间轴数据
      timeAxisDataVisit: [], // 左侧时间轴数据
      curFormType: '',
      followRecordVisible: false,
      // crfVisible: false,
      followUpVisible: false,
      editFullCaseTemplateVisible: false,
      intelligentFullVisible: false,
      jsArr: [],
      dataForm: {},
      name: '',
      formDate: '',
      callList: [{
        date: '2021--4-12 12:53:21',
        recordFile: '',
        recordLength: '10:12:12',
        flag: 1
      }, {
        date: '2021--4-12 13:53:21',
        recordFile: '',
        recordLength: '10:12:12',
        flag: 1
      }, {
        date: '2021--4-12 14:53:21',
        recordFile: '',
        recordLength: '10:12:12',
        flag: 0
      }],
      followFormList: [
        {
          id: '1',
          name: '无效联系'
        }, {
          id: '2',
          name: '电话随访'
        }, {
          id: '3',
          name: '门诊随访'
        }
      ],
      loading: true,
      isCloseRefresh: false
    }
  },
  created() {
    this.getAxisDataVisit()
  },
  methods: {
    init() {
      this.visible = true
    },
    getAxisDataVisit(del, add, value) {
      const params = {
        patientId: this.patientId
      }
      this.$http.get('/patient/view/getTimeAxisDataVisit', { params }).then(res => {
        this.timeAxisDataVisit = res.data.data
        if (add) {
          const index = this.timeAxisDataVisit.findIndex(item => item.date === this.$moment(value.createTime).format('YYYY-MM-DD'))
          this.$refs.timeline.itemCurrentIndex = index || 0
          this.$refs.timeline.itemListCurrentIndex = 0
          this.dataForm = this.timeAxisDataVisit[index].itemList[0]
          window.sessionStorage.setItem('itemCurrentIndex', index)
          window.sessionStorage.setItem('itemListIndex', 0)
        }
        if (del) {
          // 判断当前日期是否还存在
          const Isdate = this.timeAxisDataVisit.some(item => item.date === this.dataForm.opDate)
          // 获取当前所在序列
          const itemCurrentIndex = this.$refs.timeline.itemCurrentIndex
          const itemListCurrentIndex = this.$refs.timeline.itemListCurrentIndex
          // 如果当前日期存在获取当前日期下的随访dataform
          if (Isdate) {
            const itemListIndex = itemListCurrentIndex === 0 ? 0 : itemListCurrentIndex - 1
            this.$refs.timeline.itemListCurrentIndex = itemListIndex
            this.dataForm = this.timeAxisDataVisit[itemCurrentIndex].itemList[itemListIndex]
            window.sessionStorage.setItem('itemCurrentIndex', itemCurrentIndex)
            window.sessionStorage.setItem('itemListIndex', itemListIndex)
          } else {
            // 如果不存在获取上一日期的第一个序列的随访dataform
            const itemIndex = itemCurrentIndex === 0 ? 0 : itemCurrentIndex - 1
            this.$refs.timeline.itemCurrentIndex = itemIndex
            this.$refs.timeline.itemListCurrentIndex = 0
            this.dataForm = this.timeAxisDataVisit[itemIndex].itemList[0]
            window.sessionStorage.setItem('itemCurrentIndex', itemIndex)
            window.sessionStorage.setItem('itemListIndex', 0)
          }
        }
      })
    },
    getAxisData(val) {
      this.curFormType = val.name
      this.getAxisDataVisit('', 'add', val)
    },
    // 打印
    printerHandle() {
      this.printPage('followFunc')
    },
    // 点击新增随访记录 时间+选择随访表单
    addFollowHandle() {
      this.followRecordVisible = true
      this.isCloseRefresh = true
      this.$nextTick(() => {
        this.$refs.followRecordRef.followFormList = this.followFormList
        this.$refs.followRecordRef.init()
      })
    },
    // 显示当前随访表单
    childInit(item) {
      this.dataForm = item
      this.curFormType = this.dataForm.groupName
    },
    // 保存表单
    addOrUpdateHandle() {
      this.$refs.followRef.addOrUpdateHandle().then(() => {
        this.$message({
          message: '保存成功！',
          type: 'success'
        })
        this.getAxisDataVisit()
      })
    },
    // 删除
    async deleteHandle() {
      this.$confirmFun('你确定要删除此随访记录吗？').then(async() => {
        const { data: res } = await this.$http.post('/case/delete', { id: this.dataForm.id })
        if (res.code === 0) {
          this.$message({
            message: this.$t('prompt.success'),
            type: 'success',
            duration: 500,
            onClose: () => {
              this.getAxisDataVisit('del')
            }
          })
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 关闭弹框
    closeDialog() {
      // 调用档案兄弟组件事件
      // eventBus.$emit('getArchiveCaseList')
      this.$emit('closeDialog', false)
    }
  }
}
</script>
<style lang="scss" scoped>
.follow-up-record {
  width: 100%;
  height: 100%;
  .no-follow-up-father {
    width: 100%;
    text-align: center;
    margin-top: 10vh;
    .title-one {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.85);
      margin-bottom: 8px;
      font-weight: 700;
    }
    .title-two {
      font-size: 12px;
      color: rgba(0, 0, 0, 0.45);
      margin-bottom: 8px;
    }
  }
  .follow-up-content {
    display: flex;
    .content-left {
      width: 180px;
      .el-button {
        width: 90%;
      }
      .buttonBackground {
        background: #fff;
        padding-bottom: 20px;
      }
    }
  }

  .btnGroup{
    display: flex;
    justify-content: flex-end;
  }
  .content-right {
    flex: 1;
    //overflow:hidden;
    //position: relatiave;
    //text-align: center;
    .buttons {
      width: 100%;
      //height: 50px;
      //line-height: 50px;
      //background: rgba(0, 0, 0, 0.5);
      //position: absolute;
      //top:0;
      padding-right: 10px;
      text-align: right;
    }
    .make-call {
      position: absolute;
      width: 255px;
      top: 50px;
      right: 10px;
    }
    .make-call-head,.make-call-record-list {
      background: #F4F8FB;
      border-radius: 6px;
      width: 100%;
    }
    .make-call-head {
       height: 68px;
       display: flex;
       justify-content: space-between;
       padding: 12px;
       .patient-info {
         text-align: left;
         border-right:1px solid #ccc;
         padding-right: 12px;
       }
       .patient-info-head {
         display: inline-block;
         width:58px;
       }
       .patient-call {
         color: #00820D;
         cursor: pointer;
       }
    }
    .make-call-record-list {
      margin-top: 16px;
      height: calc(88vh - 220px);
      overflow-y: auto;
      text-align: left;
      padding:16px;
      .text {
        font-weight: 700;
        font-size: 16px;
        color: #1D2129;
        margin-bottom: 16px;
      }
      .call-list {
        margin-bottom: 16px;
      }
      .call-date {
        padding-bottom: 2px;
        color: #8E8E8E;
      }
      .call-file {
        margin-left: 10px;
        span:nth-child(1) {
          padding-right: 10px;
        }
        span:nth-child(2) {
          cursor: pointer;
          color: #1e79ff;
        }
      }
    }
  }
  .content-right-padding {
    padding-right: 0;
  }
}
.table_form{
  height: calc(100vh - 300px);
  width: 100%;
  padding-bottom: 10px;
  overflow: hidden;
  overflow-y: scroll;
}
</style>
<style lang="scss">
.follow-up-record {
  .el-dialog {
    height: 88vh;
    margin-top: 7vh !important;
  }
  .microphone-blue {
    color: #1e79ff;
  }
  .call-green {
    color: #00820D;
  }
}
</style>