新增下拉多选（带搜索）& 删除冗余代码

src/app-register.ts

@@ -97,6 +97,8 @@ export const AppComponents = {
         v.component('app-rich-text',() => import('@/components/editor/app-rich-text/app-rich-text.vue'));
         // 富文本项
         v.component('app-mob-rich-text-editor',() => import('@/components/editor/app-mob-rich-text-editor/app-mob-rich-text-editor.vue'));
+        // 下拉多选（带搜索）
+        v.component('app-mob-check-list-search',() => import('@/components/editor/app-mob-check-list-search/app-mob-check-list-search.vue'));
         // 编辑器 END
 
         // 菜单样式 BEGIN

src/components/editor/app-mob-check-list-search/app-mob-check-list-search.less

+.aapp-mob-check-list-search {
+  width: 100%;
+  height: 40px;
+  .cancel-icon {
+    width: 16px;
+    height: 16px;
+    background-color: @from-main-background;
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 9998;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    ion-icon {
+      position: absolute;
+      font-size: 16px;
+      right: 0;
+      top: 0;
+      color: @from-main-color;
+      z-index: 9999;
+    }
+  }
+
+  .ion-select-icon {
+    right: 17px;
+    top: 50%;
+    margin-top: -3px;
+    position: absolute;
+    width: 0px;
+    height: 0px;
+    color: currentcolor;
+    pointer-events: none;
+    border-top: 5px solid;
+    border-right: 5px solid transparent;
+    border-left: 5px solid transparent;
+    color: @from-main-color;
+  }
+  .value_text {
+    color: @from-main-color;
+    width: 100%;
+    height: 100%;
+    line-height: 40px;
+    text-align: inherit;
+    padding-right: 25px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+}
+.ibiz_sheet {
+  max-height: 300px;
+  overflow: auto;
+  padding-bottom: 44px;
+  .search {
+    text-align: center;
+    position: fixed;
+    bottom: 0;
+  }
+  .sheet_item:active {
+    background-color: #f2f3f5;
+  }
+  .sheet_item {
+    width: 100%;
+    padding: 10px 20px 10px 20px;
+    text-align: left;
+  }
+  .select {
+    color: #3880ff;
+  }
+  .selectbtn {
+    text-align: center;
+    position: fixed;
+    bottom: 0;
+    right: 0;
+  }
+}

src/components/editor/app-mob-check-list-search/app-mob-check-list-search.vue

+<template>
+  <div class="app-mob-check-list-search" @click="open">
+    <div class="cancel-icon" v-if="curValue"><ion-icon name="close-circle-outline" @click.stop="clear"></ion-icon></div>
+    <div v-if="curValue== null || curValue==''" class="ion-select-icon"></div>
+    <div class="value_text">{{value_text}}</div>
+    <van-action-sheet get-container="#app" class="ibiz_sheet"   v-model="show"  @click-overlay="onOverlayClick" >
+        <van-field class="search" v-model="searchText" placeholder="请输入关键字" clearable />
+        <van-button class="selectbtn" type="info" @click="onSelect">确认</van-button>
+          <div  v-for="option of cacheOptions" :class="{'select':option.selected,'sheet_item':true}" :key="option.value" @click="onSheetClick(option)">{{option.text}}</div>
+    </van-action-sheet>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Provide, Emit, Watch } from "vue-property-decorator";
+import { CodeListService } from "@/ibiz-core";
+
+@Component({
+    components: {}
+})
+export default class AppCheckList extends Vue {
+
+    /**
+     * 搜索文本
+     */
+    public searchText = "";
+
+    /**
+     * 缓存数据
+     */
+    public cacheOptions: any = [];
+
+    /**
+     * sheet显示状态
+     */
+    public show = false;
+
+    /**
+     * 代码表服务对象
+     */
+    public codeListService: CodeListService = new CodeListService();
+
+    /**
+     * 传入值
+     */
+    @Prop() public value?: string;
+
+    /**
+     * 当前选中值
+     */
+    public curValue: any = "";
+
+    /**
+     * 下拉数据数组
+     */
+    public options: any[] = [];
+
+    /**
+     * 代码表标识
+     */
+    @Prop() public tag!: string;
+
+    /**
+     * 代码表类型
+     */
+    @Prop() public type!: string;
+
+    /**
+     * 导航参数
+     */
+    @Prop({ default: {} }) protected navigateParam?: any;
+
+    /**
+     * 导航上下文
+     */
+    @Prop({ default: {} }) protected navigateContext?: any;
+
+    /**
+     * 应用上下文
+     */
+    @Prop({ default: {} }) protected context?: any;
+
+    /**
+     * 是否缓存
+     */
+    @Prop({ default: true }) protected isCache?: boolean;
+
+    /**
+     * 是否被缓存
+     */
+    public isCached: boolean = false;
+
+    /**
+     * 传入表单数据
+     */
+    @Prop() public data?: any;
+
+    /**
+     * 视图参数
+     */
+    @Prop() public viewparams!: any;
+
+    /**
+     * 值change
+     */
+    @Watch('value')
+    valueChange(newValue: string, oldValue: string) {
+        if (newValue) {
+            this.$store.commit('setSelectStatus', true);
+        }
+    }
+
+    /**
+     * 搜索文本change
+     */
+    @Watch('searchText')
+    onSearchTextChange(newVal: string, oldVal: string) {
+        this.search(newVal);
+    }
+
+    /**
+     * 显示值文本
+     */
+    get value_text() {
+        if (!this.value) {
+            return
+        }
+        let arr: any = this.value.split(',')
+        let tempText = "";
+        arr.forEach((temp: any) => {
+            let index = this.options.findIndex((item: any) => { return item.value == temp })
+            if (index > -1) {
+                tempText = tempText ? tempText + "," + this.options[index].text : tempText + this.options[index].text;
+            }
+        });
+        return tempText
+    }
+
+    /**
+     * 加载
+     */
+    public async load(): Promise<any> {
+        this.$store.commit('setSelectStatus', false);
+        if (this.tag && this.type) {
+            if (Object.is(this.type, "static")) {
+                return;
+            }
+            // 处理导航参数、上下文参数
+            let param: any = {};
+            const bcancel: boolean = this.handleOtherParam(param);
+            if (!bcancel) {
+                return
+            }
+            let response: any = await this.codeListService.getItems(this.tag, param.context, param.param);
+            if (response) {
+                this.options = response;
+                if (this.isCache) {
+                    this.isCached = true;
+                }
+                this.selectData.forEach((temp: any) => {
+                    let index = this.options.findIndex((item: any) => { return item.value == temp.value })
+                    if (index > -1) {
+                        this.options[index].selected = true;
+                    }
+                });
+                this.search(this.searchText);
+                return true;
+            } else {
+                this.options = [];
+                return false;
+            }
+        }
+    }
+
+    /**
+     * 前端搜索
+     */
+    public search(val: string) {
+        this.cacheOptions = [];
+        if (!val) {
+            this.cacheOptions = this.options;
+            return
+        }
+        this.options.forEach((temp: any) => {
+            if (temp.text.indexOf(val) != -1) {
+                this.cacheOptions.push(temp);
+            }
+        });
+    }
+
+    /**
+     * 取消选择
+     */
+    public onOverlayClick() {
+        this.$store.commit('setSelectStatus', true);
+    }
+
+    /**
+     * 处理额外参数
+     */
+    public handleOtherParam(arg: any) {
+        if (!this.data) {
+            return false;
+        }
+        // 导航参数处理
+        const { context, param } = this.$viewTool.formatNavigateParam(this.navigateContext, this.navigateParam, this.context, this.viewparams, this.data);
+        arg.context = context;
+        arg.param = param;
+        return true;
+    }
+
+    /**
+     * 清空值
+     */
+    public clear() {
+        this.curValue = null;
+        this.selectData = [];
+        this.options.forEach((temp: any) => {
+            temp.selected = false;
+        });
+        this.$emit('change', '')
+    }
+
+    public selectData: any = [];
+
+    /**
+     * 选项点击事件
+     */
+    public onSheetClick(item: any) {
+        let index = this.selectData.findIndex((temp: any) => { return temp.value == item.value });
+        if (item.selected) {
+            item.selected = false;
+            this.selectData.splice(index, 1)
+        } else {
+            item.selected = true;
+            this.selectData.push(item);
+        }
+        this.$forceUpdate();
+
+    }
+
+    /**
+     * 确定按钮回填
+     */
+    public onSelect() {
+        this.$store.commit('setSelectStatus', true);
+        let tempVale = "";
+        this.selectData.forEach((temp: any) => {
+            tempVale = tempVale ? tempVale + ',' + temp.value : tempVale + temp.value;
+        });
+        this.curValue = tempVale;
+        this.$emit('change', this.curValue);
+        this.searchText = "";
+        this.show = false;
+    }
+
+    public async open(){
+        if (this.tag && this.type) {
+            if (Object.is(this.type, "static")) {
+                this.show = true;
+                return;
+            }
+            let falg = await this.load();
+            if(falg){
+                this.show = true;
+            }
+        }
+    }
+
+    /**
+     * 生命周期
+     */
+    public mounted() {
+        this.load();
+        this.$store.commit('setSelectStatus', true);
+    }
+
+}
+</script>
+<style lang="less">
+  @import "./app-mob-check-list.less";
+</style>
\ No newline at end of file

src/styles/layout.less

-// 布局公共函数
-.layout(@form-text-align) {
-  .app-mobile-select ion-select::part(text) {
-    text-align: @form-text-align;
-  }
-  .app-mobile-check-list ion-select::part(text) {
-    text-align: @form-text-align;
-  }
-  .app-mobile-datetime-picker {
-    ion-datetime {
-      text-align: @form-text-align;
-    }
-  }
-  .app-picker .ibz-input {
-    text-align: @form-text-align;
-  }
-  .left {
-    .app-form-item-input {
-      text-align: @form-text-align;
-    }
-  }
-  .app-mob-mpicker > ion-input {
-    text-align: @form-text-align;
-  }
-  ion-textarea {
-    text-align: @form-text-align;
-  }
-  .app-mobile-select-drop-down{
-    ion-select{
-      text-align: @form-text-align;
-    }
-    .select_text{
-      text-align: @form-text-align;
-    }
-  }
-  .app-mob-input{
-    text-align: @form-text-align;
-  }
-  .app-mob-rich-text-editor{
-    text-align: @form-text-align;
-  }
-  .app-mobile-select{
-    ion-select {
-      text-align: @form-text-align;
-    }
-  }
-  .app-mobile-check-list{
-    ion-select {
-      text-align: @form-text-align;
-    }
-  }
-}

src/styles/layout/layout.less

@@ -54,4 +54,7 @@
       text-align: @form-text-align;
     }
   } 
+  .app-mob-check-list-search{
+    text-align: @form-text-align;
+  }
 }