peisweb/src/components/patientRegister/PatientRegisterEdit.vue

<template>
  <div>
    <table>
      <td style="width: 60%">
        <div style="display: flex">
          <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-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-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-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.creatorId" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="创建时间">
                  <el-input :value="form.creationTime ? lmoment(form.creationTime, 'yyyy-MM-DD') :''" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="修改者">
                  <el-input v-model="form.lastModifierId" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="修改时间">
                  <el-input :value="form.lastModificationTime ? lmoment(form.lastModificationTime, 'yyyy-MM-DD') : ''" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-image
            class="photo"
            :src="apiurl + '/' + 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; display: flex">
          <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">申请单</el-button>
          </div>
          <div class="btn">
            <el-button type="primary">打条码</el-button>
          </div>
          <div class="btn">
            <el-button type="primary">打指引单</el-button>
          </div>
          <div class="btn">
            <el-button type="primary">复制新增</el-button>
          </div>
        </div>
      </td>
      <td style="width: 40%">
        <PatientRegisterItem :patientRegisterForm="form" />
      </td>
    </table>
    <!-- 人员档案列表 -->
    <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 prop="lastTime" label="末次体检" width="100">
          <template slot-scope="scope">
            <div v-if="scope.row.lastTime">
              {{ lmoment(scope.row.lastTime, "yyyy-MM-DD") }}
            </div>
          </template>
        </el-table-column>
        <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" />
    </el-dialog>
  </div>
</template>
<script>
import moment from "moment";
import { mapState } from "vuex";
import { getapi, postapi, putapi, deletapi } from "@/api/api";
import * as apiurl from "../../utlis/mm";

import { objCopy, setNull, dddw } from "../../utlis/proFunc";
import Camera from "./Camera.vue";
import PatientRegisterItem from "./PatientRegisterItem.vue";
export default {
  components: {
    Camera,
    PatientRegisterItem,
  },
  data() {
    return {
      apiurl,
      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: "9", //性别 默认未知U
        age: null, //年龄
        jobCardNo: "", //工卡号
        medicalCardNo: "", //体检卡号
        maritalStatusId: "9", //婚姻状况 默认未知
        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: "", //邮编
        creatorId: null,
        creationTime: "",
        lastModificationTime: "",
        lastModifierId: null,
      }, //单位 记录 目前新增与更新是一致

      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;

      //console.log(param)
      getapi(`/api/app/patient/in-filter?Filter=${param}`).then((res) => {
        if (res.code == 1) {
          console.log("查重 ", res); //有数据才显示
          if (res.data.items && res.data.items.length > 0) {
            this.patientList = res.data.items;
            this.dialogVisible = true;
          }
        }
      });
    },

    //列表选中
    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;
          delete body.creatorId;
          delete body.creationTime;
          delete body.lastModificationTime;
          delete body.lastModifierId;

          setNull(body, this.defaultNull);

          //日期转换
          console.log("body.birthDate", body.birthDate);
          if (body.birthDate) {
            body.birthDate = moment(new Date(body.birthDate)).format("yyyy-MM-DD");
          }

          if (this.form.id.length < 1) {
            //id为空则新增
            console.log(`/api/app/patient-register/return-info`, body);
            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++;
                  this.patientRegister.saveTimes++
                }
              }
            );
          } else {
            //id不为空则编辑
            console.log(`/api/app/patient-register?PatientRegisterId=${this.form.id}`,body);
            putapi(`/api/app/patient-register?PatientRegisterId=${this.form.id}`,body)
            .then((res) => {
              if (res.code == 1) {
                this.$message.success("更新 操作成功");
                this.patientRegister.query.times++;
                this.patientRegister.saveTimes++
              }
            });
          }
        } 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-left: 10px;
}

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