Skip to content

S
szse
Commit 77d130eb by zhaochengxiang
Options

资产详情样式与标准保持统一

parent 154749c8
Showing with 89 additions and 76 deletions
src/view/Manage/AssetManage/Component/AssetAction.jsx
import React, { useEffect, useState, useContext, useMemo, useRef } from 'react'; import React, { useEffect, useState, useContext, useMemo, useRef } from 'react';
import { Form, Spin, Input, Descriptions, Space, Button, Tooltip, Select, Cascader, Radio, Divider, Typography, Modal, Row, Col, Pagination, Dropdown, Menu } from 'antd'; import { Form, Spin, Input, Descriptions, Space, Button, Tooltip, Select, Cascader, Radio, Divider, Typography, Modal, Row, Col, Pagination, Dropdown, Menu, message } from 'antd';
import { DownOutlined, UpOutlined, QuestionCircleOutlined } from '@ant-design/icons'; import { DownOutlined, UpOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import LocalStorage from 'local-storage'; import LocalStorage from 'local-storage';
...@@ -32,6 +32,7 @@ const AssetAction = (props) => { ...@@ -32,6 +32,7 @@ const AssetAction = (props) => {
const [ assetParams, setAssetParams ] = useState({ assets: {}, attributes: [], attributesFoldMap: {} }); const [ assetParams, setAssetParams ] = useState({ assets: {}, attributes: [], attributesFoldMap: {} });
const [ elements, setElements ] = useState([]); const [ elements, setElements ] = useState([]);
const [ wholeElements, setWholeElements ] = useState([]); const [ wholeElements, setWholeElements ] = useState([]);
const [currentAttribute, setCurrentAttribute] = useState();
const [ metadataId, setMetadataId ] = useState(''); const [ metadataId, setMetadataId ] = useState('');
const [ loading, setLoading ] = useState(false); const [ loading, setLoading ] = useState(false);
const [ confirmLoading, setConfirmLoading ] = useState(false); const [ confirmLoading, setConfirmLoading ] = useState(false);
...@@ -226,6 +227,7 @@ const AssetAction = (props) => { ...@@ -226,6 +227,7 @@ const AssetAction = (props) => {
} else { } else {
setMetadataId(''); setMetadataId('');
setAssetParams({...assetParams, ...{assets: {}, attributes: []}}); setAssetParams({...assetParams, ...{assets: {}, attributes: []}});
setCurrentAttribute();
getElements(); getElements();
} }
} }
...@@ -482,6 +484,9 @@ const AssetAction = (props) => { ...@@ -482,6 +484,9 @@ const AssetAction = (props) => {
}) })
setAssetParams({ assets: data, attributes: _attributes, attributesFoldMap: newAttributesFoldMap }); setAssetParams({ assets: data, attributes: _attributes, attributesFoldMap: newAttributesFoldMap });
if ((_attributes??[]).length > 0) {
setCurrentAttribute(_attributes[0])
}
let _fieldsValue = {}; let _fieldsValue = {};
(data.elements||[]).forEach(element => { (data.elements||[]).forEach(element => {
...@@ -668,16 +673,16 @@ const AssetAction = (props) => { ...@@ -668,16 +673,16 @@ const AssetAction = (props) => {
} catch (errInfo) { } catch (errInfo) {
console.log('Validate Failed:', errInfo); console.log('Validate Failed:', errInfo);
setConfirmLoading(false); showMessage('warn', '请完成资产必填项')
} }
} }
const onFoldButtonClick = (attribute, fold) => { // const onFoldButtonClick = (attribute, fold) => {
let newAttributesFoldMap = {...attributesFoldMap}; // let newAttributesFoldMap = {...attributesFoldMap};
newAttributesFoldMap[attribute] = fold; // newAttributesFoldMap[attribute] = fold;
setAssetParams({...assetParams, attributesFoldMap: newAttributesFoldMap}); // setAssetParams({...assetParams, attributesFoldMap: newAttributesFoldMap});
} // }
const onFullScreenClick = () => { const onFullScreenClick = () => {
setFullScreen(!fullScreen); setFullScreen(!fullScreen);
...@@ -999,78 +1004,86 @@ const AssetAction = (props) => { ...@@ -999,78 +1004,86 @@ const AssetAction = (props) => {
spinning={loading} spinning={loading}
> >
<Form form={form} onValuesChange={onValuesChange}> <Form form={form} onValuesChange={onValuesChange}>
{ <Radio.Group className='mb-3' value={currentAttribute} onChange={(e) => {
attributes?.map((attribute, index) => { setCurrentAttribute(e.target.value)
return <div key={index}> }}>
<Divider orientation='left'>{attribute}</Divider> {
<Descriptions column={1} bordered> (attributes??[]).map((item,key) => (
{ <Radio.Button key={key} value={item}>{item}</Radio.Button>
wholeElements?.length>0 && elements?.map((element, index) => { ))
if (element.type!==attribute || element.name === '资产项') return null; }
</Radio.Group>
let interpretation = null; {
const filterElements = wholeElements?.filter(_element => _element.id === element.id); attributes?.map((attribute, index) => {
if (filterElements.length>0) { return <div key={index} style={{ display: (attribute===currentAttribute)?'':'none' }}>
interpretation = filterElements[0].interpretation; <Descriptions column={1} bordered>
} {
wholeElements?.length>0 && elements?.map((element, index) => {
if (element.type!==attribute || element.name === '资产项') return null;
let interpretation = null;
const filterElements = wholeElements?.filter(_element => _element.id === element.id);
if (filterElements.length>0) {
interpretation = filterElements[0].interpretation;
}
return ( return (
<Descriptions.Item <Descriptions.Item
key={index} key={index}
label={ label={
<span> <span>
{element.name} {element.name}
{ {
(currentAction==='add'||currentAction==='edit') && element.required && <span style={{ color: 'red' }}>*</span> (currentAction==='add'||currentAction==='edit') && element.required && <span style={{ color: 'red' }}>*</span>
}
</span>
} }
</span> labelStyle={{ width: 180 }}
} >
labelStyle={{ width: 180 }} {
> (currentAction==='add'||currentAction==='edit') ?
{ <Row gutter={8} align='middle'>
(currentAction==='add'||currentAction==='edit') ? <Col span={22}>
<Row gutter={8} align='middle'> <Form.Item
<Col span={22}> label=''
<Form.Item name={element.name}
label='' rules={[{ required: element.required }]}
name={element.name} style={{ marginBottom: 0 }}
rules={[{ required: element.required }]} >
style={{ marginBottom: 0 }} {elementEditComponent(element)}
> </Form.Item>
{elementEditComponent(element)}
</Form.Item>
</Col>
{
interpretation && <Col span={2}>
<Tooltip placement="left" title={interpretation}>
<QuestionCircleOutlined style={{ fontSize: 16 }} />
</Tooltip>
</Col> </Col>
} {
</Row> interpretation && <Col span={2}>
: <React.Fragment> <Tooltip placement="left" title={interpretation}>
<Row gutter={8} align='middle'> <QuestionCircleOutlined style={{ fontSize: 16 }} />
<Col span={22}> </Tooltip>
{ elementDetailComponent(element) } </Col>
</Col> }
{ </Row>
interpretation && <Col span={2}> : <React.Fragment>
<Tooltip placement="left" title={interpretation}> <Row gutter={8} align='middle'>
<QuestionCircleOutlined style={{ fontSize: 16 }} /> <Col span={22}>
</Tooltip> { elementDetailComponent(element) }
</Col> </Col>
} {
</Row> interpretation && <Col span={2}>
</React.Fragment> <Tooltip placement="left" title={interpretation}>
} <QuestionCircleOutlined style={{ fontSize: 16 }} />
</Descriptions.Item> </Tooltip>
) </Col>
}) }
} </Row>
</Descriptions> </React.Fragment>
</div> }
}) </Descriptions.Item>
} )
})
}
</Descriptions>
</div>
})
}
</Form> </Form>
</Spin> </Spin>
...@@ -1152,7 +1165,7 @@ const AssetAction = (props) => { ...@@ -1152,7 +1165,7 @@ const AssetAction = (props) => {
</Space> </Space>
<Table <Table
className='mt-2' className='mt-3'
loading={loadingMetadataColumnList} loading={loadingMetadataColumnList}
columns={permissionId?columns:columns.filter(item => item.dataIndex !== 'permission')} columns={permissionId?columns:columns.filter(item => item.dataIndex !== 'permission')}
rowKey='_id' rowKey='_id'
......
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