<template>
|
<div>
|
<slot :table="{
|
dataList: this.dataList,
|
query: this.query,
|
dataLoading: this.dataLoading,
|
viewHandle: this.viewHandle,
|
editHandle: this.editHandle,
|
deleteHandle: this.deleteHandle,
|
dataSelectedList: this.dataSelectedList,
|
sortChangeHandle: this.sortChangeHandle,
|
selectionChangeHandle: this.selectionChangeHandle,
|
exportHandle: this.exportHandle
|
}"></slot>
|
<el-pagination v-if="paging"
|
:current-page="page"
|
:page-sizes="pageSizes2"
|
:page-size="limit"
|
:total="total"
|
:layout="pagingLayout"
|
@size-change="pageSizeChangeHandle"
|
@current-change="pageCurrentChangeHandle">
|
</el-pagination>
|
</div>
|
</template>
|
<script>
|
import Cookies from 'js-cookie'
|
import qs from 'qs'
|
import cloneDeep from 'lodash/cloneDeep'
|
|
export default {
|
name: 'ZtTableWraper',
|
props: {
|
queryUrl: String, // 数据列表接口，API地址
|
deleteUrl: String, // 删除接口，API地址,
|
exportUrl: String, // 导出接口，API地址
|
dataForm: Object, // 查询条件
|
dataKey: { // 删除接口，批量状态下由那个key进行标记操作？比如：pid，uid...
|
type: String,
|
default: 'id'
|
},
|
lazy: { // 此页面是否在创建时，调用查询数据列表接口？
|
type: Boolean,
|
default: false
|
},
|
paging: { // 数据列表接口，是否需要分页？
|
type: Boolean,
|
default: true
|
},
|
pageSize: Number, // 每页数
|
pageSizes: Array,
|
pagingLayout: {
|
type: String,
|
default: 'total, sizes, prev, pager, next, jumper'
|
}
|
},
|
data() {
|
return {
|
dataList: [], // 数据列表
|
order: '', // 排序，asc／desc
|
orderField: '', // 排序，字段
|
page: 1, // 当前页码
|
limit: this.pageSize || this.$store.state.config.tablePageSize || 10, // 每页数
|
total: 0, // 总条数
|
dataLoading: false, // 数据列表，loading状态
|
dataSelectedList: [], // 数据选中列表，多选项
|
editDialog: {}, // 新增修改弹窗
|
editPage: '',
|
editLimit: '',
|
queryDataForm: this.dataForm// 查询form
|
}
|
},
|
computed: {
|
pageSizes2() {
|
return [1,5,10, 20, 50, 100] || this.$store.state.config.tablePageSizes || [10, 20, 50, 100]
|
}
|
},
|
mounted() {
|
this.editDialog = this.$children.filter(child => child.$options._componentTag === 'add-or-update')[0]
|
// 弹窗页面使用了zt-dialog
|
if (this.editDialog) {
|
let ztDialogs = this.editDialog.$children.filter(child => child.$options._componentTag === 'zt-dialog')
|
if (ztDialogs.length > 0) {
|
this.editDialog = ztDialogs[0]
|
}
|
}
|
if (!this.queryDataForm) { // 没有指定查询form
|
let forms = this.$children.filter(child => child.$options._componentTag === 'el-form')
|
if (forms.length > 0) {
|
this.queryDataForm = forms[0].model
|
}
|
}
|
|
if (!this.lazy) {
|
this._query()
|
}
|
},
|
watch:{
|
'dataForm'(){
|
this.queryDataForm = this.dataForm
|
}
|
},
|
methods: {
|
query: function () {
|
this.page = 1
|
this._query()
|
},
|
// 查看
|
viewHandle(row) {
|
this.$nextTick(() => {
|
this.editHandle(row, true)
|
})
|
},
|
// 新增 / 修改
|
editHandle(row, isView) {
|
this.$nextTick(() => {
|
// 初始化表单数据
|
if (!this.editDialog.dialogInitDataForm) { // 备份弹窗页面的初始化dataForm
|
this.editDialog.dialogInitDataForm = cloneDeep(this.editDialog.dataForm)
|
} else {
|
this.editDialog.dataForm = cloneDeep(this.editDialog.dialogInitDataForm)
|
}
|
if (row) {
|
this.editDialog.init(row[this.dataKey], row, isView)
|
} else {
|
this.editDialog.init()
|
}
|
})
|
},
|
// 删除
|
async deleteHandle(row) {
|
if (!row && this.dataSelectedList.length <= 0) {
|
return this.$tip.alert(this.$t('prompt.deleteBatch'))
|
}
|
if (await this.$tip.confirm(this.$t('prompt.info', {'handle': this.$t('delete')}))) {
|
console.log(this.dataSelectedList,' this.dataSelectedList')
|
console.log( this.deleteUrl,' async deleteHandle(row) this.deleteUrl')
|
let res = await this.$http.delete(
|
this.deleteUrl,
|
{
|
'data': row ? [row[this.dataKey]] : this.dataSelectedList.map(item => item[this.dataKey])
|
}
|
)
|
if (res.success) {
|
await this.$tip.success()
|
this._query()
|
}
|
}
|
},
|
// 导出
|
exportHandle() {
|
var params = qs.stringify({
|
'token': Cookies.get('token'),
|
...this.queryDataForm
|
})
|
window.location.href = `${window.SITE_CONFIG['apiURL']}${this.exportUrl}?${params}`
|
},
|
// 多选
|
selectionChangeHandle(val) {
|
this.dataSelectedList = val
|
},
|
// 排序
|
sortChangeHandle(data) {
|
if (!data.order || !data.prop) {
|
this.order = ''
|
this.orderField = ''
|
return false
|
}
|
this.order = data.order.replace(/ending$/, '')
|
this.orderField = data.prop.replace(/([A-Z])/g, '_$1').toLowerCase()
|
this._query()
|
},
|
// 分页, 每页条数
|
pageSizeChangeHandle(val) {
|
this.page = 1
|
this.limit = val
|
this._query()
|
},
|
// 分页, 当前页
|
pageCurrentChangeHandle(val) {
|
this.page = val
|
this._query()
|
},
|
pageLimitChange(page, limit) {
|
this.editPage = page
|
this.editLimit = limit
|
},
|
// 获取数据列表
|
async _query() {
|
this.dataLoading = true
|
if (this.editLimit !== '' && this.editPage !== '') {
|
this.limit = this.editLimit
|
this.page = this.editPage
|
}
|
let params = {
|
order: this.order,
|
orderField: this.orderField,
|
page: this.paging ? this.page : null,
|
limit: this.paging ? this.limit : null,
|
...this.queryDataForm
|
}
|
console.log(this.$route.path+'query params',params)
|
let res = await this.$http.get(
|
this.queryUrl,
|
{
|
params: params
|
}
|
)
|
// console.timeEnd('开始')
|
this.dataLoading = false
|
if (res.code !== 0) {
|
this.dataList = []
|
this.total = 0
|
return this.$tip.error(res.msg)
|
}
|
console.log(res.data,'res.data')
|
this.dataList = this.paging ? res.data.list : res.data
|
this.total = this.paging ? res.data.total : 0
|
if (this.editLimit && this.editPage) {
|
this.editLimit = ''
|
this.editPage = ''
|
}
|
console.log(this.dataList,'this.dataList')
|
this.$emit('dataLoaded', this.dataList)
|
this.$emit('fatherMethod')
|
}
|
}
|
}
|
</script>
|
