Skip to content

Commit

Permalink
feat(search): implement column search mode and enhance search input f…
Browse files Browse the repository at this point in the history 
…unctionality
  • Loading branch information
@thexqn
thexqn committed Dec 18, 2024
1 parent 0e6073c commit e88f38e
Show file tree
Hide file tree
Showing 3 changed files with 234 additions and 67 deletions.
2 changes: 1 addition & 1 deletion cmdb-ui/src/modules/cmdb/views/resource_search_2/resourceSearch/components/filterPopover.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,7 @@ export default {
saveCondition(isSubmit) {
this.$refs.conditionFilterRef.handleSubmit()
this.$nextTick(() => {
this.$emit('saveCondition', isSubmit)
this.$emit('saveCondition', isSubmit, this.$parent.isColumnSearch ? 'column' : 'normal')
this.visible = false
})
},
Expand Down
256 changes: 201 additions & 55 deletions cmdb-ui/src/modules/cmdb/views/resource_search_2/resourceSearch/components/searchInput.vue
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,59 @@
<template>
<div :class="['search-input', classType ? 'search-input-' + classType : '']">
<a-input
:value="searchValue"
class="search-input-component"
:placeholder="$t('cmdb.ciType.searchInputTip')"
@change="handleChangeSearchValue"
@pressEnter="saveCondition(true)"
>
<a-icon
class="search-input-component-icon"
slot="prefix"
type="search"
@click="saveCondition(true)"
/>
</a-input>
<FilterPopover
ref="filterPpoverRef"
:CITypeGroup="CITypeGroup"
:allAttributesList="allAttributesList"
:expression="expression"
:selectCITypeIds="selectCITypeIds"
@changeFilter="changeFilter"
@updateAllAttributesList="updateAllAttributesList"
@saveCondition="saveCondition"
/>
<div :class="['search-input', classType ? 'search-input-' + classType : '', { 'column-search-mode': isColumnSearch }]">
<div class="search-area">
<div v-show="!isColumnSearch" class="input-wrapper">
<a-input
:value="searchValue"
class="search-input-component"
:placeholder="$t('cmdb.ciType.searchInputTip')"
@change="handleChangeSearchValue"
@pressEnter="saveCondition(true, 'normal')"
/>
<a-icon
class="search-icon"
type="search"
@click="saveCondition(true, 'normal')"
/>
</div>

<div v-show="isColumnSearch" class="textarea-wrapper">
<div class="textarea-container">
<a-textarea
:value="searchValue"
class="column-search-component"
:rows="4"
:placeholder="$t('cmdb.ciType.columnSearchInputTip')"
@change="handleChangeColumnSearchValue"
@pressEnter="handlePressEnter"
/>
<a-icon
class="search-icon"
type="search"
@click="saveCondition(true, 'column')"
/>
</div>
</div>

<div class="operation-area">
<FilterPopover
ref="filterPpoverRef"
:CITypeGroup="CITypeGroup"
:allAttributesList="allAttributesList"
:expression="expression"
:selectCITypeIds="selectCITypeIds"
@changeFilter="changeFilter"
@updateAllAttributesList="updateAllAttributesList"
@saveCondition="saveCondition"
/>

<div class="column-search-btn" @click="toggleColumnSearch">
<a-icon class="column-search-btn-icon" type="menu" />
<span class="column-search-btn-title">
{{ isColumnSearch ? $t('cmdb.ciType.rowSearchMode') : $t('cmdb.ciType.columnSearchMode') }}
</span>
</div>
</div>
</div>

<div v-if="copyText" class="expression-display">
<span class="expression-display-text">{{ copyText }}</span>
Expand Down Expand Up @@ -69,11 +99,12 @@ export default {
classType: {
type: String,
default: ''
},
isColumnSearch: {
type: Boolean,
default: false
}
},
data() {
return {}
},
computed: {
// 复制文字展示，与实际文本复制内容区别在于，未选择模型时不展示所有模型拼接数据
copyText() {
Expand All @@ -88,7 +119,14 @@ export default {
textArray.push(exp)
}
if (this.searchValue) {
textArray.push(`*${this.searchValue}*`)
let processedValue = this.searchValue
if (this.isColumnSearch) {
const values = this.searchValue.split('\n').filter(v => v.trim())
if (values.length) {
processedValue = `(${values.join(';')})`
}
}
textArray.push(`${!this.isColumnSearch ? '*' : ''}${processedValue}${!this.isColumnSearch ? '*' : ''}`)
}

return textArray.length ? `q=${textArray.join(',')}` : ''
Expand All @@ -98,8 +136,8 @@ export default {
updateAllAttributesList(value) {
this.$emit('updateAllAttributesList', value)
},
saveCondition(isSubmit) {
this.$emit('saveCondition', isSubmit)
saveCondition(isSubmit, searchType = 'normal') {
this.$emit('saveCondition', isSubmit, searchType)
},
handleChangeSearchValue(e) {
const value = e.target.value
Expand All @@ -125,7 +163,9 @@ export default {
ciTypeIds.push(...ids)
})
}
const copyText = `${ciTypeIds?.length ? `_type:(${ciTypeIds.join(';')})` : ''}${exp ? `,${exp}` : ''}${searchValue ? `,*${searchValue}*` : ''}`
const copyText = `${ciTypeIds?.length ? `_type:(${ciTypeIds.join(';')})` : ''}${exp ? `,${exp}` : ''}${
searchValue ? `,${!this.isColumnSearch ? '*' : ''}${searchValue}${!this.isColumnSearch ? '*' : ''}` : ''
}`

this.$copyText(copyText)
.then(() => {
Expand All @@ -134,6 +174,35 @@ export default {
.catch(() => {
this.$message.error(this.$t('cmdb.ci.copyFailed'))
})
},

toggleColumnSearch() {
this.$emit('toggleSearchMode', !this.isColumnSearch)
this.saveCondition(false, !this.isColumnSearch ? 'column' : 'normal')
},

handleChangeColumnSearchValue(e) {
const value = e.target.value
this.changeFilter({
name: 'searchValue',
value
})
},

handlePressEnter(e) {
if (this.isColumnSearch) {
// 列搜索模式下，按下 Enter 键时阻止默认行为并插入换行符
e.preventDefault()
const value = this.searchValue || ''
const cursorPosition = e.target.selectionStart
const newValue = value.slice(0, cursorPosition) + '\n' + value.slice(cursorPosition)
this.changeFilter({
name: 'searchValue',
value: newValue
})
} else {
this.saveCondition(true, 'normal')
}
}
}
}
Expand All @@ -142,43 +211,107 @@ export default {
<style lang="less" scoped>
.search-input {
width: 100%;
height: 48px;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
gap: 8px;
margin-bottom: 16px;

.search-area {
display: flex;
align-items: flex-start;
min-height: 48px;
width: 100%;
}

&-component {
height: 100%;
.input-wrapper {
position: relative;
flex-grow: 1;
background-color: #FFFFFF;
border: none;
font-size: 14px;
border-radius: 48px;
overflow: hidden;

&-icon {
.search-input-component {
height: 48px;
width: 100%;
background-color: #FFFFFF;
border: 1px solid #d9d9d9;
font-size: 14px;
border-radius: 8px;

/deep/ input {
height: 100%;
padding-right: 40px;
}
}

.search-icon {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
color: #2F54EB;
font-size: 14px;
cursor: pointer;
}
}

.textarea-wrapper {
flex-grow: 1;

/deep/ & > input {
height: 100%;
margin-left: 10px;
border: solid 1px transparent;
box-shadow: none;
.textarea-container {
position: relative;
width: 100%;
max-height: 200px;

&:focus {
border-color: @primary-color;
.column-search-component {
width: 100%;
max-height: 200px;
background-color: #FFFFFF;
border: 1px solid #d9d9d9;
font-size: 14px;
border-radius: 8px;
padding-right: 35px;
resize: none;
transition: all 0.3s;

&:hover, &:focus {
border-color: #40a9ff;
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
}

.search-icon {
position: absolute;
right: 12px;
top: 12px;
color: #2F54EB;
font-size: 14px;
cursor: pointer;
}
}
}

&-after {
height: 38px;
justify-content: flex-start;
.operation-area {
display: flex;
align-items: center;
height: 48px;
margin-left: 10px;
}

.search-input-component {
max-width: 524px;
.column-search-btn {
flex-shrink: 0;
display: flex;
align-items: center;
margin-left: 13px;
cursor: pointer;

&-icon {
color: #2F54EB;
font-size: 12px;
}

&-title {
font-size: 14px;
font-weight: 400;
color: #2F54EB;
margin-left: 3px;
}
}

Expand All @@ -201,5 +334,18 @@ export default {
cursor: pointer;
}
}

.search-input-component,
.column-search-component {
&:hover {
border-color: #40a9ff;
}

&:focus {
border-color: #40a9ff;
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
outline: none;
}
}
}
</style>
Loading

0 comments on commit e88f38e

Please sign in to comment.