feat: 新增需求
This commit is contained in:
caijun
1051
pages/apply/dynamicModelList/components/list/index.vue
Normal file
1051
pages/apply/dynamicModelList/components/list/index.vue
Normal file
File diff suppressed because it is too large
Load Diff
273
pages/apply/dynamicModelList/components/list/list.vue
Normal file
273
pages/apply/dynamicModelList/components/list/list.vue
Normal file
@@ -0,0 +1,273 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user