基于springboot vue3 工商局商家管理系统设计与实现

博主介绍：专注于Java（springboot ssm springcloud等开发框架） vue .net php phython node.js uniapp小程序等诸多技术领域和毕业项目实战、企业信息化系统建设，从业十五余年开发设计教学工作
☆☆☆ 精彩专栏推荐订阅☆☆☆☆☆不然下次找不到哟
我的博客空间发布了1000+毕设题目方便大家学习使用
感兴趣的可以先收藏起来，还有大家在毕设选题，项目以及论文编写等相关问题都可以给我留言咨询，希望帮助更多的人
更多项目地址介绍翰文编程-CSDN博客

系统实现

3系统设计

系统设计要提出具体的软件功能及要求，是系统分析后进行的流程。它的主要目的是提供软件开发的思路和具体流程，是系统运行的根本保障。它要确定软件各个模块的功能，并形成相应的流程图，方便设计者思考。同时要将每个模块需要完成的任务详细的表达出来，并对每个模块进行具体化的设计分析，提供相当数量的设计方案，再通过设计者的详细分析和比对，选择出最佳的方案进行设计开发。并对相应的方案进行验证和拓展。

3.1系统功能结构

3.1.1系统结构图

系统结构图可以把杂乱无章的模块按照设计者的思维方式进行调整排序，可以让设计者在之后的添加，修改程序内容的过程中有一个很明显的思维方向。同时结构图还可以让设计者以外的其他人更直观的看出整个系统的设计理论和设计过程。让系统的设计变的更直观。该系统的功能架构图如图3-1所示：

图3-1 工商局商家管理系统功能结构图

3.2数据库设计

3.2.1 数据库概念设计

从系统运行完整的角度出发，设置相应的实体，明确各实体之间的联系。下面列举整个系统中涉及核心功能的实体：

商家信息E-R图

图3-2商家信息E-R图

年检通道E-R图

图3-3年检通道E-R图

许可证申请E-R图

图3-4许可证申请E-R图

4、许可证审批E-R图

图3-5许可证审批E-R图

5、工商局商家管理系统总体E-R图

图3-6 工商局商家管理系统总体E-R图

3.2.2数据逻辑结构

在综合了以上对系统的设计，和对数据库的分析，同时结合了以往对数据库的使用经验后，构建了以下几张表，以下为每张表的内容：

表3-1：token表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
userid	bigint		用户id
username	varchar	100	用户名
tablename	varchar	100	表名
role	varchar	100	角色
token	varchar	200	密码
addtime	timestamp		新增时间		CURRENT_TIMESTAMP
expiratedtime	timestamp		过期时间		CURRENT_TIMESTAMP

表3-2：网站介绍

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
title	varchar	200	标题
subtitle	varchar	200	副标题
content	longtext	4294967295	内容
picture1	longtext	4294967295	图片1
picture2	longtext	4294967295	图片2
picture3	longtext	4294967295	图片3

表3-3：我的收藏

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
refid	bigint		refid
tablename	varchar	200	表名
name	varchar	200	名称
picture	longtext	4294967295	图片
type	varchar	200	类型(1:收藏,21:赞,22:踩,31:竞拍参与,41:关注)
inteltype	varchar	200	推荐类型
remark	varchar	200	备注
userid	bigint		用户id

表3-4：商家

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
gongsimingcheng	varchar	200	公司名称
fadingdaibiaoren	varchar	200	法定代表人
mima	varchar	200	密码
fengmian	longtext	4294967295	封面
lianxidianhua	varchar	200	联系电话
gongsidizhi	varchar	200	公司地址

表3-5：年审提醒

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
xukezhengbianhao	varchar	200	许可证编号
gongsimingcheng	varchar	200	公司名称
fadingdaibiaoren	varchar	200	法定代表人
gongsidizhi	varchar	200	公司地址
zhucezijin	varchar	200	注册资金
leixing	varchar	200	类型
jingyingfanwei	longtext	4294967295	经营范围
shoucifazhengri	varchar	200	首次发证日
youxiaoqi	varchar	200	有效期
tixingriqi	datetime		提醒日期
tixingneirong	varchar	200	提醒内容

表3-6：年检通道

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
didian	varchar	200	地点
fengmian	longtext	4294967295	封面
shangbanshijian	varchar	200	上班时间
zixundianhua	varchar	200	咨询电话
keyuerenshu	int		可约人数
storeupnum	int		收藏数量

表3-7：公告信息

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
title	varchar	200	标题
introduction	longtext	4294967295	简介
picture	longtext	4294967295	图片
content	longtext	4294967295	内容

表3-8：注册表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
zhucebiaomingcheng	varchar	200	注册表名称
fengmian	longtext	4294967295	封面
zhucexuzhi	longtext	4294967295	注册须知
zhuceliucheng	longtext	4294967295	注册流程
fujian	longtext	4294967295	附件
fabushijian	datetime		发布时间
storeupnum	int		收藏数量

表3-9：菜单

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
menujson	longtext	4294967295	菜单

表3-10：许可证申请

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
gongsimingcheng	varchar	200	公司名称
fadingdaibiaoren	varchar	200	法定代表人
gongsidizhi	varchar	200	公司地址
zhucezijin	varchar	200	注册资金
leixing	varchar	200	类型
jingyingfanwei	longtext	4294967295	经营范围
xiangguanfujian	longtext	4294967295	相关附件
chengliriqi	date		成立日期

表3-11：配置文件

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
name	varchar	100	配置参数名称
value	varchar	100	配置参数值

表3-12：许可证审批

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
xukezhengbianhao	varchar	200	许可证编号
tupian	longtext	4294967295	图片
gongsimingcheng	varchar	200	公司名称
fadingdaibiaoren	varchar	200	法定代表人
gongsidizhi	varchar	200	公司地址
chengliriqi	date		成立日期
zhucezijin	varchar	200	注册资金
leixing	varchar	200	类型
jingyingfanwei	longtext	4294967295	经营范围
shoucifazhengri	datetime		首次发证日
youxiaoqi	varchar	200	有效期

表3-13：管理员

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
username	varchar	200	用户名
password	varchar	200	密码
role	varchar	200	角色

4系统详细设计

4.1登录模块设计

这个功能模块用来让工作人员进行后端登录。管理人员通过网站。在输入自己的用户名和密码、角色进行登录，登录后管理人员就可以对后台的信息相关的操作。

首先，设计后端管理的登陆页面。对页面的各个板块进行详细的设计，规划它们的字体大小，背景颜色，字体颜色和板块大小等。还要加上图片，让页面被设计的更加美观。以便让以后需要登陆的管理员可以直观的使用。

4.2 前台商家功能模块

当游客打开系统的网址后，首先看到的就是首页界面。在这里，游客能够看到工商局商家管理系统的导航条显示首页、网站介绍、公告信息、注册表、年检通道、个人中心。系统首页界面如图4-1所示：

图4-1系统首页界面

在注册流程中，商家在Vue前端填写必要信息（如用户名、密码等）并提交。前端将这些信息通过HTTP请求发送到Java后端。后端处理这些信息，检查用户名是否唯一，并将商家数据存入MySQL数据库。完成后，后端向前端发送注册成功的确认，前端随后通知商家完成注册。这个过程实现了新商家的数据收集、验证和存储。如图4-2所示：

图4-2商家注册界面

在登录流程中，商家首先在Vue前端界面输入用户名和密码。这些信息通过HTTP请求发送到Java后端。后端接收请求，通过与MySQL数据库交互验证商家凭证。如果认证成功，后端会返回给前端，允许商家访问系统。这个过程涵盖了从商家输入到系统验证和响应的全过程。如图4-3所示：

图4-3 商家登录界面

商家点击注册表，在注册表页面的输入栏填写注册表名称，进行查询，然后查看注册表名称、封面、附件、发布时间等信息；还可以进行下载、收藏等操作；如图4-4所示：

图4-4注册表页面

商家点击公告信息，在公告信息页面的输入栏填写标题，进行搜索，然后查看公告信息等；如图4-5所示：

图4-5公告信息页面

商家点击个人中心，在个人中心页面可以更新个人详细信息，还可以对修改密码、我的收藏管理、许可证申请管理进行详细操作，如图4-6所示：

图4-6个人中心界面

4.3后台管理员功能模块

管理员通过登录页面填账号和密码，完成后进行登录，如图4-7所示。

图4-7管理员登录页面

管理员登录进入工商局商家管理系统的实现可以查看首页、许可证申请管理、注册表管理、轮播图管理、年检通道管理、公告信息管理、网站介绍管理、商家管理等信息，如图4-8所示。

图4-8管理员功能界面图

主要代码


<template>
	<div>
		<div class="app-contain">
			<div class="list_search_view">
				<el-form :model="searchQuery" class="search_form" >
					<div class="search_view">
						<div class="search_label">
							注册表名称：
						</div>
						<div class="search_box">
							<el-input class="search_inp" v-model="searchQuery.zhucebiaomingcheng" placeholder="注册表名称"
								clearable>
							</el-input>
						</div>
					</div>
					<div class="search_btn_view">
						<el-button class="search_btn" type="primary" @click="searchClick()" size="small">搜索</el-button>
					</div>
				</el-form>
				<br>
				<div class="btn_view">
					<el-button type="success" @click="addClick" v-if="btnAuth('zhucebiao','新增')">新增</el-button>
					<el-button  v-if=" btnAuth('zhucebiao','查看')" type="info"  :disabled="selRows.length==1?false:true" @click="infoClick(null)">详情</el-button>
					<el-button type="primary" :disabled="selRows.length==1?false:true" @click="editClick" v-if=" btnAuth('zhucebiao','修改')">修改</el-button>
					<el-button type="danger" :disabled="selRows.length?false:true" @click="delClick(null)"  v-if="btnAuth('zhucebiao','删除')">删除</el-button>
				</div>
			</div>
			<br>
			<el-table
				v-loading="listLoading"
				border 
				:stripe='true'
				@selection-change="handleSelectionChange" 
				ref="table"
				v-if="btnAuth('zhucebiao','查看')"
				:data="list"
				@row-click="listChange">
				<el-table-column :resizable='true' align="left" header-align="center" type="selection" width="55" />
				<el-table-column label="序号" width="70" :resizable='true' :sortable='true' align="left" header-align="center">
					<template #default="scope">{{ scope.$index + 1}}</template>
				</el-table-column>
				<el-table-column
					 :resizable='true' 
					 :sortable='true' 
					 align="left" 
					 header-align="center"
					label="注册表名称">
					<template #default="scope">
						{{scope.row.zhucebiaomingcheng}}
					</template>
				</el-table-column>
				<el-table-column label="封面" width="120" :resizable='true' :sortable='true' align="left" header-align="center">
					<template #default="scope">
						<div v-if="scope.row.fengmian">
							<el-image v-if="scope.row.fengmian.substring(0,4)=='http'" preview-teleported
								:preview-src-list="[scope.row.fengmian.split(',')[0]]"
								:src="scope.row.fengmian.split(',')[0]" style="width:100px;height:100px"></el-image>
							<el-image v-else preview-teleported
								:preview-src-list="[$config.url+scope.row.fengmian.split(',')[0]]"
								:src="$config.url+scope.row.fengmian.split(',')[0]" style="width:100px;height:100px">
							</el-image>
						</div>
						<div v-else>无图片</div>
					</template>
				</el-table-column>
				<el-table-column label="附件" :resizable='true' :sortable='true' align="left" header-align="center">
					<template #default="scope">
						<el-button v-if="scope.row.fujian" type="text" size="small" @click="download(scope.row.fujian)">下载</el-button>
						<el-button v-else disabled type="text" size="small">无</el-button>
					</template>
				</el-table-column>
				<el-table-column
					 :resizable='true' 
					 :sortable='true' 
					 align="left" 
					 header-align="center"
					label="发布时间">
					<template #default="scope">
						{{scope.row.fabushijian}}
					</template>
				</el-table-column>
				<el-table-column label="操作" width="300" :resizable='true' :sortable='true' align="left" header-align="center">
					<template #default="scope">
						<el-button type="info" v-if=" btnAuth('zhucebiao','查看')" @click="infoClick(scope.row.id)">详情</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination 
				background
				:layout="layouts.join(',')"
				:total="total" 
				:page-size="listQuery.limit"
				prev-text="<"
				next-text=">"
				:hide-on-single-page="true"
				:style='{"padding":"0","margin":"20px 0 0","whiteSpace":"nowrap","color":"#333","textAlign":"center","width":"100%","fontWeight":"500"}'
				@size-change="sizeChange"
				@current-change="currentChange" 
				@prev-click="prevClick"
				@next-click="nextClick"  />
		</div>
		<formModel ref="formRef" @formModelChange="formModelChange"></formModel>
	</div>
</template>
<script setup>
	import axios from 'axios'
	import {
		reactive,
		ref,
		getCurrentInstance,
		nextTick,
		onMounted,
		watch,
	} from 'vue'
	import {
		useRoute,
		useRouter
	} from 'vue-router'
	import {
		ElMessageBox
	} from 'element-plus'
	const context = getCurrentInstance()?.appContext.config.globalProperties;
	import formModel from './formModel.vue'
	
	//基础信息
	const tableName = 'zhucebiao'
	const formName = '注册表'
	const route = useRoute()
	//基础信息
	onMounted(()=>{
	})
	//列表数据
	const list = ref(null)
	const table = ref(null)
	const listQuery = ref({
		page: 1,
		limit: 20,
		sort: 'id',
		order: 'desc'
	})
	const searchQuery = ref({})
	const selRows = ref([])
	const listLoading = ref(false)
	const listChange = (row) =>{
		nextTick(()=>{
			table.value.clearSelection()
			table.value.toggleRowSelection(row)
		})
	}
	//列表
	const getList = () => {
		listLoading.value = true
		let params = JSON.parse(JSON.stringify(listQuery.value))
		params['sort'] = 'id'
		params['order'] = 'desc'
		if(searchQuery.value.zhucebiaomingcheng&&searchQuery.value.zhucebiaomingcheng!=''){
			params['zhucebiaomingcheng'] = '%' + searchQuery.value.zhucebiaomingcheng + '%'
		}
		context?.$http({
			url: `${tableName}/page`,
			method: 'get',
			params: params
		}).then(res => {
			listLoading.value = false
			list.value = res.data.data.list
			total.value = Number(res.data.data.total)
		})
	}
	//删
	const delClick = (id) => {
		let ids = ref([])
		if (id) {
			ids.value = [id]
		} else {
			if (selRows.value.length) {
				for (let x in selRows.value) {
					ids.value.push(selRows.value[x].id)
				}
			} else {
				return false
			}
		}
		ElMessageBox.confirm(`是否删除选中${formName}`, '提示', {
			confirmButtonText: '是',
			cancelButtonText: '否',
			type: 'warning',
		}).then(() => {
			context?.$http({
				url: `${tableName}/delete`,
				method: 'post',
				data: ids.value
			}).then(res => {
				context?.$toolUtil.message('删除成功', 'success',()=>{
					getList()
				})
			})
		})
	}
	//多选
	const handleSelectionChange = (e) => {
		selRows.value = e
	}
	//列表数据
	//分页
	const total = ref(0)
	const layouts = ref(["total","prev","pager","next","jumper"])
	const sizeChange = (size) => {
		listQuery.value.limit = size
		getList()
	}
	const currentChange = (page) => {
		listQuery.value.page = page
		getList()
	}
	const prevClick = () => {
		listQuery.value.page = listQuery.value.page - 1
		getList()
	}
	const nextClick = () => {
		listQuery.value.page = listQuery.value.page + 1
		getList()
	}
	//分页
	//权限验证
	const btnAuth = (e,a)=>{
		return context?.$toolUtil.isAuth(e,a)
	}
	//搜索
	const searchClick = () => {
		listQuery.value.page = 1
		getList()
	}
	//表单
	const formRef = ref(null)
	const formModelChange=()=>{
		searchClick()
	}
	const addClick = ()=>{
		formRef.value.init()
	}
	const editClick = ()=>{
		if(selRows.value.length){
			formRef.value.init(selRows.value[0].id,'edit')
		}
	}
	
	const infoClick = (id=null)=>{
		if(id){
			formRef.value.init(id,'info')
		}
		else if(selRows.value.length){
			formRef.value.init(selRows.value[0].id,'info')
		}
	}
	// 表单
	// 预览文件
	const preClick = (file) =>{
		if(!file){
			context?.$toolUtil.message('文件不存在','error')
		}
		window.open(context?.$config.url + file)
		// const a = document.createElement('a');
		// a.style.display = 'none';
		// a.setAttribute('target', '_blank');
		// file && a.setAttribute('download', file);
		// a.href = context?.$config.url + file;
		// document.body.appendChild(a);
		// a.click();
		// document.body.removeChild(a);
	}
	// 下载文件
	const download = (file) => {
		if(!file){
			context?.$toolUtil.message('文件不存在','error')
		}
		let arr = file.replace(new RegExp('file/', "g"), "")
		axios.get((location.href.split(context?.$config.name).length>1 ? location.href.split(context?.$config.name)[0] :'') + context?.$config.name + '/file/download?fileName=' + arr, {
			headers: {
				token: context?.$toolUtil.storageGet('Token')
			},
			responseType: "blob"
		}).then(({
			data
		}) => {
			const binaryData = [];
			binaryData.push(data);
			const objectUrl = window.URL.createObjectURL(new Blob(binaryData, {
				type: 'application/pdf;chartset=UTF-8'
			}))
			const a = document.createElement('a')
			a.href = objectUrl
			a.download = arr
			// a.click()
			// 下面这个写法兼容火狐
			a.dispatchEvent(new MouseEvent('click', {
				bubbles: true,
				cancelable: true,
				view: window
			}))
			window.URL.revokeObjectURL(data)
		})
	}


	//初始化
	const init = () => {
		getList()
	}
	init()
</script>
<style lang="scss" scoped>
	
	// 操作盒子
	.list_search_view {
		margin: 0 0 20px;
		// 搜索盒子
		.search_form {
			display: flex;
			align-items: center;
			// 子盒子
			.search_view {
				margin: 0 14px 0 0;
				display: flex;
				align-items: center;
				// 搜索label
				.search_label {
					margin: 0 10px 0 0;
					color: #787878;
					font-weight: 500;
					display: inline-block;
					font-size: 14px;
					line-height: 40px;
					height: 40px;
				}
				// 搜索item
				.search_box {
					display: flex;
					width: calc(100% - 100px);
					// 输入框
					:deep(.search_inp) {
						border: none;
						border-radius: 20px;
						padding: 0 10px;
						width: 100%;
						outline-offset: 4px;
						line-height: 36px;
						box-sizing: border-box;
						//去掉默认样式
						.el-input__wrapper{
							border: none;
							box-shadow: none;
							background: none;
							border-radius: 0;
							height: 100%;
							padding: 0;
						}
						.is-focus {
							box-shadow: none !important;
						}
					}
				}
			}
			// 搜索按钮盒子
			.search_btn_view {
				width: 20%;
				display: flex;
				padding: 0 20px;
				// 搜索按钮
				.search_btn {
					border: 0;
					cursor: pointer;
					border-radius: 4px;
					padding: 0 24px;
					box-shadow: inset 0px 4px 10px 0px rgba(147,147,147,0.302);
					outline: 4px solid #EAF5FF;
					color: #2C2C2C;
					background: #96C6EE;
					width: auto;
					font-size: 14px;
					height: 40px;
				}
				// 搜索按钮-悬浮
				.search_btn:hover {
					background: rgba(150, 198, 238, 0.5);
				}
			}
		}
		//头部按钮盒子
		.btn_view {
			margin: 20px 0;
			display: flex;
			// 其他
			:deep(.el-button--default){
				border: none;
				border-radius: 4px;
				padding: 0 24px;
				box-shadow: inset 0px 4px 10px 0px rgba(147,147,147,0.302);
				outline: 4px solid #EAF5FF;
				color: #2C2C2C;
				background: #96C6EE;
				width: auto;
				font-size: 14px;
				height: 30px;
			}
			// 其他-悬浮
			:deep(.el-button--default:hover){
				background: rgba(150, 198, 238, 0.5);
			}
			// 新增
			:deep(.el-button--success){
				border: none;
				border-radius: 4px;
				padding: 0 24px;
				box-shadow: inset 0px 4px 10px 0px rgba(147,147,147,0.302);
				outline: 4px solid #EAF5FF;
				color: #2C2C2C;
				background: #96C6EE;
				width: auto;
				font-size: 14px;
				height: 30px;
			}
			// 新增-悬浮
			:deep(.el-button--success:hover){
				background: rgba(150, 198, 238, 0.5);
			}
			// 修改
			:deep(.el-button--primary){
				border: none;
				border-radius: 4px;
				padding: 0 24px;
				box-shadow: inset 0px 4px 10px 0px rgba(147,147,147,0.302);
				outline: 4px solid #EAF5FF;
				color: #2C2C2C;
				background: #96C6EE;
				width: auto;
				font-size: 14px;
				height: 30px;
			}
			// 修改-悬浮
			:deep(.el-button--primary:hover){
				background: rgba(150, 198, 238, 0.5);
			}
			// 详情
			:deep(.el-button--info){
				border: none;
				border-radius: 4px;
				padding: 0 24px;
				box-shadow: inset 0px 4px 10px 0px rgba(147,147,147,0.302);
				outline: 4px solid #EAF5FF;
				color: #2C2C2C;
				background: #96C6EE;
				width: auto;
				font-size: 14px;
				height: 30px;
			}
			// 详情-悬浮
			:deep(.el-button--info:hover){
				background: rgba(150, 198, 238, 0.5);
			}
			// 删除
			:deep(.el-button--danger){
				border: none;
				border-radius: 4px;
				padding: 0 24px;
				box-shadow: inset 0px 4px 10px 0px rgba(147,147,147,0.302);
				outline: 4px solid #EAF5FF;
				color: #2C2C2C;
				background: #96C6EE;
				width: auto;
				font-size: 14px;
				height: 30px;
			}
			// 删除-悬浮
			:deep(.el-button--danger:hover){
				background: rgba(150, 198, 238, 0.5);
			}
			// 统计
			:deep(.el-button--warning){
				border: none;
				border-radius: 4px;
				padding: 0 24px;
				box-shadow: inset 0px 4px 10px 0px rgba(147,147,147,0.302);
				outline: 4px solid #EAF5FF;
				color: #2C2C2C;
				background: #96C6EE;
				width: auto;
				font-size: 14px;
				height: 30px;
			}
			// 统计-悬浮
			:deep(.el-button--warning:hover){
				background: rgba(150, 198, 238, 0.5);
			}
		}
	}
	// 表格样式
	.el-table {
		border-radius: 10px;
		padding: 0;
		width: 100%;
		border-color: #eee;
		border-width: 0;
		border-style: solid;
		:deep(.el-table__header-wrapper) {
			thead {
				color: rgba(98, 184, 255, 1);
				background: #fff;
				font-weight: 500;
				width: 100%;
				tr {
					background: #fff;
					th {
						padding: 12px 0;
						border-color: #eee;
						border-width: 0;
						border-style: solid;
						text-align: left;
						.cell {
							padding: 0 10px;
							word-wrap: normal;
							word-break: break-all;
							white-space: normal;
							font-weight: bold;
							display: inline-block;
							vertical-align: middle;
							width: 100%;
							line-height: 24px;
							position: relative;
							text-overflow: ellipsis;
						}
					}
				}
			}
		}
		:deep(.el-table__body-wrapper) {
			tbody {
				width: 100%;
				tr {
					background: #fff;
					td {
						padding: 12px 0;
						color: #999;
						background: #fff;
						border-color: #eee;
						border-width: 0;
						border-style: solid;
						text-align: left;
						.cell {
							padding: 6px 10px;
							overflow: hidden;
							word-break: break-all;
							white-space: normal;
							line-height: 24px;
							text-overflow: ellipsis;
							// 编辑
							.el-button--primary {
								border: none;
								border-radius: 4px;
								padding: 0 24px;
								box-shadow: inset 0px 4px 10px 0px rgba(147,147,147,0.302);
								outline: 4px solid #EAF5FF;
								margin: 8px;
								color: #2c2c2c;
								background: #96C6EE;
								width: auto;
								font-size: 14px;
								height: 30px;
							}
							// 编辑-悬浮
							.el-button--primary:hover {
								background: rgba(150, 198, 238, 0.5);
							}
							// 详情
							.el-button--info {
								border: none;
								border-radius: 4px;
								padding: 0 24px;
								box-shadow: inset 0px 4px 10px 0px rgba(147,147,147,0.302);
								outline: 4px solid #EAF5FF;
								margin: 8px;
								color: #2c2c2c;
								background: #96C6EE;
								width: auto;
								font-size: 14px;
								height: 30px;
							}
							// 详情-悬浮
							.el-button--info:hover {
								background: rgba(150, 198, 238, 0.5);
							}
							// 删除
							.el-button--danger {
								border: none;
								border-radius: 4px;
								padding: 0 24px;
								box-shadow: inset 0px 4px 10px 0px rgba(147,147,147,0.302);
								outline: 4px solid #EAF5FF;
								margin: 8px;
								color: #2c2c2c;
								background: #96C6EE;
								width: auto;
								font-size: 14px;
								height: 30px;
							}
							// 删除-悬浮
							.el-button--danger:hover {
								background: rgba(150, 198, 238, 0.5);
							}
							// 跨表
							.el-button--success {
								border: none;
								border-radius: 4px;
								padding: 0 24px;
								box-shadow: inset 0px 4px 10px 0px rgba(147,147,147,0.302);
								outline: 4px solid #EAF5FF;
								margin: 8px;
								color: #2c2c2c;
								background: #96C6EE;
								width: auto;
								font-size: 14px;
								height: 30px;
							}
							// 跨表-悬浮
							.el-button--success:hover {
								background: rgba(150, 198, 238, 0.5);
							}
							// 操作
							.el-button--warning {
								border: none;
								border-radius: 4px;
								padding: 0 24px;
								box-shadow: inset 0px 4px 10px 0px rgba(147,147,147,0.302);
								outline: 4px solid #EAF5FF;
								margin: 8px;
								color: #2c2c2c;
								background: #96C6EE;
								width: auto;
								font-size: 14px;
								height: 30px;
							}
							// 操作-悬浮
							.el-button--warning:hover {
								background: rgba(150, 198, 238, 0.5);
							}
						}
					}
				}
				tr.el-table__row--striped {
					td {
						background: rgba(239, 241, 243, 1);
					}
				}
				tr:hover {
					td {
						padding: 12px 0;
						color: #fff;
						background: rgba(98, 184, 255, 1);
						border-color: #eee;
						border-width: 0;
						border-style: solid;
						text-align: left;
					}
				}
			}
		}
	}
	// 分页器
	.el-pagination {
		// 总页码
		:deep(.el-pagination__total) {
			margin: 0 10px 0 0;
			color: #666;
			font-weight: 400;
			display: inline-block;
			vertical-align: top;
			font-size: 13px;
			line-height: 28px;
			height: 28px;
		}
		// 上一页
		:deep(.btn-prev) {
			border: none;
			border-radius: 2px;
			padding: 0;
			margin: 0 5px;
			color: #666;
			background: #f4f4f5;
			display: inline-block;
			vertical-align: top;
			font-size: 13px;
			line-height: 28px;
			min-width: 35px;
			height: 28px;
		}
		// 下一页
		:deep(.btn-next) {
			border: none;
			border-radius: 2px;
			padding: 0;
			margin: 0 5px;
			color: #666;
			background: #f4f4f5;
			display: inline-block;
			vertical-align: top;
			font-size: 13px;
			line-height: 28px;
			min-width: 35px;
			height: 28px;
		}
		// 上一页禁用
		:deep(.btn-prev:disabled) {
			border: none;
			cursor: not-allowed;
			border-radius: 2px;
			padding: 0;
			margin: 0 5px;
			color: #C0C4CC;
			background: #f4f4f5;
			display: inline-block;
			vertical-align: top;
			font-size: 13px;
			line-height: 28px;
			height: 28px;
		}
		// 下一页禁用
		:deep(.btn-next:disabled) {
			border: none;
			cursor: not-allowed;
			border-radius: 2px;
			padding: 0;
			margin: 0 5px;
			color: #C0C4CC;
			background: #f4f4f5;
			display: inline-block;
			vertical-align: top;
			font-size: 13px;
			line-height: 28px;
			height: 28px;
		}
		// 页码
		:deep(.el-pager) {
			padding: 0;
			margin: 0;
			display: inline-block;
			vertical-align: top;
			// 数字
			.number {
				cursor: pointer;
				padding: 0 4px;
				margin: 0 5px;
				color: #666;
				display: inline-block;
				vertical-align: top;
				font-size: 13px;
				line-height: 28px;
				border-radius: 2px;
				background: #f4f4f5;
				text-align: center;
				min-width: 30px;
				height: 28px;
			}
			// 数字悬浮
			.number:hover {
				cursor: pointer;
				padding: 0 4px;
				margin: 0 5px;
				color: #fff;
				display: inline-block;
				vertical-align: top;
				font-size: 13px;
				line-height: 28px;
				border-radius: 2px;
				background: linear-gradient(133deg, #9CC8EB 0%, #61B7FE 100%);
				text-align: center;
				min-width: 30px;
				height: 28px;
			}
			// 选中
			.number.is-active {
				cursor: default;
				padding: 0 4px;
				margin: 0 5px;
				color: #FFF;
				display: inline-block;
				vertical-align: top;
				font-size: 13px;
				line-height: 28px;
				border-radius: 2px;
				background: linear-gradient(133deg, #9CC8EB 0%, #61B7FE 100%);
				text-align: center;
				min-width: 30px;
				height: 28px;
			}
		}
		// sizes
		:deep(.el-pagination__sizes) {
			display: inline-block;
			vertical-align: top;
			font-size: 13px;
			line-height: 28px;
			height: 28px;
			.el-select {
				border: 1px solid #DCDFE6;
				cursor: pointer;
				padding: 0;
				color: #606266;
				display: inline-block;
				font-size: 13px;
				line-height: 28px;
				border-radius: 3px;
				outline: 0;
				background: #FFF;
				width: 100%;
				text-align: center;
				height: 28px;
			}
		}
		// 跳页
		:deep(.el-pagination__jump) {
			margin: 0 0 0 24px;
			color: #606266;
			display: inline-block;
			vertical-align: top;
			font-size: 13px;
			line-height: 28px;
			height: 28px;
			// 输入框
			.el-input {
				border: 1px solid #DCDFE6;
				cursor: pointer;
				padding: 0 3px;
				color: #606266;
				display: inline-block;
				font-size: 14px;
				line-height: 28px;
				border-radius: 3px;
				outline: 0;
				background: #FFF;
				width: 100%;
				text-align: center;
				height: 28px;
				//去掉默认样式
				.el-input__wrapper{
					border: none;
					box-shadow: none;
					background: none;
					border-radius: 0;
					height: 100%;
					padding: 0;
				}
				.is-focus {
					box-shadow: none !important;
				}
			}
		}
	}
</style>

商家信息功能在视图层（view层)进行交互，比如点击“新增”按钮或填写商家信息表单。这些商家信息动作被视图层捕获并作为请求发送给相应的控制器层(control1er层)。控制器接收到这些请求后，调用服务层(service层)以执行相关的业务逻辑，例如验证输入数据的有效性和与数据库的交互。服务层处理完这些逻辑后，进一步与数据访问对象层（DAO层)交互，后者负责具体的数据操作如搜索、新增、更新或删除商家信息，并将操作结果返回给控制器。最终，控制器根据这些结果更新视图层，以便商家信息功能可以看到最新的信息或相应的操作反馈。在商家信息页面的输入栏中输入公司名称进行搜索，可以查看到商家信息详细信息，并根据需要进行修改或者删除等操作；如图4-9所示。