529 lines
14 KiB
TypeScript
529 lines
14 KiB
TypeScript
/*
|
||
* @Author: yehuozhili
|
||
* @Date: 2021-07-07 14:46:01
|
||
* @LastEditors: yehuozhili
|
||
* @LastEditTime: 2021-07-13 11:30:17
|
||
* @FilePath: \dooringx\packages\dooringx-example\src\plugin\formComponents\actionButton.tsx
|
||
*/
|
||
|
||
import { Button, Col, Input, message, Modal, Row, Select } from 'antd';
|
||
import { memo, useMemo, useState } from 'react';
|
||
import React, { useCallback } from 'react';
|
||
import { UserConfig, createUid, deepCopy } from 'dooringx-lib';
|
||
import { unstable_batchedUpdates } from 'react-dom';
|
||
import { FormMap } from '../formTypes';
|
||
import { CreateOptionsRes } from 'dooringx-lib/dist/core/components/formTypes';
|
||
import { IBlockType, IStoreData } from 'dooringx-lib/dist/core/store/storetype';
|
||
import { FunctionConfigType } from 'dooringx-lib/dist/core/functionCenter/config';
|
||
import { EventCenterUserSelect } from 'dooringx-lib/dist/core/eventCenter';
|
||
|
||
const { Option } = Select;
|
||
|
||
interface ActionButtonProps {
|
||
data: CreateOptionsRes<FormMap, 'actionButton'>;
|
||
current: IBlockType;
|
||
config: UserConfig;
|
||
}
|
||
|
||
function ActionButton(props: ActionButtonProps) {
|
||
const [visible, setVisible] = useState(false);
|
||
const [cur, setCur] = useState('');
|
||
|
||
const eventMap = props.config.getEventCenter().getEventMap();
|
||
const currentOption = useMemo(() => {
|
||
return Object.keys(eventMap).filter((v) => v.indexOf(props.current.id) >= 0);
|
||
}, [eventMap, props.current.id]);
|
||
|
||
const [search, setSearch] = useState<EventCenterUserSelect[]>([]);
|
||
const functionCenter = props.config.getEventCenter().getFunctionCenter();
|
||
const functionConfig = functionCenter.getConfigMap();
|
||
const functionMap = functionCenter.getFunctionMap();
|
||
const functionNameMap = functionCenter.getNameMap();
|
||
const isEdit = props.config.getStoreChanger().isEdit();
|
||
const dataMap = props.config.getDataCenter().getDataMap();
|
||
let modalMap: Record<string, IStoreData>;
|
||
if (isEdit) {
|
||
modalMap = props.config.getStoreChanger().getOrigin()?.now.modalMap || {};
|
||
} else {
|
||
modalMap = props.config.getStore().getData().modalMap;
|
||
}
|
||
|
||
const handleInputDataSource = useCallback(
|
||
(
|
||
w: {
|
||
uid: string;
|
||
value: string;
|
||
detail: Record<string, any>;
|
||
},
|
||
c: any,
|
||
name = 'dataSource'
|
||
) => {
|
||
return (
|
||
<div>
|
||
<div
|
||
style={{
|
||
textAlign: 'right',
|
||
margin: '10px 0',
|
||
}}
|
||
>
|
||
<Button
|
||
type="primary"
|
||
onClick={() => {
|
||
setSearch((pre) => {
|
||
pre.forEach((v) => {
|
||
if (v.uid === w.uid) {
|
||
let sign = true;
|
||
if (!v.detail[name][c.name]) {
|
||
v.detail[name][c.name] = [];
|
||
}
|
||
if (!c.options.multi) {
|
||
if (v.detail[name][c.name].length >= 1) {
|
||
sign = false;
|
||
message.error('该函数最多只能添加1个');
|
||
}
|
||
}
|
||
if (sign) {
|
||
v.detail[name][c.name].push('');
|
||
}
|
||
}
|
||
});
|
||
return [...pre];
|
||
});
|
||
}}
|
||
>
|
||
添加
|
||
</Button>
|
||
</div>
|
||
<div>
|
||
{w.detail[name] &&
|
||
w.detail[name][c.name] &&
|
||
w.detail[name][c.name].map((vvv: string, x: number) => {
|
||
return (
|
||
<Row key={x}>
|
||
<Col span={19}>
|
||
<Select
|
||
style={{ width: '100%' }}
|
||
value={vvv}
|
||
onChange={(e) => {
|
||
const value = e;
|
||
setSearch((pre) => {
|
||
pre.forEach((v) => {
|
||
v.uid === w.uid ? (v.detail[name][c.name][x] = value || '') : '';
|
||
});
|
||
return [...pre];
|
||
});
|
||
}}
|
||
>
|
||
{Object.keys(dataMap).map((n) => {
|
||
return (
|
||
<Option key={n} value={n}>
|
||
{n}
|
||
</Option>
|
||
);
|
||
})}
|
||
</Select>
|
||
</Col>
|
||
<Col span={5} style={{ textAlign: 'right' }}>
|
||
<Button
|
||
danger
|
||
onClick={() => {
|
||
setSearch((pre) => {
|
||
pre.forEach((v) => {
|
||
v.uid === w.uid ? v.detail[name][c.name].splice(x, 1) : '';
|
||
});
|
||
return [...pre];
|
||
});
|
||
}}
|
||
>
|
||
删除
|
||
</Button>
|
||
</Col>
|
||
</Row>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
);
|
||
},
|
||
[]
|
||
);
|
||
|
||
const handleInput = useCallback(
|
||
(
|
||
w: {
|
||
uid: string;
|
||
value: string;
|
||
detail: Record<string, any>;
|
||
},
|
||
c: any,
|
||
name = 'ctx'
|
||
) => {
|
||
return (
|
||
<div>
|
||
<div
|
||
style={{
|
||
textAlign: 'right',
|
||
margin: '10px 0',
|
||
}}
|
||
>
|
||
<Button
|
||
type="primary"
|
||
onClick={() => {
|
||
setSearch((pre) => {
|
||
pre.forEach((v) => {
|
||
if (v.uid === w.uid) {
|
||
if (!v.detail[name][c.name]) {
|
||
v.detail[name][c.name] = [];
|
||
}
|
||
let sign = true;
|
||
if (!c.options.multi) {
|
||
if (v.detail[name][c.name].length >= 1) {
|
||
sign = false;
|
||
message.error('该函数最多只能添加1个');
|
||
}
|
||
}
|
||
if (sign) {
|
||
v.detail[name][c.name].push('');
|
||
}
|
||
}
|
||
});
|
||
return [...pre];
|
||
});
|
||
}}
|
||
>
|
||
添加输入框
|
||
</Button>
|
||
</div>
|
||
<div>
|
||
{w.detail[name] &&
|
||
w.detail[name][c.name] &&
|
||
w.detail[name][c.name].map((vvv: string, x: number) => {
|
||
return (
|
||
<Row key={x}>
|
||
<Col span={19}>
|
||
<Input
|
||
value={vvv}
|
||
onChange={(e) => {
|
||
const value = e.target.value;
|
||
setSearch((pre) => {
|
||
pre.forEach((v) => {
|
||
v.uid === w.uid ? (v.detail[name][c.name][x] = value || '') : '';
|
||
});
|
||
return [...pre];
|
||
});
|
||
}}
|
||
></Input>
|
||
</Col>
|
||
<Col span={5} style={{ textAlign: 'right' }}>
|
||
<Button
|
||
danger
|
||
onClick={() => {
|
||
setSearch((pre) => {
|
||
pre.forEach((v) => {
|
||
v.uid === w.uid ? v.detail[name][c.name].splice(x, 1) : '';
|
||
});
|
||
return [...pre];
|
||
});
|
||
}}
|
||
>
|
||
删除
|
||
</Button>
|
||
</Col>
|
||
</Row>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
);
|
||
},
|
||
[]
|
||
);
|
||
|
||
return (
|
||
<div>
|
||
<Row
|
||
style={{
|
||
padding: 10,
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
}}
|
||
>
|
||
<Col span={8}>标识ID</Col>
|
||
<Col span={16} style={{ textAlign: 'right' }}>
|
||
{props.current.id}
|
||
</Col>
|
||
</Row>
|
||
{currentOption.map((j, i) => {
|
||
return (
|
||
<Row
|
||
key={i}
|
||
style={{
|
||
padding: 10,
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
}}
|
||
>
|
||
<div>{eventMap[j].displayName}</div>
|
||
<Button
|
||
onClick={() => {
|
||
unstable_batchedUpdates(() => {
|
||
setVisible(true);
|
||
setCur((pre) => {
|
||
if (pre !== j) {
|
||
//查找该cur的选项
|
||
const store = props.config.getStore().getData();
|
||
let init: EventCenterUserSelect[] = [];
|
||
store.block.forEach((v) => {
|
||
if (v.id === props.current.id) {
|
||
init = v.eventMap[j]?.userSelect || [];
|
||
}
|
||
});
|
||
setSearch(init);
|
||
}
|
||
return j;
|
||
});
|
||
});
|
||
}}
|
||
>
|
||
配置
|
||
</Button>
|
||
</Row>
|
||
);
|
||
})}
|
||
<Modal
|
||
width={800}
|
||
title={'事件编辑' + `-${(eventMap[cur] && eventMap[cur].displayName) || ''}`}
|
||
forceRender
|
||
onOk={() => {
|
||
// 更新store中的eventMap
|
||
const store = props.config.getStore();
|
||
const cloneData: IStoreData = deepCopy(store.getData());
|
||
const arr = search.map((v) => {
|
||
// name: string; // 函数名
|
||
// args: Record<string, any>; // 输入参数都会变成对象传来，
|
||
// data: Record<string, FunctionDataType>; // 用户选的种类 键是每个配置项名
|
||
const name = v.value; //函数名
|
||
const options: FunctionConfigType = functionConfig[name];
|
||
const dataMap = v.detail['data'];
|
||
const combine = options.map((jkk) => {
|
||
const select: string = dataMap[jkk.name]; // datasource / input / modal
|
||
let val = {};
|
||
if (select) {
|
||
const value = v.detail[select]; //{name:array<>}
|
||
const receive = jkk.options.receive;
|
||
val = { [receive]: value[jkk.name] }; //这里不能换算，否则修改data后值不会更新
|
||
}
|
||
|
||
const choose = { [jkk.name]: select };
|
||
return {
|
||
...v,
|
||
choose,
|
||
val,
|
||
};
|
||
});
|
||
const combineVal = combine.reduce((prev, next) => {
|
||
return Object.assign(prev, next.val);
|
||
}, {});
|
||
const combineChoose = combine.reduce((prev, next) => {
|
||
return Object.assign(prev, next.choose);
|
||
}, {});
|
||
|
||
return {
|
||
name: name,
|
||
data: combineChoose,
|
||
args: combineVal,
|
||
};
|
||
});
|
||
let displayName = '';
|
||
cloneData.block.forEach((v) => {
|
||
if (v.id === props.current.id) {
|
||
v.eventMap[cur].userSelect = search;
|
||
v.eventMap[cur].arr = arr;
|
||
displayName = v.eventMap[cur].displayName;
|
||
}
|
||
});
|
||
const eventCenter = props.config.getEventCenter();
|
||
eventCenter.manualUpdateMap(cur, displayName, arr);
|
||
store.setData(cloneData);
|
||
setVisible(false);
|
||
}}
|
||
onCancel={() => {
|
||
setVisible(false);
|
||
}}
|
||
visible={visible}
|
||
>
|
||
<div>
|
||
<Row align="middle">
|
||
<Col span={6}>触发事件ID：</Col>
|
||
<Col span={18}>{cur}</Col>
|
||
</Row>
|
||
<Row justify="space-between" style={{ justifyContent: 'flex-end', margin: '20px 0' }}>
|
||
<Button
|
||
type="primary"
|
||
onClick={() => {
|
||
setSearch((pre) => {
|
||
pre.push({
|
||
uid: createUid(),
|
||
value: '',
|
||
detail: {
|
||
input: {},
|
||
ctx: {},
|
||
dataSource: {},
|
||
data: {},
|
||
modal: {},
|
||
},
|
||
});
|
||
return [...pre];
|
||
});
|
||
}}
|
||
>
|
||
添加事件
|
||
</Button>
|
||
</Row>
|
||
<div>
|
||
{search.map((w, i) => {
|
||
const current = search.find((v) => v.uid === w.uid);
|
||
const options: FunctionConfigType | undefined = functionConfig[current?.value || ''];
|
||
return (
|
||
<div key={w.uid}>
|
||
<Row align="middle">
|
||
<Col span={6}>选择函数：</Col>
|
||
<Col span={14}>
|
||
<Select
|
||
showSearch
|
||
value={current?.value || ''}
|
||
style={{ width: '100%' }}
|
||
optionFilterProp="children"
|
||
filterOption={(input, option) =>
|
||
option!.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||
}
|
||
onChange={(e) => {
|
||
setSearch((pre) => {
|
||
pre.forEach((v) => {
|
||
// 切换选择要把下一级制空
|
||
if (v.uid === w.uid) {
|
||
v.value = e as string;
|
||
v.detail['data'] = {};
|
||
}
|
||
});
|
||
return [...pre];
|
||
});
|
||
}}
|
||
>
|
||
{Object.keys(functionMap).map((v) => {
|
||
return (
|
||
<Option key={v} value={v}>
|
||
{functionNameMap[v]}
|
||
</Option>
|
||
);
|
||
})}
|
||
</Select>
|
||
</Col>
|
||
<Col span={4} style={{ textAlign: 'right' }}>
|
||
<Button
|
||
danger
|
||
onClick={() => {
|
||
setSearch((pre) => {
|
||
pre.splice(i, 1);
|
||
return [...pre];
|
||
});
|
||
}}
|
||
>
|
||
删除
|
||
</Button>
|
||
</Col>
|
||
</Row>
|
||
<div
|
||
//[{data: [""]
|
||
/// name: "改变文本数据源"
|
||
//options: {receive: "_changeval"}}]
|
||
>
|
||
{options &&
|
||
options.map((c) => {
|
||
if (c.data.length === 0) {
|
||
return <div key={c.name}></div>;
|
||
}
|
||
return (
|
||
<Row key={c.name} style={{ margin: '10px 0' }}>
|
||
<Col span={6}>{c.name}:</Col>
|
||
<Col span={18}>
|
||
{
|
||
<Select
|
||
value={current?.detail?.data?.[c.name] || ''}
|
||
style={{ width: '100%' }}
|
||
onChange={(e) => {
|
||
setSearch((pre) => {
|
||
pre.forEach((v) => {
|
||
v.uid === w.uid
|
||
? (v.detail['data'][c.name] = (e as string) || '')
|
||
: '';
|
||
});
|
||
return [...pre];
|
||
});
|
||
}}
|
||
>
|
||
{c.data.includes('dataSource') && (
|
||
<Option value="dataSource">数据源</Option>
|
||
)}
|
||
{c.data.includes('ctx') && <Option value="ctx">上下文</Option>}
|
||
{c.data.includes('input') && (
|
||
<Option value="input">输入框</Option>
|
||
)}
|
||
{c.data.includes('modal') && (
|
||
<Option value="modal">弹窗选择</Option>
|
||
)}
|
||
</Select>
|
||
}
|
||
|
||
{w.detail['data'] && w.detail['data'][c.name] === 'dataSource' && (
|
||
<div>{handleInputDataSource(w, c)}</div>
|
||
)}
|
||
{w.detail['data'] && w.detail['data'][c.name] === 'ctx' && (
|
||
<div>{handleInput(w, c, 'ctx')}</div>
|
||
)}
|
||
{w.detail['data'] && w.detail['data'][c.name] === 'input' && (
|
||
<div>{handleInput(w, c, 'input')}</div>
|
||
)}
|
||
{w.detail['data'] && w.detail['data'][c.name] === 'modal' && (
|
||
<div>
|
||
<Select
|
||
value={w.detail['modal'][c.name] || ''}
|
||
onChange={(e) => {
|
||
setSearch((pre) => {
|
||
pre.forEach((v) => {
|
||
v.uid === w.uid
|
||
? (v.detail['modal'][c.name] = (e as string) || '')
|
||
: '';
|
||
});
|
||
return [...pre];
|
||
});
|
||
}}
|
||
style={{ width: '100%' }}
|
||
>
|
||
{Object.keys(modalMap).map((v) => {
|
||
return (
|
||
<Option key={v} value={v}>
|
||
{v}
|
||
</Option>
|
||
);
|
||
})}
|
||
</Select>
|
||
</div>
|
||
)}
|
||
</Col>
|
||
</Row>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</Modal>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default memo(ActionButton);
|