fix(demo): account list page validate and save

vbenjs · Jun 7, 2021 · 21f7a85 · 21f7a85
1 parent 8e4f486
commit 21f7a85
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/src/views/demo/system/account/AccountModal.vue b/src/views/demo/system/account/AccountModal.vue
@@ -16,6 +16,7 @@
     emits: ['success', 'register'],
     setup(_, { emit }) {
       const isUpdate = ref(true);
+      const rowId = ref('');
 
       const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
         labelWidth: 100,
@@ -32,6 +33,7 @@
         isUpdate.value = !!data?.isUpdate;
 
         if (unref(isUpdate)) {
+          rowId.value = data.record.id;
           setFieldsValue({
             ...data.record,
           });
@@ -59,7 +61,7 @@
           // TODO custom api
           console.log(values);
           closeModal();
-          emit('success');
+          emit('success', { isUpdate: unref(isUpdate), values: { ...values, id: rowId.value } });
         } finally {
           setModalProps({ confirmLoading: false });
         }

diff --git a/src/views/demo/system/account/account.data.ts b/src/views/demo/system/account/account.data.ts
@@ -61,7 +61,7 @@ export const accountFormSchema: FormSchema[] = [
     label: '密码',
     component: 'InputPassword',
     required: true,
-    show: false,
+    ifShow: false,
   },
   {
     label: '角色',

diff --git a/src/views/demo/system/account/index.vue b/src/views/demo/system/account/index.vue
@@ -45,9 +45,10 @@
     components: { BasicTable, PageWrapper, DeptTree, AccountModal, TableAction },
     setup() {
       const [registerModal, { openModal }] = useModal();
-      const [registerTable, { reload }] = useTable({
+      const [registerTable, { reload, updateTableDataRecord }] = useTable({
         title: '账号列表',
         api: getAccountList,
+        rowKey: 'id',
         columns,
         formConfig: {
           labelWidth: 120,
@@ -82,8 +83,15 @@
         console.log(record);
       }
 
-      function handleSuccess() {
-        reload();
+      function handleSuccess({ isUpdate, values }) {
+        if (isUpdate) {
+          // 演示不刷新表格直接更新内部数据。
+          // 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
+          const result = updateTableDataRecord(values.id, values);
+          console.log(result);
+        } else {
+          reload();
+        }
       }
 
       function handleSelect(deptId = '') {