c-zhouhf1/zhgh_ncu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

..

Browse Source
This commit is contained in:
那些花儿
2025-09-06 14:50:08 +08:00
parent fc15ba1d39
commit 602c9379a2
11 changed files with 829 additions and 1166 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/static/assets/platform/css/h5.css
-130
View File
@@ -183,136 +183,6 @@ body {
}
/*****************************列表list css********************************/
.table-list-container {
padding: 0;
margin-top: 10px;
}
.table-list-container .table-list-item {
background-color: #fff;
border-bottom: 1px solid #eaecef;
padding: 16px;
position: relative;
margin-bottom: 10px;
}
.table-list-container .table-list-item:last-child {
border-bottom: none;
margin-bottom: 0;
}
.table-list-container .table-list-item .item-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 10px;
}
.table-list-container .table-list-item .item-title {
font-size: 16px;
font-weight: 500;
color: #1f2f3d;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
padding-right: 10px;
}
.table-list-container .table-list-item .item-meta {
display: flex;
color: #606266;
font-size: 14px;
margin-bottom: 5px;
padding: 4px 0;
}
.table-list-container .table-list-item .meta-item {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
}
.table-list-container .table-list-item .meta-item i {
font-size: 14px;
color: #909399;
width: 16px;
text-align: center;
}
.table-list-container .table-list-item .item-content {
color: #606266;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 1.5;
}
.table-list-container .table-list-item .item-footer {
display: flex;
justify-content: space-between;
margin-top: 12px;
padding-top: 8px;
border-top: 1px dashed #eaecef;
color: #909399;
font-size: 13px;
}
.table-list-container .table-list-item .item-actions {
display: flex;
column-gap: 20px;
justify-content: end;
margin-top: 15px;
padding-top: 12px;
border-top: 1px solid #eaecef;
}
.table-list-container .table-list-item .action-btn {
display: flex;
align-items: center;
justify-content: end;
font-size: 14px;
color: var(--color-primary);
padding: 4px 0;
}
.table-list-container .table-list-item .action-btn i {
margin-right: 6px;
font-size: 16px;
}
.table-list-container .table-list-item .action-btn.delete {
color: #ff0000;
}
.table-list-container .table-list-item .action-btn.review {
color: #67c23a;
}
.table-list-container .empty-state {
text-align: center;
padding: 60px 20px;
color: #909399;
}
.table-list-container .empty-state i {
font-size: 60px;
margin-bottom: 16px;
color: #dcdee0;
}
.table-list-container .empty-state p {
margin-top: 10px;
font-size: 14px;
}
/*****************************申请表单CSS********************************/
.form-container {
padding-bottom: 80px;
src/main/resources/static/components/plugins/h5/TableColumn.vue
+61
View File
@@ -0,0 +1,61 @@
<script>
module.exports = {
name: "TableColumn",
props: {
label: {
type: String,
default: ""
},
value: {
type: [String, Number],
required: false
},
label_suffix:{
type: String,
default: "："
}
},
}
</script>
<template>
<div class="table-column">
<!-- 左侧 Label -->
<div class="label">
<slot name="label">
{{ label }}
{{label_suffix}}
</slot>
</div>
<!-- 右侧 Value -->
<div class="value">
<slot>{{ value }}</slot>
</div>
</div>
</template>
<style scoped>
.table-column {
display: flex;
padding: 8px 0;
}
.label {
color: #333;
font-size: 14px;
flex-shrink: 0;
max-width: 120px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.value {
color: #555;
font-size: 14px;
flex-grow: 1; /* 动态占据剩余部分 */
white-space: nowrap; /* 防止换行 */
overflow: hidden; /* 隐藏溢出的部分 */
text-overflow: ellipsis; /* 省略号 */
}
</style>
src/main/resources/static/components/plugins/h5/TableList.vue
+225
View File
@@ -0,0 +1,225 @@
<template>
<van-pull-refresh v-model="tableRefreshing" @refresh="doSearch">
<div v-if="tableData.length === 0" class="empty-state">
<van-empty description="暂无数据"></van-empty>
</div>
<van-list v-if="tableData && tableData.length>0"
v-model="tableLoading"
:finished="tableFinished"
finished-text=""
@load="pageData">
<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.name}}</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>
</van-list>
</van-pull-refresh>
</template>
<script>
module.exports = {
name: "TableList",
props: {
api: {
type: String,
required: true
},
page_form: {
type: Object,
required: true,
default: () => {
return {
pageNumber: 1,
pageSize: 10,
totalCount: 0,
searchKeyword: ""
}
}
},
json:{
type: Boolean,
default: false
}
},
data() {
return {
tableData: [],
tableLoading: false,
tableFinished: false,
tableRefreshing: false,
localPageForm: {...this.page_form}
}
},
methods: {
pageData() {
this.tableLoading = true
this.localPageForm = {...this.page_form}
const loading = createListLoading()
this.$axios.post(this.api, this.json ? ({pageForm:JSON.stringify(this.localPageForm)}) : this.localPageForm).then((res) => {
if (res.code === 0) {
this.tableData = this.tableData.concat(res.data.list)
this.localPageForm.totalCount = res.data.totalCount
if (this.tableData.length >= this.localPageForm.totalCount) {
this.tableFinished = true
}
this.localPageForm.pageNumber++
// 触发事件更新父组件的pageForm
this.$emit('update:page_form', {...this.localPageForm});
}
}).finally(() => {
loading.close()
this.tableLoading = false
this.tableRefreshing = false
})
},
doSearch() {
this.tableFinished = false;
this.tableData = [];
this.pageData();
}
},
created() {
// this.pageData();
}
}
</script>
<style scoped>
.table-list-container {
padding: 0;
margin-top: 10px;
}
.table-list-container .table-list-item {
background-color: #fff;
border-bottom: 1px solid #eaecef;
padding: 16px;
position: relative;
margin-bottom: 10px;
}
.table-list-container .table-list-item:last-child {
border-bottom: none;
margin-bottom: 0;
}
.table-list-container .table-list-item .item-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 10px;
}
.table-list-container .table-list-item .item-title {
font-size: 16px;
font-weight: 500;
color: #1f2f3d;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
padding-right: 10px;
}
.table-list-container .table-list-item .item-meta {
display: flex;
color: #606266;
font-size: 14px;
margin-bottom: 5px;
padding: 4px 0;
}
.table-list-container .table-list-item .meta-item {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
}
.table-list-container .table-list-item .meta-item i {
font-size: 14px;
color: #909399;
width: 16px;
text-align: center;
}
.table-list-container .table-list-item .item-content {
color: #606266;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 1.5;
}
.table-list-container .table-list-item .item-footer {
display: flex;
justify-content: space-between;
margin-top: 12px;
padding-top: 8px;
border-top: 1px dashed #eaecef;
color: #909399;
font-size: 13px;
}
.table-list-container .table-list-item .item-actions {
display: flex;
column-gap: 20px;
justify-content: end;
margin-top: 15px;
padding-top: 12px;
border-top: 1px solid #eaecef;
}
.table-list-container .table-list-item .action-btn {
display: flex;
align-items: center;
justify-content: end;
font-size: 14px;
color: var(--color-primary);
padding: 4px 0;
}
.table-list-container .table-list-item .action-btn i {
margin-right: 6px;
font-size: 16px;
}
.table-list-container .table-list-item .action-btn.delete {
color: #ff0000;
}
.table-list-container .table-list-item .action-btn.review {
color: #67c23a;
}
.table-list-container .empty-state {
text-align: center;
padding: 60px 20px;
color: #909399;
}
.table-list-container .empty-state i {
font-size: 60px;
margin-bottom: 16px;
color: #dcdee0;
}
.table-list-container .empty-state p {
margin-top: 10px;
font-size: 14px;
}
</style>