Merge pull request #1924 from zayn-code/main

表单提交按钮增添loading，防连点
flipped-aurora · Nov 8, 2024 · 5604424 · 5604424
2 parents c4c5f01 + 0d84ea9
commit 5604424
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
diff --git a/server/resource/package/web/view/form.vue.tpl b/server/resource/package/web/view/form.vue.tpl
@@ -226,7 +226,7 @@ getDataSourceFunc()
       {{- end }}
       {{- end }}
         <el-form-item>
-          <el-button type="primary" @click="save">保存</el-button>
+          <el-button :loading="btnLoading" type="primary" @click="save">保存</el-button>
           <el-button type="primary" @click="back">返回</el-button>
         </el-form-item>
       </el-form>
@@ -277,6 +277,9 @@ import ArrayCtrl from '@/components/arrayCtrl/arrayCtrl.vue'
 const route = useRoute()
 const router = useRouter()
 
+// 提交按钮loading
+const btnLoading = ref(false)
+
 const type = ref('')
     {{- range $index, $element := .DictTypes}}
 const {{ $element }}Options = ref([])
@@ -369,8 +372,9 @@ const init = async () => {
 init()
 // 保存按钮
 const save = async() => {
+      btnLoading.value = true
       elFormRef.value?.validate( async (valid) => {
-         if (!valid) return
+         if (!valid) return btnLoading.value = false
             let res
            switch (type.value) {
              case 'create':
@@ -383,6 +387,7 @@ const save = async() => {
                res = await create{{.StructName}}(formData.value)
                break
            }
+           btnLoading.value = false
            if (res.code === 0) {
              ElMessage({
                type: 'success',
@@ -410,4 +415,4 @@ const back = () => {
 <style>
 </style>
 {{- end }}
-{{- end }}
+{{- end }}
diff --git a/server/resource/package/web/view/table.vue.tpl b/server/resource/package/web/view/table.vue.tpl
@@ -642,7 +642,7 @@ getDataSourceFunc()
               <div class="flex justify-between items-center">
                 <span class="text-lg">{{"{{"}}type==='create'?'新增':'编辑'{{"}}"}}</span>
                 <div>
-                  <el-button type="primary" @click="enterDialog">确 定</el-button>
+                  <el-button :loading="btnLoading" type="primary" @click="enterDialog">确 定</el-button>
                   <el-button @click="closeDialog">取 消</el-button>
                 </div>
               </div>
@@ -821,6 +821,9 @@ defineOptions({
     const btnAuth = useBtnAuth()
 {{- end }}
 
+// 提交按钮loading
+const btnLoading = ref(false)
+
 // 控制更多查询条件显示/隐藏状态
 const showAllQuery = ref(false)
 
@@ -1171,8 +1174,9 @@ const closeDialog = () => {
 }
 // 弹窗确定
 const enterDialog = async () => {
+     btnLoading.value = true
      elFormRef.value?.validate( async (valid) => {
-             if (!valid) return
+             if (!valid) return btnLoading.value = false
               let res
               switch (type.value) {
                 case 'create':
@@ -1185,6 +1189,7 @@ const enterDialog = async () => {
                   res = await create{{.StructName}}(formData.value)
                   break
               }
+              btnLoading.value = false
               if (res.code === 0) {
                 ElMessage({
                   type: 'success',
@@ -1263,4 +1268,4 @@ defineOptions({
 </style>
 {{- end }}
 
-{{- end }}
+{{- end }}