我在项目中的instList.vue中用到了这个组件，利用mixins封装了公用的方法view-module.js
instList.vue的代码如下所示：
<template>
<div class="page-instList">
<van-sticky>
<!-- <div class="doc-title">{{ $route.query.modelName }}</div> -->
<van-search v-model="dataForm.instName" show-action placeholder="请输入实例名" @search="onSearch">
<template #action>
<div @click="onSearch">搜索</div>
</template>
</van-search>
</van-sticky>
<van-pull-refresh v-model="dataListRefreshing" @refresh="onRefresh" success-text="刷新成功">
<van-list offset="10" v-model="dataListLoading" :immediate-check="false" :error.sync="dataListError" :finished="dataListFinished"
finished-text="没有更多了" @load="onLoad">
<van-skeleton title :row="6" :loading="dataListRefreshing"></van-skeleton>
<van-cell-group v-for="(item, index) in dataList" :key="index">
<van-cell is-link @click="handleCell(item, 'instDetails')">
<!-- 使用 title 插槽来自定义标题 -->
<template #title>
<span class="custom-title">{{ index + 1 }}.</span>
<span>{{ item.inst_name }}</span>
</template>
</van-cell>
<!-- <van-cell is-link @click="handleCell(item, 'instRelate')">
<template #title>
<span class="custom-title">关联信息查看</span>
</template>
</van-cell> -->
</van-cell-group>
</van-list>
</van-pull-refresh>
</div>
</template>
<script>
import mixinViewModule from '@/mixins/view-module';
export default {
name: "resourceMgmt-instList",
mixins: [mixinViewModule],
inject: ['reload'],
data() {
return {
dataForm: {
instName: "",
asstModels: [],
mainModelInstIds: [],
modelId: "",
thisField: []
},
mixinViewModuleOptions: {
createdIsNeed: false,
activatedIsNeed: false,
getDataListIsPage: true,
loadingHide: true,
getDataListURL: '/cmdb-base/instance/findInstanceByMultiCondition'
}
};
},
beforeRouteEnter(to, from, next) {
next((vm) => {
if (from.name == "resourceMgmt-instModel"||from.path == "/") {
vm.$data.dataForm = vm.$options.data().dataForm
vm.dataForm.modelId = vm.$route.query.modelId
vm.onSearch();
}
});
},
methods: {
handleCell(item, route) {
this.$router.push({
name: "resourceMgmt-" + route,
query: {
instName: item.inst_name,
modelName: this.$route.query.modelName,
instId: item.inst_id,
modelId: this.$route.query.modelId,
}
})
},
onSearch() {
this.dataForm.thisField = [{ relation: "and", fieldName: "inst_name", value: this.dataForm.instName }]
this.onRefresh()
}
},
};
</script>
<style lang="less">
.page-instList {
}
</style>
view-module.js的代码如下所示
export default {
data() {
return {
// 设置属性
mixinViewModuleOptions: {
createdIsNeed: true, // 此页面是否在创建时，调用查询数据列表接口？
activatedIsNeed: false, // 此页面是否在激活（进入）时，调用查询数据列表接口？
getDataListURL: '', // 数据列表接口，API地址
getDataListIsPage: false, // 是否分页
delMessage: '', // 删除的提示信息
deleteURL: '', // 删除接口，API地址
deleteIsBatch: false, // 删除接口，是否需要批量？
deleteIsBatchKey: 'id', // 删除接口，批量状态下由那个key进行标记操作？比如：pid，uid...
exportURL: '', // 导出接口，API地址
loadingHide: false
},
// 默认属性
dataForm: {}, // 查询条件
dataList: [], // 数据列表
order: '', // 排序，asc／desc
orderField: '', // 排序，字段
page: 1, // 当前页码
limit: 15, // 每页数
total: 0, // 总条数
dataListError: false,
dataListFinished: false,
dataListLoading: false, // 数据列表，loading状态
dataListRefreshing: false,
dataListSelections: [], // 数据列表，多选项
addOrUpdateVisible: false // 新增／更新，弹窗visible状态
}
/* eslint-enable */
},
activated() {
if (this.$route.meta.keepAlive) {
const scrollTop = this.$route.meta.scrollTop;
const $container = document.querySelector('.main-container');
$container.scrollTop = scrollTop;
}
},
methods: {
onLoad() {
this.dataListLoading = true
let timer = setTimeout(() => {
this.query()
this.page++
clearTimeout(timer)
timer = null
}, 300)
},
onRefresh() {
this.dataList = []// 清空列表数据
this.dataListFinished = false;
// this.dataListRefreshing = true;
this.page = 1 //page设置为1
this.onLoad();
},
// 获取数据列表
query() {
return new Promise((resolve) => {
this.$http.post(this.mixinViewModuleOptions.getDataListURL, {
order: this.order,
orderField: this.orderField,
pageNumber: this.mixinViewModuleOptions.getDataListIsPage ? this.page : null,
pageSize: this.mixinViewModuleOptions.getDataListIsPage ? this.limit : null,
requestObj: this.dataForm
}).then(({
data: res
}) => {
if (res.code !== 'S1A00000') {
this.dataList = []
this.total = 0
this.dataListError = true
resolve("error")
return this.$toast.fail(res.msg)
}
this.dataList = this.dataList.concat(res.data.list || [])
this.total = res.data.total
if (this.dataList.length == this.total) {
this.dataListFinished = true
}
resolve(res)
}).catch(() => {
this.dataListError = true
resolve("error")
}).finally(() => {
this.dataListLoading = false
this.dataListRefreshing = false
})
})
},
}
}
