linbin
/
dm-design
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

综述: 优化平台端web界面样式和功能模块 

- 在摊位列表和摊位创建页面中增加绑定已存在供货商账号的功能选项
- 优化平台端web整体界面样式，统一样式规范，改善用户界面体验
- 在菜市场列表页面中优化详情查看和创建表单，增加地图定位功能和营业时间配置交互
- 重构权限管理模块的界面样式，提升视觉效果和操作体验
This commit is contained in:
linbin 2025-10-21 01:40:00 +08:00
parent f1df5b450b
commit e2f5333831
6 changed files with 657 additions and 692 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
商家端web/摊位管理/摊位列表.html
View File

@ -485,6 +485,7 @@
<option value="">请选择操作类型</option> <option value="">请选择操作类型</option>
<option value="bind_market_manager">绑定收益人是市场经营者</option> <option value="bind_market_manager">绑定收益人是市场经营者</option>
<option value="create_supplier">创建新收益人(供货商)</option> <option value="create_supplier">创建新收益人(供货商)</option>
<option value="bind_existing_supplier">绑定已存在的供货商账号</option>
</select> </select>
</div> </div>
@ -650,6 +651,10 @@
// 创建新收益人(供货商) - 显示账号和密码 // 创建新收益人(供货商) - 显示账号和密码
supplierAccountGroup.style.display = 'block'; supplierAccountGroup.style.display = 'block';
supplierPasswordGroup.style.display = 'block'; supplierPasswordGroup.style.display = 'block';
} else if (operationType === 'bind_existing_supplier') {
// 绑定已存在的供货商账号 - 只显示账号，不显示密码
supplierAccountGroup.style.display = 'block';
supplierPasswordGroup.style.display = 'none';
} else { } else {
// 绑定收益人是市场经营者 - 隐藏账号和密码 // 绑定收益人是市场经营者 - 隐藏账号和密码
supplierAccountGroup.style.display = 'none'; supplierAccountGroup.style.display = 'none';
@ -689,6 +694,17 @@
beneficiaryData.supplierAccount = supplierAccount; beneficiaryData.supplierAccount = supplierAccount;
beneficiaryData.password = password; beneficiaryData.password = password;
} }
// 如果选择了"绑定已存在的供货商账号",只需要验证供货商账号
else if (operationType === 'bind_existing_supplier') {
const supplierAccount = document.getElementById('modalSupplierAccount').value;
if (!supplierAccount) {
alert('请输入供货商账号');
return;
}
beneficiaryData.supplierAccount = supplierAccount;
}
console.log('保存收益人配置:', beneficiaryData); console.log('保存收益人配置:', beneficiaryData);
@ -696,7 +712,7 @@
alert('收益人配置已保存!'); alert('收益人配置已保存!');
// 可选:更新表格中的收益人信息 // 可选:更新表格中的收益人信息
if (currentBoothRow && operationType === 'create_supplier') { if (currentBoothRow && (operationType === 'create_supplier' || operationType === 'bind_existing_supplier')) {
const cells = currentBoothRow.querySelectorAll('td'); const cells = currentBoothRow.querySelectorAll('td');
// cells[2].textContent = '新收益人'; // 可以根据实际需求更新 // cells[2].textContent = '新收益人'; // 可以根据实际需求更新
// cells[3].textContent = beneficiaryData.supplierAccount; // cells[3].textContent = beneficiaryData.supplierAccount;

16
商家端web/摊位管理/摊位创建.html
View File

@ -405,6 +405,7 @@
<option value="">请选择操作类型</option> <option value="">请选择操作类型</option>
<option value="bind_market_manager">绑定收益人是市场经营者</option> <option value="bind_market_manager">绑定收益人是市场经营者</option>
<option value="create_supplier">创建新收益人（供货商）</option> <option value="create_supplier">创建新收益人（供货商）</option>
<option value="bind_existing_supplier">绑定已存在的供货商账号</option>
</select> </select>
</div> </div>
</div> </div>
@ -732,6 +733,10 @@
// 创建新收益人（供货商）- 显示账号和密码 // 创建新收益人（供货商）- 显示账号和密码
supplierAccountGroup.style.display = 'flex'; supplierAccountGroup.style.display = 'flex';
supplierPasswordGroup.style.display = 'flex'; supplierPasswordGroup.style.display = 'flex';
} else if (operationType === 'bind_existing_supplier') {
// 绑定已存在的供货商账号 - 只显示账号，不显示密码
supplierAccountGroup.style.display = 'flex';
supplierPasswordGroup.style.display = 'none';
} else { } else {
// 绑定收益人是市场经营者 - 隐藏账号和密码 // 绑定收益人是市场经营者 - 隐藏账号和密码
supplierAccountGroup.style.display = 'none'; supplierAccountGroup.style.display = 'none';
@ -810,6 +815,17 @@
formData.supplierAccount = supplierAccount; formData.supplierAccount = supplierAccount;
formData.password = password; formData.password = password;
} }
// 如果选择了"绑定已存在的供货商账号",只需要验证供货商账号
else if (operationType === 'bind_existing_supplier') {
const supplierAccount = document.getElementById('supplierAccount').value;
if (!supplierAccount) {
alert('请输入供货商账号');
return;
}
formData.supplierAccount = supplierAccount;
}
} }
if (!formData.boothName) { if (!formData.boothName) {

40
平台端web/index.html
View File

@ -17,6 +17,7 @@
color: #333; color: #333;
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
background: #f5f5f5;
} }
.admin-layout { .admin-layout {
@ -269,6 +270,7 @@
border-bottom-color: #fff; border-bottom-color: #fff;
z-index: 1; z-index: 1;
margin-bottom: -1px; margin-bottom: -1px;
color: #1890ff;
} }
.tab-item:hover { .tab-item:hover {
@ -384,32 +386,30 @@
<a href="./权限管理/市场经营者创建.html" class="submenu-item" onclick="openTabWithIframe(this, '市场经营者创建')">市场经营者创建</a> <a href="./权限管理/市场经营者创建.html" class="submenu-item" onclick="openTabWithIframe(this, '市场经营者创建')">市场经营者创建</a>
</div> </div>
</li> </li>
<li class="menu-item">
<button class="menu-item-link" onclick="toggleSubmenu(this)">
<span class="menu-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
<path fill="currentColor" d="M160 448a32 32 0 0 1-32-32V160.064a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32V416a32 32 0 0 1-32 32zm448 0a32 32 0 0 1-32-32V160.064a32 32 0 0 1 32-32h255.936a32 32 0 0 1 32 32V416a32 32 0 0 1-32 32zM160 896a32 32 0 0 1-32-32V608a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32v256a32 32 0 0 1-32 32zm448 0a32 32 0 0 1-32-32V608a32 32 0 0 1 32-32h255.936a32 32 0 0 1 32 32v256a32 32 0 0 1-32 32z"></path>
</svg>
</span>
<span class="menu-text">菜市场管理</span>
<span class="menu-arrow">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
<path fill="currentColor" d="M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z"></path>
</svg>
</span>
</button>
<div class="submenu">
<a href="./菜市场管理/菜市场列表.html" class="submenu-item" onclick="openTabWithIframe(this, '菜市场列表')">菜市场列表</a>
</div>
</li>
</ul> </ul>
</nav> </nav>
</aside> </aside>
<!-- 右侧主内容区 --> <!-- 右侧主内容区 -->
<main class="main-content"> <main class="main-content">
<!-- 顶部导航栏 -->
<header class="header">
<div class="header-left">
<div class="menu-trigger" onclick="toggleSidebar()"></div>
<nav class="breadcrumb">
<a href="#/dashboard" class="breadcrumb-item">首页</a>
<span class="breadcrumb-separator">/</span>
<a href="#" class="breadcrumb-item">权限管理</a>
<span class="breadcrumb-separator">/</span>
<span class="breadcrumb-item">权限编辑</span>
</nav>
</div>
<div class="header-right">
<div class="user-info">
<div class="user-avatar">A</div>
<span>admin</span>
</div>
</div>
</header>
<!-- 标签页区域 --> <!-- 标签页区域 -->
<div class="tabs-container"> <div class="tabs-container">
<div class="tab-item active" data-tab="home"> <div class="tab-item active" data-tab="home">

442
平台端web/权限管理/市场经营者创建.html
View File

@ -12,178 +12,178 @@
} }
body { body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
background-color: #f5f7fa; background-color: #f5f5f5;
color: #333; color: #333;
height: 100vh; min-height: 100vh;
margin: 0; padding: 20px;
padding: 0;
} }
.container { .container {
width: 100%; max-width: 1600px;
height: 100vh; margin: 0 auto;
margin: 0;
background-color: #fff;
border-radius: 0;
box-shadow: none;
overflow: hidden;
} }
.header { /* 页面头部 */
background: linear-gradient(135deg, #2c3e50, #3498db); .page-header {
color: #fff; background: white;
padding: 20px 30px; padding: 16px 24px;
margin-bottom: 16px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.header h1 { .page-title {
font-size: 1.8rem; font-size: 24px;
font-weight: 600; font-weight: 600;
color: #262626;
} }
.header-actions { /* 按钮样式 */
display: flex;
gap: 10px;
}
.btn { .btn {
padding: 10px 20px; height: 40px;
padding: 0 16px;
border: none; border: none;
border-radius: 5px; border-radius: 6px;
cursor: pointer;
font-size: 14px; font-size: 14px;
font-weight: 500; cursor: pointer;
transition: all 0.3s ease;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center;
transition: all 0.3s;
gap: 5px; gap: 5px;
} }
.btn-primary { .btn-primary {
background-color: #3498db; background: #1890ff;
color: #fff; color: white;
} }
.btn-primary:hover { .btn-primary:hover {
background-color: #2980b9; background: #40a9ff;
transform: translateY(-2px);
} }
.btn-success { .btn-success {
background-color: #27ae60; background: #52c41a;
color: #fff; color: white;
} }
.btn-success:hover { .btn-success:hover {
background-color: #229954; background: #73d13d;
} }
.btn-warning { .btn-default {
background-color: #f39c12; background: white;
color: #fff; color: #666;
border: 1px solid #ddd;
} }
.btn-warning:hover { .btn-default:hover {
background-color: #e67e22; border-color: #1890ff;
color: #1890ff;
} }
/* 内容区域 */ .button-group {
.content { display: flex;
padding: 30px; gap: 12px;
} }
.section { /* 表单区域 */
margin-bottom: 40px; .form-section {
background: white;
padding: 24px;
margin-bottom: 16px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
} }
.section-title { .section-title {
font-size: 1.4rem; font-size: 18px;
font-weight: 600; font-weight: 600;
color: #2c3e50; color: #262626;
margin-bottom: 20px; margin-bottom: 20px;
padding-bottom: 10px; padding-bottom: 12px;
border-bottom: 2px solid #ecf0f1; border-bottom: 1px solid #f0f0f0;
}
/* 账号创建区域 */
.account-form {
background-color: #f8f9fa;
padding: 25px;
border-radius: 8px;
border: 1px solid #dee2e6;
} }
.form-row { .form-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
margin-bottom: 16px;
}
.form-item {
display: flex; display: flex;
gap: 20px; flex-direction: column;
align-items: end; gap: 8px;
} }
.form-group { .form-label {
flex: 1;
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #2c3e50;
}
.form-group input,
.form-group select {
width: 100%;
padding: 12px 15px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 14px; font-size: 14px;
transition: border-color 0.3s ease; color: #666;
font-weight: 500;
} }
.form-group input:focus, .form-input,
.form-group select:focus { .form-select {
height: 40px;
padding: 0 12px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 14px;
transition: all 0.3s;
}
.form-input:focus,
.form-select:focus {
outline: none; outline: none;
border-color: #3498db; border-color: #1890ff;
box-shadow: 0 0 5px rgba(52, 152, 219, 0.3); box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
} }
/* 菜市场选择框样式 */ /* 菜市场选择下拉框 */
.market-select-container { .market-select-container {
position: relative; position: relative;
} }
.market-select {
cursor: pointer;
}
.market-dropdown { .market-dropdown {
position: absolute; position: absolute;
top: 100%; top: 100%;
left: 0; left: 0;
right: 0; right: 0;
background: #fff; background: white;
border: 1px solid #ddd; border: 1px solid #f0f0f0;
border-top: none; border-radius: 6px;
border-radius: 0 0 5px 5px; max-height: 300px;
max-height: 200px;
overflow-y: auto; overflow-y: auto;
z-index: 1000; z-index: 1000;
display: none; display: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
margin-top: 4px;
} }
.market-dropdown.show { .market-dropdown.show {
display: block; display: block;
} }
.market-filter {
padding: 12px;
border: none;
border-bottom: 1px solid #f0f0f0;
width: 100%;
outline: none;
font-size: 14px;
}
.market-option { .market-option {
padding: 10px 15px; padding: 10px 12px;
cursor: pointer; cursor: pointer;
transition: background-color 0.2s ease; transition: background-color 0.2s;
font-size: 14px;
} }
.market-option:hover { .market-option:hover {
@ -191,24 +191,12 @@
} }
.market-option.selected { .market-option.selected {
background-color: #3498db; background-color: #e6f7ff;
color: #fff; color: #1890ff;
}
.market-filter {
padding: 10px 15px;
border: none;
border-bottom: 1px solid #eee;
width: 100%;
outline: none;
} }
/* 权限分配区域 */ /* 权限分配区域 */
.permissions-container { .permissions-container {
background-color: #f8f9fa;
padding: 25px;
border-radius: 8px;
border: 1px solid #dee2e6;
max-height: 500px; max-height: 500px;
overflow-y: auto; overflow-y: auto;
} }
@ -224,24 +212,22 @@
.permission-node { .permission-node {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 12px 15px; padding: 12px 16px;
border-radius: 6px; border-radius: 6px;
transition: all 0.3s ease; transition: all 0.3s;
cursor: pointer; cursor: pointer;
background-color: #fff; background-color: white;
border: 1px solid #e9ecef; border: 1px solid #f0f0f0;
margin-bottom: 5px;
} }
.permission-node:hover { .permission-node:hover {
background-color: #f8f9fa; background-color: #f8f9fa;
border-color: #3498db; border-color: #1890ff;
box-shadow: 0 2px 8px rgba(52, 152, 219, 0.15);
} }
.permission-node.selected { .permission-node.selected {
background-color: #e3f2fd; background-color: #e6f7ff;
border-color: #3498db; border-color: #1890ff;
} }
.permission-checkbox { .permission-checkbox {
@ -249,23 +235,24 @@
width: 18px; width: 18px;
height: 18px; height: 18px;
cursor: pointer; cursor: pointer;
accent-color: #3498db; accent-color: #1890ff;
} }
.expand-btn { .expand-btn {
background: #3498db; background: none;
border: none; border: none;
cursor: pointer; cursor: pointer;
padding: 2px 8px; padding: 4px;
margin-right: 12px; margin-right: 12px;
color: #fff; color: #1890ff;
font-size: 14px; font-size: 14px;
transition: all 0.3s ease; transition: all 0.3s;
min-width: 28px; min-width: 24px;
border-radius: 4px; border-radius: 4px;
display: flex; }
align-items: center;
justify-content: center; .expand-btn:hover {
background: #e6f7ff;
} }
.expand-btn.collapsed { .expand-btn.collapsed {
@ -274,140 +261,132 @@
.permission-label { .permission-label {
font-size: 14px; font-size: 14px;
color: #2c3e50; color: #333;
user-select: none; user-select: none;
flex: 1; flex: 1;
font-weight: 500; font-weight: 500;
} }
.permission-children { .permission-children {
margin-left: 35px; margin-left: 40px;
margin-top: 8px; margin-top: 8px;
border-left: 2px solid #3498db; border-left: 2px solid #e6f7ff;
padding-left: 20px; padding-left: 16px;
display: none; display: none;
position: relative;
}
.permission-children::before {
content: '';
position: absolute;
left: 0;
top: -8px;
height: calc(100% + 16px);
width: 2px;
background-color: #3498db;
} }
.permission-children.expanded { .permission-children.expanded {
display: block; display: block;
animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-5px); }
to { opacity: 1; transform: translateY(0); }
} }
.permission-item.parent > .permission-node { .permission-item.parent > .permission-node {
background-color: #edf7ff; background-color: #fafafa;
border-color: #bbdefb;
font-weight: 600; font-weight: 600;
} }
.permission-item.child .permission-node {
margin-left: 15px;
background-color: #f8f9fa;
}
/* 操作区域 */ /* 操作区域 */
.actions { .actions {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
gap: 10px; gap: 12px;
padding-top: 20px; padding-top: 20px;
border-top: 1px solid #dee2e6;
margin-top: 30px;
} }
/* 响应式设计 */ /* 响应式设计 */
@media (max-width: 768px) { @media (max-width: 768px) {
.container { body {
margin: 0; padding: 10px;
border-radius: 0;
} }
.header { .page-header {
padding: 15px 20px; padding: 12px 16px;
flex-direction: column; flex-direction: column;
gap: 15px; gap: 12px;
align-items: flex-start;
} }
.content { .form-section {
padding: 20px; padding: 16px;
} }
.form-row { .form-row {
flex-direction: column; grid-template-columns: 1fr;
gap: 0;
} }
} }
/* 滚动条样式 */
.permissions-container::-webkit-scrollbar,
.market-dropdown::-webkit-scrollbar {
width: 6px;
}
.permissions-container::-webkit-scrollbar-track,
.market-dropdown::-webkit-scrollbar-track {
background: #f0f0f0;
border-radius: 3px;
}
.permissions-container::-webkit-scrollbar-thumb,
.market-dropdown::-webkit-scrollbar-thumb {
background: #ddd;
border-radius: 3px;
}
.permissions-container::-webkit-scrollbar-thumb:hover,
.market-dropdown::-webkit-scrollbar-thumb:hover {
background: #bbb;
}
</style> </style>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<!-- 头部 --> <!-- 页面头部 -->
<div class="header"> <div class="page-header">
<h1>市场经营者创建</h1> <h1 class="page-title">市场经营者创建</h1>
<div class="header-actions"> <div class="button-group">
<button class="btn btn-warning" onclick="resetForm()"> <button class="btn btn-default" onclick="resetForm()">重置</button>
🔄 重置
</button>
</div> </div>
</div> </div>
<!-- 内容区域 --> <!-- 账号信息 -->
<div class="content"> <div class="form-section">
<!-- 账号创建区域 --> <h2 class="section-title">账号信息</h2>
<div class="section"> <div class="form-row">
<h2 class="section-title">账号信息</h2> <div class="form-item">
<div class="account-form"> <label class="form-label">菜市场选择 *</label>
<div class="form-row"> <div class="market-select-container">
<div class="form-group"> <input type="text" id="marketSelect" class="form-input"
<label for="marketSelect">菜市场选择 *</label> placeholder="请选择菜市场" readonly onclick="toggleMarketDropdown()">
<div class="market-select-container"> <div id="marketDropdown" class="market-dropdown">
<input type="text" id="marketSelect" class="market-select" <input type="text" id="marketFilter" class="market-filter"
placeholder="请选择菜市场" readonly onclick="toggleMarketDropdown()"> placeholder="搜索菜市场..."
<div id="marketDropdown" class="market-dropdown"> oninput="filterMarkets(this.value)">
<input type="text" id="marketFilter" class="market-filter" <div id="marketOptions"></div>
placeholder="输入菜市场名称搜索..."
oninput="filterMarkets(this.value)">
<div id="marketOptions"></div>
</div>
</div>
</div>
<div class="form-group">
<label for="phoneNumber">账号手机号 *</label>
<input type="tel" id="phoneNumber" placeholder="请输入手机号" maxlength="11">
</div> </div>
</div> </div>
</div> </div>
</div> <div class="form-item">
<label class="form-label">账号手机号 *</label>
<!-- 权限分配区域 --> <input type="tel" id="phoneNumber" class="form-input" placeholder="请输入手机号" maxlength="11">
<div class="section">
<h2 class="section-title">权限分配</h2>
<div class="permissions-container">
<ul id="permissionTree" class="permission-tree">
<!-- 权限树将通过JavaScript动态生成 -->
</ul>
</div> </div>
</div> </div>
</div>
<!-- 操作按钮 --> <!-- 权限分配 -->
<div class="form-section">
<h2 class="section-title">权限分配</h2>
<div class="permissions-container">
<ul id="permissionTree" class="permission-tree">
<!-- 权限树将通过JavaScript动态生成 -->
</ul>
</div>
</div>
<!-- 操作按钮 -->
<div class="form-section">
<div class="actions"> <div class="actions">
<button class="btn btn-warning" onclick="cancelAssignment()">取消</button> <button class="btn btn-default" onclick="cancelAssignment()">取消</button>
<button class="btn btn-success" onclick="saveAssignment()">💾 保存分配</button> <button class="btn btn-success" onclick="saveAssignment()">保存分配</button>
</div> </div>
</div> </div>
</div> </div>
@ -425,7 +404,7 @@
{ id: 8, name: '建设菜市场', code: 'JIANSHE_MARKET' } { id: 8, name: '建设菜市场', code: 'JIANSHE_MARKET' }
]; ];
// 权限数据（从权限编辑页面获取的示例数据） // 权限数据
const permissions = [ const permissions = [
{ {
id: 1, id: 1,
@ -589,7 +568,7 @@
} else { } else {
// 占位符保持对齐 // 占位符保持对齐
const placeholder = document.createElement('span'); const placeholder = document.createElement('span');
placeholder.style.width = '28px'; placeholder.style.width = '24px';
placeholder.style.display = 'inline-block'; placeholder.style.display = 'inline-block';
nodeDiv.appendChild(placeholder); nodeDiv.appendChild(placeholder);
} }
@ -605,7 +584,7 @@
// 权限标签 // 权限标签
const label = document.createElement('span'); const label = document.createElement('span');
label.className = 'permission-label'; label.className = 'permission-label';
label.textContent = `${item.name}（${item.description || item.code}）`; label.textContent = `${item.name}(${item.description || item.code})`;
label.onclick = () => checkbox.click(); label.onclick = () => checkbox.click();
nodeDiv.appendChild(label); nodeDiv.appendChild(label);
@ -646,28 +625,24 @@
// 更新节点选中样式 // 更新节点选中样式
if (node) { if (node) {
if (isChecked) { node.classList.toggle('selected', isChecked);
node.classList.add('selected');
} else {
node.classList.remove('selected');
}
} }
if (isChecked) { if (isChecked) {
selectedPermissions.add(permissionCode); selectedPermissions.add(permissionCode);
// 选中子级权限时，自动选中所有父级权限 // 选中子级权限时,自动选中所有父级权限
selectParentPermissions(permission); selectParentPermissions(permission);
// 如果是父权限，自动选中所有子权限 // 如果是父权限,自动选中所有子权限
if (permission.children && permission.children.length > 0) { if (permission.children && permission.children.length > 0) {
selectChildrenPermissions(permission, true); selectChildrenPermissions(permission, true);
} }
} else { } else {
selectedPermissions.delete(permissionCode); selectedPermissions.delete(permissionCode);
// 如果是父权限，自动取消所有子权限 // 如果是父权限,自动取消所有子权限
if (permission.children && permission.children.length > 0) { if (permission.children && permission.children.length > 0) {
selectChildrenPermissions(permission, false); selectChildrenPermissions(permission, false);
} }
// 如果是子权限，检查是否需要取消父权限 // 如果是子权限,检查是否需要取消父权限
uncheckParentIfNeeded(permission); uncheckParentIfNeeded(permission);
} }
@ -687,6 +662,8 @@
if (parentCheckbox && !parentCheckbox.checked) { if (parentCheckbox && !parentCheckbox.checked) {
parentCheckbox.checked = true; parentCheckbox.checked = true;
selectedPermissions.add(parent.code); selectedPermissions.add(parent.code);
const parentNode = parentCheckbox.closest('.permission-node');
if (parentNode) parentNode.classList.add('selected');
} }
// 递归选中上级父权限 // 递归选中上级父权限
@ -701,6 +678,9 @@
const childCheckbox = document.querySelector(`[data-permission-code="${child.code}"]`); const childCheckbox = document.querySelector(`[data-permission-code="${child.code}"]`);
if (childCheckbox) { if (childCheckbox) {
childCheckbox.checked = select; childCheckbox.checked = select;
const childNode = childCheckbox.closest('.permission-node');
if (childNode) childNode.classList.toggle('selected', select);
if (select) { if (select) {
selectedPermissions.add(child.code); selectedPermissions.add(child.code);
} else { } else {
@ -730,6 +710,8 @@
if (parentCheckbox) { if (parentCheckbox) {
parentCheckbox.checked = false; parentCheckbox.checked = false;
selectedPermissions.delete(parent.code); selectedPermissions.delete(parent.code);
const parentNode = parentCheckbox.closest('.permission-node');
if (parentNode) parentNode.classList.remove('selected');
// 递归检查上级父权限 // 递归检查上级父权限
uncheckParentIfNeeded(parent); uncheckParentIfNeeded(parent);
} }
@ -738,7 +720,6 @@
// 更新权限显示 // 更新权限显示
function updatePermissionDisplay() { function updatePermissionDisplay() {
// 这里可以添加一些UI反馈，比如显示已选权限数量等
console.log('已选择权限:', Array.from(selectedPermissions)); console.log('已选择权限:', Array.from(selectedPermissions));
} }
@ -766,7 +747,7 @@
// 重置表单 // 重置表单
function resetForm() { function resetForm() {
if (confirm('确定要重置所有信息吗？')) { if (confirm('确定要重置所有信息吗?')) {
// 重置菜市场选择 // 重置菜市场选择
selectedMarket = null; selectedMarket = null;
document.getElementById('marketSelect').value = ''; document.getElementById('marketSelect').value = '';
@ -782,6 +763,9 @@
document.querySelectorAll('.permission-checkbox').forEach(checkbox => { document.querySelectorAll('.permission-checkbox').forEach(checkbox => {
checkbox.checked = false; checkbox.checked = false;
}); });
document.querySelectorAll('.permission-node').forEach(node => {
node.classList.remove('selected');
});
// 重置搜索 // 重置搜索
document.getElementById('marketFilter').value = ''; document.getElementById('marketFilter').value = '';
@ -791,7 +775,7 @@
// 取消分配 // 取消分配
function cancelAssignment() { function cancelAssignment() {
if (confirm('确定要取消权限分配吗？未保存的更改将丢失。')) { if (confirm('确定要取消权限分配吗?未保存的更改将丢失。')) {
window.history.back(); window.history.back();
} }
} }
@ -800,25 +784,25 @@
function saveAssignment() { function saveAssignment() {
// 验证菜市场 // 验证菜市场
if (!selectedMarket) { if (!selectedMarket) {
alert('请选择菜市场！'); alert('请选择菜市场!');
return; return;
} }
// 验证手机号 // 验证手机号
const phoneNumber = document.getElementById('phoneNumber').value.trim(); const phoneNumber = document.getElementById('phoneNumber').value.trim();
if (!phoneNumber) { if (!phoneNumber) {
alert('请输入手机号！'); alert('请输入手机号!');
return; return;
} }
if (!/^1[3-9]\d{9}$/.test(phoneNumber)) { if (!/^1[3-9]\d{9}$/.test(phoneNumber)) {
alert('请输入正确的手机号格式！'); alert('请输入正确的手机号格式!');
return; return;
} }
// 验证权限选择 // 验证权限选择
if (selectedPermissions.size === 0) { if (selectedPermissions.size === 0) {
alert('请至少选择一个权限！'); alert('请至少选择一个权限!');
return; return;
} }
@ -832,7 +816,7 @@
console.log('保存权限分配数据:', assignmentData); console.log('保存权限分配数据:', assignmentData);
// 这里应该调用API保存数据 // 这里应该调用API保存数据
alert('权限分配保存成功！'); alert('权限分配保存成功!');
} }
</script> </script>
</body> </body>

396
平台端web/权限管理/权限编辑.html
View File

@ -12,8 +12,8 @@
} }
body { body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
background-color: #f5f7fa; background-color: #f5f5f5;
color: #333; color: #333;
height: 100vh; height: 100vh;
margin: 0; margin: 0;
@ -21,142 +21,171 @@
} }
.container { .container {
width: 100%; max-width: 1600px;
height: 100vh; margin: 0 auto;
margin: 0; padding: 20px;
background-color: #fff;
border-radius: 0;
box-shadow: none;
overflow: hidden;
} }
.header { /* 页面头部 */
background: linear-gradient(135deg, #2c3e50, #3498db); .page-header {
color: #fff; background: white;
padding: 20px 30px; padding: 16px 24px;
margin-bottom: 16px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.header h1 { .page-title {
font-size: 1.8rem; font-size: 24px;
font-weight: 600; font-weight: 600;
color: #262626;
} }
.header-actions { /* 按钮样式 */
display: flex;
gap: 10px;
}
.btn { .btn {
padding: 10px 20px; height: 40px;
padding: 0 16px;
border: none; border: none;
border-radius: 5px; border-radius: 6px;
cursor: pointer;
font-size: 14px; font-size: 14px;
font-weight: 500; cursor: pointer;
transition: all 0.3s ease;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center;
transition: all 0.3s;
gap: 5px; gap: 5px;
} }
.btn-primary { .btn-primary {
background-color: #3498db; background: #1890ff;
color: #fff; color: white;
} }
.btn-primary:hover { .btn-primary:hover {
background-color: #2980b9; background: #40a9ff;
transform: translateY(-2px);
} }
.btn-success { .btn-success {
background-color: #27ae60; background: #52c41a;
color: #fff; color: white;
} }
.btn-success:hover { .btn-success:hover {
background-color: #229954; background: #73d13d;
} }
.btn-danger { .btn-danger {
background-color: #e74c3c; background: #ff4d4f;
color: #fff; color: white;
} }
.btn-danger:hover { .btn-danger:hover {
background-color: #c0392b; background: #ff7875;
} }
.btn-warning { .btn-default {
background-color: #f39c12; background: white;
color: #fff; color: #666;
border: 1px solid #ddd;
} }
.btn-warning:hover { .btn-default:hover {
background-color: #e67e22; border-color: #1890ff;
color: #1890ff;
} }
/* 搜索栏 */ .btn-sm {
.search-bar { height: 32px;
padding: 20px 30px; padding: 0 12px;
background-color: #f8f9fa; font-size: 12px;
border-bottom: 1px solid #dee2e6; }
.button-group {
display: flex;
gap: 12px;
}
/* 搜索区域 */
.search-section {
background: white;
padding: 24px;
margin-bottom: 16px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
} }
.search-form { .search-form {
display: flex; display: grid;
gap: 15px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
align-items: center; gap: 16px;
margin-bottom: 16px;
} }
.search-input { .form-item {
flex: 1; display: flex;
padding: 10px 15px; flex-direction: column;
gap: 8px;
}
.form-label {
font-size: 14px;
color: #666;
font-weight: 500;
}
.form-input {
height: 40px;
padding: 0 12px;
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 5px; border-radius: 6px;
font-size: 14px; font-size: 14px;
} }
.search-input:focus { .form-input:focus {
outline: none; outline: none;
border-color: #3498db; border-color: #1890ff;
box-shadow: 0 0 5px rgba(52, 152, 219, 0.3); box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
} }
/* 表格样式 */ /* 表格样式 */
.table-container { .table-section {
padding: 0 30px 30px 30px; background: white;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.table-wrapper {
overflow-x: auto; overflow-x: auto;
} }
.permissions-table { .permissions-table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
margin-top: 20px; font-size: 14px;
background-color: #fff;
}
.permissions-table th,
.permissions-table td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #eee;
} }
.permissions-table th { .permissions-table th {
background-color: #f8f9fa; background: #fafafa;
padding: 12px 16px;
text-align: left;
font-weight: 600; font-weight: 600;
color: #2c3e50; color: #666;
position: sticky; border-bottom: 1px solid #f0f0f0;
top: 0; white-space: nowrap;
z-index: 10;
} }
.permissions-table tr:hover { .permissions-table td {
background-color: #f8f9fa; padding: 12px 16px;
border-bottom: 1px solid #f9f9f9;
vertical-align: top;
}
.permissions-table tbody tr:hover {
background: #f8f9fa;
} }
.permission-row { .permission-row {
@ -169,7 +198,7 @@
} }
.permission-row.child-row { .permission-row.child-row {
background-color: #fafbfc; background-color: #fafafa;
} }
.permission-row.level-1 td:first-child { .permission-row.level-1 td:first-child {
@ -210,38 +239,45 @@
.permission-code { .permission-code {
font-family: monospace; font-family: monospace;
background-color: #ecf0f1; background-color: #f0f0f0;
padding: 2px 6px; padding: 4px 8px;
border-radius: 3px; border-radius: 4px;
font-size: 13px; font-size: 12px;
} }
.permission-type { .permission-type {
padding: 4px 8px; padding: 4px 8px;
border-radius: 12px; border-radius: 4px;
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
} }
.type-menu { .type-menu {
background-color: #3498db; background: #e6f7ff;
color: #fff; color: #1890ff;
border: 1px solid #91d5ff;
} }
.type-button { .type-button {
background-color: #27ae60; background: #f6ffed;
color: #fff; color: #52c41a;
border: 1px solid #b7eb8f;
} }
.expand-btn { .expand-btn {
background: none; background: none;
border: none; border: none;
cursor: pointer; cursor: pointer;
padding: 2px 5px; padding: 4px;
margin-right: 8px; margin-right: 8px;
color: #3498db; color: #1890ff;
font-size: 12px; font-size: 12px;
transition: transform 0.3s ease; transition: all 0.3s;
border-radius: 4px;
}
.expand-btn:hover {
background: #e6f7ff;
} }
.expand-btn.collapsed { .expand-btn.collapsed {
@ -253,11 +289,6 @@
gap: 5px; gap: 5px;
} }
.btn-sm {
padding: 5px 10px;
font-size: 12px;
}
/* 弹窗样式 */ /* 弹窗样式 */
.modal { .modal {
display: none; display: none;
@ -293,23 +324,24 @@
} }
.modal-header { .modal-header {
background: linear-gradient(135deg, #2c3e50, #3498db); background: #fafafa;
color: #fff; padding: 16px 24px;
padding: 20px 25px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
border-bottom: 1px solid #f0f0f0;
} }
.modal-header h3 { .modal-header h3 {
font-size: 1.2rem; font-size: 18px;
font-weight: 600; font-weight: 600;
color: #262626;
} }
.close { .close {
background: none; background: none;
border: none; border: none;
color: #fff; color: #666;
font-size: 24px; font-size: 24px;
cursor: pointer; cursor: pointer;
padding: 0; padding: 0;
@ -319,15 +351,16 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 50%; border-radius: 50%;
transition: background-color 0.3s ease; transition: all 0.3s;
} }
.close:hover { .close:hover {
background-color: rgba(255, 255, 255, 0.2); background-color: #f0f0f0;
color: #333;
} }
.modal-body { .modal-body {
padding: 25px; padding: 24px;
} }
.form-group { .form-group {
@ -338,26 +371,27 @@
display: block; display: block;
margin-bottom: 8px; margin-bottom: 8px;
font-weight: 500; font-weight: 500;
color: #2c3e50; color: #333;
font-size: 14px;
} }
.form-group input, .form-group input,
.form-group select, .form-group select,
.form-group textarea { .form-group textarea {
width: 100%; width: 100%;
padding: 10px 15px; padding: 10px 12px;
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 5px; border-radius: 6px;
font-size: 14px; font-size: 14px;
transition: border-color 0.3s ease; transition: all 0.3s;
} }
.form-group input:focus, .form-group input:focus,
.form-group select:focus, .form-group select:focus,
.form-group textarea:focus { .form-group textarea:focus {
outline: none; outline: none;
border-color: #3498db; border-color: #1890ff;
box-shadow: 0 0 5px rgba(52, 152, 219, 0.3); box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
} }
.form-group textarea { .form-group textarea {
@ -365,36 +399,44 @@
min-height: 80px; min-height: 80px;
} }
.form-group small {
color: #666;
font-size: 12px;
margin-top: 4px;
display: block;
}
.modal-footer { .modal-footer {
background-color: #f8f9fa; background-color: #fafafa;
padding: 15px 25px; padding: 12px 24px;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
gap: 10px; gap: 12px;
border-top: 1px solid #dee2e6; border-top: 1px solid #f0f0f0;
} }
/* 右键菜单样式 */ /* 右键菜单样式 */
.context-menu { .context-menu {
position: fixed; position: fixed;
background-color: #fff; background-color: #fff;
border: 1px solid #ddd; border: 1px solid #f0f0f0;
border-radius: 5px; border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
z-index: 2000; z-index: 2000;
padding: 5px 0; padding: 4px 0;
min-width: 120px; min-width: 120px;
display: none; display: none;
} }
.context-menu-item { .context-menu-item {
padding: 8px 15px; padding: 8px 16px;
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 14px;
transition: background-color 0.2s ease; transition: background-color 0.2s ease;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
color: #333;
} }
.context-menu-item:hover { .context-menu-item:hover {
@ -405,37 +447,39 @@
.empty-state { .empty-state {
text-align: center; text-align: center;
padding: 60px 20px; padding: 60px 20px;
color: #7f8c8d; color: #999;
} }
.empty-state h3 { .empty-state h3 {
margin-bottom: 10px; margin-bottom: 10px;
color: #95a5a6; color: #666;
font-size: 16px;
font-weight: 500;
}
.empty-state p {
font-size: 14px;
} }
/* 响应式设计 */ /* 响应式设计 */
@media (max-width: 768px) { @media (max-width: 768px) {
.container { .container {
margin: 0; padding: 10px;
border-radius: 0;
} }
.header { .page-header {
padding: 15px 20px; padding: 12px 16px;
flex-direction: column; flex-direction: column;
gap: 15px; gap: 12px;
align-items: flex-start;
} }
.search-bar { .search-section {
padding: 15px 20px; padding: 16px;
}
.table-container {
padding: 0 20px 20px 20px;
} }
.permissions-table { .permissions-table {
font-size: 14px; font-size: 12px;
} }
.permissions-table th, .permissions-table th,
@ -452,46 +496,52 @@
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<!-- 头部 --> <!-- 页面头部 -->
<div class="header"> <div class="page-header">
<h1>权限编辑</h1> <h1 class="page-title">权限编辑</h1>
<div class="header-actions"> <div class="button-group">
<button class="btn btn-success" onclick="openAddModal()"> <button class="btn btn-success" onclick="openAddModal()">
➕ 新增权限 新增权限
</button> </button>
</div> </div>
</div> </div>
<!-- 搜索栏 --> <!-- 搜索区域 -->
<div class="search-bar"> <div class="search-section">
<div class="search-form"> <div class="search-form">
<input type="text" class="search-input" id="searchInput" placeholder="搜索权限编码、名称或描述..."> <div class="form-item">
<button class="btn btn-primary" onclick="searchPermissions()">🔍 搜索</button> <input type="text" class="form-input" id="searchInput" placeholder="搜索权限编码、名称或描述...">
<button class="btn btn-warning" onclick="resetSearch()">🔄 重置</button> </div>
</div>
<div class="button-group">
<button class="btn btn-primary" onclick="searchPermissions()">搜索</button>
<button class="btn btn-default" onclick="resetSearch()">重置</button>
</div> </div>
</div> </div>
<!-- 表格容器 --> <!-- 表格区域 -->
<div class="table-container"> <div class="table-section">
<table class="permissions-table"> <div class="table-wrapper">
<thead> <table class="permissions-table">
<tr> <thead>
<th>权限编码</th> <tr>
<th>权限名称</th> <th>权限编码</th>
<th>权限描述</th> <th>权限名称</th>
<th>权限类型</th> <th>权限描述</th>
<th>父级权限</th> <th>权限类型</th>
<th>可见身份</th> <th>父级权限</th>
<th>操作</th> <th>可见身份</th>
</tr> <th>操作</th>
</thead> </tr>
<tbody id="permissionsTableBody"> </thead>
<!-- 数据将通过JavaScript动态加载 --> <tbody id="permissionsTableBody">
</tbody> <!-- 数据将通过JavaScript动态加载 -->
</table> </tbody>
<div class="empty-state" id="emptyState" style="display: none;"> </table>
<h3>暂无权限数据</h3> <div class="empty-state" id="emptyState" style="display: none;">
<p>点击"新增权限"按钮开始添加权限信息</p> <h3>暂无权限数据</h3>
<p>点击"新增权限"按钮开始添加权限信息</p>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -515,7 +565,7 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="permissionDesc">权限描述</label> <label for="permissionDesc">权限描述</label>
<textarea id="permissionDesc" name="description" placeholder="请输入权限描述（可选）"></textarea> <textarea id="permissionDesc" name="description" placeholder="请输入权限描述(可选)"></textarea>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="parentCode">父级权限编码</label> <label for="parentCode">父级权限编码</label>
@ -546,7 +596,7 @@
</form> </form>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-warning" onclick="closeModal()">取消</button> <button type="button" class="btn btn-default" onclick="closeModal()">取消</button>
<button type="button" class="btn btn-success" onclick="savePermission()">保存</button> <button type="button" class="btn btn-success" onclick="savePermission()">保存</button>
</div> </div>
</div> </div>
@ -555,13 +605,13 @@
<!-- 右键菜单 --> <!-- 右键菜单 -->
<div id="contextMenu" class="context-menu"> <div id="contextMenu" class="context-menu">
<div class="context-menu-item" onclick="addChildPermission()"> <div class="context-menu-item" onclick="addChildPermission()">
➕ 添加子权限 添加子权限
</div> </div>
<div class="context-menu-item" onclick="editPermission()"> <div class="context-menu-item" onclick="editPermission()">
✏️ 编辑权限 编辑权限
</div> </div>
<div class="context-menu-item" onclick="deletePermission()"> <div class="context-menu-item" onclick="deletePermission()">
🗑️ 删除权限 删除权限
</div> </div>
</div> </div>
@ -739,11 +789,11 @@
const nextRowCode = nextRow.dataset.code; const nextRowCode = nextRow.dataset.code;
const nextRowParent = permissions.find(p => p.code === nextRowCode)?.parentCode; const nextRowParent = permissions.find(p => p.code === nextRowCode)?.parentCode;
// 如果当前行是目标权限的子权限（直接或间接） // 如果当前行是目标权限的子权限(直接或间接)
if (childCodes.includes(nextRowCode)) { if (childCodes.includes(nextRowCode)) {
nextRow.style.display = isExpanded ? 'none' : 'table-row'; nextRow.style.display = isExpanded ? 'none' : 'table-row';
} else if (!isChildOfAny(nextRowCode, childCodes)) { } else if (!isChildOfAny(nextRowCode, childCodes)) {
// 如果不是子权限，说明已到达同级或上级权限，停止处理 // 如果不是子权限,说明已到达同级或上级权限,停止处理
break; break;
} }
@ -751,7 +801,7 @@
} }
} }
// 获取某个权限的所有子权限编码（递归） // 获取某个权限的所有子权限编码(递归)
function getChildPermissionCodes(parentCode) { function getChildPermissionCodes(parentCode) {
const children = []; const children = [];
@ -866,11 +916,11 @@
// 检查是否有子权限 // 检查是否有子权限
const hasChildren = permissions.some(p => p.parentCode === permission.code); const hasChildren = permissions.some(p => p.parentCode === permission.code);
if (hasChildren) { if (hasChildren) {
alert('该权限下有子权限，请先删除子权限！'); alert('该权限下有子权限,请先删除子权限!');
return; return;
} }
if (confirm(`确定要删除权限"${permission.name}"吗？`)) { if (confirm(`确定要删除权限"${permission.name}"吗?`)) {
permissions = permissions.filter(p => p.id !== id); permissions = permissions.filter(p => p.id !== id);
renderPermissionsTable(); renderPermissionsTable();
} }
@ -908,14 +958,14 @@
// 验证 // 验证
if (!code || !name || !type) { if (!code || !name || !type) {
alert('请填写必填项！'); alert('请填写必填项!');
return; return;
} }
// 检查权限编码是否重复（编辑时排除自身） // 检查权限编码是否重复(编辑时排除自身)
const existingPermission = permissions.find(p => p.code === code && p.id !== currentEditingId); const existingPermission = permissions.find(p => p.code === code && p.id !== currentEditingId);
if (existingPermission) { if (existingPermission) {
alert('权限编码已存在！'); alert('权限编码已存在!');
return; return;
} }
@ -923,11 +973,11 @@
if (parentCode) { if (parentCode) {
const parentPermission = permissions.find(p => p.code === parentCode); const parentPermission = permissions.find(p => p.code === parentCode);
if (!parentPermission) { if (!parentPermission) {
alert('父级权限不存在！'); alert('父级权限不存在!');
return; return;
} }
if (parentPermission.type !== 'menu') { if (parentPermission.type !== 'menu') {
alert('只能选择菜单类型的权限作为父级权限！'); alert('只能选择菜单类型的权限作为父级权限!');
return; return;
} }
} }

243
平台端web/菜市场管理/菜市场列表.html
View File

@ -84,6 +84,10 @@
.btn-small { .btn-small {
padding: 5px 12px; padding: 5px 12px;
font-size: 12px; font-size: 12px;
max-width: 90px;
white-space: normal;
word-break: break-all;
line-height: 1.4;
} }
.btn-danger { .btn-danger {
@ -477,6 +481,11 @@
background-color: #f5f7fa; background-color: #f5f7fa;
border-color: #c0c4cc; border-color: #c0c4cc;
} }
/* 隐藏元素 */
.hidden {
display: none !important;
}
</style> </style>
</head> </head>
<body> <body>
@ -649,26 +658,9 @@
</div> </div>
<div class="modal-body"> <div class="modal-body">
<form id="detailMarketForm"> <form id="detailMarketForm">
<!-- 经营者信息 -->
<div class="form-section">
<div class="form-section-title">经营者信息</div>
<div class="form-group">
<div class="form-label">经营者账号</div>
<div class="form-input-wrapper">
<input type="text" class="form-input" id="detailOperatorAccount" readonly>
</div>
</div>
<div class="form-group">
<div class="form-label">经营者姓名</div>
<div class="form-input-wrapper">
<input type="text" class="form-input" id="detailOperatorName" readonly>
</div>
</div>
</div>
<!-- 基础配置 --> <!-- 基础配置 -->
<div class="form-section"> <div class="form-section">
<div class="form-section-title">基础配置</div> <div class="form-section-title">基础信息</div>
<div class="form-group"> <div class="form-group">
<div class="form-label">菜市场名称</div> <div class="form-label">菜市场名称</div>
@ -677,47 +669,6 @@
</div> </div>
</div> </div>
<div class="form-group">
<div class="form-label">商品类目类型</div>
<div class="form-input-wrapper">
<input type="text" class="form-input" id="detailCategoryType" readonly>
</div>
</div>
<div class="form-group">
<div class="form-label">菜市场背景图</div>
<div class="form-input-wrapper">
<div class="upload-box" style="pointer-events: none;">
<span class="upload-box-text">暂无图片</span>
</div>
</div>
</div>
<div class="form-group">
<div class="form-label">菜市场营业执照</div>
<div class="form-input-wrapper">
<div class="upload-box" style="pointer-events: none;">
<span class="upload-box-text">暂无图片</span>
</div>
</div>
</div>
<div class="form-group">
<div class="form-label">菜市场实拍图</div>
<div class="form-input-wrapper">
<div class="upload-box" style="pointer-events: none;">
<span class="upload-box-text">暂无图片</span>
</div>
</div>
</div>
<div class="form-group">
<div class="form-label">菜市场地址</div>
<div class="form-input-wrapper">
<input type="text" class="form-input" id="detailAddress" readonly>
</div>
</div>
<div class="form-group"> <div class="form-group">
<div class="form-label">详细地址</div> <div class="form-label">详细地址</div>
<div class="form-input-wrapper"> <div class="form-input-wrapper">
@ -726,93 +677,14 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<div class="form-label">菜市场定位</div> <div class="form-label">定位信息</div>
<div class="form-input-wrapper"> <div class="form-input-wrapper">
<input type="text" class="form-input" id="detailLocation" readonly> <div style="width: 100%; height: 300px; border: 1px solid #dcdfe6; border-radius: 4px; background-color: #f5f7fa; display: flex; align-items: center; justify-content: center; color: #909399; font-size: 14px;">
</div> <div style="text-align: center;">
</div> <div style="font-size: 48px; margin-bottom: 10px;">📍</div>
<div>地图定位显示区域</div>
<div class="form-group"> <div style="font-size: 12px; margin-top: 5px;" id="detailLocationCoords"></div>
<div class="form-label">菜市场营业时间</div>
<div class="form-input-wrapper">
<div class="switch-group">
<span class="switch-label">手动营业</span>
<label class="switch">
<input type="checkbox" id="detailAutoBusinessTime" disabled>
<span class="switch-slider"></span>
</label>
<span class="switch-label active">自动营业</span>
</div>
<div class="checkbox-group" style="margin-top: 10px;">
<div class="checkbox-option">
<input type="checkbox" id="detailEveryday" disabled>
<label for="detailEveryday">每天</label>
</div> </div>
<div class="checkbox-option">
<input type="checkbox" id="detailWorkday" disabled>
<label for="detailWorkday">工作日</label>
</div>
<div class="checkbox-option">
<input type="checkbox" id="detailCustom" disabled>
<label for="detailCustom">自定义</label>
</div>
</div>
<div class="time-group" style="margin-top: 10px;">
<input type="time" class="form-input time-input" id="detailStartTime" readonly>
<input type="time" class="form-input time-input" id="detailEndTime" readonly>
</div>
</div>
</div>
<div class="form-group">
<div class="form-label">菜市场状态</div>
<div class="form-input-wrapper">
<div class="switch-group">
<span class="switch-label">禁用</span>
<label class="switch">
<input type="checkbox" id="detailMarketStatus" disabled>
<span class="switch-slider"></span>
</label>
<span class="switch-label active">启用</span>
</div>
</div>
</div>
<div class="form-group">
<div class="form-label">摊位数</div>
<div class="form-input-wrapper">
<input type="text" class="form-input" id="detailBoothCount" readonly>
</div>
</div>
<div class="form-group">
<div class="form-label">营业状态</div>
<div class="form-input-wrapper">
<input type="text" class="form-input" id="detailBusinessStatus" readonly>
</div>
</div>
</div>
<!-- 配送设置 -->
<div class="form-section">
<div class="form-section-title">配送设置</div>
<div class="form-group">
<div class="form-label"></div>
<div class="form-input-wrapper">
<div class="form-hint">ℹ️ 开启后，将允许该菜市场经营者/摊主（无经营者）自由配置是否呼叫第三方骑手进行配送；</div>
<div class="form-hint">第三方配送费用因距离、天气、时段等因素会产生不同程度的浮动；将根据实际配送费用进行扣除。</div>
</div>
</div>
<div class="form-group">
<div class="form-label">是否允许第三方骑手配送</div>
<div class="form-input-wrapper">
<div class="switch-group">
<span class="switch-label">禁用</span>
<label class="switch">
<input type="checkbox" id="detailThirdPartyDelivery" disabled>
<span class="switch-slider"></span>
</label>
<span class="switch-label active">启用</span>
</div> </div>
</div> </div>
</div> </div>
@ -945,11 +817,15 @@
<div class="form-group"> <div class="form-group">
<div class="form-label required">菜市场定位</div> <div class="form-label required">菜市场定位</div>
<div class="form-input-wrapper"> <div class="form-input-wrapper">
<div class="location-input"> <div style="width: 100%; height: 300px; border: 1px solid #dcdfe6; border-radius: 4px; background-color: #f5f7fa; display: flex; align-items: center; justify-content: center; color: #909399; font-size: 14px; cursor: pointer;" onclick="selectLocation()">
<input type="text" class="form-input" placeholder="请在地图上选择定位"> <div style="text-align: center;">
<span class="location-icon">📍</span> <div style="font-size: 48px; margin-bottom: 10px;">📍</div>
<div>点击选择地图定位</div>
<div style="font-size: 12px; margin-top: 5px; color: #f56c6c;" id="selectedLocationText">请选择定位</div>
</div>
</div> </div>
<div class="form-hint" style="color: #f56c6c;">请选择定位</div> <input type="hidden" id="locationLat" value="">
<input type="hidden" id="locationLng" value="">
</div> </div>
</div> </div>
@ -959,12 +835,12 @@
<div class="switch-group"> <div class="switch-group">
<span class="switch-label">手动营业</span> <span class="switch-label">手动营业</span>
<label class="switch"> <label class="switch">
<input type="checkbox" id="autoBusinessTime" checked> <input type="checkbox" id="autoBusinessTime" checked onchange="toggleBusinessTimeOptions()">
<span class="switch-slider"></span> <span class="switch-slider"></span>
</label> </label>
<span class="switch-label active">自动营业</span> <span class="switch-label active">自动营业</span>
</div> </div>
<div class="checkbox-group" style="margin-top: 10px;"> <div class="checkbox-group" id="businessDayOptions" style="margin-top: 10px;">
<div class="checkbox-option"> <div class="checkbox-option">
<input type="checkbox" id="everyday"> <input type="checkbox" id="everyday">
<label for="everyday">每天</label> <label for="everyday">每天</label>
@ -978,7 +854,7 @@
<label for="custom">自定义</label> <label for="custom">自定义</label>
</div> </div>
</div> </div>
<div class="time-group" style="margin-top: 10px;"> <div class="time-group" id="businessTimeRange" style="margin-top: 10px;">
<input type="time" class="form-input time-input" placeholder="开始营业时间"> <input type="time" class="form-input time-input" placeholder="开始营业时间">
<input type="time" class="form-input time-input" placeholder="结束营业时间"> <input type="time" class="form-input time-input" placeholder="结束营业时间">
</div> </div>
@ -1039,6 +915,39 @@
let countdown = 0; let countdown = 0;
let countdownTimer = null; let countdownTimer = null;
// 切换营业时间选项的显示/隐藏
function toggleBusinessTimeOptions() {
const autoBusinessTime = document.getElementById('autoBusinessTime');
const businessDayOptions = document.getElementById('businessDayOptions');
const businessTimeRange = document.getElementById('businessTimeRange');
if (autoBusinessTime.checked) {
// 自动营业，显示时间范围和日期选项
businessDayOptions.classList.remove('hidden');
businessTimeRange.classList.remove('hidden');
} else {
// 手动营业，隐藏时间范围和日期选项
businessDayOptions.classList.add('hidden');
businessTimeRange.classList.add('hidden');
}
}
// 选择地图定位
function selectLocation() {
// 这里应该打开地图选择器，实际应调用地图API
// 模拟选择定位
alert('此处应打开地图选择器，实际开发时需要集成地图API（如高德地图、百度地图等）');
// 模拟选择了一个位置
const mockLat = 31.230416;
const mockLng = 121.473701;
document.getElementById('locationLat').value = mockLat;
document.getElementById('locationLng').value = mockLng;
document.getElementById('selectedLocationText').textContent = '已选择: ' + mockLat + ', ' + mockLng;
document.getElementById('selectedLocationText').style.color = '#67c23a';
}
// 发送验证码 // 发送验证码
function sendVerifyCode() { function sendVerifyCode() {
const account = document.getElementById('operatorAccount').value; const account = document.getElementById('operatorAccount').value;
@ -1108,6 +1017,11 @@
} }
// 重置表单 // 重置表单
document.getElementById('addMarketForm').reset(); document.getElementById('addMarketForm').reset();
// 重置定位信息
document.getElementById('locationLat').value = '';
document.getElementById('locationLng').value = '';
document.getElementById('selectedLocationText').textContent = '请选择定位';
document.getElementById('selectedLocationText').style.color = '#f56c6c';
} }
// 提交表单 // 提交表单
@ -1237,31 +1151,16 @@
// 打开详情模态框 // 打开详情模态框
function openDetailModal(rowData) { function openDetailModal(rowData) {
// 填充详情数据 // 填充详情数据
document.getElementById('detailOperatorAccount').value = rowData.operatorAccount || '';
document.getElementById('detailOperatorName').value = rowData.operatorName || '';
document.getElementById('detailMarketName').value = rowData.marketName || ''; document.getElementById('detailMarketName').value = rowData.marketName || '';
document.getElementById('detailDetailAddress').value = rowData.address || '';
// 填充商品类目类型，转换为中文显示 // 显示定位坐标信息（模拟数据，实际应从后端获取）
let categoryTypeText = ''; const coordsElement = document.getElementById('detailLocationCoords');
if (rowData.categoryType === 'offline') { if (rowData.location) {
categoryTypeText = '线下菜市场'; coordsElement.textContent = '经纬度: ' + rowData.location;
} else if (rowData.categoryType === 'cloud') {
categoryTypeText = '云店';
} else { } else {
categoryTypeText = rowData.categoryType || ''; coordsElement.textContent = '暂无定位信息';
} }
document.getElementById('detailCategoryType').value = categoryTypeText;
document.getElementById('detailAddress').value = rowData.address || '';
document.getElementById('detailDetailAddress').value = rowData.detailAddress || '';
document.getElementById('detailLocation').value = rowData.location || '';
document.getElementById('detailBoothCount').value = rowData.boothCount || '';
document.getElementById('detailBusinessStatus').value = rowData.businessStatus || '';
// 设置开关状态
document.getElementById('detailAutoBusinessTime').checked = rowData.autoBusinessTime || false;
document.getElementById('detailMarketStatus').checked = rowData.marketStatus || false;
document.getElementById('detailThirdPartyDelivery').checked = rowData.thirdPartyDelivery || false;
// 显示模态框 // 显示模态框
document.getElementById('detailMarketModal').classList.add('active'); document.getElementById('detailMarketModal').classList.add('active');