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>

jero-web/src/main.js

@@ -8,13 +8,9 @@ import router from './router'
 import store from './store/'
 import { VueAxios } from "@/utils/request"
 
-// require('@jeecg/antd-online-mini')
-// require('@jeecg/antd-online-mini/dist/OnlineForm.css')
-
 require('@/components/onlineForm/onlineForm')
 require('@/components/onlineForm/OnlineForm.css')
 
-
 import Antd, { version } from 'ant-design-vue'
 console.log('ant-design-vue version:', version)
 

jero-web/src/views/jero/SelectDemo.vue

@@ -127,16 +127,6 @@
           <a-col :span="12">选中值：{{ formData.selectRole}}</a-col>
         </a-row>
 
-        <!-- 职务选择 -->
-        <a-row :gutter="24">
-          <a-col :span="12">
-            <a-form-item label="选择职务">
-              <j-select-position  :buttons="false" v-model="formData.selectPosition" />
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">选中值：{{ formData.selectPosition}}</a-col>
-        </a-row>
-
         <!--  JCheckbox -->
         <a-row :gutter="24">
           <a-col :span="12">
@@ -452,7 +442,6 @@
   import JSuperQuery from '@/components/jero/JSuperQuery'
   import JUpload from '@/components/jero/JUpload'
   import JImageUpload from '@/components/jero/JImageUpload'
-  import JSelectPosition from '@comp/jerobiz/JSelectPosition'
   import JCategorySelect from '@comp/jero/JCategorySelect'
   import JMultiSelectTag from '@comp/dict/JMultiSelectTag'
   import JInput from '@comp/jero/JInput'
@@ -468,7 +457,6 @@
       JAreaLinkage,
       JInput,
       JCategorySelect,
-      JSelectPosition,
       JImageUpload,
       JUpload,
       JTreeDict,
@@ -527,6 +515,7 @@ sayHi('hello, world!')`
         jselectMultiple: {
           options: [
             { text: '字符串', value: 'String' },
+            { text: '字符串1', value: 'String1' },
             { text: '整数型', value: 'Integer' },
             { text: '浮点型', value: 'Double' },
             { text: '布尔型', value: 'Boolean' }

jero-web/src/views/system/modules/UserModal.vue

@@ -168,7 +168,6 @@
   import Vue from 'vue'
   // 引入搜索部门弹出框的组件
   import departWindow from './DepartWindow'
-  import JSelectPosition from '@/components/jerobiz/JSelectPosition'
   import { ACCESS_TOKEN } from "@/store/mutation-types"
   import { getAction } from '@/api/manage'
   import {addUser,editUser,queryUserRole,queryall } from '@/api/api'
@@ -181,7 +180,6 @@
     components: {
       JImageUpload,
       departWindow,
-      JSelectPosition
     },
     data () {
       return {