资产自定义

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

@@ -250,7 +250,7 @@ const AssetTree = (props) => {
     <Card
       className={classes}
       title={ readOnly ? null : (
-        <Space>
+        <Space wrap>
           <Tooltip title="新增目录">
             <Button shape="circle" icon={<PlusOutlined />} onClick={addDir} />
           </Tooltip>
@@ -271,9 +271,9 @@ const AssetTree = (props) => {
           <Tooltip title="删除">
             <Button shape="circle" icon={<DeleteOutlined />} onClick={deleteDir} />
           </Tooltip>
-          {/* <Tooltip title="自定义">
+          <Tooltip title="自定义">
             <Button shape="circle" icon={<SettingOutlined />} onClick={customDir} />
-          </Tooltip> */}
+          </Tooltip>
         </Space>
       )}
       bordered={false} 

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

 import React, { useState, useCallback } from 'react';
-import { Modal, Tag } from 'antd';
+import { Modal, Checkbox, Row, Col, Form, Input, Empty } from 'antd';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import update from 'immutability-helper';
@@ -39,20 +39,68 @@ const CustomDirectoryModal = (props) => {
       text: 'PROFIT',
     },
   ]);
+  const [ checkedValues, setCheckedValues ] = useState([]);
+  const [ checkedData, setCheckedData ] = useState([]);
   const [ confirmLoading, setConfirmLoading ] = useState(false);
 
+  const [ form ] = Form.useForm();
+
+  const onChange = (checkedValues) => {
+    setCheckedValues(checkedValues);
+    const _checkedData = [];
+
+    (checkedValues||[]).forEach(value => {
+      (data||[]).forEach(item => {
+        if (value === item.id) {
+          _checkedData.push(item);
+        }
+      })
+    })
+
+    setCheckedData(_checkedData);
+  }
+
   const moveTag = useCallback((dragIndex, hoverIndex) => {
-    const dragTag = data[dragIndex];
-    setData(update(data, {
+    const dragTag = checkedData[dragIndex];
+
+    const newCheckedData = update(checkedData, {
       $splice: [
         [dragIndex, 1],
         [hoverIndex, 0, dragTag],
       ],
-    }));
-  }, [data]);  
+    });
+
+    const newCheckedValues = [];
+    newCheckedData.forEach(item=> {
+      newCheckedValues.push(item.id);
+    })
+
+    setCheckedData(newCheckedData);
+    setCheckedValues(newCheckedValues);
+  }, [checkedData]);  
+
+  const onTagClose = (id) => {
+    const newCheckedValues = [...checkedValues];
+    const index = newCheckedValues.indexOf(id);
+    if (index !== -1) {
+      newCheckedValues.splice(index, 1);
+      onChange(newCheckedValues);
+    }
+  }
   
   const renderItem = (item, index) => {
-    return (<DragTag key={item.id} index={index} id={item.id} text={item.text} moveTag={moveTag}/>);
+    return (<DragTag key={item.id} index={index} id={item.id} text={item.text} moveTag={moveTag} onClose={()=>{onTagClose(item.id)}}/>);
+  };
+
+  const formItemLayout = {
+    labelCol: {
+      xs: { span: 24 },
+      sm: { span: 5 },
+    },
+    wrapperCol: {
+      xs: { span: 24 },
+      sm: { span: 17 },
+    },
   };
 
   return (
@@ -60,14 +108,57 @@ const CustomDirectoryModal = (props) => {
       forceRender
       title={'新增自定义'}
       visible={visible}
-      width={600}
+      width={800}
+      confirmLoading={confirmLoading}
       onCancel={() => { onCancel && onCancel() }}
     >
-      <DndProvider backend={HTML5Backend}>
-      {
-        (data||[]).map((item, index) => renderItem(item, index))
-      }
-      </DndProvider>
+      <Row gutter={30}>
+        <Col span={8} style={{ borderRight: '1px solid #EFEFEF' }}>
+          <div className='mb-3'>资产要素</div>
+          <Checkbox.Group value={checkedValues} onChange={onChange}>
+          {
+            (data||[]).map((item, index) => {
+              return (
+                <Row key={index}>
+                  <Checkbox value={item.id||''}>{item.text||''}</Checkbox>
+                </Row>
+              );
+            })
+          }
+          </Checkbox.Group>
+        </Col>
+        <Col span={16}>
+          {
+            (checkedData||[]).length===0 && <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无层级" />
+          }
+          {
+            (checkedData||[]).length>0 && <> 
+              <div className='mb-3'>拖动可调整层级</div>
+              <DndProvider backend={HTML5Backend}>
+              {
+                (checkedData||[]).map((item, index) => renderItem(item, index))
+              }
+              </DndProvider>
+            </>
+          }
+          <Form className='mt-5' {...formItemLayout} form={form}>
+            <Form.Item 
+              label='命名'
+              name='name'
+              rules={[{ required: true, message: '请命名'}]}
+            >
+              <Input />
+            </Form.Item>
+            <Form.Item 
+              label='描述或原因'
+              name='reason'
+              rules={[{ required: true, message: '请输入描述或原因'}]}
+            >
+              <Input />
+            </Form.Item>
+          </Form>
+        </Col>
+      </Row>
     </Modal>
   );
 }

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

@@ -12,7 +12,7 @@ const style = {
   cursor: 'move',
 };
 
-const DragTag = ({ id, text, index, moveTag }) => {
+const DragTag = ({ id, text, index, moveTag, onClose }) => {
   const ref = useRef(null);
   const [{ handlerId }, drop] = useDrop({
     accept: type,
@@ -59,6 +59,7 @@ const DragTag = ({ id, text, index, moveTag }) => {
       item.index = hoverIndex;
     },
   });
+
   const [{ isDragging }, drag] = useDrag({
     type: type,
     item: () => {
@@ -68,10 +69,12 @@ const DragTag = ({ id, text, index, moveTag }) => {
       isDragging: monitor.isDragging(),
     }),
   });
+
   const opacity = isDragging ? 0 : 1;
   drag(drop(ref));
+  
   return (
-    <Tag ref={ref} style={{ ...style, opacity }} data-handler-id={handlerId} closable>
+    <Tag ref={ref} style={{ ...style, opacity }} data-handler-id={handlerId} closable onClose={()=>{onClose&&onClose()}}>
     {text}
     </Tag>
   );