ylrz_his_scrm_companyUI/src/views/store/components/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">
        <span v-if="patientInfo">
            {{ patientInfo }}
          </span>
          <span v-else>
            患者信息
          </span>
      </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/store/drugReport";
import { getPatientMobile,getInquiryOrderReportByOrderId} from "@/api/store/inquiryOrderReport";
import {msgList,getMsgFollow} from "@/api/store/storeOrder";
import prescribeDetails from '../../store/components/prescribeDetails.vue';
import {getPrescribe,getDrugInfo} from "@/api/store/prescribe";
  export default {
    components:{prescribeDetails},
    name: "FollowMsgList",
    data() {
      return {
        patientInfo: process.env.VUE_APP_PATIENT_INFO,
        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(){
          console.log("Ssss")
        msgList(this.msgForm).then(response => {
          console.log(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>