You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
173 lines
5.2 KiB
173 lines
5.2 KiB
2 years ago
|
import { VALIDATE_FAILED, getRefPromise, validateFormAndTables} from '@/components/jeecg/JVxeTable/utils/vxeUtils.js'
|
||
|
import { httpAction, getAction } from '@/api/manage'
|
||
|
|
||
|
export const JVxeTableMixin = {
|
||
|
data() {
|
||
|
return {
|
||
|
title: '操作',
|
||
|
visible: false,
|
||
|
form: this.$form.createForm(this),
|
||
|
confirmLoading: false,
|
||
|
scrolling: true,
|
||
|
model: {},
|
||
|
labelCol: {
|
||
|
xs: { span: 24 },
|
||
|
sm: { span: 6 }
|
||
|
},
|
||
|
wrapperCol: {
|
||
|
xs: { span: 24 },
|
||
|
sm: { span: 18 }
|
||
|
}
|
||
|
}
|
||
|
},
|
||
|
methods: {
|
||
|
|
||
|
/** 获取所有的JVxeTable实例 */
|
||
|
getAllTable() {
|
||
|
if (!(this.refKeys instanceof Array)) {
|
||
|
throw this.throwNotArray('refKeys')
|
||
|
}
|
||
|
let values = this.refKeys.map(key => getRefPromise(this, key))
|
||
|
return Promise.all(values)
|
||
|
},
|
||
|
|
||
|
/** 遍历所有的JVxeTable实例 */
|
||
|
eachAllTable(callback) {
|
||
|
// 开始遍历
|
||
|
this.getAllTable().then(tables => {
|
||
|
tables.forEach((item, index) => {
|
||
|
if (typeof callback === 'function') {
|
||
|
callback(item, index)
|
||
|
}
|
||
|
})
|
||
|
})
|
||
|
},
|
||
|
|
||
|
/** 当点击新增按钮时调用此方法 */
|
||
|
add() {
|
||
|
if (typeof this.addBefore === 'function') this.addBefore()
|
||
|
// 默认新增空数据
|
||
|
let rowNum = this.addDefaultRowNum
|
||
|
if (typeof rowNum !== 'number') {
|
||
|
rowNum = 1
|
||
|
console.warn('由于你没有在 data 中定义 addDefaultRowNum 或 addDefaultRowNum 不是数字,所以默认添加一条空数据,如果不想默认添加空数据,请将定义 addDefaultRowNum 为 0')
|
||
|
}
|
||
|
//update-begin-author:taoyan date:20210315 for: 一对多jvex 默认几行不好使了 LOWCOD-1349
|
||
|
this.eachAllTable((item) => {
|
||
|
setTimeout(()=>{
|
||
|
item.addRows()
|
||
|
}, 30)
|
||
|
})
|
||
|
//update-end-author:taoyan date:20210315 for: 一对多jvex 默认几行不好使了 LOWCOD-1349
|
||
|
if (typeof this.addAfter === 'function') this.addAfter(this.model)
|
||
|
this.edit({})
|
||
|
},
|
||
|
/** 当点击了编辑(修改)按钮时调用此方法 */
|
||
|
edit(record) {
|
||
|
if (typeof this.editBefore === 'function') this.editBefore(record)
|
||
|
this.visible = true
|
||
|
this.activeKey = this.refKeys[0]
|
||
|
this.form.resetFields()
|
||
|
this.model = Object.assign({}, record)
|
||
|
if (typeof this.editAfter === 'function') this.editAfter(this.model)
|
||
|
},
|
||
|
/** 关闭弹窗,并将所有JVxeTable实例回归到初始状态 */
|
||
|
close() {
|
||
|
this.visible = false
|
||
|
this.eachAllTable((item) => {
|
||
|
item._remove()
|
||
|
})
|
||
|
this.$emit('close')
|
||
|
},
|
||
|
|
||
|
/** 查询某个tab的数据 */
|
||
|
requestSubTableData(url, params, tab, success) {
|
||
|
tab.loading = true
|
||
|
getAction(url, params).then(res => {
|
||
|
let { result } = res
|
||
|
let dataSource = []
|
||
|
if (result) {
|
||
|
if (Array.isArray(result)) {
|
||
|
dataSource = result
|
||
|
} else if (Array.isArray(result.records)) {
|
||
|
dataSource = result.records
|
||
|
}
|
||
|
}
|
||
|
tab.dataSource = dataSource
|
||
|
typeof success === 'function' ? success(res) : ''
|
||
|
}).finally(() => {
|
||
|
tab.loading = false
|
||
|
})
|
||
|
},
|
||
|
/** 发起请求,自动判断是执行新增还是修改操作 */
|
||
|
request(formData) {
|
||
|
let url = this.url.add, method = 'post'
|
||
|
if (this.model.id) {
|
||
|
url = this.url.edit
|
||
|
method = 'put'
|
||
|
}
|
||
|
this.confirmLoading = true
|
||
|
console.log("formData===>",formData);
|
||
|
httpAction(url, formData, method).then((res) => {
|
||
|
if (res.success) {
|
||
|
this.$message.success(res.message)
|
||
|
this.$emit('ok')
|
||
|
this.close()
|
||
|
} else {
|
||
|
this.$message.warning(res.message)
|
||
|
}
|
||
|
}).finally(() => {
|
||
|
this.confirmLoading = false
|
||
|
})
|
||
|
},
|
||
|
|
||
|
/* --- handle 事件 --- */
|
||
|
|
||
|
/** ATab 选项卡切换事件 */
|
||
|
handleChangeTabs(key) {
|
||
|
// 自动重置scrollTop状态,防止出现白屏
|
||
|
getRefPromise(this, key).then(vxeTable => {
|
||
|
vxeTable.resetScrollTop()
|
||
|
})
|
||
|
},
|
||
|
/** 关闭按钮点击事件 */
|
||
|
handleCancel() {
|
||
|
this.close()
|
||
|
},
|
||
|
/** 确定按钮点击事件 */
|
||
|
handleOk() {
|
||
|
/** 触发表单验证 */
|
||
|
this.getAllTable().then(tables => {
|
||
|
/** 一次性验证主表和所有的次表 */
|
||
|
return validateFormAndTables(this.form, tables)
|
||
|
}).then(allValues => {
|
||
|
if (typeof this.classifyIntoFormData !== 'function') {
|
||
|
throw this.throwNotFunction('classifyIntoFormData')
|
||
|
}
|
||
|
let formData = this.classifyIntoFormData(allValues)
|
||
|
// 发起请求
|
||
|
return this.request(formData)
|
||
|
}).catch(e => {
|
||
|
if (e.error === VALIDATE_NO_PASSED) {
|
||
|
// 如果有未通过表单验证的子表,就自动跳转到它所在的tab
|
||
|
this.activeKey = e.index == null ? this.activeKey : this.refKeys[e.index]
|
||
|
} else {
|
||
|
console.error(e)
|
||
|
}
|
||
|
})
|
||
|
},
|
||
|
|
||
|
/* --- throw --- */
|
||
|
|
||
|
/** not a function */
|
||
|
throwNotFunction(name) {
|
||
|
return `${name} 未定义或不是一个函数`
|
||
|
},
|
||
|
|
||
|
/** not a array */
|
||
|
throwNotArray(name) {
|
||
|
return `${name} 未定义或不是一个数组`
|
||
|
}
|
||
|
|
||
|
}
|
||
|
}
|