Skip to content

X
xform
Commit 340aa940 authored by 杨子龙's avatar 杨子龙
Browse files
Options

修复编辑器报错问题

parent a8c412ba
Show whitespace changes
Inline Side-by-side
Showing with 186 additions and 179 deletions
src/core/widgets/settings/groupSource/StatusOption/index.js
View file @ 340aa940
import React, { useState, useEffect, useMemo, Fragment } from 'react'
import styles from './index.less'
import {Switch, Input, Popconfirm, Popover, Select , Button , Space , InputNumber} from 'antd'
import DragTable from '../../../../components/DragTable'
import { CheckOutlined , SettingOutlined } from '@ant-design/icons';
import { colors } from '../../../../../constant'
import { getNanoid } from '../../../../../utils'
import { SketchPicker } from 'react-color'
import Drag from "../../../../components/Drag";
import {GetTableFieldsByTableName} from "../../../../../apis/process";
async function getTableData(list , optionList) {
if(list){
import React, { Fragment, useEffect, useMemo, useState } from 'react';
import styles from './index.less';
import { Button, Input, InputNumber, Popconfirm, Popover, Select, Space, Switch } from 'antd';
import DragTable from '../../../../components/DragTable';
import { CheckOutlined, SettingOutlined } from '@ant-design/icons';
import { colors } from '../../../../../constant';
import { getNanoid } from '../../../../../utils';
import { SketchPicker } from 'react-color';
import Drag from '../../../../components/Drag';
import { GetTableFieldsByTableName } from '../../../../../apis/process';
async function getTableData(list, optionList) {
if (list) {
const arr = [...list];
list?.forEach((item) => {
item.type = "text";
})
list?.forEach(item => {
item.type = 'text';
});
return arr;
} else {
return []
return [];
}
}
const StatusOption = (props) => {
const { value, onChange, addons , schema} = props
const StatusOption = props => {
const { value, onChange, addons, schema } = props;
const { color, isMultiple, widget, fieldList } = addons.formData;
const { name } = schema;
const [loading, setLoading] = useState(true)
const [currentColor, setCurrentColor] = useState('')
const [currentRgba, setCurrentRgba] = useState('')
const [visible , setVisible] = useState(false);
const [parseObj , setParseObj] = useState(`{"key": {"color": "" , "label": ""}}`);
const [loading, setLoading] = useState(true);
const [currentColor, setCurrentColor] = useState('');
const [currentRgba, setCurrentRgba] = useState('');
const [visible, setVisible] = useState(false);
const [parseObj, setParseObj] = useState(`{"key": {"color": "" , "label": ""}}`);
const showType = (t) => {
const arr = ["FileUpload" , "tag" , "文本"]
const showType = t => {
const arr = ['FileUpload', 'tag', '文本'];
return arr.includes(t);
}
};
const initData = async () => {
const fields = [];
fieldList.forEach(item => {
if(item.fieldType !== "gis"){
fields.push(item.fieldName)
if (item.fieldType !== 'gis') {
fields.push(item.fieldName);
}
});
const { data , code } = await GetTableFieldsByTableName({
const { data, code } = await GetTableFieldsByTableName({
tableName: addons.formData.tableName,
fields: fields.join(",")
fields: fields.join(','),
});
fieldList.forEach(item => {
const currentItem = value.find(v => item.fieldName === v.fieldName);
const current = data.find(d => d.FieldName === item.fieldName);
if(currentItem){
if (currentItem) {
item.type = currentItem.type;
item.color = currentItem.color;
item.parseStr = currentItem.parseStr;
item.isMapped = currentItem.isMapped || false;
item.width = currentItem.width || 120;
} else {
item.type = showType(current.Widget) ? current.Widget : "文本";
item.type = showType(current.Widget) ? current.Widget : '文本';
item.editType = current.Widget;
item.color = "rgb(65,68,69)";
item.color = 'rgb(65,68,69)';
item.isMapped = false;
item.width = 120;
}
});
onChange(fieldList);
}
};
useEffect(() => {
if (addons) {
if (!isMultiple && widget === 'ComboBox') {
addons.setValue('color', false)
addons.setValue('color', false);
}
}
}, [isMultiple])
}, [isMultiple]);
useEffect(() => {
if(fieldList.length !== value.length){
initData()
if (fieldList?.length !== value?.length) {
initData();
}
} , [fieldList])
}, [fieldList]);
useEffect(() => {
setTimeout(() => {
setLoading(false)
}, 0)
}, [])
const onPressEnter = (i) => {
let length = [...value].length
let array = [...value]
array.splice(i + 1, 0, { key: getNanoid(), index: length + 1, color: colors[length % 10], value: '' })
onChange(array)
}
const inputChange = (val, i , key , item) => {
let array = []
setLoading(false);
}, 0);
}, []);
const onPressEnter = i => {
let length = [...value].length;
let array = [...value];
array.splice(i + 1, 0, { key: getNanoid(), index: length + 1, color: colors[length % 10], value: '' });
onChange(array);
};
const inputChange = (val, i, key, item) => {
let array = [];
value.forEach((v, index) => {
if (index === i) {
v[key] = val;
}
array.push({ ...v })
})
array.push({ ...v });
});
onChange(array)
}
onChange(array);
};
const confirm = (index) => {
let array = []
const confirm = index => {
let array = [];
value.forEach((v, i) => {
if (i !== index) {
array.push({ ...v })
}
})
onChange(array)
array.push({ ...v });
}
});
onChange(array);
};
const colorClick = (item, i) => {
let array = []
let array = [];
value.forEach((v, index) => {
if (index === i) {
v.color = item
v.color = item;
}
array.push({ ...v })
})
array.push({ ...v });
});
onChange(array)
}
onChange(array);
};
const rest = (index) => {
let array = []
const rest = index => {
let array = [];
value.forEach((v, i) => {
if (index === i) {
v.color = colors[index % 10]
}
array.push({ ...v })
})
onChange(array)
v.color = colors[index % 10];
}
array.push({ ...v });
});
onChange(array);
};
const columns = useMemo(() => {
let columns = [
......@@ -154,13 +154,15 @@ const StatusOption = (props) => {
width: 100,
render: (r, _, i) => {
return (
<Input disabled
<Input
disabled
value={r}
style={{
width: "100%"
}} />
)
}
width: '100%',
}}
/>
);
},
},
{
title: '显示类型',
......@@ -168,27 +170,29 @@ const StatusOption = (props) => {
width: 40,
render: (r, _, i) => {
return (
<Select options={[
<Select
options={[
{
label: "文本",
value: "文本"
label: '文本',
value: '文本',
},
{
label: "标签",
value: "tag"
label: '标签',
value: 'tag',
},
{
label: "照片",
value: "FileUpload"
}
label: '照片',
value: 'FileUpload',
},
]}
value={r}
style={{
width: "100%"
width: '100%',
}}
onChange={(e) => inputChange(e, i , "type" , _)} />
)
}
onChange={e => inputChange(e, i, 'type', _)}
/>
);
},
},
{
title: '表头宽度',
......@@ -196,14 +200,16 @@ const StatusOption = (props) => {
width: 100,
render: (r, _, i) => {
return (
<InputNumber value={r || 120}
<InputNumber
value={r || 120}
style={{
width: "100%"
width: '100%',
}}
onPressEnter={() => onPressEnter(i)}
onChange={(e) => inputChange(e, i , "width" , _)} />
)
}
onChange={e => inputChange(e, i, 'width', _)}
/>
);
},
},
{
title: '样式映射',
......@@ -213,25 +219,26 @@ const StatusOption = (props) => {
return (
<Fragment>
<Space>
<Switch checkedChildren="开启"
<Switch
checkedChildren="开启"
unCheckedChildren="关闭"
checked={r}
onChange={(e) => inputChange(e, i , "isMapped" , _)}
onChange={e => inputChange(e, i, 'isMapped', _)}
/>
{
_.isMapped && (
<Button type={"text"} onClick={() => {
{_.isMapped && (
<Button
type={'text'}
onClick={() => {
setVisible(true);
setParseObj(_.parseStr || `{"key": {"color": "" , "label": ""}}`)
}} icon={<SettingOutlined />} />
)
}
setParseObj(_.parseStr || `{"key": {"color": "" , "label": ""}}`);
}}
icon={<SettingOutlined />}
/>
)}
</Space>
</Fragment>
)
}
);
},
},
{
title: '颜色',
......@@ -248,20 +255,24 @@ const StatusOption = (props) => {
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)
}} />
<SketchPicker
width="217px"
color={currentColor}
onChange={e => {
setCurrentRgba(`rgb(${e.rgb.r}, ${e.rgb.g}, ${e.rgb.b})`);
setCurrentColor(e.hex);
}}
/>
}
onConfirm={() => {
let array = []
let array = [];
value.forEach((v, i2) => {
if (index === i2) {
v.color = currentRgba
v.color = currentRgba;
}
array.push({ ...v })
})
onChange(array)
array.push({ ...v });
});
onChange(array);
}}
>
<div className={styles.colorsSelect}></div>
......@@ -269,101 +280,98 @@ const StatusOption = (props) => {
</div>
</div>
<div className={styles.colorBox}>
{
colors.map((v, i) => {
{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' }} />
<CheckOutlined
style={{ fontSize: '11px', marginLeft: '5px', display: r === v ? 'inline-block' : 'none' }}
/>
</div>
)
})
}
);
})}
</div>
</div>
)
);
return (
<Fragment>
{
!_.isMapped && (
<Popover content={content}
trigger='click'>
{!_.isMapped && (
<Popover content={content} trigger="click">
<div className={styles.colors} style={{ background: r || '#f2f4f5' }}></div>
</Popover>
)
}
)}
</Fragment>
)
}
}
]
);
},
},
];
if (!color) {
return columns.filter(v => v.dataIndex !== 'color')
return columns.filter(v => v.dataIndex !== 'color');
}
return columns
}, [value, color, currentColor])
return columns;
}, [value, color, currentColor]);
const switchChange = (checked) => {
addons.setValue('color', checked)
const switchChange = checked => {
addons.setValue('color', checked);
if (checked) {
if (Array.isArray(value)) {
let array = []
let array = [];
value.forEach((v, i) => {
const obj = {
...v
}
if(!v.color){
obj.color = colors[i % 10]
...v,
};
if (!v.color) {
obj.color = colors[i % 10];
}
array.push(obj)
})
array.push(obj);
});
onChange(array)
onChange(array);
}
} else{
let array = []
} else {
let array = [];
value.forEach((v, i) => {
if(v.color){
if (v.color) {
delete v.color;
array.push(v);
}
})
});
onChange(array)
}
onChange(array);
}
};
const onOk = () => {
const list = [...value];
list.forEach(item => {
item.parseStr = parseObj
item.parseStr = parseObj;
});
onChange(list);
setVisible(false);
}
};
const add = () => {
let length = [...value].length
let array = [...value]
array.push({ key: getNanoid(), index: length + 1, color: colors[length % 10], value: '' })
onChange(array)
}
let length = [...value].length;
let array = [...value];
array.push({ key: getNanoid(), index: length + 1, color: colors[length % 10], value: '' });
onChange(array);
};
const dragCallBack = (array) => {
const dragCallBack = array => {
if (array) {
onChange(array)
}
onChange(array);
}
};
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 style={{ fontSize: '14px' }}>{name}</div>
<div style={{ fontSize: '12px' }}>
<span style={{ paddingRight: '5px' }}>彩色</span>
<Switch size="small" checked={color} onChange={switchChange} />
</div>
</div>
<div className={styles.box}>
......@@ -372,7 +380,7 @@ const StatusOption = (props) => {
dataSource={
Array.isArray(value)
? value.map((v, i) => {
return {key: `${i}`, index: i, ...v};
return { key: `${i}`, index: i, ...v };
})
: []
}
......@@ -390,17 +398,16 @@ const StatusOption = (props) => {
)}
</div>
<Drag title="字段样式映射"
onOk={onOk}
onCancel={() => setVisible(false)}
visible={visible}>
<Input.TextArea rows={5}
<Drag title="字段样式映射" onOk={onOk} onCancel={() => setVisible(false)} visible={visible}>
<Input.TextArea
rows={5}
value={parseObj}
placeholder="请输入跳转链接"
onChange={e => setParseObj(e.target.value)} />
onChange={e => setParseObj(e.target.value)}
/>
</Drag>
</div>
);
}
};
export default StatusOption
export default StatusOption;
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