<template>
|
<view class="invoice-add">
|
<!-- 使用通用页面头部组件 -->
|
<PageHeader title="新增发票" @back="goBack" />
|
|
<!-- 表单内容 -->
|
<u-form @submit="submitForm" ref="formRef" label-width="110" input-align="right" error-message-align="right">
|
<!-- 基本信息 -->
|
<u-cell-group title="基本信息">
|
<u-form-item label="采购合同号" prop="contractNo" required border-bottom>
|
<u-input v-model="form.contractNo" placeholder="请输入采购合同号" clearable />
|
</u-form-item>
|
<u-form-item label="供应商名称" prop="supplierName" required border-bottom>
|
<u-input v-model="form.supplierName" placeholder="请输入供应商名称" clearable />
|
</u-form-item>
|
<u-form-item label="发票号" prop="invoiceNo" required border-bottom>
|
<u-input v-model="form.invoiceNo" placeholder="请输入发票号" clearable />
|
</u-form-item>
|
<u-form-item label="发票金额" prop="invoiceAmount" required border-bottom>
|
<u-input v-model="form.invoiceAmount" type="number" placeholder="请输入发票金额" clearable />
|
</u-form-item>
|
<u-form-item label="税率" prop="taxRate" required border-bottom>
|
<u-input v-model="form.taxRate" placeholder="请输入税率" clearable />
|
</u-form-item>
|
<u-form-item label="开票日期" prop="issueDate" required border-bottom>
|
<u-input v-model="form.issueDate" placeholder="请选择开票日期" readonly @click="showIssueDatePicker = true" clearable />
|
</u-form-item>
|
<u-form-item label="录入人" border-bottom>
|
<u-input v-model="form.recorder" placeholder="自动填充" readonly />
|
</u-form-item>
|
<u-form-item label="创建时间" border-bottom>
|
<u-input v-model="form.createTime" placeholder="请选择创建时间" readonly @click="showCreateTimePicker = true" clearable />
|
</u-form-item>
|
</u-cell-group>
|
|
<!-- 产品信息 -->
|
<view class="product-section" v-if="!productData || productData.length === 0">
|
<u-empty description="暂无产品数据" />
|
</view>
|
|
<!-- 产品列表 -->
|
<view class="product-list" v-if="productData && productData.length > 0">
|
<view class="product-card" v-for="(product, idx) in productData" :key="idx">
|
<view class="product-header">
|
<view class="product-title">
|
<u-icon name="file-text" color="#2979ff" size="15" />
|
<text class="product-name">产品 {{ idx + 1 }}</text>
|
</view>
|
</view>
|
|
<!-- 产品信息表单 -->
|
<view class="product-form">
|
<u-form-item label="产品名称" border-bottom>
|
<u-input v-model="product.productName" placeholder="请输入产品名称" />
|
</u-form-item>
|
<u-form-item label="规格型号" border-bottom>
|
<u-input v-model="product.specification" placeholder="请输入规格型号" />
|
</u-form-item>
|
<u-form-item label="单位" border-bottom>
|
<u-input v-model="product.unit" placeholder="请输入单位" />
|
</u-form-item>
|
<u-form-item label="数量" border-bottom>
|
<u-input v-model="product.quantity" type="number" placeholder="请输入数量" />
|
</u-form-item>
|
<u-form-item label="单价" border-bottom>
|
<u-input v-model="product.unitPrice" type="number" placeholder="请输入单价" />
|
</u-form-item>
|
<u-form-item label="金额" border-bottom>
|
<u-input v-model="product.amount" type="number" placeholder="请输入金额" />
|
</u-form-item>
|
<u-form-item label="税率" border-bottom>
|
<u-input v-model="product.taxRate" placeholder="请输入税率" />
|
</u-form-item>
|
<u-form-item label="税额" border-bottom>
|
<u-input v-model="product.taxAmount" type="number" placeholder="请输入税额" />
|
</u-form-item>
|
<u-form-item label="含税金额" border-bottom>
|
<u-input v-model="product.totalAmount" type="number" placeholder="请输入含税金额" />
|
</u-form-item>
|
<u-form-item label="备注" border-bottom>
|
<u-textarea v-model="product.remark" placeholder="请输入备注" :maxlength="200" count :autoHeight="true" />
|
</u-form-item>
|
</view>
|
</view>
|
</view>
|
|
<!-- 提交按钮 -->
|
<view class="footer-btns">
|
<u-button class="cancel-btn" @click="goBack">取消</u-button>
|
<u-button class="save-btn" type="primary" @click="submitForm">保存</u-button>
|
</view>
|
</u-form>
|
|
<!-- 开票日期选择器 -->
|
<u-popup v-model="showIssueDatePicker" mode="bottom">
|
<u-datetime-picker
|
v-model="issueDateValue"
|
title="选择开票日期"
|
@confirm="onIssueDateConfirm"
|
@cancel="showIssueDatePicker = false"
|
/>
|
</u-popup>
|
|
<!-- 创建时间选择器 -->
|
<u-popup v-model="showCreateTimePicker" mode="bottom">
|
<u-datetime-picker
|
v-model="createTimeValue"
|
title="选择创建时间"
|
@confirm="onCreateTimeConfirm"
|
@cancel="showCreateTimePicker = false"
|
/>
|
</u-popup>
|
</view>
|
</template>
|
|
<script setup>
|
// 替换 Vant 的 toast 方法
|
// import { showToast, showLoadingToast, closeToast } from 'vant'
|
|
// 替换 toast 方法
|
const showToast = (message) => {
|
uni.showToast({
|
title: message,
|
icon: 'none'
|
})
|
}
|
|
const showLoadingToast = (message) => {
|
uni.showLoading({
|
title: message || '加载中...'
|
})
|
}
|
|
const closeToast = () => {
|
uni.hideLoading()
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.account-detail {
|
min-height: 100vh;
|
background: #f8f9fa;
|
padding-bottom: 5rem;
|
}
|
|
.empty-state {
|
padding: 40px 0;
|
}
|
|
.product-section {
|
background: #fff;
|
margin-top: 1rem;
|
padding: 1rem;
|
box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.04);
|
}
|
|
.section-header {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 1rem;
|
}
|
|
.section-title {
|
font-size: 1rem;
|
font-weight: 600;
|
color: #333;
|
}
|
|
.product-list {
|
.product-card {
|
background: #FFFFFF;
|
box-shadow: 0 0 1.25rem 0 rgba(0,57,117,0.08);
|
border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
|
padding: 1rem 0.5rem 0 0.5rem;
|
position: relative;
|
margin-bottom: 1rem;
|
}
|
}
|
|
.product-header {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 0 0.5rem 0.75rem 0.5rem;
|
border-bottom: 0.0625rem solid #e8e8e8;
|
}
|
|
.product-title {
|
display: flex;
|
align-items: center;
|
}
|
|
.product-productCategory {
|
margin-left: 0.5rem;
|
font-size: 0.875rem;
|
font-weight: 500;
|
color: #333;
|
}
|
|
.product-form {
|
margin-bottom: 1rem;
|
}
|
.footer-btns {
|
position: fixed;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background: #fff;
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
padding: 0.75rem 0;
|
box-shadow: 0 -0.125rem 0.5rem rgba(0,0,0,0.05);
|
z-index: 1000;
|
}
|
.cancel-btn {
|
font-weight: 400;
|
font-size: 1rem;
|
color: #FFFFFF;
|
width: 6.375rem;
|
background: #C7C9CC;
|
box-shadow: 0 0.25rem 0.625rem 0 rgba(3,88,185,0.2);
|
border-radius: 2.5rem 2.5rem 2.5rem 2.5rem;
|
}
|
.save-btn {
|
font-weight: 400;
|
font-size: 1rem;
|
color: #FFFFFF;
|
width: 14rem;
|
background: linear-gradient( 140deg, #00BAFF 0%, #006CFB 100%);
|
box-shadow: 0 0.25rem 0.625rem 0 rgba(3,88,185,0.2);
|
border-radius: 2.5rem 2.5rem 2.5rem 2.5rem;
|
}
|
// 响应式调整
|
@media (max-width: 768px) {
|
.submit-section {
|
padding: 12px;
|
}
|
}
|
</style>
|
