fastadmin_tailored/public/assets/js/backend/user/user.js

define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {

    var Controller = {
        index: function () {
            // 初始化表格参数配置
            Table.api.init({
                extend: {
                    index_url: 'user/user/index',
                    add_url: 'user/user/add',
                    edit_url: 'user/user/edit',
                    del_url: 'user/user/del',
                    multi_url: 'user/user/multi',
                    table: 'user',
                }
            });

            var table = $("#table");

            // 初始化表格
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                pk: 'id',
                sortName: 'user.id',
                fixedColumns: true,
                fixedRightNumber: 1,
                columns: [
                    [
                        {checkbox: true},
                        {field: 'id', title: __('Id'), sortable: true},
                        // {field: 'group.name', title: __('Group')},
                        // {field: 'username', title: __('Username'), operate: 'LIKE'},
                        {
                            field: 'user.username', 
                            title: '用户信息', 
                            operate: 'LIKE',
                            formatter: function (value, row, index) {
                                // 显示用户头像和用户名
                                var avatar = row && row.avatar ? row.avatar : '/assets/img/avatar.png';
                                var username = row && row.username ? row.username : '游客';
                                var userId = row.id || '';
                                
                                // 处理头像URL
                                var avatarUrl = avatar;
                                if (avatar && !avatar.startsWith('http') && !avatar.startsWith('//')) {
                                    avatarUrl = Fast.api.cdnurl ? Fast.api.cdnurl(avatar) : avatar;
                                }
                                
                                return '<div style="display:flex;align-items:center;">' + 
                                       '<img src="' + avatarUrl + '" style="width:40px;height:40px;border-radius:50%;margin-right:10px;" />' +
                                       '<div>' +
                                       '<div style="color:#337ab7;font-weight:bold;">' + username + '</div>' +
                                       '<div style="color:#999;font-size:12px;">ID: ' + userId + '</div>' +
                                       '</div>' +
                                       '</div>';
                            }
                        },
                        // {field: 'nickname', title: __('Nickname'), operate: 'LIKE'},
                        // {field: 'email', title: __('Email'), operate: 'LIKE'},
                        {field: 'mobile', title: __('Mobile'), operate: 'LIKE'},
                        // {field: 'avatar', title: __('Avatar'), events: Table.api.events.image, formatter: Table.api.formatter.image, operate: false},
                       //{field: 'level', title: __('Level'), operate: 'BETWEEN', sortable: true},
                        {field: 'gender', title: __('Gender'), visible: false, searchList: Controller.api.parseConfigJson('genderList')},
                        // {field: 'score', title: __('Score'), operate: 'BETWEEN', sortable: true},
                        // {field: 'successions', title: __('Successions'), visible: false, operate: 'BETWEEN', sortable: true},
                        // {field: 'maxsuccessions', title: __('Maxsuccessions'), visible: false, operate: 'BETWEEN', sortable: true},
                        // {field: 'logintime', title: __('Logintime'), formatter: Table.api.formatter.datetime, operate: 'RANGE', addclass: 'datetimerange', sortable: true},
                        // {field: 'loginip', title: __('Loginip'), formatter: Table.api.formatter.search},
                        // {field: 'jointime', title: __('Jointime'), formatter: Table.api.formatter.datetime, operate: 'RANGE', addclass: 'datetimerange', sortable: true},
                        // {field: 'joinip', title: __('Joinip'), formatter: Table.api.formatter.search},
                        {field: 'status', title: __('Status'), formatter: Table.api.formatter.status, searchList: Controller.api.parseConfigJson('statusList')},
                        {field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}
                    ]
                ]
            });

            // 为表格绑定事件
            Table.api.bindevent(table);
        },
        add: function () {
            Controller.api.bindevent();
        },
        edit: function () {
            // 双列布局样式优化
            $(document).ready(function(){
                // 为登录信息面板添加样式
                $('.login-info .form-control-static').each(function(){
                    $(this).css({
                        'background-color': '#f8f9fa',
                        'padding': '8px 12px',
                        'border-radius': '4px',
                        'border': '1px solid #e9ecef',
                        'margin': '0'
                    });
                });
                
                // 为第三方平台标签添加图标
                $('.third-platform-label').each(function(){
                    var platform = $(this).text().toLowerCase().trim();
                    var icon = '';
                    switch(platform) {
                        case 'wechat':
                            icon = '<i class="fa fa-wechat"></i> ';
                            break;
                        case 'qq':
                            icon = '<i class="fa fa-qq"></i> ';
                            break;
                        case 'weibo':
                            icon = '<i class="fa fa-weibo"></i> ';
                            break;
                        default:
                            icon = '<i class="fa fa-link"></i> ';
                    }
                    $(this).html(icon + $(this).text());
                });
                
                // 添加第三方信息表格样式
                $('.third-info-table').each(function(){
                    $(this).addClass('table-hover');
                });
                
                // 双列布局响应式处理
                function adjustDualColumnLayout() {
                    if ($(window).width() < 768) {
                        // 小屏幕时保持双列但调整比例
                        $('.form-horizontal .col-md-6').each(function(){
                            $(this).addClass('col-xs-12').removeClass('col-md-6');
                        });
                        
                        // 调整label和input的比例
                        $('.form-horizontal .col-sm-4').each(function(){
                            $(this).removeClass('col-sm-4').addClass('col-sm-3');
                        });
                        $('.form-horizontal .col-sm-8').each(function(){
                            $(this).removeClass('col-sm-8').addClass('col-sm-9');
                        });
                    } else {
                        // 大屏幕时恢复双列布局
                        $('.form-horizontal .col-xs-12').each(function(){
                            if (!$(this).hasClass('col-md-12')) {
                                $(this).addClass('col-md-6').removeClass('col-xs-12');
                            }
                        });
                        
                        // 恢复label和input的比例
                        $('.form-horizontal .col-sm-3').each(function(){
                            $(this).removeClass('col-sm-3').addClass('col-sm-4');
                        });
                        $('.form-horizontal .col-sm-9').each(function(){
                            $(this).removeClass('col-sm-9').addClass('col-sm-8');
                        });
                    }
                }
                
                // 初始调整
                adjustDualColumnLayout();
                
                // 窗口大小改变时调整
                $(window).resize(function() {
                    adjustDualColumnLayout();
                });
                
                // 为面板添加间距
                $('.panel').not(':last-child').css('margin-bottom', '20px');
                
                // 为双列布局添加分隔线（可选）
                $('.panel-body .row .col-md-6:first-child').css({
                    'border-right': '1px solid #eee',
                    'padding-right': '20px'
                });
                $('.panel-body .row .col-md-6:last-child').css({
                    'padding-left': '20px'
                });
            });
            
            Controller.api.bindevent();
        },
        api: {
             // 解析Config中的JSON字符串的辅助函数
             parseConfigJson: function(configKey, defaultValue) {
                var configValue = Config[configKey] || defaultValue || {};
                
                // 如果是字符串，尝试解析JSON
                if (typeof configValue === 'string') {
                    try {
                        return JSON.parse(configValue);
                    } catch (e) {
                        return defaultValue || {};
                    }
                }
                
                return configValue;
            },
            
            bindevent: function () {
                Form.api.bindevent($("form[role=form]"));
            }
        }
    };
    return Controller;
});