模型评论

src/view/Manage/Model/Component/ImportAction.jsx

@@ -596,7 +596,9 @@ const ImportAction = React.forwardRef((props, ref) => {
             <Tabs.TabPane tab='数据表索引' key="model-import-action-index" />
             <Tabs.TabPane tab='管理信息' key="model-import-action-manage" />
             <Tabs.TabPane tab='关联对象' key="model-import-action-relation" />
-            <Tabs.TabPane tab='模型评论' key="model-import-action-comment" />
+            {
+              modelerData?.id && <Tabs.TabPane tab='模型评论' key="model-import-action-comment" />
+            }
           </Tabs>
           <div ref={setContainer} style={{ height: action==='edit-inherite-modal'?'60vh':'calc(100vh - 44px - 64px - 66px)', overflow: 'auto', padding: '20px 20px 0' }}>
             <ImportActionHeader 
@@ -642,9 +644,11 @@ const ImportAction = React.forwardRef((props, ref) => {
             <ImportActionRelation
               modelerData={modelerData} action={action} 
             />
-            <ImportActionComment
+            {
+              modelerData?.id && <ImportActionComment
               modelerData={modelerData}
             />
+            }
           </div>
         </div>
       }

src/view/Manage/Model/Component/ImportActionComment.jsx

 import React from "react"
-import { Button, Space, Input, Divider, Upload, Row, Col, Tooltip } from "antd"
+import { Button, Space, Input, Divider, Upload, Row, Col, Tooltip, List, Typography, Modal } from "antd"
 import { DownOutlined, UpOutlined, PlusOutlined } from '@ant-design/icons'
 import { showMessage } from "../../../../util"
-import { dispatch } from '../../../../model'; 
+import { dispatch } from '../../../../model'
+
+import './ImportActionComment.less'
 
 const FC = (props) => {
   const { modelerData } = props
@@ -11,6 +13,7 @@ const FC = (props) => {
   const [fileList, setFileList] = React.useState()
   const [comment, setComment] = React.useState()
   const [comments, setComments] = React.useState()
+  const [modal, contextHolder] = Modal.useModal()
 
   React.useEffect(() => {
     if (modelerData?.id) {
@@ -49,6 +52,26 @@ const FC = (props) => {
         showMessage('success', '发表评论成功')
         setFileList([])
         setComment()
+        getComments()
+      }
+    })
+  }
+
+  const onDeleteClick = (item) => {
+    modal.confirm({
+      title: '提示',
+      content: '确定删除该评论嘛?',
+      onOk: () => {
+        dispatch({
+          type: 'datamodel.deleteComment',
+          payload: { 
+            id: item?.id
+          },
+          callback: data => {
+            showMessage('success', '删除成功')
+            getComments()
+          },
+        })
       }
     })
   }
@@ -86,10 +109,10 @@ const FC = (props) => {
   }
 
   return (
-    <div>
-      <div className='model-import-action-comment mb-3'>
+    <div className='model-import-action-comment'>
+      <div className='mb-3'>
         <Space>
-          <h3 style={{ marginBottom: 0 }}>评论</h3>
+          <h3 style={{ marginBottom: 0 }}>评论{` (${(comments??[]).length})`}</h3>
           {
             isCollapse ? <Button type='primary' size='small' onClick={() => {
               setCollapse(!isCollapse)
@@ -102,9 +125,9 @@ const FC = (props) => {
       {
         !isCollapse && <React.Fragment>
           <div style={{ border: '1px solid #d9d9d9', borderRadius: 4 }}>
-            <Input.TextArea bordered={false} rows={4} placeholder='请输入您的评论' onChange={(e) => { setComment(e.target.value) }}  />
+            <Input.TextArea value={comment} bordered={false} rows={3} placeholder='请输入您的评论' onChange={(e) => { setComment(e.target.value) }}  />
             <Divider style={{ margin: 0 }}/>
-            <div className='flex' style={{ padding: '11px', justifyContent: 'space-between' }}>
+            <div className='flex' style={{ padding: '8px 11px', justifyContent: 'space-between' }}>
               <Space align='start'>
                 <Upload {...uploadProps }>
                   <Button size='small' icon={<PlusOutlined />} />
@@ -116,8 +139,44 @@ const FC = (props) => {
               </Tooltip>
             </div>
           </div>
+          <div className='my-3'>
+            <List
+              itemLayout="horizontal"
+              dataSource={comments??[]}
+              pagination={
+                (comments??[]).length<=20 ? false : {
+                pageSize: 20,
+                size: 'small',
+              }}
+              renderItem={(item) => (
+                <List.Item
+                  actions={item.currentUser?[<a key="list-delete" onClick={() => {
+                    onDeleteClick(item)
+                  }}>删除</a>]:null}
+                >
+                  <List.Item.Meta
+                    avatar={
+                      <div style={{ width: 60 }}>
+                        <Tooltip title={item.userName}>
+                          <Typography.Text ellipsis={true}>{item.userName}</Typography.Text>
+                        </Tooltip>
+                      </div>
+                    }
+                    title={
+                      <div>
+                        {item.comment}
+                        <AttachesItem value={item.fileList} readOnly />
+                      </div>
+                    }
+                    description={new Date(item.createdTS).toLocaleString()}
+                  />
+                </List.Item>
+              )}
+            />
+          </div>
         </React.Fragment>
       }
+      {contextHolder}
     </div>
   )
 }
@@ -130,7 +189,7 @@ const AttachesItem = ({ value, onChange, readOnly }) => {
       {
         value?.map((item, index) => {
           return (
-            <div key={index} style={{ marginTop: (index!==0)?5:0 }}>
+            <div key={index} style={{ marginTop: (!readOnly&&index!==0)?5:0 }}>
               <Space>
                 <a onClick={() => {
                   window.open(`/api/datamodelercomment/file/download?id=${item.id}`)

src/view/Manage/Model/Component/ImportActionComment.less

+.model-import-action-comment {
+  .yy-list-pagination {
+    text-align: center;
+  }
+}
\ No newline at end of file