@jiangood/open-admin 1.0.0-beta.5

package/src/framework/views/ViewApproveStatus/index.d.ts

@@ -0,0 +1,3 @@
+import { ViewProps } from "../types";
+
+export function ViewApproveStatus(props: ViewProps<string>);

package/src/framework/views/ViewApproveStatus/index.jsx

@@ -0,0 +1,21 @@
+import {DictUtils} from "../../utils";
+import {Tag} from "antd";
+
+/**
+ * 查看审批状态组件
+ * @param props
+ * @constructor
+ */
+export function ViewApproveStatus(props) {
+    let {value} = props;
+    let txt=   DictUtils.dictLabel('approveStatus', value)
+
+    const colorMap = {
+        'DRAFT': 'orange',
+        'PENDING': 'blue',
+        'APPROVED': 'green',
+        'REJECTED': 'red'
+    };
+    let color = colorMap[value]
+    return   <Tag color={color}>{txt}</Tag> ;
+}

package/src/framework/views/ViewBoolean/index.d.ts

@@ -0,0 +1,3 @@
+import { ViewProps } from "../types";
+
+export function ViewBoolean(props: ViewProps<boolean>);

package/src/framework/views/ViewBoolean/index.jsx

@@ -0,0 +1,4 @@
+export function ViewBoolean(props) {
+    let {value} = props;
+    return value == null ? null : (value ? '是' : '否')
+}

package/src/framework/views/ViewBooleanEnableDisable/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ViewProps } from '../types';
+
+export class ViewBooleanEnableDisable extends React.Component<ViewProps<boolean | null | undefined>, any> {
+}

package/src/framework/views/ViewBooleanEnableDisable/index.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Tag } from 'antd';
+
+export class ViewBooleanEnableDisable extends React.Component {
+
+    render() {
+        const { value } = this.props;
+
+        if (value == null) {
+            return null;
+        }
+
+        return value ? <Tag color={"green"}>启用</Tag> : <Tag color={"red"}>禁用</Tag>;
+    }
+}

package/src/framework/views/ViewFile/index.d.ts

@@ -0,0 +1,10 @@
+// @ts-ignore
+import React from "react";
+import { ViewProps } from "../types";
+
+interface ViewFileProps extends ViewProps<string> {
+    height: string;
+}
+
+export class ViewFile extends React.Component<ViewFileProps, any> {
+}

package/src/framework/views/ViewFile/index.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import {Carousel, Empty} from 'antd';
+
+
+export class ViewFile extends React.Component {
+
+
+    render() {
+        let fileId = this.props.value
+
+        if (!fileId) {
+            return <Empty/>;
+        }
+
+        let arr = fileId.split(',');
+
+        let urlList = arr.map(id => 'admin/sysFile/preview/' + id);
+        let height = this.props.height;
+
+        if(urlList.length === 1){
+            const url = urlList[0]
+            return    <iframe
+                src={url}
+                width='99%'
+                frameBorder={0}
+                style={{height}}
+            />
+        }
+
+        // 多个文件则用走马灯
+        const iframeList = urlList.map((url) => {
+            return <div style={{height}}>
+                <iframe
+                    key={url}
+                    src={url}
+                    width='99%'
+                    frameBorder={0}
+                    style={{height}}
+                />
+            </div>
+        });
+
+        return <div style={{height}}>
+            <Carousel dotPosition={"top"}>
+                {iframeList}
+            </Carousel>
+        </div>
+    }
+}

package/src/framework/views/ViewFileButton/index.d.ts

@@ -0,0 +1,10 @@
+// @ts-ignore
+import React from "react";
+import { ViewProps } from "../types";
+
+interface ViewFileButtonProps extends ViewProps<string> {
+    height: string;
+}
+
+export class ViewFileButton extends React.Component<ViewFileButtonProps, any> {
+}

package/src/framework/views/ViewFileButton/index.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+import {Button} from "antd";
+import { MessageUtils } from "../../utils";
+import { ViewFile } from "../ViewFile";
+
+/**
+ * 文件按钮查看组件
+ */
+export class ViewFileButton extends React.Component {
+    render() {
+        const {value, height} = this.props;
+        if (!value) {
+            return null;
+        }
+        
+        return <Button type="link" size="small" onClick={()=>{
+            MessageUtils.alert(<ViewFile value={this.props.value} />)
+        }}>
+            查看文件
+        </Button>;
+    }
+}

package/src/framework/views/ViewImage/index.d.ts

@@ -0,0 +1,6 @@
+// @ts-ignore
+import React from "react";
+import { ViewProps } from "../types";
+
+export class ViewImage extends React.Component<ViewProps<string|string[]>, any> {
+}

package/src/framework/views/ViewImage/index.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import {Modal} from 'antd';
+
+
+export class ViewImage extends React.Component {
+
+  render() {
+    let vs = this.props.value
+
+    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( 'admin/sysFile/preview/' + v);
+        continue;
+      }
+
+      urlList.push( 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;
+  }
+
+  preview = (url) => {
+    Modal.info({
+      title: '预览图片',
+      width: '70vw',
+      content: <div style={{maxHeight:'70vh',overflow:'auto'}}>
+        <img src={url}  style={{maxWidth: '100%'}}/>
+      </div>,
+
+    });
+  };
+
+}

package/src/framework/views/ViewPassword/index.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { ViewProps } from "../types";
+
+export class ViewPassword extends React.Component<ViewProps<string>, any> {
+}

package/src/framework/views/ViewPassword/index.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import {Space} from "antd";
+import {EyeInvisibleOutlined, EyeOutlined} from "@ant-design/icons";
+
+export class ViewPassword extends React.Component {
+
+    state = {
+        visible: false
+    }
+
+    render() {
+        let v = this.props.value;
+        if (v == null) {
+            return null
+        }
+        let visible = this.state.visible;
+        return <Space>
+            <span>{this.state.visible ? v : '******'}</span>
+            <a onClick={() => this.setState({visible: !visible})}>
+                {visible ? <EyeOutlined/> : <EyeInvisibleOutlined/>}
+            </a>
+        </Space>
+    }
+}

package/src/framework/views/ViewProcessInstanceProgress/index.d.ts

@@ -0,0 +1,12 @@
+// @ts-ignore
+import React from "react";
+import { ViewProps } from "../types";
+
+
+
+/**
+ * 业务标识businessKey
+ */
+export class ViewProcessInstanceProgress extends React.Component<ViewProps<string>, any> {
+}
+

package/src/framework/views/ViewProcessInstanceProgress/index.jsx

@@ -0,0 +1,97 @@
+import React from "react";
+import {Empty, Modal, Skeleton, Table, Typography} from "antd";
+import {Gap} from "../../components"; import {HttpUtils} from "../../utils";
+
+/**
+ * 查看流程处理情况（不含表单）
+ */
+export class ViewProcessInstanceProgress extends React.Component {
+
+    state = {
+        instanceCommentList: [],
+        vars: {},
+
+        id: null,
+        starter: null,
+        startTime: null,
+        name: null,
+
+        data: {
+            commentList: [],
+            img: null
+        },
+        loading: true,
+
+        errorMsg: null
+    }
+
+
+    componentDidMount() {
+        const {value} = this.props;
+        HttpUtils.get("admin/flowable/my/getInstanceInfo", {businessKey: value}).then(rs => {
+            this.setState(rs)
+            this.setState({data: rs})
+        }).catch(e => {
+            this.setState({errorMsg: e})
+        }).finally(() => {
+            this.setState({loading: false})
+        })
+
+    }
+
+    onImgClick = () => {
+        const {data} = this.state
+
+        const {img} = data
+        Modal.info({
+            title: '流程图',
+            width: '70vw',
+            content: <div style={{width: '100%', overflow: 'auto', maxHeight: '80vh'}}><img src={img}/></div>
+        })
+    };
+
+    render() {
+        if (this.state.errorMsg) {
+            return <Empty description={this.state.errorMsg}></Empty>
+        }
+
+        const {data, loading} = this.state
+        const {commentList, img} = data
+        if (loading) {
+            return <Skeleton/>
+        }
+
+
+        return <>
+            <Typography.Title level={4}>{data.name}</Typography.Title>
+            <Typography.Text type="secondary">{data.starter} &nbsp;&nbsp; {data.startTime}</Typography.Text>
+            <Gap></Gap>
+            <img src={img} style={{maxWidth: '100%'}}
+                 onClick={this.onImgClick}/>
+            <Gap></Gap>
+            <Table dataSource={commentList}
+
+                   size='small'
+                   pagination={false}
+                   rowKey='id'
+                   columns={[
+                       {
+                           dataIndex: 'content',
+                           title: '操作'
+                       },
+                       {
+                           dataIndex: 'user',
+                           title: '处理人'
+                       },
+                       {
+                           dataIndex: 'time',
+                           title: '处理时间'
+                       },
+                   ]}
+            />
+        </>
+
+    }
+
+}
+

package/src/framework/views/ViewProcessInstanceProgressButton/index.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { ViewProps } from "../types";
+
+export class ViewProcessInstanceProgressButton extends React.Component<ViewProps<string>, any> {
+
+}

package/src/framework/views/ViewProcessInstanceProgressButton/index.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import {Button} from "antd";
+import {MessageUtils} from "../../utils";
+import {ViewProcessInstanceProgress} from "../ViewProcessInstanceProgress";
+
+export class ViewProcessInstanceProgressButton extends React.Component {
+    state = {
+        open:false,
+    }
+
+    onClick = () => {
+        console.log('点击追踪流程')
+        let content = <ViewProcessInstanceProgress value={this.props.value} />;
+        MessageUtils.alert(content,{
+            title:'流程审批信息',
+            width:800
+        })
+    };
+    render() {
+       return <Button onClick={this.onClick} size='small'>追踪流程</Button>
+    }
+
+
+}

package/src/framework/views/ViewText/index.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { ViewProps } from "../types";
+
+interface ViewTextProps extends ViewProps<string> {
+    /**
+     * 是否启用文本省略
+     */
+    ellipsis?: boolean;
+    /**
+     * 文本省略的最大长度
+     */
+    maxLength?: number;
+}
+
+export class ViewText extends React.Component<ViewTextProps, any> {
+}

package/src/framework/views/ViewText/index.jsx

@@ -0,0 +1,42 @@
+import React from "react";
+import {Typography, Button, Modal, Popover} from "antd";
+import {StringUtils} from "../../utils";
+
+export class ViewText extends React.Component {
+
+    static defaultProps = {
+        ellipsis: false,
+        maxLength: 15
+    }
+
+    render() {
+        const {value, ellipsis, maxLength} = this.props;
+        
+        if(value == null){
+            return null;
+        }
+        
+        // 如果没有启用 ellipsis，使用普通文本显示
+        if (!ellipsis) {
+            return <Typography.Text> {value}</Typography.Text>;
+        }
+        
+        // 如果启用了 ellipsis，使用省略功能
+        const short = StringUtils.ellipsis(value, maxLength);
+        return (
+            <Popover placement="topLeft" title={'长文本'} content={<Button onClick={this.showModal}>点击查看全部内容</Button>}>
+                {short}
+            </Popover>
+        );
+    }
+
+    showModal = () => {
+        const {value} = this.props;
+        Modal.info({
+            icon: null,
+            title: '长文本内容',
+            content: <div style={{height: 500, overflowY: 'auto'}}>{value}</div>,
+            width: 700
+        });
+    };
+}

package/src/framework/views/index.ts

@@ -0,0 +1,12 @@
+// 查看组件，主要是value 属性
+export * from './types';
+export * from './ViewPassword';
+export * from './ViewBoolean';
+export * from './ViewApproveStatus'
+export * from './ViewProcessInstanceProgress'
+export * from './ViewProcessInstanceProgressButton'
+export * from './ViewBooleanEnableDisable'
+export * from './ViewImage'
+export * from  './ViewFile'
+export * from './ViewText'
+export * from './ViewFileButton'

package/src/framework/views/types.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+
+/**
+ * 通用视图组件属性接口
+ * @template T - value 的类型
+ */
+export interface ViewProps<T> {
+  /**
+   * 视图值
+   */
+  value?: T;
+}
+
+/**
+ * 通用视图组件类类型
+ * @template T - value 的类型
+ */
+export interface ViewComponent<T> extends React.ComponentClass<ViewProps<T> & any> {
+}
+
+/**
+ * 通用视图组件函数类型
+ * @template T - value 的类型
+ */
+export interface ViewFunctionComponent<T> extends React.FC<ViewProps<T> & any> {
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./layouts"
+export * from "./framework"

package/src/layouts/PageRender.d.ts

@@ -0,0 +1,22 @@
+// @ts-ignore
+import React from "react";
+
+declare type PageRenderProps = {
+
+   /**
+    * 路径 如 /flowable/task/form
+    */
+   pathname: string;
+   /***
+    * 搜索参数 如 /?id=1
+    */
+   search?:string;
+
+   /***
+    *   是否把location信息透传到真正页面
+    */
+   passLocation?: boolean
+};
+
+export class PageRender extends React.Component<PageRenderProps, any> {
+}

package/src/layouts/PageRender.jsx

@@ -0,0 +1,90 @@
+import {matchRoutes, useAppData} from "umi";
+import React from "react";
+import {Result} from "antd";
+import {UrlUtils} from "../framework";
+
+/**
+ * 通过指定 pathname 渲染页面
+ * @param props
+ * 为了规范，接收参数何router保持一致，
+ * pathname： 路径 如 /flowable/task/form
+ * search：搜索参数 如 /?id=1
+ *
+ * passLocation: 是否把location信息透传到真正页面
+ *
+ * @returns {React.JSX.Element|*}
+ * @constructor
+ */
+
+let APP_DATA_CACHE = null
+
+
+/**
+ * 写函数组件主要为了使用hooks
+ * @param props
+ * @returns {Element}
+ * @constructor
+ */
+export  function PageRender(props) {
+    let {pathname, search, passLocation} = props
+
+    let appData = useAppData()
+    if(Object.keys(appData).length === 0){
+        appData = APP_DATA_CACHE
+    }else {
+        APP_DATA_CACHE = appData;
+    }
+
+    return <_PageRender appData={appData}  pathname={pathname} search={search}
+                        passLocation={passLocation}/>
+}
+
+class _PageRender extends React.Component {
+
+    render() {
+        if (this.props.passLocation) {
+            return this.passLocationRender()
+        }
+        return this.defaultRender()
+    }
+
+    passLocationRender = () => {
+        let {pathname, search,  appData} = this.props
+
+        const map = appData.routeComponents
+        const key = pathname.substring(1); // 移除第一个斜杠
+        let componentType = map[key] || map[key + '/index']
+        if (componentType) {
+            let params =search ? UrlUtils.getParams(search): {}
+            const location = {pathname, search, params}
+            return React.createElement(componentType, {location});
+        }
+    };
+
+
+    defaultRender = () => {
+        let {pathname, appData} = this.props
+        let matchArr = matchRoutes(appData.clientRoutes, pathname)
+
+        if (matchArr != null) {
+            if (pathname === '/') {
+                // 匹配结果为1，表示未定义index.jsx ，导致死循环
+                if (matchArr.length === 1) { // 如果项目中没有定义index.jsx
+                    return <Result icon={null} title='未定义首页'></Result>
+                }
+            }
+            // 取最匹配的那个
+            const mathResult = matchArr[matchArr.length - 1].route
+            if(mathResult){
+                return mathResult.element;
+            }
+        }
+
+        // 如果实在找不到页面组件，则404
+        return <Result
+            status={404}
+            title='页面不存在！'
+            subTitle={<div>路由地址：{pathname}</div>}
+        />
+    };
+}