feat(role): 角色模块的增删改查

src/components/Pagination/index.vue

@@ -7,92 +7,86 @@
         :layout="layout"
         :page-sizes="pageSizes"
         :total="total"
-        v-bind="$attrs"
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
     />
   </div>
 </template>
 
-<script lang="ts">
-import {computed, defineComponent} from "vue";
+<script setup>
+import {computed,defineProps,defineEmits} from "vue";
 import {scrollTo} from '@/utils/scroll-to'
 
-export default defineComponent({
-  name: 'Pagination',
-  props: {
-    total: {
-      required: true,
-      type: Number,
-      default: 0
-    },
-    page: {
-      type: Number,
-      default: 1
-    },
-    limit: {
-      type: Number,
-      default: 20
-    },
-    pageSizes: {
-      type: Array,
-      default() {
-        return [10, 20, 30, 50]
-      }
-    },
-    layout: {
-      type: String,
-      default: 'total, sizes, prev, pager, next, jumper'
-    },
-    background: {
-      type: Boolean,
-      default: true
-    },
-    autoScroll: {
-      type: Boolean,
-      default: true
-    },
-    hidden: {
-      type: Boolean,
-      default: false
+const props=defineProps({
+  total: {
+    required: true,
+    type: Number,
+    default: 0
+  },
+  page: {
+    type: Number,
+    default: 1
+  },
+  limit: {
+    type: Number,
+    default: 20
+  },
+  pageSizes: {
+    type: Array,
+    default() {
+      return [10, 20, 30, 50]
     }
   },
-  emits: ['pagination', 'update:page', 'update:limit'],
-
-  setup(props: any, ctx) {
-    const currentPage = computed({
-      get() {
-        return props.page
-      },
-      set(val) {
-        ctx.emit('update:page', val)
-      }
-    })
-
-    const pageSize = computed({
-      get() {
-        return props.limit
-      },
-      set(val) {
-        ctx.emit('update:limit', val)
-      }
-    })
-
-    const handleSizeChange = (val: number) => {
-      ctx.emit('pagination', {page: currentPage, limit: val})
-      if (props.autoScroll) {
-        scrollTo(0, 800)
-      }
-    }
-    const handleCurrentChange = (val: number) => {
-      ctx.emit('pagination', {page: val, limit: props.pageSizes})
-      if (props.autoScroll) {
-        scrollTo(0, 800)
-      }
-    }
-    return {currentPage, pageSize, handleSizeChange, handleCurrentChange}
+  layout: {
+    type: String,
+    default: 'total, sizes, prev, pager, next, jumper'
+  },
+  background: {
+    type: Boolean,
+    default: true
+  },
+  autoScroll: {
+    type: Boolean,
+    default: true
+  },
+  hidden: {
+    type: Boolean,
+    default: false
   }
 })
+
+const emit = defineEmits();
+
+const currentPage = computed({
+  get() {
+    return props.page
+  },
+  set(val) {
+    emit('update:page', val)
+  }
+})
+
+const pageSize = computed({
+  get() {
+    return props.limit
+  },
+  set(val){
+    emit('update:limit', val)
+  }
+})
+
+function handleSizeChange(val){
+  emit('pagination', {page: currentPage, limit: val})
+  if (props.autoScroll) {
+    scrollTo(0, 800)
+  }
+}
+function handleCurrentChange(val){
+  emit('pagination', {page: val, limit: props.pageSizes})
+  if (props.autoScroll) {
+    scrollTo(0, 800)
+  }
+}
 </script>
 
 <style scoped>