新增用户表单校验

src/views/permissions/permission.vue

@@ -8,7 +8,7 @@ import { InfoFilled, UserFilled } from '@element-plus/icons-vue'
 import _ from 'lodash'
 import request from '@/util/http'
 import API from '@/util/http'
-import {  } from 'vue';
+import { } from 'vue';
 // 客户明细表格   什么表格？？？？？？？
 const tableData = ref([])
 const roleData = ref([])
@@ -284,55 +284,85 @@ const permissionAddInit = function () {
 }
 //新增用户
 const permissionAdd = async function () {
-  Ref.value.validate(async (valid) => {
-    console.log('addRole', addRole.value)
-    console.log('valid', valid)
-    if (valid) {
-      try {
-        addAdmin.value.adminFlag = 1
-        addAdmin.value.status1 = 1
-        if (addAdmin.value.postiton == '管理员') {
-          addAdmin.value.postiton == 1
-        }
-        const params = {
-          "account": addAdmin.value.account,//OA号
-          "adminName": addAdmin.value.name,//姓名
-          "market": addAdmin.value.market,//地区
-          "roleId": addAdmin.value.permission,//权限ID
-          "postiton": addAdmin.value.postiton,//职位
-          "machineId": addAdmin.value.machineIds[0],//机器码
-          "remark": addAdmin.value.remark//备注
-        }
-        const result = await request({
-          url: '/permission/addPermission',
-          data: params
-        })
-        console.log(addAdmin.value)
-
-        if (result.code == 200) {
-          ElMessage.success('添加成功')
+  try {
+    await new Promise((resolve, reject) => {
+      Ref.value.validate((valid) => {
+        if (valid) {
+          resolve(); // 验证通过，继续执行后续代码
         } else {
-          ElMessage.error(result.msg)
+          reject(new Error('请检查并完善表单信息')); // 验证失败，抛出错误
         }
+      });
+    });
+    addAdmin.value.adminFlag = 1
+    addAdmin.value.status1 = 1
+    if (addAdmin.value.postiton == '管理员') {
+      addAdmin.value.postiton == 1
+    }
+    const params = {
+      "account": addAdmin.value.account,//OA号
+      "adminName": addAdmin.value.name,//姓名
+      "market": addAdmin.value.market,//地区
+      "roleId": addAdmin.value.permission,//权限ID
+      "postiton": addAdmin.value.postiton,//职位
+      "machineId": addAdmin.value.machineIds[0],//机器码
+      "remark": addAdmin.value.remark//备注
+    }
+    const result = await request({
+      url: '/permission/addPermission',
+      data: params
+    })
+    console.log(addAdmin.value)
 
-        addAdmin.value = {}
-        get()
+    if (result.code == 200) {
+      ElMessage.success('添加成功')
+    } else {
+      ElMessage.error(result.msg)
+    }
 
-        closeUserAddVisible()
-      } catch (error) {
-        console.log('新增用户权限失败', error)
+    addAdmin.value = {}
+    get()
+
+    closeUserAddVisible()
+  } catch (error) {
+    console.log('新增用户权限失败', error)
 
-        ElMessage.error('新增用户权限失败')
-        closeUserAddVisible()
+    ElMessage.error('新增用户权限失败')
+  }
+}
+const addUserRules = {
+  account: [
+    { required: true, message: '请输入OA号', trigger: 'blur' }
+  ],
+  name: [
+    { required: true, message: '请输入用户名', trigger: 'blur' }
+  ],
+  market: [
+    { required: true, message: '请选择所属地区', trigger: 'change' }
+  ],
+  permission: [
+    { required: true, message: '请选择角色名称', trigger: 'change' }
+  ],
+  postiton: [
+    { required: true, message: '请输入职位', trigger: 'blur' }
+  ],
+  machineIds: [
+    {
+      required: true,
+      message: '请至少输入一个机器码',
+      trigger: 'change',
+      validator: (rule, value, callback) => {
+        // 检查是否有非空的机器码
+        const hasValid = value.some(item => item.trim() !== '');
+        if (!hasValid) {
+          callback(new Error('请至少输入一个机器码'));
+        } else {
+          callback();
+        }
       }
-    } else {
-      ElMessage({
-        type: 'error',
-        message: '请检查输入内容'
-      })
     }
-  })
-}
+  ]
+};
 // 表单验证ref
 const Ref = ref(null)
 // 使用 _.throttle 并设置 trailing 为 false 实现严格节流，只执行一次
@@ -1114,7 +1144,8 @@ onMounted(async function () {
     <template #footer>
       <!-- 居中显示 -->
 
-      <el-form ref="Ref" :model="addAdmin" label-width="auto" style="max-width: 600px; align-items: center">
+      <el-form ref="Ref" :rules="addUserRules" :model="addAdmin" label-width="auto"
+        style="max-width: 600px; align-items: center">
         <el-form-item prop="account" label="OA号:" required clearable>
           <el-input v-model="addAdmin.account" placeholder="请输入OA号" style="width: 220px" />
         </el-form-item>