cld/global/gridManager/fee/incomeExpenses.js

/*
 * @description: 
 * @Author: CP
 * @Date: 2020-12-28 14:41:49
 * @FilePath: \cld\global\gridManager\fee\incomeExpenses.js
 */

// 表格唯一标识
const gridManagerName = 'test';


const demo1 = {
    /**
     * 初始化搜索区域
     */
    initSearch: function () {
        // 渲染下拉框
        // var typeSelect = document.querySelector('.search-area select[name="type"]');
        // for(let key in TYPE_MAP) {
        //     const option = document.createElement('option');
        //     option.value = key;
        //     option.innerText = TYPE_MAP[key];
        //     typeSelect.appendChild(option);
        // }

        // 绑定搜索事件
        document.querySelector('.search-action').addEventListener('click', function () {
            var _query = {
                kw: document.querySelector('[name="kw"]').value,
                year: document.querySelector('[name="year"]').value,
                month: document.querySelector('[name="month"]').value,
                expensesType: document.querySelector('[name="expensesType"]').value,
                accountType: document.querySelector('[name="accountType"]').value,
                expenditureType: document.querySelector('[name="expenditureType"]').value,
            };
            table.GM('setQuery', _query, function () {
                console.log('setQuery执行成功');
            });
        });

        // 绑定重置
        document.querySelector('.reset-action').addEventListener('click', function () {
            var now = new Date();
            document.querySelector('[name="kw"]').value = '';
            document.querySelector('[name="year"]').value = now.getFullYear();
            document.querySelector('[name="month"]').value = '';
            document.querySelector('[name="expensesType"]').value = '';
            document.querySelector('[name="accountType"]').value = '';
            document.querySelector('[name="expenditureType"]').value = '';
        });
    },

   

    /**
     * 初始化表格
     */
    initGM: function () {
        new window.GridManager(table, {
            gridManagerName: 'test',
            width: '100%',
            height: '100%',
            // 初始渲染时是否加载数据
            // firstLoading: false,

            supportAutoOrder: false,
            // 自动序号配置
            // autoOrderConfig: {
            //     // 固定列
            //     fixed: 'left'
            // },
            supportCheckbox: false,
            // 选择框配置
            // checkboxConfig: {
            //     // 使用单选
            //     // useRadio: true,

            //     // 使用行选中
            //     // useRowCheck: true,

            //     key: 'id',
            //     // 复选时最大可选数
            //     // max: 2,

            //     // 固定列
            //     fixed: 'left'
            // },

            // 是否使用无总条数模式
            // useNoTotalsMode: true,
            // 是否开启分页
            supportAjaxPage: true,
            // 排序模式，single(升降序单一触发) overall(升降序整体触发)
            sortMode: 'single',

            // supportAdjust: false,
            // 是否开启配置功能
            // supportConfig: false,

            // 是否开启导出
            // supportExport: false,

            // 是否开启打印
            // supportPrint: false,

            // 右键菜单
            supportMenu: true,
            // menuHandler: list => {
            //     list.unshift({
            //         content: '自定义菜单',
            //         line: true,
            //         onClick: _ => {
            //             alert(_);
            //         }
            //     });
            //     return list;
            // },

            // 禁用分割线
            // disableLine: true,

            // 设置表头的icon图标是否跟随文本
            // isIconFollowText: true,

            // 组合排序
            // isCombSorting: true,

            // 合并排序
            // mergeSort: true,

            // 禁用边框线
            // disableBorder: true,

            // 行移动
            // supportMoveRow: true,
            // moveRowConfig: {
            //     key: 'priority',
            //     useSingleMode: true,
            //     fixed: 'left',
            //     handler: (list, tableData) => {
            //         //console.log(list, tableData);
            //     }
            // },

            // 禁用缓存
            disableCache: false,
            ajaxData: function (settings, params) {
                // document.querySelector('[name="categoryId"]').value = params.categoryId || "";
                return '/json/income/expenses';
            },

            // 导出配置
            exportConfig: {
                fileName: query => {
                    const date = new Date();
                    let fileName = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
                    for (let key in query) {
                        fileName = `${fileName}-${key}=${query[key]}`;
                    }
                    return fileName;
                },
                suffix: 'xls'
            },
            ajaxType: 'GET',

            // 选择事件执行前事件
            checkedBefore: function (checkedList, isChecked, row) {
                console.log('checkedBefore==', checkedList, isChecked, row);
                if (row && row.id === 90) {
                    alert('该节点在checkedBefore中配置为不可选');
                }
                return row && row.id !== 90;
            },

            // 选择事件执行后事件
            checkedAfter: function (checkedList, isChecked, row) {
                console.log('checkedAfter==', checkedList, isChecked, row);
            },

            // 全选事件执行前事件
            checkedAllBefore: function (checkedList, isChecked) {
                console.log('checkedAllBefore==', checkedList, isChecked);
                //
                // if (isChecked) {
                //     alert('不能取消全选');
                // }
                // return !isChecked;
            },

            // 全选事件执行后事件
            checkedAllAfter: function (checkedList, isChecked) {
                console.log('checkedAllAfter==', checkedList, isChecked);
            },

            // 执行排序前事件
            sortingBefore: function (query) {
                console.log('sortingBefore', query);
            },

            // 排行排序后事件
            sortingAfter: function (query) {
                console.log('sortingAfter', query);
            },

            // AJAX请求前事件函数
            ajaxBeforeSend: function (promise) {
                console.log('ajaxBeforeSend');
            },
            // AJAX成功事件函数
            ajaxSuccess: function (response) {
                console.log('ajaxSuccess');
            },

            // AJAX失败事件函数
            ajaxError: function (errorInfo) {
                console.log('ajaxError');
            },

            // AJAX结束事件函数
            ajaxComplete: function (complete) {
                console.log('ajaxComplete');
            },
            adjustBefore: eve => {
                console.log('adjustBefore=>', eve);
            },
            adjustAfter: eve => {
                console.log('adjustAfter=>', eve);
            },

            // 执行请求后执行程序
            // responseHandler: res => {
            //     res.data.forEach(item => {
            //         // 用id模拟优先级字段
            //         item.priority = item.id;
            //     });
            //     return res;
            // },

            // 单行数据渲染时执行程序
            // rowRenderHandler: (row, index) => {
            //     // if (row.id === 90) {
            //     //     row.gm_checkbox = true;
            //     // }

            //     // 指定第92行不可选中
            //     if (row.id === 92) {
            //         // row.gm_checkbox = true;
            //         row.gm_checkbox_disabled = true;
            //         row.gm_row_class_name = 'test-row-class';
            //     }
            //     return row;
            // },

            emptyTemplate: settings => {
                return `<div style="text-align: center;">${settings.query.title ? '搜索为空' : '暂无数据'}</div>`;
            },
            // 单个td的hover事件
            // cellClick: (row, rowIndex, colIndex) => {
            //     // console.log(row, rowIndex, colIndex);
            //     return {
            //         text: '这里有个提示',
            //         position: 'left'
            //     };
            // },
            // rowHover: (a, b, c) => {
            //     return {
            //         text: '这里有个提示',
            //         position: 'right'
            //     };
            // },
            //  useWordBreak: true,
            // fullColumn: {
            //     useFold: true,
            //     fixed: 'left', // 折叠事件列固定方向
            //     openState: false,
            //     bottomTemplate: function(row, index){
            //         return `
            //         <p>费用说明</p>
            //         <pre>${row.explanation}</pre>`;
            //     }
            // },
            columnData: [
                {
                    key: 'expensesTypeShow',
                    width: '60px',
                    text: '类型',
                    
                    disableMoveRow: true,
                    // 使用函数返回 dom node
                    // template: function (title, row) {
                    //     var titleNode = document.createElement('a');
                    //     titleNode.setAttribute('href', `/expensesDoc/10`);
                    //     titleNode.setAttribute('title', title);
                    //     titleNode.setAttribute('target', '_blank');
                    //     titleNode.innerText = title;
                    //     titleNode.title = `点击阅读[${row.title}]`;
                    //     titleNode.classList.add('plugin-action');
                    //     return titleNode;
                    // }
                }, 
                {
                    key: 'typeShow',
                    // remind: '报销单,借款,对公汇款,培训班',
                    
                    text: '费用类别',
                    disableMoveRow: true,
                    filter: {
                        // 筛选条件列表, 数组对象。格式: [{value: '1', text: 'HTML/CSS'}],在使用filter时该参数为必设项。
                        option: [
                            {value: '活期理财收益', text: '活期理财收益'},
                            {value: '固定理财收益', text: '固定理财收益'},
                            {value: '银行存款', text: '银行存款'},
                            {value: '功能开发中', text: '功能开发中'},
                            
                        ],
                        // 筛选选中项，字符串, 未存在选中项时设置为''。 在此设置的选中的过滤条件将会覆盖query
                        selected: '3',
                        // 否为多选, 布尔值, 默认为false。非必设项
                        isMultiple: false
                    },
                }, 
                {
                    key: 'bookSerial',
                    width: '160px',
                    text: '单号',
                    disableMoveRow: true,
                    // template: function (receiptOrder, row) {
                    //     var titleNode = document.createElement('a');
                    //     titleNode.setAttribute('href', `/expensesDoc/${row.ridOld}`);
                    //     titleNode.setAttribute('receiptOrder', receiptOrder);
                    //     titleNode.setAttribute('target', '_blank');
                    //     titleNode.innerText = receiptOrder;
                    //     titleNode.title = `详情[${row.receiptOrder}]`;
                    //     return titleNode;
                    // }
                }, 
                {
                    key: 'priceShow',
                    width: '150px',
                    text: '金额',
                    disableMoveRow: true
                }, 
                {
                    key: 'bankShow',
                    width: '160px',
                    text: '到款/支付银行',
                    disableMoveRow: true,
                    
                }, 
                {
                    key: 'dateShow',
                    text: '银行到款/支付时间',
                    width: '160px',
                    disableMoveRow: true,
                }, 
                
                {
                    key: 'inputDate',
                    width: '160px',
                    text: '入库时间',
                    disableMoveRow: true
                }, 
                {
                    key: 'pastDate',
                    width: '90px',
                    text: '操作',
                    disableMoveRow: true
                }, 
               
               
            ]
        }, query => {
            // 渲染完成后的回调函数
            console.log('渲染完成后的回调函数:', query);
        });
    },

    /**
     * 编辑功能
     */
    editRowData: function (dom) {
        window.GridManager.updateRowData('test', 'id', { id: window.parseInt(dom.getAttribute('data-id')), lastDate: new Date().getTime() });
    }
};

// GridManager 渲染
const table = document.querySelector('#feeList');

demo1.initSearch(table);
demo1.initGM(table);
//demo1.initFN();