@yibozhang/pro-table 0.0.16 → 0.0.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/yibozhang-pro-table.umd.js +28 -68
- package/bundles/yibozhang-pro-table.umd.js.map +1 -1
- package/bundles/yibozhang-pro-table.umd.min.js +1 -1
- package/bundles/yibozhang-pro-table.umd.min.js.map +1 -1
- package/esm2015/lib/page-public/antd-form.js +20 -42
- package/esm2015/lib/pro-table.component.js +4 -2
- package/esm2015/lib/table-search-bar/table-search-bar.component.js +8 -28
- package/fesm2015/yibozhang-pro-table.js +28 -68
- package/fesm2015/yibozhang-pro-table.js.map +1 -1
- package/lib/page-public/antd-form.d.ts.map +1 -1
- package/lib/pro-table.component.d.ts +1 -0
- package/lib/pro-table.component.d.ts.map +1 -1
- package/lib/table-search-bar/table-search-bar.component.d.ts +1 -1
- package/lib/table-search-bar/table-search-bar.component.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/lib/styles/custom-antd.less +18 -0
- package/yibozhang-pro-table.metadata.json +1 -1
|
@@ -643,6 +643,7 @@
|
|
|
643
643
|
this.clearBtnText = "清空";
|
|
644
644
|
this.labelWidth = "90px";
|
|
645
645
|
this.labelAlign = "right";
|
|
646
|
+
this.formItemWidth = "270px";
|
|
646
647
|
this.dataSource = [];
|
|
647
648
|
this.bordered = true;
|
|
648
649
|
this.outerBordered = true;
|
|
@@ -1786,7 +1787,7 @@
|
|
|
1786
1787
|
ProTableComponent.decorators = [
|
|
1787
1788
|
{ type: i0.Component, args: [{
|
|
1788
1789
|
selector: "app-pro-table",
|
|
1789
|
-
template: "<app-page-container\r\n [title]=\"title\"\r\n [showHeader]=\"showSearchBar\"\r\n ngClass=\"pro-table-container\"\r\n>\r\n <ng-template #header>\r\n <app-table-search-bar\r\n *ngIf=\"showSearchBar\"\r\n [labelWidth]=\"labelWidth\"\r\n [labelAlign]=\"labelAlign\"\r\n >\r\n <ng-template #leftContent>\r\n <nz-form-item\r\n *ngFor=\"let column of _searchFiledColumns\"\r\n [ngClass]=\"getFormItemClassName(column)\"\r\n >\r\n <nz-form-label *ngIf=\"!getFieldProps(column).hideLabel\" nzNoColon>\r\n <!-- \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49label\u6A21\u677F -->\r\n <ng-container\r\n *ngIf=\"\r\n column.customLabelRender &&\r\n getLabelTemplate(column.customLabelRender);\r\n else defaultLabel\r\n \"\r\n >\r\n <ng-container\r\n [ngTemplateOutlet]=\"getLabelTemplate(column.customLabelRender)\"\r\n [ngTemplateOutletContext]=\"{\r\n $implicit: column,\r\n column: column,\r\n fieldProps: getFieldProps(column)\r\n }\"\r\n >\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #defaultLabel>\r\n {{ getFieldProps(column).label || column.title }}\r\n </ng-template>\r\n </nz-form-label>\r\n <nz-form-control *ngIf=\"column.valueType === 'input'\">\r\n <input\r\n nz-input\r\n [name]=\"getFieldProps(column).name || column.prop\"\r\n [placeholder]=\"getFieldProps(column).placeHolder\"\r\n [disabled]=\"getFieldProps(column).disabled\"\r\n [(ngModel)]=\"\r\n _searchParams[getFieldProps(column).name || column.prop]\r\n \"\r\n />\r\n </nz-form-control>\r\n <nz-form-control *ngIf=\"column.valueType === 'inputPlate'\">\r\n <app-plate-input\r\n [name]=\"getFieldProps(column).name || column.prop\"\r\n [(ngModel)]=\"\r\n _searchParams[getFieldProps(column).name || column.prop]\r\n \"\r\n ></app-plate-input>\r\n </nz-form-control>\r\n <nz-form-control *ngIf=\"column.valueType === 'select'\">\r\n <nz-select\r\n [(ngModel)]=\"\r\n _searchParams[getFieldProps(column).name || column.prop]\r\n \"\r\n [nzAllowClear]=\"getFieldProps(column).allowClear\"\r\n [nzPlaceHolder]=\"getFieldProps(column).placeHolder\"\r\n [name]=\"getFieldProps(column).name || column.prop\"\r\n [nzOptions]=\"getFieldProps(column).options\"\r\n [nzDisabled]=\"getFieldProps(column).disabled\"\r\n >\r\n </nz-select>\r\n </nz-form-control>\r\n <nz-form-control *ngIf=\"column.valueType === 'selectMultiple'\">\r\n <nz-select\r\n [(ngModel)]=\"\r\n _searchParams[getFieldProps(column).name || column.prop]\r\n \"\r\n [nzAllowClear]=\"getFieldProps(column).allowClear\"\r\n [nzPlaceHolder]=\"getFieldProps(column).placeHolder\"\r\n [name]=\"getFieldProps(column).name || column.prop\"\r\n [nzOptions]=\"getFieldProps(column).options\"\r\n [nzDisabled]=\"getFieldProps(column).disabled\"\r\n nzMode=\"multiple\"\r\n >\r\n </nz-select>\r\n </nz-form-control>\r\n <nz-form-control *ngIf=\"column.valueType === 'date'\">\r\n <nz-date-picker\r\n [nzShowTime]=\"getFieldProps(column).showTime\"\r\n [nzFormat]=\"getFieldProps(column).format\"\r\n [nzPlaceHolder]=\"getFieldProps(column).placeHolder\"\r\n [nzAllowClear]=\"getFieldProps(column).allowClear\"\r\n [nzDisabled]=\"getFieldProps(column).disabled\"\r\n [(ngModel)]=\"\r\n _searchParams[getFieldProps(column).name || column.prop]\r\n \"\r\n [nzMode]=\"getFieldProps(column).mode\"\r\n ></nz-date-picker>\r\n </nz-form-control>\r\n <nz-form-control *ngIf=\"column.valueType === 'checkbox'\">\r\n <nz-checkbox-group\r\n [class]=\"\r\n getFieldProps(column).noStyle\r\n ? 'pro-table-checkboxgroup-nostyle'\r\n : ''\r\n \"\r\n [(ngModel)]=\"getFieldProps(column).options\"\r\n [nzDisabled]=\"getFieldProps(column).disabled\"\r\n (ngModelChange)=\"\r\n handleFieldCheckBoxChange(\r\n $event,\r\n getFieldProps(column).name || column.prop\r\n )\r\n \"\r\n ></nz-checkbox-group>\r\n </nz-form-control>\r\n <nz-form-control *ngIf=\"column.valueType === 'autoComplete'\">\r\n <input\r\n nz-input\r\n [(ngModel)]=\"\r\n _searchParams[getFieldProps(column)?.name || column.prop]\r\n \"\r\n (input)=\"handleAutoCompleteInput($event, column)\"\r\n [nzAutocomplete]=\"auto\"\r\n [disabled]=\"getFieldProps(column)?.disabled\"\r\n [placeholder]=\"getFieldProps(column)?.placeHolder\"\r\n />\r\n <nz-autocomplete\r\n [nzBackfill]=\"getFieldProps(column).backFill\"\r\n [nzDefaultActiveFirstOption]=\"\r\n getFieldProps(column).defaultActiveFirstOption\r\n \"\r\n [nzWidth]=\"getFieldProps(column).width\"\r\n #auto\r\n >\r\n <nz-auto-option\r\n *ngFor=\"let option of getAutoCompleteDataSource(column)\"\r\n [nzValue]=\"\r\n getFieldProps(column).returnFullData ? option : option.value\r\n \"\r\n [nzLabel]=\"option.label\"\r\n [nzDisabled]=\"option.disabled\"\r\n >\r\n {{ option.label }}\r\n </nz-auto-option>\r\n </nz-autocomplete>\r\n </nz-form-control>\r\n <nz-form-control *ngIf=\"column.valueType === 'custom'\">\r\n <app-dynamic-search-field\r\n [component]=\"getFieldProps(column).component\"\r\n [value]=\"_searchParams[getFieldProps(column).name || column.prop]\"\r\n [props]=\"getFieldProps(column)\"\r\n (valueChange)=\"\r\n setFieldValue(getFieldProps(column).name || column.prop, $event)\r\n \"\r\n ></app-dynamic-search-field>\r\n </nz-form-control>\r\n <nz-form-control *ngIf=\"column.valueType === 'inputNumber'\">\r\n <nz-input-number\r\n [style.width]=\"'100%'\"\r\n [(ngModel)]=\"\r\n _searchParams[getFieldProps(column).name || column.prop]\r\n \"\r\n [nzPlaceHolder]=\"getFieldProps(column).placeHolder\"\r\n [nzDisabled]=\"getFieldProps(column).disabled\"\r\n [nzFormatter]=\"getFieldProps(column).formatterPercent\"\r\n [nzParser]=\"getFieldProps(column).parserPercent\"\r\n ></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </ng-template>\r\n <ng-template #actionTextBtn>\r\n <nz-space [nzSize]=\"4\">\r\n <nz-space-item *ngIf=\"showSearchBtn\">\r\n <button nz-button nzType=\"primary\" (click)=\"handleSearch()\">\r\n {{ confirmBtnText }}\r\n </button>\r\n </nz-space-item>\r\n <nz-space-item *ngIf=\"showClearBtn\">\r\n <button nz-button (click)=\"handleResetForm()\">\r\n {{ clearBtnText }}\r\n </button>\r\n </nz-space-item>\r\n </nz-space>\r\n </ng-template>\r\n <ng-template #actionImgBtn>\r\n <nz-space>\r\n <ng-container *ngTemplateOutlet=\"imgActionBarTpl\"></ng-container>\r\n <nz-space-item class=\"setting-space-item\" *ngIf=\"showColumnSetting\">\r\n <app-colmuns-setting\r\n [columns]=\"columns\"\r\n [selectedColumns]=\"_serverColumns\"\r\n [tableName]=\"tableName\"\r\n (afterConfirm)=\"handleColumnsSettingConfirm()\"\r\n ></app-colmuns-setting>\r\n </nz-space-item>\r\n </nz-space>\r\n </ng-template>\r\n </app-table-search-bar>\r\n </ng-template>\r\n\r\n <ng-template #body>\r\n <div class=\"mb-12\">\r\n <ng-container *ngIf=\"showActionBar\">\r\n <ng-container *ngTemplateOutlet=\"actionBarTpl\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <ng-container *ngIf=\"customTableRender\">\r\n <ng-container *ngTemplateOutlet=\"customTableRender\"></ng-container>\r\n </ng-container>\r\n <nz-table\r\n *ngIf=\"!customTableRender\"\r\n #dynamicTable\r\n nzSize=\"small\"\r\n nzShowSizeChanger\r\n [nzBordered]=\"bordered\"\r\n [nzOuterBordered]=\"outerBordered\"\r\n [nzData]=\"dataSource\"\r\n [nzPageIndex]=\"_pageInfo.pageIndex\"\r\n [nzPageSize]=\"_pageInfo.pageSize\"\r\n [nzTotal]=\"_pageInfo.total\"\r\n [nzPageSizeOptions]=\"_pageInfo.pageSizeOptions\"\r\n [nzShowPagination]=\"showPagination\"\r\n [nzShowTotal]=\"totalTemplate\"\r\n [nzLoading]=\"_loading\"\r\n [nzFrontPagination]=\"frontPagination\"\r\n [nzScroll]=\"scroll\"\r\n (nzPageIndexChange)=\"handlePageIndexChange($event)\"\r\n (nzPageSizeChange)=\"handlePageSizeChange($event)\"\r\n >\r\n <thead>\r\n <tr>\r\n <!-- \u590D\u9009\u6846\u5217\uFF08\u5F53 showCheckbox=true \u65F6\u663E\u793A\uFF09 -->\r\n <th\r\n *ngIf=\"showCheckbox\"\r\n [nzWidth]=\"'50px'\"\r\n [nzAlign]=\"'center'\"\r\n style=\"text-align: center\"\r\n [(nzChecked)]=\"_checkedAll\"\r\n [nzIndeterminate]=\"_indeterminate\"\r\n (nzCheckedChange)=\"toggleCheckAll($event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n ></th>\r\n <th\r\n *ngFor=\"let column of _columns\"\r\n [nzWidth]=\"column.width\"\r\n [nzAlign]=\"column.align\"\r\n [nzLeft]=\"column.fixedLeft\"\r\n [nzRight]=\"column.fixedRight\"\r\n [nzShowSort]=\"!!column.sorter\"\r\n [nzSortOrder]=\"getSortOrder(column.prop)\"\r\n (nzSortOrderChange)=\"onSortChange(column.prop, $event)\"\r\n >\r\n {{ column.title }}\r\n </th>\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n <tr\r\n style=\"cursor: pointer\"\r\n *ngFor=\"let data; let i = index; of: dynamicTable.data\"\r\n [ngClass]=\"{\r\n 'ant-table-custom-row-selected': !!getTableRowChecked(data),\r\n 'ant-table-custom-row-even': i % 2 === 0,\r\n 'ant-table-custom-row-odd': i % 2 !== 0\r\n }\"\r\n (click)=\"handleTableRowClick(data)\"\r\n (dblclick)=\"handleTableRowDbClick(data)\"\r\n >\r\n <!-- \u590D\u9009\u6846\u5217\uFF08\u5F53 showCheckbox=true \u65F6\u663E\u793A\uFF09 -->\r\n <td\r\n *ngIf=\"showCheckbox\"\r\n [nzAlign]=\"'center'\"\r\n style=\"text-align: center; width: 50px\"\r\n [(nzChecked)]=\"data.checked\"\r\n [nzDisabled]=\"isRowDisabled(data)\"\r\n (nzCheckedChange)=\"handleRowCheckedChange(data, $event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n ></td>\r\n <td\r\n *ngFor=\"let column of _columns\"\r\n [nzLeft]=\"column.fixedLeft\"\r\n [nzRight]=\"column.fixedRight\"\r\n [nzAlign]=\"column.align\"\r\n [ngClass]=\"{\r\n 'pro-nowrap': true\r\n }\"\r\n >\r\n <!-- \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49\u6A21\u677F -->\r\n <ng-container\r\n *ngIf=\"\r\n column.customRender && getTemplate(column.customRender);\r\n let template\r\n \"\r\n >\r\n <ng-template\r\n [ngTemplateOutlet]=\"template\"\r\n [ngTemplateOutletContext]=\"{\r\n $implicit: data,\r\n data: data,\r\n column: column,\r\n index: i,\r\n pageInfo: _pageInfo\r\n }\"\r\n >\r\n </ng-template>\r\n </ng-container>\r\n\r\n <!-- \u9ED8\u8BA4\u6E32\u67D3\u903B\u8F91 -->\r\n <ng-container\r\n *ngIf=\"!column.customRender || !getTemplate(column.customRender)\"\r\n >\r\n <ng-container *ngIf=\"column.ellipsis\">\r\n <div\r\n class=\"pro-ellipsis\"\r\n [title]=\"data[column.prop]\"\r\n [ngStyle]=\"{\r\n width: 'calc(' + column.width + ' - 25px)'\r\n }\"\r\n >\r\n {{ data[column.prop] }}\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"!column.ellipsis\">\r\n {{ data[column.prop] }}\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n </tr>\r\n <tr *ngIf=\"summaryData && _pageInfo.total > 0\">\r\n <!-- \u6C47\u603B\u884C\u7684\u590D\u9009\u6846\u5217\uFF08\u5F53 showCheckbox=true \u65F6\u663E\u793A\uFF0C\u4F46\u4E3A\u7A7A\uFF09 -->\r\n <td\r\n *ngIf=\"showCheckbox\"\r\n style=\"font-weight: bold; border-right: 1px solid #e8e8e8\"\r\n ></td>\r\n <td\r\n *ngFor=\"let column; let i = index; of: _columns\"\r\n [nzLeft]=\"column.fixedLeft\"\r\n [nzRight]=\"column.fixedRight\"\r\n style=\"font-weight: bold; border-right: 1px solid #e8e8e8\"\r\n [nzAlign]=\"column.align\"\r\n >\r\n <span *ngIf=\"i === 0\">\u603B\u8BA1</span>\r\n <ng-container *ngIf=\"i !== 0 && column.summary\">\r\n {{\r\n column.summary?.format\r\n ? column.summary?.format(\r\n summaryData[column.summary?.name || column.prop]\r\n )\r\n : summaryData[column.summary?.name || column.prop]\r\n }}\r\n </ng-container>\r\n </td>\r\n </tr>\r\n </tbody>\r\n <ng-template #totalTemplate let-total\r\n >\u5171 {{ _pageInfo.total }} \u6761\u8BB0\u5F55</ng-template\r\n >\r\n </nz-table>\r\n </ng-template>\r\n</app-page-container>\r\n",
|
|
1790
|
+
template: "<app-page-container\r\n [title]=\"title\"\r\n [showHeader]=\"showSearchBar\"\r\n ngClass=\"pro-table-container\"\r\n>\r\n <ng-template #header>\r\n <app-table-search-bar\r\n *ngIf=\"showSearchBar\"\r\n [labelWidth]=\"labelWidth\"\r\n [labelAlign]=\"labelAlign\"\r\n [formItemWidth]=\"formItemWidth\"\r\n >\r\n <ng-template #leftContent>\r\n <nz-form-item\r\n *ngFor=\"let column of _searchFiledColumns\"\r\n [ngClass]=\"getFormItemClassName(column)\"\r\n >\r\n <nz-form-label *ngIf=\"!getFieldProps(column).hideLabel\" nzNoColon>\r\n <!-- \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49label\u6A21\u677F -->\r\n <ng-container\r\n *ngIf=\"\r\n column.customLabelRender &&\r\n getLabelTemplate(column.customLabelRender);\r\n else defaultLabel\r\n \"\r\n >\r\n <ng-container\r\n [ngTemplateOutlet]=\"getLabelTemplate(column.customLabelRender)\"\r\n [ngTemplateOutletContext]=\"{\r\n $implicit: column,\r\n column: column,\r\n fieldProps: getFieldProps(column)\r\n }\"\r\n >\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #defaultLabel>\r\n {{ getFieldProps(column).label || column.title }}\r\n </ng-template>\r\n </nz-form-label>\r\n <nz-form-control *ngIf=\"column.valueType === 'input'\">\r\n <input\r\n nz-input\r\n [name]=\"getFieldProps(column).name || column.prop\"\r\n [placeholder]=\"getFieldProps(column).placeHolder\"\r\n [disabled]=\"getFieldProps(column).disabled\"\r\n [(ngModel)]=\"\r\n _searchParams[getFieldProps(column).name || column.prop]\r\n \"\r\n />\r\n </nz-form-control>\r\n <nz-form-control *ngIf=\"column.valueType === 'inputPlate'\">\r\n <app-plate-input\r\n [name]=\"getFieldProps(column).name || column.prop\"\r\n [(ngModel)]=\"\r\n _searchParams[getFieldProps(column).name || column.prop]\r\n \"\r\n ></app-plate-input>\r\n </nz-form-control>\r\n <nz-form-control *ngIf=\"column.valueType === 'select'\">\r\n <nz-select\r\n [(ngModel)]=\"\r\n _searchParams[getFieldProps(column).name || column.prop]\r\n \"\r\n [nzAllowClear]=\"getFieldProps(column).allowClear\"\r\n [nzPlaceHolder]=\"getFieldProps(column).placeHolder\"\r\n [name]=\"getFieldProps(column).name || column.prop\"\r\n [nzOptions]=\"getFieldProps(column).options\"\r\n [nzDisabled]=\"getFieldProps(column).disabled\"\r\n >\r\n </nz-select>\r\n </nz-form-control>\r\n <nz-form-control *ngIf=\"column.valueType === 'selectMultiple'\">\r\n <nz-select\r\n [(ngModel)]=\"\r\n _searchParams[getFieldProps(column).name || column.prop]\r\n \"\r\n [nzAllowClear]=\"getFieldProps(column).allowClear\"\r\n [nzPlaceHolder]=\"getFieldProps(column).placeHolder\"\r\n [name]=\"getFieldProps(column).name || column.prop\"\r\n [nzOptions]=\"getFieldProps(column).options\"\r\n [nzDisabled]=\"getFieldProps(column).disabled\"\r\n nzMode=\"multiple\"\r\n >\r\n </nz-select>\r\n </nz-form-control>\r\n <nz-form-control *ngIf=\"column.valueType === 'date'\">\r\n <nz-date-picker\r\n [nzShowTime]=\"getFieldProps(column).showTime\"\r\n [nzFormat]=\"getFieldProps(column).format\"\r\n [nzPlaceHolder]=\"getFieldProps(column).placeHolder\"\r\n [nzAllowClear]=\"getFieldProps(column).allowClear\"\r\n [nzDisabled]=\"getFieldProps(column).disabled\"\r\n [(ngModel)]=\"\r\n _searchParams[getFieldProps(column).name || column.prop]\r\n \"\r\n [nzMode]=\"getFieldProps(column).mode\"\r\n ></nz-date-picker>\r\n </nz-form-control>\r\n <nz-form-control *ngIf=\"column.valueType === 'checkbox'\">\r\n <nz-checkbox-group\r\n [class]=\"\r\n getFieldProps(column).noStyle\r\n ? 'pro-table-checkboxgroup-nostyle'\r\n : ''\r\n \"\r\n [(ngModel)]=\"getFieldProps(column).options\"\r\n [nzDisabled]=\"getFieldProps(column).disabled\"\r\n (ngModelChange)=\"\r\n handleFieldCheckBoxChange(\r\n $event,\r\n getFieldProps(column).name || column.prop\r\n )\r\n \"\r\n ></nz-checkbox-group>\r\n </nz-form-control>\r\n <nz-form-control *ngIf=\"column.valueType === 'autoComplete'\">\r\n <input\r\n nz-input\r\n [(ngModel)]=\"\r\n _searchParams[getFieldProps(column)?.name || column.prop]\r\n \"\r\n (input)=\"handleAutoCompleteInput($event, column)\"\r\n [nzAutocomplete]=\"auto\"\r\n [disabled]=\"getFieldProps(column)?.disabled\"\r\n [placeholder]=\"getFieldProps(column)?.placeHolder\"\r\n />\r\n <nz-autocomplete\r\n [nzBackfill]=\"getFieldProps(column).backFill\"\r\n [nzDefaultActiveFirstOption]=\"\r\n getFieldProps(column).defaultActiveFirstOption\r\n \"\r\n [nzWidth]=\"getFieldProps(column).width\"\r\n #auto\r\n >\r\n <nz-auto-option\r\n *ngFor=\"let option of getAutoCompleteDataSource(column)\"\r\n [nzValue]=\"\r\n getFieldProps(column).returnFullData ? option : option.value\r\n \"\r\n [nzLabel]=\"option.label\"\r\n [nzDisabled]=\"option.disabled\"\r\n >\r\n {{ option.label }}\r\n </nz-auto-option>\r\n </nz-autocomplete>\r\n </nz-form-control>\r\n <nz-form-control *ngIf=\"column.valueType === 'custom'\">\r\n <app-dynamic-search-field\r\n [component]=\"getFieldProps(column).component\"\r\n [value]=\"_searchParams[getFieldProps(column).name || column.prop]\"\r\n [props]=\"getFieldProps(column)\"\r\n (valueChange)=\"\r\n setFieldValue(getFieldProps(column).name || column.prop, $event)\r\n \"\r\n ></app-dynamic-search-field>\r\n </nz-form-control>\r\n <nz-form-control *ngIf=\"column.valueType === 'inputNumber'\">\r\n <nz-input-number\r\n [style.width]=\"'100%'\"\r\n [(ngModel)]=\"\r\n _searchParams[getFieldProps(column).name || column.prop]\r\n \"\r\n [nzPlaceHolder]=\"getFieldProps(column).placeHolder\"\r\n [nzDisabled]=\"getFieldProps(column).disabled\"\r\n [nzFormatter]=\"getFieldProps(column).formatterPercent\"\r\n [nzParser]=\"getFieldProps(column).parserPercent\"\r\n ></nz-input-number>\r\n </nz-form-control>\r\n </nz-form-item>\r\n </ng-template>\r\n <ng-template #actionTextBtn>\r\n <nz-space [nzSize]=\"4\">\r\n <nz-space-item *ngIf=\"showSearchBtn\">\r\n <button nz-button nzType=\"primary\" (click)=\"handleSearch()\">\r\n {{ confirmBtnText }}\r\n </button>\r\n </nz-space-item>\r\n <nz-space-item *ngIf=\"showClearBtn\">\r\n <button nz-button (click)=\"handleResetForm()\">\r\n {{ clearBtnText }}\r\n </button>\r\n </nz-space-item>\r\n </nz-space>\r\n </ng-template>\r\n <ng-template #actionImgBtn>\r\n <nz-space>\r\n <ng-container *ngTemplateOutlet=\"imgActionBarTpl\"></ng-container>\r\n <nz-space-item class=\"setting-space-item\" *ngIf=\"showColumnSetting\">\r\n <app-colmuns-setting\r\n [columns]=\"columns\"\r\n [selectedColumns]=\"_serverColumns\"\r\n [tableName]=\"tableName\"\r\n (afterConfirm)=\"handleColumnsSettingConfirm()\"\r\n ></app-colmuns-setting>\r\n </nz-space-item>\r\n </nz-space>\r\n </ng-template>\r\n </app-table-search-bar>\r\n </ng-template>\r\n\r\n <ng-template #body>\r\n <div class=\"mb-12\">\r\n <ng-container *ngIf=\"showActionBar\">\r\n <ng-container *ngTemplateOutlet=\"actionBarTpl\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <ng-container *ngIf=\"customTableRender\">\r\n <ng-container *ngTemplateOutlet=\"customTableRender\"></ng-container>\r\n </ng-container>\r\n <nz-table\r\n *ngIf=\"!customTableRender\"\r\n #dynamicTable\r\n nzSize=\"small\"\r\n nzShowSizeChanger\r\n [nzBordered]=\"bordered\"\r\n [nzOuterBordered]=\"outerBordered\"\r\n [nzData]=\"dataSource\"\r\n [nzPageIndex]=\"_pageInfo.pageIndex\"\r\n [nzPageSize]=\"_pageInfo.pageSize\"\r\n [nzTotal]=\"_pageInfo.total\"\r\n [nzPageSizeOptions]=\"_pageInfo.pageSizeOptions\"\r\n [nzShowPagination]=\"showPagination\"\r\n [nzShowTotal]=\"totalTemplate\"\r\n [nzLoading]=\"_loading\"\r\n [nzFrontPagination]=\"frontPagination\"\r\n [nzScroll]=\"scroll\"\r\n (nzPageIndexChange)=\"handlePageIndexChange($event)\"\r\n (nzPageSizeChange)=\"handlePageSizeChange($event)\"\r\n >\r\n <thead>\r\n <tr>\r\n <!-- \u590D\u9009\u6846\u5217\uFF08\u5F53 showCheckbox=true \u65F6\u663E\u793A\uFF09 -->\r\n <th\r\n *ngIf=\"showCheckbox\"\r\n [nzWidth]=\"'50px'\"\r\n [nzAlign]=\"'center'\"\r\n style=\"text-align: center\"\r\n [(nzChecked)]=\"_checkedAll\"\r\n [nzIndeterminate]=\"_indeterminate\"\r\n (nzCheckedChange)=\"toggleCheckAll($event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n ></th>\r\n <th\r\n *ngFor=\"let column of _columns\"\r\n [nzWidth]=\"column.width\"\r\n [nzAlign]=\"column.align\"\r\n [nzLeft]=\"column.fixedLeft\"\r\n [nzRight]=\"column.fixedRight\"\r\n [nzShowSort]=\"!!column.sorter\"\r\n [nzSortOrder]=\"getSortOrder(column.prop)\"\r\n (nzSortOrderChange)=\"onSortChange(column.prop, $event)\"\r\n >\r\n {{ column.title }}\r\n </th>\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n <tr\r\n style=\"cursor: pointer\"\r\n *ngFor=\"let data; let i = index; of: dynamicTable.data\"\r\n [ngClass]=\"{\r\n 'ant-table-custom-row-selected': !!getTableRowChecked(data),\r\n 'ant-table-custom-row-even': i % 2 === 0,\r\n 'ant-table-custom-row-odd': i % 2 !== 0\r\n }\"\r\n (click)=\"handleTableRowClick(data)\"\r\n (dblclick)=\"handleTableRowDbClick(data)\"\r\n >\r\n <!-- \u590D\u9009\u6846\u5217\uFF08\u5F53 showCheckbox=true \u65F6\u663E\u793A\uFF09 -->\r\n <td\r\n *ngIf=\"showCheckbox\"\r\n [nzAlign]=\"'center'\"\r\n style=\"text-align: center; width: 50px\"\r\n [(nzChecked)]=\"data.checked\"\r\n [nzDisabled]=\"isRowDisabled(data)\"\r\n (nzCheckedChange)=\"handleRowCheckedChange(data, $event)\"\r\n (click)=\"$event.stopPropagation()\"\r\n ></td>\r\n <td\r\n *ngFor=\"let column of _columns\"\r\n [nzLeft]=\"column.fixedLeft\"\r\n [nzRight]=\"column.fixedRight\"\r\n [nzAlign]=\"column.align\"\r\n [ngClass]=\"{\r\n 'pro-nowrap': true\r\n }\"\r\n >\r\n <!-- \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49\u6A21\u677F -->\r\n <ng-container\r\n *ngIf=\"\r\n column.customRender && getTemplate(column.customRender);\r\n let template\r\n \"\r\n >\r\n <ng-template\r\n [ngTemplateOutlet]=\"template\"\r\n [ngTemplateOutletContext]=\"{\r\n $implicit: data,\r\n data: data,\r\n column: column,\r\n index: i,\r\n pageInfo: _pageInfo\r\n }\"\r\n >\r\n </ng-template>\r\n </ng-container>\r\n\r\n <!-- \u9ED8\u8BA4\u6E32\u67D3\u903B\u8F91 -->\r\n <ng-container\r\n *ngIf=\"!column.customRender || !getTemplate(column.customRender)\"\r\n >\r\n <ng-container *ngIf=\"column.ellipsis\">\r\n <div\r\n class=\"pro-ellipsis\"\r\n [title]=\"data[column.prop]\"\r\n [ngStyle]=\"{\r\n width: 'calc(' + column.width + ' - 25px)'\r\n }\"\r\n >\r\n {{ data[column.prop] }}\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"!column.ellipsis\">\r\n {{ data[column.prop] }}\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n </tr>\r\n <tr *ngIf=\"summaryData && _pageInfo.total > 0\">\r\n <!-- \u6C47\u603B\u884C\u7684\u590D\u9009\u6846\u5217\uFF08\u5F53 showCheckbox=true \u65F6\u663E\u793A\uFF0C\u4F46\u4E3A\u7A7A\uFF09 -->\r\n <td\r\n *ngIf=\"showCheckbox\"\r\n style=\"font-weight: bold; border-right: 1px solid #e8e8e8\"\r\n ></td>\r\n <td\r\n *ngFor=\"let column; let i = index; of: _columns\"\r\n [nzLeft]=\"column.fixedLeft\"\r\n [nzRight]=\"column.fixedRight\"\r\n style=\"font-weight: bold; border-right: 1px solid #e8e8e8\"\r\n [nzAlign]=\"column.align\"\r\n >\r\n <span *ngIf=\"i === 0\">\u603B\u8BA1</span>\r\n <ng-container *ngIf=\"i !== 0 && column.summary\">\r\n {{\r\n column.summary?.format\r\n ? column.summary?.format(\r\n summaryData[column.summary?.name || column.prop]\r\n )\r\n : summaryData[column.summary?.name || column.prop]\r\n }}\r\n </ng-container>\r\n </td>\r\n </tr>\r\n </tbody>\r\n <ng-template #totalTemplate let-total\r\n >\u5171 {{ _pageInfo.total }} \u6761\u8BB0\u5F55</ng-template\r\n >\r\n </nz-table>\r\n </ng-template>\r\n</app-page-container>\r\n",
|
|
1790
1791
|
styles: [".pro-ellipsis{overflow:hidden;text-overflow:ellipsis}.pro-nowrap{white-space:nowrap}::ng-deep .setting-space-item{margin-right:0!important}::ng-deep .pro-table-checkboxgroup-nostyle{white-space:nowrap}::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-body table{border-collapse:separate;border-spacing:0}::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-body .ant-table-tbody>tr>td{border-right:1px solid #e8e8e8!important}::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-body .ant-table-thead>tr>th{border-bottom:1px solid #e8e8e8!important;border-right:1px solid #e8e8e8!important;white-space:nowrap}::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-body .ant-table-tbody>tr>td:first-child,::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-body .ant-table-thead>tr>th:first-child{border-left:none!important}::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-body .ant-table-cell-fix-left,::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-body .ant-table-cell-fix-right,::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-header .ant-table-thead>tr>th.ant-table-cell-fix-left,::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-header .ant-table-thead>tr>th.ant-table-cell-fix-right{border-bottom:1px solid #e8e8e8!important;border-right:1px solid #e8e8e8!important}::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-header .ant-table-thead>tr>th{border-top:1px solid #e8e8e8!important}::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-body .ant-table-tbody>tr>td:last-child,::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-body .ant-table-thead>tr>th:last-child{border-right:1px solid #e8e8e8!important}::ng-deep .ant-table-bordered .ant-table-container .ant-table-content .ant-table-body .ant-table-tbody>tr:last-child>td{border-bottom:1px solid #e8e8e8!important}::ng-deep .table-search-bar-left .ant-form-item{margin-bottom:8px}"]
|
|
1791
1792
|
},] }
|
|
1792
1793
|
];
|
|
@@ -1806,6 +1807,7 @@
|
|
|
1806
1807
|
clearBtnText: [{ type: i0.Input }],
|
|
1807
1808
|
labelWidth: [{ type: i0.Input }],
|
|
1808
1809
|
labelAlign: [{ type: i0.Input }],
|
|
1810
|
+
formItemWidth: [{ type: i0.Input }],
|
|
1809
1811
|
dataSource: [{ type: i0.Input }],
|
|
1810
1812
|
bordered: [{ type: i0.Input }],
|
|
1811
1813
|
outerBordered: [{ type: i0.Input }],
|
|
@@ -2057,38 +2059,17 @@
|
|
|
2057
2059
|
this.rightColSpan = 3;
|
|
2058
2060
|
this.labelWidth = "90px";
|
|
2059
2061
|
this.labelAlign = "right";
|
|
2062
|
+
this.formItemWidth = "270px";
|
|
2060
2063
|
}
|
|
2061
|
-
TableSearchBarComponent.prototype.ngOnInit = function () {
|
|
2062
|
-
|
|
2063
|
-
};
|
|
2064
|
-
TableSearchBarComponent.prototype.ngAfterViewInit = function () {
|
|
2065
|
-
this.setCSSVariablesToTarget();
|
|
2066
|
-
};
|
|
2067
|
-
TableSearchBarComponent.prototype.setCSSVariablesToTarget = function () {
|
|
2068
|
-
// setTimeout(() => {
|
|
2069
|
-
// const leftElement = document.querySelectorAll(".table-search-bar-left");
|
|
2070
|
-
// console.log('leftElement',leftElement);
|
|
2071
|
-
// if (leftElement.length > 0) {
|
|
2072
|
-
// leftElement.forEach((element) => {
|
|
2073
|
-
// (element as HTMLElement).style.setProperty(
|
|
2074
|
-
// "--label-width",
|
|
2075
|
-
// this.labelWidth
|
|
2076
|
-
// );
|
|
2077
|
-
// (element as HTMLElement).style.setProperty(
|
|
2078
|
-
// "--label-align",
|
|
2079
|
-
// this.labelAlign
|
|
2080
|
-
// );
|
|
2081
|
-
// });
|
|
2082
|
-
// }
|
|
2083
|
-
// });
|
|
2084
|
-
};
|
|
2064
|
+
TableSearchBarComponent.prototype.ngOnInit = function () { };
|
|
2065
|
+
TableSearchBarComponent.prototype.ngAfterViewInit = function () { };
|
|
2085
2066
|
return TableSearchBarComponent;
|
|
2086
2067
|
}());
|
|
2087
2068
|
TableSearchBarComponent.decorators = [
|
|
2088
2069
|
{ type: i0.Component, args: [{
|
|
2089
2070
|
selector: "app-table-search-bar",
|
|
2090
|
-
template: "<div class=\"table-search-bar\">\r\n <div
|
|
2091
|
-
styles: ["::ng-deep .table-search-bar{align-items:flex-start;display:flex;flex-wrap:wrap;gap:16px;width:100%}::ng-deep .table-search-bar-left{display:flex;flex:1;flex-wrap:wrap;gap:0 normal;min-width:0}::ng-deep .table-search-bar-left ::ng-deep .ant-form-item{flex-shrink:0;flex-wrap:nowrap;width:
|
|
2071
|
+
template: "<div class=\"table-search-bar\">\r\n <div\r\n class=\"table-search-bar-left\"\r\n style=\"--label-width: {{ labelWidth }}; --label-align: {{ labelAlign }}; --form-item-width: {{ formItemWidth }};\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"leftContentTpl\"></ng-container>\r\n </div>\r\n <div class=\"table-search-bar-right\">\r\n <nz-space nzDirection=\"vertical\" nzAlign=\"end\">\r\n <nz-space-item>\r\n <ng-container *ngTemplateOutlet=\"actionTextBtnTpl\"></ng-container>\r\n </nz-space-item>\r\n <nz-space-item>\r\n <ng-container *ngTemplateOutlet=\"actionImgBtnTpl\"></ng-container>\r\n </nz-space-item>\r\n </nz-space>\r\n <!-- <ng-container *ngTemplateOutlet=\"rightContentTpl\"></ng-container> -->\r\n </div>\r\n</div>\r\n",
|
|
2072
|
+
styles: ["::ng-deep .table-search-bar{align-items:flex-start;display:flex;flex-wrap:wrap;gap:16px;width:100%}::ng-deep .table-search-bar-left{display:flex;flex:1;flex-wrap:wrap;gap:0 normal;min-width:0}::ng-deep .table-search-bar-left ::ng-deep .ant-form-item{flex-shrink:0;flex-wrap:nowrap;width:var(--form-item-width)}::ng-deep .table-search-bar-left ::ng-deep .ant-form-item .ant-form-item-label{flex-shrink:0;text-align:var(--label-align);width:var(--label-width)}::ng-deep .table-search-bar-left ::ng-deep .ant-form-item .ant-form-item-label label:after{content:\"\"}::ng-deep .table-search-bar-left ::ng-deep .ant-form-item .ant-picker{width:100%}::ng-deep .table-search-bar-right{align-items:flex-start;display:flex;flex-shrink:0}"]
|
|
2092
2073
|
},] }
|
|
2093
2074
|
];
|
|
2094
2075
|
TableSearchBarComponent.ctorParameters = function () { return []; };
|
|
@@ -2097,6 +2078,7 @@
|
|
|
2097
2078
|
rightColSpan: [{ type: i0.Input }],
|
|
2098
2079
|
labelWidth: [{ type: i0.Input }],
|
|
2099
2080
|
labelAlign: [{ type: i0.Input }],
|
|
2081
|
+
formItemWidth: [{ type: i0.Input }],
|
|
2100
2082
|
leftContentTpl: [{ type: i0.ContentChild, args: ["leftContent",] }],
|
|
2101
2083
|
actionTextBtnTpl: [{ type: i0.ContentChild, args: ["actionTextBtn",] }],
|
|
2102
2084
|
actionImgBtnTpl: [{ type: i0.ContentChild, args: ["actionImgBtn",] }]
|
|
@@ -2946,56 +2928,34 @@
|
|
|
2946
2928
|
// ==================== 工具方法 ====================
|
|
2947
2929
|
// 获取表单类名
|
|
2948
2930
|
AntdFormService.prototype.getFormClassName = function (name) {
|
|
2949
|
-
return "" +
|
|
2931
|
+
return this.classPrefix + "custom-" + name + " ";
|
|
2950
2932
|
};
|
|
2951
2933
|
// 设置 CSS 变量到目标元素（支持持久化监听动态添加的元素）
|
|
2952
2934
|
AntdFormService.prototype.setCSSVariablesToTarget = function (name) {
|
|
2953
2935
|
var _this = this;
|
|
2954
|
-
var selector = "." + this.getFormClassName(name) + " .ant-form-item-label";
|
|
2955
2936
|
var formContainerSelector = "." + this.getFormClassName(name);
|
|
2956
|
-
var
|
|
2957
|
-
|
|
2958
|
-
|
|
2959
|
-
|
|
2960
|
-
|
|
2961
|
-
|
|
2962
|
-
|
|
2963
|
-
|
|
2964
|
-
|
|
2965
|
-
return;
|
|
2966
|
-
}
|
|
2967
|
-
var customWidth = target.getAttribute("custom-width");
|
|
2968
|
-
var customAlign = target.getAttribute("custom-align");
|
|
2969
|
-
var finalWidth = customWidth || _this.labelWidth;
|
|
2970
|
-
var finalTextAlign = customAlign || _this.labelAlign;
|
|
2971
|
-
if (target.style.width !== finalWidth ||
|
|
2972
|
-
target.style.textAlign !== finalTextAlign) {
|
|
2973
|
-
target.style.width = finalWidth;
|
|
2974
|
-
target.style.textAlign = finalTextAlign;
|
|
2975
|
-
appliedCount++;
|
|
2937
|
+
var formContainer = document.querySelector(formContainerSelector);
|
|
2938
|
+
// 如果容器还不存在，可以用 MutationObserver 等待它出现
|
|
2939
|
+
if (!formContainer) {
|
|
2940
|
+
var observer_1 = new MutationObserver(function () {
|
|
2941
|
+
var container = document.querySelector(formContainerSelector);
|
|
2942
|
+
if (container) {
|
|
2943
|
+
container.style.setProperty("--label-width", _this.labelWidth);
|
|
2944
|
+
container.style.setProperty("--label-align", _this.labelAlign);
|
|
2945
|
+
observer_1.disconnect();
|
|
2976
2946
|
}
|
|
2977
2947
|
});
|
|
2978
|
-
|
|
2979
|
-
|
|
2980
|
-
|
|
2948
|
+
observer_1.observe(document.body, {
|
|
2949
|
+
childList: true,
|
|
2950
|
+
subtree: true,
|
|
2951
|
+
});
|
|
2952
|
+
// 10秒后自动断开，避免内存泄漏
|
|
2953
|
+
setTimeout(function () { return observer_1.disconnect(); }, 10000);
|
|
2981
2954
|
return;
|
|
2982
2955
|
}
|
|
2983
|
-
|
|
2984
|
-
|
|
2985
|
-
|
|
2986
|
-
timeout = requestAnimationFrame(function () {
|
|
2987
|
-
setTimeout(function () {
|
|
2988
|
-
applyStyles();
|
|
2989
|
-
}, 0);
|
|
2990
|
-
});
|
|
2991
|
-
});
|
|
2992
|
-
var formContainer = document.querySelector(formContainerSelector);
|
|
2993
|
-
observer.observe(formContainer || document.body, {
|
|
2994
|
-
childList: true,
|
|
2995
|
-
subtree: true,
|
|
2996
|
-
attributes: true,
|
|
2997
|
-
});
|
|
2998
|
-
this.labelObservers[name] = observer;
|
|
2956
|
+
// 在容器上设置 CSS 变量
|
|
2957
|
+
formContainer.style.setProperty("--label-width", this.labelWidth);
|
|
2958
|
+
formContainer.style.setProperty("--label-align", this.labelAlign);
|
|
2999
2959
|
};
|
|
3000
2960
|
// ==================== 私有方法 ====================
|
|
3001
2961
|
// 过滤内部字段（递归处理对象和数组）
|