edit.vue

<template>
  <div class="full-page">
    <div class="member-page">
      <div class="member-body">
        <div class="head-bg"></div>
        <div class="user-info">
          <div class="picture">
            <div class="inner">
                <img :src="picture"/>
            </div>
          </div>
          <div class="member-form">
            <div class="form">
              <div class="table">
                <div class="tr">
                  <div class="td label">与我的关系</div>
                  <div class="td text-right">
                    <div class="td-table" @click="roleActionSheet">
                      <div class="td-table-cell text text-orange">{{userData.role === 1 ? '子女' : userData.role === 2 ? '配偶' : '未知'}}</div>
                      <div class="td-table-cell icon">
                        <i class="glyphicon glyphicon-menu-right"></i>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="form">
              <div class="table">
                <div class="tr">
                  <div class="td label">姓名</div>
                  <div class="td text-right">
                    <input type="text" class="form-control" v-model="userData.name" @blur="BaseValidateName" :disabled="userId" placeholder="请输入姓名"/>
                    <span v-show="!BaseValidate.nameState" class="small-hint">（只能是中文或英文,长度1~15位）</span>
                  </div>
                </div>
                <div class="tr" v-if="userData.role===1">
                  <div class="td label">出生日期</div>
                  <div class="td text-right">
                    <span @click="openPickerBirth">{{userData.birth==='' ? '请选择子女出生日期' : userData.birth}}</span>
                    <span v-show="!BaseValidate.birthState" class="small-hint">请选择子女出生日期</span>
                  </div>
                </div>
                <div class="tr" v-if="userData.role===2">
                  <div class="td label">身份证号</div>
                  <div class="td text-right">
                    <input type="text" class="form-control" placeholder="请输入有效的女性身份证号" @blur="BaseValidateIdCard" v-model="userData.idCard"/>
                    <span v-show="!BaseValidate.idCardState" class="small-hint">请输入有效的女性身份证号</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="form">
              <div class="table">
                <div class="tr" v-if="userData.role===1">
                  <div class="td label">身份证号</div>
                  <div class="td text-right">
                    <input type="text" class="form-control" placeholder="请输入子女有效身份证" v-model="userData.idCardKid" :disabled="userId"/>
                    <span v-show="!BaseValidate.idCardKidState" class="small-hint">请输入子女有效身份证</span>
                  </div>
                </div>
                <div class="tr" v-if="userData.role===1">
                  <div class="td label">性别</div>
                  <div class="td text-right">
                    <input type="text" v-if="userId" disabled class="form-control" v-model="userData.sex"/>
                    <mt-radio
                      v-if="!userId"
                      v-model="userData.sex"
                      :options="['女孩', '男孩']"
                      @change="pictureChange">
                    </mt-radio>
                  </div>
                </div>
              </div>
            </div>
            <div class="form">
              <div class="table">
                <div class="tr" v-if="userData.role===2">
                  <div class="td label">末次月经时间</div>
                  <div class="td text-right">
                    <div class="td-table" @click="openPickerLastMensesTime">
                      <div class="td-table-cell text">{{userData.lastMensesTime !== '' ? userData.lastMensesTime : '请选择末次月经时间'}}</div>
                      <div class="td-table-cell icon">
                        <i class="glyphicon glyphicon-menu-right"></i>
                      </div>
                    </div>
                    <span v-show="!BaseValidate.lastMensesTimeState" class="small-hint">请选择末次月经时间</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="footer">
            <a class="btn-link" v-if="userId" @click="delMember">删除家庭成员</a>
            <button v-if="!userId" class="btn-orange btn-block" :class="btnDisabled?'disabled':''" :disabled="btnDisabled" @click="handelSave">保存</button>
          </div>
        </div>
      </div>
    </div>
    <mt-actionsheet
        :actions="roleActions"
        v-model="roleSheetVisible">
    </mt-actionsheet>
    <!-- 出生日期picker -->
    <mt-datetime-picker
      v-model="pickerBirthDefault"
      ref="pickerBirth"
      type="date"
      year-format="{value} 年"
      month-format="{value} 月"
      date-format="{value} 日"
      @confirm="birthPickerConfirm"
      :endDate="pickerBirthEnd">
    </mt-datetime-picker>
    <!-- 末次月经时间picker -->
    <mt-datetime-picker
      v-model="pickerLastMensesTimeDefault"
      ref="pickerLastMensesTime"
      type="date"
      year-format="{value} 年"
      month-format="{value} 月"
      date-format="{value} 日"
      @confirm="lastMensesTimePickerConfirm"
      :startDate="pickerLastMensesTimeStart"
      :endDate="pickerLastMensesTimeEnd">
    </mt-datetime-picker>
  </div>
</template>

<script>
import { getUserInfoById, saveMember, deleteMemberById } from '@/api/basic/basic'
import { validatename, cardid } from '@/util/validate'
import { getSexByIdCard, getBirthByIdNumber, SubtractDay } from '@/util/index'
// import { getAgeByBirth } from '@/util/index'
import _iconMan from '@/assets/images/man.png'
import _iconWoman from '@/assets/images/woman.png'
import _iconBoy from '@/assets/images/boy.png'
import _iconGirl from '@/assets/images/girl.png'
// import _iconOldwoman from '@/assets/images/oldwoman.png'
export default {
  name: 'member',
  data () {
    return {
      memberId: this.$route.query.memberId ? parseInt(this.$route.query.memberId) : null,
      userId: this.$route.query.id ? parseInt(this.$route.query.id) : null,
      pageType: this.$route.query.type ? parseInt(this.$route.query.type) : null, // 1=子女 2=配偶 3=父母
      picture: _iconBoy,
      userData: {
        name: '',
        role: this.$route.query.type ? parseInt(this.$route.query.type) : 1,
        sex: '男孩',
        birth: '',
        idCard: '',
        idCardKid: '',
        lastMensesTime: '' // 末次月经时间
      },
      BaseValidate: { // 表单各个列是否合法状态
        nameState: true,
        sexState: true,
        birthState: true,
        idCardState: true,
        idCardKidState: true,
        lastMensesTimeState: true
      },
      roleSheetVisible: false, // “与我关系”sheet显示状态
      roleActions: null, // “与我关系”sheet数据
      btnDisabled: false, // 保存按钮状态
      pickerBirthVisible: false, // 出生日期控件显示状态
      pickerBirthDefault: new Date(), // 出生日期控件默认选中日期为当天
      pickerBirthEnd: new Date(), // 出生日期控件结束日期小于当天
      pickerLastMensesTimeDefault: new Date(), // 末次月经时间默认选中日期为当天
      pickerLastMensesTimeStart: SubtractDay(290),
      pickerLastMensesTimeEnd: new Date() // 末次月经时间控件结束日期小于当天
    }
  },
  created () {
    let that = this
    this.roleActions = [{ // “与我关系”sheet静态数据录入
      name: '子女',
      method: that.selectedRole1
    }, {
      name: '配偶',
      method: that.selectedRole2
    }]
    console.log('member edit')
    if (this.userId) {
      this.getUserInfoByIdFn(this.userId) // 根据用户id获取该成员信息（成员编辑）
    }
  },
  mounted: function () {
  },
  computed: {
  },
  components: {
  },
  methods: {
    getUserInfoByIdFn (id) {
      this.$Indicator.open()
      getUserInfoById(id).then(res => {
        this.$Indicator.close()
        if (res.code === 0) {
          const data = res.data

          this.userData.name = data.name
          if (this.pageType === 1) {
            this.userData.idCardKid = data.skuNumber
            this.userData.birth = data.birth
            this.userData.sex = data.sex === 1 ? '男孩' : data.sex === 2 ? '女孩' : ''
            this.picture = data.sex === 1 ? _iconBoy : data.sex === 2 ? _iconGirl : _iconMan
          } else if (this.pageType === 2) {
            this.userData.idCard = data.skuNumber
            this.userData.lastMensesTime = data.lastMensesTime
          }
        }
      }).catch((error) => {
        this.$toast({
          message: error.message,
          position: 'center',
          duration: 3000
        })
      })
    },
    roleActionSheet () {
      if (!this.userId) {
        this.roleSheetVisible = true
      }
    },
    selectedRole1 () { // 选择“与我关系”，子女=1、配哦=2
      console.log('子女')
      if (this.userData.role === 2) { // 切换不同角色则需清空表单
        this.userData.role = 1
        this.pictureChange()
      } else {
        this.resetForm()
      }
    },
    selectedRole2 () { // 选择“与我关系”，子女=1、配哦=2
      console.log('配偶')
      if (this.userData.role === 1) { // 切换不同角色则需清空表单
        this.userData.role = 2
        this.pictureChange()
      } else {
        this.resetForm()
      }
    },
    openPickerBirth () { // 打开出生日期控件
      if (!this.userId) {
        this.$refs.pickerBirth.open()
      }
    },
    birthPickerConfirm (date) { // 出生日期控件“确认”事件
      const selectedDate = new Date(date)
      let month = selectedDate.getMonth() + 1
      if (month < 10) {
        month = '0' + month
      }
      let day = selectedDate.getDate()
      if (day < 10) {
        day = '0' + day
      }
      this.userData.birth = selectedDate.getFullYear() + '-' + month + '-' + day
      console.log(date)
    },
    openPickerLastMensesTime () {
      this.$refs.pickerLastMensesTime.open()
    },
    lastMensesTimePickerConfirm (date) { // 末次月经日期控件“确认”事件
      const selectedDate = new Date(date)
      let month = selectedDate.getMonth() + 1
      let day = selectedDate.getDate()
      if (selectedDate.getMonth() + 1 <= 9) {
        month = '0' + (selectedDate.getMonth() + 1)
      }
      if (selectedDate.getDate() <= 9) {
        day = '0' + selectedDate.getDate()
      }
      this.userData.lastMensesTime = selectedDate.getFullYear() + '-' + month + '-' + day
    },
    pictureChange () { // 头部头像根据角色、性别不同变换头像
      if (this.userData.role === 1) {
        if (this.userData.sex === '男孩') {
          this.picture = _iconBoy
        } else if (this.userData.sex === '女孩') {
          this.picture = _iconGirl
        }
      } else if (this.userData.role === 2) {
        this.picture = _iconWoman
      }
    },
    resetForm () { // 重置表单数据
      this.userData = {
        name: '',
        role: 1,
        sex: '男孩',
        birth: '',
        idCard: '',
        idCardKid: '',
        lastMensesTime: ''
      }
    },
    goToUserDetail () { // 跳转至用户编辑页
    },
    BaseValidateHandle () { // 表单验证
      this.BaseValidateName()
      this.BaseValidateIdCard()
      // this.BaseValidateIdCardKid()
      this.BaseValidateBirthKid()
      this.BaseValidateMensesLastDate()
    },
    BaseValidateName () { // 姓名验证
      if (validatename(this.userData.name)) {
        this.BaseValidate.nameState = true
      } else {
        this.BaseValidate.nameState = false
      }
    },
    BaseValidateIdCard () { // 身份证验证
      if (cardid(this.userData.idCard)[0]) {
        this.BaseValidate.idCardState = false
      } else {
        if (getSexByIdCard(this.userData.idCard) === '2') {
          this.BaseValidate.idCardState = true
        } else {
          this.BaseValidate.idCardState = false
        }
      }
    },
    BaseValidateIdCardKid () { // 身份证（子女）验证
      if (cardid(this.userData.idCardKid)[0]) {
        this.BaseValidate.idCardKidState = false
      } else {
        this.BaseValidate.idCardKidState = true
      }
    },
    BaseValidateBirthKid () { // 出生日期验证
      if (this.userData.birth === '') {
        this.BaseValidate.birthState = false
      } else {
        this.BaseValidate.birthState = true
      }
    },
    BaseValidateMensesLastDate () { // 末次月经时间验证
      if (this.userData.lastMensesTime === '') {
        this.BaseValidate.lastMensesTimeState = false
      } else {
        this.BaseValidate.lastMensesTimeState = true
      }
    },
    handelSave () { // 保存
      this.BaseValidateHandle() // 点击保存验证表单所有列是否合法
      if (this.userData.role === 1) { // 子女角色添加验证
        if (!this.BaseValidate.nameState || !this.BaseValidate.birthState) {
          return false
        }
      } else if (this.userData.role === 2) { // 配偶角色添加验证
        if (!this.BaseValidate.nameState || !this.BaseValidate.idCardState || !this.BaseValidate.lastMensesTimeState) {
          return false
        }
      }

      let params = {
        userId: this.memberId,
        name: this.userData.name,
        orgId: '',
        orgName: '',
        relationType: this.userData.role
      }
      if (this.userData.role === 1) { // 子女
        params.idCard = this.userData.idCardKid === '' ? null : this.userData.idCardKid
        params.sex = this.userData.idCardKid !== '' ? getSexByIdCard(this.idCardKid) : this.userData.sex === '男孩' ? '1' : this.userData.sex === '女孩' ? '2' : '3'
        params.birth = this.userData.birth
      } else if (this.userData.role === 2) { // 配偶
        params.idCard = this.userData.idCard === '' ? null : this.userData.idCard
        params.sex = getSexByIdCard(this.userData.idCard)
        params.lastMensesTime = this.userData.lastMensesTime
        params.birth = getBirthByIdNumber(this.userData.idCard)
      }
      this.$Indicator.open()
      saveMember(params).then(res => {
        this.$Indicator.close()
        if (res.code === 0 && res.data) {
          this.$toast({
            message: '保存成功',
            position: 'center',
            duration: 3000
          })
          let that = this
          setTimeout(function () {
            that.$router.push({
              path: '/home'
            })
          }, 2500)
        } else {
          this.$toast({
            message: '保存失败',
            position: 'center',
            duration: 3000
          })
        }
      }).catch((error) => {
        this.$toast({
          message: error.message,
          position: 'center',
          duration: 3000
        })
      })
    },
    delMember () {
      this.$MessageBox.confirm('是否删除该家庭成员?').then(action => {
        let params = {
          masterId: this.memberId,
          userId: this.userId
        }
        this.$Indicator.open()
        deleteMemberById(params).then(res => {
          this.$Indicator.close()
          if (res.code === 0 && res.data) {
            this.$toast({
              message: '删除成功',
              position: 'center',
              duration: 3000
            })
            this.$router.back(-1)
          } else {
            this.$toast({
              message: '删除失败',
              position: 'center',
              duration: 3000
            })
          }
        }).catch((error) => {
          this.$Indicator.close()
          this.$toast({
            message: error.message,
            position: 'center',
            duration: 3000
          })
        })
      })
    }
  }
}
</script>
<style>
  .full-page {
    background-color: #f4f6f7;
  }
  .member-form .form .mint-radiolist .mint-cell {
    width: 90px;
    float: right;
    background-image: none;
    min-height: 0;
  }
  .member-form .form .mint-radiolist .mint-cell > .mint-cell-wrapper {
    background-image: none;
    padding: 0;
    font-size: 14px;
  }
  .member-form .form .mint-radiolist-label {
    font-weight: normal;
    padding: 0;
  }
  .member-form .form .mint-radio-input:checked + .mint-radio-core {
    background-color: #FF9B44;
    border-color: #FF9B44;
  }
</style>
<style scoped>
  .full-page {
    background-color: #f4f6f7;
  }
  .member-page .member-body {
    position: relative;
  }
  .member-page .member-body > .head-bg{
    background-color: #43d1be;
    height: 8em;
  }
  .member-page .member-body .user-info {
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 4em;
    text-align: center;
  }
  .member-page .member-body > .user-info > .picture {
    width: 8em;
    height: 8em;
    margin: 0 auto;
    padding: 1em;
    background-color: #fff;
    border-radius: 50%;
  }
  .member-page .member-body > .user-info > .picture .inner > img {
    width: 100%;
  }
  .member-page .member-body > .user-info > .nick-name {
    text-align: center;
    font-size: 1.2em;
    margin: 0.8em 0;
  }
  .member-page .member-body > .user-info > .footer {
    padding: 3em 1em;
  }

  .member-form {
    padding: 0 1em;
  }

  .member-form .form > .table > .tr > .td.label {
    color: #959595;
    font-weight: normal;
  }
</style>