diff --git a/nezha-fronted/src/components/common/js/tools.js b/nezha-fronted/src/components/common/js/tools.js index c29fb5646..30d87c5d4 100644 --- a/nezha-fronted/src/components/common/js/tools.js +++ b/nezha-fronted/src/components/common/js/tools.js @@ -1093,3 +1093,37 @@ export function dealLegendAlias (legend, expression) { return expression } } +// 滚动加载更多 +let heightLoad = function () { + +} +export const loadMore = { + bind (el, binding) { + console.log(el, binding) + // 获取element,定义scroll + const selectDom = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap') + // selectDom.addEventListener('scroll', function (e) { + // console.log(e) + // const height = this.scrollHeight - this.scrollTop <= this.clientHeight + // if (height) { + // binding.value() + // } + // }) + heightLoad = function () { + const height = this.scrollHeight - this.scrollTop <= this.clientHeight + if (height && el.hasMore) { + binding.value.load() + } + } + selectDom.addEventListener('scroll', heightLoad) + }, + update (el, binding) { + el.hasMore = binding.value.hasMore + }, + unbind (el, binding) { + const selectDom = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap') + if (selectDom) { + selectDom.removeEventListener('scroll', heightLoad) + } + } +} diff --git a/nezha-fronted/src/components/common/searchBox/searchBox.vue b/nezha-fronted/src/components/common/searchBox/searchBox.vue index fc39dcbb3..26aa7ce38 100644 --- a/nezha-fronted/src/components/common/searchBox/searchBox.vue +++ b/nezha-fronted/src/components/common/searchBox/searchBox.vue @@ -19,15 +19,15 @@ >
- - {{item.key}} : + + {{item.i18n}} : {{tag}} - +
- {{item.key}} : + {{item.i18n}} : {{item.value[0]}} {{item.value.length}}项 @@ -38,28 +38,28 @@
-
+
K {{$t(item.i18n || item.name)}} {{item.type}}
-
+
: {{item.label}} {{item.remark}}
-
+
V {{item}} {{item.remark}}
- 加载更多。。。 + 正在加载...
-
+
V {{item.label}} {{item.remark}}
@@ -67,17 +67,14 @@
- + - + + + - + @@ -87,17 +84,49 @@ + + + + + :value="item.value"> @@ -148,11 +177,15 @@ export default { oldValueList: [], symbolList: [], editTagIndex: '', - editTagObj: {}, + dialogStr: '', + dialogSraechStr: '', + editTagObj: {}, // 保存一份编辑的备份数据 editDialogObj: { - key: '', symbol: '', - value: [] + value: [], + i18n: '', + name: '', + realValue: [] }, dialogShow: false, oldSymbolList: [ @@ -214,7 +247,7 @@ export default { keywordLoad: false, valueListInfo: { pageNo: 1, - pageSize: 10, + pageSize: 20, total: 0, loading: false } @@ -334,6 +367,7 @@ export default { this.contentShow('symbol') } else { this.symbol = true + this.setValueList() this.contentShow('value') } }, @@ -462,7 +496,8 @@ export default { this.selectSymbolValue = '' }, selectValue (value) { - this.searchStr = this.searchStr + value + const arr = this.searchStr.split(':') + this.searchStr = arr[0] + ':' + value this.addSelectArr(this.searchStr) this.searchStr = '' this.contentShow() @@ -536,10 +571,10 @@ export default { } }, changeSearchStr () { - console.log(this.oldSelectIndex, 'this.oldSelectIndex') + console.log(this.searchStr, 'this.oldSelectIndex', this.oldSearchStr) // const arr = this.searchStr.split(':') this.blurTimer = setTimeout(() => { - if ((this.searchStr !== this.oldSearchStr) && this.searchStr) { + if (this.searchStr !== this.oldSearchStr) { this.oldSearchStr = this.searchStr this.emitSearch() } @@ -571,8 +606,9 @@ export default { return this[findItemType].indexOf(index) !== -1 }) }, - setValueList (str) { - const findItem = this.oldSearchList.find(item => this.$t(item.i18n) == this.key || this.key == item.name) + setValueList () { + const key = this.dialogStr || this.key + const findItem = this.oldSearchList.find(item => this.$t(item.i18n) == key || key == item.name) this.selectIndex = -1 this.valueShow = false this.searchBoxType = '' @@ -595,7 +631,11 @@ export default { this.valueList = [] this.valueListInfo.pageNo = 0 this.valueListInfo.total = -1 - this.valueListLoad('') + if (this.dialogStr) { + this.dialogValueListLoad() + } else { + this.valueListLoad('') + } }, valueListLoad () { this.valueListInfo.pageNo++ @@ -609,7 +649,47 @@ export default { const params = { name: name, text: this.searchStr.split(':')[1], - pageNo: this.valueListInfo.pageNo + pageNo: this.valueListInfo.pageNo, + pageSize: this.valueListInfo.pageSize + } + this.$get('/fulltext/keyword', params).then(res => { + this.valueListInfo.loading = false + if (res.code == 200) { + this.oldValueList = [...this.oldValueList, ...res.data.list] + this.valueList = [...this.oldValueList] + this.valueListInfo.total = res.data.total + // if (!this.valueList.length) { + // this.valueShow = false + // } else { + // this.valueShow = true + // } + } else { + this.$message.error(res.msg || res.error) + } + }) + }, + dialogValueListSet (str) { + if (this.editDialogObj.type !== 'enum') { + this.oldValueList = [] + } + this.valueList = [] + this.valueListInfo.pageNo = 0 + this.valueListInfo.total = -1 + this.dialogSraechStr = str + this.dialogValueListLoad() + }, + dialogValueListLoad () { + if (this.editDialogObj.type == 'enum') { + this.valueList = this.oldValueList.filter(item => item.label.indexOf(this.dialogSraechStr) !== -1) + return + } + this.valueListInfo.pageNo++ + this.valueListInfo.loading = true + const params = { + name: this.dialogStr, + text: this.dialogSraechStr, + pageNo: this.valueListInfo.pageNo, + pageSize: this.valueListInfo.pageSize } this.$get('/fulltext/keyword', params).then(res => { this.valueListInfo.loading = false @@ -633,11 +713,11 @@ export default { let realValue = value console.log(this.searchBoxType) if (this.searchBoxType === 'enum') { - const findItem = this.oldValueList.find(item => item.label === value) + const findItem = this.oldValueList.find(item => item.label == value) console.log(findItem) realValue = findItem ? findItem.value : value } - const findItem = this.selectArr.find(item => item.key === key) + const findItem = this.selectArr.find(item => item.i18n === key) const findKeyItem = this.oldSearchList.find(item => item.name === this.key) if (!findKeyItem) { this.setSearchList() @@ -645,11 +725,11 @@ export default { this.searchStr = '' return } - let idKey = this.key + let name = this.key if (key[0] === '-' && key[1] === '*') { - idKey = '-*' + this.key + name = '-*' + this.key } else if (key[0] === '-' || key[0] === '*') { - idKey = key[0] + this.key + name = key[0] + this.key } if (findItem) { if (findItem.value.indexOf(value) === -1) { @@ -658,8 +738,8 @@ export default { } } else { this.selectArr.push({ - key, - idKey: idKey, + i18n: key, + name: name, realValue: [realValue], value: [value] }) @@ -682,88 +762,127 @@ export default { // todo 更新历史记录 }, emitSearch () { - const obj = {} - this.selectArr.forEach(item => { - obj[item.idKey] = item.realValue + this.$nextTick(() => { + const obj = {} + this.selectArr.forEach(item => { + obj[item.name] = item.realValue + }) + if (this.searchStr) { + obj.q = this.searchStr + this.oldSearchStr = this.searchStr + } else { + obj.q = '' + this.oldSearchStr = '' + } + this.$emit('search', obj) }) - if (this.searchStr) { - obj.q = this.searchStr - } else { - obj.q = '' - } - this.$emit('search', obj) }, removeSelectArr (index) { this.selectArr.splice(index, 1) this.emitSearch() }, removeTagValue (tIndex, key) { - const findItem = this.selectArr.find(item => item.key === key) + const findItem = this.selectArr.find(item => item.i18n === key) findItem.value.splice(tIndex, 1) findItem.realValue.splice(tIndex, 1) this.emitSearch() }, editTag (tag, index) { this.editTagIndex = index - this.editTagObj = this.$lodash.cloneDeep(this.selectArr[index]) + this.editTagObj = this.$lodash.cloneDeep(tag) + this.dialogSraechStr = '' this.dialogShow = true + console.log(tag, this.editTagObj) this.editDialogObj.value = this.editTagObj.value - const keyStr = this.editTagObj.key + this.editDialogObj.name = this.editTagObj.name + this.editDialogObj.i18n = this.editTagObj.i18n + this.editTagObj.type = '' + const keyStr = this.editTagObj.name if (keyStr[0] === '-' && keyStr[1] === '*') { - this.editDialogObj.key = keyStr.substring(2) + this.editDialogObj.name = this.editDialogObj.name.substring(2) this.editDialogObj.symbol = 4 } else if (keyStr[0] === '-') { - this.editDialogObj.key = keyStr.substring(1) + this.editDialogObj.name = this.editDialogObj.name.substring(1) this.editDialogObj.symbol = 2 } else if (keyStr[0] === '*') { - this.editDialogObj.key = keyStr.substring(1) + this.editDialogObj.name = this.editDialogObj.name.substring(1) this.editDialogObj.symbol = 3 } else { - this.editDialogObj.key = keyStr this.editDialogObj.symbol = 1 } - const findItem = this.oldSearchList.find(item => item.name === this.editDialogObj.key) - if (findItem && findItem.type !== 'input') { - // this.inputReadonly = true - this.dialogObjValueList = this[findItem.label] - } else { - this.dialogObjValueList = [] + const findItem = this.oldSearchList.find(item => this.editDialogObj.name == item.name) + if (findItem.type === 'enum') { + this.oldValueList = [] + this.valueList = [] + this.valueListInfo.pageNo = 0 + this.valueListInfo.total = -1 + this.selectEnum(findItem) + this.editDialogObj.type = findItem.type + this.contentShow('') + this.dialogStr = this.editDialogObj.name + return } + // const findItem = this.oldSearchList.find(item => item.name == tag.key) + // if (findItem && findItem.type !== 'input') { + // // this.inputReadonly = true + // this.dialogObjValueList = this[findItem.label] + // } else { + // this.dialogObjValueList = [] + // } + this.contentShow('') + this.dialogStr = this.editDialogObj.name + this.setValueList() }, dialogClose () { this.dialogShow = false + this.dialogStr = '' + this.dialogSraechStr = '' }, saveTag () { /* * 成功修改时 需要判断 成功修改的key 是否已存在 如果存在 需要合并 去重 * */ this.dialogShow = false + this.dialogStr = '' + this.dialogSraechStr = '' this.dialogObjValueList = [] + const findSearch = this.oldSearchList.find(item => this.editDialogObj.name == item.name) switch (this.editDialogObj.symbol) { case 1: - this.editTagObj.key = this.editDialogObj.key + this.editDialogObj.i18n = this.$t(findSearch.i18n) + this.editDialogObj.name = this.editDialogObj.name break case 2: - this.editTagObj.key = '-' + this.editDialogObj.key + this.editDialogObj.i18n = '-' + this.$t(findSearch.i18n) + this.editDialogObj.name = '-' + this.editDialogObj.name break case 3: - this.editTagObj.key = '*' + this.editDialogObj.key + this.editDialogObj.i18n = '*' + this.$t(findSearch.i18n) + this.editDialogObj.name = '*' + this.editDialogObj.name break case 4: - this.editTagObj.key = '-*' + this.editDialogObj.key + this.editDialogObj.i18n = '-*' + this.$t(findSearch.i18n) + this.editDialogObj.name = '-*' + this.editDialogObj.name break } - this.editTagObj.value = this.editDialogObj.value - const findItem = this.selectArr.find(item => item.key === this.editTagObj.key) - if (findItem) { + this.editDialogObj.realValue = this.editDialogObj.value + if (this.editDialogObj.type === 'enum') { // 处理枚举类型 + this.editDialogObj.realValue = this.editTagObj.value + this.editTagObj.value = this.editTagObj.realValue.map(item => { + return this.oldValueList.find(i => i.value === item).label + }) + } + const findItem = this.selectArr.find(item => item.name === this.editDialogObj.name) + if (findItem && findItem.name != this.editTagObj.name) { this.selectArr.splice(this.editTagIndex, 1) findItem.value = findItem.value.concat(this.editDialogObj.value) findItem.value = findItem.value.filter(function (item, index) { return findItem.value.indexOf(item) === index // 因为indexOf 只能查找到第一个 }) } else { - this.selectArr[this.editTagIndex] = this.$lodash.cloneDeep(this.editTagObj) + this.selectArr[this.editTagIndex] = this.$lodash.cloneDeep(this.editDialogObj) } + this.emitSearch() }, querySearch (queryString, cb) { const restaurants = this.oldSearchList.map(item => { return { value: this.$t(item.i18n || item.name) } }) diff --git a/nezha-fronted/src/entrance/app/main.js b/nezha-fronted/src/entrance/app/main.js index 4bfd14a8f..895bdc3b4 100644 --- a/nezha-fronted/src/entrance/app/main.js +++ b/nezha-fronted/src/entrance/app/main.js @@ -23,7 +23,7 @@ import VueClipboard from 'vue-clipboard2' import 'pl-table/themes/index.css' import { post, get, put, del } from '@/http.js' import { Meta2d } from '@meta2d/core' -import { clickoutside, bottomBoxWindow, stringTimeParseToUnix, unixTimeParseToString, chartResizeTool, tableSet, cancelWithChange, myLoading } from '@/components/common/js/tools.js' +import { clickoutside, bottomBoxWindow, stringTimeParseToUnix, unixTimeParseToString, chartResizeTool, tableSet, cancelWithChange, myLoading, loadMore } from '@/components/common/js/tools.js' import * as tools from '@/components/common/js/tools.js' import * as constants from '@/components/common/js/constants.js' @@ -170,6 +170,7 @@ Vue.mixin({ /* 指令 */ Vue.directive('cancel', cancelWithChange) Vue.directive('clickoutside', clickoutside) +Vue.directive('loadMore', loadMore) Vue.directive('myLoading', myLoading) window.resizing = false window.vm = new Vue({