xybpkmweb/src/components/DiagCalc.vue

<template>
  <div class="container">
    <div class="bgimg"></div>
    <div class="content" v-if="!popupVisible">
      <div class="title">FVIII药代动力学检测</div>
      <div class="diagForm">
        <mt-field label="病例体重(kg)" placeholder="整数或1位小数" type="number" v-model="form.bltz"></mt-field>
        <mt-field label="注射产品" placeholder="请选择产品" class="inputDisable" disabled v-model="form.mpro"
          @click.native="mproFlag=true;mfreqFlag=false">
          <img src="../assets/images/down.png" alt="" width="16px">
        </mt-field>
        <mt-field label="注射剂量(IU)" placeholder="请输入整数" v-model="form.zsjl" type="number"></mt-field>
        <!-- <div class="numSubTitle">
          <mt-field class="inputDisable" disabled placeholder="请选择时间" v-model="form.zssjt0"
            @click.native="$refs.t0Picker.open()">
            <img src="../assets/images/down.png" alt="" width="16px">
          </mt-field>
          <span>注射时间t<sub>0</sub></span>
        </div> -->
        <div class="numSubTitle">
            <mt-field class="inputDisable" disabled placeholder="请选择时间" v-model="form.zssjt0"
              @click.native="zssjt0Flag=true">
              <img src="../assets/images/down.png" alt="" width="16px">
            </mt-field>
            <span>注射时间t<sub>0</sub></span>
          </div>
        <mt-field label="基础活性%" placeholder="请输入2位小数" v-model="form.jchx"></mt-field>
        <!-- <mt-field label="注射后半小时内活性%" placeholder="请输入2位小数" type="number" v-model="form.zs30hx"></mt-field> -->
        <!-- <div class="numSubTitle">
          <mt-field class="inputDisable" disabled placeholder="请选择时间" v-model="form.cxsjt1"
            @click.native="$refs.t1Picker.open()">
            <img src="../assets/images/down.png" alt="" width="16px">
          </mt-field>
          <span>采血时间t<sub>1</sub></span>
        </div> -->
        <div class="numSubTitle">
            <mt-field class="inputDisable" disabled placeholder="请选择时间" v-model="form.cxsjt1"
              @click.native="cxsjt1Flag=true">
              <img src="../assets/images/down.png" alt="" width="16px">
            </mt-field>
            <span>采血时间t<sub>1</sub></span>
          </div>
        <div class="numSubTitle">
          <mt-field placeholder="请输入2位小数" v-model="form.t1hx" type="number"></mt-field>
          <span>t<sub>1</sub>点活性%</span>
        </div>
        <!-- <div class="numSubTitle">
          <mt-field class="inputDisable" disabled placeholder="请选择时间" v-model="form.cxsjt2"
            @click.native="$refs.t2Picker.open()">
            <img src="../assets/images/down.png" alt="" width="16px">
          </mt-field>
          <span>采血时间t<sub>2</sub></span>
        </div> -->
        <div class="numSubTitle">
            <mt-field class="inputDisable" disabled placeholder="请选择时间" v-model="form.cxsjt2"
              @click.native="cxsjt2Flag=true">
              <img src="../assets/images/down.png" alt="" width="16px">
            </mt-field>
            <span>采血时间t<sub>2</sub></span>
          </div>
        <div class="numSubTitle">
          <mt-field placeholder="请输入2位小数" v-model="form.t2hx" type="number"></mt-field>
          <span>t<sub>2</sub>点活性%</span>
        </div>
        <!-- <div class="numSubTitle">
          <mt-field class="inputDisable" disabled placeholder="请选择时间" v-model="form.cxsjt3"
            @click.native="$refs.t3Picker.open()">
            <img src="../assets/images/down.png" alt="" width="16px">
          </mt-field>
          <span>采血时间t<sub>3</sub></span>
        </div> -->
        <div class="numSubTitle">
            <mt-field class="inputDisable" disabled placeholder="请选择时间" v-model="form.cxsjt3"
              @click.native="cxsjt3Flag=true">
              <img src="../assets/images/down.png" alt="" width="16px">
            </mt-field>
            <span>采血时间t<sub>3</sub></span>
          </div>
        <div class="numSubTitle">
          <mt-field placeholder="请输入2位小数" v-model="form.t3hx" type="number"></mt-field>
          <span>t<sub>3</sub>点活性%</span>
        </div>
      </div>
      <!-- <div class="diagForm">
        <div class="formTitle">血友病治疗方案</div>
        <mt-field label="预防谷活性" type="number" placeholder="请输入整数" v-model="form.yfghx"></mt-field>
        <mt-field class="inputDisable" disabled label="注射频次" placeholder="请选择" v-model="form.zspc"
          @click.native="mfreqFlag=true">
          <img src="../assets/images/down.png" alt="" width="16px">
        </mt-field>
      </div> -->
      <div class="footer">
        <div class="jbbtn" @click="goBackRegpatinfo">返回</div>
        <div class="jbbtn" @click="submit">确定</div>
      </div>
    </div>
    <!-- 注射时间t0 -->
    <mt-datetime-picker ref="t0Picker" type="datetime" year-format="{value} 年" month-format="{value} 月"
      date-format="{value} 日" hourFormat="{value}时" minuteFormat="{value}分" @confirm='changeTime0' :endDate='endDate'
      :startDate='startDate' v-model="now" @touchmove.native.stop.prevent>
    </mt-datetime-picker>
    <vue-hash-calendar 
      :visible="zssjt0Flag"
      ref="zssjt0" 
      model="dialog"
      :is-show-action="true"
      picker-type="datetime"
      format="YY-MM-DD hh:mm"
      @confirm="dateConfirmZssjt0"
      :change-year-fast="true"
    ></vue-hash-calendar>
    <!-- 采血时间t1 -->
    <mt-datetime-picker ref="t1Picker" type="datetime" year-format="{value} 年" month-format="{value} 月"
      date-format="{value} 日" hourFormat="{value}时" minuteFormat="{value}分" @confirm='changeTime1' :endDate='endDate'
      :startDate='startDate' v-model="now" @touchmove.native.stop.prevent>
    </mt-datetime-picker>
    <vue-hash-calendar 
      :visible="cxsjt1Flag"
      ref="cxsjt1" 
      model="dialog"
      :is-show-action="true"
      picker-type="datetime"
      format="YY-MM-DD hh:mm"
      @confirm="dateConfirmCxsjt1"
      :change-year-fast="true"
    ></vue-hash-calendar>
    <!-- 采血时间t2 -->
    <mt-datetime-picker ref="t2Picker" type="datetime" year-format="{value} 年" month-format="{value} 月"
      date-format="{value} 日" hourFormat="{value}时" minuteFormat="{value}分" @confirm='changeTime2' :endDate='endDate'
      :startDate='startDate' v-model="now" @touchmove.native.stop.prevent>
    </mt-datetime-picker>
    <vue-hash-calendar 
      :visible="cxsjt2Flag"
      ref="cxsjt2" 
      model="dialog"
      :is-show-action="true"
      picker-type="datetime"
      format="YY-MM-DD hh:mm"
      @confirm="dateConfirmCxsjt2"
      :change-year-fast="true"
    ></vue-hash-calendar>
    <!-- 采血时间t3 -->
    <mt-datetime-picker ref="t3Picker" type="datetime" year-format="{value} 年" month-format="{value} 月"
      date-format="{value} 日" hourFormat="{value}时" minuteFormat="{value}分" @confirm='changeTime3' :endDate='endDate'
      :startDate='startDate' v-model="now" @touchmove.native.stop.prevent>
    </mt-datetime-picker>
    <vue-hash-calendar 
      :visible="cxsjt3Flag"
      ref="cxsjt3" 
      model="dialog"
      :is-show-action="true"
      picker-type="datetime"
      format="YY-MM-DD hh:mm"
      @confirm="dateConfirmCxsjt3"
      :change-year-fast="true"
    ></vue-hash-calendar>
    <!-- 注射频次 -->
    <!-- <mt-picker @change="onValuesChange1" v-if="mfreqFlag" :slots="slots1" ref="sexPicker1" class="sexPicker"
      :showToolbar="true" @touchmove.native.stop.prevent>
      <div class="pickerConfirm" @click="mfreqFlag=false">确认</div>
    </mt-picker> -->
    <!-- 注射产品 -->
    <mt-picker @change="onValuesChange" v-if="mproFlag" :slots="slots" ref="sexPicker" class="sexPicker"
      :showToolbar="true">
      <div class="pickerConfirm" @click="mproFlag=false">确认</div>
    </mt-picker>

    <!-- 试算弹出框 -->
    <div class="content" v-if="popupVisible">
      <div class="popupContainer">
        <!-- 药代动力学参数 -->
        <div class="diagShowForm">
          <div class="formTitle">FVIII 药代动力学参数</div>
          <div style="display:flex;">
            <div class="rowfont" style="width:50%;">半衰期(小时)</div>
            <div class="rowfont" style="width:50%;color:#888;">{{form.bsq}}</div>
          </div>
          <div style="display:flex;">
            <div class="rowfont" style="width:50%;">利用率%</div>
            <div class="rowfont" style="width:50%;color:#888;">{{form.lyl}}</div>
          </div>
          <div style="display:flex;">
            <div class="rowfont" style="width:50%;">预期峰值活性%</div>
            <div class="rowfont" style="width:50%;color:#888;">{{form.yqfzhx}}</div>
          </div>
        </div>
        <!-- 血友病预防治疗剂量计算 -->
        <div class="diagShowForm">
          <div class="formTitle">血友病预防治疗剂量计算</div>
          <div class="popupDiagForm">
            <mt-field label="目标谷活性%" type="number" placeholder="请输入整数" v-model="form.yfghx" @input.native="mczsjl=''">
            </mt-field>
            <mt-field class="inputDisable" disabled label="注射频次" placeholder="请选择" v-model="form.zspc"
              @click.native="mfreqFlag=true">
              <img src="../assets/images/down.png" alt="" width="16px">
            </mt-field>
            <mt-field label="每次注射剂量(IU)" type="number" placeholder="" v-model="mczsjl" disabled></mt-field>
          </div>
        </div>
        <div class="popupFooter">
          <div class="jbbtn" @click="goback">返回</div>
          <!-- <div class="jbbtn" @click="calc_mczsjl">计算</div> -->
          <div class="jbbtn" @click="calc_mczsjl">计算</div>
          <!-- <div class="jbbtn" @click="goSelect">确定</div> -->
        </div>
        <div class="popupFooter" style="margin-top:0px;">
            <!-- <div class="jbbtn" @click="calc_mczsjl">计算</div> -->
            <div class="jbbtn" @click="goSelect">确定</div>
          </div>
      </div>
      <!-- 注射频次 -->
      <mt-picker @change="onValuesChange1" v-if="mfreqFlag" :slots="slots1" ref="sexPicker1" class="sexPicker"
        :showToolbar="true" @touchmove.native.stop.prevent>
        <div class="pickerConfirm" @click="mfreqFlag=false">确认</div>
      </mt-picker>
    </div>
  </div>
</template>

<script>
  import {
    Field,
    MessageBox,
    Toast,
    Popup
  } from 'mint-ui'

  export default {
    name: 'Index',
    components: {
      Field,
      MessageBox,
      Toast,
      Popup
    },
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
        mfreqFlag: false,
        form: {
          jchx: '',
          zssjt0: '',
          cxsjt1: '',
          cxsjt2: '',
          cxsjt3: '',
          mczsjl: null,
          lyl:0.0
        },
        mczsjl: null,
        slots1: [{
          flex: 1,
          values: this.$const.zspc,
          className: 'slot1',
          textAlign: 'center'
        }],
        startDate: new Date(this.$datetime.formatDateTime(new Date("2013-01-01 00:00:00"))),
        endDate: new Date(this.$datetime.formatDateTime(new Date("2024-01-01 00:00:00"))),
        now: new Date(),
        mproFlag: false,
        slots: [{
          flex: 1,
          values: this.$const.mprolist,
          className: 'slot1',
          textAlign: 'center'
        }],
        popupVisible: this.$route.query.edit ? true : false,
        patient_id: this.$route.query.patid,
        zssjt0Flag:false,
        cxsjt1Flag:false,
        cxsjt2Flag:false,
        cxsjt3Flag:false,
        edit:this.$route.query.edit
      }
    },
    methods: {
      goBackRegpatinfo(){
        if(this.$route.query && this.$route.query.patid){
          this.$router.push({
            path:"regpatinfo",
            query:{
              patid:this.$route.query.patid
            }
          })
        }
      },
      goback() {
        if (this.$route.query && this.$route.query.edit && this.$route.query.back) {
          this.$router.push({
            path: this.$route.query.back
          });
        } else {
          this.popupVisible = false;
        }
      },
      goPage() {
        this.$router.push('/diagcalcshow')
      },
      changeTime0(value) {
        this.form.zssjt0 = this.$datetime.formatDateTime(value).replaceAll("/", "-")
      },
      dateConfirmZssjt0(value){
        this.form.zssjt0 = value
        this.zssjt0Flag = false
      },
      changeTime1(value) {
        this.form.cxsjt1 = this.$datetime.formatDateTime(value).replaceAll("/", "-")
      },
      dateConfirmCxsjt1(value){
        this.form.cxsjt1 = value
        this.cxsjt1Flag = false
      },
      changeTime2(value) {
        this.form.cxsjt2 = this.$datetime.formatDateTime(value).replaceAll("/", "-")
      },
      dateConfirmCxsjt2(value){
        this.form.cxsjt2 = value
        this.cxsjt2Flag = false
      },
      changeTime3(value) {
        this.form.cxsjt3 = this.$datetime.formatDateTime(value).replaceAll("/", "-")
      },
      dateConfirmCxsjt3(value){
        this.form.cxsjt3 = value
        this.cxsjt3Flag = false
      },
      onValuesChange(picker, values) {
        if (picker.getSlotValue(0)) {
          this.form.mpro = picker.getSlotValue(0)
        } else {
          this.form.mpro = "人血FVIII"
        }
      },
      onValuesChange1(picker, values) {
        if (picker.getSlotValue(0)) {
          this.form.zspc = picker.getSlotValue(0)
        } else {
          this.form.zspc = this.$const.zspc[0]
        }
        this.form.mczsjl = ""
        this.mczsjl = ""
      },
      goSelect() {
        if(!this.form.yfghx || !this.form.zspc){
          MessageBox({
            title: '提示',
            message: '请录入目标谷活性%及注射频次'
          })
          return
        }
        if(!this.form.mczsjl){
          MessageBox({
            title: '提示',
            message: '请点击计算获取每次注射剂量（IU）'
          })
          return
        }
        let params = this.form
        params.patient_id = this.patient_id
        let that = this
        if(this.edit){
          delete params["id"]
        }
        this.$api.regPatientCase(params).then(res => {
          if (!res.data.code) {
            this.$router.push({
              path: 'pretraitcase',
              query: {
                id: res.data.data.id
              }
            })

          } else {
            Toast(res.data.message)
          }
        })


      },
      submit() {
        if (!this.form.bltz) {
          MessageBox({
            title: '提示',
            message: '请输入病例体重'
          })
          return
        } else {
          if (!this.$recheck.checkIntFloat1(this.form.bltz)) {
            MessageBox({
              title: '提示',
              message: '病例体重请输入整数或1位小数'
            })
            return
          }
        }
        if (!this.form.zsjl) {
          MessageBox({
            title: '提示',
            message: '请输入注射剂量'
          })
          return
        } else {
          if (!this.$recheck.checkInt(this.form.zsjl)) {
            MessageBox({
              title: '提示',
              message: '注射剂量请输入整数'
            })
            return
          }
        }
        if (!this.form.zssjt0) {
          MessageBox({
            title: '提示',
            message: '请选择注射时间t<sub>0</sub>'
          })
          return
        }
        if (!this.$recheck.checkIntFloat12(this.form.jchx)) {
          MessageBox({
            title: '提示',
            message: '请输入整数或2位小数?'
          })
          return
        }
        // if (!this.form.zs30hx) {
        //   MessageBox({
        //     title: '提示',
        //     message: '请输入注射后半小时内活性'
        //   })
        //   return
        // } else {
        //   if (!this.$recheck.checkIntFloat12(this.form.zs30hx)) {
        //     MessageBox({
        //       title: '提示',
        //       message: '注射后半小时内活性请输入整数或2位小数'
        //     })
        //     return
        //   }
        // }
        if (!this.form.cxsjt1) {
          MessageBox({
            title: '提示',
            message: '请选择采血时间t<sub>1</sub>'
          })
          return
        }
        if (!this.form.t1hx) {
          MessageBox({
            title: '提示',
            message: '请输入t<sub>1</sub>点活性'
          })
          return
        } else {
          if (!this.$recheck.checkIntFloat12(this.form.t1hx)) {
            MessageBox({
              title: '提示',
              message: 't<sub>1</sub>点活性请输入整数或2位小数'
            })
            return
          }
        }
        if (!this.form.cxsjt2) {
          MessageBox({
            title: '提示',
            message: '请选择采血时间t<sub>2</sub>'
          })
          return
        }
        if (!this.form.t2hx) {
          MessageBox({
            title: '提示',
            message: '请输入t<sub>2</sub>点活性'
          })
          return
        } else {
          if (!this.$recheck.checkIntFloat12(this.form.t2hx)) {
            MessageBox({
              title: '提示',
              message: 't<sub>2</sub>点活性请输入整数或2位小数'
            })
            return
          }
        }
        // if (!this.form.cxsjt3) {
        //   MessageBox({
        //     title: '提示',
        //     message: '请选择采血时间t<sub>3</sub>'
        //   })
        //   return
        // }
        // if (!this.form.t3hx) {
        //   MessageBox({
        //     title: '提示',
        //     message: '请输入t<sub>3</sub>点活性'
        //   })
        //   return
        // } else {
        //   if (!this.$recheck.checkIntFloat12(this.form.t3hx)) {
        //     MessageBox({
        //       title: '提示',
        //       message: 't<sub>3</sub>点活性请输入整数或2位小数'
        //     })
        //     return
        //   }
        // }
        // if (!this.form.yfghx) {
        //   MessageBox({
        //     title: '提示',
        //     message: '请输入预防谷活性'
        //   })
        //   return
        // } else {
        //   if (!this.$recheck.checkInt(this.form.yfghx)) {
        //     MessageBox({
        //       title: '提示',
        //       message: '预防谷活性请输入整数'
        //     })
        //     return
        //   }
        // }
        // if (!this.form.zspc) {
        //   MessageBox({
        //     title: '提示',
        //     message: '请选择注射频次'
        //   })
        //   return
        // }

        let params = this.form
        params.patient_id = this.patient_id
        let that = this
        if(this.edit){
          delete params["id"]
        }
        this.$api.regPatientCase(params).then(res => {
          if (!res.data.code) {
            that.form = res.data.data;
            that.form.lyl = Math.round(that.form.lyl*100)
            this.popupVisible = true;

          } else {
            Toast(res.data.message)
          }
        })
      },
      calc_mczsjl() {
        let that = this;
        this.$api.calc_mczsjl(this.form).then(res => {
          if (res.data.code == 0) {
            this.mczsjl = Math.round(res.data.data*100)
            this.$set(this.form, "mczsjl", this.mczsjl)
          }
        })
      }
    },
    created() {
      let patid = this.$route.query.patid;
      if (!patid) {
        this.$router.push("regpatinfo")
      } else {
        if(this.$route.query && this.$route.query.id){
          let case_id = this.$route.query.id
          this.$api.getPatientCaseInfo({id:case_id}).then(res=>{
            this.form = res.data.data
            this.mczsjl = res.data.data.mczsjl
            this.form.lyl = Math.round(this.form.lyl*100)
            console.log(this.form.lyl)
          })
        }else{
          this.$api.getPatientDoingCase({
            patid: patid
          }).then(res => {
            if (res.data.code == 0 && res.data.data.id) {
              this.form = res.data.data
              this.mczsjl = res.data.data.mczsjl
              this.form.lyl = Math.round(this.form.lyl*100)
            }
          })
        }
      }
    },
  }

</script>

<style scoped lang="scss">
  .diagForm {
    width: 84%;
    margin: auto;
    margin-top: 1rem;
    background: #fff;
    padding: 1rem;
    border-radius: 5px;

    .formTitle {
      height: 1rem;
      line-height: 1rem;
      text-align: left;
      color: #2882F4;
      padding-bottom: 0.5rem;
      border-bottom: 1px solid #2882F4;
      font-weight: bold;
    }

    .mint-field {
      border: 1px solid #ccc;
      border-radius: 50px;
      margin-top: 1rem;
    }

    .mint-cell {
      min-height: 2rem;
    }
  }

  .container {
    height: 100vh;

    .content {
      height: 100vh;
    }
  }

  .numSubTitle {
    position: relative;

    span {
      position: absolute;
      left: 25px;
      top: 5px;
    }
  }

  /deep/ .numSubTitle .mint-field-core {
    margin-left: 105px;
  }

  /deep/ .picker-items {
    width: 100% !important;
  }

  /* 试算样式 */
  /deep/ .mint-popup {
    width: 90%;
  }

  .diagShowForm {
    width: 84%;
    margin: auto;
    margin-top: 1rem;
    background: #fff;
    padding: 1rem;
    border-radius: 5px;

    .formTitle {
      height: 1rem;
      line-height: 1rem;
      text-align: left;
      color: #2882F4;
      padding-bottom: 0.5rem;
      border-bottom: 1px solid #2882F4;
      font-weight: bold;
    }

    .mint-cell {
      min-height: 2.5rem;
    }

    /deep/ .mint-cell .mint-cell-title {
      width: 60%;
      text-align: left;
    }

    /deep/ .mint-cell .mint-cell-value {
      width: 40%;
      text-align: right;
    }
  }

  .popupContainer {
    background: #EFEFEF;
    padding: 2px;
    height: 100vh;
    width: 84%;
    margin: auto;
  }

  .popupFooter {
    display: flex;
    /* padding: 2rem; */
    background: #EFEFEF;
    margin-top: 2rem;


    .jbbtn {
      width: 42%;
      /* margin-top: 1rem; */
      margin-bottom: 1rem;
    }
  }

  .footer{
    display: flex;
    .jbbtn {
      width: 42%;
      /* margin-top: 1rem; */
      /* margin-bottom: 1rem; */
    }
  }

  /deep/ .mint-cell-wrapper{
    background-image:none!important;
  }
  /deep/ .mint-cell:last-child{
    background-image:none!important;
  }


</style>