165 lines
3.5 KiB
Vue
165 lines
3.5 KiB
Vue
<template>
|
|
<div>
|
|
<!-- 表头-->
|
|
<div class="column">
|
|
<a-row>
|
|
<a-col :span="item.col" v-for="(item, index) in columnData" :key="index">{{ item.title }}</a-col>
|
|
</a-row>
|
|
</div>
|
|
|
|
<!-- 表格内容-->
|
|
<div v-if="tableData.length > 0">
|
|
<div v-for="(item, index) in tableData" :key="index" class="table-item">
|
|
<!-- 上面的创建时间和按钮-->
|
|
<div class="table-item-title">
|
|
<span>{{ item.createTime }}</span>
|
|
<a-button type="primary" v-if="showMeetingBtn" @click="toMeeting">{{ buttonText }}
|
|
<a-icon type="right"></a-icon>
|
|
</a-button>
|
|
</div>
|
|
|
|
<!-- 数据内容-->
|
|
<div class="table-item-content">
|
|
<a-row>
|
|
<a-col :span="tt.col" v-for="(tt, i) in columnData" :key="i">
|
|
<slot :name="tt.scopedSlots" :record="item">{{ item[tt.dataIndex] }}</slot>
|
|
</a-col>
|
|
</a-row>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<a-empty v-else style="margin: 30px 0"></a-empty>
|
|
|
|
<!-- 分页-->
|
|
<div style="float: right; margin-top: 20px">
|
|
<a-pagination
|
|
show-quick-jumper
|
|
showSizeChanger
|
|
:pageSizeOptions="['10', '20', '30']"
|
|
:showTotal="(total, range) => {return range[0] + '-' + range[1] + ' 共' + total + '条'}"
|
|
:default-current="2"
|
|
:total="tableData.length"
|
|
@change="handleTabelChange"/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'ProjectTable',
|
|
props: {
|
|
columnData: {
|
|
type: Array,
|
|
required: false,
|
|
default: () => {
|
|
return []
|
|
}
|
|
},
|
|
// 表格数据
|
|
tableData: {
|
|
type: Array,
|
|
required: false,
|
|
default: () => {
|
|
return []
|
|
}
|
|
},
|
|
// 是否显示跳转会议的按钮
|
|
showMeetingBtn: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
},
|
|
// 按钮上显示的文字
|
|
buttonText: {
|
|
type: String,
|
|
required: false,
|
|
default: ''
|
|
}
|
|
},
|
|
data() {
|
|
return {}
|
|
},
|
|
methods: {
|
|
/**
|
|
* 分页变化抛出值
|
|
* @param page
|
|
* @param pageSize
|
|
*/
|
|
handleTabelChange(page, pageSize) {
|
|
let pagination = {
|
|
current: page,
|
|
pageSize: pageSize
|
|
}
|
|
this.$emit('change', pagination)
|
|
},
|
|
/**
|
|
* 跳转至会议页面
|
|
*/
|
|
toMeeting() {
|
|
this.$router.push({
|
|
path: '/meetingActivity/MeetingActivity'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.column {
|
|
height: 50px;
|
|
background: #f0f1f2;
|
|
|
|
.ant-col {
|
|
text-align: center;
|
|
line-height: 50px;
|
|
font-size: 14px;
|
|
font-family: PingFang SC, PingFang SC-Bold;
|
|
font-weight: 700;
|
|
color: #333333;
|
|
padding: 0 15px;
|
|
overflow: hidden;
|
|
word-break: keep-all;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
|
|
.table-item {
|
|
margin-top: 10px;
|
|
height: 130px;
|
|
box-sizing: border-box;
|
|
border: 1px solid #d5d5d5;
|
|
|
|
&-title {
|
|
height: 60px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background: #f0f1f2;
|
|
box-shadow: -1px 0px 0px 0px #e3e3e5;
|
|
padding: 0 15px;
|
|
}
|
|
|
|
&-content {
|
|
height: 70px;
|
|
|
|
.ant-col:first-child {
|
|
font-size: 16px;
|
|
font-family: PingFang SC, PingFang SC-Bold;
|
|
font-weight: 700;
|
|
color: #069f99;
|
|
}
|
|
|
|
.ant-col {
|
|
text-align: center;
|
|
padding: 0 15px;
|
|
height: 100%;
|
|
line-height: 70px;
|
|
overflow: hidden;
|
|
word-break: keep-all;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
|
|
}
|
|
</style> |