<template>
|
<view class="stock-detail-page">
|
<PageHeader :title="operationType === 'add' ? '新增入库' : '编辑入库'" @back="goBack" />
|
|
<u-form ref="formRef" :model="form" :rules="rules" label-width="140rpx">
|
<!-- 基本信息 -->
|
<view class="form-section">
|
<view class="section-title">基本信息</view>
|
|
<u-form-item prop="supplierName" label="供应商" required>
|
<u-input
|
v-model="form.supplierName"
|
placeholder="请输入供应商名称"
|
clearable
|
/>
|
</u-form-item>
|
|
<u-form-item prop="productCategory" label="产品大类" required>
|
<u-input
|
v-model="form.productCategory"
|
placeholder="请输入产品大类"
|
clearable
|
/>
|
</u-form-item>
|
|
<u-form-item prop="specificationModel" label="规格型号" required>
|
<u-input
|
v-model="form.specificationModel"
|
placeholder="请输入规格型号"
|
clearable
|
/>
|
</u-form-item>
|
|
<u-form-item prop="unit" label="单位" required>
|
<u-input
|
v-model="form.unit"
|
placeholder="请输入单位"
|
clearable
|
/>
|
</u-form-item>
|
|
<u-form-item prop="itemType" label="物品类型" required>
|
<u-input
|
v-model="form.itemType"
|
readonly
|
placeholder="请选择物品类型"
|
@click="showItemTypePicker = true"
|
/>
|
<template #right>
|
<up-icon name="arrow-right" @click="showItemTypePicker = true"></up-icon>
|
</template>
|
</u-form-item>
|
|
<u-form-item prop="inboundDate" label="入库日期" required>
|
<u-input
|
v-model="form.inboundDate"
|
readonly
|
placeholder="请选择入库日期"
|
@click="showDatePicker = true"
|
/>
|
<template #right>
|
<up-icon name="calendar" @click="showDatePicker = true"></up-icon>
|
</template>
|
</u-form-item>
|
</view>
|
|
<!-- 数量和价格 -->
|
<view class="form-section">
|
<view class="section-title">数量和价格</view>
|
|
<u-form-item prop="inboundNum" label="入库数量" required>
|
<u-input
|
v-model="form.inboundNum"
|
type="number"
|
placeholder="请输入入库数量"
|
@blur="calculateTotalPrice"
|
/>
|
</u-form-item>
|
|
<u-form-item prop="taxInclusiveUnitPrice" label="含税单价" required>
|
<u-input
|
v-model="form.taxInclusiveUnitPrice"
|
type="digit"
|
placeholder="请输入含税单价"
|
@blur="calculateTotalPrice"
|
/>
|
</u-form-item>
|
|
<u-form-item prop="taxInclusiveTotalPrice" label="含税总价">
|
<u-input
|
v-model="form.taxInclusiveTotalPrice"
|
type="digit"
|
placeholder="自动计算"
|
disabled
|
/>
|
</u-form-item>
|
|
<u-form-item prop="taxRate" label="税率(%)" required>
|
<u-input
|
v-model="form.taxRate"
|
readonly
|
placeholder="请选择税率"
|
@click="showTaxRatePicker = true"
|
/>
|
<template #right>
|
<up-icon name="arrow-right" @click="showTaxRatePicker = true"></up-icon>
|
</template>
|
</u-form-item>
|
|
<u-form-item prop="taxExclusiveTotalPrice" label="不含税总价">
|
<u-input
|
v-model="form.taxExclusiveTotalPrice"
|
type="digit"
|
placeholder="自动计算"
|
disabled
|
/>
|
</u-form-item>
|
</view>
|
</u-form>
|
|
<!-- 底部按钮 -->
|
<view class="footer-btns">
|
<u-button class="cancel-btn" @click="goBack">取消</u-button>
|
<u-button class="save-btn" @click="submitForm">保存</u-button>
|
</view>
|
|
<!-- 物品类型选择器 -->
|
<up-action-sheet
|
:show="showItemTypePicker"
|
:actions="itemTypeOptions"
|
title="选择物品类型"
|
@select="onItemTypeSelect"
|
@close="showItemTypePicker = false"
|
/>
|
|
<!-- 税率选择器 -->
|
<up-action-sheet
|
:show="showTaxRatePicker"
|
:actions="taxRateOptions"
|
title="选择税率"
|
@select="onTaxRateSelect"
|
@close="showTaxRatePicker = false"
|
/>
|
|
<!-- 日期选择器 -->
|
<up-popup :show="showDatePicker" mode="bottom" @close="showDatePicker = false">
|
<up-datetime-picker
|
:show="true"
|
v-model="dateValue"
|
@confirm="onDateConfirm"
|
@cancel="showDatePicker = false"
|
mode="date"
|
/>
|
</up-popup>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref, reactive, toRefs, onMounted } from 'vue'
|
import { onLoad } from '@dcloudio/uni-app'
|
import PageHeader from '@/components/PageHeader.vue'
|
import { formatDateToYMD } from '@/utils/ruoyi'
|
import {
|
addStockInCustom,
|
updateStockInCustom
|
} from "@/api/inventoryManagement/stockIn.js"
|
|
const formRef = ref(null)
|
const operationType = ref('add')
|
const showItemTypePicker = ref(false)
|
const showTaxRatePicker = ref(false)
|
const showDatePicker = ref(false)
|
const dateValue = ref(new Date().getTime())
|
|
const data = reactive({
|
form: {
|
supplierName: '',
|
productCategory: '',
|
specificationModel: '',
|
unit: '',
|
itemType: '',
|
inboundDate: '',
|
inboundNum: '',
|
taxInclusiveUnitPrice: '',
|
taxInclusiveTotalPrice: '',
|
taxRate: '',
|
taxExclusiveTotalPrice: '',
|
},
|
rules: {
|
supplierName: [{ required: true, message: '请输入供应商名称', trigger: 'blur' }],
|
productCategory: [{ required: true, message: '请输入产品大类', trigger: 'blur' }],
|
specificationModel: [{ required: true, message: '请输入规格型号', trigger: 'blur' }],
|
unit: [{ required: true, message: '请输入单位', trigger: 'blur' }],
|
itemType: [{ required: true, message: '请选择物品类型', trigger: 'change' }],
|
inboundDate: [{ required: true, message: '请选择入库日期', trigger: 'change' }],
|
inboundNum: [{ required: true, message: '请输入入库数量', trigger: 'blur' }],
|
taxInclusiveUnitPrice: [{ required: true, message: '请输入含税单价', trigger: 'blur' }],
|
taxRate: [{ required: true, message: '请选择税率', trigger: 'change' }],
|
},
|
})
|
const { form, rules } = toRefs(data)
|
|
// 物品类型选项
|
const itemTypeOptions = ref([
|
{ name: '原材料', value: '原材料' },
|
{ name: '半成品', value: '半成品' },
|
{ name: '成品', value: '成品' },
|
{ name: '辅料', value: '辅料' },
|
{ name: '包装物', value: '包装物' },
|
{ name: '其他', value: '其他' },
|
])
|
|
// 税率选项
|
const taxRateOptions = ref([
|
{ name: '0%', value: 0 },
|
{ name: '1%', value: 1 },
|
{ name: '3%', value: 3 },
|
{ name: '6%', value: 6 },
|
{ name: '9%', value: 9 },
|
{ name: '13%', value: 13 },
|
])
|
|
// 返回上一页
|
const goBack = () => {
|
uni.removeStorageSync('stockInEditRow')
|
uni.navigateBack()
|
}
|
|
// 物品类型选择
|
const onItemTypeSelect = (item) => {
|
form.value.itemType = item.value
|
showItemTypePicker.value = false
|
}
|
|
// 税率选择
|
const onTaxRateSelect = (item) => {
|
form.value.taxRate = item.value
|
showTaxRatePicker.value = false
|
calculateExclusivePrice()
|
}
|
|
// 日期选择确认
|
const onDateConfirm = (e) => {
|
form.value.inboundDate = formatDateToYMD(e.value)
|
showDatePicker.value = false
|
}
|
|
// 计算含税总价
|
const calculateTotalPrice = () => {
|
const num = parseFloat(form.value.inboundNum) || 0
|
const price = parseFloat(form.value.taxInclusiveUnitPrice) || 0
|
form.value.taxInclusiveTotalPrice = (num * price).toFixed(2)
|
calculateExclusivePrice()
|
}
|
|
// 计算不含税总价
|
const calculateExclusivePrice = () => {
|
const totalPrice = parseFloat(form.value.taxInclusiveTotalPrice) || 0
|
const taxRate = parseFloat(form.value.taxRate) || 0
|
form.value.taxExclusiveTotalPrice = (totalPrice / (1 + taxRate / 100)).toFixed(2)
|
}
|
|
// 提交表单
|
const submitForm = () => {
|
formRef.value.validate().then(() => {
|
uni.showLoading({
|
title: '保存中...',
|
mask: true
|
})
|
|
const apiCall = operationType.value === 'add' ? addStockInCustom : updateStockInCustom
|
|
apiCall(form.value).then(() => {
|
uni.hideLoading()
|
uni.showToast({
|
title: '保存成功',
|
icon: 'success'
|
})
|
setTimeout(() => {
|
goBack()
|
}, 1500)
|
}).catch(() => {
|
uni.hideLoading()
|
uni.showToast({
|
title: '保存失败',
|
icon: 'none'
|
})
|
})
|
}).catch(() => {
|
uni.showToast({
|
title: '请填写完整信息',
|
icon: 'none'
|
})
|
})
|
}
|
|
onLoad((options) => {
|
if (options.type) {
|
operationType.value = options.type
|
}
|
|
// 编辑模式，加载数据
|
if (operationType.value === 'edit') {
|
const storedData = uni.getStorageSync('stockInEditRow')
|
if (storedData) {
|
const row = JSON.parse(storedData)
|
form.value = { ...row }
|
}
|
} else {
|
// 新增模式，设置默认日期
|
form.value.inboundDate = formatDateToYMD(new Date())
|
}
|
})
|
</script>
|
|
<style scoped lang="scss">
|
.stock-detail-page {
|
min-height: 100vh;
|
background: #f5f5f5;
|
padding-bottom: 80px;
|
}
|
|
.form-section {
|
background: #fff;
|
margin-bottom: 12px;
|
padding: 16px;
|
}
|
|
.section-title {
|
font-size: 16px;
|
font-weight: 600;
|
color: #333;
|
margin-bottom: 16px;
|
padding-left: 12px;
|
border-left: 4px solid #2979ff;
|
}
|
|
.footer-btns {
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
display: flex;
|
gap: 12px;
|
padding: 12px 16px;
|
background: #fff;
|
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
|
z-index: 999;
|
}
|
|
.cancel-btn {
|
flex: 1;
|
background: #f5f5f5;
|
color: #666;
|
border: none;
|
}
|
|
.save-btn {
|
flex: 1;
|
background: #2979ff;
|
color: #fff;
|
border: none;
|
}
|
</style>
|
