diff --git a/jero-web/src/views/projectManagement/components/listOfRelevantPersonnel.vue b/jero-web/src/views/projectManagement/components/listOfRelevantPersonnel.vue
index 91f874a33..e1f79efd6 100644
--- a/jero-web/src/views/projectManagement/components/listOfRelevantPersonnel.vue
+++ b/jero-web/src/views/projectManagement/components/listOfRelevantPersonnel.vue
@@ -20,6 +20,7 @@
                                  :triggerChange="false" :dictCode="'duty_territory'"/>
             </div>
           </a-col>
+          <template v-if="toggleSearchStatus">
           <a-col :md="12" :sm="8">
             <div class="box-title-text-search">
               <div class="title-text-search" :title="$t('engineeringInterfacePerson')">
@@ -64,11 +65,16 @@
               </a-select>
             </div>
           </a-col>
+          </template>
           <span style="float: right;overflow: hidden;margin-right: 11px;margin-bottom: 20px"
                 class="table-page-search-submitButtons">
                   <a-button class="box-button-search" type="primary" @click="searchQuery">{{$t('query')}}</a-button>
                   <a-button class="box-button-search" style="margin-left: 8px"
                             @click="searchReset">{{$t('reset')}}</a-button>
+                  <a @click="handleToggleSearch" style="margin-left: 8px">
+                            {{ !toggleSearchStatus ? $t('open') : $t('away') }}
+                            <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
+                 </a>
       </span>
         </a-row>
       </a-form>
@@ -274,6 +280,7 @@
     },
     data() {
       return {
+        toggleSearchStatus: false,
         visible: false,
         queryParam: {},
         columnsAll: [
@@ -409,6 +416,9 @@
     },
     methods: {
       ...mapGetters(['userInfo']),
+      handleToggleSearch() {
+        this.toggleSearchStatus = !this.toggleSearchStatus
+      },
       queryCertificationEngineer() {
         getAction(this.url.queryCertificationEngineer, { projectId: this.$route.query.id }).then((res) => {
           if (res.success) {