新增 crud.js，整合通用的增删改查
This commit is contained in:
dqjdda
288
src/mixins/crud.js
Normal file
288
src/mixins/crud.js
Normal file
@@ -0,0 +1,288 @@
|
||||
import { initData, download } from '@/api/data'
|
||||
import { parseTime, downloadFile } from '@/utils/index'
|
||||
import checkPermission from '@/utils/permission'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 表格数据
|
||||
data: [],
|
||||
// 排序规则，默认 id 降序， 支持多字段排序 ['id,desc', 'createTime,asc']
|
||||
sort: ['id,desc', 'createTime,asc'],
|
||||
// 页码
|
||||
page: 0,
|
||||
// 每页数据条数
|
||||
size: 10,
|
||||
// 总数据条数
|
||||
total: 0,
|
||||
// 请求数据的url
|
||||
url: '',
|
||||
// 查询数据的参数
|
||||
params: {},
|
||||
// 待查询的对象
|
||||
query: {},
|
||||
// 等待时间
|
||||
time: 50,
|
||||
// 是否为新增类型的表单
|
||||
isAdd: false,
|
||||
// 导出的 Loading
|
||||
downloadLoading: false,
|
||||
// 表格 Loading 属性
|
||||
loading: true,
|
||||
// 删除 Loading 属性
|
||||
delLoading: false,
|
||||
// 弹窗属性
|
||||
dialog: false,
|
||||
// Form 表单
|
||||
form: {},
|
||||
// 弹窗的标题
|
||||
title: '',
|
||||
// 方法
|
||||
method: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
parseTime,
|
||||
downloadFile,
|
||||
checkPermission,
|
||||
async init() {
|
||||
if (!await this.beforeInit()) {
|
||||
return
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
this.loading = true
|
||||
// 请求数据
|
||||
initData(this.url, this.getQueryParame()).then(data => {
|
||||
this.total = data.totalElements
|
||||
this.data = data.content
|
||||
// time 毫秒后显示表格
|
||||
setTimeout(() => {
|
||||
this.loading = false
|
||||
}, this.time)
|
||||
resolve(data)
|
||||
}).catch(err => {
|
||||
this.loading = false
|
||||
reject(err)
|
||||
})
|
||||
})
|
||||
},
|
||||
beforeInit() {
|
||||
return true
|
||||
},
|
||||
getQueryParame: function() {
|
||||
return {
|
||||
page: this.page,
|
||||
size: this.size,
|
||||
sort: this.sort,
|
||||
...this.query,
|
||||
...this.params
|
||||
}
|
||||
},
|
||||
// 改变页码
|
||||
pageChange(e) {
|
||||
this.page = e - 1
|
||||
this.init()
|
||||
},
|
||||
// 改变每页显示数
|
||||
sizeChange(e) {
|
||||
this.page = 0
|
||||
this.size = e
|
||||
this.init()
|
||||
},
|
||||
// 预防删除第二页最后一条数据时，或者多选删除第二页的数据时，页码错误导致请求无数据
|
||||
dleChangePage(size) {
|
||||
if (size === undefined) {
|
||||
size = 1
|
||||
}
|
||||
if (this.data.length === size && this.page !== 0) {
|
||||
this.page = this.page - 1
|
||||
}
|
||||
},
|
||||
// 查询方法
|
||||
toQuery() {
|
||||
this.page = 0
|
||||
this.init()
|
||||
},
|
||||
/**
|
||||
* 通用的提示封装
|
||||
*/
|
||||
submitSuccessNotify() {
|
||||
this.$notify({
|
||||
title: '提交成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
},
|
||||
addSuccessNotify() {
|
||||
this.$notify({
|
||||
title: '新增成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
},
|
||||
editSuccessNotify() {
|
||||
this.$notify({
|
||||
title: '编辑成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
},
|
||||
delSuccessNotify() {
|
||||
this.$notify({
|
||||
title: '删除成功',
|
||||
type: 'success',
|
||||
duration: 2500
|
||||
})
|
||||
},
|
||||
notify(title, type) {
|
||||
this.$notify({
|
||||
title: title,
|
||||
type: type,
|
||||
duration: 2500
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 删除前可以调用 beforeDelMethod 做一些操作
|
||||
*/
|
||||
beforeDelMethod() {
|
||||
return true
|
||||
},
|
||||
/**
|
||||
* 通用的删除
|
||||
*/
|
||||
delMethod(id) {
|
||||
if (!this.beforeDelMethod()) {
|
||||
return
|
||||
}
|
||||
this.delLoading = true
|
||||
this.crudMethod.del(id).then(() => {
|
||||
this.delLoading = false
|
||||
this.$refs[id].doClose()
|
||||
this.dleChangePage()
|
||||
this.delSuccessNotify()
|
||||
this.afterDelMethod()
|
||||
this.init()
|
||||
}).catch(() => {
|
||||
this.delLoading = false
|
||||
this.$refs[id].doClose()
|
||||
})
|
||||
},
|
||||
afterDelMethod() {
|
||||
},
|
||||
/**
|
||||
* 显示新增弹窗前可以调用该方法
|
||||
*/
|
||||
beforeShowAddForm() {
|
||||
},
|
||||
/**
|
||||
* 显示新增弹窗
|
||||
*/
|
||||
showAddFormDialog() {
|
||||
this.isAdd = true
|
||||
this.beforeShowAddForm()
|
||||
this.dialog = true
|
||||
},
|
||||
/**
|
||||
* 显示编辑弹窗前可以调用该方法
|
||||
*/
|
||||
beforeShowEditForm(data) {
|
||||
},
|
||||
/**
|
||||
* 显示编辑弹窗
|
||||
*/
|
||||
showEditFormDialog(data = '') {
|
||||
this.isAdd = false
|
||||
if (data) {
|
||||
this.form = JSON.parse(JSON.stringify(data))
|
||||
}
|
||||
this.beforeShowEditForm(data)
|
||||
this.dialog = true
|
||||
},
|
||||
/**
|
||||
* 新增方法
|
||||
*/
|
||||
addMethod() {
|
||||
this.crudMethod.add(this.form).then(() => {
|
||||
this.hideFormDialog()
|
||||
this.addSuccessNotify()
|
||||
this.loading = false
|
||||
this.afterAddMethod()
|
||||
this.init()
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 新增后可以调用该方法
|
||||
*/
|
||||
afterAddMethod() {
|
||||
},
|
||||
/**
|
||||
* 通用的编辑方法
|
||||
*/
|
||||
editMethod() {
|
||||
this.crudMethod.edit(this.form).then(() => {
|
||||
this.hideFormDialog()
|
||||
this.editSuccessNotify()
|
||||
this.loading = false
|
||||
this.afterEditMethod()
|
||||
this.init()
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 编辑后可以调用该方法
|
||||
*/
|
||||
afterEditMethod() {
|
||||
},
|
||||
/**
|
||||
* 提交前可以调用该方法
|
||||
*/
|
||||
beforeSubmitMethod() {
|
||||
return true
|
||||
},
|
||||
/**
|
||||
* 提交
|
||||
*/
|
||||
submitMethod() {
|
||||
if (!this.beforeSubmitMethod()) {
|
||||
return
|
||||
}
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
if (this.isAdd) {
|
||||
this.addMethod()
|
||||
} else this.editMethod()
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 隐藏弹窗
|
||||
*/
|
||||
hideFormDialog() {
|
||||
this.dialog = false
|
||||
this.$refs['form'].resetFields()
|
||||
},
|
||||
/**
|
||||
* 获取弹窗的标题
|
||||
*/
|
||||
getFormTitle() {
|
||||
return this.isAdd ? `新增${this.title}` : `编辑${this.title}`
|
||||
},
|
||||
/**
|
||||
* 通用导出
|
||||
*/
|
||||
downloadMethod() {
|
||||
this.beforeInit()
|
||||
this.downloadLoading = true
|
||||
download(this.url + '/download', this.params).then(result => {
|
||||
this.downloadFile(result, this.title, 'xlsx')
|
||||
this.downloadLoading = false
|
||||
}).catch(() => {
|
||||
this.downloadLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user