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>
|