xybpkmweb/src/components/PreTraitCase.vue

<template>
  <div class="container">
    <div class="bgimg"></div>
    <div class="content">
      <div class="title">预防治疗参考方案</div>
      <div class="loginForm">
        <mt-field placeholder="请选择产品" class="inputDisable" :disabled="true" label="注射产品" v-model="form.ckmpro"
          >
          <!-- <img v-if="!show" src="../assets/images/down.png" alt="" width="16px"> -->
        </mt-field>
        <mt-field placeholder="请选择注射频次" class="inputDisable" disabled label="注射频次" v-model="form.ckmfreq"
          @click.native="mfreqFlag=true;mproFlag=false;ckzsjlFlag=false">
          <img v-if="!show" src="../assets/images/down.png" alt="" width="16px">
        </mt-field>
        <mt-field placeholder="请选择" class="inputDisable" disabled label="每次注射剂量(IU)" v-model="form.ckzsjl"
          @click.native="ckzsjlFlag=true;mproFlag=false;mfreqFlag=false">
          <img v-if="!show" src="../assets/images/down.png" alt="" width="16px">
        </mt-field>
      </div>
      <div class="footer">
        <div class="jbbtn" @click="goPage(-1)">返回</div>
        <div class="jbbtn" @click="submit">确定</div>
      </div>
    </div>
    <mt-picker @change="onValuesChange" v-if="mproFlag && !show" :slots="slots" ref="sexPicker" class="sexPicker"
      :showToolbar="true">
      <div class="pickerConfirm" @click="mproFlag=false">确认</div>
    </mt-picker>
    <mt-picker @change="onValuesChange1" v-if="mfreqFlag && !show" :slots="slots1" ref="sexPicker1" class="sexPicker"
      :showToolbar="true">
      <div class="pickerConfirm" @click="mfreqFlag=false">确认</div>
    </mt-picker>
    <mt-picker @change="onValuesChange2" v-if="ckzsjlFlag && !show" :slots="slots2" ref="sexPicker1" class="sexPicker"
      :showToolbar="true" @touchmove.native.stop.prevent>
      <div class="pickerConfirm" @click="ckzsjlFlag=false">确认</div>
    </mt-picker>
  </div>
</template>

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

  export default {
    name: 'Index',
    components: {
      Field,
      Picker,
      MessageBox
    },
    data() {
      return {
        form: {
          mckpro:''
        },
        mproFlag: false,
        mfreqFlag: false,
        ckzsjlFlag: false,
        caseInfo: {},
        show: this.$route.query.show,
        slots: [{
          flex: 1,
          values: this.$const.mprolist,
          className: 'slot1',
          textAlign: 'center'
        }],
        slots1: [{
          flex: 1,
          values: this.$const.mfreq,
          className: 'slot1',
          textAlign: 'center'
        }],
        slots2: [{
          flex: 1,
          values: this.$const.ckzsjl,
          className: 'slot1',
          textAlign: 'center'
        }]
      }
    },
    methods: {
      goPage(path) {
        if (path === -1) {
          this.$router.go(-1)
        }
        this.$router.push('/diagcalc')
      },
      onValuesChange(picker, values) {
        if (picker.getSlotValue(0)) {
          this.form.ckmpro = picker.getSlotValue(0)
        } else {
          this.form.ckmpro = "人血FVIII"
        }
      },
      onValuesChange1(picker, values) {
        if (picker.getSlotValue(0)) {
          this.form.ckmfreq = picker.getSlotValue(0)
        } else {
          this.form.ckmfreq = this.$const.mfreq[0]
        }
      },
      onValuesChange2(picker, values) {
        if (picker.getSlotValue(0)) {
          this.form.ckzsjl = picker.getSlotValue(0)
        } else {
          this.form.ckzsjl = this.$const.ckzsjl[0]
        }
      },
      submit() {
        if (!this.form.ckmpro) {
          MessageBox({
            title: '提示',
            message: '请选择产品'
          })
          return
        }
        if (!this.form.ckmfreq) {
          MessageBox({
            title: '提示',
            message: '请选择注射频次'
          })
          return
        }
        if (!this.form.ckzsjl) {
          MessageBox({
            title: '提示',
            message: '请选择每次注射剂量(IU)'
          })
          return
        }
        let id = this.$route.query.id
        let role = this.$route.query.role
        let params = this.form
        params.id = id
        this.$api.editPatientCase(params).then(res => {
          if (!res.data.code) {
            this.$router.push({
              'path': '/solutionpkline',
              query: {
                id: id,
                role: role
              }
            })
          }
        })
      }
    },
    created() {
      let id = this.$route.query.id
      this.$api.getPatientCaseInfo({
        id: id
      }).then(res => {
        if (!res.data.code) {
          this.form = res.data.data
          this.form.ckmpro = res.data.data.mpro
        }
      })
    },
  }

</script>

<style scoped lang="scss">
  .footer {
    display: flex;
  }

  .jbbtn {
    width: 42%;
  }

</style>