@jiangood/springboot-admin-starter 0.0.1

package/src/framework/components/FieldRemoteTree.jsx

@@ -0,0 +1,20 @@
+import {Tree} from "antd";
+import React from "react";
+
+
+export default class extends React.Component{
+
+    render() {
+        return <Tree
+            multiple
+            checkable
+            onCheck={this.onCheck}
+            checkedKeys={checked}
+            treeData={treeData}
+            defaultExpandAll
+            checkStrictly
+
+        >
+        </Tree>
+    }
+}

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

@@ -0,0 +1,10 @@
+// @ts-ignore
+import React from "react";
+
+// 推荐(16+8n)px 作为间隔，n为自然数
+declare type GapProps = {
+   n?: number; // (16+8n)px 中的n, 默认为0
+};
+
+export class Gap extends React.Component<GapProps, any> {
+}

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

@@ -0,0 +1,15 @@
+import React from "react";
+import './index.less'
+
+/**
+ * 上下间隔
+ */
+export class Gap extends React.Component {
+
+    render() {
+        const {n =0} = this.props;
+        let height = 16 +  8 * n
+
+        return <div className='tmgg-gap' style={{height}}></div>
+    }
+}

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

@@ -0,0 +1,3 @@
+.tmgg-gap {
+  width: 100%;
+}

package/src/framework/components/HasPerm.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import {PermUtil} from "../system";
+
+/**
+ * 使用该组件，可以判断权限
+ * @param
+ */
+export class HasPerm extends React.Component {
+
+  render() {
+    let {code} = this.props;
+
+    if (PermUtil.hasPermission(code)) {
+      return this.props.children;
+    }
+
+  }
+}

package/src/framework/components/ImageView.d.ts

@@ -0,0 +1,12 @@
+// @ts-ignore
+import React from "react";
+
+declare type ImageViewProps = {
+    /**
+     *   文件id，支持多个，支持逗号分隔
+     */
+    id: string|string[]
+};
+
+export class ImageView extends React.Component<ImageViewProps, any> {
+}

package/src/framework/components/ImageView.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import {Modal} from 'antd';
+import {SysUtil} from "../system";
+
+
+/**
+ *  可以使用 fileId 或 url 属性
+ *
+ *    // 推荐使用 ， 支持id， url， 并支持逗号分隔符
+ *   value?: string | string[];
+ *
+ *
+ */
+export class ImageView extends React.Component {
+  preview = (url) => {
+    Modal.info({
+      title: '预览图片',
+      width: '70vw',
+      content: <img src={url} width="100%" />,
+    });
+  };
+
+  render() {
+    let vs = this.props.id
+
+    if (!vs) {
+      return;
+    }
+
+    if (typeof vs === 'string') {
+      vs = vs.split(',');
+    }
+
+    let urlList = [];
+    for (let v of vs) {
+      let isId = v.indexOf('/') === -1;
+      let isAbsUrl = v.startsWith('http');
+      if (isAbsUrl) {
+        urlList.push(v);
+        continue;
+      }
+
+      if (isId) {
+        urlList.push(SysUtil.getServerUrl() + 'sysFile/preview/' + v);
+        continue;
+      }
+
+      urlList.push(SysUtil.getServerUrl() + v);
+    }
+
+    const imgs = urlList.map((url) => (
+      <img
+        style={{ display: 'inline-block' }}
+        key={url}
+        src={url}
+        onClick={() => this.preview(url)}
+        width={60}
+        height={60}
+      />
+    ));
+
+    return imgs;
+  }
+}

package/src/framework/components/LinkButton.d.ts

@@ -0,0 +1,14 @@
+// @ts-ignore
+import React from "react";
+
+declare type LinkButtonProps = {
+    /**
+     *   路径
+     */
+    path: string,
+    label: string,
+    type?:'primary'|'default'|'dashed'|'link'|'text'|'ghost'
+};
+
+export class LinkButton extends React.Component<LinkButtonProps, any> {
+}

package/src/framework/components/LinkButton.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import {Button} from "antd";
+import {PageUtil} from "../system";
+
+export class LinkButton extends React.Component {
+
+    render() {
+        const {path,label, children, size='small', ...rest} = this.props;
+        return <Button size={size} {...rest} onClick={()=>{
+            PageUtil.open(path,label)
+        }}>{children}</Button>
+    }
+}

package/src/framework/components/MsgBox.jsx

@@ -0,0 +1,180 @@
+import React from "react";
+import {Input, message, Modal, Typography} from "antd";
+
+export class MsgBox {
+
+    static _ref = React.createRef();
+
+
+    static toast(msg, success=true){
+        if(success){
+            message.success(msg)
+        }else {
+            message.error(msg)
+        }
+
+    }
+
+    static alert(msg, title = '提示') {
+        let instance = this._ref.current;
+        if (instance) {
+            return new Promise((resolve) => {
+                instance.show('alert', msg, title, resolve);
+            });
+        }
+        return Promise.resolve(false);
+
+    }
+
+    static confirm(msg, title = '确认') {
+        console.log('confirm', this._ref.current)
+        let instance = this._ref.current;
+        if (instance) {
+            return new Promise((resolve) => {
+                instance.show('confirm', msg, title, resolve);
+            });
+        }else {
+
+        }
+        return Promise.resolve(false);
+    }
+
+    static prompt(msg, defaultValue = '', title = '输入') {
+        let instance = this._ref.current;
+        if (instance) {
+            return new Promise((resolve) => {
+                instance.show('prompt', msg, title, resolve);
+            });
+        }
+        return Promise.resolve(null);
+    }
+}
+
+export class MsgBoxComponent extends React.Component {
+
+    state = {
+        open: false,
+        title: '提示',
+        type: 'alert',
+        msg: null,
+        inputValue: '',
+    }
+
+    resolvePromise = null; //
+
+    componentDidMount() {
+        MsgBox._ref.current = this;
+    }
+
+    componentWillUnmount() {
+        if (MsgBox._ref.current === this) {
+            MsgBox._ref.current = null;
+        }
+    }
+
+    show = (type, msg, title, resolvePromise) => {
+        this.setState({
+            open: true,
+            type: type,
+            msg: msg,
+            title: title,
+            inputValue: type === 'prompt' ? (this.state.inputValue || '') : '',
+        });
+        this.resolvePromise = resolvePromise
+    }
+
+    handleOk = () => {
+        const {type, inputValue} = this.state;
+        const  resolvePromise = this.resolvePromise
+
+        this.setState({open: false});
+
+        if (resolvePromise) {
+            switch (type) {
+                case 'confirm':
+                    resolvePromise(true);
+                    break;
+                case 'prompt':
+                    resolvePromise(inputValue);
+                    break;
+                default:
+                    resolvePromise(null);
+                    break;
+            }
+        }
+    }
+
+    handleCancel = () => {
+        const {type, resolvePromise} = this.state;
+
+        this.setState({open: false});
+
+        if (resolvePromise) {
+            switch (type) {
+                case 'confirm':
+                    resolvePromise(false);
+                    break;
+                case 'prompt':
+                    resolvePromise(null);
+                    break;
+                default:
+                    resolvePromise(null);
+                    break;
+            }
+        }
+    }
+
+    handleInputChange = (e) => {
+        this.setState({inputValue: e.target.value});
+    }
+
+    renderContent = () => {
+        const {type, msg, inputValue} = this.state;
+
+        switch (type) {
+            case 'alert':
+            case 'confirm':
+                return <Typography.Text>{msg}</Typography.Text>;
+            case 'prompt':
+                return (
+                    <>
+                        <Typography.Text>{msg}</Typography.Text>
+                        <Input
+                            value={inputValue}
+                            onChange={this.handleInputChange}
+                            placeholder="请输入内容"
+                        />
+                    </>
+                );
+            default:
+                return null;
+        }
+    }
+    render() {
+        const {type} = this.state;
+
+        return (
+            <Modal
+                open={this.state.open}
+                title={this.state.title}
+                destroyOnHidden={true}
+                maskClosable={false}
+                onOk={this.handleOk}
+                onCancel={this.handleCancel}
+                okText='确定'
+                cancelText='取消'
+                width={400}
+                transitionName=""
+                maskTransitionName=""
+                footer={(node, {OkBtn, CancelBtn}) => {
+                    if (type === 'alert') {
+                        return <OkBtn/> // 不要取消按钮
+                    }
+                    return node;
+                }}
+            >
+                {this.renderContent()}
+            </Modal>
+        );
+    }
+}

package/src/framework/components/NamedIcon.tsx

@@ -0,0 +1,15 @@
+import * as Icons from '@ant-design/icons';
+
+declare type NamedIconProps = {
+    name: string
+};
+
+export function NamedIcon(props:NamedIconProps){
+    let {name, ...rest} = props;
+    const IconType = Icons[name]
+
+    if(IconType){
+        return <IconType {...rest}></IconType>
+    }
+
+}

package/src/framework/components/OrgTree.jsx

@@ -0,0 +1,60 @@
+import {Alert, Skeleton, Tree} from 'antd';
+import React from 'react';
+import {HttpUtil} from "../system";
+import * as Icons from '@ant-design/icons';
+
+
+export  class OrgTree  extends React.Component {
+
+    state = {
+        treeDataLoading: true,
+        treeData: [],
+
+        currentOrgId: null
+    }
+
+
+    componentDidMount() {
+        HttpUtil.get('admin/sysOrg/unitTree').then(tree => {
+            this.setState({treeData: tree,treeDataLoading: false})
+        })
+    }
+
+    onSelectOrg = orgIds => {
+        let orgId = orgIds[0] || null;
+        this.props.onChange(orgId)
+    }
+
+
+    render() {
+        let {treeData, treeDataLoading} = this.state
+        if (treeDataLoading) {
+            return <Skeleton title='加载中...'/>
+        }
+
+        if (treeData.length === 0) {
+            return <Alert type={"warning"} message={'组织机构数据为空'}>
+            </Alert>
+        }
+
+        return <Tree
+            treeData={treeData}
+            defaultExpandAll
+            onSelect={this.onSelectOrg}
+            showIcon
+            blockNode
+            icon={item=>{
+                  const icon =  Icons[item.iconName]
+                    if(icon){
+                        return React.createElement(icon)
+                    }
+            }}
+        >
+        </Tree>
+    }
+
+
+}
+
+
+

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

@@ -0,0 +1,10 @@
+// @ts-ignore
+import React from "react";
+
+declare type PageProps = {
+    padding?: boolean;
+    backgroundGray?:boolean;
+};
+
+export class Page extends React.Component<PageProps, any> {
+}

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

@@ -0,0 +1,30 @@
+import React from "react";
+import './index.less'
+import {theme} from "../../system";
+
+/**
+ * 上下间隔
+ */
+export class Page extends React.Component {
+
+    static defaultProps = {
+        padding: false,
+        backgroundGray:false
+    }
+
+    render() {
+        const style = {}
+        if(this.props.padding){
+            style.padding = 16
+        }
+        if(this.props.backgroundGray){
+            style.backgroundColor = theme["background-color"]
+        }
+
+
+        return <div className={'tmgg-page'}  style={style}>
+            {this.props.children}
+        </div>
+    }
+
+}

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

@@ -0,0 +1,10 @@
+.tmgg-page {
+  width: 100%;
+
+  // header 48 footer 43, tab 36
+  height: calc(100vh - 127px);
+
+  overflow: auto;
+
+  background-color: white;
+}

package/src/framework/components/PageLoading.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+import {Alert, Spin} from "antd";
+import {theme} from "../system";
+
+/**
+ * 页面加载中的动画
+ */
+export  class PageLoading extends React.Component {
+
+
+    render() {
+        const msg = this.props.message || '页面加载中...';
+
+        return <div style={{height: '100vh', width: '100%',
+            display:'flex', alignItems:'center', justifyContent:"center",
+            color:theme["primary-color"]
+        }}>
+            <div style={{textAlign:"center", marginTop:'-10rem'}}>
+                <div>
+                    <Spin size={"large"}></Spin>
+                </div>
+                <div style={{marginTop:'1rem'}}>
+                    <Alert message={msg}></Alert>
+                </div>
+
+
+            </div>
+        </div>
+    }
+
+}

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

@@ -0,0 +1,11 @@
+// @ts-ignore
+import React from "react";
+
+declare type PanelProps = {
+    title:string|React.ReactNode;
+    empty?: boolean;
+    loading?: boolean;
+};
+
+export class Panel extends React.Component<PanelProps, any> {
+}

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

@@ -0,0 +1,24 @@
+import React from "react";
+import './index.less'
+import {Card, Empty, Spin} from "antd";
+
+export class Panel extends React.Component{
+
+    render() {
+       return <Card title={this.props.title} size='small'>
+           {this.renderContent()}
+       </Card>
+    }
+
+    renderContent(){
+        if(this.props.loading){
+            return <Spin />
+        }
+        if(this.props.empty){
+            return  <Empty />
+        }
+
+        return this.props.children || <Empty />
+    }
+
+}

package/src/framework/components/ProModal/index.tsx

@@ -0,0 +1,66 @@
+import React, {ReactNode} from 'react';
+import {Modal} from 'antd';
+
+export interface ProModalProps {
+  title: string;
+  actionRef?: any; // 弃用，请使用ref
+  ref: any;
+  onShow?: any;
+  footer?: any;
+  width?: number;
+  children:ReactNode;
+}
+export class ProModal extends React.Component<ProModalProps, any> {
+
+  constructor(props:ProModalProps) {
+    super(props);
+    if (props.actionRef) {
+      props.actionRef.current = this;
+    }
+    if (props.ref) {
+      props.ref.current = this;
+    }
+  }
+
+
+
+  state = {
+    visible: false,
+  };
+
+  show = () => {
+    this.setState({
+      visible: true,
+    });
+    if (this.props.onShow) {
+      this.props.onShow();
+    }
+  };
+  hide = () => {
+    this.setState({
+      visible: false,
+    });
+  };
+  open = () => {
+    this.show();
+  };
+  close = () => {
+    this.hide();
+  };
+
+  render() {
+    return (
+      <Modal
+        maskClosable={false}
+        destroyOnHidden
+        title={this.props.title}
+        open={this.state.visible}
+        onCancel={this.hide}
+        footer={this.props.footer || null}
+        width={this.props.width || 800}
+      >
+        {this.state.visible && this.props.children}
+      </Modal>
+    );
+  }
+}