161 lines
3.4 KiB
Vue
161 lines
3.4 KiB
Vue
<template>
|
||
<u-popup v-model="visible" mode="center" width="94%" border-radius="14" :closeable="true">
|
||
<view class="popupWrap">
|
||
<view class="popupTitle">细码</view>
|
||
<view v-if="!list.length" class="emptyTip">暂无细码数据</view>
|
||
<scroll-view v-else scroll-x class="tableScroll">
|
||
<view class="fineTable" :style="{ width: tableWidth }">
|
||
<view class="tableRow tableHead">
|
||
<view
|
||
v-for="col in columns"
|
||
:key="col.key"
|
||
class="tableCell headCell"
|
||
:style="cellStyle(col)"
|
||
>{{ col.label }}</view>
|
||
</view>
|
||
<view v-for="(row, rowIndex) in tableRows" :key="rowIndex" class="tableRow">
|
||
<view
|
||
v-for="col in columns"
|
||
:key="col.key"
|
||
class="tableCell"
|
||
:class="{ actionCell: col.key === 'action' && !readonly }"
|
||
:style="cellStyle(col)"
|
||
@click="onCellTap(col.key, rowIndex)"
|
||
>{{ row[col.key] }}</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view v-if="!readonly && list.length" class="tableTip">点击「操作」列删除，将调用扫码删除接口</view>
|
||
</view>
|
||
</u-popup>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getFineCodeTableColumns,
|
||
getFineCodeTableWidth,
|
||
mapFineCodeTableRows,
|
||
} from '@/common/storeFabricBusinessOut';
|
||
|
||
export default {
|
||
props: {
|
||
show: { type: Boolean, default: false },
|
||
list: { type: Array, default: () => [] },
|
||
readonly: { type: Boolean, default: false },
|
||
},
|
||
computed: {
|
||
visible: {
|
||
get() { return this.show; },
|
||
set(val) { this.$emit('update:show', val); },
|
||
},
|
||
columns() {
|
||
return getFineCodeTableColumns(this.readonly);
|
||
},
|
||
tableRows() {
|
||
return mapFineCodeTableRows(this.list, this.readonly);
|
||
},
|
||
tableWidth() {
|
||
return getFineCodeTableWidth(this.columns);
|
||
},
|
||
tableScrollHeight() {
|
||
const rowHeight = 68;
|
||
const headerHeight = 68;
|
||
const total = headerHeight + this.list.length * rowHeight;
|
||
return `${Math.min(Math.max(total, 136), 520)}rpx`;
|
||
},
|
||
},
|
||
methods: {
|
||
cellStyle(col) {
|
||
return {
|
||
width: `${col.width}rpx`,
|
||
minWidth: `${col.width}rpx`,
|
||
maxWidth: `${col.width}rpx`,
|
||
};
|
||
},
|
||
onCellTap(key, rowIndex) {
|
||
if (this.readonly || key !== 'action') return;
|
||
const item = this.list[rowIndex];
|
||
if (item) this.$emit('delete', item);
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.popupWrap {
|
||
padding: 24rpx 16rpx 30rpx;
|
||
max-height: 80vh;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
}
|
||
.popupTitle {
|
||
font-size: 34rpx;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
margin-bottom: 20rpx;
|
||
color: #333;
|
||
flex-shrink: 0;
|
||
}
|
||
.emptyTip {
|
||
text-align: center;
|
||
color: #999;
|
||
padding: 40rpx 0;
|
||
font-size: 30rpx;
|
||
}
|
||
.tableScroll {
|
||
width: 100%;
|
||
flex-shrink: 0;
|
||
}
|
||
.fineTable {
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
border: 1rpx solid #e1e1e1;
|
||
box-sizing: border-box;
|
||
}
|
||
.tableRow {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
border-bottom: 1rpx solid #e1e1e1;
|
||
}
|
||
.tableRow:last-child {
|
||
border-bottom: none;
|
||
}
|
||
.tableHead {
|
||
background: #f1f1f1;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 2;
|
||
}
|
||
.tableCell {
|
||
flex-shrink: 0;
|
||
padding: 16rpx 10rpx;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
text-align: center;
|
||
border-right: 1rpx solid #e1e1e1;
|
||
box-sizing: border-box;
|
||
word-break: break-all;
|
||
white-space: normal;
|
||
}
|
||
.tableCell:last-child {
|
||
border-right: none;
|
||
}
|
||
.headCell {
|
||
font-weight: bold;
|
||
color: #3e3e3e;
|
||
}
|
||
.actionCell {
|
||
color: #f5222d;
|
||
}
|
||
.tableTip {
|
||
margin-top: 16rpx;
|
||
font-size: 26rpx;
|
||
color: #999;
|
||
text-align: center;
|
||
flex-shrink: 0;
|
||
}
|
||
</style>
|