273 lines
6.9 KiB
Vue
273 lines
6.9 KiB
Vue
<template>
|
||
<view class="list u-p-b-20 u-p-l-20 u-p-r-20" ref="tableRef">
|
||
<view class="list-box">
|
||
<SwipeItem :list="list" :buttons="options" @action="actionClick" ref="swipeItem" :marginB="20">
|
||
<template v-slot="{ item }">
|
||
<view class="item" @tap.stop="goDetail(item)">
|
||
<view class="item-content">
|
||
<!-- 左侧信息区 -->
|
||
<view class="item-left">
|
||
<!-- 单号 + 普通标签（核心修改区域） -->
|
||
<view class="item-row item-header">
|
||
<!-- 新增：普通标签 -->
|
||
<view class="flow-tag">单号</view>
|
||
<text class="content unit-name">{{ item.billNo }}</text>
|
||
</view>
|
||
<view class="item-row">
|
||
<text class="label">申请单位:</text>
|
||
<text class="content unit-name">{{ item.applyDepName }}</text>
|
||
</view>
|
||
<view class="item-row">
|
||
<text class="label">申请人员:</text>
|
||
<text class="content">{{ item.applyUser}}</text>
|
||
</view>
|
||
<view class="item-row">
|
||
<text class="label">创建时间:</text>
|
||
<text class="content">{{ formatTime(item.create_time) }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 右侧状态图 -->
|
||
<view class="item-right">
|
||
<image
|
||
v-if="item.approveStatusName == '未审核'"
|
||
src="../../img/UNAPPROVED.png"
|
||
mode="widthFix"
|
||
class="status-img" />
|
||
<image
|
||
v-if="item.approveStatusName == '审批中'"
|
||
src="../../img/APPROVING.png"
|
||
mode="widthFix"
|
||
class="status-img" />
|
||
<image
|
||
v-if="item.approveStatusName == '已审批'"
|
||
src="../../img/APPROVED.png"
|
||
mode="widthFix"
|
||
class="status-img" />
|
||
<image
|
||
v-if="item.approveStatusName == '已驳回'"
|
||
src="../../img/REJECTED.png"
|
||
mode="widthFix"
|
||
class="status-img" />
|
||
<image
|
||
v-if="item.approveStatusName == '已作废'"
|
||
src="../../img/INVALID.png"
|
||
mode="widthFix"
|
||
class="status-img" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</SwipeItem>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// 脚本部分无需修改，保持原逻辑
|
||
import { useDefineSetting } from '@/utils/useDefineSetting';
|
||
import tableCell from '../tableCell.vue'
|
||
import SwipeItem from "@/components/SwipeItem/index"
|
||
export default {
|
||
emits: ['selectCheckbox', 'handleClick', 'handleMoreClick', 'goDetail', 'relationFormClick', 'update:modelValue'],
|
||
components: {
|
||
tableCell,
|
||
SwipeItem
|
||
},
|
||
props: [
|
||
'config',
|
||
'list',
|
||
'actionOptions',
|
||
'showSelect',
|
||
'checkedAll',
|
||
'modelValue',
|
||
'isMoreBtn',
|
||
'customBtnsList'
|
||
],
|
||
data() {
|
||
return {
|
||
selectData: [],
|
||
useDefine: useDefineSetting()
|
||
}
|
||
},
|
||
watch: {
|
||
checkedAll: {
|
||
handler(val) {
|
||
this.handleCheckAll()
|
||
},
|
||
immediate: true
|
||
}
|
||
},
|
||
computed: {
|
||
options() {
|
||
if (!this.customBtnsList?.length) return this.actionOptions;
|
||
return [{
|
||
text: this.$t('common.moreText'),
|
||
value: 'more',
|
||
style: {
|
||
backgroundColor: '#007aff'
|
||
}
|
||
},
|
||
...this.actionOptions,
|
||
];
|
||
},
|
||
showCheckbox() {
|
||
return this.showSelect
|
||
}
|
||
},
|
||
methods: {
|
||
formatTime(timestamp) {
|
||
if (!timestamp) return '-';
|
||
const date = new Date(timestamp);
|
||
const year = date.getFullYear();
|
||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||
const day = String(date.getDate()).padStart(2, '0');
|
||
const hours = String(date.getHours()).padStart(2, '0');
|
||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||
const seconds = String(date.getSeconds()).padStart(2, '0');
|
||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||
},
|
||
getStatusClass(statusName) {
|
||
switch (statusName) {
|
||
case '已审批':
|
||
return 'status-approved';
|
||
case '未审核':
|
||
return 'status-unchecked';
|
||
default:
|
||
return 'status-other';
|
||
}
|
||
},
|
||
relationFormClick(item, column) {
|
||
this.$emit('relationFormClick', item, column)
|
||
},
|
||
goDetail(item) {
|
||
this.$emit('goDetail', item)
|
||
},
|
||
actionClick(data) {
|
||
const { index, value } = data
|
||
if (value === 'remove') return this.$emit('handleClick', index)
|
||
if (value === 'more') return this.$emit('handleMoreClick', index)
|
||
},
|
||
checkboxChange(e, item) {
|
||
const isSelected = e.value;
|
||
const selectedItemsSet = new Set(this.selectData.map(selectedItem => selectedItem.id));
|
||
if (isSelected) {
|
||
selectedItemsSet.add(item.id);
|
||
} else {
|
||
selectedItemsSet.delete(item.id);
|
||
}
|
||
this.selectData = [...selectedItemsSet.values()].map(id => {
|
||
return this.list.find(listItem => listItem.id === id);
|
||
});
|
||
this.$emit('selectCheckbox', this.selectData);
|
||
},
|
||
handleCheckAll() {
|
||
this.selectData = []
|
||
if (this.checkedAll) this.selectData = this.list.filter(o => o.checked)
|
||
this.$emit('selectCheckbox', this.selectData);
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.list {
|
||
background-color: #f0f2f6;
|
||
.list-box {
|
||
.item {
|
||
background: #fff;
|
||
border-radius: 12rpx;
|
||
margin-bottom: 20rpx;
|
||
padding: 20rpx;
|
||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
||
position: relative;
|
||
|
||
.item-content {
|
||
display: flex;
|
||
align-items: flex-start; /* 改为顶部对齐，避免标签错位 */
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.item-left {
|
||
flex: 1;
|
||
}
|
||
|
||
.item-row {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 8rpx; /* 调整行间距 */
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
.label {
|
||
font-size: 26rpx;
|
||
color: #909399;
|
||
min-width: 140rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
.content {
|
||
font-size: 28rpx;
|
||
color: #303133;
|
||
}
|
||
}
|
||
|
||
// 单号+标签的布局样式（核心新增）
|
||
.item-header {
|
||
align-items: center;
|
||
gap: 10rpx; // 标签、单号、单号值之间的间距
|
||
// 普通标签样式
|
||
.flow-tag {
|
||
font-size: 22rpx;
|
||
color: #1677ff;
|
||
background: #e8f3ff;
|
||
padding: 2rpx 8rpx;
|
||
border-radius: 4rpx;
|
||
font-weight: 500;
|
||
}
|
||
// 单号文本样式
|
||
.bill-label {
|
||
font-size: 26rpx;
|
||
color: #303133;
|
||
}
|
||
}
|
||
|
||
// 流程名称样式（对应图中的“管理员的动火审批流程”）
|
||
.flow-name {
|
||
font-size: 28rpx;
|
||
color: #1E293B;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.status-tag {
|
||
padding: 4rpx 16rpx;
|
||
border-radius: 20rpx;
|
||
font-size: 26rpx;
|
||
color: #fff;
|
||
&.status-approved {
|
||
background-color: #67c23a;
|
||
}
|
||
&.status-unchecked {
|
||
background-color: #e6a23c;
|
||
}
|
||
&.status-other {
|
||
background-color: #909399;
|
||
}
|
||
}
|
||
|
||
// 右侧状态图样式
|
||
.item-right {
|
||
width: 100rpx;
|
||
height: 160rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.status-img {
|
||
width: 100%;
|
||
height: auto;
|
||
object-fit: contain;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |