添加标注

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

@@ -23,6 +23,7 @@ import SelectFilter from '../../Model/Component/SelectFilter';
 import { checkDataAssetEditable } from '../../../../service/dataassetmanager';
 import download from '../../../../util/download';
 import RelationAssets from './asset-relation-assets';
+import QuestionModalButton from './QuestionModalButton';
 
 import './AssetAction.less';
 
@@ -66,6 +67,7 @@ const AssetAction = React.forwardRef(function (props, ref) {
   const [isStructured, setStructured] = useState();
   const [businessElements, setBusinessElements] = useState();
   const [businessColumns, setBusinessColumns] = useState();
+  const [sqlinfo,setSqlInfo] = useState([])
 
   const [loadingSaveAsDraft, setLoadingSaveAsDraft] = React.useState(false)
   const [needSaveAsDraft, setNeedSaveAsDraft] = React.useState()
@@ -123,10 +125,19 @@ const AssetAction = React.forwardRef(function (props, ref) {
       render: (text, _) => highlightSearchContentByTerms(text||'', terms)
     },
     {
-      title: '备注信息',
-      dataIndex: 'remarks',
+      title: '标注信息',
+      dataIndex: 'annotation',
       ellipsis: true,
-      render: (text, _) => highlightSearchContentByTerms(text||'', terms)
+      render: (text, record) => {
+        if(currentAction==='edit'){
+          return <Form.Item name={record._id} style={{marginBottom:0}}>
+            <Input  />
+          </Form.Item>
+        }else{
+          return highlightSearchContentByTerms(text||'', terms)
+        }
+        
+      }
     },
     {
       title: '类型',
@@ -523,6 +534,15 @@ const AssetAction = React.forwardRef(function (props, ref) {
         const _attributes = Array.from(new Set((data?.elements??[]).map(item => item.type)))
 
         setAssetParams({ assets: data, attributes: _attributes });
+        const sqls = (data.questionSqlPairs||[]).map((i,key)=>{
+          return {...i,id:key}
+        })
+        setSqlInfo(sqls)
+        let map = {};
+        (data.columns||[]).forEach((i)=>{
+          map[i._id] = i.annotation
+        })
+        columnForm.setFieldsValue(map)
         if ((_attributes??[]).length > 0) {
           setCurrentAttribute(_attributes[0])
         }
@@ -605,7 +625,9 @@ const AssetAction = React.forwardRef(function (props, ref) {
     try {
       // const row = await form?.validateFields();
       const row = form?.getFieldsValue();
-      await columnForm?.validateFields();
+      const formdata = await columnForm?.validateFields();
+
+      const {columns} = assets
       
       const newElements = [...elements];
       (newElements||[]).forEach(element => {
@@ -614,11 +636,15 @@ const AssetAction = React.forwardRef(function (props, ref) {
         }
       });
 
+      const tempcolumns = columns.map((item)=>{
+        return {...item,annotation:formdata[item._id]}
+      })
+
       setConfirmLoading(true);
 
       if (reference === AssetDraftReference) {
         let data = action==='add' ? { elements: newElements } : { ...assets, elements: newElements }
-        data = {...data, businessRelations: relationAssetsRef.current?.assets, businessColumns: modifyMetadataColumnList}
+        data = {...data,columns:tempcolumns,questionSqlPairs:sqlinfo, businessRelations: relationAssetsRef.current?.assets, businessColumns: modifyMetadataColumnList}
         
         dispatch({
           type: 'assetmanage.updateDraft',
@@ -648,7 +674,7 @@ const AssetAction = React.forwardRef(function (props, ref) {
 
         let data = action==='add' ? { elements: newElements } : { ...assets, elements: newElements }
 
-        data = {...data, businessRelations: relationAssetsRef.current?.assets, businessColumns: modifyMetadataColumnList}
+        data = {...data,columns:tempcolumns,questionSqlPairs:sqlinfo, businessRelations: relationAssetsRef.current?.assets, businessColumns: modifyMetadataColumnList}
 
         dispatch({
           type: needSaveAsDraft?'assetmanage.saveAsDraft':'assetmanage.addOrUpdateDataAsset',
@@ -817,14 +843,19 @@ const AssetAction = React.forwardRef(function (props, ref) {
             </Radio.Group>
             {
               action!=='add' && <Space>
+                <QuestionModalButton list={sqlinfo} readOnly={currentAction==='detail'} setList={setSqlInfo} />
                 {
                   (!readonly && (reference===AssetManageReference||canEdit)) && <React.Fragment>
                     {
-                      currentAction==='detail' ? <Tooltip title={(assets?.existDraft)?'资产存在草稿箱中，不允许编辑':''}>
+                      currentAction==='detail' ? (
+                        <>
+                          <Tooltip title={(assets?.existDraft)?'资产存在草稿箱中，不允许编辑':''}>
                             <Button onClick={onActionButtonClick} disabled={assets?.existDraft}>编辑</Button>
-                      </Tooltip> : <React.Fragment>
+                          </Tooltip>
+                        </>
+                      ) : <React.Fragment>
                         <Button onClick={onCancelButtonClick}>取消</Button>
-                        <Button onClick={onActionButtonClick}>{(reference===AssetDraftReference||!needSaveAsDraft)?'保存':'保存草稿'}</Button>
+                        <Button loading={confirmLoading} onClick={onActionButtonClick}>{(reference===AssetDraftReference||!needSaveAsDraft)?'保存':'保存草稿'}</Button>
                       </React.Fragment>
                     }
                   </React.Fragment>
@@ -944,7 +975,9 @@ const AssetAction = React.forwardRef(function (props, ref) {
       <div>
         <Divider orientation='left'>字段级资产目录信息</Divider>
         {
-          isStructured ? <Table
+          isStructured ? 
+          <Form form={columnForm}>
+            <Table
               className='mt-3'
               columns={cols??[]} 
               rowKey='_id'
@@ -963,7 +996,9 @@ const AssetAction = React.forwardRef(function (props, ref) {
                   setPagination({ pageNum: _pageNum||1, pageSize: _pageSize || 20 });
                 },
               }} 
-          /> : <React.Fragment>
+            /> 
+          </Form>
+          : <React.Fragment>
             <div className='flex' style={{ justifyContent: 'end' }}>
               {
                 (currentAction !== 'detail') && <Button onClick={async () => {

src/view/Manage/AssetManage/Component/QuestionModalButton.tsx

+import { useSetState } from "ahooks"
+import { Button, Drawer,Space,Collapse, Input } from "antd"
+import React, { useState } from "react"
+import {EditOutlined} from "@ant-design/icons"
+
+const {Panel} = Collapse
+
+const QuestionModalButton:React.FC<any>=(props)=>{
+
+    const {list,setList,readOnly} = props
+
+    const [editInfo,setEditInfo] = useSetState<any>({
+        sql:'',
+        question:'',
+        id:'',
+    })
+
+    const [eidtKey,setEditKey] = useState('')
+    
+    const [visible,setVisible] = useState(false)
+
+    const openModal=()=>{
+        setVisible(true)
+    }
+
+    const closeModal=()=>{
+        setVisible(false)
+    }
+
+    const addItem=()=>{
+        const key =  `add`;
+        setEditInfo({
+            id:key,
+            question:'',
+            sql:''
+        })
+        setEditKey(key)
+        setList([{id:key},...list])
+    }
+
+    const save=()=>{
+        const temp = list.map((i:any)=>{
+            if(i.id===eidtKey){
+                if(i.id===('add')){
+                    return {...editInfo,id:new Date().getTime()}
+                }else{
+                    return editInfo
+                }
+            }else{
+                return i
+            }
+        })
+        setList(temp)
+        setEditKey('')
+        setEditInfo({
+            id:'',
+            question:'',
+            sql:''
+        })
+    }
+
+    const cancel=()=>{
+        if((eidtKey||'')===('add')){
+            const temp = list.filter((i:any)=>(i.id!==('add')))
+            setList(temp)
+        }
+        setEditKey('')
+        setEditInfo({
+            id:'',
+            question:'',
+            sql:''
+        })
+    }
+
+    const editItem=(item)=>{
+        setEditInfo(item)
+        setEditKey(item.id)
+    }
+
+    return(
+        <React.Fragment>
+            <Button onClick={openModal}>资产标注</Button>
+            <Drawer
+                title="添加标注信息"
+                visible={visible}
+                width={800}
+                onClose={closeModal}
+            >
+                <div style={{marginBottom:10,display:readOnly?'none':''}}>
+                    <Space>
+                        {eidtKey?(
+                            <>
+                                <Space>
+                                    <Button type="primary" onClick={save}>保存</Button>
+                                    <Button onClick={cancel}>返回</Button>
+                                </Space>
+                            </>
+                        ):<Button onClick={addItem}>新增</Button>}
+                    </Space>
+                </div>
+                <div style={{height:'calc(100% - 50px)',overflow:'auto'}}>
+                    <Space direction="vertical" style={{width:'100%',marginTop:10}}>
+                        {
+                            list.map((item:any,key:any)=>{
+                                if(item.id===eidtKey){
+                                    return(
+                                        <Collapse key={key} activeKey={'1'}>
+                                            <Panel header={<Input style={{width:'80%'}} placeholder="请输入提示词" value={editInfo.question} onChange={(e:any)=>{setEditInfo({question:e.target.value})}} />} key="1">
+                                                <Input.TextArea 
+                                                    value={editInfo.sql}
+                                                    autoSize={{minRows:4,maxRows:8}}
+                                                    onChange={(e:any)=>{setEditInfo({sql:e.target.value})}}
+                                                    placeholder="请输入问题答案"
+                                                />
+                                            </Panel>
+                                        </Collapse>
+                                    )
+                                }else{
+                                    return(
+                                        <Collapse key={key} collapsible="header" defaultActiveKey={['1']}>
+                                            <Panel header={item.question} key="1" extra={readOnly?undefined:(<EditOutlined 
+                                                onClick={(event)=>{
+                                                    event.stopPropagation();
+                                                    editItem(item)
+                                                }}
+                                            />)}>
+                                                {item.sql}
+                                            </Panel>
+                                        </Collapse>
+                                    )
+                                }
+                            })
+                        }
+                    </Space>
+                </div>
+                
+            </Drawer>
+        </React.Fragment>
+    )
+}
+
+export default QuestionModalButton
\ No newline at end of file