-权限新增限制重复提交

src/views/systemManage/userManage/dialogComponent.vue

@@ -14,10 +14,16 @@
       :rules="rules"
     >
       <el-form-item label="用户名：" prop="nickName">
-        <el-input v-model="form.nickName" :disabled="dialogTitle === '查看'"></el-input>
+        <el-input
+          v-model="form.nickName"
+          :disabled="dialogTitle === '查看'"
+        ></el-input>
       </el-form-item>
       <el-form-item label="账号：" prop="userName">
-        <el-input v-model="form.userName" :disabled="dialogTitle === '查看'"></el-input>
+        <el-input
+          v-model="form.userName"
+          :disabled="dialogTitle === '查看'"
+        ></el-input>
       </el-form-item>
       <el-form-item label="性别：" prop="sex">
         <el-radio-group v-model="form.sex" :disabled="dialogTitle === '查看'">
@@ -27,10 +33,16 @@
       </el-form-item>
 
       <el-form-item label="手机号码：" prop="phonenumber">
-        <el-input v-model="form.phonenumber" :disabled="dialogTitle === '查看'"></el-input>
+        <el-input
+          v-model="form.phonenumber"
+          :disabled="dialogTitle === '查看'"
+        ></el-input>
       </el-form-item>
       <el-form-item label="密码" prop="password" v-if="dialogTitle == '新增'">
-        <el-input v-model="form.password" :disabled="dialogTitle === '查看'"></el-input>
+        <el-input
+          v-model="form.password"
+          :disabled="dialogTitle === '查看'"
+        ></el-input>
       </el-form-item>
 
       <!-- <el-form-item
@@ -47,9 +59,14 @@
         ></el-date-picker>
       </el-form-item> -->
 
-      <el-form-item label="角色名称：" prop="roleName" >
+      <el-form-item label="角色名称：" prop="roleName">
         <!-- <el-input v-model="form.roleName"></el-input> -->
-        <el-select v-model="form.roleId" placeholder="请选择"  clearable :disabled="dialogTitle === '查看'" >
+        <el-select
+          v-model="form.roleId"
+          placeholder="请选择"
+          clearable
+          :disabled="dialogTitle === '查看'"
+        >
           <el-option
             v-for="(item, index) in roleSelectData"
             :key="index"
@@ -64,7 +81,11 @@
       <br />
       <div style="text-align: right">
         <el-button @click="closeDialog(0)">取消</el-button>
-        <el-button type="primary" @click="submitForm('formInfo')">
+        <el-button
+          type="primary"
+          @click="submitForm('formInfo')"
+          :disabled="isDisable"
+        >
           确定
         </el-button>
       </div>
@@ -91,6 +112,7 @@ export default defineComponent({
 
     const dialogVisible = ref(false)
     const formInfo = ref(null)
+    const isDisable = ref(false)
 
     const form = ref([])
     const roleSelectData = ref([])
@@ -148,22 +170,30 @@ export default defineComponent({
 
     // 保存-修改操作
     const submitForm = () => {
-      form.value.createTime= parseTime(new Date())
+      form.value.createTime = parseTime(new Date())
 
       formInfo.value.validate((valid) => {
         if (valid) {
-           form.value.roleIds=[form.value.roleId];   //roleIds 传给后台
+          isDisable.value = true
+           setTimeout(() => {
+                  isDisable.value = false //点击一次时隔两秒后才能再次点击
+                }, 2000)
+          form.value.roleIds = [form.value.roleId] //roleIds 传给后台
           if (props.dialogTitle === '新增') {
-            
             api.userAdd(form.value).then((requset) => {
               if (requset.status === 'SUCCESS') {
                 ElMessage.success({
                   message: '新增成功',
                   type: 'success',
                 })
+                setTimeout(() => {
+                  isDisable.value = false //点击一次时隔两秒后才能再次点击
+                }, 2000)
+
                 closeDialog()
               } else {
-                ElMessage.error(requset.msg)
+                alert(requset.msg)
+                // ElMessage.error(requset.msg)
               }
             })
           } else {
@@ -218,12 +248,13 @@ export default defineComponent({
       open,
       submitForm,
       resetForm,
+      isDisable,
       rules: {
         nickName: [
           { required: true, message: '请输入用户名', trigger: 'blur' },
           {
             min: 2,
-           
+
             message: '用户名长度至少2个字符',
             trigger: 'blur',
           },