Shangyitong is an online medical service platform developed with technology stacks such as Vue3 Family Bucket, TypeScript, Vite, Pinia, and Element-plus. It integrates the registration information of multiple hospitals and provides full-process tracking services. Users can know their registration status at any time.
In 2023, the latest Shangyitong project in Silicon Valley (Part 1)
In 2023, the latest Shangyitong project in Silicon Valley (middle)
In 2023, the latest Shangyitong project in Silicon Valley (Part 2)
21. Registered order
21.1 Static construction of registered orders
<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. Obtain registered order data (form -----important---typical)
Effect
interface
How to get an order
Pager: When switching page numbers, the data is also updated Method 1:
Method Two:
display data
Click for details
Callback for the pager dropdown menu
21.1 Pull-down menu to get data
interface
retrieve data
22. Patient management
22.1. Static construction of patient management
The introduction of the Visitor component is first registered as a global component
Full code:
<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. Add patient management
Click Edit or Add to enter the patient management page
Full code:
<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. Obtain the type of certificate
22.3. Display of cascading selectors
Convert the returned city data into the format required by the cascade selector by processing it. Here, the code uses
mapa method to convert each city data into an object containing id, label, valueand leafattributes, which respectively represent the unique identifier of the node, the displayed label, the actual value, and whether it is a leaf node (no child nodes).
Summary: This code defines an
propsobject for configuring the lazy loading behavior and data loading method of the cascading selector component. When the user expands a node, the component will asynchronously load the child node data, convert the loaded data into a specific format, and pass it to the cascade selector for display.
22.4. Add patient service
interface
Collect form data
bind form
submit button
After clicking Add, click Add again, and the data in the form will be cleared.
// Judgment: Does the current routing component come from the registration component, [from the registration, the path carries the query parameter type=add]
registered order
22.5. Update the patient service
Appointment registration
When editing is clicked, the original data is displayed
Click Edit in Appointment Registration
22.6. Delete patient business
23. Routing authentication
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();
});