Skip to content

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

fix: 增加字段名称详细信息显示,设置更换为上下结构

parent c1b3d28d
Hide whitespace changes
Inline Side-by-side
Showing with 224 additions and 71 deletions
package.json
View file @ 10215674
{
"name": "panda-xform",
"version": "2.4.8",
"description": "2.4.8: 设置修改，增加控件类型显示以及优化样式",
"version": "2.4.9",
"description": "2.4.9: 增加字段名称详细信息显示,设置更换为上下结构",
"keywords": [
"panda-xform"
],
......@@ -11,7 +11,7 @@
"build": "cross-env BUILD_TYPE=lib father-build && cross-env BUILD_TYPE=es father-build",
"dev": "node examples/server.js",
"release": "np --no-cleanup --yolo --tag",
"preOnly": "yarn build",
"prepublishOnly": "yarn build",
"lint": "yarn lint:js && yarn lint:prettier",
"lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src",
"lint:fix": "yarn lint:js -- --fix",
......
src/constant/constant.js
View file @ 10215674
......@@ -27,7 +27,7 @@ const dateDescribe = {
endTime: moment(),
readOnly: false,
},
};
}
const dateType = {
日期时间: 'date',
时间: 'time',
......@@ -36,7 +36,7 @@ const dateType = {
日期月份: 'month',
日期周: 'week',
时分秒: 'time',
};
}
const dateFormat = {
日期时间: 'YYYY-MM-DD HH:mm:ss',
时间: 'YYYY-MM-DD HH:mm:ss',
......@@ -45,7 +45,7 @@ const dateFormat = {
日期月份: 'YYYY-MM',
日期周: 'YYYY-MM-DD',
时分秒: 'HH:mm:ss',
};
}
const RegExpObject = {
number: '^(\\-|\\+)?((0\\.\\d+)|([0-9])|([1-9]\\d+(\\.\\d+)?))$',// 数字，支持正、负、浮点数
digits: '^(\\-|\\+)?(\\d|[1-9]\\d+)$', // 整数
......@@ -53,7 +53,55 @@ const RegExpObject = {
identity: '(^\\d{15}$)|(^\\d{18}$)|(^\\d{17}(\\d|X|x)$)',
mobile: '^1(3|4|5|6|7|8|9)\\d{9}$',
bankAccount: '^(\\d{16}|\\d{19})$',
};
const dateArray = { timeControl: ['时间', '仅时间', '日期', '日期月份', '日期年份', '时分秒'] };
const doNotDisplayInEditModelShape = ['编码'];
export { dateDescribe, dateType, dateFormat, RegExpObject, dateArray, doNotDisplayInEditModelShape };
}
const dateArray = { timeControl: ['时间', '仅时间', '日期', '日期月份', '日期年份', '时分秒'] }
const doNotDisplayInEditModelShape = ['编码']
const widgetData = {
'TextInput': { name: '文本', type: '文本控件', },
'TextArea': { name: '多行文本', type: '文本控件', },
'NumberInput': { name: '数值', type: '文本控件', },
'RichText': { name: '富文本', type: '文本控件', },
'Coding': { name: '编码', type: '文本控件' },
'ComboBox': { name: '下拉框', type: '选择器控件' },
'RadioButton': { name: '单选框', type: '选择器控件' },
'CheckBox': { name: '复选框', type: '选择器控件' },
'SwitchSelector': { name: '开关', type: '选择器控件' },
'RelevanceSelect': { name: '关联选择', type: '选择器控件' },
'CascadeSelector': { name: '联级选择', type: '选择器控件' },
'PersonSelector': { name: '人员选择', type: '业务控件' },
'DeptSelector': { name: '部门选择', type: '业务控件' },
'AccountSelector': { name: '部门选择', type: '业务控件' },
'DateTime': { name: '日期选择', type: '时间控件' },
'Time': { name: '时间选择', type: '时间控件' },
'FileUpload': { name: '附件', type: '附件控件' },
'Coordinate': { name: '坐标控件', type: 'GIS控件' },
'Device': { name: '设备选择', type: 'GIS控件' },
'SearchLocation': { name: '位置坐标', type: 'GIS控件' },
'RelationForm': { name: '关联表单', type: '高级控件' },
'AutoCalculate': { name: '自动计算', type: '高级控件' },
}
const getStyles = (type) => {
switch (type) {
case '文本控件': return { background: '#DEFED9', color: '#48BC2E' }
case '选择器控件': return { background: '#E1EDFE', color: '#0765F3' }
case '业务控件': return { background: '#FCE2FA', color: '#DD3CC4' }
case '时间控件': return { background: '#E1EDFE', color: '#0765F3' }
case '附件控件': return { background: '#FCF2E0', color: '#F59E06' }
case 'GIS控件': return { background: '#D1F5EB', color: '#0A9C71' }
case '高级控件': return { background: '#D6F1FE', color: '#0195D4' }
default: return {}
}
}
export {
dateDescribe,
dateType,
dateFormat,
RegExpObject,
dateArray,
doNotDisplayInEditModelShape,
widgetData,
getStyles,
}
src/core/FormDesigner/config/settings.js
View file @ 10215674
......@@ -174,6 +174,10 @@ const textWidgets = [
labelWidth: 120,
description: '是否解析为二维码格式(手持端专用)',
},
// hiddenCondition: {
// title: '隐藏条件',
// type: 'string'
// },
description: {
title: '说明',
type: 'string',
......@@ -685,7 +689,7 @@ const selectWidgets = [
type: 'array',
required: '{{formData.sourceType === "手动输入"}}',
hidden: '{{formData.sourceType !== "手动输入"}}',
default: [],
default: [{ value: '选项一' }],
widget: 'simpleList',
items: {
type: 'object',
......@@ -707,7 +711,6 @@ const selectWidgets = [
},
},
props: {
// hideMove: true,
hideCopy: true,
},
displayType: 'row',
......
src/core/FormDesigner/index.js
View file @ 10215674
......@@ -180,24 +180,25 @@ const FormDesigner = (props, ref) => {
]
const getFields = (schema) => {
let fields = []
let array = []
let parent = schema?.properties
if (isObject(parent)) {
for (let v in parent) {
let child = parent[v]?.properties
if (isObject(child)) {
for (let s in child) {
fields.push(s)
array.push({ ...child[s], fieldName: s })
}
}
}
}
return fields
return array
}
const onSchemaChange = (schema) => {
let fields = getFields(schema)
window.sessionStorage.setItem('designerRef', fields)
window.designer = fields
console.log(1)
}
const testSubmit = async () => {
......
src/core/widgets/settings/groupBase/FieldNames/index.js
View file @ 10215674
import React, { useContext, useEffect, useMemo, useState } from 'react'
import { Input, Select, message } from 'antd'
import { Input, Select, message, Radio, Row, Col } from 'antd'
import Drag from '../../../../components/Drag'
import { PlusOutlined } from '@ant-design/icons'
import { LoadTableFields, ReloadTableFields } from '../../../../../apis/process'
import styles from './index.less'
import { widgetData, getStyles } from '../../../../../constant/constant'
const FieldNames = (props) => {
let fieldsStr = window.sessionStorage.getItem('designerRef') || ''
let fields = fieldsStr.split(',') || []
let fields = window.designer || []
const { value, onChange, addons } = props
const { tableNameParent, widget } = addons.formData
const [fieldName, setFieldName] = useState([])
const [visible, setVisible] = useState(false)
const [radioValue, setRadioValue] = useState(value)
const options = useMemo(() => {
if (widget === 'RelevanceSelect' && addons.dataPath === 'fieldParent') {
return fieldName
} else {
let array = []
fieldName?.forEach(v => {
let item = fields.find(s => s.fieldName === v.name) || {}
array.push({ ...v, ...item })
})
return array
}
return fieldName.filter(v => !fields.includes(v.name))
}, [fieldName, addons])
const plusShow = useMemo(() => {
if (widget === 'RelevanceSelect' && addons.dataPath === 'fieldParent') {
return false
}
return true
}, [addons, widget])
const selectChange = (value) => {
if (addons.dataPath === '$id') {
if (widget !== 'RelationForm') {
......@@ -28,6 +46,10 @@ const FieldNames = (props) => {
onChange(value)
}
const radioChange = (e) => {
setRadioValue(e.target.value)
}
const onFocus = async () => {
if (!tableNameParent) {
return message.info('缺少表名!')
......@@ -38,6 +60,17 @@ const FieldNames = (props) => {
}
}
const iconClick = () => {
onFocus()
setRadioValue(value)
setVisible(true)
}
const onOk = () => {
onChange(radioValue)
setVisible(false)
}
useEffect(() => {
if (value && value.includes('#/')) {
let array = value.split('/')
......@@ -50,18 +83,94 @@ const FieldNames = (props) => {
}, [value])
return (
<Select
onFocus={onFocus}
onChange={selectChange}
style={{ width: '100%' }}
showSearch
optionFilterProp='children'
value={value}
fieldNames={{ label: 'name', value: 'name' }}
options={options}
>
</Select>
<div className={styles.fieldNames}>
<Select
onFocus={onFocus}
onChange={selectChange}
style={{ width: '100%' }}
showSearch
optionFilterProp='children'
value={value}
suffixIcon={null}
getPopupContainer={(targterNode) => targterNode.parentElement || document.body}
>
{
options.map(v => {
if (!v.widget) {
return <Select.Option key={v.name} value={v.name}>{v.name}</Select.Option>
}
return null
})
}
</Select>
{
plusShow ? (
<div className={styles.plus}>
<PlusOutlined onClick={iconClick} />
</div>
) : null
}
<Drag
title='字段配置'
width='50%'
visible={visible}
onCancel={() => setVisible(false)}
onOk={onOk}
bodyStyle={{ height: '500px', overflow: 'auto' }}
>
<Radio.Group onChange={radioChange} value={radioValue} style={{ width: '100%' }}>
<div className={styles.groupBox} style={{ display: options.filter(v => !v.widget).length ? 'block' : 'none' }}>
<div className={styles.boxTitle} style={{ color: 'red' }}>未配置字段</div>
<Row>
{
options.map(v => {
if (!v.widget) {
return (
<Col span={8} style={{ marginTop: '10px' }}>
<Radio key={v.name} value={v.name}>{v.name}</Radio>
</Col>
)
}
return null
})
}
</Row>
</div>
<div className={styles.groupBox} style={{ marginTop: '20px', display: options.filter(v => v.widget).length ? 'block' : 'none' }}>
<div className={styles.boxTitle} style={{ color: '#40a9ff' }}>已配置字段</div>
<Row>
{
options.map(v => {
if (v.widget) {
return (
<Col span={8} style={{ marginTop: '15px', display: 'flex', justifyContent: 'space-between' }}>
<Radio disabled key={v.name} value={v.name}>
{v.name}
</Radio>
<div
style={{
fontSize: '12px',
borderRadius: '5px',
padding: '0 7px',
border: '1px solid',
marginRight: '20px',
...getStyles(widgetData[v.widget]?.type)
}}
>{widgetData[v.widget]?.name}</div>
</Col>
)
}
return null
})
}
</Row>
</div>
</Radio.Group>
</Drag>
</div>
)
}
export default FieldNames
\ No newline at end of file
src/core/widgets/settings/groupBase/FieldNames/index.less 0 → 100644
View file @ 10215674
.fieldNames {
position: relative;
.plus {
position: absolute;
right: 10px;
top: 5px;
&:hover {
color: #409eff;
}
}
.groupBox {
width: 100%;
border: 1px solid #e9e7e7;
padding: 10px;
border-radius: 10px;
position: relative;
.boxTitle {
position: absolute;
font-size: 14px;
top: -11px;
left: 27px;
padding: 0 7px;
background: white;
font-weight: bold;
}
}
}
\ No newline at end of file
src/core/widgets/settings/groupBase/WidgetType/index.js
View file @ 10215674
import React from 'react'
const data = {
'TextInput': { name: '文本', type: '文本控件', },
'TextArea': { name: '多行文本', type: '文本控件', },
'NumberInput': { name: '数值', type: '文本控件', },
'RichText': { name: '富文本', type: '文本控件', },
'Coding': { name: '编码', type: '文本控件' },
'ComboBox': { name: '下拉框', type: '选择器控件' },
'RadioButton': { name: '单选框', type: '选择器控件' },
'CheckBox': { name: '复选框', type: '选择器控件' },
'SwitchSelector': { name: '开关', type: '选择器控件' },
'RelevanceSelect': { name: '关联选择', type: '选择器控件' },
'CascadeSelector': { name: '联级选择', type: '选择器控件' },
'PersonSelector': { name: '人员选择', type: '业务控件' },
'DeptSelector': { name: '部门选择', type: '业务控件' },
'AccountSelector': { name: '部门选择', type: '业务控件' },
'DateTime': { name: '日期选择', type: '时间控件' },
'Time': { name: '时间选择', type: '时间控件' },
'FileUpload': { name: '附件', type: '附件控件' },
'Coordinate': { name: '坐标控件', type: 'GIS控件' },
'Device': { name: '设备选择', type: 'GIS控件' },
'SearchLocation': { name: '位置坐标', type: 'GIS控件' },
'RelationForm': { name: '关联表单', type: '高级控件' },
'AutoCalculate': { name: '自动计算', type: '高级控件' },
}
import { widgetData, getStyles } from '../../../../../constant/constant'
const WidgetType = (props) => {
const { value, onChange } = props
const getStyles = (type) => {
switch (type) {
case '文本控件': return { background: '#DEFED9', color: '#48BC2E' }
case '选择器控件': return { background: '#E1EDFE', color: '#0765F3' }
case '业务控件': return { background: '#FCE2FA', color: '#DD3CC4' }
case '时间控件': return { background: '#E1EDFE', color: '#0765F3' }
case '附件控件': return { background: '#DEFED9', color: '#48BC2E' }
case 'GIS控件': return { background: '#D1F5EB', color: '#0A9C71' }
case '高级控件': return { background: '#D6F1FE', color: '#0195D4' }
default: return {}
}
}
return (
<span
onClick={e => onChange('TextInput')}
......@@ -49,9 +12,9 @@ const WidgetType = (props) => {
borderRadius: '5px',
padding: '0 7px',
border: '1px solid',
...getStyles(data[value]?.type)
...getStyles(widgetData[value]?.type)
}}>
{data[value]?.name}
{widgetData[value]?.name}
</span>
)
......
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