xiangan_pc/src/page-subspecialty/views/modules/optometryManagement/dioptric/patient-add-or-update.vue

<template>
  <el-dialog
    class="patientDialog"
    :visible.sync="visible"
    width="30%"
    :title="dataForm.title"
  >
    <el-form ref="dataForm" :model="dataForm" :rules="dataRule">
      <el-form-item v-if="dataForm.drgsName == '眼视光'" label="病历号:" label-width="90px" prop="patId" class="formItemOne">
        <el-input v-model="dataForm.patId" placeholder="请输入病历号" />
      </el-form-item>
      <el-form-item v-if="dataForm.drgsName == '青光眼'" label="患者ID:" label-width="90px" prop="patId" class="formItemOne">
        <el-input v-model="dataForm.patId" placeholder="请输入患者ID" />
      </el-form-item>
      <el-form-item label="患者姓名:" label-width="90px" prop="patName">
        <el-input v-model="dataForm.patName" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item v-if="!dataForm.id" label="身份证号:" label-width="90px" prop="patIdNumber">
        <el-input v-model="dataForm.patIdNumber" placeholder="请输入身份证号 " />
      </el-form-item>
      <el-form-item label="联系电话:" label-width="90px" prop="patPhone">
        <el-input v-model="dataForm.patPhone" placeholder="请输入手机号" />
      </el-form-item>
      <el-form-item label="家庭地址:" label-width="90px" prop="patAddress">
        <el-input v-model="dataForm.patAddress" placeholder="请输入地址" />
      </el-form-item>
      <!-- <el-form-item v-if="dataForm.drgsName == '眼视光'" label="患者类别:" label-width="90px" prop="patType">
        <el-select v-model="dataForm.patType" placeholder="请选择患者类别" clearable>
          <el-option v-for="(item,index) in patientTypeList " :key="index" :label="item" :value="item" />
        </el-select>
      </el-form-item> -->
      <!-- <el-form-item v-if="dataForm.drgsName == '青光眼'" label="周期:" label-width="90px" prop="revisitCycles" class="cycle-display">
        <el-input-number
          v-model="dataForm.revisitCycles"
          controls-position="right"
          :min="1"
        />
        <el-radio-group v-model="dataForm.revisitCyclesUnit">
          <el-radio-button label="3">天</el-radio-button>
          <el-radio-button label="4">周</el-radio-button>
          <el-radio-button label="2">月</el-radio-button>
        </el-radio-group>
      </el-form-item> -->
      <el-form-item v-if="dataForm.drgsName == '青光眼'" label="备注:" label-width="90px" prop="remarks">
        <el-input v-model="dataForm.remarks" type="textarea" />
      </el-form-item>
    </el-form>
    <template slot="footer">
      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
import debounce from 'lodash/debounce'
import { isMobile, isIDNumber } from '@/utils/validate'
export default {
  props: {
    patientTypeList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      visible: false,
      dataForm: {
        patId: '',
        patName: '',
        patIdNumber: '',
        patPhone: '',
        patAddress: '',
        // patType: '',
        revisitCycles: '1', // 周期数
        revisitCyclesUnit: '3', // 周期单位 1年2月3日4周
        remarks: '',
        drgsName: window.localStorage.getItem('identity')
      }
    }
  },
  computed: {
    dataRule() {
      var validataMobile = (rule, value, callback) => {
        if (value && !isMobile(value)) {
          return callback(new Error('您输入的手机号格式不正确'))
        }
        callback()
      }
      // var validataIDNumber = (rule, value, callback) => {
      //   if (value && !isIDNumber(value)) {
      //     return callback(new Error('您输入的身份证格式不正确'))
      //   } else if (!value) {
      //     return callback(new Error('请输入身份证号'))
      //   }
      //   callback()
      // }
      return {
        patId: [
          { required: true, message: '请输入病历号', trigger: 'blur' }
        ],
        patName: [
          { required: true, message: '请输入患者姓名', trigger: 'blur' }
        ],
        patIdNumber: [
          { required: true, message: '请输入身份证号', trigger: 'blur' }
        ],
        patPhone: [
          { validator: validataMobile, trigger: 'blur' }
        ],
        patAddress: [
          { message: '请输入家庭地址', trigger: 'blur' }
        ]
        // patType: [
        //   { message: '请选择患者类型', trigger: 'change' }
        // ]
      }
    }
  },
  methods: {
    init() {
      this.visible = true
      this.$nextTick(() => {
        this.$refs.dataForm.resetFields() // 重置表单
        this.dataForm.patIdNumber = ''
        this.dataForm.patName = ''
        this.dataForm.patAddress = ''
        this.dataForm.revisitCycles = '1'
        this.dataForm.revisitCyclesUnit = '3'
        if (this.dataForm.params.patIdNumber && this.dataForm.title !== 'HIS引入') {
          this.getInfo()
        } else if (this.dataForm.title === 'HIS引入') {
          this.getHisInfo()
        }
      })
    },
    // 获取信息
    getInfo() {
      this.$http.get('/pat/Manage', {
        params: {
          patIdNumber: this.dataForm.params.patIdNumber,
          drgsName: this.dataForm.drgsName,
          isSearch: ''
        }
      }).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.dataForm = {
          ...this.dataForm,
          ...res.data
        }
      }).catch(() => {})
    },
    // 获取His信息
    getHisInfo() {
      this.dataForm = { ...this.dataForm, ...this.dataForm.params, drgsName: window.localStorage.getItem('identity') }
      this.dataForm.revisitCycles = this.dataForm.revisitCycles ? this.dataForm.revisitCycles : '1'
      this.dataForm.revisitCyclesUnit = this.dataForm.revisitCyclesUnit ? this.dataForm.revisitCyclesUnit : '3'
    },
    // 表单提交
    dataFormSubmitHandle: debounce(function() {
      if (this.dataForm.title === 'HIS引入') {
        // this.$parent.HisAddVisible = false
      }
      this.$refs.dataForm.validate((valid) => {
        if (!valid) {
          return false
        }
        this.$http[!this.dataForm.id ? 'post' : 'put']('/pat/Manage', this.dataForm).then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.$message({
            message: this.$t('prompt.success'),
            type: 'success',
            duration: 500,
            onClose: () => {
              this.visible = false
              this.$emit('refreshDataList')
            }
          })
        }).catch(() => {})
      })
    }, 1000, { leading: true, trailing: false })
  }
}
</script>
<style lang="scss" scoped>
.patientDialog {
  .cycle-display {
    .el-form-item__content {
      display: flex;
    }
    .el-input-number {
      width: 100px;
      margin-right: 16px;
    }
  }
}

</style>
<style lang="scss">
.patientDialog {
  .el-dialog__header {
    margin-bottom:12px
  }
    .el-dialog__body {
        padding-right: 30px;
    }
    .formItemOne .el-form-item__content {
      display: flex;
    }

}
</style>