new

src/components/roleDispose/roleDispose.vue

@@ -5,8 +5,18 @@
         <div class="content">
           <p class="search">
             <span class="searchVal">
-              <span>查询：</span>
-              <el-input v-model="input2" size="medium" @change="search" placeholder="请输入关键技术"></el-input>
+              <span>关键字：</span>
+              <el-input v-model="input2" size="medium" @change="search" placeholder="请输入关键字"></el-input>
+            </span>
+            <span class="searchVal">
+              <span>关键技术：</span>
+              <el-select v-model="searchVal" @change="search" placeholder="请选择关键技术" clearable>
+                <el-option
+                  v-for="item in allList"
+                  :label="item.technologyName"
+                  :value="item.technologyName">
+                </el-option>
+              </el-select>
             </span>
             <span class="button searchBtn" @click="search">搜索</span>
             <span class="button add" @click="addRole"><img src="../../assets/img/add.png"></span>
@@ -74,7 +84,9 @@ export default {
     name: 'roleDispose',
     data () {
         return {
-            input2: '',
+            input2: '', // 关键字
+            searchVal: '', // 关键技术
+            allList: [], // 所有关键技术
             tableData: [],
             tablePageSize: 0,
             pageSize: 9,  // 每页个数
@@ -86,14 +98,33 @@ export default {
         }
     },
     mounted() {
+        this.$server.getAllList().then(res => { // 获取所有关键技术
+            console.log(res)
+            this.allList = res.data
+        }).catch(err => {
+            this.$message.error('数据请求失败！');
+        })
         this.search();
     },
     methods: {
         // 搜索
         search () {
-            console.log(1222)
-            let obj = {
-                technologyName:this.input2
+            let obj;
+            if (this.input2 !== '' && this.searchVal !== '') {
+                obj = {
+                    'technologyName': this.searchVal,
+                    'target': this.input2
+                }
+            } else if (this.input2 !== '' && this.searchVal === '') {
+                obj = {
+                    'target': this.input2
+                }
+            } else if (this.input2 === '' && this.searchVal !== '') {
+                obj = {
+                    'technologyName': this.searchVal
+                }
+            } else {
+                obj = {}
             }
             this.$server.getConfigPageList(this.myPage,this.pageSize,obj).then(res => {
                 this.tableData = res.data.objects;
@@ -186,16 +217,21 @@ export default {
     display: flex;
   }
   .roleDispose .content .searchVal{
-    width: 280px;
+    width: 320px;
     display: flex;
     font-size: 18px;
     color: #4663a6;
   }
   .roleDispose .content .searchVal>span{
-    width: 75px;
+    width: 95px;
     display: inline-block;
     line-height: 34px;
   }
+  .roleDispose .content .searchVal:nth-child(2)>span{
+    width: 150px;
+    margin-left: 20px;
+    text-align: right;
+  }
   .roleDispose .content .button{
     display: inline-block;
     width: 100px;