kun 9/26/20/10

src/main.js

@@ -3,6 +3,7 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 import http from '../static/js/http'
+import tool from '../static/js/tool'
 import ElementUI from 'element-ui'
 import md5 from 'js-md5'
 
@@ -32,6 +33,7 @@ router.beforeEach((to, from, next) => {
 })
 
 Vue.prototype.$md5 = md5
+Vue.prototype.$tool = tool
 Vue.prototype.$http = http
 Vue.prototype.$jump = function (url) {
   this.$router.push({

src/views/InformationQuery.vue

@@ -4,30 +4,29 @@
     <div id="box">
       <!-- 搜索框 -->
       <div class="search">
-        <input type="text"
-               placeholder="请输入搜索内容"
-               v-model.trim="searchVal" />
+        <input
+          type="text"
+          placeholder="请输入搜索内容"
+          v-model.trim="searchVal"
+          @keyup.enter="getSearch()"
+        />
         <label @click="getSearch()">搜索</label>
       </div>
       <!-- 分类搜索 -->
       <div class="select-box">
-        <select name="type"
-                id>
+        <select name="type">
           <option value>社会</option>
           <option value>团体</option>
         </select>
-        <select name="time"
-                id>
+        <select name="time">
           <option value>09-18</option>
           <option value>09-19</option>
         </select>
-        <select name="year"
-                id>
+        <select name="year">
           <option value>2017</option>
           <option value>2019</option>
         </select>
-        <select name="condition"
-                id>
+        <select name="condition">
           <option value>good</option>
           <option value>bad</option>
         </select>
@@ -44,10 +43,12 @@
       <!-- 表格 -->
       <div class="box-table">
         <div class="caption">
-          <span v-for="(list,index) in text"
-                :class="sub == index ? 'color' : ''"
-                :key="index"
-                @click="btn(index)">{{list}}</span>
+          <span
+            v-for="(list,index) in text"
+            :class="sub == index ? 'color' : ''"
+            :key="index"
+            @click="btn(index)"
+          >{{list}}</span>
         </div>
         <table>
           <tr>
@@ -60,35 +61,35 @@
             <th>状态</th>
           </tr>
           <template v-if="searchValue.length == 0">
-            <tr v-for="(item,index) in sData"
-                :key="index"
-                :class="index % 2 == 0 ? 'bgcbz' : 'bgcz'">
+            <tr
+              v-for="(item,index) in sData"
+              :key="index"
+              :class="index % 2 == 0 ? 'bgcbz' : 'bgcz'"
+            >
               <td>{{item.id}}</td>
               <td>{{item.organization}}</td>
               <td>{{item.credit}}</td>
               <td>{{item.type}}</td>
               <td>{{item.representative}}</td>
               <td>{{item.date}}</td>
-              <td v-if="item.zt == 0"
-                  style="color:#2fd63f">正常</td>
-              <td v-if="item.zt == 1"
-                  style="color:#e13232">异常</td>
+              <td v-if="item.zt == 0" style="color:#2fd63f">正常</td>
+              <td v-if="item.zt == 1" style="color:#e13232">异常</td>
             </tr>
           </template>
           <template v-if="searchValue.length > 0">
-            <tr v-for="(item,index) in searchValue"
-                :key="index"
-                :class="index % 2 == 0 ? 'bgcbz' : 'bgcz'">
+            <tr
+              v-for="(item,index) in searchValue"
+              :key="index"
+              :class="index % 2 == 0 ? 'bgcbz' : 'bgcz'"
+            >
               <td v-html="item.id">{{item.id}}</td>
               <td v-html="item.organization">{{item.organization}}</td>
               <td v-html="item.credit">{{item.credit}}</td>
               <td v-html="item.type">{{item.type}}</td>
               <td v-html="item.representative">{{item.representative}}</td>
               <td v-html="item.date">{{item.date}}</td>
-              <td v-if="item.zt == 0"
-                  style="color:#2fd63f">正常</td>
-              <td v-if="item.zt == 1"
-                  style="color:#e13232">异常</td>
+              <td v-if="item.zt == 0" style="color:#2fd63f">正常</td>
+              <td v-if="item.zt == 1" style="color:#e13232">异常</td>
             </tr>
           </template>
         </table>
@@ -103,7 +104,6 @@
 import HeaderNav from "../components/HeaderNav";
 /* eslint-disable */
 import FooterNav from "../components/FooterNav";
-
 export default {
   components: {
     HeaderNav,
@@ -120,6 +120,7 @@ export default {
       },
       searchVal: "",
       searchValue: [],
+      screeOut: [],
       sData: [
         {
           id: 1,
@@ -188,46 +189,28 @@ export default {
         this.$message.warning("请输入搜索内容");
         return;
       }
-      this.sData.forEach((item, index) => {
-        if (
-          item.organization.indexOf(this.searchVal) > -1 ||
-          item.credit.indexOf(this.searchVal) > -1 ||
-          item.type.indexOf(this.searchVal) > -1 ||
-          item.representative.indexOf(this.searchVal) > -1 ||
-          item.date.indexOf(this.searchVal) > -1
-        ) {
-          this.searchValue.push(item);
-        }
-      });
 
-      /*
-      if (this.searchValue != "") {
-        this.searchValue.map(item => {
-          //遍历
-          item.organization = this.brightKeyword(item.organization);
-          item.credit = this.brightKeyword(item.credit);
-          item.type = this.brightKeyword(item.type);
-          item.representative = this.brightKeyword(item.representative);
-          item.date = this.brightKeyword(item.date);
-        }); //到这里search方法结束
-      }
-      */
-      this.searchVal = "";
-    },
+      let searchData = this.$tool.setSearch(this.sData, this.searchVal)
 
-    /** 高亮函数 */
-    /*
-    brightKeyword(val) {
-      let keyword = this.searchVal; //获取输入框输入的内容
-      if (val.indexOf(keyword) !== -1) {
-        //判断这个字段中是否包含keyword
-        //如果包含的话，就把这个字段中的那一部分进行替换成html字符
-        return val.replace(keyword, `<mark>${keyword}</mark>`);
+      if (searchData != undefined && searchData != '') {
+        this.searchValue = searchData
+        this.searchVal = "";
       } else {
-        return val;
+        this.$message('您搜索的内容暂无~')
       }
-      val = "";
-    },*/
+
+      // this.sData.forEach((item, index) => {
+      //   if (
+      //     item.organization.indexOf(this.searchVal) > -1 ||
+      //     item.credit.indexOf(this.searchVal) > -1 ||
+      //     item.type.indexOf(this.searchVal) > -1 ||
+      //     item.representative.indexOf(this.searchVal) > -1 ||
+      //     item.date.indexOf(this.searchVal) > -1
+      //   ) {
+      //     this.searchValue.push(item);
+      //   }
+      // });
+    },
 
     btn(index) {
       let s = this.sub;
@@ -235,9 +218,11 @@ export default {
       this.sub = s;
     },
 
-    getData() {}
+    getData() { }
+  },
+  created() {
+
   },
-  created() {},
   mounted() {
     this.getData();
   }

src/views/project/Project.vue

@@ -308,8 +308,8 @@ export default {
                   position: absolute;
                   right: -8.5%;
                   bottom: -26%;
-                  width: 119px;
-                  height: 95px;
+                  width: 120px;
+                  height: 90px;
                 }
               }
             }

static/js/tool.js

@@ -1,10 +1,58 @@
-/** 筛选函数 */
-export function multiFilter (array, filters) {
-  const filterKeys = Object.keys(filters)
-  return array.filter(item => {
-    return filterKeys.every(key => {
-      if (!filters[key].length) return true
-      return !!~filters[key].indexOf(item[key])
-    })
-  })
+// 使用递归遍历所有属性判断是否 在对象里面匹配到值 借鉴js对象深拷贝的方式
+function loopObj (searkey, obj) {
+  let bool = false
+  let loop = (searkey, obj) => {
+    for (let key in obj) {
+      if (
+        String(obj[key])
+          .trim()
+          .indexOf(searkey) !== -1
+      ) {
+        bool = true
+      }
+      if (typeof obj[key] === 'object' && obj[key] !== null) {
+        loop(searkey, obj[key])
+      }
+    }
+  }
+  loop(searkey, obj)
+  return bool
 }
+
+let tool = {
+  /**
+   * 搜索函数
+   * @param {*} arr   搜索目标
+   * @param {*} str   搜索参数
+   */
+  setSearch: function (arr, str) {
+    let arrTrueList = [] // 匹配的数据
+    let arrFalseList = [] // 不匹配数据
+    arr.forEach(item => {
+      // 判断输入值key 是否存在对象数组上面
+      if (loopObj(str, item)) {
+        arrTrueList.push(item)
+      } else {
+        arrFalseList.push(item)
+      }
+    })
+    return arrTrueList
+  },
+
+  /**
+   * 筛选函数
+   * @param {*} array   筛选参数
+   * @param {*} filters 筛选目标
+   */
+  multiFilter: function (array, filters) {
+    const filterKeys = Object.keys(filters)
+    return array.filter(item => {
+      return filterKeys.every(key => {
+        if (!filters[key].length) return true
+        return !!~filters[key].indexOf(item[key])
+      })
+    })
+  }
+}
+
+export default tool