@jiangood/springboot-admin-starter 0.0.1

package/src/framework/components/field/time/MonthPickerString.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import {DatePicker} from 'antd';
+import {valueToDate} from "./TimePickerTool";
+
+/**
+ * 月份选择器
+ *
+ * 值类型为字符串
+ *
+ *
+ */
+export { MonthPickerString as FieldMonthPickerString };
+
+const FMT = 'YYYY-MM';
+
+export class MonthPickerString extends React.Component {
+
+  static FORMAT = FMT
+
+
+  onChange = (date) => {
+    const str = date ? date.format(FMT) : null;
+    this.props.onChange(str);
+  };
+
+  render() {
+    let { value, readOnly = false, mode, ...rest} = this.props;
+    if (mode == 'read') {
+      return value;
+    }
+
+    value = valueToDate(value,FMT)
+
+
+    return (
+      <DatePicker
+        {...rest}
+        value={value}
+        onChange={this.onChange}
+        picker="month"
+        disabled={readOnly || this.props.disabled}
+      ></DatePicker>
+    );
+  }
+}

package/src/framework/components/field/time/TimePickerTool.ts

@@ -0,0 +1,14 @@
+import dayjs from "dayjs";
+
+
+export function valueToDate(value:any, fmt:string){
+  if (value != null && value != '') {
+    let type = typeof value;
+    if (type == 'string' || type == 'number') {
+      value = dayjs(value, fmt);
+    }
+
+  }
+
+  return value;
+}

package/src/framework/components/field/time/YearPickerString.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import {DatePicker} from 'antd';
+import {valueToDate} from "./TimePickerTool";
+
+/**
+ * 月份选择器
+ *
+ * 值类型为字符串
+ *
+ *
+ */
+export { YearPickerString as FieldYearPickerString };
+const FMT = 'YYYY';
+export class YearPickerString extends React.Component {
+
+  static FORMAT = FMT
+
+
+  onChange = (date) => {
+    const str = date ? date.format(FMT): null;
+    this.props.onChange(str);
+  };
+
+  render() {
+    let { value, readOnly = false, mode } = this.props;
+    if (mode == 'read') {
+      return value;
+    }
+    value = valueToDate(value,FMT)
+
+    return (
+      <DatePicker
+        {...this.props}
+        value={value}
+        onChange={this.onChange}
+        picker="year"
+        disabled={readOnly || this.props.disabled}
+      ></DatePicker>
+    );
+  }
+}

package/src/framework/components/field/time/YearQuarterString.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import {DatePicker} from 'antd';
+import {valueToDate} from "./TimePickerTool";
+
+/**
+ * 季度选择
+ */
+export { YearQuarterString as FieldYearQuarterString };
+
+const FMT = 'YYYY-QQ';
+
+export class YearQuarterString extends React.Component {
+
+  static FORMAT = FMT
+
+
+  onChange = (date, dateString) => {
+    this.props.onChange(dateString);
+  };
+
+  render() {
+    let { value, readOnly = false, mode } = this.props;
+    if (mode == 'read') {
+      return value;
+    }
+    value = valueToDate(value,FMT)
+
+    return (
+      <DatePicker
+        {...this.props}
+        value={value}
+        onChange={this.onChange}
+        picker="quarter"
+        disabled={readOnly || this.props.disabled}
+      ></DatePicker>
+    );
+  }
+}

package/src/framework/components/field/time/index.tsx

@@ -0,0 +1,7 @@
+export * from './DatePickerString';
+export * from './DateTimePickerString';
+export * from './HHmmPickerString';
+export * from './MonthPickerString';
+export * from './YearPickerString';
+export * from './YearQuarterString';
+export * from './FieldDateRange'

package/src/framework/components/field/upload/FieldUploadCropImage/index.d.ts

@@ -0,0 +1,22 @@
+// @ts-ignore
+import React from "react";
+// @ts-ignore
+import {CropperProps} from "react-easy-crop/Cropper";
+
+
+declare type FieldUploadCropImageProps = {
+    value?: string; // 文件的值，sysFile的id
+    onChange?: (v:string)=>{};
+
+    cropperProps?: CropperProps;
+
+    maxCount?: number
+};
+
+/**
+ * 上传图片前裁切， 单张图片
+ *
+ * 可参考 react-easy-crop
+ */
+export class FieldUploadCropImage extends React.Component<FieldUploadCropImageProps, any> {
+}

package/src/framework/components/field/upload/FieldUploadCropImage/index.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import {FieldUploadFile} from "../FieldUploadFile";
+
+
+export class FieldUploadCropImage extends React.Component {
+  render() {
+      return <FieldUploadFile {...this.props} accept={"image/*"} cropImage={true} />
+  }
+}
+
+

package/src/framework/components/field/upload/FieldUploadFile.d.ts

@@ -0,0 +1,35 @@
+// @ts-ignore
+import React from "react";
+// @ts-ignore
+import {CropperProps} from "react-easy-crop/Cropper";
+import {UploadListType} from "antd/es/upload/interface";
+
+
+declare type FieldUploadFileProps = {
+    value?: string; // 文件的值，sysFile的id, 逗号分割
+    onChange?: (v: string) => {};
+    onFileChange?: (fileList: any[]) => {}
+
+    /**
+     * 是否裁切图片
+     */
+    cropImage?: boolean;
+    cropperProps?: CropperProps;
+
+    maxCount?: number;
+
+    accept?: "image/*" | ".pdf" | ".docx" | '.xlsx' | string;
+
+    children?: React.ReactNode;
+
+    listType?: UploadListType
+};
+
+/**
+ * 上传图片前裁切， 单张图片
+ *
+ * 可参考 react-easy-crop
+ */
+export class FieldUploadFile extends React.Component<FieldUploadFileProps, any> {
+
+}

package/src/framework/components/field/upload/FieldUploadFile.jsx

@@ -0,0 +1,145 @@
+import React from "react";
+import ImgCrop from "antd-img-crop";
+import {Modal, Upload} from "antd";
+import UploadOutlined from "@ant-design/icons/lib/icons/UploadOutlined";
+import {SysUtil} from "../../../system";
+import {ViewFile} from "../../view";
+import {ObjUtil} from "../../../utils";
+
+
+export class FieldUploadFile extends React.Component {
+
+    state = {
+        // 传入的参数
+        maxCount: 1,
+        cropImage: false,
+        accept: ".jpg,.png",
+
+        // 内部参数
+        fileList: [],
+        value: null // 都好分隔的文件id
+    };
+
+    constructor(props) {
+        super(props);
+        ObjUtil.copyPropertyIfPresent(props, this.state)
+        this.state.fileList = this.convertInputToComponentValue(this.state.value);
+    }
+
+    convertInputToComponentValue(value) {
+        let list = [];
+        if (value && value.length > 0) {
+            const arr = value.split(",")
+            for (const id of arr) {
+                const url = SysUtil.wrapServerUrl('admin/sysFile/preview/' + id)
+                let file = {id, url, uid: id, name: id, status: 'done', fileName: id};
+                list.push(file);
+            }
+        }
+
+        return list
+    }
+
+    convertComponentValueToOutput(fileList) {
+        let fileIds = [];
+        for (const f of fileList) {
+            if (f.status === 'done') {
+                if(f.response) { // 新上传的
+                    const ajaxResult = f.response
+                    if (ajaxResult.success) {
+                        const {id, name} = ajaxResult.data
+                        f.id = id;
+                        fileIds.push(id);
+                    } else {
+                        Modal.error({title: '上传文件失败', content: ajaxResult.message})
+                    }
+                }else { // 老的
+                    fileIds.push(f.id)
+                }
+
+
+            }
+        }
+        return fileIds;
+    }
+
+
+    handleChange = ({fileList, event, file}) => {
+        console.log('检测到文件变化', fileList)
+        const rs = file.response;
+        if (rs != null && rs.success === false) {
+            Modal.error({
+                title: '上传失败',
+                content: rs.message,
+            });
+            return;
+        }
+
+
+        this.setState({fileList});
+
+
+        let newIds = this.convertComponentValueToOutput(fileList);
+        if (newIds.length > 0 && this.props.onFileChange) {
+            this.props.onFileChange(fileList)
+        }
+        if(this.props.onChange){
+            let value = newIds.join(',');
+            console.log('上传文件值', value )
+            this.props.onChange(value);
+        }
+
+    };
+
+
+    handlePreview = (file) => {
+        debugger
+        Modal.info({
+            title: '文件预览',
+            width: '80vw',
+            content: <ViewFile value={file.id} height='70vh'/>
+        })
+
+    };
+
+    render() {
+        if (this.state.cropImage) {
+            return <ImgCrop cropperProps={this.props.cropperProps} modalTitle={'裁剪图片'} fillColor={null}>
+                {this.getUpload()}
+            </ImgCrop>
+        }
+
+        return this.getUpload();
+    }
+
+    getUpload = () => {
+        const {accept, fileList, maxCount} = this.state;
+
+        return <Upload
+            action={SysUtil.wrapServerUrl('admin/sysFile/upload')}
+            listType={this.props.listType || 'picture-card'}
+            fileList={fileList}
+            onChange={this.handleChange}
+            headers={SysUtil.getHeaders()}
+            multiple={false}
+            accept={accept}
+            maxCount={maxCount}
+            onPreview={this.handlePreview}
+        >
+            {this.renderButton()}
+
+        </Upload>;
+    };
+
+    renderButton = () => {
+        const {fileList, maxCount} = this.state;
+        if (fileList.length >= maxCount) {
+            return
+        }
+
+        return <>
+            <UploadOutlined/>
+            <div className="ant-upload-text">选择文件</div>
+        </>;
+    };
+}

package/src/framework/components/field/upload/FieldUploadImage.d.ts

@@ -0,0 +1,7 @@
+// @ts-ignore
+import React from "react";
+import {FieldUploadFileProps} from "./FieldUploadFile";
+
+
+export class FieldUploadImage extends React.Component<FieldUploadFileProps, any> {
+}

package/src/framework/components/field/upload/FieldUploadImage.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {FieldUploadFile} from "./FieldUploadFile";
+
+
+/**
+ * crop: 带裁切
+ */
+
+export class FieldUploadImage extends React.Component {
+
+  render() {
+    return <FieldUploadFile {...this.props} accept={'image/*'} />
+  }
+}
+
+

package/src/framework/components/field/upload/index.jsx

@@ -0,0 +1,3 @@
+export * from './FieldUploadImage';
+export * from './FieldUploadFile'
+export * from './FieldUploadCropImage'

package/src/framework/components/index.js

@@ -0,0 +1,25 @@
+export * from './field'
+export * from './ProModal'
+export * from './Ellipsis'
+export * from './ButtonList'
+export * from './HasPerm'
+export * from './system'
+export * from './ImageView';
+
+
+export * from './PageLoading'
+export * from './OrgTree'
+export * from './ProTable'
+export * from './DownloadFileButton'
+
+export * from './NamedIcon'
+export * from './EditTable'
+export * from './view'
+export * from './LinkButton'
+export * from './Gap'
+export * from  './Panel'
+export * from './Page'
+export  * from './Echarts'
+export * from './MsgBox'
+export * from './ValueType'
+export * from './RoleTree'

package/src/framework/components/system.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import {FieldRemoteTreeSelect, FieldSelect} from './field';
+
+
+export function FieldUserSelect(props) {
+  return <FieldSelect url="admin/sysUser/options" {...props} />;
+}
+
+export function FieldUserMultipleSelect(props) {
+  return <FieldSelect multiple={true} 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 <FieldSelect multiple={true} url="/sysOrg/deptTree" {...props} />;
+}
+
+

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

@@ -0,0 +1,15 @@
+import React from 'react';
+
+
+export class ViewBoolean extends React.Component {
+
+
+    render() {
+        let {value} = this.props;
+        if(value == null){
+            return null;
+        }
+
+        return  value ? '是': '否'
+    }
+}

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import {Tag} from 'antd';
+
+
+export class ViewBooleanEnableDisable extends React.Component {
+
+
+    render() {
+        let {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 {StrUtil} from "../../utils";
+
+
+export class ViewEllipsis extends React.Component {
+
+    static defaultProps = {maxLength: 15}
+
+    render() {
+        let {maxLength, value} = this.props;
+
+        const short = StrUtil.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,50 @@
+import React from 'react';
+import {Carousel, Empty} from 'antd';
+import {SysUtil} from "../../system";
+
+
+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 => SysUtil.wrapServerUrl('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,61 @@
+import React from 'react';
+import {Modal} from 'antd';
+import {SysUtil} from "../../system";
+
+
+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(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;
+  }
+
+  preview = (url) => {
+    Modal.info({
+      title: '预览图片',
+      width: '70vw',
+      content: <div style={{maxHeight:'70vh',overflow:'auto'}}>
+        <img src={url}  style={{maxWidth: '100%'}}/>
+      </div>,
+
+    });
+  };
+
+}