<template>
|
<uni-popup
|
ref="popupRef"
|
type="center"
|
:round="20"
|
@close="handleClose"
|
@open="handleOpen"
|
>
|
<view class="dispatch-modal">
|
<!-- 头部 -->
|
<view class="modal-header">
|
<text class="modal-title">产品详情</text>
|
<view class="close-btn" @click="handleClose">
|
<up-icon name="close" size="20" color="#999"></up-icon>
|
</view>
|
</view>
|
|
<!-- 表单内容 -->
|
<view class="modal-content">
|
<up-form
|
:model="detailData"
|
ref="formRef"
|
:rules="rules"
|
labelWidth="120"
|
>
|
<!-- 项目基本信息 -->
|
<view class="form-section">
|
<text class="section-title">产品信息</text>
|
<up-form-item v-if="detailType == 2" label="产品图片" prop="url">
|
<image :src="baseUrl+detailData.url" class="detail-img"></image>
|
</up-form-item>
|
<up-form-item label="产品名称" prop="productCategory">
|
<up-input
|
v-model="detailData.productCategory"
|
disabled
|
placeholder=""
|
/>
|
</up-form-item>
|
<up-form-item label="产品高度" prop="specificationModel">
|
<up-input
|
v-model="detailData.specificationModelUnit"
|
disabled
|
placeholder=""
|
/>
|
</up-form-item>
|
<up-form-item label="单价（元）/件" prop="taxInclusiveUnitPrice">
|
<up-input
|
v-model="detailData.taxInclusiveUnitPrice"
|
disabled
|
placeholder=""
|
/>
|
</up-form-item>
|
<up-form-item label="单价（美元）/件" prop="dollarPrice">
|
<up-input
|
v-model="detailData.dollarPrice"
|
disabled
|
placeholder=""
|
/>
|
</up-form-item>
|
</view>
|
|
<!-- 数量信息 -->
|
<view class="form-section">
|
<text class="section-title">数量信息</text>
|
<up-form-item label="入库数量/件" prop="inboundNum">
|
<up-input
|
v-model="detailData.inboundNum"
|
disabled
|
placeholder=""
|
/>
|
</up-form-item>
|
<!-- <up-form-item label="出库数量/件" prop="totalInboundNum">
|
<up-input
|
v-model="detailData.totalInboundNum"
|
disabled
|
placeholder=""
|
/>
|
</up-form-item>
|
<up-form-item label="库存数量/件" prop="inboundNum0" required>
|
<up-input
|
v-model="detailData.inboundNum0"
|
disabled
|
placeholder=""
|
/>
|
</up-form-item> -->
|
<up-form-item label="每件数量/支" prop="boxNum" required>
|
<up-input
|
v-model="detailData.boxNum"
|
disabled
|
placeholder=""
|
/>
|
</up-form-item>
|
</view>
|
<!-- 其他信息 -->
|
<view class="form-section">
|
<text class="section-title">其他信息</text>
|
<up-form-item label="纸箱规格" prop="cartonSpecifications">
|
<up-input
|
v-model="detailData.cartonSpecifications"
|
disabled
|
placeholder=""
|
/>
|
</up-form-item>
|
<up-form-item label="入库人" prop="createBy">
|
<up-input
|
v-model="detailData.createBy"
|
disabled
|
placeholder=""
|
/>
|
</up-form-item>
|
<up-form-item label="入库时间" prop="inboundDate">
|
<up-input
|
v-model="detailData.inboundDate"
|
disabled
|
placeholder=""
|
/>
|
</up-form-item>
|
</view>
|
|
</up-form>
|
</view>
|
</view>
|
</uni-popup>
|
</template>
|
|
<script setup>
|
import { ref, reactive } from 'vue';
|
import config from '@/config'
|
const baseUrl = config.imgUrl
|
const emit = defineEmits(['confirm']);
|
|
// 弹窗显示状态
|
const popupRef = ref();
|
|
// 表单数据
|
const detailData = reactive({});
|
|
// 表单验证规则
|
const rules = reactive({});
|
|
const detailType = ref(0)
|
// 打开弹窗
|
const open = async (rowData) => {
|
try {
|
// 填充表单数据
|
Object.assign(detailData, {
|
...rowData,
|
specificationModelUnit: rowData.specificationModel + rowData.unit,
|
totalInboundNum: rowData.totalInboundNum||0
|
});
|
popupRef.value.open()
|
detailType.value = rowData.type
|
} catch (error) {
|
console.log(error)
|
uni.showToast({
|
title: '加载用户列表失败',
|
icon: 'error'
|
});
|
}
|
};
|
|
|
// 弹窗打开事件
|
const handleOpen = () => {
|
// 弹窗打开时的处理
|
};
|
|
// 关闭弹窗
|
const handleClose = () => {
|
popupRef.value.close()
|
// 重置表单
|
for (const key in detailData) {
|
detailData[key] = undefined;
|
}
|
};
|
|
// 暴露方法
|
defineExpose({
|
open
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.dispatch-modal {
|
background: #ffffff;
|
border-radius: 20px;
|
max-height: 80vh;
|
overflow: hidden;
|
display: flex;
|
flex-direction: column;
|
box-sizing: border-box;
|
padding-bottom: 20rpx;
|
}
|
|
.modal-header {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 20px 20px 0 20px;
|
border-bottom: 1px solid #f0f0f0;
|
padding-bottom: 16px;
|
margin-bottom: 20px;
|
}
|
|
.modal-title {
|
font-size: 18px;
|
font-weight: 600;
|
color: #333;
|
}
|
|
.close-btn {
|
padding: 4px;
|
|
&:active {
|
opacity: 0.7;
|
}
|
}
|
|
.modal-content {
|
flex: 1;
|
padding: 0 20px;
|
overflow-y: auto;
|
.datetime-picker-value{
|
font-size: 14px;
|
border: 1px solid #e5e5e5;
|
box-sizing: border-box;
|
border-radius: 4px;
|
padding: 0 5px;
|
padding-left: 10px;
|
position: relative;
|
display: flex;
|
-webkit-user-select: none;
|
-moz-user-select: none;
|
user-select: none;
|
flex-direction: row;
|
align-items: center;
|
width: 100%;
|
flex: 1;
|
height: 35px;
|
}
|
}
|
|
.form-section {
|
margin-bottom: 24px;
|
}
|
|
.section-title {
|
display: block;
|
font-size: 16px;
|
font-weight: 600;
|
color: #333;
|
margin-bottom: 16px;
|
padding-left: 8px;
|
border-left: 3px solid #2979ff;
|
}
|
|
.modal-footer {
|
display: flex;
|
gap: 12px;
|
padding: 20px;
|
border-top: 1px solid #f0f0f0;
|
background: #fafafa;
|
}
|
.detail-img {
|
width: 200rpx;
|
height: 200rpx;
|
border-radius: 8rpx;
|
background-color: #f5f5f5;
|
}
|
|
// uView 组件样式调整
|
:deep(.up-form-item) {
|
margin-bottom: 20px;
|
}
|
|
:deep(.up-input) {
|
background: #f8f9fa;
|
border-radius: 8px;
|
}
|
|
:deep(.up-input--disabled) {
|
background: #f0f0f0;
|
color: #999;
|
}
|
|
:deep(.up-number-box) {
|
background: #f8f9fa;
|
border-radius: 8px;
|
}
|
</style>
|
