<template>
<a-list item-layout="vertical" size="large" :pagination="pagination" :data-source="myClass">
<template #renderItem="{ item }">
<div class="myclass-div">
<a-list-item>
<a-list-item-meta>
<template #avatar>
<div class="coverImg">
<es-upload-img :value="item.CoverFileId" :showImgStyle="{}" disabled />
</div>
</template>
<template #title>
<div>
<span class="className-link" v-html="item.searchText"></span>
</div>
<div style="width: 905px">
<div class="content-div">
<div style="width: 155px">
<span>负责人:</span>
<span class="font-block">{{ item.Manager }}</span>
</div>
<div>
<span>有效期:</span>
<span class="font-block">
{{ item.BeginTime }}
至
{{ item.EndTime }}
</span>
</div>
</div>
//进度条
<div style="width: 500px">
<a-progress
:percent="item.TotalLearningTime * 100"
:format="progressFormat(parseInt(item.TotalLearningTime * 1000) / 10.0)"
/>
</div>
</div>
</template>
</a-list-item-meta>
</a-list-item>
</div>
</template>
</a-list>
</template>
<script>
import { getMySubjects } from '@/api/subject/student/subject';
import moment from 'moment';
export default {
name: 'List',
data() {
return {
pagination: {
onShowSizeChange: (current, pageSize) => this.onSizeChange(current, pageSize),
onChange: (page, pageSize) => this.onPageChange(page, pageSize),
pageSize: 1,
current: 1,
total: 0,
showSizeChanger: true,
size: 'default',
sortType: 'EndTime',
sortField: 'asc',
},
myClass: [],
};
},
computed: {
pageInfo() {
const thisInfo = this;
return {
isPage: true,
pageSize: thisInfo.pagination.pageSize,
currentPageIndex: thisInfo.pagination.current - 1,
sortField1: 'EndTime',
SortType1: 'asc',
};
},
},
mounted() {
this.loadSpecial();
},
methods: {
onPageChange(page) {
this.pagination.current = page;
this.loadSpecial();
},
onSizeChange(current, pageSize) {
this.pagination.current = 1;
this.pagination.pageSize = pageSize;
this.loadSpecial();
},
progressFormat(studyProgress) {
return () => '学习进度:' + studyProgress + '%';
},
loadSpecial(Name) {
const _this = this;
let data = {
searchText: Name,
};
getMySubjects(_this.pageInfo, data).then(res => {
console.log(res.List);
res.List?.forEach(item => {
item.searchText = this.brightenKeyword(item.Name, Name);
item.BeginTime = moment(item.BeginTime).format('YYYY-MM-DD HH:mm');
item.EndTime = moment(item.EndTime).format('YYYY-MM-DD HH:mm');
});
_this.myClass = res.List;
_this.pagination.total = res.TotalCount;
});
},
//模糊搜索(搜索到字变色)
brightenKeyword(val, keyword) {
if (keyword != undefined) {
if (keyword.length > 0) {
val = val.replace(
new RegExp(keyword, 'i'),
'<font color="#f75353">' + keyword + '</font>',
);
return val;
} else {
return val;
}
} else {
return val;
}
},
},
};
</script>
<style lang="less" scoped>
</style>