Merge pull request #2843 from joe511230/v3.2.x_bugfix

UI: 主机字符类型字段支持批量模糊查询
Former-commit-id: e94f2c0

Author: breezeli

src/ui/src/assets/scss/common.scss

@@ -62,7 +62,8 @@ a:focus {
     display: none;
 }
 
-input::-webkit-input-placeholder {
+input::-webkit-input-placeholder,
+textarea::-webkit-input-placeholder {
     color: #c3cdd7;
     font-size: 12px;
 }

src/ui/src/components/hosts/filter/_filter-field-operator.vue

@@ -16,7 +16,7 @@
                         name: this.$t('Common[\'不等于\']')
                     }],
                     'char': [{
-                        id: '$regex',
+                        id: '$multilike',
                         name: this.$t('Common[\'包含\']')
                     }, {
                         id: '$eq',

src/ui/src/components/hosts/filter/_filter.vue

@@ -43,10 +43,10 @@
                         v-else-if="property['bk_property_type'] === 'bool'"
                         v-model="condition[property['bk_obj_id']][property['bk_property_id']]['value']">
                     </cmdb-form-bool-input>
-                    <cmdb-form-associate-input class="filter-field-value filter-field-associate fr"
-                        v-else-if="['singleasst', 'multiasst'].includes(property['bk_property_type'])"
-                        v-model="condition[property['bk_obj_id']][property['bk_property_id']]['value']">
-                    </cmdb-form-associate-input>
+                    <cmdb-search-input class="filter-field-value fr"
+                        v-else-if="['singlechar', 'longchar'].includes(property.bk_property_type)"
+                        v-model="condition[property.bk_obj_id][property.bk_property_id].value">
+                    </cmdb-search-input>
                     <component class="filter-field-value fr" :class="`filter-field-${property['bk_property_type']}`"
                         v-else
                         :is="`cmdb-form-${property['bk_property_type']}`"
@@ -313,14 +313,13 @@
                 }
                 // 填充必要模型查询参数
                 const requiredObj = ['biz', 'host', 'set', 'module']
-                const normalProperties = this.customFieldProperties.filter(property => !['singleasst', 'multiasst'].includes(property['bk_property_type']))
                 requiredObj.forEach(objId => {
                     const objParams = {
                         'bk_obj_id': objId,
                         condition: [],
                         fields: []
                     }
-                    const objProperties = normalProperties.filter(property => property['bk_obj_id'] === objId)
+                    const objProperties = this.customFieldProperties.filter(property => property['bk_obj_id'] === objId)
                     objProperties.forEach(property => {
                         const propertyCondition = this.condition[objId][property['bk_property_id']]
                         // 必要模型参数合法时，填充对应模型的condition
@@ -329,6 +328,8 @@
                             if (propertyCondition.operator === '$in') {
                                 let splitValue = [...(new Set(value.split(',').map(val => val.trim())))]
                                 value = splitValue.length > 1 ? [...splitValue, value] : splitValue
+                            } else if (propertyCondition.operator === '$multilike') {
+                                value = value.split('\n').filter(str => str.trim().length).map(str => str.trim())
                             }
                             objParams.condition.push({
                                 ...propertyCondition,
@@ -377,9 +378,16 @@
             getPropertyCondition (property) {
                 const objId = property['bk_obj_id']
                 const propertyId = property['bk_property_id']
+                const propertyType = property.bk_property_type
+                let operator = '$eq'
+                if (['bk_set_name', 'bk_module_name'].includes(propertyId)) {
+                    operator = '$in'
+                } else if (['singlechar', 'longchar'].includes(propertyType)) {
+                    operator = '$multilike'
+                }
                 const condition = {
                     field: propertyId,
-                    operator: '',
+                    operator: operator,
                     value: ''
                 }
                 const collectionConditon = (this.applyingConditions[objId] || []).find(condition => condition.field === propertyId)
@@ -578,6 +586,7 @@
         &.sticky {
             border-top: 1px solid $cmdbBorderColor;
             padding: 10px 20px 0;
+            z-index: 101;
         }
         .collection-button.collecting {
             color: #ffb400;

src/ui/src/components/ui/form/search-input.vue

@@ -0,0 +1,130 @@
+<template>
+    <div class="cmdb-search-input">
+        <div class="search-input-wrapper">
+            <textarea ref="textarea"
+                v-model="localValue"
+                :rows="rows"
+                :placeholder="$t('请输入关键词')"
+                @focus="handleFocus"
+                @blur="handleBlur"
+                @input="setValue"
+                @keydown.enter="handleEnter"
+                @keydown.delete="handleDelete">
+            </textarea>
+            <i class="bk-icon icon-close"
+                v-show="focus && localValue.length"
+                @click="handleClear">
+            </i>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'cmdb-search-input',
+        props: {
+            value: {
+                type: String,
+                default: ''
+            }
+        },
+        data () {
+            return {
+                localValue: this.value,
+                rows: 1,
+                timer: null,
+                focus: false
+            }
+        },
+        watch: {
+            value (value) {
+                this.setLocalValue()
+            }
+        },
+        created () {
+            this.setRows()
+        },
+        methods: {
+            setLocalValue () {
+                if (this.localValue !== this.value) {
+                    this.localValue = this.value
+                }
+            },
+            setValue () {
+                this.$emit('input', this.localValue)
+            },
+            handleClear () {
+                this.timer && clearTimeout(this.timer)
+                this.localValue = ''
+                this.rows = 1
+                this.$refs.textarea.focus()
+                this.setValue()
+                this.$emit('clear')
+            },
+            setRows () {
+                const rows = this.localValue.split('\n').length
+                this.rows = Math.min(5, Math.max(rows, 1))
+            },
+            handleFocus () {
+                this.setRows()
+                this.focus = true
+            },
+            handleBlur () {
+                this.focus = false
+                this.timer = setTimeout(() => {
+                    this.rows = 1
+                    this.$refs.textarea.scrollTop = 0
+                }, 200)
+            },
+            handleEnter () {
+                this.rows = Math.min(this.rows + 1, 5)
+            },
+            handleDelete () {
+                this.$nextTick(() => {
+                    this.setRows()
+                })
+            }
+        }
+    }
+</script>
+<style lang="scss" scoped>
+    .cmdb-search-input {
+        position: relative;
+        .search-input-wrapper {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            line-height: 24px;
+            z-index: 100;
+            textarea {
+                display: block;
+                width: 100%;
+                padding: 5px 20px 5px 10px;
+                border: 1px solid #c3cdd7;
+                resize: none;
+                font-size: 14px;
+                @include scrollbar-y;
+            }
+            .icon-close {
+                display: block;
+                position: absolute;
+                top: 50%;
+                right: 4px;
+                width: 28px;
+                height: 28px;
+                line-height: 28px;
+                text-align: center;
+                transform: translate3d(0, -50%, 0) scale(.5);
+                font-size: 12px;
+                border-radius: 50%;
+                background-color: #C4C6CC;
+                color: #fff;
+                cursor: pointer;
+                &:hover {
+                    background-color: #979BA5;
+                }
+            }
+        }
+    }
+</style>

src/ui/src/components/ui/index.js

@@ -25,6 +25,7 @@ import tree from './tree/tree.vue'
 import resize from './other/resize.vue'
 import collapseTransition from './transition/collapse.js'
 import collapse from './collapse/collapse'
+import searchInput from './form/search-input.vue'
 const install = (Vue, opts = {}) => {
     const components = [
         businessSelector,
@@ -52,7 +53,8 @@ const install = (Vue, opts = {}) => {
         tree,
         resize,
         collapseTransition,
-        collapse
+        collapse,
+        searchInput
     ]
     components.forEach(component => {
         Vue.component(component.name, component)
@@ -85,5 +87,6 @@ export default {
     associateInput,
     tree,
     resize,
-    collapseTransition
+    collapseTransition,
+    searchInput
 }