Skip to content

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

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

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