From b6a864760b5979069aa0936d34d61a846a84fc4a Mon Sep 17 00:00:00 2001
From: lannoy0523 <935275025@qq.com>
Date: Wed, 6 Nov 2024 16:53:25 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E9=99=8D=E5=86=B7?=
 =?UTF-8?q?=E4=BB=BB=E5=8A=A1=E9=85=8D=E7=BD=AE=E9=A1=B5=E9=9D=A2=20#2564?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../user/UserSeparationController.kt          |   4 +-
 .../job/separation/dao/SeparationTaskDao.kt   |  16 +-
 .../service/SeparationTaskService.kt          |   7 +-
 .../service/impl/SeparationTaskServiceImpl.kt |  11 +-
 src/frontend/devops-op/src/api/separate.js    |  85 ++++
 .../devops-op/src/icons/svg/separate.svg      |   1 +
 src/frontend/devops-op/src/router/index.js    |  22 +
 .../src/views/separation/ShowData.vue         | 419 ++++++++++++++++++
 .../CreateOrUpdateSeparationTaskDialog.vue    | 386 ++++++++++++++++
 .../devops-op/src/views/separation/index.vue  | 348 +++++++++++++++
 10 files changed, 1288 insertions(+), 11 deletions(-)
 create mode 100644 src/frontend/devops-op/src/api/separate.js
 create mode 100644 src/frontend/devops-op/src/icons/svg/separate.svg
 create mode 100644 src/frontend/devops-op/src/views/separation/ShowData.vue
 create mode 100644 src/frontend/devops-op/src/views/separation/components/CreateOrUpdateSeparationTaskDialog.vue
 create mode 100644 src/frontend/devops-op/src/views/separation/index.vue

diff --git a/src/backend/job/biz-job/src/main/kotlin/com/tencent/bkrepo/job/controller/user/UserSeparationController.kt b/src/backend/job/biz-job/src/main/kotlin/com/tencent/bkrepo/job/controller/user/UserSeparationController.kt
index 4355ae3cca..e0611f78c8 100644
--- a/src/backend/job/biz-job/src/main/kotlin/com/tencent/bkrepo/job/controller/user/UserSeparationController.kt
+++ b/src/backend/job/biz-job/src/main/kotlin/com/tencent/bkrepo/job/controller/user/UserSeparationController.kt
@@ -75,10 +75,12 @@ class UserSeparationController(
     @GetMapping("/tasks")
     fun tasks(
         @RequestParam(required = false) state: String? = null,
+        @RequestParam(required = false) projectId: String? = null,
+        @RequestParam(required = false) repoName: String? = null,
         @RequestParam(required = false, defaultValue = "$DEFAULT_PAGE_NUMBER") pageNumber: Int = DEFAULT_PAGE_NUMBER,
         @RequestParam(required = false, defaultValue = "$DEFAULT_PAGE_SIZE") pageSize: Int = DEFAULT_PAGE_SIZE,
     ): Response<Page<SeparationTask>> {
-        val page = separationTaskService.findTasks(state, Pages.ofRequest(pageNumber, pageSize))
+        val page = separationTaskService.findTasks(state, projectId, repoName, Pages.ofRequest(pageNumber, pageSize))
         return ResponseBuilder.success(page)
     }
 
diff --git a/src/backend/job/biz-job/src/main/kotlin/com/tencent/bkrepo/job/separation/dao/SeparationTaskDao.kt b/src/backend/job/biz-job/src/main/kotlin/com/tencent/bkrepo/job/separation/dao/SeparationTaskDao.kt
index b9ae3c0b5a..36d66c16dc 100644
--- a/src/backend/job/biz-job/src/main/kotlin/com/tencent/bkrepo/job/separation/dao/SeparationTaskDao.kt
+++ b/src/backend/job/biz-job/src/main/kotlin/com/tencent/bkrepo/job/separation/dao/SeparationTaskDao.kt
@@ -102,16 +102,20 @@ class SeparationTaskDao : SimpleMongoDao<TSeparationTask>() {
         return exists(Query(criteria))
     }
 
-    fun find(state: String?, pageRequest: PageRequest): List<TSeparationTask> {
-        val criteria = Criteria()
-        state?.let { criteria.and(TSeparationTask::state.name).isEqualTo(it) }
-        return find(Query(criteria).with(pageRequest))
+    fun find(state: String?, projectId: String?, repoName: String?, pageRequest: PageRequest): List<TSeparationTask> {
+        return find(buildQuery(state, projectId, repoName).with(pageRequest))
+    }
+
+    fun count(state: String?, projectId: String?, repoName: String?): Long {
+        return count(buildQuery(state, projectId, repoName))
     }
 
-    fun count(state: String?): Long {
+    private fun buildQuery(state: String?, projectId: String?, repoName: String?): Query {
         val criteria = Criteria()
         state?.let { criteria.and(TSeparationTask::state.name).isEqualTo(it) }
-        return count(Query(criteria))
+        projectId?.let { criteria.and(TSeparationTask::projectId.name).isEqualTo(projectId) }
+        repoName?.let { criteria.and(TSeparationTask::repoName.name).isEqualTo(repoName) }
+        return Query(criteria)
     }
 
     fun updateState(
diff --git a/src/backend/job/biz-job/src/main/kotlin/com/tencent/bkrepo/job/separation/service/SeparationTaskService.kt b/src/backend/job/biz-job/src/main/kotlin/com/tencent/bkrepo/job/separation/service/SeparationTaskService.kt
index c64378d4c6..e4c38039bf 100644
--- a/src/backend/job/biz-job/src/main/kotlin/com/tencent/bkrepo/job/separation/service/SeparationTaskService.kt
+++ b/src/backend/job/biz-job/src/main/kotlin/com/tencent/bkrepo/job/separation/service/SeparationTaskService.kt
@@ -41,7 +41,12 @@ interface SeparationTaskService {
         projectId: String? = null, repoName: String? = null
     ): Set<LocalDateTime>
 
-    fun findTasks(state: String? = null, pageRequest: PageRequest): Page<SeparationTask>
+    fun findTasks(
+        state: String? = null,
+        projectId: String? = null,
+        repoName: String? = null,
+        pageRequest: PageRequest
+    ): Page<SeparationTask>
 
     fun reInitTaskState(taskId: String)
 
diff --git a/src/backend/job/biz-job/src/main/kotlin/com/tencent/bkrepo/job/separation/service/impl/SeparationTaskServiceImpl.kt b/src/backend/job/biz-job/src/main/kotlin/com/tencent/bkrepo/job/separation/service/impl/SeparationTaskServiceImpl.kt
index 1a2cb4cf93..371093084c 100644
--- a/src/backend/job/biz-job/src/main/kotlin/com/tencent/bkrepo/job/separation/service/impl/SeparationTaskServiceImpl.kt
+++ b/src/backend/job/biz-job/src/main/kotlin/com/tencent/bkrepo/job/separation/service/impl/SeparationTaskServiceImpl.kt
@@ -107,9 +107,14 @@ class SeparationTaskServiceImpl(
         return result
     }
 
-    override fun findTasks(state: String?, pageRequest: PageRequest): Page<SeparationTask> {
-        val count = separationTaskDao.count(state)
-        val records = separationTaskDao.find(state, pageRequest).map { it.toDto() }
+    override fun findTasks(
+        state: String?,
+        projectId: String?,
+        repoName: String?,
+        pageRequest: PageRequest
+    ): Page<SeparationTask> {
+        val count = separationTaskDao.count(state, projectId, repoName)
+        val records = separationTaskDao.find(state, projectId, repoName, pageRequest).map { it.toDto() }
         return Pages.ofResponse(pageRequest, count, records)
     }
 
diff --git a/src/frontend/devops-op/src/api/separate.js b/src/frontend/devops-op/src/api/separate.js
new file mode 100644
index 0000000000..b07f0c4de1
--- /dev/null
+++ b/src/frontend/devops-op/src/api/separate.js
@@ -0,0 +1,85 @@
+import request from '@/utils/request'
+
+const PREFIX_SERVICES = '/job/api/job/separation'
+
+export function querySeparateTask(data) {
+  return request({
+    url: `${PREFIX_SERVICES}/tasks`,
+    method: 'get',
+    params: data
+  })
+}
+
+export function createSeparateTask(data) {
+  return request({
+    url: `${PREFIX_SERVICES}/`,
+    method: 'post',
+    data: data
+  })
+}
+
+export function updateSeparateTask(taskId) {
+  return request({
+    url: `${PREFIX_SERVICES}/update/${taskId}/state`,
+    method: 'post'
+  })
+}
+
+// 查询冷表中节点信息
+export function queryColdNodeData(body) {
+  return request({
+    url: `${PREFIX_SERVICES}/node/${body.projectId}/${body.repoName}`,
+    method: 'get',
+    params: {
+      fullPath: body.fullPath
+    }
+  })
+}
+
+// 查询冷表中版本信息
+export function queryColdVersionData(body) {
+  return request({
+    url: `${PREFIX_SERVICES}/version/${body.projectId}/${body.repoName}`,
+    method: 'get',
+    params: {
+      packageKey: body.packageKey,
+      version: body.version
+    }
+  })
+}
+
+// 分页查询包
+export function queryPackageData(body) {
+  return request({
+    url: `${PREFIX_SERVICES}/package/page/${body.projectId}/${body.repoName}`,
+    method: 'get',
+    params: body.packageOption
+  })
+}
+
+// 分页查询版本
+export function queryVersionData(body) {
+  return request({
+    url: `${PREFIX_SERVICES}/version/page/${body.projectId}/${body.repoName}`,
+    method: 'get',
+    params: {
+      packageKey: body.packageKey,
+      separationDate: body.separationDate,
+      option: body.versionOption
+    }
+  })
+}
+
+// 分页查询节点
+export function queryNodeData(body) {
+  return request({
+    url: `${PREFIX_SERVICES}/node/page/${body.projectId}/${body.repoName}`,
+    method: 'get',
+    params: {
+      fullPath: body.fullPath,
+      separationDate: body.separationDate,
+      option: body.nodeOption
+    }
+  })
+}
+
diff --git a/src/frontend/devops-op/src/icons/svg/separate.svg b/src/frontend/devops-op/src/icons/svg/separate.svg
new file mode 100644
index 0000000000..3a63e0663c
--- /dev/null
+++ b/src/frontend/devops-op/src/icons/svg/separate.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 112c-185.6 0-336 44.8-336 102.4v84.8c0 56 150.4 102.4 336 102.4s336-44.8 336-102.4v-84.8C848 156.8 697.6 112 512 112z"/><path d="M784 720c0 44.8-35.2 81.6-80 81.6s-80-36.8-80-81.6 35.2-81.6 80-81.6S784 675.2 784 720M889.6 665.6c-1.6-8-9.6-12.8-16-11.2-3.2 0-4.8 0-8 0-9.6-1.6-17.6-8-20.8-16-6.4-11.2-6.4-24 1.6-35.2 4.8-6.4 3.2-14.4-1.6-20.8-9.6-9.6-20.8-19.2-32-27.2-17.6-12.8-36.8-20.8-59.2-27.2-8-1.6-14.4 1.6-17.6 8-4.8 11.2-16 17.6-28.8 17.6l0 0c-12.8 0-24-6.4-28.8-17.6-3.2-6.4-11.2-11.2-17.6-8-20.8 4.8-40 14.4-59.2 27.2-11.2 8-22.4 16-32 27.2-4.8 6.4-6.4 14.4-1.6 20.8 6.4 9.6 6.4 24 1.6 35.2-4.8 8-12.8 14.4-20.8 16-3.2 0-4.8 1.6-8 0-8 0-14.4 4.8-16 11.2C515.2 683.2 512 702.4 512 720s3.2 36.8 8 54.4c1.6 8 9.6 12.8 16 11.2 3.2 0 6.4 0 8 0 11.2 1.6 19.2 9.6 24 19.2s3.2 22.4-3.2 30.4c-4.8 6.4-3.2 14.4 1.6 20.8 9.6 9.6 20.8 19.2 32 27.2 17.6 12.8 36.8 20.8 59.2 27.2 8 1.6 14.4-1.6 17.6-8 4.8-11.2 16-17.6 28.8-17.6s24 6.4 28.8 17.6c3.2 6.4 11.2 11.2 17.6 8 20.8-4.8 40-14.4 59.2-27.2 11.2-8 22.4-16 32-27.2 4.8-6.4 6.4-14.4 1.6-20.8-6.4-9.6-6.4-24-1.6-35.2 4.8-8 12.8-14.4 20.8-16 3.2 0 4.8 0 8 0 8 0 14.4-4.8 16-11.2 4.8-17.6 8-35.2 8-54.4C896 700.8 894.4 683.2 889.6 665.6"/><path d="M448 732.8c-139.2-11.2-272-59.2-272-100.8v158.4l0 0v17.6c0 57.6 150.4 120 336 120 14.4 0 27.2 0 41.6-1.6C492.8 883.2 452.8 812.8 448 732.8z"/><path d="M704 464c52.8 0 102.4 16 144 44.8v-132.8c0 51.2-160 92.8-336 92.8-160 0-336-41.6-336-92.8V544l0 0v1.6c0 54.4 120 112 276.8 123.2C476.8 552 579.2 464 704 464z"/></svg>
diff --git a/src/frontend/devops-op/src/router/index.js b/src/frontend/devops-op/src/router/index.js
index e5e859f09c..f5b1cd081f 100644
--- a/src/frontend/devops-op/src/router/index.js
+++ b/src/frontend/devops-op/src/router/index.js
@@ -26,6 +26,8 @@ export const ROUTER_NAME_FILE_SYSTEM_RECORD = 'FileSystemRecord'
 export const ROUTER_NAME_REPO_CONFIG = 'RepoConfig'
 export const ROUTER_NAME_RATE_LIMITER_CONFIG = 'RateLimiterConfig'
 export const ROUTER_NAME_PRELOAD_CONFIG = 'PreloadConfig'
+export const ROUTER_NAME_SEPARATION_CONFIG = 'SeparationConfig'
+export const ROUTER_NAME_SEPARATION_RECORD = 'SeparationRecord'
 
 Vue.use(Router)
 
@@ -339,6 +341,26 @@ export const asyncRoutes = [
       }
     ]
   },
+  {
+    path: '/separation-config',
+    component: Layout,
+    meta: { title: '降冷任务配置', icon: 'separate' },
+    redirect: '/separation-config/task',
+    children: [
+      {
+        path: 'task',
+        name: ROUTER_NAME_SEPARATION_CONFIG,
+        meta: { title: '降冷任务', icon: 'separate' },
+        component: () => import('@/views/separation/index')
+      },
+      {
+        path: 'infos',
+        name: ROUTER_NAME_SEPARATION_RECORD,
+        meta: { title: '数据查询', icon: 'separate' },
+        component: () => import('@/views/separation/ShowData')
+      }
+    ]
+  },
   // 404 page must be placed at the end !!!
   { path: '*', redirect: '/404', hidden: true }
 ]
diff --git a/src/frontend/devops-op/src/views/separation/ShowData.vue b/src/frontend/devops-op/src/views/separation/ShowData.vue
new file mode 100644
index 0000000000..8dc5d4207e
--- /dev/null
+++ b/src/frontend/devops-op/src/views/separation/ShowData.vue
@@ -0,0 +1,419 @@
+<template>
+  <div class="app-container node-container">
+    <el-form ref="form" :rules="rules" :inline="true" :model="clientQuery">
+      <el-form-item label="配置类型" style="margin-left: 15px">
+        <el-select v-model="clientQuery.type" placeholder="请选择">
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item ref="project-form-item" label="项目ID" prop="projectId" :rules="[{ required: true, message: '项目ID不能为空'}]">
+        <el-autocomplete
+          v-model="clientQuery.projectId"
+          class="inline-input"
+          :fetch-suggestions="queryProjects"
+          placeholder="请输入项目ID"
+          size="mini"
+          @select="selectProject"
+        >
+          <template slot-scope="{ item }">
+            <div>{{ item.name }}</div>
+          </template>
+        </el-autocomplete>
+      </el-form-item>
+      <el-form-item
+        ref="repo-form-item"
+        style="margin-left: 15px"
+        label="仓库名称"
+        prop="repoName"
+        :rules="[{ required: true, message: '仓库名称不能为空'}]"
+      >
+        <el-autocomplete
+          v-model="clientQuery.repoName"
+          class="inline-input"
+          :fetch-suggestions="queryRepositories"
+          :disabled="!clientQuery.projectId"
+          placeholder="请输入仓库名"
+          size="mini"
+          @select="selectRepo"
+        >
+          <template slot-scope="{ item }">
+            <div>{{ item.name }}</div>
+          </template>
+        </el-autocomplete>
+      </el-form-item>
+      <el-form-item
+        v-if="clientQuery.type === 'node' || clientQuery.type === 'coldNode'"
+        style="margin-left: 15px"
+        label="文件路径"
+        :rules="[{ required: clientQuery.type === 'node' || clientQuery.type === 'coldNode', message: '文件路径不能为空'}]"
+        prop="fullPath"
+      >
+        <el-input
+          v-model="clientQuery.fullPath"
+          placeholder="请输入"
+          style="height: 40px; width: 120px"
+        />
+      </el-form-item>
+      <el-form-item
+        v-if="clientQuery.type === 'coldVersion' || clientQuery.type === 'version'"
+        style="margin-left: 15px"
+        label="包KEY"
+        :rules="[{ required: clientQuery.type === 'coldVersion' || clientQuery.type === 'version', message: '包KEY不能为空'}]"
+        prop="packageKey"
+      >
+        <el-input
+          v-model="clientQuery.packageKey"
+          placeholder="请输入"
+          style="height: 40px; width: 120px"
+        />
+      </el-form-item>
+      <el-form-item
+        v-if="clientQuery.type === 'coldVersion'"
+        style="margin-left: 15px"
+        label="包版本"
+        :rules="[{ required: clientQuery.type === 'coldVersion', message: '包版本不能为空'}]"
+        prop="version"
+      >
+        <el-input
+          v-model="clientQuery.version"
+          placeholder="请输入"
+          style="height: 40px; width: 120px"
+        />
+      </el-form-item>
+      <el-form-item v-if="clientQuery.type === 'node' || clientQuery.type === 'version'" label="降冷时间" prop="separationDate">
+        <el-date-picker
+          v-model="clientQuery.separationDate"
+          type="datetime"
+          placeholder="选择日期时间"
+          default-time="12:00:00"
+        />
+      </el-form-item>
+      <el-form-item
+        v-if="clientQuery.type === 'version'"
+        style="margin-left: 15px"
+        label="包版本"
+        prop="versionOption.version"
+      >
+        <el-input
+          v-model="clientQuery.versionOption.version"
+          placeholder="请输入"
+          style="height: 40px; width: 120px"
+        />
+      </el-form-item>
+      <el-form-item
+        v-if="clientQuery.type === 'package'"
+        style="margin-left: 15px"
+        label="包名"
+        prop="packageName"
+      >
+        <el-input
+          v-model="clientQuery.packageOption.packageName"
+          placeholder="请输入"
+          style="height: 40px; width: 120px"
+        />
+      </el-form-item>
+      <el-form-item v-if="clientQuery.type === 'node'" label="包含目录" style="margin-left: 15px">
+        <el-select v-model="clientQuery.nodeOption.includeFolder" placeholder="请选择" style="width: 180px">
+          <el-option
+            v-for="item in foldOption"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item v-if="clientQuery.type === 'node'" label="包含元数据" style="margin-left: 15px">
+        <el-select v-model="clientQuery.nodeOption.includeMetadata" placeholder="请选择" style="width: 180px">
+          <el-option
+            v-for="item in metaDataOption"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item v-if="clientQuery.type === 'node'" label="深度查询文件" style="margin-left: 15px">
+        <el-select v-model="clientQuery.nodeOption.deep" placeholder="请选择" style="width: 180px">
+          <el-option
+            v-for="item in deepOption"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          size="mini"
+          type="primary"
+          :disabled="!clientQuery.projectId"
+          @click="handleCurrentChange(1)"
+        >查询</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table v-loading="loading" :data="dataInfos" style="width: 100%">
+      <el-table-column v-if="clientQuery.type === 'coldNode' || clientQuery.type === 'node'" prop="name" label="资源名称" align="center" />
+      <el-table-column v-if="clientQuery.type === 'coldNode' || clientQuery.type === 'node'" prop="path" label="路径" align="center" />
+      <el-table-column v-if="clientQuery.type === 'coldNode' || clientQuery.type === 'node'" prop="folder" label="是否为文件夹" align="center">
+        <template slot-scope="scope">
+          <span>
+            {{ scope.row.folder === true ? '是': '否' }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column v-if="clientQuery.type === 'coldNode' || clientQuery.type === 'node'" prop="size" label="文件大小" align="center">
+        <template slot-scope="scope">
+          <span>
+            {{ convertFileSize(scope.row.size) }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column v-if="clientQuery.type === 'coldNode' || clientQuery.type === 'node'" prop="nodeNum" label="文件节点个数" align="center" />
+      <el-table-column v-if="clientQuery.type === 'coldNode' || clientQuery.type === 'node'" prop="sha256" label="SHA256" align="center" />
+      <el-table-column v-if="clientQuery.type === 'coldNode' || clientQuery.type === 'node'" prop="archived" label="是否归档" align="center">
+        <template slot-scope="scope">
+          <span>
+            {{ scope.row.archived === true ? '是': '否' }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column v-if="clientQuery.type === 'coldNode' || clientQuery.type === 'node'" prop="compressed" label="是否压缩" align="center">
+        <template slot-scope="scope">
+          <span>
+            {{ scope.row.compressed === true ? '是': '否' }}
+          </span>
+        </template>
+      </el-table-column>
+
+      <el-table-column v-if="clientQuery.type === 'coldVersion' || clientQuery.type === 'version'" prop="name" label="包版本" align="center" />
+      <el-table-column v-if="clientQuery.type === 'coldVersion' || clientQuery.type === 'version'" prop="size" label="包大小" align="center">
+        <template slot-scope="scope">
+          <span>
+            {{ convertFileSize(scope.row.size) }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column v-if="clientQuery.type === 'coldVersion' || clientQuery.type === 'version'" prop="downloads" label="下载次数" align="center" />
+      <el-table-column v-if="clientQuery.type === 'coldVersion' || clientQuery.type === 'version'" prop="tags" label="标签" align="center" />
+      <el-table-column v-if="clientQuery.type === 'coldVersion' || clientQuery.type === 'version'" prop="manifestPath" label="清单文件路径" align="center" />
+
+      <el-table-column v-if="clientQuery.type === 'package'" prop="name" label="包名称" align="center" />
+      <el-table-column v-if="clientQuery.type === 'package'" prop="key" label="包KEY" align="center" />
+      <el-table-column v-if="clientQuery.type === 'package'" prop="type" label="包类型" align="center" />
+      <el-table-column v-if="clientQuery.type === 'package'" prop="latest" label="最新版名称" align="center" />
+      <el-table-column v-if="clientQuery.type === 'package'" prop="downloads" label="下载次数" align="center" />
+      <el-table-column v-if="clientQuery.type === 'package'" prop="versions" label="版本数量" align="center" />
+      <el-table-column v-if="clientQuery.type === 'package'" prop="description" label="描述" align="center" />
+    </el-table>
+    <div style="margin-top:20px">
+      <el-pagination
+        v-if="total>0 && clientQuery.type !== 'coldNode' && clientQuery.type !== 'coldVersion'"
+        :current-page="clientQuery.pageNumber"
+        :page-size="clientQuery.pageSize"
+        layout="total, prev, pager, next, jumper"
+        :total="total"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import { searchProjects } from '@/api/project'
+import { listRepositories } from '@/api/repository'
+import { formatNormalDate } from '@/utils/date'
+import { convertFileSize } from '@/utils/file'
+import {
+  queryColdNodeData,
+  queryColdVersionData,
+  queryNodeData,
+  queryPackageData,
+  queryVersionData
+} from '@/api/separate'
+
+export default {
+  name: 'PreloadConfig',
+  inject: ['reload'],
+  beforeRouteUpdate(to, from, next) {
+    this.onRouteUpdate(to)
+    next()
+  },
+  data() {
+    return {
+      loading: false,
+      projects: undefined,
+      repoCache: {},
+      rules: {},
+      total: 0,
+      clientQuery: {
+        projectId: '',
+        repoName: '',
+        type: 'coldNode',
+        fullPath: '',
+        packageKey: '',
+        version: '',
+        separationDate: new Date(),
+        packageOption: {
+          pageNumber: 1,
+          pageSize: 20,
+          currentPage: 1,
+          packageName: ''
+        },
+        versionOption: {
+          pageNumber: 1,
+          pageSize: 20,
+          currentPage: 1,
+          version: ''
+        },
+        nodeOption: {
+          pageNumber: 1,
+          pageSize: 20,
+          currentPage: 1,
+          includeFolder: true,
+          includeMetadata: false,
+          deep: false
+        }
+      },
+      options: [
+        { label: '查询冷表中节点信息', value: 'coldNode' },
+        { label: '查询冷表中版本信息', value: 'coldVersion' },
+        { label: '分页查询包', value: 'package' },
+        { label: '分页查询版本', value: 'version' },
+        { label: '分页查询节点', value: 'node' }
+      ],
+      dataInfos: [],
+      foldOption: [
+        { label: '是', value: true },
+        { label: '否', value: false }
+      ],
+      metaDataOption: [
+        { label: '是', value: true },
+        { label: '否', value: false }
+      ],
+      deepOption: [
+        { label: '是', value: true },
+        { label: '否', value: false }
+      ]
+    }
+  },
+  watch: {
+    'clientQuery.type'(newType) {
+      this.dataInfos = []
+      this.total = 0
+      this.clientQuery.packageOption.pageNumber = 1
+      this.clientQuery.packageOption.currentPage = 1
+      this.clientQuery.versionOption.pageNumber = 1
+      this.clientQuery.versionOption.currentPage = 1
+      this.clientQuery.nodeOption.pageNumber = 1
+      this.clientQuery.nodeOption.currentPage = 1
+    }
+  },
+  methods: {
+    queryProjects(queryStr, cb) {
+      searchProjects(queryStr).then(res => {
+        this.projects = res.data.records
+        cb(this.projects)
+      })
+    },
+    selectProject(project) {
+      this.$refs['project-form-item'].resetField()
+      this.clientQuery.projectId = project.name
+    },
+    queryRepositories(queryStr, cb) {
+      let repositories = this.repoCache[this.clientQuery.projectId]
+      if (!repositories) {
+        listRepositories(this.clientQuery.projectId).then(res => {
+          repositories = res.data
+          this.repoCache[this.clientQuery.projectId] = repositories
+          cb(this.doFilter(repositories, queryStr))
+        })
+      } else {
+        cb(this.doFilter(repositories, queryStr))
+      }
+    },
+    selectRepo(repo) {
+      this.$refs['repo-form-item'].resetField()
+      this.clientQuery.repoName = repo.name
+    },
+    doFilter(arr, queryStr) {
+      return queryStr ? arr.filter(obj => {
+        return obj.name.toLowerCase().indexOf(queryStr.toLowerCase()) !== -1
+      }) : arr
+    },
+    handleCurrentChange(val) {
+      this.clientQuery.currentPage = val
+      this.queryClients(this.clientQuery)
+    },
+    queryClients(clientQuery) {
+      if (this.$refs['form']) {
+        this.$refs['form'].validate((valid) => {
+          if (valid) {
+            this.doQueryClients(clientQuery)
+          } else {
+            return false
+          }
+        })
+      }
+    },
+    doQueryClients(clientQuery) {
+      let promise = null
+      const param = clientQuery
+      if (clientQuery.type === 'node') {
+        if (param.separationDate instanceof Date && !isNaN(param.separationDate)) {
+          param.separationDate = param.separationDate.toISOString()
+        }
+        promise = queryNodeData(param)
+      } else if (clientQuery.type === 'package') {
+        if (param.packageOption.packageName === '') {
+          param.packageOption.packageName = null
+        }
+        promise = queryPackageData(param)
+      } else if (this.clientQuery.type === 'version') {
+        console.log(param.separationDate)
+        if (param.separationDate instanceof Date && !isNaN(param.separationDate)) {
+          param.separationDate = param.separationDate.toISOString()
+        }
+        if (param.versionOption.version === '') {
+          param.versionOption.version = null
+        }
+        promise = queryVersionData(param)
+      } else if (clientQuery.type === 'coldNode') {
+        promise = queryColdNodeData(param)
+      } else {
+        promise = queryColdVersionData(param)
+      }
+      promise.then(res => {
+        if (res.data) {
+          this.dataInfos = res.data.records ? res.data.records : [res.data]
+          this.total = res.data.totalRecords ? res.data.totalRecords : res.data.length
+        }
+        this.$message({
+          message: '数据已查询完毕',
+          type: 'success'
+        })
+      }).catch(e => {
+        this.$message.error('查询异常')
+      })
+    },
+    formatNormalDate(data) {
+      return formatNormalDate(data)
+    },
+    convertFileSize(size) {
+      return convertFileSize(size)
+    },
+    updated() {
+      this.reload()
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
+
+<style>
+</style>
diff --git a/src/frontend/devops-op/src/views/separation/components/CreateOrUpdateSeparationTaskDialog.vue b/src/frontend/devops-op/src/views/separation/components/CreateOrUpdateSeparationTaskDialog.vue
new file mode 100644
index 0000000000..21f998efbe
--- /dev/null
+++ b/src/frontend/devops-op/src/views/separation/components/CreateOrUpdateSeparationTaskDialog.vue
@@ -0,0 +1,386 @@
+<template>
+  <el-dialog title="创建降冷任务" :visible.sync="showDialog" :before-close="close">
+    <el-form ref="form" :rules="rules" :model="task" status-icon>
+      <el-form-item label="任务类型" prop="type">
+        <el-select
+          v-model="task.type"
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item ref="project-form-item" label="项目ID" prop="projectId" :rules="[{ required: true, message: '项目ID不能为空'}]">
+        <el-autocomplete
+          v-model="task.projectId"
+          class="inline-input"
+          :fetch-suggestions="queryProjects"
+          placeholder="请输入项目ID"
+          size="mini"
+          @select="selectProject"
+        >
+          <template slot-scope="{ item }">
+            <div>{{ item.name }}</div>
+          </template>
+        </el-autocomplete>
+      </el-form-item>
+      <el-form-item
+        ref="repo-form-item"
+        label="仓库名称"
+        prop="repoName"
+        :rules="[{ required: true, message: '仓库名不能为空'}]"
+      >
+        <el-autocomplete
+          v-model="task.repoName"
+          class="inline-input"
+          :fetch-suggestions="queryRepositories"
+          :disabled="!task.projectId"
+          placeholder="请输入仓库名"
+          size="mini"
+          @select="selectRepo"
+        >
+          <template slot-scope="{ item }">
+            <div>{{ item.name }}</div>
+          </template>
+        </el-autocomplete>
+      </el-form-item>
+      <el-form-item v-if="task.type === 'SEPARATE'" label="降冷时间" prop="separateAt" :rules="[{ required: task.type === 'SEPARATE', message: '降冷时间不能为空'}]">
+        <el-date-picker
+          v-model="task.separateAt"
+          type="datetime"
+          placeholder="选择日期时间"
+          default-time="12:00:00"
+        />
+      </el-form-item>
+      <el-form-item v-if="task.type === 'RESTORE'" label="恢复是否覆盖" prop="type">
+        <el-select
+          v-model="task.overwrite"
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in overwriteOption"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        v-if="showType !== 'GENERIC'"
+        v-for="(item,index) in task.content.packages"
+        :key="index"
+        prop="packages"
+      >
+        <span>包kEY：</span>
+        <el-input
+          v-model="item.packageKey"
+          placeholder="请输入"
+          style="height: 40px; width: 120px"
+          min="0"
+        />
+        <span style="margin-left: 10px">包kEY正则：</span>
+        <el-input
+          v-model="item.packageKeyRegex"
+          placeholder="请输入"
+          style="height: 40px; width: 120px"
+          min="0"
+        />
+        <span style="margin-left: 10px">包版本：</span>
+        <el-input
+          v-model="item.versionList"
+          placeholder="请输入数据，按逗号分隔"
+          style="height: 40px; width: 200px"
+          min="0"
+          @change="versionChange(index)"
+        />
+        <span style="margin-left: 10px">包版本正则：</span>
+        <el-input
+          v-model="item.versionRegex"
+          placeholder="请输入"
+          style="height: 40px; width: 120px"
+          min="0"
+        />
+        <span style="margin-left: 10px">排除包版本：</span>
+        <el-input
+          v-model="item.excludeVersionList"
+          placeholder="请输入数据，按逗号分隔"
+          style="height: 40px; width: 200px"
+          @change="excludeVersionChange(index)"
+        />
+        <i
+          class="el-icon-circle-close"
+          style="color: red"
+          @click.prevent="removeDomain(item)"
+        />
+        <i
+          v-if="index == task.content.packages.length - 1"
+          class="el-icon-circle-plus-outline"
+          style="margin: 0px 20px"
+          @click.prevent="addDomain()"
+        />
+      </el-form-item>
+      <el-form-item
+        v-if="showType === 'GENERIC'"
+        v-for="(item,index) in task.content.paths"
+        :key="'path'+ index"
+        prop="paths"
+      >
+        <span>路径：</span>
+        <el-input
+          v-model="item.path"
+          placeholder="请输入"
+          style="height: 40px; width: 120px"
+          min="0"
+        />
+        <span style="margin-left: 10px">路径正则：</span>
+        <el-input
+          v-model="item.pathRegex"
+          placeholder="请输入"
+          style="height: 40px; width: 120px"
+          min="0"
+        />
+        <span style="margin-left: 10px">排除路径：</span>
+        <el-input
+          v-model="item.excludePathList"
+          placeholder="请输入数据，按逗号分隔"
+          style="height: 40px; width: 200px"
+          min="0"
+          @change="excludePathChange(index)"
+        />
+        <i
+          class="el-icon-circle-close"
+          style="color: red"
+          @click.prevent="removeNodeDomain(item)"
+        />
+        <i
+          v-if="index === task.content.paths.length - 1"
+          class="el-icon-circle-plus-outline"
+          style="margin: 0px 20px"
+          @click.prevent="addNodeDomain()"
+        />
+      </el-form-item>
+    </el-form>
+    <div slot="footer">
+      <el-button @click="close">取 消</el-button>
+      <el-button type="primary" @click="handleUpdate()">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import _ from 'lodash'
+import { searchProjects } from '@/api/project'
+import { listRepositories } from '@/api/repository'
+import { createSeparateTask, updateSeparateTask } from '@/api/separate'
+export default {
+  name: 'EditSeparatorTaskConfigDialog',
+  props: {
+    visible: Boolean,
+    createMode: Boolean,
+    /**
+     * 仅在更新模式时有值
+     */
+    updatingTaskConfig: {
+      type: Object,
+      default: undefined
+    }
+  },
+  data() {
+    return {
+      repoCache: {},
+      showDialog: this.visible,
+      projects: undefined,
+      task: this.newTask(),
+      rules: {},
+      options: [
+        { label: '降冷', value: 'SEPARATE' },
+        { label: '恢复', value: 'RESTORE' }
+      ],
+      overwriteOption: [
+        { label: 'true', value: true },
+        { label: 'false', value: false }
+      ],
+      showType: 'GENERIC'
+    }
+  },
+  watch: {
+    visible: function(newVal) {
+      if (newVal) {
+        this.resetTask()
+        this.showDialog = true
+      } else {
+        this.close()
+      }
+    }
+  },
+  methods: {
+    queryProjects(queryStr, cb) {
+      searchProjects(queryStr).then(res => {
+        this.projects = res.data.records
+        cb(this.projects)
+      })
+    },
+    selectProject(project) {
+      this.$refs['project-form-item'].resetField()
+      this.task.projectId = project.name
+    },
+    queryRepositories(queryStr, cb) {
+      let repositories = this.repoCache[this.task.projectId]
+      if (!repositories) {
+        listRepositories(this.task.projectId).then(res => {
+          repositories = res.data
+          this.repoCache[this.task.projectId] = repositories
+          cb(this.doFilter(repositories, queryStr))
+        })
+      } else {
+        cb(this.doFilter(repositories, queryStr))
+      }
+    },
+    selectRepo(repo) {
+      this.$refs['repo-form-item'].resetField()
+      this.showType = repo.type
+      this.task.repoName = repo.name
+    },
+    doFilter(arr, queryStr) {
+      return queryStr ? arr.filter(obj => {
+        return obj.name.toLowerCase().indexOf(queryStr.toLowerCase()) !== -1
+      }) : arr
+    },
+    resetTask() {
+      if (this.createMode) {
+        this.task = this.newTask()
+      } else {
+        this.task = _.cloneDeep(this.updatingTaskConfig)
+      }
+      this.$nextTick(() => {
+        this.$refs['form'].clearValidate()
+      })
+    },
+    newTask() {
+      const task = {
+        projectId: '',
+        repoName: '',
+        content: {
+          packages: [{
+            packageKey: '',
+            packageKeyRegex: '',
+            versions: [''],
+            versionList: '',
+            versionRegex: '',
+            excludeVersions: [''],
+            excludeVersionList: ''
+          }],
+          paths: [{
+            path: '',
+            pathRegex: '',
+            excludePath: [''],
+            excludePathList: ''
+          }]
+        },
+        type: 'SEPARATE',
+        separateAt: '',
+        overwrite: false
+      }
+      return task
+    },
+    close(changed) {
+      this.showDialog = false
+      this.$refs['form'].resetFields()
+      if (changed === true) {
+        this.$emit('updated')
+      }
+      this.$emit('update:visible', false)
+    },
+    handleUpdate() {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          console.log(this.task)
+          const task = this.dataFormat(this.task)
+          if (task.content === null) {
+            task.content = {
+              paths: null,
+              packages: null
+            }
+          }
+          task.separateAt = this.task.separateAt !== '' ? this.task.separateAt.toISOString() : null
+          console.log(task)
+          if (this.createMode) {
+            createSeparateTask(task).then(() => {
+              this.$message.success('新建配置成功')
+              this.close(true)
+            })
+          } else {
+            updateSeparateTask(task).then(() => {
+              this.$message.success('更新配置成功')
+              this.close(true)
+            })
+          }
+        }
+      })
+    },
+    addDomain() {
+      this.task.content.packages.push({
+        packageKey: '',
+        packageKeyRegex: '',
+        versions: [''],
+        versionList: '',
+        versionRegex: '',
+        excludeVersions: [''],
+        excludeVersionList: ''
+      })
+    },
+    removeDomain(item) {
+      const index = this.task.content.packages.indexOf(item)
+      if (index !== -1 && this.task.content.packages.length !== 1) {
+        this.task.content.packages.splice(index, 1)
+      }
+    },
+    addNodeDomain() {
+      this.task.content.paths.push({
+        path: '',
+        pathRegex: '',
+        excludePath: [''],
+        excludePathList: ''
+      })
+    },
+    removeNodeDomain(item) {
+      const index = this.task.content.paths.indexOf(item)
+      if (index !== -1 && this.task.content.paths.length !== 1) {
+        this.task.content.paths.splice(index, 1)
+      }
+    },
+    versionChange(index) {
+      this.task.content.packages[index].versions = this.task.content.packages[index].versionList.split(',')
+    },
+    excludeVersionChange(index) {
+      this.task.content.packages[index].excludeVersions = this.task.content.packages[index].excludeVersionList.split(',')
+    },
+    excludePathChange(index) {
+      this.task.content.paths[index].excludePath = this.task.content.paths[index].excludePathList.split(',')
+    },
+    dataFormat(obj) {
+      function recursiveTransform(item) {
+        if (Array.isArray(item)) {
+          const transformedArray = item.map(recursiveTransform)
+          return transformedArray.every(el => el === null) ? null : transformedArray
+        } else if (typeof item === 'object' && item !== null) {
+          const newObj = {}
+          for (const key of Object.keys(item)) {
+            newObj[key] = recursiveTransform(item[key])
+          }
+          return Object.values(newObj).every(value => value === null) ? null : newObj
+        } else {
+          return item === '' ? null : item
+        }
+      }
+      return recursiveTransform(obj)
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/frontend/devops-op/src/views/separation/index.vue b/src/frontend/devops-op/src/views/separation/index.vue
new file mode 100644
index 0000000000..e47f97b913
--- /dev/null
+++ b/src/frontend/devops-op/src/views/separation/index.vue
@@ -0,0 +1,348 @@
+<template>
+  <div class="app-container node-container">
+    <el-form ref="form" :inline="true" :model="clientQuery">
+      <el-form-item label="任务状态" style="margin-left: 15px">
+        <el-select v-model="clientQuery.state" clearable placeholder="请选择">
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item ref="project-form-item" label="项目ID" prop="projectId">
+        <el-autocomplete
+          v-model="clientQuery.projectId"
+          class="inline-input"
+          :fetch-suggestions="queryProjects"
+          placeholder="请输入项目ID"
+          size="mini"
+          @select="selectProject"
+        >
+          <template slot-scope="{ item }">
+            <div>{{ item.name }}</div>
+          </template>
+        </el-autocomplete>
+      </el-form-item>
+      <el-form-item
+        ref="repo-form-item"
+        style="margin-left: 15px"
+        label="仓库名称"
+        prop="repoName"
+      >
+        <el-autocomplete
+          v-model="clientQuery.repoName"
+          class="inline-input"
+          :fetch-suggestions="queryRepositories"
+          :disabled="!clientQuery.projectId"
+          placeholder="请输入仓库名"
+          size="mini"
+          @select="selectRepo"
+        >
+          <template slot-scope="{ item }">
+            <div>{{ item.name }}</div>
+          </template>
+        </el-autocomplete>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          size="mini"
+          type="primary"
+          @click="changeRouteQueryParams(1)"
+        >查询</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table v-loading="loading" :data="preloadData" style="width: 100%">
+      <el-table-column type="expand">
+        <template slot-scope="props">
+          <el-table
+            :data="props.row.content.packages"
+            style="width: 100%"
+          >
+            <el-table-column
+              label="包KEY"
+              prop="packageKey"
+            />
+            <el-table-column
+              label="包kEY正则"
+              prop="packageKeyRegex"
+            />
+            <el-table-column
+              label="包版本"
+              prop="versions"
+            >
+              <template slot-scope="scope">
+                {{ scope.row.versions }}
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="包版本正则"
+              prop="versionRegex"
+            />
+            <el-table-column
+              label="排除包版本"
+              prop="excludeVersions"
+            >
+              <template slot-scope="scope">
+                {{ scope.row.excludeVersions }}
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-divider />
+          <el-table
+            :data="props.row.content.paths"
+            style="width: 100%"
+          >
+            <el-table-column
+              label="路径"
+              prop="path"
+            />
+            <el-table-column
+              label="路径正则"
+              prop="pathRegex"
+            />
+            <el-table-column
+              label="排除路径"
+              prop="excludePath"
+            >
+              <template slot-scope="scope">
+                <span>
+                  {{ scope.row.excludePath }}
+                </span>
+              </template>
+            </el-table-column>
+          </el-table>
+        </template>
+      </el-table-column>
+      <el-table-column prop="projectId" label="项目ID" align="center" />
+      <el-table-column prop="repoName" label="仓库名称" align="center" />
+      <el-table-column prop="createdDate" label="创建时间" align="center">
+        <template slot-scope="scope">
+          <span>
+            {{ formatNormalDate(scope.row.createdDate) }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column key="state" prop="state" label="状态" align="center">
+        <template slot-scope="scope">
+          <span>
+            {{ formatState(scope.row.state) }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column key="createdBy" prop="createdBy" label="创建人" align="center" />
+      <el-table-column prop="separationDate" label="降冷临界时间" align="center">
+        <template slot-scope="scope">
+          <span>
+            {{ formatNormalDate(scope.row.separationDate) }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="separationDate" label="任务开始时间" align="center">
+        <template slot-scope="scope">
+          <span>
+            {{ formatNormalDate(scope.row.separationDate) }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="separationDate" label="任务结束时间" align="center">
+        <template slot-scope="scope">
+          <span>
+            {{ formatNormalDate(scope.row.separationDate) }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column key="successCount" prop="successCount" label="成功降冷数" align="center" />
+      <el-table-column key="failedCount" prop="failedCount" label="失败降冷数" align="center" />
+      <el-table-column key="skippedCount" prop="skippedCount" label="跳过降冷数" align="center" />
+      <el-table-column key="lastModifiedBy" prop="lastModifiedBy" label="修改人" align="center" />
+      <el-table-column prop="lastModifiedDate" label="修改时间" align="center">
+        <template slot-scope="scope">
+          <span>
+            {{ formatNormalDate(scope.row.lastModifiedDate) }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column align="right">
+        <template slot="header">
+          <el-button type="primary" @click="showEdit(true)">创建</el-button>
+        </template>
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="primary"
+            @click="refreshState(scope.row)"
+          >
+            重启
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div style="margin-top:20px">
+      <el-pagination
+        v-if="total>0"
+        :current-page="clientQuery.pageNumber"
+        :page-size="clientQuery.pageSize"
+        layout="total, prev, pager, next, jumper"
+        :total="total"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+    <create-or-update-separation-task-dialog :visible.sync="showEditDialog" :updating-task-config="param" :create-mode="createMode" @updated="updated" />
+  </div>
+</template>
+<script>
+import { formatNormalDate } from '@/utils/date'
+import { convertFileSize } from '@/utils/file'
+import { querySeparateTask, updateSeparateTask } from '@/api/separate'
+import CreateOrUpdateSeparationTaskDialog from '@/views/separation/components/CreateOrUpdateSeparationTaskDialog'
+import { searchProjects } from '@/api/project'
+import { listRepositories } from '@/api/repository'
+export default {
+  name: 'SeparationTaskConfig',
+  components: { CreateOrUpdateSeparationTaskDialog },
+  inject: ['reload'],
+  beforeRouteUpdate(to, from, next) {
+    this.onRouteUpdate(to)
+    next()
+  },
+  data() {
+    return {
+      loading: false,
+      repoCache: {},
+      total: 0,
+      clientQuery: {
+        pageNumber: 1,
+        pageSize: 20,
+        currentPage: 1,
+        state: '',
+        projectId: '',
+        repoName: ''
+      },
+      options: [
+        { label: '请求中', value: 'PENDING' },
+        { label: '运行中', value: 'RUNNING' },
+        { label: '已结束', value: 'FINISHED' }
+      ],
+      preloadData: [],
+      showEditDialog: false,
+      param: undefined,
+      createMode: false,
+      projects: undefined
+    }
+  },
+  mounted() {
+    this.onRouteUpdate(this.$route)
+  },
+  methods: {
+    queryProjects(queryStr, cb) {
+      searchProjects(queryStr).then(res => {
+        this.projects = res.data.records
+        cb(this.projects)
+      })
+    },
+    selectProject(project) {
+      this.$refs['project-form-item'].resetField()
+      this.clientQuery.projectId = project.name
+    },
+    queryRepositories(queryStr, cb) {
+      let repositories = this.repoCache[this.clientQuery.projectId]
+      if (!repositories) {
+        listRepositories(this.clientQuery.projectId).then(res => {
+          repositories = res.data
+          this.repoCache[this.clientQuery.projectId] = repositories
+          cb(this.doFilter(repositories, queryStr))
+        })
+      } else {
+        cb(this.doFilter(repositories, queryStr))
+      }
+    },
+    selectRepo(repo) {
+      this.$refs['repo-form-item'].resetField()
+      this.clientQuery.repoName = repo.name
+    },
+    doFilter(arr, queryStr) {
+      return queryStr ? arr.filter(obj => {
+        return obj.name.toLowerCase().indexOf(queryStr.toLowerCase()) !== -1
+      }) : arr
+    },
+    handleCurrentChange(val) {
+      this.clientQuery.currentPage = val
+      this.changeRouteQueryParams(val)
+    },
+    changeRouteQueryParams(pageNum) {
+      const query = {
+        page: String(pageNum)
+      }
+      query.state = this.clientQuery.state
+      query.projectId = this.clientQuery.projectId
+      query.repoName = this.clientQuery.repoName
+      this.$router.push({ path: '/separation-config', query: query })
+    },
+    onRouteUpdate(route) {
+      const query = route.query
+      const clientQuery = this.clientQuery
+      clientQuery.state = query.state ? query.state : null
+      clientQuery.pageNumber = query.page ? Number(query.page) : 1
+      clientQuery.projectId = query.projectId ? query.projectId : null
+      clientQuery.repoName = query.repoName ? query.repoName : null
+      this.$nextTick(() => {
+        this.queryClients(clientQuery)
+      })
+    },
+    queryClients(clientQuery) {
+      if (this.$refs['form']) {
+        this.$refs['form'].validate((valid) => {
+          if (valid) {
+            this.doQueryClients(clientQuery)
+          } else {
+            return false
+          }
+        })
+      }
+    },
+    doQueryClients(clientQuery) {
+      let promise = null
+      promise = querySeparateTask(clientQuery)
+      promise.then(res => {
+        this.preloadData = res.data.records ? res.data.records : res.data
+        this.total = res.data.totalRecords ? res.data.totalRecords : res.data.length
+      })
+    },
+    formatNormalDate(data) {
+      return formatNormalDate(data)
+    },
+    formatState(data) {
+      for (let i = 0; i < this.options.length; i++) {
+        if (data === this.options[i].value) {
+          return this.options[i].label
+        }
+      }
+      return '请求中'
+    },
+    convertFileSize(size) {
+      return convertFileSize(size)
+    },
+    showEdit(mode, row) {
+      this.createMode = mode
+      this.param = row
+      this.showEditDialog = true
+    },
+    refreshState(row) {
+      updateSeparateTask(row.id).then(() => {
+        this.updated()
+      })
+    },
+    updated() {
+      this.reload()
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
+
+<style>
+</style>