bonus
/
sh_real_name_system_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化提交时的loading

This commit is contained in:
BianLzhaoMin 2025-11-24 15:42:22 +08:00
parent e013f71e95
commit 885b616c71
5 changed files with 161 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
src/components/ComButton/index.vue Normal file
View File

@ -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>

49
src/views/basic-manage/project-manage/dept-project/index.vue
View File

@ -147,13 +147,13 @@
>
取消
</el-button>
<el-button
<ComButton
size="medium"
type="primary"
@click="onHandleConfirmAddOrEdit"
>
确定
</el-button>
</ComButton>
</el-row>
</template>
@ -214,6 +214,7 @@
<script>
import TableModel from '@/components/TableModel'
import DialogModel from '@/components/DialogModel'
import ComButton from '@/components/ComButton'
import { formLabel, columnsList, dialogConfig } from './config'
import {
deleteDeptProjectAPI,
@ -227,6 +228,7 @@ export default {
components: {
TableModel,
DialogModel,
ComButton,
},
data() {
@ -328,29 +330,32 @@ export default {
},
// 确定按钮
onHandleConfirmAddOrEdit() {
this.$refs.addOrEditFormRef.validate(async (valid) => {
if (valid) {
const params = {
...this.addOrEditForm,
}
async onHandleConfirmAddOrEdit() {
return new Promise(async (resolve) => {
this.$refs.addOrEditFormRef.validate(async (valid) => {
if (valid) {
const params = {
...this.addOrEditForm,
}
if (this.dialogConfig.outerTitle === '新增项目部') {
delete params.id
}
if (this.dialogConfig.outerTitle === '新增项目部') {
delete params.id
}
const res = await addAndEditDeptProjectAPI(params)
if (res.code === 200) {
this.$modal.msgSuccess(
this.dialogConfig.outerTitle === '新增项目部'
? '新增成功'
: '修改成功',
)
this.handleCloseDialogOuter()
this.$refs.deptProjectTableRef.getTableList() // 更新列表
this.$store.dispatch('getSubCompanySelectList') // 更新store中的分公司列表
const res = await addAndEditDeptProjectAPI(params)
if (res.code === 200) {
this.$modal.msgSuccess(
this.dialogConfig.outerTitle === '新增项目部'
? '新增成功'
: '修改成功',
)
this.handleCloseDialogOuter()
this.$refs.deptProjectTableRef.getTableList() // 更新列表
this.$store.dispatch('getSubCompanySelectList') // 更新store中的分公司列表
}
resolve()
}
}
})
})
},

1
src/views/construction-person/entry-and-exit-manage/person-entry/add-or-edit-form.vue
View File

@ -610,6 +610,7 @@
<script>
import UploadImgFormData from '@/components/UploadImgFormData'
import UploadFileFormData from '@/components/UploadFileFormData'
import {
checkFaceImageAPI,
checkFaceImageReadCardAPI,

48
src/views/construction-person/entry-and-exit-manage/person-entry/index.vue
View File

@ -131,13 +131,14 @@
>
取消
</el-button>
<el-button
<ComButton
size="medium"
type="primary"
@click="onHandleConfirmAddOrEdit"
>
确定
</el-button>
</ComButton>
</el-row>
</template>
@ -182,6 +183,7 @@ import TableModel from '@/components/TableModel'
import DialogModel from '@/components/DialogModel'
import ShanghaiProSetting from './shanghai-pro-setting'
import UploadFileFormData from '@/components/UploadFileFormData'
import ComButton from '@/components/ComButton'
import { formLabel, columnsList, dialogConfig } from './config'
import {
getEntryPersonListAPI,
@ -205,6 +207,7 @@ export default {
AddOrEditForm,
UploadFileFormData,
ShanghaiProSetting,
ComButton,
},
data() {
@ -220,6 +223,7 @@ export default {
importFileList: [], // 导入文件列表
idNumber: '', // 身份证号码
getEntryPersonListAPI,
loading: false,
}
},
methods: {
@ -285,18 +289,32 @@ export default {
},
// 确定按钮
onHandleConfirmAddOrEdit: debounce(function () {
const handleAsync = async () => {
try {
await this.$refs.addOrEditFormContentRef.onHandleConfirmAddOrEditFun()
this.$refs.personEntryTableRef.getTableList()
this.handleCloseDialogOuter()
} catch (error) {
// console.log('表单提交失败', error)
}
}
handleAsync()
}, 1000),
// onHandleConfirmAddOrEdit: debounce(function () {
// this.loading = true
// const handleAsync = async () => {
// try {
// await this.$refs.addOrEditFormContentRef.onHandleConfirmAddOrEditFun()
// this.loading = false
// this.$refs.personEntryTableRef.getTableList()
// this.handleCloseDialogOuter()
// } catch (error) {
// // console.log('表单提交失败', error)
// }
// }
// 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() {
@ -370,7 +388,7 @@ export default {
// 上海人员多工程设置
onHandleShanghaiPersonMultiEngineSetting() {
this.dialogConfig.outerTitle = '上海人员多工程设置'
this.dialogConfig.outerWidth = '80%'
this.dialogConfig.outerWidth = '90%'
this.dialogConfig.minHeight = '90vh'
this.dialogConfig.maxHeight = '90vh'
this.dialogConfig.outerVisible = true

16
src/views/construction-person/entry-and-exit-manage/person-entry/shanghai-pro-setting.vue
View File

@ -353,20 +353,20 @@
<el-button size="medium" @click="onHandleCloseDialogOuter">
取消
</el-button>
<el-button
<ComButton
size="medium"
type="primary"
@click="onHandleConfirmAddEntryProject"
>
提交
</el-button>
<el-button
</ComButton>
<ComButton
size="medium"
type="success"
@click="onHandleConfirmAddEntryProjectAndContinue"
>
提交并继续添加
</el-button>
</ComButton>
</el-row>
</template>
</DialogModel>
@ -377,6 +377,7 @@
import DialogModel from '@/components/DialogModel'
import UploadImgFormData from '@/components/UploadImgFormData'
import UploadFileFormData from '@/components/UploadFileFormData'
import ComButton from '@/components/ComButton'
import {
getShanghaiProByIdNumberAPI,
getShanghaiProListByWorkerIdAPI,
@ -396,6 +397,7 @@ export default {
DialogModel,
UploadFileFormData,
UploadImgFormData,
ComButton,
},
props: {
idNumber: {
@ -480,7 +482,7 @@ export default {
dialogConfig: {
outerVisible: false,
outerTitle: '新增入场工程',
outerWidth: '60%',
outerWidth: '85%',
// minHeight: '78vh',
maxHeight: '90vh',
},
@ -689,6 +691,7 @@ export default {
const res = await this.addShanghaiProEin()
if (res) {
this.$emit('closeDialogOuter')
resolve()
}
},
@ -699,6 +702,7 @@ export default {
this.$refs.addEntryProjectFormRef.resetFields()
this.dialogConfig.outerVisible = false
this.getShanghaiProList()
resolve()
}
},
@ -854,7 +858,7 @@ export default {
}
} catch (err) {
// this.$modal.msgError('合同上传失败，请重试')
reject(err)
reject(false)
}
} else {
reject(false)