+}
+
+interface PageLayoutType {
+ /* columns: string[]
+ rows: string[] */
+ dataListHeight: string
+}
+
+export interface ATablePageType {
+ pageLayout: PageLayoutType
+ searchForm: FormPropsType
+ toolBar: ToolBarType
+ table: TablePropsType
+}
+
+function buildSearchForm(searchForm: Partial> = {}) {
+ if (searchForm.defaultData == null) {
+ searchForm.defaultData = {} as P
+ }
+ return searchForm
+}
+
+
+function buildPageLayout(pageLayout: Partial = {}) {
+ /* if (pageLayout.columns == null) {
+ pageLayout.columns = [ '1fr' ]
+ }
+
+ if (pageLayout.rows == null) {
+ pageLayout.rows = [ '1fr', '9fr' ]
+ } */
+ if (pageLayout.dataListHeight == null) {
+ pageLayout.dataListHeight = '9fr'
+ }
+
+ return pageLayout
+}
+
+function buildTable(table: Partial> = {}) {
+ if (table.actionColumn == null) {
+ table.actionColumn = {
+ tableActions: [],
+ }
+ }
+ if (table.actionColumn.tableActions == null) {
+ table.actionColumn.tableActions = []
+ }
+
+ return table
+}
+
+function buildToolBar(toolBar: Partial = {}) {
+ if (toolBar.leftTools == null) toolBar.leftTools = []
+ if (toolBar.rightTools == null) toolBar.rightTools = []
+
+ return toolBar
+}
+
+export interface PropsTplType {
+ pageLayout?: Partial
+ searchForm?: Partial>
+ toolBar?: Partial
+ table?: Partial>
+}
+
+export function buildProps({pageLayout, searchForm, toolBar, table}: PropsTplType) {
+ return reactive({
+ pageLayout: buildPageLayout(pageLayout),
+ searchForm: buildSearchForm(searchForm),
+ toolBar: buildToolBar(toolBar),
+ table: buildTable(table),
+ })
+}
+
+interface Exposed extends Record {
+ doSearch: () => void
+}
+
+const component = defineComponent(
+ (props: ATablePageType, {slots, expose}: SetupContext) => {
+ const formData = Utils.resetAble(reactive({
+ ...(props.searchForm.defaultData),
+ current: 1,
+ size: 20,
+ })) as ResetAble
+ const tableData = Utils.resetAble(reactive([])) as ResetAble
+
+ const totalCount = ref(0)
+ const loading = ref(false)
+ const showHighForm = ref(true)
+
+ const doSearch = () => {
+ loading.value = true
+ if (props.searchForm.paging != null) {
+ props.searchForm.paging(formData.$clone() as P)
+ .then(res => {
+ totalCount.value = res.data?.total ?? 0
+ const records = res.data?.records ?? ([] as T[])
+ tableData.$reset(records)
+ })
+ .finally(() => {
+ loading.value = false
+ })
+ return
+ }
+ }
+ expose({doSearch})
+ const showHighFormHandle = () => {
+ showHighForm.value = !showHighForm.value
+ formData.$reset()
+ }
+ const doExport = () => {
+ if (props?.searchForm?.export == null) {
+ return
+ }
+ loading.value = true
+ saveFile(props?.searchForm?.export(formData.$clone() as P))
+ .finally(() => {
+ loading.value = false
+ })
+ }
+ const rowAction = (data: ColumnScopeType, action: TableActionType) => {
+ if (action.loading != null) {
+ action.loading = true
+ }
+ const result = action.action(data)
+ if (result instanceof Promise) {
+ result
+ .then(reload => {
+ if (reload) {
+ doSearch()
+ }
+ })
+ .finally(() => {
+ if (action.loading != null) {
+ action.loading = false
+ }
+ })
+ }
+ }
+
+ function doReset() {
+ formData.$reset()
+ doSearch()
+ }
+
+ const highFormCssParam = computed(() => {
+ return {
+ '--col-count': props.searchForm.highForm?.colCount ?? 3,
+ '--vgap': props.searchForm.highForm?.vgap ?? '0',
+ '--hgap': props.searchForm.highForm?.hgap ?? '0',
+ }
+ })
+
+ const pageCssParam = computed(() => {
+ return {
+ '--data-list-height': props.pageLayout.dataListHeight,
+ }
+ })
+ const actionColumnBtnRender = (scope: ColumnScopeType, tableAction: TableActionType) => {
+ const Btn =
+ {tableAction.label}
+
+ const tooltipTxt = tableAction.tooltip == null ? '' : (typeof tableAction.tooltip === 'function' ? tableAction.tooltip(scope) : tableAction.tooltip)
+ if (Strings.isBlank(tooltipTxt)) {
+ return (
+ {{
+ default: () => Btn,
+ }}
+ )
+ }
+ return Btn
+ }
+ const actionColumnRender = () => {
+ const actionColumn = props.table?.actionColumn
+ return Colls.isEmpty(actionColumn?.tableActions) ? <>
+ : (
+
+ {{
+ default: (scope: ColumnScopeType) => (actionColumn?.tableActions!
+ .filter(it => (it.show == null ? true : it.show(scope)))
+ .map((tableAction, i) => (tableAction.confirm != null ?
+ ( rowAction(scope, tableAction)}>
+ {{
+ reference: () => (actionColumnBtnRender(scope, tableAction)),
+ }}
+ ) : actionColumnBtnRender(scope, tableAction)))
+ ),
+ }}
+
+ )
+ }
+ onMounted(doSearch)
+ return () => (
+ {/*@ts-ignore*/}
+
+
+ {/*@ts-ignore*/}
+
+ {
+ slots.highFormItem?.(formData)
+ }
+
+
+
+
+
+
+ {
+ withDirectives(
props.table?.treeLoad!(formData as P, row, expanded, resolve)) : undefined}
+ onExpand-change={props.table?.treeLoad ? ((row: any, expandedRows: any) => props.table?.treeLoad!(formData as P, row, expandedRows, undefined)) : undefined}
+ cell-class-name="table-cell"
+ header-row-class-name="table-header"
+ >
+ {
+ slots.columns?.()
+ }
+ {
+ actionColumnRender()
+ }
+ , [ [ ElLoading.directive, loading.value ] ])
+ }
+
(formData as G.PageParam).current = val}
+ onUpdate:page-size={(val) => (formData as G.PageParam).size = val}
+ hide-on-single-page={false}
+ page-sizes={[ 10, 20, 50, 100, 500 ]}
+ teleported={false}
+ total={totalCount.value}
+ background={true}
+ layout="total, prev, pager, next, sizes, jumper"
+ onChange={doSearch}/>
+ {
+ slots?.default?.()
+ }
+
@@ -334,7 +334,7 @@ onMounted(doSearch)
@change="doSearch"/>
-
+