feat: 限制分组名称，解决编辑之后点取消显示错误

frontend/src/views/website/website/group/index.vue

@@ -14,13 +14,17 @@
                         {{ row.name }}
                         <span v-if="row.default">({{ $t('website.default') }})</span>
                     </span>
-                    <el-input v-if="row.edit" v-model="row.name"></el-input>
+                    <el-form ref="groupForm" :model="row" :rules="rules">
+                        <el-form-item prop="name" v-if="row.edit">
+                            <el-input v-model="row.name"></el-input>
+                        </el-form-item>
+                    </el-form>
                 </template>
             </el-table-column>
             <el-table-column :label="$t('commons.table.operate')">
                 <template #default="{ row, $index }">
                     <div>
-                        <el-button link v-if="row.edit" type="primary" @click="saveGroup(row, false)">
+                        <el-button link v-if="row.edit" type="primary" @click="saveGroup(groupForm, row, false)">
                             {{ $t('commons.button.save') }}
                         </el-button>
                         <el-button link v-if="!row.edit" type="primary" @click="editGroup($index)">
@@ -38,7 +42,12 @@
                         <el-button link v-if="row.edit" type="primary" @click="cancelEdit($index)">
                             {{ $t('commons.button.cancel') }}
                         </el-button>
-                        <el-button link v-if="!row.edit && !row.default" type="primary" @click="saveGroup(row, true)">
+                        <el-button
+                            link
+                            v-if="!row.edit && !row.default"
+                            type="primary"
+                            @click="saveGroup(groupForm, row, true)"
+                        >
                             {{ $t('website.setDefault') }}
                         </el-button>
                     </div>
@@ -54,6 +63,8 @@ import ComplexTable from '@/components/complex-table/index.vue';
 import { ListGroups, CreateGroup, DeleteGroup, UpdateGroup } from '@/api/modules/website';
 import Header from '@/components/drawer-header/index.vue';
 import { MsgSuccess } from '@/utils/message';
+import { Rules } from '@/global/form-rules';
+import { FormInstance } from 'element-plus';
 
 interface groupData {
     id: number;
@@ -62,6 +73,11 @@ interface groupData {
     default: boolean;
 }
 
+let rules = ref<any>({
+    name: [Rules.name],
+});
+const groupForm = ref<FormInstance>();
+
 let open = ref(false);
 let data = ref<groupData[]>([]);
 const handleClose = () => {
@@ -84,26 +100,32 @@ const search = () => {
     });
 };
 
-const saveGroup = (create: groupData, isDefault: boolean) => {
-    const group = {
-        name: create.name,
-        id: create.id,
-        default: create.default,
-    };
-    if (isDefault) {
-        group.default = isDefault;
-    }
-    if (create.id == 0) {
-        CreateGroup(group).then(() => {
-            MsgSuccess(i18n.global.t('commons.msg.createSuccess'));
-            search();
-        });
-    } else {
-        UpdateGroup(group).then(() => {
-            MsgSuccess(i18n.global.t('commons.msg.updateSuccess'));
-            search();
-        });
-    }
+const saveGroup = async (formEl: FormInstance, create: groupData, isDefault: boolean) => {
+    if (!formEl) return;
+    await formEl.validate((valid) => {
+        if (!valid) {
+            return;
+        }
+        const group = {
+            name: create.name,
+            id: create.id,
+            default: create.default,
+        };
+        if (isDefault) {
+            group.default = isDefault;
+        }
+        if (create.id == 0) {
+            CreateGroup(group).then(() => {
+                MsgSuccess(i18n.global.t('commons.msg.createSuccess'));
+                search();
+            });
+        } else {
+            UpdateGroup(group).then(() => {
+                MsgSuccess(i18n.global.t('commons.msg.updateSuccess'));
+                search();
+            });
+        }
+    });
 };
 
 const acceptParams = async () => {
@@ -160,6 +182,7 @@ const cancelEdit = (index: number) => {
         data.value.splice(index, 1);
     } else {
         data.value[index].edit = false;
+        search();
     }
 };