列表查询自定义对话框组件清空功能

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

@@ -10,8 +10,10 @@
             :size="size"
             :readonly-text="readonlyText"
             :temp-search="tempSearch"
+            :dialog-search="dialogSearch"
             @click="handleSelectorClick"
             @remove="handleSelectorRemove"
+            @removeAll="handleSelectorRemoveAll"
             v-on="$listeners"
         />
         <data-template-dialog
@@ -118,7 +120,8 @@ export default {
             selectorVisible: false,
             selectorValue: this.multiple ? [] : {},
             cacheData: {},
-            bindIdValue: ''
+            bindIdValue: '',
+            dialogSearch: true // 是否为自定义对话框
         }
     },
     computed: {
@@ -442,7 +445,16 @@ export default {
             this.handleInput(val)
             this.emitChange(val)
         },
-
+        handleSelectorRemoveAll (index) {
+            if (this.multiple) {
+                this.selectorValue = []
+            } else {
+                this.selectorValue = {}
+            }
+            const val = this.getValue()
+            this.handleInput(val)
+            this.emitChange(val)
+        },
         handleSelectorActionEvent (buttonKey, data) {
             let val
             switch (buttonKey) {

src/components/ibps-selector/selector.vue

@@ -6,7 +6,7 @@
         <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'}"
+            :style="{ 'max-width': inputWidth + 'px', width: '80%',overflow: 'hidden','white-space': 'ellipsis', 'word-break': 'break-all','text-overflow': 'ellipsis'}"
             class="el-selector__tags"
         >
             <transition-group @after-leave="resetInputHeight">
@@ -50,6 +50,8 @@
             @mouseleave.native="inputHovering = false"
         >
             <i v-if="prefixIconClass" slot="prefix" :class="prefixIconClass" />
+            <!-- 来自模板的查询，且为自定义对话框，且有值时显示全部清空图标 -->
+            <i v-if="selected.length > 0 && tempSearch && dialogSearch" slot="suffix" style="position: relative;;z-index: 100;" class="el-input__icon el-icon-circle-close" @click.stop="deleteAllTag()" />
         </el-input>
     </div>
 
@@ -115,7 +117,12 @@ export default {
         tempSearch: { // 是否是数据模板使用的筛选条件
             type: Boolean,
             default: false
+        },
+        dialogSearch: { // 是否是自定义对话框
+            type: Boolean,
+            default: false
         }
+
     },
     data () {
         return {
@@ -237,6 +244,9 @@ export default {
         },
         deleteTag (index) {
             this.$emit('remove', index)
+        },
+        deleteAllTag (index) {
+            this.$emit('removeAll')
         }
     }
 }