|
|
|
|
@ -2,8 +2,8 @@
|
|
|
|
|
<view class="page-container">
|
|
|
|
|
<NavBar :title="t('sparepartInbound.createTitle')" />
|
|
|
|
|
|
|
|
|
|
<!-- 操作按钮区 -->
|
|
|
|
|
<view class="action-row">
|
|
|
|
|
<!-- 扫码/选择备件 - 固定在页面最上方 -->
|
|
|
|
|
<view class="top-action-bar">
|
|
|
|
|
<view class="scan-input-row">
|
|
|
|
|
<input
|
|
|
|
|
id="sparepart-inbound-scan-input"
|
|
|
|
|
@ -14,123 +14,124 @@
|
|
|
|
|
@confirm="onScanInputConfirm"
|
|
|
|
|
/>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="action-btn select-btn" @click="handleSelectSparepart">
|
|
|
|
|
<view class="scan-btn" @click="handleSelectSparepart">
|
|
|
|
|
<text class="btn-text">{{ t('sparepartInbound.selectSparepart') }}</text>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<!-- 入库信息 -->
|
|
|
|
|
<view class="form-section">
|
|
|
|
|
<!-- 入库时间 -->
|
|
|
|
|
<view class="section-title-bar">
|
|
|
|
|
<view class="section-bar-line"></view>
|
|
|
|
|
<text class="section-title"><text class="required">*</text>入库时间</text>
|
|
|
|
|
</view>
|
|
|
|
|
<picker mode="date" :value="inboundDate" @change="handleDateChange">
|
|
|
|
|
<view class="form-row-card">
|
|
|
|
|
<text :class="{ placeholder: !inboundDate }">{{ inboundDate || '请选择入库时间' }}</text>
|
|
|
|
|
<text class="form-row-arrow">▼</text>
|
|
|
|
|
</view>
|
|
|
|
|
</picker>
|
|
|
|
|
|
|
|
|
|
<!-- 经办人 -->
|
|
|
|
|
<view class="section-title-bar" style="padding-top: 24rpx;">
|
|
|
|
|
<view class="section-bar-line"></view>
|
|
|
|
|
<text class="section-title"><text class="required">*</text>经办人</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="form-row-card" @click="goSelectOperator">
|
|
|
|
|
<text :class="{ placeholder: !selectedOperatorName }">
|
|
|
|
|
{{ selectedOperatorName || '请选择经办人' }}
|
|
|
|
|
</text>
|
|
|
|
|
<text class="form-row-arrow">▶</text>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<!-- 备注 -->
|
|
|
|
|
<view class="section-title-bar" style="padding-top: 24rpx;">
|
|
|
|
|
<view class="section-bar-line"></view>
|
|
|
|
|
<text class="section-title">备注</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="form-row-card remark-card">
|
|
|
|
|
<textarea
|
|
|
|
|
v-model="remark"
|
|
|
|
|
class="remark-textarea"
|
|
|
|
|
placeholder="请输入备注信息"
|
|
|
|
|
placeholder-class="remark-placeholder"
|
|
|
|
|
:maxlength="500"
|
|
|
|
|
auto-height
|
|
|
|
|
/>
|
|
|
|
|
</view>
|
|
|
|
|
<scroll-view scroll-y class="detail-scroll">
|
|
|
|
|
<view class="content-section">
|
|
|
|
|
<!-- 入库信息卡片 -->
|
|
|
|
|
<view class="section-card">
|
|
|
|
|
<view class="section-header">
|
|
|
|
|
<view class="section-icon">
|
|
|
|
|
<uni-icons type="compose" size="24" color="#1f7cff"></uni-icons>
|
|
|
|
|
</view>
|
|
|
|
|
<text class="section-title">{{ t('productInbound.inboundInfo') }}</text>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<!-- 附件 -->
|
|
|
|
|
<view class="section-title-bar" style="padding-top: 24rpx;">
|
|
|
|
|
<view class="section-bar-line"></view>
|
|
|
|
|
<text class="section-title">附件</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="attachment-area">
|
|
|
|
|
<view v-if="attachmentFileName" class="attachment-file-item">
|
|
|
|
|
<view class="file-icon">
|
|
|
|
|
<text class="file-icon-text">{{ getFileIcon(attachmentFileName) }}</text>
|
|
|
|
|
<view class="form-field">
|
|
|
|
|
<text class="form-label">入库时间<text class="required-star">*</text></text>
|
|
|
|
|
<picker mode="date" :value="inboundDate" @change="handleDateChange">
|
|
|
|
|
<view class="select-field">
|
|
|
|
|
<text :class="['select-text', inboundDate ? '' : 'placeholder']">{{ inboundDate || '请选择入库时间' }}</text>
|
|
|
|
|
<uni-icons type="calendar" size="18" color="#9ca3af"></uni-icons>
|
|
|
|
|
</view>
|
|
|
|
|
</picker>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="file-info">
|
|
|
|
|
<text class="file-name" :title="attachmentFileName">{{ attachmentFileName }}</text>
|
|
|
|
|
<text v-if="attachmentFileSize" class="file-size">{{ formatFileSize(attachmentFileSize) }}</text>
|
|
|
|
|
|
|
|
|
|
<view class="form-field">
|
|
|
|
|
<text class="form-label">经办人<text class="required-star">*</text></text>
|
|
|
|
|
<view class="select-field" @click="goSelectOperator">
|
|
|
|
|
<text :class="['select-text', selectedOperatorName ? '' : 'placeholder']">{{ selectedOperatorName || '请选择经办人' }}</text>
|
|
|
|
|
<uni-icons type="right" size="18" color="#9ca3af"></uni-icons>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view v-if="uploadLoading" class="file-uploading">
|
|
|
|
|
<text class="uploading-text">上传中...</text>
|
|
|
|
|
|
|
|
|
|
<view class="form-field">
|
|
|
|
|
<text class="form-label">备注</text>
|
|
|
|
|
<textarea v-model="remark" class="form-textarea" placeholder="请输入备注信息" placeholder-class="placeholder-text" maxlength="500" />
|
|
|
|
|
</view>
|
|
|
|
|
<view v-else class="file-delete" @click="removeAttachment">
|
|
|
|
|
<text class="delete-icon-sm">✕</text>
|
|
|
|
|
|
|
|
|
|
<view class="form-field">
|
|
|
|
|
<text class="form-label">附件</text>
|
|
|
|
|
<view class="attachment-upload" @click="handleAddAttachment">
|
|
|
|
|
<uni-icons type="paperclip" size="20" color="#1f7cff"></uni-icons>
|
|
|
|
|
<text>选取文件</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view v-if="attachmentList.length" class="attachment-list">
|
|
|
|
|
<view v-for="(file, idx) in attachmentList" :key="idx" class="attachment-item">
|
|
|
|
|
<view class="attachment-main">
|
|
|
|
|
<uni-icons type="paperclip" size="16" color="#64748b"></uni-icons>
|
|
|
|
|
<text class="attachment-name">{{ file.name }}</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="attachment-delete" @click="removeAttachment(idx)">
|
|
|
|
|
<uni-icons type="closeempty" size="18" color="#ef4444"></uni-icons>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="attachment-add-file" @click="handleAddAttachment" v-if="!attachmentFileName">
|
|
|
|
|
<text class="add-text">选取文件</text>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<!-- 已选备件列表 -->
|
|
|
|
|
<view class="sparepart-section">
|
|
|
|
|
<view class="section-title-bar">
|
|
|
|
|
<view class="section-bar-line"></view>
|
|
|
|
|
<text class="section-title">入库清单（{{ itemList.length }}）</text>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view v-if="itemList.length" class="item-list">
|
|
|
|
|
<view v-for="(item, idx) in itemList" :key="idx" class="item-card">
|
|
|
|
|
<view class="item-delete-top" @click="removeItem(idx)"><text class="delete-icon">✕</text></view>
|
|
|
|
|
<view class="item-left">
|
|
|
|
|
<view class="item-image-wrap">
|
|
|
|
|
<image
|
|
|
|
|
v-if="item._sparepart && getItemImage(item._sparepart)"
|
|
|
|
|
:src="getItemImage(item._sparepart)"
|
|
|
|
|
class="item-image"
|
|
|
|
|
mode="aspectFill"
|
|
|
|
|
/>
|
|
|
|
|
<text v-else class="item-image-empty">📦</text>
|
|
|
|
|
<!-- 入库清单卡片 -->
|
|
|
|
|
<view class="section-card">
|
|
|
|
|
<view class="section-header list-header">
|
|
|
|
|
<view class="section-title-wrap">
|
|
|
|
|
<view class="section-icon">
|
|
|
|
|
<uni-icons type="list" size="24" color="#1f7cff"></uni-icons>
|
|
|
|
|
</view>
|
|
|
|
|
<text class="section-title">入库清单（{{ itemList.length }}）</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="item-info">
|
|
|
|
|
<text class="item-name">{{ item.productName }}</text>
|
|
|
|
|
<text class="item-spec">{{ item.productBarCode || '-' }}</text>
|
|
|
|
|
<view class="add-product-btn" @click="handleSelectSparepart">
|
|
|
|
|
<uni-icons type="plusempty" size="16" color="#1f7cff"></uni-icons>
|
|
|
|
|
<text>添加备件</text>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="item-right">
|
|
|
|
|
<view class="item-qty-row">
|
|
|
|
|
<text class="item-qty-label">入库数量</text>
|
|
|
|
|
<text class="item-qty-value">{{ item.inputCount }}{{ item.purchaseUnitName }}</text>
|
|
|
|
|
|
|
|
|
|
<view v-if="itemList.length" class="item-list">
|
|
|
|
|
<view v-for="(item, idx) in itemList" :key="idx" class="item-card">
|
|
|
|
|
<view class="image-box">
|
|
|
|
|
<image
|
|
|
|
|
v-if="item._sparepart && getItemImage(item._sparepart)"
|
|
|
|
|
:src="getItemImage(item._sparepart)"
|
|
|
|
|
class="item-image"
|
|
|
|
|
mode="aspectFill"
|
|
|
|
|
/>
|
|
|
|
|
<uni-icons v-else type="image" size="34" color="#cbd5e1"></uni-icons>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="item-info">
|
|
|
|
|
<view class="item-header">
|
|
|
|
|
<text class="item-name">{{ textValue(item.productName) }}</text>
|
|
|
|
|
<view class="delete-btn" @click="removeItem(idx)">
|
|
|
|
|
<uni-icons type="trash" size="18" color="#ef4444"></uni-icons>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="info-grid">
|
|
|
|
|
<view class="info-cell">
|
|
|
|
|
<text class="info-label">编码</text>
|
|
|
|
|
<text class="info-value">{{ item.productBarCode || '-' }}</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="info-cell">
|
|
|
|
|
<text class="info-label">入库数量</text>
|
|
|
|
|
<text class="info-value">{{ item.inputCount }}{{ item.purchaseUnitName }}</text>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view v-else class="empty-wrap">
|
|
|
|
|
<text class="empty-text">请扫码或选择备件</text>
|
|
|
|
|
<view v-else class="empty-card" @click="handleSelectSparepart">
|
|
|
|
|
<uni-icons type="plusempty" size="30" color="#94a3b8"></uni-icons>
|
|
|
|
|
<text>请扫码或选择备件</text>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</scroll-view>
|
|
|
|
|
|
|
|
|
|
<!-- 底部操作栏 -->
|
|
|
|
|
<view class="bottom-actions">
|
|
|
|
|
<view class="bottom-btn cancel-btn" @click="handleCancel">取消</view>
|
|
|
|
|
<view class="bottom-btn confirm-btn" @click="handleSubmit">确认入库</view>
|
|
|
|
|
<view class="action-bar">
|
|
|
|
|
<view class="action-btn back-btn" @click="handleCancel">取消</view>
|
|
|
|
|
<view class="action-btn submit-btn" @click="handleSubmit">确认入库</view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<sv-focus-no-keyboard ref="focusNoKeyboardRef"></sv-focus-no-keyboard>
|
|
|
|
|
@ -144,8 +145,6 @@ import { useI18n } from 'vue-i18n'
|
|
|
|
|
import NavBar from '@/components/common/NavBar.vue'
|
|
|
|
|
import { createSparepartInbound } from '@/api/mes/sparepartInbound'
|
|
|
|
|
import { getSparepartDetail } from '@/api/mes/sparepart'
|
|
|
|
|
import { getBaseUrl } from '@/utils/request'
|
|
|
|
|
import { getToken } from '@/utils/auth'
|
|
|
|
|
|
|
|
|
|
const { t } = useI18n()
|
|
|
|
|
|
|
|
|
|
@ -211,11 +210,8 @@ const selectedOperatorName = ref('')
|
|
|
|
|
// 备注
|
|
|
|
|
const remark = ref('')
|
|
|
|
|
|
|
|
|
|
// 附件（单文件，web端 limit=1）
|
|
|
|
|
const fileUrl = ref('') // JSON: {"fileName":"xxx.pdf","fileUrl":"https://..."}
|
|
|
|
|
const attachmentFileName = ref('') // 展示用：文件名
|
|
|
|
|
const attachmentFileSize = ref(0) // 展示用：文件大小
|
|
|
|
|
const uploadLoading = ref(false) // 上传中状态
|
|
|
|
|
// 附件
|
|
|
|
|
const attachmentList = ref([])
|
|
|
|
|
|
|
|
|
|
function formatDate(date) {
|
|
|
|
|
const y = date.getFullYear()
|
|
|
|
|
@ -228,6 +224,13 @@ function handleDateChange(e) {
|
|
|
|
|
inboundDate.value = e.detail.value
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function textValue(v) {
|
|
|
|
|
if (v === 0) return '0'
|
|
|
|
|
if (v == null) return '-'
|
|
|
|
|
const s = String(v).trim()
|
|
|
|
|
return s || '-'
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function getItemImage(sparepart) {
|
|
|
|
|
const images = sparepart.images
|
|
|
|
|
if (!images) return ''
|
|
|
|
|
@ -277,147 +280,38 @@ function goSelectOperator() {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 附件
|
|
|
|
|
function getFileIcon(fileName) {
|
|
|
|
|
const ext = (fileName || '').split('.').pop()?.toLowerCase()
|
|
|
|
|
const iconMap = {
|
|
|
|
|
pdf: '📄', doc: '📝', docx: '📝', xls: '📊', xlsx: '📊',
|
|
|
|
|
ppt: '📽', pptx: '📽', txt: '📃', zip: '📦', rar: '📦',
|
|
|
|
|
jpg: '🖼', jpeg: '🖼', png: '🖼', gif: '🖼', webp: '🖼'
|
|
|
|
|
}
|
|
|
|
|
return iconMap[ext] || '📎'
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function formatFileSize(bytes) {
|
|
|
|
|
if (!bytes) return '0 B'
|
|
|
|
|
if (bytes < 1024) return bytes + ' B'
|
|
|
|
|
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
|
|
|
|
|
return (bytes / (1024 * 1024)).toFixed(1) + ' MB'
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const ALLOWED_EXTS = ['png', 'jpg', 'jpeg', 'doc', 'xls', 'ppt', 'txt', 'pdf']
|
|
|
|
|
const MAX_FILE_SIZE = 100 * 1024 * 1024 // 100MB
|
|
|
|
|
|
|
|
|
|
function handleAddAttachment() {
|
|
|
|
|
// #ifdef APP-PLUS
|
|
|
|
|
// APP端用 plus.gallery 选择文件
|
|
|
|
|
plus.gallery.pick(
|
|
|
|
|
(res) => {
|
|
|
|
|
const file = res?.files?.[0]
|
|
|
|
|
if (!file) return
|
|
|
|
|
const ext = (file.name || '').split('.').pop()?.toLowerCase()
|
|
|
|
|
if (!ALLOWED_EXTS.includes(ext)) {
|
|
|
|
|
uni.showToast({ title: '不支持的文件类型：.' + (ext || '未知'), icon: 'none' })
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
if (file.size > MAX_FILE_SIZE) {
|
|
|
|
|
uni.showToast({ title: '文件大小不能超过100MB', icon: 'none' })
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
uploadFile(file)
|
|
|
|
|
const files = (res?.files || []).map((f) => ({
|
|
|
|
|
name: f.name || 'unknown',
|
|
|
|
|
size: f.size || 0,
|
|
|
|
|
path: f
|
|
|
|
|
}))
|
|
|
|
|
attachmentList.value.push(...files)
|
|
|
|
|
},
|
|
|
|
|
(e) => { console.log('选择文件失败:', e) },
|
|
|
|
|
{ filter: 'all', multiple: false }
|
|
|
|
|
() => {},
|
|
|
|
|
{ filter: 'all', multiple: true, maximum: 9 - attachmentList.value.length }
|
|
|
|
|
)
|
|
|
|
|
// #endif
|
|
|
|
|
// #ifndef APP-PLUS
|
|
|
|
|
// 非APP端用 uni.chooseFile 选择文件
|
|
|
|
|
uni.chooseFile({
|
|
|
|
|
count: 1,
|
|
|
|
|
type: 'all',
|
|
|
|
|
uni.chooseImage({
|
|
|
|
|
count: 9 - attachmentList.value.length,
|
|
|
|
|
sizeType: ['compressed'],
|
|
|
|
|
sourceType: ['album', 'camera'],
|
|
|
|
|
success: (res) => {
|
|
|
|
|
const tempFile = res.tempFiles?.[0]
|
|
|
|
|
if (!tempFile) return
|
|
|
|
|
const ext = (tempFile.name || '').split('.').pop()?.toLowerCase()
|
|
|
|
|
if (!ALLOWED_EXTS.includes(ext)) {
|
|
|
|
|
uni.showToast({ title: '不支持的文件类型：.' + (ext || '未知'), icon: 'none' })
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
if (tempFile.size > MAX_FILE_SIZE) {
|
|
|
|
|
uni.showToast({ title: '文件大小不能超过100MB', icon: 'none' })
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
uploadFile(tempFile)
|
|
|
|
|
},
|
|
|
|
|
fail: () => {
|
|
|
|
|
// 兜底：不支持 chooseFile 的环境用 chooseImage
|
|
|
|
|
uni.chooseImage({
|
|
|
|
|
count: 1,
|
|
|
|
|
sizeType: ['compressed'],
|
|
|
|
|
sourceType: ['album', 'camera'],
|
|
|
|
|
success: (imgRes) => {
|
|
|
|
|
const path = imgRes.tempFilePaths?.[0]
|
|
|
|
|
if (!path) return
|
|
|
|
|
const parts = path.split('/')
|
|
|
|
|
const name = parts[parts.length - 1] || 'image.jpg'
|
|
|
|
|
uploadFile({ path, name, size: 0 })
|
|
|
|
|
}
|
|
|
|
|
res.tempFilePaths.forEach((path) => {
|
|
|
|
|
const parts = path.split('/')
|
|
|
|
|
attachmentList.value.push({ name: parts[parts.length - 1] || 'image.jpg', size: 0, path })
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
// #endif
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function uploadFile(file) {
|
|
|
|
|
uploadLoading.value = true
|
|
|
|
|
attachmentFileName.value = file.name || 'unknown'
|
|
|
|
|
attachmentFileSize.value = file.size || 0
|
|
|
|
|
|
|
|
|
|
// 构建 form-data
|
|
|
|
|
const formData = {
|
|
|
|
|
file: file.path // uni.uploadFile 的 files 参数需要的是路径
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
const res = await new Promise((resolve, reject) => {
|
|
|
|
|
uni.uploadFile({
|
|
|
|
|
url: getBaseUrl() + '/admin-api/infra/file/upload',
|
|
|
|
|
filePath: file.path,
|
|
|
|
|
name: 'file',
|
|
|
|
|
header: {
|
|
|
|
|
'Authorization': 'Bearer ' + (getToken() || ''),
|
|
|
|
|
'tenantId': '1'
|
|
|
|
|
},
|
|
|
|
|
success: (uploadRes) => {
|
|
|
|
|
if (uploadRes.statusCode === 200) {
|
|
|
|
|
try {
|
|
|
|
|
const data = JSON.parse(uploadRes.data)
|
|
|
|
|
resolve(data)
|
|
|
|
|
} catch (e) {
|
|
|
|
|
reject(new Error('解析上传结果失败'))
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
reject(new Error('上传失败，状态码：' + uploadRes.statusCode))
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
fail: (err) => {
|
|
|
|
|
reject(err)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
if (res.code === 0 && res.data) {
|
|
|
|
|
const { fileName, fileUrl: url } = res.data
|
|
|
|
|
fileUrl.value = JSON.stringify({ fileName: fileName || file.name, fileUrl: url })
|
|
|
|
|
attachmentFileName.value = fileName || file.name
|
|
|
|
|
uni.showToast({ title: '上传成功', icon: 'success' })
|
|
|
|
|
} else {
|
|
|
|
|
throw new Error(res.msg || '上传失败')
|
|
|
|
|
}
|
|
|
|
|
} catch (e) {
|
|
|
|
|
attachmentFileName.value = ''
|
|
|
|
|
attachmentFileSize.value = 0
|
|
|
|
|
fileUrl.value = ''
|
|
|
|
|
const msg = e?.message || '上传失败'
|
|
|
|
|
uni.showToast({ title: String(msg).substring(0, 50), icon: 'none' })
|
|
|
|
|
} finally {
|
|
|
|
|
uploadLoading.value = false
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function removeAttachment() {
|
|
|
|
|
attachmentFileName.value = ''
|
|
|
|
|
attachmentFileSize.value = 0
|
|
|
|
|
fileUrl.value = ''
|
|
|
|
|
function removeAttachment(idx) {
|
|
|
|
|
attachmentList.value.splice(idx, 1)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function handleSubmit() {
|
|
|
|
|
@ -467,9 +361,9 @@ async function handleSubmit() {
|
|
|
|
|
items: items
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 附件（单文件，与 web 端一致存 JSON 字符串）
|
|
|
|
|
if (fileUrl.value) {
|
|
|
|
|
submitData.fileUrl = fileUrl.value
|
|
|
|
|
// 附件
|
|
|
|
|
if (attachmentList.value.length) {
|
|
|
|
|
submitData.attachments = attachmentList.value.map((f) => f.path || f)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
console.log('提交数据:', JSON.stringify(submitData))
|
|
|
|
|
@ -513,172 +407,53 @@ onHide(() => {})
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.page-container {
|
|
|
|
|
min-height: 100vh;
|
|
|
|
|
background: #f5f6f8;
|
|
|
|
|
padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 操作按钮区 */
|
|
|
|
|
.action-row {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 16rpx;
|
|
|
|
|
padding: 20rpx 24rpx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.scan-input-row {
|
|
|
|
|
flex: 1;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
min-height: 72rpx !important;
|
|
|
|
|
height: 72rpx !important;
|
|
|
|
|
border-radius: 10rpx;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
.scan-input {
|
|
|
|
|
flex: 1;
|
|
|
|
|
min-height: 72rpx !important;
|
|
|
|
|
height: 72rpx !important;
|
|
|
|
|
padding: 0 20rpx;
|
|
|
|
|
font-size: 26rpx;
|
|
|
|
|
color: #333;
|
|
|
|
|
background: #fff;
|
|
|
|
|
border: 1rpx solid #d0d5dd;
|
|
|
|
|
border-radius: 10rpx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.action-btn {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
height: 72rpx;
|
|
|
|
|
padding: 0 24rpx;
|
|
|
|
|
border-radius: 10rpx;
|
|
|
|
|
background: #1f4b79;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: 26rpx;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
|
|
|
|
|
.btn-icon-wrap { width: 44rpx; height: 44rpx; display: flex; align-items: center; justify-content: center; }
|
|
|
|
|
.btn-icon { font-size: 36rpx; color: #fff; }
|
|
|
|
|
.btn-text { font-size: 26rpx; font-weight: 600; color: #fff; }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 备件列表 */
|
|
|
|
|
.sparepart-section { padding: 0; }
|
|
|
|
|
|
|
|
|
|
.section-title-bar {
|
|
|
|
|
display: flex; align-items: center; gap: 10rpx;
|
|
|
|
|
padding: 24rpx 24rpx 18rpx;
|
|
|
|
|
}
|
|
|
|
|
.section-bar-line {
|
|
|
|
|
width: 6rpx; height: 32rpx; border-radius: 3rpx;
|
|
|
|
|
background: #2563eb; flex-shrink: 0;
|
|
|
|
|
}
|
|
|
|
|
.section-title { font-size: 30rpx; font-weight: 700; color: #1a1a1a; }
|
|
|
|
|
.required { color: #ef4444; margin-right: 2rpx; }
|
|
|
|
|
|
|
|
|
|
.item-list { padding: 0 24rpx; }
|
|
|
|
|
|
|
|
|
|
.item-card {
|
|
|
|
|
position: relative; display: flex; align-items: center; justify-content: space-between;
|
|
|
|
|
background: #fff; border-radius: 14rpx; padding: 20rpx; margin-bottom: 16rpx;
|
|
|
|
|
box-shadow: 0 2rpx 12rpx rgba(15, 23, 42, 0.04);
|
|
|
|
|
}
|
|
|
|
|
.item-delete-top { position: absolute; top: 10rpx; right: 10rpx; width: 40rpx; height: 40rpx; border-radius: 20rpx; background: #fee2e2; display: flex; align-items: center; justify-content: center; z-index: 1; .delete-icon { font-size: 20rpx; color: #dc2626; } }
|
|
|
|
|
|
|
|
|
|
.item-left { display: flex; align-items: center; flex: 1; min-width: 0; padding-right: 36rpx; }
|
|
|
|
|
.item-image-wrap {
|
|
|
|
|
width: 80rpx; height: 80rpx; border-radius: 10rpx; overflow: hidden;
|
|
|
|
|
background: #f8fafc; border: 1rpx solid #f0f0f0; flex-shrink: 0;
|
|
|
|
|
display: flex; align-items: center; justify-content: center;
|
|
|
|
|
}
|
|
|
|
|
.page-container { min-height: 100vh; background: #f5f7fb; }
|
|
|
|
|
.top-action-bar { display: flex; align-items: center; gap: 16rpx; padding: 20rpx 24rpx; background: #ffffff; border-bottom: 1rpx solid #eef2f7; }
|
|
|
|
|
.detail-scroll { height: calc(100vh - 172rpx - 116rpx); }
|
|
|
|
|
.content-section { padding: 20rpx 24rpx 28rpx; }
|
|
|
|
|
.section-card { background: #ffffff; border-radius: 20rpx; padding: 24rpx; margin-bottom: 20rpx; border: 1rpx solid #eef2f7; box-shadow: 0 6rpx 18rpx rgba(15, 23, 42, 0.04); }
|
|
|
|
|
.section-header { display: flex; align-items: center; gap: 12rpx; margin-bottom: 22rpx; padding-bottom: 18rpx; border-bottom: 1rpx solid #f1f5f9; }
|
|
|
|
|
.section-icon { width: 40rpx; height: 40rpx; border-radius: 10rpx; background: #eff6ff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
|
|
|
|
.section-title { font-size: 32rpx; font-weight: 600; color: #1f2937; }
|
|
|
|
|
.section-title-wrap { display: flex; align-items: center; gap: 12rpx; min-width: 0; }
|
|
|
|
|
.list-header { justify-content: space-between; gap: 16rpx; }
|
|
|
|
|
.form-field { display: flex; flex-direction: column; gap: 12rpx; }
|
|
|
|
|
.form-field + .form-field { margin-top: 24rpx; }
|
|
|
|
|
.form-label { font-size: 26rpx; color: #4b5563; font-weight: 500; }
|
|
|
|
|
.required-star { color: #ef4444; font-size: 28rpx; margin-left: 4rpx; }
|
|
|
|
|
.select-field { display: flex; align-items: center; justify-content: space-between; padding: 0 24rpx; height: 76rpx; background: #f8fafc; border: 1rpx solid #e5e7eb; border-radius: 14rpx; box-sizing: border-box; }
|
|
|
|
|
.select-text { flex: 1; min-width: 0; font-size: 28rpx; color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
|
|
.placeholder, .placeholder-text { color: #9ca3af; }
|
|
|
|
|
.form-textarea { width: 100%; min-height: 120rpx; background: #f8fafc; border-radius: 14rpx; padding: 18rpx 24rpx; font-size: 28rpx; color: #374151; box-sizing: border-box; }
|
|
|
|
|
.attachment-upload { height: 76rpx; border-radius: 14rpx; border: 1rpx dashed #bfdbfe; background: #eff6ff; color: #1f7cff; display: flex; align-items: center; justify-content: center; gap: 10rpx; font-size: 26rpx; font-weight: 600; }
|
|
|
|
|
.attachment-list { margin-top: 12rpx; display: flex; flex-direction: column; gap: 10rpx; }
|
|
|
|
|
.attachment-item { display: flex; align-items: center; justify-content: space-between; gap: 16rpx; padding: 16rpx 18rpx; background: #f8fafc; border-radius: 12rpx; }
|
|
|
|
|
.attachment-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10rpx; }
|
|
|
|
|
.attachment-name { flex: 1; min-width: 0; font-size: 24rpx; color: #334155; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
|
|
.attachment-delete { width: 44rpx; height: 44rpx; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
|
|
|
|
.uploading-text { font-size: 22rpx; color: #2563eb; flex-shrink: 0; }
|
|
|
|
|
.add-product-btn { height: 60rpx; padding: 0 18rpx; border-radius: 999rpx; border: 1rpx solid #bfdbfe; background: #eff6ff; color: #1f7cff; font-size: 24rpx; font-weight: 600; display: flex; align-items: center; gap: 8rpx; flex-shrink: 0; }
|
|
|
|
|
|
|
|
|
|
.scan-input-row { flex: 1; }
|
|
|
|
|
.scan-input { width: 100%; height: 76rpx; padding: 0 20rpx; font-size: 26rpx; color: #333; background: #f8fafc; border: 1rpx solid #e5e7eb; border-radius: 14rpx; box-sizing: border-box; }
|
|
|
|
|
.scan-btn { display: flex; align-items: center; justify-content: center; height: 76rpx; padding: 0 24rpx; border-radius: 14rpx; background: #1f4b79; white-space: nowrap; flex-shrink: 0; }
|
|
|
|
|
.btn-text { font-size: 26rpx; font-weight: 600; color: #fff; }
|
|
|
|
|
|
|
|
|
|
.item-list { display: flex; flex-direction: column; gap: 18rpx; }
|
|
|
|
|
.item-card { display: flex; gap: 18rpx; padding: 20rpx; background: #ffffff; border: 1rpx solid #eef2f7; border-radius: 18rpx; box-shadow: 0 6rpx 18rpx rgba(15, 23, 42, 0.04); }
|
|
|
|
|
.image-box { width: 128rpx; height: 128rpx; border-radius: 16rpx; background: #f8fafc; border: 1rpx solid #e5e7eb; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
|
|
|
|
|
.item-image { width: 100%; height: 100%; }
|
|
|
|
|
.item-image-empty { font-size: 36rpx; opacity: 0.3; }
|
|
|
|
|
.item-info { margin-left: 16rpx; flex: 1; min-width: 0; }
|
|
|
|
|
.item-name {
|
|
|
|
|
font-size: 28rpx; font-weight: 600; color: #1a1a1a; display: block;
|
|
|
|
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
|
|
|
}
|
|
|
|
|
.item-spec { font-size: 24rpx; color: #9ca3af; margin-top: 6rpx; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
|
|
|
|
|
|
|
.item-right { display: flex; flex-direction: column; align-items: flex-end; margin-left: 16rpx; flex-shrink: 0; padding-right: 50rpx; }
|
|
|
|
|
.item-qty-row { display: flex; flex-direction: column; align-items: flex-end; }
|
|
|
|
|
.item-qty-label { font-size: 22rpx; color: #9ca3af; }
|
|
|
|
|
.item-qty-value { font-size: 28rpx; font-weight: 700; color: #2563eb; margin-top: 4rpx; }
|
|
|
|
|
|
|
|
|
|
.empty-wrap { padding: 160rpx 0; text-align: center; }
|
|
|
|
|
.empty-text { font-size: 28rpx; color: #94a3b8; }
|
|
|
|
|
|
|
|
|
|
/* 入库信息区 */
|
|
|
|
|
.form-section { padding-bottom: 16rpx; }
|
|
|
|
|
|
|
|
|
|
.form-row-card {
|
|
|
|
|
position: relative;
|
|
|
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
|
|
|
background: #fff; border-radius: 16rpx; padding: 26rpx 24rpx; margin: 0 24rpx 16rpx;
|
|
|
|
|
box-shadow: 0 4rpx 16rpx rgba(15, 23, 42, 0.04);
|
|
|
|
|
font-size: 28rpx; color: #374151;
|
|
|
|
|
.placeholder { color: #9ca3af; }
|
|
|
|
|
}
|
|
|
|
|
.form-row-arrow { font-size: 20rpx; color: #999; flex-shrink: 0; }
|
|
|
|
|
|
|
|
|
|
/* 备注 */
|
|
|
|
|
.remark-card { padding: 20rpx 24rpx; }
|
|
|
|
|
.remark-textarea { width: 100%; min-height: 120rpx; font-size: 27rpx; color: #374151; line-height: 1.6; box-sizing: border-box; }
|
|
|
|
|
.remark-placeholder { color: #bbb; }
|
|
|
|
|
|
|
|
|
|
/* 附件 */
|
|
|
|
|
.attachment-area { padding: 0 24rpx 16rpx; }
|
|
|
|
|
.attachment-list { display: flex; flex-direction: column; gap: 12rpx; }
|
|
|
|
|
|
|
|
|
|
.attachment-file-item {
|
|
|
|
|
display: flex; align-items: center; gap: 16rpx;
|
|
|
|
|
background: #fff; border-radius: 12rpx; padding: 18rpx 20rpx;
|
|
|
|
|
box-shadow: 0 2rpx 8rpx rgba(15, 23, 42, 0.03);
|
|
|
|
|
}
|
|
|
|
|
.file-icon {
|
|
|
|
|
width: 72rpx; height: 72rpx; border-radius: 10rpx;
|
|
|
|
|
background: #f1f5f9; display: flex; align-items: center; justify-content: center;
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
}
|
|
|
|
|
.file-icon-text { font-size: 36rpx; }
|
|
|
|
|
.file-info { flex: 1; min-width: 0; }
|
|
|
|
|
.file-name {
|
|
|
|
|
font-size: 26rpx; color: #1f2937; display: block;
|
|
|
|
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
|
|
|
}
|
|
|
|
|
.file-size { font-size: 22rpx; color: #9ca3af; margin-top: 4rpx; display: block; }
|
|
|
|
|
.file-delete {
|
|
|
|
|
width: 48rpx; height: 48rpx; border-radius: 24rpx;
|
|
|
|
|
background: #fee2e2; display: flex; align-items: center; justify-content: center;
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
}
|
|
|
|
|
.delete-icon-sm { font-size: 22rpx; color: #dc2626; }
|
|
|
|
|
.file-uploading {
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
.uploading-text { font-size: 22rpx; color: #2563eb; }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.attachment-add-file {
|
|
|
|
|
display: flex; align-items: center; justify-content: center; gap: 10rpx;
|
|
|
|
|
height: 88rpx; background: #fff; border: 2rpx dashed #cbd5e1;
|
|
|
|
|
border-radius: 12rpx;
|
|
|
|
|
}
|
|
|
|
|
.add-icon { font-size: 32rpx; }
|
|
|
|
|
.add-text { font-size: 26rpx; color: #6b7280; }
|
|
|
|
|
|
|
|
|
|
/* 底部操作栏 */
|
|
|
|
|
.bottom-actions {
|
|
|
|
|
position: fixed; left: 0; right: 0; bottom: 0; display: flex; gap: 18rpx;
|
|
|
|
|
padding: 18rpx 24rpx calc(18rpx + env(safe-area-inset-bottom));
|
|
|
|
|
background: #ffffff; box-shadow: 0 -8rpx 24rpx rgba(15, 23, 42, 0.06); z-index: 99;
|
|
|
|
|
}
|
|
|
|
|
.bottom-btn { flex: 1; height: 84rpx; line-height: 84rpx; text-align: center; border-radius: 16rpx; font-size: 30rpx; font-weight: 600;
|
|
|
|
|
&:active { opacity: 0.85; }
|
|
|
|
|
}
|
|
|
|
|
.cancel-btn { background: #eef2f7; color: #475569; }
|
|
|
|
|
.confirm-btn { background: #1f4b79; color: #ffffff; }
|
|
|
|
|
.item-info { flex: 1; min-width: 0; }
|
|
|
|
|
.item-header { display: flex; align-items: center; gap: 12rpx; margin-bottom: 14rpx; }
|
|
|
|
|
.item-name { flex: 1; min-width: 0; font-size: 30rpx; font-weight: 600; color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
|
|
.delete-btn { width: 48rpx; height: 48rpx; border-radius: 24rpx; background: #fef2f2; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
|
|
|
|
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12rpx; }
|
|
|
|
|
.info-cell { min-width: 0; display: flex; flex-direction: column; gap: 4rpx; }
|
|
|
|
|
.info-label { font-size: 22rpx; color: #9ca3af; }
|
|
|
|
|
.info-value { font-size: 26rpx; color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
|
|
.empty-card { min-height: 220rpx; border: 2rpx dashed #d7dde8; border-radius: 18rpx; background: #f8fafc; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14rpx; color: #94a3b8; font-size: 27rpx; }
|
|
|
|
|
.action-bar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; gap: 18rpx; padding: 18rpx 24rpx calc(18rpx + env(safe-area-inset-bottom)); background: #ffffff; box-shadow: 0 -8rpx 24rpx rgba(15, 23, 42, 0.06); z-index: 99; }
|
|
|
|
|
.action-btn { flex: 1; height: 84rpx; border-radius: 16rpx; display: flex; align-items: center; justify-content: center; font-size: 30rpx; font-weight: 600; }
|
|
|
|
|
.back-btn { background: #eef2f7; color: #475569; }
|
|
|
|
|
.submit-btn { background: #1f4b79; color: #ffffff; }
|
|
|
|
|
</style>
|
|
|
|
|
|
zhongwenkai
3 days ago