IsvCard组件
index.vue
<template>
<div class="venus-special-card-wrapper">
<a-spin tip="Loading..."
:spinning="localLoading">
<a-row :gutter="gutter"
class="venus-special-card-row"
v-show="localDataSource.length>0">
<a-col :xs="span.xs"
:sm="span.sm"
:md="span.md"
:lg="span.lg"
:xl="span.xl"
:xxl="span.xxl"
v-for="row in localDataSource"
:key="row[rowKey]"
class="venus-special-card">
<div class="card-box">
<div class="header-img"></div>
<div class="label-tag"
:class="row.excuteTotal===0?'label-tag-no':'label-tag-yes'">
{{ row.excuteTotal===0?'未执行':'已执行' }}
</div>
<div class="card-word">
<div class="card-title">
<a-tooltip placement="topLeft"
overlay-class-name="pts-primary-tooltip">
<template slot="title">
<span>{{ row.name }}</span>
</template>
<div class="content-title-a">{{ row.name }}</div>
</a-tooltip>
</div>
</div>
<div class="label-btn-tag1"
:class="row.taskType==='2'?'label-btn-tag1-type2':'label-btn-tag1-type1'">
{{ row.taskType | dictFilter(taskTypeMap) }}
</div>
<div class="label-btn-tag2"
:class="row.taskFlag==='1'?'label-btn-tag2-type2':'label-btn-tag2-type1'">
{{ row.taskFlag| dictFilter(submitStatusMap) }}
</div>
<div class="center-word">
<div class="center-row"
:title="row.beginTime">
<div class="center-row-lable">开始时间</div>
<div class="center-row-value">{{ row.beginTime }}</div>
</div>
<div class="center-row"
:title="row.endTime">
<div class="center-row-lable">结束时间</div>
<div class="center-row-value">{{ row.endTime }}</div>
</div>
<div class="center-row"
:title="row.code">
<div class="center-row-lable">任务编号</div>
<div class="center-row-value">{{ row.code }}</div>
</div>
</div>
<div class="card-action">
<slot name="action"
:row="row"></slot>
</div>
</div>
</a-col>
</a-row>
<a-empty v-show="localDataSource.length<=0"
:image="emptyImg"
:image-style="{ height: '100px'}">
<span slot="description">
暂无数据
<!-- <a href="#API">Description</a> -->
</span>
</a-empty>
</a-spin>
<a-row gutter="0"
v-if="localDataSource.length>0 && localDataSource.length < localPagination.total">
<a-col span="24"
class="footer-pagination">
<!-- <a-pagination :page-size="localPagination.pageSize || 8"
:total="localPagination.total"
v-model="localPagination.current"
@change="loadData" /> -->
<a-button @click="loadData(true)">加载更多</a-button>
</a-col>
</a-row>
</div>
</template>
<script>
import get from 'lodash.get'
import original from '@/assets/portalClient/original.png'
import { getDictArray } from '@/utils/dict'
import prefix from '@/config/prefix'
const colorOne = ['#b26af8', '#68a1e7', '#f64e40', '#ffb47f', '#51b8d3']
const colorTwo = ['#cf9dff', '#6877ea', '#f96c61', '#ff988a', '#51b8d3']
export default {
name: 'VenusIsvCard',
data() {
return {
localLoading: false,
previewVisible: false,
localDataSource: [],
localPagination: Object.assign({}, this.pagination),
emptyImg: original,
submitStatusMap: {},
taskTypMap: {},
taskTypArray: []
}
},
props: Object.assign(
{},
{
rowKey: {
type: [String, Function],
default: 'key'
},
pagination: {
type: [Object, Boolean],
default: false
},
data: {
type: Function,
required: true
},
pageNum: {
type: Number,
default: 1
},
pageSize: {
type: Number,
default: 8
},
showSizeChanger: {
type: Boolean,
default: true
},
showQuickJumper: {
type: Boolean,
default: true
},
size: {
type: String,
default: 'default'
},
/**
* alert: {
* show: true,
* clear: Function
* }
*/
alert: {
type: [Object, Boolean],
default: null
},
rowSelection: {
type: Object,
default: null
},
/** @Deprecated */
showAlertInfo: {
type: Boolean,
default: false
},
showPagination: {
type: String | Boolean,
default: true
},
/**
* enable page URI mode
*
* e.g:
* /users/1
* /users/2
* /users/3?queryParam=test
* ...
*/
pageURI: {
type: Boolean,
default: false
},
rangPicker: {
type: Array,
default: null
},
title: {
type: String,
default: 'name'
},
icon: {
type: String,
default: 'icon'
},
code: {
type: String,
default: 'code'
},
type: {
type: String,
default: 'type'
},
iconPrefix: {
type: String,
default: undefined
},
gutter: {
type: Array,
default: () => [48, 60]
},
span: {
type: Object,
default: () => { return { xs: 24, md: 8 } }
},
titleLabel: {
type: String,
default: ''
}
}
),
watch: {
'localPagination.current'(val) {
this.pageURI &&
this.$router.push({
...this.$route,
name: this.$route.name,
params: Object.assign({}, this.$route.params, {
pageNo: val
})
})
},
pageNum(val) {
Object.assign(this.localPagination, {
current: val
})
},
pageSize(val) {
Object.assign(this.localPagination, {
pageSize: val
})
},
showSizeChanger(val) {
Object.assign(this.localPagination, {
showSizeChanger: val
})
},
showQuickJumper(val) {
Object.assign(this.localPagination, {
showQuickJumper: val
})
}
},
filters: {
dictFilter(index, map) {
return map[index] && map[index].text
}
},
created() {
getDictArray('isv_submit_status').then(data => {
const submitStatusMap = {}
data.map(d => {
submitStatusMap[d.dictValue] = { text: d.dictLabel }
})
this.submitStatusMap = submitStatusMap
})
getDictArray('isv_task_type').then(data => {
this.taskTypeArray = data
const taskTypeMap = {}
this.taskTypeArray.map(d => {
taskTypeMap[d.dictValue] = { text: d.dictLabel }
})
this.taskTypeMap = taskTypeMap
})
const { pageNo } = this.$route.params
const localPageNum = (this.pageURI && pageNo && parseInt(pageNo)) || this.pageNum
this.localPagination =
(['auto', true].includes(this.showPagination) &&
Object.assign({}, this.localPagination, {
current: localPageNum,
pageSize: this.pageSize,
showSizeChanger: this.showSizeChanger,
showQuickJumper: this.showQuickJumper
})) ||
false
this.loadData()
},
methods: {
/**
* 卡片列表重新加载方法
* 如果参数为 true, 则强制刷新到第一页
* @param Boolean bool
*/
refresh(bool = false) {
bool &&
(this.localPagination = Object.assign(
{},
{
current: 1,
pageSize: this.pageSize
}
))
this.loadData()
},
/**
* 加载数据方法
* @param {Object} pagination 分页选项器
* @param {Object} filters 过滤条件
* @param {Object} sorter 排序条件
*/
loadData(isNext) {
this.localLoading = true
// console.log('rangPicker', this.rangPicker)
// 加载更多
if (isNext && this.showPagination && this.localPagination.current) {
this.localPagination.current = parseInt(this.localPagination.current) + 1
}
const parameter = Object.assign(
{
pageNum: (this.showPagination && this.localPagination.current) || this.pageNum,
pageSize: (this.showPagination && this.localPagination.pageSize) || this.pageSize
},
(this.rangPicker &&
this.rangPicker.length === 2 && {
beginTime: this.rangPicker[0].format('YYYY-MM-DD'),
endTime: this.rangPicker[1].format('YYYY-MM-DD')
}) ||
{}
)
const result = this.data(parameter)
// 对接自己的通用数据接口需要修改下方代码中的 r.pageNo, r.totalCount, r.data
// eslint-disable-next-line
if ((typeof result === 'object' || typeof result === 'function') && typeof result.then === 'function') {
const _this = this
result.then(r => {
_this.localPagination =
(_this.showPagination &&
Object.assign({}, _this.localPagination, {
current: r.pageNum, // 返回结果中的当前分页数
total: r.total, // 返回结果中的总记录数
showSizeChanger: _this.showSizeChanger,
showQuickJumper: _this.showQuickJumper,
showTotal: total => `共 ${r.total} 条数据`,
pageSize: _this.showPagination ? _this.localPagination.pageSize || this.pageSize : undefined
})) ||
false
// 为防止删除数据后导致页面当前页面数据长度为 0 ,自动翻页到上一页
if (r.rows.length === 0 && _this.showPagination && _this.localPagination.current > 1) {
_this.localPagination.current--
_this.loadData()
return
}
// console.log('localPagination', this.localPagination)
// 这里用于判断接口是否有返回 r.totalCount 且 this.showPagination = true 且 pageNo 和 pageSize 存在 且 totalCount 小于等于 pageNo * pageSize 的大小
// 当情况满足时，表示数据不满足分页大小，关闭 table 分页功能
try {
if (
['auto', true].includes(_this.showPagination) &&
r.total <= r.pageNum * _this.localPagination.pageSize
) {
_this.localPagination.hideOnSinglePage = true
}
} catch (e) {
_this.localPagination = false
}
if (isNext) {
_this.localDataSource = _this.localDataSource.concat(r.rows) // 返回结果中的数组数据
} else {
_this.localDataSource = r.rows // 返回结果中的数组数据
}
_this.localLoading = false
})
}
this.pagination = false
console.log(this.localDataSource)
}
}
// render() {
// const cardWrapper = this.localDataSource.map(row => {
// const key = row[this.rowKey]
// return <a-col span="6" key={key} class="venus-script-card">
// <img src={prefix.OPEN_URL_PREFIX + row.icon} class="card-img" />
// <div class="card-word">
// <p class="card-title">{row[this.title]}</p>
// <p class="card-desc"><span class="indentation"></span>{row[this.description]}</p>
// </div>
// {Object.keys(this.$slots).map(name => (<slot name={name} row={row} class="card-action">{this.$slots[name]}</slot>))}
// </a-col>
// })
// const paginationRender = this.showPagination ? (<a-pagination
// // show-size-changer={this.localPagination.showSizeChanger}
// default-page-size={this.localPagination.pageSize || 8}
// show-total={this.localPagination.showTotal}
// current={this.localPagination.current}
// show-quick-jumper={this.localPagination.showQuickJumper}
// on={{ change: this.loadData, showSizeChange: this.loadData }}
// />) : ''
// }
}
</script>
<style lang="less">
@import './index.less';
.venus-special-card-wrapper {
.ant-spin-container::after {
background: none;
}
}
</style>
index.less
@import '../../index.less';
.venus-special-card-wrapper {
.ant-empty {
.ant-empty-image {
margin-top: 40px;
}
height: 300px;
margin: 0px;
padding-top: 40px;
}
.venus-special-card-row {
// margin: 0 !important;
margin-bottom: 24px !important;
}
.venus-special-card {
border-top: none;
border-left: none;
.card-box {
width: 388px;
height: 276px;
opacity: 1;
background: #002055;
border: 1px solid #2565f7;
position: relative;
padding: 24px;
transition: 0.5s;
&:hover{
background: #012f7b;
}
.header-img {
background: url(~@/assets/portalClient/isv/index/topImg.png) no-repeat center/contain;
position: absolute;
height: 28px;
width: 389px;
top: -29px;
left: -2px;
}
.label-tag {
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
position: absolute;
top: 9px;
right: -22px;
width: 83px;
height: 23px;
line-height: 23px;
color: #ffffff;
font-size: 12px;
text-align: center;
}
.label-tag-yes{
background: url(~@/assets/portalClient/isv/index/blueTag.png) no-repeat center/contain;
}
.label-tag-no{
background: url(~@/assets/portalClient/isv/index/orgTag.png) no-repeat center/contain;
}
.label-btn-tag1{
position: absolute;
top: 68px;
left: 23px;
width: 49px;
height: 25px;
opacity: 1;
border-radius: 4px;
font-size: 14px;
font-family: PingFang SC, PingFang SC-Regular;
font-weight: 400;
text-align: center;
line-height: 25px;
color: #ffffff;
}
.label-btn-tag1-type1{
background: linear-gradient(#1b7abc 0%, #1d95aa 100%);
}
.label-btn-tag1-type2{
background: linear-gradient(#639e42 0%, #1aa845 100%);
}
.label-btn-tag2{
position: absolute;
top: 68px;
left: 80px;
width: 64px;
height: 25px;
opacity: 1;
border-radius: 4px;
font-size: 14px;
font-family: PingFang SC, PingFang SC-Regular;
font-weight: 400;
text-align: center;
line-height: 23px;
color: #ffffff;
}
.label-btn-tag2-type1{
background: linear-gradient(#1b7abc 0%, #1d95aa 100%);
}
.label-btn-tag2-type2{
background: linear-gradient(rgba(242,142,38,1.00) 0%, #fd644f 100%);
}
.card-word {
font-family: Helvetica;
padding-bottom: 50px;
.card-title {
width: 315px;
height: 25px;
opacity: 1;
font-size: 20px;
font-family: PingFang SC, PingFang SC-Regular;
font-weight: 400;
text-align: left;
color: #ffffff;
line-height: 25px;
.content-title-a{
overflow: hidden;
text-overflow: ellipsis; //超出部分以省略号显示
white-space: nowrap;
width: 315px; //用px单位亦可行
}
}
.card-desc {
font-size: 14px;
color: #76aeff;
cursor: default;
.value {
margin-top: 8px;
display: block;
width: 100%;
height: 40px;
letter-spacing: 1px;
color: #eae4e4;
display: -webkit-box;
line-height: 22px;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 0px;
}
}
}
.center-word{
height: 74px;
width: 100%;
.center-row{
height: 33%;
width: 100%;
.center-row-lable{
float: left;
width: 30%;
font-weight: 400;
text-align: left;
color: #3e62d4;
line-height: 24px;
font-size: 14px;
}
.center-row-value{
float: right;
width: 70%;
font-weight: 400;
text-align: right;
color: #b2aeff;
line-height: 24px;
font-size: 14px;
}
}
}
.card-action {
margin-top: 20px;
padding-top: 17px;
border-top: 1px solid #103767;
button {
width: 100%;
height: 30px;
font-size: 12px;
background: transparent;
color: #b7b7ff;
border: solid 1px rgba(35, 111, 255, 0.5);
&:focus {
color: #b7b7ff;
border: solid 1px rgba(35, 111, 255, 0.5);
}
&:hover {
color: #fff;
border: solid 1px rgba(35, 111, 255, 0.5);
background-image: linear-gradient(90deg, #23afb1 0%, #0066ff 100%);
}
}
}
}
}
}
.footer-pagination {
text-align: center;
button {
max-width: 200px;
width: 100%;
background: url(~@/assets/portalClient/script/index/list_bg.png) no-repeat center/cover;
border: solid 1px #117bff;
color: #fff;
height: 36px;
&:focus {
color: #fff;
background: url(~@/assets/portalClient/script/index/list_bg.png) no-repeat center/cover;
}
&:hover {
color: #fff;
background-image: linear-gradient(90deg, #23afb1 0%, #0066ff 100%);
}
&::before {
content: '';
display: block;
position: absolute;
top: -2px;
left: 0px;
width: 100%;
height: 4px;
background: url(~@/assets/portalClient/script/index/light_03.png) no-repeat center/cover;
}
&::after {
content: '';
display: block;
position: absolute;
bottom: -2px;
left: 0px;
width: 100%;
height: 4px;
background: url(~@/assets/portalClient/script/index/light_03.png) no-repeat center/cover;
}
}
}
请阅读后点赞，谢谢
浙公网安备 33010602011771号