12.25
C/S结构用户界面设计
【实验编号】
10003809547j 图形用户界面设计
【实验学时】
8学时
【实验环境】
l 所需硬件环境为微机；
l 所需软件环境为Microsoft Visual Studio 2013
【实验内容】
我所做的C/S结构用户界面为商品管理系统，这个系统界面在实现进销存功能的基础上进行适当美化，使用户体验更好。
1、主界面：
截图：
核心代码：
from PyQt5.QtWidgets import QMainWindow, QTreeWidget, QTreeWidgetItem, QAction, QTabWidget, QVBoxLayout, QHBoxLayout, QWidget, QSplitter
from PyQt5.QtGui import QIcon, QFont
from PyQt5.QtCore import Qt
from customer_management import CustomerManagement
from employee_management import EmployeeManagement
from financial_reports import FinancialReports
from product_management import ProductManagement
from supplier_management import SupplierManagement
from warehouse_management import WarehouseManagement
class MainWindow(QMainWindow):
def __init__(self):
super().__init__()
self.initUI()
def initUI(self):
self.setWindowTitle('商品管理系统 - 主页')
# 设置窗口的初始大小
self.setGeometry(100, 100, 1200, 800) # x, y, width, height
# 设置窗口样式
self.setStyleSheet("""
QMainWindow {
}
QTreeWidget {
border: 1px solid #c0c0c0;
border-radius: 5px;
font-size: 14px;
}
QTreeWidget::item {
height: 30px;
}
QTreeWidget::item:hover {
}
QTabWidget::pane {
border: 1px solid #c0c0c0;
border-radius: 5px;
}
QTabBar::tab {
padding: 10px 15px;
border-bottom: 2px solid #c0c0c0;
font-size: 14px;
}
QTabBar::tab:selected {
border-bottom: 2px solid #007acc;
}
QPushButton {
color: white;
border: none;
padding: 10px 20px;
font-size: 14px;
border-radius: 5px;
}
QPushButton:hover {
}
""")
# 选项卡
tabs = QTabWidget()
tabs.addTab(ProductManagement(), '商品管理')
tabs.addTab(EmployeeManagement(), '员工管理')
tabs.addTab(CustomerManagement(), '客户管理')
tabs.addTab(SupplierManagement(), '供应商管理')
tabs.addTab(WarehouseManagement(), '仓库管理')
tabs.addTab(FinancialReports(), '资金报表')
tabs.setMinimumHeight(600) # 设置最小高度
tabs.setFont(QFont("Arial", 12))
# 使用 QSplitter 实现左右布局
splitter = QSplitter(Qt.Horizontal)
splitter.addWidget(tabs)
splitter.setSizes([200, 1000]) # 初始大小比例
container = QWidget()
layout = QVBoxLayout()
layout.addWidget(splitter)
container.setLayout(layout)
self.setCentralWidget(container)
self.show()
2、登陆界面：
截图：
核心代码：
from PyQt5.QtWidgets import QApplication, QWidget, QLabel, QLineEdit, QPushButton, QVBoxLayout, QHBoxLayout, QSpacerItem, QSizePolicy, QMessageBox, QFormLayout
from PyQt5.QtGui import QPixmap, QFont, QIcon, QColor, QPalette, QLinearGradient, QBrush
from PyQt5.QtCore import Qt, QRect
from main_window import MainWindow
class LoginWindow(QWidget):
def __init__(self):
super().__init__()
self.initUI()
def initUI(self):
self.setWindowTitle('商品管理系统 - 登录')
# 设置样式表
self.setStyleSheet("""
QWidget {
}
QLabel {
font-size: 16px;
color: #333;
}
QLineEdit {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
transition: border-color 0.2s ease;
}
QLineEdit:focus {
border-color: #007BFF;
}
QPushButton {
padding: 12px 24px;
border: none;
background-color: #007BFF;
color: white;
border-radius: 5px;
font-size: 16px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: all 0.2s ease;
}
QPushButton:hover {
background-color: #0056b3;
}
QPushButton:pressed {
background-color: #003d80;
}
""")
# 设置渐变背景
palette = self.palette()
gradient = QLinearGradient(0, 0, 0, 400)
gradient.setColorAt(0.0, QColor(240, 240, 240))
gradient.setColorAt(1.0, QColor(220, 220, 220))
palette.setBrush(QPalette.Window, QBrush(gradient))
self.setPalette(palette)
# 输入框
self.username = QLineEdit(self)
self.username.setPlaceholderText('请输入用户名')
self.username.addAction(QIcon('icons/user.png'), QLineEdit.LeadingPosition) # 添加用户图标
self.password = QLineEdit(self)
self.password.setEchoMode(QLineEdit.Password)
self.password.setPlaceholderText('请输入密码')
self.password.addAction(QIcon('icons/lock.png'), QLineEdit.LeadingPosition) # 添加锁图标
# 登录按钮
login_button = QPushButton('登录', self)
login_button.setIcon(QIcon('icons/login.png')) # 添加登录图标
login_button.clicked.connect(self.login)
# 布局
form_layout = QFormLayout()
form_layout.addRow(QLabel('用户名:'), self.username)
form_layout.addRow(QLabel('密码:'), self.password)
layout = QVBoxLayout()
layout.setAlignment(Qt.AlignCenter)
layout.addSpacerItem(QSpacerItem(20, 40, QSizePolicy.Minimum, QSizePolicy.Expanding))
layout.addLayout(form_layout)
layout.addWidget(login_button)
layout.addSpacerItem(QSpacerItem(20, 40, QSizePolicy.Minimum, QSizePolicy.Expanding))
self.setLayout(layout)
self.resize(800, 600) # 设置窗口大小
def login(self):
username = self.username.text()
password = self.password.text()
if username == 'admin' and password == '123456':
self.close()
self.main_window = MainWindow()
self.main_window.show()
else:
QMessageBox.warning(self, '登录失败', '用户名或密码错误，请重试。')
if __name__ == '__main__':
app = QApplication([])
login_window = LoginWindow()
login_window.show()
app.exec_()
3、对商品进行增删改查：
截图：
核心代码：
from PyQt5.QtWidgets import QWidget, QVBoxLayout, QPushButton, QLabel, QTableWidget, QTableWidgetItem, QLineEdit, QMessageBox
from PyQt5.QtGui import QIcon, QFont
from PyQt5.QtCore import Qt
class ProductManagement(QWidget):
def __init__(self):
super().__init__()
self.products = [] # 用于存储商品信息的列表
self.initUI()
def initUI(self):
# 设置样式表
self.setStyleSheet("""
QWidget {
}
QLabel {
font-size: 20px;
font-weight: bold;
margin-top: 20px;
margin-bottom: 20px;
}
QPushButton {
background-color: #007acc;
color: white;
border: none;
padding: 10px 20px;
font-size: 14px;
border-radius: 5px;
margin: 10px 0;
}
QPushButton:hover {
background-color: #005ca2;
}
QTableWidget {
border: 1px solid #ccc;
margin: 10px 0;
}
QLineEdit {
font-size: 16px;
padding: 8px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
""")
# 创建布局
layout = QVBoxLayout()
# 标签
label = QLabel('商品管理')
label.setAlignment(Qt.AlignCenter)
label.setFont(QFont("Arial", 20, QFont.Bold))
layout.addWidget(label)
# 表格
self.table = QTableWidget()
self.table.setColumnCount(4) # 设置列数
self.table.setHorizontalHeaderLabels(['ID', '名称', '价格', '库存']) # 设置列标题
self.update_table() # 初始化表格内容
layout.addWidget(self.table)
# 插入一个可伸缩的空间，使标签占据一小部分
layout.addStretch(1)
# 输入框
self.name_input = QLineEdit()
self.name_input.setPlaceholderText('商品名称')
layout.addWidget(self.name_input)
self.price_input = QLineEdit()
self.price_input.setPlaceholderText('商品价格')
layout.addWidget(self.price_input)
self.stock_input = QLineEdit()
self.stock_input.setPlaceholderText('商品库存')
layout.addWidget(self.stock_input)
# 按钮
add_product_button = QPushButton('添加商品')
add_product_button.setIcon(QIcon('icons/add.png')) # 假设有一个添加图标的文件
add_product_button.clicked.connect(self.add_product)
layout.addWidget(add_product_button)
modify_product_button = QPushButton('修改商品')
modify_product_button.setIcon(QIcon('icons/modify.png')) # 假设有一个修改图标的文件
modify_product_button.clicked.connect(self.modify_product)
layout.addWidget(modify_product_button)
delete_product_button = QPushButton('删除商品')
delete_product_button.setIcon(QIcon('icons/delete.png')) # 假设有一个删除图标的文件
delete_product_button.clicked.connect(self.delete_product)
layout.addWidget(delete_product_button)
# 插入另一个可伸缩的空间，使按钮占据大部分
layout.addStretch(4)
# 设置布局
self.setLayout(layout)
def update_table(self):
self.table.setRowCount(len(self.products))
for row, product in enumerate(self.products):
for column, value in enumerate(product):
item = QTableWidgetItem(str(value))
self.table.setItem(row, column, item)
def add_product(self):
name = self.name_input.text().strip()
price = self.price_input.text().strip()
stock = self.stock_input.text().strip()
if not (name and price and stock):
QMessageBox.warning(self, '警告', '请填写所有字段！')
return
try:
price = float(price)
stock = int(stock)
except ValueError:
QMessageBox.warning(self, '警告', '价格必须是数字，库存必须是整数！')
return
new_id = len(self.products) + 1
self.products.append([new_id, name, price, stock])
self.update_table()
self.clear_inputs()
def modify_product(self):
selected_items = self.table.selectedItems()
if not selected_items:
QMessageBox.warning(self, '警告', '请选择要修改的商品！')
return
row = selected_items[0].row()
product_id = int(self.table.item(row, 0).text())
name = self.name_input.text().strip()
price = self.price_input.text().strip()
stock = self.stock_input.text().strip()
if not (name and price and stock):
QMessageBox.warning(self, '警告', '请填写所有字段！')
return
try:
price = float(price)
stock = int(stock)
except ValueError:
QMessageBox.warning(self, '警告', '价格必须是数字，库存必须是整数！')
return
for product in self.products:
if product[0] == product_id:
product[1] = name
product[2] = price
product[3] = stock
break
self.update_table()
self.clear_inputs()
def delete_product(self):
selected_items = self.table.selectedItems()
if not selected_items:
QMessageBox.warning(self, '警告', '请选择要删除的商品！')
return
row = selected_items[0].row()
product_id = int(self.table.item(row, 0).text())
self.products = [product for product in self.products if product[0] != product_id]
self.update_table()
def clear_inputs(self):
self.name_input.clear()
self.price_input.clear()
self.stock_input.clear()
if __name__ == "__main__":
import sys
from PyQt5.QtWidgets import QApplication
app = QApplication(sys.argv)
window = ProductManagement()
window.show()
sys.exit(app.exec_())
4、员工管理界面：
截图：
点击员工id，即可查看员工具体信息
点击对应按钮还可以实现删除新增员工信息等功能
核心代码：
from PyQt5.QtWidgets import QWidget, QVBoxLayout, QPushButton, QLabel, QTableWidget, QTableWidgetItem, QDialog, \
QFormLayout, QLineEdit, QTextEdit, QHBoxLayout, QLabel as QLabelImage, QApplication, QMessageBox
from PyQt5.QtGui import QPixmap, QFont
from PyQt5.QtCore import Qt
import sys
class EmployeeInfoDialog(QDialog):
def __init__(self, employee_data, parent=None):
super(EmployeeInfoDialog, self).__init__(parent)
self.setWindowTitle('员工信息')
self.setGeometry(100, 100, 800, 600) # 设置对话框的初始大小
main_layout = QVBoxLayout()
# 创建一个水平布局来放置照片和基本信息
top_layout = QHBoxLayout()
# 加载员工照片
photo_label = QLabelImage()
pixmap = QPixmap("1.jpg") # 替换为实际路径
photo_label.setPixmap(pixmap.scaledToWidth(300)) # 调整照片大小
# 基本信息布局
form_layout = QFormLayout()
for key, value in employee_data.items():
label = QLabel(key + ': ')
label.setFont(QFont("Arial", 14)) # 设置字体大小
if isinstance(value, str): # 如果值是字符串，则直接设置文本
text_widget = QLabel(value)
text_widget.setFont(QFont("Arial", 14)) # 设置字体大小
else: # 否则假设它是可编辑的，比如电话号码等
text_widget = QLineEdit(str(value))
text_widget.setReadOnly(True)
text_widget.setFont(QFont("Arial", 14)) # 设置字体大小
form_layout.addRow(label, text_widget)
# 备注区域
note_label = QLabel('备注:')
note_label.setFont(QFont("Arial", 14)) # 设置字体大小
note_text_area = QTextEdit()
note_text_area.setFont(QFont("Arial", 14)) # 设置字体大小
note_text_area.setPlainText(employee_data.get('备注', '')) # 默认为空白
# 组合布局
top_layout.addWidget(photo_label)
top_layout.addLayout(form_layout)
main_layout.addLayout(top_layout)
main_layout.addWidget(note_label)
main_layout.addWidget(note_text_area)
self.setLayout(main_layout)
class EmployeeManagement(QWidget):
def __init__(self):
super().__init__()
self.initUI()
self.loadSampleData()
def initUI(self):
layout = QVBoxLayout()
# 添加标题
title_label = QLabel('员工管理')
title_label.setFont(QFont("Arial", 18, QFont.Bold))
layout.addWidget(title_label)
# 创建一个表格来显示员工信息
self.table = QTableWidget(0, 5) # 增加一列用于删除按钮
self.table.setHorizontalHeaderLabels(['ID', '名字', '职位', '部门', '操作'])
# 新增员工按钮
add_employee_button = QPushButton('新增员工')
add_employee_button.clicked.connect(self.addEmployee)
layout.addWidget(self.table)
layout.addWidget(add_employee_button)
self.setLayout(layout)
def loadSampleData(self):
# 示例数据
employees = [
{'ID': '001', '名字': '刘安康', '职位': '前台', '部门': '行政部', '备注': '优秀员工'},
{'ID': '002', '名字': '李四', '职位': '产品经理', '部门': '产品部', '备注': '经验丰富'},
{'ID': '003', '名字': '王五', '职位': '销售经理', '部门': '销售部', '备注': '业绩突出'}
]
# 将数据加载到表格中
for row, employee in enumerate(employees):
self.table.insertRow(row)
for col, (key, value) in enumerate(employee.items()):
item = QTableWidgetItem(value)
self.table.setItem(row, col, item)
# 添加删除按钮
delete_button = QPushButton('删除')
delete_button.clicked.connect(lambda _, r=row: self.deleteEmployee(r))
self.table.setCellWidget(row, 4, delete_button)
def addEmployee(self):
# 弹出新增员工对话框
dialog = EmployeeInfoDialog({}, self)
if dialog.exec_() == QDialog.Accepted:
# 假设这里处理了对话框返回的数据并添加到表格中
new_employee = {
'ID': '新ID',
'名字': '新名字',
'职位': '新职位',
'部门': '新部门',
'备注': '新备注'
}
row = self.table.rowCount()
self.table.insertRow(row)
for col, (key, value) in enumerate(new_employee.items()):
item = QTableWidgetItem(value)
self.table.setItem(row, col, item)
# 添加删除按钮
delete_button = QPushButton('删除')
delete_button.clicked.connect(lambda _, r=row: self.deleteEmployee(r))
self.table.setCellWidget(row, 4, delete_button)
def deleteEmployee(self, row):
reply = QMessageBox.question(self, '确认删除', '确定要删除此员工信息吗？',
QMessageBox.Yes | QMessageBox.No, QMessageBox.No)
if reply == QMessageBox.Yes:
self.table.removeRow(row)
def showEmployeeInfo(self, row, column):
# 获取选中行的数据
id = self.table.item(row, 0).text()
name = self.table.item(row, 1).text()
position = self.table.item(row, 2).text()
department = self.table.item(row, 3).text()
# 创建一个字典来存储员工数据
employee_data = {
'ID': id,
'名字': name,
'职位': position,
'部门': department,
'备注': '这里是备注内容' # 暂定为固定文字，实际应用中应从数据库或其他来源获取
}
# 显示员工信息对话框
dialog = EmployeeInfoDialog(employee_data, self)
dialog.exec_()
if __name__ == '__main__':
app = QApplication(sys.argv)
window = EmployeeManagement()
window.show()
sys.exit(app.exec_())
【关键步骤】
（1）输入账号密码点击登陆键既可登录到该程序
（2）登陆上来以后在子菜单上进行选择，我们这里选择的是员工管理
（3）页面会出现员工基本信息
（4）单击员工id可以查看员工具体信息
（5）点击删除新增等按钮可以实现员工的增删改查等基本操作
【实验体会】
通过这次实验，我成功学会了构建了一个简单的C/S管理界面，掌握了 QTableWidget、QPushButton 和 QDialog 等控件的使用，实现了信息的新增、编辑和删除功能，并通过 QMessageBox 提升了用户体验。这次实验不仅让我学会了C/S相关开发，还提高了我的编程能力和问题解决能力。
浙公网安备 33010602011771号