Calculation/app/public/js/project_screen_setting.js

/* global $, postData, toastr, window */
'use strict';

$(function() {
    const pageData = window.projectScreenPageData || { screens: [], templates: [] };
    let screens = pageData.screens || [];
    const templates = pageData.templates || [];
    let selectedId = screens.length ? String((screens.find(x => parseInt(x.is_default) === 1) || screens[0]).id) : '';
    let selectedCodes = [];
    let permissionPage = 1;
    const permissionPageSize = 50;
    let permissionChanges = {};
    let permissionOriginal = {};

    const escapeHtml = function(value) {
        return $('<div>').text(value === undefined || value === null ? '' : value).html();
    };

    const selectedScreen = function() {
        return screens.find(x => String(x.id) === selectedId);
    };

    const postProjectScreen = function(type, data, successCallback, errorCallback) {
        postData(
            '/setting/module/projectscreen',
            $.extend({ type }, data),
            successCallback,
            errorCallback
        );
    };

    const renderScreens = function() {
        if (selectedId && !screens.some(x => String(x.id) === selectedId)) {
            selectedId = screens.length ? String(screens[0].id) : '';
        }
        if (!selectedId && screens.length) {
            selectedId = String((screens.find(x => parseInt(x.is_default) === 1) || screens[0]).id);
        }
        const html = [];
        screens.forEach(screen => {
            const active = String(screen.id) === selectedId ? ' active' : '';
            html.push(`<div class="list-group-item list-group-item-action d-flex align-items-center project-screen-list-item${active}" data-id="${screen.id}">`);
            html.push(`<span>${escapeHtml(screen.name)}</span>`);
            if (parseInt(screen.is_default) === 1) html.push('<span class="ml-auto text-primary">默认</span>');
            html.push('</div>');
        });
        $('#project-screen-list').html(html.join(''));

        const screen = selectedScreen();
        if (!screen) {
            $('#project-screen-selected-name').text('大屏预览');
            $('#project-screen-default, #project-screen-delete, #project-screen-preview').hide();
            $('#project-screen-empty').show();
            return;
        }
        $('#project-screen-selected-name').text(screen.name);
        $('#project-screen-delete, #project-screen-preview').show();
        $('#project-screen-empty').hide();
        $('#project-screen-default').toggle(parseInt(screen.is_default) !== 1);
        const previewClass = screen.template && screen.template.previewClass ? screen.template.previewClass : '';
        const preview = $('#project-screen-preview');
        preview.removeClass(function(index, className) {
            return (className.match(/project-screen-preview-\S+/g) || []).join(' ');
        });
        if (previewClass) preview.addClass(previewClass);
    };

    const renderTemplates = function() {
        const html = [];
        templates.forEach(template => {
            const added = screens.some(screen => screen.template_code === template.code);
            const selected = selectedCodes.indexOf(template.code) >= 0;
            const cardClass = selected ? ' border-primary' : '';
            const statusClass = selected ? 'badge-primary' : 'badge-secondary';
            const statusText = added ? '已添加' : (selected ? '已选择' : '可选择');
            html.push('<div class="col-6 mb-3">');
            html.push(`<div class="card h-100 project-screen-template-item${added ? ' added' : ''}${cardClass}" data-code="${escapeHtml(template.code)}">`);
            html.push(`<div class="project-screen-template-preview ${escapeHtml(template.previewClass)}"><div></div></div>`);
            html.push('<div class="card-body py-2 d-flex align-items-center">');
            html.push(`<strong>${escapeHtml(template.name)}</strong><span class="badge ${statusClass} ml-auto">${statusText}</span>`);
            html.push('</div></div></div>');
        });
        $('#project-screen-template-grid').html(html.join(''));
        $('#project-screen-selected-count').text(`已选择 ${selectedCodes.length} 个`);
        $('#project-screen-add').text(selectedCodes.length ? `添加（${selectedCodes.length}）` : '添加');
    };

    const openDeleteModal = function(id) {
        selectedId = id || selectedId;
        renderScreens();
        const screen = selectedScreen();
        if (!screen) return;
        const remaining = screens.filter(x => x.id !== screen.id);
        let hint = '移除后，已有业务数据不会受到影响。';
        if (parseInt(screen.is_default) === 1 && remaining.length) {
            hint += ` “${remaining[0].name}”将自动成为默认大屏。`;
        } else if (parseInt(screen.is_default) === 1) {
            hint += ' 这是最后一个大屏，移除后左侧项目大屏入口将隐藏。';
        }
        $('#project-screen-delete-name').text(screen.name);
        $('#project-screen-delete-hint').text(hint);
        $('#project-screen-delete-modal').modal('show');
    };

    $('#project-screen-status').change(function() {
        const input = this;
        const enabled = input.checked ? 1 : 0;
        input.disabled = true;
        postProjectScreen('status', { enabled }, function() {
            $('#project-screen-module-status')
                .toggleClass('text-success', enabled === 1)
                .text(enabled ? '已开启' : '');
            input.disabled = false;
        }, function() {
            input.checked = !input.checked;
            input.disabled = false;
        });
    });

    $('.project-screen-tab').click(function(event) {
        event.preventDefault();
        const tab = $(this).attr('data-tab');
        $('.project-screen-tab').removeClass('active');
        $(this).addClass('active');
        if (tab === 'permission') {
            $('#project-screen-config').hide();
            $('#project-screen-permission').show();
            loadPermissions(1);
        } else {
            $('#project-screen-permission').hide();
            $('#project-screen-config').show();
        }
    });

    $('#project-screen-select').click(function() {
        selectedCodes = [];
        renderTemplates();
        $('#project-screen-select-modal').modal('show');
    });

    $('#project-screen-template-grid').on('click', '.project-screen-template-item:not(.added)', function() {
        const code = $(this).attr('data-code');
        const index = selectedCodes.indexOf(code);
        if (index >= 0) selectedCodes.splice(index, 1);
        else selectedCodes.push(code);
        renderTemplates();
    });

    $('#project-screen-add').click(function() {
        if (!selectedCodes.length) {
            toastr.warning('请至少选择一个大屏');
            return;
        }
        postProjectScreen('add', { codes: selectedCodes }, function(data) {
            screens = data.screens;
            const firstAdded = screens.find(x => selectedCodes[0] === x.template_code);
            selectedId = firstAdded ? String(firstAdded.id) : (screens.length ? String(screens[0].id) : '');
            renderScreens();
            $('#project-screen-select-modal').modal('hide');
            toastr.success(`已添加 ${selectedCodes.length} 个大屏`);
        });
    });

    $('#project-screen-list').on('click', '.project-screen-list-item', function() {
        selectedId = $(this).attr('data-id');
        renderScreens();
    });

    $('#project-screen-delete').click(function() { openDeleteModal(selectedId); });

    $('#project-screen-delete-confirm').click(function() {
        const screen = selectedScreen();
        if (!screen) return;
        postProjectScreen('delete', { id: screen.id }, function(data) {
            screens = data.screens;
            selectedId = screens.length ? String(screens[0].id) : '';
            renderScreens();
            $('#project-screen-delete-modal').modal('hide');
            toastr.success('大屏移除成功');
        });
    });

    $('#project-screen-default').click(function() {
        const screen = selectedScreen();
        if (!screen) return;
        postProjectScreen('default', { id: screen.id }, function(data) {
            screens = data.screens;
            renderScreens();
            toastr.success('默认大屏设置成功');
        });
    });

    const renderPermissionRows = function(result) {
        const html = [];
        permissionOriginal = {};
        result.list.forEach(account => {
            const disabled = account.is_admin ? 'disabled' : '';
            const authorized = !!(account.is_admin || account.authorized);
            const checked = authorized ? 'checked' : '';
            const adminIcon = account.is_admin ? ' <span class="ml-1" title="管理员"><i class="fa fa-user-circle-o"></i></span>' : '';
            permissionOriginal[account.id] = authorized;
            html.push(`<tr data-id="${account.id}"><td>${escapeHtml(account.account)}${adminIcon}</td><td>${escapeHtml(account.name)}</td><td>${escapeHtml(account.company)}</td><td>${escapeHtml(account.role)}</td>`);
            html.push(`<td class="text-nowrap">${escapeHtml(account.mobile)}</td>`);
            html.push(`<td><input type="checkbox" class="project-screen-permission-check" ${checked} ${disabled}></td></tr>`);
        });
        $('#project-screen-permission-body').html(html.join(''));
        $('#project-screen-permission-empty').toggle(result.list.length === 0);
        $('#project-screen-permission-count').text(`已授权 ${result.authorizedTotal} / 共 ${result.allTotal} 人`);
        const totalPage = Math.max(Math.ceil(result.total / result.pageSize), 1);
        $('#project-screen-page-info').text(`${result.page} / ${totalPage}`);
        $('#project-screen-prev').prop('disabled', result.page <= 1);
        $('#project-screen-next').prop('disabled', result.page >= totalPage);
        $('#project-screen-permission-all').prop('checked', false);
    };

    const updatePermissionSaveButton = function() {
        $('#project-screen-permission-save').toggle(Object.keys(permissionChanges).length > 0);
    };

    const setPermissionChange = function(id, authorized) {
        if (permissionOriginal[id] === authorized) delete permissionChanges[id];
        else permissionChanges[id] = { id, authorized };
    };

    function loadPermissions(page) {
        permissionPage = Math.max(page || 1, 1);
        postProjectScreen('permissionload', {
            page: permissionPage,
            pageSize: permissionPageSize,
            keyword: $('#project-screen-keyword').val(),
            authorized: $('#project-screen-authorized').prop('checked') ? 1 : 0,
        }, function(result) {
            permissionPage = result.page;
            permissionChanges = {};
            updatePermissionSaveButton();
            renderPermissionRows(result);
        });
    }

    $('#project-screen-permission-body').on('change', '.project-screen-permission-check', function() {
        const id = parseInt($(this).closest('tr').attr('data-id'));
        setPermissionChange(id, this.checked);
        updatePermissionSaveButton();
    });

    $('#project-screen-permission-all').change(function() {
        const checked = this.checked;
        $('#project-screen-permission-body .project-screen-permission-check:not(:disabled)').each(function() {
            this.checked = checked;
            const id = parseInt($(this).closest('tr').attr('data-id'));
            setPermissionChange(id, checked);
        });
        updatePermissionSaveButton();
    });

    $('#project-screen-permission-save').click(function() {
        const changes = Object.values(permissionChanges);
        if (!changes.length) return;
        postProjectScreen('permissionsave', { changes }, function() {
            permissionChanges = {};
            updatePermissionSaveButton();
            toastr.success('项目大屏权限保存成功');
            loadPermissions(permissionPage);
        });
    });

    $('#project-screen-search').click(function() { loadPermissions(1); });
    $('#project-screen-keyword').keydown(function(event) {
        if (event.keyCode === 13) loadPermissions(1);
    });
    $('#project-screen-authorized').change(function() { loadPermissions(1); });
    $('#project-screen-prev').click(function() { loadPermissions(permissionPage - 1); });
    $('#project-screen-next').click(function() { loadPermissions(permissionPage + 1); });

    renderScreens();
});