xt_pad/src/pages/main/PrintIndex.vue

<template>
  <div class="mainBox" v-loading="loading" element-loading-text="加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" style="width: 100%;height: 100%">
    <side-bar :active_index="0" v-if="isShow == true"></side-bar>
    <div class="mainContent">
      <div class="navigation" v-if="isShow == true">
        <div class="goBack">
          <span class="back" @click="backAction()"><span class="iconfont">&#xe720;</span>返回</span>
        </div>
        <!--<div class="print" style="float: right">-->
          <!--&lt;!&ndash;<el-button size="mini" type="primary" icon="el-icon-printer" @click="printThisPage">打印</el-button>&ndash;&gt;-->
        <!--</div>-->
      </div>
      <DialysisPrintOrderOne style="margin-top:60px;" v-bind:childResponse="childResponse" v-if="org_template_info.template_id ==1"> </DialysisPrintOrderOne>
      <DialysisPrintOrderTwo style="margin-top:60px;" v-bind:childResponse="childResponse" v-if="org_template_info.template_id ==2||org_template_info.template_id ==0"></DialysisPrintOrderTwo>
      <DialysisPrintOrderFive style="margin-top:60px;" v-bind:childResponse="childResponse" v-if="org_template_info.template_id ==5"></DialysisPrintOrderFive>

    </div>
  </div>
</template>


<script>
import { getPrintDialysisRecord } from "@/api/dialysis";
import { getDataConfig } from "@/utils/data";
import SideBar from "@/pages/layout/SideBar";
import { jsGetAge, uParseTime } from "@/utils/tools";
import { fetchAllAdminUsers } from "@/api/doctor";
import LabelBox from "./printItem/LabelBox";
import DialysisPrintOrderOne from './template/DialysisPrintOrderOne';
import DialysisPrintOrderTwo from './template/DialysisPrintOrderTwo';
import DialysisPrintOrderFive from './template/DialysisPrintOrderFive';

export default {
  name: "PrintIndex",
  components: {
    DialysisPrintOrderOne,
    DialysisPrintOrderTwo,
    DialysisPrintOrderFive,
    LabelBox,
    SideBar
  },
  data() {
    return {
      isShowImg: true,
      isShow: true,
      operators: [],
      dialysisOrder: {
        DeviceNumber: []
      },
      org_template_info: {},
      childResponse: {},
      operatorMaps: {},
      complications: [
        "低血压",
        "高血压",
        "心律失常",
        "头晕",
        "头痛",
        "呕吐",
        "抽搐",
        "出血",
        "心衰",
        "腹痛"
      ],
      jilurow: 10,
      loading: true,
      orgname: "",
      patientInfo_gender_1: false,
      patientInfo_gender_2: false,
      patientInfo_source_2: false,
      patientInfo_source_1: false,
      modeOptions: {},
      replacementWays: [],
      perfusionApparatus: [],
      anticoagulantsConfit: {},
      bloodAccessParOpera: {},
      dialysateFormulationOptions: {},

      queryParams: {
        xtdate: "",
        xtno: ""
      },
      patientInfo: {
        birth: "",
        age: "",
        DialysisSchedule: {
          device_number: { number: "" },
          device_zone: { name: "" }
        },
        gender: 0
      },
      predialysis: {
        internal_fistula: "",
        internal_fistula_skin: "",
        catheter: "",
        blood_access_part_opera_name: ""
      },
      afterdialysis: {
        complications_index: ""
      },
      prescription: {
        dialysate_formulation_name: "",
        device: {}
      },
      advices: [],
      users: [],
      monitors: [],
      summary: {},
      adminUser: [],
      receiverTreatmentAccess: {},


      AlPanel: {
        id: 0,
        name: "",
        type: 1,
        shouji: 2,
        weichi: 2,
        zongliang: 2,
        gaimingcheng: -1,
        gaijiliang: -1,
        shouji_unit: "mg",
        weichi_unit: "mg/h",
        zongliang_unit: "mg",
        gaimingcheng_unit: "",
        gaijiliang_unit: ""
      }
    };
  },

  methods: {
    getUser() {
      fetchAllAdminUsers().then(response => {
        if (response.data.state == 1) {
          this.adminUser = response.data.data.users;
          console.log(this.adminUser);
          this.loading = false;
        } else {
          this.loading = false;
          this.$message.error("请求数据失败");
          return false;
        }
      });
    },
    getTime(value, temp) {
      if (value != undefined) {
        return uParseTime(value, temp);
      }
      return "";
    },
    // printThisPage() {
    //   var xtdate = this.$route.query.xtdate;
    //   this.$router.push(
    //     "/Prints?xtdate=" + xtdate + "&xtno=" + this.$route.query.xtno
    //   );
    // },
    backAction() {
      this.$router.back(-1);
    },
    getXuserName(id) {
      if (id <= 0) {
        return "";
      }
      var name = "";
      if (this.users == null || typeof this.users.length == "undefined") {
        return name;
      }
      var leng = this.users.length;
      if (leng == 0) {
        return name;
      }
      for (let index = 0; index < leng; index++) {
        if (this.users[index].id == id) {
          name = this.users[index].name;
          break;
        }
      }
      return name;
    },
    setAdminUserES(id) {
      console.log(id);
      if (id == 0) {
        return "";
      }
      if (id == undefined) {
        return "";
      }
      if (id in this.operatorMaps) {
        return this.operatorMaps[id].url;
      }
      return "";
    },
    modeName(mode_id) {
      return typeof this.modeOptions[mode_id] != "undefined" &&
        typeof this.modeOptions[mode_id].name != "undefined"
        ? this.modeOptions[mode_id].name
        : "";
    },
    getDialysisRecord() {
      this.loading = true
      getPrintDialysisRecord(this.queryParams).then(response => {
        this.loading = false
        if (response.data.state == 1) {
          this.childResponse = response
          this.org_template_info = response.data.data.org_template_info
        } else {
          this.$message.error("请求数据失败");
          return false;
        }

        console.log(this.advices);
      });
    },

    bloodAccessParOperaName(id) {
      if (id in this.bloodAccessParOpera) {
        return this.bloodAccessParOpera[id].name;
      }
      return "";
    },
    dialysateFormulationName(id) {
      if (id in this.dialysateFormulationOptions) {
        return this.dialysateFormulationOptions[id].name;
      }
      return "";
    },
    getNumber() {
      if (this.dialysisOrder != null) {
        return (
          this.patientInfo.DialysisSchedule.device_zone.name +
          this.dialysisOrder.DeviceNumber.number
        );
      } else {
        return this.patientInfo.DialysisSchedule.device_zone.name;
      }
    },
    getAdminUser(id) {
      console.log(id);
      if (id == 0) {
        return "";
      }
      if (id == undefined) {
        return "";
      }
      for (let i = 0; i < this.adminUser.length; i++) {
        if (this.adminUser[i].id == id) {
          return this.adminUser[i].name;
        }
      }
    },
    printlog(val) {
      console.log(typeof val + "Second");
    }
  },
  watch: {
    "patientInfo.gender": function() {
      if (this.patientInfo.gender == 1) {
        this.patientInfo_gender_1 = true;
        this.patientInfo_gender_2 = false;
      } else if (this.patientInfo.gender == 2) {
        this.patientInfo_gender_2 = true;
        this.patientInfo_gender_1 = false;
      } else {
        this.patientInfo_gender_2 = false;
        this.patientInfo_gender_1 = false;
      }
    },

    "patientInfo.source": function() {
      if (this.patientInfo.source == 1) {
        this.patientInfo_source_1 = true;
        this.patientInfo_source_2 = false;
      } else if (this.patientInfo.source == 2) {
        this.patientInfo_source_2 = true;
        this.patientInfo_source_1 = false;
      } else {
        this.patientInfo_source_2 = false;
        this.patientInfo_source_1 = false;
      }
    }
  },
  created() {
    var xtuser = this.$store.getters.user;
    this.orgname = xtuser.org.org_name;
    // this.orgname = "遂溪方济医院";
    this.modeOptions = this.$store.getters.treatment_mode;
    this.replacementWays = this.$store.getters.replacement_ways;
    this.perfusionApparatus = this.$store.getters.perfusion_apparatus;
    this.anticoagulantsConfit = this.$store.getters.anticoagulants_confit;

    // this.bloodAccessParOpera = getDataConfig('hemodialysis', 'vascular_access_desc')

    var bloodAccessParOpera = getDataConfig(
      "hemodialysis",
      "vascular_access_desc"
    );
    for (var key in bloodAccessParOpera) {
      this.bloodAccessParOpera[bloodAccessParOpera[key].id] =
        bloodAccessParOpera[key];
    }

    var dialysateFormulationOptions = getDataConfig(
      "hemodialysis",
      "dialysate_formulation"
    );
    for (var key in dialysateFormulationOptions) {
      this.dialysateFormulationOptions[dialysateFormulationOptions[key].id] =
        dialysateFormulationOptions[key];
    }

    const xtdate = this.$route.query && this.$route.query.xtdate;
    const xtno = this.$route.query && this.$route.query.xtno;
    if (
      typeof xtdate == "string" &&
      xtdate.length > 0 &&
      typeof xtno == "string" &&
      xtno.length > 0
    ) {
      this.queryParams.xtdate = xtdate;
      this.queryParams.xtno = xtno;
      this.getDialysisRecord();
    } else {
      this.$message.error("参数不齐");
      return false;
    }

    // this.getUser();
  }
};
</script>

<style style="stylesheet/scss" lang="scss" scoped>
.dialysis-print-order {
  width: 960px;
  margin: 0 auto;
  .order-yy-name {
    margin:10px auto 0 auto;
    text-align: center;
    font-size: 20px;
  }
  .order-title {
    margin: auto;
    font-weight: 600;
    text-align: center;
    font-size: 22px;
    padding: 10px 20px 20px 20px;
  }
  .table-box {
    width: 100%;
    line-height: 15px;
    font-size: 14px;
    .under-line {
      border-bottom: 1px solid #999;
      width: 95%;
      text-align: center;
      margin-left: 2px;
    }
  }
  .print-table {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
    line-height: 25px;
    font-size: 14px;
    .title-box {
      text-align: center;
      font-size: 16px;
    }
  }
  .print-table-no {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
    font-size: 14px;
  }
}

.dialysis-print-order .radio-lebel-box {
  font-weight: 400;
  cursor: pointer;
}
.dialysis-print-order .radio-no {
  opacity: 0;
  outline: none;
  position: absolute;
  margin: 0;
  width: 0;
  height: 0;
  z-index: -1;
}
.dialysis-print-order .radio-inner {
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  display: inline-block;
  line-height: 1;
  position: relative;
  vertical-align: middle;
}
.dialysis-print-order .radio-fang {
  display: inline-block;
  position: relative;
  border: 1px solid #000;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  background-color: #fff;
  z-index: 1;
  transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
    background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
}
.dialysis-print-order .is-checked-radio::after {
  content: "√";
  font-size: 15px;
}
.es-img {
  height: 25px;
}

html,
body {
  height: 100%;
}
.mainBox {
  height: 100%;
  font-size: 0.3rem;
  .sideColumn {
    float: left;
    width: 1.58rem;
    background: #f5f8fb;
    height: 100%;
    border-right: 1px #c1c1c1 solid;
    position: fixed;
    .column {
      // height: 100%;
      // background: #f5f8fb;
      .head {
        @include display-flex;
        @include align-items-center;
        @include flex-direction;
        @include text-align;
        @include justify-content-center;
        margin: 0.5rem 0 0.5rem 0;
        img {
          width: 100%;
          height: 100%;
          border-radius: 0.5rem;
          width: 0.7rem;
          height: 0.7rem;
        }
      }
      .sidebar {
        @include display-flex;
        @include align-items-center;
        @include flex-direction;
        @include text-align;
        padding: 0;
        li {
          // font-size:0.23rem;
          padding: 0 0 0.8rem 0;
          a {
            color: #a8b3ba;
            display: inline-block;
            padding: 0;
            margin: 0;
            p {
              font-size: 0.24rem;
              margin-top: 0.2rem;
            }
            .iconfont {
              font-size: 0.5rem;
              display: inline-block;
            }
          }
          &.active {
            a {
              color: #409eff;
            }
          }
        }
      }
    }
  }
}
.navigation {
  @include display-flex;
  @include align-items-center;
  @include text-align;
  @include box-sizing;
  @include justify-content-between;
  padding: 0.3rem 0.36rem;
  border-bottom: 1px #e5e5e5 solid;
  position: fixed;
  top: 0;
  left: 1.58rem;
  right: 0;
  z-index: 100;
  background: #fff;
  .goBack {
    // color: #6e7a87;
    cursor: pointer;
    @include display-flex;
    @include align-items-center;
    @include text-align;
    .back {
      color: $main-color;
      margin-right: 0.87rem;
      .iconfont {
        color: $main-color;
      }
    }
    .name {
      .iconfont {
        margin-left: 0.1rem;
      }
    }
  }
  .nav {
    ul {
      li {
        float: left;
        font-size: 0.3rem;
        margin: 0 0.2rem;
        height: 0.5rem;
        line-height: 0.5rem;
        width: 1rem;
        cursor: pointer;
        &.active {
          background: $main-color;
          color: #fff;
          border-radius: 30px;
        }
      }
    }
  }
  .time {
    cursor: pointer;
    .iconfont {
      margin-left: 0.1rem;
    }
  }
}

.mainContent {
  margin: 0 0 0 1.58rem;
}
</style>