diff --git a/src/components/table/drawer.vue b/src/components/table/drawer.vue
index ec7afca98deb994fea5f5b5ff65b414a097b82cb..8065d366127866e10f91aa6fada4e4688fc2424a 100644
--- a/src/components/table/drawer.vue
+++ b/src/components/table/drawer.vue
@@ -1,22 +1,25 @@
 <template>
     <a-drawer
         placement="right"
-        :visible="visible"
+        :visible="value"
         :drawerStyle="drawerStyle"
         :bodyStyle="bodyStyle"
         destroyOnClose
+        :width="600"
         v-bind="$attrs"
+        v-on="$listeners"
+        @close="onClose"
     >
-        <div class="tw-overflow-y-hidden">
+        <div class="tw-overflow-y-hidden tw-flex-1">
             <div class="tw-overflow-y-auto tw-h-full">
                 <slot />
             </div>
         </div>
         <template>
             <a-divider />
-            <a-space>
+            <a-space class="tw-justify-end">
+                <a-button @click="cancel">取消</a-button>
                 <slot name="footer">
-                    <a-button @click="cancel">取消</a-button>
                     <a-button type="primary" @click="ok" :loading="loading">确认</a-button>
                 </slot>
             </a-space>
@@ -29,10 +32,14 @@ export default {
     props: {
         oncancel: Function,
         onok: Function,
+        value: Boolean,
+    },
+    model: {
+        prop: 'value',
+        event: 'change',
     },
     data() {
         return {
-            visiable: false,
             loading: false,
             drawerStyle: {
                 display: 'flex',
@@ -48,21 +55,18 @@ export default {
         };
     },
     methods: {
-        show() {
-            this.visiable = true;
-        },
-        hidden() {
-            this.visiable = false;
-        },
         cancel() {
             this.oncancel && this.oncancel();
-            this.visiable = false;
+            this.$emit('change', false);
+        },
+        onClose() {
+            this.cancel();
         },
         async ok() {
             this.loading = true;
             await (this.onok && this.onok());
             this.loading = false;
-            this.visiable = false;
+            this.$emit('change', false);
         },
     },
 };
diff --git a/src/components/table/index.vue b/src/components/table/index.vue
index b5f765c397a8657393c1845981f39baab1352f57..e9c81d27bec29d1756102b6f2cd4fe8199f51bb8 100644
--- a/src/components/table/index.vue
+++ b/src/components/table/index.vue
@@ -63,7 +63,7 @@
             </div>
             <template v-if="!noFooter">
                 <a-divider />
-                <a-space>
+                <a-space class="tw-justify-end">
                     <a-button @click="addVisible = false">取消</a-button>
                     <a-button type="primary" @click="submit" :loading="submitLoading"> 确认 </a-button>
                 </a-space>
diff --git a/src/pages/system/view/organization/usermanagement/User.vue b/src/pages/system/view/organization/usermanagement/User.vue
index 57ab9992d905f5ef53fb11f7697bc836a194e68c..44ce15fea1168e8b2ff40963766e34b0c146a316 100644
--- a/src/pages/system/view/organization/usermanagement/User.vue
+++ b/src/pages/system/view/organization/usermanagement/User.vue
@@ -1,36 +1,33 @@
 <template>
-    <my-table url="/api/v1/users" rowKey="userId" ref="table">
-        <template #drawer>
-            <Form ref="form" />
-        </template>
-        <template #search="{ query }">
-            <my-form-item label="归属部门">
-                <OrganizationTree v-model="query.orgId" />
-            </my-form-item>
-            <my-form-item label="账号">
-                <a-input placeholder="Basic usage" v-model="query.loginId" />
-            </my-form-item>
-        </template>
-        <template #buttons>
-            <a-button type="primary">新增</a-button>
-        </template>
-
-        <a-table-column title="账号" data-index="loginId" />
-        <a-table-column title="姓名" data-index="userName" />
-        <a-table-column title="职称" data-index="userTitleName" />
-        <a-table-column title="移动电话" data-index="mobilePhone" />
-        <a-table-column title="固定电话" data-index="fixedPhone" />
-        <a-table-column title="电子邮箱" data-index="userEmail" />
-        <a-table-column title="是否锁定" data-index="isLockedName" />
-        <a-table-column title="操作">
-            <template #default="row">
-                <!-- <a @click="() => view(row, 1)">编辑</a>
-                <a-divider type="vertical" />
-                <PopconfirmDelete :url="`/api/v1/jobs/${row.jobId}`" :cb="refreshTable" /> -->
-                <ActionButton :buttons="buttons" :row="row" />
+    <div>
+        <my-table url="/api/v1/users" rowKey="userId" ref="table">
+            <template #search="{ query }">
+                <my-form-item label="归属部门">
+                    <OrganizationTree v-model="query.orgId" />
+                </my-form-item>
+                <my-form-item label="账号">
+                    <a-input placeholder="Basic usage" v-model="query.loginId" />
+                </my-form-item>
+            </template>
+            <template #buttons>
+                <a-button type="primary" @click="onAdd">新增</a-button>
             </template>
-        </a-table-column>
-    </my-table>
+
+            <a-table-column title="账号" data-index="loginId" />
+            <a-table-column title="姓名" data-index="userName" />
+            <a-table-column title="职称" data-index="userTitleName" />
+            <a-table-column title="移动电话" data-index="mobilePhone" />
+            <a-table-column title="固定电话" data-index="fixedPhone" />
+            <a-table-column title="电子邮箱" data-index="userEmail" />
+            <a-table-column title="是否锁定" data-index="isLockedName" />
+            <a-table-column title="操作">
+                <template #default="row">
+                    <ActionButton :buttons="buttons" :row="row" />
+                </template>
+            </a-table-column>
+        </my-table>
+        <Form ref="form" />
+    </div>
 </template>
 <script>
 import Form from './form.vue';
@@ -103,6 +100,9 @@ export default {
         refreshTable() {
             this.$refs['table']?.getData();
         },
+        onAdd() {
+            this.$refs['form']?.open();
+        },
         // view(data, type) {
         //     this.$refs['table']?.show({ type });
         //     this.$nextTick(() => {
diff --git a/src/pages/system/view/organization/usermanagement/form.vue b/src/pages/system/view/organization/usermanagement/form.vue
index 7b8a493fe11a49ccf06d45305af2b6c0f8c476b6..12ed800d4a5d8d3e7ccebd90fb2dcb0f5720aa7b 100644
--- a/src/pages/system/view/organization/usermanagement/form.vue
+++ b/src/pages/system/view/organization/usermanagement/form.vue
@@ -1,21 +1,26 @@
 <template>
-    <a-form-model layout="vertical" :model="form" :rules="rules" ref="DrawerForm">
-        <a-form-model-item label="名称" prop="jobName">
-            <a-input v-model="form.jobName" :disabled="isView" />
-        </a-form-model-item>
-        <a-form-model-item label="描述" prop="jobDescription">
-            <a-textarea v-model="form.jobDescription" :disabled="isView" :rows="4" />
-        </a-form-model-item>
-    </a-form-model>
+    <Drawer ref="drawerRef" v-model="visible">
+        <a-form-model layout="vertical" :model="form" :rules="rules" ref="DrawerForm">
+            <a-form-model-item label="名称" prop="jobName">
+                <a-input v-model="form.jobName" :disabled="isView" />
+            </a-form-model-item>
+            <a-form-model-item label="描述" prop="jobDescription">
+                <a-textarea v-model="form.jobDescription" :disabled="isView" :rows="4" />
+            </a-form-model-item>
+        </a-form-model>
+    </Drawer>
 </template>
 
 <script>
+import Drawer from '@/components/table/drawer.vue';
 import JobsApi from '@/api/organization';
 import FormMixin from '@/components/FormMixin';
 export default {
+    components: { Drawer },
     mixins: [FormMixin],
     data() {
         return {
+            visible: false,
             rules: {
                 jobName: [{ required: true, message: 'Please select Activity zone', trigger: 'change' }],
                 jobDescription: [
@@ -25,6 +30,9 @@ export default {
         };
     },
     methods: {
+        open() {
+            this.visible = true;
+        },
         add() {
             return JobsApi.addJobs({ ...this.form });
         },