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

<template>
  <div>
    <div v-if="isShowDialog" class="Dialog">
      <div class="DialogTit">
        <span class="iconfont" @click="close()">&#xe6e9;</span>
        <h1 class="name">透前评估</h1>
        <span @click="commitInfo" class="success">完成</span>
      </div>

      <div class="DialogContent" id="dialogTop">
        <div class="item">
          <h2 class="name">透前体重(kg)</h2>
          <div class="content">
            <input type="tel" @focus="inputFocus" v-model="formValue.weight_before"/>
          </div>
        </div>
        <div class="item">
          <h2 class="name">干体重(kg)</h2>
          <div class="content">
            <input type="tel" @focus="inputFocus" v-model="formValue.dry_weight"/>
          </div>
        </div>
        <div class="item">
          <h2 class="name">体温(℃)</h2>
          <div class="content">
            <input type="tel" @focus="inputFocus" v-model="formValue.temperature"/>
          </div>
        </div>
        <div class="item">
          <h2 class="name">出血</h2>
          <div class="content">
            <span class="text" style="width: 50px;"><div style="padding-top: 0.08rem; height: 0.8rem;"><van-switch v-model="hemorrhage_state" @change="hemorrhageStateChange" /></div></span>
          </div>
        </div>
        <div @click="showSubMenu('hemorrhage')" class="item" ref="hemorrhage" v-show="hemorrhage_state">
          <h2 class="name">—— 出血选项</h2>
          <div class="content">
            <span class="text" style="width: 50px">{{formValue.hemorrhage}}</span>
            <span class="iconfont">&#xe6f9;</span>
          </div>
        </div>
        <div class="item" v-show="hemorrhage_state">
          <h2 class="name">—— 其他出血情况</h2>
          <div class="content">
            <input @focus="inputFocus" v-model="formValue.hemorrhage_other"/>
          </div>
        </div>
        <div @click="showSubMenu('internal_fistula')" class="item" ref="internal_fistula">
          <h2 class="name">内瘘</h2>
          <div class="content">
            <span class="text" style="width: 100px">{{formValue.internal_fistula}}</span>
            <span class="iconfont">&#xe6f9;</span>
          </div>
        </div>
        <div @click="showSubMenu('internal_fistula_skin')" class="item" ref="internal_fistula_skin">
          <h2 class="name">内瘘皮肤情况</h2>
          <div class="content">
            <span class="text" style="width: 100px">{{formValue.internal_fistula_skin}}</span>
            <span class="iconfont">&#xe6f9;</span>
          </div>
        </div>
        <div @click="showSubMenu('catheter')" class="item" ref="catheter">
          <h2 class="name">导管</h2>
          <div class="content">
            <span class="text" >{{formValue.catheter}}</span>
            <span class="iconfont">&#xe6f9;</span>
          </div>
        </div>
        <div @click="showSubMenu('catheter_bend')" class="item" ref="catheter_bend">
          <h2 class="name">导管打折</h2>
          <div class="content">
            <span class="text" >{{GetCatheterBendById(formValue.catheter_bend)}}</span>
            <span class="iconfont">&#xe6f9;</span>
          </div>
        </div>

        <div class="line"></div>
        <div class="item">
          <h2 class="name">收缩压(mmHg)</h2>
          <div class="content">
            <input type="tel" @focus="inputFocus" v-model="formValue.systolic_blood_pressure"/>
          </div>
        </div>
        <div class="item">
          <h2 class="name">舒张压(mmHg)</h2>
          <div class="content">
            <input type="tel" @focus="inputFocus" v-model="formValue.diastolic_blood_pressure"/>
          </div>
        </div>
        <div class="item">
          <h2 class="name">脉率(次/分)</h2>
          <div class="content">
            <input type="tel" @focus="inputFocus" v-model="formValue.pulse_frequency"/>
          </div>
        </div>
        <div @click="showSubMenu('blood_access_part')" class="item" ref="blood_access_part">
          <h2 class="name" >血管通路部位</h2>
          <div class="content">
            <span class="text">{{QueryPartById(formValue.blood_access_part_id)}}</span>
            <span class="iconfont">&#xe6f9;</span>
          </div>
        </div>
        <div @click="showSubMenu('blood_access_opera')" class="item" ref="blood_access_opera">
          <h2 class="name">血管通路操作</h2>
          <div class="content">
            <span class="text">{{QueryOperaById(formValue.blood_access_part_opera_id)}}</span>
            <span class="iconfont">&#xe6f9;</span>
          </div>
        </div>
        <div class="line"></div>

        <div @click="showSubMenu('complication')" class="item" ref="complication">
          <h2 class="name">并发症</h2>
          <div class="content">
            <span class="text" style="width: 50px">{{formValue.complication}}</span>
            <span class="iconfont">&#xe6f9;</span>
          </div>
        </div>
        <div @click="showSubMenu('last_post_dialysis')" class="item" ref="last_post_dialysis">
          <h2 class="name">前次透析后</h2>
          <div class="content">
            <span class="text" style="width: 100px">{{formValue.last_post_dialysis}}</span>
            <span class="iconfont">&#xe6f9;</span>
          </div>
        </div>
        <div @click="showSubMenu('dialysis_interphase')" class="item" ref="dialysis_interphase">
          <h2 class="name">透析期间</h2>
          <div class="content">
            <span class="text" style="width: 100px">{{formValue.dialysis_interphase}}</span>
            <span class="iconfont">&#xe6f9;</span>
          </div>
        </div>
        <div @click="showSubMenu('symptom_before_dialysis')" class="item" ref="symptom_before_dialysis">
          <h2 class="name">透析前症状</h2>
          <div class="content">
            <span class="text" style="width: 100px">{{formValue.symptom_before_dialysis}}</span>
            <span class="iconfont">&#xe6f9;</span>
          </div>
        </div>

        <div class="line"></div>
        <div>
          <div class="item">
            <h2 class="name">备注</h2>
            <div class="content">
              <span class="text"></span>
            </div>
          </div>
          <textarea class="textarea" placeholder="请输入内容" @focus="lastInputFocus" @blur="lastInputBlur" v-model="formValue.remark"></textarea>
        </div>
      </div>

    </div>
    <!--<two-menu title="二级菜单" v-show="true" ></two-menu>-->
    <check-box-sub-menu :visibility="visibility" v-on:menu-cancle="menuCancle" v-on:menu-comfirm="menuComfirm"
                        :propsForm="propForm"></check-box-sub-menu>
  </div>
</template>

<script>
  // import TwoMenu from "./TwoMenu";
  import CheckBoxSubMenu from "./subMenu/checkBoxSubMenu";
  import {EditAssessmentBeforeDislysis} from '@/api/patient';
  import { Toast } from 'vant';
  import {getDataConfig} from '@/utils/data';



  export default {
    name: "PrescriptionDialog",
    props: {
      patient_prop: {
        type: Object,
      },
      predialysis: {
        type: Object,
      },
      last_predialysis: {
        type: Object,
      },
    },
    data() {
      return {
        isShowDialog: true,
        //sub menu prop
        visibility: false,
        propForm: {
          title: '',
          list: [],
          optionList: [],
          isMultiple: 2,
          result: [], //选中的值
          type: 1, //用来区分不同子菜单，方便对返回值进行赋值
          selectId: 0,
        },
        hemorrhage_state: false,

        formValue: {
          weight_before: '',
          dry_weight: '',
          temperature: '',
          systolic_blood_pressure: '',
          diastolic_blood_pressure: '',
          symptom_before_dialysis:'',
          pulse_frequency: '',
          last_post_dialysis:'',
          dialysis_interphase:'',
          catheter: '',
          catheter_bend: 2,
          complication: '',
          remark: '',
          blood_access_part_id: '',
          blood_access_part_opera_id: '',
          internal_fistula: '',
          internal_fistula_skin: "",
          is_hemorrhage: 1,
          hemorrhage: "",
          hemorrhage_other: "",
        },

        record_date:''


      };
    },
    methods: {
      hemorrhageStateChange: function(is_select) {
        this.formValue.is_hemorrhage = is_select == true ? 1 : 2
      },
      inputFocus: function(event) {
        var input = event.target
        setTimeout(function () {
          input.scrollIntoView()
        }, 0);
        
        if (input.setSelectionRange) {
          setTimeout(function () {
              input.setSelectionRange(0, input.value.length);
          }, 0);
        } else if (input.createTextRange) {
            var rng = input.createTextRange();
            rng.move('character', input.value.length);
            rng.select();
        }
      },
      lastInputFocus: function(event) {
        var input = event.target
        setTimeout(function () {
          input.style.marginBottom = "2rem"
          input.parentNode.scrollIntoView()
        }, 0);
      },
      lastInputBlur: function(event) {
        var input = event.target
        setTimeout(function () {
          input.style.marginBottom = ""
        }, 0);
      },
      showSubMenu: function (val) {
        switch (val) {
          case 'last_post_dialysis':
            this.propForm.result = []

            this.propForm.type = 1
            this.isShowDialog = false
            this.propForm.title = '前次透析后'
            this.visibility = true
            this.propForm.list = getDataConfig('hemodialysis','last_dialysis_after')
            this.propForm.optionList = []
            this.propForm.isMultiple = 2
            if (this.formValue.last_post_dialysis != undefined || this.formValue.last_post_dialysis != null) {
              if (this.formValue.last_post_dialysis.length > 0) {
                this.propForm.result = this.formValue.last_post_dialysis.split(",")

              } else {
                this.propForm.result = []
              }

            } else {
              this.propForm.result = []
            }
            
            this.propForm.click_ref = "last_post_dialysis"

            break
          case 'dialysis_interphase':
            this.propForm.result = []

            this.propForm.type = 2
            this.isShowDialog = false
            this.propForm.title = '透析期间'
            this.visibility = true
            this.propForm.list = getDataConfig('hemodialysis','dialysis_duration')
            this.propForm.optionList = []
            this.propForm.isMultiple = 2
            if (this.formValue.dialysis_interphase != undefined || this.formValue.dialysis_interphase != null) {
              if (this.formValue.dialysis_interphase.length > 0) {
                this.propForm.result = this.formValue.dialysis_interphase.split(",")
              } else {
                this.propForm.result = []
              }
            } else {
              this.propForm.result = []
            }
            this.propForm.click_ref = "dialysis_interphase"
            break

          case 'symptom_before_dialysis':
            this.propForm.result = []

            this.propForm.type = 3
            this.isShowDialog = false
            this.propForm.title = '透析前症状'
            this.visibility = true
            this.propForm.list = getDataConfig('hemodialysis','dialysis_before')
            this.propForm.optionList = []
            this.propForm.isMultiple = 2
            if (this.formValue.symptom_before_dialysis != undefined || this.formValue.symptom_before_dialysis != null) {
              if (this.formValue.symptom_before_dialysis.length > 0) {
                this.propForm.result = this.formValue.symptom_before_dialysis.split(",")
              } else {
                this.propForm.result = []
              }
            } else {
              this.propForm.result = []
            }
            this.propForm.click_ref = "symptom_before_dialysis"
            break

          case 'catheter':
            this.propForm.result = []

            this.propForm.type = 4
            this.isShowDialog = false
            this.propForm.title = '导管'
            this.visibility = true
            this.propForm.list = getDataConfig('hemodialysis','catheter')
            this.propForm.optionList = []
            this.propForm.isMultiple = 2
            if (this.formValue.catheter != undefined || this.formValue.catheter != null) {
              if (this.formValue.catheter.length > 0) {
                this.propForm.result = this.formValue.catheter.split(",")
              } else {
                this.propForm.result = []
              }
            } else {
              this.propForm.result = []
            }
            
            this.propForm.click_ref = "catheter"

            break
          case 'complication':
            this.propForm.result = []

            this.propForm.type = 5
            this.isShowDialog = false
            this.propForm.title = '并发症'
            this.visibility = true
            this.propForm.list = getDataConfig('hemodialysis','complication')
            this.propForm.optionList = []
            this.propForm.isMultiple = 2
            // this.propForm.result = this.formValue.complication.split(",")
            if (this.formValue.complication != undefined || this.formValue.complication != null) {
              if (this.formValue.complication.length > 0) {
                this.propForm.result = this.formValue.complication.split(",")
              } else {
                this.propForm.result = []
              }
            } else {
              this.propForm.result = []
            }
            
            this.propForm.click_ref = "complication"
            break

          case 'blood_access_part':
            this.propForm.type = 6
            this.isShowDialog = false
            this.propForm.title = '血管通路部位'
            this.visibility = true
            this.propForm.list = []
            this.propForm.optionList = getDataConfig('hemodialysis','vascular_access')
            this.propForm.isMultiple = 1
            this.propForm.selectId = this.formValue.blood_access_part_id
            this.propForm.click_ref = "blood_access_part"
            break

          case 'blood_access_opera':
            this.propForm.type = 7
            this.isShowDialog = false
            this.propForm.title = '血管通路操作'
            this.visibility = true
            this.propForm.list = []
            this.propForm.optionList = getDataConfig('hemodialysis','vascular_access_desc')
            this.propForm.isMultiple = 1
            this.propForm.selectId = this.formValue.blood_access_part_opera_id
            this.propForm.click_ref = "blood_access_opera"
            break

          case 'internal_fistula':
            this.propForm.result = []

            this.propForm.type = 8
            this.isShowDialog = false
            this.propForm.title = '内萎'
            this.visibility = true
            this.propForm.list = getDataConfig('hemodialysis','internal_fistula')
            this.propForm.optionList = []
            this.propForm.isMultiple = 2
            // this.propForm.result = this.formValue.internal_fistula.split(",")
            if (this.formValue.internal_fistula != undefined || this.formValue.internal_fistula != null) {
              if (this.formValue.internal_fistula.length > 0) {
                this.propForm.result = this.formValue.internal_fistula.split(",")
              } else {
                this.propForm.result = []
              }
            } else {
              this.propForm.result = []
            }
            this.propForm.click_ref = "internal_fistula"
            break

          case "hemorrhage":
            this.propForm.result = []

            this.propForm.type = 9
            this.isShowDialog = false
            this.propForm.title = '出血'
            this.visibility = true
            this.propForm.list = getDataConfig('hemodialysis','hemorrhage')
            this.propForm.optionList = []
            this.propForm.isMultiple = 2
            // this.propForm.result = typeof(this.formValue.hemorrhage) == "string"? this.formValue.hemorrhage.split(","):[]
            if (this.formValue.hemorrhage != undefined || this.formValue.hemorrhage != null) {
              if (this.formValue.hemorrhage.length > 0) {
                this.propForm.result = this.formValue.hemorrhage.split(",")
              } else {
                this.propForm.result = []
              }
            } else {
              this.propForm.result = []
            }
            this.propForm.click_ref = "hemorrhage"
            break
          case "internal_fistula_skin":
            this.propForm.result = []

            this.propForm.type = 10
            this.isShowDialog = false
            this.propForm.title = '内瘘皮肤情况'
            this.visibility = true
            this.propForm.list = this.$store.getters.internal_fistula_skin
            this.propForm.optionList = []
            this.propForm.isMultiple = 2
            // this.propForm.result = this.formValue.hemorrhage.split(",")
            if (this.formValue.internal_fistula_skin != undefined || this.formValue.internal_fistula_skin != null) {
              if (this.formValue.internal_fistula_skin.length > 0) {
                this.propForm.result = this.formValue.internal_fistula_skin.split(",")
              } else {
                this.propForm.result = []
              }
            } else {
              this.propForm.result = []
            }
            this.propForm.click_ref = "internal_fistula_skin"
            break

          case 'catheter_bend':
            this.propForm.type = 11
            this.isShowDialog = false
            this.propForm.title = '导管打折'
            this.visibility = true
            this.propForm.list = []
            this.propForm.optionList = this.$store.getters.catheter_bend
            this.propForm.isMultiple = 1
            this.propForm.selectId = this.formValue.catheter_bend
            this.propForm.click_ref = "catheter_bend"
            break
        }

      }, menuCancle: function () {
        this.visibility = false
        this.isShowDialog = true
        this.$nextTick( () => {
          if (this.$refs[this.propForm.click_ref] != undefined && this.$refs[this.propForm.click_ref] != null) {
            this.$refs[this.propForm.click_ref].scrollIntoView()
          }
        })

      }, menuComfirm: function (val) {
        this.visibility = false
        this.isShowDialog = true
        this.$nextTick( () => {
          if (this.$refs[this.propForm.click_ref] != undefined && this.$refs[this.propForm.click_ref] != null) {
            this.$refs[this.propForm.click_ref].scrollIntoView()
          }
        })
        switch (val.type) {
          case 1:
            this.formValue.last_post_dialysis = val.result.join(',')
            break
          case 2:
            this.formValue.dialysis_interphase = val.result.join(',')
            break

          case 3:
            this.formValue.symptom_before_dialysis = val.result.join(',')
            break
          case 4:
            this.formValue.catheter = val.result.join(',')
            break
          case 5:
            this.formValue.complication = val.result.join(',')
            break
          case 6:
            this.formValue.blood_access_part_id = val.selectId
            break
          case 7:
            this.formValue.blood_access_part_opera_id = val.selectId
            break
          case 8:
            this.formValue.internal_fistula = val.result.join(',')
            break
          case 9:
            this.formValue.hemorrhage = val.result.join(',')
            break
          case 10:
            this.formValue.internal_fistula_skin = val.result.join(",")
            break
          case 11:
            this.formValue.catheter_bend = val.selectId
            break
        }

      }, QueryPartById: function (val) {
        let vascular_access_part_name = ''
        let vascular_access = getDataConfig('hemodialysis','vascular_access')

        for (let i = 0; i < vascular_access.length; i++) {
          if (vascular_access[i].id == val) {
            vascular_access_part_name = vascular_access[i].name
          }
        }
        return  vascular_access_part_name

      }, QueryOperaById: function (val) {
        let vascular_access_desc_name = ''
        let vascular_access_desc = getDataConfig('hemodialysis','vascular_access_desc')
        for (let i = 0; i < vascular_access_desc.length; i++) {
          if (vascular_access_desc[i].id == val) {
            vascular_access_desc_name = vascular_access_desc[i].name
          }
        }

        return vascular_access_desc_name

      },
      GetCatheterBendById: function (val) {
        let name = "";
        let options = this.$store.getters.catheter_bend;
        for (let index = 0; index < options.length; index++) {
          const option = options[index];
          if (option.id == val) {
            name = option.name
            break
          }
        }
        return name
      },
      commitInfo:function () {
        Toast.loading({forbidClick: true, duration: 0})
        EditAssessmentBeforeDislysis(this.$route.query.patient_id,  this.record_date, this.formValue).then(response=>{
          if (response.data.state == 0) {
            Toast(response.data.msg);
            return false;
          } else {
            Toast("提交完成");
            this.$emit('evaluation', response.data.data.evaluation);
          }
        });
      },
      close: function() {
        this.$emit("close")
      }, open:function(){
        this.isShowDialog = true;
        this.visibility = false;
        var dialogTop = document.querySelector('#dialogTop');
        if (dialogTop != null) {
          this.$nextTick(() => {
              dialogTop.scrollTop = 0;
          });
        }
      }
    }, components: {
      CheckBoxSubMenu,

    }, created(){

      var date = this.$route.query && this.$route.query.date;
      date *= 1000;
      var newDate = new Date(date);

      var y = newDate.getFullYear();
      var m = newDate.getMonth() + 1;
      var d = newDate.getDate();
      if (isNaN(y) || isNaN(m) || isNaN(d)) {
        newDate = new Date();
        y = newDate.getFullYear();
        m = newDate.getMonth() + 1;
        d = newDate.getDate();
      }
      this.record_date = y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d);
      // console.log(this.predialysis)
      this.formValue = this.predialysis
      if (this.predialysis.id == undefined && this.last_predialysis.id != undefined) {
        this.$set(this.formValue, "dry_weight", this.last_predialysis["dry_weight"])
        this.$set(this.formValue, "internal_fistula", this.last_predialysis["internal_fistula"])
        this.$set(this.formValue, "internal_fistula_skin", this.last_predialysis["internal_fistula_skin"])
        this.$set(this.formValue, "blood_access_part_id", this.last_predialysis["blood_access_part_id"])
        this.$set(this.formValue, "blood_access_part_opera_id", this.last_predialysis["blood_access_part_opera_id"])
      }
      this.hemorrhage_state = this.formValue.is_hemorrhage == 1
    }
  };
</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;
  border-bottom: 1px #e5e5e5 solid;
  }
 
</style>