10.25B/S结构用户界面设计
【实验编号】
10003809548j Web界面设计
【实验学时】
8学时
【实验环境】
所需硬件环境为微机；
所需软件环境为dreamweaver
【实验内容】
本次实验要设计一个B/S架构的用户界面，我的选题是《医药信息管理系统》。我为这个系统设计了6个模块，分别是药品销售、药品信息管理、供应商信息管理、入库信息管理、销售账单管理、个人信息管理。
【关键步骤】
1.先明确系统要实现的功能和每个模块的交互逻辑
2.选择合适的技术栈。我选择了SpringBoot+Vue构建B/S架构
3.设计数据库的表结构
4.构思页面的设计
5.使用ps和ai等工具制作一些图片，使系统更美观
6.编写代码实现各个模块
部分关键代码：
//调用接口,完成登录
let result = await loginService(loginData.value);
ElMessage.success(result.msg ? result.msg : '登录成功')
const userInfoStore = useUserInfoStore();
//数据存储到pinia中
userInfoStore.setInfo(result.data);
//跳转到首页 路由完成跳转
await router.push('/main')
}
<!--登录按钮 -->
<el-form-item>
<el-button class="button" type="primary" auto-insert-space @click="login">登录</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</template>
<style lang="scss" scoped>
/* 样式 */
.login-page {
height: 98vh;
background-color: #fff;
.bg {
background:
url('@/assets/login_bg.jpg') no-repeat center / cover;
border-radius: 0 20px 20px 0;
}
.form {
display: flex;
flex-direction: column;
justify-content: center;
user-select: none;
.title {
margin: 0 auto;
}
.button {
width: 100%;
}
.flex {
width: 100%;
display: flex;
justify-content: space-between;
}
}
}
</style>
Layout.vue
<script lang="ts" setup>
import {computed, ref, watch} from "vue"
import {Management, Promotion, UserFilled, User, Crop, EditPen, SwitchButton, CaretBottom} from '@element-plus/icons-vue'
import {ElMessage, ElMessageBox, ElMessageBoxOptions} from 'element-plus'
import useUserInfoStore from "@/stores/userInfo.js";
import avatar from '@/assets/default.png'
import {useRouter} from 'vue-router'
import {updateUserService,updatePasswordService} from "@/api/user.js";
const closeInfoDialogVisible = () =>{
infoDialogVisible.value = false
unclickable.value = true
userInfo.value = { ...userInfoStore.info }
}
const updateUser = async () =>{
await updateUserService(userInfo.value)
userInfoStore.setInfo(userInfo.value)
userInfo.value = { ...userInfoStore.info }
infoDialogVisible.value = false
unclickable.value = true
ElMessage({
type: 'success',
message: '修改成功'
})
}
const passwordData = ref({
oldPassword:"",
newPassword:"",
rePassword:""
})
const clearPasswordData = () =>{
passwordData.value.oldPassword = ""
passwordData.value.newPassword = ""
passwordData.value.rePassword = ""
repwdDialogVisible.value = false
}
const updatePassword = async () => {
if(passwordData.value.oldPassword===userInfoStore.info.password){
if(passwordData.value.newPassword===passwordData.value.rePassword){
await updatePasswordService(userInfo.value.id,passwordData.value.newPassword)
clearPasswordData()
await router.push('/login')
}else{
ElMessage({
type: 'error',
message: '两次输入的密码不一致'
})
}
}else{
ElMessage({
type: 'error',
message: '原密码输入错误'
})
}
}
</script>
autocomplete="off" :disabled="unclickable"/>
</el-form-item>
<el-form-item label="年龄" :label-position="'left'">
<el-input v-model="userInfo.age" autocomplete="off" :disabled="unclickable"/>
</el-form-item>
<el-form-item label="电话" :label-position="'left'">
<el-input v-model="userInfo.phone" autocomplete="off" :disabled="unclickable"/>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="closeInfoDialogVisible">关闭</el-button>
<el-button type="primary" @click="updateUser" :disabled="unclickable">提交</el-button>
</div>
</template>
</el-dialog>
<el-dialog v-model="repwdDialogVisible" title="修改密码" width="500" draggable center>
<el-form label-position="left" label-width="auto">
<el-form-item label="原密码" >
<el-input v-model="passwordData.oldPassword" show-password />
</el-form-item>
<el-form-item label="新密码" >
<el-input v-model="passwordData.newPassword" show-password />
</el-form-item>
<el-form-item label="确认密码" >
<el-input v-model="passwordData.rePassword" show-password />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="clearPasswordData">取消</el-button>
<el-button type="primary" @click="updatePassword">提交</el-button>
</div>
</template>
</el-dialog>
</el-header>
<!-- 中间区域 -->
<el-main>
<!-- <div style="width: 1290px; height: 570px;border: 1px solid red;">
内容展示区
</div> -->
<router-view></router-view>
</el-main>
<!-- 底部区域 -->
<el-footer>医药管理系统 ©2024 Created by Leap</el-footer>
</el-container>
</el-container>
</template>
<style lang="scss" scoped>
.my-header {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 16px;
}
.layout-container {
height: 98vh;
.el-aside {
background-color: #232323;
&__logo {
height: 120px;
background: url('@/assets/logo.png') no-repeat center / 120px auto;
}
.el-menu {
border-right: none;
}
}
.el-header {
background-color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
height: 50px;
.el-dropdown__box {
display: flex;
align-items: center;
.el-icon {
color: #999;
margin-left: 10px;
}
&:active,
&:focus {
outline: none;
}
}
}
.el-footer {
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: #666;
}
}
</style>
Inbound.vue
<script setup>
import { ref } from 'vue'
import {ElMessage} from "element-plus"
import useUserInfoStore from "@/stores/userInfo.js"
import {addInboundService, getAllInboundService, updateInboundService} from "@/api/inbound.js";
const inboundData = ref(
{
id:'',
medicineCode: '',
amount:'',
operatorId: '',
createTime: ''
}
)
const inbound = ref([
{
id:'',
medicineCode: '',
amount:'',
operatorId: '',
createTime: ''
}
])
inbound.value = []
const pageNum = ref(1)//当前页
const total = ref(10)//总条数
const getAllInbound = async () => {
let result = await getAllInboundService(pageNum.value)
inbound.value = result.data.items
total.value = result.data.total
}
getAllInbound()
const addInboundDialogVisible = ref(false)
const addInbound = async () => {
const userInfoStore = useUserInfoStore()
inboundData.value.operatorId = userInfoStore.info.id
await addInboundService(inboundData.value)
inboundData.value = {
id:'',
medicineCode: '',
amount:'',
operatorId: '',
createTime: ''
}
addInboundDialogVisible.value=false
ElMessage.success("入库成功")
await getAllInbound()
}
const onCurrentChange = (num) => {
pageNum.value = num
getAllInbound()
}
</script>
<template>
<h1>药品入库信息</h1>
<el-button type="primary" @click="addInboundDialogVisible = true">点击入库</el-button>
<el-table :data="inbound" height="500px" style="width: 100%"
:cell-style="{ textAlign: 'center' }"
:header-cell-style="{ 'text-align': 'center' }"
border>
<el-table-column prop="id" label="序号" />
<el-table-column prop="medicineCode" label="药品编码" />
<el-table-column prop="amount" label="数量" />
<el-table-column prop="operatorId" label="操作员" />
<el-table-column prop="createTime" label="创建时间" />
</el-table>
<el-pagination background layout="prev, pager, next" :current-page="pageNum" :total="total"
@current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />
<el-dialog v-model="addInboundDialogVisible" title="药品入库" width="500" draggable center>
<el-form label-position="left" label-width="auto">
<el-form-item label="药品编码">
<el-input v-model="inboundData.medicineCode" placeholder="请输入药品编码" clearable />
</el-form-item>
<el-form-item label="数量">
<el-input v-model="inboundData.amount" placeholder="请输入数量" clearable />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="addInboundDialogVisible = false">关闭</el-button>
<el-button type="primary" @click="addInbound" >提交</el-button>
</div>
</template>
</el-dialog>
</template>
<style lang="scss" scoped>
</style>
Medicine.vue
<script setup>
import { ref } from 'vue'
import {Search} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
import useUserInfoStore from "@/stores/userInfo.js";
import {getAllMedicineService, getMedicineService,deleteMedicineService,updateMedicineService,addMedicineService} from "@/api/medicine.js";
const userInfoStore = useUserInfoStore()
const supplierName = ref('')
const getMedicineByName = async () => {
let result = await getMedicineService(supplierName.value);
medicine.value = result.data;
}
const medicineData = ref(
{
code: '',
name: '',
shortName:'',
description: '',
isPrescription: '',
productTime: '',
expirationDate: '',
price: '',
stock: '',
supplierId: '',
createTime: '',
updateTime: ''
}
)
const medicine = ref([
{
code: '',
name: '',
shortName:'',
description: '',
isPrescription: '',
productTime: '',
expirationDate: '',
price: '',
stock: '',
supplierId: '',
createTime: '',
updateTime: ''
}
])
const addMedicineDialogVisible = ref(false)
const pageNum = ref(1)//当前页
const total = ref(10)//总条数
const getAllMedicine = async () => {
let result = await getAllMedicineService(pageNum.value)
medicine.value = result.data.items
total.value = result.data.total
}
getAllMedicine()
const openUpdateMedicineDialog = (row) =>{
medicineData.value = {
code: row.code,
name: row.name,
shortName: row.shortName,
description: row.description,
isPrescription: row.isPrescription,
productTime: row.productTime,
expirationDate: row.expirationDate,
price: row.price,
stock: row.stock,
supplierId: row.supplierId,
createTime: row.createTime,
updateTime: row.updateTime
}
updateMedicineDialogVisible.value = true
}
pageNum.value = num
getAllMedicine()
}
</script>
<template>
<h1>药品详细信息</h1>
<el-form :inline="true" >
<el-form-item>
<el-input placeholder="请输入药品名称" v-model="supplierName" style="width: 240px" :prefix-icon="Search" clearable/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getMedicineByName">搜索</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="addMedicineDialogVisible = true" style="float: right;" v-if="userInfoStore.info.position===1">新增药品</el-button>
</el-form-item>
</el-form>
<el-table :data="medicine" height="500px" style="width: 100%"
:cell-style="{ textAlign: 'center' }"
:header-cell-style="{ 'text-align': 'center' }"
border>
<el-table-column prop="code" label="编码"/>
<el-table-column prop="name" label="名称"/>
<el-table-column prop="shortName" label="简称"/>
<el-table-column prop="description" label="描述"/>
<el-table-column prop="isPrescription" label="是否是处方药"/>
<el-table-column prop="productTime" label="生产日期"/>
<el-table-column prop="expirationDate" label="有效期（月）"/>
<el-table-column prop="price" label="价格"/>
<el-table-column prop="stock" label="库存"/>
<el-table-column prop="supplierId" label="供应商id"/>
<el-table-column prop="createTime" label="创建时间"/>
<el-table-column prop="updateTime" label="更新时间"/>
<el-table-column v-if="userInfoStore.info.position===1" label="操作" width="180px">
<template #default="{row}">
<el-button type="primary" size="small" @click="openUpdateMedicineDialog(row)">编辑</el-button>
<el-button type="danger" size="small" @click="deleteMedicine(row.code)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination background layout="prev, pager, next" :current-page="pageNum" :total="total"
@current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />
<el-dialog v-model="addMedicineDialogVisible" title="新增药品" width="500" draggable center>
<el-form label-position="left" label-width="auto">
<el-form-item label="编码">
<el-input v-model="medicineData.code" placeholder="请输入药品编码" clearable />
</el-form-item>
<el-form-item label="名称" >
<el-input v-model="medicineData.name" placeholder="请输入药品名称" clearable />
</el-form-item>
<el-form-item label="简称">
<el-input v-model="medicineData.shortName" placeholder="请输入药品简称" clearable />
</el-form-item>
<el-form-item label="描述">
<el-input v-model="medicineData.description" placeholder="请输入药品描述" clearable />
</el-form-item>
<el-form-item label="是否是处方药">
<el-input v-model="medicineData.isPrescription" placeholder="请输入是否是处方药" clearable />
</el-form-item>
<el-form-item label="生产日期">
<el-input v-model="medicineData.productTime" placeholder="请输入生产日期" clearable />
</el-form-item>
<el-form-item label="有效期（月）">
<el-input v-model="medicineData.expirationDate" placeholder="请输入有效期" clearable />
</el-form-item>
<el-form-item label="价格">
<el-input v-model="medicineData.price" placeholder="请输入价格" clearable />
</el-form-item>
<el-form-item label="供应商id">
<el-input v-model="medicineData.supplierId" placeholder="请输入供应商id" clearable />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="addMedicineDialogVisible = false">关闭</el-button>
<el-button type="primary" @click="addMedicine" >提交</el-button>
</div>
</template>
</el-dialog>
<el-dialog v-model="updateMedicineDialogVisible" title="编辑药品信息" width="500" draggable center>
<el-form label-position="left" label-width="auto">
<el-form-item label="编码">
<el-input v-model="medicineData.code" placeholder="请输入药品编码" disabled />
</el-form-item>
<el-form-item label="简称">
<el-input v-model="medicineData.shortName" placeholder="请输入药品简称" clearable />
</el-form-item>
<el-form-item label="描述">
<el-input v-model="medicineData.description" placeholder="请输入药品描述" clearable />
</el-form-item>
<el-form-item label="是否是处方药">
<el-input v-model="medicineData.isPrescription" placeholder="请输入是否是处方药" clearable />
</el-form-item>
<el-form-item label="有效期（月）">
<el-input v-model="medicineData.expirationDate" placeholder="请输入有效期" clearable />
</el-form-item>
<el-form-item label="价格">
<el-input v-model="medicineData.price" placeholder="请输入价格" clearable />
</el-form-item>
<el-form-item label="供应商id">
<el-input v-model="medicineData.supplierId" placeholder="请输入供应商id" clearable />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="closeUpdateMedicineDialog">关闭</el-button>
<el-buttoconst bill = ref(
{
medicineCode:'',
amount:'',
operatorId:'',
}
)
bill.value = null
const addBill = async () => {
if(shoppingCart.value.length === 0){
ElMessage.error("购物车为空")
return
}
const userInfoStore = useUserInfoStore();
try {
for (const item of shoppingCart.value) {
const bill = {
medicineCode: item.medicineCode,
amount: item.amount,
operatorId: userInfoStore.info.id
};
await addBillService(bill);
}
medicineName.value = ''
ElMessage.success("结算成功");
shoppingCart.value = [];
shoppingCartDialogVisible.value = false;
await getAllMedicine()
} catch (error) {
ElMessage.error("结算失败: " + error.message);
}
}
const totalMoney = computed(() => {
return shoppingCart.value.reduce((total, item) => {
return total + (item.price * item.amount)
}, 0).toFixed(2)
})
</script>
<template>
<h1>药品销售</h1>
<el-form :inline="true">
<el-form-item>
<el-input placeholder="请输入药品名称" v-model="medicineName" style="width: 240px" :prefix-icon="Search"/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getMedicine">搜索</el-button>
</el-form-item>
<el-form-item style="float: right; margin-left: auto;">
<el-button type="primary" @click="shoppingCartDialogVisible = true" style="float: right;">打开购物车</el-button>
</el-form-item>
</el-form>
<el-table :data="medicine" height="300px" style="width: 100%"
:cell-style="{ textAlign: 'center' }"
:header-cell-style="{ 'text-align': 'center' }"
border>
<el-table-column prop="name" label="药名" width="120" />
<el-table-column prop="description" label="描述" width="450" />
<el-table-column prop="productTime" label="生产日期" width="180"/>
<el-table-column prop="expirationDate" label="有效期（月）" width="120"/>
<el-table-column prop="price" label="单价" width="90"/>
<el-table-column prop="stock" label="库存" width="90"/>
<el-table-column label="数量" width="120">
<template #default = "{row}">
<div class="combo">
<input type="button" name="minus" value="-" class="combo-minus" @click="changeAmount('-',row)"/>
<input type="text" name="count" v-model.number="row.amount" @input="validateInput(row)" class="combo-value"/>
<input type="button" name="plus" value="+" class="combo-plus" @click="changeAmount('+',row)"/>
</div>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" min-width="50">
<template #default = "{row}">
<el-button type="primary" @click="addToShoppingCart(row)">添加到购物车</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination background layout="prev, pager, next" :current-page="pageNum" :total="total"
@current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />
<el-dialog v-model="shoppingCartDialogVisible" title="结算" width="500" draggable center>
<el-table :data="shoppingCart" style="width: 100%">
<el-table-column prop="name" label="药名" width="120" />
<el-table-column prop="price" label="单价" width="90"/>
<el-table-column prop="amount" label="数量" width="90"/>
<el-table-column label="小计" width="90">
<template #default = "{row}">
<el-text>{{(row.price * row.amount).toFixed(2)}}</el-text>
</template>
</el-table-column>
</el-table>
<el-text>共计:{{totalMoney}}</el-text>
<template #footer>
<div class="dialog-footer">
<el-button @click="shoppingCartDialogVisible = false">取消</el-button>
<el-button type="primary" @click="addBill">结算</el-button>
</div>
</template>
</el-dialog>
</template>
<style lang="scss" scoped>
.combo .combo-minus,
.combo .combo-value,
.combo .combo-plus{
background: #FFFFFF;
border: 1px solid #DDDDDD;
color: #333333;
float: left;
font-weight: bold;
margin: 0;
outline: none;
text-align: center;
}
.combo .combo-minus,
.combo .combo-plus{
font-size: 16px;
height: 26px;
line-height: 26px;
padding: 0;
width: 24px;
}
.combo .combo-value{
border-left: none;
border-right: none;
height: 20px;
line-height: 20px;
padding: 2px;
width: 40px;
}
</style>
Supplier.vue
<script setup>
import { ref } from 'vue'
import {getAllSupplierService, addSupplierService, getSupplierByNameService, updateSupplierService, deleteSupplierService} from "@/api/supplier.js"
import {Search} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
import useUserInfoStore from "@/stores/userInfo.js";
const userInfoStore = useU
const userInfoStore = useUserInfoStore()
const supplierName = ref('')
const supplierData = ref({
id:'',
name:'',
description:'',
phone:'',
createTime:'',
updateTime:''
})
const supplier = ref([
{
id:'',
name:'',
description:'',
phone:'',
createTime:'',
updateTime:''
}
])
const pageNum = ref(1)//当前页
const total = ref(10)//总条数
const getAllSupplier = async () => {
let result = await getAllSupplierService(pageNum.value)
supplier.value = result.data.items
total.value = result.data.total
}
getAllSupplier()
const getSupplierByName = async () => {
let result = await getSupplierByNameService(supplierName.value);
supplier.value = result.data;
}
const addSupplierDialogVisible = ref(false)
const addSupplier = async () => {
await addSupplierService(supplierData.value)
/*supplier.value = []*/
supplierData.value = {
id:'',
name:'',
description:'',
phone:'',
createTime:'',
updateTime:''
}
addSupplierDialogVisible.value = false
ElMessage.success("新增供应商成功")
await getAllSupplier()
}
const deleteSupplier = async (id) => {
await deleteSupplierService(id)
await getAllSupplier()
}
const updateSupplierDialogVisible = ref(false)
const openUpdateSupplierDialog = (row) => {
supplierData.value = {
id:row.id,
name:row.name,
description:row.description,
phone:row.phone,
createTime:row.createTime,
updateTime:row.updateTime
}
updateSupplierDialogVisible.value = true
}
const closeUpdateSupplierDialog = () => {
supplierData.value = {
id:'',
name:'',
description:'',
phone:'',
createTime:'',
updateTime:''
}
updateSupplierDialogVisible.value = false
}
const updateSupplier = async () => {
await updateSupplierService(supplierData.value)
await getAllSupplier()
closeUpdateSupplierDialog()
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
pageNum.value = num
getAllSupplier()
}
</script>
<template>
<h1>供应商信息</h1>
<el-form :inline="true">
<el-form-item>
<el-input placeholder="请输入供应商名称" v-model="supplierName" style="width: 240px" :prefix-icon="Search" clearable/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getSupplierByName">搜索</el-button>
</el-form-item>
<el-form-item v-if="userInfoStore.info.position===1">
<el-button type="primary" @click="addSupplierDialogVisible = true" style="float: right;">新增供应商</el-button>
</el-form-item>
</el-form>
<el-table :data="supplier" height="500px" style="width: 100%"
:cell-style="{ textAlign: 'center' }"
:header-cell-style="{ 'text-align': 'center' }"
border>
<el-table-column prop="id" label="编号" width="150px"/>
<el-table-column prop="name" label="名称"/>
<el-table-column prop="description" label="描述"/>
<el-table-column prop="phone" label="电话"/>
<el-table-column prop="createTime" label="创建时间"/>
<el-table-column prop="updateTime" label="更新时间"/>
<el-table-column label="操作" v-if="userInfoStore.info.position===1">
<template #default="{row}">
<el-button type="primary" size="small" @click="openUpdateSupplierDialog(row)">编辑</el-button>
<el-button type="danger" size="small" @click="deleteSupplier(row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination background layout="prev, pager, next" :current-page="pageNum" :total="total"
@current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />
<el-dialog v-model="addSupplierDialogVisible" title="新增供应商" width="500" draggable center>
<el-form label-position="left" label-width="auto">
<el-form-item label="名称" >
<el-input v-model="supplierData.name" placeholder="请输入供应商名称" clearable />
</el-form-item>
<el-form-item label="描述">
<el-input v-model="supplierData.description" placeholder="请输入供应商描述" clearable />
</el-form-item>
<el-form-item label="电话">
<el-input v-model="supplierData.phone" placeholder="请输入供应商电话" clearable />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="addSupplierDialogVisible = false">关闭</el-button>
<el-button type="primary" @click="addSupplier" >提交</el-button>
</div>
</template>
</el-dialog>
<el-dialog v-model="updateSuppliconst userInfoStore = useUserInfoStore()
const supplierName = ref('')
const supplierData = ref({
id:'',
name:'',
description:'',
phone:'',
createTime:'',
updateTime:''
})
const supplier = ref([
{
id:'',
name:'',
description:'',
phone:'',
createTime:'',
updateTime:''
}
])
const pageNum = ref(1)//当前页
const total = ref(10)//总条数
const getAllSupplier = async () => {
let result = await getAllSupplierService(pageNum.value)
supplier.value = result.data.items
total.value = result.data.total
}
getAllSupplier()
const getSupplierByName = async () => {
let result = await getSupplierByNameService(supplierName.value);
supplier.value = result.data;
}
const addSupplierDialogVisible = ref(false)
const addSupplier = async () => {
await addSupplierService(supplierData.value)
/*supplier.value = []*/
supplierData.value = {
id:'',
name:'',
description:'',
phone:'',
createTime:'',
updateTime:''
}
addSupplierDialogVisible.value = false
ElMessage.success("新增供应商成功")
await getAllSupplier()
}
const deleteSupplier = async (id) => {
await deleteSupplierService(id)
await getAllSupplier()
}
const updateSupplierDialogVisible = ref(false)
const openUpdateSupplierDialog = (row) => {
supplierData.value = {
id:row.id,
name:row.name,
description:row.description,
phone:row.phone,
createTime:row.createTime,
updateTime:row.updateTime
}
updateSupplierDialogVisible.value = true
}
const closeUpdateSupplierDialog = () => {
supplierData.value = {
id:'',
name:'',
description:'',
phone:'',
createTime:'',
updateTime:''
}
updateSupplierDialogVisible.value = false
}
const updateSupplier = async () => {
await updateSupplierService(supplierData.value)
await getAllSupplier()
closeUpdateSupplierDialog()
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
pageNum.value = num
getAllSupplier()
}
</script>
<template>
<h1>供应商信息</h1>
<el-form :inline="true">
<el-form-item>
<el-input placeholder="请输入供应商名称" v-model="supplierName" style="width: 240px" :prefix-icon="Search" clearable/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getSupplierByName">搜索</el-button>
</el-form-item>
<el-form-item v-if="userInfoStore.info.position===1">
<el-button type="primary" @click="addSupplierDialogVisible = true" style="float: right;">新增供应商</el-button>
</el-form-item>
</el-form>
<el-table :data="supplier" height="500px" style="width: 100%"
:cell-style="{ textAlign: 'center' }"
:header-cell-style="{ 'text-align': 'center' }"
border>
<el-table-column prop="id" label="编号" width="150px"/>
<el-table-column prop="name" label="名称"/>
<el-table-column prop="description" label="描述"/>
<el-table-column prop="phone" label="电话"/>
<el-table-column prop="createTime" label="创建时间"/>
<el-table-column prop="updateTime" label="更新时间"/>
<el-table-column label="操作" v-if="userInfoStore.info.position===1">
<template #default="{row}">
<el-button type="primary" size="small" @click="openUpdateSupplierDialog(row)">编辑</el-button>
<el-button type="danger" size="small" @click="deleteSupplier(row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination background layout="prev, pager, next" :current-page="pageNum" :total="total"
@current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />
<el-dialog v-model="addSupplierDialogVisible" title="新增供应商" width="500" draggable center>
<el-form label-position="left" label-width="auto">
<el-form-item label="名称" >
<el-input v-model="supplierData.name" placeholder="请输入供应商名称" clearable />
</el-form-item>
<el-form-item label="描述">
<el-input v-model="supplierData.description" placeholder="请输入供应商描述" clearable />
</el-form-item>
<el-form-item label="电话">
<el-input v-model="supplierData.phone" placeholder="请输入供应商电话" clearable />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="addSupplierDialogVisible = false">关闭</el-button>
<el-button type="primary" @click="addSupplier" >提交</el-button>
</div>
</template>
</el-dialog>
<el-dialog v-model="updateSuppli
<el-pagination background layout="prev, pager, next" :current-page="pageNum" :total="total"
@current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />
<el-dialog v-model="addSupplierDialogVisible" title="新增供应商" width="500" draggable center>
<el-form label-position="left" label-width="auto">
<el-form-item label="名称" >
<el-input v-model="supplierData.name" placeholder="请输入供应商名称" clearable />
</el-form-item>
<el-form-item label="描述">
<el-input v-model="supplierData.description" placeholder="请输入供应商描述" clearable />
</el-form-item>
<el-form-item label="电话">
<el-input v-model="supplierData.phone" placeholder="请输入供应商电话" clearable />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="addSupplierDialogVisible = false">关闭</el-button>
<el-button type="primary" @click="addSupplier" >提交</el-button>
</div>
</template>
</el-dialog>
<el-dialog v-model="updateSupplierDialogVisible" title="编辑供应商信息" width="500" draggable center>
<el-form label-position="left" label-width="auto">
<el-form-item label="名称" >
<el-input v-model="supplierData.name" placeholder="请输入供应商名称" clearable />
</el-form-item>
<el-form-item label="描述">
<el-input v-model="supplierData.description" placeholder="请输入供应商描述" clearable />
</el-form-item>
<el-form-item label="电话">
<el-input v-model="supplierData.phone" placeholder="请输入供应商电话" clearable />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="closeUpdateSupplierDialog">关闭</el-button>
<el-button type="primary" @click="updateSupplier">提交</el-button>
</div>
</template>
</el-dialog>
</template>
<style lang="scss" scoped>
</style>
【程序运行截图】
登录页面：
药品销售页面
购物车页面
药品详细信息页面
新增药品页面
药品信息编辑页面
供应商信息页面
新增供应商页面
编辑供应商信息页面
药品入库信息页面
药品入库页面
销售账单记录页面
个人信息管理模块
个人资料页面
修改密码页面
【实验体会】
通过开发《医药信息管理系统》，我深入体验了 Spring Boot 和 Vue的开发过程。后端使用 Spring Boot，简化了服务端开发和接口设计，让我更加熟悉了 RESTful API 的规范，同时也学到了如何组织业务逻辑和处理请求。在前端部分，Vue.js 的组件化和数据绑定功能使得页面开发更加灵活和高效，前后端分离的架构让我对现代 Web 开发有了更清晰的认识。虽然系统功能较为简单，主要以增删改查为主，但这次项目让我更加熟悉了基本的全栈开发流程，包括前后端联调和数据库设计等。这次实践提升了我对技术栈的掌握，也加深了我对开发流程和项目管理的理解，为我今后的项目积累了宝贵经验。同时也暴露了我在审美方面的欠缺，以后要多看看优秀网站的设计，提高自己的审美。
浙公网安备 33010602011771号