新增为资产

craco.config.js

@@ -50,7 +50,7 @@ module.exports = {
     },
     proxy: {
       '/api': {
-          target: 'http://139.198.127.28:18189',
+          target: 'http://192.168.0.111:8189',
           changeOrigin: true,
       },
       '/data-quality': {

src/view/Manage/AssetResourceManage/add-to-asset.jsx

+import React from 'react'
+import { Modal, Button, Spin, Form, Select, TreeSelect, Input, Row, Col, Tree, Tooltip, Typography } from 'antd'
+import { debounceTime, Subject } from 'rxjs'
+
+import { dispatch } from '../../../model'
+import produce from 'immer'
+import { AssetManageReference, ResourceManageReference } from '../../../util/constant'
+import { getAssetRange, getAssetType, inputWidth, isSzseEnv } from '../../../util'
+import { AppContext } from '../../../App'
+import MetadataInfo from '../AssetManage/Component/MetadataInfo'
+import { defaultPage, usePage } from '../../../util/hooks/page'
+import Table from '../../../util/Component/Table'
+
+import './add-to-asset.less'
+
+const FC = (props) => {
+  const { visible, items, onCancel } = props
+  const [waiting, setWaiting] = React.useState(false)
+
+  const close = (refresh = false) => {
+    setWaiting(false)
+    onCancel?.(refresh)
+  }
+
+  const save = () => {
+
+  }
+
+  const footer = React.useMemo(() => {
+    return [
+      <Button key={'cancel'}
+        onClick={() => close()}
+      >取消</Button>,
+      <Button key={'save'} type='primary'
+        onClick={() => save()}
+      >确定</Button>
+    ]
+  }, [close, save])
+
+  return (
+    <Modal
+      className='add-to-asset'
+      visible={visible}
+      footer={footer}
+      width='90%'
+      bodyStyle={{ padding: '15px 15px 0px 15px', overflowX: 'auto', height: '80vh' }}
+      title='新增为资产'
+      centered destroyOnClose
+      onCancel={() => { close() }}
+    >
+      <Spin spinning={waiting} >
+        <Basic items={items} />
+      </Spin>
+    </Modal>  
+  )
+}
+
+export default FC
+
+export const Basic = React.forwardRef(function ({ items }, ref) {
+  const [type, setType] = React.useState('add')
+  const [loadingTreeData, setLoadingTreeData] = React.useState(false)
+  const [treeData, setTreeData] = React.useState()
+  const [form] = Form.useForm()
+
+  React.useEffect(() => {
+    getTreeData()
+  }, [])
+
+  const treeData1 = React.useMemo(() => {
+    if (treeData) {
+      const newTreeData = produce(treeData, draft => {
+        const setNode = (g) => {
+          g.key = g.nodeId
+          g.title = g.text
+          g.value = g.nodeId
+          g.children?.forEach((child) => {
+            setNode(child)
+          })
+        }
+
+        draft.forEach((child) => {
+          setNode(child)
+        })
+      })
+
+      return newTreeData
+    }
+
+    return undefined
+  }, [treeData])
+
+  const getTreeData = () => {
+    setLoadingTreeData(true)
+    dispatch({
+      type: 'assetmanage.queryAssetDirectoryAsTree',
+      callback: data => {
+        setLoadingTreeData(false)
+        setTreeData(data)
+      },
+      error: () => {
+        setLoadingTreeData(false)
+      }
+    }) 
+  }
+
+  const onValuesChange = (changedValues, allValues) => {
+    console.log('all values', allValues)
+  }
+
+  return (
+    <Form
+      form={form}
+      labelCol={{ span: 3 }}
+      wrapperCol={{ span: 21 }}
+      autoComplete="off"
+      onValuesChange={onValuesChange}
+    >
+      <Form.Item
+        label='新增方式'
+        rules={[{ required: true, message: '请选择新增方式!' }]}
+      >
+        <Select 
+          placeholder='请选择新增方式' 
+          value={type}
+          onChange={(value) => {
+            setType(value)
+          }}
+        >
+          <Select.Option value='add'>新增数据资产</Select.Option>
+          <Select.Option value='merge'>合并到已有资产</Select.Option>
+        </Select>
+      </Form.Item>
+      {
+        type === 'add' ? <React.Fragment>
+          <Form.Item
+            name='catalogId'
+            label='资产目录'
+            rules={[{ required: true, message: '请选择资产目录!' }]}
+          >
+            <TreeSelect
+              loading={loadingTreeData}
+              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+              treeData={treeData1}
+              placeholder="请选择分组"
+              treeDefaultExpandAll
+            />
+          </Form.Item>
+          <Form.Item
+            name='asset'
+            label='资产信息'
+            rules={[{ required: true, message: '请填写资产信息!' }]}
+          >
+            <AssetInfoItem />
+          </Form.Item>
+        </React.Fragment> : <React.Fragment>
+          <Form.Item
+            name='assetId'
+            label='选择资产'
+            rules={[{ required: true, message: '请选择资产!' }]}
+          >
+        
+          </Form.Item>
+          <SelectAssetItem />
+        </React.Fragment>
+      }
+    </Form>
+  )
+})
+
+const AssetInfoItem = ({ items, onChange }) => {
+  const [loading, setLoading] = React.useState(false)
+  const [elements, setElements] = React.useState()
+  const [groups, setGroups] = React.useState()
+
+  const [form] = Form.useForm()
+
+  React.useEffect(() => {
+    getElements()
+  }, [])
+  
+  const getElements = () => {
+    setLoading(true)
+    dispatch({
+      type: 'assetmanage.listElements',
+      payload: {
+        params: {
+          range: getAssetRange(ResourceManageReference),
+          dataAsset: getAssetType(ResourceManageReference),
+        }
+      },
+      callback: data => {
+        setLoading(false)
+        setElements(data)
+        setGroups(Array.from(new Set((data??[]).map(item => item.type))))
+      },
+      error: () => {
+        setLoading(false)
+      }
+    })
+  }
+
+  const fillElementValueBeforeCreate = (metadataId) => {
+    dispatch({
+      type: 'assetmanage.fillElementValueBeforeCreate',
+      payload: {
+        params: {
+          metadataIds: metadataId
+        }
+      },
+      callback: data => {
+        let _fieldsValue = {}
+        for (const item of data??[]) {
+          _fieldsValue[item.name] = item.value
+        }
+        form?.setFieldsValue(_fieldsValue)
+        onChange?.(_fieldsValue)
+      }
+    })
+  }
+
+  const onValuesChange = (changedValues, allValues) => {
+    onChange?.(allValues)
+  }
+
+  const formItemLayout = {
+    labelCol: {
+      xs: { span: 24 },
+      sm: { span: 3 },
+    },
+    wrapperCol: {
+      xs: { span: 24 },
+      sm: { span: 21 },
+    },
+  }
+
+  return (
+    <React.Fragment>
+      <div style={{ height: 30 }} />
+      <Spin spinning={loading}>
+      {
+        (groups??[]).map((group, index) => {
+          const filterElements = (elements??[]).filter(element => element.type===group)
+          return (
+            <div key={index}>
+              <div className='flex pl-common'
+                style={{
+                  alignItems: 'center',
+                  backgroundColor: '#fff',
+                  height: 46,
+                  borderBottom: '1px solid #f0f0f0',
+                }}
+              >
+                <div className='primary-bg-color' style={{ width: 3, height: 14, marginRight: 5 }} />
+                <div className='title-text' style={{ fontWeight: 'bold' }}>{group}</div>
+              </div>
+              <div className='px-common py-compact-common'>
+              <Form {...formItemLayout} form={form} onValuesChange={onValuesChange}
+  >
+                <AppContext.Consumer>
+                {
+                  value => {
+                    value?.onGlobalStateChange&&value?.onGlobalStateChange((state, prev) => {
+                      if (state.message === 'data-govern-show-metadata-list-callback-message') {
+                        form?.setFieldsValue({ '资产项': state.data?.metadataInfoJson||'' });
+
+                        if ((state.data?.metadataId||'') !== '') {
+                          fillElementValueBeforeCreate(state.data?.metadataId||'');
+                        }
+                      }
+                  });
+
+                  return (
+                    (filterElements??[]).map((element, _index) => {
+                      return (
+                        <Form.Item 
+                          label={<div className='title-color'>{element.name}</div>}
+                          name={element.name}
+                          key={_index}
+                        >
+                        { (element.name==='资产项') ? <MetadataInfo config={false} /> : <Input disabled={element.manualMaintain==='否'}  /> }
+                        </Form.Item>
+                      )
+                    })
+                  );
+                }}
+                </AppContext.Consumer>  
+              </Form> 
+              </div>
+            </div>
+          )
+        })
+      }
+      </Spin>
+    </React.Fragment>
+  )
+}
+
+const SelectAssetItem = ({ onChange }) => {
+  const [args, setArgs] = React.useState(() => ({
+    params: {
+      page: defaultPage.pageNum, 
+      size: defaultPage.pageSize,
+      keyword: undefined,
+    },
+  }))
+  const [loadingTreeData, setLoadingTreeData] = React.useState(false)
+  const [treeData, setTreeData] = React.useState()
+  const [node, setNode] = React.useState()
+
+  const [loading, setLoading] = React.useState(false)
+  const [loadingElements, setLoadingElements] = React.useState(false)
+  const [elements, setElements] = React.useState()
+  const [data, setData] = React.useState()
+  const [total, setTotal] = React.useState()
+  const [selectedRows, setSelectedRows] = React.useState([])
+  const $keyword = React.useMemo(() => new Subject(), [])
+  const [keyword, setKeyword] = React.useState()
+  const [page, setPage] = usePage()
+  const [expandedKeys, setExpandedKeys] = React.useState([])
+  const [autoExpandParent, setAutoExpandParent] = React.useState(false)
+
+  React.useEffect(() => {
+    getTreeData()
+  }, [])
+
+  React.useEffect(() => {
+    if (node) {
+      setSelectedRows([])
+      setPageAndArgs({ pageNum: 1, pageSize: page.pageSize })
+    }
+  }, [node])
+
+  const treeData1 = React.useMemo(() => {
+    if (treeData) {
+      const newTreeData = produce(treeData, draft => {
+        const setNode = (g) => {
+          g.key = g.nodeId
+          g.title = g.text
+          g.children?.forEach((child) => {
+            setNode(child)
+          })
+        }
+
+        draft.forEach((child) => {
+          setNode(child)
+        })
+      })
+
+      return newTreeData
+    }
+
+    return undefined
+  }, [treeData])
+
+  const columns = React.useMemo(() => {
+    const newColumns = []
+    let index = 0 
+    for (const attrItem of (elements??[])) {
+      for (const name of attrItem.names??[]) {
+        const col = {
+          title: name,
+          dataIndex: `element${++index}`,
+          ellipsis: true,
+          width: 120,
+          render: (text, record) => {
+            return (
+              <Tooltip title={text}>
+                <Typography.Text ellipsis={true}>
+                {text}
+                </Typography.Text>
+              </Tooltip>
+            );
+          }
+        }
+        if (name === '编号') {
+          col.width = 60
+        } else if (name === '中文名称') {
+          col.width = isSzseEnv ? 230 : 160
+        } else if (name === '英文名称') {
+          col.width = isSzseEnv ? 224 : 160
+        } else if (name === '资产项') {
+          col.width = isSzseEnv ? 250 : 120
+        } else if (name === '资产路径') {
+          
+        }
+
+        newColumns.push(col)
+      }
+    }
+    
+    return newColumns
+  }, [elements])
+
+  const tableData = React.useMemo(() => {
+    const newTableData = []
+    for (const item of (data??[])) {
+      const newAsset = {...item}
+      let index = 0
+      for (const elementValue of (item.elementValues??[])) {
+        for (const value of (elementValue.values??[])) {
+          newAsset[`element${++index}`] = value
+        }
+      }
+      newTableData.push(newAsset)
+    }
+
+    return newTableData
+  }, [data])
+
+  const setArgsAndPage = React.useCallback((params) => {
+    // 设置查询参数时将分页置为1
+    setPage(prevpg => {
+
+      setArgs((prev) => {
+        const newparams = params ? { ...prev.params, ...params } : undefined
+        return { params: { ...newparams, page: 1, size: prevpg.pageSize } }
+      })
+
+      return ({ ...prevpg, pageNum: 1 })
+    })
+    //eslint-disable-next-line react-hooks/exhaustive-deps    
+  }, [])
+
+  const setPageAndArgs = React.useCallback((page) => {
+    setPage(prev => ({ ...prev, ...page }))
+    setArgs((prev) => {
+      return { params: { ...prev.params, page: page.pageNum, size: page.pageSize } }
+    })
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  React.useEffect(() => {
+    const $$keyword = $keyword.pipe(debounceTime(1000)).subscribe((keyword) => {
+      setArgsAndPage({ keyword })
+    })
+
+    return () => {
+      $$keyword.unsubscribe()
+    }
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  React.useEffect(() => {
+    if (node?.nodeId) {
+      getElements()
+      getAssets()
+    }
+  }, [args])
+
+  const getTreeData = () => {
+    setLoadingTreeData(true)
+    dispatch({
+      type: 'assetmanage.queryAssetDirectoryAsTree',
+      callback: data => {
+        setLoadingTreeData(false)
+        setTreeData(data)
+        if ((data??[]).length > 0) {
+          const firstNode = data[0]
+          setNode(firstNode)
+          setExpandedKeys([firstNode.nodeId])
+          setAutoExpandParent(true)
+        }
+      },
+      error: () => {
+        setLoadingTreeData(false)
+      }
+    }) 
+  }
+
+  const getElements = () => {
+    setLoadingElements(true)
+    dispatch({
+      type: 'assetmanage.listFilterElementsGroupByType',
+      payload: {
+        range: getAssetRange(AssetManageReference),
+        dataAssetType: getAssetType(AssetManageReference)
+      },
+      callback: data => {
+        setLoadingElements(false)
+        setElements(data)
+      },
+      error: () => {
+        setLoadingElements(false)
+      }
+    })
+  }
+
+  const getAssets = () => {
+    setLoading(true)
+    dispatch({
+      type: 'assetmanage.listDataAssetsByPage',
+      payload: {
+        dirId: node?.nodeId,
+        pageNum: args.params.page,
+        pageSize: args.params.size,
+        keyword: args.params.keyword,
+        range: getAssetRange(AssetManageReference),
+      },
+      callback: data => {
+        setLoading(false)
+        setData(data?.data)
+        setTotal(data?.total)
+      },
+      error: () => {
+        setLoading(false)
+      }
+    })
+  }
+
+  const onTreeExpand = (expandedKeys) => {
+    setExpandedKeys(expandedKeys)
+    setAutoExpandParent(false)
+  }
+
+  const onTreeSelect = (selectedKeys, { selectedNodes }) => {
+    if (selectedKeys.length === 0 || selectedNodes.length === 0) {
+      return
+    }
+
+    setNode(selectedNodes[0])
+  }
+
+  return (
+    <Row>
+      <Col span={4}>
+        <Spin spinning={loadingTreeData}>
+          <Tree
+            className='tree'
+            showLine 
+            showIcon={false} 
+            autoExpandParent={autoExpandParent}
+            treeData={treeData1}
+            selectedKeys={node?[node.nodeId]:[]}
+            expandedKeys={expandedKeys}
+            onSelect={onTreeSelect}
+            onExpand={onTreeExpand}
+          />
+        </Spin>
+      </Col>
+      <Col span={20}>
+        <div className='flex'
+          style={{
+            padding: '0px 0px 15px',
+            alignItems: 'center',
+            justifyContent: 'end',
+          }}>
+          <Input size="middle"
+            placeholder="资产要素值搜索"
+            value={keyword}
+            bordered={true} allowClear
+            onChange={(e) => {
+              const keyword = e.target.value
+              setKeyword(keyword)
+              $keyword.next((keyword??'').trim())
+            }} 
+            style={{ width: inputWidth }}
+          />
+        </div>
+        <Table
+          maxHeight='calc(80vh - 270px)'
+          loading={loading||loadingElements}
+          columns={columns}
+          dataSource={tableData}
+          pageSize={page.pageSize} pageNum={page.pageNum} total={total??0}
+          onPaginate={(page, pageSize) => {
+            setSelectedRows([])
+            setPageAndArgs({ pageNum: page, pageSize })
+          }}
+          rowSelection={{
+            type: 'radio',
+            selectedRowKeys: (selectedRows??[]).map(item => item.id),
+            onChange: (selectedRowKeys, selectedRows) => {
+              setSelectedRows(selectedRows)
+            },
+          }}
+        />
+      </Col>
+    </Row>
+  )
+}
\ No newline at end of file

src/view/Manage/AssetResourceManage/add-to-asset.less

+.add-to-asset {
+  .tree {
+    height: calc(80vh - 150px);
+    overflow: auto;
+  }
+}
\ No newline at end of file

src/view/Manage/AssetResourceManage/table.jsx

@@ -12,7 +12,9 @@ import { ResourceManageReference } from '../../../util/constant'
 import PermissionButton from '../../../util/Component/PermissionButton'
 import PermissionMenuItem from '../../../util/Component/PermissionMenuItem'
 import { FullScreenSvg, CancelFullScreenSvg } from '../AssetManage/Component/AssetSvg'
+
 import AddAsset from '../AssetManage/Component/AddAssetModel'
+import AddToAsset from './add-to-asset'
 import ImportAsset from '../AssetManage/Component/ImportAssetDrawer'
 import ChangeCatalog from './change-catalog'
 import AssetDelete from '../AssetManage/Component/AssetDeleteModal'
@@ -50,6 +52,10 @@ const FC = (props) => {
     visible: false,
     nodeId: undefined
   })
+  const [addToAssetParams, setAddToAssetParams] = React.useState({
+    visible: false,
+    items: undefined
+  })
   const [importAssetParams, setImportAssetParams] = React.useState({
     visible: false,
     nodeId: undefined
@@ -324,7 +330,10 @@ const FC = (props) => {
   }
 
   const onAddToAssetClick = () => {
-
+    setAddToAssetParams({
+      visible: true,
+      items: selectedRows
+    })
   }
 
   const onTaskAllocationClick = () => {
@@ -693,6 +702,16 @@ const FC = (props) => {
           refresh && getAssets()
         }}
       />
+      <AddToAsset
+        {...addToAssetParams}
+        onCancel={(refresh = false) => {
+          setAddToAssetParams({
+            visible: false,
+            items: undefined
+          })
+          refresh && getAssets()
+        }}
+      />
       <ImportAsset
         {...importAssetParams}
         onCancel={() => {