Skip to content

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

fix: 表单布局样式优化

parent 65a7a1bd
Hide whitespace changes
Inline Side-by-side
Showing with 158 additions and 133 deletions
package.json
View file @ 93fd2449
{
"name": "panda-xform",
"version": "5.7.0",
"description": "5.7.0 台账参数配置调整",
"version": "5.7.1",
"description": "5.7.1 表单布局样式优化",
"keywords": [
"panda-xform"
],
......
src/core/FormDesigner/config/otherSettings.js
View file @ 93fd2449
......@@ -108,11 +108,11 @@ const globalSettings = {
column: {
title: '整体布局',
type: 'number',
enum: [3, 4, 5],
enum: [2, 3, 4, 5],
default: 3,
enumNames: ['一行三列', '一行四列', '一行五列'],
widget:'RadioGroup',// 'radio', //'select',RadioGroup
isMultiple:true,
enumNames: ['一行二列', '一行三列', '一行四列', '一行五列'],
widget: 'RadioGroup',
isMultiple: true,
props: {
placeholder: '默认一行三列',
},
......@@ -125,16 +125,16 @@ const globalSettings = {
enumNames: ['左右', '上下'],
widget: 'select',
},
/* labelWidth: {
title: '标签宽度',
type: 'number',
widget: 'slider',
max: 300,
default: 120,
props: {
hideNumber: true,
},
}, */
/* labelWidth: {
title: '标签宽度',
type: 'number',
widget: 'slider',
max: 300,
default: 120,
props: {
hideNumber: true,
},
}, */
},
}
......
src/core/FormDesigner/config/settings.js
View file @ 93fd2449
......@@ -12,7 +12,7 @@ const groupStyle = {
properties: {}
},
width: {
title: '元素宽度',
title: '控件占比',
type: 'string',
widget: 'RadioGroupW',
},
......@@ -255,7 +255,7 @@ const textWidgets = [
dependencies: ['tableTypeParent', 'IsSystemField'],
},
width: {
title: '元素宽度',
title: '控件占比',
type: 'string',
widget: 'RadioGroupW',
disabled: disabled,
......@@ -376,7 +376,7 @@ const textWidgets = [
},
},
width: {
title: '元素宽度',
title: '控件占比',
description: '默认值100%',
type: 'string',
widget: 'RadioGroupW',
......@@ -536,7 +536,7 @@ const textWidgets = [
widget: 'InputAddon',
},
width: {
title: '元素宽度',
title: '控件占比',
type: 'string',
widget: 'RadioGroupW',
},
......@@ -617,7 +617,7 @@ const textWidgets = [
properties: {}
},
width: {
title: '元素宽度',
title: '控件占比',
type: 'string',
widget: 'RadioGroupW',
},
......@@ -723,7 +723,7 @@ const textWidgets = [
properties: {}
},
width: {
title: '元素宽度',
title: '控件占比',
type: 'string',
widget: 'RadioGroupW',
disabled: disabled,
......@@ -813,7 +813,7 @@ const textWidgets = [
properties: {}
},
width: {
title: '元素宽度',
title: '控件占比',
type: 'string',
widget: 'RadioGroupW',
},
......@@ -986,7 +986,7 @@ const selectWidgets = [
properties: {}
},
width: {
title: '元素宽度',
title: '控件占比',
type: 'string',
widget: 'RadioGroupW',
},
......@@ -1112,7 +1112,7 @@ const selectWidgets = [
properties: {}
},
width: {
title: '元素宽度',
title: '控件占比',
type: 'string',
widget: 'RadioGroupW',
},
......@@ -1238,7 +1238,7 @@ const selectWidgets = [
properties: {}
},
width: {
title: '元素宽度',
title: '控件占比',
type: 'string',
widget: 'RadioGroupW',
},
......@@ -1325,7 +1325,7 @@ const selectWidgets = [
properties: {}
},
width: {
title: '元素宽度',
title: '控件占比',
type: 'string',
widget: 'RadioGroupW',
},
......@@ -1512,7 +1512,7 @@ const selectWidgets = [
properties: {}
},
width: {
title: '元素宽度',
title: '控件占比',
type: 'string',
widget: 'RadioGroupW',
},
......@@ -1635,7 +1635,7 @@ const businessWidgets = [
labelWidth: 80,
},
width: {
title: '元素宽度',
title: '控件占比',
type: 'string',
widget: 'RadioGroupW',
},
......@@ -1731,7 +1731,7 @@ const businessWidgets = [
properties: {}
},
width: {
title: '元素宽度',
title: '控件占比',
type: 'string',
widget: 'RadioGroupW',
},
......@@ -1949,7 +1949,7 @@ const dateWidgets = [
properties: {}
},
width: {
title: '元素宽度',
title: '控件占比',
type: 'string',
widget: 'RadioGroupW',
},
......@@ -2045,7 +2045,7 @@ const dateWidgets = [
properties: {}
},
width: {
title: '元素宽度',
title: '控件占比',
type: 'string',
widget: 'RadioGroupW',
},
......@@ -2178,7 +2178,7 @@ const fileWidgets = [
properties: {}
},
width: {
title: '元素宽度',
title: '控件占比',
type: 'string',
widget: 'RadioGroupW',
},
......@@ -2280,7 +2280,7 @@ const mapWidgets = [
properties: {}
},
width: {
title: '元素宽度',
title: '控件占比',
type: 'string',
widget: 'RadioGroupW',
},
......@@ -2374,7 +2374,7 @@ const mapWidgets = [
properties: {}
},
width: {
title: '元素宽度',
title: '控件占比',
type: 'string',
widget: 'RadioGroupW',
},
......@@ -2461,7 +2461,7 @@ const mapWidgets = [
properties: {}
},
width: {
title: '元素宽度',
title: '控件占比',
type: 'string',
widget: 'RadioGroupW',
},
......@@ -2548,7 +2548,7 @@ const mapWidgets = [
properties: {}
},
width: {
title: '元素宽度',
title: '控件占比',
type: 'string',
widget: 'RadioGroupW',
},
......@@ -2668,7 +2668,7 @@ const advancedWidgets = [
properties: {}
},
width: {
title: '元素宽度',
title: '控件占比',
type: 'string',
widget: 'RadioGroupW',
},
......@@ -2745,7 +2745,7 @@ const advancedWidgets = [
properties: {}
},
width: {
title: '元素宽度',
title: '控件占比',
type: 'string',
widget: 'RadioGroupW',
},
......
src/core/widgets/settings/RadioGroupW/index.js deleted 100644 → 0
View file @ 65a7a1bd
/*
* @Author: 634665781 634665781@qq.com
* @Date: 2023-12-06 17:55:24
* @LastEditors: 634665781 634665781@qq.com
* @LastEditTime: 2023-12-11 16:31:35
* @FilePath: \xform\src\core\widgets\settings\RadioGroup\index.js
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%堵
*/
import React, { useEffect, useState } from 'react'
import { Radio } from 'antd'
const TableNames = (props) => {
let num = sessionStorage.getItem('RadioButtonValue') || 3
const { value, schema, onChange } = props
let val = '33.3%'
if (num == 4) val = '25%'
if (num == 5) val = '20%'
const [values, setvalues] = useState(value || val)
const onSelect = (value) => {
setvalues(value)
onChange(value)
}
const getHtml = () => {
if (num == 3) {
let val = ['33.3%', '66.6%', '100%']
// let width=['50px','100px','150px']
return ['1/3', '2/3', '1'].map((v, i) => {
return <Radio.Button style={{ textAlign: 'center' }} value={val[i]}>{v
}</Radio.Button>
})
}
if (num == 4) {
let val = ['25%', '50%', '75%', '100%']
// let width=['50px','100px','150px','200px']
return ['1/4', '1/2', '3/4', '1'].map((v, i) => {
return <Radio.Button style={{ textAlign: 'center' }} value={val[i]}>{v
}</Radio.Button>
})
}
if (num == 5) {
let val = ['20%', '40%', '60%', '80%', '100%']
//let width=['50px','100px','150px','200px','250px']
return ['1/5', '2/5', '3/5', '4/5', '1'].map((v, i) => {
return <Radio.Button style={{ textAlign: 'center' }} value={val[i]}>{v
}</Radio.Button>
})
}
}
return (
<Radio.Group onChange={onSelect} defaultValue={values} buttonStyle="solid">
{
getHtml()
}
</Radio.Group>
)
}
export default TableNames
\ No newline at end of file
src/core/widgets/settings/RadioGroup/index.js → src/core/widgets/settings/form/RadioGroup/index.js
View file @ 93fd2449
......@@ -8,35 +8,37 @@
*/
import React, { useEffect, useState } from 'react'
import { Radio } from 'antd'
import styles from './index.less'
const TableNames = (props) => {
const RadioGroup = (props) => {
const { value, schema, onChange } = props
const [values, setvalues] = useState(value)
const onSelect = (value) => {
setvalues(value)
onChange(value)
sessionStorage.setItem('RadioButtonValue', value.target.value
)
sessionStorage.setItem('RadioButtonValue', value.target.value)
}
return (
<Radio.Group onChange={onSelect} defaultValue={value} buttonStyle="solid">
{schema?.enum?.map((v, i) => {
return <Radio.Button value={v}>{schema.enumNames[i]
}</Radio.Button>
})
}
</Radio.Group>
<div className={styles.radioGroup}>
<Radio.Group
onChange={onSelect}
defaultValue={value}
buttonStyle="solid"
>
{
schema?.enum?.map((v, i) => {
return (
<Radio.Button key={v} value={v}>{schema.enumNames[i]}</Radio.Button>
)
})
}
</Radio.Group>
</div>
)
}
export default TableNames
\ No newline at end of file
export default RadioGroup
\ No newline at end of file
src/core/widgets/settings/form/RadioGroup/index.less 0 → 100644
View file @ 93fd2449
@import '~antd/es/style/themes/default.less';
.radioGroup {
.@{ant-prefix}-radio-group {
.@{ant-prefix}-radio-button-wrapper {
padding: 0 9px;
}
}
}
\ No newline at end of file
src/core/widgets/settings/form/index.js
View file @ 93fd2449
......@@ -7,10 +7,12 @@
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import TableNames from './TableNames'
import RadioGroup from './RadioGroup'
const form = {
TableNames,
RadioGroup,
}
export default form
\ No newline at end of file
src/core/widgets/settings/groupStyle/RadioGroupW/index.js 0 → 100644
View file @ 93fd2449
import React, { useEffect, useMemo, useState } from 'react'
import { Radio } from 'antd'
import styles from './index.less'
const TableNames = (props) => {
let num = sessionStorage.getItem('RadioButtonValue') || 3
const { value, schema, onChange } = props
let val = '33.3%'
if (num == 3) val = '50%'
if (num == 4) val = '25%'
if (num == 5) val = '20%'
const [values, setvalues] = useState(value || val)
const options = useMemo(() => {
if (num == 2) {
return [
{ label: '1/2', value: '50%' },
{ label: '整行', value: '100%' },
]
} else if (num == 4) {
return [
{ label: '1/4', value: '25%' },
{ label: '2/4', value: '50%' },
{ label: '3/4', value: '75%' },
{ label: '整行', value: '100%' },
]
} else if (num === 5) {
return [
{ label: '1/5', value: '20%' },
{ label: '2/5', value: '40%' },
{ label: '4/5', value: '60%' },
{ label: '4/5', value: '80%' },
{ label: '整行', value: '100%' },
]
}
return [
{ label: '1/3', value: '33.3%' },
{ label: '2/3', value: '66.6%' },
{ label: '整行', value: '100%' },
]
}, [num])
const onSelect = (e) => {
setvalues(e.target.value)
onChange(e.target.value)
}
return (
<div className={styles.radioGroupW}>
<Radio.Group onChange={onSelect} value={values} buttonStyle="solid">
<div style={{ width: '100%', display: 'flex' }}>
{
options.map((v, i) => {
return (
<div style={{ flex: 1, marginLeft: i === 0 ? '0' : '-1px' }}>
<Radio.Button style={{ textAlign: 'center' }} value={v.value}>{v.label}</Radio.Button>
</div>
)
})
}
</div>
</Radio.Group>
</div>
)
}
export default TableNames
\ No newline at end of file
src/core/widgets/settings/groupStyle/RadioGroupW/index.less 0 → 100644
View file @ 93fd2449
@import '~antd/es/style/themes/default.less';
.radioGroupW {
width: 100%;
.@{ant-prefix}-radio-group {
width: 100%;
}
.@{ant-prefix}-radio-button-wrapper {
width: 100%;
}
}
\ No newline at end of file
src/core/widgets/settings/groupStyle/index.js
View file @ 93fd2449
......@@ -5,6 +5,7 @@ import DecimalDigits from './DecimalDigits'
import FileTypeSelect from './FileTypeSelect'
import ContentHTML from './ContentHTML'
import StyleHTML from './StyleHTML'
import RadioGroupW from './RadioGroupW'
const groupStyle = {
PercentSlider,
......@@ -14,6 +15,7 @@ const groupStyle = {
FileTypeSelect,
ContentHTML,
StyleHTML,
RadioGroupW,
}
export default groupStyle
\ No newline at end of file
src/core/widgets/settings/index.js
View file @ 93fd2449
......@@ -5,8 +5,6 @@ import groupVerify from './groupVerify'
import groupStyle from './groupStyle'
import BooleanSwitch from './BooleanSwitch'
import InputAddon from './InputAddon'
import RadioGroup from './RadioGroup'
import RadioGroupW from './RadioGroupW'
const settings = {
...form,
...groupBase,
......@@ -14,9 +12,7 @@ const settings = {
...groupVerify,
...groupStyle,
BooleanSwitch,
InputAddon,
RadioGroup,
RadioGroupW
InputAddon
}
export default settings
\ 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