@jiangood/springboot-admin-starter 0.0.1

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

@@ -0,0 +1,92 @@
+/**
+ * antd 自带的checkbox 未选择时不会返回false, 和form配合时还得设置 valuePropName
+ *
+ *
+ * 本组件改成布尔值的输入
+ *
+ * 选中 true， 反选 false
+ *
+ * 注意：null 会转为false
+ *
+ *
+ */
+import React from 'react';
+import {Checkbox, Radio} from 'antd';
+import {FieldProps} from "../FieldProps";
+
+
+export {FieldCheckboxBoolean as FieldBoolean};
+
+export class FieldCheckboxBoolean extends React.Component<FieldProps, any> {
+
+
+  render() {
+
+    let {value, mode} = this.props
+
+    const checked = this.parseBoolean(value);
+
+    if (mode == 'read') {
+      if (checked !== null) {
+        return checked ? "是" : "否"
+      }
+    }
+
+
+    return (
+      <Checkbox
+        checked={checked}
+        onChange={(e) => {
+          if (this.props.onChange) {
+            this.props.onChange(!!e.target.checked);
+          }
+        }}
+      />
+    );
+  }
+
+  parseBoolean(v: any) {
+    if (v === null) {
+      return undefined;
+    }
+
+    if (typeof v === 'boolean') {
+      return v;
+    }
+    return v === 1 || v === 'true' || v === 'Y';
+
+  }
+}
+
+
+export class FieldRadioBoolean extends React.Component {
+  render() {
+    let {mode, value, onChange} = this.props;
+
+    if(value != null){
+      // 转换一下，以免一些字符串格式出现
+      if(value === 'true'){
+        value = true
+      }else if(value === 'false'){
+        value = false
+      }
+    }
+
+
+    if (mode === 'read') {
+      if (value == null) {
+        return
+      }
+
+      return value ? '是' : '否'
+    }
+
+    return (
+        <Radio.Group value={value} onChange={onChange}>
+          <Radio value={true}>是</Radio>
+          <Radio value={false}>否</Radio>
+          <Radio value={null}>未知</Radio>
+        </Radio.Group>
+    );
+  }
+}

package/src/framework/components/field/FieldEditTable/index.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import {ColumnsType} from "antd/es/table";
+
+declare type FieldEditTableProps = {
+    columns:  ColumnsType,
+    value?: any[]
+    onChange?: (list:any[])=>{}
+};
+
+export class FieldEditTable extends React.Component<FieldEditTableProps, any> {
+
+
+}

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

@@ -0,0 +1,103 @@
+import {Button, Input, Table} from 'antd'
+import React from 'react'
+import {DeleteOutlined, PlusOutlined} from "@ant-design/icons";
+import './index.less'
+import {ArrUtil} from "../../../utils";
+
+export class FieldEditTable extends React.Component {
+
+
+    columns = []
+
+
+    constructor(props) {
+        super(props);
+
+        this.columns = this.props.columns.map(col => {
+            if (col.render == null) {
+                col.render = (v, record,index) => {
+                    return  <Input value={v} onChange={(e)=>this.onCellChange(index,col.dataIndex,e)}/>
+                }
+            }else {
+                if(!col._oldRender){
+                    col._oldRender = col.render
+                    col.render = (v, record,index) => {
+                        const cmp =col._oldRender()
+                        return React.createElement(cmp.type,{...cmp.props, value:v, onChange: (e)=>this.onCellChange(index, col.dataIndex, e)})
+                    }
+                }
+            }
+            return col
+        })
+
+        this.columns.push({
+            title: '/',
+            render:(v, record) =>{
+                return <Button icon={<DeleteOutlined/>} size='small' shape={'circle'}
+                               onClick={() => this.remove(record)}></Button>
+            }
+        })
+
+        if (this.props.value != null) {
+            this.state.dataSource = this.props.value
+        }
+
+    }
+
+    state = {
+        dataSource: []
+    }
+
+
+    onCellChange=(index,dataIndex,e)=>{
+        let {dataSource} = this.state
+        let row =dataSource[index]
+
+        let v = e;
+        if(e.hasOwnProperty('target')){
+            v = e.target.value;
+        }
+
+
+        row[dataIndex] = v
+
+        dataSource = [...dataSource]
+        this.setState({dataSource},this.notifyParent)
+    }
+
+    add = () => {
+        let {dataSource} = this.state
+        dataSource = [...dataSource, {}];
+        this.setState({dataSource},this.notifyParent)
+    };
+    remove = (record) => {
+        let {dataSource} = this.state
+        ArrUtil.remove(dataSource, record)
+        this.setState({dataSource:[...dataSource]},this.notifyParent)
+    };
+
+    notifyParent(){
+        let {dataSource} = this.state
+        this.props.onChange(dataSource)
+    }
+
+    render() {
+        return <div className='edit-table'>
+
+            <Table columns={this.columns}
+                   dataSource={this.state.dataSource}
+                   size='small'
+
+                   footer={() => <Button type='dashed' icon={<PlusOutlined/>}
+                                         onClick={this.add}>增加一行
+                   </Button>}
+
+                   pagination={false}
+            >
+
+            </Table>
+
+
+        </div>
+    }
+}

package/src/framework/components/field/FieldEditTable/index.less

@@ -0,0 +1,29 @@
+.edit-table {
+  table{
+    width: 100%;
+    border-spacing: 0;
+
+    th {
+      background-color: rgb(250, 250, 250);
+      padding: 16px;
+      color: rgba(0, 0, 0, 0.88);
+    }
+
+
+
+    th:last-child, td:last-child {
+      text-align: center;
+      width: 50px;
+    }
+
+    td {
+      padding: 2px;
+    }
+  }
+
+
+.add-btn-wrapper{
+  margin: 8px;
+}
+
+}

package/src/framework/components/field/FieldEditor.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import {Editor as TinyMceEditor} from '@tinymce/tinymce-react';
+import {SysUtil} from "../../system";
+import {UrlUtil} from "../../utils";
+
+
+/**
+ * 富文本编辑器
+ */
+
+export class FieldEditor extends React.Component {
+
+  render() {
+    let serverUrl = SysUtil.getServerUrl();
+    let uploadUrl = UrlUtil.join(serverUrl , 'sysFile/upload')
+
+    return <>
+      <TinyMceEditor
+        initialValue={this.props.value}
+        tinymceScriptSrc={UrlUtil.join(serverUrl , "tinymce/tinymce.min.js")}
+        init={{
+          min_height: 500,
+          language: 'zh_CN',
+          plugins: [
+            'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
+            'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
+            'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'
+          ],
+            toolbar_mode:'Sliding',
+        toolbar: "fontsize  blocks  bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify |image link | bullist numlist outdent indent | removeformat  |fontfamily| undo redo | help",
+          content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
+
+          // 上传图片
+          images_upload_url: uploadUrl,
+          images_upload_base_path: serverUrl,
+            promotion: false, // 不显示升级按钮（右上角）
+            cache_suffix: '?v=v7.7'
+
+        }}
+        onChange={e => {
+          if (this.props.onChange) {
+            this.props.onChange(e.target.getContent())
+          }
+        }}
+      />
+    </>;
+  }
+}

package/src/framework/components/field/FieldFileBase64/index.d.ts

@@ -0,0 +1,15 @@
+// @ts-ignore
+import React from "react";
+
+declare type FieldFileBase64Props = {
+    value?: any,
+    onChange?: (v: any) => {},
+
+    /**
+     * 按钮文字
+     */
+    buttonText?: string
+};
+
+export class FieldFileBase64 extends React.Component<FieldFileBase64Props, any> {
+}

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

@@ -0,0 +1,23 @@
+import React from "react";
+import {Input} from "antd";
+import {FieldUploadFile} from "../upload";
+
+
+export  class FieldFileBase64 extends React.Component {
+
+    render() {
+        let url = '/utils/fileBase64';
+        console.log('上传地址')
+        return <>
+            <Input.TextArea rows={3} value={this.props.value}></Input.TextArea>
+            <FieldUploadFile url={url} onChange={this.onFinish}></FieldUploadFile>
+        </>
+    }
+
+    onFinish = value => {
+        if(this.props.onChange){
+            this.props.onChange(value)
+        }
+    }
+
+}

package/src/framework/components/field/FieldImageBase64/index.d.ts

@@ -0,0 +1,15 @@
+// @ts-ignore
+import React from "react";
+
+declare type FieldImageBase64Props = {
+    value?: any,
+    onChange?: (v: any) => {},
+
+    /**
+     * 按钮文字
+     */
+    buttonText?: string
+};
+
+export class FieldImageBase64 extends React.Component<FieldImageBase64Props, any> {
+}

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

@@ -0,0 +1,22 @@
+import React from "react";
+import {Input} from "antd";
+import {FieldUploadFile} from "../upload";
+
+
+export  class FieldImageBase64 extends React.Component {
+
+    render() {
+        let url = '/utils/fileBase64';
+        return <>
+            <Input.TextArea rows={3} value={this.props.value}></Input.TextArea>
+            <FieldUploadFile url={url} onChange={this.onFinish}></FieldUploadFile>
+        </>
+    }
+
+    onFinish = value => {
+        if(this.props.onChange){
+            this.props.onChange(value)
+        }
+    }
+
+}

package/src/framework/components/field/FieldInput.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import {Input} from 'antd';
+
+
+export class FieldInput extends React.Component {
+    render() {
+        if(this.props.mode === 'read'){
+            return this.props.value
+        }
+
+        return  <Input value={this.props.value} onChange={this.props.onChange} />
+    }
+}

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

@@ -0,0 +1,45 @@
+/**
+ * 组织机构树
+ */
+import React from "react";
+import {FieldProps} from "../FieldProps";
+import {Tree} from "antd";
+import {LoadingOutlined} from "@ant-design/icons";
+
+interface Props extends FieldProps {
+}
+
+
+export default class extends React.Component<Props, any> {
+
+  state = {
+    treeData: null
+  }
+
+
+  componentDidMount() {
+    const params: any = {
+    };
+
+    HttpUtil.get("admin/admin/sysOrg/unitTree", params).then(rs => {
+      this.setState({treeData: rs})
+    })
+  }
+
+  render() {
+    if (this.state.treeData == null) {
+      return <LoadingOutlined/>
+    }
+
+    return <Tree.DirectoryTree defaultSelectedKeys={[this.props.value]}
+                               expandAction={false}
+                               treeData={this.state.treeData}
+                               defaultExpandAll
+                               onSelect={this.onSelect}/>;
+  }
+
+  onSelect = (keys: any[]) => {
+    this.props.onChange(keys[0])
+  }
+
+}

package/src/framework/components/field/FieldPassword.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+import {Input} from "antd";
+
+export  class FieldPassword extends React.Component {
+
+
+    render() {
+        return <Input.Password {...this.props}/>
+    }
+
+}

package/src/framework/components/field/FieldProps.ts

@@ -0,0 +1,19 @@
+export interface FieldProps {
+
+
+  /**
+   * @description  form表单，read查看， 不填表示表单
+   */
+  mode?:   'form' | 'read'  ;
+
+  /**
+   * @description 值
+   */
+  value?: any;
+
+
+  /**
+   * @description 函数回调，当值变化时
+   */
+  onChange?: (value: any) => void;
+}

package/src/framework/components/field/FieldRemoteTreeCascader.jsx

@@ -0,0 +1,75 @@
+import {Cascader, message, Spin} from 'antd';
+
+import React from 'react';
+import {HttpUtil} from "../../system";
+import {TreeUtil} from "../../utils";
+
+
+/**
+ * props : url
+ */
+export class FieldRemoteTreeCascader extends React.Component {
+  state = {
+    data: [],
+    value: [],
+    fetching: false,
+    key: this.props.id,
+  };
+
+  componentDidMount() {
+    this.fetchData();
+  }
+
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    this.setState({ url: this.props.url }, () => {
+      this.fetchData();
+    });
+  }
+
+
+
+  fetchData = () => {
+    const { url } = this.props;
+    this.setState({ fetching: true });
+
+    HttpUtil.get(url).then(list => {
+
+      if (!(list instanceof Array)) {
+        message.error('返回结果应该为数组');
+        this.setState({ fetching: false });
+        return;
+      }
+
+      this.setState({ data: list, fetching: false });
+    });
+  };
+
+  handleChange = (arr) => {
+    if (this.props.onChange) {
+      this.props.onChange(arr[arr.length - 1]);
+    }
+  };
+
+  render() {
+    const { data, map, fetching } = this.state;
+    if (fetching) {
+      return <Spin />;
+    }
+    let { value, ...restProps } = this.props;
+
+    let arr = [];
+    if (value != null) {
+      arr = TreeUtil.getKeyList(data, value);
+    }
+
+    return (
+      <Cascader
+        options={data}
+        onChange={this.handleChange}
+        value={arr}
+        fieldNames={{ label: 'title', value: 'key' }}
+        {...restProps}
+      />
+    );
+  }
+}

package/src/framework/components/field/FieldRemoteTreeCheckable.jsx

@@ -0,0 +1,81 @@
+import {Spin, TreeSelect} from 'antd';
+
+import React from 'react';
+import {HttpUtil} from "../../system";
+import {TreeUtil} from "../../utils";
+
+
+/**
+ * 带checkbox的tree select
+ * props : url
+ */
+export class FieldRemoteTreeCheckable extends React.Component {
+
+
+
+  state = {
+    data: [],
+    fetching: false,
+  };
+
+
+  componentDidMount() {
+    const {url} = this.props;
+    this.fetchData(url);
+  }
+
+
+  fetchData = (url) => {
+    this.setState({fetching: true});
+
+    HttpUtil.get(url).then((rs) => {
+      this.setState({data: rs, fetching: false});
+    });
+  };
+
+  handleChange = (value) => {
+    if (this.props.onChange) {
+      this.props.onChange(value);
+    }
+  };
+
+  render() {
+    const {data} = this.state;
+    let {value, mode, onChange, url, ...restProps} = this.props;
+
+    if (this.state.fetching) {
+      return <Spin/>;
+    }
+
+    if (mode === 'read') {
+      return this.renderRead();
+    }
+
+    return (
+      <TreeSelect
+        {...restProps}
+        style={{width: '100%'}}
+        allowClear={true}
+        dropdownStyle={{maxHeight: 400, overflow: 'auto'}}
+        treeData={data}
+        showCheckedStrategy={TreeSelect.SHOW_ALL}
+        treeDefaultExpandAll={false}
+        onChange={this.handleChange}
+        multiple
+        value={value || []}
+        treeCheckable
+        treeLine
+      />
+    );
+  }
+
+  renderRead() {
+    const {value} = this.props;
+    if (value == null) {
+      return '-';
+    }
+    const {data} = this.state;
+    const itemList = TreeUtil.findByKeyList(data, value);
+    return itemList.map((item) => item.title || item.label).join(',');
+  }
+}