@bchr/bchr-front-lib 0.3.87 → 0.3.91

package/lib/style/bchrLessVar.css

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bchr/bchr-front-lib",
-  "version": "0.3.87",
+  "version": "0.3.91",
   "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

@@ -15,7 +15,6 @@ class FormForBrowse extends React.Component{
 
     componentDidMount() {
         let {initialValues} = this.props;
-
         if (Array.isArray(initialValues)) {
             initialValues = initialValues[0] || {};
         }
@@ -94,11 +93,42 @@ class FormForBrowse extends React.Component{
         )
     }
 
-    buildFormItems = () => {
-        let {info_set_fields, ext_form_items} = this.props;
+    buildFormItems = (editFormulasState) => {
+        let {initialValues, 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 (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' ? (initialValues[formItem.code] || '').toLowerCase() !== 'true' : initialValues[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;
+                                        }
+                                    }
+                                })
+                            })
+                        }
+
+                    }
+
+                }
+            })
+
             let groupNames = info_set_fields.map(item => item.belong_form_group).filter((item, index, arr) => item && item.trim().length > 0 && arr.indexOf(item) === index);
 
             if (groupNames.length > 0) {
@@ -167,6 +197,81 @@ class FormForBrowse 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) => {
         if (is_ext_field) {
 
@@ -178,7 +283,7 @@ class FormForBrowse extends React.Component{
                             key={dataItem.code}
                             label={dataItem.label}
                             name={dataItem.name}
-                            rules={[{ required: dataItem.required}]}
+                            rules={[{ required: !dataItem.b_disabled && dataItem.required}]}
                         >
                             {dataItem.render}
                         </Form.Item>
@@ -193,7 +298,7 @@ class FormForBrowse extends React.Component{
             initialValues = initialValues[0] || {};
         }
 
-        let {ui_render_type, ref_pk, code, display_code, b_multiple, upload_file_biz_object_type} = dataItem;
+        let {ui_render_type, ref_pk, code, display_code, b_multiple, b_disabled, upload_file_biz_object_type} = dataItem;
         let value;
 
         display_code = display_code || code;
@@ -215,6 +320,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], 'YYYY').format("YYYY") : "");
+                    break;
+                case UI_RENDER_TYPE.DATE_MONTH:
+                    value = (initialValues[display_code] ? moment(initialValues[display_code], 'YYYYMM').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;
@@ -295,7 +406,7 @@ class FormForBrowse extends React.Component{
                         </Fragment>
                     }
                     name={dataItem.code}
-                    rules={[{ required: dataItem.b_required}]}
+                    rules={[{ required: (!dataItem.b_disabled && dataItem.b_required)}]}
                 >
                     {components}
                 </Form.Item>

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

@@ -35,6 +35,23 @@ class FormForModify extends React.Component{
     }
 
     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 = () => {
@@ -115,7 +132,6 @@ class FormForModify extends React.Component{
     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;
 
@@ -133,7 +149,7 @@ class FormForModify extends React.Component{
                                     } else if (item.formItemValue === 'enabled') {
                                         formItem.b_disabled = false;
                                     } else {
-                                        formItem.initialValue = item.formItemValue || '';
+                                        formItem.initialValue = item.formItemValue || data[formItem.display_code];
                                     }
                                 }
                             })
@@ -141,16 +157,13 @@ class FormForModify extends React.Component{
                     }
 
                 } 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) {
-                                editFormulasState.push({editFormulasStateCode: formItem.code, editFormulaItem: editFormulaConfig});
                                 let currentOtherFormItemResponses = editFormulaConfig.otherFormItemResponses;
                                 currentOtherFormItemResponses.forEach(item => {
                                     info_set_fields.forEach(formItemInner => {
@@ -160,7 +173,7 @@ class FormForModify extends React.Component{
                                             } else if (item.formItemValue === 'enabled') {
                                                 formItemInner.b_disabled = false;
                                             } else {
-                                                formItemInner.initialValue = item.formItemValue || '';
+                                                formItemInner.initialValue = item.formItemValue || data[formItem.display_code];
                                             }
                                         }
                                     })
@@ -330,7 +343,7 @@ class FormForModify extends React.Component{
                             key={form_id + "_" + dataItem.code}
                             label={dataItem.label}
                             name={dataItem.name}
-                            rules={[{ required: dataItem.required}]}
+                            rules={[{ required: !dataItem.b_disabled && dataItem.required}]}
                         >
                             {dataItem.render}
                         </Form.Item>
@@ -341,7 +354,7 @@ class FormForModify extends React.Component{
 
         display_code = display_code || code;
         let initialValue = dataItem.initialValue || data[code];
-        let displayValue = dataItem.initialValue || data[display_code];
+        let displayValue = data[display_code];
 
         let component, valuePropName;
         if (custom_form_items && custom_form_items[code + "_form_item"] && typeof custom_form_items[code + "_form_item"] === "function") {
@@ -455,6 +468,50 @@ class FormForModify extends React.Component{
                             />
                         );
                     break;
+                case UI_RENDER_TYPE.DATE_YEAR:
+                    initialValue = (initialValue ? moment(initialValue) : "");
+                    displayValue = (displayValue ? moment(displayValue, 'YYYY').format("YYYY") : "");
+
+                    component = (b_disabled !== undefined ? b_disabled : b_readonly) ? (
+                            <div>
+                                <span>{displayValue}</span>
+                            </div>
+                        )
+                        :
+                        (
+                            <DatePicker
+                                key={form_id + "_" + code}
+                                getPopupContainer={() => document.getElementById(`ant_form_item_${code}`)}
+                                placeholder={"请选择" + name}
+                                picker="year"
+                                onChange={this.datePickerOnChange.bind(this, dataItem, onChange)}
+                                disabledDate={this.disabledDate.bind(this, dataItem)}
+                                {...ext_props}
+                            />
+                        );
+                    break;
+                case UI_RENDER_TYPE.DATE_MONTH:
+                    initialValue = (initialValue ? moment(initialValue) : "");
+                    displayValue = (displayValue ? moment(displayValue, 'YYYYMM').format("YYYY-MM") : "");
+
+                    component = (b_disabled !== undefined ? b_disabled : b_readonly) ? (
+                            <div>
+                                <span>{displayValue}</span>
+                            </div>
+                        )
+                        :
+                        (
+                            <DatePicker
+                                key={form_id + "_" + code}
+                                getPopupContainer={() => document.getElementById(`ant_form_item_${code}`)}
+                                placeholder={"请选择" + name}
+                                picker="month"
+                                onChange={this.datePickerOnChange.bind(this, dataItem, onChange)}
+                                disabledDate={this.disabledDate.bind(this, dataItem)}
+                                {...ext_props}
+                            />
+                        );
+                    break;
                 case UI_RENDER_TYPE.DATE_TIME:
                     initialValue = (initialValue ? moment(initialValue) : "");
                     displayValue = (displayValue ? moment(displayValue).format("YYYY-MM-DD hh:mm:ss") : "");
@@ -688,10 +745,10 @@ class FormForModify extends React.Component{
                     name={code}
                     initialValue={initialValue}
                     rules={[
-                        {required: b_required, message: ("请填写" + name), whitespace: true, validator: this.validator.bind(this, b_required, ui_render_type)},
+                        {required: (!dataItem.b_disabled && 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={b_required}
+                    hasFeedback={(!dataItem.b_disabled && b_required)}
                     valuePropName={valuePropName ? valuePropName : "value"}
                 >
                     {component}
@@ -909,6 +966,7 @@ class FormForModify extends React.Component{
         }
 
         if (config.editFormulaConfigs && config.editFormulaConfigs.length) {
+            let {data} = this.props;
             let {editFormulasState} = this.state;
             let {setFieldsValue} = this.ref.current;
             if (value) {
@@ -917,7 +975,11 @@ class FormForModify extends React.Component{
                     if (value) {
                         editFormulaItem.otherFormItemResponses.forEach(item => {
                             if (item.formItemValue === 'disabled') {
-                                setFieldsValue({[item.formItemCode]: ''})
+                                if (item.formItemCode.indexOf('date') !== -1) {
+                                    setFieldsValue({[item.formItemCode]: moment(data[item.formItemCode]) || ''})
+                                } else {
+                                    setFieldsValue({[item.formItemCode]: data[item.formItemCode] || ''})
+                                }
                             }
                         })
                     }
@@ -1048,15 +1110,20 @@ class FormForModify extends React.Component{
     }
 
     switchOnChange(config, callback, checked, event) {
-        let {code} = config;
         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 => {
-                        setFieldsValue({[item.formItemCode]: ''})
+                        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) {

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

@@ -514,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}