YYGH-7-用户管理

最新推荐文章于 2024-07-10 21:37:49 发布

小赵呢

最新推荐文章于 2024-07-10 21:37:49 发布

阅读量455

点赞数

分类专栏：预约挂号项目文章标签： java spring boot 数据库

本文链接：https://blog.csdn.net/weixin_53227758/article/details/125394446

版权

预约挂号项目专栏收录该内容

28 篇文章 6 订阅

订阅专栏

对象存储

YYGH系统要增加一个用户认证的功能,需要把图片上传到服务器,考虑到未来的用户比较多我们现在实验云oss服务器。这里我选用的是七牛云,因为他有免费的10G额度。首先我们要先来配置七牛云。

配置七牛云

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qb2fiGhb-1655801593296)(C:\Users\86157\AppData\Local\Temp\1655794505598.png)]$

完成实名之后创建一个存储空间,为他配置好一个域名

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DXyFSjDC-1655801593298)(C:\Users\86157\AppData\Local\Temp\1655794682815.png)]$

正好我在阿里云上有一个域名,于是准备把一个二级域名给他cdn.zhaodapiaoliang.top

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OoU1AFyr-1655801593299)(C:\Users\86157\AppData\Local\Temp\1655794772126.png)]$

这样我们的七牛云就配置好了

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-74sCsaXZ-1655801593299)(C:\Users\86157\AppData\Local\Temp\1655794810823.png)]$

测试一下上传文件,没有问题[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 $(img-Y3EwzcnP-1655801593300)(C:\Users\86157\AppData\Local\Temp\1655794843969.png)]$

下面我们就需要用springboot控制上传

这是官方的SDK

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QrOstf3K-1655801593301)(C:\Users\86157\AppData\Local\Temp\1655796488513.png)]$

先导入依赖

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WwnltLkE-1655801593302)(C:\Users\86157\AppData\Local\Temp\1655796549767.png)]$

进行简单的上传操作

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JhDlvtBC-1655801593302)(C:\Users\86157\AppData\Local\Temp\1655796592927.png)]$

这是官方给我们的文件上传文档

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8dXEnuXa-1655801593303)(C:\Users\86157\AppData\Local\Temp\1655796694536.png)]$

Java SDK_SDK 下载_对象存储 - 七牛开发者中心 (qiniu.com)

建立service-oss服务

导入依赖

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>
    <dependency>
        <groupId>com.google.code.gson</groupId>
        <artifactId>gson</artifactId>
    </dependency>
    <dependency>
        <groupId>joda-time</groupId>
        <artifactId>joda-time</artifactId>
    </dependency>
    <dependency>
        <groupId>com.qiniu</groupId>
        <artifactId>qiniu-java-sdk</artifactId>
        <version>7.11.0</version>
    </dependency>
</dependencies>

配置文件

# ????
server.port=8205
# ???
spring.application.name=service-oss

# ?????dev?test?prod
spring.profiles.active=dev

#??json???????
spring.jackson.date-format=yyyy-MM-dd HH:mm:ss
spring.jackson.time-zone=GMT+8

# nacos????
spring.cloud.nacos.discovery.server-addr=127.0.0.1:8848

# 七牛云配置文档
qiniuyun.access-key=???
qiniuyun.secret-key=???
qiniuyun.bucket=xiaolanlan
qiniuyun.domain=cdn.zhaodapiaoliang.top

spring.servlet.multipart.max-file-size=10MB
spring.servlet.multipart.max-request-size=10MB

配置类加载配置文件中的参数

@Component
@Data
public class qiNiuYunConfig implements InitializingBean {

    @Value("${qiniuyun.access-key}")
    private String accessKey;

    @Value("${qiniuyun.secret-key}")
    private String secretKey;

    @Value("${qiniuyun.bucket}")
    private String Bucket;

    @Value("${qiniuyun.domain}")
    private String Domain;

    public static String ACCESS_KET;
    public static String SECRET_KET;
    public static String BUCKET;
    public static String DOMAIN;
    @Override
    public void afterPropertiesSet() throws Exception {
        ACCESS_KET = accessKey;
        SECRET_KET = secretKey;
        BUCKET = Bucket;
        DOMAIN = Domain;
    }
}

下载操作service

@Service
@Slf4j
public class FileSerivceImpl implements FileService {
    @Autowired
    private qiNiuYunConfig qiniuyun;

    @Override
    public String uplodad(MultipartFile file) {

        //构造一个带指定 Region 对象的配置类
        Configuration cfg = new Configuration(Region.region1());
        UploadManager uploadManager = new UploadManager(cfg);
        //默认不指定key的情况下，以文件内容的hash值作为文件名
        String key = null;
        try {
            Auth auth = Auth.create(qiniuyun.getAccessKey(), qiniuyun.getSecretKey());
            String upToken = auth.uploadToken(qiniuyun.getBucket());

            try {
                log.info(file.getOriginalFilename());
                String uuid = UUID.randomUUID().toString().replace("-", "");
                String fileName = uuid + file.getOriginalFilename();
                String timeUrl = new DateTime().toString("yyyy/MM/dd");
                fileName = timeUrl + "/" + fileName;
                Response response = uploadManager.put(file.getInputStream(), fileName, upToken, null, null);
                //解析上传成功的结果
                DefaultPutRet putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class);
                log.info("http://" + qiniuyun.getDomain() + "/" + putRet.key);
                return "http://" + qiniuyun.getDomain() + "/" + putRet.key;
            } catch (QiniuException ex) {
                Response r = ex.response;
                System.err.println(r.toString());
                try {
                    System.err.println(r.bodyString());
                } catch (QiniuException ex2) {
                    //ignore
                }
            }
        } catch (UnsupportedEncodingException ex) {
            //ignore
        } catch (IOException e) {
            throw new RuntimeException(e);
        }

        return null;
    }
}

controller

@RestController
@RequestMapping("/api/oss/file")
public class FileApiController {

    @Autowired
    private FileService fileService;

    //上传文件到阿里云oss
    @PostMapping("fileUpload")
    public Result fileUpload(MultipartFile file){
        String url = fileService.uplodad(file);
        return Result.ok(url);
    }
}

这样就可以进行上传身份证操作了

用户认证

用户登录成功后都要进行身份认证，认证通过后才可以预约挂号

认证过程：用户填写信息（姓名、证件类型、证件号码和证件照片）==> 平台审批

用户认证设计接口：

1、提交认证

2、上传证件图片

3、获取提交认证信息

Controller

//用户认证接口
@PostMapping("auth/authAuth")
public Result userAuth(@RequestBody UserAuthVo userAuthVo, HttpServletRequest request) {
    //在方法中传入两个参数,用户id和认证数据的ovid
    userInfoService.userAuth(AuthContextHolder.getUserId(request), userAuthVo);
    return Result.ok();
}

//获取用户id信息接口
@GetMapping("auth/getUserInfo")
public Result getUserInfo(HttpServletRequest request) {
    //在方法中传入两个参数,用户id和认证数据的ovid
    UserInfo byId = userInfoService.getById(AuthContextHolder.getUserId(request));
    return Result.ok(byId);
}

Service

@Override
public void userAuth(Long userId, UserAuthVo userAuthVo) {
    //根据用户id查询用户信息
    UserInfo userInfo = baseMapper.selectById(userId);
    //设置认证信息
    BeanUtils.copyProperties(userAuthVo, userInfo);
    userInfo.setAuthStatus(AuthStatusEnum.AUTH_RUN.getStatus());
    //进行更新
    baseMapper.updateById(userInfo);
}

获取当前用户的工具类用于我们的当前用户是存放到token中,我们要从token中取出来

//获取当前用户信息的工具类
public class AuthContextHolder {

    //获取当前用户的id
    public static Long getUserId(HttpServletRequest request){
        String token = request.getHeader("token");
        //从jwt中获取userid
        Long userId = JwtHelper.getUserId(token);
        return userId;
    }

    //获取当前用户名称
    public static String getUserName(HttpServletRequest request){
        String token = request.getHeader("token");
        //从jwt中获取userid
        String userName = JwtHelper.getUserName(token);
        return userName;
    }
}

前端

在/api/userInfo.js添加方法

getUserInfo() {
return request({
  url: `${api_name}/auth/getUserInfo`,
  method: `get`
})
},

saveUserAuah(userAuah) {
  return request({
    url: `${api_name}/auth/userAuah`,
    method: 'post',
    data: userAuah
  })
}

创建/pages/user/index.vue组件

<template>
  <!-- header -->
  <div class="nav-container page-component">
    <!--左侧导航 #start -->
    <div class="nav left-nav">
      <div class="nav-item selected">
        <span class="v-link selected dark" onclick="javascript:window.location='/user'">实名认证 </span>
      </div>
      <div class="nav-item">
        <span class="v-link selected dark" onclick="javascript:window.location='/order'"> 挂号订单 </span>
      </div>
      <div class="nav-item ">
        <span class="v-link clickable 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>
        <div class="title"> 实名认证</div>
        <div class="status-bar">
          <div class="status-wrapper"><span class="iconfont"></span>{{ userInfo.param.authStatusString }}</div>
        </div>
        <div class="tips"><span class="iconfont"></span>
          完成实名认证后才能添加就诊人，正常进行挂号，为了不影响后续步骤，建议提前实名认证。
        </div>
        <div class="form-wrapper" v-if="userInfo.authStatus == 0">
          <div>
            <el-form :model="userAuah" label-width="110px" label-position="left">
              <el-form-item prop="name" label="姓名：" class="form-normal">
                <div class="name-input">
                  <el-input v-model="userAuah.name" placeholder="请输入联系人姓名全称" class="input v-input"/>
                </div>
              </el-form-item>
              <el-form-item prop="certificatesType" label="证件类型：">
                <el-select v-model="userAuah.certificatesType" placeholder="请选择证件类型" class="v-select patient-select">
                  <el-option
                    v-for="item in certificatesTypeList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.name">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="certificatesNo" label="证件号码：">
                <el-input v-model="userAuah.certificatesNo" placeholder="请输入联系人证件号码" class="input v-input"/>
              </el-form-item>
              <el-form-item prop="name" label="上传证件：">
                <div class="upload-wrapper">
                  <div class="avatar-uploader">
                    <el-upload
                      class="avatar-uploader"
                      :action="fileUrl"
                      :show-file-list="false"
                      :on-success="onUploadSuccess">
                      <div class="upload-inner-wrapper">
                        <img v-if="userAuah.certificatesUrl" :src="userAuah.certificatesUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        <div v-if="!userAuah.certificatesUrl" class="text"> 上传证件合照</div>
                      </div>
                    </el-upload>
                  </div>
                  <img src="//img.114yygh.com/static/web/auth_example.png" class="example">
                </div>
              </el-form-item>
            </el-form>
            <div class="bottom-wrapper">
              <div class="button-wrapper">
                <div class="v-button" @click="saveUserAuah()">{{ submitBnt }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="context-container" v-if="userInfo.authStatus != 0">
          <div>
            <el-form :model="formData" label-width="110px" label-position="right">
              <el-form-item prop="name" label="姓名：" class="form-normal">
                <div class="name-input">
                  {{ userInfo.name }}
                </div>
              </el-form-item>
              <el-form-item prop="name" label="证件类型：">
                {{ userInfo.certificatesType }}
              </el-form-item>
              <el-form-item prop="name" label="证件号码：">
                {{ userInfo.certificatesNo }}
              </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 dictApi from '@/api/dict'
import userInfoApi from '@/api/userInfo'
const defaultForm = {
  name: '',
  certificatesType: '',
  certificatesNo: '',
  certificatesUrl: ''
}
export default {
  data() {
    return {
      userAuah: defaultForm,
      certificatesTypeList: [],
      fileUrl:'http://localhost/api/oss/file/fileUpload',
      userInfo: {
        param: {}
      },
      submitBnt: '提交'
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.getUserInfo()
      this.getDict()
    },
    getUserInfo() {
      userInfoApi.getUserInfo().then(response => {
        this.userInfo = response.data
      })
    },
    saveUserAuah() {
      if(this.submitBnt == '正在提交...') {
        this.$message.info('重复提交')
        return
      }
      this.submitBnt = '正在提交...'
      userInfoApi.saveUserAuth(this.userAuah).then(response => {
        this.$message.success("提交成功")
        window.location.reload()
      }).catch(e => {
        this.submitBnt = '提交'
      })
    },
    getDict() {
      dictApi.findByDictCode("CertificatesType").then(response => {
        this.certificatesTypeList = response.data
      })
    },
    onUploadSuccess(response, file) {
      if(response.code !== 200) {
        this.$message.error("上传失败")
        return
      }
      // 填充上传文件列表
      this.userAuah.certificatesUrl = file.response.data
    }
  }
}
</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;
  }
  .page-container .title {
    letter-spacing: 1px;
    font-weight: 700;
    color: #333;
    font-size: 16px;
    margin-top: 0;
    margin-bottom: 20px;
  }
  .page-container .tips {
    width: 100%;
    padding-left: 0;
  }
  .page-container .form-wrapper {
    padding-left: 92px;
    width: 580px;
  }
  .form-normal {
    height: 40px;
  }
  .bottom-wrapper{
    width: 100%;
    padding: 0;
    margin-top: 0;
  }
</style>

如果要预约挂号，我们必须要认证通过后才可以，所以我们在预约挂号前要做认证判断，如果没有认证通过，则跳转到认证页面

修改/pages/hospital/_hoscode.vue组件

import userInfoApi from '@/api/userInfo'
schedule(depcode) {
  // 登录判断
  let token = cookie.get('token')
  if (!token) {
    loginEvent.$emit('loginDialogEvent')
    return
  }

  //判断认证
  userInfoApi.getUserInfo().then(response => {
    let authStatus = response.data.authStatus
    // 状态为2认证通过
    if (!authStatus || authStatus != 2) {
      window.location.href = '/user'
      return
    }
  })

  window.location.href = '/hospital/schedule?hoscode=' + this.hospital.hoscode + "&depcode="+ depcode
},

$(img-68DsXsXJ-1655801593303)(C:\Users\86157\AppData\Local\Temp\1655798204760.png)]$

就诊人管理

预约下单需要选择就诊人，因此我们要实现就诊人管理，前端就诊人管理其实就是要实现一个完整的增删改查

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BpjWj92f-1655801593304)(C:\Users\86157\AppData\Local\Temp\1655798217783.png)]$

我们的前端页面有这个路径,这次我们先从前端开始写起

创建/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'
        })
    }
}

添加/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" οnclick="javascript:window.location='/user'">实名认证 </span>
                </div>
                <div class="nav-item ">
                <span class="v-link clickable dark" οnclick="javascript:window.location='/order'"> 挂号订单 </span>
                </div>
                <div class="nav-item selected">
                <span class="v-link selected dark" οnclick="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>

添加/pages/patient/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" οnclick="javascript:window.location='/user'">实名认证 </span>
            </div>
            <div class="nav-item ">
                <span class="v-link clickable dark" οnclick="javascript:window.location='/order'"> 挂号订单 </span>
            </div>
            <div class="nav-item selected">
                <span class="v-link selected dark" οnclick="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) {
                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>

添加/pages/patient/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" οnclick="javascript:window.location='/user'">实名认证 </span>
      </div>
      <div class="nav-item ">
        <span class="v-link clickable dark" οnclick="javascript:window.location='/order'"> 挂号订单 </span>
      </div>
      <div class="nav-item selected">
        <span class="v-link selected dark" οnclick="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: {
    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'
      })
    },
    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>

api接口

Controller

@RestController
@RequestMapping("/api/user/patient")
public class PatientApiController {

    @Autowired
    private PatientService patientService;

    //获取就诊人列表
    @GetMapping("/auth/findAll")
    public Result findAll(HttpServletRequest request) {
        //获取当前登录用户的id值
        List<Patient> patients = patientService.findAllByUserId(AuthContextHolder.getUserId(request));
        return Result.ok(patients);
    }

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

    //根据id获取就诊人信息
    @GetMapping("/auth/get/{id}")
    public Result findByid(@PathVariable("id") Long id){
        Patient patientId = patientService.getPatientId(id);
        return Result.ok(patientId);
    }

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

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

Service

public interface PatientService extends IService<Patient> {
    //根据userid获取病人列表
    List<Patient> findAllByUserId(Long userId);

    Patient getPatientId(Long id);
}

Service实现类

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

    @Autowired
    private DictFeignClient dictFeignClient;

    @Override
    public List<Patient> findAllByUserId(Long userId) {
        //根据userid查询所有就诊人信息列表
        QueryWrapper<Patient> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("user_id", userId);
        List<Patient> patients = baseMapper.selectList(queryWrapper);
        //通过远程调用得到编码对应的具体内容
        patients.stream().forEach(item -> {
            this.packPatient(item);
        });
        return patients;
    }

    @Override
    public Patient getPatientId(Long id) {
        Patient patient = baseMapper.selectById(id);
        this.packPatient(patient);
        return patient;
    }


    //Patient其他参数的封装
    public 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;

    }

}

Mapper

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

}

平台用户管理

前面我们完成了用户认证的客户端操作,现在我们需要在我们的YYGH-admin处管理处添加关于这些操作

用户列表

API

//用户列表(条件查询带分页)
@GetMapping("{page}/{limit}")
public Result list(@PathVariable Long page,
                   @PathVariable Long limit,
                   UserInfoQueryVo userInfoQueryVo) {
    Page<UserInfo> pageParams = new Page<>(page, limit);
    IPage<UserInfo> pageModel = userInfoService.selectPage(pageParams, userInfoQueryVo);
    return Result.ok(pageModel);
}

//用户列表(条件查询带分页)
@Override
public IPage<UserInfo> selectPage(Page<UserInfo> pageParams, UserInfoQueryVo userInfoQueryVo) {
    //UserInfoQueryVo获取条件值
    String name = userInfoQueryVo.getKeyword();//用户名称
    Integer status = userInfoQueryVo.getStatus();//用户状态
    Integer authStatus = userInfoQueryVo.getAuthStatus();//认证状态
    String createTimeBegin = userInfoQueryVo.getCreateTimeBegin();//开始时间
    String createTimeEnd = userInfoQueryVo.getCreateTimeEnd();//结束时间
    //对条件值进行判断
    QueryWrapper<UserInfo> queryWrapper = new QueryWrapper<>();
    if (!StringUtils.isEmpty(name)) {
        queryWrapper.like("name", name);
    }
    if (!StringUtils.isEmpty(status)) {
        queryWrapper.eq("status", status);
    }
    if (!StringUtils.isEmpty(authStatus)) {
        queryWrapper.eq("auth_status", authStatus);
    }
    if (!StringUtils.isEmpty(createTimeBegin)) {
        queryWrapper.ge("create_time", createTimeBegin);
    }
    if (!StringUtils.isEmpty(createTimeEnd)) {
        queryWrapper.le("create_time", createTimeEnd);
    }
    //调用mapper中的方法
    Page<UserInfo> pages = baseMapper.selectPage(pageParams, queryWrapper);
    //编号变成对应的值
    pages.getRecords().stream().forEach(item -> {
        this.packageUserInfo(item);
    });
    return pages;
}

前端

在 src/router/index.js 文件添加路由

  {
    path: '/user',
    component: Layout,
    redirect: '/user/userInfo/list',
    name: 'userInfo',
    meta: { title: '用户管理', icon: 'table' },
    alwaysShow: true,
    children: [
      {
        path: 'userInfo/list',
        name: '用户列表',
        component: () =>import('@/views/user/userInfo/list'),
        meta: { title: '用户列表', icon: 'table' }
      }
    ]
  },

创建/api/user/userInfo.js

import request from '@/utils/request'

const api_name = '/admin/user'

export default {

 getPageList(page, limit, searchObj) {
  return request({
    url: `${api_name}/${page}/${limit}`,
    method: 'get',
    params: searchObj
  })
 }
}

创建/views/user/userInfo/list.vue组件

<template>
    <div class="app-container">
        <!--查询表单-->
        <el-form  :inline="true" class="demo-form-inline">
            <el-form-item>
                <el-input v-model="searchObj.keyword" placeholder="姓名/手机"/>
            </el-form-item>

            <el-form-item  label="创建时间">
                <el-date-picker
                v-model="searchObj.createTimeBegin"
                type="datetime"
                placeholder="选择开始时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                default-time="00:00:00"
                />
            </el-form-item>
            至
            <el-form-item>
                <el-date-picker
                v-model="searchObj.createTimeEnd"
                type="datetime"
                placeholder="选择截止时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                default-time="00:00:00"
                />
            </el-form-item>

            <el-button type="primary" icon="el-icon-search" @click="fetchData()">查询</el-button>
            <el-button type="default" @click="resetData()">清空</el-button>
        </el-form>

        <!-- 列表 -->
        <el-table
        v-loading="listLoading"
        :data="list"
        stripe
            style="width: 100%">

            <el-table-column
            label="序号"
            width="70"
            align="center">
                <template slot-scope="scope">
                        {{ (page - 1) * limit + scope.$index + 1 }}
                </template>
            </el-table-column>

            <el-table-column prop="phone" label="手机号"/>
            <el-table-column prop="nickName" label="昵称"/>
            <el-table-column prop="name" label="姓名"/>
            <el-table-column label="状态" prop="param.statusString"/>
            <el-table-column label="认证状态" prop="param.authStatusString"/>
            <el-table-column prop="createTime" label="创建时间"/>

            <el-table-column label="操作" width="200" align="center">
            </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <el-pagination
        :current-page="page"
        :total="total"
        :page-size="limit"
        :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
        style="padding: 30px 0; text-align: center;"
        layout="sizes, prev, pager, next, jumper, ->, total, slot"
        @current-change="fetchData"
        @size-change="changeSize"
        />
    </div>
</template>
<script>
import userInfoApi from '@/api/userInfo'
export default {
    // 定义数据
    data() {
        return {
            listLoading: true, // 数据是否正在加载
            list: null, // banner列表
            total: 0, // 数据库中的总记录数
            page: 1, // 默认页码
            limit: 10, // 每页记录数
            searchObj: {} // 查询表单对象
        }
    },
    // 当页面加载时获取数据
    created() {
        this.fetchData()
    },
    methods: {
    // 调用api层获取数据库中的数据
    fetchData(page = 1) {
        console.log('翻页。。。' + page)
        // 异步获取远程数据（ajax）
        this.page = page
            userInfoApi.getPageList(this.page, this.limit, this.searchObj).then(
                response => {
                this.list = response.data.records
                this.total = response.data.total
                // 数据加载并绑定成功
                this.listLoading = false
            }
        )
    },
    // 当页码发生改变的时候
    changeSize(size) {
        console.log(size)
        this.limit = size
        this.fetchData(1)
    },
    // 重置查询表单
    resetData() {
        console.log('重置查询表单')
        this.searchObj = {}
        this.fetchData()
    }
  }
}
</script>

锁定

api

//用户锁定
@GetMapping("lock/{userId}/{status}")
public Result lock(@PathVariable Long userId, @PathVariable Integer status) {
    userInfoService.lock(userId, status);
    return Result.ok();
}

//用户锁定
@Override
public void lock(Long userId, Integer status) {
    if (status.intValue() == 0 || status.intValue() == 1) {
        UserInfo userInfo = baseMapper.selectById(userId);
        userInfo.setStatus(status);
        baseMapper.updateById(userInfo);
    }
}

前端

在/api/user/userInfo.js文件添加方法

  lock(id, status) {
    return request({
      url: `${api_name}/lock/${id}/${status}`,
      method: 'get'
    })
  }

修改/views/user/userInfo/list.vue组件

<el-table-column label="操作" width="200" align="center">
    <template slot-scope="scope">
        <el-button v-if="scope.row.status == 1" type="primary" size="mini" @click="lock(scope.row.id, 0)">锁定</el-button>
        <el-button v-if="scope.row.status == 0" type="danger" size="mini" @click="lock(scope.row.id, 1)">取消锁定</el-button>
    </template>
</el-table-column>

添加方法

// 锁定
lock(id, status) {
    this.$confirm('确定该操作吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
        }).then(() => { // promise
            // 点击确定，远程调用ajax
            return userInfoApi.lock(id, status)
        }).then((response) => {
            this.fetchData(this.page)
            if (response.code) {
                this.$message({
                type: 'success',
                message: '操作成功!'
            })
        }
    })
}

详情

api

//详情
@GetMapping("show/{userId}")
public Result show(@PathVariable Long userId) {
    Map<String, Object> map = userInfoService.show(userId);
    return Result.ok(map);
}

@Override
public Map<String, Object> show(Long userId) {
    Map<String, Object> map = new HashMap<>();
    //根据userid查询基本信息
    UserInfo userInfo = this.packageUserInfo(baseMapper.selectById(userId));
    map.put("userInfo", userInfo);
    //根据userid查询就诊人信息
    List<Patient> allByUserId = patientService.findAllByUserId(userId);
    map.put("patientList", allByUserId);
    return map;
}

前端

添加路由

 {
    path: '/user',
    component: Layout,
    redirect: '/user/userInfo/list',
    name: 'userInfo',
    meta: { title: '用户管理', icon: 'table' },
    alwaysShow: true,
    children: [
      {
        path: 'userInfo/list',
        name: '用户列表',
        component: () =>import('@/views/user/userInfo/list'),
        meta: { title: '用户列表', icon: 'table' }
      },
      {
        path: 'userInfo/show/:id',
        name: '用户查看',
              component: () =>import('@/views/user/userInfo/show'),
        meta: { title: '用户查看' },
        hidden: true
      }
    ]
  },

在/api/user/userInfo.js文件添加方法

//用户详情
show(id) {
  return request({
    url: `${api_name}/show/${id}`,
    method: 'get'
  })
}

修改列表组件

<el-table-column label="操作" width="200" align="center">
    <template slot-scope="scope">
        <router-link :to="'/user/userInfo/show/'+scope.row.id">
            <el-button type="primary" size="mini">查看</el-button>
        </router-link>
        <el-button v-if="scope.row.status == 1" type="primary" size="mini" @click="lock(scope.row.id, 0)">锁定</el-button>
        <el-button v-if="scope.row.status == 0" type="danger" size="mini" @click="lock(scope.row.id, 1)">取消锁定</el-button>
    </template>
</el-table-column>

添加/views/user/userInfo/show.vue组件

<template>
    <div class="app-container">
        <h4>用户信息</h4>
        <table class="table table-striped table-condenseda table-bordered" width="100%">
        <tbody>
            <tr>
                <th width="15%">手机号</th>
                <td width="35%"><b>{{ userInfo.phone }}</b></td>
                <th width="15%">用户姓名</th>
                <td width="35%">{{ userInfo.name }}</td>
            </tr>
        <tr>
            <th>状态</th>
            <td>{{ userInfo.status == 0 ? '锁定' : '正常' }}</td>
            <th>注册时间</th>
            <td>{{ userInfo.createTime }}</td>
        </tr>
        </tbody>
        </table>
        <h4>认证信息</h4>
        <table class="table table-striped table-condenseda table-bordered" width="100%">
            <tbody>
            <tr>
                <th width="15%">姓名</th>
                <td width="35%"><b>{{ userInfo.name }}</b></td>
                <th width="15%">证件类型</th>
                <td width="35%">{{ userInfo.certificatesType }}</td>
            </tr>
            <tr>
                <th>证件号</th>
                <td>{{ userInfo.certificatesNo }}</td>
                <th>证件图片</th>
                <td><img :src="userInfo.certificatesUrl" width="80px"></td>
            </tr>
            </tbody>
        </table>
    <h4>就诊人信息</h4>
    <el-table
        v-loading="listLoading"
        :data="patientList"
        stripe
            style="width: 100%">
        <el-table-column
        label="序号"
        width="70"
        align="center">
        <template slot-scope="scope">
                {{ scope.$index + 1 }}
        </template>
        </el-table-column>

        <el-table-column prop="name" label="姓名"/>
        <el-table-column prop="param.certificatesTypeString" label="证件类型"/>
        <el-table-column prop="certificatesNo" label="证件编号"/>
        <el-table-column label="性别">
        <template slot-scope="scope">
                {{ scope.row.sex == 1 ? '男' : '女' }}
        </template>
        </el-table-column>
        <el-table-column prop="birthdate" label="出生年月"/>
        <el-table-column prop="phone" label="手机"/>
        <el-table-column label="是否结婚">
        <template slot-scope="scope">
                {{ scope.row.isMarry == 1 ? '时' : '否' }}
        </template>
    </el-table-column>
    <el-table-column prop="fullAddress" label="地址"/>
    <el-table-column prop="createTime" label="注册时间"/>
    </el-table>
    <br>
    <el-row>
    <el-button  @click="back">返回</el-button>
    </el-row>
    </div>
</template>
<script>
import userInfoApi from '@/api/userInfo'
export default {
    // 定义数据
    data() {
        return {
            id: this.$route.params.id,
            userInfo: {}, // 会员信息
            patientList: [] // 就诊人列表
        }
    },
    // 当页面加载时获取数据
    created() {
        this.fetchDataById()
    },
    methods: {
        // 根据id查询会员记录
        fetchDataById() {
            userInfoApi.show(this.id).then(response => {
                this.userInfo = response.data.userInfo
                this.patientList = response.data.patientList
            })
        },
        back() {
            window.history.back(-1)
        }
    }
}
</script>

用户认证列表

前端

{
  path: 'userInfo/authList',
  name: '认证审批列表',
        component: () =>import('@/views/user/userInfo/authList'),
  meta: { title: '认证审批列表', icon: 'table' }
}

添加/views/user/userInfo/authList.vue组件

<template>
    <div class="app-container">
        <!--查询表单-->
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
                <el-input v-model="searchObj.keyword" placeholder="姓名/手机"/>
            </el-form-item>

            <el-form-item label="创建时间">
                <el-date-picker
                    v-model="searchObj.createTimeBegin"
                    type="datetime"
                    placeholder="选择开始时间"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    default-time="00:00:00"
                    />
            </el-form-item>
            至
            <el-form-item>
                <el-date-picker
                    v-model="searchObj.createTimeEnd"
                    type="datetime"
                    placeholder="选择截止时间"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    default-time="00:00:00"
                    />
            </el-form-item>

            <el-button type="primary" icon="el-icon-search" @click="fetchData()">查询</el-button>
            <el-button type="default" @click="resetData()">清空</el-button>
        </el-form>

        <!-- 列表 -->
        <el-table
        v-loading="listLoading"
        :data="list"
        stripe
            style="width: 100%">

            <el-table-column
            label="序号"
            width="70"
            align="center">
                <template slot-scope="scope">
                        {{ (page - 1) * limit + scope.$index + 1 }}
                </template>
            </el-table-column>

            <el-table-column prop="name" label="姓名"/>
            <el-table-column prop="certificatesType" label="证件类型"/>
            <el-table-column prop="certificatesNo" label="证件号"/>
            <el-table-column prop="createTime" label="创建时间"/>

            <el-table-column label="操作" width="250" align="center">
                <template slot-scope="scope">
                    <router-link :to="'/user/userInfo/show/'+scope.row.id">
                        <el-button type="primary" size="mini">查看</el-button>
                    </router-link>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <el-pagination
            :current-page="page"
            :total="total"
            :page-size="limit"
            :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
            style="padding: 30px 0; text-align: center;"
            layout="sizes, prev, pager, next, jumper, ->, total, slot"
            @current-change="fetchData"
            @size-change="changeSize"
            />
    </div>
</template>
<script>
import userInfoApi from '@/api/userInfo'

export default {

// 定义数据
data() {
    return {
        listLoading: true, // 数据是否正在加载
        list: null, // banner列表
        total: 0, // 数据库中的总记录数
        page: 1, // 默认页码
        limit: 10, // 每页记录数
        searchObj: {
            authStatus: 1
        } // 查询表单对象
    }
},

// 当页面加载时获取数据
created() {
    this.fetchData()
},

methods: {
    // 调用api层获取数据库中的数据
    fetchData(page = 1) {
        console.log('翻页。。。' + page)
        // 异步获取远程数据（ajax）
        this.page = page
        userInfoApi.getPageList(this.page, this.limit, this.searchObj).then(
                response => {
            this.list = response.data.records
            this.total = response.data.total
            // 数据加载并绑定成功
            this.listLoading = false
        }
      )
    },

    // 当页码发生改变的时候
    changeSize(size) {
        console.log(size)
        this.limit = size
        this.fetchData(1)
    },

    // 重置查询表单
    resetData() {
        console.log('重置查询表单')
        this.searchObj = {}
        this.fetchData()
    }
  }
}
</script>

用户认证审批

api

//认证审批
@GetMapping("approval/{userId}/{authStatus}")
public Result approval(@PathVariable Long userId, @PathVariable Integer authStatus) {
    userInfoService.approval(userId, authStatus);
    return Result.ok();
}

//认证审批  2通过  -1不通过
@Override
public void approval(Long userId, Integer authStatus) {
    if (authStatus.intValue() == 2 || authStatus.intValue() == -1) {
        UserInfo userInfo = baseMapper.selectById(userId);
        userInfo.setAuthStatus(authStatus);
        baseMapper.updateById(userInfo);
    }
}

前端

在/api/userInfo.js文件添加方法

//认证审批
approval(id, authStatus) {
  return request({
    url: `${api_name}/approval/${id}/${authStatus}`,
    method: 'get'
  })
}

修改/views/user/userInfo/authList.vue组件

<el-table-column label="操作" width="250" align="center">
    <template slot-scope="scope">
        <router-link :to="'/user/userInfo/show/'+scope.row.id">
            <el-button type="primary" size="mini">查看</el-button>
        </router-link>
        <el-button type="primary" size="mini" @click="approval(scope.row.id, 2)">通过</el-button>
        <el-button type="danger" size="mini" @click="approval(scope.row.id, -1)">不通过</el-button>
    </template>
</el-table-column>

添加方法

// 审批
approval(id, authStatus) {
    // debugger
    this.$confirm('确定该操作吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => { // promise
            // 点击确定，远程调用ajax
        return userInfoApi.approval(id, authStatus)
    }).then((response) => {
        this.fetchData(this.page)
        if (response.code) {
            this.$message({
                type: 'success',
                message: '操作成功!'
            })
        }
    })
}

小赵呢

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
YYGH-7-用户管理

YYGH系统要增加一个用户认证的功能,需要把图片上传到服务器,考虑到未来的用户比较多我们现在实验云oss服务器。这里我选用的是七牛云,因为他有免费的10G额度。首先我们要先来配置七牛云。完成实名之后创建一个存储空间,为他配置好一个域名正好我在阿里云上有一个域名,于是准备把一个二级域名给他cdn.zhaodapiaoliang.top这样我们的七牛云就配置好了测试一下上传文件,我们就需要用springboot控制上传这是官方的SD...
复制链接

扫一扫