diff --git a/src/main/webapp/assets/css/form-design.css b/src/main/webapp/assets/css/form-design.css index b538fef13..722802526 100644 --- a/src/main/webapp/assets/css/form-design.css +++ b/src/main/webapp/assets/css/form-design.css @@ -1,6 +1,7 @@ .rb-content .main-content { margin-right: 300px; } + .rb-right-sidebar.field-aside { width: 300px; } @@ -96,7 +97,16 @@ margin-left: 1px; } -.form-preview .dd-item, .form-preview .dd-placeholder { +.dd-list .dd-item .dd-action a.icon { + position: absolute; +} + +.dd-list .dd-item .dd-action a.icon>.zmdi { + font-size: 16px; +} + +.form-preview .dd-item, +.form-preview .dd-placeholder { float: left; width: 49%; margin-left: 0.5%; @@ -113,9 +123,7 @@ width: 99% !important; } -.form-preview .dd-item a.rowspan { - -} +.form-preview .dd-item a.rowspan {} .form-preview .dd-item span.ft { top: 13px; @@ -129,7 +137,8 @@ background-color: #eee; } -.form-preview .dd-item, .form-preview .dd-handle { +.form-preview .dd-item, +.form-preview .dd-handle { cursor: move !important; } @@ -167,4 +176,20 @@ .field-list .nodata { margin-top: 5px; background-color: #fff; +} + +.field-edit { + max-width: 400px; + margin: 0 auto; +} + +.field-edit label { + font-weight: bold; +} + +.dd-list .dd-item .dd-handle span>i { + font-size: 14px; + margin-left: 5px; + color: #999; + cursor: help; } \ No newline at end of file diff --git a/src/main/webapp/assets/js/entity/form-design.jsx b/src/main/webapp/assets/js/entity/form-design.jsx index 819d1ad9d..c8554ed61 100644 --- a/src/main/webapp/assets/js/entity/form-design.jsx +++ b/src/main/webapp/assets/js/entity/form-design.jsx @@ -20,7 +20,7 @@ $(document).ready(function () { check_empty() }) } else { - render_item({ ...field, isFull: this.isFull || false }, '.form-preview') + render_item({ ...field, isFull: this.isFull || false, tip: this.tip || null }, '.form-preview') } }) @@ -42,7 +42,7 @@ $(document).ready(function () { $('.form-preview .J_field').each(function () { let _this = $(this) if (!_this.data('field')) return - let item = { field: _this.data('field'), isFull: _this.parent().hasClass('w-100') } + let item = { field: _this.data('field'), isFull: _this.parent().hasClass('w-100'), tip: _this.find('.J_tip').attr('title') } if (item.field === '$DIVIDER$') item.label = _this.find('span').text() elements.push(item) }) @@ -65,18 +65,35 @@ $(document).ready(function () { }).trigger('resize') }) const render_item = function (data) { - let item = $('
').appendTo('.form-preview') + const item = $('
').appendTo('.form-preview') if (data.isFull === true) item.addClass('w-100') let handle = $('
' + data.fieldLabel + '
').appendTo(item) if (data.creatable === false) handle.addClass('readonly') else if (data.nullable === false) handle.addClass('not-nullable') + if (data.tip) { + let tip = $('').appendTo(handle.find('span')) + tip.attr('title', data.tip) + } + let action = $('
').appendTo(handle) if (data.displayType) { $('' + data.displayType.split('(')[0].trim() + '').appendTo(item) - $('[双列]').appendTo(action).click(function () { item.removeClass('w-100') }) - $('[单列]').appendTo(action).click(function () { item.addClass('w-100') }) + $('[双]').appendTo(action).click(function () { item.removeClass('w-100') }) + $('[单]').appendTo(action).click(function () { item.addClass('w-100') }) + $('[修改]').appendTo(action).click(function () { + let call = function (nv) { + let tip = item.find('.dd-handle span>i') + if (!nv) { + tip.remove() + } else { + if (tip.length === 0) tip = $('').appendTo(item.find('.dd-handle span')) + tip.attr('title', nv) + } + } + renderRbcomp() + }) $('[移除]').appendTo(action).click(function () { render_unset(data) item.remove() @@ -86,7 +103,12 @@ const render_item = function (data) { if (data.fieldName === '$DIVIDER$') { item.addClass('divider') - $('[修改]').appendTo(action).click(function () { modify_divider(handle) }) + $('[修改]').appendTo(action).click(function () { + let call = function (nv) { + item.find('.dd-handle span').text(nv || '分栏') + } + renderRbcomp() + }) $('[移除]').appendTo(action).click(function () { item.remove() check_empty() @@ -111,13 +133,75 @@ const check_empty = function () { if ($('.form-preview .dd-item').length === 0) $('.form-preview .nodata').show() else $('.form-preview .nodata').hide() } -const modify_divider = function (handle) { - let input = '
' - rb.alert(input, '修改分栏名称', { - html: true, showIcon: false, confirm: function () { - this.hide() - let name = $(this.refs['dlg']).find('input').val() || '分栏' - if (name) handle.find('span').text(name) - } - }) + +class DlgEditField extends React.Component { + constructor(props) { + super(props) + this.state = { ...props } + } + render() { + return ( +
this._dlg = c} tabIndex="-1"> +
+
+
+ +
+
+ {this.renderComp()} +
+
+
+
+ ) + } + renderComp() { + return ( +
+
+ + this._value = c} placeholder="输入填写提示" /> +
+
+ +
+
+ ) + } + confirm() { + let val = $val(this._value) + // eslint-disable-next-line react/prop-types + typeof this.props.call === 'function' && this.props.call(val) + this.hide() + } + componentDidMount() { + this.show() + // eslint-disable-next-line react/prop-types + if (this.props.value) $(this._value).val(this.props.value) + } + hide() { + $(this._dlg).modal('hide') + } + show() { + $(this._dlg).modal({ show: true, keyboard: true }) + } +} + +class DlgEditDivider extends DlgEditField { + constructor(props) { + super(props) + } + renderComp() { + return ( +
+
+ + this._value = c} placeholder="输入分栏线名称" /> +
+
+ +
+
+ ) + } } \ No newline at end of file