2023-07-21 17:17

关注

尚医通项目（下）

尚医通是采用Vue3全家桶、TypeScript、Vite、Pinia、Element-plus等技术栈开发的在线医疗服务平台，集成了多家医院的挂号信息，提供全程跟踪服务，用户可以随时了解自己的挂号状态。

21、挂号订单

21、1 挂号订单静态搭建

<template>
  <!-- 展示全部订单的结构 -->
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>挂号订单</span>
      </div>
    </template>
    <!-- 提供用户选择的下拉菜单 -->
    <el-form :inline="true">
      <el-form-item label="就诊人">
        <!-- 修正拼写错误 -->
        <el-select placeholder="请选择就诊人">
          <el-option label="网易云"></el-option>
          <el-option label="网易云"></el-option>
          <el-option label="网易云"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="订单状态">
        <!-- 修正拼写错误 -->
        <el-select placeholder="请选择所有订单状态">
          <el-option label="网易云"></el-option>
          <el-option label="网易云"></el-option>
          <el-option label="网易云"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <!-- 表格展示订单数据 -->
    <el-table border style="margin: 10px 0px">
      <el-table-column label="就诊时间"></el-table-column>
      <el-table-column label="医院"></el-table-column>
      <el-table-column label="科室"></el-table-column>
      <el-table-column label="医生"></el-table-column>
      <el-table-column label="服务费"></el-table-column>
      <el-table-column label="就诊人"></el-table-column>
      <el-table-column label="订单状态"></el-table-column>
      <el-table-column label="操作"></el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      v-model:current-page="pageNo"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 30, 40]"
      :background="true"
      layout=" prev, pager, next, jumper,->,total, sizes"
      :total="400"
    />
  </el-card>
</template>

<script setup lang="ts">
import { ref } from "vue";
// 当前分页器页码
let pageNo = ref<number>(1);
// 当前页码展示几条数据
let pageSize = ref<number>(10);
</script>

<style scoped lang="scss"></style>

21、获取挂号订单数据（表单-----重要---典型）

效果

接口

获取订单的方法

分页器：切换页码时，数据也更新方法一：

方法二：

展示数据

点击详情

分页器下拉菜单的回调

21.1 下拉菜单获取数据

接口

获取数据

22、就诊人管理

22.1、就诊人管理静态搭建

引入Visitor组件先注册为全局组件

完整代码：

<template>
  <!-- 就诊人组件结构 -->
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>就诊人管理</span>
        <el-button class="button" type="success" :icon="User"
          >添加就诊人</el-button
        >
      </div>
    </template>
    <!-- 就诊人管理模块展示就诊人信息 -->
    <div class="visitors">
      <Visitor
        class="item"
        v-for="(user, index) in userArr"
        :key="user.id"
        :user="user"
        :index="index"
      />
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { User } from "@element-plus/icons-vue";
import { reqGetUser } from "@/api/hospital";
import { onMounted, ref } from "vue";
import type { UserResponseData, UserArr } from "@/api/hospital/type";

// 存储全部就诊人信息
let userArr = ref<UserArr>([]);

// 组件挂载完毕获取一次就诊人信息
onMounted(() => {
  // 获取就诊人信息
  getAllUse();
});

// 获取全部就诊人信息
const getAllUse = async () => {
  let result: UserResponseData = await reqGetUser();
  // console.log(result);
  if ((result.code = 200)) {
    userArr.value = result.data;
  }
};
</script>

<style scoped lang="scss">
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.visitors {
  display: flex;
  flex-wrap: wrap;
  .item {
    width: 32%;
    margin: 5px;
  }
}
</style>

22.1、添加就诊人管理

点击编辑或者添加，进入就诊人管理页面

完整代码：

<template>
  <!-- 就诊人组件结构 -->
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>就诊人管理</span>
        <el-button class="button" type="success" :icon="User" @click="addUser"
          >添加就诊人</el-button
        >
      </div>
    </template>
    <!-- 就诊人管理模块展示就诊人信息 -->
    <div class="visitors" v-if="scene == 0">
      <Visitor
        @changeScene="changeScene"
        class="item"
        v-for="(user, index) in userArr"
        :key="user.id"
        :user="user"
        :index="index"
      />
    </div>
    <!-- 添加就诊人|修改已有就诊人信息的结构 -->
    <div class="form" v-else>
      <el-divider content-position="left"> 就诊人信息</el-divider>
      <el-form style="width: 60%; margin: 10px auto">
        <el-form-item label="用户姓名">
          <el-input placeholder="请输入用户姓名"></el-input>
        </el-form-item>
        <el-form-item label="证件类型">
          <el-select placeholder="请你选择证件类型" style="width: 100%">
            <el-option label="身份证"></el-option>
            <el-option label="户口本"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="证件号码">
          <el-input placeholder="请输入用户证件号码"> </el-input>
        </el-form-item>
        <el-form-item label="用户性别">
          <el-radio-group>
            <el-radio :label="1">男</el-radio>
            <el-radio :label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-date-picker type="date" placeholder="请你选择日期" />
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input placeholder="请输入用户手机号码"> </el-input>
        </el-form-item>
      </el-form>
      <el-divider content-position="left"
        >建档信息（完善后部分医院首次就诊不排队建档</el-divider
      >

      <el-form style="width: 60%; margin: 10px auto">
        <el-form-item label="婚姻状况">
          <el-radio-group>
            <el-radio :label="1">已婚</el-radio>
            <el-radio :label="0">未婚</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="自费/医保">
          <el-radio-group>
            <el-radio :label="1">自费</el-radio>
            <el-radio :label="0">医保</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="当前住址">
          <el-select placeholder="请选择用户地址">
            <el-option v-for="item in 10" :label="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input placeholder="请输入用户详细地址"> </el-input>
        </el-form-item>
      </el-form>
      <el-divider content-position="left">联系人信息（选填）</el-divider>
      <el-form style="width: 60%; margin: 10px auto" label-width="80">
        <el-form-item label="用户姓名">
          <el-input placeholder="请输入用户姓名"></el-input>
        </el-form-item>
        <el-form-item label="证件类型">
          <el-select placeholder="请你选择证件类型" style="width: 100%">
            <el-option label="身份证"></el-option>
            <el-option label="户口本"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="证件号码">
          <el-input placeholder="请输入用户证件号码"> </el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input placeholder="请输入用户手机号码"> </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">提交</el-button>
          <el-button type="success">重写</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { User } from "@element-plus/icons-vue";
import { reqGetUser } from "@/api/hospital";
import { onMounted, ref } from "vue";
import type { UserResponseData, UserArr } from "@/api/hospital/type";

// 存储全部就诊人信息
let userArr = ref<UserArr>([]);

// 定义一个响应式数据：决定卡片的身体部分展示的内容
let scene = ref<number>(0);

// 组件挂载完毕获取一次就诊人信息
onMounted(() => {
  // 获取就诊人信息
  getAllUse();
});

// 获取全部就诊人信息
const getAllUse = async () => {
  let result: UserResponseData = await reqGetUser();
  // console.log(result);
  if ((result.code = 200)) {
    userArr.value = result.data;
  }
};

// 添加就诊人按钮回调
const addUser = () => {
  // 切换场景
  scene.value = 1;
};

// 就诊人子组件自定义事件回调
const changeScene = () => {
  scene.value = 1;
};
</script>

<style scoped lang="scss">
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.visitors {
  display: flex;
  flex-wrap: wrap;
  .item {
    width: 32%;
    margin: 5px;
  }
}
</style>

22.2、获取证件类型

22.3、级联选择器的展示

通过对返回的城市数据进行处理，将其转换成级联选择器所需的格式。在这里，代码通过map方法将每个城市数据转换为一个包含id、label、value和leaf属性的对象，分别表示节点的唯一标识、显示的标签、实际的值和是否是叶子节点（没有子节点）。

总结：这段代码定义了一个props对象，用于配置级联选择器组件的懒加载行为和数据加载方式。当用户展开节点时，组件会异步加载子节点数据，并将加载后的数据转换为特定格式后传递给级联选择器进行展示。

22.4、添加就诊人业务

接口

收集表单数据

绑定表单

提交按钮

点击新增后再次点击新增，表单里面的数据清空，

// 判断：当前这个路由组件是不是从挂号组件而来，[挂号而来，路径上是携带query参数type=add]

挂号订单

22.5、更新就诊人业务

预约挂号

点击编辑时，展示原来的数据

预约挂号中点击编辑

22.6、删除就诊人业务

23、路由鉴权

permisstion.ts

//路由鉴权:就是路由能不能被访问到权限设置->全局守卫完成
//引入路由器
import router from "./router";
//引入进度条
import Nprogress from "nprogress";
//引入用户相关的仓库
import useUserStore from "@/store/modules/user";
//引入大仓库
import pinia from "@/store";
let userStore = useUserStore(pinia);
//引入进度条的样式
import "nprogress/nprogress.css";
//进度条的加载小圆球不要
Nprogress.configure({ showSpinner: false });
//存储用户未登录可以访问路由得路径
let whiteList = [
  "/home",
  "/hospital/register",
  "/hospital/detail",
  "/hospital/notice",
  "/hospital/close",
  "/hospital/search",
];
//添加相应的全局守卫
//前置守卫
router.beforeEach((to, from, next) => {
  //访问路由组件的之前,进度条开始动
  Nprogress.start();
  //动态设置网页左上角的标题
  document.title = `尚医通-${to.meta.title}`;
  //判断用户是否登录-token
  let token = userStore.userInfo.token;
  //用户登陆了    
  if (token) {
    next();
  } else {
    //用户未登录
    if (whiteList.includes(to.path)) {
      next();
    } else {
      //登录组件显示不来
      userStore.visiable = true;
      next({ path: "/home", query: { redirect: to.fullPath } });
    }
  }
});

//后置路由
router.afterEach((to, from) => {
  //访问路由组件成功,进度条消息
  Nprogress.done();
});