管理系统列表和详情配置

简介： 通过配置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>

持续完善中...

原文地址：https://segmentfault.com/a/1190000012669693