From e288dc5a2f5a04d0ce2a443c6001473dd1cf66fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E4=BA=9A=E9=BE=99?= <1653699980@qq.com>
Date: Mon, 3 Mar 2025 11:52:41 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E8=BF=81=E7=A7=BB=E9=87=8D?=
 =?UTF-8?q?=E8=A6=81=E6=93=8D=E4=BD=9C=E6=B7=BB=E5=8A=A0=E7=A1=AE=E8=AE=A4?=
 =?UTF-8?q?=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../web-ui/src/locale/locale/en.json          |  82 +++++++------
 .../web-ui/src/locale/locale/zh-cn.json       |  82 +++++++------
 .../web-ui/src/views/detail/index.vue         |  34 +++---
 .../web-ui/src/views/list/index.vue           | 114 +++++++++---------
 4 files changed, 159 insertions(+), 153 deletions(-)

diff --git a/plugins/data-migration/web-ui/src/locale/locale/en.json b/plugins/data-migration/web-ui/src/locale/locale/en.json
index 4d814aea9..6736c4cfb 100644
--- a/plugins/data-migration/web-ui/src/locale/locale/en.json
+++ b/plugins/data-migration/web-ui/src/locale/locale/en.json
@@ -31,7 +31,9 @@
             "5q08sf2dk800": "Are you sure to delete this task?",
             "5q08sf2dka40": "Delete",
             "5q08sf2dkc80": " h",
-            "5q08sf2dkek0": " min"
+            "5q08sf2dkek0": " min",
+            "endMigration": "Are you sure to end the migration?",
+            "resetConfirm": "Are you sure to reset?"
         }
     },
     "components": {
@@ -766,45 +768,45 @@
             "savesuc": "Creation successful",
             "saveerr": "There are unfilled items on the current page.",
             "playback": "Playback",
-          "addHost": {
-            "else1": "Please enter the correct port number",
-            "else2": "Remember",
-            "currentStatus": "Current status",
-            "ipAddress": "Intranet IP",
-            "name": "name",
-            "namePlaceholder": "Please enter the Host Name",
-            "username": "username",
-            "usernamePlaceholder": "Please enter username",
-            "tags": "label",
-            "tagsPlaceholder": "Please enter or select a label",
-            "5mphy3snvg80": "available",
-            "5mphy3snwq40": "Not available",
-            "5mphy3snwxs0": "cancel",
-            "5mphy3snx3o0": "test",
-            "5mphy3snx7c0": "confirm",
-            "5mphy3snxdo0": "Please enter the Intranet IP",
-            "5mphy3snxis0": "External IP",
-            "5mphy3snxmw0": "Please enter the External IP",
-            "5mphy3snxtc0": "Port",
-            "5mphy3snxzk0": "Please enter the port number",
-            "5mphy3sny4w0": "password",
-            "5mphy3snyao0": "Please enter your password.",
-            "5mphy3snyg40": "Available area",
-            "5mphy3snyn80": "Select an AZ",
-            "5mphy3snysg0": "remark",
-            "5mphy3snyxc0": "Please enter a remark",
-            "5mphy3snz5k0": "Adding a Dedicated Server",
-            "5mphy3snzb80": "The current server is unavailable",
-            "5mphy3snzrk0": "Edit Host",
-            "ipselmsg": "Please select or enter an IP address",
-            "ipaddmsg": "Enter the correct IP address",
-            "portmsg": "Please enter the correct port number",
-            "spacemsg": "The value cannot be pure space",
-            "passwordmsg": "Please enter the user password",
-            "confirm": "Confirm",
-            "pwdsavmsg": "The system will save the password of the user. Do you want to save the password?",
-            "host": "Host"
-          }
+            "addHost": {
+                "else1": "Please enter the correct port number",
+                "else2": "Remember",
+                "currentStatus": "Current status",
+                "ipAddress": "Intranet IP",
+                "name": "name",
+                "namePlaceholder": "Please enter the Host Name",
+                "username": "username",
+                "usernamePlaceholder": "Please enter username",
+                "tags": "label",
+                "tagsPlaceholder": "Please enter or select a label",
+                "5mphy3snvg80": "available",
+                "5mphy3snwq40": "Not available",
+                "5mphy3snwxs0": "cancel",
+                "5mphy3snx3o0": "test",
+                "5mphy3snx7c0": "confirm",
+                "5mphy3snxdo0": "Please enter the Intranet IP",
+                "5mphy3snxis0": "External IP",
+                "5mphy3snxmw0": "Please enter the External IP",
+                "5mphy3snxtc0": "Port",
+                "5mphy3snxzk0": "Please enter the port number",
+                "5mphy3sny4w0": "password",
+                "5mphy3snyao0": "Please enter your password.",
+                "5mphy3snyg40": "Available area",
+                "5mphy3snyn80": "Select an AZ",
+                "5mphy3snysg0": "remark",
+                "5mphy3snyxc0": "Please enter a remark",
+                "5mphy3snz5k0": "Adding a Dedicated Server",
+                "5mphy3snzb80": "The current server is unavailable",
+                "5mphy3snzrk0": "Edit Host",
+                "ipselmsg": "Please select or enter an IP address",
+                "ipaddmsg": "Enter the correct IP address",
+                "portmsg": "Please enter the correct port number",
+                "spacemsg": "The value cannot be pure space",
+                "passwordmsg": "Please enter the user password",
+                "confirm": "Confirm",
+                "pwdsavmsg": "The system will save the password of the user. Do you want to save the password?",
+                "host": "Host"
+            }
         },
         "config": {
             "title": "Transcribe and Playback Parameter Configuration",
diff --git a/plugins/data-migration/web-ui/src/locale/locale/zh-cn.json b/plugins/data-migration/web-ui/src/locale/locale/zh-cn.json
index 016a0258a..85bf10981 100644
--- a/plugins/data-migration/web-ui/src/locale/locale/zh-cn.json
+++ b/plugins/data-migration/web-ui/src/locale/locale/zh-cn.json
@@ -31,7 +31,9 @@
             "5q08sf2dk800": "你确认删除此任务吗？",
             "5q08sf2dka40": "删除",
             "5q08sf2dkc80": "小时",
-            "5q08sf2dkek0": "分钟"
+            "5q08sf2dkek0": "分钟",
+            "endMigration": "你确认结束迁移吗？",
+            "resetConfirm": "你确认重置吗？"
         }
     },
     "components": {
@@ -767,45 +769,45 @@
             "savesuc": "创建成功",
             "saveerr": "当前页面有未填写项",
             "playback": "回放",
-          "addHost": {
-            "else1": "请输入正确的端口号",
-            "else2": "记住密码",
-            "currentStatus": "当前状态",
-            "ipAddress": "内网IP",
-            "name": "名称",
-            "namePlaceholder": "请输入物理机名称",
-            "username": "用户名",
-            "usernamePlaceholder": "请输入用户名称",
-            "tags": "标签",
-            "tagsPlaceholder": "请输入或者选择标签",
-            "5mphy3snvg80": "可用",
-            "5mphy3snwq40": "不可用",
-            "5mphy3snwxs0": "取消",
-            "5mphy3snx3o0": "连通性测试",
-            "5mphy3snx7c0": "确定",
-            "5mphy3snxdo0": "请输入内网IP",
-            "5mphy3snxis0": "外网IP",
-            "5mphy3snxmw0": "请输入外网IP",
-            "5mphy3snxtc0": "端口号",
-            "5mphy3snxzk0": "请输入端口号",
-            "5mphy3sny4w0": "密码",
-            "5mphy3snyao0": "请输入密码",
-            "5mphy3snyg40": "可用区",
-            "5mphy3snyn80": "请选择所属AZ",
-            "5mphy3snysg0": "备注",
-            "5mphy3snyxc0": "请输入备注",
-            "5mphy3snz5k0": "新增物理机",
-            "5mphy3snzb80": "当前服务器不可用",
-            "5mphy3snzrk0": "编辑物理机",
-            "ipselmsg": "请选择或输入IP地址",
-            "ipaddmsg": "请输入正确的IP地址",
-            "portmsg": "请输入正确的端口号",
-            "spacemsg": "不能为纯空格",
-            "passwordmsg": "请输入用户密码",
-            "confirm": "确认",
-            "pwdsavmsg": "系统将会保存该用户的密码，是否继续保存？",
-            "host": "主机信息"
-          }
+            "addHost": {
+                "else1": "请输入正确的端口号",
+                "else2": "记住密码",
+                "currentStatus": "当前状态",
+                "ipAddress": "内网IP",
+                "name": "名称",
+                "namePlaceholder": "请输入物理机名称",
+                "username": "用户名",
+                "usernamePlaceholder": "请输入用户名称",
+                "tags": "标签",
+                "tagsPlaceholder": "请输入或者选择标签",
+                "5mphy3snvg80": "可用",
+                "5mphy3snwq40": "不可用",
+                "5mphy3snwxs0": "取消",
+                "5mphy3snx3o0": "连通性测试",
+                "5mphy3snx7c0": "确定",
+                "5mphy3snxdo0": "请输入内网IP",
+                "5mphy3snxis0": "外网IP",
+                "5mphy3snxmw0": "请输入外网IP",
+                "5mphy3snxtc0": "端口号",
+                "5mphy3snxzk0": "请输入端口号",
+                "5mphy3sny4w0": "密码",
+                "5mphy3snyao0": "请输入密码",
+                "5mphy3snyg40": "可用区",
+                "5mphy3snyn80": "请选择所属AZ",
+                "5mphy3snysg0": "备注",
+                "5mphy3snyxc0": "请输入备注",
+                "5mphy3snz5k0": "新增物理机",
+                "5mphy3snzb80": "当前服务器不可用",
+                "5mphy3snzrk0": "编辑物理机",
+                "ipselmsg": "请选择或输入IP地址",
+                "ipaddmsg": "请输入正确的IP地址",
+                "portmsg": "请输入正确的端口号",
+                "spacemsg": "不能为纯空格",
+                "passwordmsg": "请输入用户密码",
+                "confirm": "确认",
+                "pwdsavmsg": "系统将会保存该用户的密码，是否继续保存？",
+                "host": "主机信息"
+            }
         },
         "config": {
             "title": "录制回放参数配置",
diff --git a/plugins/data-migration/web-ui/src/views/detail/index.vue b/plugins/data-migration/web-ui/src/views/detail/index.vue
index 0fc53f48e..75b282292 100644
--- a/plugins/data-migration/web-ui/src/views/detail/index.vue
+++ b/plugins/data-migration/web-ui/src/views/detail/index.vue
@@ -24,8 +24,8 @@
     <div class="progress-con">
       <span class="progress-info">{{ $t('detail.index.5q09asiwg0g0') }}</span>
       <a-progress size="large" :percent="task.execStatus === TaskStatus.Completed
-          ? 1
-          : Number(task.execProgress) || 0
+        ? 1
+        : Number(task.execProgress) || 0
         " />
       <a-button type="text" @click="loopSubTaskStatus">
         <template #icon>
@@ -120,8 +120,8 @@
               <a-popconfirm :content="tooltipMap(record.checkDataLevelingAndIncrementFinish)"
                 @ok="stopSubIncrease(record)">
                 <a-button v-if="(record.migrationModelId === TaskMode.Online &&
-                    record.execStatus ===
-                    SUB_TASK_STATUS.INCREMENTAL_RUNNING) ||
+                  record.execStatus ===
+                  SUB_TASK_STATUS.INCREMENTAL_RUNNING) ||
                   record.execStatus === SUB_TASK_STATUS.INCREMENTAL_FINISHED
                   " size="mini" type="text" :loading="record.execStatus === SUB_TASK_STATUS.INCREMENTAL_FINISHED
     ">
@@ -135,7 +135,7 @@
               </a-popconfirm>
               <a-button v-if="record.migrationModelId === TaskMode.Online &&
                   record.execStatus === SUB_TASK_STATUS.INCREMENTAL_STOPPED
-                  " size="mini" type="text" @click="startSubReverse(record)">
+                  " size="mini" type="text" @click="startSubReverse(record)" :loading="startReverseLoading">
                 <template #icon>
                   <icon-play-arrow />
                 </template>
@@ -143,15 +143,17 @@
                   $t('detail.index.5q09asiwkq40')
                 }}</template>
               </a-button>
-              <a-button v-if="record.execStatus !== SUB_TASK_STATUS.MIGRATION_FINISH" size="mini" type="text"
-                @click="stopSubTask(record)">
-                <template #icon>
-                  <icon-stop />
-                </template>
-                <template #default>{{
-                  $t('detail.index.5q09asiwl5g0')
-                }}</template>
-              </a-button>
+              <a-popconfirm v-if="record.execStatus !== SUB_TASK_STATUS.MIGRATION_FINISH"
+                :content="$t('list.index.endMigration')" @ok="stopSubTask(record)">
+                <a-button size="mini" type="text">
+                  <template #icon>
+                    <icon-stop />
+                  </template>
+                  <template #default>{{
+                    $t('detail.index.5q09asiwl5g0')
+                  }}</template>
+                </a-button>
+              </a-popconfirm>
               <a-button size="mini" type="text" @click="handleLog(record)">
                 <template #icon>
                   <icon-file />
@@ -674,14 +676,18 @@ const stopSubIncrease = (row) => {
 }
 
 // start sub task reverse
+const startReverseLoading = ref(false)
 const startSubReverse = (row) => {
+  startReverseLoading.value = true
   subTaskStartReverse(row.id)
     .then(() => {
       Message.success('Start success')
+      startReverseLoading.value = false
       loopSubTaskStatus()
       getSubTaskList()
     })
     .catch((e) => {
+      startReverseLoading.value = false
       if (e.code === 50154) {
         reverseConfig.value = e.data
         replicationData.value = [
diff --git a/plugins/data-migration/web-ui/src/views/list/index.vue b/plugins/data-migration/web-ui/src/views/list/index.vue
index 510af8aec..16e8e01f5 100644
--- a/plugins/data-migration/web-ui/src/views/list/index.vue
+++ b/plugins/data-migration/web-ui/src/views/list/index.vue
@@ -3,39 +3,46 @@
     <div class="search-con">
       <a-form :model="form" layout="inline">
         <a-form-item field="taskName" style="margin-left: -17px;">
-          <a-input v-model="form.taskName" allow-clear :placeholder="$t('list.index.5q08sf2dez80')" style="width: 200px;" @change="getList"></a-input>
+          <a-input v-model="form.taskName" allow-clear :placeholder="$t('list.index.5q08sf2dez80')" style="width: 200px;"
+            @change="getList"></a-input>
         </a-form-item>
         <a-form-item field="createUser" style="margin-left: -17px;">
-          <a-select v-model="form.createUser" :placeholder="$t('list.index.5q08sf2dgxo0')" allow-clear style="width: 150px;" @change="getList">
+          <a-select v-model="form.createUser" :placeholder="$t('list.index.5q08sf2dgxo0')" allow-clear
+            style="width: 150px;" @change="getList">
             <a-option v-for="item in userData" :key="item" :value="item">{{ item }}</a-option>
           </a-select>
         </a-form-item>
         <a-form-item field="execStatus" style="margin-left: -17px;">
-          <a-select v-model="form.execStatus" :placeholder="$t('list.index.5q08sf2dh5g0')" allow-clear style="width: 150px;" @change="getList">
-            <a-option :value="3000">{{$t('list.index.5q08sf2dha81')}}</a-option>
-            <a-option :value="0">{{$t('list.index.5q08sf2dha80')}}</a-option>
-            <a-option :value="1">{{$t('list.index.5q08sf2dhek0')}}</a-option>
-            <a-option :value="2">{{$t('list.index.5q08sf2dhj00')}}</a-option>
+          <a-select v-model="form.execStatus" :placeholder="$t('list.index.5q08sf2dh5g0')" allow-clear
+            style="width: 150px;" @change="getList">
+            <a-option :value="3000">{{ $t('list.index.5q08sf2dha81') }}</a-option>
+            <a-option :value="0">{{ $t('list.index.5q08sf2dha80') }}</a-option>
+            <a-option :value="1">{{ $t('list.index.5q08sf2dhek0') }}</a-option>
+            <a-option :value="2">{{ $t('list.index.5q08sf2dhj00') }}</a-option>
           </a-select>
         </a-form-item>
         <a-form-item field="execTime" style="margin-left: -17px;">
-          <a-range-picker v-model="form.execTime" :placeholder="[$t('list.index.5q08sf2dhng0'), $t('list.index.5q08sf2dhrk0')]" style="width: 250px;" @change="getList" />
+          <a-range-picker v-model="form.execTime"
+            :placeholder="[$t('list.index.5q08sf2dhng0'), $t('list.index.5q08sf2dhrk0')]" style="width: 250px;"
+            @change="getList" />
         </a-form-item>
         <a-form-item field="finishTime" style="margin-left: -17px;">
-          <a-range-picker v-model="form.finishTime" :placeholder="[$t('list.index.5q08sf2dhvs0'), $t('list.index.5q08sf2di4w0')]" style="width: 250px;" @change="getList" />
+          <a-range-picker v-model="form.finishTime"
+            :placeholder="[$t('list.index.5q08sf2dhvs0'), $t('list.index.5q08sf2di4w0')]" style="width: 250px;"
+            @change="getList" />
         </a-form-item>
         <a-form-item>
           <a-button type="outline" @click="getList">
             <template #icon>
               <icon-search />
             </template>
-            <template #default>{{$t('list.index.5q08sf2dikw0')}}</template>
+            <template #default>{{ $t('list.index.5q08sf2dikw0') }}</template>
           </a-button>
           <a-button style="margin-left: 10px;" @click="resetQuery">
             <template #icon>
               <icon-sync />
             </template>
-            <template #default>{{$t('list.index.5q08sf2diqs0')}}</template>
+            <template #default>{{ $t('list.index.5q08sf2diqs0') }}</template>
           </a-button>
         </a-form-item>
       </a-form>
@@ -46,26 +53,29 @@
           <template #icon>
             <icon-plus />
           </template>
-          <template #default>{{$t('list.index.5q08sf2diwc0')}}</template>
+          <template #default>{{ $t('list.index.5q08sf2diwc0') }}</template>
         </a-button>
         <a-button status="success" @click="getList">
           <template #icon>
             <icon-sync />
           </template>
-          <template #default>{{$t('list.index.5q08sf2dj240')}}</template>
+          <template #default>{{ $t('list.index.5q08sf2dj240') }}</template>
         </a-button>
         <a-button status="warning" @click="deleteMore">
           <template #icon>
             <icon-delete />
           </template>
-          <template #default>{{$t('list.index.5q08sf2dj5g0')}}</template>
+          <template #default>{{ $t('list.index.5q08sf2dj5g0') }}</template>
         </a-button>
       </a-space>
     </div>
     <div class="table-con">
-      <a-table :loading="loading" row-key="id" :data="tableData" :row-selection="rowSelection" v-model:selectedKeys="selectedKeys" :bordered="false" :stripe="!currentTheme" :hoverable="!currentTheme" :pagination="pagination" @page-change="pageChange">
+      <a-table :loading="loading" row-key="id" :data="tableData" :row-selection="rowSelection"
+        v-model:selectedKeys="selectedKeys" :bordered="false" :stripe="!currentTheme" :hoverable="!currentTheme"
+        :pagination="pagination" @page-change="pageChange">
         <template #columns>
-          <a-table-column :title="$t('list.index.5q08sf2dj8k0')" data-index="taskName" :width="220" fixed="left" ellipsis tooltip></a-table-column>
+          <a-table-column :title="$t('list.index.5q08sf2dj8k0')" data-index="taskName" :width="220" fixed="left" ellipsis
+            tooltip></a-table-column>
           <a-table-column :title="$t('list.index.5q08sf2djbk0')" data-index="createUser" :width="100"></a-table-column>
           <a-table-column :title="$t('list.index.5q08sf2djew0')" data-index="execStatus" :width="120">
             <template #cell="{ record }">
@@ -87,62 +97,45 @@
           <a-table-column :title="$t('list.index.5q08sf2djvk0')" data-index="finishTime" :width="200"></a-table-column>
           <a-table-column :title="$t('list.index.5q08sf2djyc0')" align="center" :width="300" fixed="right">
             <template #cell="{ record }">
-              <a-button
-                size="mini"
-                type="text"
-                @click="goDetail(record)"
-              >
+              <a-button size="mini" type="text" @click="goDetail(record)">
                 <template #icon>
                   <icon-edit />
                 </template>
-                <template #default>{{$t('list.index.5q08sf2dk0o0')}}</template>
+                <template #default>{{ $t('list.index.5q08sf2dk0o0') }}</template>
               </a-button>
-              <a-button
-                v-if="record.execStatus === 1 || record.execStatus === 3000"
-                size="mini"
-                type="text"
-                @click="stopTask(record)"
-              >
-                <template #icon>
-                  <icon-pause />
-                </template>
-                <template #default>{{$t('list.index.5q08sf2dk3c0')}}</template>
-              </a-button>
-              <a-button
-                v-if="record.execStatus === 0"
-                :loading="record.startLoading"
-                size="mini"
-                type="text"
-                @click="startTask(record)"
-              >
+              <a-popconfirm v-if="record.execStatus === 1 || record.execStatus === 3000"
+                :content="$t('list.index.endMigration')" @ok="stopTask(record)">
+                <a-button size="mini" type="text">
+                  <template #icon>
+                    <icon-pause />
+                  </template>
+                  <template #default>{{ $t('list.index.5q08sf2dk3c0') }}</template>
+                </a-button>
+              </a-popconfirm>
+              <a-button v-if="record.execStatus === 0" :loading="record.startLoading" size="mini" type="text"
+                @click="startTask(record)">
                 <template #icon>
                   <icon-play-arrow />
                 </template>
-                <template #default>{{$t('list.index.5q08sf2dk5s0')}}</template>
+                <template #default>{{ $t('list.index.5q08sf2dk5s0') }}</template>
               </a-button>
-              <a-popconfirm v-if="record.execStatus === 0 || record.execStatus === 2" :content="$t('list.index.5q08sf2dk800')" @ok="deleteTheTask(record)">
-                <a-button
-                  size="mini"
-                  type="text"
-                >
+              <a-popconfirm v-if="record.execStatus === 0 || record.execStatus === 2"
+                :content="$t('list.index.5q08sf2dk800')" @ok="deleteTheTask(record)">
+                <a-button size="mini" type="text">
                   <template #icon>
                     <icon-delete />
                   </template>
-                  <template #default>{{$t('list.index.5q08sf2dka40')}}</template>
+                  <template #default>{{ $t('list.index.5q08sf2dka40') }}</template>
+                </a-button>
+              </a-popconfirm>
+              <a-popconfirm v-if="record.execStatus === 2" :content="$t('list.index.resetConfirm')" @ok="resetTask(record)">
+                <a-button :loading="record.startLoading" size="mini" type="text">
+                  <template #icon>
+                    <icon-refresh />
+                  </template>
+                  <template #default>{{ $t('list.index.5q08sf2diqs0') }}</template>
                 </a-button>
               </a-popconfirm>
-              <a-button
-                v-if="record.execStatus === 2"
-                :loading="record.startLoading"
-                size="mini"
-                type="text"
-                @click="resetTask(record)"
-              >
-                <template #icon>
-                  <icon-refresh />
-                </template>
-                <template #default>{{$t('list.index.5q08sf2diqs0')}}</template>
-              </a-button>
             </template>
           </a-table-column>
         </template>
@@ -365,14 +358,17 @@ onMounted(() => {
 .list-container {
   position: relative;
   min-height: calc(100vh - 114px);
+
   .search-con {
     padding: 16px 20px 10px;
     display: flex;
     justify-content: space-between;
   }
+
   .btn-con {
     padding: 0 20px;
   }
+
   .table-con {
     margin-top: 20px;
     padding: 0 20px 30px;
-- 
Gitee