Select支持传入后台码表，全局搜索支持搜索

src/components/SearchInput.vue

@@ -4,6 +4,8 @@
       prefix-icon="el-icon-search"
       placeholder="全局搜索"
       v-model="searchContent"
+      :clearable="true"
+
       @keyup.enter.native="searchEvent"
       @keydown.up.native="preDownEvent"
       @keyup.up.native="preUpEvent"
@@ -21,12 +23,16 @@
       <ul>
         <li
           :class="{ 'sug-selected': item.selected }"
-          v-for="(item, idx) in searchResultForLis"
+          v-for="(item, idx) in searchResult"
           :key="idx"
           @mouseover="liOverEvent(idx)"
-          @mouseup.left="searchEvent(item.text)"
-          v-html="item.text"
-        ></li>
+          @mouseup.left="searchEvent(item)"
+        >
+        
+        <span style="width:8rem;display:inline-block">{{item.OWNREF}}</span>
+        <el-divider direction="vertical"></el-divider>
+        <span>{{item.OBJNAM}}</span>
+        </li>
       </ul>
     </div>
   </div>
@@ -34,9 +40,10 @@
 
 <script>
 import debounce from "lodash/debounce";
-
+import commonReport from "~/mixin/commonReport"
 export default {
   name: "SearchInput",
+  mixins:[commonReport],
   data() {
     return {
       searchContent: "",
@@ -58,56 +65,71 @@ export default {
         this.resultDisplay = false;
         return;
       }
-      if (this.searchResult.map((r) => r.text).includes(val)) {
+      if (this.searchResult.map((r) => r.OWNREF).includes(val)) {
         return;
       }
       this.debounceWrapper();
     },
   },
   methods: {
-    queryData() {
-      const testData = [
-        { text: "DD3500210260AA01", url: "" },
-        { text: "OC3500190001AA", url: "" },
-        { text: "KZ3500210313AA", url: "" },
-        { text: "KZ3500210312AA", url: "" },
-        { text: "DD3500210311AA01", url: "" },
-        { text: "DD3500210311AA01", url: "" },
-        { text: "KZ3500210311AA", url: "" },
-        { text: "CH3500200001AA", url: "" },
-        { text: "CH3323200001AB", url: "" },
-        { text: "DV453500210260AA01", url: "" },
-        { text: "KZ3500210313AA", url: "" },
-        { text: "DD45350029760AA01", url: "" },
-        { text: "CH3500343657001AA", url: "" },
-        { text: "CH35987567001AA", url: "" },
-        { text: "CH243534200001AA", url: "" },
-        { text: "CH350086786001AA", url: "" },
-        { text: "CH53454001AA", url: "" },
-        { text: "CH65645FG4545AA", url: "" },
-      ];
+    async queryData() {
+      // const testData = [
+      //   { text: "DD3500210260AA01", url: "" },
+      //   { text: "OC3500190001AA", url: "" },
+      //   { text: "KZ3500210313AA", url: "" },
+      //   { text: "KZ3500210312AA", url: "" },
+      //   { text: "DD3500210311AA01", url: "" },
+      //   { text: "DD3500210311AA01", url: "" },
+      //   { text: "KZ3500210311AA", url: "" },
+      //   { text: "CH3500200001AA", url: "" },
+      //   { text: "CH3323200001AB", url: "" },
+      //   { text: "DV453500210260AA01", url: "" },
+      //   { text: "KZ3500210313AA", url: "" },
+      //   { text: "DD45350029760AA01", url: "" },
+      //   { text: "CH3500343657001AA", url: "" },
+      //   { text: "CH35987567001AA", url: "" },
+      //   { text: "CH243534200001AA", url: "" },
+      //   { text: "CH350086786001AA", url: "" },
+      //   { text: "CH53454001AA", url: "" },
+      //   { text: "CH65645FG4545AA", url: "" },
+      // ];
+
       console.log("query data ..." + new Date().toLocaleString());
-      // this.shuffle(testData);
-      // const res = testData;
-      const res = testData.filter(
-        (d) => d.text.indexOf(this.searchContent) > -1
-      );
-      if (res && res.length > 0) {
-        this.searchResultForLis = res.map((d) => {
-          const o = Object.assign({}, d);
-          o.text = d.text.replace(
-            this.searchContent,
-            "<em>" + this.searchContent + "</em>"
-          );
-          return o;
-        });
-        this.searchResult = res;
+      let rtnmsg = await this.globalSearch(this.searchContent);
+      if(rtnmsg.respCode == SUCCESS && rtnmsg.data && rtnmsg.data.length >0){
+        let srcData = rtnmsg.data;
+        let searchResult = srcData.map(item=>{
+          return item;
+        })
+        this.searchResult = searchResult;
         this.resultDisplay = true;
-      } else {
+      }
+      else{
         this.searchResult = [];
-        this.searchResultForLis = [];
         this.resultDisplay = false;
       }
+                
+      // this.shuffle(testData);
+      // const res = testData;
+      // const res = testData.filter(
+      //   (d) => d.text.indexOf(this.searchContent) > -1
+      // );
+      // if (res && res.length > 0) {
+      //   this.searchResultForLis = res.map((d) => {
+      //     const o = Object.assign({}, d);
+      //     o.text = d.text.replace(
+      //       this.searchContent,
+      //       "<em>" + this.searchContent + "</em>"
+      //     );
+      //     return o;
+      //   });
+      //   this.searchResult = res;
+      //   this.resultDisplay = true;
+      // } else {
+      //   this.searchResult = [];
+      //   this.searchResultForLis = [];
+      //   this.resultDisplay = false;
+      // }
     },
     shuffle(arr) {
       let i = arr.length - 1;
@@ -117,13 +139,55 @@ export default {
         i--;
       }
     },
-    searchEvent(val) {
-      if (typeof val === "string") {
-        this.searchContent = val;
+    searchEvent(row) {
+      if (typeof row.OWNREF === "string") {
+        this.searchContent = row.OWNREF;
       }
       this.resultDisplay = false;
       // TODO
-      console.log("go to ...");
+      
+      let link = "";
+      switch(row.OBJTYP.trim()){
+        case "DID":
+          link = "ditsel"
+          break
+        case "LID":
+          link = "litsel"
+          break;
+        case "CPD":
+          link = "cptsel"
+          break;
+        case "DED":
+          link = "detsel"
+          break;
+        case "LED":
+          link = "letsel"
+          break;
+        case "BPD":
+          link = "bptsel"
+          break;
+        case "CCD":
+          link = "cctsel"
+          break;
+        case "GED":
+          link = "getsel"
+          break;
+        case "GID":
+          link = "gitsel"
+          break;
+        case "MCD":
+          link = "mctsel"
+          break;
+         case "TRD":
+          link = "trtsel"
+          break;
+      }
+      console.log("go to ..."+link);
+      if(!link){
+        this.$notify.error({title: '错误',message: '未知的objtyp:'+row.OBJTYP+"!"})
+        return
+      }
+      this.$router.push({name:link.toUpperCase().substring(0,1)+link.substring(1),query:{ownref:row.OWNREF.trim()}})
     },
     focusInput() {
       if (this.searchResult.length > 0) {
@@ -223,6 +287,8 @@ export default {
   position: absolute;
   width: 590px;
   top: 28px;
+  height: 40rem;
+  overflow: auto;
   border-radius: 0 0 10px 10px;
   border: 2px solid #4e71f2;
   box-shadow: none;

src/components/Select.vue

@@ -8,7 +8,16 @@
     :clearable="clearable"
     @click.native="handleClick"
   >
-    <template v-if="code.length > 0">
+    <template v-if="dbCodeList.length > 0">
+      <el-option
+        v-for="item in dbCodeList"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      >
+      </el-option>
+    </template>
+    <template v-else-if="code.length > 0">
       <el-option
         v-for="item in code"
         :key="item.value"
@@ -22,6 +31,7 @@
 </template>
 
 <script>
+import Api from "~/service/Api"
 export default {
   props: {
     value: {
@@ -46,6 +56,27 @@ export default {
         return [];
       },
     },
+    dbCode: {
+      type: String,
+      default: undefined,
+    },
+  },
+  data(){
+    return {
+      dbCodeList:[],
+    }
+  },
+  watch:{
+    //动态从服务器上渲染码表
+    dbCode(){
+      if(!this.dbCode){
+        this.dbCodeList=[]
+        //清理数据
+        this.model = undefined;
+        return 
+      }
+      getDBCode()
+    }
   },
   computed: {
     model: {
@@ -84,7 +115,23 @@ export default {
         node.parentElement.dispatchEvent(ev);
       }
     },
+    getDBCode(){
+      let args = {tbl:this.dbCode,lang:this.$store.state.I18n.lang.toUpperCase()}
+      if(args.lang == "ZH"){
+        args.lang = "CN";
+      }
+      Api.post("/getCodetable",args).then(rtnmsg=>{
+        if(rtnmsg.respCode==SUCCESS){
+          this.dbCodeList=rtnmsg.data
+        }
+      })
+    }
   },
+  mounted(){
+    if(this.dbCode){
+      this.getDBCode()
+    }
+  }
 };
 </script>