@bchr/bchr-front-lib 0.5.9 → 0.5.10

package/src/base/layout/FormRefInput.js

@@ -0,0 +1,144 @@
+import React, {Fragment} from "react";
+import InputRefAddonBtn from "./InputRefAddonBtn";
+import {Form, Input} from "antd";
+import {Values} from "../utils";
+import Strings from "../utils/Strings";
+import lodash from "lodash";
+
+class FormRefInput extends React.Component {
+    constructor(props) {
+        super(props);
+        this.modalRef = React.createRef();
+    }
+
+    buildHiddenFieldNames = (field) => {
+        if (Values.isBlankString(field)) {
+            throw new Error("参照输入控件缺少【field】关键属性");
+        }
+
+        if (field.endsWith("_ext_name")) {
+            let index = field.indexOf("_ext_name");
+            let fieldPrefix = field.substring(0, index)
+            return [fieldPrefix + "_pk", fieldPrefix + "_ext_code"];
+        }
+        else if (field.endsWith("_name")) {
+            let index = field.indexOf("_name");
+            let fieldPrefix = field.substring(0, index)
+            return [fieldPrefix + "_pk", fieldPrefix + "_code"];
+        }
+        else if (field.endsWith("_ext_names")) {
+            let index = field.indexOf("_ext_names");
+            let fieldPrefix = field.substring(0, index)
+            return [fieldPrefix + "_pks", fieldPrefix + "_codes"];
+        }
+        else {
+            throw new Error("参照输入控件缺少【field】关键属性的名称需要以【_ext_name】结尾");
+        }
+    }
+
+    onOk = (selectedData) => {
+        const {multiple, field, formRef, okCallback} = this.props;
+
+        if (formRef && formRef.current) {
+            let [field_pk, field_code] = this.buildHiddenFieldNames(field);
+            const {setFieldsValue, resetFields} = formRef.current;
+
+            resetFields([field]);
+
+            if (!multiple) {
+                setFieldsValue(field, selectedData[0].name);
+                setFieldsValue(field_pk, selectedData[0].pk);
+                setFieldsValue(field_code, selectedData[0].code);
+            } else {
+                let fieldNameData = [];
+                let fieldPkData = [];
+                let fieldCodeData = [];
+
+                selectedData.forEach(item => {
+                    fieldNameData.push(item.name);
+                    fieldPkData.push(item.pk);
+                    fieldCodeData.push(item.code);
+                })
+
+                setFieldsValue(field_pk, fieldPkData.join(','));
+                setFieldsValue(field_code, fieldCodeData.join(','));
+                setFieldsValue(field, fieldNameData.join(','));
+            }
+        }
+
+        if (okCallback && typeof okCallback === 'function') {
+            if (!multiple) {
+                okCallback(selectedData[0]);
+            } else {
+                okCallback(selectedData);
+            }
+        }
+    }
+
+    onClear = () => {
+        const {field, formRef, clearCallback} = this.props;
+        const {setFieldsValue} = formRef.current;
+        let [field_pk, field_code] = this.buildHiddenFieldNames(field);
+
+        setFieldsValue(field_pk, null);
+        setFieldsValue(field_code, null);
+        setFieldsValue(field, null);
+
+        if (clearCallback && typeof clearCallback === 'function') {
+            clearCallback(null);
+        }
+    }
+
+    render() {
+        let inputProps = {...this.props};
+        let {
+            disabled, refCode, refDialogWidth,refDialogClassName,
+            refDialogHeight, field, multiple,
+            isNotData, customGridData, customRefUIConfig,
+            onBeforeClick
+        } = inputProps;
+
+        delete inputProps.addonAfter;
+        delete inputProps.refCode;
+        delete inputProps.refDialogWidth;
+        delete inputProps.refDialogHeight;
+        delete inputProps.refDialogClassName;
+        delete inputProps.formRef;
+        delete inputProps.multiple;
+        delete inputProps.okCallback;
+        delete inputProps.isNotData;
+        delete inputProps.customGridData;
+        delete inputProps.customRefUIConfig;
+        delete inputProps.onBeforeClick;
+
+        if (lodash.isPlainObject(refCode) && Strings.isNotBlankString(refCode.dictCode)) {
+            refCode = refCode.dictCode
+        }
+
+        let [field_pk, field_code] = this.buildHiddenFieldNames(field);
+
+        return <Fragment>
+            {field_pk   && <input type={"hidden"} name={field_pk}></input>}
+            {field_code && <input type={"hidden"} name={field_code}></input>}
+            <Form.Item {...inputProps} className={`form-ref-input ${inputProps.className || ''}`}>
+                <Input readOnly={true}
+                       allowClear={true}
+                       onChange={this.onClear}
+                       addonAfter={!disabled && <InputRefAddonBtn ref={this.modalRef}
+                                                                  isNotData={isNotData}
+                                                                  customGridData={customGridData}
+                                                                  customRefUIConfig={customRefUIConfig}
+                                                                  refCode={refCode}
+                                                                  multiple={multiple}
+                                                                  onOk={this.onOk}
+                                                                  onBeforeClick={onBeforeClick}
+                                                                  refDialogClassName={refDialogClassName}
+                                                                  refDialogWidth={refDialogWidth}
+                                                                  refDialogHeight={refDialogHeight}/>}/>
+            </Form.Item>
+        </Fragment>
+    }
+
+}
+
+export default FormRefInput;

package/src/base/layout/GridSelectModal.js

@@ -0,0 +1,329 @@
+import React from "react";
+import {Checkbox, Empty, Modal, Radio, Spin} from "antd";
+import {Grid, GridColumn} from "@progress/kendo-react-grid";
+import lodash from "lodash";
+import {process} from "@progress/kendo-data-query";
+import {KendoGridFilterCellRender, KendoGridRowNumberCellRender} from "./KendoGridCellRenders";
+import Values from "../utils/Values";
+import {buildQueryParameters} from "../utils/TableDataProcessors";
+import {loadingTips} from "../BaseAppUtils";
+import http from "../../services/http";
+
+class GridSelectModal extends React.Component {
+    constructor(props) {
+        super(props);
+        let {refUIConfig, refCode} = props;
+        this.state = {
+            visible: false,
+            loading: true,
+            gridColumns: refUIConfig?.gridColumns,
+            gridData: [],
+            total: 0,
+            gridSelectedData: [],
+            checkedAll: false,
+            checkedIndeterminate: false,
+            gridOperator: {
+                skip: 0,
+                take: 20
+            }
+        }
+        this.showModal    = this.showModal.bind(this);
+        this.hideModal    = this.hideModal.bind(this);
+        this.queryRefData = this.queryRefData.bind(this);
+    }
+
+    componentDidMount() {
+        this.queryRefData();
+    }
+
+    async queryRefData() {
+        try {
+            let {refCode, isNotData, customGridData, refUIConfig} = this.props;
+            let {gridOperator} = this.state;
+
+            if (isNotData) {
+                this.setState({
+                    gridData: customGridData || []
+                })
+            } else {
+                let pageQueryParameters = buildQueryParameters(gridOperator);
+
+                let result = await http.postJSON('queryRefData?ref_code=' + refCode, pageQueryParameters);
+
+                let gridData;
+                let total;
+                if (refUIConfig.pageable) {
+                    gridData = result.data || [];
+                    total    = result.total || 0;
+                } else {
+                    gridData = result || [];
+                    total    = result.length;
+                }
+
+                this.setState({
+                    gridData,
+                    total
+                })
+            }
+        } catch (e) {
+            this.dealAjaxException(e);
+        } finally {
+            this.setState({
+                loading: false
+            })
+        }
+    }
+
+    showModal() {
+        this.setState({
+            visible: true
+        })
+    }
+
+    hideModal() {
+        this.setState({
+            visible: false
+        })
+    }
+
+    onGridSelectModalOk = () => {
+        let {onOk} = this.props;
+        let {gridSelectedData} = this.state;
+        if (onOk && typeof onOk === 'function') {
+            onOk(gridSelectedData)
+        }
+    }
+
+    onDataStateChange(e) {
+        let {refUIConfig} = this.props;
+        let {gridData, total, loading} = this.state;
+
+        let pageable = refUIConfig?.pageable;
+        if (pageable) {
+            gridData = [];
+            total    = 0;
+            loading  = true;
+        }
+
+        this.setState({
+            gridData,
+            total,
+            loading,
+            gridOperator: e.dataState,
+        }, () => {
+            if (refUIConfig.pageable) {
+                this.queryRefData();
+            }
+        });
+    }
+
+    onGridHeaderSelectionChange = (e) => {
+        let {checkedAll, gridSelectedData} = this.state;
+        const checked = !!e.target.checked;
+        let gridData = this.state.gridData;
+
+        if (gridData && gridData.length > 0) {
+            gridData.forEach(dataItem => dataItem.selected = checked);
+            gridSelectedData = [...gridData.filter(dataItem => dataItem.selected)];
+            checkedAll = gridData.length === gridSelectedData.length;
+        } else {
+            checkedAll = true;
+        }
+
+        this.setState({
+            gridData,
+            gridSelectedData,
+            checkedAll,
+            checkedIndeterminate: false,
+        })
+    }
+
+    onGridRowSelectionChange = (e) => {
+        let {checkedAll, checkedIndeterminate, gridSelectedData} = this.state;
+        let selectedRowData = e.dataItem;
+        selectedRowData.selected = !selectedRowData.selected;
+        let gridData = this.state.gridData;
+
+        if (gridData && gridData.length > 0) {
+            gridData.forEach(dataItem => {
+                if (dataItem.pk === selectedRowData.pk) {
+                    dataItem.selected = selectedRowData.selected;
+                }
+            });
+            gridSelectedData = [...gridData.filter(dataItem => dataItem.selected)];
+            checkedAll = gridData.length === gridSelectedData.length;
+            checkedIndeterminate = gridSelectedData.length && gridData.length !== gridSelectedData.length;
+        } else {
+            checkedAll = false;
+            checkedIndeterminate = false;
+        }
+
+        this.setState({
+            gridData,
+            gridSelectedData,
+            checkedAll,
+            checkedIndeterminate,
+        })
+    }
+
+    onRadioGridRowSelectionChange(state, e) {
+        let event = null;
+        let gridSelectedData = [];
+        if (lodash.isObject(state)) {
+            event = state;
+        } else {
+            event = e;
+        }
+
+        let selectedRowData = event.dataItem;
+        selectedRowData.selected = !selectedRowData.selected;
+        let gridData = this.state.gridData;
+
+        if (gridData && gridData.length > 0) {
+            gridData.forEach(dataItem => {
+                dataItem.selected = dataItem.pk === selectedRowData.pk;
+            })
+            gridSelectedData = [...gridData.filter(dataItem => dataItem.selected)];
+        }
+
+        this.setState({
+            gridData,
+            gridSelectedData
+        }, () => {
+            if (state && !lodash.isObject(state)) {
+                let {onOk} = this.props;
+                if (onOk && typeof onOk === 'function') {
+                    onOk(gridSelectedData)
+                }
+            }
+        })
+    }
+
+    buildGridColumns = (gridColumns) => {
+        if (!gridColumns || !gridColumns.length) {
+            return <Empty image={<span className="iconfont icon-personal-empty"/>} description={"暂无数据"}/>
+        }
+        return gridColumns.map(column => {
+            if (column.show) {
+                return <GridColumn key={`grid_select_modal_column_${column.code}`}
+                                   className={'text-center'}
+                                   headerClassName={'text-center'}
+                                   width={column.width}
+                                   title={column.name}
+                                   field={column.code}/>
+            }
+            return null;
+        })
+    }
+
+    render() {
+        let {
+            refUIConfig,
+            className,
+            multiple,
+            title,
+            children,
+            visible,
+            onCancel
+        } = this.props;
+
+        let {
+            loading,
+            checkedAll,
+            checkedIndeterminate,
+            gridData,
+            total,
+            gridOperator,
+            gridColumns
+        } = this.state;
+
+        let modalTitle = refUIConfig?.refTitle;
+        if (Values.isNotBlankString(title)) {
+            modalTitle = title;
+        }
+        if (Values.isBlankString(modalTitle)) {
+            modalTitle = "请选择";
+        }
+
+        let pageable = refUIConfig?.pageable;
+        if (pageable) {
+            pageable = {pageSizes: [20, 50, 100, 200], type: 'numeric'};
+        }
+
+        let {width= 600, height=300} = this.props;
+
+
+        return <Modal className={`grid-select-modal ${className || ''}`}
+                      title={modalTitle}
+                      visible={visible}
+                      width={width}
+                      height={height+102}
+                      style={{minHeight: `${height+102}px`}}
+                      onOk={this.onGridSelectModalOk}
+                      onCancel={onCancel}>
+            <div className="grid-select-content" style={{height: `${height}px`}}>
+                <Spin spinning={loading} tip={loadingTips.loading}>
+                    <Grid data={pageable ? gridData : process(gridData, {filter: gridOperator.filter})}
+                          {...(pageable ? gridOperator : {filter: gridOperator.filter})}
+                          filterable={true}
+                          pageable={pageable}
+                          sortable={true}
+                          resizable={true}
+                          reorderable={false}
+                          total={total}
+                          selectable={{mode: "single"}}
+                          selectedField="selected"
+                          onDataStateChange={this.onDataStateChange.bind(this)}
+                          onRowClick={this.onRadioGridRowSelectionChange.bind(this)}
+                          onRowDoubleClick={this.onRadioGridRowSelectionChange.bind(this, true)}>
+                        <GridColumn field="selected"
+                                    className={'text-center'}
+                                    title={"选择"}
+                                    width="60px"
+                                    headerClassName={"text-center"}
+                                    locked={true}
+                                    headerCell={props => {
+                                        if (multiple) {
+                                            return <Checkbox.Group>
+                                                <Checkbox defaultChecked={false}
+                                                          checked={checkedAll}
+                                                          indeterminate={checkedIndeterminate}
+                                                          onChange={this.onGridHeaderSelectionChange.bind(this)}/>
+                                            </Checkbox.Group>
+                                        }
+                                        return <span>选择</span>
+                                    }}
+                                    filterCell={KendoGridFilterCellRender}
+                                    cell={props => {
+                                        let {className, dataItem, style} = props;
+                                        return <td className={className} style={style}>
+                                            {!multiple && <Radio checked={dataItem.selected}
+                                                                 onChange={this.onRadioGridRowSelectionChange.bind(this, props)}/>}
+                                            {multiple && <Checkbox checked={dataItem.selected}
+                                                                   onChange={this.onGridRowSelectionChange.bind(this, props)}/>}
+                                        </td>
+                                    }}/>
+                        <GridColumn headerClassName={"text-center"}
+                                    title="序号"
+                                    editable={false}
+                                    filterable={false}
+                                    locked={true}
+                                    className={"text-center"}
+                                    width="60px"
+                                    cell={KendoGridRowNumberCellRender}/>
+                        {this.buildGridColumns(gridColumns)}
+                        <GridColumn headerClassName={"text-center"}
+                                    title=""
+                                    filterable={false}
+                                    editable={false}
+                                    className={"text-center"}
+                        />
+                    </Grid>
+                </Spin>
+            </div>
+            {children}
+        </Modal>
+    }
+}
+
+export default GridSelectModal;

package/src/base/layout/InputRefAddonBtn.js

@@ -0,0 +1,120 @@
+import React, {Fragment} from "react";
+import lodash from "lodash";
+import http from "../../services/http";
+import GridSelectModal from "./GridSelectModal";
+import {message} from "antd";
+import uuid from "react-uuid";
+
+class InputRefAddonBtn extends  React.Component {
+    constructor(props) {
+        super(props);
+        let {refCode, isNotData} = props;
+        if (!isNotData && (refCode === null || refCode === void 0)) {
+            throw new Error("Not provide refCode prop.");
+        }
+
+        this.state = {
+            refUIConfig: null,
+            showGridSelectModal: false
+        }
+    }
+
+    showRefDialog = async () => {
+        let {
+            refCode, isNotData, customRefUIConfig,
+            onBeforeClick
+        } = this.props;
+
+        if (lodash.isFunction(onBeforeClick)) {
+            onBeforeClick(async (beforeCustomGridData) => {
+                try {
+                    let {refUIConfig} = this.state;
+                    if (refUIConfig == null) {
+                        if (isNotData) {
+                            refUIConfig = customRefUIConfig;
+                        } else {
+                            refUIConfig = await http.getJSON("queryRefUIConfig?ref_code=" + refCode);
+                        }
+                        if (refUIConfig == null) {
+                            throw new Error("参照[refCode=]" + refCode + "未定义.");
+                        }
+                    }
+
+                    let showGridSelectModal = true;
+                    this.setState({refUIConfig, showGridSelectModal, beforeCustomGridData});
+                }
+                catch (e) {
+                    http.dealAjaxException(e);
+                }
+            })
+        } else {
+            try {
+                let {refUIConfig} = this.state;
+                if (refUIConfig == null) {
+                    if (isNotData) {
+                        refUIConfig = customRefUIConfig;
+                    } else {
+                        refUIConfig = await http.getJSON("queryRefUIConfig?ref_code=" + refCode);
+                    }
+                    if (refUIConfig == null) {
+                        throw new Error("参照[refCode=]" + refCode + "未定义.");
+                    }
+                }
+
+                let showGridSelectModal = true;
+                this.setState({refUIConfig, showGridSelectModal});
+            }
+            catch (e) {
+                http.dealAjaxException(e);
+            }
+        }
+    }
+
+    onOkGridSelectModal = (selectedData) => {
+        if (!selectedData || !selectedData.length) {
+            let {refUIConfig} = this.state;
+            message.warning(`未选择${refUIConfig.refTitle || '参照'}`)
+            return false
+        }
+        let {rules, multiple} = this.props;
+        if (rules && rules.test(multiple ? selectedData : selectedData[0])) {
+            message.warning(`${rules.message}`)
+            return false
+        }
+        this.props.onOk(selectedData);
+        this.setState({showGridSelectModal: false});
+    }
+
+    closeGridSelectModal = () => {
+        this.setState({showGridSelectModal: false})
+    }
+
+    render() {
+        let {refCode, refDialogWidth, refDialogHeight,refDialogClassName, multiple, isNotData, customGridData, isNotIcon, icon, btnText} = this.props;
+        let {refUIConfig, beforeCustomGridData, showGridSelectModal} = this.state;
+
+        return <Fragment>
+            <div className="form-input-control" onClick={this.showRefDialog}>
+                {!isNotIcon && <span className="iconfont icon-personal-search"/>}
+                {btnText}
+            </div>
+            {showGridSelectModal && <GridSelectModal
+                key={`grid_select_modal_${uuid()}`}
+                multiple={multiple}
+                isNotData={isNotData}
+                customGridData={beforeCustomGridData || customGridData}
+                refUIConfig={refUIConfig}
+                refCode={refCode}
+                onOk={this.onOkGridSelectModal}
+                onCancel={this.closeGridSelectModal}
+                width={refDialogWidth}
+                className={refDialogClassName}
+                height={refDialogHeight}
+                visible={showGridSelectModal}/>}
+        </Fragment>
+    }
+
+}
+
+
+export default InputRefAddonBtn;