新建主数据模版

src/view/Manage/DataMaster/Component/DataMasterExpandedTable.jsx

@@ -2,7 +2,6 @@ import { useMemo } from 'react';
 
 import ResizeableTable from '../../ResizeableTable';
 import { expandedTableData } from './Mock';
-import './DataMasterExpandedTable.less';
 
 const DataMasterExpandedTable = (props) => {
   const columns = useMemo(() => {

src/view/Manage/DataMaster/Component/DataMasterTable.jsx

@@ -3,6 +3,7 @@ import { Space, Button, Input } from 'antd';
 
 import ResizeableTable from '../../ResizeableTable';
 import DebounceInput from '../../Model/Component/DebounceInput';
+import UpdateTemplateModal from './UpdateTemplateModal';
 import { inputWidth } from '../../../../util';
 import DataMasterExpandedTable from './DataMasterExpandedTable';
 import { tableData } from './Mock';
@@ -14,6 +15,7 @@ const InputDebounce = DebounceInput(300)(Input);
 const DataMasterTable = (props) => {
   const [keyword, setKeyword] = useState('');
   const [checkedKeys, setCheckedKeys] = useState([]);
+  const [isTemplateModalVisible, setIsTemplateModalVisible] = useState(false);
 
   const columns = useMemo(() => {
     return ([
@@ -66,7 +68,11 @@ const DataMasterTable = (props) => {
   }, []);
 
   const onAddClick = () => {
+    setIsTemplateModalVisible(true);
+  }
 
+  const onTemplateModalCancel = () => {
+    setIsTemplateModalVisible(false);
   }
 
   const onBatchDeleteClick = () => {
@@ -119,6 +125,11 @@ const DataMasterTable = (props) => {
           scroll={{ y: 'calc(100vh - 94px - 37px - 57px - 24px - 32px)' }}
         />
       </div>
+
+      <UpdateTemplateModal
+        visible={isTemplateModalVisible}
+        onCancel={onTemplateModalCancel}
+      />
     </div>
   );
 }

src/view/Manage/DataMaster/Component/DataMasterTree.jsx

@@ -19,7 +19,9 @@ const DataMasterTree = (props) => {
   const [autoExpandParent, setAutoExpandParent] = useState(false);
 
   useEffect(() => {
+    setLoading(false);
     onTreeSelect(['0-0']);
+    //eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   const treeList = useMemo(() => {
@@ -41,6 +43,7 @@ const DataMasterTree = (props) => {
     generateList(treeData, newTreeList);
     
     return newTreeList;
+    //eslint-disable-next-line react-hooks/exhaustive-deps
   }, [treeData])
 
   const onAddClick = () => {

src/view/Manage/DataMaster/Component/UpdateTemplateModal.jsx

+import { Modal, Form, Input, Button } from "antd";
+import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
+
+import './UpdateTemplateModal.less';
+
+const UpdateTemplateModal = (props) => {
+  const { visible, onCancel } = props;
+  const [form] = Form.useForm();
+
+  const formItemLayout = {
+    labelCol: {
+      xs: { span: 24 },
+      sm: { span: 6 },
+    },
+    wrapperCol: {
+      xs: { span: 24 },
+      sm: { span: 18 },
+    },
+  };
+
+  const formItemLayoutWithOutLabel = {
+    wrapperCol: {
+      xs: {
+        span: 24,
+        offset: 0,
+      },
+      sm: {
+        span: 18,
+        offset: 6,
+      },
+    },
+  };
+
+  const onFormFinish = async() => {
+    try {
+      await form.validateFields();
+      // const row = await form.validateFields();
+      onCancel && onCancel();
+    } catch (errInfo) {
+      console.log('Validate Failed:', errInfo);
+    }
+  }
+
+  return (
+    <Modal
+      className='update-template-modal'
+      title='新建模版'
+      visible={visible}
+      onCancel={onCancel}
+      onOk={onFormFinish}
+    >
+      <Form 
+        form={form}
+        {...formItemLayout}
+      >
+        <Form.Item label='模版名称' name='name' rules={[{ required: true, message: '请填写模版名称' }]}>
+          <Input />
+        </Form.Item>
+        <Form.Item label='模版中文名称' name='cnName' rules={[{ required: true, message: '请填写模版中文名称' }]}>
+          <Input />
+        </Form.Item>
+        <Form.List
+          name="names"
+          rules={[
+            {
+              validator: async (_, names) => {
+                if (!names || names.length < 1) {
+                  return Promise.reject(new Error('至少需要一个属性'));
+                }
+              },
+            },
+          ]}
+        >
+          {(fields, { add, remove }, { errors }) => (
+            <>
+              {fields.map((field, index) => (
+                <Form.Item
+                  label={`属性${index+1}`}
+                  required={false}
+                  key={field.key}
+                >
+                  <Form.Item
+                    {...field}
+                    validateTrigger={['onChange', 'onBlur']}
+                    rules={[
+                      {
+                        required: true,
+                        whitespace: true,
+                        message: "请输入属性名称",
+                      },
+                    ]}
+                    noStyle
+                  >
+                    <Input
+                      placeholder="属性名称"
+                      style={{
+                        width: fields.length > 1? '87%':'100%',
+                      }}
+                    />
+                  </Form.Item>
+                  {fields.length > 1 ? (
+                    <MinusCircleOutlined
+                      className="dynamic-delete-button"
+                      onClick={() => remove(field.name)}
+                    />
+                  ) : null}
+                </Form.Item>
+              ))}
+              <Form.Item {...formItemLayoutWithOutLabel}>
+                <Button
+                  type="dashed"
+                  onClick={() => add()}
+                  style={{
+                    width: '100%',
+                  }}
+                  icon={<PlusOutlined />}
+                >
+                  添加属性
+                </Button>
+                <Form.ErrorList errors={errors} />
+              </Form.Item>
+            </>
+          )}
+        </Form.List>
+      </Form>
+    </Modal>
+  );
+}
+
+export default UpdateTemplateModal;
\ No newline at end of file

src/view/Manage/DataMaster/Component/UpdateTemplateModal.less

+.update-template-modal {
+
+  .yy-modal-body {
+    max-height: 70vh;
+    overflow: auto;
+  }
+
+  .dynamic-delete-button {
+    position: relative;
+    top: 4px;
+    margin: 0 8px;
+    color: #999;
+    font-size: 24px;
+    cursor: pointer;
+    transition: all 0.3s;
+  }
+  .dynamic-delete-button:hover {
+    color: #777;
+  }
+}
\ No newline at end of file

src/view/Manage/DatasourceManage/Component/UpdateTaskModal.jsx

 import React, { useEffect, useState } from 'react';
 import { Modal, Checkbox, Row, Col, Divider, Input, Typography, Form, Switch } from 'antd';
 
-import { showMessage } from '../../../../util';
 import { dispatch } from '../../../../model';
 
 const UpdateTaskModal = (props) => {

src/view/Manage/ResizeableTable/index.jsx

-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Table } from 'antd';
 import { Resizable } from 'react-resizable';