-
-
-
-
-
-
-
diff --git a/平台端web/权限管理/市场经营者创建.html b/平台端web/权限管理/市场经营者创建.html
index ec4d77c..dc3dc22 100644
--- a/平台端web/权限管理/市场经营者创建.html
+++ b/平台端web/权限管理/市场经营者创建.html
@@ -12,178 +12,178 @@
}
body {
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
- background-color: #f5f7fa;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ background-color: #f5f5f5;
color: #333;
- height: 100vh;
- margin: 0;
- padding: 0;
+ min-height: 100vh;
+ padding: 20px;
}
.container {
- width: 100%;
- height: 100vh;
- margin: 0;
- background-color: #fff;
- border-radius: 0;
- box-shadow: none;
- overflow: hidden;
+ max-width: 1600px;
+ margin: 0 auto;
}
- .header {
- background: linear-gradient(135deg, #2c3e50, #3498db);
- color: #fff;
- padding: 20px 30px;
+ /* 页面头部 */
+ .page-header {
+ background: white;
+ padding: 16px 24px;
+ margin-bottom: 16px;
+ border-radius: 8px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
}
- .header h1 {
- font-size: 1.8rem;
+ .page-title {
+ font-size: 24px;
font-weight: 600;
+ color: #262626;
}
- .header-actions {
- display: flex;
- gap: 10px;
- }
-
+ /* 按钮样式 */
.btn {
- padding: 10px 20px;
+ height: 40px;
+ padding: 0 16px;
border: none;
- border-radius: 5px;
- cursor: pointer;
+ border-radius: 6px;
font-size: 14px;
- font-weight: 500;
- transition: all 0.3s ease;
+ cursor: pointer;
display: inline-flex;
align-items: center;
+ justify-content: center;
+ transition: all 0.3s;
gap: 5px;
}
.btn-primary {
- background-color: #3498db;
- color: #fff;
+ background: #1890ff;
+ color: white;
}
.btn-primary:hover {
- background-color: #2980b9;
- transform: translateY(-2px);
+ background: #40a9ff;
}
.btn-success {
- background-color: #27ae60;
- color: #fff;
+ background: #52c41a;
+ color: white;
}
.btn-success:hover {
- background-color: #229954;
+ background: #73d13d;
}
- .btn-warning {
- background-color: #f39c12;
- color: #fff;
+ .btn-default {
+ background: white;
+ color: #666;
+ border: 1px solid #ddd;
}
- .btn-warning:hover {
- background-color: #e67e22;
+ .btn-default:hover {
+ border-color: #1890ff;
+ color: #1890ff;
}
- /* 内容区域 */
- .content {
- padding: 30px;
+ .button-group {
+ display: flex;
+ 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 {
- font-size: 1.4rem;
+ font-size: 18px;
font-weight: 600;
- color: #2c3e50;
+ color: #262626;
margin-bottom: 20px;
- padding-bottom: 10px;
- border-bottom: 2px solid #ecf0f1;
- }
-
- /* 账号创建区域 */
- .account-form {
- background-color: #f8f9fa;
- padding: 25px;
- border-radius: 8px;
- border: 1px solid #dee2e6;
+ padding-bottom: 12px;
+ border-bottom: 1px solid #f0f0f0;
}
.form-row {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 16px;
+ margin-bottom: 16px;
+ }
+
+ .form-item {
display: flex;
- gap: 20px;
- align-items: end;
+ flex-direction: column;
+ gap: 8px;
}
- .form-group {
- 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;
+ .form-label {
font-size: 14px;
- transition: border-color 0.3s ease;
+ color: #666;
+ font-weight: 500;
}
- .form-group input:focus,
- .form-group select:focus {
+ .form-input,
+ .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;
- border-color: #3498db;
- box-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
+ border-color: #1890ff;
+ box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
- /* 菜市场选择框样式 */
+ /* 菜市场选择下拉框 */
.market-select-container {
position: relative;
}
- .market-select {
- cursor: pointer;
- }
-
.market-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
- background: #fff;
- border: 1px solid #ddd;
- border-top: none;
- border-radius: 0 0 5px 5px;
- max-height: 200px;
+ background: white;
+ border: 1px solid #f0f0f0;
+ border-radius: 6px;
+ max-height: 300px;
overflow-y: auto;
z-index: 1000;
display: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+ margin-top: 4px;
}
.market-dropdown.show {
display: block;
}
+ .market-filter {
+ padding: 12px;
+ border: none;
+ border-bottom: 1px solid #f0f0f0;
+ width: 100%;
+ outline: none;
+ font-size: 14px;
+ }
+
.market-option {
- padding: 10px 15px;
+ padding: 10px 12px;
cursor: pointer;
- transition: background-color 0.2s ease;
+ transition: background-color 0.2s;
+ font-size: 14px;
}
.market-option:hover {
@@ -191,24 +191,12 @@
}
.market-option.selected {
- background-color: #3498db;
- color: #fff;
- }
-
- .market-filter {
- padding: 10px 15px;
- border: none;
- border-bottom: 1px solid #eee;
- width: 100%;
- outline: none;
+ background-color: #e6f7ff;
+ color: #1890ff;
}
/* 权限分配区域 */
.permissions-container {
- background-color: #f8f9fa;
- padding: 25px;
- border-radius: 8px;
- border: 1px solid #dee2e6;
max-height: 500px;
overflow-y: auto;
}
@@ -224,24 +212,22 @@
.permission-node {
display: flex;
align-items: center;
- padding: 12px 15px;
+ padding: 12px 16px;
border-radius: 6px;
- transition: all 0.3s ease;
+ transition: all 0.3s;
cursor: pointer;
- background-color: #fff;
- border: 1px solid #e9ecef;
- margin-bottom: 5px;
+ background-color: white;
+ border: 1px solid #f0f0f0;
}
.permission-node:hover {
background-color: #f8f9fa;
- border-color: #3498db;
- box-shadow: 0 2px 8px rgba(52, 152, 219, 0.15);
+ border-color: #1890ff;
}
-
+
.permission-node.selected {
- background-color: #e3f2fd;
- border-color: #3498db;
+ background-color: #e6f7ff;
+ border-color: #1890ff;
}
.permission-checkbox {
@@ -249,23 +235,24 @@
width: 18px;
height: 18px;
cursor: pointer;
- accent-color: #3498db;
+ accent-color: #1890ff;
}
.expand-btn {
- background: #3498db;
+ background: none;
border: none;
cursor: pointer;
- padding: 2px 8px;
+ padding: 4px;
margin-right: 12px;
- color: #fff;
+ color: #1890ff;
font-size: 14px;
- transition: all 0.3s ease;
- min-width: 28px;
+ transition: all 0.3s;
+ min-width: 24px;
border-radius: 4px;
- display: flex;
- align-items: center;
- justify-content: center;
+ }
+
+ .expand-btn:hover {
+ background: #e6f7ff;
}
.expand-btn.collapsed {
@@ -274,140 +261,132 @@
.permission-label {
font-size: 14px;
- color: #2c3e50;
+ color: #333;
user-select: none;
flex: 1;
font-weight: 500;
}
.permission-children {
- margin-left: 35px;
+ margin-left: 40px;
margin-top: 8px;
- border-left: 2px solid #3498db;
- padding-left: 20px;
+ border-left: 2px solid #e6f7ff;
+ padding-left: 16px;
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 {
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 {
- background-color: #edf7ff;
- border-color: #bbdefb;
+ background-color: #fafafa;
font-weight: 600;
}
- .permission-item.child .permission-node {
- margin-left: 15px;
- background-color: #f8f9fa;
- }
-
/* 操作区域 */
.actions {
display: flex;
justify-content: flex-end;
- gap: 10px;
+ gap: 12px;
padding-top: 20px;
- border-top: 1px solid #dee2e6;
- margin-top: 30px;
}
/* 响应式设计 */
@media (max-width: 768px) {
- .container {
- margin: 0;
- border-radius: 0;
+ body {
+ padding: 10px;
}
-
- .header {
- padding: 15px 20px;
+
+ .page-header {
+ padding: 12px 16px;
flex-direction: column;
- gap: 15px;
+ gap: 12px;
+ align-items: flex-start;
}
-
- .content {
- padding: 20px;
+
+ .form-section {
+ padding: 16px;
}
-
+
.form-row {
- flex-direction: column;
- gap: 0;
+ grid-template-columns: 1fr;
}
}
+
+ /* 滚动条样式 */
+ .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;
+ }
-
-
-
市场经营者创建
-
-
+
+
+
-
- 市场经营者创建
+
-
-
-
账号信息
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
@@ -425,7 +404,7 @@
{ id: 8, name: '建设菜市场', code: 'JIANSHE_MARKET' }
];
- // 权限数据（从权限编辑页面获取的示例数据）
+ // 权限数据
const permissions = [
{
id: 1,
@@ -491,7 +470,7 @@
function initMarketOptions() {
const optionsContainer = document.getElementById('marketOptions');
optionsContainer.innerHTML = '';
-
+
markets.forEach(market => {
const option = document.createElement('div');
option.className = 'market-option';
@@ -507,7 +486,7 @@
selectedMarket = market;
document.getElementById('marketSelect').value = market.name;
document.getElementById('marketDropdown').classList.remove('show');
-
+
// 更新选中状态
document.querySelectorAll('.market-option').forEach(option => {
option.classList.toggle('selected', option.dataset.marketId == market.id);
@@ -518,7 +497,7 @@
function toggleMarketDropdown() {
const dropdown = document.getElementById('marketDropdown');
dropdown.classList.toggle('show');
-
+
if (dropdown.classList.contains('show')) {
document.getElementById('marketFilter').focus();
}
@@ -528,7 +507,7 @@
function filterMarkets(keyword) {
const options = document.querySelectorAll('.market-option');
keyword = keyword.toLowerCase();
-
+
options.forEach(option => {
const marketName = option.textContent.toLowerCase();
option.style.display = marketName.includes(keyword) ? 'block' : 'none';
@@ -540,7 +519,7 @@
const tree = buildPermissionTree(permissions);
const treeContainer = document.getElementById('permissionTree');
treeContainer.innerHTML = '';
-
+
tree.forEach(item => {
treeContainer.appendChild(createPermissionNode(item));
});
@@ -550,12 +529,12 @@
function buildPermissionTree(data) {
const map = {};
const roots = [];
-
+
// 创建映射
data.forEach(item => {
map[item.code] = { ...item, children: [] };
});
-
+
// 构建树结构
data.forEach(item => {
if (item.parentCode && map[item.parentCode]) {
@@ -564,7 +543,7 @@
roots.push(map[item.code]);
}
});
-
+
return roots;
}
@@ -572,10 +551,10 @@
function createPermissionNode(item) {
const li = document.createElement('li');
li.className = 'permission-item ' + (item.children.length > 0 ? 'parent' : 'child');
-
+
const nodeDiv = document.createElement('div');
nodeDiv.className = 'permission-node';
-
+
// 展开/收起按钮
if (item.children.length > 0) {
const expandBtn = document.createElement('button');
@@ -589,11 +568,11 @@
} else {
// 占位符保持对齐
const placeholder = document.createElement('span');
- placeholder.style.width = '28px';
+ placeholder.style.width = '24px';
placeholder.style.display = 'inline-block';
nodeDiv.appendChild(placeholder);
}
-
+
// 复选框
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
@@ -601,28 +580,28 @@
checkbox.dataset.permissionCode = item.code;
checkbox.onchange = (e) => handlePermissionChange(e, item);
nodeDiv.appendChild(checkbox);
-
+
// 权限标签
const label = document.createElement('span');
label.className = 'permission-label';
- label.textContent = `${item.name}（${item.description || item.code}）`;
+ label.textContent = `${item.name}(${item.description || item.code})`;
label.onclick = () => checkbox.click();
nodeDiv.appendChild(label);
-
+
li.appendChild(nodeDiv);
-
+
// 子权限
if (item.children.length > 0) {
const childrenContainer = document.createElement('ul');
childrenContainer.className = 'permission-children';
-
+
item.children.forEach(child => {
childrenContainer.appendChild(createPermissionNode(child));
});
-
+
li.appendChild(childrenContainer);
}
-
+
return li;
}
@@ -630,7 +609,7 @@
function togglePermissionChildren(btn, li) {
const children = li.querySelector('.permission-children');
if (!children) return;
-
+
const isExpanded = children.classList.contains('expanded');
children.classList.toggle('expanded');
btn.textContent = isExpanded ? '▶' : '▼';
@@ -643,52 +622,50 @@
const isChecked = checkbox.checked;
const permissionCode = permission.code;
const node = checkbox.closest('.permission-node');
-
+
// 更新节点选中样式
if (node) {
- if (isChecked) {
- node.classList.add('selected');
- } else {
- node.classList.remove('selected');
- }
+ node.classList.toggle('selected', isChecked);
}
-
+
if (isChecked) {
selectedPermissions.add(permissionCode);
- // 选中子级权限时，自动选中所有父级权限
+ // 选中子级权限时,自动选中所有父级权限
selectParentPermissions(permission);
- // 如果是父权限，自动选中所有子权限
+ // 如果是父权限,自动选中所有子权限
if (permission.children && permission.children.length > 0) {
selectChildrenPermissions(permission, true);
}
} else {
selectedPermissions.delete(permissionCode);
- // 如果是父权限，自动取消所有子权限
+ // 如果是父权限,自动取消所有子权限
if (permission.children && permission.children.length > 0) {
selectChildrenPermissions(permission, false);
}
- // 如果是子权限，检查是否需要取消父权限
+ // 如果是子权限,检查是否需要取消父权限
uncheckParentIfNeeded(permission);
}
-
+
updatePermissionDisplay();
}
// 选择所有父级权限
function selectParentPermissions(permission) {
if (!permission.parentCode) return;
-
+
// 查找父权限
const parent = permissions.find(p => p.code === permission.parentCode);
if (!parent) return;
-
+
// 选中父权限
const parentCheckbox = document.querySelector(`[data-permission-code="${parent.code}"]`);
if (parentCheckbox && !parentCheckbox.checked) {
parentCheckbox.checked = true;
selectedPermissions.add(parent.code);
+ const parentNode = parentCheckbox.closest('.permission-node');
+ if (parentNode) parentNode.classList.add('selected');
}
-
+
// 递归选中上级父权限
selectParentPermissions(parent);
}
@@ -696,17 +673,20 @@
// 选择/取消子权限
function selectChildrenPermissions(parent, select) {
if (!parent.children) return;
-
+
parent.children.forEach(child => {
const childCheckbox = document.querySelector(`[data-permission-code="${child.code}"]`);
if (childCheckbox) {
childCheckbox.checked = select;
+ const childNode = childCheckbox.closest('.permission-node');
+ if (childNode) childNode.classList.toggle('selected', select);
+
if (select) {
selectedPermissions.add(child.code);
} else {
selectedPermissions.delete(child.code);
}
-
+
// 递归处理子权限
selectChildrenPermissions(child, select);
}
@@ -716,20 +696,22 @@
// 检查是否需要取消父权限选择
function uncheckParentIfNeeded(permission) {
if (!permission.parentCode) return;
-
+
// 查找父权限
const parent = permissions.find(p => p.code === permission.parentCode);
if (!parent) return;
-
+
// 检查父权限的所有子权限是否都未选中
const siblings = permissions.filter(p => p.parentCode === parent.code);
const hasSelectedSibling = siblings.some(sibling => selectedPermissions.has(sibling.code));
-
+
if (!hasSelectedSibling) {
const parentCheckbox = document.querySelector(`[data-permission-code="${parent.code}"]`);
if (parentCheckbox) {
parentCheckbox.checked = false;
selectedPermissions.delete(parent.code);
+ const parentNode = parentCheckbox.closest('.permission-node');
+ if (parentNode) parentNode.classList.remove('selected');
// 递归检查上级父权限
uncheckParentIfNeeded(parent);
}
@@ -738,7 +720,6 @@
// 更新权限显示
function updatePermissionDisplay() {
- // 这里可以添加一些UI反馈，比如显示已选权限数量等
console.log('已选择权限:', Array.from(selectedPermissions));
}
@@ -748,7 +729,7 @@
document.addEventListener('click', function(e) {
const dropdown = document.getElementById('marketDropdown');
const selectContainer = document.querySelector('.market-select-container');
-
+
if (!selectContainer.contains(e.target)) {
dropdown.classList.remove('show');
}
@@ -766,23 +747,26 @@
// 重置表单
function resetForm() {
- if (confirm('确定要重置所有信息吗？')) {
+ if (confirm('确定要重置所有信息吗?')) {
// 重置菜市场选择
selectedMarket = null;
document.getElementById('marketSelect').value = '';
document.querySelectorAll('.market-option').forEach(option => {
option.classList.remove('selected');
});
-
+
// 重置手机号
document.getElementById('phoneNumber').value = '';
-
+
// 重置权限选择
selectedPermissions.clear();
document.querySelectorAll('.permission-checkbox').forEach(checkbox => {
checkbox.checked = false;
});
-
+ document.querySelectorAll('.permission-node').forEach(node => {
+ node.classList.remove('selected');
+ });
+
// 重置搜索
document.getElementById('marketFilter').value = '';
filterMarkets('');
@@ -791,7 +775,7 @@
// 取消分配
function cancelAssignment() {
- if (confirm('确定要取消权限分配吗？未保存的更改将丢失。')) {
+ if (confirm('确定要取消权限分配吗?未保存的更改将丢失。')) {
window.history.back();
}
}
@@ -800,40 +784,40 @@
function saveAssignment() {
// 验证菜市场
if (!selectedMarket) {
- alert('请选择菜市场！');
+ alert('请选择菜市场!');
return;
}
-
+
// 验证手机号
const phoneNumber = document.getElementById('phoneNumber').value.trim();
if (!phoneNumber) {
- alert('请输入手机号！');
+ alert('请输入手机号!');
return;
}
-
+
if (!/^1[3-9]\d{9}$/.test(phoneNumber)) {
- alert('请输入正确的手机号格式！');
+ alert('请输入正确的手机号格式!');
return;
}
-
+
// 验证权限选择
if (selectedPermissions.size === 0) {
- alert('请至少选择一个权限！');
+ alert('请至少选择一个权限!');
return;
}
-
+
// 构建保存数据
const assignmentData = {
market: selectedMarket,
phoneNumber: phoneNumber,
permissions: Array.from(selectedPermissions)
};
-
+
console.log('保存权限分配数据:', assignmentData);
-
+
// 这里应该调用API保存数据
- alert('权限分配保存成功！');
+ alert('权限分配保存成功!');
}
-账号信息
+
+
-
-
-
+
+
-
+
+
+
+
-
-
+
+ 权限分配
- +
+
+
+
+ 权限分配
+ +
-
-
+
+