把以下代码转为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>
最新发布