ylrz_saas_his_scrm_adminUI/src/views/components/his/followMsgDetails.vue

<template>
  <div >
    <div class="chat-records">
      <el-card v-for="(lt, index) in msg" :key="index" class="chat-record" :class="{ 'received': lt.msgType == '1', 'sent': lt.msgType == '2' }">
        <div   :class="{ 'right': lt.msgType == '2'}" style="margin-bottom: 20px;">
          <div class="timestamp" style="margin-bottom: 10px;">
            <span v-if="lt.msgType=='1'"> {{patientName}}</span>
            <span v-if="lt.msgType=='2'"> {{doctorName}}</span>
            {{ lt.createTime }}
          </div>
          <div class="message">
            <div v-if="lt.msgContentType == '1'" :class="{ 'right': lt.msgType == '2'}">{{lt.content}}</div>
            <div v-if="lt.msgContentType == '2'" :class="{ 'right': lt.msgType == '2'}">
              <audio ref="audioPlayer" controls>
                <source :src="lt.content" type="audio/mp3" />
              </audio>
            </div>
            <div v-if="lt.msgContentType == '4'" :class="{ 'right': lt.msgType == '2'}">
              <video  :src="lt.content" controls style="max-width: 400px; max-height: 400px;"></video>
            </div>
            <span v-if="lt.msgContentType == '5'" :class="{ 'right': lt.msgType == '2'}"><el-link type="primary" :underline="false" @click="getPrescribe(JSON.parse(lt.content).prescribeId)">处方单</el-link></span>
            <span v-if="lt.msgContentType == '6'" :class="{ 'right': lt.msgType == '2'}"><el-link type="primary" :underline="false" @click="report(lt.content)">问诊报告</el-link></span>
            <span v-if="lt.msgContentType == '7'" :class="{ 'right': lt.msgType == '2'}"><el-link type="primary" :underline="false" @click="follow(lt.content)">随访</el-link></span>
            <span v-if="lt.msgContentType == '8'" :class="{ 'right': lt.msgType == '2'}"><el-link type="primary" :underline="false" @click="drugReport(lt.content)">用药报告</el-link></span>
            <span v-else-if="lt.msgContentType == '3'" :class="{ 'right': lt.msgType == '2'}">
            <el-image
              style="width: 100px"
              :src="lt.content"
              :preview-src-list="[lt.content]">
            </el-image>
          </span>
          </div>
        </div>
      </el-card>
    </div>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="msgForm.pageNum"
      :limit.sync="msgForm.pageSize"
      @pagination="msgList"
    />
    <el-dialog
      title="随访单"
      :visible.sync="followDialogVisible"
      width="80%"
      :before-close="handleCloseSF" append-to-body >
      <div  style="margin-left: 40px;" v-if="followList!=null">
        <div    :class="'questionnaire_'+index"   v-for="(ite, index) in followList"   :key="index" >
          <div class="flex-1">
            <span :class="ite.require ? 'require' : 'noRequire'">{{index+1}}.{{ite.question}}</span>
            <div>
              <div v-if="'1' == ite.type">
                <el-row v-for="(answerItem,i) in ite.options"  :key="i">
                  <el-col :span="23" :offset="1"> <el-radio disabled v-model="ite.answers" :label="ite.options[i]"></el-radio></el-col>
                </el-row>
              </div>
              <div v-if="'2' == ite.type">
                <el-row v-for="(answerItem,i) in ite.options"  :key="i">
                  <el-col :span="23" :offset="1">
                    <el-checkbox-group v-model="ite.answers">
                      <el-checkbox :label="ite.options[i]" disabled></el-checkbox>
                    </el-checkbox-group>
                  </el-col>
                </el-row>
              </div>
              <div v-if="'3' == ite.type">
                <el-row>
                  <el-col :span="23" :offset="1"><el-input v-model="ite.answers" :disabled="true" type="textarea"></el-input></el-col>
                </el-row>
              </div>
            </div>
          </div>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="followDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="followDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="处方单" :visible.sync="prescribeDialog.open" width="80%" :before-close="handleClose" append-to-body >
      <div class="desct">
        基本信息
      </div>
      <el-descriptions :column="3" border  >
        <el-descriptions-item label="处方单编号"  >
            <span v-if="prescribeItem!=null">
              {{prescribeItem.prescribeCode}}
            </span>
        </el-descriptions-item>
        <el-descriptions-item label="病情描述"  > <span v-if="prescribeItem!=null">{{prescribeItem.patientDescs}}</span></el-descriptions-item>
        <el-descriptions-item label="诊断"  > <span v-if="prescribeItem!=null">{{prescribeItem.diagnose}}</span></el-descriptions-item>
        <el-descriptions-item label="既往史" ><span v-if="prescribeItem!=null">{{prescribeItem.historyIllness}}</span></el-descriptions-item>
        <el-descriptions-item label="患者年龄" > <span v-if="prescribeItem!=null">{{prescribeItem.patientAge}}</span></el-descriptions-item>
        <el-descriptions-item label="患者姓名" > <span v-if="prescribeItem!=null">{{prescribeItem.patientName}}</span> </el-descriptions-item>
        <el-descriptions-item label="是否有过敏史" > <dict-tag :options="orOptions" :value="prescribeItem.historyAllergic"/></el-descriptions-item>
        <el-descriptions-item label="过敏史" ><span v-if="prescribeItem!=null">{{prescribeItem.weight}}</span></el-descriptions-item>
        <el-descriptions-item label="肝功能是否异常" ><span v-if="prescribeItem!=null">{{prescribeItem.liverUnusual}}</span> </el-descriptions-item>
        <el-descriptions-item label="肾功能是否异常" > <span v-if="prescribeItem!=null">{{prescribeItem.renalUnusual}}</span> </el-descriptions-item>
        <el-descriptions-item label="是否是备孕/怀孕/哺乳期" > <dict-tag :options="orOptions" :value="prescribeItem.isLactation"/> </el-descriptions-item>
        <el-descriptions-item label="患者电话" >  <span v-if="prescribeItem!=null">{{prescribeItem.patientTel}}</span> </el-descriptions-item>
        <el-descriptions-item label="药师名称" > <span v-if="prescribeItem!=null">{{prescribeItem.doctorDrugName}}</span>  </el-descriptions-item>
        <el-descriptions-item label="医生名称" > <span v-if="prescribeItem!=null">{{prescribeItem.doctorName}}</span> </el-descriptions-item>
        <el-descriptions-item label="审核时间" > <span v-if="prescribeItem!=null">{{prescribeItem.auditTime}}</span></el-descriptions-item>
        <el-descriptions-item label="创建时间" > <span v-if="prescribeItem!=null">{{prescribeItem.createTime}}</span> </el-descriptions-item>
      </el-descriptions>
      <div class="desct">
        服用方法
      </div>
      <el-descriptions :column="3" border  >
        <el-descriptions-item label="剂数"  ><span v-if="prescribeItem!=null">{{usageJson.counts }}</span></el-descriptions-item>
        <el-descriptions-item label="用药频率"  ><span v-if="prescribeItem!=null">{{usageJson.usageFrequencyUnit }}</span></el-descriptions-item>
        <el-descriptions-item label="单次用药"  ><span v-if="prescribeItem!=null">{{usageJson.usagePerUseCount }}</span></el-descriptions-item>
        <el-descriptions-item label="用药方法"  ><span v-if="prescribeItem!=null">{{usageJson.usageMethod }}</span></el-descriptions-item>
        <el-descriptions-item label="备注"  ><span v-if="prescribeItem!=null">{{usageJson.remark }}</span></el-descriptions-item>
      </el-descriptions>
      <div class="desct">
        商品信息
      </div>
      <el-table border v-if="prod!=null" :data="prod" size="small" style="width: 100%;margin-top: 20px" >
        <el-table-column label="商品图片" width="150" align="center">
          <template slot-scope="scope">
            <img :src="scope.row.drugImgUrl" style="height: 50px">
          </template>
        </el-table-column>
        <el-table-column   prop="drugName"  label="药品名称" width="120" align="center"></el-table-column>
        <el-table-column   prop="drugSpec"  label="药品规格" width="120" align="center"></el-table-column>
        <el-table-column   prop="drugPrice"  label="药品单价" width="120" align="center"></el-table-column>
        <el-table-column   prop="drugNum"  label="药品数量" width="120" align="center"></el-table-column>
        <el-table-column   prop="drugUnit"  label="药品单位" width="120" align="center"></el-table-column>
        <el-table-column   prop="usageMethod"  label="使用方法" width="120" align="center"></el-table-column>
        <el-table-column   prop="usageFrequency_unit"  label="药品频次" width="120" align="center"></el-table-column>
        <el-table-column   prop="usageFrequencyUnit"  label="每次用药数量" width="120" align="center"></el-table-column>

        <el-table-column label="小计"  align="center" width="120" fixed="right">
          <template slot-scope="scope" >
            ￥{{(scope.row.drugNum*scope.row.drugPrice).toFixed(2)}}
          </template>
        </el-table-column>
      </el-table>
      <div style="height: 30px;">
        <div style="float: right;margin: 20px" v-if="prescribeItem.prescribeType==2">
          剂数：<span class="color-danger">{{JSON.parse(prescribeItem.usageJson).counts}}</span>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="prescribeDialog.open = false">取 消</el-button>
        <el-button type="primary" @click="prescribeDialog.open = false">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="问诊报告" :visible.sync="reportDialogVisible" width="80%" :before-close="handleCloseR" append-to-body >
      <div class="desct">
        基本信息
      </div>
      <el-descriptions :column="3" border  >
        <el-descriptions-item label="报告编号"><span v-if="reportItem!=null">{{reportItem.reportSn}}</span></el-descriptions-item>
        <el-descriptions-item label="状态"><span v-if="reportItem!=null"><dict-tag :options="statusOptions" :value="reportItem.status"/></span></el-descriptions-item>
        <el-descriptions-item label="会员昵称"><span v-if="reportItem!=null">{{reportItem.nickName}}</span></el-descriptions-item>
        <el-descriptions-item label="会员电话"><span v-if="reportItem!=null">{{reportItem.phone}}</span></el-descriptions-item>
        <el-descriptions-item label="医生名称"><span v-if="reportItem!=null">{{reportItem.doctorName}}</span></el-descriptions-item>
        <el-descriptions-item label="问诊子类型" ><dict-tag :options="inquirySubTypeOptions" :value="reportItem.inquirySubType"/></el-descriptions-item>
        <el-descriptions-item label="优惠劵发送人"><span v-if="reportItem!=null">{{reportItem.sendName}}</span></el-descriptions-item>
        <el-descriptions-item label="主诉"><span v-if="reportItem!=null">{{reportItem.patientDescs}}</span></el-descriptions-item>
        <el-descriptions-item label="疾病历"><span v-if="reportItem!=null">{{reportItem.illnessLogs}}</span></el-descriptions-item>
        <el-descriptions-item label="用药史"><span v-if="reportItem!=null">{{reportItem.drugLogs}}</span></el-descriptions-item>
        <el-descriptions-item label="诊断结果"><span v-if="reportItem!=null">{{reportItem.inquiryResult}}</span></el-descriptions-item>
        <el-descriptions-item label="备注"><span v-if="reportItem!=null">{{reportItem.remark}}</span></el-descriptions-item>
        <el-descriptions-item label="医生签名"><span v-if="reportItem.signUrl!=null"><img :src="reportItem.signUrl" style="max-width: 100px;"></span></el-descriptions-item>
        <el-descriptions-item label="提交时间"><span v-if="reportItem!=null">{{reportItem.createTime}}</span></el-descriptions-item>
        <el-descriptions-item label="更新时间"><span v-if="reportItem!=null">{{reportItem.updateTime}}</span></el-descriptions-item>
        <el-descriptions-item label="问诊备注"><span v-if="reportItem!=null">{{reportItem.companyUserRemark}}</span></el-descriptions-item>
      </el-descriptions>
      <div class="desct">
        ${process.env.VUE_APP_VIDEO_LINE_1}
      </div>
      <el-descriptions :column="3" border  >
        <el-descriptions-item label="患者姓名" ><span v-if="reportItem.patientJson!=null">{{JSON.parse(reportItem.patientJson).patientName}}</span></el-descriptions-item>
        <el-descriptions-item label="患者年龄" ><span v-if="reportItem.patientJson!=null">{{JSON.parse(reportItem.patientJson).age}}</span></el-descriptions-item>
        <el-descriptions-item label="患者性别" ><span v-if="reportItem.patientJson!=null">{{JSON.parse(reportItem.patientJson).sex==1?'男':'女'}}</span></el-descriptions-item>
        <el-descriptions-item label="身份证号" ><span v-if="reportItem.patientJson!=null">{{JSON.parse(reportItem.patientJson).idCard}}</span></el-descriptions-item>
        <el-descriptions-item label="体重" ><span v-if="reportItem.patientJson!=null">{{JSON.parse(reportItem.patientJson).weight}}</span></el-descriptions-item>
        <el-descriptions-item label="身高" ><span v-if="reportItem.patientJson!=null">{{JSON.parse(reportItem.patientJson).height}}</span></el-descriptions-item>
        <el-descriptions-item label="学习周期" ><span v-if="reportItem.patientJson!=null">{{JSON.parse(reportItem.patientJson).study}}</span></el-descriptions-item>
        <el-descriptions-item label="正在服药" ><span v-if="reportItem.patientJson!=null">{{JSON.parse(reportItem.patientJson).drugs}}</span></el-descriptions-item>
        <el-descriptions-item label="用药情况" ><span v-if="reportItem.patientJson!=null">{{JSON.parse(reportItem.patientJson).medication}}</span></el-descriptions-item>
        <el-descriptions-item label="主诉" span="3"><span v-if="reportItem.patientJson!=null">{{JSON.parse(reportItem.patientJson).title}}</span></el-descriptions-item>
        <el-descriptions-item label="面部照片" span="3" v-if="reportItem.patientJson!=null">
          <div v-if="(JSON.parse(reportItem.patientJson)).faceImages">
            <el-image v-if="JSON.parse(reportItem.patientJson).faceImages!=null&&JSON.parse(reportItem.patientJson).faceImages!=''" v-for="img in (JSON.parse(reportItem.patientJson).faceImages).split(',')" :key="img.id"
                      style="width: 100px"
                      :src="img"
                      :preview-src-list="[img]">
            </el-image>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="舌苔照片" span="3" v-if="reportItem.patientJson!=null">
          <div v-if="(JSON.parse(reportItem.patientJson)).tongueImages">
            <el-image v-if="JSON.parse(reportItem.patientJson).tongueImages!=null&&JSON.parse(reportItem.patientJson).tongueImages!=''"  v-for="img in (JSON.parse(reportItem.patientJson).tongueImages).split(',')" :key="img.id"
                      style="width: 100px"
                      :src="img"
                      :preview-src-list="[img]">
            </el-image>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="检测报告或患病证书" span="3" v-if="reportItem.patientJson!=null">
          <div v-if="(JSON.parse(reportItem.patientJson)).tongueImages">
            <el-image v-if="JSON.parse(reportItem.patientJson).reportImages!=null && JSON.parse(reportItem.patientJson).reportImages!=''"  v-for="img in (JSON.parse(reportItem.patientJson).reportImages).split(',')" :key="img.id"
                      style="width: 100px"
                      :src="img"
                      :preview-src-list="[img]">
            </el-image>
          </div>
        </el-descriptions-item>
      </el-descriptions>
      <div  v-if="reportItem.conditioningPlanJson!=null">
        <div class="desct"> 调理方案</div>
        <el-descriptions title="" :column="1" border >
          <el-descriptions-item :label="form.name" v-for=" form in JSON.parse(reportItem.conditioningPlanJson)" ><div style="white-space: pre-wrap;">{{form.value}}</div></el-descriptions-item>
        </el-descriptions>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="reportDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="reportDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="用药报告" :visible.sync="drugReportDialogVisible" width="80%" :before-close="handleCloseR" append-to-body >
      <div class="desct">
        用药报告
      </div>
      <el-descriptions title="" :column="3" border>
        <el-descriptions-item label="订单编号"><span v-if="drugReportItem!=null">{{drugReportItem.orderCode}}</span></el-descriptions-item>
        <el-descriptions-item label="病人名称"><span v-if="drugReportItem!=null">{{drugReportItem.patientName}}</span></el-descriptions-item>
        <el-descriptions-item label="医生名称"><span v-if="drugReportItem!=null">{{drugReportItem.doctorNane}}</span></el-descriptions-item>
        <el-descriptions-item label="状态"><span v-if="drugReportItem!=null"> <dict-tag :options="statusDrugReportOptions" :value="drugReportItem.status"/></span></el-descriptions-item>
        <el-descriptions-item label="咨询总结"><span v-if="drugReportItem!=null">{{drugReportItem.reportSummary}}</span></el-descriptions-item>
        <el-descriptions-item label="生活建议"span="3"><span v-if="drugReportItem!=null">{{drugReportItem.reportAdvice}}</span></el-descriptions-item>
        <el-descriptions-item label="备注"span="3"><span v-if="drugReportItem!=null">{{drugReportItem.remark}}</span></el-descriptions-item>
        <el-descriptions-item label="评分"span="3"><span v-if="drugReportItem!=null"><span v-html="drugReportItem.pingStar"></span></span></el-descriptions-item>
        <el-descriptions-item label="评价" span="3"><span v-if="drugReportItem!=null"> <span v-html="drugReportItem.pingContent"></span></span></el-descriptions-item>
        <el-descriptions-item label="评价时间" span="3"><span v-if="drugReportItem!=null"> <span v-html="drugReportItem.pingTime"></span></span></el-descriptions-item>
        <el-descriptions-item label="创建时间" span="3"><span v-if="drugReportItem!=null"> <span v-html="drugReportItem.createTime"></span></span></el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button @click="drugReportDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="drugReportDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { getDrugReport} from "@/api/his/drugReport";
import { getPatientMobile,getInquiryOrderReportByOrderId} from "@/api/his/inquiryOrderReport";
import {msgList,getMsgFollow} from "@/api/his/storeOrder";
import prescribeDetails from '../../components/his/prescribeDetails.vue';
import {getPrescribe,getDrugInfo} from "@/api/his/prescribe";
export default {
  components:{prescribeDetails},
  name: "FollowMsgList",
  data() {
    return {
      usageJson:{},
      prescribeItem:{},
      statusDrugReportOptions:[],
      reportItem:{},
      drugReportItem:{},
      followList:[],
      inquirySubTypeOptions:[],
      statusOptions:[],
      prod:[],
      followDialogVisible:false,
      reportDialogVisible:false,
      drugReportDialogVisible:false,
      prescribeDialog:{
        open:false,
        title:"处方单"
      },
      msgForm:{
        pageNum: 1,
        pageSize: 10,
        userId:null,
        followDoctorId:null,
      },
      total:0,
      msg:[],
      doctorName:null,
      patientName:null,
      orOptions:[],
      form: {

      }
    }
  },
  created() {
    this.getDicts("sys_company_or").then(response => {
      this.orOptions = response.data;
    });
    this.getDicts("sys_inquiry_sub_type").then(response => {
      this.inquirySubTypeOptions = response.data;
    });
    this.getDicts("sys_inquiry_order_report_status").then(response => {
      this.statusOptions = response.data;
    });
    this.getDicts("sys_drug_report_status").then(response => {
      this.statusDrugReportOptions = response.data;
    });
  },
  methods: {
    getPrescribe(orderId){
      if(orderId==null){
        return this.$message("未读取到随访")
      }
      this.prescribeDialog.open=true;
      getPrescribe(orderId).then(response => {
        this.prescribeItem = response.data;
        this.usageJson=JSON.parse(this.prescribeItem.usageJson)
      });
      getDrugInfo(orderId).then(response => {
        this.prod = response.data;

      });
    },
    getDetails(userId,followDoctorId,doctorName,patientName) {
      this.msgForm.userId=userId;
      this.msgForm.followDoctorId=followDoctorId;
      this.doctorName = doctorName;
      this.patientName = patientName;
      this.msgList();
    },
    msgList(){
      this.msg=[];
      msgList(this.msgForm).then(response => {
        this.msg = response.rows;
        this.total = response.total;
      });
    },
    handleClose(){
      this.prescribeDialog.open = false
    },
    handleCloseSF(){
      this.followDialogVisible=false;
    },
    handleCloseR(){
      this.reportDialogVisible=false;
    },
    handleCloseDR(){
      this.drugReportDialogVisible=false;
    },
    follow(row){
      if(row==null){
        return this.$message("未读取到随访")
      }
      getMsgFollow(row).then(response => {
        if(response.data.formJson!=null&&response.data.formJson!=''&&response.data.writeStatus==1){
          this.followList=JSON.parse(response.data.formJson );
          this.followDialogVisible=true;
        }else{
          return this.$message("随访单未填写")
        }
      });

    },
    report(row){
      if(row==null){
        return this.$message("未读取到报告")
      }
      if(row=="医生提交问诊报告"){
        return this.$message("未读取到报告")
      }
      getInquiryOrderReportByOrderId(row).then(response => {
        if(response.data!=null){
          this.reportItem = response.data;
        }
      });
      this.reportDialogVisible=true;
    },
    drugReport(row){
      if(row==null){
        return this.$message("未读取到报告")
      }
      getDrugReport(row).then(response => {
        this.drugReportItem = response.data;
      });
      this.drugReportDialogVisible=true;
    },
  }
}
</script>
<style>

.contentx{
  height: 100%;
  background-color: #fff;
  padding: 0px 20px 20px;


  margin: 20px;
}
.el-descriptions-item__label.is-bordered-label{
  font-weight: normal;
}
.el-descriptions-item__content {
  max-width: 150px;
  min-width: 100px;
}
.desct{
  padding-top: 20px;
  padding-bottom: 20px;
  color: #524b4a;
  font-weight: bold;
}
</style>
<style scoped>
.chat-records {

  overflow-y: auto;
}
.timestamp {
  font-size: 12px;
  color: #A9A9A9;
}
.chat-record {
  margin: 10px;
  flex-direction: column;
  align-items: flex-start;
}
.sent {
  background-color: #fbfdff;
  color: #000839;
}
.right{
  float: right;
}
.received {
  background-color: #fbfdff;
  color: #000000;
}

.el-descriptions-item__content {
  max-width: 150px;
  min-width: 100px;
}
</style>
<style scoped>
.order-content{
  margin: 10px;

}

.operate-container {
  background: #F2F6FC;
  height: 60px;
  margin: -20px -20px 0;
  line-height: 60px;
}

.operate-button-container {
  float: right;
  margin-right: 20px
}
</style>