isoftstone/jnpf_app
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 新增需求

Browse Source
This commit is contained in:
caijun
2026-01-20 18:07:35 +08:00
parent 9f5b2a92c4
commit 4243e1213f
26 changed files with 2837 additions and 936 deletions
Download Patch File Download Diff File Expand all files Collapse all files

292
pages/apply/dynamicModel/components/list/list.vue
View File

@@ -3,69 +3,58 @@
<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)" style="border: 1px solid #fff;">
<view class="u-m-b-10 checkbox_box" v-if="showCheckbox">
<u-checkbox @change="checkboxChange($event,item)" v-model="item.checked" class="checkbox"
@tap.stop shape="circle"></u-checkbox>
</view>
<view class="item-cell" v-for="(column,i) in columnList" :key="i">
<template v-if="column.jnpfKey != 'table'">
<text class="item-cell-label">{{column.label}}:</text>
<text class="item-cell-content"
v-if="['calculate','inputNumber'].includes(column.jnpfKey)">
{{toThousands(item[column.prop],column)}}
</text>
<text class="item-cell-content text-primary"
v-else-if="column.jnpfKey == 'relationForm'"
@click.stop="relationFormClick(item,column)">
{{item[column.prop]}}
</text>
<view class="item-cell-content" v-else-if="column.jnpfKey == 'sign'">
<JnpfSign v-model="item[column.prop]" align="left" detailed />
<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-cell-content" v-else-if="column.jnpfKey == 'signature'">
<JnpfSignature v-model="item[column.prop]" align="left" detailed />
<view class="item-row">
<text class="label">申请单位:</text>
<text class="content unit-name">{{ item.applyDepName }}</text>
</view>
<view class="item-cell-content" v-else-if="column.jnpfKey == 'uploadImg'" @click.stop>
<JnpfUploadImg v-model="item[column.prop]" detailed simple
v-if="item[column.prop]&&item[column.prop].length" />
<view class="item-row">
<text class="label">申请人员:</text>
<text class="content">{{ item.applyUser}}</text>
</view>
<!-- #ifndef APP-HARMONY -->
<view class="item-cell-content" v-else-if="column.jnpfKey == 'uploadFile'" @click.stop>
<JnpfUploadFile v-model="item[column.prop]" detailed
v-if="item[column.prop]&&item[column.prop].length" align="left" />
<view class="item-row">
<text class="label">创建时间:</text>
<text class="content">{{ formatTime(item.create_time) }}</text>
</view>
<!-- #endif -->
<!-- #ifdef APP-HARMONY -->
<view class="item-cell-content" v-else-if="column.jnpfKey == 'uploadFile'" @click.stop>
<JnpfUploadFileH v-model="item[column.prop]" detailed
v-if="item[column.prop]&&item[column.prop].length" align="left" />
</view>
<!-- #endif -->
<view class="item-cell-content" v-else-if="column.jnpfKey == 'rate'">
<JnpfRate v-model="item[column.prop]" :max="column.count"
:allowHalf="column.allowHalf" disabled />
</view>
<view class="item-cell-content item-cell-slider" v-else-if="column.jnpfKey == 'slider'">
<JnpfSlider v-model="item[column.prop]" :min="column.min" :max="column.max"
:step="column.step" disabled />
</view>
<view class="item-cell-content" v-else-if="column.jnpfKey == 'input'">
<JnpfInput v-model="item[column.prop]" detailed showOverflow
:useMask="column.useMask" :maskConfig="column.maskConfig" align='left' />
</view>
<text class="item-cell-content" v-else>{{item[column.prop]}}</text>
</template>
<tableCell v-else @click.stop class="tableCell" ref="tableCell" :label="column.label"
:childList="item[column.prop]" :children="column.children" :pageLen="3"
@cRelationForm="relationFormClick" :key="item.id+i">
</tableCell>
</view>
<view class="item-cell" v-if="config.enableFlow==1">
<text class="item-cell-label">审批状态:</text>
<text :style="{color:useDefine.getFlowStatusColor(item.flowState)}">
{{useDefine.getFlowStatusContent(item.flowState)}}
</text>
</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>
@@ -75,9 +64,8 @@
</template>
<script>
import {
useDefineSetting
} from '@/utils/useDefineSetting';
// 脚本部分无需修改，保持原逻辑
import { useDefineSetting } from '@/utils/useDefineSetting';
import tableCell from '../tableCell.vue'
import SwipeItem from "@/components/SwipeItem/index"
export default {
@@ -86,7 +74,14 @@
tableCell,
SwipeItem
},
props: ['config', 'list', 'columnList', 'actionOptions', 'showSelect', 'checkedAll', 'modelValue', 'isMoreBtn',
props: [
'config',
'list',
'actionOptions',
'showSelect',
'checkedAll',
'modelValue',
'isMoreBtn',
'customBtnsList'
],
data() {
@@ -121,28 +116,41 @@
}
},
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
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 => {
return selectedItem.id;
}));
const selectedItemsSet = new Set(this.selectData.map(selectedItem => selectedItem.id));
if (isSelected) {
selectedItemsSet.add(item.id);
} else {
@@ -153,67 +161,113 @@
});
this.$emit('selectCheckbox', this.selectData);
},
/* 全部选中 */
handleCheckAll() {
this.selectData = []
if (this.checkedAll) this.selectData = this.list.filter(o => o.checked)
this.$emit('selectCheckbox', this.selectData)
},
/* 千分位操作 */
toThousands(val, column) {
if (val) {
let valList = val.toString().split('.')
let num = Number(valList[0])
let newVal = column.thousands ? num.toLocaleString() : num
return valList[1] ? newVal + '.' + valList[1] : newVal
} else {
return val
}
this.$emit('selectCheckbox', this.selectData);
}
}
}
</script>
<style lang="scss">
<style lang="scss" scoped>
.list {
.list_box {
background-color: #f0f2f6;
.list-box {
.item {
padding: 0;
background: #fff;
border-radius: 12rpx;
margin-bottom: 20rpx;
padding: 20rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
position: relative;
.checkbox_box {
width: 60rpx;
height: 46rpx;
position: relative;
.item-content {
display: flex;
align-items: flex-start; /* 改为顶部对齐，避免标签错位 */
justify-content: space-between;
}
.checkbox {
position: absolute;
top: 6rpx;
left: 8rpx;
z-index: 9999;
.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;
}
}
}
}
}
.right-option-box {
display: flex;
width: max-content;
.right-option {
width: 144rpx;
height: 100%;
font-size: 16px;
color: #fff;
background-color: #dd524d;
display: flex;
align-items: center;
justify-content: center;
}
.more-option {
background-color: #1890ff;
}
}
</style>