From d68b036a3b3c67273b8effa3c9925ef3869a91ba Mon Sep 17 00:00:00 2001
From: haoxuan <haoxuan>
Date: 星期三, 07 二月 2024 13:56:50 +0800
Subject: [PATCH] wms项目 wms系统参数设置的页面开发+路由+是否显示表头配置
---
src/components/makepager/TableCommonView.vue | 159 ++++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 140 insertions(+), 19 deletions(-)
diff --git a/src/components/makepager/TableCommonView.vue b/src/components/makepager/TableCommonView.vue
index 1627f0d..d49367e 100644
--- a/src/components/makepager/TableCommonView.vue
+++ b/src/components/makepager/TableCommonView.vue
@@ -1,6 +1,6 @@
<!-- eslint-disable vue/no-use-v-if-with-v-for -->
<template>
- <div class="table-view" v-loading="loading">
+ <div :class="{ 'table-view': true, table_height: !showSummary }" v-loading="loading">
<el-table
ref="table"
border
@@ -19,6 +19,8 @@
:default-expand-all="tableList.isDefaultExpandAll"
:tree-props="{ children: 'child', hasChildren: 'hasChildren' }"
:span-method="objectSpanMethod"
+ :summary-method="getSummaries"
+ :show-summary="showSummary"
>
<el-table-column v-if="tableList.selectBox" type="selection" width="40"> </el-table-column>
<el-table-column v-if="tableList.selectIndex" type="index" label="搴忓彿" width="50"> </el-table-column>
@@ -31,25 +33,24 @@
:min-width="item.min"
show-overflow-tooltip
:sortable="item.sortable"
+ :align="item.textAlign"
v-if="item.isShowColumn"
>
<template slot-scope="scope">
<span v-if="item.price">{{ "锟�" + number_format(scope.row[item.prop], 2, ".", ",") }}</span>
- <!-- 甯︾偣鐨勫姛鑳� -->
+ <!-- 鐘舵�佹樉绀� -->
<div v-else-if="item.status">
- <!-- <span v-if="scope.row.status == '瀹屾垚'" class="Badge greenSlot"></span>
- <span v-else-if="scope.row.status == '鑽夌'" class="Badge redSlot"></span>
- <span v-else-if="scope.row.status == '灏辩华'" class="Badge redSlot"></span>
- <span v-else-if="scope.row.status == '宸插彇娑�'" class="Badge yellowSlot"></span> -->
<span
class="Badge"
:class="{
- greenSlot: scope.row.status == '瀹屾垚',
- redSlot: scope.row.status == '宸插彇娑�',
- blueSlot: scope.row.status == '灏辩华',
- graySlot: scope.row.status == '鑽夌'
+ greenSlot: scope.row.status == '4'||scope.row.status == '瀹屾垚',
+ redSlot: scope.row.status == '5',
+ blueSlot: scope.row.status == '3'||scope.row.status == '灏辩华',
+ graySlot: scope.row.status == '1',
}"
- >{{ scope.row[item.prop] }}</span
+ >{{
+ item.isCallMethod ? item.getCallMethod(scope.row[item.prop], scope.row) : scope.row[item.prop]
+ }}</span
>
</div>
<!-- 璋冪敤鏂规硶鏄剧ず鏂囧瓧 -->
@@ -59,15 +60,23 @@
<!-- 灏忎簬褰撳墠鏃堕棿鏄剧ず涓嶅悓棰滆壊 -->
<span
v-else-if="item.date"
- :style="{ color: new Date().getTime() > new Date(scope.row[item.prop]).getTime() ? '#D23F3A' : '#606266' }"
+ :style="{
+ color: new Date().getTime() > new Date(scope.row[item.prop]).getTime() ? '#D23F3A' : '#606266'
+ }"
>{{ timeAgo(scope.row[item.prop]) }}</span
>
+ <div v-else-if="item.conversion">
+ <p class="exceed_width">{{ item.getStatus(scope.row[item.prop]) }}</p>
+ </div>
<span
v-else-if="item.isClick && scope.row[item.prop]"
:class="item.className ? item.className : 'sel-name'"
@click="selCommonClick(scope.row)"
>{{ scope.row[item.prop] }}</span
>
+ <span v-else-if="item.propType == 'mulitple'">
+ {{ scope.row[item.prop][item.propTwo] ? scope.row[item.prop][item.propTwo] : "--" }}
+ </span>
<span :class="item.className ? item.className : ''" v-else>{{
scope.row[item.prop] ? scope.row[item.prop] : scope.row[item.prop] === 0 ? scope.row[item.prop] : "--"
}}</span>
@@ -79,8 +88,8 @@
</div>
</el-table>
<div class="overSpread1" v-show="iscolopen" @click="onMaskClick"></div>
- <div class="styleBtn">
- <i @click="checkcol()" class="label">...</i>
+ <div v-if="showCheckcol" class="styleBtn">
+ <i @click="checkcol()" class="label" v-if="colOpenShow">...</i>
<el-checkbox-group v-model="showcolList" v-show="iscolopen" class="checkbox-group" @change="selCeckBoxList">
<el-checkbox v-for="item in tableList.allcol" :label="item" :key="item">{{ item }} </el-checkbox>
</el-checkbox-group>
@@ -102,11 +111,12 @@
showStyle: true,
tableInfomation: [], // 鎺ュ彛杩斿洖鏁版嵁
showcol: [],
+ countcol: [],
allcol: [],
highlight: false,
tableColumn: [
// table琛ㄥ崟
- { label: "", prop: "", min: 200, tooltip: true }
+ { label: "", prop: "", min: 200, tooltip: true,textAlign:"center"}
]
}
},
@@ -133,7 +143,20 @@
default: () => {
return {}
}
- }
+ },
+ showCheckcol: {
+ type: Boolean,
+ default: true
+ },
+ showSummary: {
+ type: Boolean,
+ default: false
+ },
+ // 鏄惁鍙互閰嶇疆鍒楄〃 琛ㄥご
+ colOpenShow: {
+ type: Boolean,
+ default: true,
+ },
},
data() {
return {
@@ -201,6 +224,41 @@
},
timeAgo(val) {
return timeago(val)
+ },
+ //姹傚拰
+ getSummaries(param) {
+ if (this.tableList.countcol && this.tableList.countcol.length > 0) {
+ const { columns, data } = param
+ const sums = []
+ columns.forEach((column, index) => {
+ if (index === 0) {
+ sums[index] = " "
+ return
+ }
+ this.tableList.countcol.forEach((countcols) => {
+ if (column.label === countcols) {
+ const values = data.map((item) => Number(item[column.property]))
+ if (!values.every((value) => isNaN(value))) {
+ sums[index] = values.reduce((prev, curr) => {
+ const value = Number(curr)
+ if (!isNaN(value)) {
+ return prev + curr
+ } else {
+ return prev
+ }
+ }, 0)
+ let unitIndex = this.tableList.tableColumn.findIndex(obj => obj.label === column.label);
+ sums[index]=this.tableList.tableColumn[unitIndex].unit+sums[index]
+ } else {
+ sums[index] = ""
+ }
+ } else {
+ return
+ }
+ })
+ })
+ return sums
+ }
}
}
}
@@ -208,6 +266,12 @@
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
+.table_height {
+ height: 100%;
+}
+.el-table__body-wrapper {
+ height: 100%;
+}
.table-view {
position: relative;
height: 100%;
@@ -241,16 +305,18 @@
.styleBtn {
position: absolute;
width: 30px;
- height: 48px;
+ height: 35px;
// line-height: 26px;
- background: #f1f3f8;
+ background: transparent;
border-top-right-radius: 8px;
top: 0px;
right: 2px;
+ display: flex;
+ align-items: center;
// z-index: 9999;
.label {
position: absolute;
- top: 12px;
+ top: 6px;
font-size: 20px;
cursor: pointer;
color: #000;
@@ -287,6 +353,61 @@
border-top-left-radius: 12px;
border-top-right-radius: 12px;
overflow: auto;
+ .exceed_width{
+ width: 100%;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
}
}
+
+::v-deep .el-table .cell {
+ font-size: 12px;
+ line-height: 17px;
+ font-family: PingFangSC;
+ color: rgba(0, 0, 0, 0.9);
+ .el-button--text {
+ width: auto;
+ height: auto;
+ font-family: PingFangSC-Medium, sans-serif;
+ }
+}
+::v-deep .el-table .el-table__cell {
+ padding: 6px 0 !important;
+ height: 35px;
+ text-align: center;
+}
+
+::v-deep {
+ .el-table .cell .el-button--text.el-button--small {
+ padding: 4px 0;
+ }
+ .el-table .el-table__cell {
+ padding: 6px 0 !important;
+ height: 35px;
+ text-align: center;
+ }
+ .el-table__body-wrapper{
+ height: unset !important;
+ }
+ .el-table__cell.is-left{
+ text-align: left !important;
+ }
+ .el-table__cell.is-right{
+ text-align: right !important;
+ }
+}
+.overSpread1 {
+ width: 100%;
+ height: 100%;
+ position: fixed;
+ top: 0;
+ left: 0;
+ background: rgba(0, 0, 0, 0);
+ z-index: 10;
+}
+.el-table__cell{
+ text-align: unset !important;
+}
</style>
--
Gitblit v1.8.0