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