将pager转为list

博客主要围绕将pager转换为list展开,虽未提供具体内容,但核心是此信息技术操作。
 Collection<MaterialWarnVO> materialWarnCollcet = materialWarnPager.getPageData();
            List<MaterialWarnVO> materialWarnList = (List) materialWarnCollcet;

 

<template> <div class="project-list"> <div class="search"> <div class="search-left"> <el-form :inline="true" :model="query" ref="queryRef"> <el-form-item prop="" label="项目名称"> <el-input placeholder="请输入" clearable /> </el-form-item> <el-form-item prop="" label="所属区域"> <el-select placeholder="请选择" clearable> <el-option label="Zone one" value="shanghai" /> <el-option label="Zone two" value="beijing" /> </el-select> </el-form-item> <el-form-item> <el-button type="primary" icon="Search" @click="onSearch">查询</el-button> <el-button icon="Refresh" @click="onReset">重置</el-button> </el-form-item> </el-form> </div> <div class="search-button"> <el-button type="primary" icon="Plus">新增项目</el-button> </div> </div> <div class="list"> <el-scrollbar height="calc(100vh - 280px)"> <div class="list-wrapper"> <div class="list-box" v-for="item in list" :key="item.id"> <div class="list-left"> <div class="list-img"> <img :src="getUrl(item.ossId)" alt="" /> </div> <div class="list-content"> <div class="list-title">{{item.title}}</div> <div class="list-time">2025-07-31 00:00:00</div> </div> </div> <div class="list-right"> <div class="list-icon" @click="onEdit(item)"> <el-button icon="Edit" class="gradient-button-blue" circle /> </div> <div class="list-icon" @click="onPreview(item)"> <el-button icon="Document" class="gradient-button-green" circle /> </div> <div class="list-icon" @click="onShare(item)"> <el-button icon="Share" class="gradient-button-purple" circle /> </div> <div class="list-icon"> <el-button icon="Delete" class="gradient-button-red" circle /> </div> </div> </div> </div> </el-scrollbar> </div> <div class="pagination"> <el-pagination v-model:current-page="page.page" v-model:page-size="page.limit" :page-sizes="[10, 20, 30, 40, 50, 100]" background layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="onSizeChange" @current-change="onCurrentChange" /> </div> <el-dialog v-model="viewerVisible" title="预览" width="95%" top="10px"> <div class="viewer-wrapper"> <Viewer v-if="viewerVisible" :data="viewerData"></Viewer> </div> <template #footer> <div class="dialog-footer"> <el-button @click="viewerVisible = false">关闭</el-button> </div> </template> </el-dialog> <div class="copy-toast" v-if="showCopyToast">链接已复制</div> </div> </template> <script setup> import { ref, reactive, toRaw, computed } from "vue"; import useTable from "@/hooks/useTable"; import { useRouter } from "vue-router"; import Viewer from "@/views/project/project-edit/viewer/index.vue"; import useNodes from "../project-edit/data/useNodes"; import useMarker from "../project-edit/data/useMarker"; const { getSaveMarkerOptionsList } = useMarker(); const { angleList, getSaveNodeOptionsList, transitionLogo } = useNodes(); import * as api from "@/api/project/project-list"; import { getUrl } from "@/api/project/attachment"; const router = useRouter(); const viewerVisible = ref(false); let viewerData = reactive({}); const showCopyToast = ref(false); const queryRef = ref(null); const query = ref({}); const list = ref([]); const { total, page, onSizeChange, onCurrentChange, reload } = useTable((page) => { return new Promise((resolve, reject) => { api.list({ // ...query.value, ...page, }) .then((res) => { resolve({ list: res.data, total: res.count }); list.value = res.data; }) .catch(reject); }); }); const onSearch = () => { reload(); }; const onReset = () => { queryRef.value.resetFields(); reload(); }; const onEdit = (item) => { router.push({ path: "/project-edit", query: { id: item.id, }, }); }; const onShare = (data) => { viewerData = getSaveData(data); copyLink(); }; const shareUrl = computed(() => { const base = window.location.origin; console.log(viewerData); // 关键步骤:将对象转为 JSON 字符串,再进行 URL 编码 const dataStr = encodeURIComponent(JSON.stringify(viewerData)); console.log(JSON.stringify(viewerData)); return `${base}/project-share?data=${dataStr}`; }); // 复制链接到剪贴板 const copyLink = () => { const url = shareUrl.value; if (!url) { console.warn("没有可复制的链接"); return; } // 创建临时 textarea 元素(避开 clipboard API 限制) const textarea = document.createElement("textarea"); textarea.value = url; // 设置要复制的内容 textarea.style.position = "fixed"; // 固定定位,避免影响页面布局 textarea.style.left = "-9999px"; // 隐藏元素 textarea.style.top = "-9999px"; // 添加到页面并选中内容 document.body.appendChild(textarea); textarea.select(); // 选中文本 textarea.setSelectionRange(0, url.length); // 兼容移动设备 try { // 执行复制命令 const success = document.execCommand("copy"); if (success) { showCopyToast.value = true; setTimeout(() => (showCopyToast.value = false), 2000); } else { throw new Error("复制失败"); } } catch (err) { console.error("复制失败:", err); alert(`复制失败,请手动复制:\n${url}`); // 失败时提示手动复制 } finally { // 无论成功与否,移除临时元素 document.body.removeChild(textarea); } }; const onPreview = (data) => { viewerData = getSaveData(data); viewerVisible.value = true; }; const getSaveData = (data) => { const markerOptionsList = getSaveMarkerOptionsList(); const nodeOptionsList = getSaveNodeOptionsList(); return { markers: markerOptionsList, nodes: nodeOptionsList, angle: toRaw(angleList), transitionLogo: transitionLogo.value, imageId: data.id, }; }; </script> <style lang="scss" scoped> .project-list { width: 100%; height: 100%; padding: 20px; border: 1px solid #eee; border-radius: 10px; box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2); .search { display: flex; justify-content: space-between; .el-input, .el-select, .el-date-editor { width: 200px; } } .list-wrapper { padding: 20px 0; display: flex; align-items: center; flex-wrap: wrap; .list-box { padding: 20px; display: flex; justify-content: space-between; width: 49%; background: linear-gradient(to right, #c3e7ff, #e8f7fe); border-radius: 10px; margin-bottom: 2%; margin-right: 1%; &:nth-child(2n) { margin-right: 0; } .list-left { display: flex; justify-content: space-between; align-items: center; .list-img { width: 100px; height: 50px; margin-right: 20px; img{ width: 100%; height: 100%; } } .list-title { font-size: 16px; font-weight: 800; } .list-time { font-size: 12px; color: #666; margin-top: 20px; } } .list-right { display: flex; align-items: center; .list-icon { margin-left: 20px; &:nth-child(1) { margin-left: 0; } } } } } .pagination { margin-top: 20px; display: flex; justify-content: center; align-items: center; } } .copy-toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.7); color: white; padding: 8px 16px; border-radius: 4px; animation: fade 2s; } </style> 现在这个页面的分享链接传的数据特别多能改善吗
08-06
把以下代码转为vue3+js+setup语法糖写法 <template> <el-container style="height: 100%; margin: 0; padding: 0"> <div class="left-container"> <div class="left-container__title"> {{ $t('route.checkAnnouncements') }} </div> <div class="left-container__list"> <div v-for="(item, index) in list" :key="item.noticeId" :class="['list-item', item.actived ? 'list-item__actived' : '']" @click="showDetail(item, index)" > <div class="list-item__title"> <span class="icon" :class="computedClass(item)">{{ computeName(item) }}</span> {{ item.title }} </div> <div class="list-item__date"> {{ $parseTime(item.publishTime) }} </div> </div> </div> <div class="notice-pagination"> <div class="notice-pagination__left"> {{ $t('components.pager.of') }} {{ total }} {{ $t('components.pager.entries') }} </div> <div class="notice-pagination__right"> <el-button type="text" :icon="ElIconArrowLeft" :disabled="pageNum === 1" @click="currentChange(-1)" /> <input v-model="pageNum" type="number" class="current-page" @input="pageNumInput" @keydown="clearInput" @change="pageNumChange" /> <span style="margin: 0 8px 0 5px">/{{ pageTotal }}</span> <el-button type="text" :icon="ElIconArrowRight" :disabled="pageNum === pageTotal" @click="currentChange(1)" /> </div> </div> </div> <el-container> <div v-if="bidingInfo && bidingInfo.bidingId" class="biding-block"> <div class="biding-block__title"> {{ bidingInfo.bidingName }} </div> <div class="biding-block__content" style="margin-bottom: 8px"> <span class="biding-block__content-title">{{ $t('announcements.title1') }}</span> <span class="biding-block__content-text">{{ bidingInfo.bidingName }}</span> </div> <div class="biding-block__content"> <span class="biding-block__content-title">{{ $t('announcements.title2') }}</span> <span class="biding-block__content-text">{{ bidingInfo.bidingNum }}</span> </div> <el-button style="min-width: 95px; height: 32px; margin-top: 48px" type="primary" @click="signUp"> {{ $t('announcements.title3') }} </el-button> </div> <div v-else class="doc-editor" v-html="html" /> <el-footer style="padding: 0 16px"> <div v-if="attaches && attaches.length" class="file-wrapper"> <div class="file-wrapper__title"> {{ $t('dataConfMod.attachment') }} </div> <div class="file-wrapper__file"> <SrmCommonFile v-for="(item, index) in attaches" :key="index" :default-file="{ fileId: item.fileuploadId, fileName: item.attachName, }" :readonly="true" /> </div> </div> </el-footer> </el-container> </el-container> </template> <script> import { ArrowLeft as ElIconArrowLeft, ArrowRight as ElIconArrowRight } from '@element-plus/icons-vue'; import { noticeApi } from 'mod@/common/userManage/api'; export default { name: 'AnnouncementsList', components: {}, data() { return { list: [], pageSize: 15, pageNum: 1, html: null, total: null, activeItem: null, fileName: null, fileRelationId: null, bidingInfo: null, applyArr: [ { value: '1', label: 'test', text: this.$t('dashboard.test') }, { value: '2', label: 'vacation', text: this.$t('dashboard.vocation') }, { value: '120', label: 'purchase', text: this.$t('dashboard.purchase'), }, { value: '23', label: 'up', text: this.$t('qualitySynergy.upgrade') }, { value: '232', label: 'notice', text: this.$t('dashboard.notice') }, { value: '2323', label: 'warning', text: this.$t('dashboard.warning') }, ], attaches: [], ElIconArrowLeft, ElIconArrowRight, }; }, computed: { showEmpty() { return this.list.length === 0; }, pageTotal() { return Math.ceil(this.total / this.pageSize); }, }, mounted() { const id = this.$route.params.id; this.queryList(id); }, activated() { const id = this.$route.params.id; this.queryList(id); }, methods: { computedClass(item) { let flagIndex = this.applyArr.findIndex(i => i.value === item.noticeType); flagIndex = flagIndex > -1 ? flagIndex : '4'; return this.applyArr[flagIndex].label; }, computeName(item) { let flagIndex = this.applyArr.findIndex(i => i.value === item.noticeType); flagIndex = flagIndex > -1 ? flagIndex : '4'; return this.applyArr[flagIndex].text; }, clearInput(e) { const key = e.key; if (key === 'e' || key === 'E' || key === '.' || key === '-' || key === '+') { e.returnValue = false; return false; } return true; }, pageNumInput(e) { if (e.target.value > this.pageTotal) { this.pageNum = this.pageTotal; } else if (e.target.value === 0) { this.pageNum = 1; } }, pageNumChange() { if (this.pageNum) { this.queryList(); } }, signUp() { // 报名/投标 this.$http({ url: `/api-bid/supplierCooperate/orderHead/queryBiding/${this.bidingInfo.bidingId}`, method: 'GET', loading: true, }).then(res => { if (res && res.data) { this.toSignUp(res.data); } else { this.$message.info(this.$t('dashboard.notSupportBidding')); } }); }, toSignUp(data) { if ( data.bidingStatus === 'ACCEPT_SIGNUP' && ['NO_SIGNUP', 'REJECTED'].includes(data.signUpStatus) && new Date(data.enrollEndDatetime) > new Date() ) { this.$router.push({ path: '/vendorBiddingManagement/vendorBiddingSignUp', query: { bidingId: data.bidingId, bidingNum: data.bidingNum, bidingName: data.bidingName, enrollEndDatetime: data.enrollEndDatetime, }, }); } else if ( data.bidingStatus === 'ACCEPT_BID' && ['DRAFT', 'WITHDRAW'].includes(data.orderStatus) && data.canOrder === 'Y' ) { this.$router.push({ path: '/vendorBiddingManagement/doBidingDetail', query: { bidingId: data.bidingId, bidingNum: data.bidingNum, }, }); } else { this.$message.info(this.$t('dashboard.notSupportBidding')); } }, queryList(id) { noticeApi .noticeList({ pageNum: this.pageNum, pageSize: this.pageSize, noticeStatus: 'PUBLISHED', }) .then(res => { if (id) { let targetIndex = 0; this.list = res.data.list.map((item, index) => { if (id === item.noticeId) targetIndex = index; return { ...item, actived: id === item.noticeId }; }); this.showDetail(res.data.list[targetIndex], targetIndex); } else { this.list = res.data.list.map((item, index) => ({ ...item, actived: index === 0, })); this.showDetail(res.data.list[0], 0); } this.total = res.data.total; }); }, showDetail(item, index) { if (!item) return; noticeApi.getNoticeInfo({ noticeId: item.noticeId }).then(res => { const result = res.data || {}; if (result && result.detail) { if (result.noticeSource === 'BIDING') { let detailChange = result.detail; detailChange = detailChange.replace('\n', ''); detailChange = detailChange.replace('<p>', ''); detailChange = detailChange.replace('</p>', ''); const detail = JSON.parse(detailChange); this.bidingInfo = detail; this.html = null; } else { this.html = result.detail; this.bidingInfo = null; } } this.attaches = result.attaches || []; }); const prevIndex = this.list.findIndex(i => i.actived); const prevItem = this.list[prevIndex]; const nextItem = this.list[index]; this.fileRelationId = nextItem.fileRelationId; this.fileName = nextItem.fileName; this.list.splice(prevIndex, 1, { ...prevItem, actived: false }); this.list.splice(index, 1, { ...nextItem, actived: true }); }, currentChange(num) { this.pageNum = +this.pageNum + num; this.queryList(); }, }, }; </script> <style lang="scss" scoped> .left-container { width: 300px; padding-right: 3px; border-right: 1px solid #ebeef5; background: #fff; &__title { height: 46px; margin: 0 16px; line-height: 46px; font-size: 14px; color: var(--el-text-color-primary); font-weight: 600; border-bottom: 1px solid #ebeef5; } &__list { width: 100%; height: calc(100vh - 166px); padding-left: 8px; overflow-y: auto; } &__list::-webkit-scrollbar-thumb { width: 6px; background: #c5c6c8; } .list-item { height: 64px; padding: 12px 8px; cursor: pointer; &:hover { background: var(--el-color-primary-light-9); border-radius: 4px; .list-item__title { color: var(--el-color-primary); } .list-item__date { color: var(--el-color-primary); } } } .list-item__actived { border-radius: 4px; background: var(--el-color-primary-light-9); } .list-item__title { font-size: 12px; color: var(--el-text-color-primary); line-height: 20px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; } .list-item__date { font-size: 12px; color: var(--el-text-color-secondary); line-height: 20px; } .list-item__actived { background: var(--el-color-primary-light-9); .list-item__title { color: var(--el-color-primary); } .list-item__date { color: var(--el-color-primary); } } &__pagination { width: 100%; } } .biding-block { text-align: center; padding-top: 16px; &__title { margin-bottom: 48px; font-size: 18px; color: var(--el-text-color-primary); line-height: 26px; font-weight: 500; } &__content { &-title { font-size: 14px; color: var(--el-text-color-secondary); line-height: 22px; } &-text { font-size: 14px; color: #393e45; line-height: 22px; } } } .doc-editor { -webkit-box-sizing: border-box; box-sizing: border-box; line-height: 1; padding: 16px; outline: none; overflow-y: auto; padding: 12px 15px; -o-tab-size: 4; tab-size: 4; -moz-tab-size: 4; text-align: left; white-space: normal; word-wrap: break-word; margin: 0 auto; width: 100%; max-width: 970px; font-size: 16px; } .file-wrapper { display: flex; justify-items: center; .file-wrapper__title { font-size: 12px; color: var(--el-text-color-primary); line-height: 28px; font-weight: 500; width: 40px; } .file-wrapper__file { flex: 1; } } .icon { display: inline-block; vertical-align: middle; width: 40px; height: 22px; border-radius: 2px; text-align: center; line-height: 20px; font-size: 12px; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 6px; &.up { //升级 border: 1px solid rgba(168, 221, 146, 1); background: #f6fbf4; color: var(--el-color-success); } &.notice { //通知 border: 1px solid var(--el-color-primary-light-3); background: var(--el-color-primary-light-9); color: var(--el-color-primary); } &.warning { //告警 border: 1px solid rgba(250, 210, 149, 1); background: #fefaf4; color: var(--el-color-warning); } &.test { //测试 border: 1px solid var(--el-color-primary-light-3); background: var(--el-color-primary-light-9); color: var(--el-color-primary); } &.vacation { //假期公告 border: 1px solid var(--el-color-primary-light-3); background: var(--el-color-primary-light-9); color: var(--el-color-primary); } &.purchase { //采购公告 border: 1px solid var(--el-color-primary-light-3); background: var(--el-color-primary-light-9); color: var(--el-color-primary); } } </style> <style lang="scss"> .notice-pagination { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 16px; &__left { color: var(--el-text-color-primary); } &__right { display: flex; align-items: center; .el-icon-arrow-left, .el-icon-arrow-right { color: var(--el-text-color-regular); } .is-disabled { .el-icon-arrow-left, .el-icon-arrow-right { color: #dcddde; } } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } input[type='number'] { -moz-appearance: textfield; } .current-page { height: 24px; width: 24px; margin-left: 8px; border: 1px solid #b9babd; border-radius: 4px; outline: none; } } .panel-body { line-height: 1.5; } } </style>
最新发布
08-12
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值