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 = [
type: 'string',
default: "阀门地图"
},
hiddenCondition: {
title: '隐藏条件',
type: 'string',
description: '所有形态默认显示',
widget: 'HiddenCondition',
hidden: "{{formData.isHidden}}",
dependencies: ['isHidden'],
},
addressSync: {
title: '地址同步',
type: 'string',
widget: 'AddressSync',
description: '位置信息将会同步到下方字段中',
otherProps: {
mode: "multiple"
}
},
height: {
title: '控件高度',
......@@ -4733,6 +4744,14 @@ const advancedWidgets = [
widget: 'FieldNames',
required: true,
},
hiddenCondition: {
title: '隐藏条件',
type: 'string',
description: '所有形态默认显示',
widget: 'HiddenCondition',
hidden: "{{formData.isHidden}}",
dependencies: ['isHidden'],
},
title: {
title: '展示名称',
type: 'string',
......
src/core/widgets/coord/DataTable/index.js
View file @ 030246ab
......@@ -50,36 +50,14 @@ const DataTable = props => {
});
setDataSource(list);
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:
break
}
eventEmitter.emit(`${addons?.dataPath}_${actionItem.action}` , {
...row,
action: actionItem.action
})
}
const changeValue = (val, index, type) => {
......@@ -97,26 +75,84 @@ const DataTable = props => {
// 操作栏渲染
const getOptionRender = (_, row, index) => {
const eleList = [];
optionRender?.forEach((item , i) => {
let Element;
if (item.type === 'icon' && item.value) {
const Icon = AntdIcon[item.value];
Element = <Button size={'small'}
type="text"
key={i}
shape={'circle'}
onClick={() => doAction(_, row, index , item)}
icon={row.isEditable ? <CheckOutlined /> : <Icon />} />;
if (item.type === 'icon') {
if(!item.isMapped && item.value) {
const Icon = AntdIcon[item.value];
Element = <Button size={'small'}
type="text"
key={i}
shape={'circle'}
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') {
Element = <Button size={'small'}
key={i}
onClick={() => doAction(_, row, index, item)}
type="text">{row.isEditable ? "完成" : item.value}</Button>;
if(!item.isMapped) {
Element = <Button size={'small'}
key={i}
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 {
Element = <Button size={'small'}
key={i}
onClick={() => doAction(_, row, index, item)}
type="link">{row.isEditable ? "完成" : item.value}</Button>;
if(!item.isMapped) {
Element = <Button size={'small'}
key={i}
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);
......
src/core/widgets/settings/groupSource/AddressSync/index.js
View file @ 030246ab
import React, { useState } from 'react'
import { Select, message } from 'antd'
import { ReloadTableFields } from '../../../../../apis/process'
import {isArray} from "lodash";
const AddressSync = (props) => {
const { value, onChange, schema, addons } = props
const { value, onChange, schema, addons , otherProps = {} } = props
const { tableNameParent } = addons.formData
const [options, setOptions] = useState([])
......@@ -22,7 +22,13 @@ const AddressSync = (props) => {
}
const selectChange = (value) => {
onChange(value)
let val = "";
if (isArray(value)) {
val = value.join(',')
} else {
val = value
}
onChange(val)
}
return (
......@@ -33,10 +39,11 @@ const AddressSync = (props) => {
value={value}
onFocus={onFocus}
onChange={selectChange}
{...otherProps}
>
</Select>
)
}
export default AddressSync
\ No newline at end of file
export default AddressSync
src/core/widgets/settings/groupSource/OptionRender/index.js
View file @ 030246ab
import React, { useState, useEffect, useMemo, Fragment } from 'react'
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 DragTable from '../../../../components/DragTable'
import { DeleteOutlined, MenuOutlined , SettingOutlined } from '@ant-design/icons';
......@@ -39,7 +39,8 @@ const OptionRender = (props) => {
const [loading, setLoading] = useState(true)
const [currentColor, setCurrentColor] = useState('')
const [visible , setVisible] = useState(false);
const [url , setUrl] = useState("");
const [parseObj , setParseObj] = useState(`{"key": {"color": "" , "label": ""}}`);
const iconList = getIconsList();
......@@ -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',
width: 100,
render: (r, _, i) => {
return (
<Fragment>
{
_.type === "icon" ? (
<Select options={iconList}
value={r}
style={{
width: "100%"
}}
allowClear
showSearch
onChange={(e) => inputChange(e, i, "value")} />
) : (
_.isMapped ? (
<Input
onPressEnter={() => onPressEnter(i)}
onChange={(e) => inputChange(e.target.value, i, "value")}
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>
)
......@@ -194,79 +234,10 @@ const OptionRender = (props) => {
width: 80
}}
onChange={(e) => inputChange(e, i, "action")} />
{
r === "href" && (
<Button type={"text"}
onClick={() => {
setUrl(_.url);
setVisible(true);
}}
icon={<SettingOutlined />} />
)
}
</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,
render: (r, _, i) => {
......@@ -321,9 +292,7 @@ const OptionRender = (props) => {
const onOk = () => {
const list = [...value];
list.forEach(item => {
if(item.type === "link"){
item.url = url
}
item.parseStr = parseObj
});
onChange(list);
......@@ -339,11 +308,7 @@ const OptionRender = (props) => {
return (
<div className={styles.simpleList}>
<div className={styles.title}>
<div style={{ fontSize: '14px' }}>{name}</div>
{/*<div style={{ fontSize: '12px' }}>*/}
{/* <span style={{ paddingRight: '5px' }}>彩色</span>*/}
{/* <Switch size="small" checked={color} onChange={switchChange} />*/}
{/*</div>*/}
<div style={{fontSize: '14px'}}>{name}</div>
</div>
<div className={styles.box}>
{loading ? null : (
......@@ -351,8 +316,8 @@ const OptionRender = (props) => {
dataSource={
Array.isArray(value)
? value.map((v, i) => {
return { key: `${i}`, index: i, ...v };
})
return {key: `${i}`, index: i, ...v};
})
: []
}
showHeader={true}
......@@ -360,7 +325,7 @@ const OptionRender = (props) => {
ItemTypes="stadingOrder"
color={color}
scroll={{
x: 500,
x: 600,
}}
columns={columns}
pagination={false}
......@@ -368,17 +333,18 @@ const OptionRender = (props) => {
/>
)}
</div>
{value?.length < 3 && (
<div className={styles.footer}>
<span onClick={add}>添加选项</span>
</div>
)}
<div className={styles.footer}>
<span onClick={add}>添加选项</span>
</div>
<Drag title="跳转链接"
<Drag title="字段样式映射"
onOk={onOk}
onCancel={() => setVisible(false)}
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>
</div>
);
......
src/core/widgets/settings/groupSource/StatusOption/index.js
View file @ 030246ab
......@@ -8,10 +8,12 @@ import { getNanoid } from '../../../../../utils'
import { SketchPicker } from 'react-color'
import Drag from "../../../../components/Drag";
function getTableData(list) {
function getTableData(list , optionList) {
if(list){
const arr = [...list];
console.log("optionList" , optionList);
list?.forEach((item) => {
item.type = "text";
})
......@@ -358,7 +360,7 @@ const StatusOption = (props) => {
)}
</div>
<Drag title="字段颜色映射"
<Drag title="字段样式映射"
onOk={onOk}
onCancel={() => setVisible(false)}
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