diagnosis.admin/src/views/knowledge/DiseaseD.vue

<template>
  <div class="recipeAuditD flex-plane-center-top">
    <div class="recipe-left">
      <div style="margin-bottom:10px;">
        <el-button size="small" type="primary" @click="$router.back()">返回</el-button>
        <el-button size="small" v-if="showPrintHTML" type="primary" icon="el-icon-download" :disabled="loading" @click="print()">下载打印</el-button>
      </div>
      <div class="msg print-containers" ref="print">
        <div class="msg-item flex-plane-center-l">
          <span>疾病名称：</span>
          <div>{{info.disname}}</div>
        </div>
        <div class="msg-item flex-plane-center-l">
          <span>疾病概述：</span>
          <div>{{info.dissummary}}</div>
        </div>
        <div class="msg-item flex-plane-center-l">
          <span>病因病机：</span>
          <div>{{info.disetiology}}</div>
        </div>
        <div class="msg-item flex-plane-center-l">
          <span>诊断依据：</span>
          <div>{{info.dispoints}}</div>
        </div>
        <div class="msg-item flex-plane-center-l">
          <span>病症鉴别：</span>
          <div>{{info.disidentify}}</div>
        </div>
        <div class="msg-item flex-plane-center-l">
          <span>预防调护：</span>
          <div>{{info.disprevent}}</div>
        </div>
      </div>
    </div>

    <div class="recipe-right" v-if="false">
      <div class="title">我的验案</div>

      <div class="table">
        <el-table :data="tableData" stripe style="width: 100%" border>
          <el-table-column prop="id" label="序号"></el-table-column>
          <el-table-column prop="name" label="专家名称"></el-table-column>
          <el-table-column prop="disName" label="疾病名称"></el-table-column>
          <el-table-column prop="type" label="证型"></el-table-column>
          <el-table-column prop="treatment" label="治法"></el-table-column>
          <el-table-column prop="from" label="来源"></el-table-column>
        </el-table>
      </div>

      <div class="flex-vertical-center-r">
        <div class="flex-center find-more" @click="$message({message: '暂无更多',type: 'warning'})">查看更多</div>
      </div>
    </div>
  </div>
</template>
<script>
import { getDiseasetDetail } from "@/api/knowledge.js";
import {getDataByKey} from '@/api/system';
import printJS from 'print-js';
import {mapGetters} from 'vuex';
export default {
  data() {
    return {
      loading: false,
      showPrintHTML: false,
      info: {},
      tableData: [
        {
          id: 1,
          name: "王小虎",
          disName: "风寒感冒",
          type: "中医证型", // 证型
          treatment: "心热解表",
          from: "中国现代百名中医"
        },
        {
          id: 1,
          name: "王小虎",
          disName: "风寒感冒",
          type: "中医证型", // 证型
          treatment: "心热解表",
          from: "中国现代百名中医"
        },
        {
          id: 1,
          name: "王小虎",
          disName: "风寒感冒",
          type: "中医证型", // 证型
          treatment: "心热解表",
          from: "中国现代百名中医"
        },
        {
          id: 1,
          name: "王小虎",
          disName: "风寒感冒",
          type: "中医证型", // 证型
          treatment: "心热解表",
          from: "中国现代百名中医"
        }
      ]
    };
  },
  created() {
    getDataByKey({
      key: "showPrintHTML",
      organizationid: this.getuserinfo.organizationid,
    }).then(data => { this.showPrintHTML = data.enabled; });
    this.getDiseasetDetail();
  },
  computed: {
    ...mapGetters(["getuserinfo"])
  },
  methods: {
    // 获取详情数据
    async getDiseasetDetail() {
      this.loading = true;
      let params = {
        disid: this.$route.query.disid
      };
      let res = await getDiseasetDetail(params);
      if (res.code == 0) {
        this.info = res.data;
        this.loading = false;
      }
    },
    async print() {
      printJS({
        printable: this.$refs.print,
        type: 'html',
        documentTitle: `名医名方 - 疾病`,
        scanStyles: false,
        css: ['print/containers.css', 'print/DiseaseD.css'],
      })
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../style/common.scss";

.recipeAuditD {
  height: 81vh;

  .recipe-left {
    padding: 10px 10px;
    background: #ffffff;
    border-radius: 5px;
    // width: 375px;
    flex: 1;
    margin-right: 20px;
    box-sizing: border-box;
    height: 100%;
    overflow: auto;

    .back-btn {
      width: 74px;
      height: 36px;
      background: #5386f6;
      border-radius: 4px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
      margin-bottom: 34px;
      cursor: pointer;
    }

    .msg {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333333;

      .msg-item {
        margin-bottom: 15px;
      }

      span {
        text-align-last: justify;
        width: 80px;
        text-align: justify;
      }

      div {
        flex: 1;
        overflow: hidden;
      }
    }
  }

  .recipe-right {
    flex: 1;
    overflow: hidden;
    padding: 33px 26px;
    background: #ffffff;
    border-radius: 5px;

    .title {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333333;
      margin-bottom: 21px;
    }

    .find-more {
      margin-top: 62px;

      width: 74px;
      height: 36px;
      background: #ffae45;
      border-radius: 4px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
      cursor: pointer;
    }
  }
}

.table::v-deep .el-table .cell {
  text-align: center;
}
</style>

<style lang="scss" scoped>
@media screen and (min-width: 1681px) and (max-width: 1920px) {
  .recipeAuditD {
    height: 89vh;
  }
}

@media screen and (min-width: 1601px) and (max-width: 1680px) {
  .recipeAuditD {
    height: 88vh;
  }
}

@media screen and (min-width: 1361px) and (max-width: 1600px) {
  .recipeAuditD {
    height: 83vh;
  }
}

@media screen and(min-width:1281px) and (max-width: 1360px) {
  .recipeAuditD {
    height: 83vh;
  }
}
</style>