vap1 0.0.1

package/components/_setup/UForm/UFormDate.js

@@ -0,0 +1,313 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const lodash_1 = __importDefault(require("lodash"));
+const antd_1 = require("antd");
+const _register_1 = require("../../UForm/_register");
+const _input_1 = require("../../UForm/_input");
+const utils_1 = require("../../../utils");
+const DateRange_1 = require("../../_common/DateRange");
+const dayjs_1 = __importDefault(require("dayjs"));
+const Const_1 = require("../Const");
+// 日期输入相关的组件
+const DatePick = (props) => {
+    const { field, disabled, value, form, onChange } = props;
+    let params = { placeholder: (0, _input_1.getPlaceholder)(field, true), disabled, allowClear: true };
+    if (field.required || field.rules && lodash_1.default.find(field.rules, { required: true }))
+        params.allowClear = false;
+    if (field.config && field.config._startField) {
+        params.disabledDate = (current) => {
+            let startStr = form.getFieldValue(field.config._startField);
+            if (startStr == null || field.config._startField == '')
+                return false;
+            return (0, dayjs_1.default)(startStr).diff(current) > 0;
+        };
+    }
+    else if (field.config && field.config._endField) {
+        params.disabledDate = (current) => {
+            let endDateStr = form.getFieldValue(field.config._endField);
+            if (endDateStr == null || field.config._endField == '')
+                return false;
+            return (0, dayjs_1.default)(endDateStr).diff(current) < 0;
+        };
+    }
+    if (value) {
+        let day = (0, dayjs_1.default)(value);
+        if (day.isValid())
+            params.value = day;
+    }
+    const format = lodash_1.default.has(field.config, 'format') ? field.config.format : (props.showTime ? utils_1.GLOBAL.CONFIG.DATE.DATE_TIME_FORMAT : utils_1.GLOBAL.CONFIG.DATE.DATE_FORMAT);
+    return react_1.default.createElement(antd_1.DatePicker, Object.assign({ style: { width: '80%' } }, params, field.config, { showTime: props.showTime, format: format, onChange: day => {
+            if (day == null) {
+                onChange(undefined);
+            }
+            else {
+                onChange(day.format(format));
+            }
+        } }));
+};
+const DatePickRender = (value, data, field, showTime) => {
+    if (field.render)
+        return field.render(value, data);
+    if (value == null || value == '')
+        return '';
+    let mnt = (0, dayjs_1.default)(value);
+    if (mnt.isValid()) {
+        const format = lodash_1.default.has(field.config, 'format') ? field.config.format : (showTime ? utils_1.GLOBAL.CONFIG.DATE.DATE_TIME_FORMAT : utils_1.GLOBAL.CONFIG.DATE.DATE_FORMAT);
+        return mnt.format(format);
+    }
+    return '';
+};
+(0, _register_1.registerFormField)('date', (props) => react_1.default.createElement(DatePick, Object.assign({}, props, { showTime: false })), {
+    render: (value, data, field) => DatePickRender(value, data, field, false)
+});
+(0, _register_1.registerFormField)('datetime', (props) => react_1.default.createElement(DatePick, Object.assign({}, props, { showTime: true })), {
+    render: (value, data, field) => DatePickRender(value, data, field, true)
+});
+(0, _register_1.registerFormField)('month', (props) => {
+    const { field, disabled, value, onChange } = props;
+    let params = { placeholder: (0, _input_1.getPlaceholder)(field, true), disabled, allowClear: true };
+    if (field.required || field.rules && lodash_1.default.find(field.rules, { required: true }))
+        params.allowClear = false;
+    if (value) {
+        let day = (0, dayjs_1.default)(value);
+        if (day.isValid())
+            params.value = day;
+    }
+    const format = lodash_1.default.has(field.config, 'format') ? field.config.format : utils_1.GLOBAL.CONFIG.DATE.MONTH_FORMAT;
+    return react_1.default.createElement(antd_1.DatePicker.MonthPicker, Object.assign({ style: { width: '80%' } }, params, field.config, { format: format, onChange: day => {
+            if (day == null) {
+                onChange(undefined);
+            }
+            else {
+                onChange(day.format(format));
+            }
+        } }));
+}, {
+    render: (value, data, field) => {
+        if (field.render)
+            return field.render(value, data);
+        if (value == null || value == '')
+            return '';
+        let mnt = (0, dayjs_1.default)(value);
+        if (mnt.isValid()) {
+            const format = lodash_1.default.has(field.config, 'format') ? field.config.format : utils_1.GLOBAL.CONFIG.DATE.MONTH_FORMAT;
+            return mnt.format(format);
+        }
+        return '';
+    }
+});
+(0, _register_1.registerFormField)('week', (props) => {
+    const { field, disabled, value, onChange } = props;
+    let params = { placeholder: (0, _input_1.getPlaceholder)(field, true), disabled, allowClear: true };
+    if (field.required || field.rules && lodash_1.default.find(field.rules, { required: true }))
+        params.allowClear = false;
+    if (value) {
+        let day = (0, dayjs_1.default)(value);
+        if (day.isValid())
+            params.value = day;
+    }
+    const format = lodash_1.default.has(field.config, 'format') ? field.config.format : utils_1.GLOBAL.CONFIG.DATE.WEEK_FORMAT;
+    return react_1.default.createElement(antd_1.DatePicker.WeekPicker, Object.assign({ style: { width: '80%' } }, params, field.config, { format: format, onChange: day => {
+            if (day == null) {
+                onChange(undefined);
+            }
+            else {
+                onChange(day.format(format));
+            }
+        } }));
+}, {
+    render: (value, data, field) => {
+        if (field.render)
+            return field.render(value, data);
+        if (value == null || value == '')
+            return '';
+        let mnt = (0, dayjs_1.default)(value);
+        if (mnt.isValid()) {
+            const format = lodash_1.default.has(field.config, 'format') ? field.config.format : utils_1.GLOBAL.CONFIG.DATE.WEEK_FORMAT;
+            return mnt.format(format);
+        }
+        return '';
+    }
+});
+(0, _register_1.registerFormField)('time', (props) => {
+    const { field, disabled, value, onChange } = props;
+    let params = { placeholder: (0, _input_1.getPlaceholder)(field, true), disabled, allowClear: true };
+    if (field.required || field.rules && lodash_1.default.find(field.rules, { required: true }))
+        params.allowClear = false;
+    if (value) {
+        let day = (0, dayjs_1.default)(value);
+        if (day.isValid())
+            params.value = day;
+    }
+    const format = lodash_1.default.has(field.config, 'format') ? field.config.format : utils_1.GLOBAL.CONFIG.DATE.TIME_FORMAT;
+    return react_1.default.createElement(antd_1.TimePicker, Object.assign({ style: { width: '80%' } }, params, field.config, { format: format, onChange: day => {
+            if (day == null) {
+                onChange(undefined);
+            }
+            else {
+                onChange(day.format(format));
+            }
+        } }));
+}, {
+    render: (value, data, field) => {
+        if (field.render)
+            return field.render(value, data);
+        if (value == null || value == '')
+            return '';
+        let mnt = (0, dayjs_1.default)(value);
+        if (mnt.isValid()) {
+            const format = lodash_1.default.has(field.config, 'format') ? field.config.format : utils_1.GLOBAL.CONFIG.DATE.TIME_FORMAT;
+            return mnt.format(format);
+        }
+        return '';
+    }
+});
+const AntdRangePick = (props) => {
+    const { field, disabled, value, onChange } = props;
+    let ptn = field.field.split(',');
+    if (ptn.length != 2) {
+        console.error('timerange field must hava a start and end, eg: field:"startTime,endTime"');
+        return react_1.default.createElement(DatePick, Object.assign({}, props));
+    }
+    const [startField, endField] = ptn;
+    let params = { disabled, allowClear: true };
+    if (field.required || field.rules && lodash_1.default.find(field.rules, { required: true }))
+        params.allowClear = false;
+    params.value = [undefined, undefined];
+    if (value) {
+        if (value[startField]) {
+            let day = (0, dayjs_1.default)(value[startField]);
+            if (day.isValid())
+                params.value[0] = day;
+        }
+        if (value[endField]) {
+            let day = (0, dayjs_1.default)(value[endField]);
+            if (day.isValid())
+                params.value[1] = day;
+        }
+    }
+    // const format = _.has(field.config, 'format') ? field.config.format : (
+    //     props.showTime ? GLOBAL.CONFIG.DATE.DATE_TIME_FORMAT : GLOBAL.CONFIG.DATE.DATE_FORMAT
+    // )
+    let format = props.isDate ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss';
+    let showTime = !props.isDate;
+    if (props.isDate) {
+        if (field.config && field.config.showTime) {
+            showTime = true;
+        }
+    }
+    return react_1.default.createElement(antd_1.DatePicker.RangePicker, Object.assign({ style: { width: '80%' } }, params, field.config, { showTime: !props.isDate && showTime, format: format, onChange: ([start, end]) => {
+            if (start && end) {
+                let startFormat, endFormat;
+                if (props.isDate) {
+                    if (showTime) {
+                        startFormat = 'YYYY-MM-DD 00:00:00';
+                        endFormat = 'YYYY-MM-DD 23:59:59';
+                    }
+                    else {
+                        startFormat = 'YYYY-MM-DD';
+                        endFormat = 'YYYY-MM-DD';
+                    }
+                }
+                else {
+                    if (showTime === false) {
+                        startFormat = 'YYYY-MM-DD 00:00:00';
+                        endFormat = 'YYYY-MM-DD 23:59:59';
+                    }
+                    else {
+                        startFormat = 'YYYY-MM-DD HH:mm:ss';
+                        endFormat = 'YYYY-MM-DD HH:mm:ss';
+                    }
+                }
+                onChange({
+                    [startField]: start.format(startFormat),
+                    [endField]: end.format(endFormat),
+                });
+            }
+            else {
+                onChange({
+                    [startField]: undefined,
+                    [endField]: undefined,
+                });
+            }
+        } }));
+};
+const DateRangePick = (props) => {
+    const { field, disabled, value, onChange, showTime } = props;
+    let ptn = field.field.split(',');
+    if (ptn.length != 2) {
+        console.error('timerange field must hava a start and end, eg: field:"startTime,endTime"');
+        return react_1.default.createElement(DatePick, Object.assign({}, props));
+    }
+    const [startField, endField] = ptn;
+    let params = {
+        disabled, allowClear: true, showTime, onChange: ([start, end]) => {
+            onChange({
+                [startField]: start || undefined,
+                [endField]: end || undefined,
+            });
+        }
+    };
+    if (field.required || field.rules && lodash_1.default.find(field.rules, { required: true }))
+        params.allowClear = false;
+    if (value) {
+        if (value[startField]) {
+            let day = (0, dayjs_1.default)(value[startField]);
+            if (day.isValid())
+                params.defaultStart = day;
+        }
+        if (value[endField]) {
+            let day = (0, dayjs_1.default)(value[endField]);
+            if (day.isValid())
+                params.defaultEnd = day;
+        }
+    }
+    return react_1.default.createElement(DateRange_1.DateRange, Object.assign({}, field.config, params));
+};
+const RangePickRender = (value, data, field, showTime) => {
+    if (!lodash_1.default.isPlainObject) {
+        if (lodash_1.default.isString(value))
+            return value;
+        return '';
+    }
+    let ptn = field.field.split(',');
+    if (ptn.length != 2)
+        return '';
+    const [startField, endField] = ptn;
+    if (data[startField] == null && data[endField] == null)
+        return '';
+    if (data[startField] == null)
+        return utils_1.i18n.txt(Const_1.V.DATE_START_FROM, data[endField]);
+    if (data[endField] == null)
+        return utils_1.i18n.txt(Const_1.V.DATE_END_TO, data[startField]);
+    return utils_1.i18n.txt(Const_1.V.DATE_START_TO_END, data[startField], data[endField]);
+};
+(0, _register_1.registerFormField)('daterange', (props) => react_1.default.createElement(AntdRangePick, Object.assign({}, props, { isDate: true })), {
+    render: (value, data, field) => RangePickRender(value, data, field, false),
+    breakCol: true,
+    isMultiple: true
+});
+(0, _register_1.registerFormField)('timerange', (props) => react_1.default.createElement(AntdRangePick, Object.assign({}, props, { isDate: false })), {
+    render: (value, data, field) => RangePickRender(value, data, field, true),
+    breakCol: true,
+    isMultiple: true
+});
+(0, _register_1.registerFormField)('daterange-single', (props) => react_1.default.createElement(DateRangePick, Object.assign({}, props, { showTime: false })), {
+    render: (value, data, field) => RangePickRender(value, data, field, false),
+    breakCol: true,
+    isMultiple: true
+});
+(0, _register_1.registerFormField)('timerange-single', (props) => react_1.default.createElement(DateRangePick, Object.assign({}, props, { showTime: true })), {
+    render: (value, data, field) => RangePickRender(value, data, field, true),
+    breakCol: true,
+    isMultiple: true
+});
+// registerFormField('monthrange', (props: FormFieldProps) => <AntdRangePick  {...props} isDate={true} />, {
+//     render: (value, data, field) => RangePickRender(value, data, field, false),
+//     breakCol: true,
+//     isMultiple: true
+// });

package/components/_setup/UForm/UFormInput.d.ts

@@ -0,0 +1 @@
+export {};

package/components/_setup/UForm/UFormInput.js

@@ -0,0 +1,159 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const lodash_1 = __importDefault(require("lodash"));
+const antd_1 = require("antd");
+const Select_1 = require("../../_adapt/Select");
+const _register_1 = require("../../UForm/_register");
+const _input_1 = require("../../UForm/_input");
+const utils_1 = require("../../../utils");
+const _utils_1 = require("./_utils");
+(0, _register_1.registerFormField)('text', (props) => {
+    const { field, disabled, value, onChange } = props;
+    let params = { placeholder: (0, _input_1.getPlaceholder)(field), disabled, autoComplete: 'off', };
+    if (utils_1.GLOBAL.CONFIG.FORM.INPUT_MAX_LENGTH) {
+        params.maxLength = utils_1.GLOBAL.CONFIG.FORM.INPUT_MAX_LENGTH;
+        if (field.ignore)
+            params.maxLength = null;
+    }
+    return react_1.default.createElement(antd_1.Input, Object.assign({}, params, field.config, { value: value === null ? undefined : value, onChange: evt => utils_1.PageUtil.stopEvent(evt, () => onChange(evt.target.value)) }));
+}, {
+    rules: _utils_1.ILLEGAL_CHAR_VALIDATER
+});
+// registerFormField('color', (props: FormFieldProps) => {
+//     const { field, disabled, value, onChange } = props;
+//     let params: ColorPickerProps = { disabled, };
+//     return <ColorPicker
+//         {...params}
+//         {...field.config}
+//         value={value === null ? undefined : value}
+//         onChange={value => onChange(value.toHexString())}
+//     />
+// });
+(0, _register_1.registerFormField)('textarea', (props) => {
+    const { field, disabled, value, onChange } = props;
+    let params = { placeholder: (0, _input_1.getPlaceholder)(field), disabled, autoComplete: 'off', };
+    return react_1.default.createElement(antd_1.Input.TextArea, Object.assign({}, params, field.config, { value: value === null ? undefined : value, onChange: evt => utils_1.PageUtil.stopEvent(evt, () => onChange(evt.target.value)) }));
+}, {
+    breakCol: true,
+    rules: _utils_1.ILLEGAL_CHAR_VALIDATER
+});
+(0, _register_1.registerFormField)('password', (props) => {
+    const { field, disabled, value, onChange } = props;
+    let params = { placeholder: (0, _input_1.getPlaceholder)(field), disabled, autoComplete: 'off', maxLength: 36, visibilityToggle: false, };
+    return react_1.default.createElement(antd_1.Input.Password, Object.assign({}, params, field.config, { value: value === null ? undefined : value, onChange: (evt) => utils_1.PageUtil.stopEvent(evt, () => onChange(evt.target.value)) }));
+});
+(0, _register_1.registerFormField)('number', (props) => {
+    const { field, disabled, value, onChange } = props;
+    let params = { placeholder: (0, _input_1.getPlaceholder)(field), disabled, autoComplete: 'off', };
+    if (utils_1.GLOBAL.CONFIG.FORM.NUMBER_MIN_ZERO) {
+        params.min = 0;
+        if (field.ignore)
+            lodash_1.default.unset(params, 'min');
+    }
+    return react_1.default.createElement(antd_1.InputNumber, Object.assign({}, params, field.config, { className: 'i-number', value: value === null ? undefined : value, onChange: onChange }));
+});
+/**
+ * silder 说明
+ * 1. 默认  min: 0, max: 100, step: 1 ，需要传入 config 再次指定
+ * 2. 默认会加入一个显示列，结构为
+ *      {valueWidth:number, valueFormat:(num:number)=>string }
+ *      用于控制显示列的宽度，及显示的内容
+ *      当 valueWidth 为 0 或 valueFormat 不为一个方法时，不显示此列
+ *  如 : {type:'slider',config:{valueWidth:0} }
+ *      或  {type:'slider',config:{valueFormat:null} }
+*/
+(0, _register_1.registerFormField)('slider', (props) => {
+    const { field, disabled, value, onChange } = props;
+    let config = lodash_1.default.merge({ valueWidth: 64, valueFormat: v => (v || 0) }, field.config);
+    let params = { disabled, min: 0, max: 100, step: 1 };
+    if (!lodash_1.default.isFunction(config.valueFormat) || config.valueWidth == 0) {
+        return react_1.default.createElement(antd_1.Slider, Object.assign({}, params, field.config, { range: false, value: value === null ? undefined : value, onChange: onChange }));
+    }
+    return react_1.default.createElement("div", { className: 'i-slider' },
+        react_1.default.createElement(antd_1.Slider, Object.assign({}, params, field.config, { range: false, value: value === null ? undefined : value, onChange: onChange })),
+        react_1.default.createElement("div", { className: 'i-slider-value', style: { width: config.valueWidth } },
+            " ",
+            config.valueFormat(value),
+            " "));
+});
+(0, _register_1.registerFormField)('slider-range', (props) => {
+    const { field, disabled, value, onChange } = props;
+    let config = lodash_1.default.merge({ valueWidth: 128, valueFormat: (range) => range ? `${range[0]} - ${range[1]}` : '0' }, field.config);
+    let params = { range: true, disabled, min: 0, max: 100, step: 1 };
+    const [fields, values] = (0, _input_1.getMultiFieldValues)(field, value);
+    if (!lodash_1.default.isFunction(config.valueFormat) || config.valueWidth == 0) {
+        return react_1.default.createElement(antd_1.Slider, Object.assign({}, params, field.config, { range: true, value: values, onChange: ([start, end]) => onChange({ [fields[0]]: start, [fields[1]]: end }) }));
+    }
+    return react_1.default.createElement("div", { className: 'i-slider' },
+        react_1.default.createElement(antd_1.Slider, Object.assign({}, params, field.config, { range: true, value: values, onChange: ([start, end]) => onChange({ [fields[0]]: start, [fields[1]]: end }) })),
+        react_1.default.createElement("div", { className: 'i-slider-value', style: { width: config.valueWidth } },
+            " ",
+            config.valueFormat(values),
+            " "));
+}, { isMultiple: true });
+// 带一个下接选择的输入框，需要传入两个字段，第一个为 input,第二个为select,需要传 options
+// 默认 select 在 input 前，如果需要 select 在 input 后，可以传 config : { atAfter:true }
+(0, _register_1.registerFormField)('input-with-select', (props) => {
+    const { field, disabled, value, onChange, options } = props;
+    const [fields, values] = (0, _input_1.getMultiFieldValues)(field, value);
+    let inputProps = {
+        placeholder: (0, _input_1.getPlaceholder)(field),
+        disabled,
+        autoComplete: 'off',
+        value: values[0],
+        onChange: (evt) => onChange({ [fields[0]]: evt.target.value, [fields[1]]: values[1] })
+    };
+    let selectProps = { options, disabled, allowClear: true, };
+    // selectProps.
+    if (lodash_1.default.has(field.config, 'selectProps') && lodash_1.default.isPlainObject(field.config.selectProps)) {
+        lodash_1.default.assign(selectProps, field.config.selectProps);
+    }
+    selectProps.value = values[1];
+    selectProps.onChange = (value) => onChange({ [fields[0]]: values[0], [fields[1]]: value });
+    let atRight = lodash_1.default.has(field.config, 'atAfter') && field.config.atAfter;
+    if (field.required || field.rules && lodash_1.default.find(field.rules, { required: true }))
+        selectProps.allowClear = false;
+    if (atRight) {
+        inputProps.addonAfter = react_1.default.createElement(Select_1.Select, Object.assign({}, selectProps));
+    }
+    else {
+        inputProps.addonBefore = react_1.default.createElement(Select_1.Select, Object.assign({}, selectProps));
+    }
+    return react_1.default.createElement(antd_1.Input, Object.assign({}, inputProps));
+}, { isMultiple: true });
+const percentFormatter = (value) => `${value}%`;
+const percentParser = (value) => value.replace('%', '');
+(0, _register_1.registerFormField)('percent', (props) => {
+    var _a, _b;
+    const { field, disabled, value, onChange } = props;
+    let precision = ((_a = field.config) === null || _a === void 0 ? void 0 : _a.precision) || 0;
+    let scale = ((_b = field.config) === null || _b === void 0 ? void 0 : _b.scale) || 2;
+    const scaleNum = Math.pow(10, scale);
+    let params = {
+        min: 0,
+        placeholder: (0, _input_1.getPlaceholder)(field),
+        disabled,
+        autoComplete: 'off',
+        precision,
+        formatter: percentFormatter,
+        parser: percentParser,
+    };
+    let val = 0;
+    try {
+        val = (parseFloat(value) * scaleNum).toFixed(precision);
+    }
+    catch (_c) { }
+    return react_1.default.createElement(antd_1.InputNumber, Object.assign({}, params, field.config, { className: 'i-number', value: val, onChange: value => {
+            try {
+                if (value == null || isNaN(value))
+                    return;
+                let val = parseFloat(value) / scaleNum;
+                onChange(val);
+            }
+            catch (_a) { }
+        } }));
+});

package/components/_setup/UForm/UFormJSON.d.ts

@@ -0,0 +1 @@
+export {};