From 025e46e11cb2962fd7692adfa401333758cc779b Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 02 九月 2025 14:00:34 +0800
Subject: [PATCH] 修改组件
---
src/pages/procurementManagement/invoiceEntry/add.vue | 771 +++++++++++++++++++++-------------------------------------
1 files changed, 278 insertions(+), 493 deletions(-)
diff --git a/src/pages/procurementManagement/invoiceEntry/add.vue b/src/pages/procurementManagement/invoiceEntry/add.vue
index 54a3ede..a68d6fb 100644
--- a/src/pages/procurementManagement/invoiceEntry/add.vue
+++ b/src/pages/procurementManagement/invoiceEntry/add.vue
@@ -1,208 +1,213 @@
<template>
- <view class="account-detail">
- <!-- 浣跨敤閫氱敤椤甸潰澶撮儴缁勪欢 -->
- <PageHeader title="鏂板鏉ョエ鐧昏" @back="goBack" />
-
- <!-- 琛ㄥ崟鍐呭 -->
- <van-form @submit="submitForm" ref="formRef" label-width="110px" input-align="right" error-message-align="right" scroll-to-error scroll-to-error-position="center">
- <!-- 鍩烘湰淇℃伅 -->
- <van-cell-group title="鍩烘湰淇℃伅" inset>
- <van-field
- v-model="form.purchaseLedgerNo"
- label="閲囪喘鍚堝悓鍙�"
- readonly
- placeholder="鑷姩濉厖"
- />
- <van-field
- v-model="form.salesContractNo"
- label="閿�鍞悎鍚屽彿"
- readonly
- placeholder="鑷姩濉厖"
- />
- <van-field
- v-model="form.supplierName"
- label="渚涘簲鍟嗗悕绉�"
- readonly
- placeholder="鑷姩濉厖"
- />
- <van-field
- v-model="form.projectName"
- label="椤圭洰鍚嶇О"
- readonly
- placeholder="鑷姩濉厖"
- />
- <van-field
- v-model="form.issUer"
- label="褰曞叆浜�"
- readonly
- placeholder="璇疯緭鍏ュ綍鍏ヤ汉"
- />
- <van-field
- v-model="form.enterDate"
- label="褰曞叆鏃ユ湡"
- readonly
- placeholder="璇烽�夋嫨褰曞叆鏃ユ湡"
- @click="showCreateTimePicker = true"
- />
- <van-field
- v-model="form.invoiceNumber"
- label="鍙戠エ鍙风爜"
+ <view class="invoice-add">
+ <!-- 浣跨敤閫氱敤椤甸潰澶撮儴缁勪欢 -->
+ <PageHeader title="鏂板鍙戠エ" @back="goBack" />
+
+ <!-- 琛ㄥ崟鍐呭 -->
+ <u-form @submit="submitForm" ref="formRef" label-width="110" input-align="right" error-message-align="right">
+ <!-- 鍩烘湰淇℃伅 -->
+ <view class="form-section">
+ <u-form-item label="閲囪喘鍚堝悓鍙�" prop="purchaseLedgerNo" required>
+ <u-input v-model="form.purchaseLedgerNo" placeholder="鑷姩濉厖" disabled />
+ </u-form-item>
+ <u-form-item label="閿�鍞悎鍚屽彿" prop="salesContractNo" required>
+ <u-input v-model="form.salesContractNo" placeholder="鑷姩濉厖" disabled />
+ </u-form-item>
+ <u-form-item label="渚涘簲鍟嗗悕绉�" prop="supplierName" required>
+ <u-input v-model="form.supplierName" placeholder="鑷姩濉厖" disabled />
+ </u-form-item>
+ <u-form-item label="椤圭洰鍚嶇О" prop="projectName" required>
+ <u-input v-model="form.projectName" placeholder="鑷姩濉厖" disabled />
+ </u-form-item>
+ <u-form-item label="鍙戠エ鍙�" prop="invoiceNumber" required>
+ <u-input v-model="form.invoiceNumber" placeholder="璇疯緭鍏�" clearable />
+ </u-form-item>
+ <u-form-item label="鍙戠エ閲戦(鍏�)" prop="invoiceAmount" required>
+ <u-input v-model="form.invoiceAmount" type="number" placeholder="鑷姩濉厖" disabled />
+ </u-form-item>
+ <u-form-item label="褰曞叆浜�">
+ <u-input v-model="form.issUer" placeholder="鑷姩濉厖" disabled />
+ </u-form-item>
+ <u-form-item
+ label="寮�绁ㄦ棩鏈�"
+ prop="entryDate"
required
- placeholder="璇疯緭鍏ュ彂绁ㄥ彿鐮�"
- :rules="[{ required: true, message: '璇疯緭鍏ュ彂绁ㄥ彿鐮�' }]"
- />
- <van-field
- v-model="form.invoiceAmount"
- label="鍙戠エ閲戦(鍏�)"
+ @click="showEntryDatePicker = true"
+ >
+ <u-input
+ v-model="form.entryDate"
+ placeholder="璇烽�夋嫨寮�绁ㄦ棩鏈�"
+ readonly
+ @click="showEntryDatePicker = true"
+ />
+ <template #right>
+ <u-icon name="arrow-right" @click="showEntryDatePicker = true"></u-icon>
+ </template>
+ </u-form-item>
+ <u-form-item
+ label="褰曞叆鏃ユ湡"
+ prop="enterDate"
required
- readonly
- placeholder="鑷姩濉厖"
- :rules="[{ required: true, message: '璇疯緭鍏ュ彂绁ㄥ彿鐮�' }]"
- />
- <van-field
- v-model="form.issueDate"
- label="鏉ョエ鏃ユ湡"
- readonly
- placeholder="璇烽�夋嫨鏉ョエ鏃ユ湡"
- required
- @click="showIssueDatePicker = true"
- :rules="[{ required: true, message: '璇烽�夋嫨鏉ョエ鏃ユ湡' }]"
- />
- </van-cell-group>
-
- <!-- 浜у搧淇℃伅 -->
- <view class="product-section">
- <view class="section-header">
- <text class="section-title">浜у搧淇℃伅</text>
- </view>
-
- <view v-if="productData.length === 0" class="empty-state">
- <van-empty description="鏆傛棤浜у搧鏁版嵁" />
- </view>
-
- <view v-else class="product-list">
- <view
- v-for="(item, index) in productData"
- :key="index"
- class="product-card"
- >
- <!-- 浜у搧澶撮儴 -->
- <view class="product-header">
- <view class="product-title">
- <van-icon name="description" color="#2979ff" size="15" />
- <text class="product-productCategory">浜у搧 {{ index + 1 }}</text>
- </view>
- </view>
-
- <!-- 浜у搧淇℃伅琛ㄥ崟 -->
- <view class="product-form">
- <van-field
- v-model="item.productCategory"
- label="浜у搧澶х被"
- readonly
- />
- <van-field
- v-model="item.specificationModel"
- label="瑙勬牸鍨嬪彿"
- readonly
- />
- <van-field
- v-model="item.unit"
- label="鍗曚綅"
- readonly
- />
- <van-field
- v-model="item.quantity"
- label="鏁伴噺"
- readonly
- />
- <van-field
- v-model="item.taxRate"
- label="绋庣巼(%)"
- readonly
- />
- <van-field
- v-model="item.taxInclusiveUnitPrice"
- label="鍚◣鍗曚环(鍏�)"
- readonly
- />
- <van-field
- v-model="item.taxInclusiveTotalPrice"
- label="鍚◣鎬讳环(鍏�)"
- readonly
- />
- <van-field
- v-model="item.taxExclusiveTotalPrice"
- label="涓嶅惈绋庢�讳环(鍏�)"
- readonly
- />
-
- <!-- 鏈鏉ョエ淇℃伅 -->
- <van-field
- v-model="item.ticketsNum"
- label="鏈鏉ョエ鏁�"
- type="number"
- placeholder="璇疯緭鍏ユ潵绁ㄦ暟閲�"
- @blur="invoiceNumBlur(item)"
- />
- <van-field
- v-model="item.ticketsAmount"
- label="鏈鏉ョエ閲戦(鍏�)"
- type="number"
- placeholder="璇疯緭鍏ユ潵绁ㄩ噾棰�"
- @blur="invoiceAmountBlur(item)"
- />
-
- <!-- 鏈潵绁ㄤ俊鎭� -->
- <van-field
- v-model="item.futureTickets"
- label="鏈潵绁ㄦ暟"
- readonly
- />
- <van-field
- v-model="item.futureTicketsAmount"
- label="鏈潵绁ㄩ噾棰�(鍏�)"
- readonly
- />
- </view>
- </view>
- </view>
- </view>
-
- <!-- 鎻愪氦鎸夐挳 -->
- <view class="footer-btns">
- <van-button class="cancel-btn" @click="goBack">鍙栨秷</van-button>
- <van-button class="save-btn" native-type="submit" form-type="submit">淇濆瓨</van-button>
+ @click="showEnterDatePicker = true"
+ >
+ <u-input
+ v-model="form.enterDate"
+ placeholder="璇烽�夋嫨褰曞叆鏃ユ湡"
+ readonly
+ @click="showEnterDatePicker = true"
+ />
+ <template #right>
+ <u-icon name="arrow-right" @click="showEnterDatePicker = true"></u-icon>
+ </template>
+ </u-form-item>
</view>
- </van-form>
+
+ <!-- 浜у搧淇℃伅 -->
+ <view class="product-section">
+ <view class="section-header">
+ <view>
+ <text class="section-title">浜у搧淇℃伅</text>
+ </view>
+ </view>
+
+ <view v-if="!productData || productData.length === 0" class="empty-state">
+ <view class="empty-text">鏆傛棤浜у搧鏁版嵁</view>
+ </view>
+
+ <view v-else class="product-list">
+ <view
+ v-for="(item, index) in productData"
+ :key="index"
+ class="product-card"
+ >
+ <!-- 浜у搧澶撮儴 -->
+ <view class="product-header">
+ <view class="product-title">
+ <view class="document-icon">
+ <u-icon name="file-text" size="16" color="#ffffff"></u-icon>
+ </view>
+ <text class="product-productCategory">浜у搧 {{ index + 1 }}</text>
+ </view>
+ </view>
+
+ <!-- 浜у搧淇℃伅琛ㄥ崟 -->
+ <view class="product-form">
+ <u-form-item label="浜у搧澶х被" prop="productCategory" border-bottom>
+ <u-input v-model="item.productCategory" placeholder="" disabled />
+ </u-form-item>
+ <u-form-item label="瑙勬牸鍨嬪彿" prop="specificationModel" border-bottom>
+ <u-input v-model="item.specificationModel" placeholder="" disabled />
+ </u-form-item>
+ <u-form-item label="鍗曚綅" prop="unit" border-bottom>
+ <u-input v-model="item.unit" placeholder="" disabled />
+ </u-form-item>
+ <u-form-item label="鏁伴噺" prop="quantity" border-bottom>
+ <u-input v-model="item.quantity" placeholder="" disabled />
+ </u-form-item>
+ <u-form-item label="绋庣巼(%)" prop="taxRate" border-bottom>
+ <u-input v-model="item.taxRate" placeholder="" disabled />
+ </u-form-item>
+ <u-form-item label="褰曞叆鏃ユ湡" prop="registerDate" border-bottom>
+ <u-input v-model="item.registerDate" placeholder="" disabled />
+ </u-form-item>
+ <u-form-item label="鍚◣鍗曚环(鍏�)" prop="taxInclusiveUnitPrice" border-bottom>
+ <u-input v-model="item.taxInclusiveUnitPrice" placeholder="" disabled />
+ </u-form-item>
+ <u-form-item label="鍚◣鎬讳环(鍏�)" prop="taxInclusiveTotalPrice" border-bottom>
+ <u-input v-model="item.taxInclusiveTotalPrice" placeholder="" disabled />
+ </u-form-item>
+ <u-form-item label="涓嶅惈绋庢�讳环(鍏�)" prop="taxExclusiveTotalPrice" border-bottom>
+ <u-input v-model="item.taxExclusiveTotalPrice" placeholder="" disabled />
+ </u-form-item>
+
+ <!-- 鏈鏉ョエ淇℃伅 -->
+ <u-form-item label="鏈鏉ョエ鏁�" prop="ticketsNum" border-bottom>
+ <u-input
+ v-model="item.ticketsNum"
+ type="number"
+ placeholder="璇疯緭鍏ユ潵绁ㄦ暟閲�"
+ @blur="invoiceNumBlur(item)"
+ />
+ </u-form-item>
+ <u-form-item label="鏈鏉ョエ閲戦(鍏�)" prop="ticketsAmount" border-bottom>
+ <u-input
+ v-model="item.ticketsAmount"
+ type="number"
+ placeholder="璇疯緭鍏ユ潵绁ㄩ噾棰�"
+ @blur="invoiceAmountBlur(item)"
+ />
+ </u-form-item>
+
+ <!-- 鏈潵绁ㄤ俊鎭� -->
+ <u-form-item label="鏈潵绁ㄦ暟" prop="futureTickets" border-bottom>
+ <u-input v-model="item.futureTickets" placeholder="" disabled />
+ </u-form-item>
+ <u-form-item label="鏈潵绁ㄩ噾棰�(鍏�)" prop="futureTicketsAmount" border-bottom>
+ <u-input v-model="item.futureTicketsAmount" placeholder="" disabled />
+ </u-form-item>
+ </view>
+ </view>
+ </view>
+ </view>
+
+ <!-- 浣跨敤FooterButtons缁勪欢 -->
+ <FooterButtons
+ @cancel="goBack"
+ @confirm="submitForm"
+ :loading="submitting"
+ />
- <!-- 鏃ユ湡閫夋嫨鍣� -->
- <van-popup v-model:show="showIssueDatePicker" position="bottom">
- <van-date-picker
- v-model="currentIssueDate"
- title="閫夋嫨鏉ョエ鏃ユ湡"
- @confirm="onIssueDateConfirm"
- @cancel="showIssueDatePicker = false"
- />
- </van-popup>
+ <!-- 涓哄簳閮ㄦ寜閽暀鍑虹┖闂� -->
+ <view style="height: 80px;"></view>
+ </u-form>
- <van-popup v-model:show="showCreateTimePicker" position="bottom">
- <van-date-picker
- v-model="currentCreateTime"
- title="閫夋嫨褰曞叆鏃ユ湡"
- @confirm="onCreateTimeConfirm"
- @cancel="showCreateTimePicker = false"
- />
- </van-popup>
- </view>
+ <!-- 寮�绁ㄦ棩鏈熼�夋嫨鍣� -->
+ <u-popup :show="showEntryDatePicker" mode="bottom" @close="showEntryDatePicker = false">
+ <u-datetime-picker
+ :show="true"
+ v-model="entryDateValue"
+ @confirm="onEntryDateConfirm"
+ @cancel="showEntryDatePicker = false"
+ mode="date"
+ />
+ </u-popup>
+
+ <!-- 褰曞叆鏃ユ湡閫夋嫨鍣� -->
+ <u-popup :show="showEnterDatePicker" mode="bottom" @close="showEnterDatePicker = false">
+ <u-datetime-picker
+ :show="true"
+ v-model="enterDateValue"
+ @confirm="onEnterDateConfirm"
+ @cancel="showEnterDatePicker = false"
+ mode="date"
+ />
+ </u-popup>
+ </view>
</template>
<script setup>
import { ref, onMounted } from 'vue'
-import { showToast, showLoadingToast, closeToast } from 'vant'
+import FooterButtons from '@/components/FooterButtons.vue'
+const showToast = (message) => {
+ uni.showToast({
+ title: message,
+ icon: 'none'
+ })
+}
+
+const showLoadingToast = (message) => {
+ uni.showLoading({
+ title: message || '鍔犺浇涓�...'
+ })
+}
+
+const closeToast = () => {
+ uni.hideLoading()
+}
import useUserStore from '@/store/modules/user'
import {addOrUpdateRegistration, getPurchaseNoById} from "@/api/procurementManagement/invoiceEntry";
import {getInfo} from "@/api/procurementManagement/invoiceEntry.js";
+import { formatDateToYMD } from '@/utils/ruoyi'
const userStore = useUserStore()
const editData = ref(null);
@@ -217,20 +222,27 @@
supplierName: '',
projectName: '',
issUer: '',
- issueDate: '',
+ entryDate: '',
enterDate: '',
- invoiceAmount: '',
- invoiceNumber: ''
+ invoiceAmount: '',
+ invoiceNumber: '',
+ fileIds: []
})
// 浜у搧鏁版嵁
const productData = ref([])
+// 鏂囦欢涓婁紶鐩稿叧
+const action = ref('/dev-api/common/upload')
+const getToken = () => {
+ return userStore.token || ''
+}
+
// 鏃ユ湡閫夋嫨鍣ㄧ姸鎬�
-const showIssueDatePicker = ref(false)
-const showCreateTimePicker = ref(false)
-const currentIssueDate = ref([new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()])
-const currentCreateTime = ref([new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()])
+const showEntryDatePicker = ref(false)
+const showEnterDatePicker = ref(false)
+const entryDateValue = ref(Date.now())
+const enterDateValue = ref(Date.now())
// 鎻愪氦鐘舵��
const submitting = ref(false)
@@ -248,23 +260,34 @@
return Number(value).toFixed(precision)
}
+// 鏇存柊鏈潵绁ㄦ暟鎹�
+const updateFutureTicketData = (row) => {
+ const totalQuantity = parseFloat(row.quantity) || 0
+ const currentTicketNum = parseFloat(row.ticketsNum) || 0
+ const totalAmount = parseFloat(row.taxInclusiveTotalPrice) || 0
+ const currentTicketAmount = parseFloat(row.ticketsAmount) || 0
+
+ row.futureTickets = Math.max(0, totalQuantity - currentTicketNum).toFixed(2)
+ row.futureTicketsAmount = Math.max(0, totalAmount - currentTicketAmount).toFixed(2)
+}
+
// 鏉ョエ鏁伴噺鍙樺寲澶勭悊
const invoiceNumBlur = (row) => {
if (!row.ticketsNum || row.ticketsNum === "") {
- row.ticketsNum = 0;
- }
- if (Number(row.ticketsNum) > Number(row.tempFutureTickets)) {
- showToast('鏈鏉ョエ鏁颁笉寰楀ぇ浜庢湭鏉ョエ鏁�');
- row.ticketsNum = 0;
- return;
- }
- // 璁＄畻鏈鏉ョエ閲戦
- row.ticketsAmount = (row.ticketsNum * row.taxInclusiveUnitPrice).toFixed(2)
- // 璁＄畻鏈潵绁ㄦ暟
- row.futureTickets = (row.tempFutureTickets - row.ticketsNum).toFixed(2)
- // 璁＄畻鏈潵绁ㄩ噾棰�
- row.futureTicketsAmount = (row.tempFutureTicketsAmount - row.ticketsAmount).toFixed(2)
- calculateinvoiceAmount();
+ row.ticketsNum = 0;
+ }
+ if (Number(row.ticketsNum) > Number(row.tempFutureTickets)) {
+ showToast("鏈寮�绁ㄦ暟涓嶅緱澶т簬鏈紑绁ㄦ暟");
+ row.ticketsNum = 0;
+ return;
+ }
+ // 璁＄畻鏈鏉ョエ閲戦
+ row.ticketsAmount = row.ticketsNum * row.taxInclusiveUnitPrice;
+ // 璁＄畻鏈潵绁ㄦ暟
+ row.futureTickets = row.tempFutureTickets - row.ticketsNum;
+ // 璁＄畻鏈潵绁ㄩ噾棰�
+ row.futureTicketsAmount = row.tempFutureTicketsAmount - row.ticketsAmount;
+ calculateinvoiceAmount();
}
// 鏉ョエ閲戦鍙樺寲澶勭悊
@@ -273,18 +296,16 @@
row.ticketsAmount = 0;
}
// 璁＄畻鏄惁瓒呰繃鏉ョエ鎬婚噾棰�
- if (row.ticketsAmount > row.tempFutureTicketsAmount) {
- showToast('鏈鏉ョエ閲戦涓嶅緱澶т簬鏈潵绁ㄩ噾棰�');
+ if (Number(row.ticketsAmount) > Number(row.taxInclusiveTotalPrice)) {
+ showToast('鏈鏉ョエ閲戦涓嶅緱澶т簬鍚◣鎬婚噾棰�');
row.ticketsAmount = 0;
}
// 璁＄畻鏈鏉ョエ鏁�
row.ticketsNum = Number(
(row.ticketsAmount / row.taxInclusiveUnitPrice).toFixed(2)
);
- // 璁＄畻鏈潵绁ㄦ暟
- row.futureTickets = (row.tempFutureTickets - row.ticketsNum).toFixed(2)
- // 璁＄畻鏈潵绁ㄩ噾棰�
- row.futureTicketsAmount = (row.tempFutureTicketsAmount - row.ticketsAmount).toFixed(2)
+ // 璁＄畻鏈潵绁ㄦ暟鍜屾湭鏉ョエ閲戦
+ updateFutureTicketData(row)
calculateinvoiceAmount();
}
@@ -296,44 +317,39 @@
}
});
form.value.invoiceAmount = invoiceAmountTotal.toFixed(2);
-};
+}
-// 鏉ョエ鏃ユ湡纭
-const onIssueDateConfirm = ({ selectedValues }) => {
- form.value.issueDate = selectedValues.join('-');
- currentIssueDate.value = selectedValues;
- showIssueDatePicker.value = false;
+// 鏂囦欢涓婁紶鎴愬姛鍥炶皟
+const uploadSuccess = (res) => {
+ if (res && res.data && res.data.fileId) {
+ form.value.fileIds.push(res.data.fileId)
+ }
+}
+
+// 鏂囦欢鍒犻櫎鍥炶皟
+const removeFile = (index, file) => {
+ if (file.fileId) {
+ const fileIndex = form.value.fileIds.indexOf(file.fileId)
+ if (fileIndex > -1) {
+ form.value.fileIds.splice(fileIndex, 1)
+ }
+ }
+}
+
+
+
+// 寮�绁ㄦ棩鏈熺‘璁�
+const onEntryDateConfirm = (e) => {
+ form.value.entryDate = formatDateToYMD(e.value)
+ entryDateValue.value = e.value
+ showEntryDatePicker.value = false;
};
// 褰曞叆鏃ユ湡纭
-const onCreateTimeConfirm = (value) => {
- try {
- // 澶勭悊涓嶅悓鐨勫�兼牸寮�
- let year, month, day;
-
- if (Array.isArray(value)) {
- // 鏁扮粍鏍煎紡 [year, month, day]
- [year, month, day] = value;
- } else if (value && typeof value === 'object') {
- // Date瀵硅薄鏍煎紡
- year = value.getFullYear();
- month = value.getMonth() + 1;
- day = value.getDate();
- } else {
- // 鍏朵粬鏍煎紡锛屼娇鐢ㄥ綋鍓嶆棩鏈�
- const now = new Date();
- year = now.getFullYear();
- month = now.getMonth() + 1;
- day = now.getDate();
- }
-
- form.value.enterDate = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
- form.value.issueDate = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
- showCreateTimePicker.value = false;
- } catch (error) {
- console.error('鏃ユ湡澶勭悊閿欒:', error);
- showToast('鏃ユ湡閫夋嫨澶辫触锛岃閲嶈瘯');
- }
+const onEnterDateConfirm = (e) => {
+ form.value.enterDate = formatDateToYMD(e.value)
+ enterDateValue.value = e.value
+ showEnterDatePicker.value = false;
}
// 鏍煎紡鍖栨棩鏈�
@@ -364,7 +380,7 @@
// 璁剧疆榛樿鏃ユ湡
const today = new Date()
form.value.enterDate = formatDate(today)
- form.value.issueDate = formatDate(today)
+ form.value.entryDate = formatDate(today)
closeToast()
} catch (error) {
@@ -377,6 +393,12 @@
const submitForm = async () => {
try {
submitting.value = true
+
+ // 楠岃瘉鍙戠エ鍙锋槸鍚﹀～鍐�
+ if (!form.value.invoiceNumber) {
+ showToast('璇疯緭鍏ュ彂绁ㄥ彿')
+ return
+ }
// 楠岃瘉浜у搧鏁版嵁
if (productData.value.length === 0) {
@@ -398,7 +420,7 @@
const submitData = {
...form.value,
- productData: productData.value
+ productData: productData.value
}
await addOrUpdateRegistration(submitData)
@@ -438,243 +460,6 @@
</script>
<style scoped lang="scss">
-.account-detail {
- min-height: 100vh;
- background: #f8f9fa;
- padding-bottom: 5rem;
-}
+@import '@/static/scss/form-common.scss';
-.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>
-
-<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>
--
Gitblit v1.9.3