优化提交时的loading
This commit is contained in:
parent
e013f71e95
commit
885b616c71
|
|
@ -0,0 +1,90 @@
|
||||||
|
<template>
|
||||||
|
<el-button
|
||||||
|
:type="type"
|
||||||
|
:icon="icon"
|
||||||
|
:size="size"
|
||||||
|
:loading="loading"
|
||||||
|
:disabled="disabled || loading"
|
||||||
|
v-bind="$attrs"
|
||||||
|
v-on="otherListeners"
|
||||||
|
@click="debouncedHandleClick"
|
||||||
|
>
|
||||||
|
<slot></slot>
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { debounce } from 'lodash'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'ComButton',
|
||||||
|
inheritAttrs: false,
|
||||||
|
props: {
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: 'primary',
|
||||||
|
},
|
||||||
|
icon: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
type: String,
|
||||||
|
default: 'default',
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
// 防抖延迟时间(毫秒)
|
||||||
|
debounceTime: {
|
||||||
|
type: Number,
|
||||||
|
default: 800,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loading: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
// 过滤掉 click 事件,避免重复触发
|
||||||
|
otherListeners() {
|
||||||
|
const listeners = { ...this.$listeners }
|
||||||
|
delete listeners.click
|
||||||
|
return listeners
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
// 创建防抖函数
|
||||||
|
this.debouncedHandleClick = debounce(
|
||||||
|
this.handleClick,
|
||||||
|
this.debounceTime,
|
||||||
|
)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async handleClick(event) {
|
||||||
|
// 如果正在 loading,直接返回
|
||||||
|
if (this.loading) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
this.loading = true
|
||||||
|
try {
|
||||||
|
// 执行父组件传入的点击事件
|
||||||
|
if (this.$listeners.click) {
|
||||||
|
const result = this.$listeners.click(event)
|
||||||
|
// 如果是 Promise,等待其完成
|
||||||
|
if (result && typeof result.then === 'function') {
|
||||||
|
await result
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('按钮点击事件执行失败:', error)
|
||||||
|
} finally {
|
||||||
|
this.loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -147,13 +147,13 @@
|
||||||
>
|
>
|
||||||
取消
|
取消
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button
|
<ComButton
|
||||||
size="medium"
|
size="medium"
|
||||||
type="primary"
|
type="primary"
|
||||||
@click="onHandleConfirmAddOrEdit"
|
@click="onHandleConfirmAddOrEdit"
|
||||||
>
|
>
|
||||||
确定
|
确定
|
||||||
</el-button>
|
</ComButton>
|
||||||
</el-row>
|
</el-row>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -214,6 +214,7 @@
|
||||||
<script>
|
<script>
|
||||||
import TableModel from '@/components/TableModel'
|
import TableModel from '@/components/TableModel'
|
||||||
import DialogModel from '@/components/DialogModel'
|
import DialogModel from '@/components/DialogModel'
|
||||||
|
import ComButton from '@/components/ComButton'
|
||||||
import { formLabel, columnsList, dialogConfig } from './config'
|
import { formLabel, columnsList, dialogConfig } from './config'
|
||||||
import {
|
import {
|
||||||
deleteDeptProjectAPI,
|
deleteDeptProjectAPI,
|
||||||
|
|
@ -227,6 +228,7 @@ export default {
|
||||||
components: {
|
components: {
|
||||||
TableModel,
|
TableModel,
|
||||||
DialogModel,
|
DialogModel,
|
||||||
|
ComButton,
|
||||||
},
|
},
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
|
|
@ -328,29 +330,32 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
// 确定按钮
|
// 确定按钮
|
||||||
onHandleConfirmAddOrEdit() {
|
async onHandleConfirmAddOrEdit() {
|
||||||
this.$refs.addOrEditFormRef.validate(async (valid) => {
|
return new Promise(async (resolve) => {
|
||||||
if (valid) {
|
this.$refs.addOrEditFormRef.validate(async (valid) => {
|
||||||
const params = {
|
if (valid) {
|
||||||
...this.addOrEditForm,
|
const params = {
|
||||||
}
|
...this.addOrEditForm,
|
||||||
|
}
|
||||||
|
|
||||||
if (this.dialogConfig.outerTitle === '新增项目部') {
|
if (this.dialogConfig.outerTitle === '新增项目部') {
|
||||||
delete params.id
|
delete params.id
|
||||||
}
|
}
|
||||||
|
|
||||||
const res = await addAndEditDeptProjectAPI(params)
|
const res = await addAndEditDeptProjectAPI(params)
|
||||||
if (res.code === 200) {
|
if (res.code === 200) {
|
||||||
this.$modal.msgSuccess(
|
this.$modal.msgSuccess(
|
||||||
this.dialogConfig.outerTitle === '新增项目部'
|
this.dialogConfig.outerTitle === '新增项目部'
|
||||||
? '新增成功'
|
? '新增成功'
|
||||||
: '修改成功',
|
: '修改成功',
|
||||||
)
|
)
|
||||||
this.handleCloseDialogOuter()
|
this.handleCloseDialogOuter()
|
||||||
this.$refs.deptProjectTableRef.getTableList() // 更新列表
|
this.$refs.deptProjectTableRef.getTableList() // 更新列表
|
||||||
this.$store.dispatch('getSubCompanySelectList') // 更新store中的分公司列表
|
this.$store.dispatch('getSubCompanySelectList') // 更新store中的分公司列表
|
||||||
|
}
|
||||||
|
resolve()
|
||||||
}
|
}
|
||||||
}
|
})
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -610,6 +610,7 @@
|
||||||
<script>
|
<script>
|
||||||
import UploadImgFormData from '@/components/UploadImgFormData'
|
import UploadImgFormData from '@/components/UploadImgFormData'
|
||||||
import UploadFileFormData from '@/components/UploadFileFormData'
|
import UploadFileFormData from '@/components/UploadFileFormData'
|
||||||
|
|
||||||
import {
|
import {
|
||||||
checkFaceImageAPI,
|
checkFaceImageAPI,
|
||||||
checkFaceImageReadCardAPI,
|
checkFaceImageReadCardAPI,
|
||||||
|
|
|
||||||
|
|
@ -131,13 +131,14 @@
|
||||||
>
|
>
|
||||||
取消
|
取消
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button
|
|
||||||
|
<ComButton
|
||||||
size="medium"
|
size="medium"
|
||||||
type="primary"
|
type="primary"
|
||||||
@click="onHandleConfirmAddOrEdit"
|
@click="onHandleConfirmAddOrEdit"
|
||||||
>
|
>
|
||||||
确定
|
确定
|
||||||
</el-button>
|
</ComButton>
|
||||||
</el-row>
|
</el-row>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -182,6 +183,7 @@ import TableModel from '@/components/TableModel'
|
||||||
import DialogModel from '@/components/DialogModel'
|
import DialogModel from '@/components/DialogModel'
|
||||||
import ShanghaiProSetting from './shanghai-pro-setting'
|
import ShanghaiProSetting from './shanghai-pro-setting'
|
||||||
import UploadFileFormData from '@/components/UploadFileFormData'
|
import UploadFileFormData from '@/components/UploadFileFormData'
|
||||||
|
import ComButton from '@/components/ComButton'
|
||||||
import { formLabel, columnsList, dialogConfig } from './config'
|
import { formLabel, columnsList, dialogConfig } from './config'
|
||||||
import {
|
import {
|
||||||
getEntryPersonListAPI,
|
getEntryPersonListAPI,
|
||||||
|
|
@ -205,6 +207,7 @@ export default {
|
||||||
AddOrEditForm,
|
AddOrEditForm,
|
||||||
UploadFileFormData,
|
UploadFileFormData,
|
||||||
ShanghaiProSetting,
|
ShanghaiProSetting,
|
||||||
|
ComButton,
|
||||||
},
|
},
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
|
|
@ -220,6 +223,7 @@ export default {
|
||||||
importFileList: [], // 导入文件列表
|
importFileList: [], // 导入文件列表
|
||||||
idNumber: '', // 身份证号码
|
idNumber: '', // 身份证号码
|
||||||
getEntryPersonListAPI,
|
getEntryPersonListAPI,
|
||||||
|
loading: false,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
@ -285,18 +289,32 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
// 确定按钮
|
// 确定按钮
|
||||||
onHandleConfirmAddOrEdit: debounce(function () {
|
// onHandleConfirmAddOrEdit: debounce(function () {
|
||||||
const handleAsync = async () => {
|
// this.loading = true
|
||||||
try {
|
// const handleAsync = async () => {
|
||||||
await this.$refs.addOrEditFormContentRef.onHandleConfirmAddOrEditFun()
|
// try {
|
||||||
this.$refs.personEntryTableRef.getTableList()
|
// await this.$refs.addOrEditFormContentRef.onHandleConfirmAddOrEditFun()
|
||||||
this.handleCloseDialogOuter()
|
// this.loading = false
|
||||||
} catch (error) {
|
// this.$refs.personEntryTableRef.getTableList()
|
||||||
// console.log('表单提交失败', error)
|
// this.handleCloseDialogOuter()
|
||||||
}
|
// } catch (error) {
|
||||||
}
|
// // console.log('表单提交失败', error)
|
||||||
handleAsync()
|
// }
|
||||||
}, 1000),
|
// }
|
||||||
|
// handleAsync()
|
||||||
|
// }, 300),
|
||||||
|
|
||||||
|
onHandleConfirmAddOrEdit() {
|
||||||
|
return new Promise(async (resolve) => {
|
||||||
|
await this.$refs.addOrEditFormContentRef.onHandleConfirmAddOrEditFun()
|
||||||
|
this.$refs.personEntryTableRef.getTableList()
|
||||||
|
this.handleCloseDialogOuter()
|
||||||
|
resolve()
|
||||||
|
})
|
||||||
|
// await this.$refs.addOrEditFormContentRef.onHandleConfirmAddOrEditFun()
|
||||||
|
// this.$refs.personEntryTableRef.getTableList()
|
||||||
|
// this.handleCloseDialogOuter()
|
||||||
|
},
|
||||||
|
|
||||||
// 关闭弹框
|
// 关闭弹框
|
||||||
handleCloseDialogOuter() {
|
handleCloseDialogOuter() {
|
||||||
|
|
@ -370,7 +388,7 @@ export default {
|
||||||
// 上海人员多工程设置
|
// 上海人员多工程设置
|
||||||
onHandleShanghaiPersonMultiEngineSetting() {
|
onHandleShanghaiPersonMultiEngineSetting() {
|
||||||
this.dialogConfig.outerTitle = '上海人员多工程设置'
|
this.dialogConfig.outerTitle = '上海人员多工程设置'
|
||||||
this.dialogConfig.outerWidth = '80%'
|
this.dialogConfig.outerWidth = '90%'
|
||||||
this.dialogConfig.minHeight = '90vh'
|
this.dialogConfig.minHeight = '90vh'
|
||||||
this.dialogConfig.maxHeight = '90vh'
|
this.dialogConfig.maxHeight = '90vh'
|
||||||
this.dialogConfig.outerVisible = true
|
this.dialogConfig.outerVisible = true
|
||||||
|
|
|
||||||
|
|
@ -353,20 +353,20 @@
|
||||||
<el-button size="medium" @click="onHandleCloseDialogOuter">
|
<el-button size="medium" @click="onHandleCloseDialogOuter">
|
||||||
取消
|
取消
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button
|
<ComButton
|
||||||
size="medium"
|
size="medium"
|
||||||
type="primary"
|
type="primary"
|
||||||
@click="onHandleConfirmAddEntryProject"
|
@click="onHandleConfirmAddEntryProject"
|
||||||
>
|
>
|
||||||
提交
|
提交
|
||||||
</el-button>
|
</ComButton>
|
||||||
<el-button
|
<ComButton
|
||||||
size="medium"
|
size="medium"
|
||||||
type="success"
|
type="success"
|
||||||
@click="onHandleConfirmAddEntryProjectAndContinue"
|
@click="onHandleConfirmAddEntryProjectAndContinue"
|
||||||
>
|
>
|
||||||
提交并继续添加
|
提交并继续添加
|
||||||
</el-button>
|
</ComButton>
|
||||||
</el-row>
|
</el-row>
|
||||||
</template>
|
</template>
|
||||||
</DialogModel>
|
</DialogModel>
|
||||||
|
|
@ -377,6 +377,7 @@
|
||||||
import DialogModel from '@/components/DialogModel'
|
import DialogModel from '@/components/DialogModel'
|
||||||
import UploadImgFormData from '@/components/UploadImgFormData'
|
import UploadImgFormData from '@/components/UploadImgFormData'
|
||||||
import UploadFileFormData from '@/components/UploadFileFormData'
|
import UploadFileFormData from '@/components/UploadFileFormData'
|
||||||
|
import ComButton from '@/components/ComButton'
|
||||||
import {
|
import {
|
||||||
getShanghaiProByIdNumberAPI,
|
getShanghaiProByIdNumberAPI,
|
||||||
getShanghaiProListByWorkerIdAPI,
|
getShanghaiProListByWorkerIdAPI,
|
||||||
|
|
@ -396,6 +397,7 @@ export default {
|
||||||
DialogModel,
|
DialogModel,
|
||||||
UploadFileFormData,
|
UploadFileFormData,
|
||||||
UploadImgFormData,
|
UploadImgFormData,
|
||||||
|
ComButton,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
idNumber: {
|
idNumber: {
|
||||||
|
|
@ -480,7 +482,7 @@ export default {
|
||||||
dialogConfig: {
|
dialogConfig: {
|
||||||
outerVisible: false,
|
outerVisible: false,
|
||||||
outerTitle: '新增入场工程',
|
outerTitle: '新增入场工程',
|
||||||
outerWidth: '60%',
|
outerWidth: '85%',
|
||||||
// minHeight: '78vh',
|
// minHeight: '78vh',
|
||||||
maxHeight: '90vh',
|
maxHeight: '90vh',
|
||||||
},
|
},
|
||||||
|
|
@ -689,6 +691,7 @@ export default {
|
||||||
const res = await this.addShanghaiProEin()
|
const res = await this.addShanghaiProEin()
|
||||||
if (res) {
|
if (res) {
|
||||||
this.$emit('closeDialogOuter')
|
this.$emit('closeDialogOuter')
|
||||||
|
resolve()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -699,6 +702,7 @@ export default {
|
||||||
this.$refs.addEntryProjectFormRef.resetFields()
|
this.$refs.addEntryProjectFormRef.resetFields()
|
||||||
this.dialogConfig.outerVisible = false
|
this.dialogConfig.outerVisible = false
|
||||||
this.getShanghaiProList()
|
this.getShanghaiProList()
|
||||||
|
resolve()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -854,7 +858,7 @@ export default {
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
// this.$modal.msgError('合同上传失败,请重试')
|
// this.$modal.msgError('合同上传失败,请重试')
|
||||||
reject(err)
|
reject(false)
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
reject(false)
|
reject(false)
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue