fix：列表查询条件多选

src/business/platform/data/components/search-form/index.vue

@@ -42,7 +42,9 @@
                     :disabled="item.disabled"
                     :placeholder="item.placeholder"
                     :style="itemStyle + (item.itemWidth ? `width: ${item.itemWidth}px;` : 'width: 150px')"
+                    multiple
                     clearable
+                    collapse-tags
                     @keyup.enter.native.stop="handleEnter"
                 >
                     <el-option
@@ -160,7 +162,7 @@
                     v-model="params[item.modelValue]"
                     :type-key="item.field_options.dictionary"
                     style="width: 150px;"
-                    :multiple="false"
+                    :multiple="true"
                     :disabled="item.disabled"
                     clearable
                 />
@@ -172,9 +174,10 @@
                     :size="item.size ? item.size : 'mini'"
                     :type="item.selectorType||'user'"
                     :placeholder="item.placeholder"
-                    :multiple="false"
+                    :multiple="true"
                     :store="'id'"
                     :disabled="item.disabled"
+                    :temp-search="true"
                 />
                 <!--自定义对话框-->
                 <ibps-custom-dialog
@@ -184,11 +187,12 @@
                     :disabled="item.disabled"
                     :template-key="item.field_options.dialog"
                     style="width: 150px;"
-                    :multiple="false"
+                    :multiple="true"
                     :store="item.field_options.store"
                     :icon="item.field_options.icon?'ibps-icon-'+item.field_options.icon:'ibps-icon-search'"
                     :type="item.field_options.dialog_type||'dialog'"
                     :dynamic-params="getLinkDynamicParams(item.field_options,params)"
+                    :temp-search="true"
                 />
                 <!-- 关联数据-->
                 <ibps-link-data

src/business/platform/data/templaterender/custom-dialog/index.vue

@@ -1,472 +1,538 @@
 <template>
-  <div>
-    <ibps-selector
-      v-bind="$props"
-      :icon="icon"
-      :items="items"
-      :multiple="multiple"
-      :disabled="disabled"
-      :readonly="readonly"
-      :size="size"
-      :readonly-text="readonlyText"
-      @click="handleSelectorClick"
-      @remove="handleSelectorRemove"
-      v-on="$listeners"
-    />
-    <data-template-dialog
-      :visible.sync="selectorVisible"
-      :data="dataTemplate"
-      :dynamic-params="dynamicParams"
-      :multiple="multiple"
-      :value="selectorValue"
-      :label-key="labelKey"
-      :preview="false"
-      type="dialog"
-      @close="visible=>selectorVisible =visible"
-      @action-event="handleSelectorActionEvent"
-    />
-  </div>
+    <div>
+        <ibps-selector
+            v-bind="$props"
+            :icon="icon"
+            :items="items"
+            :multiple="multiple"
+            :disabled="disabled"
+            :readonly="readonly"
+            :size="size"
+            :readonly-text="readonlyText"
+            :temp-search="tempSearch"
+            @click="handleSelectorClick"
+            @remove="handleSelectorRemove"
+            v-on="$listeners"
+        />
+        <data-template-dialog
+            :visible.sync="selectorVisible"
+            :data="dataTemplate"
+            :dynamic-params="dynamicParams"
+            :multiple="multiple"
+            :value="selectorValue"
+            :label-key="labelKey"
+            :preview="false"
+            type="dialog"
+            @close="(visible) => (selectorVisible = visible)"
+            @action-event="handleSelectorActionEvent"
+        />
+    </div>
 </template>
 <script>
-import { getByKey, transferByIds, queryDataById } from '@/api/platform/data/dataTemplate'
-import { valueEquals } from '@/plugins/element-ui/src/utils/util'
-import emitter from '@/plugins/element-ui/src/mixins/emitter'
+import {
+    getByKey,
+    transferByIds,
+    queryDataById,
+} from "@/api/platform/data/dataTemplate";
+import { valueEquals } from "@/plugins/element-ui/src/utils/util";
+import emitter from "@/plugins/element-ui/src/mixins/emitter";
 // remoteTransRequest
-import { remoteRequest, remoteTransRequest } from '@/utils/remote'
-import DataTemplateDialog from '../preview'
-import IbpsSelector from '@/components/ibps-selector/selector'
-import { buildLabelTitle } from '../utils'
-import { TRANSFER_DATA } from '@/constant'
+import { remoteRequest, remoteTransRequest } from "@/utils/remote";
+import DataTemplateDialog from "../preview";
+import IbpsSelector from "@/components/ibps-selector/selector";
+import { buildLabelTitle } from "../utils";
+import { TRANSFER_DATA } from "@/constant";
 
 export default {
-  components: {
-    DataTemplateDialog,
-    IbpsSelector
-  },
-  mixins: [emitter],
-  props: {
-    value: { // value
-      type: [String, Number, Object, Array],
-      default() {
-        return this.multiple ? [] : {}
-      }
-    },
-    templateKey: { // 数据模版key
-      type: String
-    },
-    dynamicParams: { // 动态参数
-      type: Object
-    },
-    // 存储类型 ,
-    // ①、id:只存储id 字符串，
-    // ②、json： json字符串,
-    store: {
-      type: String,
-      default: 'id',
-      validator: function(value) {
-        return ['id', 'json'].indexOf(value) !== -1
-      }
-    },
-    storeSeparator: { // 存储值分割符,对应[多选]有效，对于设置字符串类型的分隔符
-      type: String,
-      default: ','
-    },
-    placeholder: { // 输入框占位文本
-      type: String,
-      default: '请选择'
-    },
-    multiple: { // 是否多选
-      type: Boolean,
-      default: false
-    },
-    disabled: { // 禁用
-      type: Boolean,
-      default: false
-    },
-    size: {
-      type: String,
-      default: 'mini'
-    },
-    readonly: { // 只读
-      type: Boolean,
-      default: false
-    },
-    readonlyText: { // 只读样式
-      type: String,
-      default: 'text'
-    },
-    icon: {
-      type: String,
-      default: 'search-plus'
-    }
-  },
-  data() {
-    return {
-      initialization: false,
-      dataTemplate: {},
-      labelKey: '',
-      valueKey: '',
-      selectorVisible: false,
-      selectorValue: this.multiple ? [] : {},
-      cacheData: {},
-      bindIdValue: ''
-    }
-  },
-  computed: {
-    items() {
-      if (this.$utils.isEmpty(this.selectorValue)) return []
-      if (this.multiple) {
-        return this.selectorValue.map(data => {
-          return this.handleLabel(data)
-        })
-      } else {
-        return [this.handleLabel(this.selectorValue)]
-      }
-    }
-  },
-  watch: {
-    value: {
-      handler(val, oldVal) {
-        this.initData()
-        if (!valueEquals(val, oldVal)) {
-          this.dispatch('ElFormItem', 'el.form.change', val)
-        }
-      },
-      immediate: true
-    },
-    templateKey: {
-      handler(val, oldVal) {
-        if (val !== oldVal && val) {
-          this.loadTemplateData()
-        } else {
-          this.dataTemplate = {}
-        }
-      },
-      immediate: true
-    },
-    dynamicParams(val, oldVal) {
-      if (val !== oldVal) {
-        this.initData()
-      }
-    }
-  },
-  beforeDestroy() {
-    this.dataTemplate = {}
-    this.cacheData = {}
-  },
-  methods: {
-    loadTemplateData() {
-      this.initialization = false
-      if (this.$utils.isEmpty(this.templateKey)) {
-        return
-      }
-      remoteRequest('dataTemplate', this.templateKey, () => {
-        return this.getRemoteDataTemplateFunc(this.templateKey)
-      }).then(data => {
-        this.initialization = true
-        this.dataTemplate = this.$utils.parseData(data)
-        this.dataTemplate.showType === 'compose' ? this.initDataTemplate(this.dataTemplate.composeType === 'treeList' ? this.dataTemplate.templates[1].attrs.bind_template_key : this.dataTemplate.templates[0].attrs.bind_template_key) : this.initDataTemplate()
-      }).catch(() => {
-      })
-    },
-    getRemoteDataTemplateFunc(templateKey) {
-      return new Promise((resolve, reject) => {
-        getByKey({ dataTemplateKey: templateKey }).then(response => {
-          resolve(response.data)
-        }).catch((error) => {
-          reject(error)
-        })
-      })
-    },
-    initDataTemplate(key) {
-      if (this.$utils.isEmpty(key)) {
-        this.valueKey = this.dataTemplate.unique
-        this.labelKey = buildLabelTitle(this.dataTemplate)
-        this.initData()
-      } else {
-        remoteRequest('dataTemplate', key, () => {
-          return this.getRemoteDataTemplateFunc(key)
-        }).then(res => {
-          this.initialization = true
-          const data = this.$utils.parseData(res)
-          this.valueKey = data.unique
-          this.labelKey = buildLabelTitle(data)
-          this.initData()
-        }).catch(() => {
-        })
-      }
-    },
-    handleLabel(data) {
-      const config = this.labelKey
-      if (typeof config === 'function') {
-        return config(data)
-      } else if (typeof config === 'string') {
-        return data[config]
-      } else if (typeof config === 'undefined') {
-        const dataProp = data['name']
-        return dataProp === undefined ? '' : dataProp
-      }
-    },
-    /**
-     * 初始化数据
-     */
-    initData(init = true) {
-      const data = this.getArrayValue(this.value)
-      this.selectorValue = this.multiple ? [] : {}
-      if (this.$utils.isEmpty(data)) {
-        return
-      }
-      data.forEach(v => {
-        if (this.cacheData[v]) {
-          this.setSelectorValue(v)
-        } else {
-          if (init && this.initialization) {
-            this.getDataInfo(v)
-          }
-        }
-      })
-    },
-    setCacheData() {
-      if (this.$utils.isEmpty(this.selectorValue)) return
-      const data = this.multiple ? this.selectorValue : [this.selectorValue]
-      data.forEach(v => {
-        this.cacheData[v[this.valueKey]] = v
-      })
-    },
-    setSelectorValue(v) {
-      if (this.multiple) {
-        this.selectorValue.push(this.cacheData[v])
-      } else {
-        this.selectorValue = JSON.parse(JSON.stringify(this.cacheData[v]))
-      }
+    components: {
+        DataTemplateDialog,
+        IbpsSelector,
+    },
+    mixins: [emitter],
+    props: {
+        value: {
+            // value
+            type: [String, Number, Object, Array],
+            default() {
+                return this.multiple ? [] : {};
+            },
+        },
+        templateKey: {
+            // 数据模版key
+            type: String,
+        },
+        dynamicParams: {
+            // 动态参数
+            type: Object,
+        },
+        // 存储类型 ,
+        // ①、id:只存储id 字符串，
+        // ②、json： json字符串,
+        store: {
+            type: String,
+            default: "id",
+            validator: function (value) {
+                return ["id", "json"].indexOf(value) !== -1;
+            },
+        },
+        storeSeparator: {
+            // 存储值分割符,对应[多选]有效，对于设置字符串类型的分隔符
+            type: String,
+            default: ",",
+        },
+        placeholder: {
+            // 输入框占位文本
+            type: String,
+            default: "请选择",
+        },
+        multiple: {
+            // 是否多选
+            type: Boolean,
+            default: false,
+        },
+        disabled: {
+            // 禁用
+            type: Boolean,
+            default: false,
+        },
+        size: {
+            type: String,
+            default: "mini",
+        },
+        readonly: {
+            // 只读
+            type: Boolean,
+            default: false,
+        },
+        readonlyText: {
+            // 只读样式
+            type: String,
+            default: "text",
+        },
+        icon: {
+            type: String,
+            default: "search-plus",
+        },
+        tempSearch: {
+            // 是否是数据模板使用的筛选条件
+            type: Boolean,
+            default: false,
+        },
+    },
+    data() {
+        return {
+            initialization: false,
+            dataTemplate: {},
+            labelKey: "",
+            valueKey: "",
+            selectorVisible: false,
+            selectorValue: this.multiple ? [] : {},
+            cacheData: {},
+            bindIdValue: "",
+        };
+    },
+    computed: {
+        items() {
+            if (this.$utils.isEmpty(this.selectorValue)) return [];
+            if (this.multiple) {
+                return this.selectorValue.map((data) => {
+                    return this.handleLabel(data);
+                });
+            } else {
+                return [this.handleLabel(this.selectorValue)];
+            }
+        },
+    },
+    watch: {
+        value: {
+            handler(val, oldVal) {
+                this.initData();
+                if (!valueEquals(val, oldVal)) {
+                    this.dispatch("ElFormItem", "el.form.change", val);
+                }
+            },
+            immediate: true,
+        },
+        templateKey: {
+            handler(val, oldVal) {
+                if (val !== oldVal && val) {
+                    this.loadTemplateData();
+                } else {
+                    this.dataTemplate = {};
+                }
+            },
+            immediate: true,
+        },
+        dynamicParams(val, oldVal) {
+            if (val !== oldVal) {
+                this.initData();
+            }
+        },
     },
-    /**
-     * 获得数组数据
-     */
-    getArrayValue(value, bindId) {
-      if (this.$utils.isEmpty(value)) {
-        return []
-      }
-      if (this.store === 'json') { // json
-        const o = Object.prototype.toString.call(this.$utils.parseData(value)) === '[object Object]'
-        try {
-          const data = o ? [this.$utils.parseData(value)] : this.$utils.parseData(value)
-          return data.map((d) => {
-            return d[this.valueKey]
-          })
-        } catch (error) {
-          console.error(error)
-          return []
-        }
-      } else if (this.store === 'id') { // id
-        return value.split(this.storeSeparator)
-      } else if (this.store === 'bind') { // 绑定id
-        if (this.$utils.isEmpty(bindId)) {
-          return []
-        }
-        return bindId.split(this.storeSeparator)
-      } else { // array
-        return value.map((d) => {
-          return d[this.valueKey]
-        })
-      }
+    beforeDestroy() {
+        this.dataTemplate = {};
+        this.cacheData = {};
     },
-    getStoreValue(value) {
-      const res = []
-      if (this.store === 'json') { // json
-        if (this.$utils.isEmpty(value)) {
-          return ''
-        }
-        if (this.multiple) {
-          value.forEach(v => {
-            const o = {}
-            o[this.valueKey] = v[this.valueKey]
-            if (typeof this.labelKey === 'string') {
-              o[this.labelKey] = v[this.labelKey]
-              o['#title#'] = v[this.labelKey]
+    methods: {
+        loadTemplateData() {
+            this.initialization = false;
+            if (this.$utils.isEmpty(this.templateKey)) {
+                return;
+            }
+            remoteRequest("dataTemplate", this.templateKey, () => {
+                return this.getRemoteDataTemplateFunc(this.templateKey);
+            })
+                .then((data) => {
+                    this.initialization = true;
+                    this.dataTemplate = this.$utils.parseData(data);
+                    this.dataTemplate.showType === "compose"
+                        ? this.initDataTemplate(
+                              this.dataTemplate.composeType === "treeList"
+                                  ? this.dataTemplate.templates[1].attrs
+                                        .bind_template_key
+                                  : this.dataTemplate.templates[0].attrs
+                                        .bind_template_key
+                          )
+                        : this.initDataTemplate();
+                })
+                .catch(() => {});
+        },
+        getRemoteDataTemplateFunc(templateKey) {
+            return new Promise((resolve, reject) => {
+                getByKey({ dataTemplateKey: templateKey })
+                    .then((response) => {
+                        resolve(response.data);
+                    })
+                    .catch((error) => {
+                        reject(error);
+                    });
+            });
+        },
+        initDataTemplate(key) {
+            if (this.$utils.isEmpty(key)) {
+                this.valueKey = this.dataTemplate.unique;
+                this.labelKey = buildLabelTitle(this.dataTemplate);
+                this.initData();
             } else {
-              o['#title#'] = this.labelKey(v)
+                remoteRequest("dataTemplate", key, () => {
+                    return this.getRemoteDataTemplateFunc(key);
+                })
+                    .then((res) => {
+                        this.initialization = true;
+                        const data = this.$utils.parseData(res);
+                        this.valueKey = data.unique;
+                        this.labelKey = buildLabelTitle(data);
+                        this.initData();
+                    })
+                    .catch(() => {});
+            }
+        },
+        handleLabel(data) {
+            const config = this.labelKey;
+            if (typeof config === "function") {
+                return config(data);
+            } else if (typeof config === "string") {
+                return data[config];
+            } else if (typeof config === "undefined") {
+                const dataProp = data["name"];
+                return dataProp === undefined ? "" : dataProp;
+            }
+        },
+        /**
+         * 初始化数据
+         */
+        initData(init = true) {
+            const data = this.getArrayValue(this.value);
+            this.selectorValue = this.multiple ? [] : {};
+            if (this.$utils.isEmpty(data)) {
+                return;
             }
-            res.push(o)
-          })
-          return JSON.stringify(res)
-        } else {
-          const o = {}
-          o[this.valueKey] = value[this.valueKey]
-          if (typeof this.labelKey === 'string') {
-            o[this.labelKey] = value[this.labelKey]
-            o['#title#'] = value[this.labelKey]
-          } else {
-            o['#title#'] = this.labelKey(value)
-          }
-          return JSON.stringify(o)
-        }
-      } else if (this.store === 'id') { // id
-        if (this.$utils.isEmpty(value)) {
-          return ''
-        }
-        if (this.multiple) {
-          value.forEach(v => {
-            res.push(v[this.valueKey])
-          })
-        } else {
-          res.push(value[this.valueKey])
-        }
-        return res.join(this.storeSeparator)
-      } else if (this.store === 'bind') { // 绑定id
-        const res = []
-        const bindIdValue = []
-        value.forEach(v => {
-          bindIdValue.push(v[this.valueKey])
-          res.push(v[this.labelKey])
-        })
-        this.bindIdValue = bindIdValue.join(this.storeSeparator)
+            data.forEach((v) => {
+                if (this.cacheData[v]) {
+                    this.setSelectorValue(v);
+                } else {
+                    if (init && this.initialization) {
+                        this.getDataInfo(v);
+                    }
+                }
+            });
+        },
+        setCacheData() {
+            if (this.$utils.isEmpty(this.selectorValue)) return;
+            const data = this.multiple
+                ? this.selectorValue
+                : [this.selectorValue];
+            data.forEach((v) => {
+                this.cacheData[v[this.valueKey]] = v;
+            });
+        },
+        setSelectorValue(v) {
+            if (this.multiple) {
+                this.selectorValue.push(this.cacheData[v]);
+            } else {
+                this.selectorValue = JSON.parse(
+                    JSON.stringify(this.cacheData[v])
+                );
+            }
+        },
+        /**
+         * 获得数组数据
+         */
+        getArrayValue(value, bindId) {
+            if (this.$utils.isEmpty(value)) {
+                return [];
+            }
+            if (this.store === "json") {
+                // json
+                const o =
+                    Object.prototype.toString.call(
+                        this.$utils.parseData(value)
+                    ) === "[object Object]";
+                try {
+                    const data = o
+                        ? [this.$utils.parseData(value)]
+                        : this.$utils.parseData(value);
+                    return data.map((d) => {
+                        return d[this.valueKey];
+                    });
+                } catch (error) {
+                    console.error(error);
+                    return [];
+                }
+            } else if (this.store === "id") {
+                // id
+                return value.split(this.storeSeparator);
+            } else if (this.store === "bind") {
+                // 绑定id
+                if (this.$utils.isEmpty(bindId)) {
+                    return [];
+                }
+                return bindId.split(this.storeSeparator);
+            } else {
+                // array
+                return value.map((d) => {
+                    return d[this.valueKey];
+                });
+            }
+        },
+        getStoreValue(value) {
+            const res = [];
+            if (this.store === "json") {
+                // json
+                if (this.$utils.isEmpty(value)) {
+                    return "";
+                }
+                if (this.multiple) {
+                    value.forEach((v) => {
+                        const o = {};
+                        o[this.valueKey] = v[this.valueKey];
+                        if (typeof this.labelKey === "string") {
+                            o[this.labelKey] = v[this.labelKey];
+                            o["#title#"] = v[this.labelKey];
+                        } else {
+                            o["#title#"] = this.labelKey(v);
+                        }
+                        res.push(o);
+                    });
+                    return JSON.stringify(res);
+                } else {
+                    const o = {};
+                    o[this.valueKey] = value[this.valueKey];
+                    if (typeof this.labelKey === "string") {
+                        o[this.labelKey] = value[this.labelKey];
+                        o["#title#"] = value[this.labelKey];
+                    } else {
+                        o["#title#"] = this.labelKey(value);
+                    }
+                    return JSON.stringify(o);
+                }
+            } else if (this.store === "id") {
+                // id
+                if (this.$utils.isEmpty(value)) {
+                    return "";
+                }
+                if (this.multiple) {
+                    value.forEach((v) => {
+                        res.push(v[this.valueKey]);
+                    });
+                } else {
+                    res.push(value[this.valueKey]);
+                }
+                return res.join(this.storeSeparator);
+            } else if (this.store === "bind") {
+                // 绑定id
+                const res = [];
+                const bindIdValue = [];
+                value.forEach((v) => {
+                    bindIdValue.push(v[this.valueKey]);
+                    res.push(v[this.labelKey]);
+                });
+                this.bindIdValue = bindIdValue.join(this.storeSeparator);
 
-        return res.join(this.storeSeparator)
-      } else { // 数组 array
-        return value || []
-      }
-    },
-    getValue() {
-      return this.getStoreValue(this.selectorValue)
-    },
-    /**
-    * 通过ID获取数据
-     */
-    getDataInfo(id) {
-      if (TRANSFER_DATA === 'transfer') {
-        this.getTransferData(id)
-      } else {
-        this.getRemoteData(id)
-      }
-    },
-    getTransferData(id) {
-      remoteTransRequest('dataTemplate:' + this.templateKey, id).then(idset => {
-        const ids = Array.from(idset)
-        remoteRequest('dataTemplateIds', ids, () => {
-          return this.getRemoteTransFunc(ids)
-        }).then(response => {
-          if (this.$utils.isNotEmpty(response) && this.$utils.isNotEmpty(response.data)) {
-            const responseData = response.data
-            const dataKey = id
-            const data = responseData[dataKey] ? responseData[dataKey] : {}
-            let key = id
-            if (this.$utils.isNotEmpty(data[this.valueKey])) {
-              key = data[this.valueKey]
+                return res.join(this.storeSeparator);
+            } else {
+                // 数组 array
+                return value || [];
             }
-            this.cacheData[key] = data
-            this.initData(false)
-          }
-        }).catch(() => {
-        })
-      })
-    },
-    getRemoteTransFunc(ids) {
-      return new Promise((resolve, reject) => {
-        transferByIds({
-          'templateKey': this.templateKey,
-          'ids': ids
-        }).then(response => {
-          resolve(response)
-        }).catch((error) => {
-          reject(error)
-        })
-      })
-    },
+        },
+        getValue() {
+            return this.getStoreValue(this.selectorValue);
+        },
+        /**
+         * 通过ID获取数据
+         */
+        getDataInfo(id) {
+            if (TRANSFER_DATA === "transfer") {
+                this.getTransferData(id);
+            } else {
+                this.getRemoteData(id);
+            }
+        },
+        getTransferData(id) {
+            remoteTransRequest("dataTemplate:" + this.templateKey, id).then(
+                (idset) => {
+                    const ids = Array.from(idset);
+                    remoteRequest("dataTemplateIds", ids, () => {
+                        return this.getRemoteTransFunc(ids);
+                    })
+                        .then((response) => {
+                            if (
+                                this.$utils.isNotEmpty(response) &&
+                                this.$utils.isNotEmpty(response.data)
+                            ) {
+                                const responseData = response.data;
+                                const dataKey = id;
+                                const data = responseData[dataKey]
+                                    ? responseData[dataKey]
+                                    : {};
+                                let key = id;
+                                if (
+                                    this.$utils.isNotEmpty(data[this.valueKey])
+                                ) {
+                                    key = data[this.valueKey];
+                                }
+                                this.cacheData[key] = data;
+                                this.initData(false);
+                            }
+                        })
+                        .catch(() => {});
+                }
+            );
+        },
+        getRemoteTransFunc(ids) {
+            return new Promise((resolve, reject) => {
+                transferByIds({
+                    templateKey: this.templateKey,
+                    ids: ids,
+                })
+                    .then((response) => {
+                        resolve(response);
+                    })
+                    .catch((error) => {
+                        reject(error);
+                    });
+            });
+        },
 
-    /**
-     * 通过ID获取数据
-     */
-    getRemoteData(id) {
-      const params = {
-        key: this.templateKey,
-        id: id
-      }
-      if (this.$utils.isNotEmpty(this.dynamicParams)) {
-        params['dynamicParams'] = JSON.stringify(this.dynamicParams)
-      }
-      remoteRequest('dataTemplate', params, () => {
-        return this.getRemoteDataTemplateByIdFunc(params)
-      }).then(responseData => {
-        if (this.$utils.isNotEmpty(responseData) && this.$utils.isNotEmpty(responseData.data)) {
-          const data = responseData.data[0]
-          let key = id
-          if (this.$utils.isNotEmpty(data[this.valueKey])) {
-            key = data[this.valueKey]
-          }
-          this.cacheData[key] = data
-          this.initData(false)
-        }
-      }).catch(() => {
-      })
-    },
-    getRemoteDataTemplateByIdFunc(params) {
-      return new Promise((resolve, reject) => {
-        queryDataById(params).then(response => {
-          resolve(response.data)
-        }).catch((error) => {
-          reject(error)
-        })
-      })
-    },
-    // ===================事件处理=========
+        /**
+         * 通过ID获取数据
+         */
+        getRemoteData(id) {
+            const params = {
+                key: this.templateKey,
+                id: id,
+            };
+            if (this.$utils.isNotEmpty(this.dynamicParams)) {
+                params["dynamicParams"] = JSON.stringify(this.dynamicParams);
+            }
+            remoteRequest("dataTemplate", params, () => {
+                return this.getRemoteDataTemplateByIdFunc(params);
+            })
+                .then((responseData) => {
+                    if (
+                        this.$utils.isNotEmpty(responseData) &&
+                        this.$utils.isNotEmpty(responseData.data)
+                    ) {
+                        const data = responseData.data[0];
+                        let key = id;
+                        if (this.$utils.isNotEmpty(data[this.valueKey])) {
+                            key = data[this.valueKey];
+                        }
+                        this.cacheData[key] = data;
+                        this.initData(false);
+                    }
+                })
+                .catch(() => {});
+        },
+        getRemoteDataTemplateByIdFunc(params) {
+            return new Promise((resolve, reject) => {
+                queryDataById(params)
+                    .then((response) => {
+                        resolve(response.data);
+                    })
+                    .catch((error) => {
+                        reject(error);
+                    });
+            });
+        },
+        // ===================事件处理=========
 
-    handleSelectorClick() {
-      if (this.$utils.isEmpty(this.templateKey)) {
-        this.$message.closeAll()
-        this.$message({
-          message: '请绑定自定义对话框',
-          type: 'warning'
-        })
-        return
-      }
-      this.selectorVisible = true
-      this.initData()
-    },
-    handleSelectorRemove(index) {
-      if (this.multiple) {
-        this.selectorValue.splice(index, 1)
-      } else {
-        this.selectorValue = {}
-      }
-      const val = this.getValue()
-      this.handleInput(val)
-      this.emitChange(val)
-    },
+        handleSelectorClick() {
+            if (this.$utils.isEmpty(this.templateKey)) {
+                this.$message.closeAll();
+                this.$message({
+                    message: "请绑定自定义对话框",
+                    type: "warning",
+                });
+                return;
+            }
+            this.selectorVisible = true;
+            this.initData();
+        },
+        handleSelectorRemove(index) {
+            if (this.multiple) {
+                this.selectorValue.splice(index, 1);
+            } else {
+                this.selectorValue = {};
+            }
+            const val = this.getValue();
+            this.handleInput(val);
+            this.emitChange(val);
+        },
 
-    handleSelectorActionEvent(buttonKey, data) {
-      let val
-      switch (buttonKey) {
-        case 'ok':// 确定
-          this.selectorVisible = false
-          this.selectorValue = data
-          this.setCacheData() // 设置缓存数据
-          val = this.getValue()
-          this.handleInput(val)
-          this.emitChange(val)
-          break
-        case 'cleanClose': // 清空关闭
-          this.selectorVisible = false
-          this.selectorValue = this.multiple ? [] : {}
-          this.handleInput('')
-          this.emitChange('')
-          break
-        case 'cancel':// 取消
-          this.selectorVisible = false
-          break
-        // TODO:自定义按钮事件处理
-      }
-    },
-    emitChange(val) {
-      if (!valueEquals(this.value, val)) {
-        this.$emit('change', val, this.selectorValue)
-        this.$emit('change-link-data', val, this.selectorValue)
-      }
+        handleSelectorActionEvent(buttonKey, data) {
+            let val;
+            switch (buttonKey) {
+                case "ok": // 确定
+                    this.selectorVisible = false;
+                    this.selectorValue = data;
+                    this.setCacheData(); // 设置缓存数据
+                    val = this.getValue();
+                    this.handleInput(val);
+                    this.emitChange(val);
+                    break;
+                case "cleanClose": // 清空关闭
+                    this.selectorVisible = false;
+                    this.selectorValue = this.multiple ? [] : {};
+                    this.handleInput("");
+                    this.emitChange("");
+                    break;
+                case "cancel": // 取消
+                    this.selectorVisible = false;
+                    break;
+                // TODO:自定义按钮事件处理
+            }
+        },
+        emitChange(val) {
+            if (!valueEquals(this.value, val)) {
+                this.$emit("change", val, this.selectorValue);
+                this.$emit("change-link-data", val, this.selectorValue);
+            }
+        },
+        handleInput(val) {
+            this.$emit("input", val, this.selectorValue);
+            this.$emit("change-link-attr", val, this.selectorValue);
+        },
     },
-    handleInput(val) {
-      this.$emit('input', val, this.selectorValue)
-      this.$emit('change-link-attr', val, this.selectorValue)
-    }
-  }
-}
+};
 </script>

src/components/ibps-selector/selector.vue

@@ -1,232 +1,268 @@
 <template>
-  <div
-    class="el-selector"
-    @click="handleFocus"
-  >
-    <div
-      v-if="selected && selected.length >0"
-      ref="tags"
-      :style="{ 'max-width': inputWidth + 'px', width: '100%',overflow: 'hidden','white-space': 'ellipsis',  'word-break': 'break-all','text-overflow': 'ellipsis'}"
-      class="el-selector__tags"
-    >
-      <transition-group @after-leave="resetInputHeight">
-        <template v-for="(item,index) in selected">
-
-          <el-tag
-            type='primary'
-            v-if="$utils.isNotEmpty(item) "
-            :key="item+index"
-            :closable="!selectDisabled"
-            :size="collapseTagSize"
-            disable-transitions
-            @close="deleteTag(index)"
-          >
-            <span class="el-selector__tags-text">{{ item }}</span>
-          </el-tag>
-        </template>
-      </transition-group>
+    <div class="el-selector" @click="handleFocus">
+        <div
+            v-if="selected && selected.length > 0"
+            ref="tags"
+            :style="{
+                'max-width': inputWidth + 'px',
+                width: '100%',
+                overflow: 'hidden',
+                'white-space': 'ellipsis',
+                'word-break': 'break-all',
+                'text-overflow': 'ellipsis',
+            }"
+            class="el-selector__tags"
+        >
+            <transition-group @after-leave="resetInputHeight">
+                <template v-for="(item, index) in selected">
+                    <el-tag
+                            v-if="index === 0 || !tempSearch"
+                            :key="item + index"
+                            type="primary"
+                            :closable="!selectDisabled"
+                            :size="collapseTagSize"
+                            disable-transitions
+                            @close="deleteTag(index)"
+                        >
+                        <span class="el-selector__tags-text">{{ item }}</span>
+                    </el-tag>
+                    <el-tag
+                        v-else-if="tempSearch && index === 1"
+                        :key="item + index"
+                        :size="collapseTagSize"
+                        type="primary"
+                    >
+                        <span class="el-selector__tags-text"
+                            >+ {{ selected.length - 1 }}</span
+                        >
+                    </el-tag>
+                </template>
+            </transition-group>
+        </div>
+        <el-input
+            ref="reference"
+            v-model="selectedLabel"
+            :disabled="selectDisabled"
+            :validate-event="false"
+            :size="selectSize"
+            :placeholder="currentPlaceholder"
+            type="text"
+            :class="inputClass"
+            @focus="handleFocus"
+            @mouseenter.native="inputHovering = true"
+            @mouseleave.native="inputHovering = false"
+        >
+            <i v-if="prefixIconClass" slot="prefix" :class="prefixIconClass" />
+        </el-input>
     </div>
-    <el-input
-      ref="reference"
-      v-model="selectedLabel"
-      :disabled="selectDisabled"
-      :validate-event="false"
-      :size="selectSize"
-      :placeholder="currentPlaceholder"
-      type="text"
-      :class="inputClass"
-      @focus="handleFocus"
-      @mouseenter.native="inputHovering = true"
-      @mouseleave.native="inputHovering = false"
-    >
-      <i v-if="prefixIconClass" slot="prefix" :class="prefixIconClass" />
-    </el-input>
-  </div>
-
 </template>
 <script>
-import { addResizeListener, removeResizeListener } from '@/plugins/element-ui/src/utils/resize-event'
-import emitter from '@/plugins/element-ui/src/mixins/emitter'
+import {
+    addResizeListener,
+    removeResizeListener,
+} from "@/plugins/element-ui/src/utils/resize-event";
+import emitter from "@/plugins/element-ui/src/mixins/emitter";
 const sizeMap = {
-  'medium': 36,
-  'small': 32,
-  'mini': 28
-}
+    medium: 36,
+    small: 32,
+    mini: 28,
+};
 
 export default {
-  name: 'ibps-selector',
-  mixins: [emitter],
-  props: {
-    items: {
-      type: Array
-    },
-    placeholder: {
-      type: String,
-      default: '请选择'
-    },
-    multiple: { // 是否多选
-      type: Boolean,
-      default: false
-    },
-    icon: {
-      type: String,
-      default: 'el-icon-plus'
-    },
-    disabledIcon: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    readonly: {
-      type: Boolean,
-      default: false
-    },
-    showPlaceholder: { // 是否显示占位符
-      type: Boolean,
-      default: false
-    },
-    /**
-     * 只读样式 【text original】
-     */
-    readonlyText: {
-      type: String,
-      default: 'original'
-    },
-    inputBorderStyle: {
-      type: String
-    },
-    size: {
-      type: String,
-      default: 'mini'
-    }
-  },
-  data() {
-    return {
-      query: '',
-      inputLength: 20,
-      inputWidth: 0,
-      inputHovering: false,
-      selected: []
-    }
-  },
-  computed: {
-    hasValue() {
-      return this.items && this.items.length > 0
-    },
-    selectedLabel() {
-      return this.hasValue ? ' ' : ''
-    },
-    prefixIconClass() {
-      let classes = ['el-selector__caret', 'el-input__icon']
-      if ((this.disabled || this.readonly) && !this.disabledIcon) {
-        return
-      }
-
-      if (this.hasValue) {
-        classes = [...classes, this.icon, 'is-show-close']
-      } else {
-        classes.push(this.icon)
-      }
-      return classes
-    },
-    inputClass() {
-      let classes = []
-      if (this.readonlyText === 'text') {
-        classes = ['el-selector__readonly-text']
-      }
-      if (this.inputBorderStyle) {
-        classes = [...classes, 'el-selector__' + this.inputBorderStyle]
-      }
-      return classes
-    },
-    selectDisabled() {
-      return this.disabled || (this.elForm || {}).disabled
-    },
-    selectSize() {
-      return this.size || (this.elFormItem || {}).elFormItemSize || (this.$ELEMENT || {}).size
+    name: "ibps-selector",
+    mixins: [emitter],
+    props: {
+        items: {
+            type: Array,
+        },
+        placeholder: {
+            type: String,
+            default: "请选择",
+        },
+        multiple: {
+            // 是否多选
+            type: Boolean,
+            default: false,
+        },
+        icon: {
+            type: String,
+            default: "el-icon-plus",
+        },
+        disabledIcon: {
+            type: Boolean,
+            default: false,
+        },
+        disabled: {
+            type: Boolean,
+            default: false,
+        },
+        readonly: {
+            type: Boolean,
+            default: false,
+        },
+        showPlaceholder: {
+            // 是否显示占位符
+            type: Boolean,
+            default: false,
+        },
+        /**
+         * 只读样式 【text original】
+         */
+        readonlyText: {
+            type: String,
+            default: "original",
+        },
+        inputBorderStyle: {
+            type: String,
+        },
+        size: {
+            type: String,
+            default: "mini",
+        },
+        tempSearch: { // 是否是数据模板使用的筛选条件
+            type: Boolean,
+            default: false
+        }
     },
-    collapseTagSize() {
-      return ['small', 'mini'].indexOf(this.selectSize) > -1
-        ? 'mini'
-        : 'small'
+    data() {
+        return {
+            query: "",
+            inputLength: 20,
+            inputWidth: 0,
+            inputHovering: false,
+            selected: [],
+        };
     },
-    currentPlaceholder() {
-      if (!this.showPlaceholder && (this.readonly || this.selectDisabled)) {
-        return ''
-      }
+    computed: {
+        hasValue() {
+            return this.items && this.items.length > 0;
+        },
+        selectedLabel() {
+            return this.hasValue ? " " : "";
+        },
+        prefixIconClass() {
+            let classes = ["el-selector__caret", "el-input__icon"];
+            if ((this.disabled || this.readonly) && !this.disabledIcon) {
+                return;
+            }
 
-      if (!this.items || (Array.isArray(this.items) && this.items.length === 0)) {
-        return this.placeholder
-      } else {
-        return ''
-      }
-    }
-  },
-  watch: {
-    items(val) {
-      if(val){
-      this.setSelected()
-      }
-    }
-  },
-  mounted() {
-    addResizeListener(this.$el, this.handleResize)
+            if (this.hasValue) {
+                classes = [...classes, this.icon, "is-show-close"];
+            } else {
+                classes.push(this.icon);
+            }
+            return classes;
+        },
+        inputClass() {
+            let classes = [];
+            if (this.readonlyText === "text") {
+                classes = ["el-selector__readonly-text"];
+            }
+            if (this.inputBorderStyle) {
+                classes = [...classes, "el-selector__" + this.inputBorderStyle];
+            }
+            return classes;
+        },
+        selectDisabled() {
+            return this.disabled || (this.elForm || {}).disabled;
+        },
+        selectSize() {
+            return (
+                this.size ||
+                (this.elFormItem || {}).elFormItemSize ||
+                (this.$ELEMENT || {}).size
+            );
+        },
+        collapseTagSize() {
+            return ["small", "mini"].indexOf(this.selectSize) > -1
+                ? "mini"
+                : "small";
+        },
+        currentPlaceholder() {
+            if (
+                !this.showPlaceholder &&
+                (this.readonly || this.selectDisabled)
+            ) {
+                return "";
+            }
 
-    const reference = this.$refs.reference
-    this.$nextTick(() => {
-      if (reference && reference.$el) {
-        this.inputWidth = reference.$el.getBoundingClientRect().width
-      }
-    })
-    this.setSelected()
-  },
-  beforeDestroy() {
-    removeResizeListener(this.$el, this.handleResize)
-  },
-  methods: {
-    setSelected() {
-      const result = []
-      if (Array.isArray(this.items)) {
-        this.items.forEach(item => {
-          result.push(item)
-        })
-      }
-      this.selected = result
-      if (this.multiple) {
-        this.$nextTick(this.resetInputHeight)
-      }
+            if (
+                !this.items ||
+                (Array.isArray(this.items) && this.items.length === 0)
+            ) {
+                return this.placeholder;
+            } else {
+                return "";
+            }
+        },
     },
-    resetInputWidth() {
-      if (!this.$refs.reference) return
-      this.inputWidth = this.$refs.reference.$el.getBoundingClientRect().width
+    watch: {
+        items(val) {
+            if (val) {
+                this.setSelected();
+            }
+        },
     },
-    resetInputHeight() {
-      this.$nextTick(() => {
-        if (!this.$refs.reference) return
-        const inputEl = this.$refs.reference.$refs.input
-        const tags = this.$refs.tags
-        let height = sizeMap[this.selectSize] || 40
-        if (this.selected.length !== 0) {
-          height = Math.max((tags.clientHeight + (tags.clientHeight > height ? 6 : 0)), height)
-        }
-        inputEl.style.height = `${height}px`
-      })
+    mounted() {
+        addResizeListener(this.$el, this.handleResize);
+
+        const reference = this.$refs.reference;
+        this.$nextTick(() => {
+            if (reference && reference.$el) {
+                this.inputWidth = reference.$el.getBoundingClientRect().width;
+            }
+        });
+        this.setSelected();
     },
-    handleResize() {
-      this.resetInputWidth()
-      if (this.multiple) this.resetInputHeight()
+    beforeDestroy() {
+        removeResizeListener(this.$el, this.handleResize);
     },
-    handleFocus() {
-      if (this.disabled) return
-      this.$refs.reference.blur()
-      this.$emit('click')
+    methods: {
+        setSelected() {
+            const result = [];
+            if (Array.isArray(this.items)) {
+                this.items.forEach((item) => {
+                    result.push(item);
+                });
+            }
+            this.selected = result;
+            if (this.multiple) {
+                this.$nextTick(this.resetInputHeight);
+            }
+        },
+        resetInputWidth() {
+            if (!this.$refs.reference) return;
+            this.inputWidth =
+                this.$refs.reference.$el.getBoundingClientRect().width;
+        },
+        resetInputHeight() {
+            this.$nextTick(() => {
+                if (!this.$refs.reference) return;
+                const inputEl = this.$refs.reference.$refs.input;
+                const tags = this.$refs.tags;
+                let height = sizeMap[this.selectSize] || 40;
+                if (this.selected.length !== 0) {
+                    height = Math.max(
+                        tags.clientHeight +
+                            (tags.clientHeight > height ? 6 : 0),
+                        height
+                    );
+                }
+                inputEl.style.height = `${height}px`;
+            });
+        },
+        handleResize() {
+            this.resetInputWidth();
+            if (this.multiple) this.resetInputHeight();
+        },
+        handleFocus() {
+            if (this.disabled) return;
+            this.$refs.reference.blur();
+            this.$emit("click");
+        },
+        deleteTag(index) {
+            this.$emit("remove", index);
+        },
     },
-    deleteTag(index) {
-      this.$emit('remove', index)
-    }
-  }
-}
+};
 </script>