diff --git a/frontend/src/components/business/DeLayoutContent.vue b/frontend/src/components/business/DeLayoutContent.vue
index ddd0a8bfff..d83453a677 100644
--- a/frontend/src/components/business/DeLayoutContent.vue
+++ b/frontend/src/components/business/DeLayoutContent.vue
@@ -34,7 +34,7 @@ export default {
       return backPath || backName || backTo
     },
     needInnerPadding() {
-      return ['system-dept', 'system-dept-form', 'system-auth', 'sys-appearance', 'system-param', 'system-template'].includes(this.$route.name)
+      return ['sys-task-email', 'system-dept', 'system-dept-form', 'system-auth', 'sys-appearance', 'system-param', 'system-template', "sys-task-dataset"].includes(this.$route.name)
     }
   }
 }
@@ -55,6 +55,7 @@ export default {
   height: 100%;
   display: flex;
   flex-direction: column;
+  position: relative;
   .route-title {
     font-family: PingFang SC;
     font-size: 20px;
diff --git a/frontend/src/components/gridTable/index.vue b/frontend/src/components/gridTable/index.vue
index 9b6e5a66d8..d56f4a3716 100644
--- a/frontend/src/components/gridTable/index.vue
+++ b/frontend/src/components/gridTable/index.vue
@@ -159,6 +159,10 @@ export default {
   flex-direction: column;
   justify-content: space-between;
 
+  ::v-deep.el-table-column--selection .cell {
+    padding: 0 14px;
+  }
+
   .el-table::before {
     content: '';
     position: absolute;
diff --git a/frontend/src/components/gridTable/tableBody.vue b/frontend/src/components/gridTable/tableBody.vue
index cc07576985..7a987865d6 100644
--- a/frontend/src/components/gridTable/tableBody.vue
+++ b/frontend/src/components/gridTable/tableBody.vue
@@ -13,11 +13,12 @@ export default {
     const { columns } = context.props;
     const { children = [] } = context;
     if (!columns?.length) return children;
-        children.forEach(ele => {
-            if (columns.includes(ele.componentOptions?.propsData?.prop)) {
-                nodes.push(ele)
-            }
-        })
+    children.forEach((ele) => {
+      const { prop, type } = ele.componentOptions?.propsData || {};
+      if (columns.includes(prop) || type === "selection") {
+        nodes.push(ele);
+      }
+    });
     return nodes;
   },
 };
diff --git a/frontend/src/filter/filter.js b/frontend/src/filter/filter.js
index 70d5137a1a..df0bf61ac6 100644
--- a/frontend/src/filter/filter.js
+++ b/frontend/src/filter/filter.js
@@ -11,8 +11,8 @@ const options = function(value, array) {
 }
 
 const timestampFormatDate = function(timestamp, showMs) {
-  if (!timestamp) {
-    return timestamp
+  if (!timestamp || timestamp === -1) {
+    return '-'
   }
 
   const date = new Date(timestamp)
diff --git a/frontend/src/icons/svg/ds-api.svg b/frontend/src/icons/svg/ds-api.svg
index 537b512888..479f848d1a 100644
--- a/frontend/src/icons/svg/ds-api.svg
+++ b/frontend/src/icons/svg/ds-api.svg
@@ -1 +1,11 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1645342109651" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7289" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 170.666667H398.222222v682.666666h56.888889V512h56.888889c91.022222 0 170.666667-73.955556 170.666667-170.666667s-73.955556-170.666667-170.666667-170.666666z m113.777778 170.666666c0 62.577778-51.2 113.777778-113.777778 113.777778H455.111111V227.555556h56.888889c62.577778 0 113.777778 51.2 113.777778 113.777777zM910.222222 227.555556V170.666667h-170.666666v56.888889h56.888888v568.888888h-56.888888v56.888889h170.666666v-56.888889h-56.888889V227.555556zM199.111111 170.666667C119.466667 170.666667 56.888889 233.244444 56.888889 312.888889V853.333333h56.888889V512h170.666666v341.333333h56.888889V312.888889C341.333333 233.244444 278.755556 170.666667 199.111111 170.666667zM284.444444 455.111111H113.777778V312.888889C113.777778 267.377778 153.6 227.555556 199.111111 227.555556h5.688889C244.622222 227.555556 284.444444 267.377778 284.444444 312.888889V455.111111z" fill="#13227a" p-id="7290"></path></svg>
\ No newline at end of file
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.75 4C0.75 1.79086 2.54086 0 4.75 0H13.25C15.4591 0 17.25 1.79086 17.25 4V14C17.25 16.2091 15.4591 18 13.25 18H4.75C2.54086 18 0.75 16.2091 0.75 14V4Z" fill="#04B49C"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.90482 9.24762H7.48922L6.7168 11.2531H7.16284L7.33872 10.7701H8.0527L8.22858 11.2531H8.67725L7.90482 9.24762ZM7.91818 10.4026H7.47351L7.69678 9.79659L7.91818 10.4026Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.7607 9.24762H8.91807V11.2531H9.33545V10.5234H9.75545C9.98769 10.5234 10.1744 10.474 10.3036 10.364C10.4349 10.2523 10.4957 10.0877 10.4957 9.88286C10.4957 9.67946 10.4356 9.51611 10.3052 9.40532C10.1769 9.29626 9.99151 9.24762 9.7607 9.24762ZM10.0783 9.88286C10.0783 9.98527 10.0486 10.0477 10.0053 10.084C9.9568 10.1225 9.8726 10.148 9.73707 10.148H9.33545V9.62299H9.73707C9.87028 9.62299 9.95464 9.64862 10.0031 9.68743L10.0059 9.68937C10.0479 9.71964 10.0783 9.779 10.0783 9.88286Z" fill="white"/>
+<path d="M10.8545 9.24762H11.2692V11.2531H10.8545V9.24762Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 4.625C7.41512 4.625 6.11143 5.82891 5.95354 7.37209C4.68028 7.74342 3.75 8.91932 3.75 10.3125C3.75 12.0039 5.12113 13.375 6.8125 13.375H11.1875C12.8789 13.375 14.25 12.0039 14.25 10.3125C14.25 8.91932 13.3197 7.74342 12.0465 7.3721C11.8886 5.82891 10.5849 4.625 9 4.625ZM9 5.5C7.79188 5.5 6.8125 6.47938 6.8125 7.6875V8.125C5.60438 8.125 4.625 9.10438 4.625 10.3125C4.625 11.5206 5.60438 12.5 6.8125 12.5H11.1875C12.3956 12.5 13.375 11.5206 13.375 10.3125C13.375 9.10438 12.3956 8.125 11.1875 8.125V7.6875C11.1875 6.47938 10.2081 5.5 9 5.5Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.90482 9.24762H7.48922L6.7168 11.2531H7.16284L7.33872 10.7701H8.0527L8.22858 11.2531H8.67725L7.90482 9.24762ZM7.91818 10.4026H7.47351L7.69678 9.79659L7.91818 10.4026Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.7607 9.24762H8.91807V11.2531H9.33545V10.5234H9.75545C9.98769 10.5234 10.1744 10.474 10.3036 10.364C10.4349 10.2523 10.4957 10.0877 10.4957 9.88286C10.4957 9.67946 10.4356 9.51611 10.3052 9.40532C10.1769 9.29626 9.99151 9.24762 9.7607 9.24762ZM10.0783 9.88286C10.0783 9.98527 10.0486 10.0477 10.0053 10.084C9.9568 10.1225 9.8726 10.148 9.73707 10.148H9.33545V9.62299H9.73707C9.87028 9.62299 9.95464 9.64862 10.0031 9.68743L10.0059 9.68937C10.0479 9.71964 10.0783 9.779 10.0783 9.88286Z" fill="white"/>
+<path d="M10.8545 9.24762H11.2692V11.2531H10.8545V9.24762Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 4.625C7.41512 4.625 6.11143 5.82891 5.95354 7.37209C4.68028 7.74342 3.75 8.91932 3.75 10.3125C3.75 12.0039 5.12113 13.375 6.8125 13.375H11.1875C12.8789 13.375 14.25 12.0039 14.25 10.3125C14.25 8.91932 13.3197 7.74342 12.0465 7.3721C11.8886 5.82891 10.5849 4.625 9 4.625ZM9 5.5C7.79188 5.5 6.8125 6.47938 6.8125 7.6875V8.125C5.60438 8.125 4.625 9.10438 4.625 10.3125C4.625 11.5206 5.60438 12.5 6.8125 12.5H11.1875C12.3956 12.5 13.375 11.5206 13.375 10.3125C13.375 9.10438 12.3956 8.125 11.1875 8.125V7.6875C11.1875 6.47938 10.2081 5.5 9 5.5Z" fill="white"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/src/icons/svg/ds-db.svg b/frontend/src/icons/svg/ds-db.svg
index fe8c0b60b7..8b96d0ddd3 100644
--- a/frontend/src/icons/svg/ds-db.svg
+++ b/frontend/src/icons/svg/ds-db.svg
@@ -1 +1,4 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1618222670482" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3856" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 384c-229.8 0-416-57.3-416-128v256c0 70.7 186.2 128 416 128s416-57.3 416-128V256c0 70.7-186.2 128-416 128z" p-id="3857"></path><path d="M512 704c-229.8 0-416-57.3-416-128v256c0 70.7 186.2 128 416 128s416-57.3 416-128V576c0 70.7-186.2 128-416 128zM512 320c229.8 0 416-57.3 416-128S741.8 64 512 64 96 121.3 96 192s186.2 128 416 128z" p-id="3858"></path></svg>
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.75 4C0.75 1.79086 2.54086 0 4.75 0H13.25C15.4591 0 17.25 1.79086 17.25 4V14C17.25 16.2091 15.4591 18 13.25 18H4.75C2.54086 18 0.75 16.2091 0.75 14V4Z" fill="#3370FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.375 11.625C13.375 11.9977 13.148 12.2832 12.8989 12.4795C12.6448 12.6797 12.3043 12.8409 11.9226 12.9681C11.1545 13.2242 10.1212 13.375 9 13.375C7.87875 13.375 6.84549 13.2242 6.07742 12.9681C5.69567 12.8409 5.35517 12.6797 5.10113 12.4795C4.85202 12.2832 4.625 11.9977 4.625 11.625V6.375C4.625 6.00227 4.85202 5.71682 5.10113 5.5205C5.35517 5.32029 5.69567 5.15912 6.07742 5.03187C6.84549 4.77585 7.87875 4.625 9 4.625C10.1212 4.625 11.1545 4.77585 11.9226 5.03187C12.3043 5.15912 12.6448 5.32029 12.8989 5.5205C13.148 5.71682 13.375 6.00227 13.375 6.375V11.625ZM5.5 6.37497C5.5 6.37458 5.49999 6.37272 5.50134 6.36831C5.50282 6.36343 5.50649 6.3538 5.51535 6.33937C5.53391 6.30912 5.57178 6.26364 5.64273 6.20773C5.78718 6.09389 6.02332 5.97224 6.35412 5.86197C7.01114 5.64296 7.94663 5.5 9 5.5C10.0534 5.5 10.9889 5.64296 11.6459 5.86197C11.9767 5.97224 12.2128 6.09389 12.3573 6.20773C12.4282 6.26364 12.4661 6.30912 12.4847 6.33937C12.4935 6.3538 12.4972 6.36343 12.4987 6.36831C12.5 6.37272 12.5 6.37458 12.5 6.37497C12.5 6.37499 12.5 6.37494 12.5 6.37497C12.5 6.37548 12.4999 6.3775 12.4987 6.38169C12.4972 6.38657 12.4935 6.3962 12.4847 6.41063C12.4661 6.44088 12.4282 6.48636 12.3573 6.54227C12.2128 6.65611 11.9767 6.77776 11.6459 6.88803C10.9889 7.10703 10.0534 7.25 9 7.25C7.94663 7.25 7.01114 7.10703 6.35412 6.88803C6.02332 6.77776 5.78718 6.65611 5.64273 6.54227C5.57178 6.48636 5.53391 6.44088 5.51535 6.41063C5.50649 6.3962 5.50282 6.38657 5.50134 6.38169C5.50007 6.37754 5.5 6.3755 5.5 6.37497ZM12.5 7.48039C12.3245 7.57015 12.1296 7.64912 11.9226 7.71813C11.1545 7.97415 10.1212 8.125 9 8.125C7.87875 8.125 6.84549 7.97415 6.07742 7.71813C5.87041 7.64912 5.67554 7.57015 5.5 7.48039V9C5.5 9.00053 5.50007 9.00253 5.50134 9.00669C5.50282 9.01157 5.50649 9.0212 5.51535 9.03563C5.53391 9.06588 5.57178 9.11136 5.64273 9.16727C5.78718 9.28111 6.02332 9.40276 6.35412 9.51303C7.01114 9.73203 7.94663 9.875 9 9.875C10.0534 9.875 10.9889 9.73203 11.6459 9.51303C11.9767 9.40276 12.2128 9.28111 12.3573 9.16727C12.4282 9.11136 12.4661 9.06588 12.4847 9.03563C12.4935 9.0212 12.4972 9.01157 12.4987 9.00669C12.4999 9.0025 12.5 9.00061 12.5 9.0001C12.5 9.00007 12.5 9.00012 12.5 9.0001V7.48039ZM12.5 10.1054C12.3245 10.1952 12.1296 10.2741 11.9226 10.3431C11.1545 10.5992 10.1212 10.75 9 10.75C7.87875 10.75 6.84549 10.5992 6.07742 10.3431C5.87041 10.2741 5.67554 10.1952 5.5 10.1054V11.625C5.5 11.6254 5.49999 11.6273 5.50134 11.6317C5.50282 11.6366 5.50649 11.6462 5.51535 11.6606C5.53391 11.6909 5.57178 11.7364 5.64273 11.7923C5.78718 11.9061 6.02332 12.0278 6.35412 12.138C7.01114 12.357 7.94663 12.5 9 12.5C10.0534 12.5 10.9889 12.357 11.6459 12.138C11.9767 12.0278 12.2128 11.9061 12.3573 11.7923C12.4282 11.7364 12.4661 11.6909 12.4847 11.6606C12.4935 11.6462 12.4972 11.6366 12.4987 11.6317C12.5 11.6273 12.5 11.6254 12.5 11.625V10.1054Z" fill="white"/>
+</svg>
diff --git a/frontend/src/icons/svg/ds-excel.svg b/frontend/src/icons/svg/ds-excel.svg
index f54564264a..5bf5ed7042 100644
--- a/frontend/src/icons/svg/ds-excel.svg
+++ b/frontend/src/icons/svg/ds-excel.svg
@@ -1 +1,4 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1617776873772" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8142" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M931.84 655.36c12.288 0 20.48-8.192 20.48-20.48V296.96l-163.84-167.936h-456.704c-45.056 0-81.92 36.864-81.92 81.92v67.584h-137.216c-22.528 0-40.96 18.432-40.96 40.96v405.504c0 22.528 18.432 40.96 40.96 40.96h137.216v53.248c0 45.056 36.864 81.92 81.92 81.92h538.624c45.056 0 81.92-36.864 81.92-81.92v-61.44c0-12.288-8.192-20.48-20.48-20.48s-20.48 8.192-20.48 20.48v61.44c0 22.528-18.432 40.96-40.96 40.96h-538.624c-22.528 0-40.96-18.432-40.96-40.96v-53.248h225.28c22.528 0 40.96-18.432 40.96-40.96v-405.504c0-22.528-18.432-40.96-40.96-40.96h-225.28v-67.584c0-22.528 18.432-40.96 40.96-40.96h415.744v106.496c0 32.768 26.624 61.44 61.44 61.44h102.4v296.96c0 12.288 8.192 20.48 20.48 20.48z m-618.496-165.888l45.056-65.536h61.44l-71.68 102.4 86.016 118.784h-63.488l-55.296-77.824-55.296 77.824h-63.488l86.016-118.784-73.728-102.4h63.488l40.96 65.536z m495.616-192.512c-12.288 0-20.48-8.192-20.48-20.48v-90.112l106.496 110.592h-86.016z" p-id="8143"></path><path d="M768 614.4h-102.4c-12.288 0-20.48 8.192-20.48 20.48s8.192 20.48 20.48 20.48h102.4c12.288 0 20.48-8.192 20.48-20.48s-8.192-20.48-20.48-20.48zM768 512h-102.4c-12.288 0-20.48 8.192-20.48 20.48s8.192 20.48 20.48 20.48h102.4c12.288 0 20.48-8.192 20.48-20.48s-8.192-20.48-20.48-20.48zM768 409.6h-102.4c-12.288 0-20.48 8.192-20.48 20.48s8.192 20.48 20.48 20.48h102.4c12.288 0 20.48-8.192 20.48-20.48s-8.192-20.48-20.48-20.48z" p-id="8144"></path></svg>
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.75 4C0.75 1.79086 2.54086 0 4.75 0H13.25C15.4591 0 17.25 1.79086 17.25 4V14C17.25 16.2091 15.4591 18 13.25 18H4.75C2.54086 18 0.75 16.2091 0.75 14V4Z" fill="#34C724"/>
+<path d="M5.26245 4.1875H11.4821C11.5816 4.1875 11.677 4.22701 11.7473 4.29733L13.0276 5.57766C13.0979 5.64799 13.1374 5.74337 13.1374 5.84283V13.4375C13.1374 13.6446 12.9696 13.8125 12.7624 13.8125H5.26245C5.05534 13.8125 4.88745 13.6446 4.88745 13.4375V4.5625C4.88745 4.35539 5.05534 4.1875 5.26245 4.1875ZM5.78743 12.9126H12.2374V6.4375H11.0187C10.9462 6.4375 10.8875 6.37874 10.8875 6.30625V5.08756H5.78743V12.9126ZM11.2972 7.391C11.3417 7.33349 11.3007 7.25 11.228 7.25H10.3554C10.3283 7.25 10.3027 7.26256 10.2862 7.284L8.93069 8.85891L9.54682 9.65625L11.2972 7.391ZM8.93069 8.85891L8.93192 8.86048L9.54682 9.65625L8.93192 10.452L8.93069 10.4535L7.7137 12.0285C7.69713 12.0499 7.67156 12.0625 7.64446 12.0625H6.77187C6.69918 12.0625 6.65819 11.979 6.70263 11.9215L8.41173 9.70976C8.43605 9.67821 8.43605 9.63424 8.41173 9.60274L6.70265 7.391C6.65821 7.33349 6.6992 7.25 6.77189 7.25H7.64446C7.67156 7.25 7.69713 7.26256 7.7137 7.284L8.93069 8.85891ZM10.2862 12.0285L8.93069 10.4535L9.54682 9.65625L11.2972 11.9215C11.3417 11.979 11.3007 12.0625 11.228 12.0625H10.3554C10.3283 12.0625 10.3027 12.0499 10.2862 12.0285Z" fill="white"/>
+</svg>
diff --git a/frontend/src/icons/svg/ds-sql.svg b/frontend/src/icons/svg/ds-sql.svg
index a8a02c2407..10c7673d61 100644
--- a/frontend/src/icons/svg/ds-sql.svg
+++ b/frontend/src/icons/svg/ds-sql.svg
@@ -1 +1,11 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1617776943065" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10538" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M923.136 576.512V312.32c0-20.992-13.312-44.032-32.768-55.808l-346.624-199.168c-18.944-11.776-46.592-11.776-65.536 0l-347.136 199.68c-18.944 11.776-32.256 34.816-32.256 55.808v264.192h-20.48V829.44H235.52l242.688 140.288 0.512 0.512c9.216 4.608 20.48 7.168 31.744 7.168 11.776 0 23.04-2.56 31.744-7.168l241.664-140.288h159.232v-252.416h-19.968z m-408.064-465.408h3.584L841.728 296.96 517.12 476.672l-324.608-179.2 322.56-186.368zM167.936 356.352l317.44 174.592v45.568h-317.44v-220.16z m215.552 423.936c-14.848 16.384-34.816 22.016-50.176 22.016-21.504 0-38.4-5.12-50.688-14.336-17.92-13.824-22.528-35.84-24.064-55.808l-1.024-11.776H296.96l1.536 9.216c2.048 14.336 5.12 21.504 10.24 25.088l0.512 0.512c7.168 5.632 15.872 8.192 24.576 7.68 11.776 0 19.968-2.048 25.088-6.144l1.024-0.512c4.096-2.56 6.656-7.68 6.144-13.312-0.512-7.168-4.608-13.824-10.752-16.896l-1.024-0.512c-1.536-1.024-8.192-3.072-13.824-5.12-5.12-1.536-11.264-3.584-17.92-6.144-14.336-4.608-25.6-9.728-32.256-12.8-2.048-1.024-3.584-1.536-4.608-2.048l-1.024-0.512c-15.872-8.192-25.088-25.6-24.064-44.032-0.512-17.408 7.68-33.28 20.992-43.008 13.824-9.728 30.208-14.848 47.104-14.336 21.504 0 36.864 5.632 49.664 17.408 12.8 11.776 20.992 29.696 21.504 48.128l0.512 10.752h-38.4l-1.536-8.704c-2.048-11.264-4.608-18.432-9.216-22.016a36.352 36.352 0 0 0-22.528-7.68H327.68c-7.68 0-15.36 1.536-22.528 4.608-3.584 2.56-6.144 7.168-5.632 11.776v1.024c0 4.608 2.56 8.192 5.632 9.728l1.536 0.512c8.704 4.096 17.408 7.168 26.624 9.216h0.512c14.848 4.096 29.184 9.728 43.008 16.896 15.872 8.704 26.112 27.136 25.6 46.592 0 17.92-7.168 30.72-18.944 44.544z m102.4 116.224l-111.616-67.584h111.616v67.584z m62.464 0v-67.584h116.736l-116.736 67.584z m54.272-111.104l3.584 6.656-26.112 29.184-7.168-13.312c-2.56-4.096-5.12-8.192-8.192-12.288-1.536-2.048-3.072-4.096-4.608-6.656-12.288 6.656-25.6 10.24-39.424 10.24h-3.584c-15.36 0.512-30.72-4.608-43.52-14.336-6.656-4.608-12.8-10.24-18.432-15.872l-0.512-0.512c-14.848-18.432-22.528-43.52-22.528-72.704 0-31.744 7.168-54.784 23.04-72.704 5.12-6.656 11.776-12.288 19.456-16.896 13.312-7.168 27.136-11.776 40.96-13.824h5.12c28.16 0 49.664 10.24 64 30.72 14.848 18.432 22.528 43.52 22.528 72.192 0.512 24.064-6.656 48.128-19.456 68.096 5.632 6.656 10.24 14.336 14.848 22.016z m37.888 3.584v-193.536h39.936v154.624l93.696 5.12v33.792h-133.632z m225.792-212.48h-317.44v-45.568l317.44-174.592v220.16z" p-id="10539"></path><path d="M518.144 632.32h-3.072c-11.264 1.536-22.016 6.656-30.208 15.36l-1.024 1.024c-8.704 13.824-13.312 30.208-12.8 47.104v1.024c-0.512 16.384 3.584 33.28 12.8 46.592l2.048 2.56c7.168 9.216 17.408 14.848 28.16 14.336h4.096c6.144 0 12.288-1.024 18.432-3.584-5.632-8.192-11.776-16.384-18.432-24.064l-6.144-7.168 26.112-28.672 7.68 10.24c4.096 5.12 7.68 9.728 11.776 14.336 2.048 2.56 4.096 4.608 5.632 7.168 3.072-8.704 4.608-18.944 4.608-31.232 0.512-16.896-3.584-33.28-12.8-47.104-9.728-11.776-23.04-17.92-36.864-17.92z" p-id="10540"></path></svg>
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.75 4C0.75 1.79086 2.54086 0 4.75 0H13.25C15.4591 0 17.25 1.79086 17.25 4V14C17.25 16.2091 15.4591 18 13.25 18H4.75C2.54086 18 0.75 16.2091 0.75 14V4Z" fill="#FF8800"/>
+<path d="M6.7909 10.5821H6.34753L6.35551 10.6989C6.36855 10.8899 6.45684 11.0506 6.60246 11.1615C6.74626 11.2711 6.9395 11.3276 7.15933 11.3276C7.38407 11.3276 7.58144 11.2696 7.72495 11.1535C7.87093 11.0354 7.95187 10.8645 7.95187 10.662C7.95187 10.5073 7.90547 10.3725 7.79318 10.2663C7.68572 10.1646 7.52833 10.0993 7.32754 10.0553L7.12242 10.0104C7.00426 9.9846 6.9376 9.95124 6.9016 9.91914C6.87054 9.89144 6.85727 9.86056 6.85727 9.81604C6.85727 9.76106 6.88139 9.71764 6.92885 9.68416C6.97924 9.64862 7.05771 9.62421 7.15677 9.62421C7.25905 9.62421 7.33401 9.65055 7.38327 9.68875C7.43097 9.72573 7.46223 9.77948 7.46964 9.85269L7.4796 9.95105H7.92218L7.91849 9.83811C7.90582 9.44994 7.5749 9.19781 7.16318 9.19781C6.95198 9.19781 6.7634 9.25678 6.62517 9.36675C6.48529 9.47803 6.4014 9.63868 6.4014 9.82629C6.4014 9.98229 6.45009 10.1197 6.5605 10.2282C6.66744 10.3334 6.82267 10.402 7.01812 10.4446L7.22306 10.4894C7.34307 10.5158 7.41142 10.55 7.44877 10.5838C7.48125 10.6131 7.496 10.6469 7.496 10.6966C7.496 10.7473 7.47184 10.7948 7.41877 10.8333C7.36419 10.8729 7.27967 10.9012 7.17215 10.9012C6.93428 10.9012 6.82015 10.798 6.80373 10.6768L6.7909 10.5821Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.074 10.2634C10.074 10.6009 9.97189 10.8853 9.77639 11.0764L10.0882 11.5058H9.55906L9.40164 11.2896C9.31114 11.3153 9.21446 11.3276 9.11228 11.3276C8.82315 11.3276 8.57883 11.2253 8.40791 11.0338C8.23824 10.8437 8.15054 10.5767 8.15054 10.2634C8.15054 9.95008 8.23824 9.6828 8.40784 9.49239C8.57871 9.30055 8.82303 9.19781 9.11228 9.19781C9.40152 9.19781 9.64584 9.30055 9.81671 9.49239C9.98631 9.6828 10.074 9.95008 10.074 10.2634ZM8.86314 10.5488L9.11524 10.8961L9.11228 10.8961C8.95323 10.8961 8.83129 10.837 8.7471 10.7353C8.66103 10.6314 8.60642 10.4729 8.60642 10.2634C8.60642 10.0531 8.66107 9.89433 8.74715 9.79026C8.83132 9.68849 8.95324 9.62933 9.11228 9.62933C9.27131 9.62933 9.39323 9.68849 9.4774 9.79026C9.56348 9.89433 9.61813 10.0531 9.61813 10.2634C9.61813 10.4513 9.57442 10.5979 9.50349 10.701L9.39206 10.5488H8.86314Z" fill="white"/>
+<path d="M11.7027 11.2969V10.8705H10.8106V9.22858H10.3611V11.2969H11.7027Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.26221 4.1875H11.4819C11.5813 4.1875 11.6767 4.22701 11.747 4.29733L13.0274 5.57766C13.0977 5.64799 13.1372 5.74337 13.1372 5.84283V13.4375C13.1372 13.6446 12.9693 13.8125 12.7622 13.8125H5.26221C5.0551 13.8125 4.88721 13.6446 4.88721 13.4375V4.5625C4.88721 4.35539 5.0551 4.1875 5.26221 4.1875ZM5.78719 12.9126H12.2372V6.4375H11.0185C10.946 6.4375 10.8872 6.37874 10.8872 6.30625V5.08756H5.78719V12.9126Z" fill="white"/>
+<path d="M6.7909 10.5821H6.34753L6.35551 10.6989C6.36855 10.8899 6.45684 11.0506 6.60246 11.1615C6.74626 11.2711 6.9395 11.3276 7.15933 11.3276C7.38407 11.3276 7.58144 11.2696 7.72495 11.1535C7.87093 11.0354 7.95187 10.8645 7.95187 10.662C7.95187 10.5073 7.90547 10.3725 7.79318 10.2663C7.68572 10.1646 7.52833 10.0993 7.32754 10.0553L7.12242 10.0104C7.00426 9.9846 6.9376 9.95124 6.9016 9.91914C6.87054 9.89144 6.85727 9.86056 6.85727 9.81604C6.85727 9.76106 6.88139 9.71764 6.92885 9.68416C6.97924 9.64862 7.05771 9.62421 7.15677 9.62421C7.25905 9.62421 7.33401 9.65055 7.38327 9.68875C7.43097 9.72573 7.46223 9.77948 7.46964 9.85269L7.4796 9.95105H7.92218L7.91849 9.83811C7.90582 9.44994 7.5749 9.19781 7.16318 9.19781C6.95198 9.19781 6.7634 9.25678 6.62517 9.36675C6.48529 9.47803 6.4014 9.63868 6.4014 9.82629C6.4014 9.98229 6.45009 10.1197 6.5605 10.2282C6.66744 10.3334 6.82267 10.402 7.01812 10.4446L7.22306 10.4894C7.34307 10.5158 7.41142 10.55 7.44877 10.5838C7.48125 10.6131 7.496 10.6469 7.496 10.6966C7.496 10.7473 7.47184 10.7948 7.41877 10.8333C7.36419 10.8729 7.27967 10.9012 7.17215 10.9012C6.93428 10.9012 6.82015 10.798 6.80373 10.6768L6.7909 10.5821Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.074 10.2634C10.074 10.6009 9.97189 10.8853 9.77639 11.0764L10.0882 11.5058H9.55906L9.40164 11.2896C9.31114 11.3153 9.21446 11.3276 9.11228 11.3276C8.82315 11.3276 8.57883 11.2253 8.40791 11.0338C8.23824 10.8437 8.15054 10.5767 8.15054 10.2634C8.15054 9.95008 8.23824 9.6828 8.40784 9.49239C8.57871 9.30055 8.82303 9.19781 9.11228 9.19781C9.40152 9.19781 9.64584 9.30055 9.81671 9.49239C9.98631 9.6828 10.074 9.95008 10.074 10.2634ZM8.86314 10.5488L9.11524 10.8961L9.11228 10.8961C8.95323 10.8961 8.83129 10.837 8.7471 10.7353C8.66103 10.6314 8.60642 10.4729 8.60642 10.2634C8.60642 10.0531 8.66107 9.89433 8.74715 9.79026C8.83132 9.68849 8.95324 9.62933 9.11228 9.62933C9.27131 9.62933 9.39323 9.68849 9.4774 9.79026C9.56348 9.89433 9.61813 10.0531 9.61813 10.2634C9.61813 10.4513 9.57442 10.5979 9.50349 10.701L9.39206 10.5488H8.86314Z" fill="white"/>
+<path d="M11.7027 11.2969V10.8705H10.8106V9.22858H10.3611V11.2969H11.7027Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.26221 4.1875H11.4819C11.5813 4.1875 11.6767 4.22701 11.747 4.29733L13.0274 5.57766C13.0977 5.64799 13.1372 5.74337 13.1372 5.84283V13.4375C13.1372 13.6446 12.9693 13.8125 12.7622 13.8125H5.26221C5.0551 13.8125 4.88721 13.6446 4.88721 13.4375V4.5625C4.88721 4.35539 5.0551 4.1875 5.26221 4.1875ZM5.78719 12.9126H12.2372V6.4375H11.0185C10.946 6.4375 10.8872 6.37874 10.8872 6.30625V5.08756H5.78719V12.9126Z" fill="white"/>
+</svg>
diff --git a/frontend/src/icons/svg/ds-union.svg b/frontend/src/icons/svg/ds-union.svg
index 9e6b6b4c01..5428e82c93 100644
--- a/frontend/src/icons/svg/ds-union.svg
+++ b/frontend/src/icons/svg/ds-union.svg
@@ -1 +1,4 @@
-<svg t="1637288020248" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3387" width="200" height="200"><path d="M686.3 630.3V513.2c0-19.9-16.1-36-36-36s-36 16.1-36 36v101.1H136.7V136.7h477.6v98.8c0 19.9 16.1 36 36 36s36-16.1 36-36V120.7c0-30.9-25.1-56-56-56H120.7c-30.9 0-56 25.1-56 56v509.6c0 30.9 25.1 56 56 56h509.6c30.9 0 56-25.1 56-56z" p-id="3388"></path><path d="M903.8 337.8H394.2c-30.9 0-56 25.1-56 56v118c0 19.9 16.1 36 36 36s36-16.1 36-36v-102h477.6v477.6H410.2V784.6c0-19.9-16.1-36-36-36s-36 16.1-36 36v118.7c0 30.9 25.1 56 56 56h509.6c30.9 0 56-25.1 56-56V393.8c0-30.9-25.1-56-56-56z" p-id="3389"></path></svg>
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.75 4C0.75 1.79086 2.54086 0 4.75 0H13.25C15.4591 0 17.25 1.79086 17.25 4V14C17.25 16.2091 15.4591 18 13.25 18H4.75C2.54086 18 0.75 16.2091 0.75 14V4Z" fill="#D136D1"/>
+<path d="M9.40825 7.54199C9.5049 7.54199 9.58325 7.62034 9.58325 7.71699V8.24199C9.58325 8.33864 9.5049 8.41699 9.40825 8.41699H8.27075C8.19916 8.41699 8.13962 8.46858 8.12727 8.53661L8.12492 8.56283V12.0628C8.12492 12.1344 8.17651 12.194 8.24454 12.2063L8.27075 12.2087H12.9374C13.009 12.2087 13.0686 12.1571 13.0809 12.089L13.0833 12.0628V8.56283C13.0833 8.49123 13.0317 8.43169 12.9636 8.41934L12.9374 8.41699H11.7999C11.7033 8.41699 11.6249 8.33864 11.6249 8.24199V7.71699C11.6249 7.62034 11.7033 7.54199 11.7999 7.54199H12.9374C13.4824 7.54199 13.9277 7.96907 13.9567 8.50682L13.9583 8.56283V12.0628C13.9583 12.6078 13.5312 13.0531 12.9934 13.0821L12.9374 13.0837H8.27075C7.72575 13.0837 7.28051 12.6566 7.25143 12.1188L7.24992 12.0628V8.56283C7.24992 8.01783 7.677 7.57258 8.21474 7.5435L8.27075 7.54199H9.40825ZM10.0208 4.91699C10.5657 4.91699 11.011 5.34407 11.0401 5.88182L11.0416 5.93783V9.43783C11.0416 9.98282 10.6145 10.4281 10.0768 10.4571L10.0208 10.4587H8.88325C8.7866 10.4587 8.70825 10.3803 8.70825 10.2837V9.75866C8.70825 9.66201 8.7866 9.58366 8.88325 9.58366H10.0208C10.0923 9.58366 10.1519 9.53207 10.1642 9.46404L10.1666 9.43783V5.93783C10.1666 5.86623 10.115 5.80669 10.047 5.79434L10.0208 5.79199H5.35409C5.28249 5.79199 5.22295 5.84358 5.2106 5.91161L5.20825 5.93783V9.43783C5.20825 9.50942 5.25984 9.56896 5.32787 9.58131L5.35409 9.58366H6.49158C6.58823 9.58366 6.66658 9.66201 6.66658 9.75866V10.2837C6.66658 10.3803 6.58823 10.4587 6.49158 10.4587H5.35409C4.80909 10.4587 4.36384 10.0316 4.33476 9.49384L4.33325 9.43783V5.93783C4.33325 5.39283 4.76033 4.94758 5.29807 4.9185L5.35409 4.91699H10.0208Z" fill="white"/>
+</svg>
diff --git a/frontend/src/icons/svg/scene.svg b/frontend/src/icons/svg/scene.svg
index eb77499b1f..9efbd48adc 100644
--- a/frontend/src/icons/svg/scene.svg
+++ b/frontend/src/icons/svg/scene.svg
@@ -1 +1,3 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1618223542845" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6672" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M592 336H176c-52.928 0-96 43.072-96 96v416c0 52.928 43.072 96 96 96h416c52.928 0 96-43.072 96-96V432c0-52.928-43.072-96-96-96z m32 512a32 32 0 0 1-32 32H176c-17.632 0-32-14.336-32-32V432c0-17.632 14.368-32 32-32h416c17.664 0 32 14.368 32 32v416z" p-id="6673"></path><path d="M720 208H304a32 32 0 0 0 0 64h416c17.664 0 32 14.368 32 32v416a32 32 0 1 0 64 0V304c0-52.928-43.072-96-96-96zM528 752H240a32 32 0 1 0 0 64h288a32 32 0 1 0 0-64z" p-id="6674"></path><path d="M848 80H432a32 32 0 0 0 0 64h416c17.664 0 32 14.368 32 32v416a32 32 0 1 0 64 0V176c0-52.928-43.072-96-96-96z" p-id="6675"></path></svg>
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 3.66667C1 3.29848 1.32561 3 1.72727 3H7.82325C8.09872 3 8.35055 3.14267 8.47374 3.36852L9 4.33333H16.2727C16.6744 4.33333 17 4.63181 17 5V14.3333C17 14.7015 16.6744 15 16.2727 15H1.72727C1.32561 15 1 14.7015 1 14.3333V3.66667ZM2.81818 5.66667C2.61735 5.66667 2.45455 5.81591 2.45455 6V6.66667C2.45455 6.85076 2.61735 7 2.81818 7H15.1818C15.3826 7 15.5455 6.85076 15.5455 6.66667V6C15.5455 5.81591 15.3826 5.66667 15.1818 5.66667H2.81818Z" fill="#8F959E"/>
+</svg>
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index f21576ce84..aaeab5a13d 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -866,6 +866,7 @@ export default {
     color_technology: 'Technology',
     color_simple: 'Simple',
     not_alpha: 'Opacity',
+    area_border_color: 'Map border',
     size: 'Size',
     bar_width: 'Column Width',
     bar_gap: 'Column septum',
@@ -1436,6 +1437,7 @@ export default {
       search_by_name: 'Search by name',
       underway: 'Waiting for execution',
       stopped: 'End',
+      exec: 'underway',
       pending: 'Pause',
       exec: 'Execute Once',
       confirm_exec: 'Manual trigger execution？',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index f626f60b4a..86fe0f2910 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -867,6 +867,7 @@ export default {
     color_technology: '科技',
     color_simple: '簡潔',
     not_alpha: '不透明度',
+    area_border_color: '地圖邊線',
     size: '大小',
     bar_width: '柱寬',
     bar_gap: '柱間隔',
@@ -1435,6 +1436,7 @@ export default {
       search_by_name: '根據名稱搜索',
       underway: '等待執行',
       stopped: '執行結束',
+      exec: '執行中',
       pending: '暫停',
       exec: '執行一次',
       confirm_exec: '手動觸發執行？',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 79740ab28b..0e2e2f29f9 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -869,6 +869,7 @@ export default {
     color_technology: '科技',
     color_simple: '简洁',
     not_alpha: '不透明度',
+    area_border_color: '地图边线',
     size: '大小',
     bar_width: '柱宽',
     bar_gap: '柱间隔',
@@ -1436,8 +1437,8 @@ export default {
       search_by_name: '根据名称搜索',
       underway: '等待执行',
       stopped: '执行结束',
+      exec: '执行中',
       pending: '暂停',
-      exec: '执行一次',
       confirm_exec: '手动触发执行？',
       change_success: '状态切换成功',
       excel_replace_msg: '可能会影响自定义数据集、关联数据集、仪表板等，确认替换？',
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index faf20ff670..1f128e63df 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -876,7 +876,6 @@ div:focus {
     height: 24px !important;
     line-height: 24px !important;
     margin-bottom: 9px !important;
-    padding: 0 12px !important;
     font-size: 16px !important;
   }
 }
@@ -1129,16 +1128,16 @@ div:focus {
 }
 
 .de-confirm-primary-btn {
-  background: var(--deSuccess, #3370ff) !important;
+  background: var(--primary, #3370ff) !important;
   border: none !important;
   color: #ffffff !important;
 
   &:hover {
-    background: var(--deSuccessHover, #3370ff) !important;
+    background: var(--primaryHover, #3370ff) !important;
   }
 
   &:active {
-    background: var(--deSuccessActive, #3370ff) !important;
+    background: var(--primaryActive, #3370ff) !important;
   }
 }
 
diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js
index 7ad8ffe703..91de281b9b 100644
--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
@@ -23,7 +23,8 @@ export const DEFAULT_COLOR_CASE = {
   dimensionColor: '#000000',
   quotaColor: '#4E81BB',
   tableBorderColor: '#E6E7E4',
-  seriesColors: [] // 格式：{"name":"s1","color":"","isCustom":false}
+  seriesColors: [], // 格式：{"name":"s1","color":"","isCustom":false}
+  areaBorderColor: '#303133'
 }
 
 export const DEFAULT_COLOR_CASE_DARK = {
@@ -37,7 +38,8 @@ export const DEFAULT_COLOR_CASE_DARK = {
   dimensionColor: '#ffffff',
   quotaColor: '#4E81BB',
   tableBorderColor: '#CCCCCC',
-  seriesColors: [] // 格式：{"name":"s1","color":"","isCustom":false}
+  seriesColors: [], // 格式：{"name":"s1","color":"","isCustom":false}
+  areaBorderColor: '#EBEEF5'
 }
 export const DEFAULT_SIZE = {
   barDefault: true,
@@ -835,7 +837,15 @@ export const BASE_MAP = {
       type: 'map',
       map: 'MAP',
       roam: true,
-      data: []
+      data: [],
+      itemStyle: {
+        normal: {
+
+        },
+        emphasis: {
+
+        }
+      }
     }
   ]
 }
diff --git a/frontend/src/views/chart/chart/map/map.js b/frontend/src/views/chart/chart/map/map.js
index 0547b29a58..95f22ab71d 100644
--- a/frontend/src/views/chart/chart/map/map.js
+++ b/frontend/src/views/chart/chart/map/map.js
@@ -9,6 +9,9 @@ export function baseMapOption(chart_option, chart, themeStyle, curAreaCode) {
     customAttr = JSON.parse(chart.customAttr)
     if (customAttr.color) {
       chart_option.color = customAttr.color.colors
+      if (customAttr.color.areaBorderColor) {
+        chart_option.series[0].itemStyle.normal.borderColor = customAttr.color.areaBorderColor
+      }
     }
     // tooltip
     if (customAttr.tooltip) {
diff --git a/frontend/src/views/chart/chart/util.js b/frontend/src/views/chart/chart/util.js
index 912cb1005c..b44f3fa95a 100644
--- a/frontend/src/views/chart/chart/util.js
+++ b/frontend/src/views/chart/chart/util.js
@@ -2600,7 +2600,8 @@ export const TYPE_CONFIGS = [
       'color-selector': [
         'value',
         'custom',
-        'alpha'
+        'alpha',
+        'area-border-color'
       ],
       'label-selector': [
         'show',
diff --git a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
index ed1a587b69..493bf0d848 100644
--- a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
@@ -105,6 +105,10 @@
         <el-form-item v-show="showProperty('alpha')" :label="$t('chart.not_alpha')" class="form-item form-item-slider">
           <el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeColorCase('alpha')" />
         </el-form-item>
+
+        <el-form-item v-show="showProperty('area-border-color') " :label="$t('chart.area_border_color')" class="form-item">
+          <el-color-picker v-model="colorForm.areaBorderColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase('areaBorderColor')" />
+        </el-form-item>
       </el-form>
     </el-col>
   </div>
diff --git a/frontend/src/views/panel/template/component/TemplateList.vue b/frontend/src/views/panel/template/component/TemplateList.vue
index 45142edf22..859856d330 100644
--- a/frontend/src/views/panel/template/component/TemplateList.vue
+++ b/frontend/src/views/panel/template/component/TemplateList.vue
@@ -61,8 +61,11 @@
 </template>
 
 <script>
+import msgCfm from "@/components/msgCfm/index";
+
 export default {
   name: "TemplateList",
+  mixins: [msgCfm],
   components: {},
   props: {
     templateType: {
@@ -119,22 +122,13 @@ export default {
       this.$emit("showTemplateEditDialog", "new");
     },
     templateDelete(template) {
-      this.$alert(
-        this.$t("panel.confirm_delete") +
-          this.$t("panel.category") +
-          ": " +
-          template.name +
-          "？",
-        "",
-        {
-          confirmButtonText: this.$t("panel.confirm_delete"),
-          callback: (action) => {
-            if (action === "confirm") {
-              this.$emit("templateDelete", template.id);
-            }
-          },
-        }
-      );
+      const options = {
+          title: 'system_parameter_setting.delete_this_category',
+          content: 'system_parameter_setting.also_be_deleted',
+          type: "primary",
+          cb: () => this.$emit("templateDelete", template.id),
+        };
+        this.handlerConfirm(options);
     },
     templateEdit(template) {
       this.$emit("templateEdit", template);
diff --git a/frontend/src/views/panel/template/index.vue b/frontend/src/views/panel/template/index.vue
index 69861d18f1..0d119bc87c 100644
--- a/frontend/src/views/panel/template/index.vue
+++ b/frontend/src/views/panel/template/index.vue
@@ -208,29 +208,12 @@ export default {
       }
     },
     templateDeleteConfirm(template) {
-      // const options = {
-      //   title: 'jkjhjjhhkh',
-      //   showCancelButton: false,
-      //   type: 'primary',
-      // }
-      // this.handlerConfirm(options);
-      // return
-      this.$alert(
-        this.$t("panel.confirm_delete") +
-          this.$t("panel.template") +
-          ": " +
-          this.template.name +
-          "？",
-        "",
-        {
-          confirmButtonText: this.$t("panel.confirm"),
-          callback: (action) => {
-            if (action === "confirm") {
-              this.templateDelete(template.id);
-            }
-          },
-        }
-      );
+      const options = {
+          title: 'system_parameter_setting.delete_this_template',
+          type: "primary",
+          cb: () => this.templateDelete(template.id),
+        };
+        this.handlerConfirm(options);
     },
     handleClick(tab, event) {
       this.getTree();
@@ -247,11 +230,7 @@ export default {
     templateDelete(id) {
       if (id) {
         templateDelete(id).then((response) => {
-          this.$message({
-            message: this.$t("commons.delete_success"),
-            type: "success",
-            showClose: true,
-          });
+          this.openMessageSuccess('commons.delete_success');
           this.getTree();
         });
       }
diff --git a/frontend/src/views/system/SysParam/BasicSetting.vue b/frontend/src/views/system/SysParam/BasicSetting.vue
index ecf07106c0..2394778ed5 100644
--- a/frontend/src/views/system/SysParam/BasicSetting.vue
+++ b/frontend/src/views/system/SysParam/BasicSetting.vue
@@ -258,9 +258,9 @@ export default {
     z-index: 10;
   }
 
-  .el-radio {
-    margin-right: 0;
-    width: 156px;
-  }
+  .el-radio:not(:last-child) {
+      margin-right: 0;
+      width: 156px;
+    }
 }
 </style>
diff --git a/frontend/src/views/system/task/DatasetTaskList.vue b/frontend/src/views/system/task/DatasetTaskList.vue
index 4b41592eb4..e526e46085 100644
--- a/frontend/src/views/system/task/DatasetTaskList.vue
+++ b/frontend/src/views/system/task/DatasetTaskList.vue
@@ -1,704 +1,620 @@
 <template>
-  <el-col>
-    <el-row v-loading="$store.getters.loadingMap[$store.getters.currentPath]" style="margin-top: 10px;">
-      <complex-table :data="data" :columns="columns" local-key="datasetTask" :trans-condition="transCondition" :search-config="searchConfig" :pagination-config="paginationConfig" @select="select" @search="search" @sort-change="sortChange">
-        <template #toolbar>
-          <el-button icon="el-icon-circle-plus-outline" @click="selectDataset">{{ $t('dataset.task.create') }}</el-button>
-        </template>
-
-        <el-table-column prop="name" :label="$t('dataset.task_name')">
+  <div class="dataset-on-time">
+    <el-row class="top-operate">
+      <el-col :span="10">
+        <deBtn
+          type="primary"
+          icon="el-icon-circle-plus-outline"
+          @click="() => selectDataset()"
+          >{{ $t("dataset.add_task") }}</deBtn
+        >
+        <deBtn
+          :disabled="!multipleSelection.length"
+          secondary
+          @click="confirmDelete"
+          >{{ $t("organization.delete") }}</deBtn
+        >
+      </el-col>
+      <el-col :span="14" class="right-user">
+        <el-input
+          :placeholder="$t('通过任务名称搜索')"
+          prefix-icon="el-icon-search"
+          class="name-email-search"
+          size="small"
+          clearable
+          ref="search"
+          v-model="nikeName"
+          @blur="initSearch"
+          @clear="initSearch"
+        >
+        </el-input>
+        <deBtn
+          :secondary="!filterTexts.length"
+          :plain="!!filterTexts.length"
+          icon="iconfont icon-icon-filter"
+          @click="filterShow"
+          >{{ $t("user.filter")
+          }}<template v-if="filterTexts.length">
+            ({{ filterTexts.length }})
+          </template>
+        </deBtn>
+        <el-dropdown trigger="click" :hide-on-click="false">
+          <deBtn secondary icon="el-icon-setting">{{ $t("user.list") }}</deBtn>
+          <el-dropdown-menu class="list-colums-slect" slot="dropdown">
+            <p class="title">{{ $t("user.list_info") }}</p>
+            <el-checkbox
+              :indeterminate="isIndeterminate"
+              v-model="checkAll"
+              @change="handleCheckAllChange"
+              >{{ $t("dataset.check_all") }}</el-checkbox
+            >
+            <el-checkbox-group
+              v-model="checkedColumnNames"
+              @change="handleCheckedColumnNamesChange"
+            >
+              <el-checkbox
+                v-for="column in columnNames"
+                :label="column.props"
+                :key="column.props"
+                >{{ $t(column.label) }}</el-checkbox
+              >
+            </el-checkbox-group>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </el-col>
+    </el-row>
+    <div class="filter-texts" v-if="filterTexts.length">
+      <span class="sum">{{ paginationConfig.total }}</span>
+      <span class="title">{{ $t("user.result_one") }}</span>
+      <el-divider direction="vertical"></el-divider>
+      <i
+        @click="scrollPre"
+        v-if="showScroll"
+        class="el-icon-arrow-left arrow-filter"
+      ></i>
+      <div class="filter-texts-container">
+        <p class="text" v-for="(ele, index) in filterTexts" :key="ele">
+          {{ ele }} <i @click="clearOneFilter(index)" class="el-icon-close"></i>
+        </p>
+      </div>
+      <i
+        @click="scrollNext"
+        v-if="showScroll"
+        class="el-icon-arrow-right arrow-filter"
+      ></i>
+      <el-button
+        type="text"
+        class="clear-btn"
+        icon="el-icon-delete"
+        @click="clearFilter"
+        >{{ $t("user.clear_filter") }}</el-button
+      >
+    </div>
+    <div class="table-container"
+      id="resize-for-filter"
+      :class="[filterTexts.length ? 'table-container-filter' : '']">
+      <grid-table
+        v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
+        :tableData="data"
+        :columns="checkedColumnNames"
+        :multipleSelection="multipleSelection"
+        :pagination="paginationConfig"
+        @selection-change="handleSelectionChange"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column
+          width="178"
+          prop="name"
+          :label="$t('dataset.task_name')"
+        >
           <template slot-scope="scope">
             <span>
-              <el-link style="font-size: 12px" @click="jumpTaskRecord(scope.row)">{{ scope.row.name }}</el-link>
+              <el-link
+                style="font-size: 12px"
+                @click="jumpTaskRecord(scope.row)"
+                >{{ scope.row.name }}</el-link
+              >
             </span>
           </template>
         </el-table-column>
-        <el-table-column prop="datasetName" :label="$t('dataset.task.dataset')" />
-        <el-table-column prop="rate" :label="$t('dataset.execute_rate')">
+        <el-table-column
+          width="178"
+          prop="datasetName"
+          :label="$t('dataset.task.dataset')"
+        />
+        <el-table-column
+          width="100"
+          prop="rate"
+          :label="$t('dataset.execute_rate')"
+        >
           <template slot-scope="scope">
-            <span v-if="scope.row.rate === 'SIMPLE'">{{ $t('dataset.execute_once') }}</span>
-            <span v-if="scope.row.rate === 'CRON'">{{ $t('dataset.cron_config') }}</span>
-            <span v-if="scope.row.rate === 'SIMPLE_CRON'">{{ $t('dataset.simple_cron') }}</span>
+            <span v-if="scope.row.rate === 'SIMPLE'">{{
+              $t("dataset.execute_once")
+            }}</span>
+            <span v-if="scope.row.rate === 'CRON'">{{
+              $t("dataset.cron_config")
+            }}</span>
+            <span v-if="scope.row.rate === 'SIMPLE_CRON'">{{
+              $t("dataset.simple_cron")
+            }}</span>
           </template>
         </el-table-column>
 
-        <el-table-column prop="lastExecTime" :label="$t('dataset.task.last_exec_time')">
+        <el-table-column
+          prop="lastExecTime"
+          width="178"
+          :label="$t('dataset.task.last_exec_time')"
+        >
           <template slot-scope="scope">
-            <span v-if="scope.row.lastExecTime && scope.row.lastExecTime != -1">
+            <span>
               {{ scope.row.lastExecTime | timestampFormatDate }}
             </span>
-            <span v-if="scope.row.lastExecTime === -1" />
           </template>
         </el-table-column>
 
-        <el-table-column prop="lastExecStatus" :label="$t('dataset.task.last_exec_status')">
+        <el-table-column
+          prop="lastExecStatus"
+          width="140"
+          :label="$t('dataset.task.last_exec_status')"
+        >
           <template slot-scope="scope">
-            <span v-if="scope.row.lastExecStatus === 'Completed'" style="color: green">{{ $t('dataset.completed') }}</span>
-            <span v-if="scope.row.lastExecStatus === 'Underway'" class="blue-color">
-              <i class="el-icon-loading" />
-              {{ $t('dataset.underway') }}
+            <span :class="[`de-${scope.row.lastExecStatus}`, 'de-status']"
+              >{{
+                $t(`dataset.${scope.row.lastExecStatus.toLocaleLowerCase()}`)
+              }}
+              <i
+                v-if="scope.row.lastExecStatus === 'Error'"
+                class="el-icon-s-order"
+                @click="showErrorMassage(scope.row.msg)"
+              ></i>
             </span>
-            <span v-if="scope.row.lastExecStatus === 'Error'" style="color: red">
-              <el-link type="danger" style="font-size: 12px" @click="showErrorMassage(scope.row.msg)">{{ $t('dataset.error') }}</el-link>
-            </span>
-
           </template>
         </el-table-column>
 
-        <el-table-column prop="nextExecTime" :label="$t('dataset.task.next_exec_time')">
+        <el-table-column
+          prop="nextExecTime"
+          width="178"
+          :label="$t('dataset.task.next_exec_time')"
+        >
           <template slot-scope="scope">
-            <span v-if="scope.row.nextExecTime && scope.row.nextExecTime !== -1 && scope.row.rate !== 'SIMPLE'&& scope.row.status !== 'Pending'">
+            <span
+              v-if="
+                scope.row.nextExecTime &&
+                scope.row.nextExecTime !== -1 &&
+                scope.row.rate !== 'SIMPLE' &&
+                scope.row.status !== 'Pending'
+              "
+            >
               {{ scope.row.nextExecTime | timestampFormatDate }}
             </span>
-            <span v-if="!scope.row.nextExecTime || scope.row.rate === 'SIMPLE'" />
+            <span v-if="!scope.row.nextExecTime || scope.row.rate === 'SIMPLE'"
+              >-</span
+            >
           </template>
-
         </el-table-column>
 
-        <el-table-column prop="status" :label="$t('dataset.task.task_status')">
+        <el-table-column
+          min-width="120"
+          prop="status"
+          :label="$t('dataset.task.task_status')"
+        >
           <template slot-scope="scope">
-            <span v-if="scope.row.status === 'Underway'" style="color: green">
-              <el-link type="success" style="font-size: 12px" @click="changeTaskStatus(scope.row)">{{ $t('dataset.task.underway') }}</el-link>
-            </span>
-            <span v-if="scope.row.status === 'Stopped'">
-              <div style="font-size: 12px">{{ $t('dataset.task.stopped') }}</div>
-            </span>
-            <span v-if="scope.row.status === 'Pending'" class="blue-color">
-              <el-link type="primary" style="font-size: 12px" @click="changeTaskStatus(scope.row)">{{ $t('dataset.task.pending') }}</el-link>
-            </span>
-            <span v-if="scope.row.status === 'Exec'" class="blue-color">
-              <i class="el-icon-loading" />
-              {{ $t('dataset.underway') }}
+            <span :class="[`de-${scope.row.status}`, 'de-status']"
+              >{{ $t(`dataset.task.${scope.row.status.toLocaleLowerCase()}`) }}
             </span>
           </template>
         </el-table-column>
+        <el-table-column
+          slot="__operation"
+          :label="$t('commons.operating')"
+          fixed="right"
+          width="84"
+        >
+          <template slot-scope="scope">
+            <el-button
+              @click="selectDataset(scope.row)"
+              class="text-btn mar3 mar6"
+              type="text"
+              >{{
+                $t(disableEdit(scope.row) ? "auth.view" : "commons.edit")
+              }}</el-button
+            >
+            <el-dropdown
+              size="medium"
+              trigger="click"
+              @command="(type) => handleCommand(type, scope.row)"
+            >
+              <i @click.stop class="el-icon-more"></i>
+              <el-dropdown-menu class="de-card-dropdown" slot="dropdown">
+                <template
+                  v-if="!['Stopped', 'Exec'].includes(scope.row.status)"
+                >
+                  <el-dropdown-item
+                    :disabled="disableExec(scope.row)"
+                    command="exec"
+                  >
+                    {{ $t("运行一次") }}
+                  </el-dropdown-item>
+                  <el-dropdown-item
+                    v-if="scope.row.status === 'Pending'"
+                    command="contine"
+                  >
+                    {{ $t("继续") }}
+                  </el-dropdown-item>
+                  <el-dropdown-item
+                    v-if="scope.row.status === 'Underway'"
+                    command="pause"
+                  >
+                    {{ $t("dataset.task.pending") }}
+                  </el-dropdown-item>
+                </template>
+                <el-dropdown-item
+                  :disabled="disableDelete(scope.row)"
+                  command="delete"
+                >
+                  {{ $t("commons.delete") }}
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </template>
+        </el-table-column>
+      </grid-table>
+    </div>
 
-        <fu-table-operations :buttons="buttons" :label="$t('commons.operating')" fix />
-      </complex-table>
-    </el-row>
 
-    <el-dialog v-dialogDrag :title="update_task_dialog_title" :visible="update_task" :show-close="false" width="50%" class="dialog-css" append-to-body>
-      <el-col>
-        <el-form ref="taskForm" :form="taskForm" :model="taskForm" label-width="100px" size="small" :rules="taskFormRules">
-          <el-form-item :label="$t('dataset.task_name')" prop="name">
-            <el-input v-model="taskForm.name" size="small" style="width: 50%" :placeholder="$t('dataset.task_name')" />
-          </el-form-item>
-          <el-form-item :label="$t('dataset.update_type')" prop="type">
-            <el-select v-model="taskForm.type" size="small">
-              <el-option :label="$t('dataset.all_scope')" value="all_scope" />
-              <el-option :label="$t('dataset.add_scope')" value="add_scope" />
-            </el-select>
-          </el-form-item>
-          <el-form-item :label="$t('dataset.execute_rate')" prop="rate">
-            <el-select v-model="taskForm.rate" size="small" @change="onRateChange">
-              <el-option :label="$t('dataset.execute_once')" value="SIMPLE" />
-              <el-option :label="$t('dataset.cron_config')" value="CRON" />
-              <el-option :label="$t('dataset.simple_cron')" value="SIMPLE_CRON" />
-            </el-select>
-          </el-form-item>
-
-          <el-form-item v-if="taskForm.rate === 'CRON'" label="">
-            <el-popover v-model="cronEdit">
-              <cron v-model="taskForm.cron" @close="cronEdit = false" />
-              <el-input slot="reference" v-model="taskForm.cron" size="small" style="width: 50%" @click="cronEdit = true" />
-            </el-popover>
-          </el-form-item>
-
-          <el-form-item v-if="taskForm.rate === 'SIMPLE_CRON'" label="">
-            <el-form :inline="true">
-              <el-form-item :label="$t('cron.every')">
-                <el-input v-model="taskForm.extraData.simple_cron_value" size="small" type="number" min="1" @change="onSimpleCronChange()" />
-              </el-form-item>
-
-              <el-form-item class="form-item">
-                <el-select v-model="taskForm.extraData.simple_cron_type" filterable size="small" @change="onSimpleCronChange()">
-                  <el-option :label="$t('cron.minute_default')" value="minute" />
-                  <el-option :label="$t('cron.hour_default')" value="hour" />
-                  <el-option :label="$t('cron.day_default')" value="day" />
-                </el-select>
-              </el-form-item>
-
-              <el-form-item class="form-item" :label="$t('cron.every_exec')" />
-            </el-form>
-          </el-form-item>
-
-          <el-form-item v-if="taskForm.rate !== 'SIMPLE'" :label="$t('dataset.start_time')" prop="startTime">
-            <el-date-picker v-model="taskForm.startTime" type="datetime" :placeholder="$t('dataset.select_data_time')" size="small" />
-          </el-form-item>
-          <el-form-item v-if="taskForm.rate !== 'SIMPLE'" :label="$t('dataset.end_time')" prop="end">
-            <el-select v-model="taskForm.end" size="small">
-              <el-option :label="$t('dataset.no_limit')" value="0" />
-              <el-option :label="$t('dataset.set_end_time')" value="1" />
-            </el-select>
-          </el-form-item>
-          <el-form-item v-if="taskForm.end === '1'" label="">
-            <el-date-picker v-model="taskForm.endTime" type="datetime" :placeholder="$t('dataset.select_data_time')" size="small" />
-          </el-form-item>
-
-          <el-form-item v-if="taskForm.type === 'add_scope'" :label="$t('dataset.incremental_update_type')">
-            <el-radio-group v-model="incrementalUpdateType" size="small" @change="incrementalUpdateTypeChange">
-              <el-radio label="incrementalAdd">{{ $t('dataset.incremental_add') }}</el-radio>
-              <el-radio label="incrementalDelete">{{ $t('dataset.incremental_delete') }}</el-radio>
-            </el-radio-group>
-
-          </el-form-item>
-
-          <el-form-item v-if="taskForm.type === 'add_scope'" :label="$t('dataset.param')">
-            <el-button type="text" size="small" @click="insertParamToCodeMirror('${__last_update_time__}')">{{ $t('dataset.last_update_time') }}</el-button>
-            <el-button type="text" size="small" @click="insertParamToCodeMirror('${__current_update_time__}')">{{ $t('dataset.current_update_time') }}</el-button>
-          </el-form-item>
-
-          <codemirror
-            v-if="taskForm.type === 'add_scope'"
-            ref="myCm"
-            v-model="sql"
-            class="codemirror"
-            :options="sqlOption"
-            @ready="onCmReady"
-            @focus="onCmFocus"
-            @input="onCmCodeChange"
-          />
-        </el-form>
-      </el-col>
-      <div slot="footer" class="dialog-footer">
-        <el-button size="small" @click="closeTask">{{ $t('dataset.cancel') }}</el-button>
-        <el-button type="primary" size="small" @click="saveTask(taskForm)">{{ $t('dataset.confirm') }}</el-button>
-      </div>
-    </el-dialog>
-
-    <!--添加任务-选择数据集-->
-    <el-dialog v-dialogDrag :title="$t('dataset.task.create')" :visible="selectDatasetFlag" :show-close="false" width="70%" class="dialog-css" :destroy-on-close="true">
-      <table-selector previewForTask="true" privileges="manage" :mode="1" :clear-empty-dir="true" :custom-type="customType" show-mode="datasetTask" @getTable="getTable" />
-      <div slot="footer" class="dialog-footer">
-        <el-button size="small" @click="closeCreateTask">{{ $t('chart.cancel') }}</el-button>
-        <el-button type="primary" size="small" :disabled="!table.id" @click="create(undefined)">{{ $t('chart.confirm') }}</el-button>
-      </div>
-    </el-dialog>
+    <keep-alive>
+      <filterUser ref="filterUser" @search="filterDraw"></filterUser>
+    </keep-alive>
 
     <el-dialog
       v-dialogDrag
-      :title="$t('dataset.detail')"
-      :visible="show_error_massage"
-      :show-close="false"
-      width="50%"
-      class="dialog-css"
+      :title="$t('dataset.error') + $t('dataset.detail')"
+      :visible.sync="show_error_massage"
+      width="600px"
+      class="de-dialog-form"
     >
       <span class="err-msg">{{ error_massage }}</span>
       <span slot="footer" class="dialog-footer">
-        <el-button size="small" @click="show_error_massage = false">{{ $t('dataset.close') }}</el-button>
+        <deBtn secondary @click="show_error_massage = false">{{
+          $t("dataset.close")
+        }}</deBtn>
       </span>
     </el-dialog>
-  </el-col>
+  </div>
 </template>
 
 <script>
-import ComplexTable from '@/components/business/complex-table'
-import { formatCondition, formatQuickCondition, addOrder, formatOrders } from '@/utils/index'
-import '@riophae/vue-treeselect/dist/vue-treeselect.css'
-import { datasetTaskList, post } from '@/api/dataset/dataset'
-import { codemirror } from 'vue-codemirror'
-import 'codemirror/lib/codemirror.css'
-import 'codemirror/theme/solarized.css'
-import 'codemirror/mode/sql/sql.js'
-import 'codemirror/addon/selection/active-line.js'
-import 'codemirror/addon/edit/closebrackets.js'
-import 'codemirror/mode/clike/clike.js'
-import 'codemirror/addon/edit/matchbrackets.js'
-import 'codemirror/addon/comment/comment.js'
-import 'codemirror/addon/dialog/dialog.js'
-import 'codemirror/addon/dialog/dialog.css'
-import 'codemirror/addon/search/searchcursor.js'
-import 'codemirror/addon/search/search.js'
-import 'codemirror/keymap/emacs.js'
-import 'codemirror/addon/hint/show-hint.css'
-import 'codemirror/addon/hint/sql-hint'
-import 'codemirror/addon/hint/show-hint'
-import cron from '@/components/cron/cron'
-import TableSelector from '@/views/chart/view/TableSelector'
-import { hasDataPermission } from '@/utils/permission'
+const columnOptions = [
+  {
+    label: "dataset.task_name",
+    props: "name",
+  },
+  {
+    label: "dataset.task.dataset",
+    props: "datasetName",
+  },
+  {
+    label: "dataset.execute_rate",
+    props: "rate",
+  },
+  {
+    label: "dataset.task.last_exec_time",
+    props: "lastExecTime",
+  },
+  {
+    label: "dataset.task.last_exec_status",
+    props: "lastExecStatus",
+  },
+  {
+    label: "dataset.task.next_exec_time",
+    props: "nextExecTime",
+  },
+  {
+    label: "dataset.task.task_status",
+    props: "status",
+  },
+];
+import {
+  formatOrders,
+} from "@/utils/index";
+import { datasetTaskList, post } from "@/api/dataset/dataset";
+import cron from "@/components/cron/cron";
+import TableSelector from "@/views/chart/view/TableSelector";
+import { hasDataPermission } from "@/utils/permission";
+import GridTable from "@/components/gridTable/index.vue";
+import filterUser from "./filterUser.vue";
+import msgCfm from "@/components/msgCfm/index";
+import _ from 'lodash';
 
 export default {
-  name: 'DatasetTaskList',
-  components: { ComplexTable, cron, codemirror, TableSelector },
-  props: {
-    param: {
-      type: Object,
-      default: null
-    },
-    transCondition: {
-      type: Object,
-      default: null
-    }
-  },
+  name: "DatasetTaskList",
+  components: { GridTable, cron, filterUser, TableSelector },
+  mixins: [msgCfm],
   data() {
     return {
-      taskForm: {
-        name: '',
-        type: 'all_scope',
-        startTime: '',
-        rate: 'SIMPLE',
-        cron: '',
-        endTime: '',
-        end: '0',
-        extraData: {
-          simple_cron_type: 'hour',
-          simple_cron_value: 1
-        }
-      },
-      update_task: false,
-      header: '',
-      columns: [],
-      buttons: [
-        {
-          label: this.$t('commons.edit'), icon: 'el-icon-edit', type: 'primary', click: this.addTask, disabled: this.disableEdit
-        },
-        {
-          label: this.$t('dataset.task.exec'), icon: 'el-icon-video-play', type: 'success', click: this.execTask, disabled: this.disableExec
-        },
-        {
-          label: this.$t('commons.delete'), icon: 'el-icon-delete', type: 'danger', click: this.deleteTask, disabled: this.disableDelete
-        }
-      ],
-      searchConfig: {
-        useQuickSearch: true,
-        useComplexSearch: true,
-        quickPlaceholder: this.$t('dataset.task.search_by_name'),
-        components: [
-          { field: 'dataset_table_task.name', label: this.$t('dataset.task_name'), component: 'DeComplexInput' },
-          { field: 'dataset_table_task.id', label: this.$t('dataset.task_id'), component: 'FuComplexInput' },
-          { field: 'dataset_table.name', label: this.$t('dataset.name'), component: 'DeComplexInput' },
-          { field: 'dataset_table_task.status', label: this.$t('dataset.task.task_status'), component: 'FuComplexSelect',
-            options: [{ label: this.$t('dataset.task.stopped'), value: 'Stopped' }, { label: this.$t('dataset.task.underway'), value: 'Underway' }, { label: this.$t('dataset.task.pending'), value: 'Pending' }, { label: this.$t('dataset.underway'), value: 'Exec' }], multiple: false },
-          { field: 'dataset_table_task.last_exec_status', label: this.$t('dataset.task.last_exec_status'), component: 'FuComplexSelect', options: [{ label: this.$t('dataset.completed'), value: 'Completed' }, { label: this.$t('dataset.underway'), value: 'Underway' }, { label: this.$t('dataset.error'), value: 'Error' }], multiple: false }
-        ]
-      },
+      nikeName: "",
+      showScroll: false,
+      checkAll: true,
+      multipleSelection: [],
+      checkedColumnNames: columnOptions.map((ele) => ele.props),
+      columnNames: columnOptions,
+      isIndeterminate: false,
+      filterTexts: [],
       paginationConfig: {
         currentPage: 1,
         pageSize: 10,
-        total: 0
+        total: 0,
       },
+      cacheCondition: [],
       data: [],
-      dialogVisible: false,
-      editPasswordVisible: false,
-      form: {
-        roles: [{
-          id: ''
-        }]
-      },
-      checkPasswordForm: {},
-      ruleForm: {},
-      defaultForm: { id: null, username: null, nickName: null, gender: '男', email: null, enabled: 1, deptId: null, phone: null },
-      depts: null,
-      roles: [],
-      roleDatas: [],
-      userRoles: [],
-      formType: 'add',
-      permission: {
-        add: ['user:add'],
-        edit: ['user:edit'],
-        del: ['user:del'],
-        editPwd: ['user:editPwd']
-      },
       orderConditions: [],
-      last_condition: null,
-      update_task_dialog_title: '',
-      sqlOption: {
-        tabSize: 2,
-        styleActiveLine: true,
-        lineNumbers: true,
-        line: true,
-        mode: 'text/x-sql',
-        theme: 'solarized',
-        hintOptions: { // 自定义提示选项
-          completeSingle: false // 当匹配只有一项的时候是否自动补全
-        }
-      },
-      incrementalUpdateType: 'incrementalAdd',
-      sql: '',
-      incrementalConfig: {},
-      cronEdit: false,
-      lang: this.$store.getters.language === 'en_US' ? 'en' : 'cn',
       selectDatasetFlag: false,
       table: {},
       show_error_massage: false,
-      error_massage: '',
-      taskFormRules: {
-        name: [
-          { required: true, message: this.$t('dataset.required'), trigger: 'change' },
-          { min: 2, max: 50, message: this.$t('datasource.input_limit_2_50', [2, 50]), trigger: 'blur' }
-        ],
-        type: [
-          { required: true, message: this.$t('dataset.required'), trigger: 'change' }
-        ],
-        startTime: [
-          { required: true, message: this.$t('dataset.required'), trigger: 'change' }
-        ],
-        rate: [
-          { required: true, message: this.$t('dataset.required'), trigger: 'change' }
-        ],
-        end: [
-          { required: true, message: this.$t('dataset.required'), trigger: 'change' }
-        ]
-      },
-      customType: ['db', 'sql', 'api']
-    }
+      error_massage: "",
+      customType: ["db", "sql", "api"],
+    };
   },
-  computed: {
-    codemirror() {
-      return this.$refs.myCm.codemirror
-    }
+  watch: {
+    filterTexts: {
+      handler() {
+        this.getScrollStatus();
+      },
+      deep: true,
+    },
   },
   created() {
+    this.initSearch();
     this.timer = setInterval(() => {
-      this.search(this.last_condition, false)
-    }, 10000)
+      this.search(false);
+    }, 10000);
   },
   beforeDestroy() {
-    clearInterval(this.timer)
+    clearInterval(this.timer);
+  },
+  mounted() {
+    this.resizeObserver();
   },
   methods: {
-    sortChange({ column, prop, order }) {
-      this.orderConditions = []
-      if (!order) {
-        this.search(this.last_condition)
-        return
-      }
-      if (prop === 'dept') {
-        prop = 'u.deptId'
-      }
-      if (prop === 'status') {
-        prop = 'u.enabled'
-      }
-      this.orderConditions = []
-      addOrder({ field: prop, value: order }, this.orderConditions)
-      this.search(this.last_condition)
+    getScrollStatus() {
+      this.$nextTick(() => {
+        const dom = document.querySelector(".filter-texts-container");
+        this.showScroll = dom && dom.scrollWidth > dom.offsetWidth;
+      });
     },
-    select(selection) {
+    resizeObserver() {
+      this.resizeForFilter = new ResizeObserver(entries => {
+        if (!this.filterTexts.length) return;
+        this.layoutResize();
+      });
+      this.resizeForFilter.observe(document.querySelector('#resize-for-filter'));
     },
-    search(condition, showLoading = true) {
-      this.last_condition = condition
-      condition = formatQuickCondition(condition, 'dataset_table_task.name')
-      const temp = formatCondition(condition)
-      const param = temp || {}
-      param['orders'] = formatOrders(this.orderConditions)
-      const { currentPage, pageSize } = this.paginationConfig
-      datasetTaskList(currentPage, pageSize, param, showLoading).then(response => {
-        this.data = response.data.listObject
-        this.data.forEach(item => {
-          this.taskStatus(item)
-        })
-        this.paginationConfig.total = response.data.itemCount
-      })
+    layoutResize: _.debounce(function () {
+      this.getScrollStatus()
+    }, 200),
+    scrollPre() {
+      const dom = document.querySelector('.filter-texts-container');
+      dom.scrollLeft -= 10
+      if (dom.scrollLeft <= 0) {
+        dom.scrollLeft = 0
+      }
+    },
+    scrollNext() {
+      const dom = document.querySelector('.filter-texts-container');
+      dom.scrollLeft += 10
+      const width = dom.scrollWidth - dom.offsetWidth
+      if (dom.scrollLeft > width) {
+        dom.scrollLeft = width
+      }
+    },
+    clearFilter() {
+      this.$refs.filterUser.clearFilter();
+    },
+    clearOneFilter(index) {
+      this.$refs.filterUser.clearOneFilter(index);
+      this.$refs.filterUser.search();
+    },
+    filterDraw(condition, filterTexts = []) {
+      this.cacheCondition = condition;
+      this.filterTexts = filterTexts;
+      this.initSearch();
+    },
+    filterShow() {
+      this.$refs.filterUser.init();
+    },
+    handleCommand(key, row) {
+      switch (key) {
+        case "exec":
+          this.execTask(row);
+          return;
+          break;
+        case "delete":
+          this.deleteTask(row);
+          return;
+          break;
+        default:
+          break;
+      }
+      this.changeTaskStatus(row);
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    handleCheckAllChange(val) {
+      this.checkedColumnNames = val
+        ? columnOptions.map((ele) => ele.props)
+        : [];
+      this.isIndeterminate = false;
+    },
+    handleCheckedColumnNamesChange(value) {
+      let checkedCount = value.length;
+      this.checkAll = checkedCount === this.columnNames.length;
+      this.isIndeterminate =
+        checkedCount > 0 && checkedCount < this.columnNames.length;
+    },
+    handleSizeChange(pageSize) {
+      this.paginationConfig.currentPage = 1;
+      this.paginationConfig.pageSize = pageSize;
+      this.search();
+    },
+    handleCurrentChange(currentPage) {
+      this.paginationConfig.currentPage = currentPage;
+      this.search();
+    },
+    initSearch() {
+      this.handleCurrentChange(1);
+    },
+    search(showLoading = true) {
+      const param = {
+        orders: formatOrders(this.orderConditions),
+        conditions: [...this.cacheCondition],
+      };
+      if (this.nikeName) {
+        param.conditions.push({
+          field: `dataset_table_task.name`,
+          operator: "like",
+          value: this.nikeName,
+        });
+      }
+      const { currentPage, pageSize } = this.paginationConfig;
+      datasetTaskList(currentPage, pageSize, param, showLoading).then(
+        (response) => {
+          this.data = response.data.listObject;
+          // this.data.forEach((item) => {
+          //   this.taskStatus(item);
+          // });
+          this.paginationConfig.total = response.data.itemCount;
+        }
+      );
+    },
+    batchDelete() {
+      post("/dataset/task/batchDelete", this.multipleSelection.map(ele => ele.id), false).then(() => {
+        this.initSearch();
+        this.openMessageSuccess('commons.delete_success');
+      });
+    },
+    confirmDelete() {
+      const options = {
+          title: '确定删除该任务吗？',
+          type: "primary",
+          cb: this.batchDelete,
+        };
+        this.handlerConfirm(options);
     },
     taskStatus(item) {
-      post('/dataset/task/lastExecStatus', item, false).then(response => {
+      post("/dataset/task/lastExecStatus", item, false).then((response) => {
         if (!item.lastExecStatus) {
-          item.lastExecStatus = response.data.lastExecStatus
+          item.lastExecStatus = response.data.lastExecStatus;
         }
         if (!item.lastExecTime) {
-          item.lastExecTime = response.data.lastExecTime
+          item.lastExecTime = response.data.lastExecTime;
         }
-        item.msg = response.data.msg
-      })
-    },
-    create(task) {
-      if (!task) { // add
-        this.selectDatasetFlag = false
-        this.resetTaskForm()
-        this.taskForm.name = this.table.name + ' ' + this.$t('dataset.task_update')
-        this.taskForm.tableId = this.table.id
-        this.taskForm.startTime = new Date()
-        this.update_task_dialog_title = this.$t('dataset.task_add_title')
-      } else { // update
-        this.taskForm = JSON.parse(JSON.stringify(task))
-        this.update_task_dialog_title = this.$t('dataset.task_edit_title')
-      }
-      this.update_task = true
+        item.msg = response.data.msg;
+      });
     },
     changeTaskStatus(task) {
-      const param = JSON.parse(JSON.stringify(task))
-      param.status = task.status === 'Underway' ? 'Pending' : 'Underway'
-      post('/dataset/task/updateStatus', param).then(response => {
-        if (response.success) {
-          task.status = param.status
-          this.$message({
-            message: this.$t('dataset.task.change_success'),
-            type: 'success',
-            showClose: true
-          })
-        } else {
-          this.search(this.last_condition, false)
-        }
-      }).catch(() => {
-        this.search(this.last_condition, false)
-      })
+      const { status } = task;
+      if (!["Pending", "Underway"].includes(status)) {
+        return;
+      }
+      const param = {
+        ...task,
+        status: status === "Underway" ? "Pending" : "Underway",
+      };
+      post("/dataset/task/updateStatus", param)
+        .then((response) => {
+          if (response.success) {
+            task.status = param.status;
+            this.$message({
+              message: this.$t("dataset.task.change_success"),
+              type: "success",
+              showClose: true,
+            });
+          } else {
+            this.initSearch(false);
+          }
+        })
+        .catch(() => {
+          this.initSearch(false);
+        });
     },
     execTask(task) {
-      this.$confirm(this.$t('dataset.task.confirm_exec'), this.$t('dataset.tips'), {
-        confirmButtonText: this.$t('dataset.confirm'),
-        cancelButtonText: this.$t('dataset.cancel'),
-        type: 'warning'
-      }).then(() => {
-        post('/dataset/task/execTask', task).then(response => {
-          this.search(this.last_condition, true)
+      this.$confirm(
+        this.$t("dataset.task.confirm_exec"),
+        this.$t("dataset.tips"),
+        {
+          confirmButtonText: this.$t("dataset.confirm"),
+          cancelButtonText: this.$t("dataset.cancel"),
+          type: "warning",
+        }
+      )
+        .then(() => {
+          post("/dataset/task/execTask", task).then((response) => {
+            this.initSearch( true);
+          });
         })
-      }).catch(() => {
-      })
+        .catch(() => {});
     },
-    selectDataset() {
-      this.selectDatasetFlag = true
-    },
-    getTable(table) {
-      this.table = JSON.parse(JSON.stringify(table))
-    },
-    closeCreateTask() {
-      this.selectDatasetFlag = false
-      this.table = {}
-    },
-    resetTaskForm() {
-      this.taskForm = {
-        name: '',
-        type: 'all_scope',
-        startTime: '',
-        rate: 'SIMPLE',
-        endTime: '',
-        end: '0',
-        extraData: {
-          simple_cron_type: 'hour',
-          simple_cron_value: 1
-        }
+    selectDataset(row) {
+      if (row) {
+        const { datasetName,  id } = row;
+        this.$router.push({
+          path: '/task-ds-form',
+          query: {
+            datasetName,
+            id,
+          }
+        })
+      } else {
+        this.$router.push('/task-ds-form')
       }
     },
-    onSimpleCronChange() {
-      if (this.taskForm.extraData.simple_cron_type === 'minute') {
-        if (this.taskForm.extraData.simple_cron_value < 1 || this.taskForm.extraData.simple_cron_value > 59) {
-          this.$message({ message: this.$t('cron.minute_limit'), type: 'warning', showClose: true })
-          this.taskForm.extraData.simple_cron_value = 59
-        }
-        this.taskForm.cron = '0 0/' + this.taskForm.extraData.simple_cron_value + ' * * * ? *'
-        return
-      }
-      if (this.taskForm.extraData.simple_cron_type === 'hour') {
-        if (this.taskForm.extraData.simple_cron_value < 1 || this.taskForm.extraData.simple_cron_value > 23) {
-          this.$message({ message: this.$t('cron.hour_limit'), type: 'warning', showClose: true })
-          this.taskForm.extraData.simple_cron_value = 23
-        }
-        this.taskForm.cron = '0 0 0/' + this.taskForm.extraData.simple_cron_value + ' * * ? *'
-        return
-      }
-      if (this.taskForm.extraData.simple_cron_type === 'day') {
-        if (this.taskForm.extraData.simple_cron_value < 1 || this.taskForm.extraData.simple_cron_value > 31) {
-          this.$message({ message: this.$t('cron.day_limit'), type: 'warning', showClose: true })
-          this.taskForm.extraData.simple_cron_value = 31
-        }
-        this.taskForm.cron = '0 0 0 1/' + this.taskForm.extraData.simple_cron_value + ' * ? *'
-        return
-      }
-    },
-    onRateChange() {
-      if (this.taskForm.rate === 'SIMPLE') {
-        this.taskForm.end = '0'
-        this.taskForm.endTime = ''
-        this.taskForm.cron = ''
-      }
-      if (this.taskForm.rate === 'SIMPLE_CRON') {
-        this.taskForm.cron = '0 0 0/1 *  * ? *'
-      }
-      if (this.taskForm.rate === 'CRON') {
-        this.taskForm.cron = '00 00 * ? * * *'
-      }
-    },
-    incrementalUpdateTypeChange: function() {
-      if (this.incrementalUpdateType === 'incrementalAdd') {
-        if (this.sql) {
-          this.incrementalConfig.incrementalDelete = this.sql
-        } else {
-          this.incrementalConfig.incrementalDelete = ''
-        }
-        if (this.incrementalConfig.incrementalAdd) {
-          this.sql = this.incrementalConfig.incrementalAdd
-        } else {
-          this.sql = ''
-        }
-      }
-
-      if (this.incrementalUpdateType === 'incrementalDelete') {
-        if (this.sql) {
-          this.incrementalConfig.incrementalAdd = this.sql
-        } else {
-          this.incrementalConfig.incrementalAdd = ''
-        }
-        if (this.incrementalConfig.incrementalDelete) {
-          this.sql = this.incrementalConfig.incrementalDelete
-        } else {
-          this.sql = ''
-        }
-      }
-    },
-    showSQL(val) {
-      this.sql = val || ''
-    },
-    onCmReady(cm) {
-      this.codemirror.setSize('-webkit-fill-available', 'auto')
-    },
-    onCmFocus(cm) {
-    },
-    onCmCodeChange(newCode) {
-      this.sql = newCode
-      this.$emit('codeChange', this.sql)
-    },
-    insertParamToCodeMirror(param) {
-      const pos1 = this.$refs.myCm.codemirror.getCursor()
-      const pos2 = {}
-      pos2.line = pos1.line
-      pos2.ch = pos1.ch
-      this.$refs.myCm.codemirror.replaceRange(param, pos2)
-    },
-    cronChange(val) {
-      this.taskForm.cron = val
-    },
     disableEdit(task) {
-      return task.rate === 'SIMPLE' || task.status === 'Stopped' || !hasDataPermission('manage', task.privileges)
+      return (
+        task.rate === "SIMPLE" ||
+        task.status === "Stopped" ||
+        !hasDataPermission("manage", task.privileges)
+      );
     },
     disableExec(task) {
-      return task.status === 'Stopped' || task.status === 'Pending' || task.rate === 'SIMPLE' || !hasDataPermission('manage', task.privileges)
+      return (
+        task.status === "Stopped" ||
+        task.status === "Pending" ||
+        task.rate === "SIMPLE" ||
+        !hasDataPermission("manage", task.privileges)
+      );
     },
     disableDelete(task) {
-      return false
+      return false;
       // !hasDataPermission('manage',task.privileges)
     },
     deleteTask(task) {
-      this.$confirm(this.$t('dataset.confirm_delete'), this.$t('dataset.tips'), {
-        confirmButtonText: this.$t('dataset.confirm'),
-        cancelButtonText: this.$t('dataset.cancel'),
-        type: 'warning'
-      }).then(() => {
-        post('/dataset/task/delete/' + task.id, null).then(response => {
-          this.$message({
-            message: this.$t('dataset.delete_success'),
-            type: 'success',
-            showClose: true
-          })
-          this.search(this.last_condition, true)
-        })
-      }).catch(() => {
-      })
-    },
-    addTask(task) {
-      if (!task) { // add
-        this.resetTaskForm()
-        this.taskForm.name = this.table.name + ' ' + this.$t('dataset.task_update')
-        this.taskForm.startTime = new Date()
-        this.update_task_dialog_title = this.$t('dataset.task_add_title')
-      } else { // update
-        this.getIncrementalConfig(task.tableId)
-        this.taskForm = JSON.parse(JSON.stringify(task))
-        this.taskForm.extraData = JSON.parse(this.taskForm.extraData)
-        this.update_task_dialog_title = this.$t('dataset.task_edit_title')
-      }
-      this.update_task = true
-    },
-    getIncrementalConfig(tableId) {
-      post('/dataset/table/incrementalConfig', { tableId: tableId }).then(response => {
-        this.incrementalConfig = response.data
-
-        if (this.incrementalConfig.incrementalAdd.length === 0 && this.incrementalConfig.incrementalDelete.length === 0 ) {
-          this.incrementalUpdateType = 'incrementalAdd'
-          this.sql = ''
-          return
-        }
-        if (this.incrementalConfig.incrementalAdd.length > 0) {
-          this.incrementalUpdateType = 'incrementalAdd'
-          this.sql = this.incrementalConfig.incrementalAdd
-        } else {
-          this.incrementalUpdateType = 'incrementalDelete'
-          this.sql = this.incrementalConfig.incrementalDelete
-        }
-      })
-    },
-    closeTask() {
-      this.update_task = false
-      this.resetTaskForm()
+      const options = {
+          title: '确定删除该任务吗？',
+          type: "primary",
+          cb: () => {
+            post("/dataset/task/delete/" + task.id, null).then((response) => {
+            this.openMessageSuccess('commons.delete_success');
+            this.initSearch();
+          });
+          },
+        };
+        this.handlerConfirm(options);
     },
     showErrorMassage(massage) {
-      this.show_error_massage = true
-      this.error_massage = massage
+      this.show_error_massage = true;
+      this.error_massage = massage;
     },
     jumpTaskRecord(item) {
-      this.$emit('jumpTaskRecord', item)
+      this.$emit("jumpTaskRecord", item);
     },
-    saveTask(task) {
-      this.$refs.taskForm.validate(valid => {
-        if (valid) {
-          if (task.rate !== 'SIMPLE') {
-            if (this.incrementalUpdateType === 'incrementalAdd') {
-              this.incrementalConfig.incrementalAdd = this.sql
-            } else {
-              this.incrementalConfig.incrementalDelete = this.sql
-            }
-            this.incrementalConfig.tableId = task.tableId
-          }
-          task.startTime = new Date(task.startTime).getTime()
-          task.endTime = new Date(task.endTime).getTime()
-          const form = JSON.parse(JSON.stringify(task))
-          form.extraData = JSON.stringify(form.extraData)
-          const dataSetTaskRequest = {
-            datasetTableTask: form,
-            datasetTableIncrementalConfig: task.type === 'add_scope' ? this.incrementalConfig : undefined
-          }
-          post('/dataset/task/save', dataSetTaskRequest).then(response => {
-            this.$message({
-              message: this.$t('dataset.save_success'),
-              type: 'success',
-              showClose: true
-            })
-            this.update_task = false
-            this.resetTaskForm()
-            this.search(this.last_condition, true)
-          })
-        } else {
-          return false
-        }
-      })
-    },
-    handleClose() {
-      this.depts = null
-      this.formType = 'add'
-      this.form = {}
-      this.editPasswordVisible = false
-      this.dialogVisible = false
-    },
-    btnDisabled(row) {
-      return row.userId === 1
-    }
-  }
-}
+  },
+};
 </script>
 
 <style scoped>
-.el-divider--horizontal {
-  margin: 12px 0;
-}
-
-.el-radio{
-  margin-right: 10px;
-}
-.el-radio ::v-deep .el-radio__label{
-  font-size: 12px;
-}
-
-.dialog-css ::v-deep .el-dialog__header {
-  padding: 20px 20px 0;
-}
-
-.dialog-css ::v-deep .el-dialog__body {
-  padding: 10px 20px 20px;
-}
-
-.el-form-item {
-  margin-bottom: 20px;
-}
-
 .codemirror {
   height: 100px;
   overflow-y: auto;
@@ -708,18 +624,264 @@ export default {
   overflow-y: auto;
 }
 
-.err-msg{
+.err-msg {
   font-size: 12px;
-  word-break:normal;
-  width:auto;
-  display:block;
-  white-space:pre-wrap;
-  word-wrap : break-word ;
-  overflow: hidden ;
+  word-break: normal;
+  width: auto;
+  display: block;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow: hidden;
 }
 
-span{
+span {
   font-size: 12px;
 }
-
 </style>
+<style lang="scss" scoped>
+.dataset-on-time {
+  margin: 0;
+  width: 100%;
+  overflow: auto;
+  background-color: var(--ContentBG, #fff);
+  padding: 24px;
+  height: 100%;
+
+  ::v-deep.el-link--inner {
+    color: var(--primary, #3370ff) !important;
+  }
+
+  .el-icon-more {
+    width: 24px;
+    height: 24px;
+    line-height: 24px;
+    text-align: center;
+    font-size: 12px;
+    color: var(--primary, #3370ff);
+  }
+
+  .el-icon-more:hover {
+    background: var(--deWhiteHover, #3370ff);
+    border-radius: 4px;
+  }
+
+  .el-icon-more:active {
+    background: var(--deWhiteActive, #3370ff);
+    border-radius: 4px;
+  }
+}
+.table-container {
+  height: calc(100% - 50px);
+
+  .text-btn {
+    font-family: PingFang SC;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 22px;
+    letter-spacing: 0px;
+    text-align: center;
+    margin-left: 2px;
+    border: none;
+    padding: 2px 4px;
+  }
+
+  .text-btn:hover {
+    background: rgba(51, 112, 255, 0.1);
+  }
+
+  .mar6 {
+    margin-right: 6px;
+  }
+
+  .mar3 {
+     margin-left: -3px;
+  }
+}
+
+.table-container-filter {
+  height: calc(100% - 110px);
+}
+.filter-texts {
+  display: flex;
+  align-items: center;
+  margin: 17px 0;
+  font-family: "PingFang SC";
+  font-weight: 400;
+
+  .sum {
+    color: #1f2329;
+  }
+
+  .title {
+    color: #999999;
+    margin-left: 8px;
+  }
+
+  .text {
+    max-width: 280px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    padding: 1px 22px 1px 6px;
+    display: inline-block;
+    align-items: center;
+    color: #0c296e;
+    font-size: 14px;
+    line-height: 22px;
+    background: rgba(51, 112, 255, 0.1);
+    border-radius: 2px;
+    margin: 0;
+    margin-right: 8px;
+    position: relative;
+    i {
+      position: absolute;
+      right: 2px;
+      top: 50%;
+      transform: translateY(-50%);
+      cursor: pointer;
+    }
+  }
+
+  .clear-btn {
+    color: #646a73;
+  }
+
+  .clear-btn:hover {
+    color: #3370ff;
+  }
+
+  .filter-texts-container::-webkit-scrollbar { display: none; }
+
+  .arrow-filter {
+    font-size: 16px;
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+    color: #646A73;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .arrow-filter:hover {
+    background: rgba(31, 35, 41, 0.1);
+    border-radius: 4px;
+  }
+
+  .el-icon-arrow-right.arrow-filter {
+    margin-left: 5px;
+  }
+
+  .el-icon-arrow-left.arrow-filter {
+    margin-right: 5px;
+  }
+  .filter-texts-container {
+    flex: 1;
+    overflow-x: auto;
+    white-space: nowrap;
+    height: 24px;
+  }
+}
+.top-operate {
+  margin-bottom: 16px;
+  .right-user {
+    text-align: right;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+
+    .de-button {
+      margin-left: 12px;
+    }
+
+    .el-input--medium .el-input__icon {
+      line-height: 32px;
+    }
+  }
+
+  .name-email-search {
+    width: 240px;
+  }
+}
+</style>
+<style lang="scss">
+.list-colums-slect {
+  padding: 8px 11px !important;
+  width: 238px;
+
+  .title,
+  .el-checkbox {
+    font-family: PingFang SC;
+    font-size: 14px;
+    font-weight: 400;
+    padding: 5px 0;
+    margin: 0;
+    color: #8f959e;
+  }
+
+  .el-checkbox {
+    color: #1f2329;
+    width: 100%;
+  }
+}
+.de-card-dropdown {
+  margin-top: 0 !important;
+  .popper__arrow {
+    display: none !important;
+  }
+}
+.de-status {
+  position: relative;
+  margin-left: 15px;
+  &::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: -13px;
+    transform: translateY(-50%);
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+  }
+}
+
+.de-Completed {
+  &::before {
+    background: var(--primary, #3370ff);
+  }
+}
+
+.de-Underway {
+  &::before {
+    background: #8f959e;
+  }
+}
+
+.de-Pending {
+  &::before {
+    background: #8f959e;
+  }
+}
+
+.de-Exec {
+  &::before {
+    background: var(--primary, #3370ff);
+  }
+}
+
+.de-Stopped {
+  &::before {
+    background: var(--deSuccess, #3370ff);
+  }
+}
+
+.de-Error {
+  &::before {
+    background: var(--deDanger, #3370ff);
+  }
+
+  .el-icon-s-order {
+    color: var(--primary, #3370ff);
+    cursor: pointer;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/system/task/TableSelector.vue b/frontend/src/views/system/task/TableSelector.vue
new file mode 100644
index 0000000000..d073dc7b03
--- /dev/null
+++ b/frontend/src/views/system/task/TableSelector.vue
@@ -0,0 +1,268 @@
+<template>
+  <el-dialog
+    :title="$t('chart.select_dataset')"
+    :visible.sync="selectDatasetFlag"
+    width="1200px"
+    class="de-dialog-form"
+    append-to-body
+  >
+    <div class="dataset-task-table">
+      <div class="dataset-tree">
+        <el-input
+          v-model="filterText"
+          size="mini"
+          :placeholder="$t('commons.search')"
+          prefix-icon="el-icon-search"
+          clearable
+        />
+        <div class="tree" v-loading="treeLoading">
+          <el-tree
+            ref="datasetTreeRef"
+            current-node-key="id"
+            :data="treeData"
+            node-key="id"
+            highlight-current
+            :expand-on-click-node="true"
+            :filter-node-method="filterNode"
+            @node-click="nodeClick"
+          >
+            <span slot-scope="{ data }" class="custom-tree-node">
+              <span v-if="data.modelInnerType === 'group'">
+                <svg-icon icon-class="scene" class="ds-icon-scene" />
+                <span
+                  style="
+                    margin-left: 6px;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                  "
+                  :title="data.name"
+                  >{{ data.name }}</span
+                >
+              </span>
+              <span v-else>
+                <span>
+                  <svg-icon
+                    :icon-class="`ds-${data.modelInnerType}`"
+                    :class="`ds-icon-${data.modelInnerType}`"
+                  />
+                </span>
+                <span
+                  style="
+                    margin-left: 6px;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                  "
+                  :title="data.name"
+                  >{{ data.name }}</span
+                >
+              </span>
+            </span>
+          </el-tree>
+        </div>
+      </div>
+      <div v-loading="dataLoading" class="dataset-tree-table">
+        <p v-if="tableName" class="table-name">
+          {{ tableName }} <span>{{ $t("chart.preview_100_data") }}</span>
+        </p>
+        <el-table border v-if="table.length" style="width: 100%" :data="table">
+          <el-table-column
+            v-for="field in fields"
+            :key="field.dataeaseName"
+            min-width="200"
+            :prop="field.dataeaseName"
+            :resizable="true"
+          >
+            <template slot="header">
+              <svg-icon
+                :icon-class="iconFormate(field.deType).iconClass"
+                :class="iconFormate(field.deType).class"
+              />
+              <span>{{ field.name }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-empty v-else :description="$t('暂无数据')"></el-empty>
+      </div>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <deBtn secondary @click="selectDatasetFlag = false">{{
+        $t("chart.cancel")
+      }}</deBtn>
+      <deBtn @click="setIdName" :disabled="!tableName" type="primary">{{
+        $t("fu.table.ok")
+      }}</deBtn>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { queryAuthModel } from "@/api/authModel/authModel";
+import { post } from "@/api/dataset/dataset";
+
+export default {
+  props: {
+    customType: {
+      type: Array,
+      required: false,
+      default: null,
+    },
+    mode: {
+      type: Number,
+      required: false,
+      default: -1,
+    },
+    privileges: {
+      type: String,
+      required: false,
+      default: "use",
+    },
+    clearEmptyDir: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  watch: {
+    filterText(val) {
+      this.$refs.datasetTreeRef.filter(val);
+    },
+  },
+  data() {
+    return {
+      selectDatasetFlag: false,
+      tableName: "",
+      tableId: "",
+      treeData: [],
+      table: [],
+      filterText: "",
+      fields: [],
+      tableName: "",
+      dataLoading: false,
+      treeLoading: false,
+    };
+  },
+  mounted() {
+    this.treeNode();
+  },
+  methods: {
+    iconFormate(deType) {
+      const val = ["text", "time", "value", "value", "location"][deType];
+      return {
+        class: `field-icon-${val}`,
+        iconClass: `field_${val}`,
+      };
+    },
+    treeNode() {
+      this.treeLoading = true;
+      const modelInnerTypeArray = Array.isArray(this.customType)
+        ? [...this.customType, "group"]
+        : null;
+      queryAuthModel(
+        {
+          modelType: "dataset",
+          privileges: this.privileges,
+          datasetMode: this.mode,
+          clearEmptyDir: this.clearEmptyDir,
+          mode: this.mode < 0 ? null : this.mode,
+          modelInnerTypeArray,
+        },
+        true
+      )
+        .then((res) => {
+          this.treeData = res.data;
+        })
+        .finally(() => {
+          this.treeLoading = false;
+        });
+    },
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+    initData(table) {
+      this.dataLoading = true;
+      table.row = 100;
+      post("/dataset/table/getPreviewData/1/100", table, false, 30000)
+        .then((response) => {
+          this.fields = response.data.fields;
+          this.table = response.data.data;
+        })
+        .finally((res) => {
+          this.dataLoading = false;
+        });
+    },
+    init() {
+      this.tableName = "";
+      this.tableId = "";
+      this.selectDatasetFlag = true;
+    },
+    setIdName() {
+      this.$emit("getTableId", this.tableId, this.tableName);
+      this.selectDatasetFlag = false;
+    },
+    nodeClick(data) {
+      const { id, name, modelInnerType: type } = data;
+      if (type === "group") return;
+      this.tableName = name;
+      this.tableId = id;
+      this.initData(data);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.dataset-task-table {
+  box-sizing: border-box;
+  height: 628px;
+  border: 1px solid #dee0e3;
+  border-radius: 4px;
+  display: flex;
+  max-height: 628px;
+  .el-tree-node__content {
+    height: 40px;
+    border-radius: 4px;
+    &:hover {
+      background-color: var(--deWhiteHover, #3370ff) !important;
+      .custom-tree-node {
+        color: var(--primary, #3370ff);
+      }
+    }
+  }
+  .dataset-tree {
+    width: 253px;
+    border-right: 1px solid #dee0e3;
+    padding: 16px;
+
+    .tree {
+      padding-top: 16px;
+      overflow-y: auto;
+      height: calc(100% - 30px);
+    }
+  }
+  .dataset-tree-table {
+    flex: 1;
+    padding: 16px;
+    overflow-y: auto;
+    .table-name {
+      margin: 0;
+      margin-bottom: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-family: PingFang SC;
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 24px;
+      color: var(--deTextPrimary, #000000);
+      span {
+        font-size: 14px;
+        font-weight: 400;
+        color: #646a73;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/system/task/TaskRecord.vue b/frontend/src/views/system/task/TaskRecord.vue
index 067b5bb6aa..712d3e0343 100644
--- a/frontend/src/views/system/task/TaskRecord.vue
+++ b/frontend/src/views/system/task/TaskRecord.vue
@@ -1,8 +1,66 @@
 <template>
-  <el-col>
-    <el-row v-loading="$store.getters.loadingMap[$store.getters.currentPath]" style="margin-top: 10px;">
-      <complex-table :data="data" :columns="columns" local-key="datasetTaskRecord" :search-config="searchConfig" :trans-condition="transCondition" :pagination-config="paginationConfig" @select="select" @search="search" @sort-change="sortChange">
-        <el-table-column prop="name" :label="$t('dataset.task_name')">
+<div class="dataset-on-time">
+    <el-row class="top-operate">
+      <el-col :span="10">
+        <deBtn
+          secondary
+          >{{ $t("zip.export") }}</deBtn
+        >
+      </el-col>
+      <el-col :span="14" class="right-user">
+        <el-input
+          :placeholder="$t('通过任务名称搜索')"
+          prefix-icon="el-icon-search"
+          class="name-email-search"
+          size="small"
+          clearable
+          ref="search"
+          v-model="nikeName"
+          @blur="initSearch"
+          @clear="initSearch"
+        >
+        </el-input>
+        <deBtn
+          :secondary="!cacheCondition.length"
+          :plain="!!cacheCondition.length"
+          icon="iconfont icon-icon-filter"
+          @click="filterShow"
+          >{{ $t("user.filter")
+          }}<template v-if="filterTexts.length">
+            ({{ cacheCondition.length }})
+          </template>
+        </deBtn>
+      </el-col>
+    </el-row>
+    <div class="filter-texts" v-if="filterTexts.length">
+      <span class="sum">{{ paginationConfig.total }}</span>
+      <span class="title">{{$t('user.result_one')}}</span>
+      <el-divider direction="vertical"></el-divider>
+      <i @click="scrollPre" v-if="showScroll" class="el-icon-arrow-left arrow-filter"></i>
+      <div class="filter-texts-container">
+        <p class="text" v-for="(ele, index) in filterTexts" :key="ele">
+          {{ ele }} <i @click="clearOneFilter(index)" class="el-icon-close"></i>
+        </p>
+      </div>
+      <i @click="scrollNext" v-if="showScroll" class="el-icon-arrow-right arrow-filter"></i>
+      <el-button
+        type="text"
+        class="clear-btn"
+        icon="el-icon-delete"
+        @click="clearFilter"
+        >{{$t('user.clear_filter')}}</el-button
+      >
+    </div>
+    <div id="resize-for-filter" class="table-container">
+      <grid-table
+        v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
+        :tableData="data"
+        :columns="[]"
+        :pagination="paginationConfig"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      >
+      <el-table-column prop="name" :label="$t('dataset.task_name')">
           <template slot-scope="scope">
             <span>
               <el-link :type="matchLogId && scope.row.id === matchLogId ? 'danger': ''" style="font-size: 12px" @click="jumpTask(scope.row)">{{ scope.row.name }}</el-link>
@@ -23,44 +81,48 @@
 
         <el-table-column prop="status" :label="$t('dataset.status')">
           <template slot-scope="scope">
-            <span v-if="scope.row.status === 'Completed'" style="color: green">{{ $t('dataset.completed') }}</span>
-            <span v-if="scope.row.status === 'Underway'" class="blue-color">
-              <i class="el-icon-loading" />
-              {{ $t('dataset.underway') }}
-            </span>
-            <span v-if="scope.row.status === 'Error'" style="color: red">
-              <el-link type="danger" style="font-size: 12px" @click="showErrorMassage(scope.row.info)">{{ $t('dataset.error') }}</el-link>
+            <span :class="[`de-${scope.row.status}`, 'de-status']"
+              >{{
+                $t(`dataset.${scope.row.status.toLocaleLowerCase()}`)
+              }}
+              <i
+                v-if="scope.row.status === 'Error'"
+                class="el-icon-question"
+                @click="showErrorMassage(scope.row.msg)"
+              ></i>
             </span>
           </template>
         </el-table-column>
-      </complex-table>
-    </el-row>
+      </grid-table>
+      <keep-alive>
+      <filterUser ref="filterUser" @search="filterDraw"></filterUser>
+    </keep-alive>
+    </div>
     <el-dialog
       v-dialogDrag
-      :title="$t('dataset.detail')"
-      :visible="show_error_massage"
-      :show-close="false"
-      width="50%"
-      class="dialog-css"
+      :title="$t('dataset.error') + $t('dataset.detail')"
+      :visible.sync="show_error_massage"
+      width="600px"
+      class="de-dialog-form"
     >
       <span class="err-msg">{{ error_massage }}</span>
       <span slot="footer" class="dialog-footer">
-        <el-button size="mini" @click="show_error_massage = false">{{ $t('dataset.close') }}</el-button>
+        <deBtn secondary @click="show_error_massage = false">{{ $t('dataset.close') }}</deBtn>
       </span>
     </el-dialog>
-  </el-col>
+</div>
 </template>
 
 <script>
-import ComplexTable from '@/components/business/complex-table'
-import { formatCondition, formatQuickCondition, addOrder, formatOrders } from '@/utils/index'
-import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import { formatOrders } from '@/utils/index'
 import { post } from '@/api/dataset/dataset'
-import { loadMenus } from '@/permission'
+import GridTable from "@/components/gridTable/index.vue";
+import filterUser from "./filterUserRecord.vue";
+import _ from 'lodash';
 
 export default {
   name: 'TaskRecord',
-  components: { ComplexTable },
+  components: { GridTable, filterUser },
   props: {
     param: {
       type: Object,
@@ -73,48 +135,18 @@ export default {
   },
   data() {
     return {
-      header: '',
       columns: [],
-      buttons: [
-        {
-          label: this.$t('commons.edit'), icon: 'el-icon-edit', type: 'primary', click: this.edit,
-          show: this.checkPermission(['user:edit'])
-        }
-      ],
-      searchConfig: {
-        useQuickSearch: true,
-        useComplexSearch: true,
-        quickPlaceholder: this.$t('dataset.task.search_by_name'),
-        components: [
-          { field: 'dataset_table_task.name', label: this.$t('dataset.task_name'), component: 'FuComplexInput' },
-          { field: 'dataset_table_task.id', label: this.$t('dataset.task_id'), component: 'FuComplexInput' },
-          { field: 'dataset_table.name', label: this.$t('dataset.name'), component: 'DeComplexInput' },
-          { field: 'dataset_table_task_log.status', label: this.$t('commons.status'), component: 'FuComplexSelect', options: [{ label: this.$t('dataset.completed'), value: 'Completed' }, { label: this.$t('dataset.underway'), value: 'Underway' }, { label: this.$t('dataset.error'), value: 'Error' }], multiple: false }
-        ]
-      },
+      nikeName: '',
+      showScroll: false,
+      filterTexts: [],
+      cacheCondition: [],
       paginationConfig: {
         currentPage: 1,
         pageSize: 10,
         total: 0
       },
       data: [],
-      dialogVisible: false,
-      editPasswordVisible: false,
-      form: {
-        roles: [{
-          id: ''
-        }]
-      },
-      checkPasswordForm: {},
-      ruleForm: {},
-      defaultForm: { id: null, username: null, nickName: null, gender: '男', email: null, enabled: 1, deptId: null, phone: null },
-      depts: null,
-      roles: [],
-      roleDatas: [],
-      userRoles: [],
-      formType: 'add',
       orderConditions: [],
-      last_condition: null,
       show_error_massage: false,
       error_massage: '',
       matchLogId: null,
@@ -133,14 +165,72 @@ export default {
     }
     this.createTimer()
   },
+  mounted() {
+    this.resizeObserver();
+  },
+  watch: {
+    filterTexts: {
+      handler() {
+        this.getScrollStatus();
+      },
+      deep: true,
+    },
+  },
   beforeDestroy() {
     this.destroyTimer()
   },
   methods: {
+    getScrollStatus() {
+      this.$nextTick(() => {
+        const dom = document.querySelector(".filter-texts-container");
+        this.showScroll = dom && dom.scrollWidth > dom.offsetWidth;
+      });
+    },
+    resizeObserver() {
+      this.resizeForFilter = new ResizeObserver(entries => {
+        if (!this.filterTexts.length) return;
+        this.layoutResize();
+      });
+      this.resizeForFilter.observe(document.querySelector('#resize-for-filter'));
+    },
+    layoutResize: _.debounce(function () {
+      this.getScrollStatus()
+    }, 200),
+    scrollPre() {
+      const dom = document.querySelector('.filter-texts-container');
+      dom.scrollLeft -= 10
+      if (dom.scrollLeft <= 0) {
+        dom.scrollLeft = 0
+      }
+    },
+    scrollNext() {
+      const dom = document.querySelector('.filter-texts-container');
+      dom.scrollLeft += 10
+      const width = dom.scrollWidth - dom.offsetWidth
+      if (dom.scrollLeft > width) {
+        dom.scrollLeft = width
+      }
+    },
+    clearFilter() {
+      this.$refs.filterUser.clearFilter();
+    },
+    clearOneFilter(index) {
+      this.$refs.filterUser.clearOneFilter(index);
+      this.$refs.filterUser.search();
+    },
+    filterDraw(condition, filterTexts = []) {
+      this.cacheCondition = condition;
+      this.filterTexts = filterTexts;
+      this.initSearch();
+    },
+    filterShow() {
+      this.$refs.filterUser.init();
+    },
     createTimer() {
+      this.initSearch();
       if (!this.timer) {
         this.timer = setInterval(() => {
-          this.timerSearch(this.last_condition, false)
+          this.timerSearch(false)
         }, 15000)
       }
     },
@@ -150,36 +240,36 @@ export default {
         this.timer = null
       }
     },
-    sortChange({ column, prop, order }) {
-      this.orderConditions = []
-      if (!order) {
-        this.search(this.last_condition)
-        return
-      }
-      if (prop === 'dept') {
-        prop = 'u.deptId'
-      }
-      if (prop === 'status') {
-        prop = 'u.enabled'
-      }
-      this.orderConditions = []
-      addOrder({ field: prop, value: order }, this.orderConditions)
-      this.search(this.last_condition)
+    handleSizeChange(pageSize) {
+      this.paginationConfig.currentPage = 1;
+      this.paginationConfig.pageSize = pageSize;
+      this.search();
     },
-    select(selection) {
+    handleCurrentChange(currentPage) {
+      this.paginationConfig.currentPage = currentPage;
+      this.search();
     },
-    timerSearch(condition, showLoading = true) {
+    initSearch() {
+      this.handleCurrentChange(1);
+    },
+    timerSearch(showLoading = true) {
       if (!this.lastRequestComplete) {
         return
       } else {
         this.lastRequestComplete = false
       }
 
-      this.last_condition = condition
-      condition = formatQuickCondition(condition, 'dataset_table_task.name')
-      const temp = formatCondition(condition)
-      const param = temp || {}
-      param['orders'] = formatOrders(this.orderConditions)
+      const param = {
+        orders: formatOrders(this.orderConditions),
+        conditions: [...this.cacheCondition],
+      };
+      if (this.nikeName) {
+        param.conditions.push({
+          field: `dataset_table_task.name`,
+          operator: "like",
+          value: this.nikeName,
+        });
+      }
       post('/dataset/taskLog/list/notexcel/' + this.paginationConfig.currentPage + '/' + this.paginationConfig.pageSize, param, showLoading).then(response => {
         this.data = response.data.listObject
         this.paginationConfig.total = response.data.itemCount
@@ -189,11 +279,17 @@ export default {
       })
     },
     search(condition, showLoading = true) {
-      this.last_condition = condition
-      condition = formatQuickCondition(condition, 'dataset_table_task.name')
-      const temp = formatCondition(condition)
-      const param = temp || {}
-      param['orders'] = formatOrders(this.orderConditions)
+      const param = {
+        orders: formatOrders(this.orderConditions),
+        conditions: [...this.cacheCondition],
+      };
+      if (this.nikeName) {
+        param.conditions.push({
+          field: `dataset_table_task.name`,
+          operator: "like",
+          value: this.nikeName,
+        });
+      }
       post('/dataset/taskLog/list/notexcel/' + this.paginationConfig.currentPage + '/' + this.paginationConfig.pageSize, param, showLoading).then(response => {
         this.data = response.data.listObject
         this.paginationConfig.total = response.data.itemCount
@@ -255,3 +351,202 @@ span{
 }
 
 </style>
+<style lang="scss" scoped>
+.dataset-on-time {
+  margin: 0;
+  width: 100%;
+  overflow: auto;
+  background-color: var(--ContentBG, #fff);
+  padding: 24px;
+  height: 100%;
+}
+.table-container {
+  height: calc(100% - 50px);
+
+  .text-btn {
+    font-family: PingFang SC;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 22px;
+    letter-spacing: 0px;
+    text-align: center;
+    margin-left: 2px;
+    border: none;
+    padding: 2px 4px;
+  }
+
+  .text-btn:hover {
+    background: rgba(51, 112, 255, 0.1);
+  }
+
+  .mar6 {
+    margin-right: 6px;
+  }
+
+  .mar3 {
+     margin-left: -3px;
+  }
+}
+
+.table-container-filter {
+  height: calc(100% - 110px);
+}
+.filter-texts {
+  display: flex;
+  align-items: center;
+  margin: 17px 0;
+  font-family: "PingFang SC";
+  font-weight: 400;
+
+  .sum {
+    color: #1f2329;
+  }
+
+  .title {
+    color: #999999;
+    margin-left: 8px;
+  }
+
+  .text {
+    max-width: 280px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    padding: 1px 22px 1px 6px;
+    display: inline-block;
+    align-items: center;
+    color: #0c296e;
+    font-size: 14px;
+    line-height: 22px;
+    background: rgba(51, 112, 255, 0.1);
+    border-radius: 2px;
+    margin: 0;
+    margin-right: 8px;
+    position: relative;
+    i {
+      position: absolute;
+      right: 2px;
+      top: 50%;
+      transform: translateY(-50%);
+      cursor: pointer;
+    }
+  }
+
+  .clear-btn {
+    color: #646a73;
+  }
+
+  .clear-btn:hover {
+    color: #3370ff;
+  }
+
+  .filter-texts-container::-webkit-scrollbar { display: none; }
+
+  .arrow-filter {
+    font-size: 16px;
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+    color: #646A73;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .arrow-filter:hover {
+    background: rgba(31, 35, 41, 0.1);
+    border-radius: 4px;
+  }
+
+  .el-icon-arrow-right.arrow-filter {
+    margin-left: 5px;
+  }
+
+  .el-icon-arrow-left.arrow-filter {
+    margin-right: 5px;
+  }
+  .filter-texts-container {
+    flex: 1;
+    overflow-x: auto;
+    white-space: nowrap;
+    height: 24px;
+  }
+}
+.top-operate {
+  margin-bottom: 16px;
+  .right-user {
+    text-align: right;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+
+    .de-button {
+      margin-left: 12px;
+    }
+
+    .el-input--medium .el-input__icon {
+      line-height: 32px;
+    }
+  }
+
+  .name-email-search {
+    width: 240px;
+  }
+}
+</style>
+<style lang="scss">
+.de-status {
+  position: relative;
+  margin-left: 15px;
+  &::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: -13px;
+    transform: translateY(-50%);
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+  }
+}
+
+.de-Completed {
+  &::before {
+    background: var(--primary, #3370ff);
+  }
+}
+
+.de-Underway {
+  &::before {
+    background: #8f959e;
+  }
+}
+
+.de-Pending {
+  &::before {
+    background: #8f959e;
+  }
+}
+
+.de-Exec {
+  &::before {
+    background: var(--primary, #3370ff);
+  }
+}
+
+.de-Stopped {
+  &::before {
+    background: var(--deSuccess, #3370ff);
+  }
+}
+
+.de-Error {
+  &::before {
+    background: var(--deDanger, #3370ff);
+  }
+
+  .el-icon-question {
+    color: #646A73;
+    cursor: pointer;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/system/task/dataset.vue b/frontend/src/views/system/task/dataset.vue
index 65b21c7399..2061765f01 100644
--- a/frontend/src/views/system/task/dataset.vue
+++ b/frontend/src/views/system/task/dataset.vue
@@ -1,113 +1,123 @@
 <template>
-  <layout-content>
-
-    <el-row>
+  <de-layout-content>
+    <div class="organization">
       <el-tabs v-model="tabActive" @tab-click="changeTab">
         <el-tab-pane :label="$t('dataset.task.list')" name="DatasetTaskList">
-          <dataset-task-list v-if="tabActive=='DatasetTaskList'" :param="task" :trans-condition="transCondition" @jumpTaskRecord="jumpTaskRecord" />
         </el-tab-pane>
         <el-tab-pane :label="$t('dataset.task.record')" name="TaskRecord">
-          <task-record v-if="tabActive=='TaskRecord'" ref="task_record" :param="task" :trans-condition="transCondition" @jumpTask="jumpTask" />
         </el-tab-pane>
       </el-tabs>
-    </el-row>
-  </layout-content>
+      <div class="tabs-container">
+        <dataset-task-list
+          v-if="tabActive == 'DatasetTaskList'"
+          :param="task"
+          :trans-condition="transCondition"
+          @jumpTaskRecord="jumpTaskRecord"
+        />
+        <task-record
+          v-if="tabActive == 'TaskRecord'"
+          ref="task_record"
+          :param="task"
+          :trans-condition="transCondition"
+          @jumpTask="jumpTask"
+        />
+      </div>
+    </div>
+  </de-layout-content>
 </template>
 
 <script>
+import DeLayoutContent from "@/components/business/DeLayoutContent";
 
-import LayoutContent from '@/components/business/LayoutContent'
+import DatasetTaskList from "@/views/system/task/DatasetTaskList";
+import TaskRecord from "@/views/system/task/TaskRecord";
 
-import DatasetTaskList from '@/views/system/task/DatasetTaskList'
-import TaskRecord from '@/views/system/task/TaskRecord'
-
-import bus from '@/utils/bus'
-import { mapGetters } from 'vuex'
+import bus from "@/utils/bus";
+import { mapGetters } from "vuex";
 export default {
-  components: { LayoutContent, DatasetTaskList, TaskRecord },
+  components: { DeLayoutContent, DatasetTaskList, TaskRecord },
   data() {
     return {
-      tabActive: 'DatasetTaskList',
+      tabActive: "DatasetTaskList",
       transCondition: {},
-      task: null
-    }
+      task: null,
+    };
   },
   computed: {
-    ...mapGetters([
-      'permission_routes'
-    ])
+    ...mapGetters(["permission_routes"]),
   },
   mounted() {
-    bus.$on('to-msg-dataset', this.toMsgShare)
+    bus.$on("to-msg-dataset", this.toMsgShare);
   },
   beforeDestroy() {
-    bus.$off('to-msg-dataset', this.toMsgShare)
+    bus.$off("to-msg-dataset", this.toMsgShare);
   },
   created() {
-    this.$store.dispatch('app/toggleSideBarHide', false)
-    const routerParam = this.$router.currentRoute.params
-    routerParam && this.$nextTick(() => {
-      this.toMsgShare(routerParam)
-    })
+    this.$store.dispatch("app/toggleSideBarHide", false);
+    const routerParam = this.$router.currentRoute.params;
+    routerParam &&
+      this.$nextTick(() => {
+        this.toMsgShare(routerParam);
+      });
   },
   methods: {
     changeTab() {
-      this.task = null
-      this.transCondition = {}
+      this.task = null;
+      this.transCondition = {};
     },
     jumpTaskRecord(task) {
-      this.transCondition['dataset_table_task.id'] = {
-        operator: 'eq',
-        value: task.id
-      }
-      this.tabActive = 'TaskRecord'
+      this.transCondition["dataset_table_task.id"] = {
+        operator: "eq",
+        value: task.id,
+      };
+      this.tabActive = "TaskRecord";
     },
     jumpTask(taskRecord) {
-      this.transCondition['dataset_table_task.id'] = {
-        operator: 'eq',
-        value: taskRecord.taskId
-      }
-      this.tabActive = 'DatasetTaskList'
+      this.transCondition["dataset_table_task.id"] = {
+        operator: "eq",
+        value: taskRecord.taskId,
+      };
+      this.tabActive = "DatasetTaskList";
     },
     toMsgShare(routerParam) {
       if (routerParam !== null && routerParam.msgNotification) {
-        const panelShareTypeIds = [4, 5, 6]
+        const panelShareTypeIds = [4, 5, 6];
         // 说明是从消息通知跳转过来的
-        if (panelShareTypeIds.includes(routerParam.msgType)) { // 是数据集同步
+        if (panelShareTypeIds.includes(routerParam.msgType)) {
+          // 是数据集同步
           if (routerParam.sourceParam) {
-            this.openSystem()
+            this.openSystem();
             try {
-              const msgParam = JSON.parse(routerParam.sourceParam)
+              const msgParam = JSON.parse(routerParam.sourceParam);
               // this.param = msgParam.tableId
 
               this.$nextTick(() => {
                 // 目标组件存在定时器 这种方式会被定时器阻塞
                 // this.$refs.task_record && this.$refs.task_record.msg2Current && this.$refs.task_record.msg2Current(msgParam)
-                this.task = msgParam
-                this.tabActive = 'TaskRecord'
-              })
+                this.task = msgParam;
+                this.tabActive = "TaskRecord";
+              });
             } catch (error) {
-              console.error(error)
+              console.error(error);
             }
           }
         }
       }
     },
     openSystem() {
-      const path = '/system'
+      const path = "/system";
       let route = this.permission_routes.find(
-        item => item.path === '/' + path.split('/')[1]
-      )
+        (item) => item.path === "/" + path.split("/")[1]
+      );
       // 如果找不到这个路由，说明是首页
       if (!route) {
-        route = this.permission_routes.find(item => item.path === '/')
+        route = this.permission_routes.find((item) => item.path === "/");
       }
-      this.$store.commit('permission/SET_CURRENT_ROUTES', route)
+      this.$store.commit("permission/SET_CURRENT_ROUTES", route);
       // this.setSidebarHide(route)
-    }
-  }
-
-}
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -119,7 +129,7 @@ export default {
     padding: 10px 10px;
   }
 
-  ::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner {
+  ::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
     color: #fff;
     background-color: #0a7be0;
     border-color: #0a7be0;
@@ -128,10 +138,32 @@ export default {
   }
 }
 .de-msg-a:hover {
-    text-decoration: underline !important;
-    color: #0a7be0 !important;
-    cursor: pointer !important;
-
+  text-decoration: underline !important;
+  color: #0a7be0 !important;
+  cursor: pointer !important;
+}
+</style>
+<style scoped lang="scss">
+.organization {
+  height: 100%;
+  background-color: var(--MainBG, #f5f6f7);
+
+  .tabs-container {
+    height: calc(100% - 48px);
+    background: var(--ContentBG, #ffffff);
+    overflow-x: auto;
+  }
+
+  >>> .el-tabs__header {
+    margin: 0 0 12px;
+  }
+
+  >>> .el-tabs__item {
+    height: 24px;
+    line-height: 24px;
+    margin-bottom: 9px;
+    padding: 0 12px;
+    font-size: 16px;
+  }
 }
-
 </style>
diff --git a/frontend/src/views/system/task/filterUser.vue b/frontend/src/views/system/task/filterUser.vue
new file mode 100644
index 0000000000..f115a9cc94
--- /dev/null
+++ b/frontend/src/views/system/task/filterUser.vue
@@ -0,0 +1,466 @@
+<template>
+  <el-drawer
+    :title="$t('user.filter_method')"
+    :visible.sync="userDrawer"
+    custom-class="user-drawer"
+    size="680px"
+    v-closePress
+    direction="rtl"
+  >
+    <div class="filter">
+      <span>{{ $t("dataset.datalist") }}</span>
+      <div class="filter-item">
+        <span
+          class="item"
+          @click="activeDatasetChange(ele.id)"
+          :class="[activeDataset.includes(ele.id) ? 'active' : '']"
+          :key="ele.id"
+          v-for="ele in selectDatasetsCahe"
+          >{{ ele.name }}</span
+        >
+        <el-popover
+          placement="bottom"
+          popper-class="user-popper"
+          width="200"
+          trigger="click"
+        >
+          <el-popover
+            placement="bottom"
+            popper-class="user-popper dept"
+            width="200"
+            trigger="click"
+            v-loading="treeLoading"
+          >
+            <el-tree
+              ref="datasetTreeRef"
+              current-node-key="id"
+              :data="treeData"
+              node-key="id"
+              highlight-current
+              :filter-node-method="filterNode"
+              :expand-on-click-node="true"
+              @node-click="nodeClick"
+            >
+              <span slot-scope="{ data }" class="custom-tree-node">
+                <span v-if="data.modelInnerType === 'group'">
+                  <svg-icon icon-class="scene" class="ds-icon-scene" />
+                  <span
+                    style="
+                      margin-left: 6px;
+                      white-space: nowrap;
+                      overflow: hidden;
+                      text-overflow: ellipsis;
+                    "
+                    :title="data.name"
+                    >{{ data.name }}</span
+                  >
+                </span>
+                <span v-else>
+                  <span>
+                    <svg-icon
+                      :icon-class="`ds-${data.modelInnerType}`"
+                      :class="`ds-icon-${data.modelInnerType}`"
+                    />
+                  </span>
+                  <span
+                    style="
+                      margin-left: 6px;
+                      white-space: nowrap;
+                      overflow: hidden;
+                      text-overflow: ellipsis;
+                    "
+                    :title="data.name"
+                    >{{ data.name }}</span
+                  >
+                </span>
+              </span>
+            </el-tree>
+
+            <el-select
+              ref="datasetSelect"
+              v-model="selectDatasets"
+              slot="reference"
+              popper-class="tree-select"
+              multiple
+              :placeholder="$t('commons.please_select')"
+              value-key="id"
+            >
+              <el-option
+                v-for="item in selectDatasets"
+                :key="item.name"
+                :label="item.name"
+                :value="item"
+              />
+            </el-select>
+          </el-popover>
+          <span class="more" slot="reference">+ {{ $t("panel.more") }}</span>
+        </el-popover>
+      </div>
+    </div>
+    <div v-for="ele in filterDataset" :key="ele.name" class="filter">
+      <span>{{ $t(ele.name) }}</span>
+      <div class="filter-item">
+        <span
+          class="item"
+          @click="statusChange(item.value, ele.activeType)"
+          :class="[active[ele.activeType].includes(item.value) ? 'active' : '']"
+          :key="item.name"
+          v-for="item in ele.list"
+          >{{ $t(item.name) }}</span
+        >
+      </div>
+    </div>
+
+    <div class="filter">
+      <span>{{ $t("dedaterange.label") }}</span>
+      <div class="filter-item">
+        <el-date-picker
+          v-model="dataRange"
+          size="small"
+          type="daterange"
+          range-separator=""
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        >
+        </el-date-picker>
+      </div>
+    </div>
+    <div class="foot">
+      <el-button class="btn normal" @click="reset">{{
+        $t("commons.reset")
+      }}</el-button>
+      <el-button type="primary" class="btn" @click="search">{{
+        $t("commons.adv_search.search")
+      }}</el-button>
+    </div>
+  </el-drawer>
+</template>
+
+<script>
+import { filterDataset, dateFormat } from "./options";
+import { allRoles } from "@/api/system/user";
+import { getDatasetTree, treeByDatasetId } from "@/api/system/dept";
+import { queryAuthModel } from "@/api/authModel/authModel";
+
+export default {
+  data() {
+    return {
+      treeLoading: false,
+      dataRange: [],
+      selectDatasets: [],
+      datasetCahe: [],
+      activeDataset: [],
+      selectDatasetsCahe: [],
+      treeData: [],
+      filterDataset,
+      active: {
+        execStatus: [],
+        status: [],
+        rate: [],
+      },
+      userDrawer: false,
+    };
+  },
+  mounted() {
+    this.treeNode();
+  },
+  methods: {
+    treeNode() {
+      this.treeLoading = true;
+      queryAuthModel(
+        {
+          modelType: "dataset",
+          privileges: "manage",
+          datasetMode: 1,
+          clearEmptyDir: true,
+          mode: 1,
+          modelInnerTypeArray: ["db", "sql", "api", "group"],
+        },
+        true
+      )
+        .then((res) => {
+          this.treeData = res.data;
+        })
+        .finally(() => {
+          this.treeLoading = false;
+        });
+    },
+    nodeClick(data) {
+      const { id, name, modelInnerType: type } = data;
+      if (type === "group") return;
+      this.handleNodeClick(id, name);
+    },
+    filterNode(value, data) {
+      if (!value) return true;
+      return !this.activeDataset.includes(data.id);
+    },
+    clearFilter() {
+      this.active = {
+        execStatus: [],
+        status: [],
+        rate: [],
+      };
+      this.dataRange = [];
+      this.activeDataset = [];
+      this.selectDatasets = [];
+      this.datasetCahe = [];
+      this.selectDatasetsCahe = [];
+      this.$emit("search", [], []);
+    },
+    clearOneFilter(index) {
+      (this.filterTextMap[index] || []).forEach((ele) => {
+        const eleKey = ele.split(".");
+        if (eleKey.length === 2) {
+          const [p, c] = eleKey;
+          this[p][c] = [];
+        } else {
+          this[ele] = [];
+        }
+      });
+    },
+    statusChange(value, type) {
+      const statusIndex = this.active[type].findIndex((ele) => ele === value);
+      if (statusIndex === -1) {
+        this.active[type].push(value);
+      } else {
+        this.active[type].splice(statusIndex, 1);
+      }
+    },
+    handleNodeClick(id, name) {
+      const datasetIdx = this.selectDatasets.findIndex((ele) => ele.id === id);
+      if (datasetIdx !== -1) {
+        this.selectDatasets.splice(datasetIdx, 1);
+        this.selectDatasetsCahe = this.selectDatasetsCahe.filter(
+          (ele) => ele.id !== id
+        );
+        this.datasetCahe = this.datasetCahe.filter((ele) => ele.id !== id);
+        this.$refs.datasetTreeRef.filter(id);
+        return;
+      }
+      this.activeDataset.push(id);
+      this.selectDatasetsCahe.push({ id, name });
+      this.datasetCahe.push({ id, name });
+      this.$refs.datasetTreeRef.filter(id);
+    },
+    activeDatasetChange(id) {
+      const dataset = this.datasetCahe.find((ele) => ele.id === id);
+      this.selectDatasets.push(dataset);
+      this.activeDataset = this.activeDataset.filter((ele) => ele !== id);
+      this.selectDatasetsCahe = this.selectDatasetsCahe.filter(
+        (ele) => ele.id !== id
+      );
+    },
+    search() {
+      this.userDrawer = false;
+      this.$emit("search", this.formatCondition(), this.formatText());
+    },
+    formatText() {
+      this.filterTextMap = [];
+      const params = [];
+      if (this.activeDataset.length) {
+        let str = `${this.$t("dataset.datalist")}:${this.activeDataset.reduce(
+          (pre, next) =>
+            (this.datasetCahe.find((ele) => ele.id === next) || {}).name +
+            "、" +
+            pre,
+          ""
+        )}`;
+        params.push(str.slice(0, str.length - 1));
+        this.filterTextMap.push([
+          "activeDataset",
+          "selectDatasets",
+          "selectDatasetsCahe",
+          "datasetCahe",
+        ]);
+      }
+      [
+        "dataset.execute_rate",
+        "dataset.task.task_status",
+        "dataset.task.last_exec_status",
+      ].forEach((ele, index) => {
+        const { activeType: type, list } =
+          filterDataset[index];
+        if (this.active[type].length) {
+          params.push(
+            `${this.$t(ele)}:${this.active[type]
+              .map((item) => this.$t(list.find((itx) => itx.value === item).name))
+              .join("、")}`
+          );
+          this.filterTextMap.push([`active.${type}`]);
+        }
+      });
+      if (this.dataRange.length) {
+        params.push(
+          `${this.$t("dedaterange.label")}:${this.dataRange
+            .map((ele) => {
+              return dateFormat("YYYY-mm-dd", ele);
+            })
+            .join("-")}`
+        );
+        this.filterTextMap.push(["dataRange"]);
+      }
+      return params;
+    },
+    formatCondition() {
+      const fildMap = {
+        "dataset_table_task.rate": this.active.rate,
+        "dataset_table_task.status": this.active.status,
+        "dataset_table_task.last_exec_status": this.active.execStatus,
+        "dataset_table.id": this.activeDataset,
+      };
+      const conditions = [];
+      Object.keys(fildMap).forEach((ele) => {
+        if (fildMap[ele].length) {
+          conditions.push({
+            field: ele,
+            operator: "in",
+            value: fildMap[ele],
+          });
+        }
+      });
+      const [min, max] = this.dataRange;
+      if (min && max) {
+        conditions.push({
+          field: "dataset_table_task.last_exec_time",
+          operator: "between",
+          value: [+min, +max],
+        });
+      }
+      return conditions;
+    },
+    init() {
+      this.userDrawer = true;
+    },
+    reset() {
+      this.clearFilter();
+      this.userDrawer = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.user-drawer {
+  .el-drawer__header {
+    padding: 16px 24px;
+    margin: 0;
+    font-family: PingFang SC;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px;
+    color: #1f2329;
+    position: relative;
+    box-sizing: border-box;
+    height: 57px;
+    mix-blend-mode: normal;
+    border-bottom: 1px solid rgba(187, 191, 196, 0.5);
+
+    .el-drawer__close-btn {
+      position: absolute;
+      right: 24px;
+      top: 16px;
+      padding: 4px;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .el-drawer__close-btn:hover {
+      background: #e9e9ea;
+    }
+  }
+
+  .el-drawer__body {
+    padding: 12px 24px 24px 24px;
+    position: relative;
+  }
+
+  .filter {
+    display: flex;
+    min-height: 46px;
+    > :nth-child(1) {
+      color: #1f2329;
+      font-family: "PingFang SC";
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 24px;
+      white-space: nowrap;
+      width: 116px;
+    }
+    .filter-item {
+      flex: 1;
+      .item,
+      .more {
+        font-family: PingFang SC;
+        white-space: nowrap;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 24px;
+        margin-right: 12px;
+        text-align: center;
+        padding: 1px 6px;
+        background: #f5f6f7;
+        border-radius: 2px;
+        cursor: pointer;
+        display: inline-block;
+        margin-bottom: 12px;
+      }
+
+      .active,
+      .more:hover {
+        background: rgba(51, 112, 255, 0.1);
+        color: #0c296e;
+      }
+      .more {
+        white-space: nowrap;
+      }
+    }
+  }
+  .btn {
+    border-radius: 4px;
+    padding: 5px 26px 5px 26px;
+    font-family: PingFang SC;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    letter-spacing: 0px;
+    text-align: center;
+    border: none;
+    box-sizing: border-box;
+  }
+
+  .normal {
+    color: #1f2329;
+    border: 1px solid #bbbfc4;
+    margin-left: 12px;
+  }
+
+  .foot {
+    position: absolute;
+    right: 24px;
+    bottom: 24px;
+    text-align: right;
+  }
+}
+.user-popper {
+  padding: 0;
+  background: #fff;
+  .popper__arrow {
+    display: none;
+  }
+}
+.tree-select {
+  .el-select-dropdown__empty,
+  .el-scrollbar__wrap,
+  .popper__arrow {
+    display: none !important;
+  }
+}
+
+.user-popper.dept {
+  height: 400px;
+  overflow: auto;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/system/task/filterUserRecord.vue b/frontend/src/views/system/task/filterUserRecord.vue
new file mode 100644
index 0000000000..bde2465774
--- /dev/null
+++ b/frontend/src/views/system/task/filterUserRecord.vue
@@ -0,0 +1,459 @@
+<template>
+  <el-drawer
+    :title="$t('user.filter_method')"
+    :visible.sync="userDrawer"
+    custom-class="user-drawer"
+    size="680px"
+    v-closePress
+    direction="rtl"
+  >
+    <div class="filter">
+      <span>{{ $t("dataset.datalist") }}</span>
+      <div class="filter-item">
+        <span
+          class="item"
+          @click="activeDatasetChange(ele.id)"
+          :class="[activeDataset.includes(ele.id) ? 'active' : '']"
+          :key="ele.id"
+          v-for="ele in selectDatasetsCahe"
+          >{{ ele.name }}</span
+        >
+        <el-popover
+          placement="bottom"
+          popper-class="user-popper"
+          width="200"
+          trigger="click"
+        >
+          <el-popover
+            placement="bottom"
+            popper-class="user-popper dept"
+            width="200"
+            trigger="click"
+            v-loading="treeLoading"
+          >
+            <el-tree
+              ref="datasetTreeRef"
+              current-node-key="id"
+              :data="treeData"
+              node-key="id"
+              highlight-current
+              :filter-node-method="filterNode"
+              :expand-on-click-node="true"
+              @node-click="nodeClick"
+            >
+              <span slot-scope="{ data }" class="custom-tree-node">
+                <span v-if="data.modelInnerType === 'group'">
+                  <svg-icon icon-class="scene" class="ds-icon-scene" />
+                  <span
+                    style="
+                      margin-left: 6px;
+                      white-space: nowrap;
+                      overflow: hidden;
+                      text-overflow: ellipsis;
+                    "
+                    :title="data.name"
+                    >{{ data.name }}</span
+                  >
+                </span>
+                <span v-else>
+                  <span>
+                    <svg-icon
+                      :icon-class="`ds-${data.modelInnerType}`"
+                      :class="`ds-icon-${data.modelInnerType}`"
+                    />
+                  </span>
+                  <span
+                    style="
+                      margin-left: 6px;
+                      white-space: nowrap;
+                      overflow: hidden;
+                      text-overflow: ellipsis;
+                    "
+                    :title="data.name"
+                    >{{ data.name }}</span
+                  >
+                </span>
+              </span>
+            </el-tree>
+
+            <el-select
+              ref="datasetSelect"
+              v-model="selectDatasets"
+              slot="reference"
+              popper-class="tree-select"
+              multiple
+              :placeholder="$t('commons.please_select')"
+              value-key="id"
+            >
+              <el-option
+                v-for="item in selectDatasets"
+                :key="item.name"
+                :label="item.name"
+                :value="item"
+              />
+            </el-select>
+          </el-popover>
+          <span class="more" slot="reference">+ {{ $t("panel.more") }}</span>
+        </el-popover>
+      </div>
+    </div>
+    <div v-for="ele in filterDataset" :key="ele.name" class="filter">
+      <span>{{ $t(ele.name) }}</span>
+      <div class="filter-item">
+        <span
+          class="item"
+          @click="statusChange(item.value, ele.activeType)"
+          :class="[active[ele.activeType].includes(item.value) ? 'active' : '']"
+          :key="item.name"
+          v-for="item in ele.list"
+          >{{ $t(item.name) }}</span
+        >
+      </div>
+    </div>
+
+    <div class="filter">
+      <span>{{ $t("dedaterange.label") }}</span>
+      <div class="filter-item">
+        <el-date-picker
+          v-model="dataRange"
+          size="small"
+          type="daterange"
+          range-separator=""
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        >
+        </el-date-picker>
+      </div>
+    </div>
+    <div class="foot">
+      <el-button class="btn normal" @click="reset">{{
+        $t("commons.reset")
+      }}</el-button>
+      <el-button type="primary" class="btn" @click="search">{{
+        $t("commons.adv_search.search")
+      }}</el-button>
+    </div>
+  </el-drawer>
+</template>
+
+<script>
+import { filterDatasetRecord, dateFormat } from "./options";
+import { queryAuthModel } from "@/api/authModel/authModel";
+
+export default {
+  data() {
+    return {
+      treeLoading: false,
+      filterTextMap: [],
+      dataRange: [],
+      selectDatasets: [],
+      datasetCahe: [],
+      activeDataset: [],
+      selectDatasetsCahe: [],
+      treeData: [],
+      filterDataset: [filterDatasetRecord],
+      active: {
+        execStatus: [],
+      },
+      userDrawer: false,
+    };
+  },
+  mounted() {
+    this.treeNode();
+  },
+  methods: {
+    treeNode() {
+      this.treeLoading = true;
+      queryAuthModel(
+        {
+          modelType: "dataset",
+          privileges: "manage",
+          datasetMode: 1,
+          clearEmptyDir: true,
+          mode: 1,
+          modelInnerTypeArray: ["db", "sql", "api", "group"],
+        },
+        true
+      )
+        .then((res) => {
+          this.treeData = res.data;
+        })
+        .finally(() => {
+          this.treeLoading = false;
+        });
+    },
+    nodeClick(data) {
+      const { id, name, modelInnerType: type } = data;
+      if (type === "group") return;
+      this.handleNodeClick(id, name);
+    },
+    filterNode(value, data) {
+      if (!value) return true;
+      return !this.activeDataset.includes(data.id);
+    },
+    clearFilter() {
+      this.active = {
+        execStatus: [],
+      }
+      this.dataRange = [];
+      this.activeDataset = [];
+      this.selectDatasets = [];
+      this.datasetCahe = [];
+      this.selectDatasetsCahe = [];
+      this.$emit("search", [], []);
+    },
+    clearOneFilter(index) {
+      (this.filterTextMap[index] || []).forEach(ele => {
+        const eleKey = ele.split('.');
+        if (eleKey.length === 2) {
+          const [p, c ] = eleKey;
+          this[p][c] = []
+        } else {
+          this[ele] = []
+        }
+      })
+    },
+    statusChange(value, type) {
+      const statusIndex = this.active[type].findIndex((ele) => ele === value);
+      if (statusIndex === -1) {
+        this.active[type].push(value);
+      } else {
+        this.active[type].splice(statusIndex, 1);
+      }
+    },
+    handleNodeClick(id, name) {
+      const datasetIdx = this.selectDatasets.findIndex((ele) => ele.id === id);
+      if (datasetIdx !== -1) {
+        this.selectDatasets.splice(datasetIdx, 1);
+        this.selectDatasetsCahe = this.selectDatasetsCahe.filter(
+          (ele) => ele.id !== id
+        );
+        this.datasetCahe = this.datasetCahe.filter((ele) => ele.id !== id);
+        this.$refs.datasetTreeRef.filter(id);
+        return;
+      }
+      this.activeDataset.push(id);
+      this.selectDatasetsCahe.push({ id, name });
+      this.datasetCahe.push({ id, name });
+      this.$refs.datasetTreeRef.filter(id);
+    },
+    activeDatasetChange(id) {
+      const dataset = this.datasetCahe.find((ele) => ele.id === id);
+      this.selectDatasets.push(dataset);
+      this.activeDataset = this.activeDataset.filter((ele) => ele !== id);
+      this.selectDatasetsCahe = this.selectDatasetsCahe.filter(
+        (ele) => ele.id !== id
+      );
+    },
+    search() {
+      this.userDrawer = false;
+      this.$emit("search", this.formatCondition(), this.formatText());
+    },
+    formatText() {
+      this.filterTextMap = [];
+      const params = [];
+      if (this.activeDataset.length) {
+        let str = `${this.$t("dataset.datalist")}:${this.activeDataset.reduce(
+          (pre, next) =>
+            (this.datasetCahe.find((ele) => ele.id === next) || {}).name +
+            "、" +
+            pre,
+          ""
+        )}`;
+        params.push(str.slice(0, str.length - 1));
+        this.filterTextMap.push([
+          "activeDataset",
+          "selectDatasets",
+          "selectDatasetsCahe",
+          "datasetCahe",
+        ]);
+      }
+      [
+        "dataset.task.last_exec_status",
+      ].forEach((ele, index) => {
+        const { activeType: type, list } =
+          this.filterDataset[index];
+          console.log('type', type);
+        if (this.active[type].length) {
+          params.push(
+            `${this.$t(ele)}:${this.active[type]
+              .map((item) => this.$t(list.find((itx) => itx.value === item).name))
+              .join("、")}`
+          );
+          this.filterTextMap.push([`active.${type}`]);
+        }
+      });
+      if (this.dataRange.length) {
+        params.push(
+          `${this.$t("dedaterange.label")}:${this.dataRange
+            .map((ele) => {
+              return dateFormat("YYYY-mm-dd", ele);
+            })
+            .join("-")}`
+        );
+        this.filterTextMap.push(["dataRange"]);
+      }
+      return params;
+    },
+    formatCondition() {
+      const fildMap = {
+        "dataset_table_task.last_exec_status": this.active.execStatus,
+        "dataset_table.id": this.activeDataset,
+      };
+      const conditions = [];
+      Object.keys(fildMap).forEach((ele) => {
+        if (fildMap[ele].length) {
+          conditions.push({
+            field: ele,
+            operator: "in",
+            value: fildMap[ele],
+          });
+        }
+      });
+      const [ min, max ] = this.dataRange;
+      if (min && max) {
+        console.log(1, +min, +max);
+        conditions.push({
+            field: 'dataset_table_task.last_exec_time',
+            operator: "between",
+            value: [ +min, +max ],
+          })
+      }
+      return conditions;
+    },
+    init() {
+      this.userDrawer = true;
+    },
+    reset() {
+      this.clearFilter();
+      this.userDrawer = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.user-drawer {
+  .el-drawer__header {
+    padding: 16px 24px;
+    margin: 0;
+    font-family: PingFang SC;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px;
+    color: #1f2329;
+    position: relative;
+    box-sizing: border-box;
+    height: 57px;
+    mix-blend-mode: normal;
+    border-bottom: 1px solid rgba(187, 191, 196, 0.5);
+
+    .el-drawer__close-btn {
+      position: absolute;
+      right: 24px;
+      top: 16px;
+      padding: 4px;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .el-drawer__close-btn:hover {
+      background: #e9e9ea;
+    }
+  }
+
+  .el-drawer__body {
+    padding: 12px 24px 24px 24px;
+    position: relative;
+  }
+
+  .filter {
+    display: flex;
+    min-height: 46px;
+    > :nth-child(1) {
+      color: #1f2329;
+      font-family: "PingFang SC";
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 24px;
+      white-space: nowrap;
+      width: 116px;
+    }
+    .filter-item {
+      flex: 1;
+      .item,
+      .more {
+        font-family: PingFang SC;
+        white-space: nowrap;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 24px;
+        margin-right: 12px;
+        text-align: center;
+        padding: 1px 6px;
+        background: #f5f6f7;
+        border-radius: 2px;
+        cursor: pointer;
+        display: inline-block;
+        margin-bottom: 12px;
+      }
+
+      .active,
+      .more:hover {
+        background: rgba(51, 112, 255, 0.1);
+        color: #0c296e;
+      }
+      .more {
+        white-space: nowrap;
+      }
+    }
+  }
+  .btn {
+    border-radius: 4px;
+    padding: 5px 26px 5px 26px;
+    font-family: PingFang SC;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    letter-spacing: 0px;
+    text-align: center;
+    border: none;
+    box-sizing: border-box;
+  }
+
+  .normal {
+    color: #1f2329;
+    border: 1px solid #bbbfc4;
+    margin-left: 12px;
+  }
+
+  .foot {
+    position: absolute;
+    right: 24px;
+    bottom: 24px;
+    text-align: right;
+  }
+}
+.user-popper {
+  padding: 0;
+  background: #fff;
+  .popper__arrow {
+    display: none;
+  }
+}
+.tree-select {
+  .el-select-dropdown__empty,
+  .el-scrollbar__wrap,
+  .popper__arrow {
+    display: none !important;
+  }
+}
+
+.user-popper.dept {
+  height: 400px;
+  overflow: auto;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/system/task/form.vue b/frontend/src/views/system/task/form.vue
index 96241221a7..16f66addfb 100644
--- a/frontend/src/views/system/task/form.vue
+++ b/frontend/src/views/system/task/form.vue
@@ -1,14 +1,615 @@
 <template>
-  <div>数据同步表单</div>
+  <de-layout-content>
+    <div class="dataset-editer-form">
+      <div class="w600">
+        <el-form
+          ref="taskForm"
+          :form="taskForm"
+          :model="taskForm"
+          :disabled="disableForm"
+          label-width="100px"
+          class="de-form-item"
+          :rules="taskFormRules"
+        >
+          <el-form-item
+            @click.native="selectDataset"
+            :label="$t('chart.select_dataset')"
+            prop="datasetName"
+          >
+            <el-input
+              v-model="taskForm.datasetName"
+              size="small"
+              readonly
+              :placeholder="$t('dataset.task_name')"
+            />
+          </el-form-item>
+          <el-form-item :label="$t('dataset.task_name')" prop="name">
+            <el-input
+              v-model="taskForm.name"
+              size="small"
+              :placeholder="$t('dataset.task_name')"
+            />
+          </el-form-item>
+          <el-form-item :label="$t('dataset.update_type')" prop="type">
+            <el-radio-group v-model="taskForm.type">
+              <el-radio label="all_scope">{{
+                $t("dataset.all_scope")
+              }}</el-radio>
+              <el-radio label="add_scope">
+                {{ $t("dataset.add_scope") }}</el-radio
+              >
+            </el-radio-group>
+          </el-form-item>
+          <div class="add-scope-cont" v-if="taskForm.type === 'add_scope'">
+            <el-form-item :label="$t('dataset.incremental_update_type')">
+              <el-radio-group
+                v-model="incrementalUpdateType"
+                size="small"
+                @change="incrementalUpdateTypeChange"
+              >
+                <el-radio label="incrementalAdd">{{
+                  $t("dataset.incremental_add")
+                }}</el-radio>
+                <el-radio label="incrementalDelete">{{
+                  $t("dataset.incremental_delete")
+                }}</el-radio>
+              </el-radio-group>
+              <div class="param-title">
+                <span>{{ $t("dataset.param") }}</span>
+                <div class="param-title-btn">
+                  <el-button
+                    type="text"
+                    size="small"
+                    @click="insertParamToCodeMirror('${__last_update_time__}')"
+                    >{{ $t("dataset.last_update_time") }}</el-button
+                  >
+                  <el-button
+                    type="text"
+                    size="small"
+                    @click="
+                      insertParamToCodeMirror('${__current_update_time__}')
+                    "
+                    >{{ $t("dataset.current_update_time") }}</el-button
+                  >
+                </div>
+              </div>
+              <div class="codemirror-cont">
+                <codemirror
+                  ref="myCm"
+                  v-model="sql"
+                  class="codemirror"
+                  :options="sqlOption"
+                  @ready="onCmReady"
+                  @focus="onCmFocus"
+                  @input="onCmCodeChange"
+                />
+              </div>
+            </el-form-item>
+          </div>
+
+          <el-form-item :label="$t('dataset.execute_rate')" prop="rate">
+            <el-radio-group v-model="taskForm.rate" @change="onRateChange">
+              <el-radio label="SIMPLE">{{
+                $t("dataset.execute_once")
+              }}</el-radio>
+              <el-radio label="CRON">{{ $t("dataset.cron_config") }}</el-radio>
+              <el-radio label="SIMPLE_CRON">{{
+                $t("dataset.simple_cron")
+              }}</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <div class="execute-rate-cont" v-if="taskForm.rate !== 'SIMPLE'">
+            <el-form-item
+              v-if="taskForm.rate === 'SIMPLE_CRON'"
+              :label="$t('dataset.execute_rate')"
+              prop="rate"
+            >
+              <div class="simple-cron">
+                {{ $t("cron.every") }}
+                <el-input-number
+                  v-model="taskForm.extraData.simple_cron_value"
+                  controls-position="right"
+                  :min="1"
+                  size="small"
+                ></el-input-number>
+                <el-select
+                  v-model="taskForm.extraData.simple_cron_type"
+                  filterable
+                  size="small"
+                  @change="onSimpleCronChange()"
+                >
+                  <el-option
+                    :label="$t('分钟')"
+                    value="minute"
+                  />
+                  <el-option :label="$t('小时')" value="hour" />
+                  <el-option :label="$t('天')" value="day" />
+                </el-select>
+                {{ $t("cron.every_exec") }}
+              </div>
+            </el-form-item>
+            <el-form-item
+              prop="cron"
+              v-if="taskForm.rate === 'CRON'"
+              :label="$t('emailtask.cron_exp')"
+            >
+              <el-popover v-model="cronEdit">
+                <cron v-model="taskForm.cron" @close="cronEdit = false" />
+                <el-input
+                  slot="reference"
+                  v-model="taskForm.cron"
+                  size="small"
+                  style="width: 50%"
+                  @click="cronEdit = true"
+                />
+              </el-popover>
+            </el-form-item>
+            <el-form-item
+              v-if="taskForm.rate !== 'SIMPLE'"
+              :label="$t('dataset.start_time')"
+              prop="startTime"
+            >
+              <el-date-picker
+                v-model="taskForm.startTime"
+                type="datetime"
+                :placeholder="$t('dataset.start_time')"
+                size="small"
+              />
+            </el-form-item>
+            <el-form-item
+              v-if="taskForm.rate !== 'SIMPLE'"
+              :label="$t('dataset.end_time')"
+              prop="end"
+            >
+              <el-radio-group v-model="taskForm.end">
+                <el-radio label="0">{{ $t("dataset.no_limit") }}</el-radio>
+                <el-radio label="1"> {{ $t("dataset.set_end_time") }}</el-radio>
+              </el-radio-group>
+              <el-date-picker
+                v-if="taskForm.end === '1'"
+                v-model="taskForm.endTime"
+                type="datetime"
+                :placeholder="$t('dataset.end_time')"
+                size="small"
+              />
+            </el-form-item>
+          </div>
+        </el-form>
+        <table-selector
+          ref="tableSelector"
+          previewForTask="true"
+          privileges="manage"
+          @getTableId="getTableId"
+          :mode="1"
+          :clear-empty-dir="true"
+          :custom-type="['db', 'sql', 'api']"
+          show-mode="datasetTask"
+        />
+      </div>
+      <div class="de-foot-layout">
+      <div class="cont">
+        <deBtn secondary @click="closeTask">{{ $t("dataset.cancel") }}</deBtn>
+      <deBtn v-if="!disableForm" type="primary" @click="saveTask(taskForm)">{{
+        $t("dataset.confirm")
+      }}</deBtn>
+      </div>
+    </div>
+    </div>
+  </de-layout-content>
 </template>
 
 <script>
+import { post } from "@/api/dataset/dataset";
+import DeLayoutContent from "@/components/business/DeLayoutContent";
+import { hasDataPermission } from "@/utils/permission";
+import msgCfm from "@/components/msgCfm/index";
+
+import cron from "@/components/cron/cron";
+import { codemirror } from "vue-codemirror";
+import "codemirror/lib/codemirror.css";
+import "codemirror/theme/eclipse.css";
+import "codemirror/mode/sql/sql.js";
+import "codemirror/addon/selection/active-line.js";
+import "codemirror/addon/edit/closebrackets.js";
+import "codemirror/mode/clike/clike.js";
+import "codemirror/addon/edit/matchbrackets.js";
+import "codemirror/addon/comment/comment.js";
+import "codemirror/addon/dialog/dialog.js";
+import "codemirror/addon/dialog/dialog.css";
+import "codemirror/addon/search/searchcursor.js";
+import "codemirror/addon/search/search.js";
+import "codemirror/keymap/emacs.js";
+import "codemirror/addon/hint/show-hint.css";
+import "codemirror/addon/hint/sql-hint";
+import "codemirror/addon/hint/show-hint";
+import TableSelector from "./TableSelector";
+
 export default {
-  name: 'AppearanceSetting',
+  components: { cron, codemirror, TableSelector, DeLayoutContent },
+  mixins: [msgCfm],
   data() {
     return {
+      disableForm: false,
+      table: {
+        name: "",
+        id: "",
+      },
+      taskForm: {
+        name: "",
+        type: "all_scope",
+        startTime: "",
+        tableId: "",
+        rate: "SIMPLE",
+        cron: "",
+        endTime: "",
+        end: "0",
+        extraData: {
+          simple_cron_type: "hour",
+          simple_cron_value: 1,
+        },
+      },
+      taskFormRules: {
+        name: [
+          {
+            required: true,
+            message: this.$t("dataset.required"),
+            trigger: "change",
+          },
+          {
+            min: 2,
+            max: 50,
+            message: this.$t("datasource.input_limit_2_50", [2, 50]),
+            trigger: "blur",
+          },
+        ],
+        type: [
+          {
+            required: true,
+            message: this.$t("dataset.required"),
+            trigger: "change",
+          },
+        ],
+        startTime: [
+          {
+            required: true,
+            message: this.$t("dataset.required"),
+            trigger: "change",
+          },
+        ],
+        rate: [
+          {
+            required: true,
+            message: this.$t("dataset.required"),
+            trigger: "change",
+          },
+        ],
+        end: [
+          {
+            required: true,
+            message: this.$t("dataset.required"),
+            trigger: "change",
+          },
+        ],
+        cron: [
+          {
+            required: true,
+            message: this.$t("dataset.required"),
+            trigger: "change",
+          },
+        ],
+        datasetName: [
+          {
+            required: true,
+            trigger: "change",
+          },
+        ],
+      },
+      cronEdit: false,
+      sqlOption: {
+        tabSize: 2,
+        styleActiveLine: true,
+        lineNumbers: true,
+        line: true,
+        mode: "text/x-sql",
+        theme: "eclipse",
+        hintOptions: {
+          // 自定义提示选项
+          completeSingle: false, // 当匹配只有一项的时候是否自动补全
+        },
+      },
+      incrementalConfig: {},
+      sql: "",
+      incrementalUpdateType: "incrementalAdd",
+    };
+  },
+  created() {
+    const { datasetName, id } = this.$route.query;
+    this.taskDetail = { datasetName, id };
+    if (!id) return;
+    this.getTaskDetail(id);
+  },
+  methods: {
+    getTaskDetail(id) {
+      post(`/dataset/task/detail/${id}`, {}).then((res) => {
+        if(res.data.extraData) {
+          res.data.extraData = JSON.parse(res.data.extraData)
+        }
+        this.taskForm = res.data;
+        this.disableForm = this.disableEdit();
+      });
+    },
+    selectDataset() {
+      if (this.taskForm.id) return;
+      this.$refs.tableSelector.init();
+    },
+    getTableId(id, name) {
+      this.taskForm.tableId = id;
+      this.taskForm.datasetName = name;
+    },
+    onRateChange() {
+      if (this.taskForm.rate === "SIMPLE") {
+        this.taskForm.end = "0";
+        this.taskForm.endTime = "";
+        this.taskForm.cron = "";
+      }
+      if (this.taskForm.rate === "SIMPLE_CRON") {
+        this.taskForm.cron = "0 0 0/1 *  * ? *";
+      }
+      if (this.taskForm.rate === "CRON") {
+        this.taskForm.cron = "00 00 * ? * * *";
+      }
+    },
+    disableEdit() {
+      const { privileges, rate, status } = this.taskForm;
+      return (
+        rate === "SIMPLE" ||
+        status === "Stopped" ||
+        !hasDataPermission("manage", privileges)
+      );
+    },
+    onCmReady(cm) {
+      //   this.codemirror.setSize("-webkit-fill-available", "auto");
+    },
+    onCmFocus(cm) {},
+    onCmCodeChange(newCode) {
+      this.sql = newCode;
+      this.$emit("codeChange", this.sql);
+    },
+    closeTask() {
+      this.$router.back();
+    },
+    onSimpleCronChange() {
+      if (this.taskForm.extraData.simple_cron_type === "minute") {
+        if (
+          this.taskForm.extraData.simple_cron_value < 1 ||
+          this.taskForm.extraData.simple_cron_value > 59
+        ) {
+          this.$message({
+            message: this.$t("cron.minute_limit"),
+            type: "warning",
+            showClose: true,
+          });
+          this.taskForm.extraData.simple_cron_value = 59;
+        }
+        this.taskForm.cron =
+          "0 0/" + this.taskForm.extraData.simple_cron_value + " * * * ? *";
+        return;
+      }
+      if (this.taskForm.extraData.simple_cron_type === "hour") {
+        if (
+          this.taskForm.extraData.simple_cron_value < 1 ||
+          this.taskForm.extraData.simple_cron_value > 23
+        ) {
+          this.$message({
+            message: this.$t("cron.hour_limit"),
+            type: "warning",
+            showClose: true,
+          });
+          this.taskForm.extraData.simple_cron_value = 23;
+        }
+        this.taskForm.cron =
+          "0 0 0/" + this.taskForm.extraData.simple_cron_value + " * * ? *";
+        return;
+      }
+      if (this.taskForm.extraData.simple_cron_type === "day") {
+        if (
+          this.taskForm.extraData.simple_cron_value < 1 ||
+          this.taskForm.extraData.simple_cron_value > 31
+        ) {
+          this.$message({
+            message: this.$t("cron.day_limit"),
+            type: "warning",
+            showClose: true,
+          });
+          this.taskForm.extraData.simple_cron_value = 31;
+        }
+        this.taskForm.cron =
+          "0 0 0 1/" + this.taskForm.extraData.simple_cron_value + " * ? *";
+        return;
+      }
+    },
+    insertParamToCodeMirror(param) {
+      const pos1 = this.$refs.myCm.codemirror.getCursor();
+      const pos2 = {};
+      pos2.line = pos1.line;
+      pos2.ch = pos1.ch;
+      this.$refs.myCm.codemirror.replaceRange(param, pos2);
+    },
+    saveTask(task) {
+      this.$refs.taskForm.validate((valid) => {
+        if (valid) {
+          if (task.rate !== "SIMPLE") {
+            if (this.incrementalUpdateType === "incrementalAdd") {
+              this.incrementalConfig.incrementalAdd = this.sql;
+            } else {
+              this.incrementalConfig.incrementalDelete = this.sql;
+            }
+            this.incrementalConfig.tableId = task.tableId;
+          }
+          task.startTime = new Date(task.startTime).getTime();
+          task.endTime = new Date(task.endTime).getTime();
+          const form = JSON.parse(JSON.stringify(task));
+          form.extraData = JSON.stringify(form.extraData);
+          const dataSetTaskRequest = {
+            datasetTableTask: form,
+            datasetTableIncrementalConfig:
+              task.type === "add_scope" ? this.incrementalConfig : undefined,
+          };
+          post("/dataset/task/save", dataSetTaskRequest).then((response) => {
+            this.openMessageSuccess("dataset.save_success");
+            this.closeTask();
+          });
+        } else {
+          return false;
+        }
+      });
+    },
+    getIncrementalConfig(tableId) {
+      post("/dataset/table/incrementalConfig", { tableId: tableId }).then(
+        (response) => {
+          this.incrementalConfig = response.data;
 
+          if (
+            this.incrementalConfig.incrementalAdd.length === 0 &&
+            this.incrementalConfig.incrementalDelete.length === 0
+          ) {
+            this.incrementalUpdateType = "incrementalAdd";
+            this.sql = "";
+            return;
+          }
+          if (this.incrementalConfig.incrementalAdd.length > 0) {
+            this.incrementalUpdateType = "incrementalAdd";
+            this.sql = this.incrementalConfig.incrementalAdd;
+          } else {
+            this.incrementalUpdateType = "incrementalDelete";
+            this.sql = this.incrementalConfig.incrementalDelete;
+          }
+        }
+      );
+    },
+    incrementalUpdateTypeChange: function () {
+      if (this.incrementalUpdateType === "incrementalAdd") {
+        if (this.sql) {
+          this.incrementalConfig.incrementalDelete = this.sql;
+        } else {
+          this.incrementalConfig.incrementalDelete = "";
+        }
+        if (this.incrementalConfig.incrementalAdd) {
+          this.sql = this.incrementalConfig.incrementalAdd;
+        } else {
+          this.sql = "";
+        }
+      }
+
+      if (this.incrementalUpdateType === "incrementalDelete") {
+        if (this.sql) {
+          this.incrementalConfig.incrementalAdd = this.sql;
+        } else {
+          this.incrementalConfig.incrementalAdd = "";
+        }
+        if (this.incrementalConfig.incrementalDelete) {
+          this.sql = this.incrementalConfig.incrementalDelete;
+        } else {
+          this.sql = "";
+        }
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.dataset-editer-form {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .w600 {
+    width: 600px;
+    padding-top: 24px;
+    padding-bottom: 24px;
+    .el-radio:not(:last-child) {
+      margin-right: 0;
+      width: 156px;
+    }
+
+    .simple-cron {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      .el-input-number,
+      .el-select {
+        width: 140px;
+        margin-left: 8px;
+      }
+
+      .el-select {
+        margin-right: 8px;
+      }
+    }
+
+    .execute-rate-cont {
+      box-sizing: border-box;
+      padding: 20px;
+      width: 100%;
+      background: #f5f6f7;
+      border-radius: 4px;
+
+      .el-input__inner {
+        background: #ffffff !important;
+      }
+
+      .el-date-editor {
+        width: 100%;
+      }
+    }
+
+    .add-scope-cont {
+      height: 350px;
+      width: 100%;
+      border-radius: 4px;
+      padding: 20px;
+
+      .param-title {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding-bottom: 9px;
+        &:nth-child(1) {
+          font-family: PingFang SC;
+          font-size: 14px;
+          font-weight: 400;
+          color: var(--deTextPrimary, #1f2329);
+        }
+      }
+
+      .codemirror-cont {
+        box-sizing: border-box;
+        width: 560px;
+        height: 200px;
+        background: #ffffff;
+        border: 1px solid #bbbfc4;
+        border-radius: 4px;
+        overflow: auto;
+      }
     }
   }
 }
-</script>
+.de-foot-layout {
+  position: absolute;
+  width: calc(100% - 48px);
+  height: 80px;
+  bottom: 0;
+  right: 24px;
+  background: #ffffff;
+  box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.08);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 10;
+  .cont {
+    width: 600px;
+    text-align: right;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/system/task/options.js b/frontend/src/views/system/task/options.js
new file mode 100644
index 0000000000..753031ef95
--- /dev/null
+++ b/frontend/src/views/system/task/options.js
@@ -0,0 +1,80 @@
+const filterDatasetRecord = {
+    name: 'dataset.task.last_exec_status',
+    type: 'dataset_table_task.last_exec_status',
+    activeType: 'execStatus',
+    list: [{
+        name: 'xpacktask.success',
+        value: 'Completed',
+    }, {
+        name: 'dataset.task.exec',
+        value: 'Underway',
+    },
+    {
+        name: 'xpacktask.error',
+        value: 'Error',
+    }]
+}
+const filterDataset = [{
+    name: 'dataset.execute_rate',
+    type: 'dataset_table_task.rate',
+    activeType: 'rate',
+    list: [{
+        name: 'dataset.execute_once',
+        value: 'SIMPLE',
+    }, {
+        name: 'dataset.cron_config',
+        value: 'CRON',
+    },
+    {
+        name: 'dataset.simple_cron',
+        value: 'SIMPLE_CRON',
+    }]
+}, {
+    name: 'dataset.task.task_status',
+    type: 'dataset_table_task.status',
+    activeType: 'status',
+    list: [{
+        name: 'dataset.task.underway',
+        value: 'Underway',
+    }, {
+        name: 'dataset.task.exec',
+        value: 'Exec',
+    },
+    {
+        name: 'dataset.task.pending',
+        value: 'Pending',
+    }, {
+        name: 'dataset.task.stopped',
+        value: 'Stopped',
+    }]
+}, {
+    ...filterDatasetRecord
+}]
+
+
+// 入参 fmt-格式 date-日期
+function dateFormat(fmt, date) {
+    let ret;
+    const opt = {
+        "Y+": date.getFullYear().toString(),        // 年
+        "m+": (date.getMonth() + 1).toString(),     // 月
+        "d+": date.getDate().toString(),            // 日
+        "H+": date.getHours().toString(),           // 时
+        "M+": date.getMinutes().toString(),         // 分
+        "S+": date.getSeconds().toString()          // 秒
+        // 有其他格式化字符需求可以继续添加，必须转化成字符串
+    };
+    for (let k in opt) {
+        ret = new RegExp("(" + k + ")").exec(fmt);
+        if (ret) {
+            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
+        };
+    };
+    return fmt;
+}
+
+export {
+    filterDataset,
+    dateFormat,
+    filterDatasetRecord
+}
\ No newline at end of file
diff --git a/frontend/src/views/system/user/index.vue b/frontend/src/views/system/user/index.vue
index ac7e3a3e5f..105a40996e 100644
--- a/frontend/src/views/system/user/index.vue
+++ b/frontend/src/views/system/user/index.vue
@@ -861,72 +861,4 @@ export default {
   }
 }
 </style>
-<style lang="scss">
-.de-confirm {
-  border: none;
-  .el-message-box__header {
-    display: none;
-  }
 
-  .el-message-box__content {
-    padding: 24px;
-  }
-
-  .el-message-box__container {
-    display: flex;
-    align-items: center;
-  }
-  .el-message-box__status {
-    height: 22px;
-    width: 22px;
-    font-size: 22px !important;
-    margin-right: 17px;
-  }
-
-  .el-message-box__message {
-    //styleName: 中文/桌面端/四级标题 16 24 Medium;
-    font-family: PingFang SC;
-    font-size: 16px;
-    font-weight: 500;
-    line-height: 24px;
-    letter-spacing: 0px;
-    text-align: left;
-    color: #1f2329;
-  }
-
-  .el-message-box__btns {
-    padding: 0;
-  }
-
-  .de-confirm-fail-btn {
-    height: 32px;
-    width: 80px;
-    border-radius: 4px;
-    font-family: PingFang SC;
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 22px;
-    text-align: center;
-    padding: 0;
-  }
-
-  .de-confirm-fail-cancel {
-    background: #ffffff;
-    border: 1px solid #bbbfc4;
-    color: #1f2329;
-  }
-
-  .de-confirm-fail-confirm {
-    background: #f54a45;
-    border: none;
-    color: #ffffff;
-  }
-}
-
-.de-confirm-fail {
-  padding: 0 24px 24px 0 !important;
-  .el-message-box__status {
-    color: #ff8800 !important;
-  }
-}
-</style>