chore: domain import task

packages/ui/certd-client/src/style/common.less

@@ -319,4 +319,109 @@ h6 {
 
 .ant-input-number{
   min-width: 100px;
+}
+
+
+.cd-table {
+  /* 我的客户样式 */
+  width: 100%;
+  border-collapse: collapse;
+  overflow: auto;
+
+  .fs-loading{
+    position: absolute;
+    left :0;  
+    top :0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.05);
+    z-index: 10000
+  }
+
+  table {
+    width: 1000px;
+    min-width: 100%;
+    table-layout: fixed;
+    font-size: 16px;
+  }
+
+  thead {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+  }
+
+  .position-sticky-right {
+    position: sticky;
+    right: 0;
+    z-index: 100;
+    border-left: 0px;
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      width: 1px;
+      /* 边框宽度 */
+      background: #eee;
+      /* 边框颜色 */
+    }
+  }
+
+  th,
+  td {
+
+    text-align: left;
+    border-bottom: 1px solid #eee;
+    border-left: 1px solid #eee;
+  }
+
+  th {
+    padding: 15px 5px;
+    background: #f5f7ff;
+    font-weight: 600;
+    color: #6e8efb;
+    font-size: 14px;
+
+    &:last-child {
+      border-right: 1px solid #eee;
+    }
+  }
+
+  td {
+    padding: 10px;
+    font-size: 14px;
+
+    &:last-child {
+      border-right: 1px solid #eee;
+    }
+  }
+
+  td.position-sticky-right {
+    background-color: #fff;
+  }
+
+
+  tr.hover-color:hover td {
+    background: #f9f9ff;
+  }
+
+  .status {
+    padding: 5px 10px;
+    border-radius: 20px;
+    font-size: 0.8rem;
+    font-weight: 600;
+  }
+
+  .status-active {
+    background: #e7f6e9;
+    color: #2e7d32;
+  }
+
+  .status-pending {
+    background: #ffecb3;
+    color: #f57c00;
+  }
 }

packages/ui/certd-client/src/views/certd/cert/domain/api.ts

@@ -71,18 +71,18 @@ export async function ImportTaskStatus() {
     method: "post",
   });
 }
-export async function ImportTaskDelete(key: any) {
+export async function ImportTaskDelete(key: string) {
   return await request({
     url: apiPrefix + "/import/delete",
     method: "post",
-    params: { key },
+    data: { key },
   });
 }
-export async function ImportTaskStart(key: any) {
+export async function ImportTaskStart(key: string) {
   return await request({
     url: apiPrefix + "/import/start",
     method: "post",
-    params: { key },
+    data: { key },
   });
 }
 

packages/ui/certd-client/src/views/certd/cert/domain/crud.tsx

@@ -3,7 +3,7 @@ import { Modal, notification } from "ant-design-vue";
 import { Ref, ref } from "vue";
 import { useRouter } from "vue-router";
 import * as api from "./api";
-import DomainImportTaskStatus from "./domain-import-task-status.vue";
+import DomainImportTaskStatus from "./import.vue";
 import { Dicts } from "/@/components/plugins/lib/dicts";
 import { useSettingStore } from "/@/store/settings";
 import { useUserStore } from "/@/store/user";

packages/ui/certd-client/src/views/certd/cert/domain/import.vue

@@ -1,29 +1,46 @@
 <template>
-  <div class="domain-import-task-status">
+  <div class="domain-import-task-status min-h-[400px]">
     <div class="action">
-      <fs-button type="primary" size="small" icon="ion:add-outline" @click="addTask">添加导入任务</fs-button>
+      <fs-button type="primary" icon="ion:add-outline" @click="addTask">添加导入任务</fs-button>
+      <fs-button type="primary" icon="ion:refresh-outline" class="ml-2" @click="loadImportTaskStatus">刷新</fs-button>
+    </div>
+    <div class="table-container overflow-auto mt-2">
+      <table class="cd-table border-gray-300 w-full">
+        <thead>
+          <tr>
+            <th class="w-20%">来源</th>
+            <th>进度</th>
+            <th class="w-20%">操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="item in list" :key="item.key">
+            <td class="ellipsis">{{ item.title }}</td>
+            <td>
+              <div v-if="item.task">
+                <div>
+                  <a-tag color="blue">总数：{{ item.task?.total }}</a-tag>
+                  <a-tag color="success" class="ml-2">成功：{{ item.task?.successCount }}</a-tag>
+                  <a-tag type="info" class="ml-2">跳过：{{ item.task?.skipCount }}</a-tag>
+                  <a-tooltip v-if="item.task?.errors.length > 0">
+                    <template #title>
+                      <div v-for="error in item.task?.errors" :key="error">{{ error }}</div>
+                    </template>
+                    <a-tag color="red" class="ml-2">失败：{{ item.task?.errors.length }}</a-tag>
+                  </a-tooltip>
+                </div>
+                <a-progress :percent="item.task?.progress" size="small" status="active" />
+              </div>
+              <div v-else>未执行</div>
+            </td>
+            <td>
+              <fs-button type="primary" icon="ion:play-outline" @click="startTask(item)">执行</fs-button>
+              <fs-button type="primary" class="ml-2" danger icon="ion:trash-outline" @click="deleteTask(item)">删除</fs-button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </div>
-    <table class="table table-striped">
-      <thead>
-        <tr>
-          <th>标题</th>
-          <th>进度</th>
-          <th>操作</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="item in list" :key="item.taskId">
-          <td>{{ item.title }}</td>
-          <td>
-            <a-progress :percent="item.percent" size="small" status="active" />
-          </td>
-          <td>
-            <fs-button type="primary" size="small" icon="ion:play-outline" @click="startTask(item)">执行</fs-button>
-            <fs-button type="danger" size="small" icon="ion:stop-outline" @click="deleteTask(item)">删除</fs-button>
-          </td>
-        </tr>
-      </tbody>
-    </table>
   </div>
 </template>
 
@@ -44,7 +61,7 @@ async function loadImportTaskStatus() {
 }
 
 async function startTask(item: any) {
-  await api.ImportTaskStart(item);
+  await api.ImportTaskStart(item.key);
   await loadImportTaskStatus();
 }
 
@@ -54,7 +71,7 @@ async function deleteTask(item: any) {
     okText: "确认",
     okType: "danger",
     onOk: async () => {
-      await api.ImportTaskDelete(item.taskId);
+      await api.ImportTaskDelete(item.key);
       await loadImportTaskStatus();
     },
   });
@@ -74,3 +91,11 @@ onMounted(async () => {
   await loadImportTaskStatus();
 });
 </script>
+
+<style lang="less">
+.domain-import-task-status {
+  .table-container {
+    height: 60vh;
+  }
+}
+</style>

packages/ui/certd-client/src/views/certd/cert/domain/use.tsx

@@ -2,6 +2,7 @@ import { message } from "ant-design-vue";
 import * as api from "./api";
 import { useFormDialog } from "/@/use/use-dialog";
 import { compute } from "@fast-crud/fast-crud";
+import { Dicts } from "/@/components/plugins/lib/dicts";
 
 export function useDomainImport() {
   const { openFormDialog } = useFormDialog();
@@ -13,11 +14,12 @@ export function useDomainImport() {
       form: {
         component: {
           name: "dns-provider-selector",
-        },
-        on: {
-          //@ts-ignore
-          onSelectedChange: ({ form, $event }) => {
-            form.dnsProviderAccessType = $event.accessType;
+          on: {
+            //@ts-ignore
+            selectedChange: ({ form, $event }) => {
+              form.dnsProviderAccessType = $event.accessType;
+              form.dnsProviderTitle = $event.label;
+            },
           },
         },
         //@ts-ignore
@@ -43,6 +45,12 @@ export function useDomainImport() {
           type: compute(({ form }) => {
             return form.dnsProviderAccessType || form.dnsProviderType;
           }),
+          on: {
+            //@ts-ignore
+            selectedChange({ form, $event }) {
+              form.accessTitle = $event.name;
+            },
+          },
         },
       },
     },
@@ -56,6 +64,7 @@ export function useDomainImport() {
         await api.ImportTaskAdd({
           dnsProviderType: form.dnsProviderType,
           dnsProviderAccessId: form.dnsProviderAccessId,
+          title: form.dnsProviderTitle + "_" + form.accessTitle,
         });
         if (req.afterSubmit) {
           req.afterSubmit();