Skip to content

X
xform
Commit a9f4e41a authored by 田翔's avatar 田翔
Browse files
Options

fix: 防止出现死循环

parent 29dfb800
Hide whitespace changes
Inline Side-by-side
Showing with 213 additions and 117 deletions
package.json
View file @ a9f4e41a
{ {
"name": "panda-xform", "name": "panda-xform",
"version": "1.6.1", "version": "1.6.2",
"description": "1.6.1: 可编辑选择器修改", "description": "1.6.2: 防止出现死循环",
"keywords": [ "keywords": [
"panda-xform" "panda-xform"
], ],
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
"fr-generator": "^2.8.4", "fr-generator": "^2.8.4",
"http-proxy-middleware": "^1.0.6", "http-proxy-middleware": "^1.0.6",
"moment": "^2.29.1", "moment": "^2.29.1",
"qrcode.react": "^1.0.1", "qrcode.react": "^3.1.0",
"react": "17.0.2", "react": "17.0.2",
"react-file-viewer": "^1.2.1", "react-file-viewer": "^1.2.1",
"react-sign2": "^0.0.3", "react-sign2": "^0.0.3",
...@@ -126,4 +126,4 @@ ...@@ -126,4 +126,4 @@
"publishConfig": { "publishConfig": {
"registry": "https://g.civnet.cn:4873" "registry": "https://g.civnet.cn:4873"
} }
} }
\ No newline at end of file
src/core/FormDesigner/config/settings.js
View file @ a9f4e41a
...@@ -1275,16 +1275,99 @@ const selectWidgets = [ ...@@ -1275,16 +1275,99 @@ const selectWidgets = [
}, },
} }
}, },
// { {
// text: '开关', text: '开关',
// name: '开关', name: '开关',
// schema: { schema: {
// title: '开关', title: '开关',
// name: '开关', name: '开关',
// type: 'Boolean', type: 'boolean',
// widget: 'Switch', widget: 'SwitchSelector',
// }, },
// }, setting: {
groupBase: {
title: '基础信息',
type: 'object',
properties: {}
},
$id: {
title: '字段名称',
type: 'string',
widget: 'FieldNames',
required: true,
displayType: 'row',
labelWidth: 80,
},
title: {
title: '标题',
required: true,
type: 'string',
widget: 'htmlInput',
displayType: 'row',
labelWidth: 80,
},
presetValue: {
title: '默认值',
type: 'boolean',
widget: 'BooleanSwitch',
displayType: 'row',
labelWidth: 80,
},
// placeholder: {
// title: '提示语',
// type: 'string',
// displayType: 'row',
// labelWidth: 80,
// default: '请输入位置'
// },
groupSetting: {
title: '控件设置',
type: 'object',
properties: {}
},
disabled: {
title: '只读',
type: 'boolean',
widget: 'checkbox',
default: false,
width: '25%',
},
hidden: {
title: '隐藏',
type: 'boolean',
widget: 'checkbox',
default: false,
width: '25%',
},
description: {
title: '说明',
type: 'string',
displayType: 'row',
labelWidth: 55,
},
groupStyle: {
title: '控件样式',
type: 'object',
properties: {}
},
width: {
title: '元素宽度',
type: 'string',
widget: 'percentSlider',
},
labelWidth: {
title: '标签宽度',
description: '默认值110',
default: 110,
type: 'number',
widget: 'slider',
max: 400,
props: {
hideNumber: true,
},
},
},
},
{ {
text: '关联选择', text: '关联选择',
name: '关联选择', name: '关联选择',
...@@ -1907,6 +1990,7 @@ const dateWidgets = [ ...@@ -1907,6 +1990,7 @@ const dateWidgets = [
name: '日期选择', name: '日期选择',
schema: { schema: {
title: '日期选择', title: '日期选择',
name: '日期选择',
type: 'string', type: 'string',
widget: 'DateTime', widget: 'DateTime',
}, },
...@@ -2041,6 +2125,7 @@ const dateWidgets = [ ...@@ -2041,6 +2125,7 @@ const dateWidgets = [
icon: <FieldTimeOutlined />, icon: <FieldTimeOutlined />,
schema: { schema: {
title: '时间选择', title: '时间选择',
name: '时间选择',
type: 'string', type: 'string',
widget: 'Time', widget: 'Time',
}, },
...@@ -2361,12 +2446,11 @@ const mapWidgets = [ ...@@ -2361,12 +2446,11 @@ const mapWidgets = [
default: false, default: false,
width: '25%', width: '25%',
}, },
emphasis: { description: {
title: '强调', title: '说明',
type: 'boolean', type: 'string',
widget: 'checkbox', displayType: 'row',
default: false, labelWidth: 55,
width: '25%',
}, },
groupStyle: { groupStyle: {
title: '控件样式', title: '控件样式',
...@@ -2447,12 +2531,11 @@ const mapWidgets = [ ...@@ -2447,12 +2531,11 @@ const mapWidgets = [
default: false, default: false,
width: '25%', width: '25%',
}, },
emphasis: { description: {
title: '强调', title: '说明',
type: 'boolean', type: 'string',
widget: 'checkbox', displayType: 'row',
default: false, labelWidth: 55,
width: '25%',
}, },
groupStyle: { groupStyle: {
title: '控件样式', title: '控件样式',
...@@ -2533,12 +2616,11 @@ const mapWidgets = [ ...@@ -2533,12 +2616,11 @@ const mapWidgets = [
default: false, default: false,
width: '25%', width: '25%',
}, },
emphasis: { description: {
title: '强调', title: '说明',
type: 'boolean', type: 'string',
widget: 'checkbox', displayType: 'row',
default: false, labelWidth: 55,
width: '25%',
}, },
groupStyle: { groupStyle: {
title: '控件样式', title: '控件样式',
......
src/core/widgets/select/SwitchSelector/index.js 0 → 100644
View file @ a9f4e41a
import React, { useEffect } from 'react'
import { Switch } from 'antd'
const SwitchSelector = (props) => {
const { value, onChange, schema, addons } = props
const { disabled, presetValue } = schema
console.log('props', props)
useEffect(() => {
if (addons) {
addons.setValue(addons.dataPath, presetValue)
} else {
onChange(presetValue)
}
}, [presetValue])
const switchChange = (checked) => {
if (addons) {
onChange(checked)
}
}
return (
<Switch
checked={value}
disabled={disabled}
checkedChildren={'开启'}
unCheckedChildren="关闭"
onChange={switchChange}
>
</Switch>
)
}
export default SwitchSelector
\ No newline at end of file
src/core/widgets/select/index.js
View file @ a9f4e41a
...@@ -3,6 +3,7 @@ import RadioButton from './RadioButton' ...@@ -3,6 +3,7 @@ import RadioButton from './RadioButton'
import CheckBox from './CheckBox' import CheckBox from './CheckBox'
import CascadeSelector from './CascadeSelector' import CascadeSelector from './CascadeSelector'
import RelevanceSelect from './RelevanceSelect' import RelevanceSelect from './RelevanceSelect'
import SwitchSelector from './SwitchSelector'
import PersonSelector from './PersonSelector' import PersonSelector from './PersonSelector'
import AccountSelector from './AccountSelector' import AccountSelector from './AccountSelector'
import DeptSelector from './DeptSelector' import DeptSelector from './DeptSelector'
...@@ -11,6 +12,7 @@ const select = { ...@@ -11,6 +12,7 @@ const select = {
ComboBox, ComboBox,
RadioButton, RadioButton,
CheckBox, CheckBox,
SwitchSelector,
RelevanceSelect, RelevanceSelect,
PersonSelector, PersonSelector,
CascadeSelector, CascadeSelector,
......
src/core/widgets/settings/BooleanSwitch/index.js
View file @ a9f4e41a
...@@ -20,7 +20,7 @@ const BooleanSwitch = (props) => { ...@@ -20,7 +20,7 @@ const BooleanSwitch = (props) => {
addons.setSchemaByPath('isMultiple', { ...schemas, isMultiple: false, hidden: false }) addons.setSchemaByPath('isMultiple', { ...schemas, isMultiple: false, hidden: false })
} }
} }
}, [addons, value]) }, [value])
return ( return (
<Switch <Switch
......
src/core/widgets/settings/groupBase/NumerDefault/index.js
View file @ a9f4e41a
...@@ -8,7 +8,7 @@ const NumerDefault = (props) => { ...@@ -8,7 +8,7 @@ const NumerDefault = (props) => {
return ( return (
<InputNumber <InputNumber
value={value} value={value}
onChange={value => onChange(value)} onChange={value => onChange(Number(value))}
/> />
) )
......
src/core/widgets/text/Coding/index.js
View file @ a9f4e41a
import React from 'react' import React from 'react'
import { Input, Popover } from 'antd'
import { QrcodeOutlined } from '@ant-design/icons'
import QRcode from 'qrcode.react'
const Coding = (props) => { const Coding = (props) => {
const { value, onChange } = props
const content = (
<div>
{/* <QRcode value={<div style={{ color: 'red' }}>123</div>} /> */}
<QRcode src='https://www.runoob.com/w3cnote/javascript-qrcodejs-library.html' />
</div>
)
return ( return (
<div>编码</div> <div>
<Input
addonAfter={
<Popover content={content}>
<QrcodeOutlined />
</Popover>
}
onChange={e => onChange(e.target.value)}
/>
</div>
) )
} }
......
src/core/widgets/text/NumberInput/index.js
View file @ a9f4e41a
...@@ -7,8 +7,12 @@ const NumberInput = (props) => { ...@@ -7,8 +7,12 @@ const NumberInput = (props) => {
const { disabled, presetValue, placeholder, prefix, formatter } = schema const { disabled, presetValue, placeholder, prefix, formatter } = schema
useEffect(() => { useEffect(() => {
onChange(presetValue) if (addons) {
}, [presetValue, formatter]) addons.setValueByPath(addons.dataPath, Number(presetValue))
} else {
onChange(Number(presetValue))
}
}, [presetValue])
const inputChange = (value) => { const inputChange = (value) => {
if (addons) { if (addons) {
......
src/main.less
View file @ a9f4e41a
@import '~antd/es/style/themes/default.less'; @import '~antd/es/style/themes/default.less';
@disabledBgColor: rgb(248 ,250, 252); @disabledBgColor: rgb(248, 250, 252);
@disabledColor: rgba(0, 0, 0, 0.7); @disabledColor: rgba(0, 0, 0, 0.7);
body #app { body #app {
background: transparent; background: transparent;
width: 100%; width: 100%;
...@@ -13,7 +12,6 @@ body #app { ...@@ -13,7 +12,6 @@ body #app {
@pandaXform-prefix-cls: ~'@{ant-prefix}-pandaXform'; @pandaXform-prefix-cls: ~'@{ant-prefix}-pandaXform';
.@{pandaXform-prefix-cls} { .@{pandaXform-prefix-cls} {
.fr-generator-container .left-layout { .fr-generator-container .left-layout {
.left-item { .left-item {
.anticon { .anticon {
...@@ -21,101 +19,76 @@ body #app { ...@@ -21,101 +19,76 @@ body #app {
} }
} }
} }
.@{ant-prefix}-tabs-content-holder { .@{ant-prefix}-tabs-content-holder {
height: 664px; height: 664px;
overflow: auto; overflow: auto;
} }
.fr-generator-container .right-layout { .fr-generator-container .right-layout {
width: 21rem; width: 21rem;
} }
.fr-container .fr-label-required { .fr-container .fr-label-required {
margin: 0; margin: 0;
} } //表单组横线样式
//表单组横线样式
.@{ant-prefix}-divider-horizontal { .@{ant-prefix}-divider-horizontal {
margin: 15px 0; margin: 15px 0;
} } //提示语样式
//提示语样式
input::-webkit-input-placeholder, input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder, textarea::-webkit-input-placeholder,
.@{ant-prefix}-select-selection-placeholder { .@{ant-prefix}-select-selection-placeholder {
color: #dad9d9; color: #dad9d9;
} } // 单行文本框
// 单行文本框
input[disabled] { input[disabled] {
color: @disabledColor; color: @disabledColor;
cursor: default; cursor: default;
background: @disabledBgColor; background: @disabledBgColor;
border: none; border: none;
} } // 多行文本框
// 多行文本框
.@{ant-prefix}-input[disabled] { .@{ant-prefix}-input[disabled] {
color: @disabledColor; color: @disabledColor;
box-shadow: none; box-shadow: none;
cursor: default; cursor: default;
background: @disabledBgColor; background: @disabledBgColor;
border: none; border: none;
} } //数值输入框样式修改
//数值输入框样式修改
.@{ant-prefix}-input-number-handler-wrap { .@{ant-prefix}-input-number-handler-wrap {
opacity: 1; opacity: 1;
} }
.@{ant-prefix}-input-number-disabled { .@{ant-prefix}-input-number-disabled {
border: none; border: none;
} } // 时间选择器的disabled样式
// 时间选择器的disabled样式
.@{ant-prefix}-picker-disabled { .@{ant-prefix}-picker-disabled {
cursor: default; cursor: default;
color: @disabledColor; color: @disabledColor;
background-color: rgb(250,250,250); background-color: rgb(250, 250, 250);
&+span {
& + span {
cursor: default; cursor: default;
} }
} } // radio的disabled样式
// radio的disabled样式
.@{ant-prefix}-radio-disabled { .@{ant-prefix}-radio-disabled {
cursor: default; cursor: default;
&+span {
& + span {
cursor: default; cursor: default;
color: @disabledColor; color: @disabledColor;
} }
.@{ant-prefix}-radio-inner { .@{ant-prefix}-radio-inner {
cursor: default; cursor: default;
&:after { &:after {
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
} }
} }
} } //复选框disabled的样式
//复选框disabled的样式
.@{ant-prefix}-checkbox-disabled { .@{ant-prefix}-checkbox-disabled {
& + span { &+span {
cursor: default; cursor: default;
color: @disabledColor; color: @disabledColor;
} }
.@{ant-prefix}-checkbox-inner { .@{ant-prefix}-checkbox-inner {
cursor: default; cursor: default;
&:after { &:after {
border-color: rgba(0, 0, 0, 0.5); border-color: rgba(0, 0, 0, 0.5);
} }
} }
} } // 下拉选未选的disabled样式
// 下拉选未选的disabled样式
.@{ant-prefix}-select-disabled.@{ant-prefix}-select:not(.@{ant-prefix}-select-customize-input) { .@{ant-prefix}-select-disabled.@{ant-prefix}-select:not(.@{ant-prefix}-select-customize-input) {
.@{ant-prefix}-select-selector { .@{ant-prefix}-select-selector {
color: @disabledColor; color: @disabledColor;
...@@ -123,24 +96,19 @@ body #app { ...@@ -123,24 +96,19 @@ body #app {
border: none; border: none;
background: @disabledBgColor; background: @disabledBgColor;
} }
} } // 下拉选已选的disabled样式
// 下拉选已选的disabled样式
.@{ant-prefix}-cascader-picker-disabled { .@{ant-prefix}-cascader-picker-disabled {
color: @disabledColor; color: @disabledColor;
background-color: rgb(250,250,250); background-color: rgb(250, 250, 250);
cursor: default; cursor: default;
border: none; border: none;
} } // 按钮的disabled样式
// 按钮的disabled样式
.@{ant-prefix}-btn[disabled] { .@{ant-prefix}-btn[disabled] {
text-shadow: none; text-shadow: none;
background: #ffffff; background: #ffffff;
border-color: #d9d9d9; border-color: #d9d9d9;
box-shadow: none; box-shadow: none;
cursor: default; cursor: default;
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
...@@ -150,19 +118,15 @@ body #app { ...@@ -150,19 +118,15 @@ body #app {
border-color: #d9d9d9; border-color: #d9d9d9;
box-shadow: none; box-shadow: none;
} }
} } // 上传组件的图片类型按钮的disabled样式
// 上传组件的图片类型按钮的disabled样式
.@{ant-prefix}-upload-disabled { .@{ant-prefix}-upload-disabled {
color: @disabledColor; color: @disabledColor;
cursor: default; cursor: default;
border: none; border: none;
.@{ant-prefix}-btn-default { .@{ant-prefix}-btn-default {
display: none; display: none;
} }
} } // 多选下的tag的disabled样式
// 多选下的tag的disabled样式
.@{ant-prefix}-select-disabled.@{ant-prefix}-select-multiple { .@{ant-prefix}-select-disabled.@{ant-prefix}-select-multiple {
.@{ant-prefix}-select-selection-item { .@{ant-prefix}-select-selection-item {
color: @disabledColor; color: @disabledColor;
...@@ -171,15 +135,12 @@ body #app { ...@@ -171,15 +135,12 @@ body #app {
border: none; border: none;
} }
} }
.@{ant-prefix}-select-disabled.@{ant-prefix}-select:not(.@{ant-prefix}-select-customize-input) { .@{ant-prefix}-select-disabled.@{ant-prefix}-select:not(.@{ant-prefix}-select-customize-input) {
.@{ant-prefix}-select-selector input { .@{ant-prefix}-select-selector input {
cursor: default; cursor: default;
} }
} } // 时间选择框
.@{ant-prefix}-picker-input>input[disabled] {
// 时间选择框
.@{ant-prefix}-picker-input > input[disabled] {
color: @disabledColor; color: @disabledColor;
} }
.@{ant-prefix}-picker-disabled { .@{ant-prefix}-picker-disabled {
...@@ -188,22 +149,18 @@ body #app { ...@@ -188,22 +149,18 @@ body #app {
display: none; display: none;
} }
} }
&-operate-group { &-operate-group {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
justify-content: flex-end; justify-content: flex-end;
padding: 10px 10px; padding: 10px 10px;
.@{pandaXform-prefix-cls}-operate-reset { .@{pandaXform-prefix-cls}-operate-reset {
margin-right: 10px; margin-right: 10px;
} }
.pandaXform-text-area { .pandaXform-text-area {
width: 100% !important; width: 100% !important;
} }
} }
&-group { &-group {
.@{pandaXform-prefix-cls}-title { .@{pandaXform-prefix-cls}-title {
display: flex; display: flex;
...@@ -211,56 +168,45 @@ body #app { ...@@ -211,56 +168,45 @@ body #app {
justify-content: center; justify-content: center;
font-size: 16px; font-size: 16px;
} }
i { i {
width: 3px; width: 3px;
height: 16px; height: 16px;
margin-right: 10px; margin-right: 10px;
background-color: #337ab7; background-color: #337ab7;
} }
.fr-label-object { .fr-label-object {
.fr-label-title { .fr-label-title {
padding: 10px 10px 0 0; padding: 10px 10px 0 0;
} }
.fr-label-title::after { .fr-label-title::after {
content: ''; content: '';
} }
} }
.b--black-20 { .b--black-20 {
border-color: rgba(232, 240, 237, 1); border-color: rgba(232, 240, 237, 1);
} }
} }
.emphasis { .emphasis {
input { input {
font-weight: bold; font-weight: bold;
} }
} }
.notEditable { .notEditable {
input { input {
cursor: default; cursor: default;
} }
} }
.@{pandaXform-prefix-cls}-divider-horizontal { .@{pandaXform-prefix-cls}-divider-horizontal {
margin: 10px; margin: 10px;
&:first-child { &:first-child {
display: none !important; display: none !important;
} }
} }
.@{pandaXform-prefix-cls}-input[disabled] { .@{pandaXform-prefix-cls}-input[disabled] {
background-color: #ffffff60 !important; background-color: #ffffff60 !important;
} }
/** @Tips: 在原有框架下，表单渲染后，使用的是flex自动布局，与calc来计算组件宽度，未设置固定宽度，导致页面布局错乱 */ /** @Tips: 在原有框架下，表单渲染后，使用的是flex自动布局，与calc来计算组件宽度，未设置固定宽度，导致页面布局错乱 */
.fr-content .fr-item-wrapper>div {
.fr-content .fr-item-wrapper > div {
width: 100%; width: 100%;
} }
} }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment