diff --git a/Pinnacle/src/main/java/com/cfive/pinnacle/controller/AffairController.java b/Pinnacle/src/main/java/com/cfive/pinnacle/controller/AffairController.java
index 6936b94..561ad43 100644
--- a/Pinnacle/src/main/java/com/cfive/pinnacle/controller/AffairController.java
+++ b/Pinnacle/src/main/java/com/cfive/pinnacle/controller/AffairController.java
@@ -1,7 +1,6 @@
 package com.cfive.pinnacle.controller;
 
 import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
-import com.cfive.pinnacle.controller.permission.UserController;
 import com.cfive.pinnacle.entity.Affair;
 import com.cfive.pinnacle.entity.common.ResponseCode;
 import com.cfive.pinnacle.entity.common.ResponseResult;
@@ -27,11 +26,6 @@ import java.util.List;
 public class AffairController {
     @Autowired
     IAffairService affairService;
-    //    IUserService userService;
-    //    不用userService的方法了，userController中已经写好了直接拿来用
-    @Autowired
-    UserController userController;
-
 
     @PostMapping("/add")
     @PreAuthorize("hasAuthority('affair:self:add')")
@@ -39,6 +33,7 @@ public class AffairController {
         return ResponseResult.build(ResponseCode.DATABASE_SAVE_OK, "success", affairService.save(affair));
     }
 
+
     @GetMapping("/personal_affairs")
     @PreAuthorize("hasAuthority('affair:self:get')")
     public ResponseResult<List<Affair>> getPersonalAffairs() {
@@ -48,7 +43,6 @@ public class AffairController {
         return ResponseResult.build(ResponseCode.DATABASE_SELECT_OK, "success", affairService.list(wrapper));
     }
 
-
     @GetMapping("/not_approved")
     @PreAuthorize("hasAuthority('affair:manage:get')")
     public ResponseResult<List<Affair>> selectNotApproved() {
@@ -70,7 +64,7 @@ public class AffairController {
 
     @PutMapping("/yes")
     @PreAuthorize("hasAuthority('affair:manage:modify')")
-    public ResponseResult updateAffairYes(@RequestBody Affair affair) {
+    public ResponseResult<Integer> updateAffairYes(@RequestBody Affair affair) {
         System.out.println(affair);
         return ResponseResult.build(ResponseCode.DATABASE_UPDATE_OK, "success", affairService.updateAffairYes(affair));
         //审批同意
@@ -78,7 +72,7 @@ public class AffairController {
 
     @PutMapping("/no")
     @PreAuthorize("hasAuthority('affair:manage:modify')")
-    public ResponseResult updateAffairNo(@RequestBody Affair affair) {
+    public ResponseResult<Integer> updateAffairNo(@RequestBody Affair affair) {
         return ResponseResult.build(ResponseCode.DATABASE_UPDATE_OK, "success", affairService.updateAffairNo(affair));
         //审批驳回
     }
@@ -86,12 +80,10 @@ public class AffairController {
 
     @DeleteMapping("/{id}")
     @PreAuthorize("hasAuthority('affair:manage:delete')")
-    public ResponseResult deleteAffairApproved(@PathVariable Long id) {
+    public ResponseResult<Boolean> deleteAffairApproved(@PathVariable Long id) {
         System.out.println("affair");
         return ResponseResult.build(ResponseCode.DATABASE_DELETE_OK, "success", affairService.removeById(id));
         //删除已审批事务
 
     }
-
-
 }
diff --git a/Pinnacle/src/main/java/com/cfive/pinnacle/mapper/AffairMapper.java b/Pinnacle/src/main/java/com/cfive/pinnacle/mapper/AffairMapper.java
index 9cd24d7..9132418 100644
--- a/Pinnacle/src/main/java/com/cfive/pinnacle/mapper/AffairMapper.java
+++ b/Pinnacle/src/main/java/com/cfive/pinnacle/mapper/AffairMapper.java
@@ -2,6 +2,7 @@ package com.cfive.pinnacle.mapper;
 
 import com.cfive.pinnacle.entity.Affair;
 import com.baomidou.mybatisplus.core.mapper.BaseMapper;
+import com.cfive.pinnacle.entity.permission.User;
 import org.apache.ibatis.annotations.*;
 
 import java.util.List;
@@ -32,13 +33,11 @@ public interface AffairMapper extends BaseMapper<Affair> {
     //管理员权限--->修改事务的状态(AffairsStatus)--->达到审批的效果
     //同意
 
-    @Update("update t_affair set Status=2 where id=#{id}" )
+    @Update("update t_affair set Status=2 where id=#{id}")
     int updateAffairsNO(Affair affair);
     //不同意
 
-
-
-
+    List<User> getSameDepartmentUser(@Param("id") long id);
 
 //
 //    @Select("SELECT t_affair.applicant_id,t_affair.inspector_id,t_user.id,t_user.username from t_affair,t_user ")
diff --git a/Pinnacle/src/main/java/com/cfive/pinnacle/service/IAffairService.java b/Pinnacle/src/main/java/com/cfive/pinnacle/service/IAffairService.java
index a1fc870..397eae9 100644
--- a/Pinnacle/src/main/java/com/cfive/pinnacle/service/IAffairService.java
+++ b/Pinnacle/src/main/java/com/cfive/pinnacle/service/IAffairService.java
@@ -2,6 +2,9 @@ package com.cfive.pinnacle.service;
 
 import com.cfive.pinnacle.entity.Affair;
 import com.baomidou.mybatisplus.extension.service.IService;
+import com.cfive.pinnacle.entity.permission.User;
+
+import java.util.List;
 
 /**
  * <p>
@@ -19,4 +22,7 @@ public interface IAffairService extends IService<Affair> {
 
 
 //    int deleteAffair_ApprovedByID(Affair affair);
+    List<User> getSameDepartmentUser (long id);
+
+
 }
diff --git a/Pinnacle/src/main/java/com/cfive/pinnacle/service/impl/AffairServiceImpl.java b/Pinnacle/src/main/java/com/cfive/pinnacle/service/impl/AffairServiceImpl.java
index 20e27fe..2b557d0 100644
--- a/Pinnacle/src/main/java/com/cfive/pinnacle/service/impl/AffairServiceImpl.java
+++ b/Pinnacle/src/main/java/com/cfive/pinnacle/service/impl/AffairServiceImpl.java
@@ -1,12 +1,15 @@
 package com.cfive.pinnacle.service.impl;
 
 import com.cfive.pinnacle.entity.Affair;
+import com.cfive.pinnacle.entity.permission.User;
 import com.cfive.pinnacle.mapper.AffairMapper;
 import com.cfive.pinnacle.service.IAffairService;
 import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
 
+import java.util.List;
+
 /**
  * <p>
  * 事务 服务实现类
@@ -21,7 +24,6 @@ public class AffairServiceImpl extends ServiceImpl<AffairMapper, Affair> impleme
     @Autowired
     private AffairMapper affairMapper;
 
-
     public int updateAffairYes(Affair affair) {
         return affairMapper.updateAffairsYes(affair);
     }
@@ -30,6 +32,8 @@ public class AffairServiceImpl extends ServiceImpl<AffairMapper, Affair> impleme
         return affairMapper.updateAffairsNO(affair);
     }
 
-
-
+    public List<User> getSameDepartmentUser(long id) {
+        List<User> user = affairMapper.getSameDepartmentUser(id);
+        return user;
+    }
 }
diff --git a/Pinnacle/src/main/resources/mapper/AffairMapper.xml b/Pinnacle/src/main/resources/mapper/AffairMapper.xml
index 35cb2d4..db2f5c9 100644
--- a/Pinnacle/src/main/resources/mapper/AffairMapper.xml
+++ b/Pinnacle/src/main/resources/mapper/AffairMapper.xml
@@ -2,4 +2,38 @@
 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
 <mapper namespace="com.cfive.pinnacle.mapper.AffairMapper">
 
+    <select id="getSameDepartmentUser" resultMap="userMap">
+        select t_user.id            as user_id,
+               t_user.username      as user_username,
+               t_user.department_id as user_department_id,
+               t_user.enable        as user_enable,
+               t_user.deleted       as user_deleted,
+               t_user.version       as user_version,
+               ts.id                as staff_id,
+               ts.first_name        as staff_first_name,
+               ts.last_name         as staff_last_name,
+               ts.deleted           as staff_deleted,
+               ts.version           as staff_version,
+        from t_user
+                 left join (select * from t_staff where deleted = 0) as ts on ts.user_id = t_user.id
+        where t_user.id=#{id}
+            t_user.deleted = 0;
+    </select>
+
+    <resultMap id="userMap" type="user">
+        <id property="id" column="user_id"/>
+        <result property="username" column="user_username"/>
+        <result property="departmentId" column="user_department_id"/>
+        <result property="enable" column="user_enable"/>
+        <result property="deleted" column="user_deleted"/>
+        <result property="version" column="user_version"/>
+        <association property="staff" javaType="staff">
+            <id property="id" column="staff_id"/>
+            <result property="firstName" column="staff_first_name"/>
+            <result property="lastName" column="staff_last_name"/>
+            <result property="deleted" column="staff_deleted"/>
+            <result property="version" column="staff_version"/>
+        </association>
+    </resultMap>
+
 </mapper>
diff --git a/sql/Insert.sql b/sql/Insert.sql
index 440a003..920e56c 100644
--- a/sql/Insert.sql
+++ b/sql/Insert.sql
@@ -320,7 +320,7 @@ begin;
 insert into t_power (id, type_id)
 values (5010000, 1);
 insert into t_menu (id, name, url, power_id, parent_id)
-VALUES (5010000, '我的事务', '/affair/personalAffairs', id, null);
+VALUES (5010000, '我的事务', '/affair/personal', id, null);
 commit;
 
 begin;
diff --git a/ui/src/components/ApplicantsAddAffairs.vue b/ui/src/components/affairs/ApplicantsAddAffairs.vue
similarity index 71%
rename from ui/src/components/ApplicantsAddAffairs.vue
rename to ui/src/components/affairs/ApplicantsAddAffairs.vue
index a3ebc6e..8298dd3 100644
--- a/ui/src/components/ApplicantsAddAffairs.vue
+++ b/ui/src/components/affairs/ApplicantsAddAffairs.vue
@@ -1,12 +1,12 @@
 <template>
     <el-form :model="form" label-width="120px">
-        <el-form-item label="事务名称:">
+        <el-form-item label="事务标题:">
             <el-col :span="4">
-                <el-input v-model="form.title" placeholder="请输入事务名称" class="longInput" />
+                <el-input v-model="form.title" placeholder="请输入事务标题" class="longInput" />
             </el-col>
         </el-form-item>
 
-        <el-form-item label="申请者:">
+        <el-form-item label="申请者:" v-if="grant">
             <el-col :span="4">
                 <el-input
                     v-model="form.applicantId"
@@ -17,6 +17,25 @@
             </el-col>
         </el-form-item>
 
+        <el-form-item label="申请者:" v-if="!grant">
+            <el-col :span="4">
+                <el-select
+                    v-model="form.applicantId"
+                    :placeholder="currentUser.username"
+                    filterable
+                    ref="fieldSelect"
+                    popper-class="roleSelect"
+                >
+                    <el-option
+                        v-for="sameDepartmentUser in sameDepartmentUsers"
+                        :label="sameDepartmentUser.username"
+                        :value="sameDepartmentUser.id"
+                        :key="sameDepartmentUser.id"
+                    />
+                </el-select>
+            </el-col>
+        </el-form-item>
+
         <el-form-item label="审批者:">
             <el-col :span="4">
                 <el-select
@@ -27,7 +46,7 @@
                     popper-class="roleSelect"
                 >
                     <el-option
-                        v-for="user in users"
+                        v-for="user in grantUsers"
                         :label="user.username"
                         :value="user.id"
                         :key="user.id"
@@ -70,11 +89,12 @@
     </el-form>
 </template>
 
-<script>
+<script lang="ts">
 import 'element-plus/theme-chalk/index.css'
-import request from '@/services'
+import request from '@/services/index.js'
 import _ from 'lodash'
 import { ElMessage } from 'element-plus'
+
 export default {
     data() {
         return {
@@ -95,18 +115,14 @@ export default {
                 deleted: '',
                 version: ''
             },
-            users: [
-                {
-                    id: '',
-                    username: ''
-                }
-            ],
-            currentUser: [
-                {
-                    id: '',
-                    username: ''
-                }
-            ]
+            grantUsers: [],
+            currentUser: {
+                id: '',
+                username: '',
+                department_id: ''
+            },
+            sameDepartmentUsers: [],
+            grant: true
         }
     },
     methods: {
@@ -124,14 +140,15 @@ export default {
                     .post('/affair/add', form)
                     .then((response) => {
                         console.log(response.data)
+                        this.getPersonalAffair()
                         this.resetForm()
                     })
                     .catch((reportError) => {
                         this.resetForm()
                         console.log(reportError)
                     })
-                this.resetForm()
-                // this.$router.go()
+                this.getPersonalAffair()
+                this.$router.go()
             } else {
                 if (_.isEmpty(form.title)) {
                     ElMessage({
@@ -163,12 +180,6 @@ export default {
                         type: 'error'
                     })
                 }
-                // if (_.isEmpty(form.createTime)) {
-                //     ElMessage({
-                //         message: '错误！发送时间不能为空！',
-                //         type: 'error'
-                //     })
-                // }
             }
         }, // 表单提交及验证
         resetForm() {
@@ -181,31 +192,60 @@ export default {
                 this.form.createTime = new Date()
             }, 500)
         }, // 动态时钟
-        getUser() {
+        getGrantUser() {
             request
-                .get('/affair/add/get_user')
+                .get('/user/affair')
                 .then((response) => {
-                    this.users = response.data.data
+                    this.grantUsers = response.data.data
                 })
                 .catch((reportError) => {
                     console.log(reportError)
-                }) // 数据库中获取用户
+                }) // 获取有权限用户
         },
         getCurrentUser() {
             request
-                .get('/affair/add/get_current_user')
+                .get('/user/info')
                 .then((response) => {
                     this.currentUser = response.data.data
                 })
                 .catch((reportError) => {
                     console.log(reportError)
                 }) // 获取当前用户
+        },
+        selectGrant() {
+            for (let i = 0; i < this.grantUsers.length; i++) {
+                if (this.currentUser.id === this.grantUsers[i].id) {
+                    this.grant = false
+                }
+            }
+        },
+        getSameDepartmentUser() {
+            request
+                .get('/user/department')
+                .then((response) => {
+                    this.sameDepartmentUsers = response.data.data
+                })
+                .catch((reportError) => {
+                    console.log(reportError)
+                })
+        },
+        getPersonalAffair() {
+            request
+                .get('/affair/personal_affairs')
+                .then((response) => {
+                    this.grantUsers = response.data.data
+                })
+                .catch((reportError) => {
+                    console.log(reportError)
+                })
         }
     },
     created() {
         this.alarm()
-        this.getUser()
+        this.getGrantUser()
         this.getCurrentUser()
+        this.selectGrant()
+        this.getSameDepartmentUser()
     },
     mounted() {
         this.$nextTick(function () {
@@ -220,10 +260,6 @@ export default {
     width: 99%;
 }
 
-/*.shortInput {*/
-/*    width: 200px;*/
-/*}*/
-
 .textarea {
     height: 70%;
     width: 70%;
diff --git a/ui/src/components/ApproverApproved.vue b/ui/src/components/affairs/ApproverApproved.vue
similarity index 67%
rename from ui/src/components/ApproverApproved.vue
rename to ui/src/components/affairs/ApproverApproved.vue
index b8ef4bf..0f45acc 100644
--- a/ui/src/components/ApproverApproved.vue
+++ b/ui/src/components/affairs/ApproverApproved.vue
@@ -1,28 +1,4 @@
 <template>
-    <el-row :span="24">
-        <el-col :span="18">
-            <div class="mt-4">
-                <el-input placeholder="查询事务" class="input-with-select">
-                    <template #prepend>
-                        <el-select placeholder="查询方式">
-                            <el-option label="事务编号" value="1" />
-                            <el-option label="事务名称" value="2" />
-                            <el-option label="日期" value="3" />
-                        </el-select>
-                    </template>
-                    <template #append>
-                        <el-button>查询</el-button>
-                    </template>
-                </el-input>
-            </div>
-        </el-col>
-
-        <el-col :span="4">
-            <el-button type="warning" round>待审批</el-button>
-            <el-button type="success" round>已审批</el-button>
-        </el-col>
-    </el-row>
-
     <el-table :data="tableData" style="width: 100%">
         <el-table-column label="事务编号" prop="id" />
 
@@ -99,7 +75,7 @@
         </el-row>
     </el-dialog>
 
-    <el-divider :data="labelData">
+    <el-divider>
         <div class="block">
             <el-pagination
                 style="color: #888888"
@@ -114,73 +90,32 @@
     </el-divider>
 </template>
 
-<script>
-import request from '@/services'
+<script lang="ts">
+import request from '@/services/index.js'
 import 'element-plus/theme-chalk/index.css'
 export default {
     data() {
         return {
-            tableData: [
-                {
-                    id: '',
-                    title: '',
-                    content: '',
-                    typeId: '',
-                    status: '',
-                    applicantId: '',
-                    inspectorId: '',
-                    createTime: new Date(),
-                    inspectTime: new Date(),
-                    priority: '',
-                    modifyTime: '',
-                    originId: '',
-                    old: '',
-                    deleted: '',
-                    version: ''
-                }
-            ],
-            //     }],
-
-            labelData: [
-                {
-                    currentPage1: 5,
-                    currentPage2: 5,
-                    currentPage3: 5,
-                    currentPage4: 4
-                }
-            ],
+            tableData: [],
             dialogVisible: false,
-            dialogData: [
-                {
-                    id: '',
-                    title: '',
-                    content: '',
-                    typeId: '',
-                    status: '',
-                    applicantId: '',
-                    inspectorId: '',
-                    createTime: new Date(),
-                    inspectTime: new Date(),
-                    priority: '',
-                    modifyTime: '',
-                    originId: '',
-                    old: '',
-                    deleted: '',
-                    version: ''
-                }
-            ],
-            users: [
-                {
-                    id: '',
-                    username: ''
-                }
-            ],
-            currentUser: [
-                {
-                    id: '',
-                    username: ''
-                }
-            ]
+            dialogData: {
+                id: '',
+                title: '',
+                content: '',
+                typeId: '',
+                status: '',
+                applicantId: '',
+                inspectorId: '',
+                createTime: new Date(),
+                inspectTime: new Date(),
+                priority: '',
+                modifyTime: '',
+                originId: '',
+                old: '',
+                deleted: '',
+                version: ''
+            },
+            users: []
         }
     },
     methods: {
@@ -222,7 +157,7 @@ export default {
         },
         getUser() {
             request
-                .get('/affair/add/get_user')
+                .get('/user/affair')
                 .then((response) => {
                     this.users = response.data.data
                 })
@@ -259,10 +194,10 @@ export default {
         }
     },
     created() {
+        console.log('approved created')
         this.getApproved()
         this.dialogFalse()
         this.getUser()
-        console.log(this.tableData)
     }
 }
 </script>
diff --git a/ui/src/components/ApproverNotApproved.vue b/ui/src/components/affairs/ApproverNotApproved.vue
similarity index 63%
rename from ui/src/components/ApproverNotApproved.vue
rename to ui/src/components/affairs/ApproverNotApproved.vue
index 21c82cb..08be845 100644
--- a/ui/src/components/ApproverNotApproved.vue
+++ b/ui/src/components/affairs/ApproverNotApproved.vue
@@ -1,28 +1,4 @@
 <template>
-    <el-row :span="24">
-        <el-col :span="18">
-            <div class="mt-4">
-                <el-input placeholder="查询事务" class="input-with-select">
-                    <template #prepend>
-                        <el-select placeholder="查询方式">
-                            <el-option label="事务编号" value="1" />
-                            <el-option label="事务名称" value="2" />
-                            <el-option label="日期" value="3" />
-                        </el-select>
-                    </template>
-                    <template #append>
-                        <el-button>查询</el-button>
-                    </template>
-                </el-input>
-            </div>
-        </el-col>
-
-        <el-col :span="6">
-            <el-button type="warning" round>待审批</el-button>
-            <el-button type="success" round>已审批</el-button>
-        </el-col>
-    </el-row>
-
     <el-table :data="tableData" style="width: 100%">
         <el-table-column label="事务编号" prop="id" />
 
@@ -105,7 +81,7 @@
         </el-row>
     </el-dialog>
 
-    <el-divider :data="labelData">
+    <el-divider>
         <div class="block">
             <el-pagination
                 style="color: #888888"
@@ -120,62 +96,32 @@
     </el-divider>
 </template>
 
-<script>
-import request from '@/services'
+<script lang="ts">
+import request from '@/services/index.js'
 import 'element-plus/theme-chalk/index.css'
 
 export default {
     data() {
         return {
-            tableData: [
-                {
-                    id: '',
-                    title: '',
-                    content: '',
-                    typeId: '',
-                    status: '',
-                    applicantId: '',
-                    inspectorId: '',
-                    createTime: new Date(),
-                    inspectTime: new Date(),
-                    priority: '',
-                    modifyTime: '',
-                    originId: '',
-                    old: '',
-                    deleted: '',
-                    version: ''
-                }
-            ],
-            //     }],
-
-            labelData: [
-                {
-                    currentPage1: 5,
-                    currentPage2: 5,
-                    currentPage3: 5,
-                    currentPage4: 4
-                }
-            ],
+            tableData: [],
             dialogVisible: false,
-            dialogData: [
-                {
-                    id: '',
-                    title: '',
-                    content: '',
-                    typeId: '',
-                    status: '',
-                    applicantId: '',
-                    inspectorId: '',
-                    createTime: new Date(),
-                    inspectTime: '',
-                    priority: '',
-                    modifyTime: '',
-                    originId: '',
-                    old: '',
-                    deleted: '',
-                    version: ''
-                }
-            ]
+            dialogData: {
+                id: '',
+                title: '',
+                content: '',
+                typeId: '',
+                status: '',
+                applicantId: '',
+                inspectorId: '',
+                createTime: new Date(),
+                inspectTime: '',
+                priority: '',
+                modifyTime: '',
+                originId: '',
+                old: '',
+                deleted: '',
+                version: ''
+            }
         }
     },
     methods: {
@@ -225,20 +171,6 @@ export default {
         format(time) {
             return new Date(time).toLocaleString()
         }, // 时间格式转换
-        /*
-        getDate() {
-            let newTime = ''
-            const date = new Date()
-            const yy = date.getUTCFullYear()
-            const mm = _.padStart((date.getUTCMonth() + 1).toString(), 2, '0')
-            const dd = _.padStart(date.getUTCDate().toString(), 2, '0')
-            const hh = _.padStart(date.getUTCHours().toString(), 2, '0')
-            const mf = _.padStart(date.getUTCMinutes().toString(), 2, '0')
-            const ss = _.padStart(date.getUTCSeconds().toString(), 2, '0')
-            newTime = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss
-            return newTime
-        }, // 获取当前时间与格式转换
-        */
         dialogTure(data) {
             this.dialogVisible = true
             this.dialogData = data
@@ -248,9 +180,9 @@ export default {
         } // 关闭弹出框
     },
     created() {
+        console.log('not approved created')
         this.getApproved()
         this.dialogFalse()
-        console.log(this.tableData)
     } // 获取事务信息
 }
 </script>
diff --git a/ui/src/components/personalAffairs.vue b/ui/src/components/affairs/personalAffairs.vue
similarity index 66%
rename from ui/src/components/personalAffairs.vue
rename to ui/src/components/affairs/personalAffairs.vue
index a51dfde..215e05c 100644
--- a/ui/src/components/personalAffairs.vue
+++ b/ui/src/components/affairs/personalAffairs.vue
@@ -1,28 +1,4 @@
 <template>
-    <el-row :span="24">
-        <el-col :span="18">
-            <div class="mt-4">
-                <el-input placeholder="查询事务" class="input-with-select">
-                    <template #prepend>
-                        <el-select placeholder="查询方式">
-                            <el-option label="事务编号" value="1" />
-                            <el-option label="事务名称" value="2" />
-                            <el-option label="日期" value="3" />
-                        </el-select>
-                    </template>
-                    <template #append>
-                        <el-button>查询</el-button>
-                    </template>
-                </el-input>
-            </div>
-        </el-col>
-
-        <el-col :span="4">
-            <el-button type="warning" round>待审批</el-button>
-            <el-button type="success" round>已审批</el-button>
-        </el-col>
-    </el-row>
-
     <el-table :data="tableData" style="width: 100%">
         <el-table-column label="事务编号" prop="id" />
 
@@ -111,7 +87,7 @@
         </el-row>
     </el-dialog>
 
-    <el-divider :data="labelData">
+    <el-divider>
         <div class="block">
             <el-pagination
                 style="color: #888888"
@@ -126,61 +102,31 @@
     </el-divider>
 </template>
 
-<script>
-import request from '@/services'
+<script lang="ts">
+import request from '@/services/index.js'
 import 'element-plus/theme-chalk/index.css'
 export default {
     data() {
         return {
-            tableData: [
-                {
-                    id: '',
-                    title: '',
-                    content: '',
-                    typeId: '',
-                    status: '',
-                    applicantId: '',
-                    inspectorId: '',
-                    createTime: new Date(),
-                    inspectTime: new Date(),
-                    priority: '',
-                    modifyTime: '',
-                    originId: '',
-                    old: '',
-                    deleted: '',
-                    version: ''
-                }
-            ],
-            //     }],
-
-            labelData: [
-                {
-                    currentPage1: 5,
-                    currentPage2: 5,
-                    currentPage3: 5,
-                    currentPage4: 4
-                }
-            ],
+            tableData: [],
             dialogVisible: false,
-            dialogData: [
-                {
-                    id: '',
-                    title: '',
-                    content: '',
-                    typeId: '',
-                    status: '',
-                    applicantId: '',
-                    inspectorId: '',
-                    createTime: new Date(),
-                    inspectTime: new Date(),
-                    priority: '',
-                    modifyTime: '',
-                    originId: '',
-                    old: '',
-                    deleted: '',
-                    version: ''
-                }
-            ]
+            dialogData: {
+                id: '',
+                title: '',
+                content: '',
+                typeId: '',
+                status: '',
+                applicantId: '',
+                inspectorId: '',
+                createTime: new Date(),
+                inspectTime: new Date(),
+                priority: '',
+                modifyTime: '',
+                originId: '',
+                old: '',
+                deleted: '',
+                version: ''
+            }
         }
     },
     methods: {
@@ -190,7 +136,7 @@ export default {
                 .delete('/affair/' + row.id)
                 .then((response) => {
                     console.log(response.data)
-                    this.getApproed()
+                    this.getApproved()
                 })
                 .catch((reportError) => {
                     console.log(reportError)
@@ -203,7 +149,7 @@ export default {
         handleCurrentChange(val) {
             console.log(`当前页: ${val}`)
         },
-        getApproed() {
+        getApproved() {
             request
                 .get('/affair/personal_affairs')
                 .then((response) => {
@@ -226,7 +172,7 @@ export default {
         }
     },
     created() {
-        this.getApproed()
+        this.getApproved()
         this.dialogFalse()
         console.log(this.tableData)
     }
diff --git a/ui/src/constants/Common.constants.ts b/ui/src/constants/Common.constants.ts
index 743531f..c66d2aa 100644
--- a/ui/src/constants/Common.constants.ts
+++ b/ui/src/constants/Common.constants.ts
@@ -1,7 +1,7 @@
 const PRODUCTION_NAME = 'Pinnacle OA'
 const TOKEN_NAME = 'JWT_TOKEN'
 const COLOR_PRODUCTION = '#00D4FF'
-const COLOR_BACKGROUND = '#D8D8D8'
+const COLOR_BACKGROUND = '#F5F5F5'
 const COLOR_TOP = 'rgba(234,46,13,0.85)'
 const COLOR_FONT_MAIN = '#4D4D4D'
 const COLOR_FONT_SECONDARY = '#9E9E9E'
diff --git a/ui/src/pages/affair/AffairAdd.vue b/ui/src/pages/affair/AffairAdd.vue
index b27fd14..a3d0ce4 100644
--- a/ui/src/pages/affair/AffairAdd.vue
+++ b/ui/src/pages/affair/AffairAdd.vue
@@ -2,7 +2,7 @@
     <applicants-add-affairs></applicants-add-affairs>
 </template>
 
-<script>
+<script lang="ts">
 export default {
     name: 'AffairAdd'
 }
diff --git a/ui/src/pages/affair/AffairApproved.vue b/ui/src/pages/affair/AffairApproved.vue
index 97c94b5..7ed63f0 100644
--- a/ui/src/pages/affair/AffairApproved.vue
+++ b/ui/src/pages/affair/AffairApproved.vue
@@ -1,6 +1,6 @@
 <template><approver-approved></approver-approved></template>
 
-<script>
+<script lang="ts">
 export default {
     name: 'AffairApproved'
 }
diff --git a/ui/src/pages/affair/AffairManage.vue b/ui/src/pages/affair/AffairManage.vue
new file mode 100644
index 0000000..41d3720
--- /dev/null
+++ b/ui/src/pages/affair/AffairManage.vue
@@ -0,0 +1,58 @@
+<template>
+    <el-row :span="24">
+        <el-col :span="18">
+            <div class="mt-4">
+                <el-input placeholder="查询事务" class="input-with-select">
+                    <template #prepend>
+                        <el-select placeholder="查询方式">
+                            <el-option label="事务编号" value="1" />
+                            <el-option label="事务名称" value="2" />
+                            <el-option label="日期" value="3" />
+                        </el-select>
+                    </template>
+                    <template #append>
+                        <el-button>查询</el-button>
+                    </template>
+                </el-input>
+            </div>
+        </el-col>
+
+        <el-col :span="6">
+            <el-menu
+                :default-active="$route.path"
+                class="el-menu-demo"
+                mode="horizontal"
+                router
+                background-color="white"
+            >
+                <el-menu-item index="/affair/manage/toApprove">
+                    <el-button type="warning" round>待审批</el-button>
+                </el-menu-item>
+                <el-menu-item index="/affair/manage/Approved">
+                    <el-button type="success" round>已审批</el-button>
+                </el-menu-item>
+            </el-menu>
+        </el-col>
+        <router-view></router-view>
+    </el-row>
+</template>
+
+<script lang="ts">
+import { COLOR_BACKGROUND } from '@/constants/Common.constants'
+
+export default {
+    name: 'AffairManage',
+    methods: {
+        COLOR_BACKGROUND() {
+            return COLOR_BACKGROUND
+        }
+    }
+}
+</script>
+
+<style scoped>
+.el-menu--horizontal > .el-menu-item {
+    border-bottom: none;
+    text-decoration: none;
+}
+</style>
diff --git a/ui/src/pages/affair/Affair.vue b/ui/src/pages/affair/AffairNotApproved.vue
similarity index 71%
rename from ui/src/pages/affair/Affair.vue
rename to ui/src/pages/affair/AffairNotApproved.vue
index 5345641..183080b 100644
--- a/ui/src/pages/affair/Affair.vue
+++ b/ui/src/pages/affair/AffairNotApproved.vue
@@ -1,8 +1,8 @@
 <template><approver-not-approved></approver-not-approved></template>
 
-<script>
+<script lang="ts">
 export default {
-    name: 'AffairPage'
+    name: 'AffairNotApproved'
 }
 </script>
 
diff --git a/ui/src/pages/affair/PersonAffair.vue b/ui/src/pages/affair/PersonAffair.vue
new file mode 100644
index 0000000..f556d79
--- /dev/null
+++ b/ui/src/pages/affair/PersonAffair.vue
@@ -0,0 +1,11 @@
+<template>
+    <personal-affairs></personal-affairs>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'PersonAffair'
+}
+</script>
+
+<style scoped></style>
diff --git a/ui/src/pages/affair/PersonalAffairsView.vue b/ui/src/pages/affair/PersonalAffairsView.vue
index f5880ba..a7ed85f 100644
--- a/ui/src/pages/affair/PersonalAffairsView.vue
+++ b/ui/src/pages/affair/PersonalAffairsView.vue
@@ -1,8 +1,45 @@
-<template><personal-affairs></personal-affairs></template>
+<template>
+    <el-row :span="24">
+        <el-col :span="16">
+            <div class="mt-4">
+                <el-input placeholder="查询事务" class="input-with-select">
+                    <template #prepend>
+                        <el-select placeholder="查询方式">
+                            <el-option label="事务编号" value="1" />
+                            <el-option label="事务名称" value="2" />
+                            <el-option label="日期" value="3" />
+                        </el-select>
+                    </template>
+                    <template #append>
+                        <el-button>查询</el-button>
+                    </template>
+                </el-input>
+            </div>
+        </el-col>
 
-<script>
+        <el-col :span="8">
+            <el-menu
+                :default-active="$route.path"
+                class="el-menu-demo"
+                mode="horizontal"
+                router
+                background-color="white"
+            >
+                <el-menu-item index="/affair/personal/person">
+                    <el-button type="success" round>我的事务</el-button>
+                </el-menu-item>
+                <el-menu-item index="/affair/personal/add">
+                    <el-button type="success" round>添加事务</el-button>
+                </el-menu-item>
+            </el-menu>
+        </el-col>
+    </el-row>
+    <router-view></router-view>
+</template>
+
+<script lang="ts">
 export default {
-    name: 'PersonalAffairsView'
+    name: 'personalAffairsView'
 }
 </script>
 
diff --git a/ui/src/router/affair.ts b/ui/src/router/affair.ts
index 48b7c62..fe5e3c2 100644
--- a/ui/src/router/affair.ts
+++ b/ui/src/router/affair.ts
@@ -1,53 +1,74 @@
 const affairRouter = {
     path: '/affair',
     name: 'affair',
-    redirect: 'manage',
     children: [
         {
-            path: 'add',
-            component: async () => await import('@/pages/affair/AffairAdd.vue'),
-            name: 'affairAdd',
-            meta: {
-                title: '事务添加',
-                requiresMenu: true,
-                requiresScrollbar: true,
-                requiresPadding: true
-            }
-        },
-        {
-            path: 'personalAffairs',
+            path: 'personal',
             component: async () => await import('@/pages/affair/PersonalAffairsView.vue'),
             name: 'PersonalAffairs',
+            redirect: '/affair/personal/person',
             meta: {
                 title: '我的事务',
                 requiresMenu: true,
                 requiresScrollbar: true,
-                requiresPadding: true,
-                requiresAuth: true
-            }
+                requiresPadding: true
+            },
+            children: [
+                {
+                    path: 'add',
+                    component: async () => await import('@/pages/affair/AffairAdd.vue'),
+                    name: 'affairAdd',
+                    meta: {
+                        title: '事务添加',
+                        requiresScrollbar: true,
+                        requiresPadding: true
+                    }
+                },
+                {
+                    path: 'person',
+                    component: async () => await import('@/pages/affair/PersonAffair.vue'),
+                    name: 'person',
+                    meta: {
+                        title: '事务',
+                        requiresScrollbar: true,
+                        requiresPadding: true
+                    }
+                }
+            ]
         },
         {
             path: 'manage',
+            component: async () => await import('@/pages/affair/AffairManage.vue'),
             name: 'affairManage',
-            component: async () => await import('@/pages/affair/Affair.vue'),
+            redirect: '/affair/manage/toApprove',
             meta: {
-                title: '事务审批',
-                requiresMenu: true,
-                requiresScrollbar: true,
-                requiresPadding: true,
-                requiresAuth: true
-            }
-        },
-        {
-            path: 'approved',
-            component: async () => await import('@/pages/affair/AffairApproved.vue'),
-            name: 'affairApproved',
-            meta: {
-                title: '审批记录',
+                title: '事务管理',
                 requiresMenu: true,
                 requiresScrollbar: true,
                 requiresPadding: true
-            }
+            },
+            children: [
+                {
+                    path: 'toApprove',
+                    name: 'toApprove',
+                    component: async () => await import('@/pages/affair/AffairNotApproved.vue'),
+                    meta: {
+                        title: '事务审批',
+                        requiresScrollbar: true,
+                        requiresPadding: true
+                    }
+                },
+                {
+                    path: 'approved',
+                    component: async () => await import('@/pages/affair/AffairApproved.vue'),
+                    name: 'approved',
+                    meta: {
+                        title: '审批记录',
+                        requiresScrollbar: true,
+                        requiresPadding: true
+                    }
+                }
+            ]
         }
     ],
     meta: {
@@ -55,7 +76,8 @@ const affairRouter = {
         icon: shallowRef(IconPinnacleAffairs),
         requiresMenu: true,
         requiresScrollbar: false,
-        requiresPadding: true
+        requiresPadding: true,
+        requiresAuth: true
     }
 }