修复问题

public/i18n/lang-en.json

@@ -221,7 +221,7 @@
       "roles": "Roles"
     },
     "org": {
-      "organization": "Organization",
+      "tree_title": "Organization",
       "details": "Details",
       "add": "Add",
       "parent_org": "Parent Organization",
@@ -234,12 +234,12 @@
       "reset": "Reset"
     },
     "resource": {
-      "organization": "Resource",
+      "tree_title": "Resource",
       "details": "Details",
       "add": "Add",
       "parent_org": "Parent Resource",
       "status": "Resource Status",
-      "org_name": "Resource Name",
+      "resource_name": "Resource Name",
       "leader": "Leader",
       "phone": "Phone",
       "address": "Resource Address",

public/i18n/lang-zh.json

@@ -221,7 +221,7 @@
       "roles": "角色"
     },
     "org": {
-      "organization": "机构",
+      "tree_title": "机构",
       "details": "详情",
       "add": "新增",
       "parent_org": "上级机构",
@@ -234,12 +234,12 @@
       "reset": "重置"
     },
     "resource": {
-      "organization": "资源",
+      "tree_title": "资源",
       "details": "详情",
       "add": "新增",
       "parent_org": "上级资源",
       "status": "资源状态",
-      "org_name": "资源名称",
+      "resource_name": "资源名称",
       "leader": "联系人",
       "phone": "联系电话",
       "address": "资源地址",

src/modules/permission/account/AccountForm.vue

@@ -1,11 +1,8 @@
 <template>
-  <a-form :model="edit_form" auto-label-width>
+  <a-form ref="accountFormRef" :rules="rules" :model="edit_form" auto-label-width>
     <a-row :gutter="24" class="flex-row">
       <a-col :span="12" v-if="!is_edit_mode" class="flex-col">
-        <a-form-item field="userName" :label="$t('permission.account.username')" :rules="[
-          { required: true, message: '用户名必填' },
-          { maxLength: 50, message: '长度不超过50' },
-        ]">
+        <a-form-item field="userName" :label="$t('permission.account.username')">
           <a-input v-model="edit_form.userName" />
         </a-form-item>
       </a-col>
@@ -22,10 +19,7 @@
         </a-form-item>
       </a-col>
       <a-col :span="12" class="flex-col">
-        <a-form-item required field="email" :label="$t('permission.account.email')" :rules="[
-          { required: true, message: '邮箱必填' },
-          { maxLength: 50, message: '长度不超过50' },
-        ]">
+        <a-form-item required field="email" :label="$t('permission.account.email')">
           <a-input v-model="edit_form.email" />
         </a-form-item>
       </a-col>
@@ -38,8 +32,13 @@
       </a-col>
       <a-col :span="12" class="flex-col">
         <a-form-item field="roles" :label="$t('permission.account.roles')">
-          <a-select multiple v-model="edit_form.roles" :options="role_list"
-            :field-names="{ value: 'roleId', label: 'roleName' }" @change="roleChange">
+          <a-select
+            multiple
+            v-model="edit_form.roles"
+            :options="role_list"
+            :field-names="{ value: 'roleId', label: 'roleName' }"
+            @change="roleChange"
+          >
           </a-select>
         </a-form-item>
       </a-col>
@@ -53,15 +52,32 @@ import { toRefs } from 'vue';
 const props = defineProps({
   edit_form: Object,
   is_edit_mode: Boolean,
-  role_list: Array,
+  role_list: Array
 });
 
+const rules = {
+  userName: [{ required: true, message: '用户名必填' }],
+  email: [{ required: true, message: '邮箱必填' }],
+  pwd: [
+    { required: true, message: '密码必填' },
+    {
+      validator: (value, cb) => {
+        const regex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
+        if (value.length < 8 || !regex.test(value)) {
+          cb('密码至少8位，且包含字母和数字');
+        } else {
+          cb();
+        }
+      }
+    }
+  ]
+};
 const { edit_form, is_edit_mode, role_list } = toRefs(props);
 
 // 角色变化处理
 const roleChange = (selectedRoles) => {
   edit_form.role = selectedRoles;
-}
+};
 </script>
 
 <style lang="css" scoped>

src/modules/permission/account/index.vue

@@ -57,7 +57,7 @@
     @cancel="handleEdit(null, false)"
     :title="is_edit_mode ? $t('permission.account.edit') : $t('permission.account.new_user')"
   >
-    <AccountForm :edit_form="edit_form" :is_edit_mode="is_edit_mode" :role_list="role_list" />
+    <AccountForm ref="accountForm" :edit_form="edit_form" :is_edit_mode="is_edit_mode" :role_list="role_list" />
   </OperateModal>
 
   <ViewPermission
@@ -104,6 +104,7 @@ import { QueryAllRoleList, QueryDeptTree } from '../../../apis/permission/common
 
 const keywords = ref('');
 // 表格相关
+const accountForm = ref(null);
 const table_data = ref([]);
 const table_columns = ref([
   { title: '序号', width: 80, fixed: 'left', slotName: 'index' },
@@ -209,7 +210,7 @@ const resetClick = () => {
   getUserList();
 };
 const createClick = () => {
-  edit_form.userId = '';
+  edit_form.userId = 0;
   edit_form.userName = '';
   edit_form.loginName = '';
   edit_form.phone = '';
@@ -221,7 +222,7 @@ const createClick = () => {
   handleEdit(null, true);
 };
 const refreshClick = () => {
-  console.log('刷新');
+  getUserList();
 };
 
 // 切换页码
@@ -335,21 +336,26 @@ const handleDelete = async (userId) => {
   }
 };
 const modalSave = async () => {
-  edit_visible.value = false;
-  const data = {
-    userId: is_edit_mode.value ? edit_form.userId : undefined,
-    ...edit_form
-  };
-  const apiCall = is_edit_mode.value ? UpdateUser : AddUser;
-  const { code } = await apiCall(data);
-
-  if (code === 200) {
-    const action = is_edit_mode.value ? '编辑' : '新增';
-    Message.success({
-      title: `${action}用户`,
-      content: `${action}成功`
+  if (accountForm.value.$refs.accountFormRef.validate) {
+    accountForm.value.$refs.accountFormRef.validate(async (valid) => {
+      if (!valid) {
+        edit_visible.value = false;
+        const data = {
+          userId: is_edit_mode.value ? edit_form.userId : 0,
+          ...edit_form
+        };
+        const apiCall = is_edit_mode.value ? UpdateUser : AddUser;
+        const { code } = await apiCall(data);
+        if (code === 200) {
+          const action = is_edit_mode.value ? '编辑' : '新增';
+          Message.success({
+            title: `${action}用户`,
+            content: `${action}成功`
+          });
+          getUserList();
+        }
+      }
     });
-    getUserList();
   }
 };
 const tableSizeChange = (size) => {
@@ -399,7 +405,7 @@ onMounted(() => {
   } else {
     Message.error({
       title: '权限不足',
-      content: '您没有权限查看用户列表'
+      content: '抱歉，您没有权限查看用户列表'
     });
   }
 });

src/modules/permission/group/GroupForm.vue

@@ -1,10 +1,8 @@
 <template>
-  <a-form :model="edit_form" auto-label-width>
+  <a-form ref="groupFormRef" :model="edit_form" auto-label-width>
     <a-row :gutter="24">
       <a-col :span="22">
-        <a-form-item field="groupName" label="组名称" :rules="[
-          { required: true, message: '组名称必填' },
-        ]">
+        <a-form-item field="groupName" label="组名称" :rules="[{ required: true, message: '组名称必填' }]">
           <a-input v-model="edit_form.groupName" />
         </a-form-item>
       </a-col>
@@ -23,7 +21,7 @@
 import { toRefs } from 'vue';
 const props = defineProps({
   edit_form: Object,
-  is_edit_mode: Boolean,
+  is_edit_mode: Boolean
 });
 
 const { edit_form } = toRefs(props);

src/modules/permission/group/index.vue

@@ -53,7 +53,7 @@
     @cancel="handleEdit(null, false)"
     :title="is_edit_mode ? $t('permission.group.modal_title_edit') : $t('permission.group.modal_title_add')"
   >
-    <GroupForm :edit_form="edit_form" :is_edit_mode="is_edit_mode" />
+    <GroupForm ref="groupForm" :edit_form="edit_form" :is_edit_mode="is_edit_mode" />
   </OperateModal>
 
   <MembertConfigModal
@@ -105,6 +105,7 @@ const { t } = useI18n();
 
 const keywords = ref('');
 // 表格相关
+const groupForm = ref(null);
 const table_data = ref([]);
 const table_columns = ref([
   { title: t('permission.group.serial_number'), width: 80, slotName: 'index' },
@@ -175,7 +176,7 @@ const createClick = () => {
   edit_visible.value = true;
 };
 const refreshClick = () => {
-  console.log('刷新');
+  getGroupList();
 };
 
 // 切换页码
@@ -296,22 +297,28 @@ const handleDelete = async (groupId) => {
   }
 };
 const modalSave = async () => {
-  edit_visible.value = false;
-  const data = {
-    id: is_edit_mode.value ? edit_form.groupId : undefined,
-    ...edit_form
-  };
-
-  const apiCall = is_edit_mode.value ? UpdateGroup : CreateGroup;
-  const { code } = await apiCall(data);
+  if (groupForm.value.$refs.groupFormRef.validate) {
+    groupForm.value.$refs.groupFormRef.validate(async (valid) => {
+      if (!valid) {
+        edit_visible.value = false;
+        const data = {
+          id: is_edit_mode.value ? edit_form.groupId : undefined,
+          ...edit_form
+        };
 
-  if (code === 200) {
-    const action = is_edit_mode.value ? '编辑' : '新增';
-    Message.success({
-      title: `${action}用户`,
-      content: `${action}成功`
+        const apiCall = is_edit_mode.value ? UpdateGroup : CreateGroup;
+        const { code } = await apiCall(data);
+
+        if (code === 200) {
+          const action = is_edit_mode.value ? '编辑' : '新增';
+          Message.success({
+            title: `${action}用户`,
+            content: `${action}成功`
+          });
+          getGroupList();
+        }
+      }
     });
-    getGroupList();
   }
 };
 
@@ -358,7 +365,7 @@ onMounted(() => {
   } else {
     Message.error({
       title: '权限不足',
-      content: '您没有权限查看用户组列表'
+      content: '抱歉，您没有权限查看用户组列表'
     });
   }
 });

src/modules/permission/org/OrgForm.vue

@@ -1,22 +1,44 @@
 <template>
-  <a-form :model="org_form" layout="horizontal" ref="formRef">
+  <a-form :model="org_form" layout="horizontal" ref="orgFormRef">
     <a-form-item field="parentName" :label="$t('permission.org.parent_org')" disabled>
       <a-input v-model="org_form.parentName" />
     </a-form-item>
     <a-form-item field="status" :label="$t('permission.org.status')">
-      <a-switch v-model="org_form.status" @change="statusChange(org_form.status)" checked-value="1"
-        unchecked-value="0"></a-switch>
+      <a-switch
+        v-model="org_form.status"
+        @change="statusChange(org_form.status)"
+        checked-value="1"
+        unchecked-value="0"
+      ></a-switch>
     </a-form-item>
-    <a-form-item field="deptName" :label="$t('permission.org.org_name')"
-      :rules="[{ required: true, message: '机构名称必填' }, { maxLength: 50, message: '长度不超过50' }]">
+    <a-form-item
+      field="deptName"
+      :label="$t('permission.org.org_name')"
+      :rules="[
+        { required: true, message: '机构名称必填' },
+        { maxLength: 50, message: '长度不超过50' }
+      ]"
+    >
       <a-input v-model="org_form.deptName" />
     </a-form-item>
-    <a-form-item field="leader" :label="$t('permission.org.leader')"
-      :rules="[{ required: true, message: '联系人必填' }, { maxLength: 50, message: '长度不超过50' }]">
+    <a-form-item
+      field="leader"
+      :label="$t('permission.org.leader')"
+      :rules="[
+        { required: true, message: '联系人必填' },
+        { maxLength: 50, message: '长度不超过50' }
+      ]"
+    >
       <a-input v-model="org_form.leader" />
     </a-form-item>
-    <a-form-item field="phone" :label="$t('permission.org.phone')"
-      :rules="[{ required: true, message: '联系电话必填' }, { maxLength: 50, message: '长度不超过50' }]">
+    <a-form-item
+      field="phone"
+      :label="$t('permission.org.phone')"
+      :rules="[
+        { required: true, message: '联系电话必填' },
+        { maxLength: 50, message: '长度不超过50' }
+      ]"
+    >
       <a-input v-model="org_form.phone" />
     </a-form-item>
     <a-form-item field="address" :label="$t('permission.org.address')">
@@ -56,8 +78,7 @@ const { org_form } = toRefs(props);
 
 const statusChange = (status) => {
   emit('statusChange', status);
-}
-
+};
 </script>
 
 <style lang="css" scoped></style>

src/modules/permission/org/index.vue

@@ -3,7 +3,7 @@
     <div class="left">
       <TreeParts
         :treeData="org_tree_data"
-        :title="$t('permission.org.organization')"
+        :title="$t('permission.org.tree_title')"
         :showLock="true"
         :fieldNames="{
           key: 'deptId',
@@ -41,7 +41,7 @@
       @cancel="resourceFromCancel"
       :title="$t('permission.org.add')"
     >
-      <OrgForm :org_form="org_form"></OrgForm>
+      <OrgForm ref="orgForm" :org_form="org_form"></OrgForm>
     </Modal>
   </div>
 </template>
@@ -63,6 +63,7 @@ import {
 } from '../../../apis/permission/org';
 import { QueryDeptTree } from '../../../apis/permission/common';
 
+const orgForm = ref(null);
 const org_visible = ref(false);
 const is_edit_mode = ref(true);
 const org_tree_data = ref([]);
@@ -155,23 +156,29 @@ const resourceFromStatusChange = async (status) => {
 };
 
 const resourceFromSave = async () => {
-  const data = {
-    ...org_form,
-    deptId: is_edit_mode.value && org_form.deptId ? org_form.deptId[0] : null
-  };
+  if (orgForm.value.$refs.orgFormRef.validate) {
+    orgForm.value.$refs.orgFormRef.validate(async (valid) => {
+      if (!valid) {
+        const data = {
+          ...org_form,
+          deptId: is_edit_mode.value && org_form.deptId ? org_form.deptId[0] : null
+        };
 
-  const apiCall = is_edit_mode.value ? UpdateDept : CreateDept;
-  const { code } = await apiCall(data);
+        const apiCall = is_edit_mode.value ? UpdateDept : CreateDept;
+        const { code } = await apiCall(data);
 
-  if (code === 200) {
-    const action = is_edit_mode.value ? '编辑' : '新增';
-    Message.success({
-      title: `${action}用户`,
-      content: `${action}成功`
-    });
+        if (code === 200) {
+          const action = is_edit_mode.value ? '编辑' : '新增';
+          Message.success({
+            title: `${action}用户`,
+            content: `${action}成功`
+          });
 
-    getDeptTree();
-    org_visible.value = false;
+          getDeptTree();
+          org_visible.value = false;
+        }
+      }
+    });
   }
 };
 
@@ -231,7 +238,7 @@ onMounted(() => {
   } else {
     Message.error({
       title: '权限不足',
-      content: '您没有权限查看该页面'
+      content: '抱歉，您没有权限查看该页面'
     });
   }
 });

src/modules/permission/resource/ResourceForm.vue

@@ -1,37 +1,74 @@
 <template>
-  <a-form :model="resource_form" layout="horizontal">
+  <a-form :model="resource_form" layout="horizontal" ref="resourceFormRef">
     <a-form-item field="parentName" :label="$t('permission.resource.parent_org')" disabled>
       <a-input v-model="resource_form.parentName" />
     </a-form-item>
     <a-form-item field="status" :label="$t('permission.resource.status')">
-      <a-switch v-model="resource_form.status" @change="statusChange(resource_form.status)" checked-value="1"
-        unchecked-value="0"></a-switch>
+      <a-switch
+        v-model="resource_form.status"
+        @change="statusChange(resource_form.status)"
+        checked-value="1"
+        unchecked-value="0"
+      ></a-switch>
     </a-form-item>
-    <a-form-item field="menuName" :label="$t('permission.resource.org_name')"
-      :rules="[{ required: true, message: '资源名称必填' }, { maxLength: 50, message: '长度不超过50' }]">
+    <a-form-item
+      field="menuName"
+      :label="$t('permission.resource.resource_name')"
+      :rules="[
+        { required: true, message: '资源名称必填' },
+        { maxLength: 50, message: '长度不超过50' }
+      ]"
+    >
       <a-input v-model="resource_form.menuName" />
     </a-form-item>
-    <a-form-item field="path" :label="$t('permission.resource.address')"
-      :rules="[{ required: true, message: '资源地址必填' }, { maxLength: 50, message: '长度不超过50' }]">
+    <a-form-item
+      field="path"
+      :label="$t('permission.resource.address')"
+      :rules="[
+        { required: true, message: '资源地址必填' },
+        { maxLength: 50, message: '长度不超过50' }
+      ]"
+    >
       <a-input v-model="resource_form.path" />
     </a-form-item>
     <a-form-item field="icon" :label="$t('permission.resource.icon')">
       <IconPicker v-model="resource_form.icon" />
     </a-form-item>
-    <a-form-item field="menuType" :label="$t('permission.resource.menuType')"
-      :rules="[{ required: true, message: '资源类型必填' }]">
-      <a-select v-model="resource_form.menuType" :options="options" :field-names="fieldNames"
-        :style="{ width: '320px' }" placeholder="请选择" />
+    <a-form-item
+      field="menuType"
+      :label="$t('permission.resource.menuType')"
+      :rules="[{ required: true, message: '资源类型必填' }]"
+    >
+      <a-select
+        v-model="resource_form.menuType"
+        :options="options"
+        :field-names="fieldNames"
+        :style="{ width: '320px' }"
+        placeholder="请选择"
+      />
     </a-form-item>
     <a-form-item field="description" :label="$t('permission.resource.description')">
       <a-input v-model="resource_form.description" placeholder="请输入提示词" />
     </a-form-item>
-    <a-form-item field="perms" :label="$t('permission.resource.perms')"
-      :rules="[{ required: true, message: '资源控制权限字符必填' }, { maxLength: 50, message: '长度不超过50' }]">
+    <a-form-item
+      field="perms"
+      :label="$t('permission.resource.perms')"
+      :rules="[
+        { required: true, message: '资源控制权限字符必填' },
+        { maxLength: 50, message: '长度不超过50' }
+      ]"
+    >
       <a-input v-model="resource_form.perms" />
     </a-form-item>
-    <a-form-item field="component" :label="$t('permission.resource.component')" style="align: start"
-      :rules="[{ required: true, message: '组件地址必填' }, { maxLength: 50, message: '长度不超过50' }]">
+    <a-form-item
+      field="component"
+      :label="$t('permission.resource.component')"
+      style="align: start"
+      :rules="[
+        { required: true, message: '组件地址必填' },
+        { maxLength: 50, message: '长度不超过50' }
+      ]"
+    >
       <a-input v-model="resource_form.component" />
     </a-form-item>
     <a-form-item>
@@ -76,16 +113,16 @@ const props = defineProps({
 const options = [
   {
     value: '3',
-    label: '页面',
+    label: '页面'
   },
   {
     value: '0',
-    label: '菜单',
+    label: '菜单'
   },
   {
     value: '1',
-    label: '按钮',
-  },
+    label: '按钮'
+  }
 ];
 
 // 将 props 解构
@@ -105,8 +142,7 @@ const handleSuccess = (urls) => {
 };
 const statusChange = (status) => {
   emit('statusChange', status);
-}
-
+};
 </script>
 
 <style lang="css" scoped></style>

src/modules/permission/resource/index.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="organization-container">
+  <div class="resourceanization-container">
     <div class="left">
       <TreeParts
         :treeData="resourcetree_data"
-        :title="$t('permission.resource.organization')"
+        :title="$t('permission.resource.tree_title')"
         :fieldNames="{
           key: 'menuId',
           title: 'menuName',
@@ -20,27 +20,27 @@
       <a-card :title="$t('permission.resource.details')" style="height: 100%">
         <ResourceForm
           :resource_form="resource_form"
-          @statusChange="orgFromStatusChange"
-          @save="orgFromSave"
-          @reset="orgFromReset"
+          @statusChange="resourceFromStatusChange"
+          @save="resourceFromSave"
+          @reset="resourceFromReset"
         >
           <template #actions>
-            <a-button v-hasPerm="'system:resource:edit'" @click="orgFromSave">{{
+            <a-button v-hasPerm="'system:resource:edit'" @click="resourceFromSave">{{
               $t('permission.resource.save')
             }}</a-button>
-            <a-button @click="orgFromReset">{{ $t('permission.resource.reset') }}</a-button>
+            <a-button @click="resourceFromReset">{{ $t('permission.resource.reset') }}</a-button>
           </template>
         </ResourceForm>
       </a-card>
     </div>
 
     <Modal
-      :visible.sync="resourcevisible"
-      @ok="orgFromSave"
-      @cancel="orgFromCancel"
+      :visible.sync="resource_visible"
+      @ok="resourceFromSave"
+      @cancel="resourceFromCancel"
       :title="$t('permission.resource.add')"
     >
-      <ResourceForm :resource_form="resource_form"></ResourceForm>
+      <ResourceForm ref="resourceForm" :resource_form="resource_form"></ResourceForm>
     </Modal>
   </div>
 </template>
@@ -61,7 +61,8 @@ import {
   DeleteResource
 } from '../../../apis/permission/resource';
 
-const resourcevisible = ref(false);
+const resourceForm = ref(null);
+const resource_visible = ref(false);
 const is_edit_mode = ref(true);
 const resourcetree_data = ref([]);
 const tree_permission_list = {
@@ -130,7 +131,7 @@ const onAddBtnClick = (nodeData) => {
   // 多余的参数
   resource_form.orderNum = 0;
 
-  resourcevisible.value = true;
+  resource_visible.value = true;
   is_edit_mode.value = false;
 };
 
@@ -144,7 +145,7 @@ const onDeleteBtnClick = async ({ menuId }) => {
   }
   getResourceTree();
 };
-const orgFromStatusChange = async (status) => {
+const resourceFromStatusChange = async (status) => {
   const data = {
     menuId: resource_form.resourceId[0],
     status
@@ -159,28 +160,34 @@ const orgFromStatusChange = async (status) => {
   }
 };
 
-const orgFromSave = async () => {
-  const data = {
-    ...resource_form,
-    menuId: is_edit_mode.value && resource_form.resourceId ? resource_form.resourceId[0] : null
-  };
-
-  const apiCall = is_edit_mode.value ? UpdateResource : CreateResource;
-  const { code } = await apiCall(data);
-
-  if (code === 200) {
-    const action = is_edit_mode.value ? '编辑' : '新增';
-    Message.success({
-      title: `${action}用户`,
-      content: `${action}成功`
+const resourceFromSave = async () => {
+  if (resourceForm.value.$refs.resourceFormRef.validate) {
+    resourceForm.value.$refs.resourceFormRef.validate(async (valid) => {
+      if (!valid) {
+        const data = {
+          ...resource_form,
+          menuId: is_edit_mode.value && resource_form.resourceId ? resource_form.resourceId[0] : null
+        };
+
+        const apiCall = is_edit_mode.value ? UpdateResource : CreateResource;
+        const { code } = await apiCall(data);
+
+        if (code === 200) {
+          const action = is_edit_mode.value ? '编辑' : '新增';
+          Message.success({
+            title: `${action}用户`,
+            content: `${action}成功`
+          });
+
+          getResourceTree();
+          resource_visible.value = false;
+        }
+      }
     });
-
-    getResourceTree();
-    resourcevisible.value = false;
   }
 };
 
-const orgFromReset = () => {
+const resourceFromReset = () => {
   resource_form.resourceId = null;
   resource_form.parentName = '';
   resource_form.status = 0;
@@ -190,9 +197,9 @@ const orgFromReset = () => {
   resource_form.address = '';
 };
 
-const orgFromCancel = () => {
+const resourceFromCancel = () => {
   is_edit_mode.value = true;
-  resourcevisible.value = false;
+  resource_visible.value = false;
 };
 onMounted(() => {
   if (hasPermission('system:resource:list')) {
@@ -200,14 +207,14 @@ onMounted(() => {
   } else {
     Message.error({
       title: '权限不足',
-      content: '您没有权限查看资源列表'
+      content: '抱歉，您没有权限查看资源列表'
     });
   }
 });
 </script>
 
 <style lang="css" scoped>
-.organization-container {
+.resourceanization-container {
   display: flex;
   justify-content: space-between;
   height: calc(100% - 56px);

src/modules/permission/role/RoleForm.vue

@@ -1,10 +1,12 @@
 <template>
-  <a-form :model="edit_form" auto-label-width>
+  <a-form ref="roleFormRef" :model="edit_form" auto-label-width>
     <a-row :gutter="24">
       <a-col :span="22">
-        <a-form-item field="roleName" :label="$t('permission.role.roleName')" :rules="[
-          { required: true, message: $t('permission.role.roleNameRequired') },
-        ]">
+        <a-form-item
+          field="roleName"
+          :label="$t('permission.role.roleName')"
+          :rules="[{ required: true, message: $t('permission.role.roleNameRequired') }]"
+        >
           <a-input v-model="edit_form.roleName" />
         </a-form-item>
       </a-col>
@@ -24,7 +26,7 @@ import { toRefs } from 'vue';
 const props = defineProps({
   edit_form: Object,
   is_edit_mode: Boolean,
-  roles: Array,
+  roles: Array
 });
 
 const { edit_form } = toRefs(props);

src/modules/permission/role/index.vue

@@ -50,7 +50,7 @@
     @cancel="handleEdit(null, false)"
     :title="is_edit_mode ? $t('permission.role.edit') : $t('permission.role.add')"
   >
-    <RoleForm :edit_form="edit_form" :is_edit_mode="is_edit_mode" />
+    <RoleForm ref="roleForm" :edit_form="edit_form" :is_edit_mode="is_edit_mode" />
   </OperateModal>
 
   <PermissionConfigModal
@@ -86,6 +86,7 @@ import { QueryDeptTree } from '../../../apis/permission/common';
 
 const keywords = ref('');
 // 表格相关
+const roleForm = ref(null);
 const table_data = ref([]);
 const table_columns = ref([
   { title: '序号', width: 80, slotName: 'index' },
@@ -151,7 +152,7 @@ const createClick = () => {
   edit_visible.value = true;
 };
 const refreshClick = () => {
-  console.log('刷新');
+  gerRoleList();
 };
 
 // 切换页码
@@ -160,15 +161,6 @@ const handlePageChange = (current) => {
   gerRoleList();
 };
 
-// TODO功能 状态切换拦截
-const beforeStatusChange = async () => {
-  await new Promise((resolve, reject) =>
-    setTimeout(() => {
-      resolve();
-    }, 1000)
-  );
-};
-
 // 用户状态切换
 const statusChange = async (record) => {
   const params = {
@@ -260,24 +252,30 @@ const handleDelete = async (roleId) => {
   }
 };
 const modalSave = async () => {
-  edit_visible.value = false;
-  const data = {
-    roleId: is_edit_mode.value ? edit_form.roleId : undefined,
-    roleName: edit_form.roleName,
-    editType: is_edit_mode.value ? 1 : undefined,
-    remark: edit_form.remark
-  };
+  if (roleForm.value.$refs.roleFormRef.validate) {
+    roleForm.value.$refs.roleFormRef.validate(async (valid) => {
+      if (!valid) {
+        edit_visible.value = false;
+        const data = {
+          roleId: is_edit_mode.value ? edit_form.roleId : undefined,
+          roleName: edit_form.roleName,
+          editType: is_edit_mode.value ? 1 : undefined,
+          remark: edit_form.remark
+        };
 
-  const apiCall = is_edit_mode.value ? UpdateRole : CreateRole;
-  const { code } = await apiCall(data);
+        const apiCall = is_edit_mode.value ? UpdateRole : CreateRole;
+        const { code } = await apiCall(data);
 
-  if (code === 200) {
-    const action = is_edit_mode.value ? '编辑' : '新增';
-    Message.success({
-      title: `${action}用户`,
-      content: `${action}成功`
+        if (code === 200) {
+          const action = is_edit_mode.value ? '编辑' : '新增';
+          Message.success({
+            title: `${action}用户`,
+            content: `${action}成功`
+          });
+          gerRoleList();
+        }
+      }
     });
-    gerRoleList();
   }
 };