peisweb/src/components/patientRegister/PatientRegisterEdit.vue

<template>
  <div style="display:flex">
    <div>
      <el-form ref="form" :model="form" label-width="80px" :rules="rules" size="medium">
        <el-row>
          <el-col :span="6">
            <el-form-item label="单位名称" prop="customerOrgId">
              <el-cascader v-model="form.customerOrgId" :options="patientRegister.customerOrgTreeAll"
                :props="{ checkStrictly: true, expandTrigger: 'hover', ...customerOrg.treeprops }" :show-all-levels="false"
                disabled>
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="条码号" prop="patientRegisterNo">
              <el-input v-model="form.patientRegisterNo" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="档案号" prop="patientNo">
              <el-input v-model="form.patientNo" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" />
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="姓名" prop="patientName">
              <el-input v-model="form.patientName" @blur="query(form.patientName)"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="性别" prop="sexId">
              <el-select v-model="form.sexId" placeholder="请选择">
                <el-option v-for="item in dict.sex" :key="item.id" :label="item.displayName" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="体检次数" prop="medicalTimes">
              <el-input v-model="form.medicalTimes" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" />
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="年龄" prop="age">
              <el-input v-model="form.age"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="出生日期" prop="birthDate">
              <el-date-picker v-model="form.birthDate" type="date" placeholder="出生日期" style="width:135px;" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="婚姻状况" prop="maritalStatusId">
              <el-select v-model="form.maritalStatusId" placeholder="请选择">
                <el-option v-for="item in dict.maritalStatus" :key="item.id" :label="item.displayName" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" />
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="体检类别" prop="medicalTypeId">
              <el-select v-model="form.medicalTypeId" placeholder="请选择" filterable>
                <el-option v-for="item in dict.medicalType" :key="item.id" :label="item.displayName" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="人员类别" prop="personnelTypeId">
              <el-select v-model="form.personnelTypeId" placeholder="请选择" filterable>
                <el-option v-for="item in dict.personnelType" :key="item.id" :label="item.displayName" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="工卡号" prop="jobCardNo">
              <el-input v-model="form.jobCardNo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="体检卡号" prop="medicalCardNo">
              <el-input v-model="form.medicalCardNo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="职务" prop="jobPost">
              <el-input v-model="form.jobPost"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="职称" prop="jobTitle">
              <el-input v-model="form.jobTitle"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="form.email"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="身份证号" prop="idNo">
              <el-input v-model="form.idNo" @blur="query(form.idNo)"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="地址" prop="address">
              <el-input v-model="form.address"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="邮政编码" prop="postalCode">
              <el-input v-model="form.postalCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="电话" prop="telephone">
              <el-input v-model="form.telephone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="手机号" prop="mobileTelephone">
              <el-input v-model="form.mobileTelephone"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="民族" prop="nationId">              
              <el-select v-model="form.nationId" placeholder="请选择" filterable>
                <el-option v-for="item in dict.nation" :key="item.id" :label="item.displayName" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="介绍人" prop="salesman">
              <el-input v-model="form.salesman"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="性激素期" prop="sexHormoneTermId">
              <el-select v-model="form.sexHormoneTermId" placeholder="请选择" filterable clearable>
                <el-option v-for="item in dict.sexHormoneTerm" :key="item.id" :label="item.displayName" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否VIP" prop="isVip">
              <el-radio v-model="form.isVip" label="Y">是</el-radio>
              <el-radio v-model="form.isVip" label="N">否</el-radio>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>

          <el-col :span="6">
            <el-form-item label="电话随访" prop="isPhoneFollow">
              <el-radio v-model="form.isPhoneFollow" label="Y">是</el-radio>
              <el-radio v-model="form.isPhoneFollow" label="N">否</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="隐藏姓名" prop="isNameHide">
              <el-radio v-model="form.isNameHide" label="Y">是</el-radio>
              <el-radio v-model="form.isNameHide" label="N">否</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否锁住" prop="isLock">
              <el-radio v-model="form.isLock" label="Y">是</el-radio>
              <el-radio v-model="form.isLock" label="N">否</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="体检开始" prop="isMedicalStart">
              <el-radio v-model="form.isMedicalStart" label="Y" disabled>是</el-radio>
              <el-radio v-model="form.isMedicalStart" label="N" disabled>否</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="体检中心" prop="organizationUnitId">
              <el-select v-model="form.organizationUnitId" placeholder="请选择" filterable>
                <el-option v-for="item in dict.organization" :key="item.id" :label="item.displayName" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="分组" prop="customerOrgGroupId">
              <el-select v-model="form.customerOrgGroupId" placeholder="请选择" filterable clearable
                :disabled="form.customerOrgId === dict.personOrgId ? true : false">
                <el-option v-for="item in patientRegister.customerOrgGroup" :key="item.id" :label="item.displayName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="套餐" prop="medicalPackageId">
              <el-select v-model="form.medicalPackageId" placeholder="请选择" filterable clearable
                :disabled="form.customerOrgId === dict.personOrgId ? false : true">
                <el-option v-for="item in dict.medicalPackage" :key="item.id" :label="item.displayName" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="完成标志" prop="completeFlag">
              <el-select v-model="form.completeFlag" placeholder="请选择" disabled>
                <el-option v-for="item in dict.completeFlag" :key="item.id" :label="item.displayName" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" type="textarea" :rows="2" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="创建者">
              <el-input v-model="form.creatorName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建时间">
              <el-input :value="form.creationTime | dateFormat" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="修改者">
              <el-input v-model="form.creatorName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="修改时间">
              <el-input :value="form.lastModificationTime | dateFormat" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-image class="photo" :src="form.photo" style="width:150;height:200" >
        <div slot="placeholder" class="image-slot">
          加载中<span class="dot">...</span>
        </div>
      </el-image>
    </div>

    <!-- 按钮区域 -->
    <div style="margin-left: 10px;" width="120px">
      <div class="btn">
        <el-button @click="readIdCard">读身份证</el-button>
      </div>
      <div class="btn">
        <el-button type="success" @click="Onsubmit('form')">保存</el-button>
      </div>
      <div class="btn">
        <el-button type="primary" @click="openCamera" icon="el-icon-camera">拍照</el-button>
      </div>
      <div class="btn">
        <el-button type="primary" @click="">申请单</el-button>
      </div>
      <div class="btn">
        <el-button type="primary" @click="">打条码</el-button>
      </div>
      <div class="btn">
        <el-button type="primary" @click="">打指引单</el-button>
      </div>
      <div class="btn">
        <el-button type="primary" @click="">复制新增</el-button>
      </div>
    </div>

    <!-- 人员档案列表 -->
    <el-dialog title="人员档案列表" :visible.sync="dialogVisible" width="800" :append-to-body="true">
      <el-table :data="patientList" border width="800" height="480" row-key="id" size="small"
        class="el-table__body-wrapper tbody" highlight-current-row @row-click="rowick" ref="patientList">
        <el-table-column type="index" width="30"/>
        <el-table-column prop="patientNo" label="档案号" />
        <el-table-column label="末次体检" />
        <el-table-column prop="medicalTimes" label="体检次数" />
        <el-table-column prop="displayName" label="姓名" />
        <el-table-column prop="sexId" label="性别">
          <template slot-scope="scope">
            <div>{{ ldddw(dict.sex, 'id', scope.row.sexId, 'displayName') }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="maritalStatusId" label="婚姻">
          <template slot-scope="scope">
            <div>{{ ldddw(dict.maritalStatus, 'id', scope.row.maritalStatusId, 'displayName') }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="birthDate" label="出生日期" width="100">
          <template slot-scope="scope">
            <div v-if="scope.row.birthDate">{{ lmoment(scope.row.birthDate, 'yyyy-MM-DD') }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="nationId" label="民族">
          <template slot-scope="scope">
            <div>{{ ldddw(dict.nation, 'id', scope.row.nationId, 'displayName') }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="idNo" label="身份证号" />
        <el-table-column prop="telephone" label="电话" />
        <el-table-column prop="mobileTelephone" label="手机号" />
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="choosePatient">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 拍照 -->
    <el-dialog title="拍照" :visible.sync="patientRegister.cameraVisble" width="400" height="800" :show-close="false" :append-to-body="true">
      <Camera :id="form.id" :patientId="form.patientId"/>
    </el-dialog>
  </div>
</template>
<script>

import moment from 'moment';
import { mapState } from 'vuex'
import { getapi, postapi, putapi, deletapi } from "@/api/api";
import { objCopy,setNull,dddw } from '../../utlis/proFunc'
import Camera from '../../components/patientRegister/Camera.vue'
export default {
  components: {
    Camera,
  },
  data() {
    return {
      
      form: {
        id: '', //id
        patientId: '00000000-0000-0000-0000-000000000000', //档案号ID 选择了档案就传档案号，未选就传00000-0000...
        patientNo:'',//档案号
        customerOrgId: null, //单位编号
        customerOrgGroupId: null, //分组
        medicalPackageId: null,//套餐
        patientName: '', //姓名
        birthDate: '',  //字符串 如：2012-01-29
        sexId: 'U',     //性别 默认未知U
        age: null,      //年龄
        jobCardNo: '',   //工卡号
        medicalCardNo: '', //体检卡号
        maritalStatusId: 'U', //婚姻状况 默认未知
        medicalTypeId: null,   //体检类别
        personnelTypeId: null,  //人员类别
        jobPost: '', //职务
        jobTitle: '', //职称
        photo: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg', //照片
        salesman: '', //介绍人
        sexHormoneTermId: null, //性激素期限
        isNameHide: 'N', //隐藏姓名
        isPhoneFollow: 'N', //电话随访
        isVip: 'N',  //vip客户
        remark: '',  //
        isLock: 'N', //是否锁住
        completeFlag: '1', //完成标志 0:预登记，1：未检，2：部份已检，3：已总检  【创建编辑时不操作】
        isMedicalStart: 'N', //体检开始标志 【创建编辑时不操作】
        patientRegisterNo: '', //条码号 【创建编辑时不操作】
        medicalTimes: 1, //条码号 【创建编辑时不操作】
        organizationUnitId: null, //体检中心
        address:'', //地址
        email:'', //email
        idNo:'', //身份证号
        telephone:'', //电话
        mobileTelephone:'', //手机号
        nationId:null, //民族编号
        postalCode:'', //邮编
      },     //单位 记录 目前新增与更新是一致 

      defaultNull:[
        'customerOrgId',
        'customerOrgGroupId',
        'medicalPackageId',
        'age',
        'medicalTypeId',
        'personnelTypeId',
        'sexHormoneTermId',
        'organizationUnitId',
        'nationId',
      ], //一般uuid字段为空时，需设置为null值

      rules: {
        patientName: [
          { required: true, message: "请输入姓名", trigger: "blur" },
        ],
        organizationUnitId: [
          { required: true, message: "请填写体检中心", trigger: "blur" },
        ],
      },

      dialogVisible:false,
      patientList:[],//人员列表（用于判断人员多次体检）
      patientChoosed:{}, //查重选中的人员

      dialogCamera:false, //拍照组件
    };
  },

  created() {

  },

  //挂载完成
  mounted() {
    //表单赋值
    //console.log('mounted this.patientRegister.patientRegisterRd',this.patientRegister.patientRegisterRd)
    objCopy(this.patientRegister.patientRegisterRd, this.form)
    console.log('mounted this.form',this.form)
  },

  computed: {
    ...mapState(['dict', 'patientRegister', 'customerOrg']),
  },
  methods: {

    readIdCard() {
      console.log('this.form1', this.form)
    },

    //根据姓名，身份证号 查询档案信息，用于判断人员多次体检
    query(param){
      //编辑的时候不查重
      if(this.form.id || !param) return
      this.dialogVisible = true
      console.log(param)
      getapi(`/api/app/patient/in-filter?Filter=${param}`)
        .then(
          (res) => {                
            if(res.code == 1){
              //console.log('res',res)              
              this.patientList = res.data.items              
            }
          }
        )
    },
    
    //列表选中
    rowick(row){
      this.patientChoosed = row
    },

    //确定选择人员
    choosePatient(){
      if(!this.patientChoosed){
        alert("请选中人员档案信息")
        return
      }
      
      this.dialogVisible = false

      this.form.patientId = this.patientChoosed.id
      this.form.patientName = this.patientChoosed.displayName
      this.form.sexId = this.patientChoosed.sexId
      this.form.maritalStatusId = this.patientChoosed.maritalStatusId
      this.form.birthDate = this.patientChoosed.birthDate
      this.form.nationId = this.patientChoosed.nationId
      this.form.idNo = this.patientChoosed.idNo
      this.form.telephone = this.patientChoosed.telephone
      this.form.mobileTelephone = this.patientChoosed.mobileTelephone
      this.form.patientNo = this.patientChoosed.patientNo
      this.form.medicalTimes = this.patientChoosed.medicalTimes + 1
    },

    ldddw(arrayData, key, value, display) {
      return dddw(arrayData, key, value, display)
    },

    lmoment(date, forMat) {
      return moment(new Date(date)).format(forMat)
    },

    //提交
    Onsubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //赋值
          let body = {...this.form}

          delete body.id
          delete body.patientRegisterNo
          delete body.medicalTimes
          delete body.completeFlag
          delete body.isMedicalStart
          delete body.patientNo

         
          setNull(body,this.defaultNull)
          
          //日期转换
          console.log('body.birthDate',body.birthDate)
          if(body.birthDate){
            body.birthDate = moment(new Date(body.birthDate)).format('yyyy-MM-DD')
          }
          
          console.log('this.form.id',this.form.id)
          console.log('body',body)
          if (this.form.id.length < 1) {
            //id为空则新增
            postapi(`/api/app/patient-register/return-info`, body)
            .then(
              (res) => {                
                if(res.code == 1){
                  //console.log('res',res)
                  this.$message.success("创健 操作成功");
                  objCopy(res.data,this.form)              
                  this.patientRegister.patientRegisterId = res.data.id                  
                  this.patientRegister.patientRegisterId = res.data.id

                  this.patientRegister.patientRegisterRd = res.data
                  this.patientRegister.query.times++

                  return getapi(`/api/app/patient/${this.form.patientId}`)
                }
              }
            )
            .then(
              (res) => {                
                if(res.code == 1){
                  //返写档案号
                  this.form.patientNo = res.data.patientNo
                }
              }
            );

          } else {
            //id不为空则编辑 
            putapi(`/api/app/patient-register?PatientRegisterId=${this.form.id}`, body).then(
              (res) => {
                if(res.code == 1){
                  this.$message.success("更新 操作成功");
                  this.patientRegister.query.times++
                }
              }
            );
          }
        } else {
          alert('未通过数据校验');
          return false;
        }
      })

    },

    //新增弹框
    add() {
      //
    },

    //删除
    del() {
      deletapi(`/api/app/customer-org/${this.customerOrg.customerOrgRd.id}`).then(
        (res) => {
          this.$message.success("删除 操作成功");
          this.setData({ key: 'customerOrg.customerOrgRd', value: { id: '' } })
          this.getCustomerOrgTree()
        }
      );
    },

    //拍照
    openCamera(){
      if(!this.form.id){
        alert("请先保存人员信息")
        return
      }
      this.patientRegister.cameraVisble = true      
    },

  },

 
  //监听事件
  watch: {
    //新增触发
    'patientRegister.addTimes'(newVal, oldVal) {
      //console.log('patientRegister.addTimes newVal：',newVal,' oldVal：',oldVal)
      if (newVal != oldVal) {
        //console.log('this.patientRegister.patientRegisterRdInit',this.patientRegister.patientRegisterRdInit)
        objCopy(this.patientRegister.patientRegisterRdInit, this.form)
        //console.log('this.form',this.form)
      }
    },
    
    //编辑触发
    'patientRegister.patientRegisterRd.id'(newVal, oldVal) {
      //console.log('patientRegister.patientRegisterRd.id newVal：',newVal,' oldVal：',oldVal)
      if (newVal != oldVal) { 
        //console.log('newVal：',this.patientRegister.patientRegisterRd)       
        objCopy(this.patientRegister.patientRegisterRd, this.form)
      }
    },

    //拍照触发
    'patientRegister.photo'(newVal, oldVal) {
      //console.log('patientRegister.patientRegisterRd.id newVal：',newVal,' oldVal：',oldVal)
      if (newVal != oldVal) { 
        //console.log('newVal：',newVal)       
        this.form.photo = newVal
      }
    },
  },
};
</script>
<style scoped>
.btn {
  margin-top: 10px;
}

.photo {
  position: absolute;
  top: 60px;
  right: 150px;
  width: 150px;
  height: 180px;
}</style>