基于Vue+Element+Thinkphp+MySql的前后端分离的药店药品管理系统
- 摘要
- 一、 引言
- 二、 系统设计
- 1.系统架构
- 2. 功能模块
- 三、界面展示
- 四、 源码获取
摘要
本文介绍了一种基于Vue+Element+ThinkPHP+MySQL的前后端分离的药店药品管理系统。该系统实现了基本信息管理、仓库信息管理、销售信息管理和系统信息管理等主要功能，旨在提高药店药品管理效率和客户服务水平。本文详细介绍了系统的设计思路、实现方法和优势。关键词：Vue.js；Element UI；ThinkPHP；MySQL；药店管理
一、 引言
随着社会的不断发展和人们对健康关注的不断提高，药店在日常生活中扮演着越来越重要的角色。传统的手工药品管理系统无法满足药店日益增长的需求，因此开发一款高效便捷的药店药品管理系统变得至关重要。本文将介绍一种基于Vue.js、Element UI、ThinkPHP和MySQL的前后端分离的药店药品管理系统，旨在提高药店药品管理效率和客户服务水平。
二、 系统设计
1.系统架构
本系统采用前后端分离的架构，前端使用Vue.js，后端使用ThinkPHP框架，数据库采用MySQL。前端与后端通过API进行通信，实现数据的交互与处理。
2. 功能模块
本系统主要包括以下功能模块：
（1）基本信息管理
药品信息：该模块实现了药品详细信息的录入和删除功能。管理员可以添加新药品、修改已有药品信息以及删除不再使用的药品。药品信息包括药品名称、规格、生产厂家、价格等。
供应商信息：该模块实现了药品供应商信息的存储和管理功能。管理员可以添加新的供应商、修改已有供应商信息以及删除不再合作的供应商。供应商信息包括供应商名称、联系电话、地址等。
客户信息：该模块实现了客户信息的查找和修改功能。管理员可以添加新的客户、修改已有客户信息以及删除不再合作的客户。客户信息包括客户名称、联系电话、地址等。
员工信息：该模块实现了员工信息的增删查改功能。管理员可以添加新员工、修改员工信息以及删除已离职员工。员工信息包括员工姓名、工号、职位等，并且支持根据职位进行细分，如仓库员工和销售员工。
（2）仓库信息管理
药品采购：该模块实现了药品采购功能，根据药品库存情况和需求情况自动进行药品采购计划制定，支持手动调整采购计划。当药品库存不足时，系统自动发出警告提示，及时进行药品采购。
入库登记：该模块实现了药品入库登记功能，记录药品的详细信息和入库时间、人员等信息。管理员可以随时添加、修改或删除药品入库记录，支持批量导入导出功能。
出库登记：该模块实现了药品出库登记功能，记录药品出库的时间、人员和出库原因等信息。管理员可以随时添加、修改或删除药品出库记录，支持批量导入导出功能。
药品过期警告：该模块实现了药品过期自动警告功能，当药品即将过期时，系统自动发出警告提示，及时进行处理。管理员可以根据实际情况调整药品过期预警时间，方便及时处理过期药品。
库存盘点：该模块实现了药品库存盘点功能，可以查询药品出入库记录和药品数量统计以及药品采购成本等信息。管理员可以随时查看库存情况，方便及时调整采购计划和管理库存。
（3）销售信息管理
销售登记：该模块实现了药品销售登记功能，当药品售卖时进行登记，订单自动录入系统。管理员可以查看销售情况，了解客户需求和反馈情况。
订单查询：该模块实现了已购买过的订单或采购订单查询功能，方便管理员了解订单情况和客户反馈情况。管理员可以根据实际情况调整订单查询条件和时间范围，方便快速查询所需订单信息。
营业额统计：该模块统计了药品销售当日以及月度营业额，方便管理员了解销售情况和营业额趋势。管理员可以根据实际情况调整统计周期和时间范围，方便快速了解销售数据和营业额趋势。
销售报表：该模块统计了药品销售情况，以可视化的方式展示销售数据和分析结果。管理员可以根据实际情况调整报表类型和时间范围，方便快速了解销售数据和分析结果。
（4）系统信息管理
员工管理：该模块管理员管理药店员工所拥有的权限，不同员工拥有不同的权限。管理员可以根据实际情况调整员工权限级别和授权范围，保证系统的安全性和稳定性。
系统设置：该模块管理员可以设置系统功能，比如重新建立一个子功能模块或者修改已存在的功能模块等等。管理员可以根据实际需求进行自定义设置，方便快捷地对系统进行升级和维护。
三、界面展示
主要代码：
<template>
<div class="login-wrap">
<el-form label-position="left" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm login-container">
<h3 class="title">用户登录</h3>
<el-form-item prop="username">
<el-input type="text" v-model.trim="ruleForm.username" auto-complete="off" placeholder="账号"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model.trim="ruleForm.password" auto-complete="off" placeholder="密码"></el-input>
</el-form-item>
<el-form-item style="width:100%;">
<el-button type="primary" style="width:100%;" :loading="logining" @click="login">登录</el-button>
</el-form-item>
</el-form>
</div>
</template>export default {
data () {
return {
ruleForm: {
username: '',
password: ''
},
rules: {
username: [
{ required: true, message: '请输入账号', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
]
},
logining: false
}
},
// 创建完毕状态(里面是操作)
created () {
this.$message({
message: '账号密码不为空',
type: 'success'
})
}, // 里面的函数只有调用才会执行
methods: {
login () {
// 获取用户名和密码
// const { username, password } = this.ruleForm
// 校验用户名和密码
this.$refs.ruleForm.validate((valid) => {
if (!valid) {
return false
}
// 发送登录请求
axios.post('/api/login', {
username,
password
}).then(res => {
// 登录成功
if (res.data.code === 200) {
// 保存token
localStorage.setItem('token', res.data.token)
// 跳转到首页
this.$router.push('/index')
} else {
// 登录失败
this.$message({
message: res.data.msg,
type: 'error'
})
}
})
})
}
// 获取info列表
}
主要代码:
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>药品管理</el-breadcrumb-item>
<el-breadcrumb-item>药品列表</el-breadcrumb-item>
</el-breadcrumb>
<el-button size="small" style="float: right;" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button>
<!--列表-->
<el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
<el-table-column sorttable prop="drug_id" label="编号" width="60" align="center" ></el-table-column>
<el-table-column sortable prop="drug_name" label="药品名称"></el-table-column>
<el-table-column sortable prop="drug_type" label="药品类型" ></el-table-column>
<el-table-column sortable prop="drug_spec" label="药品规格" ></el-table-column>
<el-table-column sortable prop="drug_price" label="药品单价" ></el-table-column>
<el-table-column sortable prop="supplier.supplier_name" label="供应商" ></el-table-column>
<el-table-column sortable prop="drug_stock" label="库存" ></el-table-column>
<el-table-column align="center" label="操作" >
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button size="mini" type="danger" @click="del(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<el-pagination
background
:current-page="pageparm.currentPage"
:page-size="pageparm.pageSize"
layout="total, prev, pager, next, jumper"
:total="pageparm.total"
@current-change="handleCurrentChange"
style="margin-top: 20px;">
</el-pagination>// 获取列表
getdata (parameter) {
this.loading = true
// axios请求服务器中的getDrugList方法
this.$axios.get('/api/drug/getDrugList', {
params: parameter
}).then(res => {
console.log(res.data)
this.loading = false
if (res.data.code === 1) {
this.listData = res.data.list.data
this.pageparm.total = res.data.list.total
} else {
this.$message.error(res.data.msg)
}
}).catch(() => {
this.loading = false
this.$message.error('服务器异常')
})
},
// 分页
handleCurrentChange (val) {
this.formInline.page = val
this.getdata(this.formInline)
},
主要代码：
<!-- 编辑界面 -->
<el-dialog :title="title" :visible.sync="dialogFormVisible" width="30%" @click="closeDialog">
<el-form :model="form" :rules="rules" ref="form" label-width="80px">
<el-form-item label="药品名称" prop="drug_name">
<el-input v-model="form.drug_name"></el-input>
</el-form-item>
<el-form-item label="药品类型" prop="drug_type">
<el-input v-model="form.drug_type"></el-input>
</el-form-item>
<el-form-item label="药品规格" prop="drug_spec">
<el-input v-model="form.drug_spec"></el-input>
</el-form-item>
<el-form-item label="药品单价" prop="drug_price">
<el-input v-model="form.drug_price"></el-input>
</el-form-item>
<el-form-item label="供应商" prop="supplier_id">
<el-select v-model="form.supplier_id" placeholder="请选择供应商">
<el-option
v-for="item in supplier"
:key="item.supplier_id"
:label="item.supplier_name"
:value="item.supplier_id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="库存" prop="drug_stock">
<el-input v-model="form.drug_stock"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="submitForm('form')">确 定</el-button>
</span>
</el-dialog>handleEdit (index, row) {
if (index || index === 0) {
this.title = '编辑'
this.form = row
} else {
this.title = '添加'
this.form = {
drug_name: '',
drug_type: '',
drug_spec: '',
drug_price: '',
supplier_id: '',
drug_stock: ''
}
}
// 获取供应商
this.$axios.get('/api/supplier/getSupplier', {
params: {
token: localStorage.getItem('logintoken')
}
}).then(res => {
if (res.data.code === 1) {
this.supplier = res.data.list
} else {
this.$message.error(res.data.msg)
}
}).catch(() => {
this.$message.error('服务器异常')
})
this.dialogFormVisible = true
},
// 编辑、增加页面保存方法
submitForm (formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.$axios.post('/api/drug/save', this.form).then(res => {
if (res.data.code === 1) {
this.$message.success(res.data.msg)
this.dialogFormVisible = false
this.getdata(this.formInline)
} else {
this.$message.error(res.data.msg)
}
}).catch(() => {
this.$message.error('服务器异常')
})
} else {
this.$message.error('请填写完整信息')
return false
}
})
},
主要代码：
// 删除
del (index, row) {
this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// console.log(index)
this.seletedata.id = row.employee_id
this.$axios.post('/api/employee/del', this.seletedata).then(res => {
if (res.data.code === 1) {
this.$message.success(res.data.msg)
this.getdata(this.formInline)
} else {
this.$message.error(res.data.msg)
}
}).catch(() => {
this.$message.error('服务器异常')
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
},
