From 8c025e4ed31a7d39b60cd69e2acf2a1c17b17eb9 Mon Sep 17 00:00:00 2001
From: Luo Fan <44999219+fannluo@users.noreply.github.com>
Date: Sun, 14 Apr 2019 18:08:43 +0800
Subject: [PATCH] =?UTF-8?q?feature:=20=E6=B5=81=E7=A8=8B=E6=A8=A1=E7=89=88?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=A2=9E=E5=8A=A0=E6=96=B0=E5=BB=BA=E4=BB=BB?=
 =?UTF-8?q?=E5=8A=A1=E6=8C=89=E9=92=AE=EF=BC=9B=E8=81=8C=E8=83=BD=E5=8C=96?=
 =?UTF-8?q?=E4=B8=AD=E5=BF=83=E5=88=97=E8=A1=A8=E3=80=81=E5=AE=A1=E8=AE=A1?=
 =?UTF-8?q?=E4=B8=AD=E5=BF=83=E5=88=97=E8=A1=A8=E5=A2=9E=E5=8A=A0=E9=AB=98?=
 =?UTF-8?q?=E7=BA=A7=E6=90=9C=E7=B4=A2=E5=8A=9F=E8=83=BD=20#123=20#125=20(?=
 =?UTF-8?q?#124)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feature: 流程模版编辑增加新建任务按钮

* feature:职能化中心列表、审计中心列表增加高级搜索功能 #125
---
 .../common/PipelineCanvas/ConfigBar.vue       |  44 +--
 .../common/PipelineCanvas/index.vue           |  55 ++--
 pipeline/blueflow/src/pages/audit/index.vue   | 187 ++++++++++-
 pipeline/blueflow/src/pages/functor/index.vue | 292 +++++++++++++++---
 .../src/pages/template/TemplateEdit/index.vue |  32 +-
 5 files changed, 498 insertions(+), 112 deletions(-)

diff --git a/pipeline/blueflow/src/components/common/PipelineCanvas/ConfigBar.vue b/pipeline/blueflow/src/components/common/PipelineCanvas/ConfigBar.vue
index f53dead9cc..d917561135 100644
--- a/pipeline/blueflow/src/components/common/PipelineCanvas/ConfigBar.vue
+++ b/pipeline/blueflow/src/components/common/PipelineCanvas/ConfigBar.vue
@@ -42,7 +42,7 @@
                 type="primary"
                 class="save-canvas"
                 :loading="templateSaving"
-                @click="onSaveTemplate">
+                @click="onSaveTemplate(false)">
                 {{ i18n.save }}
             </bk-button>
             <bk-button
@@ -50,7 +50,7 @@
                 class="task-btn"
                 :loading="createTaskSaving"
                 @click="onSaveTemplate(true)">
-                {{ isSaveAndCreate ? i18n.saveTplAndcreateTask : i18n.addTask }}
+                {{ isTemplateDataChanged ? i18n.saveTplAndcreateTask : i18n.addTask }}
             </bk-button>
             <router-link class="bk-button bk-button-default" :to="getHomeUrl()">{{ i18n.return }}</router-link>
         </div>
@@ -59,6 +59,7 @@
 <script>
 import '@/utils/i18n.js'
 import { Validator } from 'vee-validate'
+import { mapMutations } from 'vuex'
 import { NAME_REG, STRING_LENGTH } from '@/constants/index.js'
 import BaseInput from '@/components/common/base/BaseInput.vue'
 
@@ -67,16 +68,15 @@ export default {
     components: {
         BaseInput
     },
-    props: [
-        'name', 'cc_id', 'template_id', 'common', 'type',
-        'templateSaving', 'createTaskSaving', 'isTemplateDataChanged'
-    ],
+    props: ['name', 'cc_id', 'template_id', 'common', 'templateSaving', 'createTaskSaving', 'isTemplateDataChanged'],
     data () {
         return {
             i18n: {
                 placeholder: gettext('请输入名称'),
                 NewProcess: gettext('新建流程'),
                 editProcess: gettext('编辑流程'),
+                addTask: gettext('新建任务'),
+                saveTplAndcreateTask: gettext('保存并新建任务'),
                 save: gettext("保存"),
                 return: gettext("返回")
             },
@@ -97,24 +97,26 @@ export default {
     computed: {
         templateTitle () {
             return this.$route.query.template_id === undefined ? this.i18n.NewProcess : this.i18n.editProcess
-        },
-        isSaveAndCreate () {
-            return this.type === 'new' || this.isTemplateDataChanged
         }
     },
     methods: {
+        ...mapMutations('template/', [
+            'setTemplateName'
+        ]),
         onInputName (val) {
             this.$emit('onChangeName', val)
         },
-        onSaveTemplate (saveCreateBtn = false) {
-            if (saveCreateBtn && !this.isSaveAndCreate) {
-                this.$router.push(this.getTaskUrl())
-                return
-            }
+        onSaveTemplate (saveAndCreate = false) {
             this.$validator.validateAll().then((result) => {
+                if (!result) return
                 this.tName = this.tName.trim()
                 this.setTemplateName(this.tName)
-                this.$emit('onSaveTemplate', saveCreateBtn)
+                if (saveAndCreate && !this.isTemplateDataChanged) {
+                    const taskUrl = this.getTaskUrl()
+                    this.$router.push(taskUrl)
+                } else {
+                    this.$emit('onSaveTemplate', saveAndCreate)
+                }
             })
         },
         getHomeUrl () {
@@ -152,6 +154,7 @@ export default {
 <style lang="scss" scoped>
 @import '@/scss/config.scss';
 .config-wrapper {
+    position: relative;
     height: 60px;
     background: #f4f7fa;
     border-bottom: 1px solid $commonBorderColor;
@@ -223,8 +226,9 @@ export default {
         }
     }
     .canvas-operation-wrapper {
-        float: right;
-        margin: 14px 20px 0 0;
+        position: absolute;
+        top: 14px;
+        right: 20px;
         .save-canvas {
             width: 90px;
             height: 32px;
@@ -237,7 +241,11 @@ export default {
             line-height: 32px;
             margin-left: 10px;
         }
+        .bk-button.bk-primary {
+            height: 32px;
+            line-height: 32px;
+            margin-left: 10px;
+        }
     }
 }
 </style>
-
diff --git a/pipeline/blueflow/src/components/common/PipelineCanvas/index.vue b/pipeline/blueflow/src/components/common/PipelineCanvas/index.vue
index f2da429299..6d094cd432 100644
--- a/pipeline/blueflow/src/components/common/PipelineCanvas/index.vue
+++ b/pipeline/blueflow/src/components/common/PipelineCanvas/index.vue
@@ -20,9 +20,9 @@
             :cc_id="cc_id"
             :common="common"
             :template_id="template_id"
-            :type="type"
             :isTemplateDataChanged="isTemplateDataChanged"
             :templateSaving="templateSaving"
+            :createTaskSaving="createTaskSaving"
             @onChangeName="onChangeName"
             @onSaveTemplate="onSaveTemplate">
         </ConfigBar>
@@ -132,30 +132,20 @@ export default {
             type: Boolean
         },
         subAtomListLoading: {
-            type: Boolean,
-            default: true
-        },
-        type: {
-            type: String,
-            default: ''
+            type: Boolean
         },
         templateSaving: {
-            type: Boolean,
-            default: false
+            type: Boolean
         },
         createTaskSaving: {
-            type: Boolean,
-            default: false
+            type: Boolean
         },
         atomTypeList: {
             type: Object,
             required: false
         },
         searchAtomResult: {
-            type: Array,
-            default () {
-                return []
-            }
+            type: Array
         },
         canvasData: {
             type: Object,
@@ -174,37 +164,32 @@ export default {
             type: String,
             required: false
         },
+        template_id: {
+            type: String,
+            required: false
+        },
         common: {
             type: String,
             required: false
         },
+        isTemplateDataChanged: {
+            type: Boolean
+        },
         isSelectNode: {
             type: Boolean,
-            required: false,
-            default () {
-                return false
-            }
+            default: false
         },
         selectNodeType: {
             type: Boolean,
-            required: false,
-            default () {
-                return false
-            }
+            default: false
         },
         isPreviewMode: {
             type: Boolean,
-            required: false,
-            default () {
-                return false
-            }
+            default: false
         },
         isSelectAllNode: {
             type: Boolean,
-            required: false,
-            default () {
-                return false
-            }
+            default: false
         }
     },
     components: {
@@ -224,7 +209,7 @@ export default {
                 choiceAll: gettext('全选'),
                 cancelChoiceAll: gettext('反选'),
                 added: gettext('已添加'),
-                node: gettext('个节点')
+                node: gettext('个任务节点')
             },
             zoomRadio: 1,
             nodeTypeUniqueInCanvas: ['startpoint', 'endpoint'],
@@ -538,7 +523,7 @@ export default {
         onChangeName (name) {
             this.$emit('onChangeName', name)
         },
-        onSaveTemplate (saveCreateBtn) {
+        onSaveTemplate (saveAndCreate) {
             const validateMessage = validatePipeline.isDataValid(this.canvasData)
             if (!validateMessage.result) {
                 this.$bkMessage({
@@ -547,7 +532,7 @@ export default {
                 })
                 return false
             }
-            this.$emit('onSaveTemplate', saveCreateBtn)
+            this.$emit('onSaveTemplate', saveAndCreate)
         },
         onNewDraft (message) {
             this.$emit('onNewDraft', message)
@@ -697,5 +682,3 @@ export default {
     }
 }
 </style>
-
-
diff --git a/pipeline/blueflow/src/pages/audit/index.vue b/pipeline/blueflow/src/pages/audit/index.vue
index 4bd1c69e6a..a84be3f7e8 100644
--- a/pipeline/blueflow/src/pages/audit/index.vue
+++ b/pipeline/blueflow/src/pages/audit/index.vue
@@ -13,8 +13,81 @@
     <div class="audit-container">
         <div class="list-wrapper">
             <BaseTitle :title="i18n.auditList"></BaseTitle>
-            <div class="operation-area">
-                <input class="search-input" :placeholder="i18n.placeholder" v-model="searchStr" @input="onSearchInput" />
+            <BaseSearch
+                v-model="searchStr"
+                :inputPlaceholader="i18n.placeholder"
+                @onShow="onAdvanceShow"
+                @input="onSearchInput">
+            </BaseSearch>
+            <div class="audit-search" v-show="isAdvancedSerachShow">
+                <fieldset class="audit-fieldset">
+                    <div class="audit-query-content">
+                        <div class="query-content">
+                            <span class="query-span">{{i18n.business}}</span>
+                            <bk-selector
+                                :list="business.list"
+                                :display-key="'cc_name'"
+                                :setting-name="'cc_id'"
+                                :search-key="'cc_name'"
+                                :setting-key="'cc_id'"
+                                :selected.sync="selectedCcId"
+                                :placeholder="i18n.choice"
+                                :searchable="true"
+                                :allow-clear="true"
+                                @item-selected="onSelectedBizCcId">
+                            </bk-selector>
+                        </div>
+                        <div class="query-content">
+                            <span class="query-span">{{i18n.startedTime}}</span>
+                            <bk-date-range
+                                :range-separator="'-'"
+                                :quick-select="false"
+                                :start-date.sync="executeStartTime"
+                                :end-date.sync="executeEndTime"
+                                @change="onChangeExecuteTime">
+                            </bk-date-range>
+                        </div>
+                        <div class="query-content">
+                            <span class="query-span">{{i18n.taskType}}</span>
+                            <bk-selector
+                                :placeholder="i18n.taskTypePlaceholder"
+                                :is-loading="taskBasicInfoLoading"
+                                :list="taskCategory"
+                                :selected.sync="taskSync"
+                                :setting-key="'value'"
+                                :display-key="'name'"
+                                :searchable="true"
+                                :allow-clear="true"
+                                @clear="onClearCategory"
+                                @item-selected="onSelectedCategory">
+                            </bk-selector>
+                        </div>
+                        <div class="query-content">
+                            <span class="query-span">{{i18n.creator}}</span>
+                            <input class="search-input" v-model="creator" :placeholder="i18n.creatorPlaceholder"/>
+                        </div>
+                        <div class="query-content">
+                            <span class="query-span">{{i18n.operator}}</span>
+                            <input class="search-input" v-model="executor" :placeholder="i18n.executorPlaceholder"/>
+                        </div>
+                        <div class="query-content">
+                            <span class="query-span">{{i18n.status}}</span>
+                            <bk-selector
+                                :placeholder="i18n.statusPlaceholder"
+                                :list="statusList"
+                                :selected.sync="statusSync"
+                                :allow-clear="true"
+                                :searchable="true"
+                                @clear="onClearStatus"
+                                @item-selected="onSelectedStatus">
+                            </bk-selector>
+                        </div>
+                        <div class="query-button">
+                            <bk-button class="query-primary" type="primary" @click="loadFunctionTask">{{i18n.query}}</bk-button>
+                            <bk-button class="query-cancel" @click="onResetForm">{{i18n.reset}}</bk-button>
+                        </div>
+                    </div>
+                </fieldset>
             </div>
             <div class="audit-table-content">
                 <table v-bkloading="{isLoading: listLoading, opacity: 1}">
@@ -91,6 +164,8 @@ import NoData from '@/components/common/base/NoData.vue'
 import BaseTitle from '@/components/common/base/BaseTitle.vue'
 import BaseSearch from '@/components/common/base/BaseSearch.vue'
 import toolsUtils from '@/utils/tools.js'
+import moment from 'moment-timezone'
+
 export default {
     name: 'auditTaskHome',
     components: {
@@ -133,12 +208,14 @@ export default {
             listLoading: true,
             isAdvancedSerachShow: false,
             currentPage: 1,
+            selectedCcId: -1,
             totalPage: 1,
             countPerPage: 15,
             totalCount: 0,
             taskSync: 0,
             statusSync: 0,
             searchStr: '',
+            bizCcId: undefined,
             creator: undefined,
             executor: undefined,
             activeTaskCategory: undefined,
@@ -146,32 +223,64 @@ export default {
             executeEndTime: undefined,
             isStarted: undefined,
             isFinished: undefined,
+            business: {
+                list: [],
+                loading: false,
+                id: null,
+                searchable: true,
+                empty: false
+            },
             auditList: [],
-            statusList: [],
             taskCategory: [],
+            statusList: [
+                {'id': 'nonExecution', 'name': gettext('未执行')},
+                {'id': 'runing', 'name': gettext('未完成')},
+                {'id': 'finished', 'name': gettext('完成')}
+            ],
             executeStatus: [] // 任务执行态
         }
     },
-    computed: {
-    },
     created () {
         this.loadFunctionTask()
         this.onSearchInput = toolsUtils.debounce(this.searchInputhandler, 500)
+        this.getBusinessList()
+        this.getBusinessBaseInfo()
     },
     methods: {
         ...mapActions('auditTask/', [
             'loadAuditTaskList'
         ]),
+        ...mapActions('functionTask/', [
+            'loadFunctionBusinessList'
+        ]),
         ...mapActions('task/', [
             'getInstanceStatus'
         ]),
+        ...mapActions('template/', [
+            'loadBusinessBaseInfo'
+        ]),
         async loadFunctionTask () {
             this.listLoading = true
             try {
                 const data = {
                     limit: this.countPerPage,
                     offset: (this.currentPage - 1) * this.countPerPage,
-                    q: this.searchStr
+                    business__cc_id: this.bizCcId,
+                    category: this.activeTaskCategory,
+                    audit__pipeline_instance__name__contains: this.searchStr,
+                    pipeline_instance__is_started: this.isStarted,
+                    pipeline_instance__is_finished: this.isFinished,
+                    pipeline_instance__creator__contains: this.creator,
+                    pipeline_instance__executor__contains: this.executor
+                }
+                if (this.executeEndTime) {
+                    if (this.common) {
+                        data['pipeline_template__start_time__gte'] = moment(this.executeStartTime).format('YYYY-MM-DD')
+                        data['pipeline_template__start_time__lte'] = moment(this.executeEndTime).add('1','d').format('YYYY-MM-DD')
+                    } else {
+                        data['pipeline_instance__start_time__gte'] = moment.tz(this.executeStartTime, this.businessTimezone).format('YYYY-MM-DD')
+                        data['pipeline_instance__start_time__lte'] = moment.tz(this.executeEndTime, this.businessTimezone).add('1','d').format('YYYY-MM-DD')
+                    }
                 }
                 const auditListData = await this.loadAuditTaskList(data)
                 const list = auditListData.objects
@@ -254,6 +363,28 @@ export default {
                 errorHandler(e, this)
             }
         },
+        async getBusinessList () {
+            this.business.loading = true
+            try {
+                let businessData = await this.loadFunctionBusinessList()
+                this.business.list = businessData.objects
+            } catch (e) {
+                errorHandler(e, this)
+            } finally {
+                this.business.loading = false
+            }
+        },
+        async getBusinessBaseInfo () {
+            this.taskBasicInfoLoading = true
+            try {
+                const data = await this.loadBusinessBaseInfo()
+                this.taskCategory = data.task_categories
+            } catch (e) {
+                errorHandler(e, this)
+            } finally {
+                this.taskBasicInfoLoading = false
+            }
+        },
         onAdvanceShow () {
             this.isAdvancedSerachShow = !this.isAdvancedSerachShow
         },
@@ -265,8 +396,35 @@ export default {
         onClearCategory (){
             this.activeTaskCategory = undefined
         },
-        onSelectedCategory () {
+        onSelectedCategory (name, value) {
             this.activeTaskCategory = name
+        },
+        onResetForm () {
+            this.isStarted = undefined
+            this.isFinished = undefined
+            this.creator = undefined
+            this.executor = undefined
+            this.searchStr = undefined
+            this.statusSync = 0
+            this.selectedCcId = 0
+            this.taskSync = 0
+            this.activeTaskCategory = undefined
+            this.executeStartTime = undefined
+            this.executeEndTime = undefined
+        },
+        onSelectedStatus (id, name) {
+            this.isStarted = id !== 'nonExecution'
+            this.isFinished = id === 'finished'
+        },
+        onClearStatus () {
+            this.isStarted = undefined
+            this.isFinished = undefined
+        },
+        onSelectedBizCcId (name, value) {
+            if (this.bizCcId === name) {
+                return
+            }
+            this.bizCcId = name
         }
     }
 }
@@ -399,6 +557,21 @@ export default {
                 width: 260px;
             }
         }
+        .query-button {
+            padding: 10px;
+            min-width: 450px;
+            @media screen and (max-width: 1420px) {
+                min-width: 390px;
+            }
+            text-align: center;
+            .query-cancel {
+                margin-left: 5px;
+            }
+            .bk-button {
+                height: 32px;
+                line-height: 32px;
+            }
+        }
     }
 }
 .common-icon-dark-circle-pause {
diff --git a/pipeline/blueflow/src/pages/functor/index.vue b/pipeline/blueflow/src/pages/functor/index.vue
index 31e64eec73..35f4fca166 100644
--- a/pipeline/blueflow/src/pages/functor/index.vue
+++ b/pipeline/blueflow/src/pages/functor/index.vue
@@ -12,12 +12,63 @@
 <template>
     <div class="functor-container">
         <div class="list-wrapper">
-            <div class="operation-area clearfix">
-                <bk-button :type="'primary'" @click="onNewTask">{{i18n.new}}</bk-button>
-                <div class="functor-search">
-                    <input class="search-input" :placeholder="i18n.placeholder" v-model="searchStr" @input="onSearchInput"/>
-                    <i class="common-icon-search"></i>
-                </div>
+            <BaseTitle :title="i18n.functorList"></BaseTitle>
+            <BaseSearch
+                v-model="searchStr"
+                :inputPlaceholader="i18n.placeholder"
+                @onShow="onAdvanceShow"
+                @input="onSearchInput">
+            </BaseSearch>
+            <div class="functor-search" v-show="isAdvancedSerachShow">
+                <fieldset class="functor-fieldset">
+                    <div class="functor-query-content">
+                        <div class="query-content">
+                            <span class="query-span">{{i18n.ownBusiness}}</span>
+                            <bk-selector
+                                :list="business.list"
+                                :display-key="'cc_name'"
+                                :setting-name="'cc_id'"
+                                :search-key="'cc_name'"
+                                :setting-key="'cc_id'"
+                                :selected.sync="selectedCcId"
+                                :placeholder="i18n.choice"
+                                :searchable="true"
+                                :allow-clear="true"
+                                @item-selected="onSelectedBizCcId">
+                            </bk-selector>
+                        </div>
+                        <div class="query-content">
+                            <span class="query-span">{{i18n.billTime}}</span>
+                            <bk-date-range
+                                :range-separator="'-'"
+                                :quick-select="false"
+                                :start-date.sync="executeStartTime"
+                                :end-date.sync="executeEndTime"
+                                @change="onChangeExecuteTime">
+                            </bk-date-range>
+                        </div>
+                        <div class="query-content">
+                            <span class="query-span">{{i18n.creator}}</span>
+                            <input class="search-input" v-model="creator" :placeholder="i18n.creatorPlaceholder"/>
+                        </div>
+                        <div class="query-content">
+                            <span class="query-span">{{i18n.status}}</span>
+                            <bk-selector
+                                :placeholder="i18n.statusPlaceholder"
+                                :list="statusList"
+                                :selected.sync="statusSync"
+                                :allow-clear="true"
+                                :searchable="true"
+                                @clear="onClearStatus"
+                                @item-selected="onSelectedStatus">
+                            </bk-selector>
+                        </div>
+                        <div class="query-button">
+                            <bk-button class="query-primary" type="primary" @click="loadFunctionTask">{{i18n.query}}</bk-button>
+                            <bk-button class="query-cancel" @click="onResetForm">{{i18n.reset}}</bk-button>
+                        </div>
+                    </div>
+                </fieldset>
             </div>
             <div class="functor-table-content">
                 <table v-bkloading="{isLoading: listLoading, opacity: 1}">
@@ -110,7 +161,7 @@
                             :search-key="'cc_name'"
                             :is-loading="business.loading"
                             :searchable="business.searchable"
-                            @item-selected="onSelectedBusiness"
+                            @item-selected="onSelectedBizCcId"
                             @clear="onClearBusiness">
                         </bk-selector>
                         <span v-show="business.empty" class="common-error-tip error-msg">{{i18n.choiceBusiness}}</span>
@@ -135,7 +186,7 @@
                         <bk-tooltip placement="left" width="400" class="template-tooltip">
                             <i class="bk-icon icon-info-circle"></i>
                             <div slot="content" style="white-space: normal;">
-                                <div class="">{{i18n.tips}}</div>
+                                <div>{{i18n.tips}}</div>
                             </div>
                         </bk-tooltip>
                         <span v-show="template.empty" class="common-error-tip error-msg">{{i18n.choiceTemplate}}</span>
@@ -147,28 +198,37 @@
 </template>
 <script>
 import '@/utils/i18n.js'
-import { mapActions, mapMutations } from 'vuex'
+import { mapActions, mapMutations, mapState } from 'vuex'
 import { errorHandler } from '@/utils/errorHandler.js'
 import CopyrightFooter from '@/components/layout/CopyrightFooter.vue'
 import NoData from '@/components/common/base/NoData.vue'
+import BaseTitle from '@/components/common/base/BaseTitle.vue'
 import BaseSearch from '@/components/common/base/BaseSearch.vue'
 import toolsUtils from '@/utils/tools.js'
+import moment from 'moment-timezone'
+
 export default {
     name: 'functorTaskHome',
     components: {
         CopyrightFooter,
         BaseSearch,
+        BaseTitle,
         NoData
     },
     props: ['cc_id', 'app_id'],
     data () {
         return {
             i18n: {
+                functorList: gettext('职能化中心'),
                 placeholder: gettext('请输入ID或流程名称'),
                 business: gettext('所属业务'),
                 createdTime: gettext('提单时间'),
                 claimedTime: gettext('认领时间'),
+                ownBusiness: gettext('所属业务'),
+                finishedTime: gettext('执行结束'),
                 name: gettext('任务名称'),
+                billTime: gettext('提单时间'),
+                billTimePlaceholder: gettext('请选择时间'),
                 creator: gettext('提单人'),
                 claimant: gettext('认领人'),
                 status: gettext('状态'),
@@ -182,16 +242,26 @@ export default {
                 total: gettext('共'),
                 item: gettext('条记录'),
                 comma: gettext('，'),
+                choice: gettext('请选择'),
                 currentPageTip: gettext('当前第'),
-                page: gettext('页')
+                page: gettext('页'),
+                functorType: gettext('任务分类'),
+                functorTypePlaceholder: gettext('请选择分类'),
+                creatorPlaceholder: gettext('请输入提单人'),
+                query: gettext('搜索'),
+                reset: gettext('清空')
             },
             listLoading: true,
+            selectedCcId: -1,
             currentPage: 1,
             totalPage: 1,
             countPerPage: 15,
             totalCount: 0,
-            searchStr: '',
+            functorSync: 0,
+            statusSync: 0,
+            searchStr: undefined,
             isShowNewTaskDialog: false,
+            functorBasicInfoLoading: true,
             functorList: [],
             business: {
                 list: [],
@@ -219,9 +289,31 @@ export default {
                 empty: false,
                 disabled: true
             },
-            isCommonTemplate: false
+            bizCcId: undefined,
+            billTime: undefined,
+            creator: undefined,
+            executeStartTime: undefined,
+            executeEndTime: undefined,
+            isStarted: undefined,
+            isFinished: undefined,
+            isCommonTemplate: false,
+            isAdvancedSerachShow: false,
+            status: undefined,
+            functorCategory: [],
+            statusList: [
+                {'id': 'submitted', 'name': gettext('未认领')},
+                {'id': 'claimed', 'name': gettext('已认领')},
+                {'id': 'executed', 'name': gettext('已执行')},
+                {'id': 'finished', 'name': gettext('完成')}
+            ]
         }
     },
+    computed: {
+        ...mapState({
+            bizList: state => state.bizList,
+            categorys: state => state.categorys
+        })
+    },
     created () {
         this.loadFunctionTask()
         this.onSearchInput = toolsUtils.debounce(this.searchInputhandler, 500)
@@ -245,7 +337,21 @@ export default {
                 const data = {
                     limit: this.countPerPage,
                     offset: (this.currentPage - 1) * this.countPerPage,
-                    q: this.searchStr
+                    task__pipeline_instance__name__contains: this.searchStr,
+                    creator: this.creator || undefined,
+                    pipeline_instance__is_started: this.isStarted,
+                    pipeline_instance__is_finished: this.isFinished,
+                    task__business__cc_id: this.bizCcId,
+                    status: this.status
+                }
+                if (this.executeEndTime) {
+                    if (this.common) {
+                        data['pipeline_template__start_time__gte'] = moment(this.executeStartTime).format('YYYY-MM-DD')
+                        data['pipeline_template__start_time__lte'] = moment(this.executeEndTime).add('1','d').format('YYYY-MM-DD')
+                    } else {
+                        data['create_time__gte'] = moment.tz(this.executeStartTime, this.businessTimezone).format('YYYY-MM-DD')
+                        data['create_time__lte'] = moment.tz(this.executeEndTime, this.businessTimezone).add('1','d').format('YYYY-MM-DD')
+                    }
                 }
                 const functorListData = await this.loadFunctionTaskList(data)
                 const list = functorListData.objects
@@ -347,6 +453,12 @@ export default {
                 this.template.loading = false
             }
         },
+        onSelectedBizCcId (name, value) {
+            if (this.bizCcId === name) {
+                return
+            }
+            this.bizCcId = name
+        },
         onSelectedBusiness (id, data) {
             this.business.id = id
             this.getTemplateList()
@@ -400,11 +512,35 @@ export default {
             for (let item of textList) {
                 if (item.textContent === gettext(' 无数据 ')) {
                     item.style['cursor'] = 'not-allowed'
-                    item.style['background-color'] = '#FAFAFA'
-                    item.style['color'] = '#AAAAAA'
-                    item.parentElement.style["background-color"] = '#FAFAFA'
+                    item.style['background-color'] = '#fafafa'
+                    item.style['color'] = '#aaaaaa'
+                    item.parentElement.style["background-color"] = '#fafafa'
                 }
             }
+        },
+        onAdvanceShow () {
+            this.isAdvancedSerachShow = !this.isAdvancedSerachShow
+        },
+        onChangeExecuteTime (oldValue, newValue) {
+            const timeArray = newValue.split(" - ")
+            this.executeStartTime = timeArray[0]
+            this.executeEndTime = timeArray[1]
+        },
+        onClearStatus () {
+            this.isStarted = undefined
+            this.isFinished = undefined
+        },
+        onResetForm () {
+            this.status = undefined
+            this.creator = undefined
+            this.statusSync = 0
+            this.selectedCcId = 0
+            this.funtorSync = 0
+            this.executeStartTime = undefined
+            this.executeEndTime = undefined
+        },
+        onSelectedStatus (id, name) {
+            this.status = id
         }
     }
 }
@@ -420,7 +556,6 @@ label.required:after {
     font-family: "SimSun";
 }
 .functor-container {
-    padding-top: 20px;
     min-width: 1320px;
     min-height: calc(100% - 50px);
     background: $whiteNodeBg;
@@ -448,38 +583,105 @@ label.required:after {
         margin-right: 30px;
     }
 }
-.operation-area {
-    margin: 20px 0;
-    .functor-search {
-        float: right;
-        position: relative;
-    }
-    .search-input {
-        padding: 0 40px 0 10px;
-        width: 360px;
-        height: 32px;
-        line-height: 32px;
-        font-size: 12px;
-        background: $whiteDefault;
-        border: 1px solid $commonBorderColor;
-        border-radius: 4px;
-        outline: none;
-        &:hover {
-            border-color: #c0c4cc;
+.functor-fieldset {
+    width: 100%;
+    margin-bottom: 15px;
+    border: 1px solid $commonBorderColor;
+    background: #fff;
+    .functor-query-content {
+        display: flex;
+        flex-wrap: wrap;
+        .query-content {
+            min-width: 420px;
+            padding: 10px;
+            @media screen and (max-width: 1420px){
+                min-width: 380px;
+            }
+            .query-span {
+                float: left;
+                min-width: 130px;
+                margin-right: 12px;
+                height: 32px;
+                line-height: 32px;
+                font-size: 14px;
+                text-align: right;
+                @media screen and (max-width: 1420px){
+                    min-width: 100px;
+                }
+            }
+            input {
+                max-width: 260px;
+                height: 32px;
+                line-height: 32px;
+            }
+            .bk-date-range:after {
+                height: 32px;
+                line-height: 32px;
+            }
+            .bk-selector-icon.clear-icon {
+                top:6px;
+            }
+            /deep/ .bk-selector {
+                max-width: 260px;
+                display: inline-block;
+            }
+            input::-webkit-input-placeholder{
+                color: $formBorderColor;
+            }
+            input:-moz-placeholder {
+                color: $formBorderColor;
+            }
+            input::-moz-placeholder {
+                color: $formBorderColor;
+            }
+            input:-ms-input-placeholder {
+                color: $formBorderColor;
+            }
+            input,.bk-selector,.bk-date-range {
+                min-width: 260px;
+            }
+            .search-input {
+                width: 260px;
+                height: 32px;
+                padding: 0 10px 0 10px;
+                font-size: 14px;
+                border: 1px solid $commonBorderColor;
+                line-height: 32px;
+                outline: none;
+                &:hover {
+                    border-color: #c0c4cc;
+                }
+                &:focus {
+                    border-color: $blueDefault;
+                    & + i {
+                        color: $blueDefault;
+                    }
+                }
+            }
+            .bk-selector-search-item > input {
+                min-width: 249px;
+            }
+            .bk-date-range {
+                display: inline-block;
+                width: 260px;
+            }
         }
-        &:focus {
-            border-color: $blueDefault;
-            & + i {
-                color: $blueDefault;
+        .query-button {
+            padding: 10px;
+            min-width: 450px;
+            @media screen and (max-width: 1420px) {
+                min-width: 390px;
+            }
+            text-align: center;
+            .query-cancel {
+                margin-left: 5px;
+            }
+            .bk-button {
+                height: 32px;
+                line-height: 32px;
             }
         }
     }
-    .common-icon-search {
-        position: absolute;
-        right: 15px;
-        top: 8px;
-        color: $commonBorderColor;
-    }
 }
 .functor-table-content {
     table {
diff --git a/pipeline/blueflow/src/pages/template/TemplateEdit/index.vue b/pipeline/blueflow/src/pages/template/TemplateEdit/index.vue
index c5cb6cc0ba..bd601ffebf 100644
--- a/pipeline/blueflow/src/pages/template/TemplateEdit/index.vue
+++ b/pipeline/blueflow/src/pages/template/TemplateEdit/index.vue
@@ -16,13 +16,14 @@
                 ref="pipelineCanvas"
                 :singleAtomListLoading="singleAtomListLoading"
                 :subAtomListLoading="subAtomListLoading"
-                :type="type"
                 :isTemplateDataChanged="isTemplateDataChanged"
                 :templateSaving="templateSaving"
+                :createTaskSaving="createTaskSaving"
                 :canvasData="canvasData"
                 :name="name"
                 :cc_id="cc_id"
                 :common="common"
+                :template_id="template_id"
                 :atomTypeList="atomTypeList"
                 :searchAtomResult="searchAtomResult"
                 @onChangeName="onChangeName"
@@ -129,6 +130,8 @@ export default {
             businessInfoLoading: false,
             templateDataLoading: false,
             templateSaving: false,
+            createTaskSaving: false,
+            saveAndCreate: false,
             isTemplateConfigValid: true, // 模板基础配置是否合法
             isTemplateDataChanged: false,
             isSettingPanelShow: true,
@@ -416,8 +419,13 @@ export default {
             }
         },
         async saveTemplate () {
-            this.templateSaving = true
             const template_id = this.type === 'edit' ? this.template_id : undefined
+            if (this.saveAndCreate) {
+                this.createTaskSaving = true
+            } else {
+                this.templateSaving = true
+            }
+
             try {
                 const data = await this.saveTemplateData({'templateId': template_id,'ccId': this.cc_id, 'common': this.common})
                 if (template_id === undefined) {
@@ -434,12 +442,15 @@ export default {
                     this.$router.push({path: `/template/edit/${this.cc_id}/`, query: {'template_id': data.template_id, 'common': this.common}})
                 }
                 if (this.createTaskSaving) {
-                    this.$router.push(this.getTaskUrl())
+                    const taskUrl = this.getTaskUrl()
+                    this.$router.push(taskUrl)
                 }
             } catch (e) {
                 errorHandler(e, this)
             } finally {
+                this.saveAndCreate = false
                 this.templateSaving = false
+                this.createTaskSaving = false
             }
         },
         addSingleAtomActivities (location, config) {
@@ -696,12 +707,19 @@ export default {
                 this.isTemplateConfigValid = true
             }
         },
+        getTaskUrl () {
+            let url = `/template/newtask/${this.cc_id}/selectnode/?template_id=${this.template_id}`
+            if (this.common) {
+                url += '&common=1'
+            }
+            return url
+        },
         // 点击保存模板按钮回调
-        onSaveTemplate (saveCreateBtn) {
+        onSaveTemplate (saveAndCreate) {
             if (this.templateSaving || this.createTaskSaving) {
                 return
             }
-            this.saveAndCreate = saveCreateBtn
+            this.saveAndCreate = saveAndCreate
             this.checkVariable() // 全局变量是否合法
         },
         // 校验全局变量
@@ -725,6 +743,8 @@ export default {
             // 模板分类是否选择
             if (!this.category) {
                 this.isTemplateConfigValid = false
+                this.templateSaving = false
+                this.createTaskSaving = false
                 templateSetting.setErrorTab('templateConfigTab')
                 return
             }
@@ -747,6 +767,7 @@ export default {
             const nodeWithErrors = document.querySelectorAll('.node-with-text.FAILED')
             if (nodeWithErrors && nodeWithErrors.length) {
                 this.templateSaving = false
+                this.createTaskSaving = false
                 errorHandler({message: i18n.error}, this)
                 return
             }
@@ -883,4 +904,3 @@ export default {
         height: 100%;
     }
 </style>
-