xt_pad/src/pages/main/dialog/LongDialog.vue

<template>
  <div>
    <div class="Dialog"  v-show="showObj.paden_show">
      <div class="DialogTit">
        <span class="iconfont"  @click="$emit('closeLongDialog')">&#xe6e9;</span>
        <h1 class="name">长期处方</h1>
        <span @click="submitSolution" class="success">完成</span>
      </div>

      <div class="DialogContent">
        <div class="item" @click="showMenu(0)">
          <h2 class="name">透析模式</h2>
          <div class="content" >
            <span class="text">{{dialysisSolution.mode_name}}</span>
            <span class="iconfont">&#xe6f9;</span>
          </div>
        </div>
        <div class="item">
          <h2 class="name">透析时长(h)</h2>
          <div class="content">
            <input type="number" v-model="dialysisSolution.dialysis_duration">
            <!-- <span class="text">1</span>   -->
            <!-- <span class="iconfont">&#xe6f9;</span>  -->
          </div>
        </div>
        <div class="item" @click="showMenu(1)">
          <h2 class="name">透析器</h2>
          <div class="content" >
            <span class="text">{{dialysisSolution.hemodialysis_machine_name}}</span>
            <span class="iconfont">&#xe6f9;</span>
          </div>
        </div>
        <div class="item">
          <h2 class="name">灌流器</h2>
          <div class="content" @click="showMenu(2)">
            <span class="text">{{dialysisSolution.perfusion_apparatus_name}}</span>
            <span class="iconfont">&#xe6f9;</span>
          </div>
        </div>

        <div class="item">
          <h2 class="name">血流量(ml/min)</h2>
          <div class="content">
            <input type="number" v-model="dialysisSolution.blood_flow_volume">
            <!-- <span class="text">HD</span>   -->
            <!-- <span class="iconfont">&#xe6f9;</span> -->
          </div>
        </div>
        <div class="item">
          <h2 class="name">脱水量(L)</h2>
          <div class="content">
            <input type="number" v-model="dialysisSolution.dewater">
            <!-- <span class="text">HD</span>   -->
            <!-- <span class="iconfont">&#xe6f9;</span> -->
          </div>
        </div>

        <div class="line"></div>

        <div class="item">
          <h2 class="name">置换液(L)</h2>
          <div class="content">
            <input type="number" v-model="dialysisSolution.displace_liqui">
            <!-- <span class="text">HD</span>   -->
            <!-- <span class="iconfont">&#xe6f9;</span> -->
          </div>
        </div>
        <div class="item">
          <h2 class="name">置换方式</h2>
          <div class="content" @click="showMenu(3)">
            <span class="text">{{dialysisSolution.replacement_way_name}}</span>
            <span class="iconfont">&#xe6f9;</span>
          </div>
        </div>

        <div class="item">
          <h2 class="name">抗疑剂</h2>
          <div class="content" @click="showMenu(4)">
            <span class="text">{{dialysisSolution.anticoagulant_name}}</span>
            <span class="iconfont">&#xe6f9;</span>
          </div>
        </div>
        <div class="item" v-show="anticoagulant.shouji != -1">
          <h2 class="name">首剂({{anticoagulant.shouji_unit}})</h2>
          <div class="content">
          <input type="text"  v-model="dialysisSolution.anticoagulant_shouji" :disabled="anticoagulant.shouji==1?false:true">
          </div>
        </div>
        <div class="item" v-show="anticoagulant.weichi != -1">
          <h2 class="name">维持({{anticoagulant.weichi_unit}})</h2>
          <div class="content">
          <input type="text"  v-model="dialysisSolution.anticoagulant_weichi" :disabled="anticoagulant.weichi==1?false:true">
          </div>
        </div>
        <div class="item"  v-show="anticoagulant.zongliang != -1">
          <h2 class="name">总量({{anticoagulant.zongliang_unit}})</h2>
          <div class="content">
          <input type="text" v-model="dialysisSolution.anticoagulant_zongliang" :disabled="anticoagulant.zongliang==1?false:true" >
          </div>
        </div>
        <div class="item"  v-show="anticoagulant.gaimingcheng != -1">
          <h2 class="name">钙({{anticoagulant.gaimingcheng_unit}})</h2>
          <div class="content">
            <input type="text" v-model="dialysisSolution.anticoagulant_gaimingcheng" :disabled="anticoagulant.gaimingcheng==1?false:true" >
          </div>
        </div>
        <div class="item"  v-show="anticoagulant.gaijiliang != -1">
          <h2 class="name">钙剂量</h2>
          <div class="content">
            <input type="text" v-model="dialysisSolution.anticoagulant_gaijiliang" :disabled="anticoagulant.gaijiliang==1?false:true" >
          </div>
        </div>

        <div class="line"></div>

        <div class="item">
          <h2 class="name">钾(mmol/L)</h2>
          <div class="content">
            <input type="number" v-model="dialysisSolution.kalium">
            <!-- <span class="text">HD</span>   -->
            <!-- <span class="iconfont">&#xe6f9;</span> -->
          </div>
        </div>
        <div class="item">
          <h2 class="name">钠(mmol/L):</h2>
          <div class="content">
            <input type="number" v-model="dialysisSolution.sodium">
            <!-- <span class="text">HD</span>   -->
            <!-- <span class="iconfont">&#xe6f9;</span> -->
          </div>
        </div>
        <div class="item">
          <h2 class="name">钙(mmol/L)</h2>
          <div class="content">
            <input type="number" v-model="dialysisSolution.calcium">
            <!-- <span class="text">HD</span>   -->
            <!-- <span class="iconfont">&#xe6f9;</span> -->
          </div>
        </div>
        <div class="item">
          <h2 class="name">碳酸氢盐(mmol/L)</h2>
          <div class="content">
            <input type="number" v-model="dialysisSolution.bicarbonate">
            <!-- <span class="text">HD</span>   -->
            <!-- <span class="iconfont">&#xe6f9;</span> -->
          </div>
        </div>
        <div class="item">
          <h2 class="name">葡萄糖(mmol/L)</h2>
          <div class="content">
            <input type="number" v-model="dialysisSolution.glucose">
            <!-- <span class="text">HD</span>   -->
            <!-- <span class="iconfont">&#xe6f9;</span> -->
          </div>
        </div>
        <div class="item">
          <h2 class="name">干体重(kg)</h2>
          <div class="content">
            <input type="number" v-model="dialysisSolution.dry_weight">
            <!-- <span class="text">HD</span>   -->
            <!-- <span class="iconfont">&#xe6f9;</span> -->
          </div>
        </div>

        <div class="line"></div>

        <div class="item">
          <h2 class="name">透析液流量(ml/min)</h2>
          <div class="content">
            <input type="number" v-model="dialysisSolution.dialysate_flow">
            <!-- <span class="text">HD</span>   -->
            <!-- <span class="iconfont">&#xe6f9;</span> -->
          </div>
        </div>
        <div class="item">
          <h2 class="name">透析液温度(℃)</h2>
          <div class="content">
            <input type="number" v-model="dialysisSolution.dialysate_temperature">
            <!-- <span class="text">HD</span>   -->
            <!-- <span class="iconfont">&#xe6f9;</span> -->
          </div>
        </div>
        <div class="item">
          <h2 class="name">电导率(mS/cm)</h2>
          <div class="content">
            <input type="number" v-model="dialysisSolution.conductivity">
            <!-- <span class="text">HD</span>   -->
            <!-- <span class="iconfont">&#xe6f9;</span> -->
          </div>
        </div>

        <div class="line"></div>

        <div class="item">
          <h2 class="name">备注</h2>
          <div class="content">
            <span class="text"></span>
          </div>
        </div>
        <textarea class="textarea" placeholder="请输入内容" v-model="dialysisSolution.remark"></textarea>
      </div>
      <!--<div class="footer">-->
        <!--处方医生：{{doctor}}-->
      <!--</div>-->
    </div>

    <!-- <div class="Dialog" v-show="mode_show">
        <div class="DialogTit">
            <span class="iconfont" @click="paden_show=true;mode_show=false;">&#xe720; 返回</span>
            <h1 class="name">模式</h1>
            <span class="success"></span>
        </div>
        <div class="optionsBox">
          <div class="list">
            <ul>
              <li @click="handleMode(item)" v-for="item in modeOptions" :key="item.id" value="item.id" :class="dialysisSolution.mode_id == item.id? 'tick':'' ">{{item.name}}</li>
            </ul>
          </div>
        </div>
    </div> -->
    <long-dialog-menu title="模式" v-show="showObj.mode_show[0]" :show_index="0" :option_poro="modeList"  :data_prop="dialysisSolution" :show_prop="showObj" data_mode="mode" :index="dialysisSolution.mode_id"></long-dialog-menu>

    <long-dialog-menu title="透析器" v-show="showObj.mode_show[1]" :show_index="1" :option_poro="dialyserList"  :data_prop="dialysisSolution" :show_prop="showObj" data_mode="hemodialysis_machine" :index="dialysisSolution.hemodialysis_machine"></long-dialog-menu>

    <long-dialog-menu title="灌流器" v-show="showObj.mode_show[2]" :show_index="2" :option_poro="perfusion_apparatus"  :data_prop="dialysisSolution" :show_prop="showObj" data_mode="perfusion_apparatus" :index="dialysisSolution.perfusion_apparatus"></long-dialog-menu>

    <long-dialog-menu title="置换方式" v-show="showObj.mode_show[3]" :show_index="3" :option_poro="replacementWays"  :data_prop="dialysisSolution"  :show_prop="showObj" data_mode="replacement_way" :index="dialysisSolution.replacement_way"></long-dialog-menu>

    <long-dialog-menu title="搞凝剂" v-show="showObj.mode_show[4]" :show_index="4" :option_poro="anticoagulantsConfitList"  :data_prop="dialysisSolution"  :show_prop="showObj" data_mode="anticoagulant" :index="dialysisSolution.anticoagulant"></long-dialog-menu>
  </div>
</template>

<script>
import LongDialogMenu from "./subMenu/LongDialogMenu";
import { createPatientDialysisSolution } from "@/api/patient";
import { Toast } from "vant";

export default {
  name: "LongDialog",
  components: {
    LongDialogMenu
  },
  methods: {
    handleDialyser(item) {
      this.showObj.paden_show = true;
    },
    showModel() {
      this.showObj.mode_show[0] = true;
      this.showObj.paden_show = false;
    },
    showQi() {
      this.showObj.mode_show[1] = true;
      this.showObj.paden_show = false;
    },
    showMenu(index) {
      this.showObj.mode_show[index] = true;
      this.showObj.paden_show = false;
    },

    submitSolution() {
      this.dialysisSolution.mode = this.dialysisSolution.mode_id;
      createPatientDialysisSolution(
        this.patient.id,
        this.dialysisSolution
      ).then(response => {
        if (response.data.state == 0) {
          Toast.fail(response.data.msg);
          // this.$toast({message: response.data.msg});
          return false;
        } else {
          Toast.success("创建成功");
          // this.$toast({message: "创建成功"});
          this.$emit("longSolution");
          for (const key in response.data.data.solution) {
            this.solution_prop[key] = response.data.data.solution[key];
          }
          // this.solution_prop = response.data.data.solution
        }
      });
    }
  },

  props: {
    patient_prop: {
      type: Object
    },
    solution_prop: {
      type: Object
    },
    machines_prop: {
      type: Array,
      default: function() {
        return new Array();
      }
    }
  },
  data() {
    return {
      doctor: "",
      showObj: {
        mode_show: {
          0: false,
          1: false,
          2: false,
          3: false
        },
        paden_show: true
      },
      patient: {
        id: 0
      },
      modeOptions: {},
      modeList: [],
      perfusion_apparatus: [],
      anticoagulantsConfit: {},
      anticoagulantsConfitList: [],
      replacementWays: [],
      dialyserList: [],

      anticoagulant: {
        id: 0,
        name: "",
        type: 1,
        shouji: 1,
        weichi: 1,
        zongliang: 1,
        gaimingcheng: -1,
        gaijiliang: -1,
        shouji_unit: "mg",
        weichi_unit: "mg/h",
        zongliang_unit: "mg",
        gaimingcheng_unit: "",
        gaijiliang_unit: ""
      },
      patient: {
        id: 0
      },
      dialysisSolution: {
        id: 0,
        mode: "",
        mode_id: "",
        mode_name: "",
        dialysis_duration: "",
        hemodialysis_machine: "",
        perfusion_apparatus: "",
        perfusion_apparatus_name: "",
        blood_flow_volume: "",
        dewater: "",
        displace_liqui: 0,
        replacement_way: "",
        replacement_way_name: "",
        anticoagulant: "",
        anticoagulant_name: "",
        anticoagulant_shouji: "",
        anticoagulant_weichi: "",
        anticoagulant_zongliang: "",
        anticoagulant_gaimingcheng: "",
        anticoagulant_gaijiliang: "",
        kalium: "",
        sodium: "",
        calcium: "",
        bicarbonate: "",
        glucose: "",
        dry_weight: "",
        dialysate_flow: "",
        dialysate_temperature: "",
        conductivity: "",
        doctor: "",
        remark: ""
      }
    };
  },
  watch: {
    "dialysisSolution.anticoagulant": function() {
      var thismode = parseInt(this.dialysisSolution.anticoagulant);
      if (isNaN(thismode) || thismode <= 0) {
        return false;
      }
      if (
        typeof this.anticoagulantsConfit[thismode] == "undefined" ||
        this.anticoagulantsConfit[thismode] == null
      ) {
        return false;
      }
      this.anticoagulant = this.anticoagulantsConfit[thismode];
      this.dialysisSolution.anticoagulant_name = this.anticoagulantsConfit[thismode].name;
    },
    "dialysisSolution.hemodialysis_machine":function(){
      var machine = parseInt(this.dialysisSolution.hemodialysis_machine);
      if (isNaN(machine) || machine <= 0) {
        return;
      }
      for (let index = 0; index < this.dialyserList.length; index++) {
        if (machine == this.dialyserList[index].id) {
          this.dialysisSolution.hemodialysis_machine_name = this.dialyserList[index].name;
          break;
        }
      }
    },
    "dialysisSolution.perfusion_apparatus": function(){
      var apparatus = parseInt(this.dialysisSolution.perfusion_apparatus);
      if (isNaN(apparatus) || apparatus<=0) {
        return false;
      }
      for (let index = 0; index < this.perfusion_apparatus.length; index++) {
        if (apparatus == this.perfusion_apparatus[index].id) {
          this.dialysisSolution.perfusion_apparatus_name = this.perfusion_apparatus[index].name;
          break;
        }
      }
    },
    "dialysisSolution.replacement_way": function(){
      var way = parseInt(this.dialysisSolution.replacement_way);
      if (isNaN(way) || way<=0) {
        return false;
      }
      for (let index = 0; index < this.replacementWays.length; index++) {
        if (way == this.replacementWays[index].id) {
          this.dialysisSolution.replacement_way_name = this.replacementWays[index].name;
          break;
        }
      }
    },
  },
  // computed:{
  //   dialysisSolution:function(){
  //     console.log("this.solution_prop",this.solution_prop);
  //     console.log("this.solution_prop",this.solution_prop);
  //     var solution = {};
  //     if (this.solution_prop != null && this.solution_prop.id != '') {
  //       for (const key in this.solution_prop) {
  //         solution[key] = this.solution_prop[key];
  //       }
  //       return solution;
  //     }else {
  //       return {};
  //     }
  //   }


  // },
  created() {
    this.doctor = this.$store.getters.user.user.user_name;
    this.modeOptions = this.$store.getters.treatment_mode;
    this.perfusion_apparatus = this.$store.getters.perfusion_apparatus;
    this.anticoagulantsConfit = this.$store.getters.anticoagulants_confit;
    this.replacementWays = this.$store.getters.replacement_ways;

    for (var modeOne in this.modeOptions) {
      this.modeList.push(this.modeOptions[modeOne]);
    }
    for (var one in this.anticoagulantsConfit) {
      this.anticoagulantsConfitList.push(this.anticoagulantsConfit[one]);
    }

    this.patient = this.patient_prop;

    // console.log("this.solution_prop",this.solution_prop);
    if (this.solution_prop != null && this.solution_prop.id != '') {
      for (const key in this.solution_prop) {
        this.dialysisSolution[key] = this.solution_prop[key];
      }
    }


    this.dialyserList = this.machines_prop;
  },
  // data() {
  //   return {
  //     show_two_menu: false
  //   };
  // },
  // methods: {
  //   selectDialysisMode: function() {
  //     var t = this;
  //     this.$refs.two_menu.showSingleSelect(
  //       [{ id: 1, name: "12e" }, { id: 2, name: "asdsadas" }],
  //       0,
  //       "透析模式",
  //       "name",
  //       "id",
  //       function() {
  //         t.show_two_menu = false;
  //       }
  //     );
  //     this.show_two_menu = true;
  //   }
  // }
};
</script>

<style style="stylesheet/scss" lang="scss" scoped>
.textarea {
  width: 100%;
  height: 2.4rem;
  line-height: 0.6rem;
  color: $pgh-color;
  font-size: 0.28rem;
  padding-left: 0.36rem;
  border: none;
}
.optionsBox {
  background: #fff;
  max-height: 10.6rem;
  min-height: 5rem;
  overflow-y: scroll;
  ul {
    li {
      height: 1rem;
      line-height: 1rem;
      border-bottom: 1px #e5e5e5 solid;
      padding: 0 0.38rem;
    }
    .tick {
      position: relative;
      &::before {
        content: "";
        display: inline-block;
        border: 2px solid $main-color;
        border-top-width: 0;
        border-right-width: 0;
        width: 0.3rem;
        height: 0.15rem;
        -webkit-transform: rotate(-50deg);
        position: absolute;
        top: 0.38rem;
        right: 0.44rem;
      }
    }
  }
}
.CheckBox {
  background: #fff;
  max-height: 10.6rem;
  min-height: 5rem;
  overflow-y: scroll;
  ul {
    li {
      line-height: 1rem;
    }
  }
}
</style>