dm-design/平台端web/权限管理/市场经营者创建.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>市场经营者创建</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            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;
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1600px;
            margin: 0 auto;
        }

        /* 页面头部 */
        .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;
        }

        .page-title {
            font-size: 24px;
            font-weight: 600;
            color: #262626;
        }

        /* 按钮样式 */
        .btn {
            height: 40px;
            padding: 0 16px;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
            gap: 5px;
        }

        .btn-primary {
            background: #1890ff;
            color: white;
        }

        .btn-primary:hover {
            background: #40a9ff;
        }

        .btn-success {
            background: #52c41a;
            color: white;
        }

        .btn-success:hover {
            background: #73d13d;
        }

        .btn-default {
            background: white;
            color: #666;
            border: 1px solid #ddd;
        }

        .btn-default:hover {
            border-color: #1890ff;
            color: #1890ff;
        }

        .button-group {
            display: flex;
            gap: 12px;
        }

        /* 表单区域 */
        .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: 18px;
            font-weight: 600;
            color: #262626;
            margin-bottom: 20px;
            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;
            flex-direction: column;
            gap: 8px;
        }

        .form-label {
            font-size: 14px;
            color: #666;
            font-weight: 500;
        }

        .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: #1890ff;
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
        }

        /* 菜市场选择下拉框 */
        .market-select-container {
            position: relative;
        }

        .market-dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            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 12px;
            cursor: pointer;
            transition: background-color 0.2s;
            font-size: 14px;
        }

        .market-option:hover {
            background-color: #f8f9fa;
        }

        .market-option.selected {
            background-color: #e6f7ff;
            color: #1890ff;
        }

        /* 权限分配区域 */
        .permissions-container {
            max-height: 500px;
            overflow-y: auto;
        }

        .permission-tree {
            list-style: none;
        }

        .permission-item {
            margin-bottom: 8px;
        }

        .permission-node {
            display: flex;
            align-items: center;
            padding: 12px 16px;
            border-radius: 6px;
            transition: all 0.3s;
            cursor: pointer;
            background-color: white;
            border: 1px solid #f0f0f0;
        }

        .permission-node:hover {
            background-color: #f8f9fa;
            border-color: #1890ff;
        }

        .permission-node.selected {
            background-color: #e6f7ff;
            border-color: #1890ff;
        }

        .permission-checkbox {
            margin-right: 12px;
            width: 18px;
            height: 18px;
            cursor: pointer;
            accent-color: #1890ff;
        }

        .expand-btn {
            background: none;
            border: none;
            cursor: pointer;
            padding: 4px;
            margin-right: 12px;
            color: #1890ff;
            font-size: 14px;
            transition: all 0.3s;
            min-width: 24px;
            border-radius: 4px;
        }

        .expand-btn:hover {
            background: #e6f7ff;
        }

        .expand-btn.collapsed {
            transform: rotate(-90deg);
        }

        .permission-label {
            font-size: 14px;
            color: #333;
            user-select: none;
            flex: 1;
            font-weight: 500;
        }

        .permission-children {
            margin-left: 40px;
            margin-top: 8px;
            border-left: 2px solid #e6f7ff;
            padding-left: 16px;
            display: none;
        }

        .permission-children.expanded {
            display: block;
        }

        .permission-item.parent > .permission-node {
            background-color: #fafafa;
            font-weight: 600;
        }

        /* 操作区域 */
        .actions {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            padding-top: 20px;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            body {
                padding: 10px;
            }

            .page-header {
                padding: 12px 16px;
                flex-direction: column;
                gap: 12px;
                align-items: flex-start;
            }

            .form-section {
                padding: 16px;
            }

            .form-row {
                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;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 页面头部 -->
        <div class="page-header">
            <h1 class="page-title">市场经营者创建</h1>
            <div class="button-group">
                <button class="btn btn-default" onclick="resetForm()">重置</button>
            </div>
        </div>

        <!-- 账号信息 -->
        <div class="form-section">
            <h2 class="section-title">账号信息</h2>
            <div class="form-row">
                <div class="form-item">
                    <label class="form-label">菜市场选择 *</label>
                    <div class="market-select-container">
                        <input type="text" id="marketSelect" class="form-input"
                               placeholder="请选择菜市场" readonly onclick="toggleMarketDropdown()">
                        <div id="marketDropdown" class="market-dropdown">
                            <input type="text" id="marketFilter" class="market-filter"
                                   placeholder="搜索菜市场..."
                                   oninput="filterMarkets(this.value)">
                            <div id="marketOptions"></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>
            </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">
                <button class="btn btn-default" onclick="cancelAssignment()">取消</button>
                <button class="btn btn-success" onclick="saveAssignment()">保存分配</button>
            </div>
        </div>
    </div>

    <script>
        // 菜市场数据
        const markets = [
            { id: 1, name: '中央菜市场', code: 'CENTRAL_MARKET' },
            { id: 2, name: '东区菜市场', code: 'EAST_MARKET' },
            { id: 3, name: '西区菜市场', code: 'WEST_MARKET' },
            { id: 4, name: '南区菜市场', code: 'SOUTH_MARKET' },
            { id: 5, name: '北区菜市场', code: 'NORTH_MARKET' },
            { id: 6, name: '新华菜市场', code: 'XINHUA_MARKET' },
            { id: 7, name: '人民菜市场', code: 'RENMIN_MARKET' },
            { id: 8, name: '建设菜市场', code: 'JIANSHE_MARKET' }
        ];

        // 权限数据
        const permissions = [
            {
                id: 1,
                code: 'SYSTEM',
                name: '系统管理',
                description: '系统管理模块',
                parentCode: '',
                type: 'menu'
            },
            {
                id: 2,
                code: 'SYSTEM_USER',
                name: '用户管理',
                description: '用户管理功能',
                parentCode: 'SYSTEM',
                type: 'menu'
            },
            {
                id: 3,
                code: 'SYSTEM_USER_ADD',
                name: '添加用户',
                description: '添加新用户按钮',
                parentCode: 'SYSTEM_USER',
                type: 'button'
            },
            {
                id: 4,
                code: 'SYSTEM_USER_EDIT',
                name: '编辑用户',
                description: '编辑用户信息按钮',
                parentCode: 'SYSTEM_USER',
                type: 'button'
            },
            {
                id: 5,
                code: 'SYSTEM_ROLE',
                name: '角色管理',
                description: '角色管理功能',
                parentCode: 'SYSTEM',
                type: 'menu'
            },
            {
                id: 6,
                code: 'CONTENT',
                name: '内容管理',
                description: '内容管理模块',
                parentCode: '',
                type: 'menu'
            }
        ];

        let selectedMarket = null;
        let selectedPermissions = new Set();

        // 初始化页面
        document.addEventListener('DOMContentLoaded', function() {
            initMarketOptions();
            initPermissionTree();
            bindEvents();
        });

        // 初始化菜市场选项
        function initMarketOptions() {
            const optionsContainer = document.getElementById('marketOptions');
            optionsContainer.innerHTML = '';

            markets.forEach(market => {
                const option = document.createElement('div');
                option.className = 'market-option';
                option.textContent = market.name;
                option.dataset.marketId = market.id;
                option.onclick = () => selectMarket(market);
                optionsContainer.appendChild(option);
            });
        }

        // 选择菜市场
        function selectMarket(market) {
            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);
            });
        }

        // 切换菜市场下拉框显示
        function toggleMarketDropdown() {
            const dropdown = document.getElementById('marketDropdown');
            dropdown.classList.toggle('show');

            if (dropdown.classList.contains('show')) {
                document.getElementById('marketFilter').focus();
            }
        }

        // 过滤菜市场
        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';
            });
        }

        // 初始化权限树
        function initPermissionTree() {
            const tree = buildPermissionTree(permissions);
            const treeContainer = document.getElementById('permissionTree');
            treeContainer.innerHTML = '';

            tree.forEach(item => {
                treeContainer.appendChild(createPermissionNode(item));
            });
        }

        // 构建权限树
        function buildPermissionTree(data) {
            const map = {};
            const roots = [];

            // 创建映射
            data.forEach(item => {
                map[item.code] = { ...item, children: [] };
            });

            // 构建树结构
            data.forEach(item => {
                if (item.parentCode && map[item.parentCode]) {
                    map[item.parentCode].children.push(map[item.code]);
                } else {
                    roots.push(map[item.code]);
                }
            });

            return roots;
        }

        // 创建权限节点
        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');
                expandBtn.className = 'expand-btn';
                expandBtn.textContent = '▼';
                expandBtn.onclick = (e) => {
                    e.stopPropagation();
                    togglePermissionChildren(expandBtn, li);
                };
                nodeDiv.appendChild(expandBtn);
            } else {
                // 占位符保持对齐
                const placeholder = document.createElement('span');
                placeholder.style.width = '24px';
                placeholder.style.display = 'inline-block';
                nodeDiv.appendChild(placeholder);
            }

            // 复选框
            const checkbox = document.createElement('input');
            checkbox.type = 'checkbox';
            checkbox.className = 'permission-checkbox';
            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.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;
        }

        // 切换权限子节点显示
        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 ? '▶' : '▼';
            btn.classList.toggle('collapsed', isExpanded);
        }

        // 处理权限选择变化
        function handlePermissionChange(event, permission) {
            const checkbox = event.target;
            const isChecked = checkbox.checked;
            const permissionCode = permission.code;
            const node = checkbox.closest('.permission-node');

            // 更新节点选中样式
            if (node) {
                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);
        }

        // 选择/取消子权限
        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);
                }
            });
        }

        // 检查是否需要取消父权限选择
        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);
                }
            }
        }

        // 更新权限显示
        function updatePermissionDisplay() {
            console.log('已选择权限:', Array.from(selectedPermissions));
        }

        // 绑定事件
        function bindEvents() {
            // 点击其他地方关闭下拉框
            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');
                }
            });

            // 手机号输入验证
            document.getElementById('phoneNumber').addEventListener('input', function(e) {
                let value = e.target.value.replace(/\D/g, '');
                if (value.length > 11) {
                    value = value.slice(0, 11);
                }
                e.target.value = value;
            });
        }

        // 重置表单
        function resetForm() {
            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('');
            }
        }

        // 取消分配
        function cancelAssignment() {
            if (confirm('确定要取消权限分配吗?未保存的更改将丢失。')) {
                window.history.back();
            }
        }

        // 保存权限分配
        function saveAssignment() {
            // 验证菜市场
            if (!selectedMarket) {
                alert('请选择菜市场!');
                return;
            }

            // 验证手机号
            const phoneNumber = document.getElementById('phoneNumber').value.trim();
            if (!phoneNumber) {
                alert('请输入手机号!');
                return;
            }

            if (!/^1[3-9]\d{9}$/.test(phoneNumber)) {
                alert('请输入正确的手机号格式!');
                return;
            }

            // 验证权限选择
            if (selectedPermissions.size === 0) {
                alert('请至少选择一个权限!');
                return;
            }

            // 构建保存数据
            const assignmentData = {
                market: selectedMarket,
                phoneNumber: phoneNumber,
                permissions: Array.from(selectedPermissions)
            };

            console.log('保存权限分配数据:', assignmentData);

            // 这里应该调用API保存数据
            alert('权限分配保存成功!');
        }
    </script>
</body>
</html>