feature 全局变量管理增删改查实现 (#906)

dlink-admin/src/main/java/com/dlink/controller/FragmentVariableController.java

+/*
+ *
+ *  Licensed to the Apache Software Foundation (ASF) under one or more
+ *  contributor license agreements.  See the NOTICE file distributed with
+ *  this work for additional information regarding copyright ownership.
+ *  The ASF licenses this file to You under the Apache License, Version 2.0
+ *  (the "License"); you may not use this file except in compliance with
+ *  the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ */
+
+package com.dlink.controller;
+
+
+import com.dlink.common.result.ProTableResult;
+import com.dlink.common.result.Result;
+import com.dlink.model.FragmentVariable;
+import com.dlink.service.FragmentVariableService;
+import com.fasterxml.jackson.databind.JsonNode;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.ArrayList;
+import java.util.List;
+
+/**
+ * FragmentVariableController
+ *
+ * @author zhumingye
+ * @since 2022/8/18
+ */
+@Slf4j
+@RestController
+@RequestMapping("/api/fragment")
+public class FragmentVariableController {
+
+    @Autowired
+    private FragmentVariableService fragmentVariableService;
+
+    /**
+     * 新增或者更新
+     */
+    @PutMapping
+    public Result saveOrUpdate(@RequestBody FragmentVariable fragmentVariable) throws Exception {
+        if (fragmentVariableService.saveOrUpdate(fragmentVariable)) {
+            return Result.succeed("保存成功");
+        } else {
+            return Result.failed("保存失败");
+        }
+    }
+
+    /**
+     * 动态查询列表
+     */
+    @PostMapping
+    public ProTableResult<FragmentVariable> listFragmentVariable(@RequestBody JsonNode para) {
+        return fragmentVariableService.selectForProTable(para);
+    }
+
+    /**
+     * 批量删除
+     */
+    @DeleteMapping
+    public Result deleteMul(@RequestBody JsonNode para) {
+        if (para.size() > 0) {
+            List<Integer> error = new ArrayList<>();
+            for (final JsonNode item : para) {
+                Integer id = item.asInt();
+                if (!fragmentVariableService.removeById(id)) {
+                    error.add(id);
+                }
+            }
+            if (error.size() == 0) {
+                return Result.succeed("删除成功");
+            } else {
+                return Result.succeed("删除部分成功，但" + error.toString() + "删除失败，共" + error.size() + "次失败。");
+            }
+        } else {
+            return Result.failed("请选择要删除的记录");
+        }
+    }
+}
\ No newline at end of file

dlink-admin/src/main/java/com/dlink/mapper/FragmentVariableMapper.java

+/*
+ *
+ *  Licensed to the Apache Software Foundation (ASF) under one or more
+ *  contributor license agreements.  See the NOTICE file distributed with
+ *  this work for additional information regarding copyright ownership.
+ *  The ASF licenses this file to You under the Apache License, Version 2.0
+ *  (the "License"); you may not use this file except in compliance with
+ *  the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ */
+
+package com.dlink.mapper;
+
+import com.dlink.db.mapper.SuperMapper;
+import com.dlink.model.FragmentVariable;
+import org.apache.ibatis.annotations.Mapper;
+
+/**
+ * FragmentVariableMapper
+ *
+ * @author zhumingye
+ * @since 2022/08/18
+ **/
+@Mapper
+public interface FragmentVariableMapper extends SuperMapper<FragmentVariable> {
+}
\ No newline at end of file

dlink-admin/src/main/java/com/dlink/model/FragmentVariable.java

+/*
+ *
+ *  Licensed to the Apache Software Foundation (ASF) under one or more
+ *  contributor license agreements.  See the NOTICE file distributed with
+ *  this work for additional information regarding copyright ownership.
+ *  The ASF licenses this file to You under the Apache License, Version 2.0
+ *  (the "License"); you may not use this file except in compliance with
+ *  the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ */
+
+package com.dlink.model;
+
+import com.baomidou.mybatisplus.annotation.FieldFill;
+import com.baomidou.mybatisplus.annotation.TableField;
+import com.baomidou.mybatisplus.annotation.TableName;
+import com.dlink.db.model.SuperEntity;
+import lombok.AllArgsConstructor;
+import lombok.Data;
+import lombok.EqualsAndHashCode;
+import lombok.NoArgsConstructor;
+
+/**
+ * FragmentVariable
+ *
+ * @author zhumingye
+ * @since 2022/8/18
+ */
+@Data
+@AllArgsConstructor
+@NoArgsConstructor
+@EqualsAndHashCode(callSuper = false)
+@TableName("dlink_fragment")
+public class FragmentVariable extends SuperEntity {
+
+    @TableField(fill = FieldFill.INSERT)
+    private String alias;
+    private String fragmentValue;
+    private String note;
+
+}
\ No newline at end of file

dlink-admin/src/main/java/com/dlink/service/FragmentVariableService.java

+/*
+ *
+ *  Licensed to the Apache Software Foundation (ASF) under one or more
+ *  contributor license agreements.  See the NOTICE file distributed with
+ *  this work for additional information regarding copyright ownership.
+ *  The ASF licenses this file to You under the Apache License, Version 2.0
+ *  (the "License"); you may not use this file except in compliance with
+ *  the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ */
+
+package com.dlink.service;
+
+
+import com.dlink.db.service.ISuperService;
+import com.dlink.model.FragmentVariable;
+
+/**
+ * FragmentVariableService
+ *
+ * @author zhumingye
+ * @since 2022/8/18
+ */
+public interface FragmentVariableService extends ISuperService<FragmentVariable> {
+
+}

dlink-admin/src/main/java/com/dlink/service/impl/FragmentVariableServiceImpl.java

+/*
+ *
+ *  Licensed to the Apache Software Foundation (ASF) under one or more
+ *  contributor license agreements.  See the NOTICE file distributed with
+ *  this work for additional information regarding copyright ownership.
+ *  The ASF licenses this file to You under the Apache License, Version 2.0
+ *  (the "License"); you may not use this file except in compliance with
+ *  the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ */
+
+package com.dlink.service.impl;
+
+import com.dlink.db.service.impl.SuperServiceImpl;
+import com.dlink.mapper.FragmentVariableMapper;
+import com.dlink.model.FragmentVariable;
+import com.dlink.service.FragmentVariableService;
+import org.springframework.stereotype.Service;
+
+
+/**
+ * FragmentVariableServiceImpl
+ *
+ * @author zhumingye
+ * @since 2022/8/18
+ */
+@Service
+public class FragmentVariableServiceImpl extends SuperServiceImpl<FragmentVariableMapper, FragmentVariable> implements FragmentVariableService {
+}
\ No newline at end of file

dlink-admin/src/main/resources/mapper/FragmentVariableMapper.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  ~
+  ~  Licensed to the Apache Software Foundation (ASF) under one or more
+  ~  contributor license agreements.  See the NOTICE file distributed with
+  ~  this work for additional information regarding copyright ownership.
+  ~  The ASF licenses this file to You under the Apache License, Version 2.0
+  ~  (the "License"); you may not use this file except in compliance with
+  ~  the License.  You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~  Unless required by applicable law or agreed to in writing, software
+  ~  distributed under the License is distributed on an "AS IS" BASIS,
+  ~  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~  See the License for the specific language governing permissions and
+  ~  limitations under the License.
+  ~
+  -->
+
+<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="com.dlink.mapper.FragmentVariableMapper">
+
+    <select id="selectForProTable" resultType="com.dlink.model.FragmentVariable">
+        select
+        a.*
+        from
+        dlink_fragment a
+        <where>
+            1=1
+            <if test='param.id!=null'>
+                and a.id = #{param.id}
+            </if>
+            <if test='param.name!=null and param.name!=""'>
+                and a.name like "%${param.name}%"
+            </if>
+            <if test='param.alias!=null and param.alias!=""'>
+                and a.alias like "%${param.alias}%"
+            </if>
+            <if test='param.note!=null and param.note!=""'>
+                and a.note like "%${param.note}%"
+            </if>
+            <if test='param.createTime!=null and param.createTime!=""'>
+                and a.create_time <![CDATA[>=]]> str_to_date( #{param.createTime},'%Y-%m-%d %H:%i:%s')
+            </if>
+            <if test='ew.sqlSegment!=null and ew.sqlSegment!="" and !ew.sqlSegment.startsWith(" ORDER BY")'>
+                and
+            </if>
+            <if test='ew.sqlSegment!=null and ew.sqlSegment!=""'>
+                ${ew.sqlSegment}
+            </if>
+        </where>
+    </select>
+</mapper>
\ No newline at end of file

dlink-doc/sql/dlink.sql

@@ -11,9 +11,6 @@
 
  Date: 24/11/2021 09:19:12
 */
-create database if not exists dlink;
-use dlink;
-
 SET NAMES utf8mb4;
 SET FOREIGN_KEY_CHECKS = 0;
 
@@ -618,4 +615,23 @@ CREATE TABLE `dlink_job_history` (
 
 CREATE INDEX dlink_job_instance_task_id_IDX USING BTREE ON dlink_job_instance (task_id);
 
+
+-- ----------------------------
+-- Table structure for dlink_fragment
+-- ----------------------------
+DROP TABLE IF EXISTS `dlink_fragment`;
+CREATE TABLE `dlink_fragment` (
+                                  `id` int NOT NULL AUTO_INCREMENT COMMENT '实例主键',
+                                  `name` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '唯一名称',
+                                  `alias` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL COMMENT '别名',
+                                  `fragment_value` text CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '变量值',
+                                  `note` text CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci COMMENT '说明/描述',
+                                  `enabled` tinyint DEFAULT '1' COMMENT '是否启用',
+                                  `create_time` datetime DEFAULT NULL COMMENT '创建时间',
+                                  `update_time` datetime DEFAULT NULL COMMENT '更新时间',
+                                  PRIMARY KEY (`id`) USING BTREE,
+                                  UNIQUE KEY `un_idx1` (`name`) USING BTREE
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci ROW_FORMAT=DYNAMIC COMMENT='全局变量';
+
+
 SET FOREIGN_KEY_CHECKS = 1;

dlink-doc/sql/dlink_history.sql

@@ -690,3 +690,20 @@ CREATE TABLE `dlink_task_version` (
                                       PRIMARY KEY (`id`) USING BTREE
 ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8 ROW_FORMAT=DYNAMIC COMMENT='作业历史版本';
 
+
+
+-- 0.7-SNAPSHOT 2022-08-02
+-- -----------------------
+-- DROP TABLE IF EXISTS `dlink_fragment`;
+CREATE TABLE `dlink_fragment` (
+                                  `id` int NOT NULL AUTO_INCREMENT COMMENT '实例主键',
+                                  `name` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '唯一名称',
+                                  `alias` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL COMMENT '别名',
+                                  `fragment_value` text CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '变量值',
+                                  `note` text CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci COMMENT '说明/描述',
+                                  `enabled` tinyint DEFAULT '1' COMMENT '是否启用',
+                                  `create_time` datetime DEFAULT NULL COMMENT '创建时间',
+                                  `update_time` datetime DEFAULT NULL COMMENT '更新时间',
+                                  PRIMARY KEY (`id`) USING BTREE,
+                                  UNIQUE KEY `un_idx1` (`name`) USING BTREE
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci ROW_FORMAT=DYNAMIC COMMENT='全局变量';
\ No newline at end of file

dlink-web/config/routes.ts

@@ -109,6 +109,11 @@ export default [
         name: 'document',
         icon: 'container',
         component: './Document',
+      },{
+        path: '/registration/fragment',
+        name: 'fragment',
+        icon: "cloud",
+        component: './FragmentVariable',
       },
     ],
   },

dlink-web/src/components/Studio/StudioLeftTool/StudioFragment/index.tsx

+/*
+ *
+ *  Licensed to the Apache Software Foundation (ASF) under one or more
+ *  contributor license agreements.  See the NOTICE file distributed with
+ *  this work for additional information regarding copyright ownership.
+ *  The ASF licenses this file to You under the Apache License, Version 2.0
+ *  (the "License"); you may not use this file except in compliance with
+ *  the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ */
+
+import React, {useState} from "react";
+import {ProColumns, ProTable} from "@ant-design/pro-table";
+import {Drawer} from "antd";
+import ProDescriptions from '@ant-design/pro-descriptions';
+import {queryData} from "@/components/Common/crud";
+import {FragmentVariableTableListItem} from "@/pages/FragmentVariable/data";
+
+const StudioFragment = (props: any) => {
+
+  const {toolHeight, dispatch} = props;
+  const [row, setRow] = useState<{}>();
+
+  const url ="/api/fragment"
+
+
+  const getColumns : ProColumns<FragmentVariableTableListItem>[] =  [
+    {
+      title: '名称',
+      dataIndex: 'name',
+      tip: '名称是唯一的',
+      sorter: true,
+      render: (dom, entity) => {
+        return <a onClick={() => setRow(entity)}>{dom}</a>;
+      },
+    },
+    {
+      title: '引用名称',
+      copyable : true,
+      render: (dom, entity) => {
+        return <>
+          ${"{"+ entity?.name +"}"}
+        </> ;
+      },
+    },
+    {
+      title: '变量ID',
+      dataIndex: 'id',
+      hideInTable: true,
+      hideInForm: true,
+      hideInSearch: true,
+    },
+    {
+      title: '别名',
+      dataIndex: 'alias',
+      hideInForm: false,
+      hideInSearch: false,
+      hideInTable: true,
+    },
+    {
+      title: '变量值',
+      sorter: true,
+      dataIndex: 'fragmentValue',
+      hideInForm: false,
+      hideInSearch: true,
+      hideInTable: true,
+    },
+    {
+      title: '使用变量值',
+      sorter: true,
+      dataIndex: 'fillValue',
+      hideInForm: false,
+      hideInSearch: true,
+      hideInTable: true,
+    },
+    {
+      title: '描述',
+      sorter: true,
+      dataIndex: 'note',
+      valueType: 'textarea',
+      hideInForm: false,
+      hideInSearch: false,
+      hideInTable: true,
+    },
+    {
+      title: '是否启用',
+      dataIndex: 'enabled',
+      hideInForm: false,
+      hideInSearch: true,
+      hideInTable: true,
+      filters: [
+        {
+          text: '已启用',
+          value: 1,
+        },
+        {
+          text: '已禁用',
+          value: 0,
+        },
+      ],
+      filterMultiple: false,
+      valueEnum: {
+        true: {text: '已启用', status: 'Success'},
+        false: {text: '已禁用', status: 'Error'},
+      },
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      sorter: true,
+      valueType: 'dateTime',
+      hideInForm: true,
+      hideInTable: true,
+    },
+    {
+      title: '最近更新时间',
+      dataIndex: 'updateTime',
+      sorter: true,
+      valueType: 'dateTime',
+      hideInForm: true,
+      hideInTable: true,
+    },
+  ];
+
+  return (
+    <>
+      <ProTable<FragmentVariableTableListItem>
+        columns={getColumns}
+        style={{width: '100%'}}
+        request={(params, sorter, filter) => queryData(url, {params, sorter, filter})}
+        pagination={{
+          showLessItems:false,
+          pageSize: 10,
+        }}
+        search={false}
+        size="small"
+      />
+      <Drawer
+        width={600}
+        visible={!!row?.name}
+        onClose={() => {
+          setRow(undefined);
+        }}
+        closable={false}
+      >
+        <ProDescriptions
+          column={1}
+          title={row?.name}
+          request={async () => ({
+            data: row || {},
+          })}
+          params={{
+            name: row?.name,
+          }}
+          columns={getColumns}
+        />
+      </Drawer>
+    </>
+  );
+};
+
+export default StudioFragment;

dlink-web/src/components/Studio/StudioLeftTool/index.tsx

@@ -18,26 +18,26 @@
  */
 
 
-import {Tabs, Empty} from "antd";
+import {Empty, Tabs} from "antd";
 import {
-  BarsOutlined,
-  DatabaseOutlined,
   AppstoreOutlined,
+  BarsOutlined,
+  CloudOutlined,
   ClusterOutlined,
-  MessageOutlined,
+  DatabaseOutlined,
+  FunctionOutlined,
   InsertRowAboveOutlined,
-  FunctionOutlined
+  MessageOutlined
 } from "@ant-design/icons";
 import {StateType} from "@/pages/DataStudio/model";
 import {connect} from "umi";
-import styles from "./index.less";
 import StudioTree from "../StudioTree";
 import StudioConnector from "./StudioConnector";
-import React from "react";
 import StudioDataBase from "./StudioDataBase";
 import StudioCluster from "./StudioCluster";
 import StudioMetaData from "./StudioMetaData";
 import StudioMetaStore from "./StudioMetaStore";
+import StudioFragment from "@/components/Studio/StudioLeftTool/StudioFragment";
 
 const {TabPane} = Tabs;
 
@@ -64,6 +64,9 @@ const StudioLeftTool = (props: any) => {
       <TabPane tab={<span><AppstoreOutlined/> 元数据</span>} key="MetaData">
         <StudioMetaData/>
       </TabPane>
+      <TabPane tab={<span><CloudOutlined/> 全局变量</span>} key="fragment">
+        <StudioFragment/>
+      </TabPane>
       <TabPane tab={<span><FunctionOutlined/> 函数</span>} key="Function">
         <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>
       </TabPane>

dlink-web/src/locales/zh-CN/menu.ts

@@ -63,6 +63,7 @@ export default {
   'menu.job': '作业实例',
   'menu.registration.jar': 'Jar 管理',
   'menu.registration.document': '文档管理',
+  'menu.registration.fragment': '全局变量管理',
   'menu.settings': '系统设置',
   'menu.dev.flink': 'Flink 计算框架',
   'menu.dev.flink.docs': '官方文档',

dlink-web/src/pages/FragmentVariable/components/FragmentForm.tsx

+/*
+ *
+ *  Licensed to the Apache Software Foundation (ASF) under one or more
+ *  contributor license agreements.  See the NOTICE file distributed with
+ *  this work for additional information regarding copyright ownership.
+ *  The ASF licenses this file to You under the Apache License, Version 2.0
+ *  (the "License"); you may not use this file except in compliance with
+ *  the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ */
+
+import React, {useState} from 'react';
+import {Button, Form, Input, Modal, Switch} from 'antd';
+import TextArea from "antd/es/input/TextArea";
+import {FragmentVariableTableListItem} from "@/pages/FragmentVariable/data";
+
+export type FragmentFormProps  = {
+  onCancel: (flag?: boolean) => void;
+  onSubmit: (values: Partial<FragmentVariableTableListItem>) => void;
+  modalVisible: boolean;
+  values: Partial<FragmentVariableTableListItem>;
+  // instance: FragmentVariableTableListItem[];
+};
+
+const FormItem = Form.Item;
+
+
+const formLayout = {
+  labelCol: {span: 7},
+  wrapperCol: {span: 13},
+};
+
+const FragmentForm : React.FC<FragmentFormProps> = (props:any) => {
+
+  const [form] = Form.useForm();
+  const [formVals, setFormVals] = useState<Partial<FragmentVariableTableListItem>>({
+    id: props.values.id,
+    name: props.values.name,
+    alias: props.values.alias,
+    fragmentValue: props.values.fragmentValue,
+    note: props.values.note,
+    enabled: props.values.enabled,
+    createTime: props.values.createTime,
+    updateTime: props.values.updateTime,
+  });
+
+  const {
+    onSubmit: handleSubmit,
+    onCancel: handleModalVisible,
+    modalVisible,
+  } = props;
+
+
+  const submitForm = async () => {
+    const fieldsValue = await form.validateFields();
+    fieldsValue.id = formVals.id;
+    setFormVals({...formVals,...fieldsValue});
+    handleSubmit({...formVals,...fieldsValue});
+  };
+
+  const renderContent = (formVals : FragmentVariableTableListItem) => {
+    return (
+      <>
+        <FormItem
+          name="name"
+          label="名称"
+          rules={[{required: true, message: '请输入名称！'}]}>
+          <Input placeholder="请输入唯一名称"/>
+        </FormItem>
+        <FormItem
+          name="alias"
+          label="别名"
+          rules={[{required: true, message: '请输入别名！'}]}>
+          <Input placeholder="请输入别名"/>
+        </FormItem>
+        <FormItem
+          name="note"
+          label="描述"
+        >
+          <TextArea placeholder="请输入该全局变量的描述信息!" allowClear autoSize={{minRows: 3, maxRows: 10}}/>
+        </FormItem>
+        <FormItem
+          name="fragmentValue"
+          label="全局变量值"
+          rules={[{required: true, message: '请输入全局变量值！'}]}
+        >
+          <TextArea placeholder="请输入全局变量值!!!"
+                    allowClear
+                    autoSize={{minRows: 3, maxRows: 10}}/>
+        </FormItem>
+        <FormItem
+          name="enabled"
+          label="是否启用"
+          rules={[{required: true, message: '请输入是否启用！'}]}>
+          <Switch checkedChildren="启用" unCheckedChildren="禁用"
+                  defaultChecked={formVals.enabled}/>
+        </FormItem>
+      </>
+    );
+  };
+
+  const renderFooter = () => {
+    return (
+      <>
+        <Button onClick={() => handleModalVisible(false)}>取消</Button>
+        <Button type="primary" onClick={() => submitForm()}>
+          完成
+        </Button>
+      </>
+    );
+  };
+
+  return (
+    <Modal
+      width={1200}
+      bodyStyle={{padding: '32px 40px 48px'}}
+      destroyOnClose
+      title={formVals.id?"维护全局变量":"新建全局变量"}
+      visible={modalVisible}
+      footer={renderFooter()}
+      onCancel={() => handleModalVisible()}
+    >
+      <Form
+        {...formLayout}
+        form={form}
+        initialValues={formVals as FragmentVariableTableListItem}
+      >
+        {renderContent(formVals as FragmentVariableTableListItem)}
+      </Form>
+    </Modal>
+  );
+};
+
+export default FragmentForm;

dlink-web/src/pages/FragmentVariable/data.d.ts

+/*
+ *
+ *  Licensed to the Apache Software Foundation (ASF) under one or more
+ *  contributor license agreements.  See the NOTICE file distributed with
+ *  this work for additional information regarding copyright ownership.
+ *  The ASF licenses this file to You under the Apache License, Version 2.0
+ *  (the "License"); you may not use this file except in compliance with
+ *  the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ */
+
+export type FragmentVariableTableListItem = {
+  id: number,
+  name: string,
+  alias: string,
+  fragmentValue: string,
+  note: string,
+  enabled: boolean,
+  createTime: Date,
+  updateTime: Date,
+};