资产目录

src/view/Manage/AssetManage/tree.jsx

@@ -11,7 +11,7 @@ import ImportNode from './Component/ImportDirectory'
 import CustomNode from './Component/CustomDirectoryModal'
 import { AssetManageReference } from '../../../util/constant'
 import { generateList, updateTreeData } from '../AssetResourceManage/tree'
-import UpdateNode from './Component/UpdateDirectoryModal'
+import UpdateNode from './update-node'
 
 import '../AssetResourceManage/tree.less'
 

src/view/Manage/AssetManage/update-node.jsx

+import React from 'react'
+import { Modal, Button, Spin, Form, Input, Radio, Select, Space, TreeSelect, Row, Col, Checkbox } from 'antd'
+import { QuestionCircleOutlined } from '@ant-design/icons'
+
+import { dispatch } from '../../../model'
+import { getValidString, showMessage } from '../../../util'
+
+const resourceTypes = [
+  { key: 'dataAsset', name: '资产' },
+  { key: 'custom', name: '自定义' },
+]
+
+const FC = (props) => {
+  const { id, action, visible, onCancel } = props
+  const [loading, setLoading] = React.useState(false)
+  const [waiting, setWaiting] = React.useState(false)
+  const [node, setNode] = React.useState()
+
+  const basicRef = React.useRef()
+
+  React.useEffect(() => {
+    if (visible && id) {
+      getDetail()
+    }
+  }, [visible, id])
+
+  const getDetail = () => {
+    setLoading(true)
+    dispatch({
+      type: 'assetmanage.getDirectoryById',
+      payload: { 
+        dirId: id
+      },
+      callback: data => {
+        setLoading(false)
+        setNode(data)
+      },
+      error: () => {
+        setLoading(false)
+      }
+    })
+  }
+
+  const close = (refresh = false) => {
+    setLoading(false)
+    setWaiting(false)
+    setNode()
+    onCancel?.(refresh)
+  }
+
+  const save = async() => {
+    try {
+      const rows = await basicRef.current?.validate()
+
+      setWaiting(true)
+
+      let parentPath = ''
+      if (action === 'add') {
+        if (basicRef.current?.getType === 'child') {
+          parentPath = node?.path
+          rows.resourceType = node?.resourceType
+        }
+      } else {
+        parentPath = node?.path.substring(0, node?.path.lastIndexOf("/"))
+      }
+
+      dispatch({
+        type: 'assetmanage.addOrUpdateDirectory',
+        payload: {
+          data: (action === 'add')?rows:{...node??{}, ...rows},
+          params: {
+            parentPath
+          }
+        },
+        callback: data => {
+          setWaiting(false)
+          onCancel?.(true, data?.id)
+        },
+        error: () => {
+          setWaiting(false)
+        }
+      })
+
+    } catch (e) {
+      
+    }
+  }
+
+  const footer = React.useMemo(() => {
+    return [
+      <Button key={'cancel'}
+        onClick={() => close()}
+      >取消</Button>,
+      <Button key={'save'} type='primary'
+        onClick={() => save()}
+      >确定</Button>
+    ]
+  }, [close, save])
+
+  return (
+    <Modal
+      visible={visible}
+      footer={footer}
+      width='600px'
+      bodyStyle={{ padding: '15px 15px 0px 15px', overflowX: 'auto', maxHeight: '80vh' }}
+      title='资产目录信息'
+      centered destroyOnClose
+      onCancel={() => { close() }}
+    >
+      <Spin spinning={loading||waiting} >
+        <Basic 
+          ref={basicRef} 
+          node={node} 
+          action={action} 
+        />
+      </Spin>
+    </Modal>
+  )
+}
+
+export default FC
+
+export const Basic = React.forwardRef(function ({ node, action }, ref) {
+  const [type, setType] = React.useState('root')
+  const [currentResourceType, setCurrentResourceType] = React.useState()
+
+  const [form] = Form.useForm()
+
+  React.useImperativeHandle(ref, () => ({
+    getType: type,
+    validate: async () => {
+      return await form.validateFields()
+    },
+  }), [type, form])
+
+  React.useEffect(() => {
+    if (node) {
+      const index = resourceTypes.findIndex(item => item.key === node?.resourceType)
+      if (index !== -1) {
+        setCurrentResourceType(resourceTypes[index].name)
+      }
+
+      if (action !== 'add') {
+        form.setFieldsValue(node)
+      }
+    }
+  }, [action, node])
+
+  const allowChangeResourceType = React.useMemo(() => {
+    return (action==='add' && type==='root')
+  }, [action, type])
+
+  const onValuesChange = (changedValues, allValues) => {
+    
+  }
+
+  return (
+    <Form
+      form={form}
+      labelCol={{ span: 5 }}
+      wrapperCol={{ span: 17 }}
+      autoComplete="off"
+      onValuesChange={onValuesChange}
+    >
+      {
+        action==='add' && <Form.Item 
+          label="类型"
+          rules={[{ required: true, message: '请选择类型!' }]}
+        >
+          <Radio.Group value={type} onChange={(e) => {
+            setType(e.target.value)
+          }}>
+            <Radio value='root'>栏目</Radio>
+            <Radio value='child' disabled={!node?.id}>目录</Radio>
+          </Radio.Group>
+        </Form.Item>
+      }
+      <Form.Item 
+        label="资产类型"
+        name="resourceType"
+        rules={[{ required: allowChangeResourceType?true:false, message: '请选择资产类型!' }]}
+      >
+        {
+          allowChangeResourceType ? <Select allowClear>
+          {
+            resourceTypes.map((item,index) => {
+              return <Select.Option key={item.key}>{item.name}</Select.Option>
+            })
+          }
+          </Select> : <span>{currentResourceType}</span>
+        }
+      </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>
+      {
+        action !== 'add' && (
+          <Form.Item
+            label="路径"
+            name="path"
+          >
+            <span>{node?.path}</span>
+          </Form.Item>
+        )
+      }
+      <Form.Item 
+        label="描述"
+        name="desc"
+      >
+        <Input placeholder="请输入描述" />
+      </Form.Item>
+      <Form.Item 
+        label="备注"
+        name="remarks"
+      >
+        <Input placeholder="请输入备注" />
+      </Form.Item>
+    </Form>  
+  )
+})
+

src/view/Manage/AssetResourceManage/update-node.jsx

@@ -158,6 +158,10 @@ export const Basic = React.forwardRef(function ({ node, action, onResourceTypeCh
     }
   }, [action, node])
 
+  const allowChangeResourceType = React.useMemo(() => {
+    return (action==='add' && type==='root')
+  }, [action, type])
+
   const onValuesChange = (changedValues, allValues) => {
     if (changedValues.hasOwnProperty('resourceType')) {
       onResourceTypeChange(changedValues.resourceType) 
@@ -188,10 +192,10 @@ export const Basic = React.forwardRef(function ({ node, action, onResourceTypeCh
       <Form.Item 
         label="资源类型"
         name="resourceType"
-        rules={[{ required: (action==='add'&&type==='root')?true:false, message: '请选择资源类型!' }]}
+        rules={[{ required: allowChangeResourceType?true:false, message: '请选择资源类型!' }]}
       >
         {
-          (action==='add'&&type==='root') ? <Select allowClear>
+          allowChangeResourceType ? <Select allowClear>
           {
             resourceTypes.map((item,index) => {
               return <Select.Option key={item.key}>{item.name}</Select.Option>