Skip to content

S
szse
Commit ce74dbf3 by zhaochengxiang
Options

资产新增

parent f144019f
Showing with 136 additions and 239 deletions
src/view/Manage/AssetManage/Component/AddAssetModel.jsx 0 → 100644
import React, { useState } from 'react';
import { Modal, Form, Space, Button } from 'antd';
import { showMessage } from '../../../../util';
import { dispatch } from '../../../../model';
import AssetAction from './AssetAction';
import './AddAssetModel.less';
const AddAssetModel = (props) => {
const { onCancel, visible, nodeId } = props;
const [ confirmLoading, setConfirmLoading ] = useState(false);
const [ metadataId, setMetadataId ] = useState('');
const [ elements, setElements ] = useState([]);
const [ form ] = Form.useForm();
const onElementsChange = (value) => {
setElements(value);
}
const onMetadataChange = (value) => {
setMetadataId(value);
}
const onOk = async() => {
try {
const row = await form?.validateFields();
const newElements = [...elements];
(newElements||[]).forEach(element => {
if (row.hasOwnProperty(element.name)) {
element.value = row[element.name];
}
});
const params = {
dirId: nodeId,
}
if ((metadataId||'')!=='') {
params.metadataId = metadataId;
}
setConfirmLoading(true);
dispatch({
type: 'assetmanage.addOrUpdateDataAsset',
payload: {
params,
data: { elements: newElements }
},
callback: () => {
setConfirmLoading(false);
showMessage("success","新增成功");
onCancel && onCancel(true);
},
error: () => {
setConfirmLoading(false);
}
})
} catch (errInfo) {
console.log('Validate Failed:', errInfo);
setConfirmLoading(false);
}
}
return (
<Modal
forceRender
className='asset-add'
title='新增资产信息'
visible={ visible }
width={ 600 }
onCancel={() => { onCancel && onCancel(); } }
footer={
<Space>
<Button onClick={() => onCancel && onCancel() }>取消</Button>
<Button type="primary" onClick={ onOk } loading={ confirmLoading }>确定</Button>
</Space>
}
>
<AssetAction
form={form}
dirId={nodeId}
action='add'
onMetadataChange={onMetadataChange}
onElementsChange={onElementsChange}
/>
</Modal>
);
}
export default AddAssetModel;
\ No newline at end of file
src/view/Manage/AssetManage/Component/AssetEdit.less → src/view/Manage/AssetManage/Component/AddAssetModel.less
.asset-edit {
.yy-form {
.asset-add {
.yy-modal-body {
max-height: 500px !important;
overflow: auto !important;
}
......
src/view/Manage/AssetManage/Component/AssetAction.jsx
......@@ -11,8 +11,7 @@ import { AppContext } from '../../../../App';
import Tag from '../../Tag';
const AssetAction = (props) => {
const { id, dirId, action, terms, onChange, readOnly = false } = props;
const { id, dirId, action, terms, onChange, readOnly = false, form, onMetadataChange, onElementsChange } = props;
const [ currentAction, setCurrentAction ] = useState(action);
const [ assetParams, setAssetParams ] = useState({ assets: [], attributes: [], attributesFoldMap: {} });
......@@ -24,8 +23,6 @@ const AssetAction = (props) => {
const { assets, attributes, attributesFoldMap } = assetParams;
const [ form ] = Form.useForm();
useEffect(() => {
if (action === 'add') {
getElements();
......@@ -45,6 +42,7 @@ const AssetAction = (props) => {
callback: data => {
setLoading(false);
setElements(data||[]);
onElementsChange && onElementsChange(data||[]);
if (action === 'add') {
const _attributes = [];
......@@ -84,6 +82,7 @@ const AssetAction = (props) => {
callback: data => {
setLoading(false);
setMetadataId(data?.mid||'');
onMetadataChange && onMetadataChange(data?.mid||'');
const _attributes = [];
(data?.elements||[]).forEach(element => {
......@@ -139,7 +138,7 @@ const AssetAction = (props) => {
const onOk = async() => {
try {
const row = await form.validateFields();
const row = await form?.validateFields();
const newElements = [...elements];
(newElements||[]).forEach(element => {
......@@ -208,7 +207,7 @@ const AssetAction = (props) => {
_fieldsValue[element.name] = element.value;
})
form.setFieldsValue(_fieldsValue);
form?.setFieldsValue(_fieldsValue);
}
})
}
......@@ -240,7 +239,7 @@ const AssetAction = (props) => {
}}
>
{
!readOnly && <div
(!readOnly&&action!=='add') && <div
className='flex px-3'
style={{
height: 52,
......@@ -259,23 +258,24 @@ const AssetAction = (props) => {
</Space>
</div>
}
<div style={{ padding: 10 }}>
<Descriptions column={1}>
{
(assets.currentPath||'')!=='' && <Descriptions.Item label='路径' style={{ paddingBottom: 10 }}>
<a onClick={()=>{jumpToPath();}}>
{assets.currentPath||''}
</a>
{
(action!=='add') && <div style={{ padding: 10 }}>
<Descriptions column={1}>
{
(assets.currentPath||'')!=='' && <Descriptions.Item label='路径' style={{ paddingBottom: 10 }}>
<a onClick={()=>{jumpToPath();}}>
{assets.currentPath||''}
</a>
</Descriptions.Item>
}
<Descriptions.Item label='标签' style={{ paddingBottom: 0 }}>
{
(currentAction==='add'||currentAction==='edit')?<Tag styleType='complex' id={id} />:<Tag id={id} />
}
</Descriptions.Item>
}
<Descriptions.Item label='标签' style={{ paddingBottom: 0 }}>
{
(currentAction==='add'||currentAction==='edit')?<Tag styleType='complex' id={id} />:<Tag id={id} />
}
</Descriptions.Item>
</Descriptions>
</div>
</Descriptions>
</div>
}
<div
style={{
......@@ -297,7 +297,7 @@ const AssetAction = (props) => {
sameAttributeElements = (assets?.elements||[]).filter(element => element.type===attribute);
}
if (attributesFoldMap[attribute]) {
if (currentAction!=='add' && !fullScreen && attributesFoldMap[attribute]) {
sameAttributeElements = (sameAttributeElements||[]).filter(element => unfoldedElements.indexOf(element?.name||'')!==-1);
}
......@@ -311,11 +311,14 @@ const AssetAction = (props) => {
padding: '0 15px',
backgroundColor: '#106baa',
color: '#fff',
height: 32
}}
>
<div>{attribute||''}</div>
{
attributesFoldMap[attribute] ? <Button type='text' style={{ padding: 0, color: '#fff' }} onClick={() => { onFoldButtonClick(attribute, false) }}>展开<DownOutlined /></Button> : <Button type='text' style={{ padding: 0, color: '#fff' }} onClick={() => { onFoldButtonClick(attribute, true) }}>收起<UpOutlined /></Button>
currentAction!=='add'&&!fullScreen && (
attributesFoldMap[attribute] ? <Button type='text' style={{ padding: 0, color: '#fff' }} onClick={() => { onFoldButtonClick(attribute, false) }}>展开<DownOutlined /></Button> : <Button type='text' style={{ padding: 0, color: '#fff' }} onClick={() => { onFoldButtonClick(attribute, true) }}>收起<UpOutlined /></Button>
)
}
</div>
<div style={{ padding: 10 }}>
......@@ -327,6 +330,8 @@ const AssetAction = (props) => {
value?.onGlobalStateChange&&value?.onGlobalStateChange((state, prev) => {
if (state.message === 'data-govern-show-metadata-list-callback-message') {
setMetadataId(state.data?.metadataId||'');
onMetadataChange && onMetadataChange(state.data?.metadataId||'');
form?.setFieldsValue({ '资产项': state.data?.metadataInfoJson||'' });
if ((state.data?.metadataId||'') !== '') {
......
src/view/Manage/AssetManage/Component/AssetDetailDrawer.jsx
import React from 'react';
import { Drawer } from 'antd';
import { Drawer, Form } from 'antd';
import AssetAction from './AssetAction';
const AssetDetailDrawer = (props) => {
const { onCancel, visible, id, dirId } = props;
const [ form ] = Form.useForm();
return (
<Drawer
......@@ -18,7 +20,7 @@ const AssetDetailDrawer = (props) => {
onCancel && onCancel();
}}
>
<AssetAction id={id} dirId={dirId} action='detail' readOnly />
<AssetAction form={form} id={id} dirId={dirId} action='detail' readOnly />
</Drawer>
)
}
......
src/view/Manage/AssetManage/Component/AssetEdit.jsx deleted 100644 → 0
import React, { useEffect, useState } from 'react';
import { Modal, Form, Input, Space, Button } from 'antd';
import { showMessage } from '../../../../util';
import { dispatch } from '../../../../model';
import { AppContext } from '../../../../App';
import MetadataInfo from './MetadataInfo';
import './AssetEdit.less';
const AssetEdit = (props) => {
const { onCancel, visible, action, id, nodeId } = props;
const [ form ] = Form.useForm();
const [ confirmLoading, setConfirmLoading ] = useState(false);
const [ elements, setElements ] = useState([]);
const [ asset, setAsset ] = useState('');
const [ metadataId, setMetadataId ] = useState('');
useEffect(() => {
if (visible) {
if (action === 'add') {
getAllElements();
} else if (id) {
getAllElements(() => {
getAsset();
});
}
} else {
setMetadataId('');
}
//eslint-disable-next-line react-hooks/exhaustive-deps
}, [ visible, action, id ])
const getAllElements = ( cb = null ) => {
dispatch({
type: 'assetmanage.listElements',
callback: data => {
setElements(data||[]);
if (action === 'add') {
let _fieldsValue = {};
(data||[]).forEach(element => {
if (element.manualMaintain === '是') {
_fieldsValue[element.name] = '';
}
})
form.setFieldsValue(_fieldsValue);
}
cb && cb();
}
})
}
const getAsset = () => {
dispatch({
type: 'assetmanage.getDataAssetDetail',
payload: {
dataAssetId: id
},
callback: data => {
setAsset(data);
setMetadataId(data.mid||'');
let _fieldsValue = {};
(data.elements||[]).forEach(element => {
_fieldsValue[element.name] = element.value;
})
form.setFieldsValue(_fieldsValue);
}
})
}
//选中元数据后 内容回填.
const fillElementValueBeforeCreate = (mid = metadataId) => {
dispatch({
type: 'assetmanage.fillElementValueBeforeCreate',
payload: {
params: {
metadataIds: mid
}
},
callback: data => {
let _fieldsValue = {};
(data||[]).forEach(element => {
_fieldsValue[element.name] = element.value;
})
form.setFieldsValue(_fieldsValue);
}
})
}
const onOk = async() => {
try {
const row = await form.validateFields();
const newElements = [...elements];
(newElements||[]).forEach(element => {
if (row.hasOwnProperty(element.name)) {
element.value = row[element.name];
}
});
const params = {
dirId: nodeId,
}
if ((metadataId||'')!=='') {
params.metadataId = metadataId;
}
setConfirmLoading(true);
dispatch({
type: 'assetmanage.addOrUpdateDataAsset',
payload: {
params,
data: action==='add' ? { elements: newElements } : { ...asset, elements: newElements }
},
callback: () => {
setConfirmLoading(false);
onCancel && onCancel(true);
showMessage("success",(action==='add')?"新增成功":"修改成功");
},
error: () => {
setConfirmLoading(false);
}
})
} catch (errInfo) {
console.log('Validate Failed:', errInfo);
setConfirmLoading(false);
}
}
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 5 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 17 },
},
};
return (
<Modal
forceRender
className='asset-edit'
title='资产信息'
visible={ visible }
width={ 600 }
onCancel={() => { onCancel && onCancel(); } }
footer={
<Space>
<Button onClick={() => onCancel && onCancel() }>取消</Button>
<Button type="primary" onClick={ onOk } loading={ confirmLoading }>确定</Button>
</Space>
}
>
<Form {...formItemLayout} form={form}>
<AppContext.Consumer>
{
value => {
value?.onGlobalStateChange&&value?.onGlobalStateChange((state, prev) => {
if (state.message === 'data-govern-show-metadata-list-callback-message') {
setMetadataId(state.data?.metadataId||'');
form?.setFieldsValue({ '资产项': state.data?.metadataInfoJson||'' });
if ((state.data?.metadataId||'') !== '') {
fillElementValueBeforeCreate(state.data?.metadataId||'');
}
}
});
return (
<>
{ (elements||[]).map((element, index) => {
return (
<Form.Item
label={element.name}
name={element.name}
key={index}
>
{ (element.name==='资产项') ? <MetadataInfo /> : <Input disabled={element.manualMaintain==='否'} /> }
</Form.Item>
)
})}
</>
);
}}
</AppContext.Consumer>
</Form>
</Modal>
);
}
export default AssetEdit;
\ No newline at end of file
src/view/Manage/AssetManage/Component/AssetTable.jsx
......@@ -7,7 +7,7 @@ import { Resizable } from 'react-resizable';
import FilterElementModal from './FilterElementModal';
import AssetMount from '../../AssetRecycle/Component/AssetMount';
import ImportAssetDrawer from './ImportAssetDrawer';
import AssetEdit from './AssetEdit';
import AssetEdit from './AddAssetModel';
import AssetDetailDrawer from "./AssetDetailDrawer";
import { dispatch, dispatchLatestHomepage } from '../../../../model';
import { showMessage, showNotifaction, getQueryParam, inputWidth, isSzseEnv } from '../../../../util';
......@@ -61,7 +61,6 @@ const AssetTable = (props) => {
const [ assetMountVisible, setAssetMountVisible ] = useState(false);
const [ assetDetailDrawerVisible, setAssetDetailDrawerVisible ] = useState(false);
// const [ currentAssetId, setCurrentAssetId ] = useState('');
const [ assetEditAction, setAssetEditAction ] = useState('');
const [ pagination, setPagination ] = useState( { pageNum: 1, pageSize: 20 } );
const { pageNum, pageSize } = pagination;
const [ keyword, setKeyword ] = useState('');
......@@ -326,7 +325,6 @@ const AssetTable = (props) => {
}
const addAsset =()=>{
setAssetEditAction('add');
setAssetEditVisible(true);
}
......@@ -578,7 +576,6 @@ const AssetTable = (props) => {
<AssetEdit
visible={assetEditVisible}
action={assetEditAction}
nodeId={nodeId}
onCancel={onAssetEditCancel}
/>
......
src/view/Manage/AssetManage/index.jsx
import React, { useState } from 'react';
import classNames from 'classnames';
import { Form } from 'antd';
import { CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons';
import AssetTree from './Component/AssetTree';
......@@ -22,6 +23,7 @@ const AssetManage = (props) => {
const [ directoryChanged, setDirectoryChanged ] = useState(false);
const [ elementsChanged, setElementsChanged ] = useState(false);
const [ assetActionChanged, setAssetActionChanged ] = useState(false);
const [ form ] = Form.useForm();
const { assetId, assetDirId } = assetParams;
......@@ -74,7 +76,7 @@ const AssetManage = (props) => {
<AssetTable nodeId={nodeId} reference={AssetManageReference} elementsChanged={elementsChanged} assetActionChanged={assetActionChanged} onSelect={onTableSelect} onCountChange={onAssetCountChange} {...props} />
</div>
<div className='right'>
<AssetAction id={assetId} dirId={assetDirId} action='detail' onChange={onAssetActionChange} />
<AssetAction form={form} id={assetId} dirId={assetDirId} action='detail' onChange={onAssetActionChange} />
</div>
</div>
)
......
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