资产详情改造

src/App.js

@@ -87,6 +87,8 @@ export class App extends React.Component {
     if (message === 'showAssetDetail') {
       return (
         <AppContext.Provider value={{
+          env: hostParams?.env,
+          user: hostParams?.user,
           setGlobalState,
           onGlobalStateChange
         }}>

src/view/Manage/AssetManage/Component/AssetAction.jsx

@@ -49,7 +49,6 @@ const AssetAction = (props) => {
   const [metadata, setMetadata] = useState(undefined);
   const [loadingMetadataColumnList, setLoadingMetadataColumnList] = useState(false);
   const [metadataColumnList, setMetadataColumnList] = useState(undefined);
-  const [mode, setMode] = useState(undefined);
 
   const app = useContext(AppContext);
   const uploadRef = useRef(undefined);
@@ -129,14 +128,6 @@ const AssetAction = (props) => {
     //eslint-disable-next-line react-hooks/exhaustive-deps
   }, [id, dirId])
 
-  const currentAttributeElements = useMemo(() => {
-    if (mode && elements?.length > 0) {
-      return (elements||[]).filter(element => element.type===mode);
-    }
-
-    return [];
-  }, [mode, elements])
-
   const domains = useMemo(() => {
     if (currentDomainGroup && treeDataMap) {
       return treeDataMap[currentDomainGroup];
@@ -291,9 +282,6 @@ const AssetAction = (props) => {
         })
 
         setAssetParams({ assets: {}, attributes: _attributes, attributesFoldMap: newAttributesFoldMap });
-        if (_attributes.length>0) {
-          setMode(_attributes[0]);
-        }
 
         form?.resetFields();
 
@@ -401,9 +389,6 @@ const AssetAction = (props) => {
         })
 
         setAssetParams({ assets: data, attributes: _attributes, attributesFoldMap: newAttributesFoldMap });
-        if (!mode && _attributes.length > 0) {
-          setMode(_attributes[0]);
-        }
 
         let _fieldsValue = {};
         (data.elements||[]).forEach(element => {
@@ -745,10 +730,6 @@ const AssetAction = (props) => {
     })
   }
 
-  const handleModeChange = (e) => {
-    setMode(e.target.value);
-  }
-
   const onValuesChange = (changedValues, allValues) => {
     if (changedValues.hasOwnProperty('主题域分组')) {
       setCurrentDomainGroup(changedValues['主题域分组']);
@@ -788,7 +769,7 @@ const AssetAction = (props) => {
             <Descriptions column={1}>
               <Descriptions.Item 
                 label={<div className='title-text' style={{ textAlign: 'right', width: 60 }}>资产路径</div>} 
-                style={{ paddingBottom: 15 }}
+                style={{ paddingBottom: 0 }}
               >
                 <div className='flex' style={{ flexDirection: 'column' }}>
                 {
@@ -838,45 +819,50 @@ const AssetAction = (props) => {
       > */}
         <Spin 
           spinning={loading}
-          style={{ marginTop: 30 }}
         >
-          <Radio.Group className='mb-3' onChange={handleModeChange} value={mode}>
+          <Form form={form} onValuesChange={onValuesChange}>
           {
             attributes?.map((attribute, index) => {
-              return <Radio.Button value={attribute} key={index}>{attribute}</Radio.Button>;
+              return <div key={index}>
+                <Divider orientation='left'>{attribute}</Divider>
+                <Descriptions column={1} bordered>
+                {
+                  elements?.map((element, index) => {
+                    if (element.type!==attribute || element.name === '资产项') return null;
+
+                    return (
+                      <Descriptions.Item 
+                        key={index}
+                        label={
+                          <span>
+                          {element.name}
+                          {
+                            (currentAction==='add'||currentAction==='edit') && element.required && <span style={{ color: 'red' }}>*</span>
+                          }
+                          </span>
+                        }
+                        labelStyle={{ width: 180 }}
+                      >
+                      {
+                        (currentAction==='add'||currentAction==='edit') ? <Form.Item 
+                          label=''
+                          name={element.name}
+                          rules={[{ required: element.required }]}    
+                          style={{ width: 500, marginBottom: 0 }}     
+                        >
+                          {elementEditComponent(element)}
+                        </Form.Item> : <React.Fragment>
+                        { elementDetailComponent(element) }
+                        </React.Fragment>
+                      }
+                      </Descriptions.Item>
+                    )
+                  })
+                }
+                </Descriptions>
+              </div>
             })
           }
-          </Radio.Group>
-          <Form form={form} onValuesChange={onValuesChange}>
-            <Descriptions column={1} bordered>
-            {
-              elements?.map((element, index) => {
-                if (element.name === '资产项') return null;
-
-                return (
-                  <Descriptions.Item 
-                    key={index}
-                    label={element.name}
-                    labelStyle={{ width: 180 }}
-                    style={{ display: (element.type===mode)?'': 'none'}}
-                  >
-                  {
-                    (currentAction==='add'||currentAction==='edit') ? <Form.Item 
-                      label=''
-                      name={element.name}
-                      rules={[{ required: element.required }]}    
-                      style={{ width: 500, marginBottom: 0 }}     
-                    >
-                      {elementEditComponent(element)}
-                    </Form.Item> : <React.Fragment>
-                    { elementDetailComponent(element) }
-                    </React.Fragment>
-                  }
-                  </Descriptions.Item>
-                )
-              })
-            }
-            </Descriptions>
           </Form>
 
         </Spin>