tableau

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

@@ -135,6 +135,7 @@ const AssetTable = (props) => {
   const [ contextMenuItem, setContextMenuItem ] = useState({});
 
   const [ checkedKeys, setCheckedKeys ] = useState([]);
+  const [ checkedItems, setCheckedItems ] = useState([]);
   const [ importAssetVisible, setImportAssetVisible ] = useState(false);
   const [ filterElementVisible, setFilterElementVisible ] = useState(false);
   const [ assetEditVisible, setAssetEditVisible ] = useState(false);
@@ -573,6 +574,8 @@ const AssetTable = (props) => {
 
   const onSelectChange = keys => {
     setCheckedKeys(keys);
+    const newCheckedItems = assets?.filter(item => keys.indexOf(item.id)!==-1);
+    setCheckedItems(newCheckedItems);
   };
 
   const onFullScreenClick = () => {
@@ -923,6 +926,7 @@ const AssetTable = (props) => {
         type={biType}
         visible={ worksheetModalVisible }
         id={ (checkedKeys||[]).length>0?checkedKeys[0]:'' }
+        metadata={ (checkedItems||[]).length>0?checkedItems[0].metadata:{} }
         onCancel={onWorksheetModalCancel}
       />
 

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

-import React, { useState } from 'react';
-import { Modal, Form, Button, Space, Input } from 'antd';
+import React, { useEffect, useState } from 'react';
+import { Modal, Form, Button, Space, Input, Checkbox, Row, Col, Typography } from 'antd';
 
 import { dispatch } from '../../../../model';
 import { showMessage } from '../../../../util';
 
 const WorksheetModal = (props) => {
 
-  const { onCancel, visible, id, type = 'tableau' } = props;
+  const { onCancel, visible, id, type = 'tableau', metadata = {} } = props;
   const [ confirmLoading, setConfirmLoading ] = useState(false);
 
   const [ form ] = Form.useForm();
 
+  useEffect(() => {
+    if (visible && type==='tableau') {
+      form?.setFieldsValue({ tableName: metadata?.tableName, columnNames: metadata?.columnItems?.map(item => item.metadataColumnName) }); 
+    }
+  }, [visible, type])
+
   const onOk = async() => {
     try {
       const row = await form?.validateFields();
@@ -24,7 +30,7 @@ const WorksheetModal = (props) => {
         payload: { 
           data: {
             id,
-            name: row.name
+            ...row,
           }
         },
         callback: data => {
@@ -52,6 +58,17 @@ const WorksheetModal = (props) => {
     form?.resetFields();
   }
 
+  const formItemLayout = {
+    labelCol: {
+      xs: { span: 24 },
+      sm: { span: 3 },
+    },
+    wrapperCol: {
+      xs: { span: 24 },
+      sm: { span: 21 },
+    },
+  };
+
   return (
     <Modal
       forceRender
@@ -72,7 +89,7 @@ const WorksheetModal = (props) => {
         </Space>
       }
     >
-      <Form form={form}>
+      <Form form={form} style={{ maxHeight: 600, overflow: 'auto' }} {...formItemLayout}>
         <Form.Item
           label="名称"
           name="name"
@@ -80,6 +97,38 @@ const WorksheetModal = (props) => {
         >
           <Input />
         </Form.Item>
+        {
+          type === 'tableau' && <React.Fragment>
+            <Form.Item
+              label="字段"
+              name="columnNames"
+            >
+              <Checkbox.Group>
+                <Row>
+                {
+                  metadata?.columnItems?.map((item, index) => <Col key={index} span={8}>
+                    <Checkbox
+                      value={item.metadataColumnName}
+                      style={{
+                        lineHeight: '32px',
+                      }}
+                    >
+                      <Typography.Text style={{ width: 120 }} ellipsis>{item.metadataColumnName}</Typography.Text>
+                    </Checkbox>
+                  </Col>)
+                }
+                </Row>
+              </Checkbox.Group>
+            </Form.Item>
+            <Form.Item
+              label="元数据"
+              name="tableName"
+              hidden={true}
+            >
+              <Input />
+            </Form.Item>
+          </React.Fragment>
+        }
       </Form>
     </Modal>
   );