增加下拉框组件

src/components/Form/index.ts

@@ -14,6 +14,7 @@ export { default as ApiRadioGroup } from './src/components/ApiRadioGroup.vue';
 export { default as JAreaLinkage } from './src/jeecg/components/JAreaLinkage.vue';
 export { default as JSelectUser } from './src/jeecg/components/JSelectUser.vue';
 export { default as JSelectDept } from './src/jeecg/components/JSelectDept.vue';
+export { default as JSelect } from './src/jeecg/components/JSelect.vue';
 export { default as JCodeEditor } from './src/jeecg/components/JCodeEditor.vue';
 export { default as JCategorySelect } from './src/jeecg/components/JCategorySelect.vue';
 export { default as JSelectMultiple } from './src/jeecg/components/JSelectMultiple.vue';

src/components/Form/src/componentMap.ts

@@ -44,6 +44,7 @@ import JSelectRole from './jeecg/components/JSelectRole.vue';
 import JImageUpload from './jeecg/components/JImageUpload.vue';
 import JDictSelectTag from './jeecg/components/JDictSelectTag.vue';
 import JSelectDept from './jeecg/components/JSelectDept.vue';
+import JSelect from './jeecg/components/JSelect.vue';
 import JAreaSelect from './jeecg/components/JAreaSelect.vue';
 import JEditor from './jeecg/components/JEditor.vue';
 // import JMarkdownEditor from './jeecg/components/JMarkdownEditor.vue';
@@ -88,6 +89,7 @@ componentMap.set('InputNumber', InputNumber);
 componentMap.set('AutoComplete', AutoComplete);
 
 componentMap.set('Select', Select);
+componentMap.set('JSelect', JSelect);
 componentMap.set('ApiSelect', ApiSelect);
 componentMap.set('TreeSelect', TreeSelect);
 componentMap.set('ApiTreeSelect', ApiTreeSelect);

src/components/Form/src/jeecg/components/JSelect.vue

@@ -0,0 +1,98 @@
+<template>
+  <div  title="">
+     <a-select   v-model:value="showValue"  showSearch :filterOption="filterOption"  @change="handleChange">
+          <a-select-option v-for="item in option" :key="item.id" :value="item.id">{{ item.label }}</a-select-option>
+      </a-select>
+  </div>
+</template>
+
+<script lang="ts">
+  import { computed, defineComponent,ref ,onMounted,watch,emit} from 'vue';
+  export default defineComponent({
+    name: 'JSelect',
+    props:{
+      value:{
+        type: String,
+        default: ''
+      },
+      getOptionUrl: {
+        default: null,
+      },
+      showField:{
+        type: String,
+        default: ''
+      },
+    },
+    emits: ['options-change', 'change', 'input', 'update:value'],
+    setup(props,{ emit}) {
+      const showValue = ref<any[]>(props.value);
+      var option = ref([])
+      watch(
+        () => props.value,
+        (val) => {
+          if (!val) {
+            showValue.value = [];
+          } else {
+            showValue.value = props.value
+          }
+        }
+      );
+      onMounted(() => {
+        getOptions()
+      });
+      // onChange 事件
+      function handleChange(event) {
+        emit('change',event );
+        emit('update:value',event);
+      }
+      function filterOption(input, option) {
+        //update-begin-author:taoyan date:2022-11-8 for: issues/218 所有功能表单的下拉搜索框搜索无效
+        let value = '', label = '';
+        try {
+          value = option.value;
+          label = option.children()[0].children;
+        }catch (e) {
+          console.log('获取下拉项失败', e)
+        }
+        let str = input.toLowerCase();
+        return value.toLowerCase().indexOf(str) >= 0 || label.toLowerCase().indexOf(str) >= 0;
+        //update-end-author:taoyan date:2022-11-8 for: issues/218 所有功能表单的下拉搜索框搜索无效
+      }
+      async function getOptions(){
+        let params ={pageSize:-1}
+        option.value = (await props.getOptionUrl(params)).records
+        const arr = props.showField.split("+")
+        option.value.map(item=>{
+          item.label = ''
+          arr.map(event=>{
+              for (let key in item) {
+                  if (key == event) {
+                    if(item.label == ''){
+                      item.label += '('+item[key]+')'
+                    }else{
+                      item.label +=item[key] 
+                    }
+                  }
+              }    
+          })      
+        })
+      }
+      return {
+        handleChange,
+        filterOption,
+        option,
+        showValue
+      };
+    },
+  })
+</script>
+
+<style lang="less">
+  // 关闭动画，防止滚动时动态赋值出现问题
+  .j-vxe-checkbox.no-animation {
+    .ant-checkbox-inner,
+    .ant-checkbox-inner::after {
+      transition: none !important;
+    }
+  }
+</style>