Selaa lähdekoodia

Merge remote-tracking branch 'origin/master'

hizhangling 1 kuukausi sitten
vanhempi
commit
be5690668b

+ 130 - 95
src/components/Pagination/index.vue

@@ -1,105 +1,140 @@
 <template>
-  <div :class="{ 'hidden': hidden }" class="pagination-container">
-    <el-pagination
-      :background="background"
-      v-model:current-page="currentPage"
-      v-model:page-size="pageSize"
-      :layout="layout"
-      :page-sizes="pageSizes"
-      :pager-count="pagerCount"
-      :total="total"
-      @size-change="handleSizeChange"
-      @current-change="handleCurrentChange"
-    />
-  </div>
+    <div :class="{ 'hidden': hidden }" class="pagination-container">
+        <el-pagination
+                :background="background"
+                v-model:current-page="currentPage"
+                v-model:page-size="pageSize"
+                :layout="layout"
+                :page-sizes="pageSizes"
+                :pager-count="pagerCount"
+                :total="total"
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+                next-text="下一页" prev-text="上一页"
+        />
+    </div>
+
+    <!--<div :class="{ 'hidden': hidden }" class="pagination-container">-->
+    <!--<el-pagination-->
+    <!--:background="background"-->
+    <!--v-model:current-page="currentPage"-->
+    <!--v-model:page-size="pageSize"-->
+    <!--:layout="layout"-->
+    <!--:page-sizes="pageSizes"-->
+    <!--:pager-count="pagerCount"-->
+    <!--:total="total"-->
+    <!--@size-change="handleSizeChange"-->
+    <!--@current-change="handleCurrentChange"-->
+    <!--/>-->
+    <!--</div>-->
 </template>
 
 <script setup>
-import { scrollTo } from '@/utils/scroll-to'
+    import {scrollTo} from '@/utils/scroll-to'
 
-const props = defineProps({
-  total: {
-    required: true,
-    type: Number
-  },
-  page: {
-    type: Number,
-    default: 1
-  },
-  limit: {
-    type: Number,
-    default: 20
-  },
-  pageSizes: {
-    type: Array,
-    default() {
-      return [10, 20, 30, 50]
-    }
-  },
-  // 移动端页码按钮的数量端默认值5
-  pagerCount: {
-    type: Number,
-    default: document.body.clientWidth < 992 ? 5 : 7
-  },
-  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
+        },
+        page: {
+            type: Number,
+            default: 1
+        },
+        limit: {
+            type: Number,
+            default: 20
+        },
+        pageSizes: {
+            type: Array,
+            default() {
+                return [10, 20, 30, 50]
+            }
+        },
+        // 移动端页码按钮的数量端默认值5
+        pagerCount: {
+            type: Number,
+            default: document.body.clientWidth < 992 ? 5 : 7
+        },
+        layout: {
+            type: String,
+            // default: 'total, sizes, prev, pager, next, jumper'
+            default: 'prev, pager, next'
+        },
+        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)
-  }
-})
+    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) {
-  if (currentPage.value * val > props.total) {
-    currentPage.value = 1
-  }
-  emit('pagination', { page: currentPage.value, limit: val })
-  if (props.autoScroll) {
-    scrollTo(0, 800)
-  }
-}
+    function handleSizeChange(val) {
+        if (currentPage.value * val > props.total) {
+            currentPage.value = 1
+        }
+        emit('pagination', {page: currentPage.value, limit: val})
+        if (props.autoScroll) {
+            scrollTo(0, 800)
+        }
+    }
 
-function handleCurrentChange(val) {
-  emit('pagination', { page: val, limit: pageSize.value })
-  if (props.autoScroll) {
-    scrollTo(0, 800)
-  }
-}
+    function handleCurrentChange(val) {
+        emit('pagination', {page: val, limit: pageSize.value})
+        if (props.autoScroll) {
+            scrollTo(0, 800)
+        }
+    }
 </script>
 
-<style scoped>
-.pagination-container {
-  background: #fff;
-}
-.pagination-container.hidden {
-  display: none;
-}
-</style>
+<style scoped lang="scss">
+    .pagination-container {
+        background: #f4f4f4;
+        color: #64748b;
+    }
+
+    .pagination-container.hidden {
+        display: none;
+    }
+
+    ::v-deep .el-pagination.is-background .btn-next,
+    ::v-deep .el-pagination.is-background .btn-prev,
+    ::v-deep .el-pagination.is-background .btn-pager,
+    ::v-deep .el-pager li {
+        background-color: #f4f4f4; /* 替换为你想要的背景色 */
+        color : #64748b;
+    }
+
+    ::v-deep .el-pagination.is-background .btn-next .is-active,
+    ::v-deep .el-pagination.is-background .btn-prev.is-active,
+    ::v-deep .el-pagination.is-background
+    .el-pager li.is-active {
+        background-color: #036143 !important;
+
+    }
+
+</style>

+ 0 - 1
src/views/xjc-integratedmachine/components/xjc_pagination.vue

@@ -23,7 +23,6 @@
         pageSize: 5,
     })
     onMounted(() => {
-        console.log("mmmmmmmxxx",props.total)
         pageProps.value.total = props.total;
         pageProps.value.pageNum = props.pageNum;
         pageProps.value.pageSize = props.pageSize;