@jiangood/springboot-admin-starter 0.0.1

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

@@ -0,0 +1,100 @@
+import {message, TreeSelect} from 'antd';
+
+import React from 'react';
+import {HttpUtil} from "../../system";
+
+/**
+ * props : url
+ */
+
+export class FieldRemoteTreeMultipleSelect extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      url: props.url,
+      data: [],
+      value: [],
+      fetching: false,
+      key: this.props.id,
+    };
+  }
+
+  componentDidMount() {
+    this.loadData();
+  }
+
+
+
+  loadData = () => {
+    const {url} = this.state;
+
+    this.setState({fetching: true});
+    HttpUtil.get(url).then((rs) => {
+      if (rs == null || rs.success === false) {
+        message.error(rs?.message || '异常');
+        this.setState({fetching: false});
+        return;
+      }
+
+      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, ...restProps} = this.props;
+
+
+    if (mode === 'read') {
+      return this.renderRead();
+    }
+
+    return (
+      <TreeSelect
+        style={{width: '100%'}}
+        allowClear={true}
+        dropdownStyle={{maxHeight: 400, overflow: 'auto'}}
+        treeData={data}
+        showCheckedStrategy={TreeSelect.SHOW_ALL}
+        treeDefaultExpandAll={false}
+
+        multiple
+
+        showArrow={true}
+
+        value={value || undefined}
+        onChange={this.handleChange}
+
+        filterTreeNode={(inputValue, treeNode)=>{
+          const {title} = treeNode
+          return StrUtil.contains(title,inputValue)
+        }}
+
+        treeLine={{showLeafIcon:true}}
+        {...restProps}
+      />
+    );
+  }
+
+  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(',');
+  }
+}

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

@@ -0,0 +1,82 @@
+import {Spin, TreeSelect} from 'antd';
+
+import React from 'react';
+import {HttpUtil} from "../../system";
+import {TreeUtil} from "../../utils";
+
+export class FieldRemoteTreeSelect extends React.Component {
+  state = {
+    data: [],
+    value: [],
+    fetching: false,
+    key: this.props.id,
+  };
+
+  componentDidMount() {
+    this.fetchData();
+  }
+
+
+
+
+
+  fetchData = () => {
+    const { url } = this.props;
+    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 { props } = this;
+    let { mode, value } = props;
+    let { data } = this.state;
+
+    if (this.state.fetching) {
+      return <Spin />;
+    }
+
+    if (mode === 'read') {
+      if (value == null) {
+        return '';
+      }
+
+      const target = TreeUtil.findByKey(data, value);
+      if (target) {
+        return target.title;
+      }
+      return '';
+    }
+
+
+    return (
+      <TreeSelect
+        style={{ width: '100%', minWidth: 200 }}
+        allowClear={true}
+        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+        treeData={data}
+        showCheckedStrategy={TreeSelect.SHOW_ALL}
+        treeDefaultExpandAll={false}
+        onChange={this.handleChange}
+
+        filterTreeNode={(inputValue, treeNode)=>{
+          const {title} = treeNode
+          return str.contains(title,inputValue)
+        }}
+        treeLine={{showLeafIcon:true}}
+
+        {...this.props}
+        value={value || undefined}
+        showArrow={true}
+      />
+    );
+  }
+}

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

@@ -0,0 +1,85 @@
+import {ArrayLngLat, Map, Marker} from 'react-amap';
+import React from 'react';
+import {FieldProps} from "../FieldProps";
+
+interface MapProps extends FieldProps {
+
+  /**
+   * @description 经纬度 lng,lat。 默认北京116.405003,39.917742
+   */
+  value: string
+
+  /**
+   * @description 画布宽度
+   */
+  width?: number;
+
+  /**
+   * @description 画布高度
+   */
+  height?: number;
+
+}
+
+
+
+
+/**
+ * 设置高德地图key
+ * @param key
+ */
+export function configAMapKey(key: string) {
+  localStorage.setItem("amapKey", key)
+}
+
+function getAMapKey(): string {
+  return localStorage.getItem("amapKey") || ''
+}
+
+export class FieldSelectPosition extends React.Component<MapProps, any> {
+
+  static defaultProps = {
+    width: 600,
+    height: 400,
+    value: '116.405003,39.917742'
+  }
+
+
+  render() {
+    let {width, height, mode, value} = this.props
+    let disabled = mode == 'read'
+
+    if (!value) {
+      value = FieldSelectPosition.defaultProps.value
+    }
+
+    let [lng, lat] = value.split(',')
+    let position: ArrayLngLat = [parseFloat(lng), parseFloat(lat)];
+
+    return (
+      <div style={{width, height}}>
+        <Map
+          zoomEnable={!disabled}
+          center={position}
+          dragEnable={!disabled}
+          zoom={16}
+          amapkey={getAMapKey()}
+          events={{
+            click: (e:any) => {
+              if (disabled) {
+                return;
+              }
+              const {lnglat} = e;
+              const {lng, lat} = lnglat; // 经纬度
+              if (this.props.onChange) {
+                this.props.onChange(lng + ',' + lat);
+              }
+            },
+          }}
+        >
+          {value && <Marker position={position}/>}
+        </Map>
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,45 @@
+import {Tree} from 'antd';
+import React from 'react';
+import {HttpUtil} from "../../system";
+
+
+export  class FieldTree extends React.Component {
+
+
+  state = {
+    treeData:  null,
+    checked: [],
+    confirmLoading: false,
+  }
+  actionRef = React.createRef();
+
+  componentDidMount() {
+    const {url} = this.props;
+    HttpUtil.get(url).then(rs => {
+      this.setState({treeData: rs})
+    })
+
+  }
+
+
+  render() {
+    console.log('checked keys', this.props.value)
+    let {treeData} = this.state
+    return <>
+      <Tree
+        treeData={treeData}
+        multiple
+        checkable
+        checkStrictly={true}
+        checkedKeys={this.props.value}
+        onCheck={(keys)=>this.props.onChange(keys)}
+      >
+      </Tree>
+    </>
+  }
+
+
+}
+
+
+

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

@@ -0,0 +1,110 @@
+import {Checkbox, Radio, Select} from 'antd';
+import React from 'react';
+import {dictList, dictValue, dictValueTag} from "../../../system";
+
+export interface DictProps {
+  typeCode: string;
+  params?: string; // 同typeCode, pro-table用
+  mode?: string | 'read';
+  value?: any;
+  onChange?: (value: any) => void;
+  placeholder?: string;
+}
+
+/**
+ * 字典希腊选择组件
+ * @param props
+ * @returns {JSX.Element|string|*}
+ * @constructor
+ */
+export class DictSelect extends React.Component<DictProps> {
+
+  render() {
+    let {typeCode, params, mode, value, onChange, placeholder = '请选择', ...restProps} = this.props;
+
+    if (typeCode == null) {
+      typeCode = params;
+    }
+
+
+    if (mode === 'read') {
+      return dictValueTag(typeCode, value);
+    }
+
+    let list = dictList(typeCode) || [];
+
+    if(value != null){
+      value = String(value)
+    }
+
+    return (
+        <Select value={value} onChange={onChange} placeholder={placeholder} allowClear {...restProps} style={{minWidth:150}}>
+          {list.map((o: any) => (
+              <Select.Option value={o.code} key={o.code}>
+                {o.name}
+              </Select.Option>
+          ))}
+        </Select>
+    );
+  }
+}
+
+export function DictRadio(props: DictProps) {
+  let { typeCode, mode, value, params } = props;
+
+  if(typeCode == null){
+    typeCode = params;
+  }
+
+  if (mode === 'read') {
+    return dictValueTag(typeCode, value);
+  }
+
+  let list = dictList(typeCode);
+  return (
+    <Radio.Group value={String(value)} onChange={props.onChange}>
+      {list.map((o: any) => (
+        <Radio value={o.code} key={o.code}>
+          {o.name}
+        </Radio>
+      ))}
+    </Radio.Group>
+  );
+}
+
+// 多选框
+export function DictCheckbox(props: DictProps) {
+  const { typeCode, mode, value } = props;
+  if (mode === 'read') {
+    if (value && value.length) {
+      return value.map((v: any) => dictValueTag(typeCode, v));
+    }
+    return '-';
+  }
+
+  let list = dictList(typeCode);
+  return (
+    <Checkbox.Group value={value} onChange={props.onChange}>
+      {list.map((o: any) => (
+        <Checkbox value={o.code} key={o.code}>
+          {o.name}
+        </Checkbox>
+      ))}
+    </Checkbox.Group>
+  );
+}
+
+export function FieldDictValueTag(props: DictProps) {
+  const { typeCode, value } = props;
+  return dictValueTag(typeCode, value);
+}
+export function FieldDictValue(props: DictProps) {
+  const { typeCode, value } = props;
+  return dictValue(typeCode, value);
+}
+
+export {
+  DictRadio as FieldDictRadio,
+  DictSelect as FieldDictSelect,
+  DictCheckbox as FieldDictCheckbox,
+};

package/src/framework/components/field/flat-multiple-select/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+
+declare class FlatMultipleSelect extends React.Component<any, any> {}
+declare class FieldFlatMultipleSelect extends React.Component<any, any> {}

package/src/framework/components/field/flat-multiple-select/index.jsx

@@ -0,0 +1,116 @@
+/**
+ * 类似下拉选择的功能，不过是横向平铺
+ * 可以使用 url 或直接设置data
+ */
+import React from 'react';
+import {Button, message} from 'antd';
+
+import './index.less';
+import {HttpUtil} from "../../../system";
+
+/*
+interface FlatMultipleSelectProps {
+  url?: string,
+  data?: DATA[]
+  onChange: (value: any) => void;
+  disabled: boolean;
+  style: any
+}
+
+interface DATA {
+  label: string,
+  value: any
+}
+*/
+export { FlatMultipleSelect as FieldFlatMultipleSelect };
+
+export class FlatMultipleSelect extends React.Component {
+  state = {
+    data: [],
+    fetching: false,
+    searchText: null,
+    value: [],
+  };
+
+  constructor(props) {
+    super(props);
+    if (props.data != null) {
+      this.state.data = props.data;
+    }
+  }
+
+  componentDidMount() {
+    this.loadData();
+  }
+
+  loadData = (searchText = '') => {
+    const { url } = this.props;
+    if (url == null) {
+      return;
+    }
+
+    this.setState({ fetching: true });
+
+    HttpUtil.get(url, { searchText }).then(rs => {
+      this.setState({ fetching: false });
+
+      if (!(rs instanceof Array)) {
+        message.error('返回结果的data字段应该为数组');
+        return;
+      }
+
+      this.setState({ data: rs });
+    });
+  };
+  onBtnClick = (v) => {
+    let value = this.state.value;
+    if (v == null) {
+      // 所有
+      value = [];
+    } else {
+      const value = this.state.value;
+      const idx = value.indexOf(v);
+      const exist = idx != -1;
+      if (exist) {
+        value.splice(idx, 1);
+      } else {
+        value.push(v);
+      }
+    }
+
+    this.setState({ value: value });
+
+    if (this.props.onChange) {
+      this.props.onChange(value);
+    }
+  };
+
+  render() {
+    const value = this.state.value || [];
+    const data = this.state.data;
+    return (
+      <div className="flat-select">
+        <Button
+          type={'text'}
+          size={'small'}
+          className={value.length == 0 ? 'checked' : ''}
+          onClick={() => this.onBtnClick(null)}
+        >
+          所有
+        </Button>
+
+        {data.map((d) => (
+          <Button
+            key={d.value}
+            type={'text'}
+            size={'small'}
+            className={value.indexOf(d.value) != -1 ? 'checked' : ''}
+            onClick={() => this.onBtnClick(d.value)}
+          >
+            {d.label}
+          </Button>
+        ))}
+      </div>
+    );
+  }
+}

package/src/framework/components/field/flat-multiple-select/index.less

@@ -0,0 +1,12 @@
+.flat-select {
+  .checked {
+    color: #1961ac;
+    background: #e8e8e8;
+    border-color: transparent;
+    box-shadow: none;
+  }
+
+  .ant-btn {
+    margin-right: 4px;
+  }
+}

package/src/framework/components/field/flat-select/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+
+declare class FlatSelect extends React.Component<any, any> {}
+declare class FieldFlatSelect extends React.Component<any, any> {}

package/src/framework/components/field/flat-select/index.jsx

@@ -0,0 +1,107 @@
+/**
+ * 类似下拉选择的功能，不过是横向平铺
+ * 可以使用 url 或直接设置data
+ */
+import React from 'react';
+import {Button, message} from 'antd';
+
+import './index.less';
+
+/*
+interface FlatMultipleSelectProps {
+  url?: string,
+  data?: DATA[]
+  onChange?: (value: any) => void;
+  disabled?: boolean;
+  style?: any,
+  showAll?: boolean,
+
+  value?: any
+}
+
+interface DATA {
+  label: string,
+  value: any
+}
+
+ */
+export { FlatSelect as FieldFlatSelect };
+export class FlatSelect extends React.Component {
+  state = {
+    data: [],
+    fetching: false,
+    searchText: null,
+  };
+
+  constructor(props) {
+    super(props);
+    if (props.data != null) {
+      this.state.data = props.data;
+    }
+  }
+
+  componentDidMount() {
+    this.loadData();
+  }
+
+  loadData = (searchText = '') => {
+    const { url } = this.props;
+    if (url == null) {
+      return;
+    }
+
+    this.setState({ fetching: true });
+
+    HttpUtil.get(url, { searchText }).then(rs => {
+      this.setState({ fetching: false });
+
+
+      if (!(rs instanceof Array)) {
+        message.error('返回结果的data字段应该为数组');
+        return;
+      }
+
+      this.setState({ data: rs });
+    });
+  };
+  onBtnClick = (v) => {
+    this.setState({ value: v });
+
+    if (this.props.onChange) {
+      this.props.onChange(v);
+    }
+  };
+
+  render() {
+    const value = this.props.value;
+    const data = this.state.data;
+
+    const showAll = this.props.showAll == null ? true : this.props.showAll;
+    return (
+      <div className="flat-select">
+        {showAll && (
+          <Button
+            type={'text'}
+            size={'small'}
+            className={value == null ? 'checked' : ''}
+            onClick={() => this.onBtnClick(null)}
+          >
+            所有
+          </Button>
+        )}
+
+        {data.map((d) => (
+          <Button
+            key={d.value}
+            type={'text'}
+            size={'small'}
+            className={value == d.value ? 'checked' : ''}
+            onClick={() => this.onBtnClick(d.value)}
+          >
+            {d.label}
+          </Button>
+        ))}
+      </div>
+    );
+  }
+}

package/src/framework/components/field/flat-select/index.less

@@ -0,0 +1,12 @@
+.flat-select {
+  .checked {
+    color: #1961ac;
+    background: #e8e8e8;
+    border-color: transparent;
+    box-shadow: none;
+  }
+
+  .ant-btn {
+    margin-right: 4px;
+  }
+}