xybpkmweb/src/components/RegPatinfo.vue

<template>
  <div class="container">
    <div class="bgimg"></div>
    <div class="content">
      <div class="title">请录入病例信息</div>
      <div class="loginForm">
        <mt-field placeholder="请输入病例姓名" label="姓名" v-model="form.name"></mt-field>
        <mt-field placeholder="请选择出生年月" class="inputDisable" disabled label="年龄" v-model="form.birthday"
          @click.native="$refs.birthdayPicker.open();sexFlag=false">
          <img src="../assets/images/down.png" alt="" width="16px">
        </mt-field>
        <mt-field placeholder="请选择性别" class="inputDisable" disabled label="性别" v-model="form.sex"
          @click.native="sexFlag=true">
          <img src="../assets/images/down.png" alt="" width="16px">
        </mt-field>
        <mt-field placeholder="请输入手机号" label="手机" v-model="form.phone" type="number"></mt-field>

      </div>
      <div class="footer">
        <div class="jbbtn" @click="submit">确定</div>
        <div class="jbbtn" @click="$router.go(-1)">返回</div>
        <!-- <div class="jbbtn" @click="birthdayClick">测试</div> -->
      </div>

    </div>
    <mt-datetime-picker ref="birthdayPicker" type="date" v-model="now" year-format="{value} 年" month-format="{value} 月"
      date-format="{value} 日" @confirm='changeTime' :startDate='startDate' :endDate='endDate' @change='changeTime'
      @touchmove.native.stop.prevent>
    </mt-datetime-picker>
    <mt-picker @change="onValuesChange" v-if="sexFlag" :slots="slots" ref="sexPicker" class="sexPicker"
      :showToolbar="true" @touchmove.native.stop.prevent>
      <div class="pickerConfirm" v-model="now" @click="sexFlag=false">确认</div>
    </mt-picker>

    <vue-hash-calendar :visible="false"></vue-hash-calendar>

  </div>
</template>

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

  export default {
    name: 'Index',
    components: {
      Field,
      MessageBox,
      DatetimePicker,
      Picker,
      Button
    },
    data() {
      return {
        form: {
          birthday: '',
          sex: ''
        },
        sexFlag: false,
        slots: [{
          flex: 1,
          values: ['男', '女'],
          className: 'slot1',
          textAlign: 'center'
        }],
        startDate: new Date('1923/01/01'),
        endDate: new Date(this.$datetime.formatDate(new Date())),
        now: new Date(),
      }
    },
    methods: {
      birthdayClick() { //生日
        this.$picker.show({
          type: 'datePicker',
          date: '1990-01-01',
          endTime: '2018-01-01', //截至时间
          startTime: '1930-01-01', //开始时间
          onOk: (date) => {
            this.birthday = date; // birthday就是所需字段，在data 里定义下
          }
        })
      },
      goPage(path) {
        this.$router.push(path)
      },
      changeTime(value) {
        this.form.birthday = this.$datetime.formatDate(value).replaceAll("/", "-")
        this.sexFlag = false
      },
      onValuesChange(picker, values) {
        if (picker.getSlotValue(0)) {
          this.form.sex = picker.getSlotValue(0)
        } else {
          this.form.sex = "男"
        }
      },
      submit() {
        if (!this.form.name) {
          MessageBox({
            title: '提示',
            message: '请输入姓名'
          })
          return
        }
        if (!this.form.birthday) {
          MessageBox({
            title: '提示',
            message: '请选择出生年月'
          })
          return
        }
        if (!this.form.sex) {
          MessageBox({
            title: '提示',
            message: '请选择性别'
          })
          return
        }
        if (!this.form.phone) {
          MessageBox({
            title: '提示',
            message: '请输入手机号'
          })
          return
        } else {
          if (!this.$recheck.checkPhone(this.form.phone)) {
            MessageBox({
              title: '提示',
              message: '请输入正确的手机号'
            })
            return
          }
        }
        let params = this.form
        localStorage.setItem("patientCase", JSON.stringify(params))
        this.$api.regPatient(params).then(res => {
          if (!res.data.code) {
            this.$router.push({
              path:"diagcalc",
              query:{patid:res.data.data}
            })
          }
        })
      }
    },
    created() {
      // this.$api.getAccountInfo().then(res=>{
      //     if(!res.data.code){
      //       if(res.data.data.role=="1"){
      //         this.goPage("/docindex")
      //       }else{
      //         this.goPage("/patindex")
      //       }
      //       localStorage.setItem("authinfo",JSON.stringify(res.data.data))
      //     }
      //   })
    },
  }

</script>

<style scoped lang="scss">
  /* .picker-slot-wrapper{
    transform: translate(0px, 10px) translateZ(0px)!important;
    height: 252px!important;
  } */
  /deep/ .picker-items {
    width: 100% !important;
  }

  /deep/ .picker-slot {
    /* overflow:scroll!important; */
  }

</style>