阻止架构管理 人员管理 按蓝湖 修改按钮和搜索

src/pages/main/organizaStructure/staffManage.vue

@@ -3,20 +3,55 @@
         <div class="container-box">
             <toolList @iconCli='iconCli' :tooltit='tooltit'></toolList>
             <div class="search">
-                <mySearch :searchList="searchList" @searchInfo="searchInfo" style="width: 60%"></mySearch>
-                <span>
+                <el-form :model="searchSection" ref="searchSection">
+                    <div class="search-box">
+                        <el-form-item>
+                            <el-select @change="getareatype" :popper-append-to-body="false" v-model="searchSection.cityCompName" placeholder="地市">
+                                <el-option v-for="item in typeopt" :key="item.id" :label="item.roleName"
+                                    :value="item.roleName">
+                                </el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item>
+                            <el-select  @change="gettype" :popper-append-to-body="false" v-model="searchSection.areaCompName" placeholder="区县">
+                                <el-option v-for="item in kindopt" :key="item.id" :label="item.roleName"
+                                    :value="item.roleName">
+                                </el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item>
+                            <el-input v-model="searchSection.roleName" placeholder="角色">
+                            </el-input>
+                        </el-form-item>
+                        <el-form-item>
+                            <el-input v-model="searchSection.userName" placeholder="姓名">
+                            </el-input>
+                        </el-form-item>
+                    </div>
+                </el-form>
+                <div>
+                    <el-button class="btn-check" size="medium" type="primary" plain icon="el-icon-search" @click="searchInfo">搜索</el-button>
+                    <el-button class="btn-check" size="medium" type="primary"  @click="resetSearch">重置</el-button>
+                </div>
+                
+                <!-- <mySearch :searchList="searchList" @searchInfo="searchInfo" style="width: 60%"></mySearch> -->
+                
+            </div>
+            <div class="clearfix" style="margin-top: 20px">
+                <span style="float: right">
                     <!-- <el-button type="primary" @click="dialogCheck(4)" size="medium">导入</el-button> -->
-                    <el-button type="primary" @click="downloadExcel(1)">导出</el-button>
-                    <el-button type="primary" @click="downloadExcel(2)">下载模板</el-button>
+                    
+                    <el-button type="primary" @click="downloadExcel(2)" class="downloadMuban">下载模板</el-button>
                     <myUpload style="display:inline-block;" :fileInfo="fileInfo"
                         :fileList="fileInfo.fileList" @uploadBack='uploadBack'></myUpload>
+                    <el-button type="primary" size="medium" @click="downloadExcel(1)">导出</el-button>
                     <el-button type="primary" @click="dialogCheck(3)" size="medium">添加</el-button>
                     <!-- <el-button type="primary" @click="dialogCheck(3)" size="medium">导入</el-button> -->
                     <!-- <el-button type="primary" @click="dialogCheck(3)" size="medium">导出</el-button> -->
                 </span>
             </div>
             <div class="tabbox">
-                <el-table height="calc(100% - 40px)" class="com-table" ref="multipleTable" :data="tableData"
+                <el-table height="calc(100% - 150px)" class="com-table" ref="multipleTable" :data="tableData"
                     tooltip-effect="dark" size="small" border style="width: 100%" v-loading="loading">
                     <el-table-column prop="oaNo" label="员工工号">
                     </el-table-column>
@@ -183,7 +218,7 @@
                     }],
                 },
                 searchList: [{
-                        type: 'input',
+                        type: 'sel',
                         tit: '地市',
                         value: '',
                         width: '24%'
@@ -207,6 +242,7 @@
                         width: '24%',
                     },
                 ],
+                searchSection: {},
                 tooltit: '人员管理',
                 fullscreen: false,
                 total: 0,
@@ -247,12 +283,21 @@
             //搜索数据
             searchInfo(v) {
                 this.params = {};
-                v[0] ? this.params.cityCompName = v[0] : '';
-                v[1] ? this.params.areaCompName = v[1] : '';
-                v[2] ? this.params.roleName = v[2] : '';
-                v[3] ? this.params.userName = v[3] : '';
+                this.searchSection.cityCompName ? this.params.cityCompName = this.searchSection.cityCompName : '';
+                this.searchSection.areaCompName ? this.params.areaCompName = this.searchSection.areaCompName : '';
+                this.searchSection.roleName ? this.params.roleName = this.searchSection.roleName : '';
+                this.searchSection.userName ? this.params.userName = this.searchSection.userName : '';
+                // v[0] ? this.params.cityCompName = v[0] : '';
+                // v[1] ? this.params.areaCompName = v[1] : '';
+                // v[2] ? this.params.roleName = v[2] : '';
+                // v[3] ? this.params.userName = v[3] : '';
                 this.getList(this.params, this.pageSize);
             },
+            resetSearch(){
+                this.searchSection = {};
+                this.params = {};
+                this.getList(this.params, 1);
+            },
             closedia() {
                 this.infolist = {
                     roleName:''
@@ -736,4 +781,29 @@
             }
         }
     }
+    .clearfix:after {
+    content: ".";
+    display: block;
+    height: 0;
+    clear: both;
+    visibility: hidden;
+    }
+
+    .clearfix {
+        *zoom: 1;
+    }
+    .downloadMuban{
+        background: none;
+        color: #107CFF;
+        border: none;
+        padding: 0;
+        vertical-align: bottom;
+    }
+    .search-box{
+        display: flex;
+        div{
+            margin-right: 10px;
+            margin-bottom: 0;
+        }
+    }
 </style>