滚动加载实际开发中的代码
<template>
<div class="AppSearchForm">
<el-form :model="form" class="xyj-el-form">
<el-row :gutter="120" class="mt-20">
<el-col :span="8">
<el-form-item label="应用系统名称:" label-width="100px">
<el-autocomplete ref="autocomplete1" class="xyj-select h30 flex-1" placeholder="请输入应用系统名称" clearable popper-class="xyj-dropdown"
v-model="form.appName"
:moreSuggess="true"
:debounce="500"
:fetch-suggestions="querySearchApp"
@select="handleSelectApp"
@clear="(...args) => { resetSearchForm(0, args) }"
>
</el-autocomplete>
</el-form-item>
</el-col>
<!-- <el-col :span="8">
<el-form-item label="敏感数据名称:" label-width="100px">
<el-select clearable popper-class="xyj-dropdown" placeholder="请选择敏感数据名称" class="xyj-select h30 flex-1"
v-model="form.ruleName"
@change="handleSelectSensitive"
@clear="(...args) => { resetSearchForm(2, args) }"
>
<el-option v-for="item in sensitiveList" :key="item.rkTmRuleId" :label="item.ruleName" :value="item.rkTmRuleId">
</el-option>
</el-select>
</el-form-item>
</el-col> -->
<el-col :span="8">
<el-form-item label="敏感数据名称:" label-width="100px">
<el-autocomplete ref="autocomplete2" class="xyj-select h30 flex-1" placeholder="请选择敏感数据名称" clearable popper-class="xyj-dropdown"
v-model="form.ruleName"
:moreSuggess="true"
:debounce="500"
:fetch-suggestions="querySearchRuleName"
@select="handleSelectSensitive"
@clear="(...args) => { resetSearchForm(1, args) }"
>
</el-autocomplete>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</template>
<script>
import _ from 'lodash'
import extend from 'extend'
import { getAppNameOrHostNameList, getAppSensitiveList } from '@/http/hdatatrace'
import { judgeCode } from '@/utils/basefunc'
import { clearRelatedSelect } from '@/utils/selectUtil'
export default {
name: 'AppSearchForm',
props: {
// 是否需要初始化默认数据
needInit: {
default: false,
type: Boolean
},
defaultParams: {
default: false,
type: [Boolean, Object]
}
},
data () {
return {
hasInit: false,
appSearchForm: { key: '', pageNum: 1, pageSize: 6, hasNextPage: true, isloading: false },
sensitiveForm: { key: '', params: { appId: '' }, pageNum: 1, pageSize: 5, hasNextPage: true, isloading: false },
form: { appName: '', ruleId: '', ruleName: '', appId: null, pageNum: 1, pageSize: 6 },
appList: [],
ruleList: [],
// sensitiveList: [],
getEmitBydebounce: null // 用于避免频繁触发form表单变更，从而不断emit父级
}
},
watch: {
'appSearchForm.key' () {
this.appSearchForm.pageNum = 1
this.appSearchForm.hasNextPage = true
},
'sensitiveForm.key' () {
this.sensitiveForm.pageNum = 1
this.sensitiveForm.hasNextPage = true
},
form: {
handler (v) {
this.getEmitBydebounce()
},
deep: true
},
'form.appId' (v) {
this.sensitiveForm.params.appId = v
}
// sensitiveForm: {
// handler (v) {
// debugger
// let flag = false
// for (let i in v.params) {
// if (v.params[i]) {
// flag = true
// }
// }
// if (flag) {
// this.loadSensitive()
// }
// },
// deep: true
// }
},
methods: {
resetSearchForm (currentStep = 0) {
this.$refs.autocomplete1.$refs.input.blur()
// this.$refs.autocomplete2.$refs.input.blur()
this.form = clearRelatedSelect({
steps: [['appName', 'appId'], ['ruleId', 'ruleName']],
original: this.form,
target: {
appName: '',
ruleId: '',
ruleName: '',
appId: -1,
pageNum: 1,
pageSize: 6
},
currentStep
})
// debugger
// if (currentStep < 2) {
this.appSearchForm = { key: this.form.appName, pageNum: 1, pageSize: 6, hasNextPage: true, isloading: false }
this.sensitiveForm = { key: this.form.ruleName, params: { appId: this.form.appId }, pageNum: 1, pageSize: 6, hasNextPage: true, isloading: false }
this.appList = []
this.ruleList = []
// this.sensitiveList = []
// }
// this.handleSelectSensitive('');
},
handleSelectApp (item) {
// debugger
this.form.appId = item.id
this.sensitiveForm.params.appId = item.id
this.sensitiveForm.hasNextPage = true
this.sensitiveForm.pageNum = 1
this.loadSensitive()
},
handleSelectSensitive (item) {
this.form.ruleId = item.rkTmRuleId
},
async querySearchApp (queryString, cb) {
let results
this.appSearchForm.key = queryString
this.$nextTick(async () => {
await this.loadApp()
results = this.appList
cb(results)
})
},
async querySearchRuleName (queryString, cb) {
// debugger
let results
this.sensitiveForm.key = queryString
this.$nextTick(async () => {
await this.loadSensitive()
results = this.ruleList
cb(results)
})
},
createFilter (queryString, key) {
return (item) => {
return (item.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1)
}
},
async loadApp () {
// debugger
let { key, pageNum, pageSize, hasNextPage, isloading } = this.appSearchForm
if (isloading || hasNextPage === false) return
this.appSearchForm.isloading = true
let res = await getAppNameOrHostNameList({ type: 1, key }, pageNum, pageSize)
let list = judgeCode(res, res => {
return JSON.parse(JSON.stringify(res.data.list).replace(/"appName":"/g, '"value":"'))
}, [], msg => {
this.errorTips(msg || '请求接口数据异常')
})
this.appList = this.setArrData(this.appList, list, pageNum)
this.setPagination(res.data, this.appSearchForm)
},
async loadSensitive () {
// debugger
let { key, params, pageNum, pageSize, hasNextPage, isloading } = this.sensitiveForm
if (isloading || hasNextPage === false) return
this.sensitiveForm.isloading = true
let res = await getAppSensitiveList(params, pageNum, pageSize)
let list = judgeCode(res, res => {
return JSON.parse(JSON.stringify(res.data.list).replace(/"ruleName":"/g, '"value":"'))
}, [], msg => {
this.errorTips(msg || '请求接口数据异常')
})
this.ruleList = this.setArrData(this.ruleList, list, pageNum)
this.setPagination(res.data, this.sensitiveForm)
},
setArrData (oldArr, newArr, pageNum) {
if (pageNum === 1) {
return newArr
} else {
return oldArr.concat(newArr)
}
},
setPagination (data, form) {
form.hasNextPage = data.hasNextPage
form.pageNum = data.pageNum + 1
form.isloading = false
},
emptyData () {
this.noMoreItem = true
},
hasDefaultParms () {
return this.defaultParams && Object.keys(this.defaultParams).some(param => !!param)
},
initDebounce () {
this.getEmitBydebounce = _.debounce(() => {
this.$emit('setForm', extend(true, {}, this.form))
}, 300)
}
},
async mounted () {
this.initDebounce()
if (this.needInit) {
if (this.hasDefaultParms()) {
this.appSearchForm.key = this.defaultParams.appName
}
await this.loadApp()
await this.loadSensitive()
if (this.appList && this.appList[0]) {
if (this.hasDefaultParms()) {
let len = this.appList.length
for (let i = 0; i < len; i++) {
if (this.appList[i]['value'] === this.defaultParams.appName) {
this.form.appName = this.appList[i].value
this.handleSelectApp(this.appList[i])
}
}
} else {
this.form.appName = this.appList[0].value
this.handleSelectApp(this.appList[0])
}
}
}
}
}
</script>
<style scoped>
</style>
