diff --git a/nezha-fronted/src/components/common/searchBox/searchBox.vue b/nezha-fronted/src/components/common/searchBox/searchBox.vue index f869499a6..fc39dcbb3 100644 --- a/nezha-fronted/src/components/common/searchBox/searchBox.vue +++ b/nezha-fronted/src/components/common/searchBox/searchBox.vue @@ -34,18 +34,18 @@ - +
-
+
K {{$t(item.i18n || item.name)}} {{item.type}}
- : {{item.label}} {{item.remark}} + : {{item.label}} {{item.remark}}
@@ -141,7 +141,9 @@ export default { valueShow: false, // value 的下拉 inputReadonly: false, dialogObjValueList: [], - selectIndex: -1, + selectIndex: -1, // 当前选择的选项 + oldSelectIndex: -1, // 上一次选择的选项 + blurTimer: null, valueList: [], oldValueList: [], symbolList: [], @@ -193,7 +195,7 @@ export default { label: 'not wildcard', value: 'not wildcard', remark: '反向模糊匹配' - }, + } // { // label: 'exist', // value: 'exist', @@ -267,7 +269,7 @@ export default { this.selectIndex++ this.scroll() } - this.oldSearchStr = this.searchStr + // this.oldSearchStr = this.searchStr }, keyup (e) { // 6 @@ -275,7 +277,11 @@ export default { // 选择对应条件 setTimeout(() => { if (this.keyShow) { - this.selectKey(this.searchList[this.selectIndex] || { name: this.searchStr }) + if (this.selectIndex === -1) { + this.emitSearch() + } else { + this.selectKey(this.searchList[this.selectIndex] || { name: this.searchStr }) + } } else if (this.symbolShow) { this.selectSymbol(this.symbolList[this.selectIndex]) } else if (this.valueShow) { @@ -309,6 +315,7 @@ export default { } }, selectKey (item) { + console.log(item) this.key = item.name this.searchStr = this.$t(item.i18n || item.name) + ':' this.contentShow('symbol') @@ -316,6 +323,8 @@ export default { this.setSymBolList() }, searchInputFocus () { // 根据input的内容显示对应的下拉框 + clearTimeout(this.blurTimer) + this.blurTimer = null const index = this.searchStr.indexOf(':') this.visible = true if (index === -1) { @@ -330,6 +339,15 @@ export default { }, selectSymbol (item) { this.symbol = true + if (!item) { + this.selectSymbolValue = '=' + this.addSelectArr(this.searchStr) + this.searchStr = '' + this.contentShow() + this.symbol = false + this.key = '' + return + } this.selectSymbolValue = item.value switch (item.value) { case '=' : @@ -490,7 +508,7 @@ export default { this.key = keyStr } } - console.log(this.key) + // console.log(this.key) if (key === 'symbol') { // 处理valueList // this.setValueList('') // const findItem = this.oldSearchList.find(item => item.name === this.key) @@ -502,7 +520,7 @@ export default { // } } }, - changeSearchStr () { + inputSearchStr () { this.selectIndex = -1 const arr = this.searchStr.split(':') if (arr.length > 1) { @@ -517,10 +535,20 @@ export default { this.setSearchList(arr[0]) } }, + changeSearchStr () { + console.log(this.oldSelectIndex, 'this.oldSelectIndex') + // const arr = this.searchStr.split(':') + this.blurTimer = setTimeout(() => { + if ((this.searchStr !== this.oldSearchStr) && this.searchStr) { + this.oldSearchStr = this.searchStr + this.emitSearch() + } + }, 100) + }, setSearchList (str) { this.selectIndex = -1 if (!str) { - this.searchList = this.$loadsh.cloneDeep(this.oldSearchList) + this.searchList = this.$lodash.cloneDeep(this.oldSearchList) return } this.searchList = this.oldSearchList.filter(item => this.$t(item.i18n).indexOf(str) !== -1) @@ -610,6 +638,13 @@ export default { realValue = findItem ? findItem.value : value } const findItem = this.selectArr.find(item => item.key === key) + const findKeyItem = this.oldSearchList.find(item => item.name === this.key) + if (!findKeyItem) { + this.setSearchList() + this.oldSearchStr = '' + this.searchStr = '' + return + } let idKey = this.key if (key[0] === '-' && key[1] === '*') { idKey = '-*' + this.key @@ -633,6 +668,17 @@ export default { this.emitSearch() this.inputReadonly = false // todo 更新路径参数 + if (this.targetTab) { + const params = this.$lodash.cloneDeep(this.$route.query) + Object.keys(params).forEach(key => { + if (!params[key]) { + delete params[key] + } + }) + params.bottomSelectArr = this.$lodash.cloneDeep(this.selectArr) + this.$router.replace({ path: this.$route.path, query: params }).catch(err => {}) + } + this.oldSearchStr = '' // todo 更新历史记录 }, emitSearch () { @@ -640,6 +686,11 @@ export default { this.selectArr.forEach(item => { obj[item.idKey] = item.realValue }) + if (this.searchStr) { + obj.q = this.searchStr + } else { + obj.q = '' + } this.$emit('search', obj) }, removeSelectArr (index) { @@ -654,7 +705,7 @@ export default { }, editTag (tag, index) { this.editTagIndex = index - this.editTagObj = this.$loadsh.cloneDeep(this.selectArr[index]) + this.editTagObj = this.$lodash.cloneDeep(this.selectArr[index]) this.dialogShow = true this.editDialogObj.value = this.editTagObj.value const keyStr = this.editTagObj.key @@ -711,7 +762,7 @@ export default { return findItem.value.indexOf(item) === index // 因为indexOf 只能查找到第一个 }) } else { - this.selectArr[this.editTagIndex] = this.$loadsh.cloneDeep(this.editTagObj) + this.selectArr[this.editTagIndex] = this.$lodash.cloneDeep(this.editTagObj) } }, querySearch (queryString, cb) { @@ -754,7 +805,14 @@ export default { }) // todo 初始化已选择的参数 // 普通表格页面 + if (!this.targetTab) { + this.selectArr = this.$router.query ? this.$router.query.selectArr : [] + } // 底部弹窗页面 + if (this.targetTab) { + this.selectArr = this.$router.query ? this.$router.query.bottomSelectArr : [] + } + this.emitSearch() }, calcType () { // 处理各个页面的from targetTab 确定查询的type if (this.from && !this.targetTab) { @@ -776,8 +834,8 @@ export default { this.symbolShow = false // symbol 的下拉 this.valueShow = false // value 的下拉 this.inputWidth = 400 - this.searchStr = '' - this.searchList = this.$loadsh.cloneDeep(this.oldSearchList) + // this.searchStr = '' + this.searchList = this.$lodash.cloneDeep(this.oldSearchList) this.symbolList = [] this.valueList = [] this.inputReadonly = false @@ -815,17 +873,20 @@ export default { } }, watch: { - // searchMsg: { + // selectIndex: { // immediate: true, // deep: true, - // handler (n) { - // // console.log(n) - // this.searchList = n.searchLabelList || [] - // this.oldSearchList = n.searchLabelList || [] + // handler (n, o) { + // console.log(n, o) + // this.oldSelectIndex = o + // if (typeof o === 'undefined') { + // this.oldSelectIndex = -1 + // } // } // }, searchStr: { handler (n, o) { + // this.oldSearchStr = o // 2 3 const index = this.searchStr.indexOf(':') if (index === -1) { diff --git a/nezha-fronted/src/components/page/alert/alertMessage.vue b/nezha-fronted/src/components/page/alert/alertMessage.vue index 118ed3545..b284fe137 100644 --- a/nezha-fronted/src/components/page/alert/alertMessage.vue +++ b/nezha-fronted/src/components/page/alert/alertMessage.vue @@ -15,10 +15,10 @@ - - + + + + @@ -218,7 +218,8 @@ export default { chartInfo: {}, alertMessageNzTableHeightOffset: 242, stateOptions: alertMessageConstant.states, - dataListLayout: localStorage.getItem('dataList-layout' + 'alertMessageTable') ? JSON.parse(localStorage.getItem('dataList-layout' + 'alertMessageTable')) : ['searchInput', 'elementSet', 'clickSearch', 'pagination'], + // dataListLayout: localStorage.getItem('dataList-layout' + 'alertMessageTable') ? JSON.parse(localStorage.getItem('dataList-layout' + 'alertMessageTable')) : ['searchInput', 'elementSet', 'clickSearch', 'pagination'], + dataListLayout: localStorage.getItem('dataList-layout' + 'alertMessageTable') ? JSON.parse(localStorage.getItem('dataList-layout' + 'alertMessageTable')) : ['searchInput', 'elementSet', 'pagination'], state: '1', dialogShowText: false, dialogText: '', @@ -436,125 +437,10 @@ export default { this.selectValue.projectIds = [Number(localStorage.getItem('alertMessageProjectId'))] this.searchCheckBox.projectIds = this.selectValue.projectIds.join(',') } - const searchKeys = { - // key: path 键 - // value: vue set 参数 - pageNo: { target: this.pageObj, propertyName: 'pageNo', type: 'number' }, - pageSize: { target: this.pageObj, propertyName: 'pageSize', type: 'number' }, - orderBy: { target: this.$data, propertyName: 'orderBy', type: 'string' }, - sign: '', - ids: { - target: this.searchLabel, - isSearchInput: true, - propertyName: 'ids', - type: 'number', - defaultJson: { - disabled: false, - id: 26, - label: 'ids', - name: 'ID', - type: 'id', - val: '' - }, - jsonKey: 'val' - }, - endpointName: { - target: this.searchLabel, - isSearchInput: true, - propertyName: 'endpointName', - type: 'string', - defaultJson: { - disabled: false, - label: 'endpointName', - name: 'Endpoint', - type: 'input', - val: '' - }, - jsonKey: 'val' - }, - summary: { - target: this.searchLabel, - isSearchInput: true, - propertyName: 'summary', - type: 'number', - defaultJson: { - disabled: false, - label: 'summary', - name: 'Summary', - type: 'input', - val: '' - }, - jsonKey: 'val' - }, - ruleName: { - target: this.searchLabel, - isSearchInput: true, - propertyName: 'ruleName', - type: 'string', - defaultJson: { - disabled: false, - label: 'ruleName', - name: 'Alert rule', - type: 'input', - val: '' - }, - jsonKey: 'val' - }, - assetName: { - target: this.searchLabel, - isSearchInput: true, - propertyName: 'assetName', - type: 'string', - defaultJson: { - disabled: false, - label: 'assetName', - name: 'Asset ', - type: 'input', - val: '' - }, - jsonKey: 'val' - }, - labels: { - target: this.searchLabel, - isSearchInput: true, - propertyName: 'labels', - type: 'string', - defaultJson: { - disabled: false, - label: 'labels', - name: 'Label', - type: 'input', - val: '' - }, - jsonKey: 'val' - }, - ack: { - target: this.searchLabel, - isSearchInput: true, - propertyName: 'acknowledge', - type: 'string', - defaultJson: { - id: 4, - label: 'ack', - name: this.$t('overall.acknowledge'), - val: '', - valnum: '', - valString: '', - listStr: 'ack', - type: 'select', - readonly: true, - disabled: false - }, - jsonKey: 'valnum' - }, - dcIds: { target: this.searchCheckBox, propertyName: 'dcIds', type: 'string', target2: this.selectValue, type2: 'array' }, - moduleIds: { target: this.searchCheckBox, propertyName: 'moduleIds', type: 'string', target2: this.selectValue, type2: 'array' }, - projectIds: { target: this.searchCheckBox, propertyName: 'projectIds', type: 'string', target2: this.selectValue, type2: 'array' }, - severityIds: { target: this.searchCheckBox, propertyName: 'severityIds', type: 'string', target2: this.selectValue, type2: 'array' } - } - this.initQueryFromPath(searchKeys) + this.initQueryFromPath() }, mounted () { + console.log(this.switchTab) if (localStorage.getItem('alertMessageProjectId')) { this.selectValue.projectIds = [Number(localStorage.getItem('alertMessageProjectId'))] // this.$refs.clickSearch.selectValueOut.projectIds = [localStorage.getItem('endpointProjectId')] @@ -901,6 +787,7 @@ export default { if (this.searchTime && this.searchTime.length > 1 && this.searchTime[0] && this.searchTime[1]) { this.$set(this.searchLabel.body, 'startAt', [bus.timeFormate(this.timezoneToUtcTime(bus.formateTimeToTime(this.searchTime[0])), 'YYYY-MM-DD HH:mm:ss')]) this.$set(this.searchLabel.body, 'endAt', [bus.timeFormate(this.timezoneToUtcTime(bus.formateTimeToTime(this.searchTime[1])), 'YYYY-MM-DD HH:mm:ss')]) + this.$set(this.searchLabel.body, 'state', this.state) } else { delete this.searchLabel.startAt delete this.searchLabel.endAt