组件的写法：
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
import { validateHaveSpace, validateNumberFloat, validNumber } from '@/utils/rule'
import { Form as ElForm } from 'element-ui'
import { deepClone, getValueObject, getDate } from '@/utils/function'
@Component({
name: 'CreateData',
components: {
}
})
export default class extends Vue {
/**
* 外部参数
*/
/** 是否显示弹窗 */
@Prop({ type: Boolean, default: false }) private show!: boolean
/** 表单数据 */
@Prop({ required: true }) private data!: any;
private form: any = {}
get Show() {
return this.show
}
set Show(value) {
this.$emit('update:show', value)
}
@Watch('data', { immediate: false, deep: true })
private changeData() {
(this.$refs.form as ElForm) && (this.$refs.form as ElForm).clearValidate()
this.form = this.data
}
@Watch('show')
private changeLoading() {
this.loading = false
}
/** 提交表单dialog */
private loading: boolean = false
private maxAmount = (rule: any, value: string, callback: any) => {
if (value) {
if ((+value) > (+(this.getThis().form.balance))) {
callback(new Error('付款金额不能大于余额'))
} else {
callback()
}
} else {
callback()
}
}
private getThis(): any {
return this
}
private rules: any = {
amount: [
{ required: true, message: '请输入', trigger: 'change' },
{ validator: validateHaveSpace, trigger: 'change' },
{ validator: validateNumberFloat, trigger: 'change' },
{ validator: this.maxAmount, trigger: 'change' }
]
}
/**
* 关闭弹窗
*/
private handleClose() {
this.Show = false
}
/**
* 确定
*/
private handleConfirm() {
(this.$refs[formName] as ElForm).validate(async valid => {
if (valid) {
this.loading = true
let query = { oid: '123456' }
this.$emit('change', query)
} else {
this.$nextTick(() => {
// 验证不通过跳转至第一项不通过的地方
window.scrollTo(0, (document.querySelector('.el-form-item__error') as HTMLElement).offsetTop)
})
}
})
}
/**
* 确定
*/
public hideLoading() {
this.loading = false
}
}
</script>
使用时：
<!-- 添加收款记录 start -->
<v-add-recordsref="AddRecords":data.sync="temp":show.sync="showAddRecordsDia"@change="handleConfirmAddRecords"/>
<!-- 添加收款记录 end -->
/**
* 确认添加收款弹框
*/
private async handleConfirmAddRecords(query: RequestAddRecords) {
try {
await addRecords(query)
this.$message.success('添加收款成功')
this.showAddRecordsDia = false
this.getPayRecords(this.oid)
} catch (error) {
(this as any).$refs.AddRecords.hideLoading()
}
}
