Skip to content

S
szse
Commit 96fd8cd2 by zhaochengxiang
Options

可见列设置

parent 7c2784f2
Showing with 88 additions and 183 deletions
src/model/pds.js
...@@ -128,3 +128,7 @@ export function* saveCols(payload) { ...@@ -128,3 +128,7 @@ export function* saveCols(payload) {
export function* getCols(payload) { export function* getCols(payload) {
return yield call(pds.getCols, payload); return yield call(pds.getCols, payload);
} }
export function* getAttrs(payload) {
return yield call(pds.getAttrs, payload);
}
\ No newline at end of file
src/service/pds.js
...@@ -127,3 +127,7 @@ export function saveCols(payload) { ...@@ -127,3 +127,7 @@ export function saveCols(payload) {
export function getCols(payload) { export function getCols(payload) {
return GetJSON("/pdataservice/pdsModel/getVisibleTitle", payload); return GetJSON("/pdataservice/pdsModel/getVisibleTitle", payload);
} }
export function getAttrs(payload) {
return GetJSON("/pdataservice/pdsModel/attrs", payload);
}
\ No newline at end of file
src/view/Manage/Model/Component/ColSettingModal.jsx
...@@ -3,34 +3,45 @@ import { Modal, Button, Switch, Row, Col, Checkbox, Typography } from 'antd'; ...@@ -3,34 +3,45 @@ import { Modal, Button, Switch, Row, Col, Checkbox, Typography } from 'antd';
import { dispatch } from '../../../../model'; import { dispatch } from '../../../../model';
const cols = [
{title: '服务名称'},
{title: '中文名称'},
{title: '路径'},
{title: '状态'},
{title: '管理人'},
// {title: '是否启动OData'},
{title: '版本号'},
{title: '服务描述'},
];
const ColSettingModal = (props) => { const ColSettingModal = (props) => {
const {visible, onCancel} = props; const {visible, onCancel} = props;
const [loadingAttrs, setLoadingAttrs] = useState(false);
const [attrs, setAttrs] = useState(undefined);
const [catagories, setCatagories] = useState(undefined);
const [checkedKeys, setCheckedKeys] = useState([]); const [checkedKeys, setCheckedKeys] = useState([]);
const [confirmLoading, setConfirmLoading] = useState(false); const [confirmLoading, setConfirmLoading] = useState(false);
useEffect(() => { useEffect(() => {
if (visible) { if (visible) {
getAttrs();
getPreference(); getPreference();
} }
}, [visible]); }, [visible]);
const getAttrs = () => {
setLoadingAttrs(true);
dispatch({
type: 'pds.getAttrs',
payload: {
modelName: 'DataService'
},
callback: data => {
setAttrs(data);
setCatagories(Array.from(new Set((data||[]).map(item => item.status))));
setLoadingAttrs(false);
},
error: () => {
setLoadingAttrs(false);
}
})
}
const getPreference = () => { const getPreference = () => {
dispatch({ dispatch({
type: 'pds.getCols', type: 'pds.getCols',
payload: { payload: {
modelName: 'DataServiceCol' modelName: 'DataService'
}, },
callback: data => { callback: data => {
setCheckedKeys(data?.map(item => item.titleCnName)); setCheckedKeys(data?.map(item => item.titleCnName));
...@@ -42,14 +53,8 @@ const ColSettingModal = (props) => { ...@@ -42,14 +53,8 @@ const ColSettingModal = (props) => {
const newCheckedKeys = []; const newCheckedKeys = [];
if (checked) { if (checked) {
cols.forEach(col => { attrs?.forEach(col => {
newCheckedKeys.push(col.title); newCheckedKeys.push(col.name);
});
} else {
cols.forEach(col => {
if (col.require) {
newCheckedKeys.push(col.title);
}
}); });
} }
...@@ -76,7 +81,7 @@ const ColSettingModal = (props) => { ...@@ -76,7 +81,7 @@ const ColSettingModal = (props) => {
dispatch({ dispatch({
type: 'pds.saveCols', type: 'pds.saveCols',
payload: { payload: {
params: {modelName: 'DataServiceCol'}, params: {modelName: 'DataService'},
data: checkedKeys?.map(item => { data: checkedKeys?.map(item => {
return { titleCnName: item } return { titleCnName: item }
}) })
...@@ -122,16 +127,24 @@ const ColSettingModal = (props) => { ...@@ -122,16 +127,24 @@ const ColSettingModal = (props) => {
/> />
</div> </div>
<div className='mt-3' style={{ maxHeight: 450, overflow: 'auto' }}> <div className='mt-3' style={{ maxHeight: 450, overflow: 'auto' }}>
{
catagories?.map((catagory, index) => {
return (
<div key={index}>
<div className='flex' style={{ alignItems: 'center', padding: '5px 0 15px' }}>
<div style={{ width: 3, height: 14, backgroundColor: '#0069AC', marginRight: 5 }} />
<span style={{ fontWeight: 'bold', color: '#464646' }}>{catagory}</span>
</div>
<Row> <Row>
{ {
cols.map((col, index) => { attrs?.filter(col => col.status===catagory)?.map((col, index) => {
return ( return (
<Col className='mb-3' key={index} md={6}> <Col className='mb-3' key={index} md={6}>
<div className='d-flex'> <div className='d-flex'>
<Checkbox checked={ checkedKeys.indexOf(col.title||'')!==-1 } value={col.title} onChange={onCheckChange} disabled={col.require} > <Checkbox checked={ checkedKeys.indexOf(col.name||'')!==-1 } value={col.name} onChange={onCheckChange} >
</Checkbox> </Checkbox>
<Typography.Paragraph className='ml-1' title={col.title} ellipsis> <Typography.Paragraph className='ml-1' title={col.name} ellipsis>
{col.title} {col.name}
</Typography.Paragraph> </Typography.Paragraph>
</div> </div>
</Col> </Col>
...@@ -140,6 +153,10 @@ const ColSettingModal = (props) => { ...@@ -140,6 +153,10 @@ const ColSettingModal = (props) => {
} }
</Row> </Row>
</div> </div>
)
})
}
</div>
</Modal> </Modal>
) )
} }
......
src/view/Manage/Model/Component/ModelTable.jsx
...@@ -163,11 +163,11 @@ const ModelTable = (props) => { ...@@ -163,11 +163,11 @@ const ModelTable = (props) => {
const [ serviceDetailParams, setServiceDetailParams ] = useState({ visible: false, id: '' }) const [ serviceDetailParams, setServiceDetailParams ] = useState({ visible: false, id: '' })
const [ sampleParams, setSampleParams ] = useState({ visible: false, service: undefined }); const [ sampleParams, setSampleParams ] = useState({ visible: false, service: undefined });
const [ exchangeOwnerParams, setExchangeOwnerParams ] = useState({ visible: false, id: undefined }); const [ exchangeOwnerParams, setExchangeOwnerParams ] = useState({ visible: false, id: undefined });
const [attrs, setAttrs] = useState(undefined);
const app = useContext(AppContext); const app = useContext(AppContext);
const cols = [ const indexCol = {
{
title: '序号', title: '序号',
dataIndex: 'key', dataIndex: 'key',
render: (text, record, index) => { render: (text, record, index) => {
...@@ -175,154 +175,9 @@ const ModelTable = (props) => { ...@@ -175,154 +175,9 @@ const ModelTable = (props) => {
}, },
width: 60, width: 60,
ellipsis: true, ellipsis: true,
},
{
title: '服务名称',
dataIndex: 'name',
width: isSzseEnv?360:160,
ellipsis: true,
sorter: true,
sortDirections: ['ascend', 'descend'],
render: (text, record, index) => {
return (<ModelNameColumn text={text} record={record} detailItem={detailItem} />);
}
},
// {
// title: 'URI',
// dataIndex: 'odata',
// ellipsis: true,
// width: 170,
// render: (text, _, __) => {
// return (
// <React.Fragment>
// {
// text ? <div className='flex'>
// <Tooltip title={text||''} overlayClassName='tooltip-common'>
// <Text ellipsis={true}>
// {text||''}
// </Text>
// </Tooltip>
// <Text copyable={{ text }}></Text>
// </div> : ''
// }
// </React.Fragment>
// );
// }
// },
{
title: '中文名称',
dataIndex: 'cnName',
width: isSzseEnv?420:160,
ellipsis: true,
sorter: true,
sortDirections: ['ascend', 'descend'],
render: (text, _, __) => {
return (
<Tooltip title={text||''}>
<Text ellipsis={true}>{text||''}</Text>
</Tooltip>
)
} }
},
{
title: '路径',
dataIndex: 'path',
width: 120,
ellipsis: true,
sorter: true,
sortDirections: ['ascend', 'descend'],
render: (text, _, __) => {
return (
<Tooltip title={text||''}>
<Text ellipsis={true}>{text||''}</Text>
</Tooltip>
)
}
},
{
title: '状态',
dataIndex: 'state',
width: 100,
ellipsis: true,
sorter: true,
sortDirections: ['ascend', 'descend'],
render: (_, record) => {
let color = ''; const actionCol = {
if (record?.state?.id === '1') {
color = '#DE7777';
} else if (record?.state?.id === '2') {
color = '#779BDE';
} else if (record?.state?.id === '4') {
color = '#77DEBF';
}
return (
<span>
<span style={{ display: 'inline-block', width: 10, height: 10, borderRadius: 5, marginRight: 5, backgroundColor: color }}></span>
<span>{record?.state?.cnName||''}</span>
</span>
);
}
},
{
title: '管理人',
dataIndex: 'editor',
width: 100,
ellipsis: true,
sorter: true,
sortDirections: ['ascend', 'descend'],
},
// {
// title: '是否启动OData',
// dataIndex: 'supportODataDisable',
// width: 120,
// render: (supportODataDisable, _, __) => supportODataDisable?'是':'否'
// },
{
title: '版本号',
dataIndex: 'modifiedTs',
width: 170,
ellipsis: true,
sorter: true,
sortDirections: ['ascend', 'descend'],
render: (_,record) => {
return `V_${formatDate(record.modifiedTs)}`;
}
},
// {
// title: '标签',
// dataIndex: 'tag',
// width: 200,
// onCell: (record) => ({
// onMouseEnter: event => {
// setMouseEnterKey(record.id);
// },
// onMouseLeave: event => {
// setMouseEnterKey(null);
// },
// }),
// render: (_,record) => {
// return (
// record.id===mouseEnterKey?<Tag styleType='complex' id={record.id} />:<Tag id={record.id} />
// );
// }
// },
{
title: '服务描述',
dataIndex: 'remark',
ellipsis: true,
sorter: true,
sortDirections: ['ascend', 'descend'],
render: (text, _, __) => {
return (
<Tooltip title={text||''} overlayClassName='tooltip-common'>
<Text ellipsis={true}>{text||''}</Text>
</Tooltip>
);
}
},
{
title: '操作', title: '操作',
dataIndex: 'action', dataIndex: 'action',
width: 240, width: 240,
...@@ -410,7 +265,6 @@ const ModelTable = (props) => { ...@@ -410,7 +265,6 @@ const ModelTable = (props) => {
) )
} }
} }
];
// const [ columns, setColumns ] = useState([]); // const [ columns, setColumns ] = useState([]);
// const [ includePathColumns, setIncludePathColumns ] = useState([]); // const [ includePathColumns, setIncludePathColumns ] = useState([]);
...@@ -426,6 +280,7 @@ const ModelTable = (props) => { ...@@ -426,6 +280,7 @@ const ModelTable = (props) => {
const shouldScrollRef = useRef(false); const shouldScrollRef = useRef(false);
useEffect(() => { useEffect(() => {
getAttrs();
if ((modelId||'') !== '') { if ((modelId||'') !== '') {
window?.addEventListener("storage", modelEventChange); window?.addEventListener("storage", modelEventChange);
...@@ -601,19 +456,27 @@ const ModelTable = (props) => { ...@@ -601,19 +456,27 @@ const ModelTable = (props) => {
} }
const columns = useMemo(() => { const columns = useMemo(() => {
let newCols = [...cols]; let newCols = [];
attrs?.forEach(item => {
newCols.push({
title: item.name,
dataIndex: item.key,
ellipsis: true,
})
});
if (!modelId) {
newCols = [indexCol, ...newCols, actionCol];
} else {
newCols = [...newCols, actionCol];
}
if ((visibleColNames||[]).length > 0) { if ((visibleColNames||[]).length > 0) {
newCols = newCols.filter(col => visibleColNames.indexOf(col.title)!==-1 || col.title==='序号' || col.title==='操作'); newCols = newCols.filter(col => visibleColNames.indexOf(col.title)!==-1 || col.title==='序号' || col.title==='操作');
if ((visibleColNames||[]).indexOf('服务描述') === -1) {
newCols[newCols.length-2].width = null;
}
}
if (modelId) {
newCols.filter(col => col.title !=='序号');
} }
return newCols; return newCols;
}, [visibleColNames, modelId, handleItemClick, view, user, isOnlyEnding]) }, [visibleColNames, attrs, indexCol, actionCol, modelId])
const modelEventChange = (e) => { const modelEventChange = (e) => {
if (e.key === 'modelChange') { if (e.key === 'modelChange') {
...@@ -621,6 +484,21 @@ const ModelTable = (props) => { ...@@ -621,6 +484,21 @@ const ModelTable = (props) => {
} }
} }
const getAttrs = () => {
dispatch({
type: 'pds.getAttrs',
payload: {
modelName: 'DataService'
},
callback: data => {
setAttrs(data);
},
error: () => {
}
})
}
const getCheckoutDataModel = () => { const getCheckoutDataModel = () => {
dispatch({ dispatch({
type: 'pds.getCheckoutService', type: 'pds.getCheckoutService',
......
src/view/Manage/Model/index.jsx
...@@ -113,7 +113,7 @@ class Model extends React.Component { ...@@ -113,7 +113,7 @@ class Model extends React.Component {
dispatch({ dispatch({
type: 'pds.getCols', type: 'pds.getCols',
payload: { payload: {
modelName: 'DataServiceCol' modelName: 'DataService'
}, },
callback: data => { callback: data => {
this.setState({visibleColNames: data?.map(item => item.titleCnName)}); this.setState({visibleColNames: data?.map(item => item.titleCnName)});
......
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