chore: user

apps/web-antd/src/adapter/vxe-table.ts

@@ -25,6 +25,17 @@ setupVbenVxeTable({
           showActiveMsg: true,
           showResponseMsg: false,
         },
+        columnConfig: {
+          resizable: true,
+        },
+        toolbarConfig: {
+          // 自定义列
+          custom: true,
+          // 最大化
+          zoom: true,
+          // 刷新
+          refresh: true,
+        },
         round: true,
         size: 'medium',
       },

apps/web-antd/src/views/system/user/data.tsx

@@ -124,6 +124,7 @@ export const drawerSchema: FormSchemaGetter = () => [
     component: 'Input',
     fieldName: 'phone',
     label: '手机号码',
+    defaultValue: undefined,
     rules: z
       .string()
       .regex(/^1[3-9]\d{9}$/, '请输入正确的手机号码')
@@ -132,6 +133,7 @@ export const drawerSchema: FormSchemaGetter = () => [
   {
     component: 'Input',
     fieldName: 'email',
+    defaultValue: undefined,
     label: '邮箱',
     // TODO: 这里非必填未生效
     rules: z.string().email('请输入正确的邮箱').optional(),

apps/web-antd/src/views/system/user/index.vue

@@ -45,6 +45,9 @@ const selectDeptId = ref<string[]>([]);
 
 const formOptions: VbenFormProps = {
   schema: querySchema(),
+  commonConfig: {
+    labelWidth: 80,
+  },
   wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
 };
 
@@ -103,7 +106,19 @@ const gridOptions: VxeGridProps = {
   showOverflow: true,
 };
 
-const [BasicTable, tableApi] = useVbenVxeGrid({ formOptions, gridOptions });
+const checked = ref(false);
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents: {
+    checkboxChange: (e: any) => {
+      checked.value = e.records.length > 0;
+    },
+    checkboxAll: (e: any) => {
+      checked.value = e.records.length > 0;
+    },
+  },
+});
 
 const [UserDrawer, userDrawerApi] = useVbenDrawer({
   connectedComponent: userDrawer,
@@ -121,7 +136,7 @@ function handleEdit(row: Recordable<any>) {
 
 async function handleDelete(row: Recordable<any>) {
   await userRemove(row.userId);
-  await tableApi.reload();
+  await tableApi.query();
 }
 
 function handleMultiDelete() {
@@ -133,7 +148,7 @@ function handleMultiDelete() {
     content: `确认删除选中的${ids.length}条记录吗？`,
     onOk: async () => {
       await userRemove(ids);
-      await tableApi.reload();
+      await tableApi.query();
     },
   });
 }
@@ -145,7 +160,7 @@ function handleMultiDelete() {
       v-model:select-dept-id="selectDeptId"
       :height="300"
       class="w-[260px]"
-      @select="() => tableApi.reload()"
+      @select="() => tableApi.query()"
     />
     <BasicTable class="flex-1">
       <template #toolbar-actions>
@@ -166,9 +181,10 @@ function handleMultiDelete() {
             {{ $t('pages.common.import') }}
           </a-button>
           <a-button
+            :disabled="!checked"
             danger
             type="primary"
-            v-access:code="['system:user:delete']"
+            v-access:code="['system:user:remove']"
             @click="handleMultiDelete"
           >
             {{ $t('pages.common.delete') }}
@@ -194,7 +210,7 @@ function handleMultiDelete() {
           v-model="row.status"
           :api="() => userStatusChange(row)"
           :disabled="row.userId === 1"
-          :reload="() => tableApi.reload()"
+          :reload="() => tableApi.query()"
         />
       </template>
       <template #action="{ row }">
@@ -215,7 +231,7 @@ function handleMultiDelete() {
             <a-button
               danger
               size="small"
-              v-access:code="['system:user:delete']"
+              v-access:code="['system:user:remove']"
               @click.stop=""
             >
               {{ $t('pages.common.delete') }}
@@ -225,6 +241,6 @@ function handleMultiDelete() {
       </template>
     </BasicTable>
     <UserImpotModal />
-    <UserDrawer @reload="tableApi.reload()" />
+    <UserDrawer @reload="tableApi.query()" />
   </Page>
 </template>

packages/styles/src/antd/index.css

@@ -63,3 +63,17 @@
 .dot-before-green {
   @apply dot-before-common before:bg-green-500;
 }
+
+/**
+vxe表格右上角toolbar 间距
+*/
+.vxe-button + .vxe-button.type--button {
+  margin-left: 8px !important;
+}
+
+/**
+vxe表格右上角toolbar和左边元素的间距
+*/
+.vxe-tools--operate {
+  margin-left: 8px;
+}