|
|
@@ -0,0 +1,453 @@
|
|
|
+Ext.define('saas.view.core.report.ReportPanel', {
|
|
|
+ extend: 'Ext.panel.Panel',
|
|
|
+ xtype: 'core-report-reportpanel',
|
|
|
+
|
|
|
+ controller: 'core-report-reportpanel',
|
|
|
+ viewModel: 'core-report-reportpanel',
|
|
|
+
|
|
|
+ requires: [
|
|
|
+ 'Ext.grid.plugin.Exporter'
|
|
|
+ ],
|
|
|
+
|
|
|
+ layout: 'vbox',
|
|
|
+ autoScroll: true,
|
|
|
+ border: 1,
|
|
|
+ bodyPadding: 5,
|
|
|
+
|
|
|
+ groupField: null, // 分组字段
|
|
|
+ listUrl: null, // 列表查询URL
|
|
|
+ defaultCondition: null, // 默认查询条件
|
|
|
+ searchItems: [], // 查询字段
|
|
|
+
|
|
|
+ initComponent: function() {
|
|
|
+ var me = this;
|
|
|
+
|
|
|
+ var store = me.initStore();
|
|
|
+
|
|
|
+ Ext.apply(me, {
|
|
|
+ items: [{
|
|
|
+ xtype: 'form',
|
|
|
+ width: '100%',
|
|
|
+ layout: 'column',
|
|
|
+ defaults:{
|
|
|
+ margin: '0 5 5 0',
|
|
|
+ labelAlign: 'right',
|
|
|
+ labelWidth: 90,
|
|
|
+ columnWidth: 0.25,
|
|
|
+ },
|
|
|
+ items: me.initSearchItems(),
|
|
|
+ dockedItems: [{
|
|
|
+ xtype: 'toolbar',
|
|
|
+ dock: 'bottom',
|
|
|
+ items: ['->', {
|
|
|
+ xtype: 'button',
|
|
|
+ text: '查询',
|
|
|
+ handler: 'onQuery'
|
|
|
+ }, '->']
|
|
|
+ }]
|
|
|
+ }, {
|
|
|
+ xtype: 'grid',
|
|
|
+ width: '100%',
|
|
|
+ flex: 1,
|
|
|
+ border: 1,
|
|
|
+ plugins: {
|
|
|
+ gridexporter: true
|
|
|
+ },
|
|
|
+ features: [{
|
|
|
+ ftype: 'groupingsummary',
|
|
|
+ hideGroupedHeader: false,
|
|
|
+ enableGroupingMenu: false,
|
|
|
+ collapsible: false
|
|
|
+ }, {
|
|
|
+ ftype: 'summary',
|
|
|
+ dock: 'bottom'
|
|
|
+ }],
|
|
|
+ store: store,
|
|
|
+ columns: me.initColumns(),
|
|
|
+ dockedItems: [{
|
|
|
+ xtype: 'toolbar',
|
|
|
+ dock: 'top',
|
|
|
+ items: ['->', {
|
|
|
+ xtype: 'button',
|
|
|
+ text: '导出为...',
|
|
|
+ menu: {
|
|
|
+ defaults: {
|
|
|
+ handler: 'exportTo'
|
|
|
+ },
|
|
|
+ items: [{
|
|
|
+ text: 'Excel xlsx',
|
|
|
+ cfg: {
|
|
|
+ type: 'excel07',
|
|
|
+ ext: 'xlsx'
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ text: 'Excel xlsx (include groups)',
|
|
|
+ cfg: {
|
|
|
+ type: 'excel07',
|
|
|
+ ext: 'xlsx',
|
|
|
+ includeGroups: true,
|
|
|
+ includeSummary: true
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ text: 'Excel xml',
|
|
|
+ cfg: {
|
|
|
+ type: 'excel03',
|
|
|
+ ext: 'xml'
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ text: 'Excel xml (include groups)',
|
|
|
+ cfg: {
|
|
|
+ includeGroups: true,
|
|
|
+ includeSummary: true
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ text: 'CSV',
|
|
|
+ cfg: {
|
|
|
+ type: 'csv'
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ text: 'TSV',
|
|
|
+ cfg: {
|
|
|
+ type: 'tsv',
|
|
|
+ ext: 'csv'
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ text: 'HTML',
|
|
|
+ cfg: {
|
|
|
+ type: 'html'
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ text: 'HTML (include groups)',
|
|
|
+ cfg: {
|
|
|
+ type: 'html',
|
|
|
+ includeGroups: true,
|
|
|
+ includeSummary: true
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ }, {
|
|
|
+ style: {
|
|
|
+ 'border-top': '1px solid #35baf6 !important'
|
|
|
+ },
|
|
|
+ xtype: 'pagingtoolbar',
|
|
|
+ dock: 'bottom',
|
|
|
+ displayInfo: true,
|
|
|
+ store: store
|
|
|
+ }],
|
|
|
+ }]
|
|
|
+ });
|
|
|
+
|
|
|
+ me.callParent(arguments);
|
|
|
+ },
|
|
|
+
|
|
|
+ getListGrid: function() {
|
|
|
+ var me = this,
|
|
|
+ grid = me.items.items[1];
|
|
|
+
|
|
|
+ return grid;
|
|
|
+ },
|
|
|
+
|
|
|
+ initStore: function() {
|
|
|
+ var me = this;
|
|
|
+ var store = Ext.create('Ext.data.Store', {
|
|
|
+ fields: me.getFields(),
|
|
|
+ autoLoad: true,
|
|
|
+ pageSize: 15,
|
|
|
+ data: [],
|
|
|
+ proxy: {
|
|
|
+ type: 'ajax',
|
|
|
+ url: me.listUrl,
|
|
|
+ timeout: 8000,
|
|
|
+ actionMethods: {
|
|
|
+ read: 'GET'
|
|
|
+ },
|
|
|
+ reader: {
|
|
|
+ type: 'json',
|
|
|
+ rootProperty: 'data.list',
|
|
|
+ totalProperty: 'data.total',
|
|
|
+ },
|
|
|
+ listeners: {
|
|
|
+ exception: function(proxy, response, operation, eOpts) {
|
|
|
+ if(operation.success) {
|
|
|
+ if(response.timedout) {
|
|
|
+ showToast('请求超时');
|
|
|
+ }
|
|
|
+ }else {
|
|
|
+ console.error('exception: ', response.responseJson);
|
|
|
+ showToast('请求错误:' + response.responseJson);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ listeners: {
|
|
|
+ beforeload: function (store, op) {
|
|
|
+ condition = me.getConditions(),
|
|
|
+ defaultCondition = me.defaultCondition;
|
|
|
+
|
|
|
+ if(defaultCondition) {
|
|
|
+ condition.push({
|
|
|
+ type: 'condition',
|
|
|
+ value: defaultCondition
|
|
|
+ });
|
|
|
+ }
|
|
|
+ Ext.apply(store.proxy.extraParams, {
|
|
|
+ number: store.exportNumber?store.exportNumber:op._page,
|
|
|
+ size: store.exportPageSize?store.exportPageSize:store.pageSize,
|
|
|
+ mode: 'MAIN',
|
|
|
+ condition: JSON.stringify(condition)
|
|
|
+ });
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ if(me.groupField) {
|
|
|
+ store.setGrouper({
|
|
|
+ property: me.groupField
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ return store;
|
|
|
+ },
|
|
|
+
|
|
|
+ getFields: function() {
|
|
|
+ var me = this;
|
|
|
+ return me.reportColumns.filter(function(c) {
|
|
|
+ return !!c.dataIndex;
|
|
|
+ }).map(function(c) {
|
|
|
+ return c.dataIndex;
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ initColumns: function() {
|
|
|
+ var me = this,
|
|
|
+ columns = me.reportColumns;
|
|
|
+
|
|
|
+ Ext.Array.each(columns, function(c) {
|
|
|
+ Ext.applyIf(c, {
|
|
|
+ width: 120
|
|
|
+ });
|
|
|
+
|
|
|
+ if(c.xtype == 'datecolumn') {
|
|
|
+ Ext.applyIf(c, {
|
|
|
+ format: 'Y-m-d'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ return columns;
|
|
|
+ },
|
|
|
+
|
|
|
+ initSearchItems: function() {
|
|
|
+ var me = this,
|
|
|
+ items = me.searchItems,
|
|
|
+ viewModel = me.getViewModel();
|
|
|
+
|
|
|
+ Ext.Array.each(items, function(item) {
|
|
|
+ var bind = item.bind,
|
|
|
+ name = item.name,
|
|
|
+ ignore = item.ignore,
|
|
|
+ defaultValue = item.defaultValue;
|
|
|
+
|
|
|
+ if(item.xtype == 'numberfield') {
|
|
|
+ Ext.applyIf(item, {
|
|
|
+ hideTrigger: true, // 隐藏trigger
|
|
|
+ mouseWheelEnabled: false // 取消滚轮事件
|
|
|
+ });
|
|
|
+ }
|
|
|
+ // 设置model绑定
|
|
|
+ if(!ignore) {
|
|
|
+ if(bind) {
|
|
|
+ if(!Ext.isString(bind)) {
|
|
|
+ bind = name;
|
|
|
+ Ext.apply(bind, {
|
|
|
+ value: '{form.' + bind + '}'
|
|
|
+ });
|
|
|
+ }else {
|
|
|
+ bind = name;
|
|
|
+ item.bind = '{form.' + bind + '}';
|
|
|
+ }
|
|
|
+ }else {
|
|
|
+ bind = name;
|
|
|
+ item.bind = '{form.' + bind + '}';
|
|
|
+ }
|
|
|
+ // 设置默认值
|
|
|
+ if(defaultValue) {
|
|
|
+ viewModel.set('form.' + bind, defaultValue);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ return items;
|
|
|
+ },
|
|
|
+
|
|
|
+ initToolBarItems: function () {
|
|
|
+ var me = this;
|
|
|
+
|
|
|
+ return ['->', {
|
|
|
+ ui: 'default-toolbar',
|
|
|
+ xtype: 'button',
|
|
|
+ text: '导出为...',
|
|
|
+ menu: {
|
|
|
+ defaults: {
|
|
|
+ handler: 'exportTo'
|
|
|
+ },
|
|
|
+ items: [{
|
|
|
+ text: 'Excel xlsx',
|
|
|
+ cfg: {
|
|
|
+ type: 'excel07',
|
|
|
+ ext: 'xlsx'
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ text: 'Excel xlsx (include groups)',
|
|
|
+ cfg: {
|
|
|
+ type: 'excel07',
|
|
|
+ ext: 'xlsx',
|
|
|
+ includeGroups: true,
|
|
|
+ includeSummary: true
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ text: 'Excel xml',
|
|
|
+ cfg: {
|
|
|
+ type: 'excel03',
|
|
|
+ ext: 'xml'
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ text: 'Excel xml (include groups)',
|
|
|
+ cfg: {
|
|
|
+ includeGroups: true,
|
|
|
+ includeSummary: true
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ text: 'CSV',
|
|
|
+ cfg: {
|
|
|
+ type: 'csv'
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ text: 'TSV',
|
|
|
+ cfg: {
|
|
|
+ type: 'tsv',
|
|
|
+ ext: 'csv'
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ text: 'HTML',
|
|
|
+ cfg: {
|
|
|
+ type: 'html'
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ text: 'HTML (include groups)',
|
|
|
+ cfg: {
|
|
|
+ type: 'html',
|
|
|
+ includeGroups: true,
|
|
|
+ includeSummary: true
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ },
|
|
|
+
|
|
|
+ getConditions: function() {
|
|
|
+ var me = this,
|
|
|
+ formItems = me.searchItems,
|
|
|
+ viewModel = me.getViewModel(),
|
|
|
+ viewModelData = viewModel.getData(),
|
|
|
+ bindItems = viewModelData['form'],
|
|
|
+ condition,
|
|
|
+ conditions = [];
|
|
|
+
|
|
|
+ for(k in bindItems) {
|
|
|
+ var item = Ext.Array.findBy(formItems, function(i) {
|
|
|
+ return i.name == k;
|
|
|
+ });
|
|
|
+ var field = item.name,
|
|
|
+ func = item.getCondition,
|
|
|
+ value = bindItems[k],
|
|
|
+ condition;
|
|
|
+
|
|
|
+ if(typeof func == 'function') {
|
|
|
+ condition = {
|
|
|
+ type: 'condition',
|
|
|
+ value: func(value)
|
|
|
+ }
|
|
|
+ }else {
|
|
|
+ var xtype = item.xtype || 'textfield',
|
|
|
+ type = item.fieldType || me.getDefaultFieldType(xtype),
|
|
|
+ operation = item.operation || me.getDefaultFieldOperation(xtype),
|
|
|
+ conditionValue = me.getConditionValue(xtype, value);
|
|
|
+
|
|
|
+ if(!conditionValue) {
|
|
|
+ continue;
|
|
|
+ }
|
|
|
+ condition = {
|
|
|
+ type: type,
|
|
|
+ field: field,
|
|
|
+ operation: operation,
|
|
|
+ value: conditionValue
|
|
|
+ }
|
|
|
+ }
|
|
|
+ conditions.push(condition);
|
|
|
+ }
|
|
|
+
|
|
|
+ return conditions;
|
|
|
+ },
|
|
|
+
|
|
|
+ getDefaultFieldType: function(xtype) {
|
|
|
+ var type;
|
|
|
+
|
|
|
+ if(Ext.Array.contains(['numberfield'], xtype)) {
|
|
|
+ type = 'number';
|
|
|
+ }else if(Ext.Array.contains(['datefield', 'condatefield'], xtype)) {
|
|
|
+ type = 'date';
|
|
|
+ }else if(Ext.Array.contains(['combobox', 'multicombo', 'combo', 'radiofield', 'radio'], xtype)) {
|
|
|
+ type = 'enum';
|
|
|
+ }else {
|
|
|
+ type = 'string';
|
|
|
+ }
|
|
|
+
|
|
|
+ return type;
|
|
|
+ },
|
|
|
+
|
|
|
+ getDefaultFieldOperation: function(xtype) {
|
|
|
+ var operation;
|
|
|
+
|
|
|
+ if(Ext.Array.contains(['numberfield'], xtype)) {
|
|
|
+ operation = '=';
|
|
|
+ }else if(Ext.Array.contains(['datefield'], xtype)) {
|
|
|
+ operation = '=';
|
|
|
+ }else if(Ext.Array.contains(['condatefield'], xtype)) {
|
|
|
+ operation = 'between';
|
|
|
+ }else if(Ext.Array.contains(['combobox', 'multicombo', 'combo'], xtype)) {
|
|
|
+ operation = 'in';
|
|
|
+ }else {
|
|
|
+ operation = 'like';
|
|
|
+ }
|
|
|
+
|
|
|
+ return operation;
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 处理部分字段值
|
|
|
+ */
|
|
|
+ getConditionValue: function(xtype, value) {
|
|
|
+ var conditionValue;
|
|
|
+ if(xtype == 'datefield') {
|
|
|
+ conditionValue = Ext.Date.format(new Date(from), 'Y-m-d H:i:s');
|
|
|
+ }else if(xtype == 'condatefield') {
|
|
|
+ var from = value.from,
|
|
|
+ to = value.to;
|
|
|
+
|
|
|
+ conditionValue = Ext.Date.format(new Date(from), 'Y-m-d 00:00:00') + ',' + Ext.Date.format(new Date(to), 'Y-m-d 23:59:59');
|
|
|
+ }else if(xtype == 'combobox' || xtype == 'combo') {
|
|
|
+ conditionValue = '\'' + value + '\'';
|
|
|
+ }else if(xtype == 'multicombo') {
|
|
|
+ conditionValue = value.map(function(v) {
|
|
|
+ return '\'' + v.value + '\'';
|
|
|
+ }).join(',');
|
|
|
+ }else {
|
|
|
+ conditionValue = value;
|
|
|
+ }
|
|
|
+
|
|
|
+ return conditionValue;
|
|
|
+ },
|
|
|
+});
|