Skip to content

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

操作栏配置增加逻辑自定义

parent a43c256a
Show whitespace changes
Inline Side-by-side
Showing with 178 additions and 175 deletions
src/core/widgets/coord/DataTable/index.js
View file @ e7e07a6c
import React, { Fragment, useEffect , useState } from 'react'; import React, { Fragment, useEffect, useState } from 'react';
import {Button, Empty, Table, Space, Input} from 'antd'; import { Button, Empty, Input, Space, Table } from 'antd';
import * as AntdIcon from '@ant-design/icons'; import * as AntdIcon from '@ant-design/icons';
import FileView from '../../../Account/components/TablePack/components/FileView'; import FileView from '../../../Account/components/TablePack/components/FileView';
import TagPack from '../../../components/TagPack' import TagPack from '../../../components/TagPack';
import eventEmitter from '../../../../utils/eventEmitter' import eventEmitter from '../../../../utils/eventEmitter';
import { isArray } from "lodash"; import { isArray } from 'lodash';
import styles from './index.less'; import styles from './index.less';
const DataTable = props => { const DataTable = props => {
const { value, onChange, schema , addons } = props; const { value, onChange, schema, addons } = props;
const { const {
disabled, disabled,
fieldList, fieldList,
optionRender , optionRender,
titleShow , titleShow,
pagination , pagination,
scrollX, scrollX,
scrollY, scrollY,
statusOption, statusOption,
areaTaskShine, areaTaskShine,
} = schema; } = schema;
const [dataSource , setDataSource] = useState([]); const [dataSource, setDataSource] = useState([]);
const [visible , setVisible] = useState(true); const [visible, setVisible] = useState(true);
const [columns , setColumns] = useState([]); const [columns, setColumns] = useState([]);
const hasHash = (url) => { const doAction = (_, row, index, actionItem) => {
return url.includes('#');
}
const doAction = (_, row, index , actionItem) => {
const list = [...dataSource]; const list = [...dataSource];
switch (actionItem.action) { switch (actionItem.action) {
case "delete": case 'delete':
list.splice(index , 1); list.splice(index, 1);
setDataSource(list); setDataSource(list);
break; break;
case "update": case 'update':
list.forEach((item , i) => { list.forEach((item, i) => {
if(i === index){ if (i === index) {
if(!row.isEditable){ if (!row.isEditable) {
row.isEditable = true; row.isEditable = true;
row.type = row.type || "update"; row.type = row.type || 'update';
} else { } else {
delete row.isEditable delete row.isEditable;
} }
} }
}); });
setDataSource(list); setDataSource(list);
break; break;
default: default:
break break;
} }
eventEmitter.emit(`${addons?.dataPath}_event` , { eventEmitter.emit(`${addons?.dataPath}_event`, {
...row, ...row,
action: actionItem.action action: actionItem.action,
}) });
} };
const changeValue = (val, index, type) => { const changeValue = (val, index, type) => {
const list = [...dataSource]; const list = [...dataSource];
list.forEach((item , i) => { list.forEach((item, i) => {
if(i === index){ if (i === index) {
item[type] = val; item[type] = val;
} }
}) });
setDataSource(list); setDataSource(list);
} };
// 操作栏渲染
const getOptionRender = (_, row, index) => {
const eleList = [];
optionRender?.forEach((item , i) => { const optionItemRender = ({ item, _, row, index, i, type }) => {
let Element; let Element;
if (item.type === 'icon') {
if(!item.isMapped && item.value) { if (!item.isMapped) {
let otherProps;
if (type === 'icon') {
const Icon = AntdIcon[item.value]; const Icon = AntdIcon[item.value];
Element = <Button size={'small'}
type="text" if(Icon){
key={i} otherProps = {
shape={'circle'} type: 'text',
onClick={() => doAction(_, row, index , item)} shape: 'circle',
icon={<Icon />} />; 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') {
if(!item.isMapped) { Element = (
Element = <Button size={'small'} <Button size={'small'} key={i} onClick={() => doAction(_, row, index, item)} type={type} {...otherProps}>
key={i} {type !== 'icon' && item.value}
onClick={() => doAction(_, row, index, item)} </Button>
type="text">{item.value}</Button>; );
} else { } else {
if(item.parseStr){ if (item.parseStr) {
const json = JSON.parse(item.parseStr); const json = JSON.parse(item.parseStr);
const field = _[item.value]; 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 { const optionCode = json[field]?.code;
Element = "调试中..."
let otherProps;
if (type === 'icon') {
const Icon = AntdIcon[json[field]?.label];
if(Icon){
otherProps = {
type: 'text',
shape: 'circle',
icon: <Icon style={{color:json[_[item.value]]?.color}} />,
};
} }
} }
} else {
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){ if (optionCode) {
Element = <Button size={'small'} if (field) {
const codeStr = `return row[item.value] === "${field}"${optionCode}`;
const deFun = new Function('_', 'row', 'index', 'item', codeStr);
const isVisible = deFun(_, row, index, item);
if (isVisible) {
Element = (
<Button
size={'small'}
key={i} key={i}
onClick={() => doAction(_, row, index, item)} onClick={() => doAction(_, row, index, item)}
type="link"> type={type}
<span style={{color: json[field]?.color}}>{json[field]?.label}</span> {...otherProps}
</Button>; >
{type !== 'icon' && <span style={{ color: json[field]?.color }}>{json[field]?.label}</span>}
</Button>
);
}
} }
} else { } else {
Element = "调试中..." if (field) {
Element = (
<Button size={'small'} key={i} onClick={() => doAction(_, row, index, item)} type={type} {...otherProps}>
{type !== 'icon' && <span style={{ color: json[field]?.color }}>{json[field]?.label}</span>}
</Button>
);
} }
} }
} else {
Element = '调试中...';
}
} }
eleList.push(Element); return Element;
};
// 操作栏渲染
const getOptionRender = (_, row, index) => {
const eleList = [];
optionRender?.forEach((item, i) => {
const Element = optionItemRender({
item,
_,
row,
index,
i,
type: item.type,
}); });
eleList.push(Element);
});
return <Fragment> return (
<Space> <Fragment>
{eleList} <Space>{eleList}</Space>
</Space> </Fragment>
</Fragment>; );
}; };
// 字段栏显示模式渲染 // 字段栏显示模式渲染
const getFieldRender = (_, row, index , item) => { const getFieldRender = (_, row, index, item) => {
let ele; let ele;
switch (item.type) { switch (item.type) {
case "文本": case '文本':
if(!item.isMapped){ if (!item.isMapped) {
ele = <span style={{color: item.color}}>{_}</span> ele = <span style={{ color: item.color }}>{_}</span>;
} else { } else {
if(item.parseStr){ if (item.parseStr) {
const json = JSON.parse(item.parseStr); const json = JSON.parse(item.parseStr);
ele = <span style={{color: json[_]?.color}}>{json[_]?.label}</span> ele = <span style={{ color: json[_]?.color }}>{json[_]?.label}</span>;
} else { } else {
ele = <span>调试中...</span> ele = <span>调试中...</span>;
} }
} }
break; break;
case "tag": case 'tag':
if(!item.isMapped){ if (!item.isMapped) {
ele = <TagPack color={item.color} text={_} /> ele = <TagPack color={item.color} text={_} />;
} else { } else {
if(item.parseStr){ if (item.parseStr) {
const json = JSON.parse(item.parseStr); const json = JSON.parse(item.parseStr);
ele = <TagPack color={json[_]?.color} text={json[_]?.label} /> ele = <TagPack color={json[_]?.color} text={json[_]?.label} />;
} else { } else {
ele = <span>调试中...</span> ele = <span>调试中...</span>;
} }
} }
break; break;
case "FileUpload": case 'FileUpload':
ele = <FileView value={_} ele = <FileView value={_} download={true} preview={true} />;
download={true}
preview={true} />;
break; break;
default: default:
if(!item.isMapped){ if (!item.isMapped) {
ele = <span style={{color: item.color}}>{_}</span> ele = <span style={{ color: item.color }}>{_}</span>;
} else { } else {
if(item.parseStr){ if (item.parseStr) {
const json = JSON.parse(item.parseStr); const json = JSON.parse(item.parseStr);
ele = <span style={{color: json[_]?.color}}>{json[_]?.label}</span> ele = <span style={{ color: json[_]?.color }}>{json[_]?.label}</span>;
} else { } else {
ele = <span>调试中...</span> ele = <span>调试中...</span>;
} }
} }
break; break;
} }
return ele return ele;
} };
const getColumns = () => { const getColumns = () => {
const arr = []; const arr = [];
...@@ -226,10 +229,10 @@ const DataTable = props => { ...@@ -226,10 +229,10 @@ const DataTable = props => {
let isGIS = false; let isGIS = false;
list?.forEach(item => { list?.forEach(item => {
if(item.fieldType === "gis"){ if (item.fieldType === 'gis') {
isGIS = true isGIS = true;
} }
}) });
list?.forEach(item => { list?.forEach(item => {
const dataIndex = !isGIS ? item.fieldName : `${item.fieldType}-${item.fieldName}`; const dataIndex = !isGIS ? item.fieldName : `${item.fieldType}-${item.fieldName}`;
...@@ -239,18 +242,17 @@ const DataTable = props => { ...@@ -239,18 +242,17 @@ const DataTable = props => {
dataIndex, dataIndex,
key: dataIndex, key: dataIndex,
width: item.width || 120, width: item.width || 120,
render: (_, row , index) => { render: (_, row, index) => {
return ( return (
<Fragment> <Fragment>
{ {row.isEditable ? (
row.isEditable ? ( <Input value={_} onChange={e => changeValue(e.target.value, index, dataIndex)} />
<Input value={_} ) : (
onChange={e => changeValue(e.target.value , index , dataIndex)} /> getFieldRender(_, row, index, item)
) : getFieldRender(_, row, index , item) )}
}
</Fragment> </Fragment>
) );
} },
}); });
}); });
...@@ -273,17 +275,17 @@ const DataTable = props => { ...@@ -273,17 +275,17 @@ const DataTable = props => {
window.relationForm = { window.relationForm = {
configs: [ configs: [
{ {
'台账名称': schema.accountName, 台账名称: schema.accountName,
'映射字段': [{ fromField: '工单编号', toField: '工单编号' }], 映射字段: [{ fromField: '工单编号', toField: '工单编号' }],
widget: schema.widget, widget: schema.widget,
layerName: schema.layerName, layerName: schema.layerName,
accountName: schema.accountName, accountName: schema.accountName,
tableName: schema.tableName tableName: schema.tableName,
} },
], ],
data: [] data: [],
} };
} };
const setRelationData = () => { const setRelationData = () => {
const data = []; const data = [];
...@@ -294,70 +296,69 @@ const DataTable = props => { ...@@ -294,70 +296,69 @@ const DataTable = props => {
accountTable: schema.accountName, accountTable: schema.accountName,
values: [ values: [
{ {
fieldName: "工单编号", fieldName: '工单编号',
fieldValue: "" fieldValue: '',
} },
] ],
} };
Object.keys(item).forEach(key => { Object.keys(item).forEach(key => {
const val = key.split("-")[1] const val = key.split('-')[1];
const isHas = areaTaskShine.find(s => s.fromField === val); const isHas = areaTaskShine.find(s => s.fromField === val);
if(isHas && item[key]){ if (isHas && item[key]) {
const valuesObj = { const valuesObj = {
fieldName: isHas.fromField, fieldName: isHas.fromField,
fieldValue: item[key] fieldValue: item[key],
} };
obj.values.push(valuesObj); obj.values.push(valuesObj);
} }
}) });
data.push(obj); data.push(obj);
}) });
window.relationForm.data = data; window.relationForm.data = data;
} };
useEffect(() => { useEffect(() => {
eventEmitter.removeAllListeners(addons?.dataPath); eventEmitter.removeAllListeners(addons?.dataPath);
let list = [...dataSource]; let list = [...dataSource];
eventEmitter.on(addons?.dataPath , (res) => { eventEmitter.on(addons?.dataPath, res => {
if(isArray(res)){ if (isArray(res)) {
list = [].concat(res); list = [].concat(res);
} else { } else {
if(list.some(v=> v['gis-GIS编号'] === res['gis-GIS编号'])) return; if (list.some(v => v['gis-GIS编号'] === res['gis-GIS编号'])) return;
list.push(res); list.push(res);
} }
setVisible(false); setVisible(false);
list.forEach((item , index) => { list.forEach((item, index) => {
item.key = index; item.key = index;
}) });
setDataSource(list); setDataSource(list);
setVisible(true); setVisible(true);
onChange(list.length) onChange(list.length);
}) });
return () => { return () => {
eventEmitter.removeAllListeners(addons?.dataPath) eventEmitter.removeAllListeners(addons?.dataPath);
} };
}, [dataSource]); }, [dataSource]);
useEffect(() => { useEffect(() => {
getColumns() getColumns();
} , [fieldList , dataSource]) }, [fieldList, dataSource]);
useEffect(() => { useEffect(() => {
initRelationForm(); initRelationForm();
setRelationData(); setRelationData();
}, [value , dataSource]); }, [value, dataSource]);
return ( return (
<Fragment> <Fragment>
...@@ -370,10 +371,12 @@ const DataTable = props => { ...@@ -370,10 +371,12 @@ const DataTable = props => {
bordered bordered
columns={columns} columns={columns}
pagination={pagination} pagination={pagination}
scroll={!pagination && { scroll={
!pagination && {
x: scrollX, x: scrollX,
y: scrollY y: scrollY,
}} }
}
dataSource={dataSource} dataSource={dataSource}
/> />
) : ( ) : (
......
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