@jiangood/admin-spring-boot-starter 0.2.0

package/src/framework/components/ProTable/components/ToolBar/index.jsx

@@ -0,0 +1,123 @@
+/**
+ * 工具栏
+ */
+import {HistoryOutlined, ReloadOutlined} from '@ant-design/icons';
+import {Button, Input, message, Modal, Table} from 'antd';
+import React from 'react';
+import './index.less';
+import {DateUtils, PageUtils, StorageUtils} from "../../../../utils";
+
+export default class Toolbar extends React.Component {
+
+    state = {
+        // 查询历史的模态框
+        historyOpen: false
+    }
+
+    render = () => {
+        const {
+            onRefresh,
+            toolBarRender,
+            loading,
+            showSearch
+        } = this.props;
+
+        return <div className='pro-table-toolbar'>
+
+            <div className='pro-table-toolbar-left'>
+                {showSearch && <Input.Search placeholder='搜索...'
+                                             allowClear
+                                             onChange={(e) => {
+                                                 this.props.onSearch({searchText: e.target.value})
+                                             }}
+                />}
+            </div>
+
+            <div className='pro-table-toolbar-option'>
+                {toolBarRender}
+                <Button title='刷新' size='small' icon={<ReloadOutlined/>} onClick={onRefresh} loading={loading}/>
+                <Button title='查询历史' size='small' icon={<HistoryOutlined/>} onClick={this.onClickHistory}/>
+            </div>
+
+            {this.renderHistory()}
+        </div>
+    };
+
+
+    renderHistory() {
+        const {params} = this.props
+        const list = StorageUtils.get(this.getParamKey()) || []
+
+        const dataSource = [{params, time: '当前'}, ...list]
+
+        return <Modal title='查询方案'
+                      width={800}
+                      open={this.state.historyOpen}
+                      onCancel={() => this.setState({historyOpen: false})}
+                      footer={null}
+                      destroyOnHidden
+        >
+
+            <Table
+                dataSource={dataSource}
+                pagination={false}
+                rowKey='time'
+                columns={[
+                    {
+                        dataIndex: 'time', title: '时间'
+                    },
+                    {
+                        dataIndex: 'params', title: '参数',
+                        render(v) {
+                            return JSON.stringify(v)
+                        }
+                    }, {
+                        dataIndex: 'option', title: '-',
+                        render: (v, record) => {
+                            if (record.time === '当前') {
+                                return <Button onClick={this.onSaveHistory}>保存</Button>
+                            } else {
+                                return <Button type='primary' onClick={() => this.onApply(record.params)}>使用</Button>
+                            }
+                        }
+                    }
+                ]}></Table>
+
+
+        </Modal>;
+    }
+
+    onClickHistory = () => {
+
+        this.setState({historyOpen: true})
+    }
+
+    getParamKey() {
+        return 'query-params-' + PageUtils.currentPathname();
+    }
+
+    onSaveHistory = () => {
+        const {params} = this.props
+        const keys = Object.keys(params)
+        if (keys.length === 0) {
+            message.error('查询参数为空，无法保存')
+            return
+        }
+        const list = StorageUtils.get(this.getParamKey()) || []
+        let data = {time: DateUtils.now(), params};
+        list.unshift(data)
+        if (list.length > 5) {
+            list.pop()
+        }
+        StorageUtils.set(this.getParamKey(), list)
+        message.success('保存成功')
+        this.setState({historyOpen: false})
+    }
+
+    onApply = (params) => {
+        this.props.changeFormValues(params)
+        this.setState({historyOpen: false})
+    }
+}
+
+

package/src/framework/components/ProTable/components/ToolBar/index.less

@@ -0,0 +1,53 @@
+.pro-table-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  /*
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  background: #F8F9FA;
+  padding: 8px;
+  */
+
+  &-option {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 12px;
+  }
+
+  .btn {
+    padding: 0;
+    background: #f8f8f8;
+    border:none;
+    font-size: 14px;
+    font-weight: 400;
+    cursor: pointer;
+    user-select: none;
+    img {
+      width: 20px;
+      height: 20px;
+    }
+  }
+}
+
+@media (max-width: 575px) {
+  .pro-table-toolbar {
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    height: auto;
+    margin-bottom: 16px;
+    margin-left: 16px;
+    padding: 16px 8px 8px;
+    line-height: normal;
+
+    &-option {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+    }
+
+  }
+}

package/src/framework/components/ProTable/index.d.ts

@@ -0,0 +1,42 @@
+// @ts-ignore
+import React from "react";
+import {ColumnsType} from "antd/es/table";
+
+declare type ProTableProps = {
+    columns:  ColumnsType,
+    /**
+     * 请求函数
+      */
+    request: (params:any)=>{};
+
+    rowKey?: string,
+
+    // 选择行，通ant table
+    rowSelection?: any,
+
+    toolBarRender?: (params:any, {selectedRows:[],selectedRowKeys:[]})=>{},
+    bordered?:boolean,
+
+    /**
+     * 默认每页数量
+     */
+    defaultPageSize?:number,
+
+    /**
+     * 查询表单的引用
+     */
+    formRef?: React.Ref<any>,
+
+
+
+    showToolbarSearch?:boolean
+
+
+    /**
+     *  垂直滚动条， true自动计算， 也可指定高度
+     */
+    scrollY?: boolean | number
+};
+
+export class ProTable extends React.Component<ProTableProps, any> {
+}

package/src/framework/components/ProTable/index.jsx

@@ -0,0 +1,260 @@
+import {Button, Form, Table} from 'antd';
+import Toolbar from './components/ToolBar';
+import React from "react";
+import './index.less'
+import {SearchOutlined} from "@ant-design/icons";
+import {StringUtils} from "../../utils";
+
+
+export class ProTable extends React.Component {
+
+
+    state = {
+        selectedRowKeys: [],
+        selectedRows: [],
+
+        tableSize: 'small',
+
+        loading: true,
+        params: {},
+        dataSource: [],
+
+
+        total: 0,
+        current: 1, // 当前页
+        pageSize: 10,
+
+        sorter: {
+            field: undefined, // 字段
+            order: undefined, // 排序 ascend, descend
+        },
+
+        // 服务端返回的一些额外数据
+        extData: {
+            // 总结栏
+            summary: null,
+        },
+
+        scrollY: null
+    }
+
+
+    constructor(props) {
+        super(props);
+        if (props.defaultPageSize) {
+            this.state.pageSize = props.defaultPageSize
+        }
+        this.id = StringUtils.random(32)
+        this.showToolbarSearch = this.props.showToolbarSearch
+    }
+
+    formRef = React.createRef()
+
+    componentDidMount() {
+        this.loadData()
+        if (this.props.actionRef) {
+            this.props.actionRef.current = {
+                reload: () => this.loadData()
+            }
+        }
+
+        let scrollY = this.props.scrollY;
+        if (scrollY) {
+            this.setState({scrollY: scrollY})
+        }
+    }
+
+    loadData = () => {
+        const {request} = this.props
+        const params = {...this.state.params}
+        params.size = this.state.pageSize
+        params.page = this.state.current
+
+        const {sorter} = this.state
+
+        const {field, order} = sorter
+        if (field) {
+            params.sort = field + "," + (order === 'ascend' ? 'asc' : 'desc')
+        }
+
+
+        this.setState({loading: true})
+        request(params).then(rs => {
+            const {content, totalElements, extData} = rs;
+
+            this.setState({dataSource: content, total: parseInt(totalElements)})
+            if (extData) {
+                this.setState({extData})
+            }
+            this.updateSelectedRows(content)
+
+        }).finally(() => {
+            this.setState({loading: false})
+        })
+    }
+
+
+    // 数据重新加载后，更新toolbar需要的已选择数据行
+    updateSelectedRows = list => {
+        const {rowKey = "id"} = this.props
+        const {selectedRows} = this.state
+        for (let i = 0; i < selectedRows.length; i++) {
+            for (let newItem of list) {
+                let oldItem = selectedRows[i];
+                if (oldItem[rowKey] === newItem[rowKey]) {
+                    selectedRows[i] = newItem;
+                    break
+                }
+            }
+        }
+
+        this.setState({selectedRows: [...selectedRows]})
+    };
+
+
+    render() {
+        const {
+            actionRef,
+            toolBarRender,
+            columns,
+            rowSelection,
+            rowKey = "id",
+            toolbarOptions,
+        } = this.props
+
+
+        return <div className={'tmgg-pro-table '} id={this.id}>
+            {this.renderForm()}
+                {toolbarOptions !== false && <Toolbar
+                    actionRef={actionRef}
+                    toolBarRender={this.getToolBarRenderNode(toolBarRender)}
+
+                    onRefresh={() => this.loadData()}
+                    onSearch={this.onSearch}
+                    loading={this.state.loading}
+                    params={this.state.params}
+                    showSearch={this.showToolbarSearch}
+                    changeFormValues={this.changeFormValues}
+                />}
+
+
+                <Table
+                    loading={this.state.loading}
+                    columns={columns}
+                    dataSource={this.state.dataSource}
+                    rowKey={rowKey}
+                    size={this.state.tableSize}
+                    rowSelection={this.getRowSelectionProps(rowSelection)}
+                    scroll={{x: 'max-content', y: this.state.scrollY}}
+                    pagination={{
+                        showSizeChanger: true,
+                        total: this.state.total,
+                        pageSize: this.state.pageSize,
+                        current: this.state.current,
+                        pageSizeOptions: [10, 20, 50, 100, 500, 1000, 5000],
+                        showTotal: (total) => `共 ${total} 条`
+                    }}
+
+                    onChange={(pagination, filters, sorter, extra) => {
+                        this.setState({
+                            current: pagination.current,
+                            pageSize: pagination.pageSize,
+                            sorter
+                        }, this.loadData)
+                    }}
+
+                    footer={this.state.extData.summary ? () => this.state.extData.summary : null}
+                    bordered={this.props.bordered}
+                />
+        </div>
+
+    }
+
+
+    renderForm = () => {
+        if (!this.props.children) {
+            return
+        }
+        if (this.props["searchFormItemsRender"]) {
+            throw new Error('不再支持 searchFormItemsRender，请直接放到ProTable的子节点')
+        }
+
+        return <div style={{marginBottom: '16px'}}>
+                <Form
+                    layout="inline"
+                    onFinish={(values) => this.onSearch(values)}
+                    ref={(instance) => {
+                        this.formRef.current = instance;
+                        if (this.props.formRef != null) {
+                            this.props.formRef.current = instance;
+                        }
+                    }}
+                    style={{gap: '8px 0px'}}
+                    labelCol={{flex: '80px'}}
+                    wrapperCol={{flex: '200px'}}
+                    className='search-form'
+                >
+
+                    {this.props.children}
+                    <div style={{marginLeft: '16px'}}>
+                        <Button type='primary' htmlType="submit" icon={<SearchOutlined/>}> 查询
+                        </Button>
+                    </div>
+
+                </Form>
+        </div>;
+    };
+
+    getToolBarRenderNode(toolBarRender) {
+        if (!toolBarRender) {
+            return
+        }
+        let {selectedRows, selectedRowKeys, params} = this.state;
+        return toolBarRender(params, {
+            selectedRows: selectedRows,
+            selectedRowKeys: selectedRowKeys,
+        });
+    }
+
+    getRowSelectionProps = rowSelection => {
+        if (rowSelection == null || rowSelection === false) {
+            return null
+        }
+        if (rowSelection === true) {
+            rowSelection = {}
+        }
+        let {type, onChange: inputOnChange} = rowSelection
+
+
+        return {
+            type,
+            onChange: (selectedRowKeys, selectedRows) => {
+                this.setState({selectedRowKeys, selectedRows})
+                if (inputOnChange) {
+                    inputOnChange(selectedRowKeys, selectedRows)
+                }
+            },
+            selectedRowKeys: this.state.selectedRowKeys
+        };
+    };
+
+    onSearch = (values) => {
+        this.setState({params: values, current: 1}, this.loadData)
+    }
+
+    changeFormValues = (values) => {
+        if (this.formRef.current) {
+            this.formRef.current.resetFields()
+            this.formRef.current.setFieldsValue(values)
+            this.formRef.current.submit()
+        }
+    }
+
+}
+
+
+
+
+
+
+

package/src/framework/components/ProTable/index.less

@@ -0,0 +1,14 @@
+.tmgg-pro-table{
+  .search-form {
+    .ant-form-item {
+      margin: 0;
+    }
+
+    .form-item-double-width {
+      .ant-form-item-control {
+        flex: 0 0 480px !important;
+      }
+    }
+  }
+}
+

package/src/framework/components/ProTable/utils/index.js

@@ -0,0 +1,43 @@
+/**
+ * 获取用户的 action 信息
+ *
+ * @param actionRef
+ * @param counter
+ * @param onCleanSelected
+ */
+export function useActionType(
+  ref,
+  action,
+  props,
+) {
+  /** 这里生成action的映射，保证 action 总是使用的最新 只需要渲染一次即可 */
+  const userAction = {
+    pageInfo: action.pageInfo,
+    reload: async (resetPageIndex) => {
+      // 如果为 true，回到第一页
+      if (resetPageIndex) {
+        await action.setPageInfo({
+          current: 1,
+        });
+      }
+      action?.reload();
+    },
+    reloadAndRest: async () => {
+      // reload 之后大概率会切换数据，清空一下选择。
+      props.onCleanSelected();
+      await action.setPageInfo({
+        current: 1,
+      });
+      await action?.reload();
+    },
+    reset: async () => {
+      await props.resetAll();
+      await action?.reset?.();
+      await action?.reload();
+    },
+    clearSelected: () => props.onCleanSelected(),
+    setPageInfo: (rest) => action.setPageInfo(rest),
+  };
+  // eslint-disable-next-line no-param-reassign
+  ref.current = userAction;
+}

package/src/framework/components/ValueType/index.jsx

@@ -0,0 +1,34 @@
+import React from "react";
+import {fieldRegistry, viewRegistry} from "./registry";
+import {Input} from "antd";
+import {ViewText} from "../view";
+
+function getComponent(registry, type) {
+    if (!type) {
+        return
+    }
+    for (let key in registry) {
+        if (key.toLowerCase() === type.toLowerCase()) {
+            return registry[key]
+        }
+    }
+}
+
+function renderField(type, props = {}) {
+    const componentClass = getComponent(fieldRegistry, type) || Input
+    return React.createElement(componentClass, props)
+}
+
+function renderView(type, props = {}) {
+    const componentClass = getComponent(viewRegistry, type) || ViewText
+
+    return React.createElement(componentClass, props)
+}
+
+export const ValueType = {
+    renderView,
+    renderField
+}
+
+
+

package/src/framework/components/ValueType/registry.jsx

@@ -0,0 +1,27 @@
+
+import {ViewImage,  ViewText} from "../view";
+import {ViewPassword,ViewBoolean} from "../../view-components";
+import {FieldDictSelect, FieldRemoteSelect} from "../../field-components";
+import {Input} from "antd";
+
+
+export const fieldRegistry = {
+    'text':Input,
+
+    'dict':FieldDictSelect,
+    'password':Input.Password,
+
+    select: FieldRemoteSelect
+}
+
+export const viewRegistry = {
+    text: ViewText,
+    password: ViewPassword,
+    boolean: ViewBoolean,
+    imageBase64: ViewImage,
+    image:ViewImage
+}
+
+
+
+

package/src/framework/components/index.ts

@@ -0,0 +1,17 @@
+export * from './ProModal'
+export * from './Ellipsis'
+
+export * from './system'
+
+
+export * from './PageLoading'
+
+export * from './ProTable'
+export * from './DownloadFileButton'
+
+export * from './NamedIcon'
+export * from './view'
+export * from './LinkButton'
+export * from './Gap'
+export * from './Page'
+export * from './ValueType'

package/src/framework/components/system/ButtonList.d.ts

@@ -0,0 +1,9 @@
+// @ts-ignore
+import React from "react";
+
+declare type ButtonListProps = {
+   maxNum?:number
+};
+
+export class ButtonList extends React.Component<ButtonListProps, any> {
+}

package/src/framework/components/system/ButtonList.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import {Space} from 'antd';
+import {PermUtils} from "../../utils";
+
+
+/**
+ * 带权限的按钮列表
+ * @param maxNum: 显示子节点的个数， 超过的为收缩起来
+ *
+ */
+export class ButtonList extends React.Component {
+
+
+    render() {
+        let {children} = this.props;
+        const menus = [];
+
+        // 判断是否数组
+        if (Array.isArray(children)) {
+            for (let child of children) {
+                if (child === null || child === undefined) {
+                    continue;
+                }
+                if (child.props == null || child.props.perm == null || PermUtils.hasPermission(child.props.perm)) {
+                    menus.push(child);
+                }
+            }
+        } else {
+            menus.push(children)
+        }
+
+
+        return <Space>{menus}</Space>;
+    }
+}

package/src/framework/components/system/HasPerm.tsx

@@ -0,0 +1,14 @@
+import {ReactNode} from "react";
+import {PermUtils} from "../../utils";
+
+/**
+ * 使用该组件，可以判断权限
+ */
+export function HasPerm(props: { code: string, children: ReactNode }) {
+    let {code} = props;
+
+    if (PermUtils.hasPermission(code)) {
+        return props.children;
+    }
+
+}