From 22aeb046ea0ebe1767d63c554f7571706042699b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?liveipooli=28=E6=9D=8E=E4=B8=BA=29?= <liveipooli@webank.com>
Date: Fri, 22 Apr 2022 17:37:22 +0800
Subject: [PATCH 1/4] fix: 264980

---
 web/src/pages/dataSourceManage/index.vue | 721 +++++++++++------------
 1 file changed, 352 insertions(+), 369 deletions(-)

diff --git a/web/src/pages/dataSourceManage/index.vue b/web/src/pages/dataSourceManage/index.vue
index 1349e9f5f..5f9d612d9 100644
--- a/web/src/pages/dataSourceManage/index.vue
+++ b/web/src/pages/dataSourceManage/index.vue
@@ -1,386 +1,369 @@
 <template>
-  <div class="content">
-    <a-row :gutter="[16, 16]">
-      <a-col :span="24">
-        <TopLine
-          @create="handleCreate"
-          :loading="loading"
-          :sourceTypeList="sourceTypeList"
-          @search="handleSearch"
+    <div class="content">
+        <a-row :gutter="[16, 16]">
+            <a-col :span="24">
+                <TopLine
+                    :loading="loading"
+                    :sourceTypeList="sourceTypeList"
+                    @create="handleCreate"
+                    @search="handleSearch"
+                />
+            </a-col>
+            <a-col :span="24"><div class="line"></div></a-col>
+            <a-col :span="24" style="overflow-x: auto">
+                <a-table
+                    :columns="columns"
+                    :data-source="dataSourceList"
+                    :loading="loading"
+                    rowKey="id"
+                    :pagination="pagination"
+                    class="data-source-manage-table"
+                    @change="onChange"
+                >
+                    <template #tags="{ text }">
+                        <a-tag color="#2e92f7">{{text.labels}}</a-tag>
+                    </template>
+                    <template #status="{ text: expire }">
+                        <span> {{expire ? "已过期" : "可用"}} </span>
+                    </template>
+                    <template #dataSourceTypeId="{ text: dataSourceTypeId }">
+                        <span>
+                            {{(
+                                sourceTypeList.find(
+                                    (item) => item.id == dataSourceTypeId
+                                ) || { option: "无" }
+                            ).name}}
+                        </span>
+                    </template>
+                    <template #action="row">
+                        <a-space>
+                            <a-button
+                                v-show="row.text.versionId"
+                                size="small"
+                                type="link"
+                                @click="handleEdit(row.text)"
+                            >
+                                {{$t("dataSource.table.list.columns.actions.editButton")}}
+                            </a-button>
+                            <span v-show="row.text.versionId" style="color: #DEE4EC">|</span>
+                            <a-button
+                                v-show="!row.text.expire && row.text.versionId"
+                                size="small"
+                                type="link"
+                                @click="handleExpire(row.text.id)"
+                            >
+                                {{$t("dataSource.table.list.columns.actions.expireButton")}}
+                            </a-button>
+                            <span v-show="!row.text.expire && row.text.versionId" style="color: #DEE4EC">|</span>
+                            <a-button
+                                v-show="row.text.versionId"
+                                size="small"
+                                type="link"
+                                @click="handleTestConnect(row)"
+                            >
+                                {{$t("dataSource.table.list.columns.actions.testConnectButton")}}
+                            </a-button>
+                            <span v-show="row.text.versionId" style="color: #DEE4EC">|</span>
+                            <a-popconfirm
+                                title="是否删除?"
+                                ok-text="确定"
+                                cancel-text="取消"
+                                @confirm="handleDelete(row)"
+                                @cancel="cancel"
+                            >
+                                <a-button size="small" type="link">
+                                    {{$t("dataSource.table.list.columns.actions.deleteButton")}}
+                                </a-button>
+                            </a-popconfirm>
+                        </a-space>
+                    </template>
+                    <template #version="{ text }">
+                        <a-tag style="cursor: pointer; color:#2e92f7" @click="handleOpenVersionModal(text)">
+                            {{text.versionId}}
+                        </a-tag>
+                        <!--<a-button-->
+                        <!--size="small"-->
+                        <!--@click="handleOpenVersionModal(text)"-->
+                        <!--type="link"-->
+                        <!--&gt;{{ text.versionId }}</a-button>-->
+                    </template>
+                    <template #desc="{ text }">
+                        <div class="dsm-desc" :title="text.desc">{{text.desc}}</div>
+                    </template>
+                    <template #name="{ text }">
+                        <div class="dsm-name" :title="text.name">{{text.name}}</div>
+                    </template>
+                    <template #modifyTime="{ text }">
+                        {{text && dateFormatSeconds(text)}}
+                    </template>
+                </a-table>
+            </a-col>
+        </a-row>
+        <select-type-modal
+            v-model:visible="selectTypeModalVisible"
+            :sourceTypeList="sourceTypeList"
+            @select="handleSelectType"
         />
-      </a-col>
-      <a-col :span="24"><div class="line"></div></a-col>
-      <a-col :span="24" style="overflow-x: auto">
-        <a-table
-          :columns="columns"
-          :data-source="dataSourceList"
-          :loading="loading"
-          rowKey="id"
-          :pagination="pagination"
-          class="data-source-manage-table"
-          @change="onChange"
-        >
-          <template #tags="{ text: labels }">
-            <span v-if="labels">
-              <a-tag
-                v-for="tag in labels.split(',')"
-                :title="tag.toUpperCase()"
-                :key="tag"
-                :color="
-                  tag === 'loser'
-                    ? 'volcano'
-                    : tag.length > 5
-                    ? 'geekblue'
-                    : 'green'
-                "
-              >
-                {{ tag.toUpperCase() }}
-              </a-tag>
-            </span>
-          </template>
-          <template #status="{ text: expire }">
-            <span> {{ expire ? "已过期" : "可用" }} </span>
-          </template>
-          <template #dataSourceTypeId="{ text: dataSourceTypeId }">
-            <span>
-              {{
-                (
-                  sourceTypeList.find(
-                    (item) => item.id == dataSourceTypeId
-                  ) || { option: "无" }
-                ).name
-              }}
-            </span>
-          </template>
-          <template #action="row">
-            <a-space>
-              <a-button
-                size="small"
-                @click="handleEdit(row.text)"
-                type="link"
-                v-show="row.text.versionId"
-                >{{
-                  $t("dataSource.table.list.columns.actions.editButton")
-                }}</a-button>
-              <span style="color: #DEE4EC" v-show="row.text.versionId">|</span>
-              <a-button
-                size="small"
-                v-show="!row.text.expire && row.text.versionId"
-                type="link"
-                @click="handleExpire(row.text.id)"
-                >{{
-                  $t("dataSource.table.list.columns.actions.expireButton")
-                }}</a-button>
-              <span v-show="!row.text.expire && row.text.versionId" style="color: #DEE4EC">|</span>
-              <a-button
-                size="small"
-                @click="handleTestConnect(row)"
-                type="link"
-                v-show="row.text.versionId"
-              >{{
-                $t("dataSource.table.list.columns.actions.testConnectButton")
-              }}</a-button>
-              <span style="color: #DEE4EC" v-show="row.text.versionId">|</span>
-              <a-popconfirm
-                title="是否删除?"
-                ok-text="确定"
-                cancel-text="取消"
-                @confirm="handleDelete(row)"
-                @cancel="cancel"
-              >
-                <a-button size="small" type="link">{{
-                  $t("dataSource.table.list.columns.actions.deleteButton")
-                  }}</a-button>
-              </a-popconfirm>
-            </a-space>
-          </template>
-          <template #version="{ text }">
-            <a-tag style="cursor: pointer; color:#2e92f7" @click="handleOpenVersionModal(text)">
-              {{ text.versionId }}
-            </a-tag>
-            <!--<a-button-->
-              <!--size="small"-->
-              <!--@click="handleOpenVersionModal(text)"-->
-              <!--type="link"-->
-              <!--&gt;{{ text.versionId }}</a-button>-->
-          </template>
-          <template #desc="{ text }">
-            <div class="dsm-desc" :title="text.desc">{{ text.desc }}</div>
-          </template>
-          <template #name="{ text }">
-            <div class="dsm-name" :title="text.name">{{ text.name }}</div>
-          </template>
-          <template #modifyTime="{ text }">
-            {{ text && dateFormatSeconds(text) }}
-          </template>
-        </a-table>
-      </a-col>
-    </a-row>
-    <select-type-modal
-      @select="handleSelectType"
-      v-model:visible="selectTypeModalVisible"
-      :sourceTypeList="sourceTypeList"
-    />
-    <version-modal
-      v-model:visible="versionModalCfg.visible"
-      :id="versionModalCfg.id"
-      :rowInfo="versionModalCfg.rowInfo"
-      @openModal="openModal"
-    />
-    <edit-modal
-      v-model:visible="modalCfg.visible"
-      :id="modalCfg.id"
-      :type="modalCfg.type"
-      :mode="modalCfg.mode"
-      :modalCfg="modalCfg"
-      @finish="handleModalFinish"
-      :zIndex="1002"
-    />
-  </div>
+        <version-modal
+            :id="versionModalCfg.id"
+            v-model:visible="versionModalCfg.visible"
+            :rowInfo="versionModalCfg.rowInfo"
+            @openModal="openModal"
+        />
+        <edit-modal
+            :id="modalCfg.id"
+            v-model:visible="modalCfg.visible"
+            :type="modalCfg.type"
+            :mode="modalCfg.mode"
+            :modalCfg="modalCfg"
+            :zIndex="1002"
+            @finish="handleModalFinish"
+        />
+    </div>
 </template>
 
 <script>
-import TopLine from "./components/topLine.vue";
-import SelectTypeModal from "./components/selectTypeModal.vue";
-import EditModal from "./components/editModal.vue";
-import VersionModal from "./components/versionModal.vue";
-import { useI18n } from "@fesjs/fes";
-import { computed } from "vue";
+import { useI18n } from '@fesjs/fes';
+import { computed } from 'vue';
+import { message } from 'ant-design-vue';
+import TopLine from './components/topLine.vue';
+import SelectTypeModal from './components/selectTypeModal.vue';
+import EditModal from './components/editModal.vue';
+import VersionModal from './components/versionModal.vue';
 import {
-  getDataSourceList,
-  deleteDataSource,
-  expireDataSource,
-  getDataSourceTypes,
-  testDataSourceConnect,
-} from "@/common/service";
-import { message } from "ant-design-vue";
-import { dateFormat, dateFormatSeconds } from "@/common/utils";
+    getDataSourceList,
+    deleteDataSource,
+    expireDataSource,
+    getDataSourceTypes,
+    testDataSourceConnect
+} from '@/common/service';
+import { dateFormat, dateFormatSeconds } from '@/common/utils';
 
 const data = [];
 export default {
-  components: {
-    TopLine,
-    SelectTypeModal,
-    EditModal,
-    VersionModal,
-  },
-  setup() {
-    const { t } = useI18n({ useScope: "global" });
-    let columns = computed(() => [
-      {
-        title: t("dataSource.table.list.columns.title.name"),
-        align: "center",
-        slots: { customRender: "name" },
-        width: 200
-      },
-      {
-        title: t("dataSource.table.list.columns.title.type"),
-        dataIndex: "dataSourceTypeId",
-        align: "center",
-        slots: { customRender: "dataSourceTypeId" },
-        width: 100
-      },
-      {
-        title: t("dataSource.table.list.columns.title.status"),
-        dataIndex: "expire",
-        align: "center",
-        slots: { customRender: "status" },
-        width: 80
-      },
-      {
-        title: t("dataSource.table.list.columns.title.tags"),
-        align: "center",
-        slots: { customRender: "labels" },
-        width: 150
-      },
-      {
-        title: t("dataSource.table.list.columns.title.version"),
-        align: "center",
-        slots: { customRender: "version" },
-        width: 80
-      },
-      {
-        title: t("dataSource.table.list.columns.title.describe"),
-        align: "center",
-        slots: { customRender: "desc" },
-        width: 250
-      },
-      {
-        title: t("dataSource.table.list.columns.title.updatetim"),
-        align: "center",
-        dataIndex: "modifyTime",
-        slots: { customRender: "modifyTime" },
-        width: 200
-      },
-      {
-        title: t("dataSource.table.list.columns.title.creator"),
-        align: "center",
-        dataIndex: "createUser",
-        width: 120
-      },
-      {
-        title: t("dataSource.table.list.columns.title.updater"),
-        align: "center",
-        dataIndex: "modifyUser",
-        width: 120
-      },
-      {
-        title: t("dataSource.table.list.columns.title.action"),
-        align: "left",
-        slots: { customRender: "action" },
-      },
-    ]);
-    return {
-      columns,
-    };
-  },
-
-  data() {
-    return {
-      // 时间格式化
-      dateFormat,
-      dateFormatSeconds,
-      // 数据源列表
-      dataSourceList: data,
-      // 数据源类型选择弹窗
-      selectTypeModalVisible: false,
-      // 是否加载中
-      loading: false,
-      // 数据源类型列表
-      sourceTypeList: [],
-      // 编辑弹框
-      modalCfg: {
-        mode: '',
-        id: '',
-        type: '',
-        versionId: '',
-        visible: false,
-      },
-      // 版本弹窗
-      versionModalCfg: {
-        id: "",
-        rowInfo: {},
-        visible: false
-      },
-      pagination: {
-        total: 0,
-        current: 1,
-        pageSize: 10,
-        showQuickJumper: true,
-        showSizeChanger: true
-      },
-      searchData: {}
-    };
-  },
-  methods: {
-    // 处理过期
-    async handleExpire(id) {
-      await expireDataSource(id);
-      message.success("操作成功");
-      this.getDataSourceList();
-    },
-    // 处理搜索
-    handleSearch(data) {
-      this.searchData = {
-        ...data
-      }
-      this.getDataSourceList();
-    },
-    // 打开版本弹框
-    handleOpenVersionModal(text) {
-      this.versionModalCfg = {
-        visible: true,
-        rowInfo: text,
-        id: text.id,
-      };
-    },
-    // 处理选择类型
-    handleSelectType(item) {
-      this.selectTypeModalVisible = false;
-      this.modalCfg = {
-        mode: "create",
-        id: '',
-        versionId: '',
-        type: item.id,
-        visible: true,
-        createSystem: item.name
-      };
+    components: {
+        TopLine,
+        SelectTypeModal,
+        EditModal,
+        VersionModal
     },
-    // 处理删除
-    async handleDelete(row) {
-      await deleteDataSource(row.text.id);
-      message.success("删除成功");
-      this.getDataSourceList();
+    setup() {
+        const { t } = useI18n({ useScope: 'global' });
+        const columns = computed(() => [
+            {
+                title: t('dataSource.table.list.columns.title.name'),
+                align: 'center',
+                slots: { customRender: 'name' },
+                width: 200
+            },
+            {
+                title: t('dataSource.table.list.columns.title.type'),
+                dataIndex: 'dataSourceTypeId',
+                align: 'center',
+                slots: { customRender: 'dataSourceTypeId' },
+                width: 100
+            },
+            {
+                title: t('dataSource.table.list.columns.title.status'),
+                dataIndex: 'expire',
+                align: 'center',
+                slots: { customRender: 'status' },
+                width: 80
+            },
+            {
+                title: t('dataSource.table.list.columns.title.tags'),
+                align: 'center',
+                slots: { customRender: 'tags' },
+                width: 150
+            },
+            {
+                title: t('dataSource.table.list.columns.title.version'),
+                align: 'center',
+                slots: { customRender: 'version' },
+                width: 80
+            },
+            {
+                title: t('dataSource.table.list.columns.title.describe'),
+                align: 'center',
+                slots: { customRender: 'desc' },
+                width: 250
+            },
+            {
+                title: t('dataSource.table.list.columns.title.updatetim'),
+                align: 'center',
+                dataIndex: 'modifyTime',
+                slots: { customRender: 'modifyTime' },
+                width: 200
+            },
+            {
+                title: t('dataSource.table.list.columns.title.creator'),
+                align: 'center',
+                dataIndex: 'createUser',
+                width: 120
+            },
+            {
+                title: t('dataSource.table.list.columns.title.updater'),
+                align: 'center',
+                dataIndex: 'modifyUser',
+                width: 120
+            },
+            {
+                title: t('dataSource.table.list.columns.title.action'),
+                align: 'left',
+                slots: { customRender: 'action' }
+            }
+        ]);
+        return {
+            columns
+        };
     },
-    // 处理编辑
-    handleEdit(item) {
-      this.modalCfg = {
-        mode: "edit",
-        id: item.id,
-        type: item.dataSourceTypeId,
-        visible: true,
-        createSystem: item.createSystem,
-        versionId: item.versionId
-      };
-    },
-    // 打开创建弹窗
-    handleCreate() {
-      this.selectTypeModalVisible = true;
-    },
-    // 弹框操作完成
-    handleModalFinish() {
-      this.getDataSourceList();
-    },
-    // 测试链接
-    async handleTestConnect(row) {
-      await testDataSourceConnect(row.text.id, row.text.versionId);
-      message.success("连接成功");
-    },
-    // 获取列表数据
-    async getDataSourceList(data) {
-      this.pagination = {
-        current: data?.page || 1,
-        pageSize: data?.pageSize || 10
-      }
-      const params = {
-        page: this.pagination.current,
-        pageSize: this.pagination.pageSize,
-        ...this.searchData
-      }
-      this.loading = true;
-      let { list, total } = await getDataSourceList(params);
-      this.pagination.total = total
-      this.loading = false;
-      this.dataSourceList = list;
-    },
-    // 获取数据源类型
-    async getTypeData() {
-      let { list } = await getDataSourceTypes();
-      this.sourceTypeList = list;
+
+    data() {
+        return {
+            // 时间格式化
+            dateFormat,
+            dateFormatSeconds,
+            // 数据源列表
+            dataSourceList: data,
+            // 数据源类型选择弹窗
+            selectTypeModalVisible: false,
+            // 是否加载中
+            loading: false,
+            // 数据源类型列表
+            sourceTypeList: [],
+            // 编辑弹框
+            modalCfg: {
+                mode: '',
+                id: '',
+                type: '',
+                versionId: '',
+                visible: false
+            },
+            // 版本弹窗
+            versionModalCfg: {
+                id: '',
+                rowInfo: {},
+                visible: false
+            },
+            pagination: {
+                total: 0,
+                current: 1,
+                pageSize: 10,
+                showQuickJumper: true,
+                showSizeChanger: true
+            },
+            searchData: {}
+        };
     },
-    openModal(info, rowInfo) {
-      this.modalCfg = {
-        mode: "read",
-        id: info.datasourceId,
-        versionId: info.versionId,
-        type: rowInfo.dataSourceTypeId,
-        visible: true,
-        createSystem: rowInfo.createSystem
-      };
+    mounted() {
+        this.getDataSourceList();
+        this.getTypeData();
     },
-    cancel() {},
-    onChange(page) {
-      const { current, pageSize } = page
-      this.getDataSourceList({
-        page: current,
-        pageSize: pageSize,
-      })
+    methods: {
+        // 处理过期
+        async handleExpire(id) {
+            await expireDataSource(id);
+            message.success('操作成功');
+            this.getDataSourceList();
+        },
+        // 处理搜索
+        handleSearch(data) {
+            this.searchData = {
+                ...data
+            };
+            this.getDataSourceList();
+        },
+        // 打开版本弹框
+        handleOpenVersionModal(text) {
+            this.versionModalCfg = {
+                visible: true,
+                rowInfo: text,
+                id: text.id
+            };
+        },
+        // 处理选择类型
+        handleSelectType(item) {
+            this.selectTypeModalVisible = false;
+            this.modalCfg = {
+                mode: 'create',
+                id: '',
+                versionId: '',
+                type: item.id,
+                visible: true,
+                createSystem: item.name
+            };
+        },
+        // 处理删除
+        async handleDelete(row) {
+            await deleteDataSource(row.text.id);
+            message.success('删除成功');
+            this.getDataSourceList();
+        },
+        // 处理编辑
+        handleEdit(item) {
+            this.modalCfg = {
+                mode: 'edit',
+                id: item.id,
+                type: item.dataSourceTypeId,
+                visible: true,
+                createSystem: item.createSystem,
+                versionId: item.versionId
+            };
+        },
+        // 打开创建弹窗
+        handleCreate() {
+            this.selectTypeModalVisible = true;
+        },
+        // 弹框操作完成
+        handleModalFinish() {
+            this.getDataSourceList();
+        },
+        // 测试链接
+        async handleTestConnect(row) {
+            await testDataSourceConnect(row.text.id, row.text.versionId);
+            message.success('连接成功');
+        },
+        // 获取列表数据
+        async getDataSourceList(data) {
+            this.pagination = {
+                current: data?.page || 1,
+                pageSize: data?.pageSize || 10
+            };
+            const params = {
+                page: this.pagination.current,
+                pageSize: this.pagination.pageSize,
+                ...this.searchData
+            };
+            this.loading = true;
+            const { list, total } = await getDataSourceList(params);
+            this.pagination.total = total;
+            this.loading = false;
+            this.dataSourceList = list;
+        },
+        // 获取数据源类型
+        async getTypeData() {
+            const { list } = await getDataSourceTypes();
+            this.sourceTypeList = list;
+        },
+        openModal(info, rowInfo) {
+            this.modalCfg = {
+                mode: 'read',
+                id: info.datasourceId,
+                versionId: info.versionId,
+                type: rowInfo.dataSourceTypeId,
+                visible: true,
+                createSystem: rowInfo.createSystem
+            };
+        },
+        cancel() {},
+        onChange(page) {
+            const { current, pageSize } = page;
+            this.getDataSourceList({
+                page: current,
+                pageSize
+            });
+        }
     }
-  },
-  mounted() {
-    this.getDataSourceList();
-    this.getTypeData();
-  },
 };
 </script>
 <style scoped lang="less">

From 1d78109347023b44cebefebe3335c33bf0625ac1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?liveipooli=28=E6=9D=8E=E4=B8=BA=29?= <liveipooli@webank.com>
Date: Fri, 22 Apr 2022 17:39:24 +0800
Subject: [PATCH 2/4] fix: 228004

---
 .../pages/jobManagement/components/index.vue  | 2099 ++++++++--------
 .../jobManagement/components/jobDetail.vue    | 2149 ++++++++---------
 2 files changed, 2113 insertions(+), 2135 deletions(-)

diff --git a/web/src/pages/jobManagement/components/index.vue b/web/src/pages/jobManagement/components/index.vue
index 8f2614f7e..9dd086b10 100644
--- a/web/src/pages/jobManagement/components/index.vue
+++ b/web/src/pages/jobManagement/components/index.vue
@@ -1,115 +1,111 @@
 <template>
-  <div class="container jd-container">
-    <div class="tools-bar">
-      <span @click="modalCfg.visible = true"><SettingOutlined />配置</span>
-      <div class="divider"></div>
-      <span @click="executeTask" v-if="!spinning" ><CaretRightOutlined />执行</span>
-      <a-popconfirm
-        v-else
-        title="是否终止?"
-        ok-text="确定"
-        cancel-text="取消"
-        @confirm="killTask"
-        @cancel="cancel"
-      >
-        <span><StopFilled />停止</span>
-      </a-popconfirm>
-      <div class="divider"></div>
-      <span @click="saveAll()"><SaveOutlined />保存</span>
-      <div class="divider"></div>
-      <span @click="executeHistory"><HistoryOutlined />执行历史</span>
-    </div>
-    <div class="jd-content" v-if="list.length !== 0">
-      <a-spin size="large" :spinning="loading" wrapperClassName="wrap-spin">
-        <div class="jd_left">
-          <div class="left-wrap">
-            <div class="sub-title">
-              <span>子任务列表</span>
-            </div>
-            <div v-for="(item, idx) in list" :key="idx" :class="getClass(idx)">
-              <div class="task-title">
-                <div
-                  class="subjobName"
-                  v-if="
-                  activeIndex !== idx || (activeIndex === idx && !nameEditable)
-                "
-                  @click="changeCurTask(idx)"
-                  :title="item.subJobName"
-                >
-                  {{ item.subJobName }}
-                </div>
-                <a-input
-                  style="width: 115px"
-                  @pressEnter="nameEditable = false"
-                  @blur="nameEditable = false"
-                  ref="currentInput"
-                  v-model:value="item.subJobName"
-                  v-if="activeIndex === idx && nameEditable"
-                ></a-input>
-                <a-popconfirm
-                  title="是否删除子任务?"
-                  ok-text="确定"
-                  cancel-text="取消"
-                  @confirm="deleteSub(idx)"
-                  @cancel="cancel"
-                >
-                  <DeleteOutlined class="delete-icon" />
-                </a-popconfirm>
-                <a-popconfirm
-                  title="是否复制子任务?"
-                  ok-text="确定"
-                  cancel-text="取消"
-                  @confirm="copySub(item)"
-                  @cancel="cancel"
-                >
-                  <CopyOutlined class="copy-icon" />
-                </a-popconfirm>
-                <EditOutlined
-                  @click="getEditableInput"
-                  v-if="activeIndex === idx && !nameEditable"
-                  class="rename-icon"
-                />
-              </div>
-              <template
-                v-if="
-                item.dataSourceIds &&
-                item.dataSourceIds.source &&
-                item.dataSourceIds.source.db
-              "
-              >
-                <div
-                  class="sub-table"
-                  @click="changeCurTask(idx)"
-                  :title="
-                  item.dataSourceIds.source.db +
-                  '.' +
-                  item.dataSourceIds.source.table
-                "
-                >
-                  {{
-                  item.dataSourceIds.source.db +
-                  "." +
-                  item.dataSourceIds.source.table
-                  }}
-                </div>
-                <div class="arrow-down-icon" @click="changeCurTask(idx)"><ArrowDownOutlined /></div>
-                <div
-                  class="sub-table"
-                  @click="changeCurTask(idx)"
-                  :title="
-                  item.dataSourceIds.sink.db + '.' + item.dataSourceIds.sink.table
-                "
-                >
-                  {{
-                  item.dataSourceIds.sink.db + "." + item.dataSourceIds.sink.table
-                  }}
-                </div>
-              </template>
-            </div>
-          </div>
-          <a-button
-            size="large"
-            style="
+    <div class="container jd-container">
+        <div class="tools-bar">
+            <span @click="modalCfg.visible = true"><SettingOutlined />配置</span>
+            <div class="divider"></div>
+            <span v-if="!spinning" @click="executeTask"><CaretRightOutlined />执行</span>
+            <a-popconfirm
+                v-else
+                title="是否终止?"
+                ok-text="确定"
+                cancel-text="取消"
+                @confirm="killTask"
+                @cancel="cancel"
+            >
+                <span><StopFilled />停止</span>
+            </a-popconfirm>
+            <div class="divider"></div>
+            <span @click="saveAll()"><SaveOutlined />保存</span>
+            <div class="divider"></div>
+            <span @click="executeHistory"><HistoryOutlined />执行历史</span>
+        </div>
+        <div v-if="list.length !== 0" class="jd-content">
+            <a-spin size="large" :spinning="loading" wrapperClassName="wrap-spin">
+                <div class="jd_left">
+                    <div class="left-wrap">
+                        <div class="sub-title">
+                            <span>子任务列表</span>
+                        </div>
+                        <div v-for="(item, idx) in list" :key="idx" :class="getClass(idx)">
+                            <div class="task-title">
+                                <div
+                                    v-if="
+                                        activeIndex !== idx || (activeIndex === idx && !nameEditable)
+                                    "
+                                    class="subjobName"
+                                    :title="item.subJobName"
+                                    @click="changeCurTask(idx)"
+                                >
+                                    {{item.subJobName}}
+                                </div>
+                                <a-input
+                                    v-if="activeIndex === idx && nameEditable"
+                                    ref="currentInput"
+                                    v-model:value="item.subJobName"
+                                    style="width: 115px"
+                                    @pressEnter="nameEditable = false"
+                                    @blur="nameEditable = false"
+                                ></a-input>
+                                <a-popconfirm
+                                    title="是否删除子任务?"
+                                    ok-text="确定"
+                                    cancel-text="取消"
+                                    @confirm="deleteSub(idx)"
+                                    @cancel="cancel"
+                                >
+                                    <DeleteOutlined class="delete-icon" />
+                                </a-popconfirm>
+                                <a-popconfirm
+                                    title="是否复制子任务?"
+                                    ok-text="确定"
+                                    cancel-text="取消"
+                                    @confirm="copySub(item)"
+                                    @cancel="cancel"
+                                >
+                                    <CopyOutlined class="copy-icon" />
+                                </a-popconfirm>
+                                <EditOutlined
+                                    v-if="activeIndex === idx && !nameEditable"
+                                    class="rename-icon"
+                                    @click="getEditableInput"
+                                />
+                            </div>
+                            <template
+                                v-if="
+                                    item.dataSourceIds &&
+                                        item.dataSourceIds.source &&
+                                        item.dataSourceIds.source.db
+                                "
+                            >
+                                <div
+                                    class="sub-table"
+                                    :title="
+                                        item.dataSourceIds.source.db +
+                                            '.' +
+                                            item.dataSourceIds.source.table
+                                    "
+                                    @click="changeCurTask(idx)"
+                                >
+                                    {{item.dataSourceIds.source.db +
+                                        "." +
+                                        item.dataSourceIds.source.table}}
+                                </div>
+                                <div class="arrow-down-icon" @click="changeCurTask(idx)"><ArrowDownOutlined /></div>
+                                <div
+                                    class="sub-table"
+                                    :title="
+                                        item.dataSourceIds.sink.db + '.' + item.dataSourceIds.sink.table
+                                    "
+                                    @click="changeCurTask(idx)"
+                                >
+                                    {{item.dataSourceIds.sink.db + "." + item.dataSourceIds.sink.table}}
+                                </div>
+                            </template>
+                        </div>
+                    </div>
+                    <a-button
+                        size="large"
+                        style="
               width: 218px;
               font-family: PingFangSC-Regular;
               font-size: 14px;
@@ -118,84 +114,83 @@
               border: 1px dashed #dee4ec;
               margin: 0 15px;
             "
-            @click="addNewTask"
-          >
-            <template #icon> <PlusOutlined /></template>添加子任务
-          </a-button>
-        </div>
-        <div class="jd_right">
-        <div>
-          <DataSource
-            v-if="curTask"
-            v-bind:dsData="curTask"
-            v-bind:engineType="curTask.engineType"
-            @updateSourceInfo="updateSourceInfo"
-            @updateSinkInfo="updateSinkInfo"
-            @updateSourceParams="updateSourceParams"
-            @updateSinkParams="updateSinkParams"
-          />
-        </div>
-        <div>
-          <FieldMap
-            v-if="curTask"
-            v-bind:fmData="curTask.transforms"
-            v-bind:fieldsSink="fieldsSink"
-            v-bind:fieldsSource="fieldsSource"
-            v-bind:deductions="deductions"
-            v-bind:addEnabled="addEnable"
-            v-bind:engineType="curTask.engineType"
-            @updateFieldMap="updateFieldMap"
-          />
-        </div>
-        <div>
-          <ProcessControl
-            v-if="curTask"
-            v-bind:psData="curTask.settings"
-            v-bind:engineType="curTask.engineType"
-            @updateProcessControl="updateProcessControl"
-          />
+                        @click="addNewTask"
+                    >
+                        <template #icon> <PlusOutlined /></template>添加子任务
+                    </a-button>
+                </div>
+                <div class="jd_right">
+                    <div>
+                        <DataSource
+                            v-if="curTask"
+                            v-bind:dsData="curTask"
+                            v-bind:engineType="curTask.engineType"
+                            @updateSourceInfo="updateSourceInfo"
+                            @updateSinkInfo="updateSinkInfo"
+                            @updateSourceParams="updateSourceParams"
+                            @updateSinkParams="updateSinkParams"
+                        />
+                    </div>
+                    <div>
+                        <FieldMap
+                            v-if="curTask"
+                            v-bind:fmData="curTask.transforms"
+                            v-bind:fieldsSink="fieldsSink"
+                            v-bind:fieldsSource="fieldsSource"
+                            v-bind:deductions="deductions"
+                            v-bind:addEnabled="addEnable"
+                            v-bind:engineType="curTask.engineType"
+                            @updateFieldMap="updateFieldMap"
+                        />
+                    </div>
+                    <div>
+                        <ProcessControl
+                            v-if="curTask"
+                            v-bind:psData="curTask.settings"
+                            v-bind:engineType="curTask.engineType"
+                            @updateProcessControl="updateProcessControl"
+                        />
+                    </div>
+                </div>
+            </a-spin>
         </div>
-      </div>
-      </a-spin>
-    </div>
-    <div class="cardWrap" v-if="list.length === 0">
-      <a-spin :spinning="loading">
-        <div class="emptyTab">
-        <div class="void-page-wrap">
-          <div class="void-page-main">
-            <div class="void-page-main-img">
-              <img src="../../../assets/img/void_page.png" alt="空页面" />
-            </div>
-            <div class="void-page-main-title">
-              <span>该任务下没有子任务，请先创建一个子任务</span>
-            </div>
-            <div class="void-page-main-button">
-              <a-button
-                type="primary"
-                size="large"
-                style="
+        <div v-if="list.length === 0" class="cardWrap">
+            <a-spin :spinning="loading">
+                <div class="emptyTab">
+                    <div class="void-page-wrap">
+                        <div class="void-page-main">
+                            <div class="void-page-main-img">
+                                <img src="../../../assets/img/void_page.png" alt="空页面" />
+                            </div>
+                            <div class="void-page-main-title">
+                                <span>该任务下没有子任务，请先创建一个子任务</span>
+                            </div>
+                            <div class="void-page-main-button">
+                                <a-button
+                                    type="primary"
+                                    size="large"
+                                    style="
                   font-family: PingFangSC-Regular;
                   font-size: 14px;
                   line-height: 22px;
                   font-weight: 400;
                 "
-                @click="addNewTask"
-              >
-                <template #icon> <PlusOutlined /></template
-                >{{ t("job.action.createJob") }}
-              </a-button>
-            </div>
-          </div>
+                                    @click="addNewTask"
+                                >
+                                    <template #icon> <PlusOutlined /></template>{{t("job.action.createJob")}}
+                                </a-button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </a-spin>
         </div>
-      </div>
-      </a-spin>
-    </div>
-    <!-- 执行历史  jd-bottom -->
-    <div class="jd-bottom" v-show="visibleDrawer">
-      <div class="jd-bottom-top" >
-        <span>执行历史</span>
-        <CloseOutlined
-          style="
+        <!-- 执行历史  jd-bottom -->
+        <div v-show="visibleDrawer" class="jd-bottom">
+            <div class="jd-bottom-top">
+                <span>执行历史</span>
+                <CloseOutlined
+                    style="
             color: rgba(0, 0, 0, 0.45);
             font-size: 12px;
             position: absolute;
@@ -203,26 +198,26 @@
             top: 18px;
             cursor: pointer;
           "
-          @click="onCloseDrawer"
-        />
-      </div>
-      <div class="jd-bottom-content">
-        <a-table
-          :columns="ehColumns"
-          :data-source="ehTableData"
-          :pagination="ehPagination"
-          @change="onPageChange"
-        >
-        </a-table>
-      </div>
-    </div>
+                    @click="onCloseDrawer"
+                />
+            </div>
+            <div class="jd-bottom-content">
+                <a-table
+                    :columns="ehColumns"
+                    :data-source="ehTableData"
+                    :pagination="ehPagination"
+                    @change="onPageChange"
+                >
+                </a-table>
+            </div>
+        </div>
 
-    <!-- 执行日志  jd-bottom -->
-    <div class="jd-bottom jd-bottom-log" v-show="visibleLog">
-      <div class="jd-bottom-top jd-bottom-log-top" >
-        <!--<span>执行日志</span>-->
-        <CloseOutlined
-          style="
+        <!-- 执行日志  jd-bottom -->
+        <div v-show="visibleLog" class="jd-bottom jd-bottom-log">
+            <div class="jd-bottom-top jd-bottom-log-top">
+                <!--<span>执行日志</span>-->
+                <CloseOutlined
+                    style="
             color: rgba(0, 0, 0, 0.45);
             font-size: 12px;
             position: absolute;
@@ -230,915 +225,909 @@
             top: 18px;
             cursor: pointer;
           "
-          @click="onCloseLog"
-        />
-      </div>
-      <div class="jd-bottom-content log-bottom-content">
-        <a-tabs v-model:activeKey="activeKey" class="exec-info-tab">
-          <a-tab-pane key="1" tab="运行情况">
-            <div v-if="jobProgress.tasks" class="job-progress-percent job-progress-wrap">
-              <span>总进度<span style="font-size: 11px;color:rgba(0,0,0,0.5)">({{statusMap[jobStatus]}})</span></span>
-              <a-tooltip :title="jobProgress.title">
-                <a-progress v-if="jobProgress.failedTasks" :percent="jobProgress.percent" status="exception"/>
-                <a-progress v-else :percent="jobProgress.percent"/>
-              </a-tooltip>
-            </div>
-            <div v-if="jobProgress.tasks && jobProgress.tasks.Running" class="job-progress-wrap">
-              <span class="job-progress-title">正在运行</span>
-              <div class="job-progress-body">
-                <div class="job-progress-percent" v-for="(progress, index) in jobProgress.tasks.Running">
-                  <span :title="progress.name" style="color:#2e92f7;cursor: pointer;text-decoration:underline" @click="getTaskInfo(progress)">{{ progress.name }}</span>
-                  <a-progress :percent="progress.progress * 100" />
-                  <metrics :metricsInfo="metricsInfo" :progress="progress" v-if="openMetricsId === progress.taskId && metricsInfo[progress.taskId]" style="margin-left: 100px"></metrics>
-                </div>
-              </div>
-            </div>
-            <div v-if="jobProgress.tasks && jobProgress.tasks.Scheduled" class="job-progress-wrap">
-              <span class="job-progress-title">准备中</span>
-              <div class="job-progress-body">
-                <div class="job-progress-percent" v-for="(progress, index) in jobProgress.tasks.Scheduled">
-                  <span :title="progress.name">{{ progress.name }}</span><a-progress :percent="0" />
-                </div>
-              </div>
-            </div>
-            <div v-if="jobProgress.tasks && jobProgress.tasks.Inited" class="job-progress-wrap">
-              <span class="job-progress-title">初始化</span>
-              <div class="job-progress-body">
-                <div class="job-progress-percent" v-for="(progress, index) in jobProgress.tasks.Inited">
-                  <span :title="progress.name">{{ progress.name }}</span><a-progress :percent="0" />
-                </div>
-              </div>
-            </div>
-            <div v-if="jobProgress.tasks && jobProgress.tasks.Failed" class="job-progress-wrap">
-              <span class="job-progress-title" style="color:#ff4d4f">失败</span>
-              <div class="job-progress-body">
-                <div class="job-progress-percent" v-for="(progress, index) in jobProgress.tasks.Failed">
-                  <span :title="progress.name" style="color:#2e92f7;cursor: pointer;text-decoration:underline" @click="getTaskInfo(progress)">{{ progress.name }}</span>
-                  <a-progress :percent="progress.progress * 100" />
-                  <metrics :metricsInfo="metricsInfo" :progress="progress" v-if="openMetricsId === progress.taskId && metricsInfo[progress.taskId]" style="margin-left: 100px"></metrics>
-                </div>
-              </div>
+                    @click="onCloseLog"
+                />
             </div>
-            <div v-if="jobProgress.tasks && jobProgress.tasks.Cancelled" class="job-progress-wrap">
-              <span class="job-progress-title" style="color:#ff4d4f">终止</span>
-              <div class="job-progress-body">
-                <div class="job-progress-percent" v-for="(progress, index) in jobProgress.tasks.Cancelled">
-                  <span :title="progress.name" style="color:#2e92f7;cursor: pointer;text-decoration:underline" @click="getTaskInfo(progress)">{{ progress.name }}</span>
-                  <a-progress :percent="progress.progress * 100" />
-                  <metrics :metricsInfo="metricsInfo" :progress="progress" v-if="openMetricsId === progress.taskId && metricsInfo[progress.taskId]" style="margin-left: 100px"></metrics>
-                </div>
-              </div>
+            <div class="jd-bottom-content log-bottom-content">
+                <a-tabs v-model:activeKey="activeKey" class="exec-info-tab">
+                    <a-tab-pane key="1" tab="运行情况">
+                        <div v-if="jobProgress.tasks" class="job-progress-percent job-progress-wrap">
+                            <span>总进度<span style="font-size: 11px;color:rgba(0,0,0,0.5)">({{statusMap[jobStatus]}})</span></span>
+                            <a-tooltip :title="jobProgress.title">
+                                <a-progress v-if="jobProgress.failedTasks" :percent="jobProgress.percent" status="exception" />
+                                <a-progress v-else :percent="jobProgress.percent" />
+                            </a-tooltip>
+                        </div>
+                        <div v-if="jobProgress.tasks && jobProgress.tasks.Running" class="job-progress-wrap">
+                            <span class="job-progress-title">正在运行</span>
+                            <div class="job-progress-body">
+                                <div v-for="(progress, index) in jobProgress.tasks.Running" class="job-progress-percent">
+                                    <span :title="progress.name" style="color:#2e92f7;cursor: pointer;text-decoration:underline" @click="getTaskInfo(progress)">{{progress.name}}</span>
+                                    <a-progress :percent="progress.progress * 100" />
+                                    <metrics v-if="openMetricsId === progress.taskId && metricsInfo[progress.taskId]" :metricsInfo="metricsInfo" :progress="progress" style="margin-left: 100px"></metrics>
+                                </div>
+                            </div>
+                        </div>
+                        <div v-if="jobProgress.tasks && jobProgress.tasks.Scheduled" class="job-progress-wrap">
+                            <span class="job-progress-title">准备中</span>
+                            <div class="job-progress-body">
+                                <div v-for="(progress, index) in jobProgress.tasks.Scheduled" class="job-progress-percent">
+                                    <span :title="progress.name">{{progress.name}}</span><a-progress :percent="0" />
+                                </div>
+                            </div>
+                        </div>
+                        <div v-if="jobProgress.tasks && jobProgress.tasks.Inited" class="job-progress-wrap">
+                            <span class="job-progress-title">初始化</span>
+                            <div class="job-progress-body">
+                                <div v-for="(progress, index) in jobProgress.tasks.Inited" class="job-progress-percent">
+                                    <span :title="progress.name">{{progress.name}}</span><a-progress :percent="0" />
+                                </div>
+                            </div>
+                        </div>
+                        <div v-if="jobProgress.tasks && jobProgress.tasks.Failed" class="job-progress-wrap">
+                            <span class="job-progress-title" style="color:#ff4d4f">失败</span>
+                            <div class="job-progress-body">
+                                <div v-for="(progress, index) in jobProgress.tasks.Failed" class="job-progress-percent">
+                                    <span :title="progress.name" style="color:#2e92f7;cursor: pointer;text-decoration:underline" @click="getTaskInfo(progress)">{{progress.name}}</span>
+                                    <a-progress :percent="progress.progress * 100" />
+                                    <metrics v-if="openMetricsId === progress.taskId && metricsInfo[progress.taskId]" :metricsInfo="metricsInfo" :progress="progress" style="margin-left: 100px"></metrics>
+                                </div>
+                            </div>
+                        </div>
+                        <div v-if="jobProgress.tasks && jobProgress.tasks.Cancelled" class="job-progress-wrap">
+                            <span class="job-progress-title" style="color:#ff4d4f">终止</span>
+                            <div class="job-progress-body">
+                                <div v-for="(progress, index) in jobProgress.tasks.Cancelled" class="job-progress-percent">
+                                    <span :title="progress.name" style="color:#2e92f7;cursor: pointer;text-decoration:underline" @click="getTaskInfo(progress)">{{progress.name}}</span>
+                                    <a-progress :percent="progress.progress * 100" />
+                                    <metrics v-if="openMetricsId === progress.taskId && metricsInfo[progress.taskId]" :metricsInfo="metricsInfo" :progress="progress" style="margin-left: 100px"></metrics>
+                                </div>
+                            </div>
+                        </div>
+                        <div v-if="jobProgress.tasks && jobProgress.tasks.Success" class="job-progress-wrap">
+                            <span class="job-progress-title">成功</span>
+                            <div class="job-progress-body">
+                                <div v-for="(progress, index) in jobProgress.tasks.Success" class="job-progress-percent">
+                                    <span :title="progress.name" style="color:#2e92f7;cursor: pointer;text-decoration:underline" @click="getTaskInfo(progress)">{{progress.name}}</span>
+                                    <a-progress :percent="progress.progress * 100" />
+                                    <metrics v-if="openMetricsId === progress.taskId && metricsInfo[progress.taskId]" :metricsInfo="metricsInfo" :progress="progress" style="margin-left: 100px"></metrics>
+                                </div>
+                            </div>
+                        </div>
+                    </a-tab-pane>
+                    <a-tab-pane key="2" tab="实时日志" force-render>
+                        <execution-log :param="logParams" :isShow="visibleLog"></execution-log>
+                    </a-tab-pane>
+                    <a-tab-pane key="3" tab="执行历史" force-render>
+                        <a-table
+                            style="margin: 0 -24px 0 24px;"
+                            :columns="ehColumns"
+                            :data-source="ehTableData"
+                            :pagination="false"
+                            :scroll="{ y: 240 }"
+                        >
+                            <template #jobExecutionId="{ record }">
+                                <router-link :to="`/synchronizationHistory?jobExecutionId=${jobExecutionId}`">
+                                    {{record.jobExecutionId}}
+                                </router-link>
+                            </template>
+                            <template #status="{ record }">
+                                <span>{{statusMap[record.status]}}</span>
+                            </template>
+                            <template #createTime="{ record }">
+                                <span>{{dateFormat(record.createTime)}}</span>
+                            </template>
+                        </a-table>
+                    </a-tab-pane>
+                </a-tabs>
             </div>
-            <div v-if="jobProgress.tasks && jobProgress.tasks.Success" class="job-progress-wrap">
-              <span class="job-progress-title">成功</span>
-              <div class="job-progress-body">
-                <div class="job-progress-percent" v-for="(progress, index) in jobProgress.tasks.Success">
-                  <span :title="progress.name" style="color:#2e92f7;cursor: pointer;text-decoration:underline" @click="getTaskInfo(progress)">{{ progress.name }}</span>
-                  <a-progress :percent="progress.progress * 100" />
-                  <metrics :metricsInfo="metricsInfo" :progress="progress" v-if="openMetricsId === progress.taskId && metricsInfo[progress.taskId]" style="margin-left: 100px"></metrics>
-                </div>
-              </div>
-            </div>
-          </a-tab-pane>
-          <a-tab-pane key="2" tab="实时日志" force-render>
-            <execution-log :param="logParams" :isShow="visibleLog"></execution-log>
-          </a-tab-pane>
-          <a-tab-pane key="3" tab="执行历史" force-render>
-            <a-table
-              style="margin: 0 -24px 0 24px;"
-              :columns="ehColumns"
-              :data-source="ehTableData"
-              :pagination="false"
-              :scroll="{y:240}"
-            >
-              <template #jobExecutionId="{ record }">
-                <router-link :to="`/synchronizationHistory?jobExecutionId=${jobExecutionId}`">
-                  {{record.jobExecutionId}}
-                </router-link>
-              </template>
-              <template #status="{ record }">
-                <span>{{statusMap[record.status]}}</span>
-              </template>
-              <template #createTime="{ record }">
-                <span>{{dateFormat(record.createTime)}}</span>
-              </template>
-            </a-table>
-          </a-tab-pane>
-        </a-tabs>
-      </div>
-    </div>
+        </div>
 
-    <config-modal
-      v-model:visible="modalCfg.visible"
-      :id="modalCfg.id"
-      :formData="configModalData"
-      @finish="handleModalFinish"
-    />
-    <copy-modal
-      v-model:visible="modalCopy.visible"
-      :origin="copyObj"
-      @finish="handleModalCopy"
-    />
-  </div>
+        <config-modal
+            :id="modalCfg.id"
+            v-model:visible="modalCfg.visible"
+            :formData="configModalData"
+            @finish="handleModalFinish"
+        />
+        <copy-modal
+            v-model:visible="modalCopy.visible"
+            :origin="copyObj"
+            @finish="handleModalCopy"
+        />
+    </div>
 </template>
 <script>
-import { toRaw, h, defineAsyncComponent } from "vue";
+import { toRaw, h, defineAsyncComponent } from 'vue';
 import {
-  SettingOutlined,
-  CaretRightOutlined,
-  SaveOutlined,
-  HistoryOutlined,
-  DatabaseFilled,
-  PlusSquareOutlined,
-  CopyOutlined,
-  DeleteOutlined,
-  ArrowDownOutlined,
-  CheckCircleOutlined,
-  EditOutlined,
-  MinusOutlined,
-  PlusOutlined,
-  CloseOutlined,
-  StopFilled
-} from "@ant-design/icons-vue";
+    SettingOutlined,
+    CaretRightOutlined,
+    SaveOutlined,
+    HistoryOutlined,
+    DatabaseFilled,
+    PlusSquareOutlined,
+    CopyOutlined,
+    DeleteOutlined,
+    ArrowDownOutlined,
+    CheckCircleOutlined,
+    EditOutlined,
+    MinusOutlined,
+    PlusOutlined,
+    CloseOutlined,
+    StopFilled
+} from '@ant-design/icons-vue';
+import { message, notification } from 'ant-design-vue';
+import { useI18n } from '@fesjs/fes';
 import {
-  getJobInfo,
-  saveProject,
-  getSettingsParams,
-  getFields,
-  executeTask,
-  updateTaskConfiguration,
-  getSyncHistory,
-  executeJob,
-  getLogs,
-  getJobStatus,
-  getJobTasks,
-  getProgress,
-  getMetrics,
-  killJob
-} from "@/common/service";
-import { message, notification } from "ant-design-vue";
-import { randomString, moveUpDown, dateFormat } from "../../../common/utils";
-import { useI18n } from "@fesjs/fes";
-import executionLog from './executionLog'
-import metrics from './metricsInfo'
+    getJobInfo,
+    saveProject,
+    getSettingsParams,
+    getFields,
+    executeTask,
+    updateTaskConfiguration,
+    getSyncHistory,
+    executeJob,
+    getLogs,
+    getJobStatus,
+    getJobTasks,
+    getProgress,
+    getMetrics,
+    killJob
+} from '@/common/service';
+import { randomString, moveUpDown, dateFormat } from '../../../common/utils';
+import executionLog from './executionLog';
+import metrics from './metricsInfo';
 
 /**
  * 用于判断一个对象是否有空 value,如果有返回 true
  */
 const objectValueEmpty = (obj) => {
-  let isEmpty = false;
-  Object.keys(obj).forEach((o) => {
-    if (obj[o] == null || obj[o] == "" || obj[o] == undefined) {
-      isEmpty = true;
-    }
-  });
-  return isEmpty;
+    let isEmpty = false;
+    Object.keys(obj).forEach((o) => {
+        if (obj[o] == null || obj[o] == '' || obj[o] == undefined) {
+            isEmpty = true;
+        }
+    });
+    return isEmpty;
 };
 
 const formatDate = (d) => {
-  let date = new Date(d);
-  let YY = date.getFullYear() + "-";
-  let MM =
-    (date.getMonth() + 1 < 10
-      ? "0" + (date.getMonth() + 1)
-      : date.getMonth() + 1) + "-";
-  let DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
-  let hh =
-    (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
-  let mm =
-    (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
-    ":";
-  let ss = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
-  return YY + MM + DD + " " + hh + mm + ss;
+    const date = new Date(d);
+    const YY = `${date.getFullYear()}-`;
+    const MM = `${date.getMonth() + 1 < 10
+        ? `0${date.getMonth() + 1}`
+        : date.getMonth() + 1}-`;
+    const DD = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate();
+    const hh = `${date.getHours() < 10 ? `0${date.getHours()}` : date.getHours()}:`;
+    const mm = `${date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes()
+    }:`;
+    const ss = date.getSeconds() < 10 ? `0${date.getSeconds()}` : date.getSeconds();
+    return `${YY + MM + DD} ${hh}${mm}${ss}`;
 };
 
 const ehColumns = [
-  {
-    title: "编号",
-    dataIndex: "key",
-    align: 'center'
-  },
-  {
-    title: "执行ID",
-    dataIndex: "jobExecutionId",
-    slots: {
-      customRender: "jobExecutionId",
+    {
+        title: '编号',
+        dataIndex: 'key',
+        align: 'center'
     },
-    align: 'center'
-  },
-  {
-    title: "状态",
-    dataIndex: "status",
-    slots: {
-      customRender: "status",
+    {
+        title: '执行ID',
+        dataIndex: 'jobExecutionId',
+        slots: {
+            customRender: 'jobExecutionId'
+        },
+        align: 'center'
     },
-    align: 'center'
-  },
-  {
-    title: "创建时间",
-    dataIndex: "createTime",
-    slots: {
-      customRender: "createTime",
+    {
+        title: '状态',
+        dataIndex: 'status',
+        slots: {
+            customRender: 'status'
+        },
+        align: 'center'
     },
-    align: 'center'
-  }
+    {
+        title: '创建时间',
+        dataIndex: 'createTime',
+        slots: {
+            customRender: 'createTime'
+        },
+        align: 'center'
+    }
 ];
 
 export default {
-  components: {
-    SettingOutlined,
-    CaretRightOutlined,
-    SaveOutlined,
-    HistoryOutlined,
-    DatabaseFilled,
-    PlusSquareOutlined,
-    CopyOutlined,
-    DeleteOutlined,
-    ArrowDownOutlined,
-    CheckCircleOutlined,
-    EditOutlined,
-    PlusOutlined,
-    "config-modal": defineAsyncComponent(() => import("./configModal.vue")),
-    "copy-modal": defineAsyncComponent(() => import("./copyModal.vue")),
-    DataSource: defineAsyncComponent(() => import("./dataSource.vue")),
-    FieldMap: defineAsyncComponent(() => import("./fieldMap.vue")),
-    ProcessControl: defineAsyncComponent(() => import("./processControl.vue")),
-    MinusOutlined,
-    CloseOutlined,
-    StopFilled,
-    executionLog,
-    metrics
-  },
-  data() {
-    const { t } = useI18n({ useScope: "global" });
-    return {
-      loading: false,
-      name: "",
-      modalCfg: {
-        id: "",
-        visible: false,
-      },
-      modalCopy: {
-        visible: false,
-      },
-      jobData: {},
-      copyObj: {},
-      list: [],
-      activeIndex: -1,
-      curTask: null,
-      nameEditable: false,
-
-      fieldsSource: [],
-      fieldsSink: [],
-      deductions: [],
-      addEnable: false,
+    components: {
+        SettingOutlined,
+        CaretRightOutlined,
+        SaveOutlined,
+        HistoryOutlined,
+        DatabaseFilled,
+        PlusSquareOutlined,
+        CopyOutlined,
+        DeleteOutlined,
+        ArrowDownOutlined,
+        CheckCircleOutlined,
+        EditOutlined,
+        PlusOutlined,
+        'config-modal': defineAsyncComponent(() => import('./configModal.vue')),
+        'copy-modal': defineAsyncComponent(() => import('./copyModal.vue')),
+        DataSource: defineAsyncComponent(() => import('./dataSource.vue')),
+        FieldMap: defineAsyncComponent(() => import('./fieldMap.vue')),
+        ProcessControl: defineAsyncComponent(() => import('./processControl.vue')),
+        MinusOutlined,
+        CloseOutlined,
+        StopFilled,
+        executionLog,
+        metrics
+    },
+    data() {
+        const { t } = useI18n({ useScope: 'global' });
+        return {
+            loading: false,
+            name: '',
+            modalCfg: {
+                id: '',
+                visible: false
+            },
+            modalCopy: {
+                visible: false
+            },
+            jobData: {},
+            copyObj: {},
+            list: [],
+            activeIndex: -1,
+            curTask: null,
+            nameEditable: false,
 
-      configModalData: {},
+            fieldsSource: [],
+            fieldsSink: [],
+            deductions: [],
+            addEnable: false,
 
-      visibleDrawer: false,
-      visibleLog: false,
-      pageSize: 10,
-      currentPage: 1,
-      ehColumns: ehColumns,
-      ehTableData: [],
-      ehPagination: {
-        total: 0,
-        pageSize: 10,
-      },
-      t,
-      spinning: false,
-      logs: {
-        logs: ['', '', '', '']
-      },
-      executeId: '',
-      jobExecutionId: '',
-      jobStatus: '',
-      allTaskStatus: '',
-      jobStatusTimer: null,
-      tasklist: [],
-      progressTimer: null,
-      jobProgress: {},
-      metricsInfo: {},
-      openMetricsId: '',
-      statusMap: {
-        'Inited': '初始化',
-        'Scheduled': '准备',
-        'Running': '运行',
-        'WaitForRetry': '等待重试',
-        'Cancelled': '取消',
-        'Failed': '失败',
-        'Partial_Success': '部分成功',
-        'Success': '成功',
-        'Undefined': '未定义',
-        'Timeout': '超时'
-      },
-      activeKey: "1",
-      dateFormat,
-      curTab: {
-        id: ''
-      }
-    };
-  },
-  created() {
-    this.curTab.id = this.$route.query.id
-    this.init();
-  },
-  mounted() {
-    if (this.$route.query.labels) {
-      localStorage.setItem('exchangis_environment', this.$route.query.labels)
-    }
+            configModalData: {},
 
-    this.$nextTick(() => {
-      if (this.$route.path === '/childJobManagement') {
-        document.querySelector('.layout-sider-fixed-stuff').style.width = '0'
-        //document.querySelector('.ant-layout-header.layout-header').style.display = 'none'
-      }
-    })
-  },
-  computed: {
-    logParams(){
-      return {
-        list: this.tasklist,
-        id: this.jobExecutionId
-      }
-    }
-  },
-  methods: {
-    init() {
-      this.getInfo();
+            visibleDrawer: false,
+            visibleLog: false,
+            pageSize: 10,
+            currentPage: 1,
+            ehColumns,
+            ehTableData: [],
+            ehPagination: {
+                total: 0,
+                pageSize: 10
+            },
+            t,
+            spinning: false,
+            logs: {
+                logs: ['', '', '', '']
+            },
+            executeId: '',
+            jobExecutionId: '',
+            jobStatus: '',
+            allTaskStatus: '',
+            jobStatusTimer: null,
+            tasklist: [],
+            progressTimer: null,
+            jobProgress: {},
+            metricsInfo: {},
+            openMetricsId: '',
+            statusMap: {
+                Inited: '初始化',
+                Scheduled: '准备',
+                Running: '运行',
+                WaitForRetry: '等待重试',
+                Cancelled: '取消',
+                Failed: '失败',
+                Partial_Success: '部分成功',
+                Success: '成功',
+                Undefined: '未定义',
+                Timeout: '超时'
+            },
+            activeKey: '1',
+            dateFormat,
+            curTab: {
+                id: ''
+            }
+        };
     },
-    async getInfo() {
-      try {
-        this.loading = true
-        let data = (await getJobInfo(this.curTab.id)).result;
-        this.loading = false
-        if (!data.content || data.content === "[]") {
-          data.content = {
-            subJobs: [],
-          };
-        } else {
-          data.content = JSON.parse(data.content);
-        }
-        data.content.subJobs.forEach((item) => {
-          item.engineType = data.engineType;
-        });
-        this.jobData = data;
-
-        const configData = Object.create(null);
-        configData["executeNode"] = data["executeNode"] || "";
-        configData["proxyUser"] = data["proxyUser"] || "";
-        configData["syncType"] = data["syncType"] || "";
-        configData["jobParams"] = JSON.parse(data["jobParams"]);
-        this.configModalData = configData;
-
-        this.list = this.jobData.content.subJobs;
-        if (this.list.length) {
-          this.activeIndex = 0;
-          this.curTask = this.list[this.activeIndex];
-          this.addEnable = this.curTask.transforms.addEnable
-          this.updateSourceInfo(this.curTask, true);
-          // this.updateSinkInfo(this.curTask); 当sink和source都有值的时候,请求的结果是一致的,所以省去一次多余重复请求
+    computed: {
+        logParams() {
+            return {
+                list: this.tasklist,
+                id: this.jobExecutionId
+            };
         }
-      } catch (error) {
-        this.loading = false
-      }
-    },
-    // 更新保存任务配置
-    handleModalFinish(config) {
-      let _this = this;
-      const { id } = this.curTab;
-      const _config = Object.assign(
-        {},
-        JSON.parse(JSON.stringify(toRaw(config)))
-      );
-      if (_config.jobParams) {
-        let jobParams = Object.create(null);
-        _config.jobParams.forEach((item) => {
-          // jobParams = Object.assign(jobParams, item);
-          jobParams[item.key] = item.value;
-        });
-        _config.jobParams = JSON.stringify(jobParams);
-      }
-      updateTaskConfiguration(id, _config)
-        .then((res) => {
-          message.success("更新/保存成功");
-          _this.jobData["proxyUser"] = _config["proxyUser"];
-        })
-        .catch((err) => {
-          message.error("更新/保存失败");
-          console.log("updateTaskConfiguration error", err);
-        });
-    },
-    handleModalCopy(data) {
-      if (data) {
-        this.jobData.content.subJobs.push(data);
-      }
     },
-    copySub(item) {
-      this.copyObj = item;
-      this.modalCopy.visible = true;
+    created() {
+        this.curTab.id = this.$route.query.id;
+        this.init();
     },
-    deleteSub(index) {
-      this.jobData.content.subJobs.splice(index, 1);
-      if (this.activeIndex === index && this.list.length) {
-        this.activeIndex = 0;
-        this.curTask = this.list[this.activeIndex];
-        this.addEnable = this.curTask.transforms.addEnable
-      } else {
-        this.activeIndex = -1;
-        this.curTask = null;
-        this.addEnable = false
-      }
-    },
-    cancel() {},
-    getClass(index) {
-      if (this.activeIndex === index) {
-        return "sub-content active";
-      } else {
-        return "sub-content";
-      }
+    mounted() {
+        if (this.$route.query.labels) {
+            localStorage.setItem('exchangis_environment', this.$route.query.labels);
+        }
+
+        this.$nextTick(() => {
+            if (this.$route.path === '/childJobManagement') {
+                document.querySelector('.layout-sider-fixed-stuff').style.width = '0';
+                // document.querySelector('.ant-layout-header.layout-header').style.display = 'none'
+            }
+        });
     },
-    changeCurTask(index) {
-      this.activeIndex = index;
-      this.curTask = this.list[this.activeIndex];
-      this.addEnable = this.curTask.transforms.addEnable
+    beforeUnmount() {
+        clearInterval(this.jobStatusTimer);
+        clearInterval(this.progressTimer);
     },
-    addNewTask() {
-      let subJobName = randomString(12);
-      let task = {
-        subJobName,
-        engineType: this.jobData.engineType,
-        dataSourceIds: {
-          source: {
-            type: "",
-            id: "",
-            db: "",
-            table: "",
-            ds: "",
-          },
-          sink: {
-            type: "",
-            id: "",
-            db: "",
-            table: "",
-            ds: "",
-          },
+    methods: {
+        init() {
+            this.getInfo();
         },
-        params: {
-          sources: [],
-          sinks: [],
+        async getInfo() {
+            try {
+                this.loading = true;
+                const data = (await getJobInfo(this.curTab.id)).result;
+                this.loading = false;
+                if (!data.content || data.content === '[]') {
+                    data.content = {
+                        subJobs: []
+                    };
+                } else {
+                    data.content = JSON.parse(data.content);
+                }
+                data.content.subJobs.forEach((item) => {
+                    item.engineType = data.engineType;
+                });
+                this.jobData = data;
+
+                const configData = Object.create(null);
+                configData.executeNode = data.executeNode || '';
+                configData.proxyUser = data.proxyUser || '';
+                configData.syncType = data.syncType || '';
+                configData.jobParams = JSON.parse(data.jobParams);
+                this.configModalData = configData;
+
+                this.list = this.jobData.content.subJobs;
+                if (this.list.length) {
+                    this.activeIndex = 0;
+                    this.curTask = this.list[this.activeIndex];
+                    this.addEnable = this.curTask.transforms.addEnable;
+                    this.updateSourceInfo(this.curTask);
+                    // this.updateSinkInfo(this.curTask); 当sink和source都有值的时候,请求的结果是一致的,所以省去一次多余重复请求
+                }
+            } catch (error) {
+                this.loading = false;
+            }
         },
-        transforms: {
-          type: "MAPPING",
-          mapping: [],
+        // 更新保存任务配置
+        handleModalFinish(config) {
+            const _this = this;
+            const { id } = this.curTab;
+            const _config = Object.assign(
+                {},
+                JSON.parse(JSON.stringify(toRaw(config)))
+            );
+            if (_config.jobParams) {
+                const jobParams = Object.create(null);
+                _config.jobParams.forEach((item) => {
+                    // jobParams = Object.assign(jobParams, item);
+                    jobParams[item.key] = item.value;
+                });
+                _config.jobParams = JSON.stringify(jobParams);
+            }
+            updateTaskConfiguration(id, _config)
+                .then((res) => {
+                    message.success('更新/保存成功');
+                    _this.jobData.proxyUser = _config.proxyUser;
+                })
+                .catch((err) => {
+                    message.error('更新/保存失败');
+                    console.log('updateTaskConfiguration error', err);
+                });
         },
-        settings: [],
-      };
-      getSettingsParams(this.jobData.engineType).then((res) => {
-        res.ui.forEach((ui) => {
-          if (!ui.value && ui.defaultValue) {
-            ui.value = ui.defaultValue;
-          }
-        });
-        task.settings = res.ui || [];
-        this.jobData.content.subJobs.push(task);
-        this.$nextTick(() => {
-          this.activeIndex = this.jobData.content.subJobs.length - 1;
-          this.curTask = this.list[this.activeIndex];
-          this.addEnable = false
-          this.deductions = []
-        });
-      });
-    },
-    updateFieldMap(transforms) {
-      console.log("update field map", transforms);
-      this.curTask.transforms = transforms;
-    },
-    updateProcessControl(settings) {
-      this.curTask.settings = settings;
-    },
-    getFieldsParams(dataSource) {
-      const { dataSourceIds, params } = dataSource;
-      this.curTask.dataSourceIds = dataSourceIds;
-      this.curTask.params = params;
-      const source = this.curTask.dataSourceIds.source;
-      const sink = this.curTask.dataSourceIds.sink;
-      if (!source.type || !source.id || !sink.type || !sink.id) return null;
-      return {
-        sourceTypeId: source.type,
-        sourceDataSourceId: source.id,
-        sourceDataBase: source.db,
-        sourceTable: source.table,
-        sinkTypeId: sink.type,
-        sinkDataSourceId: sink.id,
-        sinkDataBase: sink.db,
-        sinkTable: sink.table,
-        engine: this.jobData.engineType,
-      };
-    },
-    convertDeductions(deductions) {
-      let mapping = [];
-      deductions.forEach((deduction) => {
-        let o = {},
-          source = deduction.source,
-          sink = deduction.sink;
-        o.sink_field_name = sink.name;
-        o.sink_field_type = sink.type;
-        o.sink_field_index = sink.fieldIndex
-        o.sink_field_editable = sink.fieldEditable
-        o.deleteEnable = deduction.deleteEnable
-        o.source_field_name = source.name;
-        o.source_field_type = source.type;
-        o.source_field_index = source.fieldIndex
-        o.source_field_editable = source.fieldEditable
-        mapping.push(o);
-      });
-      return mapping
-    },
-    updateSourceInfo(dataSource, firstInit) {
-      const data = this.getFieldsParams(dataSource);
-      if (data) {
-        getFields(data).then((res) => {
-          this.fieldsSource = res.sourceFields;
-          this.fieldsSink = res.sinkFields;
-          this.deductions = res.deductions;
-          this.addEnable = res.addEnable;
-          // 不在使用deductions 直接将deductions作为值使用
-          if (!(firstInit && this.curTask.transforms.mapping && this.curTask.transforms.mapping.length)) {
-            this.curTask.transforms.mapping = this.convertDeductions(res.deductions)
-          }
-        });
-      } else {
-        // 没有数据源的情况下清空字段映射
-        this.fieldsSource = []
-        this.fieldsSink = []
-        this.deductions = []
-        this.addEnable = false
-        this.curTask.transforms.mapping = []
-      }
-    },
-    updateSinkInfo(dataSource, firstInit) {
-      const data = this.getFieldsParams(dataSource);
-      if (data) {
-        getFields(data).then((res) => {
-          this.fieldsSource = res.sourceFields;
-          this.fieldsSink = res.sinkFields;
-          this.deductions = res.deductions;
-          this.addEnable = res.addEnable;
-          // 不在使用deductions 直接将deductions作为值使用
-          if (!(firstInit && this.curTask.transforms.mapping && this.curTask.transforms.mapping.length)) {
-            this.curTask.transforms.mapping = this.convertDeductions(res.deductions)
-          }
-        });
-      } else {
-        // 没有数据源的情况下清空字段映射
-        this.fieldsSource = []
-        this.fieldsSink = []
-        this.deductions = []
-        this.addEnable = false
-        this.curTask.transforms.mapping = []
-      }
-    },
-    updateSourceParams(dataSource) {
-      const { params } = dataSource;
-      this.curTask.params = params;
-    },
-    updateSinkParams(dataSource) {
-      const { params } = dataSource;
-      this.curTask.params = params;
-    },
-    // 提交前 对 必填数据进行校验
-    checkPostData(data) {
-      const res = [];
-      const { proxyUser, content } = data;
-      const jobs = content.subJobs.slice();
-      if (!proxyUser) {
-        res.push("配置任务中执行用户不可为空");
-      }
-      jobs.forEach((job) => {
-        const { params, settings } = job;
-        for (let key in params) {
-          params[key].forEach((i) => {
-            if (!i.value && i.required) {
-              res.push(`${i.label}不可为空`);
+        handleModalCopy(data) {
+            if (data) {
+                this.jobData.content.subJobs.push(data);
             }
-          });
-        }
+        },
+        copySub(item) {
+            this.copyObj = item;
+            this.modalCopy.visible = true;
+        },
+        deleteSub(index) {
+            this.jobData.content.subJobs.splice(index, 1);
+            if (this.activeIndex === index && this.list.length) {
+                this.activeIndex = 0;
+                this.curTask = this.list[this.activeIndex];
+                this.addEnable = this.curTask.transforms.addEnable;
+            } else {
+                this.activeIndex = -1;
+                this.curTask = null;
+                this.addEnable = false;
+            }
+        },
+        cancel() {},
+        getClass(index) {
+            if (this.activeIndex === index) {
+                return 'sub-content active';
+            }
+            return 'sub-content';
+        },
+        changeCurTask(index) {
+            this.activeIndex = index;
+            this.curTask = this.list[this.activeIndex];
+            this.addEnable = this.curTask.transforms.addEnable;
+        },
+        addNewTask() {
+            const subJobName = randomString(12);
+            const task = {
+                subJobName,
+                engineType: this.jobData.engineType,
+                dataSourceIds: {
+                    source: {
+                        type: '',
+                        id: '',
+                        db: '',
+                        table: '',
+                        ds: ''
+                    },
+                    sink: {
+                        type: '',
+                        id: '',
+                        db: '',
+                        table: '',
+                        ds: ''
+                    }
+                },
+                params: {
+                    sources: [],
+                    sinks: []
+                },
+                transforms: {
+                    type: 'MAPPING',
+                    mapping: []
+                },
+                settings: []
+            };
+            getSettingsParams(this.jobData.engineType).then((res) => {
+                res.ui.forEach((ui) => {
+                    if (!ui.value && ui.defaultValue) {
+                        ui.value = ui.defaultValue;
+                    }
+                });
+                task.settings = res.ui || [];
+                this.jobData.content.subJobs.push(task);
+                this.$nextTick(() => {
+                    this.activeIndex = this.jobData.content.subJobs.length - 1;
+                    this.curTask = this.list[this.activeIndex];
+                    this.addEnable = false;
+                    this.deductions = [];
+                });
+            });
+        },
+        updateFieldMap(transforms) {
+            console.log('update field map', transforms);
+            this.curTask.transforms = transforms;
+        },
+        updateProcessControl(settings) {
+            this.curTask.settings = settings;
+        },
+        getFieldsParams(dataSource) {
+            const { dataSourceIds, params } = dataSource;
+            this.curTask.dataSourceIds = dataSourceIds;
+            this.curTask.params = params;
+            const source = this.curTask.dataSourceIds.source;
+            const sink = this.curTask.dataSourceIds.sink;
+            if (!source.type || !source.id || !sink.type || !sink.id) return null;
+            return {
+                sourceTypeId: source.type,
+                sourceDataSourceId: source.id,
+                sourceDataBase: source.db,
+                sourceTable: source.table,
+                sinkTypeId: sink.type,
+                sinkDataSourceId: sink.id,
+                sinkDataBase: sink.db,
+                sinkTable: sink.table,
+                engine: this.jobData.engineType
+            };
+        },
+        convertDeductions(deductions) {
+            const mapping = [];
+            deductions.forEach((deduction) => {
+                const o = {};
+                const source = deduction.source;
+                const sink = deduction.sink;
+                o.sink_field_name = sink.name;
+                o.sink_field_type = sink.type;
+                o.sink_field_index = sink.fieldIndex;
+                o.sink_field_editable = sink.fieldEditable;
+                o.deleteEnable = deduction.deleteEnable;
+                o.source_field_name = source.name;
+                o.source_field_type = source.type;
+                o.source_field_index = source.fieldIndex;
+                o.source_field_editable = source.fieldEditable;
+                mapping.push(o);
+            });
+            return mapping;
+        },
+        updateSourceInfo(dataSource, firstInit) {
+            const data = this.getFieldsParams(dataSource);
+            if (data) {
+                getFields(data).then((res) => {
+                    this.fieldsSource = res.sourceFields;
+                    this.fieldsSink = res.sinkFields;
+                    this.deductions = res.deductions;
+                    this.addEnable = res.addEnable;
+                    // 不在使用deductions 直接将deductions作为值使用
+                    if (!(firstInit && this.curTask.transforms.mapping && this.curTask.transforms.mapping.length)) {
+                        this.curTask.transforms.mapping = this.convertDeductions(res.deductions);
+                    }
+                });
+            } else {
+                // 没有数据源的情况下清空字段映射
+                this.fieldsSource = [];
+                this.fieldsSink = [];
+                this.deductions = [];
+                this.addEnable = false;
+                this.curTask.transforms.mapping = [];
+            }
+        },
+        updateSinkInfo(dataSource, firstInit) {
+            const data = this.getFieldsParams(dataSource);
+            if (data) {
+                getFields(data).then((res) => {
+                    this.fieldsSource = res.sourceFields;
+                    this.fieldsSink = res.sinkFields;
+                    this.deductions = res.deductions;
+                    this.addEnable = res.addEnable;
+                    // 不在使用deductions 直接将deductions作为值使用
+                    if (!(firstInit && this.curTask.transforms.mapping && this.curTask.transforms.mapping.length)) {
+                        this.curTask.transforms.mapping = this.convertDeductions(res.deductions);
+                    }
+                });
+            } else {
+                // 没有数据源的情况下清空字段映射
+                this.fieldsSource = [];
+                this.fieldsSink = [];
+                this.deductions = [];
+                this.addEnable = false;
+                this.curTask.transforms.mapping = [];
+            }
+        },
+        updateSourceParams(dataSource) {
+            const { params } = dataSource;
+            this.curTask.params = params;
+        },
+        updateSinkParams(dataSource) {
+            const { params } = dataSource;
+            this.curTask.params = params;
+        },
+        // 提交前 对 必填数据进行校验
+        checkPostData(data) {
+            const res = [];
+            const { proxyUser, content } = data;
+            const jobs = content.subJobs.slice();
+            if (!proxyUser) {
+                res.push('配置任务中执行用户不可为空');
+            }
+            jobs.forEach((job) => {
+                const { params, settings } = job;
+                for (const key in params) {
+                    params[key].forEach((i) => {
+                        if (!i.value && i.required) {
+                            res.push(`${i.label}不可为空`);
+                        }
+                    });
+                }
 
-        settings.forEach((i) => {
-          if (!i.value && i.required) {
-            res.push(`${i.label}不可为空`);
-          }
-        });
-      });
+                settings.forEach((i) => {
+                    if (!i.value && i.required) {
+                        res.push(`${i.label}不可为空`);
+                    }
+                });
+            });
 
-      return res;
-    },
-    saveAll(cb) {
-      let saveContent = [],
-        data = toRaw(this.jobData);
-      const tips = this.checkPostData(data);
-      if (tips.length > 0) {
-        return notification["warning"]({
-          message: "任务信息未完整填写",
-          description: h(
-            "ul",
-            {},
-            tips.map((tip) => h("li", {}, tip))
-          ),
-          duration: 5,
-        });
-      }
-      if (!data.content || !data.content.subJobs) {
-        return message.error("缺失保存对象");
-      }
-      for (let i = 0; i < data.content.subJobs.length; i++) {
-        const jobData = toRaw(data.content.subJobs[i]);
-        let cur = {};
-        cur.subJobName = jobData.subJobName;
-        if (
-          !jobData.dataSourceIds ||
-          objectValueEmpty(jobData.dataSourceIds.source) ||
-          objectValueEmpty(jobData.dataSourceIds.sink)
-        ) {
-          return message.error("未选择数据源库表");
-        }
-        cur.dataSources = {
-          source_id: `${jobData.dataSourceIds.source.type}.${jobData.dataSourceIds.source.id}.${jobData.dataSourceIds.source.db}.${jobData.dataSourceIds.source.table}`,
-          sink_id: `${jobData.dataSourceIds.sink.type}.${jobData.dataSourceIds.sink.id}.${jobData.dataSourceIds.sink.db}.${jobData.dataSourceIds.sink.table}`,
-        };
-        /*if (
+            return res;
+        },
+        saveAll(cb) {
+            const saveContent = [];
+            const data = toRaw(this.jobData);
+            const tips = this.checkPostData(data);
+            if (tips.length > 0) {
+                return notification.warning({
+                    message: '任务信息未完整填写',
+                    description: h(
+                        'ul',
+                        {},
+                        tips.map(tip => h('li', {}, tip))
+                    ),
+                    duration: 5
+                });
+            }
+            if (!data.content || !data.content.subJobs) {
+                return message.error('缺失保存对象');
+            }
+            for (let i = 0; i < data.content.subJobs.length; i++) {
+                const jobData = toRaw(data.content.subJobs[i]);
+                const cur = {};
+                cur.subJobName = jobData.subJobName;
+                if (
+                    !jobData.dataSourceIds
+                    || objectValueEmpty(jobData.dataSourceIds.source)
+                    || objectValueEmpty(jobData.dataSourceIds.sink)
+                ) {
+                    return message.error('未选择数据源库表');
+                }
+                cur.dataSources = {
+                    source_id: `${jobData.dataSourceIds.source.type}.${jobData.dataSourceIds.source.id}.${jobData.dataSourceIds.source.db}.${jobData.dataSourceIds.source.table}`,
+                    sink_id: `${jobData.dataSourceIds.sink.type}.${jobData.dataSourceIds.sink.id}.${jobData.dataSourceIds.sink.db}.${jobData.dataSourceIds.sink.table}`
+                };
+                /* if (
           !jobData.params ||
           !jobData.params.sources.length ||
           !jobData.params.sinks.length
         ) {
           return message.error("缺失数据源参数");
-        }*/
-        cur.params = {
-          sources: [],
-          sinks: [],
-        };
-        jobData.params.sources.forEach((source) => {
-          cur.params.sources.push({
-            config_key: source.field, // UI中field
-            config_name: source.label, // UI中label
-            config_value: source.value, // UI中value
-            sort: source.sort,
-          });
-        });
-        jobData.params.sinks.forEach((source) => {
-          cur.params.sinks.push({
-            config_key: source.field, // UI中field
-            config_name: source.label, // UI中label
-            config_value: source.value, // UI中value
-            sort: source.sort,
-          });
-        });
-        cur.transforms = jobData.transforms;
-        cur.transforms.addEnable = this.addEnable
-        cur.settings = [];
-        if (jobData.settings && jobData.settings.length) {
-          jobData.settings.forEach((setting) => {
-            cur.settings.push({
-              config_key: setting.field, // UI中field
-              config_name: setting.label, // UI中label
-              config_value: setting.value, // UI中value
-              sort: setting.sort,
+        } */
+                cur.params = {
+                    sources: [],
+                    sinks: []
+                };
+                jobData.params.sources.forEach((source) => {
+                    cur.params.sources.push({
+                        config_key: source.field, // UI中field
+                        config_name: source.label, // UI中label
+                        config_value: source.value, // UI中value
+                        sort: source.sort
+                    });
+                });
+                jobData.params.sinks.forEach((source) => {
+                    cur.params.sinks.push({
+                        config_key: source.field, // UI中field
+                        config_name: source.label, // UI中label
+                        config_value: source.value, // UI中value
+                        sort: source.sort
+                    });
+                });
+                cur.transforms = jobData.transforms;
+                cur.transforms.addEnable = this.addEnable;
+                cur.settings = [];
+                if (jobData.settings && jobData.settings.length) {
+                    jobData.settings.forEach((setting) => {
+                        cur.settings.push({
+                            config_key: setting.field, // UI中field
+                            config_name: setting.label, // UI中label
+                            config_value: setting.value, // UI中value
+                            sort: setting.sort
+                        });
+                    });
+                }
+                saveContent.push(cur);
+            }
+            saveProject(this.jobData.id, {
+                content: JSON.stringify(saveContent)
+            }).then((res) => {
+                cb && cb();
+                message.success('保存成功');
             });
-          });
-        }
-        saveContent.push(cur);
-      }
-      saveProject(this.jobData.id, {
-        content: JSON.stringify(saveContent)
-      }).then((res) => {
-        cb && cb()
-        message.success("保存成功");
-      });
-    },
-    // 执行任务
-    executeTask() {
-      this.saveAll(() => {
-        const { id } = this.curTab;
-        this.tasklist = []
-        this.spinning = true
-        executeJob(id)
-          .then((res) => {
-            this.jobExecutionId = res.jobExecutionId
-            this.visibleLog = true
-            moveUpDown('.jd-bottom-log', '.jd-container', '.jd-bottom-log-top')
-            this.getStatus(res.jobExecutionId)
-
-            // 新增执行历史
-            this.ehTableData.push({
-              jobExecutionId : this.jobExecutionId,
-              createTime: new Date().getTime(),
-              status: '',
-              key: this.ehTableData.length + 1
-            })
-          })
-          .catch((err) => {
-            console.log(err)
-            this.spinning = false
-            message.error("执行失败")
-          });
-      })
-    },
-    killTask() {
-      if (!this.jobStatus) {
-        return message.error("正在等待")
-      }
-      killJob(this.jobExecutionId)
-        .then((res) => {
-          this.spinning = false
-          clearInterval(this.jobStatusTimer)
-          clearInterval(this.progressTimer)
-          //this.visibleLog = false
+        },
+        // 执行任务
+        executeTask() {
+            this.saveAll(() => {
+                const { id } = this.curTab;
+                this.tasklist = [];
+                this.spinning = true;
+                executeJob(id)
+                    .then((res) => {
+                        this.jobExecutionId = res.jobExecutionId;
+                        this.visibleLog = true;
+                        moveUpDown('.jd-bottom-log', '.jd-container', '.jd-bottom-log-top');
+                        this.getStatus(res.jobExecutionId);
 
-          // 更新执行历史状态
-          for (let i = this.ehTableData.length; i > 0; i--) {
-            let cur = this.ehTableData[i - 1]
-            if (cur.jobExecutionId === this.jobExecutionId) {
-              cur.status = 'Cancelled'
-              break
+                        // 新增执行历史
+                        this.ehTableData.push({
+                            jobExecutionId: this.jobExecutionId,
+                            createTime: new Date().getTime(),
+                            status: '',
+                            key: this.ehTableData.length + 1
+                        });
+                    })
+                    .catch((err) => {
+                        console.log(err);
+                        this.spinning = false;
+                        message.error('执行失败');
+                    });
+            });
+        },
+        killTask() {
+            if (!this.jobStatus) {
+                return message.error('正在等待');
             }
-          }
-        })
-        .catch((err) => {
-          console.log(err)
-          this.spinning = false
-          message.error("停止失败");
-        });
-    },
-    // 获取Job状态
-    getStatus(jobExecutionId) {
-      this.getStatusInvoke(jobExecutionId)
-      this.jobStatusTimer = setInterval(() => {
-        this.getStatusInvoke(jobExecutionId)
-      }, 1000*5)
-    },
-    getStatusInvoke(jobExecutionId) {
-      const unfinishedStatusList = ['Inited', 'Scheduled', 'Running', 'WaitForRetry']
-      getJobStatus(jobExecutionId)
-        .then(res => {
-          this.jobStatus = res.status
-          this.allTaskStatus = res.allTaskStatus
+            killJob(this.jobExecutionId)
+                .then((res) => {
+                    this.spinning = false;
+                    clearInterval(this.jobStatusTimer);
+                    clearInterval(this.progressTimer);
+                    // this.visibleLog = false
 
-          // 更新执行历史状态
-          for (let i = this.ehTableData.length; i > 0; i--) {
-            let cur = this.ehTableData[i - 1]
-            if (cur.jobExecutionId === jobExecutionId) {
-              cur.status = res.status
-              break
-            }
-          }
+                    // 更新执行历史状态
+                    for (let i = this.ehTableData.length; i > 0; i--) {
+                        const cur = this.ehTableData[i - 1];
+                        if (cur.jobExecutionId === this.jobExecutionId) {
+                            cur.status = 'Cancelled';
+                            break;
+                        }
+                    }
+                })
+                .catch((err) => {
+                    console.log(err);
+                    this.spinning = false;
+                    message.error('停止失败');
+                });
+        },
+        // 获取Job状态
+        getStatus(jobExecutionId) {
+            this.getStatusInvoke(jobExecutionId);
+            this.jobStatusTimer = setInterval(() => {
+                this.getStatusInvoke(jobExecutionId);
+            }, 1000 * 5);
+        },
+        getStatusInvoke(jobExecutionId) {
+            const unfinishedStatusList = ['Inited', 'Scheduled', 'Running', 'WaitForRetry'];
+            getJobStatus(jobExecutionId)
+                .then((res) => {
+                    this.jobStatus = res.status;
+                    this.allTaskStatus = res.allTaskStatus;
 
-          if (!this.tasklist.length) {
-            this.getTasks(jobExecutionId, true)
-          }
-          if (unfinishedStatusList.indexOf(this.jobStatus) === -1 && this.allTaskStatus) {
-            this.spinning = false
-            clearInterval(this.jobStatusTimer)
-            setTimeout(() => {
-              clearInterval(this.progressTimer)
-            }, 1000*5)
-          }
-        })
-        .catch(err => {
-          message.error("查询job状态失败");
-        })
-    },
-    // 获取tasklist
-    getTasks(jobExecutionId, shouldGetJobProgress) {
-      getJobTasks(jobExecutionId)
-        .then(res => {
-          this.tasklist = res.tasks
-          if (shouldGetJobProgress)
-            this.getJobProgress(jobExecutionId)
-        })
-        .catch(err => {
-          message.error("查询任务列表失败");
-        })
-    },
-    getJobProgress(jobExecutionId) {
-      this.getJobProgressInvoke(jobExecutionId)
-      clearInterval(this.progressTimer)
-      this.progressTimer = setInterval(() => {
-        this.getJobProgressInvoke(jobExecutionId)
-      }, 1000*5)
-    },
-    getJobProgressInvoke(jobExecutionId) {
-      getProgress(jobExecutionId)
-        .then(res => {
-          if (res.job && res.job.tasks) {
-            res.job.successTasks = res.job.tasks.Success?.length || 0
-            res.job.initedTasks = res.job.tasks.Inited?.length || 0
-            res.job.runningTasks = res.job.tasks.Running?.length || 0
-            res.job.failedTasks = res.job.tasks.Failed?.length || 0
-            res.job.cancelledTasks = res.job.tasks.Cancelled?.length || 0
-            res.job.scheduledTasks = res.job.tasks.Scheduled?.length || 0
+                    // 更新执行历史状态
+                    for (let i = this.ehTableData.length; i > 0; i--) {
+                        const cur = this.ehTableData[i - 1];
+                        if (cur.jobExecutionId === jobExecutionId) {
+                            cur.status = res.status;
+                            break;
+                        }
+                    }
+
+                    if (!this.tasklist.length) {
+                        this.getTasks(jobExecutionId, true);
+                    }
+                    if (unfinishedStatusList.indexOf(this.jobStatus) === -1 && this.allTaskStatus) {
+                        this.spinning = false;
+                        clearInterval(this.jobStatusTimer);
+                        setTimeout(() => {
+                            clearInterval(this.progressTimer);
+                        }, 1000 * 5);
+                    }
+                })
+                .catch((err) => {
+                    message.error('查询job状态失败');
+                });
+        },
+        // 获取tasklist
+        getTasks(jobExecutionId, shouldGetJobProgress) {
+            getJobTasks(jobExecutionId)
+                .then((res) => {
+                    this.tasklist = res.tasks;
+                    if (shouldGetJobProgress) this.getJobProgress(jobExecutionId);
+                })
+                .catch((err) => {
+                    message.error('查询任务列表失败');
+                });
+        },
+        getJobProgress(jobExecutionId) {
+            this.getJobProgressInvoke(jobExecutionId);
+            clearInterval(this.progressTimer);
+            this.progressTimer = setInterval(() => {
+                this.getJobProgressInvoke(jobExecutionId);
+            }, 1000 * 5);
+        },
+        getJobProgressInvoke(jobExecutionId) {
+            getProgress(jobExecutionId)
+                .then((res) => {
+                    if (res.job && res.job.tasks) {
+                        res.job.successTasks = res.job.tasks.Success?.length || 0;
+                        res.job.initedTasks = res.job.tasks.Inited?.length || 0;
+                        res.job.runningTasks = res.job.tasks.Running?.length || 0;
+                        res.job.failedTasks = res.job.tasks.Failed?.length || 0;
+                        res.job.cancelledTasks = res.job.tasks.Cancelled?.length || 0;
+                        res.job.scheduledTasks = res.job.tasks.Scheduled?.length || 0;
 
-            res.job.totalTasks = this.tasklist.length
-            if (res.job.total && res.job.total !== this.tasklist.length) {
-              res.job.totalTasks = res.job.total
-              this.getTasks(jobExecutionId)
+                        res.job.totalTasks = this.tasklist.length;
+                        if (res.job.total && res.job.total !== this.tasklist.length) {
+                            res.job.totalTasks = res.job.total;
+                            this.getTasks(jobExecutionId);
+                        }
+                        res.job.successPercent = res.job.successTasks * 100 / res.job.totalTasks;
+                        res.job.percent = res.job.progress * 100; // (res.job.successTasks + res.job.runningTasks) * 100 / res.job.totalTasks
+                        res.job.title = res.job.failedTasks ? `${res.job.failedTasks}失败,${res.job.successTasks}成功,${res.job.runningTasks}正在运行,${res.job.scheduledTasks}正在准备` : `${res.job.successTasks}成功,${res.job.runningTasks}正在运行,${res.job.scheduledTasks}正在准备`;
+                    }
+                    this.jobProgress = res.job;
+                })
+                .catch((err) => {
+                    message.error('查询进度失败');
+                });
+        },
+        getTaskInfo(progress) {
+            if (this.openMetricsId !== progress.taskId) {
+                this.openMetricsId = progress.taskId;
+                getMetrics(progress.taskId, this.jobExecutionId)
+                    .then((res) => {
+                        res.task.taskId = progress.taskId;
+                        this.metricsInfo[res.task.taskId] = res.task?.metrics;
+                    })
+                    .catch((err) => {
+                        message.error('查询任务指标失败');
+                    });
+            } else {
+                this.openMetricsId = '';
             }
-            res.job.successPercent = res.job.successTasks * 100 / res.job.totalTasks
-            res.job.percent = res.job.progress * 100 //(res.job.successTasks + res.job.runningTasks) * 100 / res.job.totalTasks
-            res.job.title = res.job.failedTasks ? `${res.job.failedTasks}失败,${res.job.successTasks}成功,${res.job.runningTasks}正在运行,${res.job.scheduledTasks}正在准备` : `${res.job.successTasks}成功,${res.job.runningTasks}正在运行,${res.job.scheduledTasks}正在准备`
-          }
-          this.jobProgress = res.job
-        })
-        .catch(err => {
-          message.error("查询进度失败");
-        })
-    },
-    getTaskInfo(progress) {
-      if (this.openMetricsId !== progress.taskId) {
-        this.openMetricsId = progress.taskId
-        getMetrics(progress.taskId, this.jobExecutionId)
-          .then(res => {
-            res.task.taskId = progress.taskId
-            this.metricsInfo[res.task.taskId] = res.task?.metrics
-          })
-          .catch(err => {
-            message.error("查询任务指标失败");
-          })
-      } else {
-        this.openMetricsId = ''
-      }
-    },
+        },
 
-    executeHistory() {
-      this.visibleLog = true;
-      this.activeKey = "3"
-    },
-    getTableFormCurrent(current, type) {
-      let _this = this;
-      if (
-        _this.ehTableData.length == _this.ehPagination.total &&
-        _this.ehPagination.total > 0 &&
-        type !== "search"
-      )
-        return;
-      if (_this.currentPage == current && type !== "search") return;
-      let jobId = _this.curTab.id || "";
-      let _pageSize = _this.pageSize;
-      getSyncHistory({ jobId, current, size: _pageSize })
-        .then((res) => {
-          if (res.result.length > 0) {
-            const result = res.result || [];
-            result.forEach((item) => {
-              item["launchTime"] = formatDate(item["launchTime"]);
-              item["completeTime"] = formatDate(item["completeTime"]);
-              switch (item["status"]) {
-                case "SUCCESS":
-                  item["status"] = "执行成功";
-                  break;
-                case "FAILED":
-                  item["status"] = "执行失败";
-                  break;
-                case "RUNNING":
-                  item["status"] = "运行中";
-              }
-              item["key"] = item["id"];
+        executeHistory() {
+            this.visibleLog = true;
+            this.activeKey = '3';
+        },
+        getTableFormCurrent(current, type) {
+            const _this = this;
+            if (
+                _this.ehTableData.length == _this.ehPagination.total
+                && _this.ehPagination.total > 0
+                && type !== 'search'
+            ) return;
+            if (_this.currentPage == current && type !== 'search') return;
+            const jobId = _this.curTab.id || '';
+            const _pageSize = _this.pageSize;
+            getSyncHistory({ jobId, current, size: _pageSize })
+                .then((res) => {
+                    if (res.result.length > 0) {
+                        const result = res.result || [];
+                        result.forEach((item) => {
+                            item.launchTime = formatDate(item.launchTime);
+                            item.completeTime = formatDate(item.completeTime);
+                            switch (item.status) {
+                                case 'SUCCESS':
+                                    item.status = '执行成功';
+                                    break;
+                                case 'FAILED':
+                                    item.status = '执行失败';
+                                    break;
+                                case 'RUNNING':
+                                    item.status = '运行中';
+                            }
+                            item.key = item.id;
+                        });
+                        if (type == 'search') {
+                            _this.TableData = [];
+                        }
+                        _this.ehPagination.total = res.total;
+                        _this.ehTableData = _this.ehTableData.concat(result);
+                    }
+                })
+                .catch((err) => {
+                    console.log('syncHistory error', err);
+                });
+        },
+        onPageChange(page) {
+            const { current } = page;
+            this.getTableFormCurrent(current, 'onChange');
+        },
+        onCloseDrawer() {
+            this.visibleDrawer = false;
+        },
+        onCloseLog() {
+            // clearInterval(this.jobStatusTimer)
+            clearInterval(this.progressTimer);
+            this.visibleLog = false;
+        },
+        getEditableInput() {
+            this.nameEditable = true;
+            this.$nextTick(() => {
+                if (this.$refs.currentInput && this.$refs.currentInput.focus) {
+                    this.$refs.currentInput.focus();
+                }
             });
-            if (type == "search") {
-              _this.TableData = [];
-            }
-            _this.ehPagination.total = res["total"];
-            _this.ehTableData = _this.ehTableData.concat(result);
-          }
-        })
-        .catch((err) => {
-          console.log("syncHistory error", err);
-        });
-    },
-    onPageChange(page) {
-      const { current } = page;
-      this.getTableFormCurrent(current, "onChange");
-    },
-    onCloseDrawer() {
-      this.visibleDrawer = false;
-    },
-    onCloseLog() {
-      //clearInterval(this.jobStatusTimer)
-      clearInterval(this.progressTimer)
-      this.visibleLog = false;
-    },
-    getEditableInput() {
-      this.nameEditable = true
-      this.$nextTick(() => {
-        if (this.$refs.currentInput && this.$refs.currentInput.focus) {
-          this.$refs.currentInput.focus()
         }
-      })
     }
-  },
-  beforeUnmount() {
-    clearInterval(this.jobStatusTimer)
-    clearInterval(this.progressTimer)
-  }
 };
 </script>
 <style scoped lang="less">
diff --git a/web/src/pages/jobManagement/components/jobDetail.vue b/web/src/pages/jobManagement/components/jobDetail.vue
index f3134013a..25f64a420 100644
--- a/web/src/pages/jobManagement/components/jobDetail.vue
+++ b/web/src/pages/jobManagement/components/jobDetail.vue
@@ -1,115 +1,111 @@
 <template>
-  <div class="container jd-container">
-    <div class="tools-bar">
-      <span @click="modalCfg.visible = true"><SettingOutlined />配置</span>
-      <div class="divider"></div>
-      <span @click="executeTask" v-if="!spinning"><CaretRightOutlined />执行</span>
-      <a-popconfirm
-        v-else
-        title="是否终止?"
-        ok-text="确定"
-        cancel-text="取消"
-        @confirm="killTask"
-        @cancel="cancel"
-      >
-        <span><StopFilled style="color:#ff4d4f" />停止</span>
-      </a-popconfirm>
-      <div class="divider"></div>
-      <span @click="saveAll()"><SaveOutlined />保存</span>
-      <div class="divider"></div>
-      <span @click="executeHistory"><HistoryOutlined />执行历史</span>
-    </div>
-    <div class="jd-content" v-if="list.length !== 0">
-      <a-spin size="large" :spinning="loading" wrapperClassName="wrap-spin">
-        <div class="jd_left">
-          <div class="left-wrap">
-            <div class="sub-title">
-              <span>子任务列表</span>
-            </div>
-            <div v-for="(item, idx) in list" :key="idx" :class="getClass(idx)">
-              <div class="task-title">
-                <div
-                  class="subjobName"
-                  v-if="
-                  activeIndex !== idx || (activeIndex === idx && !nameEditable)
-                "
-                  @click="changeCurTask(idx)"
-                  :title="item.subJobName"
-                >
-                  {{ item.subJobName }}
-                </div>
-                <a-input
-                  style="width: 115px"
-                  @pressEnter="nameEditable = false"
-                  @blur="nameEditable = false"
-                  ref="currentInput"
-                  v-model:value="item.subJobName"
-                  v-if="activeIndex === idx && nameEditable"
-                ></a-input>
-                <a-popconfirm
-                  title="是否删除子任务?"
-                  ok-text="确定"
-                  cancel-text="取消"
-                  @confirm="deleteSub(idx)"
-                  @cancel="cancel"
-                >
-                  <DeleteOutlined title="删除" class="delete-icon" />
-                </a-popconfirm>
-                <a-popconfirm
-                  title="是否复制子任务?"
-                  ok-text="确定"
-                  cancel-text="取消"
-                  @confirm="copySub(item)"
-                  @cancel="cancel"
-                >
-                  <CopyOutlined title="复制" class="copy-icon" />
-                </a-popconfirm>
-                <EditOutlined
-                  @click="getEditableInput"
-                  v-if="activeIndex === idx && !nameEditable"
-                  class="rename-icon"
-                />
-              </div>
-              <template
-                v-if="
-                item.dataSourceIds &&
-                item.dataSourceIds.source &&
-                item.dataSourceIds.source.db
-              "
-              >
-                <div
-                  class="sub-table"
-                  @click="changeCurTask(idx)"
-                  :title="
-                  item.dataSourceIds.source.db +
-                  '.' +
-                  item.dataSourceIds.source.table
-                "
-                >
-                  {{
-                  item.dataSourceIds.source.db +
-                  "." +
-                  item.dataSourceIds.source.table
-                  }}
-                </div>
-                <div class="arrow-down-icon" @click="changeCurTask(idx)"><ArrowDownOutlined /></div>
-                <div
-                  class="sub-table"
-                  @click="changeCurTask(idx)"
-                  :title="
-                  item.dataSourceIds.sink.db + '.' + item.dataSourceIds.sink.table
-                "
-                >
-                  {{
-                  item.dataSourceIds.sink.db + "." + item.dataSourceIds.sink.table
-                  }}
-                </div>
-              </template>
-            </div>
-          </div>
-          <a-button
-            size="large"
-            style="
+    <div class="container jd-container">
+        <div class="tools-bar">
+            <span @click="modalCfg.visible = true"><SettingOutlined />配置</span>
+            <div class="divider"></div>
+            <span v-if="!spinning" @click="executeTask"><CaretRightOutlined />执行</span>
+            <a-popconfirm
+                v-else
+                title="是否终止?"
+                ok-text="确定"
+                cancel-text="取消"
+                @confirm="killTask"
+                @cancel="cancel"
+            >
+                <span><StopFilled style="color:#ff4d4f" />停止</span>
+            </a-popconfirm>
+            <div class="divider"></div>
+            <span @click="saveAll()"><SaveOutlined />保存</span>
+            <div class="divider"></div>
+            <span @click="executeHistory"><HistoryOutlined />执行历史</span>
+        </div>
+        <div v-if="list.length !== 0" class="jd-content">
+            <a-spin size="large" :spinning="loading" wrapperClassName="wrap-spin">
+                <div class="jd_left">
+                    <div class="left-wrap">
+                        <div class="sub-title">
+                            <span>子任务列表</span>
+                        </div>
+                        <div v-for="(item, idx) in list" :key="idx" :class="getClass(idx)">
+                            <div class="task-title">
+                                <div
+                                    v-if="
+                                        activeIndex !== idx || (activeIndex === idx && !nameEditable)
+                                    "
+                                    class="subjobName"
+                                    :title="item.subJobName"
+                                    @click="changeCurTask(idx)"
+                                >
+                                    {{item.subJobName}}
+                                </div>
+                                <a-input
+                                    v-if="activeIndex === idx && nameEditable"
+                                    ref="currentInput"
+                                    v-model:value="item.subJobName"
+                                    style="width: 115px"
+                                    @pressEnter="nameEditable = false"
+                                    @blur="nameEditable = false"
+                                ></a-input>
+                                <a-popconfirm
+                                    title="是否删除子任务?"
+                                    ok-text="确定"
+                                    cancel-text="取消"
+                                    @confirm="deleteSub(idx)"
+                                    @cancel="cancel"
+                                >
+                                    <DeleteOutlined title="删除" class="delete-icon" />
+                                </a-popconfirm>
+                                <a-popconfirm
+                                    title="是否复制子任务?"
+                                    ok-text="确定"
+                                    cancel-text="取消"
+                                    @confirm="copySub(item)"
+                                    @cancel="cancel"
+                                >
+                                    <CopyOutlined title="复制" class="copy-icon" />
+                                </a-popconfirm>
+                                <EditOutlined
+                                    v-if="activeIndex === idx && !nameEditable"
+                                    class="rename-icon"
+                                    @click="getEditableInput"
+                                />
+                            </div>
+                            <template
+                                v-if="
+                                    item.dataSourceIds &&
+                                        item.dataSourceIds.source &&
+                                        item.dataSourceIds.source.db
+                                "
+                            >
+                                <div
+                                    class="sub-table"
+                                    :title="
+                                        item.dataSourceIds.source.db +
+                                            '.' +
+                                            item.dataSourceIds.source.table
+                                    "
+                                    @click="changeCurTask(idx)"
+                                >
+                                    {{item.dataSourceIds.source.db +
+                                        "." +
+                                        item.dataSourceIds.source.table}}
+                                </div>
+                                <div class="arrow-down-icon" @click="changeCurTask(idx)"><ArrowDownOutlined /></div>
+                                <div
+                                    class="sub-table"
+                                    :title="
+                                        item.dataSourceIds.sink.db + '.' + item.dataSourceIds.sink.table
+                                    "
+                                    @click="changeCurTask(idx)"
+                                >
+                                    {{item.dataSourceIds.sink.db + "." + item.dataSourceIds.sink.table}}
+                                </div>
+                            </template>
+                        </div>
+                    </div>
+                    <a-button
+                        size="large"
+                        style="
               width: 218px;
               font-family: PingFangSC-Regular;
               font-size: 14px;
@@ -118,84 +114,83 @@
               border: 1px dashed #dee4ec;
               margin: 0 15px;
             "
-            @click="addNewTask"
-          >
-            <template #icon> <PlusOutlined /></template>添加子任务
-          </a-button>
-        </div>
-        <div class="jd_right">
-        <div>
-          <DataSource
-            v-if="curTask"
-            v-bind:dsData="curTask"
-            v-bind:engineType="curTask.engineType"
-            @updateSourceInfo="updateSourceInfo"
-            @updateSinkInfo="updateSinkInfo"
-            @updateSourceParams="updateSourceParams"
-            @updateSinkParams="updateSinkParams"
-          />
-        </div>
-        <div>
-          <FieldMap
-            v-if="curTask"
-            v-bind:fmData="curTask.transforms"
-            v-bind:fieldsSink="fieldsSink"
-            v-bind:fieldsSource="fieldsSource"
-            v-bind:deductions="deductions"
-            v-bind:addEnabled="addEnable"
-            v-bind:engineType="curTask.engineType"
-            @updateFieldMap="updateFieldMap"
-          />
-        </div>
-        <div>
-          <ProcessControl
-            v-if="curTask"
-            v-bind:psData="curTask.settings"
-            v-bind:engineType="curTask.engineType"
-            @updateProcessControl="updateProcessControl"
-          />
+                        @click="addNewTask"
+                    >
+                        <template #icon> <PlusOutlined /></template>添加子任务
+                    </a-button>
+                </div>
+                <div class="jd_right">
+                    <div>
+                        <DataSource
+                            v-if="curTask"
+                            v-bind:dsData="curTask"
+                            v-bind:engineType="curTask.engineType"
+                            @updateSourceInfo="updateSourceInfo"
+                            @updateSinkInfo="updateSinkInfo"
+                            @updateSourceParams="updateSourceParams"
+                            @updateSinkParams="updateSinkParams"
+                        />
+                    </div>
+                    <div>
+                        <FieldMap
+                            v-if="curTask"
+                            v-bind:fmData="curTask.transforms"
+                            v-bind:fieldsSink="fieldsSink"
+                            v-bind:fieldsSource="fieldsSource"
+                            v-bind:deductions="deductions"
+                            v-bind:addEnabled="addEnable"
+                            v-bind:engineType="curTask.engineType"
+                            @updateFieldMap="updateFieldMap"
+                        />
+                    </div>
+                    <div>
+                        <ProcessControl
+                            v-if="curTask"
+                            v-bind:psData="curTask.settings"
+                            v-bind:engineType="curTask.engineType"
+                            @updateProcessControl="updateProcessControl"
+                        />
+                    </div>
+                </div>
+            </a-spin>
         </div>
-      </div>
-      </a-spin>
-    </div>
-    <div class="cardWrap" v-if="list.length === 0">
-      <a-spin :spinning="loading">
-        <div class="emptyTab">
-        <div class="void-page-wrap">
-          <div class="void-page-main">
-            <div class="void-page-main-img">
-              <img src="../../../assets/img/void_page.png" alt="空页面" />
-            </div>
-            <div class="void-page-main-title">
-              <span>该任务下没有子任务，请先创建一个子任务</span>
-            </div>
-            <div class="void-page-main-button">
-              <a-button
-                type="primary"
-                size="large"
-                style="
+        <div v-if="list.length === 0" class="cardWrap">
+            <a-spin :spinning="loading">
+                <div class="emptyTab">
+                    <div class="void-page-wrap">
+                        <div class="void-page-main">
+                            <div class="void-page-main-img">
+                                <img src="../../../assets/img/void_page.png" alt="空页面" />
+                            </div>
+                            <div class="void-page-main-title">
+                                <span>该任务下没有子任务，请先创建一个子任务</span>
+                            </div>
+                            <div class="void-page-main-button">
+                                <a-button
+                                    type="primary"
+                                    size="large"
+                                    style="
                   font-family: PingFangSC-Regular;
                   font-size: 14px;
                   line-height: 22px;
                   font-weight: 400;
                 "
-                @click="addNewTask"
-              >
-                <template #icon> <PlusOutlined /></template
-                >{{ t("job.action.createJob") }}
-              </a-button>
-            </div>
-          </div>
+                                    @click="addNewTask"
+                                >
+                                    <template #icon> <PlusOutlined /></template>{{t("job.action.createJob")}}
+                                </a-button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </a-spin>
         </div>
-      </div>
-      </a-spin>
-    </div>
-    <!-- 执行历史  jd-bottom -->
-    <div class="jd-bottom" v-show="visibleDrawer">
-      <div class="jd-bottom-top" >
-        <span>执行历史</span>
-        <CloseOutlined
-          style="
+        <!-- 执行历史  jd-bottom -->
+        <div v-show="visibleDrawer" class="jd-bottom">
+            <div class="jd-bottom-top">
+                <span>执行历史</span>
+                <CloseOutlined
+                    style="
             color: rgba(0, 0, 0, 0.45);
             font-size: 12px;
             position: absolute;
@@ -203,26 +198,26 @@
             top: 18px;
             cursor: pointer;
           "
-          @click="onCloseDrawer"
-        />
-      </div>
-      <div class="jd-bottom-content">
-        <a-table
-          :columns="ehColumns"
-          :data-source="ehTableData"
-          :pagination="ehPagination"
-          @change="onPageChange"
-        >
-        </a-table>
-      </div>
-    </div>
+                    @click="onCloseDrawer"
+                />
+            </div>
+            <div class="jd-bottom-content">
+                <a-table
+                    :columns="ehColumns"
+                    :data-source="ehTableData"
+                    :pagination="ehPagination"
+                    @change="onPageChange"
+                >
+                </a-table>
+            </div>
+        </div>
 
-    <!-- 执行日志  jd-bottom -->
-    <div class="jd-bottom jd-bottom-log" v-show="visibleLog">
-      <div class="jd-bottom-top jd-bottom-log-top" >
-        <!--<span>执行日志</span>-->
-        <CloseOutlined
-          style="
+        <!-- 执行日志  jd-bottom -->
+        <div v-show="visibleLog" class="jd-bottom jd-bottom-log">
+            <div class="jd-bottom-top jd-bottom-log-top">
+                <!--<span>执行日志</span>-->
+                <CloseOutlined
+                    style="
             color: rgba(0, 0, 0, 0.45);
             font-size: 12px;
             position: absolute;
@@ -230,940 +225,934 @@
             top: 18px;
             cursor: pointer;
           "
-          @click="onCloseLog"
-        />
-      </div>
-      <div class="jd-bottom-content log-bottom-content">
-        <a-tabs v-model:activeKey="activeKey" class="exec-info-tab">
-          <a-tab-pane key="1" tab="运行情况">
-            <div v-if="jobProgress.tasks" class="job-progress-percent job-progress-wrap">
-              <span>总进度<span style="font-size: 11px;color:rgba(0,0,0,0.5)">({{statusMap[jobStatus]}})</span></span>
-              <a-tooltip :title="jobProgress.title">
-                <a-progress v-if="jobProgress.failedTasks" :percent="jobProgress.percent" status="exception"/>
-                <a-progress v-else :percent="jobProgress.percent"/>
-              </a-tooltip>
-            </div>
-            <div v-if="jobProgress.tasks && jobProgress.tasks.Running" class="job-progress-wrap">
-              <span class="job-progress-title">正在运行</span>
-              <div class="job-progress-body">
-                <div class="job-progress-percent" v-for="(progress, index) in jobProgress.tasks.Running">
-                  <span class="job-progress-expand-icon" @click="getTaskInfo(progress)">
-                    <RightOutlined v-if="openMetricsId !== progress.taskId" />
-                    <DownOutlined v-else/>
-                  </span>
-                  <span :title="progress.name" style="color:#2e92f7;cursor: pointer;" @click="getTaskInfo(progress)">{{ progress.name }}</span>
-                  <a-progress :percent="progress.progress * 100" />
-                  <metrics :metricsInfo="metricsInfo" :progress="progress" v-if="openMetricsId === progress.taskId && metricsInfo[progress.taskId]" style="margin-left: 100px"></metrics>
-                </div>
-              </div>
-            </div>
-            <div v-if="jobProgress.tasks && jobProgress.tasks.Scheduled" class="job-progress-wrap">
-              <span class="job-progress-title">准备中</span>
-              <div class="job-progress-body">
-                <div class="job-progress-percent" v-for="(progress, index) in jobProgress.tasks.Scheduled">
-                  <span :title="progress.name">{{ progress.name }}</span><a-progress :percent="0" />
-                </div>
-              </div>
-            </div>
-            <div v-if="jobProgress.tasks && jobProgress.tasks.Inited" class="job-progress-wrap">
-              <span class="job-progress-title">初始化</span>
-              <div class="job-progress-body">
-                <div class="job-progress-percent" v-for="(progress, index) in jobProgress.tasks.Inited">
-                  <span :title="progress.name">{{ progress.name }}</span><a-progress :percent="0" />
-                </div>
-              </div>
-            </div>
-            <div v-if="jobProgress.tasks && jobProgress.tasks.Failed" class="job-progress-wrap">
-              <span class="job-progress-title" style="color:#ff4d4f">失败</span>
-              <div class="job-progress-body">
-                <div class="job-progress-percent" v-for="(progress, index) in jobProgress.tasks.Failed">
-                  <span class="job-progress-expand-icon" @click="getTaskInfo(progress)">
-                    <RightOutlined v-if="openMetricsId !== progress.taskId" />
-                    <DownOutlined v-else/>
-                  </span>
-                  <span :title="progress.name" style="color:#2e92f7;cursor: pointer" @click="getTaskInfo(progress)">{{ progress.name }}</span>
-                  <a-progress :percent="progress.progress * 100" />
-                  <metrics :metricsInfo="metricsInfo" :progress="progress" v-if="openMetricsId === progress.taskId && metricsInfo[progress.taskId]" style="margin-left: 100px"></metrics>
-                </div>
-              </div>
-            </div>
-            <div v-if="jobProgress.tasks && jobProgress.tasks.Cancelled" class="job-progress-wrap">
-              <span class="job-progress-title" style="color:#ff4d4f">终止</span>
-              <div class="job-progress-body">
-                <div class="job-progress-percent" v-for="(progress, index) in jobProgress.tasks.Cancelled">
-                  <span class="job-progress-expand-icon" @click="getTaskInfo(progress)">
-                    <RightOutlined v-if="openMetricsId !== progress.taskId" />
-                    <DownOutlined v-else/>
-                  </span>
-                  <span :title="progress.name" style="color:#2e92f7;cursor: pointer" @click="getTaskInfo(progress)">{{ progress.name }}</span>
-                  <a-progress :percent="progress.progress * 100" />
-                  <metrics :metricsInfo="metricsInfo" :progress="progress" v-if="openMetricsId === progress.taskId && metricsInfo[progress.taskId]" style="margin-left: 100px"></metrics>
-                </div>
-              </div>
+                    @click="onCloseLog"
+                />
             </div>
-            <div v-if="jobProgress.tasks && jobProgress.tasks.Success" class="job-progress-wrap">
-              <span class="job-progress-title">成功</span>
-              <div class="job-progress-body">
-                <div class="job-progress-percent" v-for="(progress, index) in jobProgress.tasks.Success">
-                  <span class="job-progress-expand-icon" @click="getTaskInfo(progress)">
-                    <RightOutlined v-if="openMetricsId !== progress.taskId" />
-                    <DownOutlined v-else/>
-                  </span>
-                  <span :title="progress.name" style="color:#2e92f7;cursor: pointer" @click="getTaskInfo(progress)">{{ progress.name }}</span>
-                  <a-progress :percent="progress.progress * 100" />
-                  <metrics :metricsInfo="metricsInfo" :progress="progress" v-if="openMetricsId === progress.taskId && metricsInfo[progress.taskId]" style="margin-left: 100px"></metrics>
-                </div>
-              </div>
+            <div class="jd-bottom-content log-bottom-content">
+                <a-tabs v-model:activeKey="activeKey" class="exec-info-tab">
+                    <a-tab-pane key="1" tab="运行情况">
+                        <div v-if="jobProgress.tasks" class="job-progress-percent job-progress-wrap">
+                            <span>总进度<span style="font-size: 11px;color:rgba(0,0,0,0.5)">({{statusMap[jobStatus]}})</span></span>
+                            <a-tooltip :title="jobProgress.title">
+                                <a-progress v-if="jobProgress.failedTasks" :percent="jobProgress.percent" status="exception" />
+                                <a-progress v-else :percent="jobProgress.percent" />
+                            </a-tooltip>
+                        </div>
+                        <div v-if="jobProgress.tasks && jobProgress.tasks.Running" class="job-progress-wrap">
+                            <span class="job-progress-title">正在运行</span>
+                            <div class="job-progress-body">
+                                <div v-for="(progress, index) in jobProgress.tasks.Running" class="job-progress-percent">
+                                    <span class="job-progress-expand-icon" @click="getTaskInfo(progress)">
+                                        <RightOutlined v-if="openMetricsId !== progress.taskId" />
+                                        <DownOutlined v-else />
+                                    </span>
+                                    <span :title="progress.name" style="color:#2e92f7;cursor: pointer;" @click="getTaskInfo(progress)">{{progress.name}}</span>
+                                    <a-progress :percent="progress.progress * 100" />
+                                    <metrics v-if="openMetricsId === progress.taskId && metricsInfo[progress.taskId]" :metricsInfo="metricsInfo" :progress="progress" style="margin-left: 100px"></metrics>
+                                </div>
+                            </div>
+                        </div>
+                        <div v-if="jobProgress.tasks && jobProgress.tasks.Scheduled" class="job-progress-wrap">
+                            <span class="job-progress-title">准备中</span>
+                            <div class="job-progress-body">
+                                <div v-for="(progress, index) in jobProgress.tasks.Scheduled" class="job-progress-percent">
+                                    <span :title="progress.name">{{progress.name}}</span><a-progress :percent="0" />
+                                </div>
+                            </div>
+                        </div>
+                        <div v-if="jobProgress.tasks && jobProgress.tasks.Inited" class="job-progress-wrap">
+                            <span class="job-progress-title">初始化</span>
+                            <div class="job-progress-body">
+                                <div v-for="(progress, index) in jobProgress.tasks.Inited" class="job-progress-percent">
+                                    <span :title="progress.name">{{progress.name}}</span><a-progress :percent="0" />
+                                </div>
+                            </div>
+                        </div>
+                        <div v-if="jobProgress.tasks && jobProgress.tasks.Failed" class="job-progress-wrap">
+                            <span class="job-progress-title" style="color:#ff4d4f">失败</span>
+                            <div class="job-progress-body">
+                                <div v-for="(progress, index) in jobProgress.tasks.Failed" class="job-progress-percent">
+                                    <span class="job-progress-expand-icon" @click="getTaskInfo(progress)">
+                                        <RightOutlined v-if="openMetricsId !== progress.taskId" />
+                                        <DownOutlined v-else />
+                                    </span>
+                                    <span :title="progress.name" style="color:#2e92f7;cursor: pointer" @click="getTaskInfo(progress)">{{progress.name}}</span>
+                                    <a-progress :percent="progress.progress * 100" />
+                                    <metrics v-if="openMetricsId === progress.taskId && metricsInfo[progress.taskId]" :metricsInfo="metricsInfo" :progress="progress" style="margin-left: 100px"></metrics>
+                                </div>
+                            </div>
+                        </div>
+                        <div v-if="jobProgress.tasks && jobProgress.tasks.Cancelled" class="job-progress-wrap">
+                            <span class="job-progress-title" style="color:#ff4d4f">终止</span>
+                            <div class="job-progress-body">
+                                <div v-for="(progress, index) in jobProgress.tasks.Cancelled" class="job-progress-percent">
+                                    <span class="job-progress-expand-icon" @click="getTaskInfo(progress)">
+                                        <RightOutlined v-if="openMetricsId !== progress.taskId" />
+                                        <DownOutlined v-else />
+                                    </span>
+                                    <span :title="progress.name" style="color:#2e92f7;cursor: pointer" @click="getTaskInfo(progress)">{{progress.name}}</span>
+                                    <a-progress :percent="progress.progress * 100" />
+                                    <metrics v-if="openMetricsId === progress.taskId && metricsInfo[progress.taskId]" :metricsInfo="metricsInfo" :progress="progress" style="margin-left: 100px"></metrics>
+                                </div>
+                            </div>
+                        </div>
+                        <div v-if="jobProgress.tasks && jobProgress.tasks.Success" class="job-progress-wrap">
+                            <span class="job-progress-title">成功</span>
+                            <div class="job-progress-body">
+                                <div v-for="(progress, index) in jobProgress.tasks.Success" class="job-progress-percent">
+                                    <span class="job-progress-expand-icon" @click="getTaskInfo(progress)">
+                                        <RightOutlined v-if="openMetricsId !== progress.taskId" />
+                                        <DownOutlined v-else />
+                                    </span>
+                                    <span :title="progress.name" style="color:#2e92f7;cursor: pointer" @click="getTaskInfo(progress)">{{progress.name}}</span>
+                                    <a-progress :percent="progress.progress * 100" />
+                                    <metrics v-if="openMetricsId === progress.taskId && metricsInfo[progress.taskId]" :metricsInfo="metricsInfo" :progress="progress" style="margin-left: 100px"></metrics>
+                                </div>
+                            </div>
+                        </div>
+                    </a-tab-pane>
+                    <a-tab-pane key="2" tab="实时日志" force-render>
+                        <execution-log :param="logParams" :isShow="visibleLog"></execution-log>
+                    </a-tab-pane>
+                    <a-tab-pane key="3" tab="执行历史" force-render>
+                        <a-table
+                            style="margin: 0 0 0 24px;"
+                            :columns="ehColumns"
+                            :data-source="ehTableData"
+                            :pagination="false"
+                            :scroll="{ y: 240 }"
+                        >
+                            <template #jobExecutionId="{ record }">
+                                <router-link :to="`/synchronizationHistory?jobExecutionId=${record.jobExecutionId}`">
+                                    {{record.jobExecutionId}}
+                                </router-link>
+                            </template>
+                            <template #status="{ record }">
+                                <span>{{statusMap[record.status]}}</span>
+                            </template>
+                            <template #createTime="{ record }">
+                                <span>{{dateFormat(record.createTime)}}</span>
+                            </template>
+                        </a-table>
+                    </a-tab-pane>
+                </a-tabs>
             </div>
-          </a-tab-pane>
-          <a-tab-pane key="2" tab="实时日志" force-render>
-            <execution-log :param="logParams" :isShow="visibleLog"></execution-log>
-          </a-tab-pane>
-          <a-tab-pane key="3" tab="执行历史" force-render>
-            <a-table
-              style="margin: 0 0 0 24px;"
-              :columns="ehColumns"
-              :data-source="ehTableData"
-              :pagination="false"
-              :scroll="{y:240}"
-            >
-              <template #jobExecutionId="{ record }">
-                <router-link :to="`/synchronizationHistory?jobExecutionId=${record.jobExecutionId}`">
-                  {{record.jobExecutionId}}
-                </router-link>
-              </template>
-              <template #status="{ record }">
-                <span>{{statusMap[record.status]}}</span>
-              </template>
-              <template #createTime="{ record }">
-                <span>{{dateFormat(record.createTime)}}</span>
-              </template>
-            </a-table>
-          </a-tab-pane>
-        </a-tabs>
-      </div>
-    </div>
+        </div>
 
-    <config-modal
-      v-model:visible="modalCfg.visible"
-      :id="modalCfg.id"
-      :formData="configModalData"
-      @finish="handleModalFinish"
-    />
-    <copy-modal
-      v-model:visible="modalCopy.visible"
-      :origin="copyObj"
-      @finish="handleModalCopy"
-    />
-  </div>
+        <config-modal
+            :id="modalCfg.id"
+            v-model:visible="modalCfg.visible"
+            :formData="configModalData"
+            @finish="handleModalFinish"
+        />
+        <copy-modal
+            v-model:visible="modalCopy.visible"
+            :origin="copyObj"
+            @finish="handleModalCopy"
+        />
+    </div>
 </template>
 <script>
-import { toRaw, h, defineAsyncComponent } from "vue";
+import { toRaw, h, defineAsyncComponent } from 'vue';
 import {
-  SettingOutlined,
-  CaretRightOutlined,
-  SaveOutlined,
-  HistoryOutlined,
-  DatabaseFilled,
-  PlusSquareOutlined,
-  CopyOutlined,
-  DeleteOutlined,
-  ArrowDownOutlined,
-  CheckCircleOutlined,
-  EditOutlined,
-  MinusOutlined,
-  PlusOutlined,
-  CloseOutlined,
-  StopFilled,
-  DownOutlined,
-  RightOutlined
-} from "@ant-design/icons-vue";
+    SettingOutlined,
+    CaretRightOutlined,
+    SaveOutlined,
+    HistoryOutlined,
+    DatabaseFilled,
+    PlusSquareOutlined,
+    CopyOutlined,
+    DeleteOutlined,
+    ArrowDownOutlined,
+    CheckCircleOutlined,
+    EditOutlined,
+    MinusOutlined,
+    PlusOutlined,
+    CloseOutlined,
+    StopFilled,
+    DownOutlined,
+    RightOutlined
+} from '@ant-design/icons-vue';
+import { message, notification } from 'ant-design-vue';
+import { useI18n } from '@fesjs/fes';
 import {
-  getJobInfo,
-  saveProject,
-  getSettingsParams,
-  getFields,
-  executeTask,
-  updateTaskConfiguration,
-  getSyncHistory,
-  executeJob,
-  getLogs,
-  getJobStatus,
-  getJobTasks,
-  getProgress,
-  getMetrics,
-  killJob
-} from "@/common/service";
-import { message, notification } from "ant-design-vue";
-import { randomString, moveUpDown, dateFormat } from "../../../common/utils";
-import { useI18n } from "@fesjs/fes";
-import executionLog from './executionLog'
-import metrics from './metricsInfo'
+    getJobInfo,
+    saveProject,
+    getSettingsParams,
+    getFields,
+    executeTask,
+    updateTaskConfiguration,
+    getSyncHistory,
+    executeJob,
+    getLogs,
+    getJobStatus,
+    getJobTasks,
+    getProgress,
+    getMetrics,
+    killJob
+} from '@/common/service';
+import { randomString, moveUpDown, dateFormat } from '../../../common/utils';
+import executionLog from './executionLog';
+import metrics from './metricsInfo';
 
 /**
  * 用于判断一个对象是否有空 value,如果有返回 true
  */
 const objectValueEmpty = (obj) => {
-  let isEmpty = false;
-  Object.keys(obj).forEach((o) => {
-    if (obj[o] == null || obj[o] == "" || obj[o] == undefined) {
-      isEmpty = true;
-    }
-  });
-  return isEmpty;
+    let isEmpty = false;
+    Object.keys(obj).forEach((o) => {
+        if (obj[o] == null || obj[o] == '' || obj[o] == undefined) {
+            isEmpty = true;
+        }
+    });
+    return isEmpty;
 };
 
 const formatDate = (d) => {
-  let date = new Date(d);
-  let YY = date.getFullYear() + "-";
-  let MM =
-    (date.getMonth() + 1 < 10
-      ? "0" + (date.getMonth() + 1)
-      : date.getMonth() + 1) + "-";
-  let DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
-  let hh =
-    (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
-  let mm =
-    (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
-    ":";
-  let ss = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
-  return YY + MM + DD + " " + hh + mm + ss;
+    const date = new Date(d);
+    const YY = `${date.getFullYear()}-`;
+    const MM = `${date.getMonth() + 1 < 10
+        ? `0${date.getMonth() + 1}`
+        : date.getMonth() + 1}-`;
+    const DD = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate();
+    const hh = `${date.getHours() < 10 ? `0${date.getHours()}` : date.getHours()}:`;
+    const mm = `${date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes()
+    }:`;
+    const ss = date.getSeconds() < 10 ? `0${date.getSeconds()}` : date.getSeconds();
+    return `${YY + MM + DD} ${hh}${mm}${ss}`;
 };
 
 const ehColumns = [
-  {
-    title: "编号",
-    dataIndex: "key",
-    align: 'center'
-  },
-  {
-    title: "执行ID",
-    dataIndex: "jobExecutionId",
-    slots: {
-      customRender: "jobExecutionId",
+    {
+        title: '编号',
+        dataIndex: 'key',
+        align: 'center'
     },
-    align: 'center'
-  },
-  {
-    title: "状态",
-    dataIndex: "status",
-    slots: {
-      customRender: "status",
+    {
+        title: '执行ID',
+        dataIndex: 'jobExecutionId',
+        slots: {
+            customRender: 'jobExecutionId'
+        },
+        align: 'center'
     },
-    align: 'center'
-  },
-  {
-    title: "创建时间",
-    dataIndex: "createTime",
-    slots: {
-      customRender: "createTime",
+    {
+        title: '状态',
+        dataIndex: 'status',
+        slots: {
+            customRender: 'status'
+        },
+        align: 'center'
     },
-    align: 'center'
-  }
+    {
+        title: '创建时间',
+        dataIndex: 'createTime',
+        slots: {
+            customRender: 'createTime'
+        },
+        align: 'center'
+    }
 ];
 
 export default {
-  components: {
-    SettingOutlined,
-    CaretRightOutlined,
-    SaveOutlined,
-    HistoryOutlined,
-    DatabaseFilled,
-    PlusSquareOutlined,
-    CopyOutlined,
-    DeleteOutlined,
-    ArrowDownOutlined,
-    CheckCircleOutlined,
-    EditOutlined,
-    PlusOutlined,
-    DownOutlined,
-    RightOutlined,
-    "config-modal": defineAsyncComponent(() => import("./configModal.vue")),
-    "copy-modal": defineAsyncComponent(() => import("./copyModal.vue")),
-    DataSource: defineAsyncComponent(() => import("./dataSource.vue")),
-    FieldMap: defineAsyncComponent(() => import("./fieldMap.vue")),
-    ProcessControl: defineAsyncComponent(() => import("./processControl.vue")),
-    MinusOutlined,
-    CloseOutlined,
-    StopFilled,
-    executionLog,
-    metrics
-  },
-  data() {
-    const { t } = useI18n({ useScope: "global" });
-    return {
-      loading: false,
-      name: "",
-      modalCfg: {
-        id: "",
-        visible: false,
-      },
-      modalCopy: {
-        visible: false,
-      },
-      jobData: {},
-      copyObj: {},
-      list: [],
-      activeIndex: -1,
-      curTask: null,
-      nameEditable: false,
+    components: {
+        SettingOutlined,
+        CaretRightOutlined,
+        SaveOutlined,
+        HistoryOutlined,
+        DatabaseFilled,
+        PlusSquareOutlined,
+        CopyOutlined,
+        DeleteOutlined,
+        ArrowDownOutlined,
+        CheckCircleOutlined,
+        EditOutlined,
+        PlusOutlined,
+        DownOutlined,
+        RightOutlined,
+        'config-modal': defineAsyncComponent(() => import('./configModal.vue')),
+        'copy-modal': defineAsyncComponent(() => import('./copyModal.vue')),
+        DataSource: defineAsyncComponent(() => import('./dataSource.vue')),
+        FieldMap: defineAsyncComponent(() => import('./fieldMap.vue')),
+        ProcessControl: defineAsyncComponent(() => import('./processControl.vue')),
+        MinusOutlined,
+        CloseOutlined,
+        StopFilled,
+        executionLog,
+        metrics
+    },
+    props: {
+        curTab: Object
+    },
+    data() {
+        const { t } = useI18n({ useScope: 'global' });
+        return {
+            loading: false,
+            name: '',
+            modalCfg: {
+                id: '',
+                visible: false
+            },
+            modalCopy: {
+                visible: false
+            },
+            jobData: {},
+            copyObj: {},
+            list: [],
+            activeIndex: -1,
+            curTask: null,
+            nameEditable: false,
 
-      fieldsSource: [],
-      fieldsSink: [],
-      deductions: [],
-      addEnable: false,
+            fieldsSource: [],
+            fieldsSink: [],
+            deductions: [],
+            addEnable: false,
 
-      configModalData: {},
+            configModalData: {},
 
-      visibleDrawer: false,
-      visibleLog: false,
-      pageSize: 10,
-      currentPage: 1,
-      ehColumns: ehColumns,
-      ehTableData: [],
-      ehPagination: {
-        total: 0,
-        pageSize: 10,
-      },
-      t,
-      spinning: false,
-      logs: {
-        logs: ['', '', '', '']
-      },
-      executeId: '',
-      jobExecutionId: '',
-      jobStatus: '',
-      allTaskStatus: '',
-      jobStatusTimer: null,
-      tasklist: [],
-      progressTimer: null,
-      jobProgress: {},
-      metricsInfo: {},
-      openMetricsId: '',
-      statusMap: {
-        'Inited': '初始化',
-        'Scheduled': '准备',
-        'Running': '运行',
-        'WaitForRetry': '等待重试',
-        'Cancelled': '取消',
-        'Failed': '失败',
-        'Partial_Success': '部分成功',
-        'Success': '成功',
-        'Undefined': '未定义',
-        'Timeout': '超时'
-      },
-      activeKey: "1",
-      dateFormat
-    };
-  },
-  props: {
-    curTab: Object,
-  },
-  watch: {
-    curTab(val, oldVal) {
-      if (val && oldVal && val.id !== oldVal.id) {
-        this.init()
-      }
-    }
-  },
-  created() {
-    this.init();
-  },
-  computed: {
-    logParams(){
-      return {
-        list: this.tasklist,
-        id: this.jobExecutionId
-      }
-    }
-  },
-  methods: {
-    init() {
-      this.name = this.curTab.jobName;
-      this.getInfo();
+            visibleDrawer: false,
+            visibleLog: false,
+            pageSize: 10,
+            currentPage: 1,
+            ehColumns,
+            ehTableData: [],
+            ehPagination: {
+                total: 0,
+                pageSize: 10
+            },
+            t,
+            spinning: false,
+            logs: {
+                logs: ['', '', '', '']
+            },
+            executeId: '',
+            jobExecutionId: '',
+            jobStatus: '',
+            allTaskStatus: '',
+            jobStatusTimer: null,
+            tasklist: [],
+            progressTimer: null,
+            jobProgress: {},
+            metricsInfo: {},
+            openMetricsId: '',
+            statusMap: {
+                Inited: '初始化',
+                Scheduled: '准备',
+                Running: '运行',
+                WaitForRetry: '等待重试',
+                Cancelled: '取消',
+                Failed: '失败',
+                Partial_Success: '部分成功',
+                Success: '成功',
+                Undefined: '未定义',
+                Timeout: '超时'
+            },
+            activeKey: '1',
+            dateFormat
+        };
     },
-    async getInfo() {
-      try {
-        this.loading = true
-        let data = (await getJobInfo(this.curTab.id)).result;
-        this.loading = false
-        if (!data.content || data.content === "[]") {
-          data.content = {
-            subJobs: [],
-          };
-        } else {
-          data.content = JSON.parse(data.content);
+    computed: {
+        logParams() {
+            return {
+                list: this.tasklist,
+                id: this.jobExecutionId
+            };
         }
-        data.content.subJobs.forEach((item) => {
-          item.engineType = data.engineType;
-        });
-        this.jobData = data;
-
-        const configData = Object.create(null);
-        configData["executeNode"] = data["executeNode"] || "";
-        configData["proxyUser"] = data["proxyUser"] || "";
-        configData["syncType"] = data["syncType"] || "";
-        configData["jobParams"] = JSON.parse(data["jobParams"]);
-        this.configModalData = configData;
-
-        this.list = this.jobData.content.subJobs;
-        if (this.list.length) {
-          this.activeIndex = 0;
-          this.curTask = this.list[this.activeIndex];
-          this.addEnable = this.curTask.transforms.addEnable
-          this.updateSourceInfo(this.curTask, true);
-          // this.updateSinkInfo(this.curTask); 当sink和source都有值的时候,请求的结果是一致的,所以省去一次多余重复请求
-        }
-      } catch (error) {
-        this.loading = false
-      }
-    },
-    // 更新保存任务配置
-    handleModalFinish(config) {
-      let _this = this;
-      const { id } = this.curTab;
-      const _config = Object.assign(
-        {},
-        JSON.parse(JSON.stringify(toRaw(config)))
-      );
-      if (_config.jobParams) {
-        let jobParams = Object.create(null);
-        _config.jobParams.forEach((item) => {
-          // jobParams = Object.assign(jobParams, item);
-          jobParams[item.key] = item.value;
-        });
-        _config.jobParams = JSON.stringify(jobParams);
-      }
-      updateTaskConfiguration(id, _config)
-        .then((res) => {
-          message.success("更新/保存成功");
-          _this.jobData["proxyUser"] = _config["proxyUser"];
-        })
-        .catch((err) => {
-          message.error("更新/保存失败");
-          console.log("updateTaskConfiguration error", err);
-        });
-    },
-    handleModalCopy(data) {
-      if (data) {
-        this.jobData.content.subJobs.push(data);
-      }
     },
-    copySub(item) {
-      this.copyObj = item;
-      this.modalCopy.visible = true;
+    watch: {
+        curTab(val, oldVal) {
+            if (val && oldVal && val.id !== oldVal.id) {
+                this.init();
+            }
+        }
     },
-    deleteSub(index) {
-      this.jobData.content.subJobs.splice(index, 1);
-      if (this.activeIndex === index && this.list.length) {
-        this.activeIndex = 0;
-        this.curTask = this.list[this.activeIndex];
-        this.addEnable = this.curTask.transforms.addEnable
-      } else {
-        this.activeIndex = -1;
-        this.curTask = null;
-        this.addEnable = false
-      }
+    created() {
+        this.init();
     },
-    cancel() {},
-    getClass(index) {
-      if (this.activeIndex === index) {
-        return "sub-content active";
-      } else {
-        return "sub-content";
-      }
+    beforeUnmount() {
+        clearInterval(this.jobStatusTimer);
+        clearInterval(this.progressTimer);
     },
-    changeCurTask(index) {
-      this.activeIndex = index;
-      this.curTask = this.list[this.activeIndex];
-      this.addEnable = this.curTask.transforms.addEnable
-      const data = this.getFieldsParams(this.curTask);
-      if (data) {
-        getFields(data).then((res) => {
-        }).catch((err) => {
-          console.log(err)
-        });
-      }
-    },
-    addNewTask() {
-      let subJobName = randomString(12);
-      let task = {
-        subJobName,
-        engineType: this.jobData.engineType,
-        dataSourceIds: {
-          source: {
-            type: "",
-            id: "",
-            db: "",
-            table: "",
-            ds: "",
-          },
-          sink: {
-            type: "",
-            id: "",
-            db: "",
-            table: "",
-            ds: "",
-          },
+    methods: {
+        init() {
+            this.name = this.curTab.jobName;
+            this.getInfo();
         },
-        params: {
-          sources: [],
-          sinks: [],
+        async getInfo() {
+            try {
+                this.loading = true;
+                const data = (await getJobInfo(this.curTab.id)).result;
+                this.loading = false;
+                if (!data.content || data.content === '[]') {
+                    data.content = {
+                        subJobs: []
+                    };
+                } else {
+                    data.content = JSON.parse(data.content);
+                }
+                data.content.subJobs.forEach((item) => {
+                    item.engineType = data.engineType;
+                });
+                this.jobData = data;
+
+                const configData = Object.create(null);
+                configData.executeNode = data.executeNode || '';
+                configData.proxyUser = data.proxyUser || '';
+                configData.syncType = data.syncType || '';
+                configData.jobParams = JSON.parse(data.jobParams);
+                this.configModalData = configData;
+
+                this.list = this.jobData.content.subJobs;
+                if (this.list.length) {
+                    this.activeIndex = 0;
+                    this.curTask = this.list[this.activeIndex];
+                    this.addEnable = this.curTask.transforms.addEnable;
+                    this.updateSourceInfo(this.curTask);
+                    // this.updateSinkInfo(this.curTask); 当sink和source都有值的时候,请求的结果是一致的,所以省去一次多余重复请求
+                }
+            } catch (error) {
+                this.loading = false;
+            }
         },
-        transforms: {
-          type: "MAPPING",
-          mapping: [],
+        // 更新保存任务配置
+        handleModalFinish(config) {
+            const _this = this;
+            const { id } = this.curTab;
+            const _config = Object.assign(
+                {},
+                JSON.parse(JSON.stringify(toRaw(config)))
+            );
+            if (_config.jobParams) {
+                const jobParams = Object.create(null);
+                _config.jobParams.forEach((item) => {
+                    // jobParams = Object.assign(jobParams, item);
+                    jobParams[item.key] = item.value;
+                });
+                _config.jobParams = JSON.stringify(jobParams);
+            }
+            updateTaskConfiguration(id, _config)
+                .then((res) => {
+                    message.success('更新/保存成功');
+                    _this.jobData.proxyUser = _config.proxyUser;
+                })
+                .catch((err) => {
+                    message.error('更新/保存失败');
+                    console.log('updateTaskConfiguration error', err);
+                });
         },
-        settings: [],
-      };
-      getSettingsParams(this.jobData.engineType).then((res) => {
-        res.ui.forEach((ui) => {
-          if (!ui.value && ui.defaultValue) {
-            ui.value = ui.defaultValue;
-          }
-        });
-        task.settings = res.ui || [];
-        this.jobData.content.subJobs.push(task);
-        this.$nextTick(() => {
-          this.activeIndex = this.jobData.content.subJobs.length - 1;
-          this.curTask = this.list[this.activeIndex];
-          this.addEnable = false
-          this.deductions = []
-        });
-      });
-    },
-    updateFieldMap(transforms) {
-      this.curTask.transforms = transforms;
-    },
-    updateProcessControl(settings) {
-      this.curTask.settings = settings;
-    },
-    getFieldsParams(dataSource) {
-      const { dataSourceIds, params } = dataSource;
-      this.curTask.dataSourceIds = dataSourceIds;
-      this.curTask.params = params;
-      const source = this.curTask.dataSourceIds.source;
-      const sink = this.curTask.dataSourceIds.sink;
-      if (!source.type || !source.id || !sink.type || !sink.id) return null;
-      return {
-        sourceTypeId: source.type,
-        sourceDataSourceId: source.id,
-        sourceDataBase: source.db,
-        sourceTable: source.table,
-        sinkTypeId: sink.type,
-        sinkDataSourceId: sink.id,
-        sinkDataBase: sink.db,
-        sinkTable: sink.table,
-        engine: this.jobData.engineType,
-      };
-    },
-    convertDeductions(deductions) {
-      let mapping = [];
-      deductions.forEach((deduction) => {
-        let o = {},
-          source = deduction.source,
-          sink = deduction.sink;
-        o.sink_field_name = sink.name;
-        o.sink_field_type = sink.type;
-        o.sink_field_index = sink.fieldIndex
-        o.sink_field_editable = sink.fieldEditable
-        o.deleteEnable = deduction.deleteEnable
-        o.source_field_name = source.name;
-        o.source_field_type = source.type;
-        o.source_field_index = source.fieldIndex
-        o.source_field_editable = source.fieldEditable
-        mapping.push(o);
-      });
-      return mapping
-    },
-    updateSourceInfo(dataSource, firstInit) {
-      const data = this.getFieldsParams(dataSource);
-      if (data) {
-        getFields(data).then((res) => {
-          this.fieldsSource = res.sourceFields;
-          this.fieldsSink = res.sinkFields;
-          this.deductions = res.deductions;
-          this.addEnable = res.addEnable;
-          // 不在使用deductions 直接将deductions作为值使用
-          if (!(firstInit && this.curTask.transforms.mapping && this.curTask.transforms.mapping.length)) {
-            this.curTask.transforms.mapping = this.convertDeductions(res.deductions)
-          }
-        });
-      } else {
-        // 没有数据源的情况下清空字段映射
-        this.fieldsSource = []
-        this.fieldsSink = []
-        this.deductions = []
-        this.addEnable = false
-        this.curTask.transforms.mapping = []
-      }
-    },
-    updateSinkInfo(dataSource, firstInit) {
-      const data = this.getFieldsParams(dataSource);
-      if (data) {
-        getFields(data).then((res) => {
-          this.fieldsSource = res.sourceFields;
-          this.fieldsSink = res.sinkFields;
-          this.deductions = res.deductions;
-          this.addEnable = res.addEnable;
-          // 不在使用deductions 直接将deductions作为值使用
-          if (!(firstInit && this.curTask.transforms.mapping && this.curTask.transforms.mapping.length)) {
-            this.curTask.transforms.mapping = this.convertDeductions(res.deductions)
-          }
-        });
-      } else {
-        // 没有数据源的情况下清空字段映射
-        this.fieldsSource = []
-        this.fieldsSink = []
-        this.deductions = []
-        this.addEnable = false
-        this.curTask.transforms.mapping = []
-      }
-    },
-    updateSourceParams(dataSource) {
-      const { params } = dataSource;
-      this.curTask.params = params;
-    },
-    updateSinkParams(dataSource) {
-      const { params } = dataSource;
-      this.curTask.params = params;
-    },
-    // 提交前 对 必填数据进行校验
-    checkPostData(data) {
-      const res = [];
-      const { proxyUser, content } = data;
-      const jobs = content.subJobs.slice();
-      if (!proxyUser) {
-        res.push("配置任务中执行用户不可为空");
-      }
-      jobs.forEach((job) => {
-        const { params, settings } = job;
-        for (let key in params) {
-          params[key].forEach((i) => {
-            if (!i.value && i.required) {
-              res.push(`${i.label}不可为空`);
+        handleModalCopy(data) {
+            if (data) {
+                this.jobData.content.subJobs.push(data);
             }
-          });
-        }
+        },
+        copySub(item) {
+            this.copyObj = item;
+            this.modalCopy.visible = true;
+        },
+        deleteSub(index) {
+            this.jobData.content.subJobs.splice(index, 1);
+            if (this.activeIndex === index && this.list.length) {
+                this.activeIndex = 0;
+                this.curTask = this.list[this.activeIndex];
+                this.addEnable = this.curTask.transforms.addEnable;
+            } else {
+                this.activeIndex = -1;
+                this.curTask = null;
+                this.addEnable = false;
+            }
+        },
+        cancel() {},
+        getClass(index) {
+            if (this.activeIndex === index) {
+                return 'sub-content active';
+            }
+            return 'sub-content';
+        },
+        changeCurTask(index) {
+            this.activeIndex = index;
+            this.curTask = this.list[this.activeIndex];
+            this.addEnable = this.curTask.transforms.addEnable;
+            const data = this.getFieldsParams(this.curTask);
+            if (data) {
+                getFields(data).then((res) => {
+                }).catch((err) => {
+                    console.log(err);
+                });
+            }
+        },
+        addNewTask() {
+            const subJobName = randomString(12);
+            const task = {
+                subJobName,
+                engineType: this.jobData.engineType,
+                dataSourceIds: {
+                    source: {
+                        type: '',
+                        id: '',
+                        db: '',
+                        table: '',
+                        ds: ''
+                    },
+                    sink: {
+                        type: '',
+                        id: '',
+                        db: '',
+                        table: '',
+                        ds: ''
+                    }
+                },
+                params: {
+                    sources: [],
+                    sinks: []
+                },
+                transforms: {
+                    type: 'MAPPING',
+                    mapping: []
+                },
+                settings: []
+            };
+            getSettingsParams(this.jobData.engineType).then((res) => {
+                res.ui.forEach((ui) => {
+                    if (!ui.value && ui.defaultValue) {
+                        ui.value = ui.defaultValue;
+                    }
+                });
+                task.settings = res.ui || [];
+                this.jobData.content.subJobs.push(task);
+                this.$nextTick(() => {
+                    this.activeIndex = this.jobData.content.subJobs.length - 1;
+                    this.curTask = this.list[this.activeIndex];
+                    this.addEnable = false;
+                    this.deductions = [];
+                });
+            });
+        },
+        updateFieldMap(transforms) {
+            this.curTask.transforms = transforms;
+        },
+        updateProcessControl(settings) {
+            this.curTask.settings = settings;
+        },
+        getFieldsParams(dataSource) {
+            const { dataSourceIds, params } = dataSource;
+            this.curTask.dataSourceIds = dataSourceIds;
+            this.curTask.params = params;
+            const source = this.curTask.dataSourceIds.source;
+            const sink = this.curTask.dataSourceIds.sink;
+            if (!source.type || !source.id || !sink.type || !sink.id) return null;
+            return {
+                sourceTypeId: source.type,
+                sourceDataSourceId: source.id,
+                sourceDataBase: source.db,
+                sourceTable: source.table,
+                sinkTypeId: sink.type,
+                sinkDataSourceId: sink.id,
+                sinkDataBase: sink.db,
+                sinkTable: sink.table,
+                engine: this.jobData.engineType
+            };
+        },
+        convertDeductions(deductions) {
+            const mapping = [];
+            deductions.forEach((deduction) => {
+                const o = {};
+                const source = deduction.source;
+                const sink = deduction.sink;
+                o.sink_field_name = sink.name;
+                o.sink_field_type = sink.type;
+                o.sink_field_index = sink.fieldIndex;
+                o.sink_field_editable = sink.fieldEditable;
+                o.deleteEnable = deduction.deleteEnable;
+                o.source_field_name = source.name;
+                o.source_field_type = source.type;
+                o.source_field_index = source.fieldIndex;
+                o.source_field_editable = source.fieldEditable;
+                mapping.push(o);
+            });
+            return mapping;
+        },
+        updateSourceInfo(dataSource, firstInit) {
+            const data = this.getFieldsParams(dataSource);
+            if (data) {
+                getFields(data).then((res) => {
+                    this.fieldsSource = res.sourceFields;
+                    this.fieldsSink = res.sinkFields;
+                    this.deductions = res.deductions;
+                    this.addEnable = res.addEnable;
+                    // 不在使用deductions 直接将deductions作为值使用
+                    if (!(firstInit && this.curTask.transforms.mapping && this.curTask.transforms.mapping.length)) {
+                        this.curTask.transforms.mapping = this.convertDeductions(res.deductions);
+                    }
+                });
+            } else {
+                // 没有数据源的情况下清空字段映射
+                this.fieldsSource = [];
+                this.fieldsSink = [];
+                this.deductions = [];
+                this.addEnable = false;
+                this.curTask.transforms.mapping = [];
+            }
+        },
+        updateSinkInfo(dataSource, firstInit) {
+            const data = this.getFieldsParams(dataSource);
+            if (data) {
+                getFields(data).then((res) => {
+                    this.fieldsSource = res.sourceFields;
+                    this.fieldsSink = res.sinkFields;
+                    this.deductions = res.deductions;
+                    this.addEnable = res.addEnable;
+                    // 不在使用deductions 直接将deductions作为值使用
+                    if (!(firstInit && this.curTask.transforms.mapping && this.curTask.transforms.mapping.length)) {
+                        this.curTask.transforms.mapping = this.convertDeductions(res.deductions);
+                    }
+                });
+            } else {
+                // 没有数据源的情况下清空字段映射
+                this.fieldsSource = [];
+                this.fieldsSink = [];
+                this.deductions = [];
+                this.addEnable = false;
+                this.curTask.transforms.mapping = [];
+            }
+        },
+        updateSourceParams(dataSource) {
+            const { params } = dataSource;
+            this.curTask.params = params;
+        },
+        updateSinkParams(dataSource) {
+            const { params } = dataSource;
+            this.curTask.params = params;
+        },
+        // 提交前 对 必填数据进行校验
+        checkPostData(data) {
+            const res = [];
+            const { proxyUser, content } = data;
+            const jobs = content.subJobs.slice();
+            if (!proxyUser) {
+                res.push('配置任务中执行用户不可为空');
+            }
+            jobs.forEach((job) => {
+                const { params, settings } = job;
+                for (const key in params) {
+                    params[key].forEach((i) => {
+                        if (!i.value && i.required) {
+                            res.push(`${i.label}不可为空`);
+                        }
+                    });
+                }
 
-        settings.forEach((i) => {
-          if (!i.value && i.required) {
-            res.push(`${i.label}不可为空`);
-          }
-        });
-      });
+                settings.forEach((i) => {
+                    if (!i.value && i.required) {
+                        res.push(`${i.label}不可为空`);
+                    }
+                });
+            });
 
-      return res;
-    },
-    saveAll(cb) {
-      let saveContent = [],
-        data = toRaw(this.jobData);
-      const tips = this.checkPostData(data);
-      if (tips.length > 0) {
-        return notification["warning"]({
-          message: "任务信息未完整填写",
-          description: h(
-            "ul",
-            {},
-            tips.map((tip) => h("li", {}, tip))
-          ),
-          duration: 5,
-        });
-      }
-      if (!data.content || !data.content.subJobs) {
-        return message.error("缺失保存对象");
-      }
-      for (let i = 0; i < data.content.subJobs.length; i++) {
-        const jobData = toRaw(data.content.subJobs[i]);
-        let cur = {};
-        cur.subJobName = jobData.subJobName;
-        if (
-          !jobData.dataSourceIds ||
-          objectValueEmpty(jobData.dataSourceIds.source) ||
-          objectValueEmpty(jobData.dataSourceIds.sink)
-        ) {
-          return message.error("未选择数据源库表");
-        }
-        cur.dataSources = {
-          source_id: `${jobData.dataSourceIds.source.type}.${jobData.dataSourceIds.source.id}.${jobData.dataSourceIds.source.db}.${jobData.dataSourceIds.source.table}`,
-          sink_id: `${jobData.dataSourceIds.sink.type}.${jobData.dataSourceIds.sink.id}.${jobData.dataSourceIds.sink.db}.${jobData.dataSourceIds.sink.table}`,
-        };
-        /*if (
+            return res;
+        },
+        saveAll(cb) {
+            const saveContent = [];
+            const data = toRaw(this.jobData);
+            const tips = this.checkPostData(data);
+            if (tips.length > 0) {
+                return notification.warning({
+                    message: '任务信息未完整填写',
+                    description: h(
+                        'ul',
+                        {},
+                        tips.map(tip => h('li', {}, tip))
+                    ),
+                    duration: 5
+                });
+            }
+            if (!data.content || !data.content.subJobs) {
+                return message.error('缺失保存对象');
+            }
+            for (let i = 0; i < data.content.subJobs.length; i++) {
+                const jobData = toRaw(data.content.subJobs[i]);
+                const cur = {};
+                cur.subJobName = jobData.subJobName;
+                if (
+                    !jobData.dataSourceIds
+                    || objectValueEmpty(jobData.dataSourceIds.source)
+                    || objectValueEmpty(jobData.dataSourceIds.sink)
+                ) {
+                    return message.error('未选择数据源库表');
+                }
+                cur.dataSources = {
+                    source_id: `${jobData.dataSourceIds.source.type}.${jobData.dataSourceIds.source.id}.${jobData.dataSourceIds.source.db}.${jobData.dataSourceIds.source.table}`,
+                    sink_id: `${jobData.dataSourceIds.sink.type}.${jobData.dataSourceIds.sink.id}.${jobData.dataSourceIds.sink.db}.${jobData.dataSourceIds.sink.table}`
+                };
+                /* if (
           !jobData.params ||
           !jobData.params.sources.length ||
           !jobData.params.sinks.length
         ) {
           return message.error("缺失数据源参数");
-        }*/
-        cur.params = {
-          sources: [],
-          sinks: [],
-        };
-        jobData.params.sources.forEach((source) => {
-          cur.params.sources.push({
-            config_key: source.field, // UI中field
-            config_name: source.label, // UI中label
-            config_value: source.value, // UI中value
-            sort: source.sort,
-          });
-        });
-        jobData.params.sinks.forEach((source) => {
-          cur.params.sinks.push({
-            config_key: source.field, // UI中field
-            config_name: source.label, // UI中label
-            config_value: source.value, // UI中value
-            sort: source.sort,
-          });
-        });
-        cur.transforms = jobData.transforms;
-        cur.transforms.addEnable = this.addEnable
-        cur.settings = [];
-        if (jobData.settings && jobData.settings.length) {
-          jobData.settings.forEach((setting) => {
-            cur.settings.push({
-              config_key: setting.field, // UI中field
-              config_name: setting.label, // UI中label
-              config_value: setting.value, // UI中value
-              sort: setting.sort,
+        } */
+                cur.params = {
+                    sources: [],
+                    sinks: []
+                };
+                jobData.params.sources.forEach((source) => {
+                    cur.params.sources.push({
+                        config_key: source.field, // UI中field
+                        config_name: source.label, // UI中label
+                        config_value: source.value, // UI中value
+                        sort: source.sort
+                    });
+                });
+                jobData.params.sinks.forEach((source) => {
+                    cur.params.sinks.push({
+                        config_key: source.field, // UI中field
+                        config_name: source.label, // UI中label
+                        config_value: source.value, // UI中value
+                        sort: source.sort
+                    });
+                });
+                cur.transforms = jobData.transforms;
+                cur.transforms.addEnable = this.addEnable;
+                cur.settings = [];
+                if (jobData.settings && jobData.settings.length) {
+                    jobData.settings.forEach((setting) => {
+                        cur.settings.push({
+                            config_key: setting.field, // UI中field
+                            config_name: setting.label, // UI中label
+                            config_value: setting.value, // UI中value
+                            sort: setting.sort
+                        });
+                    });
+                }
+                saveContent.push(cur);
+            }
+            saveProject(this.jobData.id, {
+                content: JSON.stringify(saveContent)
+            }).then((res) => {
+                cb && cb();
+                message.success('保存成功');
             });
-          });
-        }
-        saveContent.push(cur);
-      }
-      saveProject(this.jobData.id, {
-        content: JSON.stringify(saveContent)
-      }).then((res) => {
-        cb && cb()
-        message.success("保存成功");
-      });
-    },
-    // 执行任务
-    executeTask() {
-      if (!this.list.length) {
-        return message.error('没有子任务')
-      }
-      this.saveAll(() => {
-        const { id } = this.curTab;
-        this.tasklist = []
-        this.spinning = true
-        executeJob(id)
-          .then((res) => {
-            this.jobExecutionId = res.jobExecutionId
-            this.visibleLog = true
-            moveUpDown('.jd-bottom-log', '.jd-container', '.jd-bottom-log-top')
-            this.getStatus(res.jobExecutionId)
-
-            // 新增执行历史
-            this.ehTableData.push({
-              jobExecutionId : this.jobExecutionId,
-              createTime: new Date().getTime(),
-              status: '',
-              key: this.ehTableData.length + 1
-            })
-          })
-          .catch((err) => {
-            console.log(err)
-            this.spinning = false
-            message.error("执行失败")
-          });
-      })
-    },
-    killTask() {
-      if (!this.jobStatus) {
-        return message.error("正在等待")
-      }
-      killJob(this.jobExecutionId)
-        .then((res) => {
-          this.spinning = false
-          clearInterval(this.jobStatusTimer)
-          clearInterval(this.progressTimer)
-          this.visibleLog = false
-          this.jobStatus = 'Cancelled'
-
-          // 更新执行历史状态
-          for (let i = this.ehTableData.length; i > 0; i--) {
-            let cur = this.ehTableData[i - 1]
-            if (cur.jobExecutionId === this.jobExecutionId) {
-              cur.status = 'Cancelled'
-              break
+        },
+        // 执行任务
+        executeTask() {
+            if (!this.list.length) {
+                return message.error('没有子任务');
             }
-          }
-        })
-        .catch((err) => {
-          console.log(err)
-          this.spinning = false
-          message.error("停止失败");
-        });
-    },
-    // 获取Job状态
-    getStatus(jobExecutionId) {
-      this.getStatusInvoke(jobExecutionId)
-      this.jobStatusTimer = setInterval(() => {
-        this.getStatusInvoke(jobExecutionId)
-      }, 1000*5)
-    },
-    getStatusInvoke(jobExecutionId) {
-      const unfinishedStatusList = ['Inited', 'Scheduled', 'Running', 'WaitForRetry']
-      getJobStatus(jobExecutionId)
-        .then(res => {
-          this.jobStatus = res.status
-          this.allTaskStatus = res.allTaskStatus
+            this.saveAll(() => {
+                const { id } = this.curTab;
+                this.tasklist = [];
+                this.spinning = true;
+                executeJob(id)
+                    .then((res) => {
+                        this.jobExecutionId = res.jobExecutionId;
+                        this.visibleLog = true;
+                        moveUpDown('.jd-bottom-log', '.jd-container', '.jd-bottom-log-top');
+                        this.getStatus(res.jobExecutionId);
 
-          // 更新执行历史状态
-          for (let i = this.ehTableData.length; i > 0; i--) {
-            let cur = this.ehTableData[i - 1]
-            if (cur.jobExecutionId === jobExecutionId) {
-              cur.status = res.status
-              break
+                        // 新增执行历史
+                        this.ehTableData.push({
+                            jobExecutionId: this.jobExecutionId,
+                            createTime: new Date().getTime(),
+                            status: '',
+                            key: this.ehTableData.length + 1
+                        });
+                    })
+                    .catch((err) => {
+                        console.log(err);
+                        this.spinning = false;
+                        message.error('执行失败');
+                    });
+            });
+        },
+        killTask() {
+            if (!this.jobStatus) {
+                return message.error('正在等待');
             }
-          }
+            killJob(this.jobExecutionId)
+                .then((res) => {
+                    this.spinning = false;
+                    clearInterval(this.jobStatusTimer);
+                    clearInterval(this.progressTimer);
+                    this.visibleLog = false;
+                    this.jobStatus = 'Cancelled';
 
-          if (!this.tasklist.length) {
-            this.getTasks(jobExecutionId, true)
-          }
-          if (unfinishedStatusList.indexOf(this.jobStatus) === -1 && this.allTaskStatus) {
-            this.spinning = false
-            clearInterval(this.jobStatusTimer)
-            setTimeout(() => {
-              clearInterval(this.progressTimer)
-            }, 1000*5)
-          }
-        })
-        .catch(err => {
-          message.error("查询job状态失败");
-        })
-    },
-    // 获取tasklist
-    getTasks(jobExecutionId, shouldGetJobProgress) {
-      getJobTasks(jobExecutionId)
-        .then(res => {
-          this.tasklist = res.tasks
-          if (shouldGetJobProgress)
-            this.getJobProgress(jobExecutionId)
-        })
-        .catch(err => {
-          message.error("查询任务列表失败");
-        })
-    },
-    getJobProgress(jobExecutionId) {
-      this.getJobProgressInvoke(jobExecutionId)
-      clearInterval(this.progressTimer)
-      this.progressTimer = setInterval(() => {
-        this.getJobProgressInvoke(jobExecutionId)
-      }, 1000*5)
-    },
-    getJobProgressInvoke(jobExecutionId) {
-      getProgress(jobExecutionId)
-        .then(res => {
-          if (res.job && res.job.tasks) {
-            res.job.successTasks = res.job.tasks.Success?.length || 0
-            res.job.initedTasks = res.job.tasks.Inited?.length || 0
-            res.job.runningTasks = res.job.tasks.Running?.length || 0
-            res.job.failedTasks = res.job.tasks.Failed?.length || 0
-            res.job.cancelledTasks = res.job.tasks.Cancelled?.length || 0
-            res.job.scheduledTasks = res.job.tasks.Scheduled?.length || 0
+                    // 更新执行历史状态
+                    for (let i = this.ehTableData.length; i > 0; i--) {
+                        const cur = this.ehTableData[i - 1];
+                        if (cur.jobExecutionId === this.jobExecutionId) {
+                            cur.status = 'Cancelled';
+                            break;
+                        }
+                    }
+                })
+                .catch((err) => {
+                    console.log(err);
+                    this.spinning = false;
+                    message.error('停止失败');
+                });
+        },
+        // 获取Job状态
+        getStatus(jobExecutionId) {
+            this.getStatusInvoke(jobExecutionId);
+            this.jobStatusTimer = setInterval(() => {
+                this.getStatusInvoke(jobExecutionId);
+            }, 1000 * 5);
+        },
+        getStatusInvoke(jobExecutionId) {
+            const unfinishedStatusList = ['Inited', 'Scheduled', 'Running', 'WaitForRetry'];
+            getJobStatus(jobExecutionId)
+                .then((res) => {
+                    this.jobStatus = res.status;
+                    this.allTaskStatus = res.allTaskStatus;
+
+                    // 更新执行历史状态
+                    for (let i = this.ehTableData.length; i > 0; i--) {
+                        const cur = this.ehTableData[i - 1];
+                        if (cur.jobExecutionId === jobExecutionId) {
+                            cur.status = res.status;
+                            break;
+                        }
+                    }
+
+                    if (!this.tasklist.length) {
+                        this.getTasks(jobExecutionId, true);
+                    }
+                    if (unfinishedStatusList.indexOf(this.jobStatus) === -1 && this.allTaskStatus) {
+                        this.spinning = false;
+                        clearInterval(this.jobStatusTimer);
+                        setTimeout(() => {
+                            clearInterval(this.progressTimer);
+                        }, 1000 * 5);
+                    }
+                })
+                .catch((err) => {
+                    message.error('查询job状态失败');
+                });
+        },
+        // 获取tasklist
+        getTasks(jobExecutionId, shouldGetJobProgress) {
+            getJobTasks(jobExecutionId)
+                .then((res) => {
+                    this.tasklist = res.tasks;
+                    if (shouldGetJobProgress) this.getJobProgress(jobExecutionId);
+                })
+                .catch((err) => {
+                    message.error('查询任务列表失败');
+                });
+        },
+        getJobProgress(jobExecutionId) {
+            this.getJobProgressInvoke(jobExecutionId);
+            clearInterval(this.progressTimer);
+            this.progressTimer = setInterval(() => {
+                this.getJobProgressInvoke(jobExecutionId);
+            }, 1000 * 5);
+        },
+        getJobProgressInvoke(jobExecutionId) {
+            getProgress(jobExecutionId)
+                .then((res) => {
+                    if (res.job && res.job.tasks) {
+                        res.job.successTasks = res.job.tasks.Success?.length || 0;
+                        res.job.initedTasks = res.job.tasks.Inited?.length || 0;
+                        res.job.runningTasks = res.job.tasks.Running?.length || 0;
+                        res.job.failedTasks = res.job.tasks.Failed?.length || 0;
+                        res.job.cancelledTasks = res.job.tasks.Cancelled?.length || 0;
+                        res.job.scheduledTasks = res.job.tasks.Scheduled?.length || 0;
 
-            res.job.totalTasks = this.tasklist.length
-            if (res.job.total && res.job.total !== this.tasklist.length) {
-              res.job.totalTasks = res.job.total
-              this.getTasks(jobExecutionId)
+                        res.job.totalTasks = this.tasklist.length;
+                        if (res.job.total && res.job.total !== this.tasklist.length) {
+                            res.job.totalTasks = res.job.total;
+                            this.getTasks(jobExecutionId);
+                        }
+                        res.job.successPercent = res.job.successTasks * 100 / res.job.totalTasks;
+                        res.job.percent = res.job.progress * 100; // (res.job.successTasks + res.job.runningTasks) * 100 / res.job.totalTasks
+                        res.job.title = res.job.failedTasks ? `${res.job.failedTasks}失败,${res.job.successTasks}成功,${res.job.runningTasks}正在运行,${res.job.scheduledTasks}正在准备` : `${res.job.successTasks}成功,${res.job.runningTasks}正在运行,${res.job.scheduledTasks}正在准备`;
+                    }
+                    this.jobProgress = res.job;
+                })
+                .catch((err) => {
+                    message.error('查询进度失败');
+                });
+        },
+        getTaskInfo(progress) {
+            if (this.openMetricsId !== progress.taskId) {
+                this.openMetricsId = progress.taskId;
+                getMetrics(progress.taskId, this.jobExecutionId)
+                    .then((res) => {
+                        res.task.taskId = progress.taskId;
+                        this.metricsInfo[res.task.taskId] = res.task?.metrics;
+                    })
+                    .catch((err) => {
+                        message.error('查询任务指标失败');
+                    });
+            } else {
+                this.openMetricsId = '';
             }
-            res.job.successPercent = res.job.successTasks * 100 / res.job.totalTasks
-            res.job.percent = res.job.progress * 100 //(res.job.successTasks + res.job.runningTasks) * 100 / res.job.totalTasks
-            res.job.title = res.job.failedTasks ? `${res.job.failedTasks}失败,${res.job.successTasks}成功,${res.job.runningTasks}正在运行,${res.job.scheduledTasks}正在准备` : `${res.job.successTasks}成功,${res.job.runningTasks}正在运行,${res.job.scheduledTasks}正在准备`
-          }
-          this.jobProgress = res.job
-        })
-        .catch(err => {
-          message.error("查询进度失败");
-        })
-    },
-    getTaskInfo(progress) {
-      if (this.openMetricsId !== progress.taskId) {
-        this.openMetricsId = progress.taskId
-        getMetrics(progress.taskId, this.jobExecutionId)
-          .then(res => {
-            res.task.taskId = progress.taskId
-            this.metricsInfo[res.task.taskId] = res.task?.metrics
-          })
-          .catch(err => {
-            message.error("查询任务指标失败");
-          })
-      } else {
-        this.openMetricsId = ''
-      }
-    },
+        },
 
-    executeHistory() {
-      this.visibleLog = true;
-      this.activeKey = "3"
-    },
-    getTableFormCurrent(current, type) {
-      let _this = this;
-      if (
-        _this.ehTableData.length == _this.ehPagination.total &&
-        _this.ehPagination.total > 0 &&
-        type !== "search"
-      )
-        return;
-      if (_this.currentPage == current && type !== "search") return;
-      let jobId = _this.curTab.id || "";
-      let _pageSize = _this.pageSize;
-      getSyncHistory({ jobId, current, size: _pageSize })
-        .then((res) => {
-          if (res.result.length > 0) {
-            const result = res.result || [];
-            result.forEach((item) => {
-              item["launchTime"] = formatDate(item["launchTime"]);
-              item["completeTime"] = formatDate(item["completeTime"]);
-              switch (item["status"]) {
-                case "SUCCESS":
-                  item["status"] = "执行成功";
-                  break;
-                case "FAILED":
-                  item["status"] = "执行失败";
-                  break;
-                case "RUNNING":
-                  item["status"] = "运行中";
-              }
-              item["key"] = item["id"];
+        executeHistory() {
+            this.visibleLog = true;
+            this.activeKey = '3';
+        },
+        getTableFormCurrent(current, type) {
+            const _this = this;
+            if (
+                _this.ehTableData.length == _this.ehPagination.total
+                && _this.ehPagination.total > 0
+                && type !== 'search'
+            ) return;
+            if (_this.currentPage == current && type !== 'search') return;
+            const jobId = _this.curTab.id || '';
+            const _pageSize = _this.pageSize;
+            getSyncHistory({ jobId, current, size: _pageSize })
+                .then((res) => {
+                    if (res.result.length > 0) {
+                        const result = res.result || [];
+                        result.forEach((item) => {
+                            item.launchTime = formatDate(item.launchTime);
+                            item.completeTime = formatDate(item.completeTime);
+                            switch (item.status) {
+                                case 'SUCCESS':
+                                    item.status = '执行成功';
+                                    break;
+                                case 'FAILED':
+                                    item.status = '执行失败';
+                                    break;
+                                case 'RUNNING':
+                                    item.status = '运行中';
+                            }
+                            item.key = item.id;
+                        });
+                        if (type == 'search') {
+                            _this.TableData = [];
+                        }
+                        _this.ehPagination.total = res.total;
+                        _this.ehTableData = _this.ehTableData.concat(result);
+                    }
+                })
+                .catch((err) => {
+                    console.log('syncHistory error', err);
+                });
+        },
+        onPageChange(page) {
+            const { current } = page;
+            this.getTableFormCurrent(current, 'onChange');
+        },
+        onCloseDrawer() {
+            this.visibleDrawer = false;
+        },
+        onCloseLog() {
+            // clearInterval(this.jobStatusTimer)
+            clearInterval(this.progressTimer);
+            this.visibleLog = false;
+        },
+        getEditableInput() {
+            this.nameEditable = true;
+            this.$nextTick(() => {
+                if (this.$refs.currentInput && this.$refs.currentInput.focus) {
+                    this.$refs.currentInput.focus();
+                }
             });
-            if (type == "search") {
-              _this.TableData = [];
-            }
-            _this.ehPagination.total = res["total"];
-            _this.ehTableData = _this.ehTableData.concat(result);
-          }
-        })
-        .catch((err) => {
-          console.log("syncHistory error", err);
-        });
-    },
-    onPageChange(page) {
-      const { current } = page;
-      this.getTableFormCurrent(current, "onChange");
-    },
-    onCloseDrawer() {
-      this.visibleDrawer = false;
-    },
-    onCloseLog() {
-      //clearInterval(this.jobStatusTimer)
-      clearInterval(this.progressTimer)
-      this.visibleLog = false;
-    },
-    getEditableInput() {
-      this.nameEditable = true
-      this.$nextTick(() => {
-        if (this.$refs.currentInput && this.$refs.currentInput.focus) {
-          this.$refs.currentInput.focus()
         }
-      })
     }
-  },
-  beforeUnmount() {
-    clearInterval(this.jobStatusTimer)
-    clearInterval(this.progressTimer)
-  }
 };
 </script>
 <style scoped lang="less">

From ed174df5069d69ed1a57b9527a273c7fd3b860a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?liveipooli=28=E6=9D=8E=E4=B8=BA=29?= <liveipooli@webank.com>
Date: Sun, 24 Apr 2022 17:54:39 +0800
Subject: [PATCH 3/4] fix: 264525, 257869, 265057

---
 .../components/datasourceForm/index.vue       | 583 +++++++++---------
 .../dataSourceManage/components/editModal.vue | 327 +++++-----
 web/src/pages/dataSourceManage/index.vue      |  14 +-
 3 files changed, 477 insertions(+), 447 deletions(-)

diff --git a/web/src/pages/dataSourceManage/components/datasourceForm/index.vue b/web/src/pages/dataSourceManage/components/datasourceForm/index.vue
index daa1485a0..96c5efb43 100644
--- a/web/src/pages/dataSourceManage/components/datasourceForm/index.vue
+++ b/web/src/pages/dataSourceManage/components/datasourceForm/index.vue
@@ -1,300 +1,317 @@
 <template>
-  <div class="table-warp" style="padding-bottom: 32px;">
-    <form-create :rule="rule" v-model:api="fApi" :option="options" v-model="formData"/>
-    <a-button v-if="data.mode !== 'read'" @click="handleTestConnect(row)" type="primary">{{
-      $t("dataSource.table.list.columns.actions.testConnectButton")
-      }}</a-button>
-    <a-button type="primary" @click="submit" style="float: right;margin: 0 0 0 10px;" v-if="data.mode !== 'read'">确定</a-button>
-    <a-button @click="$emit('cancel')" style="float: right">取消</a-button>
-  </div>
+    <div class="table-warp" style="padding-bottom: 32px;">
+        <form-create v-model:api="fApi" v-model="formData" :rule="rule" :option="options" />
+        <a-button v-if="data.mode !== 'read'" type="primary" @click="handleTestConnect(row)">
+            {{$t("dataSource.table.list.columns.actions.testConnectButton")}}
+        </a-button>
+        <a-button v-if="data.mode !== 'read'" type="primary" style="float: right;margin: 0 0 0 10px;" @click="submit">确定</a-button>
+        <a-button style="float: right" @click="$emit('cancel')">取消</a-button>
+    </div>
 </template>
 <script>
-import _, { merge, mergeWith} from 'lodash-es';
-import {getKeyDefine, getDataSourceById} from "@/common/service";
-import { getEnvironment } from "@/common/utils";
-import { request } from "@fesjs/fes";
-import { message } from "ant-design-vue"
-import { toRaw } from "vue";
+import _, { merge, mergeWith } from 'lodash-es';
+import { request } from '@fesjs/fes';
+import { message } from 'ant-design-vue';
+import { toRaw } from 'vue';
+import { getEnvironment } from '@/common/utils';
+import { getKeyDefine, getDataSourceById } from '@/common/service';
 
 const type = {
-  TEXT: {type: 'input'},
-  NUMBER: {type: 'input', props: {type: 'number'}},
-  PASSWORD: {type: 'input', props: {type: 'password'}},
-  EMAIL: {type: 'input', props: {type: 'email'}},
-  DATE: {type: 'input', props: {type: 'date'}},
-  TEL: {type: 'input', props: {type: 'tel'}},
-  TEXTAREA: {type: 'input', props: {type: 'textarea'}},
-  URL: {type: 'input', props: {type: 'url'}},
-  FILE: (self, source)=>{
-    return {type: 'upload', props: {uploadType: 'file', action: '',allowRemove: true, "maxLength": 1,
-      beforeUpload: (file)=>{
-        self.file = file;
-        source.props.value = file.name;
-        return false;
-      }}}
-  },
-  SELECT: {type: 'select', props: {placement: "bottom"}}
-}
+    TEXT: { type: 'input' },
+    NUMBER: { type: 'input', props: { type: 'number' } },
+    PASSWORD: { type: 'input', props: { type: 'password' } },
+    EMAIL: { type: 'input', props: { type: 'email' } },
+    DATE: { type: 'input', props: { type: 'date' } },
+    TEL: { type: 'input', props: { type: 'tel' } },
+    TEXTAREA: { type: 'input', props: { type: 'textarea' } },
+    URL: { type: 'input', props: { type: 'url' } },
+    FILE: (self, source) => ({
+        type: 'upload',
+        props: {
+            uploadType: 'file',
+            action: '',
+            allowRemove: true,
+            maxLength: 1,
+            beforeUpload: (file) => {
+                self.file = file;
+                source.props.value = file.name;
+                return false;
+            }
+        }
+    }),
+    SELECT: { type: 'select', props: { placement: 'bottom' } }
+};
 const typesMap = {
-  valueType: (data, source, self)=>{
-    if(type[data.valueType]){
-      if(typeof type[data.valueType] === 'function'){
-        return type[data.valueType](self, source);
-      }
-      return type[data.valueType]
-    }else{
-      return {type: data.valueType}
-    }
-  },
-  name: 'title',
-  
-  defaultValue: 'value',
-  // dataSource: 'options',
-  dataSource: (data, source, self)=>{
-    const fApi = self.fApi;
-    if(typeof data.dataSource === 'string'){
-      if (!/^https?:/.test(data.dataSource)) {
-        //data.dataSource = window.location.origin + '/api/rest_j/v1' + data.dataSource
-        data.dataSource = window.location.origin + data.dataSource
-      }
-      request(data.dataSource, {
-        labels: getEnvironment()
-      }, {
-        method: "GET",
-      }).then(result=>{
-        delete source.options;
-        source.options = result.envList.map(item=>{
-          return {label: item.envName, value: ''+item.id}
-        });
-        fApi.refreshOptions();
-      })
-      return {options: []}
-    }else {
-      try {
-        return {options: JSON.parse(data.dataSource)}
-      } catch (error) {
-        return {options: []}
-      }
-    }
-  },
-  key: 'field',
-  description: (data)=>{
-    return {props: {placeholder: data.description}}
-  },
-  require: (data)=>{
-    if(data.require) //&& !data.valueRegex
-      return {validate: [{ required: true, message: `请输入${data.name}`, trigger: 'blur' }]}
-    else return null
-  },
-  valueRegex: (data)=>{
-    if(data.valueRegex){
-      return {validate: [{pattern: new RegExp(data.valueRegex), message: '不符合规则', trigger: 'blur'}]}
-    }
-    else return null;
-  },
-  // valueRegex: (data)=>{
-  //   if(data.valueRegex)
-  //     return {validate: { pattern: new RegExp(data.valueRegex), message: '不符合规则', trigger: 'blur' }}
-  //   else return null
-  // },
-  
-  refId: 'refId',
-  refValue: 'refValue',
-  id: 'id',
-}
-export default {
-  props: {
-    data: Object
-  },
-  data () {
-    return {
-      sourceConnectData: {},
-      fApi: {},
-      loading: false,
-      formData: {file: 'adn'},
-      options: {
-        submitBtn: false,
-      },
-      originalDefine: [],
-      rule: [],
-      defaultRule: [
-        {
-          type: "input",
-          title: this.$t('message.linkis.datasource.sourceName'),
-          field: "dataSourceName",
-          value: "",
-          props: {
-            "placeholder": this.$t('message.linkis.datasource.sourceName'),
-          },
-          validate: [{
-            required: true,
-            message: `${this.$t('message.linkis.datasource.pleaseInput')}${this.$t('message.linkis.datasource.sourceName')}`,
-            trigger: 'blur'
-          },{
-            pattern: /^(.){0,200}$/,
-            message: '最多200字',
-            trigger: 'change'
-          }],
-        },
-        {
-          type: "input",
-          title: this.$t('message.linkis.datasource.sourceDec'),
-          field: "dataSourceDesc",
-          value: "",
-          props: {
-            "placeholder": this.$t('message.linkis.datasource.sourceDec'),
-          },
-          validate: [{
-            pattern: /^(.){0,200}$/,
-            message: '最多200字',
-            trigger: 'change'
-          }]
-        },
-        {
-          type: "input",
-          title: this.$t('message.linkis.datasource.label'),
-          field: "label",
-          value: "",
-          props: {
-            "placeholder": this.$t('message.linkis.datasource.label'),
-          },
-          validate: [{
-            pattern: /^(.){0,200}$/,
-            message: '最多200字',
-            trigger: 'change'
-          }]
+    valueType: (data, source, self) => {
+        if (type[data.valueType]) {
+            if (typeof type[data.valueType] === 'function') {
+                return type[data.valueType](self, source);
+            }
+            return type[data.valueType];
         }
-      ],
-
-    }
-  },
-  created(){
-    this.loading = true;
-    
-    this.getDataSource(this.data);
-    
-    getKeyDefine(this.data.type).then((data)=>{
-      this.loading = false;
-      this.originalDefine = data.list
-      this.transformData(data.list);
-    })
-  },
-  watch: {
-    data: {
-      handler (newV) {
-        getKeyDefine(this.data.type).then((data)=>{
-          this.originalDefine = data.list
-          this.transformData(data.list);
-          this.getDataSource(newV);
-        })
-      },
-      deep: true
-    }
-  },
-  methods: {
-    getDataSource(newV){
-      if(this.data.id){
-        getDataSourceById(newV.id, newV.versionId).then(result=>{
-          const mConnect = result.info.connectParams;
-          this.sourceConnectData = mConnect;
-          delete result.info.connectParams;
-          //this.dataSrc = { ...result.info,  ...mConnect};
-          this.formData = { ...result.info,  ...mConnect};
-        })
-      }else{
-        const connectParams = newV.connectParams;
-        delete newV.connectParams;
-        this.formData = {
-          ...newV,
-          dataSourceDesc: '',
-          dataSourceName: '',
-          label: '',
-          ...connectParams
-        };
-        //this.dataSrc = {...newV, ...connectParams};
-      }
+        return { type: data.valueType };
     },
-    transformData(keyDefinitions){
-      const tempData = [];
-      
-      keyDefinitions.forEach((obj)=>{
-        let item = {};
-        Object.keys(obj).forEach((keyName) =>{
-          
-          switch (typeof typesMap[keyName]) {
-            case 'object':
-              item = merge({}, item, typesMap[keyName])
-              break;
-            
-            case 'function':
-              
-              item = mergeWith(item, typesMap[keyName](obj, item, this), function(objValue, srcValue){
-                if(_.isArray(objValue)) {
-                  return objValue.concat(srcValue);
-                }
-              });
-              break;
-            
-            case 'string':
-              item[typesMap[keyName]] = obj[keyName];
-              break;
-          }
-        });
-        tempData.push(item);
-      });
+    name: 'title',
 
-      const insertParent = (id, child)=>{
-        
-        let parent = tempData.find(item=> id==item.id);
-        if(parent && child){
-          
-          if(!parent.control || parent.control.length===0) {
-            parent.control = [  //不存在新建
-              {
-                value: child.refValue,
-                rule: [{...child} ]   
-              }                                              
-            ]
-          }else {
-            let index = parent.control.findIndex(item=>item.value+'' === child.refValue+'');
-            if(index > -1){
-              parent.control[index].rule.push({...child})
-            }else {
-              parent.control.push(
-                {
-                  value: child.refValue,
-                  rule: [{...child} ]   
-                }  
-              )
+    defaultValue: 'value',
+    // dataSource: 'options',
+    dataSource: (data, source, self) => {
+        const fApi = self.fApi;
+        if (typeof data.dataSource === 'string') {
+            if (!/^https?:/.test(data.dataSource)) {
+                // data.dataSource = window.location.origin + '/api/rest_j/v1' + data.dataSource
+                data.dataSource = window.location.origin + data.dataSource;
             }
-            
-          }
-          
+            request(data.dataSource, {
+                labels: getEnvironment()
+            }, {
+                method: 'GET'
+            }).then((result) => {
+                delete source.options;
+                source.options = result.envList.map(item => ({ label: item.envName, value: `${item.id}` }));
+                fApi.refreshOptions();
+            });
+            return { options: [] };
         }
-      }
-      for(var i =0; i<tempData.length; i++){
-        let item = tempData[i];
-        if(item.refId && item.refId > 0){
-          let children = tempData.splice(i, 1);
-          i--;
-          insertParent(item.refId, children[0]);
+        try {
+            return { options: JSON.parse(data.dataSource) };
+        } catch (error) {
+            return { options: [] };
         }
-      }
-      this.rule =  this.defaultRule.concat(tempData);
-      return tempData;
-      
     },
-    submit(){
-      this.fApi.submit((formData, fApi)=>{
-        this.$emit("submit", JSON.stringify(formData), this.originalDefine);
-      })
+    key: 'field',
+    description: data => ({ props: { placeholder: data.description } }),
+    require: (data) => {
+        if (data.require) // && !data.valueRegex
+        { return { validate: [{ required: true, message: `请输入${data.name}`, trigger: 'blur' }] }; }
+        return null;
+    },
+    valueRegex: (data) => {
+        if (data.valueRegex) {
+            return { validate: [{ pattern: new RegExp(data.valueRegex), message: '不符合规则', trigger: 'blur' }] };
+        }
+        return null;
+    },
+    // valueRegex: (data)=>{
+    //   if(data.valueRegex)
+    //     return {validate: { pattern: new RegExp(data.valueRegex), message: '不符合规则', trigger: 'blur' }}
+    //   else return null
+    // },
+
+    refId: 'refId',
+    refValue: 'refValue',
+    id: 'id'
+};
+export default {
+    props: {
+        data: Object
     },
-    // 测试链接
-    handleTestConnect() {
-      this.$emit('connect', JSON.stringify(toRaw(this.formData)), this.originalDefine)
+    data() {
+        return {
+            sourceConnectData: {},
+            fApi: {},
+            loading: false,
+            formData: { file: 'adn' },
+            options: {
+                submitBtn: false
+            },
+            originalDefine: [],
+            rule: [],
+            defaultRule: [
+                {
+                    type: 'input',
+                    title: this.$t('message.linkis.datasource.sourceName'),
+                    field: 'dataSourceName',
+                    value: '',
+                    props: {
+                        placeholder: this.$t('message.linkis.datasource.sourceName')
+                    },
+                    validate: [{
+                        required: true,
+                        message: `${this.$t('message.linkis.datasource.pleaseInput')}${this.$t('message.linkis.datasource.sourceName')}`,
+                        trigger: 'blur'
+                    }, {
+                        pattern: /^(.){0,200}$/,
+                        message: '最多200字',
+                        trigger: 'change'
+                    }]
+                },
+                {
+                    type: 'input',
+                    title: this.$t('message.linkis.datasource.sourceDec'),
+                    field: 'dataSourceDesc',
+                    value: '',
+                    props: {
+                        placeholder: this.$t('message.linkis.datasource.sourceDec')
+                    },
+                    validate: [{
+                        pattern: /^(.){0,200}$/,
+                        message: '最多200字',
+                        trigger: 'change'
+                    }]
+                },
+                {
+                    type: 'input',
+                    title: this.$t('message.linkis.datasource.label'),
+                    field: 'label',
+                    value: '',
+                    props: {
+                        placeholder: this.$t('message.linkis.datasource.label')
+                    },
+                    validate: [{
+                        pattern: /^(.){0,200}$/,
+                        message: '最多200字',
+                        trigger: 'change'
+                    }]
+                }
+            ],
+            onlyReadDefaultRule: [
+                {
+                    type: 'input',
+                    title: this.$t('message.linkis.datasource.sourceName'),
+                    field: 'dataSourceName',
+                    value: '',
+                    props: {
+                        placeholder: this.$t('message.linkis.datasource.sourceName')
+                    },
+                    validate: [{
+                        required: true,
+                        message: `${this.$t('message.linkis.datasource.pleaseInput')}${this.$t('message.linkis.datasource.sourceName')}`,
+                        trigger: 'blur'
+                    }, {
+                        pattern: /^(.){0,200}$/,
+                        message: '最多200字',
+                        trigger: 'change'
+                    }]
+                }
+            ]
+        };
+    },
+    watch: {
+        data: {
+            handler(newV) {
+                getKeyDefine(this.data.type).then((data) => {
+                    this.originalDefine = data.list;
+                    this.transformData(data.list);
+                    this.getDataSource(newV);
+                });
+            },
+            deep: true
+        }
+    },
+    created() {
+        this.loading = true;
+
+        this.getDataSource(this.data);
+
+        getKeyDefine(this.data.type).then((data) => {
+            this.loading = false;
+            this.originalDefine = data.list;
+            this.transformData(data.list);
+        });
+    },
+    methods: {
+        getDataSource(newV) {
+            if (this.data.id) {
+                getDataSourceById(newV.id, newV.versionId).then((result) => {
+                    const mConnect = result.info.connectParams;
+                    this.sourceConnectData = mConnect;
+                    delete result.info.connectParams;
+                    // this.dataSrc = { ...result.info,  ...mConnect};
+                    this.formData = { ...result.info, ...mConnect };
+                });
+            } else {
+                const connectParams = newV.connectParams;
+                delete newV.connectParams;
+                this.formData = {
+                    ...newV,
+                    dataSourceDesc: '',
+                    dataSourceName: '',
+                    label: '',
+                    ...connectParams
+                };
+                // this.dataSrc = {...newV, ...connectParams};
+            }
+        },
+        transformData(keyDefinitions) {
+            const tempData = [];
+
+            keyDefinitions.forEach((obj) => {
+                let item = {};
+                Object.keys(obj).forEach((keyName) => {
+                    switch (typeof typesMap[keyName]) {
+                        case 'object':
+                            item = merge({}, item, typesMap[keyName]);
+                            break;
+
+                        case 'function':
+
+                            item = mergeWith(item, typesMap[keyName](obj, item, this), (objValue, srcValue) => {
+                                if (_.isArray(objValue)) {
+                                    return objValue.concat(srcValue);
+                                }
+                            });
+                            break;
+
+                        case 'string':
+                            item[typesMap[keyName]] = obj[keyName];
+                            break;
+                    }
+                });
+                tempData.push(item);
+            });
+
+            const insertParent = (id, child) => {
+                const parent = tempData.find(item => id == item.id);
+                if (parent && child) {
+                    if (!parent.control || parent.control.length === 0) {
+                        parent.control = [ // 不存在新建
+                            {
+                                value: child.refValue,
+                                rule: [{ ...child }]
+                            }
+                        ];
+                    } else {
+                        const index = parent.control.findIndex(item => `${item.value}` === `${child.refValue}`);
+                        if (index > -1) {
+                            parent.control[index].rule.push({ ...child });
+                        } else {
+                            parent.control.push(
+                                {
+                                    value: child.refValue,
+                                    rule: [{ ...child }]
+                                }
+                            );
+                        }
+                    }
+                }
+            };
+            for (let i = 0; i < tempData.length; i++) {
+                const item = tempData[i];
+                if (item.refId && item.refId > 0) {
+                    const children = tempData.splice(i, 1);
+                    i--;
+                    insertParent(item.refId, children[0]);
+                }
+            }
+            if (this.data.mode === 'read') {
+                this.rule = this.onlyReadDefaultRule.concat(tempData);
+            } else {
+                this.rule = this.defaultRule.concat(tempData);
+            }
+            return tempData;
+        },
+        submit() {
+            this.fApi.submit((formData, fApi) => {
+                this.$emit('submit', JSON.stringify(formData), this.originalDefine);
+            });
+        },
+        // 测试链接
+        handleTestConnect() {
+            this.$emit('connect', JSON.stringify(toRaw(this.formData)), this.originalDefine);
+        }
     }
-  }
-}
+};
 </script>
 
 <style lang="less" scoped>
@@ -359,4 +376,4 @@ export default {
     flex: 0 0 20%;
     max-width: 20%;
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/web/src/pages/dataSourceManage/components/editModal.vue b/web/src/pages/dataSourceManage/components/editModal.vue
index f9da9edfe..b6949fc14 100644
--- a/web/src/pages/dataSourceManage/components/editModal.vue
+++ b/web/src/pages/dataSourceManage/components/editModal.vue
@@ -1,120 +1,122 @@
 <template>
-  <a-modal :title="$t(`dataSource.editModal.title.${mode}`)"
-           :footer="null"
-           :visible="visible"
-           :confirm-loading="confirmLoading"
-           @cancel="$emit('update:visible', false)"
-           :width="600">
-    <a-spin :spinning="confirmLoading">
-    <DatasourceForm :data="modalCfg" ref="datasourceForm" @connect="handleConnect" @submit="handleOk" @cancel="$emit('update:visible', false)"/>
-    <div class="mark-layer" v-if="mode === 'read'"></div>
-      <!--<a-form ref="formRef" :model="formState" :label-col="{ span: 6 }">-->
+    <a-modal :title="$t(`dataSource.editModal.title.${mode}`)"
+             :footer="null"
+             :visible="visible"
+             :confirm-loading="confirmLoading"
+             :width="600"
+             @cancel="$emit('update:visible', false)"
+    >
+        <a-spin :spinning="confirmLoading">
+            <DatasourceForm ref="datasourceForm" :data="modalCfg" @connect="handleConnect" @submit="handleOk" @cancel="$emit('update:visible', false)" />
+            <div v-if="mode === 'read'" class="mark-layer"></div>
+            <!--<a-form ref="formRef" :model="formState" :label-col="{ span: 6 }">-->
         <!--<a-form-item :label="$t(`dataSource.editModal.form.fields.dataSourceName.label`)" name="dataSourceName">-->
-          <!--<a-input :maxLength="30" v-model:value="formState.dataSourceName" :placeholder="$t(`dataSource.editModal.form.fields.dataSourceName.placeholder`)" />-->
+            <!--<a-input :maxLength="30" v-model:value="formState.dataSourceName" :placeholder="$t(`dataSource.editModal.form.fields.dataSourceName.placeholder`)" />-->
         <!--</a-form-item>-->
         <!--<a-form-item label="地址" :name="['connectParams', 'host']">-->
-          <!--<a-input :maxLength="100" v-model:value="formState.connectParams.host" placeholder="数据源host" />-->
+            <!--<a-input :maxLength="100" v-model:value="formState.connectParams.host" placeholder="数据源host" />-->
         <!--</a-form-item>-->
         <!--<a-form-item-->
-          <!--:validate-status="portValidateStatus"-->
-          <!--:help="portErrorMsg"-->
-          <!--label="端口" :name="['connectParams', 'port']" >-->
-          <!--<a-input-->
+            <!--:validate-status="portValidateStatus"-->
+            <!--:help="portErrorMsg"-->
+            <!--label="端口" :name="['connectParams', 'port']" >-->
+            <!--<a-input-->
             <!--:maxLength="6" v-model:value="formState.connectParams.port" placeholder="端口" @change="validatePort" />-->
         <!--</a-form-item>-->
         <!--<a-form-item v-if="type == 1" label="用户名" :name="['connectParams', 'username']">-->
-          <!--<a-input :maxLength="30" v-model:value="formState.connectParams.username" placeholder="用户名" />-->
+            <!--<a-input :maxLength="30" v-model:value="formState.connectParams.username" placeholder="用户名" />-->
         <!--</a-form-item>-->
         <!--<a-form-item v-if="type == 1" label="密码" :name="['connectParams', 'password']">-->
-          <!--<a-input :maxLength="30" v-model:value="formState.connectParams.password" placeholder="密码" type="password"/>-->
+            <!--<a-input :maxLength="30" v-model:value="formState.connectParams.password" placeholder="密码" type="password"/>-->
         <!--</a-form-item>-->
         <!--<a-form-item label="标签" :name="['connectParams', 'labels']">-->
-          <!--<a-input :maxLength="200" v-model:value="formState.labels" placeholder="逗号分割"/>-->
+            <!--<a-input :maxLength="200" v-model:value="formState.labels" placeholder="逗号分割"/>-->
         <!--</a-form-item>-->
         <!--<a-form-item label="注释" :name="['connectParams', 'comment']">-->
-          <!--<a-input :maxLength="200" v-model:value="formState.connectParams.comment" placeholder="注释" />-->
+            <!--<a-input :maxLength="200" v-model:value="formState.connectParams.comment" placeholder="注释" />-->
         <!--</a-form-item>-->
         <!--<a-form-item :label="$t(`dataSource.editModal.form.fields.dataSourceDesc.label`)" name="dataSourceDesc">-->
-          <!--<a-textarea :maxLength="300" v-model:value="formState.dataSourceDesc" :placeholder="$t(`dataSource.editModal.form.fields.dataSourceDesc.placeholder`)" />-->
+            <!--<a-textarea :maxLength="300" v-model:value="formState.dataSourceDesc" :placeholder="$t(`dataSource.editModal.form.fields.dataSourceDesc.placeholder`)" />-->
         <!--</a-form-item>-->
-      <!--</a-form>-->
-    </a-spin>
-  </a-modal>
+            <!--</a-form>-->
+        </a-spin>
+    </a-modal>
 </template>
 
 <script>
-import { createDataSource, updateDataSource, testDataSourceNotSavedConnect } from "@/common/service";
-import { toRaw } from "vue";
-import { message } from "ant-design-vue";
+import { toRaw } from 'vue';
+import { message } from 'ant-design-vue';
+import { createDataSource, updateDataSource, testDataSourceNotSavedConnect } from '@/common/service';
 import DatasourceForm from './datasourceForm/index';
+
 export default {
-  name: "projectEditModal",
-  components: {
-    DatasourceForm
-  },
-  props: {
-    // 是否可见
-    visible: {
-      type: Boolean,
-      required: true,
-    },
-    // 模式
-    mode: {
-      type: String,
-      required: true,
+    name: 'projectEditModal',
+    components: {
+        DatasourceForm
     },
-    // id如果是新增模式可以不传
-    id: {
-      default: "",
+    props: {
+        // 是否可见
+        visible: {
+            type: Boolean,
+            required: true
+        },
+        // 模式
+        mode: {
+            type: String,
+            required: true
+        },
+        // id如果是新增模式可以不传
+        id: {
+            default: ''
+        },
+        // 创建的数据源类型
+        type: {
+            default: ''
+        },
+        modalCfg: {
+            type: Object,
+            required: true
+        }
     },
-    // 创建的数据源类型
-    type: {
-      default: "",
+    emits: ['finish', 'cancel', 'update:visible'],
+    data() {
+        return {
+            // 是否加载中
+            confirmLoading: false,
+            dataList: [],
+            // 表单数据
+            formState: {
+                // 数据源名称
+                dataSourceName: '',
+                // 数据源描述
+                dataSourceDesc: '',
+                // 连接参数
+                connectParams: {
+                    host: '',
+                    port: '',
+                    username: '',
+                    password: ''
+                },
+                label: '',
+                comment: ''
+            },
+
+            // port
+            portValidateStatus: '',
+            portErrorMsg: null
+        };
     },
-    modalCfg: {
-      type: Object,
-      required: true
-    }
-  },
-  emits: ["finish", "cancel", "update:visible"],
-  data() {
-    return {
-      // 是否加载中
-      confirmLoading: false,
-      dataList: [],
-      // 表单数据
-      formState: {
-        // 数据源名称
-        dataSourceName: "",
-        // 数据源描述
-        dataSourceDesc: "",
-        // 连接参数
-        connectParams: {
-          host: "",
-          port: "",
-          username: "",
-          password: "",
+    watch: {
+        id(val) {
+            // if (val) this.getDataSourceById();
         },
-        label: '',
-        comment: "",
-      },
-
-      //port 
-      portValidateStatus: '',
-      portErrorMsg: null
-    };
-  },
-  watch: {
-    id(val) {
-      //if (val) this.getDataSourceById();
+        type() {
+            this.init();
+        }
     },
-    type() {
-      this.init()
-    }
-  },
-  methods: {
-    init() {
-      /*this.formState = {
+    methods: {
+        init() {
+            /* this.formState = {
         // 数据源名称
         dataSourceName: "",
         // 数据源描述
@@ -132,9 +134,9 @@ export default {
       //port
       this.portValidateStatus = ''
       this.portErrorMsg = null
-      this.confirmLoading = false*/
-    },
-    /*validatePort() {
+      this.confirmLoading = false */
+        },
+        /* validatePort() {
       if (!/^[0-9]*$/.test(this.formState.connectParams.port)) {
         this.portValidateStatus = 'error'
         this.portErrorMsg = '请正确输入端口号'
@@ -154,72 +156,83 @@ export default {
         labels: info.labels,
         comment: info.comment || "",
       };
-    },*/
-    async handleConnect(formState, originalDefine) {
-      formState = JSON.parse(formState)
-      let connectParams = {}
-      originalDefine.forEach(item => {
-        connectParams[item.key] = formState[item.key]
-      })
-      await testDataSourceNotSavedConnect({
-        dataSourceTypeId: this.type,
-        createSystem: this.modalCfg.createSystem,
-        createIdentify: "",
-        dataSourceName: formState.dataSourceName,
-        dataSourceDesc: formState.dataSourceDesc || "",
-        label: formState.label || "",
-        comment: formState.comment || "更新",
-        connectParams: {
-          ...connectParams
-        }
-      });
-      message.success("连接成功")
-    },
-    // modal完成
-    async handleOk(formState, originalDefine) {
-      formState = JSON.parse(formState)
-      let connectParams = {}
-      originalDefine.forEach(item => {
-        connectParams[item.key] = formState[item.key]
-      })
-      this.confirmLoading = true;
-      try {
-        if (this.mode === "create") {
-          await createDataSource({
-            dataSourceTypeId: this.type,
-            createSystem: this.modalCfg.createSystem,
-            createIdentify: "",
-            dataSourceName: formState.dataSourceName,
-            dataSourceDesc: formState.dataSourceDesc || "",
-            label: formState.label || "",
-            comment: formState.comment || "更新",
-            connectParams: {
-              ...connectParams
-            }
-          });
-          message.success("创建成功");
-        }
-        if (this.mode === "edit") {
-          await updateDataSource(this.id, {
-            dataSourceTypeId: this.type,
-            createSystem: this.modalCfg.createSystem,
-            createIdentify: "",
-            dataSourceName: formState.dataSourceName,
-            dataSourceDesc: formState.dataSourceDesc || "",
-            label: formState.label || "",
-            comment: formState.comment || "更新",
-            connectParams: {
-              ...connectParams
-            }
-          });
-          message.success("修改成功");
+    }, */
+        async handleConnect(formState, originalDefine) {
+            // console.log('this.modalCfg.isTested: ', this.modalCfg.isTested);
+            // if (!this.modalCfg.isTested) {
+            //     this.modalCfg.isTested = true;
+            //     console.log('this.modalCfg.isTested2: ', this.modalCfg.isTested);
+            formState = JSON.parse(formState);
+            const connectParams = {};
+            originalDefine.forEach((item) => {
+                connectParams[item.key] = formState[item.key];
+            });
+            // try {
+            await testDataSourceNotSavedConnect({
+                dataSourceTypeId: this.type,
+                createSystem: this.modalCfg.createSystem,
+                createIdentify: '',
+                dataSourceName: formState.dataSourceName,
+                dataSourceDesc: formState.dataSourceDesc || '',
+                label: formState.label || '',
+                comment: formState.comment || '更新',
+                connectParams: {
+                    ...connectParams
+                }
+            });
+            //     message.success('连接成功');
+            //     this.modalCfg.isTested = false;
+            // } catch (error) {
+            //     console.log('error: ', error);
+            //     this.modalCfg.isTested = false;
+            // }
+            // }
+        },
+        // modal完成
+        async handleOk(formState, originalDefine) {
+            formState = JSON.parse(formState);
+            const connectParams = {};
+            originalDefine.forEach((item) => {
+                connectParams[item.key] = formState[item.key];
+            });
+            this.confirmLoading = true;
+            try {
+                if (this.mode === 'create') {
+                    await createDataSource({
+                        dataSourceTypeId: this.type,
+                        createSystem: this.modalCfg.createSystem,
+                        createIdentify: '',
+                        dataSourceName: formState.dataSourceName,
+                        dataSourceDesc: formState.dataSourceDesc || '',
+                        label: formState.label || '',
+                        comment: formState.comment || '更新',
+                        connectParams: {
+                            ...connectParams
+                        }
+                    });
+                    message.success('创建成功');
+                }
+                if (this.mode === 'edit') {
+                    await updateDataSource(this.id, {
+                        dataSourceTypeId: this.type,
+                        createSystem: this.modalCfg.createSystem,
+                        createIdentify: '',
+                        dataSourceName: formState.dataSourceName,
+                        dataSourceDesc: formState.dataSourceDesc || '',
+                        label: formState.label || '',
+                        comment: formState.comment || '更新',
+                        connectParams: {
+                            ...connectParams
+                        }
+                    });
+                    message.success('修改成功');
+                }
+            } catch (error) {}
+            this.confirmLoading = false;
+            this.$emit('update:visible', false);
+            this.$emit('finish');
         }
-      } catch (error) {}
-      this.confirmLoading = false;
-      this.$emit("update:visible", false);
-      this.$emit("finish");
-    },
-  },
+    }
 };
 </script>
 
diff --git a/web/src/pages/dataSourceManage/index.vue b/web/src/pages/dataSourceManage/index.vue
index 5f9d612d9..fa8389a2c 100644
--- a/web/src/pages/dataSourceManage/index.vue
+++ b/web/src/pages/dataSourceManage/index.vue
@@ -38,32 +38,32 @@
                     <template #action="row">
                         <a-space>
                             <a-button
-                                v-show="row.text.versionId"
+                                :disabled="!row.text.versionId"
                                 size="small"
                                 type="link"
                                 @click="handleEdit(row.text)"
                             >
                                 {{$t("dataSource.table.list.columns.actions.editButton")}}
                             </a-button>
-                            <span v-show="row.text.versionId" style="color: #DEE4EC">|</span>
+                            <span style="color: #DEE4EC">|</span>
                             <a-button
-                                v-show="!row.text.expire && row.text.versionId"
+                                :disabled="!(!row.text.expire && row.text.versionId)"
                                 size="small"
                                 type="link"
                                 @click="handleExpire(row.text.id)"
                             >
                                 {{$t("dataSource.table.list.columns.actions.expireButton")}}
                             </a-button>
-                            <span v-show="!row.text.expire && row.text.versionId" style="color: #DEE4EC">|</span>
+                            <span style="color: #DEE4EC">|</span>
                             <a-button
-                                v-show="row.text.versionId"
+                                :disabled="!row.text.versionId"
                                 size="small"
                                 type="link"
                                 @click="handleTestConnect(row)"
                             >
                                 {{$t("dataSource.table.list.columns.actions.testConnectButton")}}
                             </a-button>
-                            <span v-show="row.text.versionId" style="color: #DEE4EC">|</span>
+                            <span style="color: #DEE4EC">|</span>
                             <a-popconfirm
                                 title="是否删除?"
                                 ok-text="确定"
@@ -209,7 +209,7 @@ export default {
             },
             {
                 title: t('dataSource.table.list.columns.title.action'),
-                align: 'left',
+                align: 'center',
                 slots: { customRender: 'action' }
             }
         ]);

From e454d88c5b66fdf09ea45548024922ddb23f4e8d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?liveipooli=28=E6=9D=8E=E4=B8=BA=29?= <liveipooli@webank.com>
Date: Mon, 25 Apr 2022 17:19:43 +0800
Subject: [PATCH 4/4] fix: 264471

---
 .../jobManagement/components/createJob.vue    | 559 +++++++++---------
 1 file changed, 282 insertions(+), 277 deletions(-)

diff --git a/web/src/pages/jobManagement/components/createJob.vue b/web/src/pages/jobManagement/components/createJob.vue
index aa54212cb..53625bd3d 100644
--- a/web/src/pages/jobManagement/components/createJob.vue
+++ b/web/src/pages/jobManagement/components/createJob.vue
@@ -1,295 +1,300 @@
 <template>
-  <div class="container">
-    <a-modal
-      :visible="visible"
-      :title="actionMap[mode]"
-      @ok="handleOk"
-      @cancel="handleCancel"
-    >
-      <template #footer>
-        <a-button key="back" @click="handleCancel">{{
-          $t('job.action.cancel')
-        }}</a-button>
-        <a-button
-          key="submit"
-          type="primary"
-          :loading="loading"
-          @click="handleOk"
+    <div class="container">
+        <a-modal
+            :visible="visible"
+            :title="actionMap[mode]"
+            @ok="handleOk"
+            @cancel="handleCancel"
         >
-          {{ $t('job.action.save') }}
-        </a-button>
-      </template>
-      <a-form
-        ref="formRef"
-        :model="formState"
-        :rules="rules"
-        :label-col="labelCol"
-        :wrapper-col="wrapperCol"
-      >
-        <a-form-item
-          v-if="mode === 'copy'"
-          ref="originName"
-          :label="$t('job.jobDetail.originJob')"
-          name="originName"
-        >
-          <a-input v-model:value="formState.originName" disabled/>
-        </a-form-item>
-        <a-form-item
-          ref="jobName"
-          :label="$t('job.jobDetail.name')"
-          name="jobName"
-        >
-          <a-input v-model:value="formState.jobName" :maxLength="100" />
-        </a-form-item>
-        <a-form-item :label="$t('job.jobDetail.label')" name="jobLabels">
-          <a-tag
-            v-for="tag in state.tags"
-            :key="tag"
-            closable
-            @close="handleClose(tag)"
-          >
-            {{ tag }}
-          </a-tag>
-          <a-input
-            v-if="state.inputVisible"
-            ref="inputRef"
-            type="text"
-            size="small"
-            :style="{ width: '100px' }"
-            v-model:value="state.inputValue"
-            @blur="handleInputConfirm"
-            @keyup.enter="handleInputConfirm"
-            :maxLength="20"
-          />
-          <a-tag
-            v-else
-            @click="showInput"
-            style="background: #fff; border-style: dashed"
-          >
-            <plus-outlined />
-          </a-tag>
-        </a-form-item>
-        <a-form-item
-          :label="$t('job.jobDetail.type')"
-          name="jobType"
-          v-if="!formState.originName"
-        >
-          <a-select v-model:value="formState.jobType">
-            <a-select-option value="OFFLINE">{{$t('job.type.offline')}}</a-select-option>
-            <!--<a-select-option value="STREAM">{{$t('job.type.stream')}} </a-select-option>-->
-          </a-select>
-        </a-form-item>
-        <a-form-item :label="$t('job.jobDetail.engine')" name="engineType">
-          <a-select
-            v-model:value="formState.engineType"
-            :disabled="!!formState.originName"
-          >
-            <a-select-option v-for="engine in engines" :value="engine" :key='engine'>{{engine}}</a-select-option>
-          </a-select>
-        </a-form-item>
-        <a-form-item :label="$t('job.jobDetail.description')" name="jobDesc">
-          <a-textarea v-model:value="formState.jobDesc" :maxLength="200" />
-        </a-form-item>
-      </a-form>
-    </a-modal>
-  </div>
+            <template #footer>
+                <a-button key="back" @click="handleCancel">
+                    {{$t('job.action.cancel')}}
+                </a-button>
+                <a-button
+                    key="submit"
+                    type="primary"
+                    :loading="loading"
+                    @click="handleOk"
+                >
+                    {{$t('job.action.save')}}
+                </a-button>
+            </template>
+            <a-form
+                ref="formRef"
+                :model="formState"
+                :rules="rules"
+                :label-col="labelCol"
+                :wrapper-col="wrapperCol"
+            >
+                <a-form-item
+                    v-if="mode === 'copy'"
+                    ref="originName"
+                    :label="$t('job.jobDetail.originJob')"
+                    name="originName"
+                >
+                    <a-input v-model:value="formState.originName" disabled />
+                </a-form-item>
+                <a-form-item
+                    ref="jobName"
+                    :label="$t('job.jobDetail.name')"
+                    name="jobName"
+                >
+                    <a-input v-model:value="formState.jobName" :maxLength="100" />
+                </a-form-item>
+                <a-form-item :label="$t('job.jobDetail.label')" name="jobLabels">
+                    <a-tag
+                        v-for="tag in state.tags"
+                        :key="tag"
+                        closable
+                        @close="handleClose(tag)"
+                    >
+                        {{tag}}
+                    </a-tag>
+                    <a-input
+                        v-if="state.inputVisible"
+                        ref="inputRef"
+                        v-model:value="state.inputValue"
+                        type="text"
+                        size="small"
+                        :style="{ width: '100px' }"
+                        :maxLength="20"
+                        @blur="handleInputConfirm"
+                        @keyup.enter="handleInputConfirm"
+                    />
+                    <a-tag
+                        v-else
+                        style="background: #fff; border-style: dashed"
+                        @click="showInput"
+                    >
+                        <plus-outlined />
+                    </a-tag>
+                </a-form-item>
+                <a-form-item
+                    v-if="!formState.originName"
+                    :label="$t('job.jobDetail.type')"
+                    name="jobType"
+                >
+                    <a-select v-model:value="formState.jobType">
+                        <a-select-option value="OFFLINE">{{$t('job.type.offline')}}</a-select-option>
+                        <!--<a-select-option value="STREAM">{{$t('job.type.stream')}} </a-select-option>-->
+                    </a-select>
+                </a-form-item>
+                <a-form-item :label="$t('job.jobDetail.engine')" name="engineType">
+                    <a-select
+                        v-model:value="formState.engineType"
+                        :disabled="!!formState.originName"
+                    >
+                        <a-select-option v-for="engine in engines" :key="engine" :value="engine">{{engine}}</a-select-option>
+                    </a-select>
+                </a-form-item>
+                <a-form-item :label="$t('job.jobDetail.description')" name="jobDesc">
+                    <a-textarea v-model:value="formState.jobDesc" :maxLength="200" />
+                </a-form-item>
+            </a-form>
+        </a-modal>
+    </div>
 </template>
 <script>
 import {
-  defineComponent,
-  reactive,
-  ref,
-  toRaw,
-  watchEffect,
-  toRefs,
-  nextTick,
-  onMounted
+    defineComponent,
+    reactive,
+    ref,
+    toRaw,
+    watchEffect,
+    toRefs,
+    nextTick,
+    onMounted
 } from 'vue';
 import { PlusOutlined } from '@ant-design/icons-vue';
 import { useI18n } from '@fesjs/fes';
-import { createJob, copyJob, modifyJob, getEngineType } from '@/common/service';
 import { message } from 'ant-design-vue';
-export default defineComponent({
-  components: {
-    PlusOutlined,
-  },
-  props: {
-    visible: Boolean,
-    editData: Object,
-    projectId: String,
-    mode: String
-  },
-  emits: ['handleJobAction'], //需要声明emits
-  setup(props, context) {
-    const actionMap = {
-      create: '创建任务',
-      copy: '复制任务',
-      modify: '编辑任务'
-    }
-    const successMap = {
-      create: '创建任务成功',
-      copy: '复制任务成功',
-      modify: '编辑任务成功'
-    }
-    const { t } = useI18n({ useScope: 'global' });
-    const formRef = ref();
-    const formState = reactive({
-      id: '',
-      originName: '',
-      jobName: '',
-      jobType: 'OFFLINE',
-      engineType: '',
-      jobLabels: '',
-      jobDesc: '',
-    });
-    const inputRef = ref();
-    const state = reactive({
-      tags: [],
-      inputVisible: false,
-      inputValue: '',
-    });
-    const _setFormData = (editData) => {
-      formState.jobName = editData.jobName || ''
-      formState.jobType = editData.jobType || ''
-      formState.engineType = editData.engineType || ''
-      formState.jobLabels = editData.jobLabels || ''
-      formState.jobDesc = editData.jobDesc || ''
-      formState.id = editData.id || ''
-    }
-    watchEffect(() => {
-      const { editData, mode } = props
-      _setFormData(editData)
-      if (mode === 'copy') {
-        formState.originName = editData.jobName;
-        formState.jobName = ''
-        state.tags = editData.jobLabels ? editData.jobLabels.split(',') : []
-      } else if (mode === 'modify'){
-        state.tags = editData.jobLabels ? editData.jobLabels.split(',') : []
-      }
-    });
-    const engines = reactive({
-      engines: [],
-    })
-    onMounted(async () => {
-      const data = await getEngineType();
-      engines.engines = data && data.result || [];
-      console.log(data);
-    })
-    const rules = {
-      jobName: [
-        {
-          required: true,
-          message: t('job.jobDetail.jobNameEmpty'),
-          trigger: 'blur',
-        },
-      ],
-      jobType: [
-        {
-          required: true,
-          message: t('job.jobDetail.jobTypeEmpty'),
-          trigger: 'change',
-        },
-      ],
-      engineType: [
-        {
-          required: true,
-          message: t('job.jobDetail.engineEmpty'),
-          trigger: 'change',
-        },
-      ],
-    };
+import {
+    createJob, copyJob, modifyJob, getEngineType
+} from '@/common/service';
 
-    const handleOk = () => {
-      formRef.value
-        .validate()
-        .then(async () => {
-          const data = toRaw(formState);
-          const tags = toRaw(state.tags);
-          const { originName, ...rest } = data;
-          const editData = toRaw(props.editData);
-          let params, res
-          if (props.mode === 'copy') {
-            params = {
-              jobName: rest.jobName,
-              jobLabels: tags.join(','),
-              jobDesc: rest.jobDesc,
-            }
-            res = await copyJob(editData.id, params)
-          } else if (props.mode === 'create') {
-            params = {
-              ...rest,
-              projectId: props.projectId,
-              jobLabels: tags.join(','),
-            }
-            res = await createJob(params)
-          } else if (props.mode === 'modify') {
-            params = {
-              ...rest,
-              jobLabels: tags.join(','),
+export default defineComponent({
+    components: {
+        PlusOutlined
+    },
+    props: {
+        visible: Boolean,
+        editData: Object,
+        projectId: String,
+        mode: String
+    },
+    emits: ['handleJobAction'], // 需要声明emits
+    setup(props, context) {
+        const actionMap = {
+            create: '创建任务',
+            copy: '复制任务',
+            modify: '编辑任务'
+        };
+        const successMap = {
+            create: '创建任务成功',
+            copy: '复制任务成功',
+            modify: '编辑任务成功'
+        };
+        const { t } = useI18n({ useScope: 'global' });
+        const formRef = ref();
+        const formState = reactive({
+            id: '',
+            originName: '',
+            jobName: '',
+            jobType: 'OFFLINE',
+            engineType: '',
+            jobLabels: '',
+            jobDesc: ''
+        });
+        const inputRef = ref();
+        const state = reactive({
+            tags: [],
+            inputVisible: false,
+            inputValue: ''
+        });
+        const _setFormData = (editData) => {
+            formState.jobName = editData.jobName || '';
+            formState.jobType = editData.jobType || '';
+            formState.engineType = editData.engineType || '';
+            formState.jobLabels = editData.jobLabels || '';
+            formState.jobDesc = editData.jobDesc || '';
+            formState.id = editData.id || '';
+        };
+        watchEffect(() => {
+            const { editData, mode } = props;
+            _setFormData(editData);
+            if (mode === 'copy') {
+                formState.originName = editData.jobName;
+                formState.jobName = '';
+                state.tags = editData.jobLabels ? editData.jobLabels.split(',') : [];
+            } else if (mode === 'modify') {
+                state.tags = editData.jobLabels ? editData.jobLabels.split(',') : [];
             }
-            res = await modifyJob(editData.id, params)
-          }
-          if (res && res.result) {
-            message.success(successMap[props.mode])
-            context.emit('handleJobAction', { ...params, ...editData });
-            formRef.value.resetFields();
-            state.tags = []
-            state.inputVisible = false
-            state.inputValue = ''
-          }
-        })
-        .catch((e) => {
-          console.log(e);
         });
-    };
-    const handleCancel = () => {
-      context.emit('handleJobAction');
-      formRef.value.resetFields();
-      state.tags = []
-      state.inputVisible = false
-      state.inputValue = ''
-    };
+        const engines = reactive({
+            engines: []
+        });
+        onMounted(async () => {
+            const data = await getEngineType();
+            engines.engines = data && data.result || [];
+            console.log(data);
+        });
+        const rules = {
+            jobName: [
+                {
+                    required: true,
+                    message: t('job.jobDetail.jobNameEmpty'),
+                    trigger: 'blur'
+                }
+            ],
+            jobType: [
+                {
+                    required: true,
+                    message: t('job.jobDetail.jobTypeEmpty'),
+                    trigger: 'change'
+                }
+            ],
+            engineType: [
+                {
+                    required: true,
+                    message: t('job.jobDetail.engineEmpty'),
+                    trigger: 'change'
+                }
+            ]
+        };
 
-    const handleClose = (removedTag) => {
-      const tags = state.tags.filter((tag) => tag !== removedTag);
-      state.tags = [...tags];
-    };
+        const handleOk = () => {
+            formRef.value
+                .validate()
+                .then(async () => {
+                    const data = toRaw(formState);
+                    const tags = toRaw(state.tags);
+                    const { originName, ...rest } = data;
+                    const editData = toRaw(props.editData);
+                    let params; let
+                        res;
+                    if (props.mode === 'copy') {
+                        params = {
+                            jobName: rest.jobName,
+                            jobLabels: tags.join(','),
+                            jobDesc: rest.jobDesc
+                        };
+                        res = await copyJob(editData.id, params);
+                    } else if (props.mode === 'create') {
+                        params = {
+                            ...rest,
+                            projectId: props.projectId,
+                            jobLabels: tags.join(',')
+                        };
+                        res = await createJob(params);
+                    } else if (props.mode === 'modify') {
+                        params = {
+                            ...rest,
+                            jobLabels: tags.join(',')
+                        };
+                        res = await modifyJob(editData.id, params);
+                    }
+                    if (res && res.result) {
+                        message.success(successMap[props.mode]);
+                        context.emit('handleJobAction', { ...params, ...editData });
+                        formRef.value.resetFields();
+                        editData.jobLabels = res.result.jobLabels ? res.result.jobLabels : '';
+                        state.tags = [];
+                        state.inputVisible = false;
+                        state.inputValue = '';
+                    }
+                })
+                .catch((e) => {
+                    console.log(e);
+                });
+        };
+        const handleCancel = () => {
+            context.emit('handleJobAction');
+            formRef.value.resetFields();
+            state.tags = [];
+            state.inputVisible = false;
+            state.inputValue = '';
+        };
 
-    const showInput = () => {
-      state.inputVisible = true;
-      nextTick(() => {
-        inputRef.value.focus();
-      });
-    };
+        const handleClose = (removedTag) => {
+            const tags = state.tags.filter(tag => tag !== removedTag);
+            state.tags = [...tags];
+        };
 
-    const handleInputConfirm = () => {
-      const inputValue = state.inputValue;
-      let tags = state.tags;
-      if (inputValue && !tags.includes(inputValue.trim())) {
-        tags = [...tags, inputValue.trim()];
-      }
-      state.tags = tags
-      state.inputVisible = false
-      state.inputValue = ''
-    };
+        const showInput = () => {
+            state.inputVisible = true;
+            nextTick(() => {
+                inputRef.value.focus();
+            });
+        };
 
-    return {
-      formRef,
-      loading: false,
-      labelCol: { span: 5 },
-      wrapperCol: { span: 19 },
-      formState,
-      rules,
-      handleOk,
-      handleCancel,
-      state,
-      ...toRefs(engines),
-      handleClose,
-      showInput,
-      handleInputConfirm,
-      inputRef,
-      actionMap
-    };
-  },
+        const handleInputConfirm = () => {
+            const inputValue = state.inputValue;
+            let tags = state.tags;
+            if (inputValue && !tags.includes(inputValue.trim())) {
+                tags = [...tags, inputValue.trim()];
+            }
+            state.tags = tags;
+            state.inputVisible = false;
+            state.inputValue = '';
+        };
+
+        return {
+            formRef,
+            loading: false,
+            labelCol: { span: 5 },
+            wrapperCol: { span: 19 },
+            formState,
+            rules,
+            handleOk,
+            handleCancel,
+            state,
+            ...toRefs(engines),
+            handleClose,
+            showInput,
+            handleInputConfirm,
+            inputRef,
+            actionMap
+        };
+    }
 });
 </script>