Skip to content

X
xform
Commit 030246ab authored by 杨子龙's avatar 杨子龙
Browse files
Options

优化控件配置

parent 8fca1078
Hide whitespace changes
Inline Side-by-side
Showing with 180 additions and 151 deletions
src/core/FormDesigner/config/settings.js
View file @ 030246ab
...@@ -3981,11 +3981,22 @@ const mapWidgets = [ ...@@ -3981,11 +3981,22 @@ const mapWidgets = [
type: 'string', type: 'string',
default: "阀门地图" default: "阀门地图"
}, },
hiddenCondition: {
title: '隐藏条件',
type: 'string',
description: '所有形态默认显示',
widget: 'HiddenCondition',
hidden: "{{formData.isHidden}}",
dependencies: ['isHidden'],
},
addressSync: { addressSync: {
title: '地址同步', title: '地址同步',
type: 'string', type: 'string',
widget: 'AddressSync', widget: 'AddressSync',
description: '位置信息将会同步到下方字段中', description: '位置信息将会同步到下方字段中',
otherProps: {
mode: "multiple"
}
}, },
height: { height: {
title: '控件高度', title: '控件高度',
...@@ -4733,6 +4744,14 @@ const advancedWidgets = [ ...@@ -4733,6 +4744,14 @@ const advancedWidgets = [
widget: 'FieldNames', widget: 'FieldNames',
required: true, required: true,
}, },
hiddenCondition: {
title: '隐藏条件',
type: 'string',
description: '所有形态默认显示',
widget: 'HiddenCondition',
hidden: "{{formData.isHidden}}",
dependencies: ['isHidden'],
},
title: { title: {
title: '展示名称', title: '展示名称',
type: 'string', type: 'string',
......
src/core/widgets/coord/DataTable/index.js
View file @ 030246ab
...@@ -50,36 +50,14 @@ const DataTable = props => { ...@@ -50,36 +50,14 @@ const DataTable = props => {
}); });
setDataSource(list); setDataSource(list);
break; break;
case "href":
if(!row.isEditable){
let str = actionItem.url;
const reg_g = /\$\{(.+?)\}/g;
const result = str.match(reg_g);
const list = []
const reg = /\$\{(.+?)\}/;
for (let i = 0; i < result.length; i++) {
const item = result[i]
list.push(item.match(reg)[1])
}
list.forEach(l => {
if(row[l]){
const s = "${" + l + "}"
str = str.replace(s, row[l])
}
})
if(hasHash(actionItem.url)){
window.history.pushState(null, null , str)
} else {
window.open(str)
}
}
break;
default: default:
break break
} }
eventEmitter.emit(`${addons?.dataPath}_${actionItem.action}` , {
...row,
action: actionItem.action
})
} }
const changeValue = (val, index, type) => { const changeValue = (val, index, type) => {
...@@ -97,26 +75,84 @@ const DataTable = props => { ...@@ -97,26 +75,84 @@ const DataTable = props => {
// 操作栏渲染 // 操作栏渲染
const getOptionRender = (_, row, index) => { const getOptionRender = (_, row, index) => {
const eleList = []; const eleList = [];
optionRender?.forEach((item , i) => { optionRender?.forEach((item , i) => {
let Element; let Element;
if (item.type === 'icon' && item.value) { if (item.type === 'icon') {
const Icon = AntdIcon[item.value]; if(!item.isMapped && item.value) {
Element = <Button size={'small'} const Icon = AntdIcon[item.value];
type="text" Element = <Button size={'small'}
key={i} type="text"
shape={'circle'} key={i}
onClick={() => doAction(_, row, index , item)} shape={'circle'}
icon={row.isEditable ? <CheckOutlined /> : <Icon />} />; onClick={() => doAction(_, row, index , item)}
icon={<Icon />} />;
} else {
if(item.parseStr){
const json = JSON.parse(item.parseStr);
const field = _[item.value];
if(field){
const Icon = AntdIcon[json[field]?.label];
Element = <Button size={'small'}
type="text"
key={i}
shape={'circle'}
onClick={() => doAction(_, row, index , item)}
icon={<Icon style={{color:json[_[item.value]]?.color}} />} />;
}
} else {
Element = "调试中..."
}
}
} else if (item.type === 'text') { } else if (item.type === 'text') {
Element = <Button size={'small'} if(!item.isMapped) {
key={i} Element = <Button size={'small'}
onClick={() => doAction(_, row, index, item)} key={i}
type="text">{row.isEditable ? "完成" : item.value}</Button>; onClick={() => doAction(_, row, index, item)}
type="text">{item.value}</Button>;
} else {
if(item.parseStr){
const json = JSON.parse(item.parseStr);
const field = _[item.value];
if(field){
Element = <Button size={'small'}
key={i}
onClick={() => doAction(_, row, index, item)}
type="text">
<span style={{color: json[field]?.color}}>{json[field]?.label}</span>
</Button>;
}
} else {
Element = "调试中..."
}
}
} else { } else {
Element = <Button size={'small'} if(!item.isMapped) {
key={i} Element = <Button size={'small'}
onClick={() => doAction(_, row, index, item)} key={i}
type="link">{row.isEditable ? "完成" : item.value}</Button>; onClick={() => doAction(_, row, index, item)}
type="link">{item.value}</Button>;
} else {
if(item.parseStr){
const json = JSON.parse(item.parseStr);
const field = _[item.value];
if(field){
Element = <Button size={'small'}
key={i}
onClick={() => doAction(_, row, index, item)}
type="link">
<span style={{color: json[field]?.color}}>{json[field]?.label}</span>
</Button>;
}
} else {
Element = "调试中..."
}
}
} }
eleList.push(Element); eleList.push(Element);
......
src/core/widgets/settings/groupSource/AddressSync/index.js
View file @ 030246ab
import React, { useState } from 'react' import React, { useState } from 'react'
import { Select, message } from 'antd' import { Select, message } from 'antd'
import { ReloadTableFields } from '../../../../../apis/process' import { ReloadTableFields } from '../../../../../apis/process'
import {isArray} from "lodash";
const AddressSync = (props) => { const AddressSync = (props) => {
const { value, onChange, schema, addons } = props const { value, onChange, schema, addons , otherProps = {} } = props
const { tableNameParent } = addons.formData const { tableNameParent } = addons.formData
const [options, setOptions] = useState([]) const [options, setOptions] = useState([])
...@@ -22,7 +22,13 @@ const AddressSync = (props) => { ...@@ -22,7 +22,13 @@ const AddressSync = (props) => {
} }
const selectChange = (value) => { const selectChange = (value) => {
onChange(value) let val = "";
if (isArray(value)) {
val = value.join(',')
} else {
val = value
}
onChange(val)
} }
return ( return (
...@@ -33,10 +39,11 @@ const AddressSync = (props) => { ...@@ -33,10 +39,11 @@ const AddressSync = (props) => {
value={value} value={value}
onFocus={onFocus} onFocus={onFocus}
onChange={selectChange} onChange={selectChange}
{...otherProps}
> >
</Select> </Select>
) )
} }
export default AddressSync export default AddressSync
\ No newline at end of file
src/core/widgets/settings/groupSource/OptionRender/index.js
View file @ 030246ab
import React, { useState, useEffect, useMemo, Fragment } from 'react' import React, { useState, useEffect, useMemo, Fragment } from 'react'
import styles from './index.less' import styles from './index.less'
import { Input, Popconfirm, Select , Button , Space } from 'antd' import {Input, Popconfirm, Select, Button, Space, Switch} from 'antd'
import Drag from './../../../../components/Drag' import Drag from './../../../../components/Drag'
import DragTable from '../../../../components/DragTable' import DragTable from '../../../../components/DragTable'
import { DeleteOutlined, MenuOutlined , SettingOutlined } from '@ant-design/icons'; import { DeleteOutlined, MenuOutlined , SettingOutlined } from '@ant-design/icons';
...@@ -39,7 +39,8 @@ const OptionRender = (props) => { ...@@ -39,7 +39,8 @@ const OptionRender = (props) => {
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
const [currentColor, setCurrentColor] = useState('') const [currentColor, setCurrentColor] = useState('')
const [visible , setVisible] = useState(false); const [visible , setVisible] = useState(false);
const [url , setUrl] = useState(""); const [parseObj , setParseObj] = useState(`{"key": {"color": "" , "label": ""}}`);
const iconList = getIconsList(); const iconList = getIconsList();
...@@ -139,31 +140,70 @@ const OptionRender = (props) => { ...@@ -139,31 +140,70 @@ const OptionRender = (props) => {
} }
}, },
{ {
title: '显示名称', title: '样式映射',
dataIndex: 'isMapped',
width: 60,
render: (r, _, i) => {
return (
<Fragment>
<Space>
<Switch checkedChildren="开启"
unCheckedChildren="关闭"
value={r}
onChange={(e) => inputChange(e, i , "isMapped" , _)}
/>
{
_.isMapped && (
<Button type={"text"} onClick={() => {
setVisible(true);
setParseObj(_.parseStr || `{"key": {"color": "" , "label": ""}}`)
}} icon={<SettingOutlined />} />
)
}
</Space>
</Fragment>
)
}
},
{
title: `显示名称/字段`,
dataIndex: 'value', dataIndex: 'value',
width: 100, width: 100,
render: (r, _, i) => { render: (r, _, i) => {
return ( return (
<Fragment> <Fragment>
{ {
_.type === "icon" ? ( _.isMapped ? (
<Select options={iconList}
value={r}
style={{
width: "100%"
}}
allowClear
showSearch
onChange={(e) => inputChange(e, i, "value")} />
) : (
<Input <Input
onPressEnter={() => onPressEnter(i)} onPressEnter={() => onPressEnter(i)}
onChange={(e) => inputChange(e.target.value, i, "value")} onChange={(e) => inputChange(e.target.value, i, "value")}
value={r} value={r}
/> />
) : (
<Fragment>
{
_.type === "icon" ? (
<Select options={iconList}
value={r}
style={{
width: "100%"
}}
allowClear
showSearch
onChange={(e) => inputChange(e, i, "value")} />
) : (
<Input
onPressEnter={() => onPressEnter(i)}
onChange={(e) => inputChange(e.target.value, i, "value")}
value={r}
/>
)
}
</Fragment>
) )
} }
</Fragment> </Fragment>
) )
...@@ -194,79 +234,10 @@ const OptionRender = (props) => { ...@@ -194,79 +234,10 @@ const OptionRender = (props) => {
width: 80 width: 80
}} }}
onChange={(e) => inputChange(e, i, "action")} /> onChange={(e) => inputChange(e, i, "action")} />
{
r === "href" && (
<Button type={"text"}
onClick={() => {
setUrl(_.url);
setVisible(true);
}}
icon={<SettingOutlined />} />
)
}
</Fragment> </Fragment>
) )
} }
}, },
// {
// title: '颜色',
// dataIndex: 'color',
// width: 30,
// render: (r, _, index) => {
// const content = (
// <div>
// <div className={styles.colorTop}>
// <div className={styles.topLeft}>请选择颜色</div>
// <div className={styles.topRight}>
// <Popconfirm
// overlayClassName={styles.Popconfirmtitle}
// placement="topLeft"
// icon={false}
// title={
// <SketchPicker width="217px" color={currentColor} onChange={e => {
// setCurrentRgba(`rgb(${e.rgb.r}, ${e.rgb.g}, ${e.rgb.b})`)
// setCurrentColor(e.hex)
// }} />
// }
// onConfirm={() => {
// let array = []
// value.forEach((v, i2) => {
// if (index === i2) {
// v.color = currentRgba
// }
// array.push({ ...v })
// })
// onChange(array)
// }}
// >
// <div className={styles.colorsSelect}></div>
// </Popconfirm>
// </div>
// </div>
// <div className={styles.colorBox}>
// {
// colors.map((v, i) => {
// return (
// <div className={styles.colors} style={{ background: v }} onClick={() => colorClick(v, index)}>
// <CheckOutlined style={{ fontSize: '11px', marginLeft: '5px', display: r === v ? 'inline-block' : 'none' }} />
// </div>
// )
// })
// }
// </div>
// </div>
// )
// return (
// <Popover
// content={content}
// trigger='click'
// >
// <div className={styles.colors} style={{ background: r || '#f2f4f5' }}></div>
// </Popover>
// )
// }
// },
{ {
width: 30, width: 30,
render: (r, _, i) => { render: (r, _, i) => {
...@@ -321,9 +292,7 @@ const OptionRender = (props) => { ...@@ -321,9 +292,7 @@ const OptionRender = (props) => {
const onOk = () => { const onOk = () => {
const list = [...value]; const list = [...value];
list.forEach(item => { list.forEach(item => {
if(item.type === "link"){ item.parseStr = parseObj
item.url = url
}
}); });
onChange(list); onChange(list);
...@@ -339,11 +308,7 @@ const OptionRender = (props) => { ...@@ -339,11 +308,7 @@ const OptionRender = (props) => {
return ( return (
<div className={styles.simpleList}> <div className={styles.simpleList}>
<div className={styles.title}> <div className={styles.title}>
<div style={{ fontSize: '14px' }}>{name}</div> <div style={{fontSize: '14px'}}>{name}</div>
{/*<div style={{ fontSize: '12px' }}>*/}
{/* <span style={{ paddingRight: '5px' }}>彩色</span>*/}
{/* <Switch size="small" checked={color} onChange={switchChange} />*/}
{/*</div>*/}
</div> </div>
<div className={styles.box}> <div className={styles.box}>
{loading ? null : ( {loading ? null : (
...@@ -351,8 +316,8 @@ const OptionRender = (props) => { ...@@ -351,8 +316,8 @@ const OptionRender = (props) => {
dataSource={ dataSource={
Array.isArray(value) Array.isArray(value)
? value.map((v, i) => { ? value.map((v, i) => {
return { key: `${i}`, index: i, ...v }; return {key: `${i}`, index: i, ...v};
}) })
: [] : []
} }
showHeader={true} showHeader={true}
...@@ -360,7 +325,7 @@ const OptionRender = (props) => { ...@@ -360,7 +325,7 @@ const OptionRender = (props) => {
ItemTypes="stadingOrder" ItemTypes="stadingOrder"
color={color} color={color}
scroll={{ scroll={{
x: 500, x: 600,
}} }}
columns={columns} columns={columns}
pagination={false} pagination={false}
...@@ -368,17 +333,18 @@ const OptionRender = (props) => { ...@@ -368,17 +333,18 @@ const OptionRender = (props) => {
/> />
)} )}
</div> </div>
{value?.length < 3 && ( <div className={styles.footer}>
<div className={styles.footer}> <span onClick={add}>添加选项</span>
<span onClick={add}>添加选项</span> </div>
</div>
)}
<Drag title="跳转链接" <Drag title="字段样式映射"
onOk={onOk} onOk={onOk}
onCancel={() => setVisible(false)} onCancel={() => setVisible(false)}
visible={visible}> visible={visible}>
<Input.TextArea rows={5} value={url} placeholder="请输入跳转链接" onChange={e => setUrl(e.target.value)} /> <Input.TextArea rows={5}
value={parseObj}
placeholder="请输入跳转链接"
onChange={e => setParseObj(e.target.value)} />
</Drag> </Drag>
</div> </div>
); );
......
src/core/widgets/settings/groupSource/StatusOption/index.js
View file @ 030246ab
...@@ -8,10 +8,12 @@ import { getNanoid } from '../../../../../utils' ...@@ -8,10 +8,12 @@ import { getNanoid } from '../../../../../utils'
import { SketchPicker } from 'react-color' import { SketchPicker } from 'react-color'
import Drag from "../../../../components/Drag"; import Drag from "../../../../components/Drag";
function getTableData(list) { function getTableData(list , optionList) {
if(list){ if(list){
const arr = [...list]; const arr = [...list];
console.log("optionList" , optionList);
list?.forEach((item) => { list?.forEach((item) => {
item.type = "text"; item.type = "text";
}) })
...@@ -358,7 +360,7 @@ const StatusOption = (props) => { ...@@ -358,7 +360,7 @@ const StatusOption = (props) => {
)} )}
</div> </div>
<Drag title="字段颜色映射" <Drag title="字段样式映射"
onOk={onOk} onOk={onOk}
onCancel={() => setVisible(false)} onCancel={() => setVisible(false)}
visible={visible}> visible={visible}>
......
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