岗位资产增加资产

src/util/index.js

@@ -401,5 +401,6 @@ export function getDataModelerRole(user) {
 }
 
 export function isPostAsset(templateType) {
+  //zcx todo
   return false
 }
\ No newline at end of file

src/view/Manage/AssetManage/Component/post-relation.jsx

 import React from 'react'
-import { Tabs } from 'antd'
+import { Tabs, Space, Button, Input, Pagination, Tooltip, Modal } from 'antd'
+
+import { paginate } from '../../../../util'
+import Table from '../../ResizeableTable'
+import SelectResource from './select-resource'
 
 const FC = (props) => {
+  const { item,  } = props
   const [activeKey, setActiveKey] = React.useState('asset')
+  const [keyword, setKeyword] = React.useState()
+  const [pagination, setPagination] = React.useState({
+    pageNum: 1,
+    pageSize: 20,
+  })
+  const [loading, setLoading] = React.useState(false)
+  const [data, setData] = React.useState()
+  const [selectedRows, setSelectedRows] = React.useState()
+  const [selectResourceParams, setSelectResourceParams] = React.useState({
+    visible: false,
+    item: undefined,
+    type: undefined,
+  })
+
+  const [modal, contextHolder] = Modal.useModal()
+
+  React.useEffect(() => {
+    getRelations()
+  }, [])
+
+  const [tableData, total] = React.useMemo(() => {
+    let newTableData = [...data??[]]
+    if (keyword) {
+      newTableData = (newTableData??[]).filter(item => (item.name??'').indexOf(keyword) !== -1)
+    }
+
+    return [paginate(newTableData, pagination.pageNum, pagination.pageSize), (newTableData??[]).length]
+  }, [data, keyword, pagination])
+
+  const cols = [
+    {
+      title: '序号',
+      dataIndex: 'index',
+      width:60,
+      render:(_, __, index)=> ((pagination.pageNum-1)*pagination.pageSize+index+1)
+    },
+    {
+      title: '路径',
+      dataIndex: 'path',
+    },
+    {
+      title: '数据服务资产编号',
+      dataIndex: 'code',
+    },
+    {
+      title: '数据服务名称',
+      dataIndex: 'name',
+    },
+  ]
+
+  const getRelations = () => {
+    setLoading(true)
+    setTimeout(() => {
+      setLoading(false)
+      setData(Array.from({ length: 90 }, (_, key) => ({  
+        id: `${key}`,
+        name: `test${key}`
+      })))
+    }, 3000)
+  }
+
+  const onEditClick = () => {
+    setSelectResourceParams({
+      visible: true,
+      item,
+      type: activeKey,
+    })
+  }
+
+  const onDeleteClick = () => {
+    modal.confirm({
+      title:'提示',
+      content: '是否确认删除选中内容?',
+      okText: '确认',
+      cancelText: '取消',
+      onOk: () => {
+      
+      }
+    })
+  }
 
   return (
     <div>
@@ -10,6 +95,65 @@ const FC = (props) => {
         <Tabs.TabPane tab='关联资产' key='asset' />
         <Tabs.TabPane tab='关联服务' key='service' />
       </Tabs>
+      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+        <Space>
+          <Button onClick={onEditClick}>编辑</Button>
+          <Tooltip title={(selectedRows??[]).length===0?(activeKey==='asset'?'请先选择资产':'请先选择服务'):''}>
+            <Button disabled={(selectedRows??[]).length===0} onClick={onDeleteClick}>删除</Button>
+          </Tooltip>
+        </Space>
+        <Input size="middle"
+          placeholder={activeKey==='service'?'搜索服务名称':''}
+          value={keyword}
+          bordered={true} allowClear
+          style={{ width: 200 }}
+          onChange={(e) => {
+            setPagination({...pagination, pageNum: 1})
+            setKeyword(e.target.value)
+          }} />
+      </div>
+      <div className='mt-3'>
+        <Table
+          rowKey='id'
+          loading={loading}
+          columns={cols}
+          dataSource={tableData??[]}
+          pagination={false}
+          rowSelection={{
+            selectedRowKeys: (selectedRows??[]).map(item => item.id),
+            onChange: (selectedRowKeys, selectedRows) => {
+              setSelectedRows(selectedRows)
+            },
+          }}
+        />
+        {
+          (total!==0) && <Pagination
+            className="text-center my-3"
+            showSizeChanger
+            onChange={(page,size) => {
+              setPagination({ pageNum: page, pageSize: size })
+            }}
+            current={pagination.pageNum}
+            pageSize={pagination.pageSize}
+            defaultCurrent={1}
+            total={total}
+            showTotal={() => `共${total??0}项`}
+          />
+        }
+      </div>
+      <SelectResource
+        {...selectResourceParams}
+        onCancel={(refresh) => {
+          setSelectResourceParams({
+            visible: false,
+            item: undefined,
+            type: undefined
+          })
+
+          refresh && getRelations()
+        }}
+      />
+      {contextHolder}
     </div>
   )
 }

src/view/Manage/AssetManage/Component/select-asset.jsx

+import React from 'react'
+import { Row, Col, Spin, Tree, Input, Tooltip, Typography, Select, Pagination } from 'antd'
+import produce from 'immer'
+import { useDebounceEffect } from "ahooks"
+import classnames from 'classnames'
+
+import Table from '../../ResizeableTable'
+import { dispatch } from '../../../../model'
+import { AssetItem } from './AssetTable'
+
+import './select-asset.less'
+
+// const specialCol = ['数据关键用户', '业务数据owner', 'it责任人', '创建人', '更新人']
+
+const FC = (props) => {
+  const [args, setArgs] = React.useState(() => ({
+    page: 1, 
+    size: 20,
+    keyword: undefined,
+  }))
+  const [loadingTreeData, setLoadingTreeData] = React.useState(false)
+  const [treeData, setTreeData] = React.useState()
+  const [node, setNode] = React.useState()
+
+  const [loadingTemplates, setLoadingTemplates] = React.useState(false)
+  const [loading, setLoading] = React.useState(false)
+  const [loadingElements, setLoadingElements] = React.useState(false)
+  const [templates, setTemplates] = React.useState()
+  const [elements, setElements] = React.useState()
+  const [data, setData] = React.useState()
+  const [currentTemplate, setCurrentTemplate] = React.useState()
+  const [selectedRows, setSelectedRows] = React.useState([])
+  const [expandedKeys, setExpandedKeys] = React.useState([])
+  const [autoExpandParent, setAutoExpandParent] = React.useState(false)
+  const [users, setUsers] = React.useState()
+
+  React.useEffect(() => {
+    getUsers()
+    getTemplates()
+  }, [])
+
+  React.useEffect(() => {
+    if (currentTemplate) {
+      getTreeData()
+      getElements()
+    }
+  }, [currentTemplate])
+
+  React.useEffect(() => {
+    if (currentTemplate) {
+      setSelectedRows()
+      setArgsByParams({ page: 1 })
+    }
+  }, [currentTemplate, node])
+
+  useDebounceEffect(() => {
+    if (currentTemplate) {
+      getAssets()
+    }
+  }, [args], { wait: 300 })
+
+  const treeData1 = React.useMemo(() => {
+    if (treeData) {
+      const newTreeData = produce(treeData, draft => {
+        const setNode = (g) => {
+          g.key = g.nodeId
+          g.title = `${g.text} (${g.dataAssetAndSubDirCount})`
+          g.children?.forEach((child) => {
+            setNode(child)
+          })
+        }
+
+        draft.forEach((child) => {
+          setNode(child)
+        })
+      })
+
+      return newTreeData
+    }
+
+    return undefined
+  }, [treeData])
+
+  const [columns, tableData, total] = React.useMemo(() => {
+    let [newColumns, newTableData] = [[], []]
+
+    for (const element of elements??[]) {
+      for (const name of element.names??[]) {
+        const column = {
+          title: name,
+          dataIndex: name,
+          ellipsis: true,
+          render: (text, record) => {
+            return (
+              <Tooltip title={text}>
+                <Typography.Text ellipsis={true}>
+                {text}
+                </Typography.Text>
+              </Tooltip>
+            );
+          }
+        }
+
+        if (name === '资产项') {
+          column.width = 250
+          column.render = (text) => {
+            let metadata = null
+            try {
+              metadata = JSON.parse(text)
+            } catch(error) {
+              metadata = text;
+            }
+            return (
+              <AssetItem metadata={metadata} />
+            );
+          }
+        }
+
+        newColumns.push(column)
+      }
+    }
+
+    if (!loadingElements) {
+      for (const item of (data?.data??[])) {
+        let index = 0
+        let newItem = {}
+        for (const elementValue of (item.elementValues??[])) {
+          for (const value of elementValue.values) {
+            if ((newColumns??[]).length > index) {
+              const name = newColumns[index].dataIndex
+              newItem[name] = value
+
+              // if (specialCol.indexOf((name??'').toLowerCase()) !== -1) {
+              //   const user = users?.filter((user)=>(user.pernr===value))
+              //   if ((user??[]).length > 0) {
+              //     newItem[name] = user[0].nachn?`${user[0].nachn}(${user[0].pernr})`:user[0].pernr;
+              //   }
+              // }
+            }
+  
+            index++
+          }
+        }
+  
+        newTableData.push({...item, ...newItem})
+      }
+    }
+
+    return [newColumns, newTableData, data?.total??0]
+  }, [elements, data, loadingElements, users])
+
+  const setArgsByParams = React.useCallback((params) => {
+    setArgs((prev) => {
+      return {...prev, ...params}
+    })
+  }, [])
+
+  const getUsers = () => {
+    dispatch({
+      type: 'pds.getOwners',
+      callback: (data) => {
+        setUsers(data)
+      }
+    })
+  }
+
+  const getTemplates = () => {
+    setLoadingTemplates(true)
+
+    dispatch({
+      type: 'assetmanage.getTemplates',
+      callback: data => {
+        setLoadingTemplates(false)
+        const newTemplates = (data??[]).filter(item => item.templateType!=='post')
+
+        setTemplates(newTemplates)
+  
+        if ((newTemplates??[]).length > 0) {
+          setCurrentTemplate(newTemplates[0])
+        }
+      },
+      error: () => {
+        setLoadingTemplates(false)
+      }
+    })
+  }
+
+  const getTreeData = async () => {
+    setLoadingTreeData(true)
+    dispatch({
+      type: 'assetmanage.queryAllDirectoryAsTree',
+      payload: {
+        templateType: currentTemplate?.type
+      },
+      callback: data => {
+        setLoadingTreeData(false)
+        setTreeData(data)
+      },
+      error: () => {
+        setLoadingTreeData(false)
+      }
+    }) 
+  }
+
+  const getElements = async () => {
+    setLoadingElements(true)
+    dispatch({
+      type: 'assetmanage.listFilterElementsGroupByType',
+      payload: {
+        templateType: currentTemplate?.type,
+        isAdmin: false
+      },
+      callback: data => {
+        setLoadingElements(false)
+        setElements(data)
+      },
+      error: () => {
+        setLoadingElements(false)
+      }
+    }) 
+  }
+
+  const getAssets = async () => {
+    setLoading(true)
+    dispatch({
+      type: 'assetmanage.listDataAssetsByPage',
+      payload: {
+        dirId: node?.nodeId??'',
+        pageNum: args.page,
+        pageSize: args.size,
+        keyword: args.keyword??'',
+        recursive: true,
+        templateType: currentTemplate?.type,
+        checkPermission: true,
+      },
+      callback: data => {
+        setLoading(false)
+        setData(data)
+      },
+      error: () => {
+        setLoading(false)
+      }
+    })
+  }
+
+  const onTreeExpand = (expandedKeys) => {
+    setExpandedKeys(expandedKeys)
+    setAutoExpandParent(false)
+  }
+
+  const onTreeSelect = (selectedKeys, { selectedNodes }) => {
+    if (selectedKeys.length === 0 || selectedNodes.length === 0) {
+      setNode()
+      return
+    }
+
+    setNode(selectedNodes[0])
+  }
+
+  return (
+    <div className='post-select-asset'>
+    <Row>
+      <Col span={4}>
+        <Select
+          size='small'
+          loading={loadingTemplates}
+          value={currentTemplate?.type}
+          onChange={(val) => {
+            if (val) {
+              const index = (templates??[]).findIndex(item => item.type === val)
+              if (index !== -1) {
+                setCurrentTemplate(templates[index])
+                setNode()
+              } else {
+                setCurrentTemplate()
+                setNode()
+              }
+            } else {
+              setCurrentTemplate()
+              setNode()
+            }
+          }}
+          style={{ width: 100, marginBottom: 10 }}
+        >
+          {(templates??[]).map(item => (
+            <Select.Option key={item.id} value={item.type}>{item.name}</Select.Option>
+          ))}
+        </Select>
+        <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
+          style={{
+            display: 'flex',
+            padding: '0px 0px 15px',
+            alignItems: 'center',
+            justifyContent: 'flex-end',
+          }}>
+          <Input size="middle"
+            placeholder="请输入资产目录要素值"
+            value={args.keyword}
+            bordered={true} allowClear
+            onChange={(e) => {
+              setArgsByParams({ keyword: e.target.value, page: 1 })
+            }} 
+            style={{ width: 200 }}
+          />
+        </div>
+        <Table
+          size='small'
+          rowKey='id'
+          maxHeight='calc(80vh - 160px)'
+          loading={loading||loadingElements}
+          columns={columns}
+          dataSource={tableData}
+          pagination={false}
+          rowSelection={{
+            selectedRowKeys: (selectedRows??[]).map(item => item.id),
+            onChange: (selectedRowKeys, selectedRows) => {
+              setSelectedRows(selectedRows)
+            },
+          }}
+        />
+        {
+          (total!==0) && <Pagination
+            style={{
+              textAlign: 'center',
+              marginTop: 15,
+            }}
+            showSizeChanger
+            onChange={(page,size) => {
+              setArgsByParams({ page, size })
+            }}
+            current={args.page}
+            pageSize={args.size}
+            defaultCurrent={1}
+            total={total}
+            showTotal={() => `共${total??0}项`}
+          />
+        }
+      </Col>
+    </Row>
+    </div>
+  )
+}
+
+export default FC
\ No newline at end of file

src/view/Manage/AssetManage/Component/select-asset.less

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

src/view/Manage/AssetManage/Component/select-data-service.jsx

+import React from 'react'
+
+const FC = (props) => {
+  return (
+    <div>
+      select data service
+    </div>
+  )
+}
+
+export default FC
\ No newline at end of file

src/view/Manage/AssetManage/Component/select-resource.jsx

+import React from 'react'
+import { Modal, Button, Spin, message, } from 'antd'
+
+import SelectAsset from './select-asset'
+import SelectDataService from './select-data-service'
+
+const FC = ({ visible, item, type, onCancel }) => {
+  const [animated, setAnimated] = React.useState(true)
+  const [waiting, setWaiting] = React.useState(false)
+  const basicRef = React.useRef()
+
+  React.useEffect(() => {
+    if (visible) {
+      setTimeout(() => {
+        setAnimated(false)
+      }, 300)
+    }
+  }, [visible])
+
+  const close = (refresh = false) => {
+    setWaiting(false)
+    setAnimated(true)
+    onCancel?.(refresh)
+  }
+
+  const save = async () => {
+    const selectedRowKeys = basicRef.current?.selectedRowKeys
+    if ((selectedRowKeys??[]).length === 0) {
+      message.warn(type==='asset'?'请先选择资产':'请先选择服务')
+      return
+    }
+
+    setWaiting(true)
+  }
+
+  const footer = React.useMemo(() => {
+    return [
+      <Button key='cancel'
+        onClick={() => close()}
+      >取消</Button>,
+      <Button key='save' type='primary'
+        disabled={waiting}
+        onClick={() => save()}
+      >保存</Button>
+    ]
+  }, [close, save, waiting])
+
+  return (
+    <Modal
+      title={type==='asset'?'新增资产':'新增服务'}
+      visible={visible}
+      footer={footer}
+      width='80%'
+      bodyStyle={{ padding: '15px', overflowX: 'auto', height: '80vh' }}
+      centered destroyOnClose
+      onCancel={() => { close() }}
+    >
+      {
+        !animated && <Spin spinning={waiting}>
+          <Basic ref={basicRef} type={type} />
+        </Spin>
+      }
+    </Modal>
+  )
+}
+
+export default FC
+
+const Basic = React.forwardRef(function ({ type }, ref) {
+  const [selectedRowKeys, setSelectedRowKeys] = React.useState()
+
+  React.useImperativeHandle(ref, () => ({
+    selectedRowKeys
+  }), [selectedRowKeys])
+
+  const onChange = (val) => {
+    setSelectedRowKeys(val)
+  }
+
+  return (
+    <div>
+      {
+        type === 'asset' && <SelectAsset onChange={onChange} />
+      }
+      {
+        type === 'service' && <SelectDataService onChange={onChange} />
+      }
+    </div>
+  )
+})
\ No newline at end of file