diff --git a/web/src/view/superAdmin/api/api.vue b/web/src/view/superAdmin/api/api.vue
index 4bb6b685..3ae5619c 100644
--- a/web/src/view/superAdmin/api/api.vue
+++ b/web/src/view/superAdmin/api/api.vue
@@ -64,13 +64,13 @@
               icon="edit"
               size="small"
               type="text"
-              @click="editApi(scope.row)"
+              @click="editApiFunc(scope.row)"
             >编辑</el-button>
             <el-button
               icon="delete"
               size="small"
               type="text"
-              @click="deleteApi(scope.row)"
+              @click="deleteApiFunc(scope.row)"
             >删除</el-button>
           </template>
         </el-table-column>
@@ -123,8 +123,12 @@
 </template>
 
 <script>
-// 获取列表内容封装在mixins内部  getTableData方法 初始化已封装完成 条件搜索时候 请把条件安好后台定制的结构体字段 放到 this.searchInfo 中即可实现条件搜索
+export default {
+  name: 'Api',
+}
+</script>
 
+<script setup>
 import {
   getApiById,
   getApiList,
@@ -133,10 +137,24 @@ import {
   deleteApi,
   deleteApisByIds
 } from '@/api/api'
-import infoList from '@/mixins/infoList'
 import { toSQLLine } from '@/utils/stringFun'
 import warningBar from '@/components/warningBar/warningBar.vue'
-const methodOptions = [
+import { ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+
+const methodFiletr = (value) => {
+  const target = methodOptions.value.filter(item => item.value === value)[0]
+  return target && `${target.label}`
+}
+
+const apis = ref([])
+const form = ref({
+  path: '',
+  apiGroup: '',
+  method: '',
+  description: ''
+})
+const methodOptions = ref([
   {
     value: 'POST',
     label: '创建',
@@ -157,192 +175,202 @@ const methodOptions = [
     label: '删除',
     type: 'danger'
   }
-]
+])
 
-export default {
-  name: 'Api',
-  components: {
-    warningBar
-  },
-  mixins: [infoList],
-  data() {
-    return {
-      deleteVisible: false,
-      listApi: getApiList,
-      dialogFormVisible: false,
-      dialogTitle: '新增Api',
-      apis: [],
-      form: {
-        path: '',
-        apiGroup: '',
-        method: '',
-        description: ''
-      },
-      methodOptions: methodOptions,
-      type: '',
-      rules: {
-        path: [{ required: true, message: '请输入api路径', trigger: 'blur' }],
-        apiGroup: [
-          { required: true, message: '请输入组名称', trigger: 'blur' }
-        ],
-        method: [
-          { required: true, message: '请选择请求方式', trigger: 'blur' }
-        ],
-        description: [
-          { required: true, message: '请输入api介绍', trigger: 'blur' }
-        ]
-      }
+const type = ref('')
+const rules = ref({
+  path: [{ required: true, message: '请输入api路径', trigger: 'blur' }],
+  apiGroup: [
+    { required: true, message: '请输入组名称', trigger: 'blur' }
+  ],
+  method: [
+    { required: true, message: '请选择请求方式', trigger: 'blur' }
+  ],
+  description: [
+    { required: true, message: '请输入api介绍', trigger: 'blur' }
+  ]
+})
+
+const page = ref(1)
+const total = ref(0)
+const pageSize = ref(10)
+const tableData = ref([])
+const searchInfo = ref({})
+
+const onReset = () => {
+  searchInfo.value = {}
+}
+// 搜索
+
+const onSubmit = () => {
+  page.value = 1
+  pageSize.value = 10
+  getTableData()
+}
+
+// 分页
+const handleSizeChange = (val) => {
+  pageSize.value = val
+  getTableData()
+}
+
+const handleCurrentChange = (val) => {
+  page.value = val
+  getTableData()
+}
+
+// 排序
+const sortChange = ({ prop, order }) => {
+  if (prop) {
+    searchInfo.value.orderKey = toSQLLine(prop)
+    searchInfo.value.desc = order === 'descending'
+  }
+  getTableData()
+}
+
+// 查询
+const getTableData = async() => {
+  const table = await getApiList({ page: page.value, pageSize: pageSize.value, ...searchInfo.value })
+  if (table.code === 0) {
+    tableData.value = table.data.list
+    total.value = table.data.total
+    page.value = table.data.page
+    pageSize.value = table.data.pageSize
+  }
+}
+
+getTableData(getApiList)
+
+// 批量操作
+const handleSelectionChange = (val) => {
+  apis.value = val
+}
+
+const deleteVisible = ref(false)
+const onDelete = async() => {
+  const ids = apis.value.map(item => item.ID)
+  const res = await deleteApisByIds({ ids })
+  if (res.code === 0) {
+    ElMessage({
+      type: 'success',
+      message: res.msg
+    })
+    if (tableData.value.length === ids.length && page.value > 1) {
+      page.value--
     }
-  },
-  created() {
-    this.getTableData()
-  },
-  methods: {
-    methodFiletr(value) {
-      const target = methodOptions.filter(item => item.value === value)[0]
-      return target && `${target.label}`
-    },
-    tagTypeFiletr(value) {
-      const target = methodOptions.filter(item => item.value === value)[0]
-      return target && `${target.type}`
-    },
-    //  选中api
-    handleSelectionChange(val) {
-      this.apis = val
-    },
-    async onDelete() {
-      const ids = this.apis.map(item => item.ID)
-      const res = await deleteApisByIds({ ids })
-      if (res.code === 0) {
-        this.$message({
-          type: 'success',
-          message: res.msg
-        })
-        if (this.tableData.length === ids.length && this.page > 1) {
-          this.page--
-        }
-        this.deleteVisible = false
-        this.getTableData()
-      }
-    },
-    // 排序
-    sortChange({ prop, order }) {
-      if (prop) {
-        this.searchInfo.orderKey = toSQLLine(prop)
-        this.searchInfo.desc = order === 'descending'
-      }
-      this.getTableData()
-    },
-    onReset() {
-      this.searchInfo = {}
-    },
-    // 条件搜索前端看此方法
-    onSubmit() {
-      this.page = 1
-      this.pageSize = 10
-      this.getTableData()
-    },
-    initForm() {
-      this.$refs.apiForm.resetFields()
-      this.form = {
-        path: '',
-        apiGroup: '',
-        method: '',
-        description: ''
-      }
-    },
-    closeDialog() {
-      this.initForm()
-      this.dialogFormVisible = false
-    },
-    openDialog(type) {
-      switch (type) {
+    deleteVisible.value = false
+    getTableData()
+  }
+}
+
+// 弹窗相关
+const apiForm = ref(null)
+const initForm = () => {
+  apiForm.value.resetFields()
+  form.value = {
+    path: '',
+    apiGroup: '',
+    method: '',
+    description: ''
+  }
+}
+
+const dialogTitle = ref('新增Api')
+const dialogFormVisible = ref(false)
+const openDialog = (key) => {
+  switch (key) {
+    case 'addApi':
+      dialogTitle.value = '新增Api'
+      break
+    case 'edit':
+      dialogTitle.value = '编辑Api'
+      break
+    default:
+      break
+  }
+  type.value = key
+  dialogFormVisible.value = true
+}
+const closeDialog = () => {
+  initForm()
+  dialogFormVisible.value = false
+}
+
+const editApiFunc = async(row) => {
+  const res = await getApiById({ id: row.ID })
+  form.value = res.data.api
+  openDialog('edit')
+}
+
+const enterDialog = async() => {
+  apiForm.value.validate(async valid => {
+    if (valid) {
+      switch (type.value) {
         case 'addApi':
-          this.dialogTitle = '新增Api'
+          {
+            const res = await createApi(form.value)
+            if (res.code === 0) {
+              ElMessage({
+                type: 'success',
+                message: '添加成功',
+                showClose: true
+              })
+            }
+            getTableData()
+            closeDialog()
+          }
+
           break
         case 'edit':
-          this.dialogTitle = '编辑Api'
+          {
+            const res = await updateApi(form.value)
+            if (res.code === 0) {
+              ElMessage({
+                type: 'success',
+                message: '编辑成功',
+                showClose: true
+              })
+            }
+            getTableData()
+            closeDialog()
+          }
           break
         default:
-          break
-      }
-      this.type = type
-      this.dialogFormVisible = true
-    },
-    async editApi(row) {
-      const res = await getApiById({ id: row.ID })
-      this.form = res.data.api
-      this.openDialog('edit')
-    },
-    async deleteApi(row) {
-      this.$confirm('此操作将永久删除所有角色下该api, 是否继续?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      })
-        .then(async() => {
-          const res = await deleteApi(row)
-          if (res.code === 0) {
-            this.$message({
-              type: 'success',
-              message: '删除成功!'
+          // eslint-disable-next-line no-lone-blocks
+          {
+            ElMessage({
+              type: 'error',
+              message: '未知操作',
+              showClose: true
             })
-            if (this.tableData.length === 1 && this.page > 1) {
-              this.page--
-            }
-            this.getTableData()
           }
-        })
-    },
-    async enterDialog() {
-      this.$refs.apiForm.validate(async valid => {
-        if (valid) {
-          switch (this.type) {
-            case 'addApi':
-              {
-                const res = await createApi(this.form)
-                if (res.code === 0) {
-                  this.$message({
-                    type: 'success',
-                    message: '添加成功',
-                    showClose: true
-                  })
-                }
-                this.getTableData()
-                this.closeDialog()
-              }
+          break
+      }
+    }
+  })
+}
 
-              break
-            case 'edit':
-              {
-                const res = await updateApi(this.form)
-                if (res.code === 0) {
-                  this.$message({
-                    type: 'success',
-                    message: '编辑成功',
-                    showClose: true
-                  })
-                }
-                this.getTableData()
-                this.closeDialog()
-              }
-              break
-            default:
-              // eslint-disable-next-line no-lone-blocks
-              {
-                this.$message({
-                  type: 'error',
-                  message: '未知操作',
-                  showClose: true
-                })
-              }
-              break
-          }
+const deleteApiFunc = async(row) => {
+  ElMessageBox.confirm('此操作将永久删除所有角色下该api, 是否继续?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  })
+    .then(async() => {
+      const res = await deleteApi(row)
+      if (res.code === 0) {
+        ElMessage({
+          type: 'success',
+          message: '删除成功!'
+        })
+        if (tableData.value.length === 1 && page.value > 1) {
+          page.value--
         }
-      })
-    }
-  }
+        getTableData()
+      }
+    })
 }
+
 </script>
 
 <style scoped lang="scss">
diff --git a/web/src/view/superAdmin/user/user.vue b/web/src/view/superAdmin/user/user.vue
index 34bd4c4b..d1a3ccf3 100644
--- a/web/src/view/superAdmin/user/user.vue
+++ b/web/src/view/superAdmin/user/user.vue
@@ -51,13 +51,13 @@
               <p>确定要删除此用户吗</p>
               <div style="text-align: right; margin-top: 8px;">
                 <el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
-                <el-button type="primary" size="mini" @click="deleteUser(scope.row)">确定</el-button>
+                <el-button type="primary" size="mini" @click="deleteUserFunc(scope.row)">确定</el-button>
               </div>
               <template #reference>
                 <el-button type="text" icon="delete" size="mini">删除</el-button>
               </template>
             </el-popover>
-            <el-button type="text" icon="magic-stick" size="mini" @click="resetPassword(scope.row)">重置密码</el-button>
+            <el-button type="text" icon="magic-stick" size="mini" @click="resetPasswordFunc(scope.row)">重置密码</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -114,139 +114,32 @@
 </template>
 
 <script>
-// 获取列表内容封装在mixins内部  getTableData方法 初始化已封装完成
-const path = import.meta.env.VITE_BASE_API
+export default {
+  name: 'User',
+}
+</script>
+
+<script setup>
 import {
   getUserList,
   setUserAuthorities,
   register,
   deleteUser
 } from '@/api/user'
+
 import { getAuthorityList } from '@/api/authority'
-import infoList from '@/mixins/infoList'
-import { mapGetters } from 'vuex'
 import CustomPic from '@/components/customPic/index.vue'
 import ChooseImg from '@/components/chooseImg/index.vue'
 import warningBar from '@/components/warningBar/warningBar.vue'
 import { setUserInfo, resetPassword } from '@/api/user.js'
-export default {
-  name: 'Api',
-  components: { CustomPic, ChooseImg, warningBar },
-  mixins: [infoList],
-  data() {
-    return {
-      listApi: getUserList,
-      path: path,
-      authOptions: [],
-      addUserDialog: false,
-      backNickName: '',
-      userInfo: {
-        username: '',
-        password: '',
-        nickName: '',
-        headerImg: '',
-        authorityId: '',
-        authorityIds: []
-      },
-      rules: {
-        username: [
-          { required: true, message: '请输入用户名', trigger: 'blur' },
-          { min: 5, message: '最低5位字符', trigger: 'blur' }
-        ],
-        password: [
-          { required: true, message: '请输入用户密码', trigger: 'blur' },
-          { min: 6, message: '最低6位字符', trigger: 'blur' }
-        ],
-        nickName: [
-          { required: true, message: '请输入用户昵称', trigger: 'blur' }
-        ],
-        authorityId: [
-          { required: true, message: '请选择用户角色', trigger: 'blur' }
-        ]
-      }
-    }
-  },
-  computed: {
-    ...mapGetters('user', ['token'])
-  },
-  watch: {
-    tableData() {
-      this.setAuthorityIds()
-    }
-  },
-  async created() {
-    await this.getTableData()
-    const res = await getAuthorityList({ page: 1, pageSize: 999 })
-    this.setOptions(res.data.list)
-  },
-  methods: {
-    resetPassword(row) {
-      this.$confirm(
-        '是否将此用户密码重置为123456?',
-        '警告',
-        {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning',
-        }
-      ).then(async() => {
-        const res = await resetPassword({
-          ID: row.ID,
-        })
-        if (res.code === 0) {
-          this.$message({
-            type: 'success',
-            message: res.msg,
-          })
-        } else {
-          this.$message({
-            type: 'error',
-            message: res.msg,
-          })
-        }
-      })
-    },
-    setAuthorityIds() {
-      this.tableData && this.tableData.forEach((user) => {
-        const authorityIds = user.authorities && user.authorities.map(i => {
-          return i.authorityId
-        })
-        user.authorityIds = authorityIds
-      })
-    },
-    openHeaderChange() {
-      this.$refs.chooseImg.open()
-    },
-    setOptions(authData) {
-      this.authOptions = []
-      this.setAuthorityOptions(authData, this.authOptions)
-    },
-    openEidt(row) {
-      if (this.tableData.some(item => item.editFlag)) {
-        this.$message('当前存在正在编辑的用户')
-        return
-      }
-      this.backNickName = row.nickName
-      row.editFlag = true
-    },
-    async enterEdit(row) {
-      const res = await setUserInfo({ nickName: row.nickName, ID: row.ID })
-      if (res.code === 0) {
-        this.$message({
-          type: 'success',
-          message: '设置成功'
-        })
-      }
-      this.backNickName = ''
-      row.editFlag = false
-    },
-    closeEdit(row) {
-      row.nickName = this.backNickName
-      this.backNickName = ''
-      row.editFlag = false
-    },
-    setAuthorityOptions(AuthorityData, optionsData) {
-      AuthorityData &&
+
+import { nextTick, ref, watch } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+const path = ref(import.meta.env.VITE_BASE_API)
+
+// 初始化相关
+const setAuthorityOptions = (AuthorityData, optionsData) => {
+  AuthorityData &&
         AuthorityData.forEach(item => {
           if (item.children && item.children.length) {
             const option = {
@@ -254,7 +147,7 @@ export default {
               authorityName: item.authorityName,
               children: []
             }
-            this.setAuthorityOptions(item.children, option.children)
+            setAuthorityOptions(item.children, option.children)
             optionsData.push(option)
           } else {
             const option = {
@@ -264,51 +157,192 @@ export default {
             optionsData.push(option)
           }
         })
-    },
-    async deleteUser(row) {
-      const res = await deleteUser({ id: row.ID })
-      if (res.code === 0) {
-        this.$message.success('删除成功')
-        await this.getTableData()
-        row.visible = false
-      }
-    },
-    async enterAddUserDialog() {
-      this.userInfo.authorityId = this.userInfo.authorityIds[0]
-      this.$refs.userForm.validate(async valid => {
-        if (valid) {
-          const res = await register(this.userInfo)
-          if (res.code === 0) {
-            this.$message({ type: 'success', message: '创建成功' })
-          }
-          await this.getTableData()
-          this.closeAddUserDialog()
-        }
+}
+
+const page = ref(1)
+const total = ref(0)
+const pageSize = ref(10)
+const tableData = ref([])
+// 分页
+const handleSizeChange = (val) => {
+  pageSize.value = val
+  getTableData()
+}
+
+const handleCurrentChange = (val) => {
+  page.value = val
+  getTableData()
+}
+
+// 查询
+const getTableData = async() => {
+  const table = await getUserList({ page: page.value, pageSize: pageSize.value })
+  if (table.code === 0) {
+    tableData.value = table.data.list
+    total.value = table.data.total
+    page.value = table.data.page
+    pageSize.value = table.data.pageSize
+  }
+}
+
+watch(tableData, () => {
+  setAuthorityIds()
+})
+
+const initPage = async() => {
+  getTableData()
+  const res = await getAuthorityList({ page: 1, pageSize: 999 })
+  setOptions(res.data.list)
+}
+
+initPage()
+
+const resetPasswordFunc = (row) => {
+  ElMessageBox.confirm(
+    '是否将此用户密码重置为123456?',
+    '警告',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }
+  ).then(async() => {
+    const res = await resetPassword({
+      ID: row.ID,
+    })
+    if (res.code === 0) {
+      ElMessage({
+        type: 'success',
+        message: res.msg,
       })
-    },
-    closeAddUserDialog() {
-      this.$refs.userForm.resetFields()
-      this.userInfo.headerImg = ''
-      this.userInfo.authorityIds = []
-      this.addUserDialog = false
-    },
-    addUser() {
-      this.addUserDialog = true
-    },
-    async changeAuthority(row, flag) {
-      if (flag) {
-        return
-      }
-      this.$nextTick(async() => {
-        const res = await setUserAuthorities({
-          ID: row.ID,
-          authorityIds: row.authorityIds
-        })
-        if (res.code === 0) {
-          this.$message({ type: 'success', message: '角色设置成功' })
-        }
+    } else {
+      ElMessage({
+        type: 'error',
+        message: res.msg,
       })
-    },
+    }
+  })
+}
+const setAuthorityIds = () => {
+  tableData.value && tableData.value.forEach((user) => {
+    const authorityIds = user.authorities && user.authorities.map(i => {
+      return i.authorityId
+    })
+    user.authorityIds = authorityIds
+  })
+}
+
+const chooseImg = ref(null)
+const openHeaderChange = () => {
+  chooseImg.value.open()
+}
+
+const authOptions = ref([])
+const setOptions = (authData) => {
+  authOptions.value = []
+  setAuthorityOptions(authData, authOptions.value)
+}
+
+const backNickName = ref('')
+const openEidt = (row) => {
+  if (tableData.value.some(item => item.editFlag)) {
+    ElMessage('当前存在正在编辑的用户')
+    return
+  }
+  backNickName.value = row.nickName
+  row.editFlag = true
+}
+
+const enterEdit = async(row) => {
+  const res = await setUserInfo({ nickName: row.nickName, ID: row.ID })
+  if (res.code === 0) {
+    ElMessage({
+      type: 'success',
+      message: '设置成功'
+    })
+  }
+  backNickName.value = ref('')
+  row.editFlag = false
+}
+
+const closeEdit = (row) => {
+  row.nickName = backNickName.value
+  backNickName.value = ''
+  row.editFlag = false
+}
+
+const deleteUserFunc = async(row) => {
+  const res = await deleteUser({ id: row.ID })
+  if (res.code === 0) {
+    ElMessage.success('删除成功')
+    await getTableData()
+    row.visible = false
+  }
+}
+
+// 弹窗相关
+const userInfo = ref({
+  username: '',
+  password: '',
+  nickName: '',
+  headerImg: '',
+  authorityId: '',
+  authorityIds: []
+})
+
+const rules = ref({
+  username: [
+    { required: true, message: '请输入用户名', trigger: 'blur' },
+    { min: 5, message: '最低5位字符', trigger: 'blur' }
+  ],
+  password: [
+    { required: true, message: '请输入用户密码', trigger: 'blur' },
+    { min: 6, message: '最低6位字符', trigger: 'blur' }
+  ],
+  nickName: [
+    { required: true, message: '请输入用户昵称', trigger: 'blur' }
+  ],
+  authorityId: [
+    { required: true, message: '请选择用户角色', trigger: 'blur' }
+  ]
+})
+const userForm = ref(null)
+const enterAddUserDialog = async() => {
+  userInfo.value.authorityId = userInfo.value.authorityIds[0]
+  userForm.value.validate(async valid => {
+    if (valid) {
+      const res = await register(userInfo.value)
+      if (res.code === 0) {
+        ElMessage({ type: 'success', message: '创建成功' })
+      }
+      await getTableData()
+      closeAddUserDialog()
+    }
+  })
+}
+
+const addUserDialog = ref(false)
+const closeAddUserDialog = () => {
+  userForm.value.resetFields()
+  userInfo.value.headerImg = ''
+  userInfo.value.authorityIds = []
+  addUserDialog.value = false
+}
+const addUser = () => {
+  addUserDialog.value = true
+}
+const changeAuthority = async(row, flag) => {
+  if (flag) {
+    return
+  }
+
+  await nextTick()
+  const res = await setUserAuthorities({
+    ID: row.ID,
+    authorityIds: row.authorityIds
+  })
+  if (res.code === 0) {
+    ElMessage({ type: 'success', message: '角色设置成功' })
   }
 }
 </script>