薪资统计-筛选条件样式

src/views/oa/salary_management/personnelSalary/SalarysStatistics.vue

@@ -5,7 +5,7 @@
       <div class="table-page-search-wrapper">
         <a-form layout="inline" @keyup.enter.native="searchQuery">
           <a-row :gutter="24">
-            <a-col :xl="4" :lg="7" :md="8" :sm="24">
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
               <a-form-item label="时间">
                 <a-range-picker
                     style="width: 100% !important"
@@ -21,7 +21,7 @@
                 />
               </a-form-item>
             </a-col>
-            <a-col :xl="4" :lg="7" :md="8" :sm="24">
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
               <a-form-item label="公司">
                 <a-select  v-model="queryParam.orgName">
                     <a-select-option value="">所有</a-select-option>
@@ -31,33 +31,39 @@
                   </a-select>
               </a-form-item>
             </a-col>
-            <a-col :xl="4" :lg="7" :md="8" :sm="24">
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
               <a-form-item label="部门">
                 <j-search-select-tag v-model="queryParam.sysOrgCode" placeholder="请选择部门" 
                      dict="sys_depart,depart_name,depart_name,org_type='3' or org_code='TBD' order by org_code"/>
               </a-form-item>
             </a-col>
-            <a-col :xl="3" :lg="7" :md="8" :sm="24">
-            <a-form-item label="姓名">
-                <j-search-select-tag v-model="queryParam.name" placeholder="请选择名称" 
-                     dict="sys_user,realname,realname" allowClear/>
-              </a-form-item>
-            </a-col>
-            <a-col :xl="5" :lg="7" :md="8" :sm="24">
-              <a-form-item label="雇佣状态">
-                <a-select  v-model="queryParam.syHireType" mode="multiple">
-                    <a-select-option value="">所有</a-select-option>
-                    <a-select-option value="在职">在职</a-select-option>
-                    <a-select-option value="离职">离职</a-select-option>
-                    <a-select-option value="退休返聘">退休返聘</a-select-option>
-                    <a-select-option value="运维">运维</a-select-option>
-                  </a-select>
-              </a-form-item>
-            </a-col>
-            <a-col :xl="4" :lg="7" :md="8" :sm="24">
+            <template v-if="toggleSearchStatus">
+              <a-col :xl="6" :lg="7" :md="8" :sm="24">
+                  <a-form-item label="姓名">
+                      <j-search-select-tag v-model="queryParam.name" placeholder="请选择名称" 
+                         dict="sys_user,realname,realname" allowClear/>
+                  </a-form-item>
+              </a-col>
+              <a-col :xl="6" :lg="7" :md="8" :sm="24">
+                  <a-form-item label="雇佣状态">
+                      <a-select  v-model="queryParam.syHireType" mode="multiple">
+                          <a-select-option value="">所有</a-select-option>
+                          <a-select-option value="在职">在职</a-select-option>
+                          <a-select-option value="离职">离职</a-select-option>
+                          <a-select-option value="退休返聘">退休返聘</a-select-option>
+                          <a-select-option value="运维">运维</a-select-option>
+                      </a-select>
+                  </a-form-item>
+              </a-col>
+            </template>
+            <a-col :xl="6" :lg="7" :md="8" :sm="24">
               <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                 <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                 <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
+                <a @click="handleToggleSearch" style="margin-left: 8px">
+                  {{ toggleSearchStatus ? '收起' : '展开' }}
+                  <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
+                </a>
               </span>
             </a-col>
   
@@ -316,6 +322,7 @@
             this.mode2 = [mode[0] === 'date' ? 'month' : mode[0], mode[1] === 'date' ? 'month' : mode[1]];
         },
         searchQuery(){
+          this.toggleSearchStatus = false
           this.queryParam.pageNo = 1
           this.getTableList()
         },