简介： 通过配置json文件，直接生成列表和列表详情
- 配置文件是json格式
- 配置完成后可以生成预览
- 需要后端支持按一定的格式返回数据
config.json
{
"filterBar": {
"isShow": true,
"items": [{
"type": 1,
"label": "",
"field": "farmerName",
"placeholder": "农户姓名",
"defaultValue": ""
}, {
"type": 1,
"label": "",
"field": "farmerPhone",
"placeholder": "农户手机号",
"defaultValue": ""
}, {
"type": 2,
"label": "作物",
"field": "crops",
"placeholder": "请选择",
"defaultValue": "-1",
"selectOptions": [{
"label": "全部",
"value": "-1"
}, {
"label": "白菜",
"value": "0"
}, {
"label": "黄瓜",
"value": "1"
}]
}, {
"type": 2,
"label": "远程作物",
"field": "remoteCrops",
"url": "/management/tool/getAllCrops",
"placeholder": "请选择",
"defaultValue": "-1",
"selectOptions": []
}, {
"type": 3,
"label": "拜访时间",
"field": "visitTime",
"placeholder": "请选择时间",
"defaultValue": "2017-01-01"
}, {
"type": 3,
"label": "拜访时间",
"field": "visitTime",
"placeholder": "请选择时间",
"defaultValue": ["2017-01-01", "2017-01-05"]
}, {
"type": 3,
"label": "拜访时间",
"field": "visitTime",
"placeholder": "请选择时间",
"defaultValue": ["2017-01-01", "now"]
}],
"typeConfig": {
"输入框": 1,
"下拉选择": 2,
"时间选择": 3
}
},
"table": {
"url": "/management/visit/getVisitList",
"queryParams": {
"farmerName": "",
"farmerPhone": "",
"storeName": "",
"belongUserPhone": ""
},
"columns": [{
"title": "门店名称",
"field": "storeName"
}, {
"title": "地址",
"field": "detailAddress"
}]
},
"detail": {
"isShow": true,
"tip": "提示信息",
"url": "/management/visit/getVisitList",
"queryParams": {
"farmerName": "",
"farmerPhone": "",
"storeName": "",
"belongUserPhone": ""
},
"columns": [{
"type": 1,
"label": "作物",
"field": "cropsName"
}, {
"type": 2,
"label": "门店照片",
"field": "storeUrl"
}],
"operatioins": [{
"btnText": "审核通过",
"url": "/management/visit/getVisitList",
"queryParams": {
"farmerName": "",
"farmerPhone": "",
"storeName": "",
"belongUserPhone": ""
}
}],
"typeConfig": {
"文本": 1,
"图片": 2
}
}
}
list.vue
<template>
<section class="p-list margin-15">
<v-filterbar v-if="pageConfig.filterBar.isShow" :filter-bar-config="pageConfig.filterBar" class="filterbar-box" v-sticky="{stickyTop: 50, zIndex: 100}" ref="filterBar" v-on:on-search="onSearch" v-on:on-replace="onReplace"></v-filterbar>
<v-table ref="listTable" :url="pageConfig.table.url" :query-params="queryParams" :load-filter="loadFilter" :columns="pageConfig.table.columns" :autoRequest="false">
</v-table>
</section>
</template>
<script>
import vFilterbar from './filter-bar'
import vTable from 'pages/home/common/c-table'
export default {
name: 'p-list',
data() {
const pageConfig = require('./config.json')
console.log('pageConfig:', pageConfig)
let queryParams = Object.assign({}, pageConfig.table.queryParams)
return {
pageConfig,
queryParams,
loadFilter(res) {
if (res.errno == 0) {
return {
total: res.data.total,
datas: res.data.visitList
}
}
return {
total: 0,
datas: []
}
}
}
},
components: {
vFilterbar,
vTable
},
beforeRouteEnter(to, from, next) {
next(vm => {
console.log('=============beforeRouteEnter', vm.queryParams)
vm.$refs.filterBar.onSearch()
})
},
beforeRouteUpdate(to, from, next) {
this.$nextTick(() => {
console.log('=============beforeRouteUpdate', this.queryParams)
this.$refs.filterBar.onSearch()
// this.addOtherQueryParams();
})
next()
},
methods: {
onSearch(params) {
const queryParams = Object.assign(this.queryParams, params, this.$route.query)
this.queryParams = queryParams
this.$refs.filterBar.changeQueryParams(queryParams)
console.log('sdhagd', queryParams)
this.$nextTick(() => {
this.getListData()
})
},
// 点击查询，替换当前页面URL
onReplace(params) {
this.queryParams = Object.assign(this.queryParams, this.$route.query, params, {
visitId: ''
})
this.$nextTick(() => {
this.$router.replace({ path: this.$route.path, query: this.queryParams })
})
},
onDeleteFilters(params) {
this.queryParams = Object.assign({}, params)
this.$nextTick(() => {
this.$router.replace({ path: this.$route.path, query: this.queryParams })
})
},
getListData() {
this.$nextTick(() => {
console.log('参数:', this.queryParams)
this.$refs.listTable.getListData()
})
}
}
}
</script>
<style lang="scss" scoped>
</style>
filter-bar.vue
<template>
<el-form :inline="true" :model="queryParams" class="form-inline sticky-filter-bar-box">
<template v-for="item in localFilterBarConfig.items">
<el-form-item v-if="item.type == 1" :key="item.field" :label="item.label">
<el-input size="small" v-model="queryParams[item.field]" style=" 150px" :placeholder="item.placeholder"></el-input>
</el-form-item>
<el-form-item v-if="item.type == 2" :key="item.field" :label="item.label">
<el-select size="small" v-model="queryParams[item.field]" style="140px;" :placeholder="item.placeholder">
<el-option v-for="option in item.selectOptions" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select>
</el-form-item>
</template>
<el-form-item>
<el-button size="small" type="primary" @click="onReplace" icon="search">查询</el-button>
</el-form-item>
</el-form>
</template>
<script>
import { getRequest } from 'utils'
const DEFAULT_SELECT_OPTIONS = [{
label: '全部',
value: '-1'
}]
export default {
name: 'list-filterbar',
data() {
const defaultQueryParams = {}
this.filterBarConfig.items.forEach(item => {
defaultQueryParams[item.field] = item.defaultValue
})
return {
queryParams: Object.assign({}, defaultQueryParams),
defaultQueryParams,
localFilterBarConfig: this.filterBarConfig
}
},
props: {
filterBarConfig: {
type: Object,
require: true
}
},
created() {
this.localFilterBarConfig.items.forEach((item, i) => {
if (item.type == 2 && item.url) {
this.getRemoteSelectOptions(item.url, i)
}
})
},
methods: {
getRemoteSelectOptions(url, index) {
getRequest(url).then(res => {
if (res.errno == 0 || res.resCode == 0) {
const remoteData = res.data || res.datas || []
this.localFilterBarConfig.items[index].selectOptions = DEFAULT_SELECT_OPTIONS.concat(remoteData.map(item => {
return {
label: item.name,
value: item.name
}
}))
} else {
throw new Error('errno:' + res.errno + ',出错了')
}
}).catch(error => {
console.error(error.message)
})
},
onSearch() {
this.$emit('on-search', this.defaultQueryParams)
},
onReplace() {
this.$emit('on-replace', this.queryParams)
},
changeQueryParams(params) {
this.queryParams = Object.assign(this.queryParams, params)
}
}
}
</script>
持续完善中...