bonus
/
bonus-material-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

出库左滑样式调整

This commit is contained in:
bonus 2024-12-23 17:58:21 +08:00
parent 8056285ea6
commit ebfdf83d74
4 changed files with 365 additions and 205 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
nativeplugins/Mpaas-Scan/ios/meta.config Normal file
View File

File diff suppressed because one or more lines are too long

128
src/pages/picking/outbound/code-outbound.vue
View File

@ -1,24 +1,31 @@
<template>
<!-- 编码出库-->
<view class="page-container">
<view class="table-list-item">
<uni-forms :model="formData" label-width="100" :border="true">
<uni-forms-item label="领料单位：" name="leaseUnit">
<span class="form-view">{{ queryParams.leaseUnit }}</span>
</uni-forms-item>
<uni-forms-item label="领料工程：" name="leaseProject">
<span class="form-view">{{ queryParams.leaseProject }}</span>
</uni-forms-item>
<uni-forms-item label="物资类型：" name="maTypeName">
<span class="form-view">{{ queryParams.maTypeName }}</span>
</uni-forms-item>
<uni-forms-item label="规格型号：" name="typeName">
<span class="form-view">{{ queryParams.typeName }}</span>
</uni-forms-item>
<uni-forms-item label="待出库数量：" name="maxNum">
<span class="form-view">{{ maxNum }}</span>
</uni-forms-item>
</uni-forms>
<!-- 表单信息区域 -->
<view class="form-section">
<view class="section-header" @tap="toggleForm">
<text class="title">表单信息</text>
<text class="toggle-icon" :class="{ 'is-expanded': isExpanded }">›</text>
</view>
<view class="form-content" :class="{ 'is-expanded': isExpanded }">
<uni-forms :model="formData" label-width="100" :border="true">
<uni-forms-item label="领料单位：" name="leaseUnit">
<span class="form-view">{{ queryParams.leaseUnit }}</span>
</uni-forms-item>
<uni-forms-item label="领料工程：" name="leaseProject">
<span class="form-view">{{ queryParams.leaseProject }}</span>
</uni-forms-item>
<uni-forms-item label="物资类型：" name="maTypeName">
<span class="form-view">{{ queryParams.maTypeName }}</span>
</uni-forms-item>
<uni-forms-item label="规格型号：" name="typeName">
<span class="form-view">{{ queryParams.typeName }}</span>
</uni-forms-item>
<uni-forms-item label="待出库数量：" name="maxNum">
<span class="form-view">{{ maxNum }}</span>
</uni-forms-item>
</uni-forms>
</view>
</view>
<view class="table-list-item">
@ -137,6 +144,14 @@ const queryCodeParams = ref({
maCode: '',
})
// 控制表单展开收起
const isExpanded = ref(true)
// 切换表单展开状态
const toggleForm = () => {
isExpanded.value = !isExpanded.value
}
// 标准箱识别
const boxScan = async () => {
boxCode.value=""
@ -181,7 +196,7 @@ const boxScan = async () => {
}
}
// 标准箱出库确认
// 标准箱出库<EFBFBD><EFBFBD>认
const boxOutBound = async () => {
// 解构所需要的数据
const { typeId, parentId } = queryParams.value
@ -277,7 +292,7 @@ const onScrollTolower = debounce(() => {
}
}, 500)
// 判断数据是否加载完毕
// 判断数<EFBFBD><EFBFBD>是否加载完毕
const finish = computed(() => {
if (total.value === codeDeviceList.value.length) return true
})
@ -546,4 +561,77 @@ onUnmounted(() => {
padding: 32rpx 0;
letter-spacing: 1rpx;
}
.form-section {
background: #fff;
border-radius: 20rpx;
margin-bottom: 24rpx;
overflow: hidden;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
// 头部样式
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24rpx 32rpx;
background: #fff;
cursor: pointer;
transition: all 0.3s ease;
&:active {
background: #f7f8fa;
}
.title {
font-size: 32rpx;
font-weight: 600;
color: #262626;
}
.toggle-icon {
font-size: 40rpx;
color: #8c8c8c;
transform: rotate(90deg);
transition: transform 0.3s ease;
display: inline-block;
&.is-expanded {
transform: rotate(-90deg);
}
}
}
// 表单内容区域
.form-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
&.is-expanded {
max-height: 1000rpx; // 根据实际内容调整
}
:deep(.uni-forms) {
padding: 0 32rpx 32rpx;
}
:deep(.uni-forms-item) {
margin-bottom: 24rpx;
&:last-child {
margin-bottom: 0;
}
.uni-forms-item__label {
color: #8c8c8c;
}
.form-view {
color: #262626;
font-size: 28rpx;
}
}
}
}
</style>

182
src/pages/picking/outbound/details.vue
View File

@ -312,147 +312,78 @@ const onClick = (e, item) => {
// 列表项样式
.table-list-item {
margin: 24rpx 0;
padding: 0;
background-color: #fff;
background: #fff;
border-radius: 20rpx;
padding: 24rpx;
margin-bottom: 24rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
transition: all 0.3s ease;
overflow: hidden;
position: relative;
// 滑动操作区域样式
.swipe-action {
:deep(.uni-swipe) {
width: 100% !important;
background-color: #fff;
}
:deep(.uni-swipe_content) {
background: #fff;
border-radius: 20rpx;
padding: 32rpx;
overflow: hidden;
}
:deep(.uni-swipe_right) {
height: 100%;
display: flex;
align-items: center;
}
}
// 滑动按钮样式
:deep(.uni-swipe_button-group) {
height: 100%;
display: flex;
align-items: stretch;
.uni-swipe_button {
padding: 0 50rpx;
font-size: 28rpx;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
height: auto;
margin: 0;
min-width: 120rpx;
opacity: 0;
transition: opacity 0.3s;
&:nth-child(1) {
background: linear-gradient(135deg, #4b8eff 0%, #3784fb 100%);
box-shadow: 0 4rpx 16rpx rgba(55, 132, 251, 0.2);
border-radius: 0;
}
&:nth-child(2) {
background: linear-gradient(135deg, #ff4d4f 0%, #ed6042 100%);
box-shadow: 0 4rpx 16rpx rgba(237, 96, 66, 0.2);
border-radius: 0;
}
&:active {
opacity: 0.9;
transform: scale(0.98);
}
}
}
&:active {
transform: scale(0.985);
background-color: #fafbfc;
transform: scale(0.99);
opacity: 0.9;
}
// 标题栏
.title {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24rpx;
span {
.main-title {
font-size: 32rpx;
font-weight: 600;
color: #3784fb;
background: linear-gradient(90deg, #3784fb, #4b8eff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: #262626;
}
// 状态标签
.status-tag {
:deep(.uni-tag) {
padding: 8rpx 24rpx;
border-radius: 8rpx;
font-size: 24rpx;
font-weight: 500;
border: none;
&[type="warning"] {
color: #fa8c16;
background: rgba(250, 140, 22, 0.1);
}
&[type="success"] {
color: #52c41a;
background: rgba(82, 196, 26, 0.1);
}
}
}
}
// 分隔线
.line {
margin: 24rpx 0;
height: 2rpx;
background: linear-gradient(90deg,
rgba(232, 232, 232, 0) 0%,
rgba(232, 232, 232, 1) 50%,
rgba(232, 232, 232, 0) 100%
);
margin: 24rpx 0;
}
:deep(.uni-row) {
// 内容行
.uni-row {
margin-bottom: 20rpx;
&:last-child {
margin-bottom: 0;
}
font-size: 28rpx;
.uni-col-8 {
.uni-col-6 {
color: #8c8c8c;
font-size: 28rpx;
font-weight: 500;
}
.cont {
color: #262626;
font-size: 28rpx;
font-weight: 500;
line-height: 1.8;
text-align: right;
}
}
// 标签样式
:deep(.uni-tag) {
padding: 6rpx 20rpx;
border-radius: 8rpx;
font-size: 26rpx;
font-weight: 600;
margin: 0;
&[type="warning"] {
color: #fa8c16;
background-color: rgba(250, 140, 22, 0.1);
border: 2rpx solid rgba(250, 140, 22, 0.2);
}
&[type="success"] {
color: #52c41a;
background-color: rgba(82, 196, 26, 0.1);
border: 2rpx solid rgba(82, 196, 26, 0.2);
}
}
}
}
@ -464,4 +395,47 @@ const onClick = (e, item) => {
padding: 32rpx 0;
letter-spacing: 1rpx;
}
// 优化滑动区域样式
:deep(.uni-swipe_action) {
border-radius: 20rpx;
overflow: hidden;
.uni-swipe_content {
margin: 0 !important;
padding: 0;
background-color: #fff;
}
.uni-swipe_button-group {
height: 100%;
.uni-swipe_button {
height: 100%;
padding: 0 40rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
font-weight: 600;
color: #fff;
border: none;
writing-mode: vertical-rl;
// 查看按钮
&:nth-child(1) {
background: linear-gradient(to bottom, #3ad980, #34C759) !important;
}
// 出库按钮
&:nth-child(2) {
background: linear-gradient(to bottom, #3b95ff, #007AFF) !important;
}
&:active {
opacity: 0.85;
}
}
}
}
</style>

236
src/pages/repair/testedInBound/details.vue
View File

@ -39,85 +39,91 @@
<scroll-view scroll-y class="scroll-container">
<view v-for="(item, index) in detailsList"
:key="index" class="table-list-item"
@tap="onRepairItem(item)"
>
<div class="title">
<span style="font-size: 15px; font-weight: 800">修试入库</span>
<!-- <span :style="{ color: active == 1 ? '#3784fb' : '#ff4d4f' }">{{active == 1 ? '已完成' : '未完成'}}</span> -->
</div>
<view class="line"></view>
<uni-row :gutter="24">
<uni-col :span="2">
<checkbox-group @change="onChangeChecked(item)">
<label>
<checkbox
color="#409eff"
borderColor="#409eff"
activeBorderColor="#409eff"
:checked="item.isChecked"
style="transform: scale(0.7)"
<uni-swipe-action>
<uni-swipe-action-item
:right-options="options"
@click="onClick($event, item)"
>
<div class="title">
<span style="font-size: 15px; font-weight: 800">修试入库</span>
<!-- <span :style="{ color: active == 1 ? '#3784fb' : '#ff4d4f' }">{{active == 1 ? '已完成' : '未完成'}}</span> -->
</div>
<view class="line"></view>
<uni-row :gutter="24">
<uni-col :span="2">
<checkbox-group @change="onChangeChecked(item)">
<label>
<checkbox
color="#409eff"
borderColor="#409eff"
activeBorderColor="#409eff"
:checked="item.isChecked"
style="transform: scale(0.7)"
/>
</label>
</checkbox-group>
</uni-col>
<uni-col :span="6">物资名称：</uni-col>
<uni-col :span="16">
<view class="cont">{{ item.typeName2 }}</view>
</uni-col>
</uni-row>
<uni-row :gutter="24">
<uni-col :span="2" style="color: transparent">{{ index + 1 }}</uni-col>
<uni-col :span="6">规格型号：</uni-col>
<uni-col :span="16">
<view class="cont">{{ item.typeName }}</view>
</uni-col>
</uni-row>
<uni-row :gutter="24">
<uni-col :span="2" style="color: transparent">{{ index + 1 }}</uni-col>
<uni-col :span="6">维修数量：</uni-col>
<uni-col :span="16">
<view class="cont">{{ item.repairNum }}</view>
</uni-col>
</uni-row>
<uni-row :gutter="24">
<uni-col :span="2" style="color: transparent">{{ index + 1 }}</uni-col>
<uni-col :span="6">已入库数：</uni-col>
<uni-col :span="16">
<view class="cont">{{ item.repairNum }}</view>
</uni-col>
</uni-row>
<uni-row :gutter="24">
<uni-col :span="2" style="color: transparent">{{ index + 1 }}</uni-col>
<uni-col :span="6">待入库数：</uni-col>
<uni-col :span="16">
<view class="cont">{{ item.repairNum }}</view>
</uni-col>
</uni-row>
<uni-row :gutter="24">
<uni-col :span="2" style="color: transparent">{{ index + 1 }}</uni-col>
<uni-col :span="6">管理模式：</uni-col>
<uni-col :span="16">
<uni-tag
text="编码"
type="warning"
v-if="item.manageType == 0"
size="small"
/>
</label>
</checkbox-group>
</uni-col>
<uni-col :span="6">物资名称：</uni-col>
<uni-col :span="16">
<view class="cont">{{ item.typeName2 }}</view>
</uni-col>
</uni-row>
<uni-row :gutter="24">
<uni-col :span="2" style="color: transparent">{{ index + 1 }}</uni-col>
<uni-col :span="6">规格型号：</uni-col>
<uni-col :span="16">
<view class="cont">{{ item.typeName }}</view>
</uni-col>
</uni-row>
<uni-row :gutter="24">
<uni-col :span="2" style="color: transparent">{{ index + 1 }}</uni-col>
<uni-col :span="6">到货数量：</uni-col>
<uni-col :span="16">
<view class="cont">{{ item.repairNum }}</view>
</uni-col>
</uni-row>
<uni-row :gutter="24">
<uni-col :span="2" style="color: transparent">{{ index + 1 }}</uni-col>
<uni-col :span="6">已入库数：</uni-col>
<uni-col :span="16">
<view class="cont">{{ item.repairNum }}</view>
</uni-col>
</uni-row>
<uni-row :gutter="24">
<uni-col :span="2" style="color: transparent">{{ index + 1 }}</uni-col>
<uni-col :span="6">待入库数：</uni-col>
<uni-col :span="16">
<view class="cont">{{ item.repairNum }}</view>
</uni-col>
</uni-row>
<uni-row :gutter="24">
<uni-col :span="2" style="color: transparent">{{ index + 1 }}</uni-col>
<uni-col :span="6">管理模式：</uni-col>
<uni-col :span="16">
<uni-tag
text="编码"
type="warning"
v-if="item.manageType == 0"
size="small"
/>
<uni-tag
text="数量"
type="success"
v-if="item.manageType == 1"
size="small"
/>
</uni-col>
</uni-row>
<uni-row :gutter="24">
<uni-col :span="2" style="color: transparent">{{ index + 1 }}</uni-col>
<uni-col :span="6">状态：</uni-col>
<uni-col :span="16">
<view class="cont">{{ item.status }}</view>
</uni-col>
</uni-row>
<uni-tag
text="数量"
type="success"
v-if="item.manageType == 1"
size="small"
/>
</uni-col>
</uni-row>
<uni-row :gutter="24">
<uni-col :span="2" style="color: transparent">{{ index + 1 }}</uni-col>
<uni-col :span="6">状态：</uni-col>
<uni-col :span="16">
<view class="cont">{{ item.status }}</view>
</uni-col>
</uni-row>
</uni-swipe-action-item>
</uni-swipe-action>
</view>
</scroll-view>
</view>
@ -131,6 +137,33 @@ const detailsList = ref([])
// const query = defineProps() // 获取上级页面传递的路由参数
const taskId = ref('')
// 左滑按钮配置
const options = ref([
{
text: '查看',
style: {
backgroundColor: '#34C759'
}
},
{
text: '入库',
style: {
backgroundColor: '#007AFF'
}
}
])
// 左滑按钮点击事件
const onClick = (e, item) => {
if (e.index === 0) {
// 查看操作
handleView(item)
} else {
// 入库操作
handleInbound(item)
}
}
// 获取列表详情
const getDetailsData = async () => {
const res = await getRepairedDetailList(taskId.value)
@ -155,18 +188,18 @@ const onChangeChecked = (val) => {
val.isChecked = !val.isChecked
}
// 计算全选按钮是否选中
// 计算全选按钮是中
const allChecked = computed(() => {
return detailsList.value.every((e) => e.isChecked == true)
})
// 点击合格按钮
// 点击<EFBFBD><EFBFBD><EFBFBD>格按钮
const onQualified = async () => {
const isSelect = detailsList.value.some((e) => e.isChecked == true)
if (!isSelect) {
uni.showToast({
title: '请勾选需要需要合格的<EFBFBD><EFBFBD>据！',
title: '请勾选需要需要合格的据！',
icon: 'none',
})
return
@ -219,7 +252,7 @@ onLoad((options) => {
getDetailsData()
})
})
// <EFBFBD><EFBFBD>面销毁时移除事件监听
// 面销毁时移除事件监听
onUnmounted(() => {
uni.$off('onUpdate') // 移除事件监听
})
@ -416,4 +449,45 @@ onUnmounted(() => {
color: #8c8c8c;
padding: 24rpx 0;
}
// 优化滑动区域样式
:deep(.uni-swipe_action) {
border-radius: 20rpx;
overflow: hidden;
.uni-swipe_content {
margin: 0 !important;
padding: 0;
background-color: #fff;
}
.uni-swipe_button-group {
height: 100%;
.uni-swipe_button {
height: 100%;
padding: 0 40rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
font-weight: 600;
color: #fff;
border: none;
writing-mode: vertical-rl;
&:nth-child(1) {
background: linear-gradient(to bottom, #3ad980, #34C759) !important;
}
&:nth-child(2) {
background: linear-gradient(to bottom, #3b95ff, #007AFF) !important;
}
&:active {
opacity: 0.85;
}
}
}
}
</style>