From eba0cc02a8d345bd36c948d31de6b5bfeb09129e Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Tue, 17 Sep 2024 16:07:05 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=94=A8=E6=88=B7=E7=AE=A1=E7=90=86(?=
 =?UTF-8?q?=E6=9C=AA=E5=AE=8C=E6=88=90)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/views/system/user/data.tsx  | 121 ++++++++++++++++++
 .../web-antd/src/views/system/user/drawer.vue |  28 ----
 apps/web-antd/src/views/system/user/index.vue |  16 ++-
 apps/web-antd/src/views/system/user/modal.vue |  24 ----
 apps/web-antd/src/views/system/user/table.tsx |  99 --------------
 .../src/views/system/user/user-drawer.vue     |  84 ++++++++++++
 6 files changed, 220 insertions(+), 152 deletions(-)
 create mode 100644 apps/web-antd/src/views/system/user/data.tsx
 delete mode 100644 apps/web-antd/src/views/system/user/drawer.vue
 delete mode 100644 apps/web-antd/src/views/system/user/modal.vue
 delete mode 100644 apps/web-antd/src/views/system/user/table.tsx
 create mode 100644 apps/web-antd/src/views/system/user/user-drawer.vue

diff --git a/apps/web-antd/src/views/system/user/data.tsx b/apps/web-antd/src/views/system/user/data.tsx
new file mode 100644
index 00000000..a0dbb7ce
--- /dev/null
+++ b/apps/web-antd/src/views/system/user/data.tsx
@@ -0,0 +1,121 @@
+import { DictEnum } from '@vben/constants';
+
+import { type FormSchemaGetter, z } from '#/adapter';
+import { getDictOptions } from '#/utils/dict';
+
+export const drawerSchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'userId',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'userName',
+    label: '用户账号',
+    rules: 'required',
+  },
+  {
+    component: 'InputPassword',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'password',
+    label: '用户密码',
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'nickName',
+    label: '用户昵称',
+    rules: 'required',
+  },
+  {
+    component: 'TreeSelect',
+    componentProps: { class: 'w-full', placeholder: '请选择' },
+    fieldName: 'deptId',
+    label: '所属部门',
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'phone',
+    label: '手机号码',
+    rules: z
+      .string()
+      .regex(/^1[3-9]\d{9}$/, '请输入正确的手机号码')
+      .optional(),
+  },
+  {
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'email',
+    label: '邮箱',
+    rules: z.string().email('请输入正确的邮箱').optional(),
+  },
+  {
+    component: 'RadioGroup',
+    componentProps: {
+      buttonStyle: 'solid',
+      options: getDictOptions(DictEnum.SYS_USER_SEX),
+      optionType: 'button',
+    },
+    defaultValue: '0',
+    fieldName: 'sex',
+    formItemClass: 'col-span-2 lg:col-span-1',
+    label: '性别',
+  },
+  {
+    component: 'RadioGroup',
+    componentProps: {
+      buttonStyle: 'solid',
+      options: getDictOptions(DictEnum.SYS_COMMON_STATUS),
+      optionType: 'button',
+    },
+    defaultValue: '0',
+    fieldName: 'status',
+    formItemClass: 'col-span-2 lg:col-span-1',
+    label: '状态',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      class: 'w-full',
+      placeholder: '请选择',
+    },
+    fieldName: 'postIds',
+    label: '岗位',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      class: 'w-full',
+      placeholder: '请选择',
+    },
+    fieldName: 'roleIds',
+    label: '角色',
+  },
+  {
+    component: 'Textarea',
+    componentProps: {
+      placeholder: '请输入',
+    },
+    fieldName: 'remark',
+    formItemClass: 'items-baseline',
+    label: '备注',
+  },
+];
diff --git a/apps/web-antd/src/views/system/user/drawer.vue b/apps/web-antd/src/views/system/user/drawer.vue
deleted file mode 100644
index 7197fc8d..00000000
--- a/apps/web-antd/src/views/system/user/drawer.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import { useVbenDrawer } from '@vben/common-ui';
-
-import { message } from 'ant-design-vue';
-
-const [BasicDrawer, drawerApi] = useVbenDrawer({
-  onCancel() {
-    drawerApi.close();
-  },
-  onConfirm() {
-    message.info('点击了确认');
-  },
-});
-</script>
-
-<template>
-  <BasicDrawer
-    class="w-[600px]"
-    title="基础弹窗示例"
-    title-tooltip="标题提示内容"
-  >
-    <div
-      class="flex h-40 cursor-pointer items-center justify-center rounded-lg bg-pink-500 font-bold text-white transition-all hover:bg-blue-600 hover:text-[20px]"
-    >
-      this is Drawer content
-    </div>
-  </BasicDrawer>
-</template>
diff --git a/apps/web-antd/src/views/system/user/index.vue b/apps/web-antd/src/views/system/user/index.vue
index e48a8b87..407d0ae0 100644
--- a/apps/web-antd/src/views/system/user/index.vue
+++ b/apps/web-antd/src/views/system/user/index.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { Page, useVbenModal } from '@vben/common-ui';
+import { Page, useVbenDrawer, useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
 import { userExport } from '#/api/system/user';
 import { downloadExcel } from '#/utils/file/download';
 
+import userDrawer from './user-drawer.vue';
 import userImportModal from './user-import-modal.vue';
 
 const [UserImpotModal, userImportModalApi] = useVbenModal({
@@ -14,6 +15,15 @@ const [UserImpotModal, userImportModalApi] = useVbenModal({
 function handleImport() {
   userImportModalApi.open();
 }
+
+const [UserDrawer, userDrawerApi] = useVbenDrawer({
+  connectedComponent: userDrawer,
+});
+
+function handleAdd() {
+  userDrawerApi.setData({ update: false });
+  userDrawerApi.open();
+}
 </script>
 
 <template>
@@ -23,7 +33,11 @@ function handleImport() {
         {{ $t('pages.common.export') }}
       </a-button>
       <a-button @click="handleImport">{{ $t('pages.common.import') }}</a-button>
+      <a-button type="primary" @click="handleAdd">
+        {{ $t('pages.common.add') }}
+      </a-button>
     </div>
     <UserImpotModal />
+    <UserDrawer />
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/system/user/modal.vue b/apps/web-antd/src/views/system/user/modal.vue
deleted file mode 100644
index d8cb3184..00000000
--- a/apps/web-antd/src/views/system/user/modal.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import { useVbenModal } from '@vben/common-ui';
-
-import { message } from 'ant-design-vue';
-
-const [BasicModal, modalApi] = useVbenModal({
-  onCancel() {
-    modalApi.close();
-  },
-  onConfirm() {
-    message.success('点击了确认');
-  },
-});
-</script>
-
-<template>
-  <BasicModal
-    class="w-[600px]"
-    title="基础弹窗示例"
-    title-tooltip="标题提示内容"
-  >
-    aaaaa
-  </BasicModal>
-</template>
diff --git a/apps/web-antd/src/views/system/user/table.tsx b/apps/web-antd/src/views/system/user/table.tsx
deleted file mode 100644
index ab95c94f..00000000
--- a/apps/web-antd/src/views/system/user/table.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import type { ColumnsType } from 'ant-design-vue/es/table';
-
-import { defineComponent, ref } from 'vue';
-
-import {
-  Button,
-  message,
-  Modal,
-  Popconfirm,
-  Space,
-  Table,
-} from 'ant-design-vue';
-
-export default defineComponent({
-  name: 'TableTest',
-  setup() {
-    const dataSource = [
-      { age: 20, id: 1, name: '张三' },
-      { age: 21, id: 2, name: '李四' },
-      { age: 22, id: 3, name: '王五' },
-    ];
-
-    const columns: ColumnsType = [
-      {
-        align: 'center',
-        dataIndex: 'id',
-        title: 'id',
-      },
-      {
-        align: 'center',
-        dataIndex: 'name',
-        title: '姓名',
-      },
-      {
-        align: 'center',
-        dataIndex: 'age',
-        title: '年龄',
-      },
-      {
-        align: 'center',
-        key: 'action',
-        title: '操作',
-      },
-    ];
-
-    const open = ref(false);
-
-    return () => (
-      <div>
-        <Table
-          columns={columns}
-          dataSource={dataSource}
-          rowKey={'id'}
-          rowSelection={{ type: 'radio' }}
-          size={'middle'}
-        >
-          {{
-            bodyCell: ({ column }: { column: any }) => {
-              if (column.key === 'action') {
-                return (
-                  <Space>
-                    <Button
-                      onClick={() => {
-                        open.value = true;
-                      }}
-                      size="small"
-                      type="primary"
-                    >
-                      编辑
-                    </Button>
-                    <Popconfirm
-                      onConfirm={() => {
-                        message.success('删除成功');
-                      }}
-                      placement="left"
-                      title={'确认删除该条记录？'}
-                    >
-                      <Button danger size="small" type="primary">
-                        删除
-                      </Button>
-                    </Popconfirm>
-                  </Space>
-                );
-              }
-            },
-          }}
-        </Table>
-        <Modal
-          footer={null}
-          onCancel={() => (open.value = false)}
-          open={open.value}
-          title={'modal'}
-        >
-          <p>弹窗内容</p>
-        </Modal>
-      </div>
-    );
-  },
-});
diff --git a/apps/web-antd/src/views/system/user/user-drawer.vue b/apps/web-antd/src/views/system/user/user-drawer.vue
new file mode 100644
index 00000000..dd7e0a66
--- /dev/null
+++ b/apps/web-antd/src/views/system/user/user-drawer.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { useVbenForm } from '#/adapter';
+import { userAdd, userUpdate } from '#/api/system/user';
+
+import { drawerSchema } from './data';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  schema: drawerSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+interface DrawerProps {
+  update: boolean;
+  record: any;
+}
+
+const [BasicDrawer, drawerApi] = useVbenDrawer({
+  onCancel: handleCancel,
+  onConfirm: handleConfirm,
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return null;
+    }
+    drawerApi.drawerLoading(true);
+    const { record, update } = drawerApi.getData() as DrawerProps;
+    isUpdate.value = update;
+    // 更新 && 赋值
+    if (update && record) {
+      for (const key in record) {
+        await formApi.setFieldValue(key, record[key]);
+      }
+    }
+    drawerApi.drawerLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    drawerApi.drawerLoading(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = await formApi.getValues();
+    console.log(data);
+    await (isUpdate.value ? userUpdate(data) : userAdd(data));
+    emit('reload');
+    await handleCancel();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    drawerApi.drawerLoading(false);
+  }
+}
+
+async function handleCancel() {
+  drawerApi.close();
+  await formApi.resetForm();
+}
+</script>
+
+<template>
+  <BasicDrawer :title="title" class="w-[600px]">
+    <BasicForm />
+    未完成
+  </BasicDrawer>
+</template>