4.8

src/model/assetmanage.js

+import * as service from '../service/assetmanage';
+import { call } from 'redux-saga/effects';
+
+
+export function* addOrUpdateDataAsset(payload) {
+    return yield call(service.addOrUpdateDataAsset, payload);
+}
+
+export function* deleteDataAssets(payload) {
+    return yield call(service.deleteDataAssets, payload);
+}
+
+export function* getDataAssetDetail(payload) {
+    return yield call(service.getDataAssetDetail, payload);
+}
+
+export function* listBasicAttrs(payload) {
+    return yield call(service.listBasicAttrs, payload);
+}
+export function* listDataAssetsByPage(payload) {
+    return yield call(service.listDataAssetsByPage, payload);
+}
+export function* listRecycleBinDataAssetsByPage(payload) {
+    return yield call(service.listRecycleBinDataAssetsByPage, payload);
+}
+export function* addOrUpdateDirectory(payload) {
+    return yield call(service.addOrUpdateDirectory, payload);
+}
+export function* deleteDirectory(payload) {
+    return yield call(service.deleteDirectory, payload);
+}
+export function* existDataAsset(payload) {
+    return yield call(service.existDataAsset, payload);
+}
+export function* queryAllDirectoryAsTree(payload) {
+    return yield call(service.queryAllDirectoryAsTree, payload);
+}
+export function* listAllTopics(payload) {
+    return yield call(service.listAllTopics, payload);
+}

src/model/index.js

@@ -8,8 +8,9 @@ import { reducers } from './reducer';
 import * as user from './user';
 import * as map from './map';
 import * as datamodel from './datamodel';
+import * as assetmanage from './assetmanage';
 
-const funcs = Connect({ user, datamodel, map })
+const funcs = Connect({ user, datamodel, map,assetmanage })
 
 function* request(args) {
   const { type, payload, callback, error } = args.args;

src/routes.js

@@ -18,6 +18,10 @@ export const routes = [
       {
         name: 'model',
         text: '数据模型',
+      },
+      {
+        name: 'assetmanage',
+        text: '资产管理',
       }
     ]
   }

src/service/assetmanage.js

+
+import { PostJSON, Post, GetJSON } from "../util/axios"
+
+export function addOrUpdateDataAsset(payload) {
+  return PostJSON("/dataassetmanager/dataAssetApi/addOrUpdateDataAsset", payload)
+}
+
+export function deleteDataAssets(payload) {
+    return PostJSON("/dataassetmanager/dataAssetApi/deleteDataAssets", payload)
+}
+
+export function getDataAssetDetail(payload) {
+    return GetJSON("/dataassetmanager/dataAssetApi/getDataAssetDetail", payload)
+}
+
+export function listBasicAttrs(payload) {
+    return GetJSON("/dataassetmanager/dataAssetApi/listBasicAttrs", payload)
+}
+
+export function listDataAssetsByPage(payload) {
+    return GetJSON("/dataassetmanager/dataAssetApi/listDataAssetsByPage", payload)
+}
+
+export function listRecycleBinDataAssetsByPage(payload) {
+    return GetJSON("/dataassetmanager/dataAssetApi/listRecycleBinDataAssetsByPage", payload)
+}
+
+
+export function addOrUpdateDirectory(payload) {
+    return PostJSON("/dataassetmanager/directoryApi/addOrUpdateDirectory", payload)
+}
+
+export function deleteDirectory(payload) {
+    return PostJSON("/dataassetmanager/directoryApi/deleteDirectory", payload)
+}
+
+export function existDataAsset(payload) {
+    return GetJSON("/dataassetmanager/directoryApi/existDataAsset", payload)
+}
+
+
+export function queryAllDirectoryAsTree(payload) {
+    return GetJSON("/dataassetmanager/directoryApi/queryAllDirectoryAsTree", payload)
+}
+
+export function listAllTopics(payload) {
+    return GetJSON("/dataassetmanager/directoryApi/listAllTopics", payload)
+}
\ No newline at end of file

src/util/index.js

@@ -113,3 +113,16 @@ export const showMessage = function(action, content) {
     message.warn(content);
   }
 }
+
+export function generateList(data,dataList){
+  if(data[0]===undefined)
+      return data
+  for (let item of data){
+      const { key,title } = item;
+      dataList.push({ key, title });
+      if (item.children) {
+          dataList.concat(generateList(item.children,dataList))
+      }
+  }
+  return dataList
+};

src/view/Manage/AssetManage/components/AssetModal.jsx

+import React,{useState, useEffect,} from "react"
+import {Modal,Tabs,Form,Input,Space,InputNumber,Button,Radio} from "antd"
+import { dispatchLatest,dispatch } from '../../../../model';
+import { showMessage } from '../../../../util';
+
+
+const {TabPane} = Tabs
+
+export default (props)=>{
+    const {handleCancle,visible,editBox,addType,attrBox,nodeId,attrBox2,setPageNumber,pageNumber} = props
+    const [form] = Form.useForm()
+    const [saveLoad,setSaveLod] = useState(false)
+
+    useEffect(()=>{
+        if(visible){
+            reset()
+        }
+    },[visible])
+
+    useEffect(()=>{
+        if(attrBox2){
+            reset()
+        }
+    },[attrBox2])
+
+    const handleOk =async()=>{
+        setSaveLod(true)
+        form.validateFields().then((value)=>{
+            if(addType){
+                let attr = []
+                for (let key in value){
+                    attr.push({'key':key,'value':value[key]})
+                }
+                let box= {
+                    "basicAttrs": attr,
+                }
+                dispatch({
+                    type: 'assetmanage.addOrUpdateDataAsset',
+                    payload: { params:{dirId: nodeId},data: box },
+                    callback: data => {
+                        setSaveLod(false)
+                        handleCancle()
+                        setPageNumber({...pageNumber,rebuild:new Date().getTime()})
+
+                        showMessage("success","新增成功")
+                    },
+                    error: () => {
+
+                    }
+                })
+            }else{
+                let attr = []
+                for (let key in value){
+                    attr.push({'key':key,'value':value[key]})
+                }
+                let box= {
+                    "basicAttrs": attr,
+                    id:editBox.id
+
+                }
+                dispatch({
+                    type: 'assetmanage.addOrUpdateDataAsset',
+                    payload: { params:{dirId: nodeId},data: box },
+                    callback: data => {
+                        setSaveLod(false)
+                        setPageNumber({...pageNumber,rebuild:new Date().getTime()})
+                        handleCancle()
+                        showMessage("success","修改成功")
+                    },
+                    error: () => {
+
+                    }
+                })
+            }
+            
+        }).catch(()=>{
+            setSaveLod(false)
+        })
+    }
+    
+    const reset = () =>{
+        form.resetFields()
+    }
+
+
+    const formItemLayout = {
+        labelCol: {
+            xs: { span: 24 },
+            sm: { span: 5 },
+        },
+        wrapperCol: {
+            xs: { span: 24 },
+            sm: { span: 17 },
+        },
+    };
+
+    
+
+    return(
+        <Modal
+            title={`资产信息`}
+            visible={visible}
+            width={600}
+            onCancel={()=>{handleCancle()}}
+            // style={{ top: 30}}
+            footer={
+                <Space>
+                    <Button type="primary" onClick={handleOk} loading={saveLoad}>提交</Button>
+                    <Button onClick={()=>reset()} >重置</Button>
+                    <Button onClick={()=>handleCancle()}>返回</Button>
+                </Space>
+              }
+        >
+            <Form {...formItemLayout} form={form}>
+                {attrBox&&attrBox[0]&&attrBox.map((item,i)=>{
+                    return(
+                        <Form.Item 
+                            label={item.key}
+                            name={item.key}
+                            key={`form${i}`}
+                            initialValue={attrBox2[item.key]?attrBox2[item.key] :''}
+                        >
+                            <Input  />
+                        </Form.Item>
+                    )
+                })}
+            </Form>
+
+        </Modal>
+    )
+}
\ No newline at end of file

src/view/Manage/AssetManage/components/AssetTable.jsx

+import React,{useState, useEffect} from "react"
+import {Card,Checkbox,Pagination,Button,List,Skeleton,Row,Col,Typography,Input,Space,Modal} from "antd"
+import { EyeOutlined, TableOutlined, AreaChartOutlined } from '@ant-design/icons';
+import "./AssetTable.less"
+import { dispatchLatest,dispatch } from '../../../../model';
+import AssetModal from "./AssetModal"
+const { Text } = Typography;
+
+
+export default (props) =>{
+    const {nodeId,keyword,selectKey,treeType} = props
+
+    const [tableLoad,setTableLoad] = useState(false)
+    const [attrBox,setAttrBox] = useState([])
+    const [attrBox2,setAttrBox2] = useState({})
+
+    const [editBox,setEditBox] = useState({})
+
+    const [keyWord,setKeyWord] = useState('')
+
+    const [tableBox,setTableBox] = useState({dataList:[],total:0,})
+    const [pageNumber,setPageNumber] = useState({page:1,size:20,rebuild:0})
+    const {dataList,total} = tableBox
+    const {page,size,rebuild} = pageNumber
+    const [modal, contextHolder] = Modal.useModal();
+    const [visible,setVisible] = useState({visible:false,addtype:true})
+
+    useEffect(()=>{
+        getListBasicAttrs()
+    },[])
+
+    useEffect(()=>{
+        if(nodeId)
+            getTable()
+    },[nodeId,rebuild])
+
+
+    const changeCurrent=(page,size)=>{
+        setPageNumber({page,size,rebuild:new Date().getTime()})
+    }
+
+    const getListBasicAttrs=()=>{
+        dispatch({
+            type: 'assetmanage.listBasicAttrs',
+            payload: null,
+            callback: dataBox => {
+                let box = {}
+                for(let item of dataBox){
+                    box[item.key] = item.value
+                }
+                setAttrBox2(box)
+                setAttrBox(dataBox)
+            },
+            error: () => {
+
+            }
+        })
+    }
+
+    const getTable=()=>{
+        setTableLoad(true)
+        dispatch({
+            type: 'assetmanage.listDataAssetsByPage',
+            payload: {dirId:nodeId,pageNum:page,pageSize:size},
+            callback: dataBox => {
+                setTableBox({dataList:dataBox.data,total:dataBox.total})
+                setTableLoad(false)
+            },
+            error: () => {
+                setTableLoad(false)
+
+            }
+        })
+    }
+
+    const add =()=>{
+        setVisible({addtype:true,visible:true})
+    }
+
+    const handleCancle=()=>{
+        let box = attrBox2
+        for (let item of attrBox){
+            box[item.key] = ''
+        }
+        setAttrBox2(box)
+        setVisible({...visible,visible:false})
+    }
+
+    const edit = (data) =>{
+        let box = attrBox2
+        for (let item of data.basicAttrs){
+            box[item.key] = item.value
+        }
+        setAttrBox2(box)
+        setEditBox(data)
+        setVisible({addtype:false,visible:true})
+    }
+
+
+    const del = (data) =>{
+        let box = attrBox2
+        for (let item of data.basicAttrs){
+            box[item.key] = item.value
+        }
+        setAttrBox2(box)
+        setEditBox(data)
+        setVisible({addtype:false,visible:true})
+    }
+
+
+
+    return(
+        <Card
+            bordered={false} 
+            className={"asset-list"}
+            bodyStyle={{padding:'0 10px'}}
+            headStyle={{padding:10}}
+            title={
+            <div style={{display:'flex',justifyContent:'space-between',height:32}}>
+                <div style={{fontSize:18,fontWeight:800,color:'#767676',lineHeight:'32px'}}>资产管理</div>
+                <Space>
+                    <Input.Search style={{width:180,float:'right'}} 
+                        onChange={e=>{ setKeyWord(e.target.value)}}
+                        value={keyWord}
+                        placeholder={"请输入关键字"}
+                        enterButton
+                        // onSearch={()=>{fetchTableList()}}
+                    />
+                    <Button type="primary" >回收站</Button>
+
+                </Space>
+
+            </div>
+            }
+        >
+            <div style={{display:'flex',justifyContent:'space-between',height:52,padding:'10px 0',borderBottom:'1px solid #f0f0f0',lineHeight:'32px'}}>
+                {/* <Switch checkedChildren="全选" unCheckedChildren="取消" defaultChecked style={{marginTop:4}}/> */}
+                <div></div>
+                <Space>
+
+                    <Button type="primary"  onClick={add}>新增</Button>
+                    {/* <Button type="primary" danger>删除</Button> */}
+                    <Button type="primary" >导入</Button>
+                    <Button type="primary" >导出</Button>
+
+                </Space>
+            </div>
+            <Checkbox.Group style={{width:'100%'}}>
+                <List
+                    
+                    loading={tableLoad}
+                    itemLayout="vertical"
+                    dataSource={dataList || []}
+                    footer={null}
+                    pagination={{
+                        total:total,
+                        showTotal:(total) => (`共 ${total} 项`),
+                        showSizeChanger:true,
+                        pageSize:size,
+                        onChange:changeCurrent,
+                        onShowSizeChange:changeCurrent,
+                    }}
+                    renderItem={(item) => (
+                        <List.Item
+                            actions={[
+                                <Button type="link" key="edit" onClick={()=>edit(item)}>修改</Button>,
+                                <Button type="link"key="delete" >删除</Button>,
+                                <Button type="link"key="detail" onClick={()=>del(item)}>详情</Button>,
+                            ]}
+                        >
+                            <Skeleton title={false} loading={tableLoad} active>
+                                <List.Item.Meta
+                                title={
+                                    <div>
+                                        {/* <Checkbox value={item.id}></Checkbox> */}
+                                        <span dangerouslySetInnerHTML={{ __html: item.id || '' }} />
+                                    </div>
+                                }
+                                    description={            
+                                    <Row>
+                                        {item.basicAttrs&&item.basicAttrs.map(data=>{
+                                            return(
+                                            <Col md={6} key={data.key}>
+                                                <Text>{data.key}：</Text>
+                                                {data.value}
+                                            </Col>
+                                            )
+                                        })
+                                       }
+                                    </Row>}
+                                />
+                            </Skeleton>
+                        </List.Item>
+                    )}
+                />
+            </Checkbox.Group>
+            <AssetModal visible={visible.visible} attrBox2={attrBox2} editBox={editBox} addType={visible.addtype} handleCancle={handleCancle} attrBox={attrBox} nodeId={nodeId}  setPageNumber={setPageNumber} pageNumber={pageNumber}/>
+            {contextHolder}
+        </Card>
+    )
+}

src/view/Manage/AssetManage/components/AssetTable.less

+.asset-list {
+    .yy-list-item-action {
+        text-align: right;
+    }
+    .yy-card-head-title {
+        padding: 0;
+    }
+    .yy-list-vertical .yy-list-item-action > li {
+        padding: 0 ;
+    }
+    .yy-list-pagination{
+        margin-top: 10px !important;
+    }
+}
\ No newline at end of file

src/view/Manage/AssetManage/components/LeftTree.less

+.asset-tree {
+    .yy-card-head-title {
+        padding: 0;
+    }
+    .yy-tree-list {
+        height: calc(100vh - 64px - 20px - 53px - 20px - 42px) !important;
+        overflow: auto !important;
+      }
+  }
\ No newline at end of file

src/view/Manage/AssetManage/components/ManageTitle.jsx

+import React,{useState, useEffect} from "react"
+import {Card,Input} from "antd"
+
+export default (props)=>{
+    const {} = props
+    const [keyWord,setKeyWord] = useState('')
+
+
+    return(
+        <Card bodyStyle={{padding:10}}>
+            <div>
+                <div style={{display:'inline-block',fontSize:18,fontWeight:800,color:'#767676',marginRight:40}}>资产管理</div>
+                <Input.Search style={{width:180,float:'right'}} 
+                    onChange={e=>{ setKeyWord(e.target.value)}}
+                    value={keyWord}
+                    placeholder={"请输入关键字"}
+                    enterButton
+                    // onSearch={()=>{fetchTableList()}}
+                />
+            </div>
+        </Card>
+    )
+}
\ No newline at end of file

src/view/Manage/AssetManage/components/TreeModal.jsx

+import React,{useState, useEffect,} from "react"
+import {Modal,Tabs,Form,Input,Space,InputNumber,Button,Radio} from "antd"
+import { dispatchLatest } from '../../../../model';
+import { showMessage } from '../../../../util';
+
+
+const {TabPane} = Tabs
+
+export default (props)=>{
+    const {handleCancle,visible,editBox,addType,selectKey,setDataCache,setTreeRebuild,treeRebuild} = props
+    const [form] = Form.useForm()
+    const [saveLoad,setSaveLod] = useState(false)
+
+    useEffect(()=>{
+        if(visible){
+            reset()
+        }
+    },[visible])
+
+    const handleOk =async()=>{
+        setSaveLod(true)
+        form.validateFields().then((value)=>{
+            if(addType){
+                if(value.type==1){
+                    let box = {
+                        "code": value.code,
+                        "name": value.name,
+                        "order": value.order,
+                        "remarks":  value.order,
+                    }
+                    dispatchLatest({
+                        type: 'assetmanage.addOrUpdateDirectory',
+                        payload: {data:box},
+                        callback: data => {
+                            console.log(data)
+                            showMessage("success","新增成功")
+                            setTreeRebuild({...treeRebuild,build:new Date().getTime()})
+                            handleCancle()
+                            setSaveLod(false)
+                        },
+                        error: () => {
+                            setSaveLod(false)
+                        }
+                    })
+                }else{
+                    let box = {
+                        "code": value.code,
+                        "name": value.name,
+                        "order": value.order,
+                        "remarks":  value.order,
+                    }
+                    console.log(editBox.path)
+                    dispatchLatest({
+                        type: 'assetmanage.addOrUpdateDirectory',
+                        payload: {params:{parentPath:editBox.path},data:box},
+                        callback: data => {
+                            console.log(data)
+                            showMessage("success","新增成功")
+                            setTreeRebuild({...treeRebuild,build:new Date().getTime()})
+                            handleCancle()
+                            setSaveLod(false)
+                        },
+                        error: () => {
+                            setSaveLod(false)
+                        }
+                    })
+                }
+
+            }else{
+                let box = {
+                    "code": value.code,
+                    "name": value.name,
+                    "order": value.order,
+                    "remarks":  value.remarks,
+                    "id":editBox.id,
+                }
+                dispatchLatest({
+                    type: 'assetmanage.addOrUpdateDirectory',
+                    payload: {param:{parentPath:editBox.path},data:box},
+                    callback: data => {
+                        setSaveLod(false)
+                        showMessage("success","修改成功")
+                        setTreeRebuild({...treeRebuild,build:new Date().getTime()})
+                        handleCancle()
+                    },
+                    error: () => {
+                        setSaveLod(false)
+                    }
+                })
+                setSaveLod(false)
+            }
+            
+        }).catch(()=>{
+            setSaveLod(false)
+        })
+    }
+    
+    const reset = () =>{
+        if(addType){
+            form.resetFields()
+        }else{
+            let box = {
+                code:editBox.code,
+                name:editBox.name,
+                order:editBox.order||'',
+                remarks:editBox.remarks||'',
+            }
+            form.setFieldsValue(box)
+        }
+    }
+
+
+    const formItemLayout = {
+        labelCol: {
+            xs: { span: 24 },
+            sm: { span: 5 },
+        },
+        wrapperCol: {
+            xs: { span: 24 },
+            sm: { span: 17 },
+        },
+    };
+
+    
+
+    return(
+        <Modal
+            title={`资产目录信息`}
+            visible={visible}
+            width={600}
+            onCancel={()=>{handleCancle()}}
+            // style={{ top: 30}}
+            footer={
+                <Space>
+                    <Button type="primary" onClick={handleOk} loading={saveLoad}>提交</Button>
+                    <Button onClick={()=>reset()} >重置</Button>
+                    <Button onClick={()=>handleCancle()}>返回</Button>
+                </Space>
+              }
+        >
+            <Form {...formItemLayout} form={form}>
+                {addType&&<Form.Item 
+                    label="类型"
+                    name="type"
+                    rules={[{ required: true, message: '必填项' }]}
+                >
+                    <Radio.Group >
+                        <Radio value={1} >目录</Radio>
+                        <Radio value={2} disabled={selectKey!=undefined?false:true}>主题</Radio>
+                    </Radio.Group>
+                </Form.Item>}
+                <Form.Item 
+                    label="编号"
+                    name="code"
+                    rules={[{ required: true, message: '必填项' }]}
+                >
+                    <Input placeholder="请输入编号" />
+                </Form.Item>
+                <Form.Item 
+                    label="名称"
+                    name="name"
+                    rules={[{ required: true, message: '必填项' }]}
+                >
+                    <Input placeholder="请输入名称" />
+                </Form.Item>
+                <Form.Item
+                    label="权重"
+                    name="order"
+                    rules={[{ required: true, message: '必填项' }]}
+                >
+                    <InputNumber min={1} max={999} style={{width:'100%'}} placeholder="请输入权重(1-999)" />
+                </Form.Item>
+                <Form.Item 
+                    label="描述"
+                    name="remarks"
+                >
+                    <Input.TextArea placeholder="请输入描述" autoSize={{ minRows: 4, maxRows: 4 }} />
+                </Form.Item>
+            </Form>
+
+        </Modal>
+    )
+}
\ No newline at end of file

src/view/Manage/AssetManage/index.jsx

+import React from 'react';
+import { Tabs, Row, Col } from 'antd';
+import LeftTree from "./components/LeftTree"
+import ManageTitle from "./components/ManageTitle"
+import AssetTable from "./components/AssetTable"
+const { TabPane } = Tabs;
+
+class Index extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { 
+            nodeId:null
+        };
+    }
+
+    componentDidMount() {
+
+    }
+
+    setNodeId=(data)=>{
+        this.setState({nodeId:data})
+    }
+
+    render() {
+        return (
+            <Row gutter={8}>
+                <Col span={6}>
+                    <LeftTree setNodeId={this.setNodeId}/>
+                </Col>
+                <Col span={18}>
+                    <AssetTable nodeId={this.state.nodeId} />
+                </Col>
+            </Row>
+        )
+    }
+}
+
+export default Index;
\ No newline at end of file

src/view/Manage/index.jsx

@@ -7,6 +7,7 @@ import { ManageLayout } from "../../layout";
 
 import Map from './Map';
 import Model from './Model';
+import AssetManage from './AssetManage';
 
 class Manage extends Component {
   constructor(props) {
@@ -29,6 +30,7 @@ class Manage extends Component {
               <Switch>
                 <Route path={`${match.path}/map`} component={Map} />
                 <Route path={`${match.path}/model`} component={Model} />
+                <Route path={`${match.path}/assetmanage`} component={AssetManage} />
 
               </Switch>
             ) : (