Skip to content

S
szse
Commit 96fd8cd2 by zhaochengxiang
Options

可见列设置

parent 7c2784f2
Showing with 176 additions and 271 deletions
src/model/pds.js
......@@ -127,4 +127,8 @@ export function* saveCols(payload) {
export function* 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
......@@ -126,4 +126,8 @@ export function saveCols(payload) {
export function getCols(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';
import { dispatch } from '../../../../model';
const cols = [
{title: '服务名称'},
{title: '中文名称'},
{title: '路径'},
{title: '状态'},
{title: '管理人'},
// {title: '是否启动OData'},
{title: '版本号'},
{title: '服务描述'},
];
const ColSettingModal = (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 [confirmLoading, setConfirmLoading] = useState(false);
useEffect(() => {
if (visible) {
getAttrs();
getPreference();
}
}, [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 = () => {
dispatch({
type: 'pds.getCols',
payload: {
modelName: 'DataServiceCol'
modelName: 'DataService'
},
callback: data => {
setCheckedKeys(data?.map(item => item.titleCnName));
......@@ -42,14 +53,8 @@ const ColSettingModal = (props) => {
const newCheckedKeys = [];
if (checked) {
cols.forEach(col => {
newCheckedKeys.push(col.title);
});
} else {
cols.forEach(col => {
if (col.require) {
newCheckedKeys.push(col.title);
}
attrs?.forEach(col => {
newCheckedKeys.push(col.name);
});
}
......@@ -76,7 +81,7 @@ const ColSettingModal = (props) => {
dispatch({
type: 'pds.saveCols',
payload: {
params: {modelName: 'DataServiceCol'},
params: {modelName: 'DataService'},
data: checkedKeys?.map(item => {
return { titleCnName: item }
})
......@@ -122,23 +127,35 @@ const ColSettingModal = (props) => {
/>
</div>
<div className='mt-3' style={{ maxHeight: 450, overflow: 'auto' }}>
<Row>
{
cols.map((col, index) => {
catagories?.map((catagory, index) => {
return (
<Col className='mb-3' key={index} md={6}>
<div className='d-flex'>
<Checkbox checked={ checkedKeys.indexOf(col.title||'')!==-1 } value={col.title} onChange={onCheckChange} disabled={col.require} >
</Checkbox>
<Typography.Paragraph className='ml-1' title={col.title} ellipsis>
{col.title}
</Typography.Paragraph>
<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>
</Col>
<Row>
{
attrs?.filter(col => col.status===catagory)?.map((col, index) => {
return (
<Col className='mb-3' key={index} md={6}>
<div className='d-flex'>
<Checkbox checked={ checkedKeys.indexOf(col.name||'')!==-1 } value={col.name} onChange={onCheckChange} >
</Checkbox>
<Typography.Paragraph className='ml-1' title={col.name} ellipsis>
{col.name}
</Typography.Paragraph>
</div>
</Col>
)
})
}
</Row>
</div>
)
})
}
</Row>
</div>
</Modal>
)
......
src/view/Manage/Model/Component/ModelTable.jsx
......@@ -163,254 +163,108 @@ const ModelTable = (props) => {
const [ serviceDetailParams, setServiceDetailParams ] = useState({ visible: false, id: '' })
const [ sampleParams, setSampleParams ] = useState({ visible: false, service: undefined });
const [ exchangeOwnerParams, setExchangeOwnerParams ] = useState({ visible: false, id: undefined });
const [attrs, setAttrs] = useState(undefined);
const app = useContext(AppContext);
const cols = [
{
title: '序号',
dataIndex: 'key',
render: (text, record, index) => {
return (index+1).toString();
},
width: 60,
ellipsis: true,
const indexCol = {
title: '序号',
dataIndex: 'key',
render: (text, record, index) => {
return (index+1).toString();
},
{
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>
)
width: 60,
ellipsis: true,
}
const actionCol = {
title: '操作',
dataIndex: 'action',
width: 240,
fixed: 'right',
render: (_, record) => {
const authActionTitles = [];
if ((getDataModelerRole(user)!==DataModelerRoleReader) && view!=='grant' && !isOnlyEnding && (record.editable||record.permitCheckOut)) {
authActionTitles.push('编辑');
}
},
{
title: '路径',
dataIndex: 'path',
width: 120,
ellipsis: true,
sorter: true,
sortDirections: ['ascend', 'descend'],
render: (text, _, __) => {
return (
<Tooltip title={text||''}>
<Text ellipsis={true}>{text||''}</Text>
</Tooltip>
)
if ((getDataModelerRole(user)!==DataModelerRoleReader) && view!=='grant'&& !isOnlyEnding && record.deletable) {
authActionTitles.push('删除');
}
},
{
title: '状态',
dataIndex: 'state',
width: 100,
ellipsis: true,
sorter: true,
sortDirections: ['ascend', 'descend'],
render: (_, record) => {
let color = '';
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>
);
if (record.odata) {
authActionTitles.push('URI复制');
}
},
{
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)}`;
authActionTitles.push('样本数据');
authActionTitles.push('历史版本');
if (getDataModelerRole(user)!==DataModelerRoleReader&& view!=='grant'&&record.grantable) {
authActionTitles.push('授权');
}
},
// {
// 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>
);
if (getDataModelerRole(user)!==DataModelerRoleReader && view!=='grant' && isOnlyEnding && !currentItem?.grantable) {
authActionTitles.push('申请');
}
},
{
title: '操作',
dataIndex: 'action',
width: 240,
fixed: 'right',
render: (_, record) => {
const authActionTitles = [];
if ((getDataModelerRole(user)!==DataModelerRoleReader) && view!=='grant' && !isOnlyEnding && (record.editable||record.permitCheckOut)) {
authActionTitles.push('编辑');
}
if ((getDataModelerRole(user)!==DataModelerRoleReader) && view!=='grant'&& !isOnlyEnding && record.deletable) {
authActionTitles.push('删除');
}
if (record.odata) {
authActionTitles.push('URI复制');
}
authActionTitles.push('样本数据');
authActionTitles.push('历史版本');
if (getDataModelerRole(user)!==DataModelerRoleReader && view!=='grant' && !isOnlyEnding && record.supportODataDisable) {
authActionTitles.push('下载Tableau tds');
}
if (getDataModelerRole(user)!==DataModelerRoleReader&& view!=='grant'&&record.grantable) {
authActionTitles.push('授权');
}
if (getDataModelerRole(user)!==DataModelerRoleReader && view!=='grant' && record.supportSmartBIWebSpreadSheet) {
authActionTitles.push('跳转至电子表格');
}
if (getDataModelerRole(user)!==DataModelerRoleReader && view!=='grant' && isOnlyEnding && !currentItem?.grantable) {
authActionTitles.push('申请');
}
if (getDataModelerRole(user)!==DataModelerRoleReader && view!=='grant' && record.supportChangeOwn) {
authActionTitles.push('更换管理人');
}
const authActions = actions.filter(item => authActionTitles.indexOf(item.title) !== -1);
if (getDataModelerRole(user)!==DataModelerRoleReader && view!=='grant' && !isOnlyEnding && record.supportODataDisable) {
authActionTitles.push('下载Tableau tds');
}
if (getDataModelerRole(user)!==DataModelerRoleReader && view!=='grant') {
record.state?.supportedActions?.forEach((item, index) => {
authActions.push({ title: item.cnName, key: `action-${index}` });
});
}
if (getDataModelerRole(user)!==DataModelerRoleReader && view!=='grant' && record.supportSmartBIWebSpreadSheet) {
authActionTitles.push('跳转至电子表格');
}
const haveMore = authActions.length > 3;
const showActions = authActions.slice(0, 3);
const hiddenActions = authActions.slice(3, authActions.length);
if (getDataModelerRole(user)!==DataModelerRoleReader && view!=='grant' && record.supportChangeOwn) {
authActionTitles.push('更换管理人');
return (
<Space size={5} split={<Divider type='vertical' style={{margin:0}} />}>
{
showActions.map((item, index) => {
return (
<a key={index} onClick={() => {handleItemClick(item.key, record)}} >{item.title}</a>
)
})
}
const authActions = actions.filter(item => authActionTitles.indexOf(item.title) !== -1);
if (getDataModelerRole(user)!==DataModelerRoleReader && view!=='grant') {
record.state?.supportedActions?.forEach((item, index) => {
authActions.push({ title: item.cnName, key: `action-${index}` });
});
{
haveMore && <Dropdown overlay={
<Menu onClick={({ key }) => {
handleItemClick(key, record);
}}>
{
hiddenActions.map((item, index) => {
return (
<Menu.Item key={item.key} >
<div style={{ textAlign: 'center' }}>
{item.title}
</div>
</Menu.Item>
)
})
}
</Menu>
}
placement="bottomLeft"
>
<UnorderedListOutlined className='default' style={{ fontSize:16,cursor:'pointer' }} />
</Dropdown>
}
const haveMore = authActions.length > 3;
const showActions = authActions.slice(0, 3);
const hiddenActions = authActions.slice(3, authActions.length);
return (
<Space size={5} split={<Divider type='vertical' style={{margin:0}} />}>
{
showActions.map((item, index) => {
return (
<a key={index} onClick={() => {handleItemClick(item.key, record)}} >{item.title}</a>
)
})
}
{
haveMore && <Dropdown overlay={
<Menu onClick={({ key }) => {
handleItemClick(key, record);
}}>
{
hiddenActions.map((item, index) => {
return (
<Menu.Item key={item.key} >
<div style={{ textAlign: 'center' }}>
{item.title}
</div>
</Menu.Item>
)
})
}
</Menu>
}
placement="bottomLeft"
>
<UnorderedListOutlined className='default' style={{ fontSize:16,cursor:'pointer' }} />
</Dropdown>
}
</Space>
)
}
</Space>
)
}
];
}
// const [ columns, setColumns ] = useState([]);
// const [ includePathColumns, setIncludePathColumns ] = useState([]);
......@@ -426,6 +280,7 @@ const ModelTable = (props) => {
const shouldScrollRef = useRef(false);
useEffect(() => {
getAttrs();
if ((modelId||'') !== '') {
window?.addEventListener("storage", modelEventChange);
......@@ -601,19 +456,27 @@ const ModelTable = (props) => {
}
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) {
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;
}, [visibleColNames, modelId, handleItemClick, view, user, isOnlyEnding])
}, [visibleColNames, attrs, indexCol, actionCol, modelId])
const modelEventChange = (e) => {
if (e.key === 'modelChange') {
......@@ -621,6 +484,21 @@ const ModelTable = (props) => {
}
}
const getAttrs = () => {
dispatch({
type: 'pds.getAttrs',
payload: {
modelName: 'DataService'
},
callback: data => {
setAttrs(data);
},
error: () => {
}
})
}
const getCheckoutDataModel = () => {
dispatch({
type: 'pds.getCheckoutService',
......
src/view/Manage/Model/index.jsx
......@@ -113,7 +113,7 @@ class Model extends React.Component {
dispatch({
type: 'pds.getCols',
payload: {
modelName: 'DataServiceCol'
modelName: 'DataService'
},
callback: data => {
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