@jiangood/open-admin 1.0.0

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

@@ -0,0 +1,29 @@
+import {FieldRemoteSelect, FieldRemoteSelectMultiple, FieldRemoteTreeSelect} from "../../field-components";
+import React from "react";
+
+export * from './ButtonList'
+export * from './HasPerm'
+
+export function FieldUserSelect(props) {
+    return <FieldRemoteSelect url="admin/sysUser/options" {...props} />;
+}
+export function FieldUserSelectMultiple(props) {
+    return <FieldRemoteSelectMultiple url="admin/sysUser/options" {...props} />;
+}
+
+export function FieldUnitTreeSelect(props) {
+    return <FieldRemoteTreeSelect url="admin/sysOrg/unitTree" {...props} />;
+}
+
+export function FieldDeptTreeSelect(props) {
+    return <FieldRemoteTreeSelect url="admin/sysOrg/deptTree" {...props} />;
+}
+
+export function FieldOrgTreeSelect(props) {
+    return <FieldRemoteTreeSelect url="admin/sysOrg/deptTree" {...props} />;
+}
+
+export function FieldOrgTreeMultipleSelect(props) {
+    return <FieldRemoteSelectMultiple url="/sysOrg/deptTree" {...props} />;
+}
+

package/src/framework/components/view/ViewBooleanEnableDisable.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Tag } from 'antd';
+
+// 定义组件的 Props 接口
+interface ViewBooleanEnableDisableProps {
+    value: boolean | null | undefined;
+}
+
+export class ViewBooleanEnableDisable extends React.Component<ViewBooleanEnableDisableProps, any> {
+
+    render() {
+        const { value } = this.props;
+
+        if (value == null) {
+            return null;
+        }
+
+        return value ? <Tag color={"green"}>启用</Tag> : <Tag color={"red"}>禁用</Tag>;
+    }
+}

package/src/framework/components/view/ViewEllipsis.d.ts

@@ -0,0 +1,11 @@
+// @ts-ignore
+import React from "react";
+
+
+declare type ViewEllipsisProps = {
+    maxLength?:  number,
+    value: any
+}
+
+export class ViewEllipsis extends React.Component<ViewEllipsisProps, any> {
+}

package/src/framework/components/view/ViewEllipsis.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import {Button, Modal, Popover} from 'antd';
+import {StringUtils} from "../../utils";
+
+
+export class ViewEllipsis extends React.Component {
+
+    static defaultProps = {maxLength: 15}
+
+    render() {
+        let {maxLength, value} = this.props;
+
+        const short = StringUtils.ellipsis(value, maxLength)
+        return  <Popover placement="topLeft" title={'长文本'} content={<Button onClick={this.showModal}>点击查看全部内容</Button>}>
+            {short}
+        </Popover>
+    }
+
+
+    showModal = () => {
+        let {maxLength, value} = this.props;
+        Modal.info({
+            icon:null,
+            title:'长文本内容',
+            content: <div style={{height:500,overflowY:'auto'}}>{value}</div>,
+            width:700
+        })
+    };
+
+}

package/src/framework/components/view/ViewFile.d.ts

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

package/src/framework/components/view/ViewFile.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/components/view/ViewFileButton.d.ts

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

package/src/framework/components/view/ViewImage.d.ts

@@ -0,0 +1,9 @@
+// @ts-ignore
+import React from "react";
+
+declare type ViewImageProps = {
+    value: string|string[]
+};
+
+export class ViewImage extends React.Component<ViewImageProps, any> {
+}

package/src/framework/components/view/ViewImage.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/components/view/ViewRange/index.d.ts

@@ -0,0 +1,16 @@
+// @ts-ignore
+import React from "react";
+
+declare type ViewRangeProps = {
+
+    min:any;
+    max:any;
+};
+
+/**
+ * 显示一个区间，如开始时间，结束时间
+ */
+export class ViewRange extends React.Component<ViewRangeProps, any> {
+
+
+}

package/src/framework/components/view/ViewRange/index.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+export class ViewRange extends React.Component {
+
+    static  defaultProps = {
+         min : '未知',max : '未知'
+    }
+
+    render() {
+        let {min,max}  = this.props
+        if(min == null && max == null){
+            return null;
+        }
+        min = min == null ? '未知': min;
+        max = max == null ? '未知': max;
+
+        return min + ' - ' + max;
+
+    }
+}

package/src/framework/components/view/ViewText.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import {Typography} from "antd";
+
+interface ViewTextProps {
+    value?: string;
+}
+
+export class ViewText extends React.Component<ViewTextProps, any>{
+
+    render() {
+        if(this.props.value == null){
+            return null;
+        }
+        return <Typography.Text> {this.props.value}</Typography.Text>;
+    }
+}

package/src/framework/components/view/index.ts

@@ -0,0 +1,10 @@
+/**
+ * 相对form，显示的是文本
+ * 统一有个值叫value
+ */
+export * from './ViewEllipsis'
+export * from './ViewBooleanEnableDisable'
+export * from './ViewImage'
+export * from './ViewRange'
+export * from  './ViewFile'
+export * from './ViewText'

package/src/framework/field-components/FieldBoolean.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { SelectProps } from 'antd/es/select';
+
+export interface FieldBooleanProps  {
+
+    type?:'select' | 'radio' | 'checkbox' |  'switch'; // 默认 select
+    value?: boolean;
+    onChange?: (value: boolean) => void;
+
+}
+
+export class FieldBoolean extends React.Component<FieldBooleanProps, any> {}
+

package/src/framework/field-components/FieldBoolean.jsx

@@ -0,0 +1,76 @@
+/**
+ * antd 自带的checkbox 未选择时不会返回false, 和form配合时还得设置 valuePropName
+ *
+ *
+ * 本组件改成布尔值的输入
+ *
+ * 选中 true， 反选 false
+ *
+ * 注意：null 会转为false
+ *
+ *
+ */
+import React from 'react';
+import {Checkbox, Radio, Select, Switch} from 'antd';
+
+
+export class FieldBoolean extends React.Component {
+
+    static defaultProps = {
+        type: 'select'
+    }
+
+    render() {
+        let {value, onChange, type} = this.props
+
+        const v = this.parseBoolean(value);
+
+        switch (type) {
+            case 'radio':
+                return <Radio.Group value={v} onChange={onChange}>
+                    <Radio value={true}>是</Radio>
+                    <Radio value={false}>否</Radio>
+                    <Radio value={undefined}>不确定</Radio>
+                </Radio.Group>;
+            case 'checkbox':
+                return <Checkbox
+                    checked={v}
+                    onChange={(e) => {
+                        onChange(e.target.checked);
+                    }}
+                />;
+            case 'select':
+                return <Select options={[
+                    {value: true, label: '是'},
+                    {value: false, label: '否'},
+                ]}
+                               value={v}
+                               onChange={onChange}
+                               style={{width: '100%'}}
+                               allowClear={true}
+                               placeholder={'请选择'}
+                />
+            case 'switch':
+                return <Switch
+                    checked={v}
+                    onChange={onChange}
+                />;
+            default:
+                break;
+        }
+
+    }
+
+    parseBoolean(v) {
+        if (v === null || v === undefined) {
+            return undefined;
+        }
+
+        if (typeof v === 'boolean') {
+            return v;
+        }
+        return v === 1 || v === 'true' || v === 'Y';
+
+    }
+}
+

package/src/framework/field-components/FieldDate.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+
+export interface FieldDateProps {
+
+    type: 'YYYY-MM-DD' | 'DAY'|
+        'YYYY-MM-DD HH:mm:ss' |
+        // 年
+        'YYYY' | 'YEAR' |
+        // 年月
+        'YYYY-MM' | 'YEAR_MONTH'|
+        // 季度
+        'YYYY-QQ' | 'YEAR_QUARTER'|
+
+        'YYYY-MM-DD HH:mm' |
+
+        //  时间
+        'HH:mm' |
+        'HH:mm:ss';
+
+
+}
+
+export class FieldDate extends React.Component<FieldDateProps, any> {
+
+
+}
+

package/src/framework/field-components/FieldDate.jsx

@@ -0,0 +1,114 @@
+/**
+ * 根据时间类型自动渲染时间选择组件
+ */
+import React from "react";
+import dayjs from "dayjs";
+import {DatePicker, TimePicker} from "antd";
+import {DateUtils} from "../utils";
+
+
+export class FieldDate extends React.Component {
+    static defaultProps = {
+        type: 'YYYY-MM-DD'
+    }
+
+
+
+    render() {
+        let {type, value, onChange, ...rest} = this.props;
+        type = DateUtils.convertTypeToFormat(type)
+
+        switch (type) {
+            case 'YYYY':
+                return <DatePicker
+                    value={this.strToDate(value, type)}
+                    onChange={v => onChange(this.dateToStr(v,'YYYY'))}
+                    picker="year"
+                    {...rest}
+                />;
+            case 'YYYY-MM':
+                return <DatePicker
+                    value={this.strToDate(value, 'YYYY-MM')}
+                    onChange={v => onChange(this.dateToStr(v,'YYYY-MM'))}
+                    picker="month"
+                    {...rest}
+                />;
+            case 'YYYY-QQ':
+                return <DatePicker
+                    value={this.strToDate(value, 'YYYY-QQ')}
+                    onChange={v => onChange(this.dateToStr(v,'YYYY-QQ'))}
+                    picker="quarter"
+                    {...rest}
+                />;
+            case 'YYYY-MM-DD':
+                return   <DatePicker
+                    value={this.strToDate(value, 'YYYY-MM-DD')}
+                    onChange={v => onChange(this.dateToStr(v,'YYYY-MM-DD'))}
+                    {...rest}
+                ></DatePicker>;
+            case 'YYYY-MM-DD HH:mm':
+                return <DatePicker
+                    value={this.strToDate(value, 'YYYY-MM-DD HH:mm')}
+                    onChange={v => onChange(this.dateToStr(v,'YYYY-MM-DD HH:mm'))}
+                    format='YYYY-MM-DD HH:mm'
+                    showTime
+                    {...rest}
+                ></DatePicker>;
+            case 'YYYY-MM-DD HH:mm:ss':
+                return <DatePicker
+                    value={this.strToDate(value, 'YYYY-MM-DD HH:mm:ss')}
+                    onChange={v => onChange(this.dateToStr(v,'YYYY-MM-DD HH:mm:ss'))}
+                    showTime
+                    {...rest}
+                ></DatePicker>;
+            case 'HH:mm':
+                return <TimePicker
+                    format='HH:mm'
+                    value={this.strToDate(value, 'HH:mm')}
+                    onChange={v => onChange(this.dateToStr(v,'HH:mm'))}
+                    {...rest}
+                ></TimePicker>;
+            case 'HH:mm:ss':
+                return <TimePicker
+                    value={this.strToDate(value, 'HH:mm:ss')}
+                    onChange={v => onChange(this.dateToStr(v,'HH:mm:ss'))}
+                    {...rest}
+                ></TimePicker>;
+        }
+
+        return <div>未知组件 {type}</div>
+    }
+
+    static getDefaultValue(type) {
+        let year = dayjs().format("YYYY");
+        let month = dayjs().format("YYYY-MM");
+        let quarter = dayjs().format("YYYY-QQ");
+
+        switch (type) {
+            case 'YYYY':
+                return year;
+            case 'YYYY-MM':
+                return month;
+            case 'YYYY-QQ':
+                return quarter;
+        }
+
+        return null;
+    }
+
+    strToDate(value, fmt) {
+        if (value != null && value !== '') {
+            let type = typeof value;
+            if (type === 'string' || type === 'number') {
+                value = dayjs(value, fmt);
+            }
+        }
+
+        return value;
+    }
+
+    dateToStr(date, fmt) {
+        return date ? date.format(fmt) : null;
+    }
+
+}

package/src/framework/field-components/FieldDateRange.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import {FieldDateProps} from "./FieldDate";
+
+
+export class FieldDateRange extends React.Component<FieldDateProps, any> {}
+

package/src/framework/field-components/FieldDateRange.jsx

@@ -0,0 +1,104 @@
+/**
+ * 根据时间类型自动渲染时间选择组件
+ */
+import React from "react";
+import dayjs from "dayjs";
+import {DatePicker, TimePicker} from "antd";
+import {DateUtils, StringUtils} from "../utils";
+
+const SP = StringUtils.ISO_SPLITTER;
+
+export class FieldDateRange extends React.Component {
+    static defaultProps = {
+        type: 'YYYY-MM-DD'
+    }
+
+    render() {
+        let {type, value, onChange, ...rest} = this.props;
+        type = DateUtils.convertTypeToFormat(type)
+        switch (type) {
+            case 'YYYY':
+                return <DatePicker.RangePicker
+                    value={this.strToDate(value, 'YYYY')}
+                    onChange={v => onChange(this.dateToStr(v,'YYYY'))}
+                    picker="year"
+                    {...rest}
+                />;
+            case 'YYYY-MM':
+                return <DatePicker.RangePicker
+                    value={this.strToDate(value, 'YYYY-MM')}
+                    onChange={v => onChange(this.dateToStr(v,'YYYY-MM'))}
+                    picker="month"
+                    {...rest}
+                />;
+            case 'YYYY-QQ':
+                return <DatePicker.RangePicker
+                    value={this.strToDate(value, 'YYYY-QQ')}
+                    onChange={v => onChange(this.dateToStr(v,'YYYY-QQ'))}
+                    picker="quarter"
+                    {...rest}
+                />;
+            case 'YYYY-MM-DD':
+                return   <DatePicker.RangePicker
+                    value={this.strToDate(value, 'YYYY-MM-DD')}
+                    onChange={v => onChange(this.dateToStr(v,'YYYY-MM-DD'))}
+                    {...rest}
+                />;
+            case 'YYYY-MM-DD HH:mm':
+                return <DatePicker.RangePicker
+                    value={this.strToDate(value, 'YYYY-MM-DD HH:mm')}
+                    onChange={v => onChange(this.dateToStr(v,'YYYY-MM-DD HH:mm'))}
+                    format='YYYY-MM-DD HH:mm'
+                    showTime
+                    {...rest}
+                />;
+            case 'YYYY-MM-DD HH:mm:ss':
+                return <DatePicker.RangePicker
+                    value={this.strToDate(value, 'YYYY-MM-DD HH:mm:ss')}
+                    onChange={v => onChange(this.dateToStr(v,'YYYY-MM-DD HH:mm:ss'))}
+                    showTime
+                    {...rest}
+                />;
+            case 'HH:mm':
+                return <TimePicker.RangePicker
+                    format='HH:mm'
+                    value={this.strToDate(value, 'HH:mm')}
+                    onChange={v => onChange(this.dateToStr(v,'HH:mm'))}
+                    {...rest}
+                />;
+            case 'HH:mm:ss':
+                return <TimePicker.RangePicker
+                    value={this.strToDate(value, 'HH:mm:ss')}
+                    onChange={v => onChange(this.dateToStr(v,'HH:mm:ss'))}
+                    {...rest}
+                />;
+        }
+
+        return <div>未知组件 {type}</div>
+    }
+
+
+
+    strToDate(v, fmt) {
+        console.log('调用转换')
+        if (!v) {
+            return null;
+        }
+
+        const arr = v.split(SP)
+        let s1 = arr[0];
+        let s2 = arr[1];
+        return [dayjs(s1), dayjs(s2)]
+    }
+
+    dateToStr(dateArr, fmt) {
+        const d1 = dateArr[0]
+        const d2 = dateArr[1]
+
+        const s1 = d1 ? d1.format(fmt) : ""
+        const s2 = d2 ? d2.format(fmt) : "";
+
+        return s1 + SP + s2
+    }
+
+}

package/src/framework/field-components/FieldDictSelect.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { SelectProps } from 'antd/es/select';
+
+export interface FieldDictSelectProps extends Omit<SelectProps, 'options' | 'children'|'mode'> {
+
+    /**
+     * 请求地址
+     */
+    typeCode: string ;
+}
+
+export class FieldDictSelect extends React.Component<FieldDictSelectProps, any> {}
+

package/src/framework/field-components/FieldDictSelect.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import {Select} from "antd";
+import {DictUtils} from "../utils";
+
+export function FieldDictSelect(props) {
+    const {value, onChange, typeCode, ...rest} = props
+    const options = DictUtils.dictOptions(typeCode)
+
+    return <Select value={value}
+                   onChange={onChange}
+                   style={{width: '100%', minWidth: 200}}
+                   options={options}
+                   {...rest}>
+
+    </Select>
+}