@bchr/bchr-front-lib 0.3.85 → 0.3.89

package/lib/style/bchrLessVar.css

@@ -0,0 +1,3 @@
+/** 全局颜色 **/
+/** 常用色值 **/
+/** 常用字体大小 **/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bchr/bchr-front-lib",
-  "version": "0.3.85",
+  "version": "0.3.89",
   "description": "bchr front lib",
   "main": "lib/index.js",
   "scripts": {

package/src/base/layout/ui_tpl/consts.js

@@ -4,6 +4,8 @@ const UI_RENDER_TYPE = {
     INPUT_NUMBER: "inputNumber",
     TEXT_AREA: "textArea",
     DATE: "date",
+    DATE_YEAR: "dateYear",
+    DATE_MONTH: "dateMonth",
     DATE_TIME: "dateTime",
     SELECT: "select",
     TREE_SELECT: "treeSelect",

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

@@ -215,6 +215,12 @@ class FormForBrowse extends React.Component{
                 case UI_RENDER_TYPE.DATE:
                     value = (initialValues[display_code] ? moment(initialValues[display_code]).format("YYYY-MM-DD") : "");
                     break;
+                case UI_RENDER_TYPE.DATE_YEAR:
+                    value = (initialValues[display_code] ? moment(initialValues[display_code]).format("YYYY") : "");
+                    break;
+                case UI_RENDER_TYPE.DATE_MONTH:
+                    value = (initialValues[display_code] ? moment(initialValues[display_code]).format("YYYY-MM") : "");
+                    break;
                 case UI_RENDER_TYPE.DATE_TIME:
                     value = (initialValues[display_code] ? moment(initialValues[display_code]).format("YYYY-MM-DD hh:mm:ss") : "");
                     break;

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

@@ -1,6 +1,5 @@
 import React, {Fragment} from 'react';
 import {
-    Badge,
     Button,
     Col,
     ConfigProvider,
@@ -31,11 +30,28 @@ class FormForModify extends React.Component{
         this.ref = this.props.formref || React.createRef();
 
         this.state = {
-
+            editFormulasState: []
         }
     }
 
     componentDidMount() {
+        let {data, info_set_fields} = this.props;
+        let {editFormulasState} = this.state;
+        info_set_fields.forEach(formItem => {
+            this.preParseFormItemExtConfig(formItem);
+            if (formItem.editFormulaConfigs) {
+                for (let i = 0, len = formItem.editFormulaConfigs.length; i < len; i++) {
+                    let editFormulaConfig = formItem.editFormulaConfigs[i];
+                    let initialValue = formItem.ui_render_type === 'switch' ? (data[formItem.code] || '').toLowerCase() !== 'true' : data[formItem.code];
+                    let formulaValueOf = formItem.ui_render_type === 'switch' ? (editFormulaConfig.onValueOf || '').toLowerCase() !== 'true' : editFormulaConfig.onValueOf;
+
+                    if (formulaValueOf === initialValue) {
+                        editFormulasState.push({editFormulasStateCode: formItem.code, editFormulaItem: editFormulaConfig})
+                    }
+                }
+            }
+        })
+        this.setState({editFormulasState})
     }
 
     buildExtFormItems = () => {
@@ -113,10 +129,63 @@ class FormForModify extends React.Component{
         )
     }
 
-    buildFormItems = () => {
-        let {info_set_fields, ext_form_items} = this.props;
-
+    buildFormItems = (editFormulasState) => {
+        let {data, info_set_fields, ext_form_items} = this.props;
         if (info_set_fields && info_set_fields.length > 0) {
+            info_set_fields.forEach(formItem => {
+                formItem.initialValue = null;
+
+                this.preParseFormItemExtConfig(formItem);
+
+                if (editFormulasState && editFormulasState.length) {
+                    formItem.b_disabled = formItem.b_readonly;
+                    for (let i = 0, len = editFormulasState.length; i < len; i++) {
+                        let editFormulaStateItem = editFormulasState[i].editFormulaItem;
+                        if (editFormulaStateItem) {
+                            editFormulaStateItem.otherFormItemResponses.forEach(item => {
+                                if (formItem.code === item.formItemCode) {
+                                    if (item.formItemValue === 'disabled') {
+                                        formItem.b_disabled = true;
+                                    } else if (item.formItemValue === 'enabled') {
+                                        formItem.b_disabled = false;
+                                    } else {
+                                        formItem.initialValue = item.formItemValue || data[formItem.display_code];
+                                    }
+                                }
+                            })
+                        }
+                    }
+
+                } else {
+                    if (formItem.editFormulaConfigs) {
+                        for (let i = 0, len = formItem.editFormulaConfigs.length; i < len; i++) {
+                            let editFormulaConfig = formItem.editFormulaConfigs[i];
+                            let initialValue = formItem.ui_render_type === 'switch' ? (data[formItem.code] || '').toLowerCase() !== 'true' : data[formItem.code];
+                            let formulaValueOf = formItem.ui_render_type === 'switch' ? (editFormulaConfig.onValueOf || '').toLowerCase() !== 'true' : editFormulaConfig.onValueOf;
+
+                            if (formulaValueOf === initialValue) {
+                                let currentOtherFormItemResponses = editFormulaConfig.otherFormItemResponses;
+                                currentOtherFormItemResponses.forEach(item => {
+                                    info_set_fields.forEach(formItemInner => {
+                                        if (formItemInner.code === item.formItemCode) {
+                                            if (item.formItemValue === 'disabled') {
+                                                formItemInner.b_disabled = true;
+                                            } else if (item.formItemValue === 'enabled') {
+                                                formItemInner.b_disabled = false;
+                                            } else {
+                                                formItemInner.initialValue = item.formItemValue || data[formItem.display_code];
+                                            }
+                                        }
+                                    })
+                                })
+                            }
+
+                        }
+
+                    }
+
+                }
+            })
 
             let groupNames = info_set_fields.map(item => item.belong_form_group).filter((item, index, arr) => item && item.trim().length > 0 && arr.indexOf(item) === index);
 
@@ -134,7 +203,6 @@ class FormForModify extends React.Component{
                                             if (UI_RENDER_TYPE.HIDDEN === dataItem.ui_render_type) {
                                                 return null;
                                             }
-
                                             return this.generatorFormItem(dataItem)
                                         })
                                     }
@@ -156,7 +224,6 @@ class FormForModify extends React.Component{
                                         if (UI_RENDER_TYPE.HIDDEN === dataItem.ui_render_type) {
                                             return null;
                                         }
-
                                         return this.generatorFormItem(dataItem)
                                     })
                                 }
@@ -173,7 +240,6 @@ class FormForModify extends React.Component{
                                 if (UI_RENDER_TYPE.HIDDEN === dataItem.ui_render_type) {
                                     return null;
                                 }
-
                                 return this.generatorFormItem(dataItem);
                             })
                         }
@@ -185,10 +251,85 @@ class FormForModify extends React.Component{
         }
     };
 
+    preParseFormItemExtConfig = (formItem) => {
+        let formulas = formItem['edit_formula'];
+        if (formulas && formulas.length > 5) {
+            let rawFormulaTextArray = formulas.split(';');
+            let pureFormulaTextItems = [];
+            for (let i = 0, len = rawFormulaTextArray.length; i < len; i++) {
+                let rawFormulaTextItem = rawFormulaTextArray[i];
+                if (rawFormulaTextItem && rawFormulaTextItem.trim().length > 0) {
+                    pureFormulaTextItems.push(rawFormulaTextItem.trim());
+                }
+            }
+
+            if (pureFormulaTextItems.length === 0) {
+                return;
+            }
+
+            let editFormulaConfigs = [];
+
+            for (let i = 0, len = pureFormulaTextItems.length; i < len; i++) {
+                let formulaTextItem = pureFormulaTextItems[i];
+                let formulaChildTextItems = formulaTextItem.split("=>");
+
+                if (formulaChildTextItems.length !== 2) {
+                    continue;
+                }
+
+                let formItemValueText = formulaChildTextItems[0].trim();
+                let onChangeEventText = formulaChildTextItems[1].trim()
+                if (formItemValueText.length === 0 || onChangeEventText.length === 0)  {
+                    continue;
+                }
+
+                if (formItemValueText.startsWith("(") && formItemValueText.endsWith(")")) {
+                    formItemValueText = formItemValueText.substr(1, formItemValueText.length - 2);
+                }
+
+                let editFormulaConfig = {
+                    onValueOf :  formItemValueText,
+                    otherFormItemResponses : []
+                };
+
+                if (onChangeEventText.startsWith("(") && onChangeEventText.endsWith(")")) {
+                    onChangeEventText = onChangeEventText.substr(1, onChangeEventText.length - 2);
+                }
+
+
+                let otherFormItemResponseStates = onChangeEventText.split(",")
+                for (let m = 0, count = otherFormItemResponseStates.length; m < count; m++) {
+                    let otherFormItemResponseState = otherFormItemResponseStates[m];
+                    let otherFormItemResponseOptions = otherFormItemResponseState.split(":");
+                    if (otherFormItemResponseOptions.length === 2) {
+                        let otherFormItemCode  = otherFormItemResponseOptions[0].trim();
+                        let otherFormItemValue = otherFormItemResponseOptions[1].trim();
+                        if (otherFormItemCode.length && otherFormItemValue.length > 0) {
+                            let otherFormItemResponse = {
+                                formItemCode : otherFormItemCode,
+                                formItemValue : otherFormItemValue
+                            }
+
+                            editFormulaConfig.otherFormItemResponses.push(otherFormItemResponse)
+                        }
+                    }
+                }
+
+                if (editFormulaConfig.onValueOf && editFormulaConfig.otherFormItemResponses.length > 0) {
+                    editFormulaConfigs.push(editFormulaConfig);
+                }
+            }
+
+            if (editFormulaConfigs.length > 0) {
+                formItem.editFormulaConfigs = editFormulaConfigs;
+            }
+        }
+    }
+
     generatorFormItem = (dataItem, is_ext_field) => {
         let {data, biz_object_pk, owner_object_pk, file_service_path, value_onchange_events, custom_form_items, form_items_ext_props, form_id} = this.props;
         let {name, ui_render_type, max_value, min_value, ref_pk, code, display_code, b_multiple, value_on_change_event, upload_file_biz_object_type,
-            b_readonly, b_required, field_length, field_precision, tip_message, regexp_pattern} = dataItem;
+            b_readonly, b_disabled, b_required, field_length, field_precision, tip_message, regexp_pattern} = dataItem;
 
         form_id = form_id || "form";
 
@@ -212,9 +353,13 @@ class FormForModify extends React.Component{
         }
 
         display_code = display_code || code;
-        let initialValue = data[code];
+        let initialValue = dataItem.initialValue || data[code];
         let displayValue = data[display_code];
 
+        if (code === 'old__end_date$i_hi_person_contract') {
+            console.log(code, initialValue)
+        }
+
         let component, valuePropName;
         if (custom_form_items && custom_form_items[code + "_form_item"] && typeof custom_form_items[code + "_form_item"] === "function") {
             component = custom_form_items[code + "_form_item"](data);
@@ -234,7 +379,7 @@ class FormForModify extends React.Component{
 
             switch (ui_render_type) {
                 case UI_RENDER_TYPE.INPUT:
-                    component = b_readonly ? (
+                    component = (b_disabled !== undefined ? b_disabled : b_readonly) ? (
                             <div>
                                 <span>{displayValue}</span>
                             </div>
@@ -252,7 +397,7 @@ class FormForModify extends React.Component{
                         );
                     break;
                 case UI_RENDER_TYPE.INPUT_NUMBER:
-                    component = b_readonly ? (
+                    component = (b_disabled !== undefined ? b_disabled : b_readonly) ? (
                             <div>
                                 <span>{displayValue}</span>
                             </div>
@@ -271,7 +416,7 @@ class FormForModify extends React.Component{
                         );
                     break;
                 case UI_RENDER_TYPE.INPUT_PASSWORD:
-                    component = b_readonly ? (
+                    component = (b_disabled !== undefined ? b_disabled : b_readonly) ? (
                             <div>
                                 <InputPassword ui_render_type={'browse'} initValue={displayValue}/>
                             </div>
@@ -289,7 +434,7 @@ class FormForModify extends React.Component{
                         );
                     break;
                 case UI_RENDER_TYPE.TEXT_AREA:
-                    component = b_readonly ? (
+                    component = (b_disabled !== undefined ? b_disabled : b_readonly) ? (
                             <div>
                                 <span>{displayValue}</span>
                             </div>
@@ -310,7 +455,7 @@ class FormForModify extends React.Component{
                     initialValue = (initialValue ? moment(initialValue) : "");
                     displayValue = (displayValue ? moment(displayValue).format("YYYY-MM-DD") : "");
 
-                    component = b_readonly ? (
+                    component = (b_disabled !== undefined ? b_disabled : b_readonly) ? (
                             <div>
                                 <span>{displayValue}</span>
                             </div>
@@ -331,7 +476,7 @@ class FormForModify extends React.Component{
                     initialValue = (initialValue ? moment(initialValue) : "");
                     displayValue = (displayValue ? moment(displayValue).format("YYYY-MM-DD hh:mm:ss") : "");
 
-                    component = b_readonly ? (
+                    component = (b_disabled !== undefined ? b_disabled : b_readonly) ? (
                             <div>
                                 <span>{displayValue}</span>
                             </div>
@@ -365,7 +510,7 @@ class FormForModify extends React.Component{
                         }
                     }
 
-                    component = b_readonly ? (
+                    component = (b_disabled !== undefined ? b_disabled : b_readonly) ? (
                             <div>
                                 <span>{displayValue}</span>
                             </div>
@@ -400,7 +545,7 @@ class FormForModify extends React.Component{
                         initialValue = data[code] && data[code] > 0 ? data[code] + "" : null;
                     }
 
-                    component = b_readonly ? (
+                    component = (b_disabled !== undefined ? b_disabled : b_readonly) ? (
                             <div>
                                 <span>{displayValue}</span>
                             </div>
@@ -430,7 +575,7 @@ class FormForModify extends React.Component{
                     initialValue = displayValue;
                     code = display_code;
 
-                    component = b_readonly ? (
+                    component = (b_disabled !== undefined ? b_disabled : b_readonly) ? (
                             <div>
                                 <span>{displayValue}</span>
                             </div>
@@ -449,7 +594,7 @@ class FormForModify extends React.Component{
                         );
                     break;
                 case UI_RENDER_TYPE.UPLOAD:
-                    component = b_readonly ? (
+                    component = (b_disabled !== undefined ? b_disabled : b_readonly) ? (
                             <div>
                                 <span>{displayValue}</span>
                                 {
@@ -492,7 +637,7 @@ class FormForModify extends React.Component{
                         displayValue = (initialValue ? "是" : "否");
                     }
 
-                    component = b_readonly ? (
+                    component = (b_disabled !== undefined ? b_disabled : b_readonly) ? (
                             <div>
                                 <span>{displayValue}</span>
                             </div>
@@ -509,7 +654,7 @@ class FormForModify extends React.Component{
                         );
                     break;
                 default:
-                    component = b_readonly ? (
+                    component = (b_disabled !== undefined ? b_disabled : b_readonly) ? (
                             <div>
                                 <span>{displayValue}</span>
                             </div>
@@ -551,18 +696,7 @@ class FormForModify extends React.Component{
                                 <span style={{marginRight: '5px'}} dangerouslySetInnerHTML={{__html: dataItem.field_label_prefix}}></span>
                             }
 
-                            {
-                                dataItem.field_label_badge && dataItem.field_label_badge.trim().length > 0 &&
-                                <Badge count={<span style={{zIndex: '1'}} dangerouslySetInnerHTML={{__html: dataItem.field_label_badge}}></span>}>
-                                    <Tooltip title={name}>{name}</Tooltip>
-                                </Badge>
-                            }
-
-                            {
-                                (!dataItem.field_label_badge || dataItem.field_label_badge.trim().length == 0) &&
-                                <Tooltip title={name}>{name}</Tooltip>
-                            }
-
+                            <Tooltip title={name}>{name}</Tooltip>
                             {
                                 tip_message && <Tooltip className="ui-tpl-tool-tip" title={tip_message}> <QuestionCircleOutlined /> </Tooltip>
                             }
@@ -791,6 +925,55 @@ class FormForModify extends React.Component{
             this.props.data[display_code] = display_value;
         }
 
+        if (config.editFormulaConfigs && config.editFormulaConfigs.length) {
+            let {data} = this.props;
+            let {editFormulasState} = this.state;
+            let {setFieldsValue} = this.ref.current;
+            if (value) {
+                let editFormulaItem = config.editFormulaConfigs.filter(editFormulaItem => editFormulaItem.onValueOf === value.toString())[0];
+                if (editFormulaItem) {
+                    if (value) {
+                        editFormulaItem.otherFormItemResponses.forEach(item => {
+                            if (item.formItemValue === 'disabled') {
+                                if (item.formItemCode.indexOf('date') !== -1) {
+                                    setFieldsValue({[item.formItemCode]: moment(data[item.formItemCode]) || ''})
+                                } else {
+                                    setFieldsValue({[item.formItemCode]: data[item.formItemCode] || ''})
+                                }
+                            }
+                        })
+                    }
+                    if (editFormulasState.filter(item => item.editFormulasStateCode === code).length) {
+                        editFormulasState.forEach(item => {
+                            if (item.editFormulasStateCode === code) {
+                                item.editFormulaItem = editFormulaItem;
+                            }
+                        })
+                    } else {
+                        editFormulasState.push({editFormulasStateCode: code, editFormulaItem});
+                    }
+                } else {
+                    if (editFormulasState.filter(item => item.editFormulasStateCode === code).length) {
+                        editFormulasState.forEach(item => {
+                            if (item.editFormulasStateCode === code) {
+                                item.editFormulaItem = null;
+                            }
+                        })
+                    }
+                }
+            } else {
+                if (editFormulasState.filter(item => item.editFormulasStateCode === code).length) {
+                    editFormulasState.forEach(item => {
+                        if (item.editFormulasStateCode === code) {
+                            item.editFormulaItem = null;
+                        }
+                    })
+                }
+            }
+
+            this.setState({editFormulasState})
+        }
+
         if (callback && typeof callback === "function") {
             callback(value, option);
         }
@@ -887,6 +1070,37 @@ class FormForModify extends React.Component{
     }
 
     switchOnChange(config, callback, checked, event) {
+        if (config.editFormulaConfigs && config.editFormulaConfigs.length) {
+            let {data} = this.props;
+            let {code} = config;
+            let {editFormulasState} = this.state;
+            let {setFieldsValue} = this.ref.current;
+            let editFormulaItem = config.editFormulaConfigs.filter(editFormulaItem => editFormulaItem.onValueOf === checked.toString())[0];
+            if (editFormulaItem) {
+                if (!checked) {
+                    editFormulaItem.otherFormItemResponses.forEach(item => {
+                        if (item.formItemCode.indexOf('date') !== -1) {
+                            setFieldsValue({[item.formItemCode]: moment(data[item.formItemCode]) || ''})
+                        } else {
+                            setFieldsValue({[item.formItemCode]: data[item.formItemCode] || ''})
+                        }
+                    })
+                }
+                if (editFormulasState.filter(item => item.editFormulasStateCode === code).length) {
+                    editFormulasState.forEach(item => {
+                        if (item.editFormulasStateCode === code) {
+                            item.editFormulaItem = editFormulaItem;
+                        }
+                    })
+                } else {
+                    editFormulasState.push({editFormulasStateCode: code, editFormulaItem});
+                }
+            } else {
+                editFormulasState.push({editFormulasStateCode: code, editFormulaItem: null});
+            }
+            this.setState({editFormulasState})
+        }
+
         if (callback && typeof callback === "function") {
             callback(checked, event);
         }
@@ -944,6 +1158,7 @@ class FormForModify extends React.Component{
 
     render() {
         let {props} = this;
+        let {editFormulasState} = this.state;
         return (
             <ConfigProvider locale={zhCN}>
                 <Form
@@ -953,7 +1168,7 @@ class FormForModify extends React.Component{
                     scrollToFirstError
                     onValuesChange={this.onValuesChange.bind(this)}
                 >
-                    {this.buildFormItems()}
+                    {this.buildFormItems(editFormulasState)}
                     {this.buildExtFormItems()}
                 </Form>
             </ConfigProvider>

package/src/base/layout/ui_tpl/grid/GridForBrowse.js

@@ -1,7 +1,7 @@
 import React, {Fragment} from 'react';
 import {Grid, GridColumn} from "@progress/kendo-react-grid";
 import {ExcelExport, ExcelExportColumn} from "@progress/kendo-react-excel-export";
-import {ConfigProvider, Tooltip} from "antd";
+import {Badge, ConfigProvider, Tooltip} from "antd";
 import {DownloadOutlined, QuestionCircleOutlined} from '@ant-design/icons';
 import moment from "moment";
 import {EXPORT_GRID_CELL_OPTIONS, EXPORT_GRID_HEADER_CELL_OPTIONS, UI_RENDER_TYPE} from "../consts";
@@ -180,9 +180,23 @@ class GridForBrowse extends React.Component{
                                     <span style={{marginRight: '5px'}} dangerouslySetInnerHTML={{__html: dataItem.column_header_prefix}}></span>
                                 </Tooltip>
                             }
-                            <span className={b_required ? "k-grid-column-required" : ""}>
-                                {name}
-                            </span>
+
+                            {
+                                dataItem.field_label_badge && dataItem.field_label_badge.trim().length > 0 &&
+                                <Badge count={<span style={{zIndex: '1'}} dangerouslySetInnerHTML={{__html: dataItem.field_label_badge}}></span>}>
+                                    <span className={b_required ? "k-grid-column-required" : ""}>
+                                        {name}
+                                    </span>
+                                </Badge>
+                            }
+
+                            {
+                                (!dataItem.field_label_badge || dataItem.field_label_badge.trim().length == 0) &&
+                                <span className={b_required ? "k-grid-column-required" : ""}>
+                                    {name}
+                                </span>
+                            }
+
                             {
                                 tip_message && <Tooltip className="ui-tpl-tool-tip" title={tip_message}> <QuestionCircleOutlined /> </Tooltip>
                             }
@@ -500,6 +514,12 @@ class GridForBrowse extends React.Component{
                         case UI_RENDER_TYPE.DATE:
                             value = (rowData[display_code] ? moment(rowData[display_code]).format("YYYY-MM-DD") : "");
                             break;
+                        case UI_RENDER_TYPE.DATE_YEAR:
+                            value = (rowData[display_code] ? moment(rowData[display_code]).format("YYYY") : "");
+                            break;
+                        case UI_RENDER_TYPE.DATE_MONTH:
+                            value = (rowData[display_code] ? moment(rowData[display_code]).format("YYYY-MM") : "");
+                            break;
                         case UI_RENDER_TYPE.DATE_TIME:
                             value = (rowData[display_code] ? moment(rowData[display_code]).format("YYYY-MM-DD hh:mm:ss") : "");
                             break;

package/src/base/layout/ui_tpl/grid/GridForModify.js

@@ -147,6 +147,24 @@ class GridForModify extends React.Component{
                                 defaultValue={dataItem[code] && moment(dataItem[code])}/>
                 );
                 break;
+            case UI_RENDER_TYPE.DATE_YEAR:
+                component = (
+                    <DatePicker format={DateFormat}
+                                picker="year"
+                                placeholder={"请填写" + name}
+                                onChange={this.datePickerOnChange.bind(this, dataItem, fieldConfig, onChange)}
+                                defaultValue={dataItem[code] && moment(dataItem[code])}/>
+                );
+                break;
+            case UI_RENDER_TYPE.DATE_MONTH:
+                component = (
+                    <DatePicker format={DateFormat}
+                                picker="month"
+                                placeholder={"请填写" + name}
+                                onChange={this.datePickerOnChange.bind(this, dataItem, fieldConfig, onChange)}
+                                defaultValue={dataItem[code] && moment(dataItem[code])}/>
+                );
+                break;
             case UI_RENDER_TYPE.DATE_TIME:
                 component = (
                     <DatePicker showTime={true}