commit
This commit is contained in:
@jyuhsin
@@ -1,253 +1,278 @@
|
|||||||
<template>
|
<template>
|
||||||
<van-pull-refresh v-model="tableRefreshing" @refresh="onRefresh">
|
<van-pull-refresh v-model="tableRefreshing" @refresh="onRefresh">
|
||||||
<div v-if="tableData.length === 0" class="empty-state">
|
<div v-if="tableData.length === 0" class="empty-state">
|
||||||
<van-empty description="暂无数据"></van-empty>
|
<van-empty description="暂无数据"></van-empty>
|
||||||
</div>
|
|
||||||
<van-list v-if="tableData && tableData.length>0"
|
|
||||||
v-model="tableLoading"
|
|
||||||
:finished="tableFinished"
|
|
||||||
finished-text=""
|
|
||||||
@load="onLoad">
|
|
||||||
<div class="table-list-container">
|
|
||||||
<div v-for="(row, index) in tableData" :key="index" class="table-list-item">
|
|
||||||
<slot name="header" :index="index" :row="row">
|
|
||||||
<div class="item-header">
|
|
||||||
<div class="item-title">{{ row[title] }}</div>
|
|
||||||
<enum-tag :value="row.instanceState" name="ProcessInstanceStateEnum" label_key="message"
|
|
||||||
size="small"></enum-tag>
|
|
||||||
</div>
|
|
||||||
</slot>
|
|
||||||
|
|
||||||
<slot :index="index" :row="row"></slot>
|
|
||||||
|
|
||||||
<div class="item-actions">
|
|
||||||
<slot name="actions" :index="index" :row="row"></slot>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<van-list v-if="tableData && tableData.length>0"
|
||||||
</van-list>
|
v-model="tableLoading"
|
||||||
</van-pull-refresh>
|
:finished="tableFinished"
|
||||||
|
finished-text=""
|
||||||
|
@load="onLoad">
|
||||||
|
<div class="table-list-container">
|
||||||
|
<div v-for="(row, index) in tableData" :key="index" class="table-list-item">
|
||||||
|
<slot name="header" :index="index" :row="row" v-if="$slots.header">
|
||||||
|
<div class="item-header">
|
||||||
|
<div class="item-title">{{ row[title] }}</div>
|
||||||
|
<enum-tag :value="row.instanceState" name="ProcessInstanceStateEnum" label_key="message"
|
||||||
|
size="small"></enum-tag>
|
||||||
|
</div>
|
||||||
|
</slot>
|
||||||
|
|
||||||
|
<div style="display: flex;column-gap: 10px"
|
||||||
|
:style="{'max-height':img ? '100px':'unset', 'overflow': img ? 'hidden':'unset' }">
|
||||||
|
<div class="img-container" v-if="img">
|
||||||
|
<img :src="row[img]" alt="" style="object-fit: cover">
|
||||||
|
</div>
|
||||||
|
<div class="">
|
||||||
|
<slot :index="index" :row="row"></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item-actions">
|
||||||
|
<slot name="actions" :index="index" :row="row"></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</van-list>
|
||||||
|
</van-pull-refresh>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
module.exports = {
|
module.exports = {
|
||||||
name: "TableList",
|
name: "TableList",
|
||||||
props: {
|
props: {
|
||||||
api: {
|
api: {
|
||||||
type: String,
|
type: String,
|
||||||
required: true
|
required: true
|
||||||
|
},
|
||||||
|
page_form: {
|
||||||
|
type: Object,
|
||||||
|
required: true,
|
||||||
|
default: () => {
|
||||||
|
return {
|
||||||
|
pageNumber: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
totalCount: 0,
|
||||||
|
searchKeyword: ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
json: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: ""
|
||||||
|
},
|
||||||
|
img: {
|
||||||
|
type: String,
|
||||||
|
default: ""
|
||||||
|
}
|
||||||
},
|
},
|
||||||
page_form: {
|
watch: {
|
||||||
type: Object,
|
page_form: {
|
||||||
required: true,
|
handler(newVal, oldVal) {
|
||||||
default: () => {
|
this.localPageForm = { ...newVal }
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
immediate: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
return {
|
return {
|
||||||
pageNumber: 1,
|
tableData: [],
|
||||||
pageSize: 10,
|
tableLoading: false,
|
||||||
totalCount: 0,
|
tableFinished: false,
|
||||||
searchKeyword: ""
|
tableRefreshing: false,
|
||||||
|
localPageForm: { ...this.page_form }
|
||||||
}
|
}
|
||||||
}
|
|
||||||
},
|
|
||||||
json: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
page_form: {
|
|
||||||
handler(newVal, oldVal) {
|
|
||||||
this.localPageForm = {...newVal}
|
|
||||||
},
|
|
||||||
deep: true,
|
|
||||||
immediate: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
tableData: [],
|
|
||||||
tableLoading: false,
|
|
||||||
tableFinished: false,
|
|
||||||
tableRefreshing: false,
|
|
||||||
localPageForm: {...this.page_form}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onLoad(){
|
|
||||||
if (this.tableFinished) return
|
|
||||||
this.localPageForm.pageNumber++
|
|
||||||
this.$emit('update:page_form', {...this.localPageForm});
|
|
||||||
this.pageData()
|
|
||||||
},
|
},
|
||||||
|
methods: {
|
||||||
|
onLoad() {
|
||||||
|
if (this.tableFinished) return
|
||||||
|
this.localPageForm.pageNumber++
|
||||||
|
this.$emit("update:page_form", { ...this.localPageForm })
|
||||||
|
this.pageData()
|
||||||
|
},
|
||||||
|
|
||||||
pageData() {
|
pageData() {
|
||||||
this.tableLoading = true
|
this.tableLoading = true
|
||||||
|
|
||||||
const loading = createListLoading()
|
const loading = createListLoading()
|
||||||
this.$axios.post(this.api, this.json ? ({pageForm: JSON.stringify(this.localPageForm)}) : this.localPageForm).then((res) => {
|
this.$axios.post(this.api, this.json ? ({ pageForm: JSON.stringify(this.localPageForm) }) : this.localPageForm).then((res) => {
|
||||||
if (res.code === 0) {
|
if (res.code === 0) {
|
||||||
this.tableData = this.tableData.concat(res.data.list)
|
this.tableData = this.tableData.concat(res.data.list)
|
||||||
this.localPageForm.totalCount = res.data.totalCount
|
this.localPageForm.totalCount = res.data.totalCount
|
||||||
if (this.tableData.length >= this.localPageForm.totalCount) {
|
if (this.tableData.length >= this.localPageForm.totalCount) {
|
||||||
this.tableFinished = true
|
this.tableFinished = true
|
||||||
}
|
}
|
||||||
this.$emit('update:page_form', {...this.localPageForm});
|
this.$emit("update:page_form", { ...this.localPageForm })
|
||||||
|
}
|
||||||
|
}).finally(() => {
|
||||||
|
loading.close()
|
||||||
|
console.log(this.tableLoading)
|
||||||
|
this.tableLoading = false
|
||||||
|
console.log(this.tableLoading)
|
||||||
|
this.tableRefreshing = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
doSearch() {
|
||||||
|
this.tableFinished = false
|
||||||
|
this.tableData = []
|
||||||
|
this.localPageForm.pageNumber = 1
|
||||||
|
this.$emit("update:page_form", { ...this.localPageForm })
|
||||||
|
this.pageData()
|
||||||
|
},
|
||||||
|
onRefresh() {
|
||||||
|
this.localPageForm.pageNumber = 1
|
||||||
|
this.$emit("update:page_form", { ...this.localPageForm })
|
||||||
|
this.doSearch()
|
||||||
}
|
}
|
||||||
}).finally(() => {
|
|
||||||
loading.close()
|
|
||||||
console.log(this.tableLoading)
|
|
||||||
this.tableLoading = false
|
|
||||||
console.log(this.tableLoading)
|
|
||||||
this.tableRefreshing = false
|
|
||||||
})
|
|
||||||
},
|
},
|
||||||
doSearch() {
|
mounted() {
|
||||||
this.tableFinished = false
|
this.$emit("ready")
|
||||||
this.tableData = []
|
}
|
||||||
this.localPageForm.pageNumber = 1
|
|
||||||
this.$emit('update:page_form', {...this.localPageForm});
|
|
||||||
this.pageData()
|
|
||||||
},
|
|
||||||
onRefresh() {
|
|
||||||
this.localPageForm.pageNumber = 1
|
|
||||||
this.$emit('update:page_form', {...this.localPageForm});
|
|
||||||
this.doSearch()
|
|
||||||
},
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.$emit('ready');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.table-list-container {
|
.table-list-container {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-list-container .table-list-item {
|
.table-list-container .table-list-item {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-bottom: 1px solid #eaecef;
|
border-bottom: 1px solid #eaecef;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-list-container .table-list-item:last-child {
|
.table-list-container .table-list-item:last-child {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-list-container .table-list-item .item-header {
|
.table-list-container .table-list-item .item-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-list-container .table-list-item .item-title {
|
.table-list-container .table-list-item .item-title {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #1f2f3d;
|
color: #1f2f3d;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.table-list-container .table-list-item .img-container {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-list-container .table-list-item .img-container img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.table-list-container .table-list-item .item-meta {
|
.table-list-container .table-list-item .item-meta {
|
||||||
display: flex;
|
display: flex;
|
||||||
color: #606266;
|
color: #606266;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
padding: 4px 0;
|
padding: 4px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-list-container .table-list-item .meta-item {
|
.table-list-container .table-list-item .meta-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-list-container .table-list-item .meta-item i {
|
.table-list-container .table-list-item .meta-item i {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #909399;
|
color: #909399;
|
||||||
width: 16px;
|
width: 16px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-list-container .table-list-item .item-content {
|
.table-list-container .table-list-item .item-content {
|
||||||
color: #606266;
|
color: #606266;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
-webkit-line-clamp: 2;
|
-webkit-line-clamp: 2;
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-list-container .table-list-item .item-footer {
|
.table-list-container .table-list-item .item-footer {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
padding-top: 8px;
|
padding-top: 8px;
|
||||||
border-top: 1px dashed #eaecef;
|
border-top: 1px dashed #eaecef;
|
||||||
color: #909399;
|
color: #909399;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-list-container .table-list-item .item-actions {
|
.table-list-container .table-list-item .item-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
column-gap: 20px;
|
column-gap: 20px;
|
||||||
justify-content: end;
|
justify-content: end;
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
padding-top: 12px;
|
padding-top: 12px;
|
||||||
border-top: 1px solid #eaecef;
|
border-top: 1px solid #eaecef;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-list-container .table-list-item .action-btn {
|
.table-list-container .table-list-item .action-btn {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: end;
|
justify-content: end;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: var(--color-primary);
|
color: var(--color-primary);
|
||||||
padding: 4px 0;
|
padding: 4px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-list-container .table-list-item .action-btn i {
|
.table-list-container .table-list-item .action-btn i {
|
||||||
margin-right: 6px;
|
margin-right: 6px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-list-container .table-list-item .action-btn.delete {
|
.table-list-container .table-list-item .action-btn.delete {
|
||||||
color: #ff0000;
|
color: #ff0000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-list-container .table-list-item .action-btn.review {
|
.table-list-container .table-list-item .action-btn.review {
|
||||||
color: #67c23a;
|
color: #67c23a;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-list-container .empty-state {
|
.table-list-container .empty-state {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 60px 20px;
|
padding: 60px 20px;
|
||||||
color: #909399;
|
color: #909399;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-list-container .empty-state i {
|
.table-list-container .empty-state i {
|
||||||
font-size: 60px;
|
font-size: 60px;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
color: #dcdee0;
|
color: #dcdee0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-list-container .empty-state p {
|
.table-list-container .empty-state p {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user