j-select-multiple改为可检索的多选下拉框

jero-web/src/components/jero/JSelectMultiple.vue

@@ -1,7 +1,14 @@
 <template>
-  <a-select :value="arrayValue" @change="onChange" mode="multiple" :placeholder="placeholder">
+  <a-select
+    mode="multiple"
+    :placeholder="placeholder"
+    :value="arrayValue"
+    @change="onChange"
+    @search="search"
+    :filterOption="false"
+  >
     <a-select-option
-      v-for="(item,index) in options"
+      v-for="(item,index) in newOptions"
       :key="index"
       :getPopupContainer="getParentContainer"
       :value="item.value">
@@ -51,7 +58,8 @@
     },
     data(){
       return {
-        arrayValue:!this.value?[]:this.value.split(this.spliter)
+        newOptions:[],
+        arrayValue:!this.value?[]:this.value.split(this.spliter) // arrayValue是已选中的数据
       }
     },
     watch:{
@@ -63,8 +71,28 @@
         }
       }
     },
+    created(){
+      this.newOptions = this.options
+    },
     methods:{
+      search(val){
+        let newArr = []
+        this.newOptions = this.options
+        if (this.options && this.options.length > 0){
+          this.options.forEach((item,index)=>{
+            if (item.text.indexOf(val) != -1){
+              newArr.push(item)
+            }
+          })
+          this.$nextTick(()=>{
+            this.newOptions = newArr
+          })
+        }else {
+          this.newOptions = this.options
+        }
+      },
       onChange (selectedValue) {
+        this.newOptions = this.options
         if(this.triggerChange){
           this.$emit('change', selectedValue.join(this.spliter));
         }else{

jero-web/src/components/jero/index.js

@@ -30,7 +30,6 @@ import JTreeTable from './JTreeTable.vue'
 //jerobiz
 import JSelectDepart from '../jerobiz/JSelectDepart.vue'
 import JSelectMultiUser from '../jerobiz/JSelectMultiUser.vue'
-import JSelectPosition from '../jerobiz/JSelectPosition.vue'
 import JSelectRole from '../jerobiz/JSelectRole.vue'
 import JSelectUserByDep from '../jerobiz/JSelectUserByDep.vue'
 
@@ -68,7 +67,6 @@ export default {
     //jerobiz
     Vue.component('JSelectDepart', JSelectDepart)
     Vue.component('JSelectMultiUser', JSelectMultiUser)
-    Vue.component('JSelectPosition', JSelectPosition)
     Vue.component('JSelectRole', JSelectRole)
     Vue.component('JSelectUserByDep', JSelectUserByDep)
   }

jero-web/src/components/jerobiz/JSelectPosition.vue

@@ -1,37 +0,0 @@
-<template>
-  <j-select-biz-component :width="1000" v-bind="configs" v-on="$listeners"/>
-</template>
-
-<script>
-  import JSelectBizComponent from './JSelectBizComponent'
-
-  export default {
-    name: 'JSelectPosition',
-    components: { JSelectBizComponent },
-    props: ['value'],
-    data() {
-      return {
-        settings: {
-          name: '职务',
-          displayKey: 'name',
-          returnKeys: ['id', 'code'],
-          listUrl: '/sys/position/list',
-          queryParamCode: 'name',
-          queryParamText: '职务名称',
-          columns: [
-            { title: '职务名称', dataIndex: 'name', align: 'center', width: '30%', widthRight: '70%' },
-            { title: '职务编码', dataIndex: 'code', align: 'center', width: '35%' },
-            { title: '职级', dataIndex: 'rank_dictText', align: 'center', width: '25%' }
-          ]
-        }
-      }
-    },
-    computed: {
-      configs() {
-        return Object.assign({ value: this.value }, this.settings, this.$attrs)
-      }
-    }
-  }
-</script>
-
-<style lang="less" scoped></style>