Spring Could+Ant Design Pro表格数据加载
由于公司最近项目使用Ant Design Pro，所以就学习了一下，以前公司使用的是easyui，所以这也是我的第一次学习尝试，记录一下，有不足大家帮忙指正。
后台是Spring Could，使用Nacos作为服务注册中心注册。
表格加载
打开Ant Design Pro项目
修改配置，解决跨域问题，让它能连接到我们的项目的网关
修改vue.config.js
找到节点devServer，修改如下：
devServer: {
// development server port 8000
port: 8000,
open: true, //是否自动弹出浏览器页面
proxy: {
'/': {
target: 'http://localhost:9014/', //API服务器的地址（spring could网关端口号）
ws: false, //代理websockets
changeOrigin: true, // 虚拟的站点需要更管origin
pathRewrite: { //重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc'
'^/': ''
}
}
},
},
为了不影响其他演示的页面，我们在 src/utils下新增一个springRequest.js,基本上是复制了request.js,我们只是对其做了一点点的修改，修改baseURL，让它连接到我们的网关中
import axios from 'axios'
import store from '@/store'
import {
VueAxios
} from './axios'
import notification from 'ant-design-vue/es/notification'
// import {
// ACCESS_TOKEN
// } from '@/store/mutation-types'
// 创建 axios 实例
const request = axios.create({
// API 请求的默认前缀
baseURL: '/',
timeout: 6000 // 请求超时时间
})
// 异常拦截处理器
const err = (error) => {
if (error.response) {
const data = error.response.data
const token = localStorage.getItem('token')
if (error.response.status === 403) {
notification.error({
message: 'Forbidden',
description: data.message
})
}
if (error.response.status === 401 && !(data.result && data.result.isLogin)) {
notification.error({
message: 'Unauthorized',
description: 'Authorization verification failed'
})
if (token) {
store.dispatch('Logout').then(() => {
setTimeout(() => {
window.location.reload()
}, 1500)
})
}
}
}
return Promise.reject(error)
}
// request interceptor
request.interceptors.request.use(config => {
const token = localStorage.getItem('token')
if (token) {
config.headers['Access-Token'] = token // 让每个请求携带自定义 token 请根据实际情况自行修改
}
return config
}, err)
// response interceptor
request.interceptors.response.use((response) => {
return response.data
}, err)
const installer = {
vm: {},
install (Vue) {
Vue.use(VueAxios, request)
}
}
export default request
export {
installer as VueAxios,
request as axios
}
在我们的src/api文件夹中，新增bizConfig.js文件
让它访问我们的网关
import { axios } from '@/utils/springRequest'
const api = {
tbInspectFileList: '/api/TbInspectFileController/tbInspectFile/list',
get_type_name: '/api/TbInspectFileController/tbInspectFile/getTypeName'
}
export default api
//表格
export function tbInspectFileList (param) {
return axios({
url: api.tbInspectFileList,
method: 'post',
params: param
})
},
//下拉框
export function getTypeName () {
return axios({
url: api.get_type_name,
method: 'post'
})
}
在src/views下，新增bizConfig文件，新增Search_Value_Set.vue
<template>
<a-card :bordered="false">
<div class="table-page-search-wrapper">
<a-form layout="inline">
<a-row>
<a-col :md="10" :sm="24">
<a-form-item
label="名称">
<!-- <a-input v-model="queryParam.typeName" placeholder=""/>-->
<a-select showSearch v-model="queryParam.typeName">
<a-select-option v-for="d in templateDatas" :key="d.value" :value="d.value">{{ d.text }}</a-select-option>
</a-select>
</a-form-item>
<a-form-item
label="别名">
<a-input v-model="queryParam.typeAlias" placeholder=""/>
</a-form-item>
</a-col>
<a-col :md="10" :sm="24">
<a-form-item
label="上传人">
<a-input v-model="queryParam.typeValue" placeholder=""/>
</a-form-item>
<a-form-item
label="类型">
<a-select v-model="queryParam.enabled" default-Value="2" placeholder="请选择">
<a-select-option value="2">视频</a-select-option>
<a-select-option value="1">图片</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :md="10" :sm="24">
<div class="table-operator" >
</div>
</a-col>
<a-col :md="10" :sm="24">
<span class="table-page-search-submitButtons" :style="{ float: 'right', overflow: 'hidden' } || {} ">
<a-button type="primary" icon="plus" :style="{'margin-right':'20px'}" @click="$refs.createModal.add(templateDatas)">新建</a-button>
<a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
</span>
</a-col>
</a-row>
</a-form>
</div>
<s-table
ref="table"
size="default"
rowKey="id"
:columns="columns"
:data="loadData"
hideOnSinglePage="false"
showPagination="auto">
<template slot="operation" slot-scope="text, record">
<span>
<a-divider type="vertical"/>
<a-popconfirm title="是否要删除此行？" @confirm="remove(record.id)">
<a>删除</a>
</a-popconfirm>
</span>
</template>
</s-table>
<create-form ref="createModal" @ok="handleOk"/>
</a-card>
</template>
<script>
import { STable, Ellipsis } from '@/components'
import CreateForm from './modules/CreateForm'
import { tbInspectFileList, getTypeName } from '@/api/bizConfig'
export default {
name: 'SearchValueSet',
components: {
STable,
Ellipsis,
CreateForm
},
data () {
return {
mdl: {},
// 查询参数
queryParam: {},
// 表头
columns: [
{
title: '行号',
// scopedSlots: { customRender: 'serial' }
width: 80,
// customRender: (text, record, index) => `${index + 1}`
customRender: function (text, record, index) {
return index + 1
}
},
{
title: '主键',
dataIndex: 'id'
},
{
title: '此次记录所对应的工单编号',
dataIndex: 'orderCode'
},
{
title: '图片或视频存储的路径信息',
dataIndex: 'filePath'
},
{
title: '类型',
dataIndex: 'fileExtType',
customRender: function (text) {
if (text === 1){ //eslint-disable-line
return '图片'
} else {
return '视频'
}
}
},
{
title: '上传人',
dataIndex: 'uploadUser'
},
{
title: '操作',
key: 'action',
scopedSlots: { customRender: 'operation' }
}
],
// 加载数据方法 必须为 Promise 对象
loadData: parameter => {
return tbInspectFileList(Object.assign(parameter, this.queryParam))
.then(res => {
return res.result
})
},
optionAlertShow: true,
templateDatas: []
}
},
filters: {
// enabledFilter (type) {
// return enabledMap[type].text
// },
// enabledValueFilter (type) {
// return enabledMap[type].enabled
// }
},
created () {
this.fetchTypeNameData()
// this.queryParam.enabled = '2'
// getRoleList({ t: new Date() })
},
methods: {
//加载下拉框
fetchTypeNameData () {
getTypeName().then((res) => {
const result = res.result
result.forEach((r) => {
this.templateDatas.push({
value: r.orderCode,
text: r.id
})
})
})
}
}
}
</script>
<style scoped>
</style>
到这一步就算写完了，新增菜单的方法可以在网上找。本来在我本地还做了增删改查的方法，但在本文中我给删掉了，下面是效果：
后台传入数据
分页效果也可以自己改，在components/Table/index.js中159行，可以全局修改，如下所示：
result.then(r => {
this.localPagination = Object.assign({}, this.localPagination, {
current: r.pageNo, // 返回结果中的当前分页数
total: r.totalCount, // 返回结果中的总记录数
showSizeChanger: this.showSizeChanger,
pageSize: (pagination && pagination.pageSize) ||
this.localPagination.pageSize
})
// 为防止删除数据后导致页面当前页面数据长度为 0 ,自动翻页到上一页
if (r.data.length === 0 && this.localPagination.current !== 1) {
this.localPagination.current--
this.loadData()
return
}
// 这里用于判断接口是否有返回 r.totalCount 或 this.showPagination = false
// 当情况满足时，表示数据不满足分页大小，关闭 table 分页功能
(!this.showPagination || !r.totalCount && this.showPagination === 'auto') && (this.localPagination = false)
this.localDataSource = r.data // 返回结果中的数组数据
this.localLoading = false
})