@bchr/bchr-front-lib 0.3.112 → 0.3.116

package/src/base/layout/ui_tpl/form/FormForModify.js

@@ -358,7 +358,7 @@ class FormForModify extends React.Component{
 
             switch (ui_render_type) {
                 case UI_RENDER_TYPE.INPUT:
-                    component = (b_disabled !== undefined ? b_disabled : b_readonly) ? (
+                    component = b_readonly ? (
                             <div>
                                 <span>{displayValue}</span>
                             </div>
@@ -376,7 +376,7 @@ class FormForModify extends React.Component{
                         );
                     break;
                 case UI_RENDER_TYPE.INPUT_NUMBER:
-                    component = (b_disabled !== undefined ? b_disabled : b_readonly) ? (
+                    component = b_readonly ? (
                             <div>
                                 <span>{displayValue}</span>
                             </div>
@@ -395,7 +395,7 @@ class FormForModify extends React.Component{
                         );
                     break;
                 case UI_RENDER_TYPE.INPUT_PASSWORD:
-                    component = (b_disabled !== undefined ? b_disabled : b_readonly) ? (
+                    component = b_readonly ? (
                             <div>
                                 <InputPassword ui_render_type={'browse'} initValue={displayValue}/>
                             </div>
@@ -413,7 +413,7 @@ class FormForModify extends React.Component{
                         );
                     break;
                 case UI_RENDER_TYPE.TEXT_AREA:
-                    component = (b_disabled !== undefined ? b_disabled : b_readonly) ? (
+                    component = b_readonly ? (
                             <div>
                                 <span>{displayValue}</span>
                             </div>
@@ -434,7 +434,7 @@ class FormForModify extends React.Component{
                     initialValue = (initialValue ? moment(initialValue) : "");
                     displayValue = (displayValue ? moment(displayValue).format("YYYY-MM-DD") : "");
 
-                    component = (b_disabled !== undefined ? b_disabled : b_readonly) ? (
+                    component = b_readonly ? (
                             <div>
                                 <span>{displayValue}</span>
                             </div>
@@ -455,7 +455,7 @@ class FormForModify extends React.Component{
                     initialValue = (initialValue ? moment(initialValue, 'YYYY') : "");
                     displayValue = (displayValue ? moment(displayValue, 'YYYY').format("YYYY") : "");
 
-                    component = (b_disabled !== undefined ? b_disabled : b_readonly) ? (
+                    component = b_readonly ? (
                             <div>
                                 <span>{displayValue}</span>
                             </div>
@@ -477,7 +477,7 @@ class FormForModify extends React.Component{
                     initialValue = (initialValue ? moment(initialValue, 'YYYYMM') : "");
                     displayValue = (displayValue ? moment(displayValue, 'YYYYMM').format("YYYY-MM") : "");
 
-                    component = (b_disabled !== undefined ? b_disabled : b_readonly) ? (
+                    component = b_readonly ? (
                             <div>
                                 <span>{displayValue}</span>
                             </div>
@@ -499,7 +499,7 @@ class FormForModify extends React.Component{
                     initialValue = (initialValue ? moment(initialValue) : "");
                     displayValue = (displayValue ? moment(displayValue).format("YYYY-MM-DD hh:mm:ss") : "");
 
-                    component = (b_disabled !== undefined ? b_disabled : b_readonly) ? (
+                    component = b_readonly ? (
                             <div>
                                 <span>{displayValue}</span>
                             </div>
@@ -533,7 +533,7 @@ class FormForModify extends React.Component{
                         }
                     }
 
-                    component = (b_disabled !== undefined ? b_disabled : b_readonly) ? (
+                    component = b_readonly ? (
                             <div>
                                 <span>{displayValue}</span>
                             </div>
@@ -568,7 +568,7 @@ class FormForModify extends React.Component{
                         initialValue = data[code] && data[code] > 0 ? data[code] + "" : null;
                     }
 
-                    component = (b_disabled !== undefined ? b_disabled : b_readonly) ? (
+                    component = b_readonly ? (
                             <div>
                                 <span>{displayValue}</span>
                             </div>
@@ -598,7 +598,7 @@ class FormForModify extends React.Component{
                     initialValue = displayValue;
                     code = display_code;
 
-                    component = (b_disabled !== undefined ? b_disabled : b_readonly) ? (
+                    component = b_readonly ? (
                             <div>
                                 <span>{displayValue}</span>
                             </div>
@@ -617,7 +617,7 @@ class FormForModify extends React.Component{
                         );
                     break;
                 case UI_RENDER_TYPE.UPLOAD:
-                    component = (b_disabled !== undefined ? b_disabled : b_readonly) ? (
+                    component = b_readonly ? (
                             <div>
                                 <span>{displayValue}</span>
                                 {
@@ -660,7 +660,7 @@ class FormForModify extends React.Component{
                         displayValue = (initialValue ? "是" : "否");
                     }
 
-                    component = (b_disabled !== undefined ? b_disabled : b_readonly) ? (
+                    component = b_readonly ? (
                             <div>
                                 <span>{displayValue}</span>
                             </div>
@@ -677,7 +677,7 @@ class FormForModify extends React.Component{
                         );
                     break;
                 default:
-                    component = (b_disabled !== undefined ? b_disabled : b_readonly) ? (
+                    component = b_readonly ? (
                             <div>
                                 <span>{displayValue}</span>
                             </div>
@@ -728,7 +728,7 @@ class FormForModify extends React.Component{
                     name={code}
                     initialValue={initialValue}
                     rules={[
-                        {required: (!dataItem.b_disabled && b_required), message: ("请填写" + name), whitespace: true, validator: this.validator.bind(this, (!dataItem.b_disabled && b_required), ui_render_type)},
+                        {required: (!dataItem.b_readonly && b_required), message: ("请填写" + name), whitespace: true, validator: this.validator.bind(this, (!dataItem.b_disabled && b_required), ui_render_type)},
                         {required: false, message: (name + "格式不正确"), whitespace: true, validator: this.formatValidator.bind(this), pattern: regexp_pattern}
                     ]}
                     hasFeedback={(!dataItem.b_disabled && b_required)}

package/src/base/widgets/stree/LeftOrgTreeRightPersonGridForSelectPsnModal.js

@@ -0,0 +1,487 @@
+import React from "react";
+import TreeView from "@progress/kendo-treeview-react-wrapper/dist/npm/treeview";
+import Radio, {Checkbox, Input, Modal} from "antd";
+import {Grid, GridColumn} from "@progress/kendo-react-grid";
+import {GridRowSequenceNumberCell, SmartMessage, HttpService, SModal} from "@bchr/bchr-front-lib";
+
+
+
+const Search = Input.Search;
+
+class LeftOrgTreeRightPersonGridForSelectPsnModal extends React.Component  {
+    constructor(props) {
+        super(props);
+
+        this.orgTreeRef = React.createRef();
+        const _this     = this;
+
+        this.state = {
+            selectedOrg: null,
+            gridOperator: {
+                skip: 0,
+                take: 20,
+            },
+            pagerData: {
+                data: [],
+                total: 0
+            },
+            personNameKeyWords: null,
+            isAllPsnSelected: false,
+            selectedPsnList: [],
+            isInitSelectedRootOrg: false,
+        }
+
+        this.dataSource = {
+            transport: {
+                read: {
+                    url: this.buildQueryOrgTreeNodeURL,
+                    dataType: "json",
+                    Type: "POST"
+                }
+            },
+            schema: {
+                model: {
+                    id: "pk",
+                    hasChildren: "b_has_child"
+                }
+            },
+            requestEnd: function (e) {
+                let currentState = _this.state;
+
+                if (currentState.isInitSelectedRootOrg) {
+                    return;
+                }
+
+                if (!e.response || e.response.length == 0) {
+                    return;
+                }
+
+                if (_this.props.isDefaultSelectedFirstOrg) {
+                    let expand_pk_path = e.response[0].pk_path.split("/");
+                    expand_pk_path     = expand_pk_path.slice(1, expand_pk_path.length - 1);
+
+                    expand_pk_path.unshift(0);
+
+                    let last_node_pk   = expand_pk_path[expand_pk_path.length - 1];
+
+                    const treeView = _this.orgTreeRef.current.widgetInstance;
+
+                    treeView.expandPath(expand_pk_path, function () {
+                        let nodeDataItem = treeView.dataSource.get(last_node_pk);
+
+                        if (nodeDataItem && nodeDataItem.uid) {
+
+                            let treeNodeEle = treeView.findByUid(nodeDataItem.uid);
+
+                            if (treeNodeEle && treeNodeEle.length > 0) {
+                                treeView.element.find(".searched").removeClass("searched");
+                                treeNodeEle.find(".k-in:first").addClass("searched");
+                            }
+
+                            _this.scrollTreeView(treeView, nodeDataItem);
+
+                            treeView.select(treeNodeEle);
+
+                            _this.onSelect(nodeDataItem);
+                        }
+
+                    });
+                }
+
+                _this.setState({
+                    ...currentState,
+                    isInitSelectedRootOrg:true
+                })
+            }
+        };
+
+        this.queryPsnList  = this.queryPsnList.bind(this);
+        this.onOk          = this.onOk.bind(this);
+    }
+
+    componentDidMount() {
+    }
+
+    getFunctionLetBasePath() {
+        if (!this.props.functionLetBasePath) {
+            throw new Error("请为组件注入属性【functionLetBasePath】");
+        }
+
+        return this.props.functionLetBasePath;
+    }
+
+    scrollTreeView (treeView, nodeDataItem) {
+        let treeNodeEle    = treeView.findByUid(nodeDataItem.uid);
+        let treeViewHeight = treeView.element.parent().height();
+        let treeViewTop    = treeView.element.offset().top;
+        let treeNodeTop    = treeNodeEle.offset().top;
+        let scrollTop      = treeView.element.parent().scrollTop();
+
+        scrollTop = treeNodeTop - treeViewTop - (treeViewHeight / 2);
+        treeView.element.parent().scrollTop(scrollTop);
+    }
+
+    /**
+     *  Lazy Loading URL
+     * @param e
+     * @returns {*}
+     */
+    buildQueryOrgTreeNodeURL = (e) => {
+        let parent_org_node_pk = 0;
+
+        if (this.orgTreeRef.current && this.orgTreeRef.current.widgetInstance) {
+            parent_org_node_pk = e.pk;
+        }
+
+        return this.http().getRequestPath(`queryOrgDataByCurrentUserAuthOfLazyLoad?&parent_org_pk=${parent_org_node_pk}&org_expanded_level=${this.props.org_expanded_level}&is_implicit_auth=${this.props.is_implicit_auth}`);
+    }
+
+    http() {
+       return new HttpService(this.props.appConfig.back_service_rpc_prefix + this.getFunctionLetBasePath(), this.props.appConfig);
+    }
+
+    /**
+     * 组织 Node Render
+     * @param props
+     * @returns {string}
+     */
+    treeNodeTemplate = props => {
+        if (props.item.org_type == 1) {
+            return `<div class="tree-node-box" key={props.item.pk}>
+                        <span class="iconfont icon-bchr-corporate-repor"></span><span>${props.item.name}</span>
+                    </div>`
+        } else if (props.item.org_type == 2) {
+            return `<div class="tree-node-box" key={props.item.pk}>
+                        <span class="iconfont icon-bchr-virtual-dept"></span><span>${props.item.name}</span>
+                    </div>`
+        } else if (props.item.org_type == 3) {
+            return `<div class="tree-node-box" key={props.item.pk}>
+                        <span class="iconfont icon-bchr-post-manage"></span><span>${props.item.name}</span>
+                    </div>`
+        } else {
+            return `<div class="tree-node-box" key={props.item.pk}>
+                        <span class="iconfont icon-bchr-person1"></span><span>${props.item.name}</span>
+                    </div>`
+        }
+    }
+
+    /**
+     * 人员搜索
+     */
+    onPersonSearch = (e) => {
+        let that = this;
+
+        Promise.all([
+            (function() {
+                let currentState       = that.state;
+                let personNameKeyWords = currentState.personNameKeyWords;
+
+                if (!e && e.trim() == personNameKeyWords) {
+                    return;
+                }
+
+                that.setState({
+                    ...currentState,
+                    personNameKeyWords: e? e.trim() : null
+                })
+            })()
+        ]).then(this.queryPsnList)
+    }
+
+    /**
+     * 选择组织 Node
+     * @param event
+     */
+    onSelect = (event) => {
+        let that = this;
+
+        if (!event) {
+            return;
+        }
+
+        Promise.all([
+            (function() {
+                let selectedOrgNode;
+
+                if (event.node) {
+                    selectedOrgNode = that.orgTreeRef.current.widgetInstance.dataItem(event.node);
+                } else {
+                    selectedOrgNode = event;
+                }
+
+                let currentState = that.state;
+
+                let gridOperator = {skip: 0, take: currentState.gridOperator.take};
+
+                that.setState({
+                    ...currentState,
+                    selectedOrg: selectedOrgNode,
+                    gridOperator,
+                    selectedPsnList: [],
+                    isAllPsnSelected: false
+                })
+            })()
+        ]).then(this.queryPsnList)
+    }
+
+    /**
+     * 查询人员数据
+     * @returns {Promise<void>}
+     */
+    async queryPsnList() {
+        try {
+            let that               = this;
+            let currentState       = that.state;
+            let selectedOrg        = currentState.selectedOrg;
+            let personNameKeyWords = currentState.personNameKeyWords;
+            let gridOperator       = currentState.gridOperator;
+            let isAllPsnSelected   = currentState.isAllPsnSelected;
+            let selectedPsnList    = currentState.selectedPsnList;
+
+            let newPagerData    = {data: [], total: 0};
+
+            if (selectedOrg && selectedOrg.pk) {
+                let queryOrgPkParems = {
+                    parent_org_pk: selectedOrg.pk,
+                    is_implicit_auth: that.props.is_implicit_auth
+                };
+
+                let queryPsnParams = {
+                    parent_org_pk: selectedOrg.pk,
+                    is_implicit_auth: that.props.is_implicit_auth,
+                    person_name_key_words: personNameKeyWords,
+                    page_index: gridOperator.skip/gridOperator.take + 1,
+                    page_size: gridOperator.take
+                }
+
+                newPagerData = await that.http().post("queryPersonListByOrgPksAndPersonName", queryPsnParams)
+            }
+
+            if (newPagerData && newPagerData.data && newPagerData.data.length > 0) {
+                if (isAllPsnSelected) {
+                    newPagerData.data.forEach(dataItem => {
+                        dataItem.selected = isAllPsnSelected;
+                    })
+                } else {
+                    if (selectedPsnList && selectedPsnList.length > 0) {
+                        for (let i in selectedPsnList) {
+                            let selectedPsnItem = selectedPsnList[i];
+
+                            for (let j in newPagerData.data) {
+                                let dataItem = newPagerData.data[j];
+
+                                if (dataItem.pk == selectedPsnItem.pk) {
+                                    dataItem.selected = true;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            this.setState({
+                ...currentState,
+                pagerData: {...newPagerData}
+            })
+        } catch (e) {
+            this.dealAjaxException(e)
+        }
+    }
+
+    /**
+     * 页码&页大小发生变化
+     * @param e
+     */
+    onDataStateChange(e) {
+        let that = this;
+
+        Promise.all([
+            (function() {
+                let currentState = that.state;
+
+                that.setState({
+                    ...currentState,
+                    gridOperator: {skip: e.data.skip, take: e.data.take}
+                })
+            })()
+        ]).then(this.queryPsnList)
+    }
+
+    /**
+     * Header Select
+     */
+    onGridHeaderSelectionChange = () => {
+        let currentState     = this.state;
+        let pagerData        = currentState.pagerData;
+        let isAllPsnSelected = !currentState.isAllPsnSelected;
+
+        if (pagerData.data && pagerData.data.length > 0) {
+            pagerData.data.forEach(dataItem => {
+                dataItem.selected = isAllPsnSelected;
+            })
+        }
+
+        this.setState({
+            ...currentState,
+            pagerData,
+            isAllPsnSelected,
+            selectedPsnList: []
+        })
+    }
+
+    /**
+     * Row Select
+     */
+    onGridRowSelectionChange = (e) => {
+        let selectedRowData = e.dataItem;
+
+        selectedRowData.selected = !selectedRowData.selected;
+
+        let currentState     = this.state;
+        let selectedPsnList  = [];
+        let psnList          = currentState.pagerData.data;
+        let isAllPsnSelected = true;
+
+        if (psnList && psnList.length > 0) {
+            psnList.forEach(dataItem => {
+                if (dataItem.selected) {
+                    selectedPsnList.push(dataItem);
+                }
+            })
+        }
+
+        if (selectedPsnList.length != currentState.pagerData.total) {
+            isAllPsnSelected = false;
+        }
+
+        this.setState({
+            ...currentState,
+            selectedPsnList,
+            isAllPsnSelected
+        })
+    }
+
+    selectPsnRadiosChange = (e) => {
+        let currentState = this.state;
+        let selectedPsnList = [];
+        let psnList = currentState.pagerData.data;
+
+        if (psnList && psnList.length > 0) {
+            psnList.forEach(dataItem => {
+                if (dataItem.pk == e.dataItem.pk) {
+                    dataItem['selected'] = true;
+                    selectedPsnList.push(dataItem)
+                } else {
+                    dataItem['selected'] = false;
+                }
+            });
+
+            this.setState({
+                ...currentState,
+                selectedPsnList
+            })
+        }
+    }
+
+    onOk() {
+        let {selectedPsnList} = this.state;
+
+        if (!selectedPsnList || selectedPsnList.length == 0) {
+            SmartMessage.info("请选择人员");
+
+            return;
+        } else {
+            this.props.onOk(selectedPsnList)
+        }
+    }
+
+    render() {
+        const treeViewMessages = {
+            retry: "重新加载",
+            requestFailed: "加载失败.",
+            loading: "正在加载中..."
+        };
+
+        return (
+            <SModal className={`left-org-tree-right-person-grid-modal ${this.props.className? this.props.className : ''}`}
+                   title="人员参照"
+                   visible={true}
+                   centered
+                   width={'1000px'}
+                   onCancel={this.props.onCancel}
+                   onOk={this.onOk}
+            >
+
+                <Search
+                    className={"person-search-box"}
+                    placeholder="人员搜索"
+                    onSearch={this.onPersonSearch}
+                />
+
+                <div className={"left-org-tree-right-person-grid-container"}>
+                    <div className={"left-org-tree-box"}>
+                        <TreeView dataSource={this.dataSource}
+                                  messages={treeViewMessages}
+                                  expandIcons={false}
+                                  dataTextField={"name"}
+                                  template={this.treeNodeTemplate}
+                                  ref={this.orgTreeRef}
+                                  select={this.onSelect}
+                        />
+                    </div>
+
+                    <div className={"right-psn-grid-box"}>
+                        <Grid
+                            data={this.state.pagerData.data}
+                            total={this.state.pagerData.total}
+                            {...this.state.gridOperator}
+                            pageable={{ pageSizes: [20, 50, 100, 200], type : 'numeric' }}
+                            pageSize={20}
+                            sortable={true}
+                            resizable={true}
+                            selectedField="selected"
+                            onDataStateChange={this.onDataStateChange.bind(this)}
+                            onSelectionChange={this.onGridRowSelectionChange}
+                            onHeaderSelectionChange={this.onGridHeaderSelectionChange}
+                        >
+                            {
+                                this.props.selectType && this.props.selectType ==='single' ? <GridColumn field="selected" title="选择" width="55px" className={"text-center"}
+                                                                    sortable={false}
+                                                                    headerCell={props => {
+                                                                        return (<span>选择</span>)
+                                                                    }}
+                                                                    cell={(props) => {
+                                                                        return (
+                                                                            <td className={"text-center"}>
+                                                                                <Radio name='selectDef' defaultChecked={props.dataItem.selected}
+                                                                                       className={"grid-radio"} key={props.dataIndex}
+                                                                                       onChange={this.selectPsnRadiosChange.bind(this, props)}
+                                                                                ></Radio>
+                                                                            </td>)
+                                                                    }}/>  : <GridColumn locked field="selected" title="选择" width="50px" className={"text-center locked"}
+                                                                                    headerClassName={"text-center"} sortable={false} headerCell={props => {
+                                    return <Checkbox checked={this.state.isAllPsnSelected} onChange={this.onGridHeaderSelectionChange}></Checkbox>
+                                }}
+                                                                                    cell={props => {
+                                                                                        return <td className={"text-center locked_column k-grid-content-sticky"} style={{left: "0px", right: "0px"}}>
+                                                                                            <Checkbox checked={props.dataItem.selected} onChange={this.onGridRowSelectionChange.bind(this, props)}></Checkbox>
+                                                                                        </td>
+                                                                                    }}
+                                />
+
+                            }
+                            <GridColumn field="sequence_number" title="序号" width="50px" className={"text-center"} headerClassName={"text-center"} width="55px" sortable={false} cell={GridRowSequenceNumberCell}/>
+                            <GridColumn field="name" title="姓名" className={"text-center"} headerClassName={"text-center"} width="120px" />
+                            <GridColumn field="code" title="人员编码" className={"text-center"} headerClassName={"text-center"} width="120px" />
+                            <GridColumn field="corp_ext_name" title="单位名称" className={"text-center"} headerClassName={"text-center"} width="180px" />
+                            <GridColumn field="dept_ext_name" title="部门名称" className={"text-center"} headerClassName={"text-center"} width="180px" />
+                            <GridColumn field="post_ext_name" title="岗位名称" className={"text-center"} headerClassName={"text-center"} width="180px" />
+                        </Grid>
+                    </div>
+                </div>
+            </SModal>
+        )
+    }
+}
+
+export default LeftOrgTreeRightPersonGridForSelectPsnModal;