尚医通-(三十三)就诊人管理功能实现

目录:

(1)前台用户系统-就诊人管理-需求说明

(2)就诊人管理-接口开发-列表接口 

(3)就诊人管理-接口开发-其他接口

(4)前台用户系统-就诊人管理-前端整合


(1)前台用户系统-就诊人管理-需求说明

当点击一个医院进入医院详情页面,选择某一个科室,进行挂号 ,在这里我们需要做这么一个处理,如果要进行预约挂号,我们需要先进行认证,只有认证通过之后才能进行预约挂号,如果你没有认证,然他先认证通过之后再挂号,在这个页面进行调整,当认证通过之后才能挂号

 根据上节写的接口:根据id获取用户信息:根据用户信息的认证状态进行判断

在_hoscode.vue:加上

首先引入userInfo 

 加上代码:

就诊人管理:我们在挂号的时候要选择那个就诊人下单,为就诊人完成增删改查操作

写在service_user模块中:

关于就诊人的实体类:patient

 

package com.atguigu.yygh.model.user;

import com.atguigu.yygh.model.base.BaseEntity;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableName;
import com.fasterxml.jackson.annotation.JsonFormat;
import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;

import java.util.Date;

/**
 * <p>
 * Patient
 * </p>
 *
 * @author qy
 */
@Data
@ApiModel(description = "Patient")
@TableName("patient")
public class Patient extends BaseEntity {
	
	private static final long serialVersionUID = 1L;
	
	@ApiModelProperty(value = "用户id")
	@TableField("user_id")
	private Long userId;

	@ApiModelProperty(value = "姓名")
	@TableField("name")
	private String name;

	@ApiModelProperty(value = "证件类型")
	@TableField("certificates_type")
	private String certificatesType;

	@ApiModelProperty(value = "证件编号")
	@TableField("certificates_no")
	private String certificatesNo;

	@ApiModelProperty(value = "性别")
	@TableField("sex")
	private Integer sex;

	@ApiModelProperty(value = "出生年月")
	@JsonFormat(pattern = "yyyy-MM-dd")
	@TableField("birthdate")
	private Date birthdate;

	@ApiModelProperty(value = "手机")
	@TableField("phone")
	private String phone;

	@ApiModelProperty(value = "是否结婚")
	@TableField("is_marry")
	private Integer isMarry;

	@ApiModelProperty(value = "省code")
	@TableField("province_code")
	private String provinceCode;

	@ApiModelProperty(value = "市code")
	@TableField("city_code")
	private String cityCode;

	@ApiModelProperty(value = "区code")
	@TableField("district_code")
	private String districtCode;

	@ApiModelProperty(value = "详情地址")
	@TableField("address")
	private String address;

	@ApiModelProperty(value = "联系人姓名")
	@TableField("contacts_name")
	private String contactsName;

	@ApiModelProperty(value = "联系人证件类型")
	@TableField("contacts_certificates_type")
	private String contactsCertificatesType;

	@ApiModelProperty(value = "联系人证件号")
	@TableField("contacts_certificates_no")
	private String contactsCertificatesNo;

	@ApiModelProperty(value = "联系人手机")
	@TableField("contacts_phone")
	private String contactsPhone;

	@ApiModelProperty(value = "是否有医保")
	@TableField("is_insure")
	private Integer isInsure;

	@ApiModelProperty(value = "就诊卡")
	@TableField("card_no")
	private String cardNo;

	@ApiModelProperty(value = "状态(0:默认 1:已认证)")
	@TableField("status")
	private String status;
}

操作的是patient这张表:完成增删改查操作

 首先引入依赖:需要远程调用得到数据字典中的内容

 

创建controller:

package com.atguigu.yygh.user.api;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

//就诊人管理接口
@RestController
@RequestMapping("/api/user/patient")
public class PatientApiController {


}

 service:PatientService 

package com.atguigu.yygh.user.service;

import com.atguigu.yygh.model.user.Patient;
import com.baomidou.mybatisplus.extension.service.IService;

public interface PatientService extends IService<Patient> {
}

实现类:PatientService Impl:

package com.atguigu.yygh.user.service.impl;

import com.atguigu.yygh.model.user.Patient;
import com.atguigu.yygh.user.mapper.PatientMapper;
import com.atguigu.yygh.user.service.PatientService;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import org.springframework.stereotype.Service;

@Service
public class PatientServiceImpl extends
        ServiceImpl<PatientMapper, Patient> implements PatientService {
}

mapper:PatientMapper 

package com.atguigu.yygh.user.mapper;

import com.atguigu.yygh.model.user.Patient;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import org.apache.ibatis.annotations.Mapper;

@Mapper
public interface PatientMapper extends BaseMapper<Patient> {
}

xml:可以不写

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.atguigu.yygh.user.mapper.PatientMapper">

</mapper>

(2)就诊人管理-接口开发-列表接口 

在controller中添加访问接口:

package com.atguigu.yygh.user.api;

import com.atguigu.yygh.common.result.Result;
import com.atguigu.yygh.common.utils.AuthContextHolder;
import com.atguigu.yygh.model.user.Patient;
import com.atguigu.yygh.user.service.PatientService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletRequest;
import java.util.List;

//就诊人管理接口
@RestController
@RequestMapping("/api/user/patient")
public class PatientApiController {
    @Autowired
    private PatientService patientService;

    //获取就诊人列表
    @GetMapping("auth/findAll")
    public Result findAll(HttpServletRequest request) {
        //使用工具类AuthContextHolder获取当前登录用户id
        Long userId = AuthContextHolder.getUserId(request);
        //根据登录的用户id查询就诊人信息
        List<Patient> list = patientService.findAllUserId(userId);
        return Result.ok(list);
    }

}

service:PatientService 

package com.atguigu.yygh.user.service;

import com.atguigu.yygh.model.user.Patient;
import com.baomidou.mybatisplus.extension.service.IService;

import java.util.List;

public interface PatientService extends IService<Patient> {
    //获取就诊人列表
    List<Patient> findAllUserId(Long userId);
}

 实现类:PatientServiceImpl:

查询到的数据需要进一步的封装成内容:比如10 换成汉字110000换成汉字

package com.atguigu.yygh.user.service.impl;

import com.atguigu.yygh.cmn.client.DictFeignClient;
import com.atguigu.yygh.enums.DictEnum;
import com.atguigu.yygh.model.user.Patient;
import com.atguigu.yygh.user.mapper.PatientMapper;
import com.atguigu.yygh.user.service.PatientService;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class PatientServiceImpl extends
        ServiceImpl<PatientMapper, Patient> implements PatientService {

    @Autowired
    private DictFeignClient dictFeignClient;

    //获取就诊人列表
    @Override
    public List<Patient> findAllUserId(Long userId) {
        //根据userid查询所有就诊人信息列表
        QueryWrapper<Patient> wrapper = new QueryWrapper<>();
        wrapper.eq("user_id",userId);

        List<Patient> patientList = baseMapper.selectList(wrapper);


        //通过远程调用,得到编码对应具体内容,查询数据字典表内容
        //使用java8Stream流的方式遍历
        patientList.stream().forEach(item -> {
            //其他参数封装
            this.packPatient(item);
        });
        return patientList;
    }

    //Patient对象里面其他参数封装
    private Patient packPatient(Patient patient) {

        //根据证件类型编码,获取证件类型具体指
        String certificatesTypeString =
                dictFeignClient.getName(DictEnum.CERTIFICATES_TYPE.getDictCode(), patient.getCertificatesType());//联系人证件
        //联系人证件类型
        String contactsCertificatesTypeString =
                dictFeignClient.getName(DictEnum.CERTIFICATES_TYPE.getDictCode(),patient.getContactsCertificatesType());
        //省
        String provinceString = dictFeignClient.getName(patient.getProvinceCode());
        //市
        String cityString = dictFeignClient.getName(patient.getCityCode());
        //区
        String districtString = dictFeignClient.getName(patient.getDistrictCode());

        patient.getParam().put("certificatesTypeString", certificatesTypeString);
        patient.getParam().put("contactsCertificatesTypeString", contactsCertificatesTypeString);
        patient.getParam().put("provinceString", provinceString);
        patient.getParam().put("cityString", cityString);
        patient.getParam().put("districtString", districtString);
        patient.getParam().put("fullAddress", provinceString + cityString + districtString + patient.getAddress());
        return patient;
    }
}

(3)就诊人管理-接口开发-其他接口

在PatientApiController:中添加接口:添加就诊人接口:

 //添加就诊人
    @PostMapping("auth/save")
    public Result savePatient(@RequestBody Patient patient, HttpServletRequest request) {
        //使用工具类AuthContextHolder获取当前登录用户id
        Long userId = AuthContextHolder.getUserId(request);
        patient.setUserId(userId);
        patientService.save(patient);
        return Result.ok();
    }

 继续添加接口:根据id获取就诊人信息接口

根据这个id查询 

 //根据id获取就诊人信息
    @GetMapping("auth/get/{id}")
    public Result getPatient(@PathVariable Long id) {
        //不直接去查,而是自己去写查询方法,返回完整的数据和上面的就诊人列表功能类似
        Patient patient = patientService.getPatientId(id);
        return Result.ok(patient);
    }

PatientService接口:

package com.atguigu.yygh.user.service;

import com.atguigu.yygh.model.user.Patient;
import com.baomidou.mybatisplus.extension.service.IService;

import java.util.List;

public interface PatientService extends IService<Patient> {
    //获取就诊人列表
    List<Patient> findAllUserId(Long userId);

    根据id获取就诊人信息
    Patient getPatientId(Long id);
}

实现类:

//根据id获取就诊人信息
    @Override
    public Patient getPatientId(Long id) {
        /*
        Patient patient=baseMapper.selectById(id);
        this.packPatient(patient);
        */
        //一行写完,调用下面的方法
        return this.packPatient(baseMapper.selectById(id));
    }



//Patient对象里面其他参数封装
    private Patient packPatient(Patient patient) {

        //根据证件类型编码,获取证件类型具体指
        String certificatesTypeString =
                dictFeignClient.getName(DictEnum.CERTIFICATES_TYPE.getDictCode(), patient.getCertificatesType());//联系人证件
        //联系人证件类型
        String contactsCertificatesTypeString =
                dictFeignClient.getName(DictEnum.CERTIFICATES_TYPE.getDictCode(),patient.getContactsCertificatesType());
        //省
        String provinceString = dictFeignClient.getName(patient.getProvinceCode());
        //市
        String cityString = dictFeignClient.getName(patient.getCityCode());
        //区
        String districtString = dictFeignClient.getName(patient.getDistrictCode());

        patient.getParam().put("certificatesTypeString", certificatesTypeString);
        patient.getParam().put("contactsCertificatesTypeString", contactsCertificatesTypeString);
        patient.getParam().put("provinceString", provinceString);
        patient.getParam().put("cityString", cityString);
        patient.getParam().put("districtString", districtString);
        patient.getParam().put("fullAddress", provinceString + cityString + districtString + patient.getAddress());
        return patient;
    }

继续添加:修改就诊人信息接口:

//修改就诊人
    @PostMapping("auth/update")
    public Result updatePatient(@RequestBody Patient patient) {
        patientService.updateById(patient);
        return Result.ok();
    }

删除就诊人接口:

//删除就诊人
    @DeleteMapping("auth/remove/{id}")
    public Result removePatient(@PathVariable Long id) {
        patientService.removeById(id);
        return Result.ok();
    }

(4)前台用户系统-就诊人管理-前端整合

在前端项目的api文件夹下,创建:patient.js

 写入访问后端的接口:

import request from '@/utils/request'
const api_name = `/api/user/patient`
export default {
    //就诊人列表
    findList() {
        return request({
            url: `${api_name}/auth/findAll`,
            method: `get`
        })
    },
    //根据id查询就诊人信息
    getById(id) {
        return request({
            url: `${api_name}/auth/get/${id}`,
            method: 'get'
        })
    },
    //添加就诊人信息
    save(patient) {
        return request({
            url: `${api_name}/auth/save`,
            method: 'post',
            data: patient
        })
    },
    //修改就诊人信息
    updateById(patient) {
        return request({
            url: `${api_name}/auth/update`,
            method: 'post',
            data: patient
        })
    },
    //删除就诊人信息
    removeById(id) {
        return request({
            url: `${api_name}/auth/remove/${id}`,
            method: 'delete'
        })
    }

}

创建相应的页面:点击就诊人管理跳转到相应的页面

 

它用到nuxt中的固定路由,它会到pages中找到patient文件夹找到index.vue的页面:

<template>
  <!-- header -->
  <div class="nav-container page-component">
    <!--左侧导航 #start -->
    <div class="nav left-nav">
      <div class="nav-item">
        <span
          class="v-link clickable dark"
          onclick="javascript:window.location='/user'"
          >实名认证
        </span>
      </div>
      <div class="nav-item">
        <span
          class="v-link clickable dark"
          onclick="javascript:window.location='/order'"
        >
          挂号订单
        </span>
      </div>
      <div class="nav-item selected">
        <span
          class="v-link selected dark"
          onclick="javascript:window.location='/patient'"
        >
          就诊人管理
        </span>
      </div>
      <div class="nav-item">
        <span class="v-link clickable dark"> 修改账号信息 </span>
      </div>
      <div class="nav-item">
        <span class="v-link clickable dark"> 意见反馈 </span>
      </div>
    </div>
    <!-- 左侧导航 #end -->
    <!-- 右侧内容 #start -->
    <div class="page-container">
      <div class="personal-patient">
        <div class="header-wrapper">
          <div class="title">就诊人管理</div>
        </div>
        <div class="content-wrapper">
          <el-card
            class="patient-card"
            shadow="always"
            v-for="item in patientList"
            :key="item.id"
          >
            <div slot="header" class="clearfix">
              <div>
                <span class="name">{{ item.name }}</span>
                <span
                  >{{ item.certificatesNo }}
                  {{ item.param.certificatesTypeString }}</span
                >
                <div class="detail" @click="show(item.id)">
                  查看详情 <span class="iconfont"></span>
                </div>
              </div>
            </div>
            <div class="card SELF_PAY_CARD">
              <div class="info">
                <span class="type">{{
                  item.isInsure == 0 ? "自费" : "医保"
                }}</span>
                <span class="card-no">{{ item.certificatesNo }}</span>
                <span class="card-view">{{
                  item.param.certificatesTypeString
                }}</span>
              </div>
              <span class="operate"></span>
            </div>
            <div class="card">
              <div class="text bind-card"></div>
            </div>
          </el-card>
          <div class="item-add-wrapper v-card clickable" @click="add()">
            <div class="">
              <div>+ 添加就诊人</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 右侧内容 #end -->
  </div>
  <!-- footer -->
</template>
<script>
import "~/assets/css/hospital_personal.css";
import "~/assets/css/hospital.css";
import "~/assets/css/personal.css";
import patientApi from "@/api/patient";
export default {
  data() {
    return {
      patientList: [],
    };
  },
  created() {
    this.findPatientList();
  },
  methods: {
    findPatientList() {
      patientApi.findList().then((response) => {
        this.patientList = response.data;
      });
    },
    add() {
      window.location.href = "/patient/add";
    },
    show(id) {
      window.location.href = "/patient/show?id=" + id;
    },
  },
};
</script>
<style>
.header-wrapper .title {
  font-size: 16px;
  margin-top: 0;
}
.content-wrapper {
  margin-left: 0;
}
.patient-card .el-card__header .detail {
  font-size: 14px;
}
</style>

 

点击就诊人管理:这里显示两个就诊人

 登录的用户,跟病人表中想联系

 

 添加就诊人页面:

 在nuxt中有一个固定路由,如果写的是/patient它会默认找到pages文件夹下patient文件夹下面默认的index.vue,如果加了/add默认会找到patient下面的add页面:

新建add.vue:

<template>
    <!-- header -->
    <div class="nav-container page-component">
        <!--左侧导航 #start -->
        <div class="nav left-nav">
            <div class="nav-item ">
                <span class="v-link clickable dark" onclick="javascript:window.location='/user'">实名认证 </span>
            </div>
            <div class="nav-item ">
                <span class="v-link clickable dark" onclick="javascript:window.location='/order'"> 挂号订单 </span>
            </div>
            <div class="nav-item selected">
                <span class="v-link selected dark" onclick="javascript:window.location='/patient'"> 就诊人管理 </span>
            </div>
            <div class="nav-item ">
                <span class="v-link clickable dark"> 修改账号信息 </span>
            </div>
            <div class="nav-item ">
                <span class="v-link clickable dark"> 意见反馈 </span>
            </div>
        </div>
        <!-- 左侧导航 #end -->
        <!-- 右侧内容 #start -->
        <div class="page-container">
        <div class="personal-patient">
            <div class="header-wrapper">
                <div class="title"> 添加就诊人</div>
            </div>
        <div>
        <div class="sub-title">
        <div class="block"></div>
                    就诊人信息
        </div>
        <div class="content-wrapper">
            <el-form :model="patient" label-width="110px" label-position="left" ref="patient" :rules="validateRules">
            <el-form-item prop="name" label="姓名:">
                <el-input v-model="patient.name" placeholder="请输入真实姓名全称" class="input v-input"/>
            </el-form-item>
            <el-form-item prop="certificatesType" label="证件类型:">
                <el-select v-model="patient.certificatesType" placeholder="请选择证件类型" class="v-select patient-select">
                    <el-option
                        v-for="item in certificatesTypeList"
                        :key="item.value"
                        :label="item.name"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="certificatesNo" label="证件号码:">
                <el-input v-model="patient.certificatesNo" placeholder="请输入证件号码" class="input v-input"/>
            </el-form-item>
            <el-form-item prop="sex" label="性别:">
                <el-radio-group v-model="patient.sex">
                <el-radio :label="1">男</el-radio>
                <el-radio :label="0">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item prop="birthdate" label="出生日期:">
                <el-date-picker
                    v-model="patient.birthdate"
                    class="v-date-picker"
                    type="date"
                    placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item prop="phone" label="手机号码:">
                <el-input v-model="patient.phone" placeholder="请输入手机号码" maxlength="11" class="input v-input"/>
            </el-form-item>
            </el-form>
        </div>
        <div class="sub-title">
            <div class="block"></div>
                建档信息(完善后部分医院首次就诊不排队建档)
        </div>
        <div class="content-wrapper">
            <el-form :model="patient" label-width="110px" label-position="left" ref="patient" :rules="validateRules">
                <el-form-item prop="isMarry" label="婚姻状况:">
                    <el-radio-group v-model="patient.isMarry">
                        <el-radio :label="0">未婚</el-radio>
                        <el-radio :label="1">已婚</el-radio>
                    </el-radio-group>
                </el-form-item>
            <el-form-item prop="isInsure" label="自费/医保:">
                <el-radio-group v-model="patient.isInsure">
                    <el-radio :label="0">自费</el-radio>
                    <el-radio :label="1">医保</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item prop="addressSelected" label="当前住址:">
                <el-cascader
                    ref="selectedShow"
                    v-model="patient.addressSelected"
                    class="v-address"
                    :props="props"></el-cascader>
            </el-form-item>
            <el-form-item prop="address" label="详细地址:">
                <el-input v-model="patient.address" placeholder="应公安机关要求,请填写现真实住址" class="input v-input"/>
            </el-form-item>
            </el-form>
        </div>
        <div class="sub-title">
            <div class="block"></div>
                    联系人信息(选填)
        </div>
        <div class="content-wrapper">
            <el-form :model="patient" label-width="110px" label-position="left">
                <el-form-item prop="contactsName" label="姓名:">
                    <el-input v-model="patient.contactsName" placeholder="请输入联系人姓名全称" class="input v-input"/>
                </el-form-item>
                <el-form-item prop="contactsCertificatesType" label="证件类型:">
                    <el-select v-model="patient.contactsCertificatesType" placeholder="请选择证件类型" class="v-select patient-select">
                        <el-option
                            v-for="item in certificatesTypeList"
                            :key="item.value"
                            :label="item.name"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="contactsCertificatesNo" label="证件号码:">
                    <el-input v-model="patient.contactsCertificatesNo" placeholder="请输入联系人证件号码" class="input v-input"/>
                </el-form-item>
                <el-form-item prop="contactsPhone" label="手机号码:">
                    <el-input v-model="patient.contactsPhone" placeholder="请输入联系人手机号码" class="input v-input"/>
                </el-form-item>
            </el-form>
        </div>
        </div>
        <div  class="bottom-wrapper">
            <div  class="button-wrapper">
                <div class="v-button" @click="saveOrUpdate()">{{ submitBnt }}</div>
            </div>
        </div>
        </div>
        </div>
        <!-- 右侧内容 #end -->
    </div>
    <!-- footer -->
</template>
<script>
import '~/assets/css/hospital_personal.css'
import '~/assets/css/hospital.css'
import '~/assets/css/personal.css'
import dictApi from '@/api/dict'
import patientApi from '@/api/patient'
const defaultForm = {
    name: '',
    certificatesType: '',
    certificatesNo: '',
    sex: 1,
    birthdate: '',
    phone: '',
    isMarry: 0,
    isInsure: 0,
    provinceCode: '',
    cityCode: '',
    districtCode: '',
    addressSelected: null,
    address: '',
    contactsName: '',
    contactsCertificatesType: '',
    contactsCertificatesNo: '',
    contactsPhone: '',
    param: {}
}
export default {
    data() {
        return {
            patient: defaultForm,
            certificatesTypeList: [],
            props: {
                lazy: true,
                async lazyLoad (node, resolve) {
                const { level } = node
                //异步获取省市区
                dictApi.findByParentId(level ? node.value : '86').then(response => {
                    let list= response.data
                    let provinceList = list.map((item, i) => {
                        return {
                            value: item.id,
                            label: item.name,
                            leaf: node.level == 2 ? true : false,//可控制显示几级
                        }
                    })
                        resolve && resolve(provinceList)
                    })
                }
            },
            submitBnt: '保存',
            //校验
            validateRules: {
                name: [{ required: true, trigger: 'blur', message: '必须输入' }],
                certificatesType: [{ required: true, trigger: 'blur', message: '必须输入' }],
                certificatesNo: [{ required: true, trigger: 'blur', message: '必须输入' }],
                birthdate: [{ required: true, trigger: 'blur', message: '必须输入' }],
                phone: [{ required: true, trigger: 'blur', message: '必须输入' }],
                addressSelected: [{ required: true, trigger: 'blur', message: '必须输入' }],
                address: [{ required: true, trigger: 'blur', message: '必须输入' }]
            }
        }
    },
    created() {
        this.init();
    },
    mounted() {
        if (this.$route.query.id) {
            setTimeout(()=>{
                this.$refs.selectedShow.presentText = this.patient.param.provinceString + '/' + this.patient.param.cityString + '/' +this.patient.param.districtString //"北京市/市辖区/西城区";// 首次手动复制
                // this.$refs.selectedShow.value = '110000/110100/110102';
            },1000)
        }
    },
    methods: {
        init() {
            if (this.$route.query.id) {
                //从浏览器地址栏得到就诊人id
                const id = this.$route.query.id
                    this.fetchDataById(id)
            } else {
                // 对象拓展运算符:拷贝对象,而不是赋值对象的引用
                this.patient = { ...defaultForm }
            }
            this.getDict()
        },
        //得到就诊人信息做一个回显
        fetchDataById(id) {
            patientApi.getById(id).then(response => {
                this.patient = response.data
                //添加默认值
                this.patient.addressSelected = [this.patient.provinceCode, this.patient.cityCode, this.patient.districtCode]
            })
        },
        //查询数据字典表
        getDict() {
            dictApi.findByDictCode("CertificatesType").then(response => {
                this.certificatesTypeList = response.data
            })
        },

        //添加或更新判断方法
        saveOrUpdate() {
            this.$refs.patient.validate(valid => {
                if (valid) {
                    //地址处理
                    if(this.patient.addressSelected.length == 3) {
                        this.patient.provinceCode = this.patient.addressSelected[0]
                        this.patient.cityCode = this.patient.addressSelected[1]
                        this.patient.districtCode = this.patient.addressSelected[2]
                    }
                    if (!this.patient.id) {
                        this.saveData()
                    } else {
                        this.updateData()
                    }
                }
            })
        },
        // 新增
        saveData() {
            if(this.submitBnt == '正在提交...') {
                this.$message.info('重复提交')
                return
            }
            this.submitBnt = '正在提交...'
                patientApi.save(this.patient).then(response => {
                    this.$message.success("提交成功")
                    window.location.href = '/patient'
                }).catch(e => {
                    this.submitBnt = '保存'
                })
        },
        // 根据id更新记录
        updateData() {
            if(this.submitBnt == '正在提交...') {
                this.$message.info('重复提交')
                return
            }
            this.submitBnt = '正在提交...'
            patientApi.updateById(this.patient).then(response => {
                this.$message.success("提交成功")
                window.location.href = '/patient'
            }).catch(e => {
                this.submitBnt = '保存'
            })
        }
    }
}
</script>
<style>
  .header-wrapper .title {
    font-size: 16px;
    margin-top: 0;
  }
  .sub-title {
    margin-top: 0;
  }
  .bottom-wrapper{
    padding: 0;
    margin: 0;
  }
  .bottom-wrapper .button-wrapper{
    margin-top: 0;
  }
</style>

 

点击详情:跳转到详情页面,在这个页面可以做删除和修改:

创建show.vue:

<template>
  <!-- header -->
  <div class="nav-container page-component">
    <!--左侧导航 #start -->
    <div class="nav left-nav">
      <div class="nav-item">
        <span
          class="v-link clickable dark"
          onclick="javascript:window.location='/user'"
          >实名认证
        </span>
      </div>
      <div class="nav-item">
        <span
          class="v-link clickable dark"
          onclick="javascript:window.location='/order'"
        >
          挂号订单
        </span>
      </div>
      <div class="nav-item selected">
        <span
          class="v-link selected dark"
          onclick="javascript:window.location='/patient'"
        >
          就诊人管理
        </span>
      </div>
      <div class="nav-item">
        <span class="v-link clickable dark"> 修改账号信息 </span>
      </div>
      <div class="nav-item">
        <span class="v-link clickable dark"> 意见反馈 </span>
      </div>
    </div>
    <!-- 左侧导航 #end -->
    <!-- 右侧内容 #start -->
    <div class="page-container">
      <div class="personal-patient">
        <div class="title" style="margin-top: 0px; font-size: 16px">
          就诊人详情
        </div>
        <div>
          <div class="sub-title">
            <div class="block"></div>
            就诊人信息
          </div>
          <div class="content-wrapper">
            <el-form :model="patient" label-width="110px" label-position="left">
              <el-form-item label="姓名:">
                <div class="">
                  <span>{{ patient.name }}</span>
                </div>
              </el-form-item>
              <el-form-item label="证件类型:">
                <div class="">
                  <span>{{ patient.param.certificatesTypeString }}</span>
                </div>
              </el-form-item>
              <el-form-item label="证件号码:">
                <div class="">
                  <span>{{ patient.certificatesNo }} </span>
                </div>
              </el-form-item>
              <el-form-item label="性别:">
                <div class="">
                  <span>{{ patient.sex == 1 ? "男" : "女" }} </span>
                </div>
              </el-form-item>
              <el-form-item label="出生日期:">
                <div class="">
                  <span>{{ patient.birthdate }} </span>
                </div>
              </el-form-item>
              <el-form-item label="手机号码:">
                <div class="">
                  <span>{{ patient.phone }} </span>
                </div>
              </el-form-item>
              <el-form-item label="婚姻状况:">
                <div class="">
                  <span>{{ patient.isMarry == 1 ? "已婚" : "未婚" }} </span>
                </div>
              </el-form-item>
              <el-form-item label="当前住址:">
                <div class="">
                  <span
                    >{{ patient.param.provinceString }}/{{
                      patient.param.cityString
                    }}/{{ patient.param.districtString }}
                  </span>
                </div>
              </el-form-item>
              <el-form-item label="详细地址:">
                <div class="">
                  <span>{{ patient.address }} </span>
                </div>
              </el-form-item>
              <br />
              <el-form-item>
                <el-button class="v-button" type="primary" @click="remove()"
                  >删除就诊人</el-button
                >
                <el-button class="v-button" type="primary white" @click="edit()"
                  >修改就诊人</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <!-- 右侧内容 #end -->
  </div>
  <!-- footer -->
</template>
  <script>
import "~/assets/css/hospital_personal.css";
import "~/assets/css/hospital.css";
import "~/assets/css/personal.css";
import patientApi from "@/api/patient";
export default {
  data() {
    return {
      patient: {
        param: {},
      },
    };
  },
  created() {
    this.fetchDataById();
  },
    methods: {
    //根据id获取就诊人的信息做显示
    fetchDataById() {
      patientApi.getById(this.$route.query.id).then((response) => {
        this.patient = response.data;
      });
    },
    remove() {
      patientApi.removeById(this.patient.id).then((response) => {
        this.$message.success("删除成功");
        window.location.href = "/patient";
      });
        },
    //修改跳转到add页面做修改
    edit() {
      window.location.href = "/patient/add?id=" + this.patient.id;
    },
  },
};
</script>
  <style>
.info-wrapper {
  padding-left: 0;
  padding-top: 0;
}
.content-wrapper {
  color: #333;
  font-size: 14px;
  padding-bottom: 0;
}
.el-form-item {
  margin-bottom: 5px;
}
.bottom-wrapper {
  width: 100%;
}
.button-wrapper {
  margin: 0;
}
.bottom-wrapper .button-wrapper {
  margin-top: 0;
}
</style>
  

 测试:

点击添加就诊人:跳转到添加页面

 

 下拉列表会进行查询显示:

 测试添加:

点击保存:

添加成功跳转到:就诊人管理页面

 数据库也成功添加:

 测试:查看详情:

点击李刚的查看详情:

在点击修改就诊人:它会跳转到添加页面,进行数据回显:

 点击删除就诊人:

跳转到就诊人管理页面:成功删除

表里面不会删除,只是进行逻辑删除里面的字段值is_deleted发生改变: 变为1

 

 当用户实名认证以后,需要在后台管理系统管理员对信息进行审核,才能认证成功,用户表里面的字段auth_status字段会发生改变,0:未认证 1:认证中 2:认证成功

接下来做审核功能等一系列的功能

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/875.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

react的基础使用

react中为什么使用jsxReact 认为渲染逻辑本质上与其他 UI 逻辑内在耦合&#xff0c;比如&#xff0c;在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI&#xff0c;以及需要在 UI 中展示准备好的数据。react认为将业务代码和数据以及事件等等 需要和UI高度耦合…

竞赛无人机搭积木式编程——以2022年TI电赛送货无人机一等奖复现为例学习(7月B题)

在学习本教程前&#xff0c;请确保已经学习了前4讲中无人机相关坐标系知识、基础飞行控制函数、激光雷达SLAM定位条件下的室内定点控制、自动飞行支持函数、导航控制函数等入门阶段的先导教程。 同时用户在做二次开发自定义的飞行任务时&#xff0c;可以参照第5讲中2021年国赛植…

【uniapp小程序实战】—— 使用腾讯地图获取定位

文章目录&#x1f34d;前言&#x1f34b;正文1、首先看官网uni.getLocation(OBJECT)#注意2、腾讯位置服务平台申请密钥和下载SDK2.1 申请开发者秘钥2.2 开通webserviceAPI服务2.3 下载微信小程序JavaScriptSDK2.4 安全域名设置3、配置manifest.json文件4、示例代码展示4.1 引用…

面试重难点问题(C++)

持续更新&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 网络部分 1.问&#xff0c;四次挥手的过程&#xff0c;和双方状态变化&#xff1f; 挥手这前&#xff0c;两边都是established状态&#xff0c;客户端发起断开请求&#xff0c;向服务器发送fin请求&…

Docker6种网络配置详解,网络模式应该这么选

文章目录一、Bridge网络模式二、Host网络模式三、Overlay网络模式四、None网络模式五、Macvlan网络模式六、Ipvlan网络模式七、网络模式选择在Docker中&#xff0c;网络配置是一个重要的主题&#xff0c;因为容器需要与其他容器或外部网络进行通信。Docker提供了多种网络模式和…

注意下C语言整形提升

C语言整形提升 C语言整形提升是指在表达式中使用多种类型的数据时&#xff0c;编译器会自动将较小的类型转换为较大的类型&#xff0c;以便进行运算。在C语言中&#xff0c;整型提升规则如下&#xff1a; 如果表达式中存在short类型&#xff0c;则将其自动转换为int类型。 如…

【JavaEE】初识线程

一、简述进程认识线程之前我们应该去学习一下“进程" 的概念&#xff0c;我们可以把一个运行起来的程序称之为进程&#xff0c;进程的调度&#xff0c;进程的管理是由我们的操作系统来管理的&#xff0c;创建一个进程&#xff0c;操作系统会为每一个进程创建一个 PCB&…

C++之深浅拷贝

一、浅拷贝 我们看下以下代码 Test.h 文件 #pragma once #include<iostream> using namespace std; class Student { public:Student(){}~Student(){if (m_Id ! nullptr){delete m_Id;m_Id nullptr;}}Student(int id, string strName){m_Id new int[id];m_strName s…

字符函数和字符串函数(上)-C语言详解

CSDN的各位友友们你们好,今天千泽为大家带来的是C语言中字符函数和字符串函数的详解,掌握了这些内容能够让我们更加灵活的运用字符串,接下来让我们一起走进今天的内容吧!写这篇文章需要在cplusplus.com上大量截图,十分不易!如果对您有帮助的话希望能够得到您的支持和帮助,我会持…

信号处理-小波变换4-DWT离散小波变换概念及离散小波变换实现滤波

连续小波变换的适用场景&#xff1a;能够获取某一段信号的瞬时信息、时频信息 缺点&#xff1a;计算量大&#xff0c;无法进行数据压缩- 针对连续小波存在的缺点提出离散小波变换 离散小波变换 离散小波变换 分解过程&#xff1a;&#xff08;离散2进正交&#xff09; cD1: …

数据结构与算法——栈和队列<也不过如此>

&#x1f3c6;作者主页&#xff1a;king&南星 &#x1f384;专栏链接&#xff1a;数据结构 &#x1f3c5;文章目录一、&#x1f947;栈1、&#x1f948;概念理解2、&#x1f948;链表头插头删实现栈1、&#x1f949;预备准备2、&#x1f949;创建结点函数3、&#x1f949;遍…

SPI读写SD卡速度有多快?

SD卡是一个嵌入式中非常常用的外设&#xff0c;可以用于存储一些大容量的数据。但用单片机读写SD卡速度一般都有限&#xff08;对于高速SD卡&#xff0c;主要是受限于单片机本身的接口速度&#xff09;&#xff0c;在高速、实时数据存储时可能会有影响。但具体速度可以达到多少…

vue2+高德地图web端开发使用

创建vue2项目我们创建一个vue2项目&#xff0c;创建vue2项目就不用再多说了吧&#xff0c;使用“vue create 项目名 ”创建即可注册高德地图高德地图官网地址&#xff1a;https://lbs.amap.com/如果是第一次使用&#xff0c;点击注册然后进入我们的控制台注册完之后进入控制台&…

<Linux>计算机体系结构和操作系统

计算机体系结构(冯 • 诺依曼体系)和操作系统&#xff08;Operator System&#xff09; 文章目录计算机体系结构(冯 • 诺依曼体系)和操作系统&#xff08;Operator System&#xff09;一、冯 • 诺依曼体系结构1.存储器&#xff08;内存&#xff09;2.运算器和控制器&#xff…

系统重装漏洞

zzcms系统重装漏洞 一、配置zzcms环境 1. 使用小皮搭建zzcms框架 2. 安装zzcms 按照下面的操作进行,傻瓜式操作即可 3. 打开网站 二、漏洞利用 在访问install目录的默认文件后,会出现zzcms安装向导 http://www.zzcms.com/install/index.php 但是会显示 “安装向导…

HTTPS,SSL(对称加密和非对称加密详解)

上一篇博客&#xff08;HTTP详解_徐憨憨&#xff01;的博客-CSDN博客&#xff09;详细讲解了关于HTTP的知识&#xff0c;了解到HTTP协议下的数据传输是一种明文传输&#xff0c;既然是明文传输&#xff0c;可能导致在传输过程中出现一些被篡改的情况&#xff0c;此时就需要对所…

MATLAB | 给热图整点花哨操作(三角,树状图,分组图)

前段时间写的特殊热图绘制函数迎来大更新&#xff0c;基础使用教程可以看看这一篇&#xff1a; https://slandarer.blog.csdn.net/article/details/129292679 原本的绘图代码几乎完全不变&#xff0c;主要是增添了很多新的功能&#xff01;&#xff01;&#xff01; 工具函数完…

【链表OJ题(六)】链表分割

​ ​&#x1f4dd;个人主页&#xff1a;Sherry的成长之路 &#x1f3e0;学习社区&#xff1a;Sherry的成长之路&#xff08;个人社区&#xff09; &#x1f4d6;专栏链接&#xff1a;数据结构 &#x1f3af;长路漫漫浩浩&#xff0c;万事皆有期待 文章目录链表OJ题(六)1. 链表…

燕山大学-面向对象程序设计实验-实验三 类和对象—构造函数与析构函数-实验报告

CSDN的各位友友们你们好,今天千泽为大家带来的是燕山大学-面向对象程序设计实验-实验三 类和对象—构造函数与析构函数,接下来让我们一起进入c的神奇小世界吧,相信看完你也能写出自己的 实验报告!如果对您有帮助的话希望能够得到您的支持和帮助,我会持续更新的!&#x1f680;3.…

硬刚ChatGPT!文心一言能否为百度止颓?

引言&#xff1a;近年来&#xff0c;人工智能领域的发展突飞猛进&#xff0c;尤其是在自然语言处理&#xff08;NLP&#xff09;方面。OpenAI的ChatGPT无疑是这个领域的佼佼者[1]。那么&#xff0c;面对这样一款高度智能的AI模型&#xff0c;国内市场上是否有相应的产品能与之抗…
最新文章