From 9bec4dcae002f36aa23231da11cb03a156b40110 Mon Sep 17 00:00:00 2001
From: schangxiang@126.com <schangxiang@126.com>
Date: 周三, 30 4月 2025 16:24:16 +0800
Subject: [PATCH] 222
---
PipeLineLems/web/src/components/MyPages/index.vue | 282 +++++++++++++++++++++++++++++--------------------------
1 files changed, 148 insertions(+), 134 deletions(-)
diff --git a/PipeLineLems/web/src/components/MyPages/index.vue b/PipeLineLems/web/src/components/MyPages/index.vue
index d047679..c3dc641 100644
--- a/PipeLineLems/web/src/components/MyPages/index.vue
+++ b/PipeLineLems/web/src/components/MyPages/index.vue
@@ -1,156 +1,170 @@
<template>
- <div class="page-container">
- <div class="left">
- {{ `鍏�${$props.total}鏉¤褰� 褰撳墠绗�${$props.curPage}椤� 鍏�${totalPage}椤� 姣忛〉${pageSize}鏉¤褰昤 }}
- </div>
- <div class="right">
-
- <div class="information-pagination">
- <el-pagination layout="prev, pager, next" :total="Number($props.total)"
- v-model:current-page="$props.curPage" size="small" :page-size="pageSize"
- @current-change="onCurrentChange" />
- </div>
- <div class="numb">
- 绗�
- <el-input-number @change="jump('jump')" :min="1" :controls="false" v-model="tempCurPage"
- controls-position="right" style="width: 58px; height: 30px" />
- 椤�
- </div>
- </div>
+ <div class="page-container">
+ <div class="left">
+ {{
+ `${_t('鍏�')}${$props.total}${_t('鏉¤褰�')} ${_t('褰撳墠绗�')}${
+ $props.curPage
+ }${_t('椤�')} ${_t('鍏�')}${totalPage}${_t('椤�')} ${_t(
+ '姣忛〉'
+ )}${pageSize}${_t('鏉¤褰�')}`
+ }}
</div>
+ <div class="right">
+ <div class="information-pagination">
+ <el-pagination
+ layout="prev, pager, next"
+ :total="Number($props.total)"
+ v-model:current-page="$props.curPage"
+ size="small"
+ :page-size="pageSize"
+ @current-change="onCurrentChange"
+ />
+ </div>
+ <div class="numb">
+ {{ _t('绗�') }}
+ <el-input-number
+ @change="jump('jump')"
+ :min="1"
+ :controls="false"
+ v-model="tempCurPage"
+ controls-position="right"
+ style="width: 58px; height: 30px"
+ />
+ {{ _t('椤�') }}
+ </div>
+ </div>
+ </div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted, watch, computed } from 'vue'
-import sdk from 'sdk'
-const { models } = sdk
-const { Language } = models
-const { _t } = Language
+import { _t } from '@/libs/Language/Language'
+
export default defineComponent({
- name: 'MyPages',
- props: {
- total: {
- type: Number,
- required: true,
- },
- curPage: {
- type: Number,
- required: true,
- },
+ name: 'MyPages',
+ props: {
+ total: {
+ type: Number,
+ required: true,
},
- setup(props, { emit }) {
- const tempCurPage = ref<number>(1)
- const pageSize = ref<number>(50)
- const totalPage = computed(() => {
- return parseInt(String((props.total + pageSize.value - 1) / pageSize.value))
- })
- watch(() => props.curPage, (val: number) => {
- console.log('val545545', val)
- tempCurPage.value = val
- })
+ curPage: {
+ type: Number,
+ required: true,
+ },
+ },
+ setup(props, { emit }) {
+ const tempCurPage = ref<number>(1)
+ const pageSize = ref<number>(50)
+ const totalPage = computed(() => {
+ return parseInt(
+ String((props.total + pageSize.value - 1) / pageSize.value)
+ )
+ })
+ watch(
+ () => props.curPage,
+ (val: number) => {
+ console.log('val545545', val)
+ tempCurPage.value = val
+ }
+ )
- const onCurrentChange = (current: number) => {
- tempCurPage.value = current;
- emit('req', current);
- }
-
- const jump = (flag: string) => {
- if (flag === 'first') {
- if (props.curPage == 1) {
- tempCurPage.value = props.curPage;
- return;
- }
- emit('req', 1);
- return;
- }
- if (flag === 'last') {
- if (props.curPage == totalPage.value) {
- tempCurPage.value = props.curPage;
- return;
- }
- emit('req', totalPage.value);
- return;
- }
- if (flag === 'prev') {
- if (props.curPage <= 1) {
- tempCurPage.value = props.curPage;
- return;
- }
- emit('req', props.curPage - 1);
- return;
- }
- if (flag === 'next') {
- if (props.curPage >= totalPage.value) {
- tempCurPage.value = props.curPage;
- return
- }
- emit('req', Number(props.curPage) + 1);
- return;
- }
- emit('req', tempCurPage.value);
- }
-
-
-
- return {
- tempCurPage,
- pageSize,
- totalPage,
- _t,
- onCurrentChange,
- jump,
-
- }
+ const onCurrentChange = (current: number) => {
+ tempCurPage.value = current
+ emit('req', current)
}
-});
+
+ const jump = (flag: string) => {
+ if (flag === 'first') {
+ if (props.curPage == 1) {
+ tempCurPage.value = props.curPage
+ return
+ }
+ emit('req', 1)
+ return
+ }
+ if (flag === 'last') {
+ if (props.curPage == totalPage.value) {
+ tempCurPage.value = props.curPage
+ return
+ }
+ emit('req', totalPage.value)
+ return
+ }
+ if (flag === 'prev') {
+ if (props.curPage <= 1) {
+ tempCurPage.value = props.curPage
+ return
+ }
+ emit('req', props.curPage - 1)
+ return
+ }
+ if (flag === 'next') {
+ if (props.curPage >= totalPage.value) {
+ tempCurPage.value = props.curPage
+ return
+ }
+ emit('req', Number(props.curPage) + 1)
+ return
+ }
+ emit('req', tempCurPage.value)
+ }
+
+ return {
+ tempCurPage,
+ pageSize,
+ totalPage,
+ _t,
+ onCurrentChange,
+ jump,
+ }
+ },
+})
</script>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
.page-container {
- height: 100%;
- width: 100%;
- position: relative;
- color: #333333;
+ height: 100%;
+ width: 100%;
+ position: relative;
+ color: #333333;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ background-color: #fff;
+ padding: 0 16px;
+ box-sizing: border-box;
+
+ .right {
display: flex;
align-items: center;
- justify-content: space-between;
- background-color: #fff;
- padding: 0 16px;
- box-sizing: border-box;
+ justify-content: flex-end;
- .right {
- display: flex;
- align-items: center;
- justify-content: flex-end;
-
- .input {
- margin: 0 10px;
- display: inline-block;
- margin-right: 5px;
- }
-
-
-
- .btn {
- width: 30px;
- height: 30px;
- display: flex;
- align-items: center;
- justify-content: center;
- background: #ecf0f9;
- border-radius: 4px;
- margin-left: 10px;
- cursor: pointer;
-
- img {
- width: 6px;
- height: 12px;
- }
- }
+ .input {
+ margin: 0 10px;
+ display: inline-block;
+ margin-right: 5px;
}
+
+ .btn {
+ width: 30px;
+ height: 30px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: #ecf0f9;
+ border-radius: 4px;
+ margin-left: 10px;
+ cursor: pointer;
+
+ img {
+ width: 6px;
+ height: 12px;
+ }
+ }
+ }
}
.nopage {
- cursor: not-allowed;
+ cursor: not-allowed;
}
</style>
--
Gitblit v1.9.3