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/sales/invoicingRegistration/add.vue | 427 +++++++++++++++++++----------------------------------
1 files changed, 152 insertions(+), 275 deletions(-)
diff --git a/src/pages/sales/invoicingRegistration/add.vue b/src/pages/sales/invoicingRegistration/add.vue
index b87cb7b..beee939 100644
--- a/src/pages/sales/invoicingRegistration/add.vue
+++ b/src/pages/sales/invoicingRegistration/add.vue
@@ -4,72 +4,70 @@
<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">
+ <up-form @submit="submitForm" ref="formRef" label-width="130" :rules="rules" :model="form">
<!-- 鍩烘湰淇℃伅 -->
- <van-cell-group title="鍩烘湰淇℃伅" inset>
- <van-field
- v-model="form.salesContractNo"
- label="閿�鍞悎鍚屽彿"
- readonly
- placeholder="鑷姩濉厖"
- />
- <van-field
- v-model="form.customerName"
- label="瀹㈡埛鍚嶇О"
- readonly
- placeholder="鑷姩濉厖"
- />
- <van-field
- v-model="form.salesman"
- label="涓氬姟鍛�"
- readonly
- placeholder="鑷姩濉厖"
- />
- <van-field
- v-model="form.projectName"
- label="椤圭洰鍚嶇О"
- readonly
- placeholder="鑷姩濉厖"
- />
- <van-field
- v-model="form.createUer"
- label="褰曞叆浜�"
- readonly
- placeholder="璇疯緭鍏ュ綍鍏ヤ汉"
- />
- <van-field
- v-model="form.createTime"
- label="褰曞叆鏃ユ湡"
- readonly
- placeholder="璇烽�夋嫨褰曞叆鏃ユ湡"
- @click="showCreateTimePicker = true"
- />
- <van-field
- v-model="form.invoiceNo"
- label="鍙戠エ鍙风爜"
- required
- placeholder="璇疯緭鍏ュ彂绁ㄥ彿鐮�"
- :rules="[{ required: true, message: '璇疯緭鍏ュ彂绁ㄥ彿鐮�' }]"
- />
- <van-field
- v-model="form.issueDate"
- label="寮�绁ㄦ棩鏈�"
- readonly
- placeholder="璇烽�夋嫨寮�绁ㄦ棩鏈�"
- required
+ <view class="form-section">
+ <up-form-item label="閿�鍞悎鍚屽彿" prop="salesContractNo">
+ <up-input v-model="form.salesContractNo" placeholder="鑷姩濉厖" disabled />
+ </up-form-item>
+ <up-form-item label="瀹㈡埛鍚嶇О" prop="customerName">
+ <up-input v-model="form.customerName" placeholder="鑷姩濉厖" disabled />
+ </up-form-item>
+ <up-form-item label="涓氬姟鍛�" prop="salesman">
+ <up-input v-model="form.salesman" placeholder="鑷姩濉厖" disabled />
+ </up-form-item>
+ <up-form-item label="椤圭洰鍚嶇О" prop="projectName">
+ <up-input v-model="form.projectName" placeholder="鑷姩濉厖" disabled />
+ </up-form-item>
+ <up-form-item label="褰曞叆浜�" prop="createUer">
+ <up-input v-model="form.createUer" placeholder="璇疯緭鍏ュ綍鍏ヤ汉" disabled />
+ </up-form-item>
+ <up-form-item
+ label="褰曞叆鏃ユ湡"
+ prop="createTime"
+ @click="showCreateTimePicker = true"
+ >
+ <up-input
+ v-model="form.createTime"
+ placeholder="璇烽�夋嫨褰曞叆鏃ユ湡"
+ readonly
+ @click="showCreateTimePicker = true"
+ />
+ <template #right>
+ <up-icon name="arrow-right" @click="showCreateTimePicker = true"></up-icon>
+ </template>
+ </up-form-item>
+ <up-form-item label="鍙戠エ鍙风爜" prop="invoiceNo" required>
+ <up-input v-model="form.invoiceNo" placeholder="璇疯緭鍏ュ彂绁ㄥ彿鐮�" />
+ </up-form-item>
+ <up-form-item
+ label="寮�绁ㄦ棩鏈�"
+ prop="issueDate"
+ required
@click="showIssueDatePicker = true"
- :rules="[{ required: true, message: '璇烽�夋嫨寮�绁ㄦ棩鏈�' }]"
- />
- </van-cell-group>
+ >
+ <up-input
+ v-model="form.issueDate"
+ placeholder="璇烽�夋嫨寮�绁ㄦ棩鏈�"
+ readonly
+ @click="showIssueDatePicker = true"
+ />
+ <template #right>
+ <up-icon name="arrow-right" @click="showIssueDatePicker = true"></up-icon>
+ </template>
+ </up-form-item>
+ </view>
<!-- 浜у搧淇℃伅 -->
<view class="product-section">
<view class="section-header">
- <text class="section-title">浜у搧淇℃伅</text>
+ <view>
+ <text class="section-title">浜у搧淇℃伅</text>
+ </view>
</view>
<view v-if="productData.length === 0" class="empty-state">
- <van-empty description="鏆傛棤浜у搧鏁版嵁" />
+ <view class="empty-text">鏆傛棤浜у搧鏁版嵁</view>
</view>
<view v-else class="product-list">
@@ -81,116 +79,105 @@
<!-- 浜у搧澶撮儴 -->
<view class="product-header">
<view class="product-title">
- <van-icon name="description" color="#2979ff" size="15" />
+ <view class="document-icon">
+ <up-icon name="file-text" size="16" color="#ffffff"></up-icon>
+ </view>
<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
- />
+ <up-form-item label="浜у搧澶х被" prop="productCategory">
+ <up-input v-model="item.productCategory" placeholder="" disabled />
+ </up-form-item>
+ <up-form-item label="瑙勬牸鍨嬪彿" prop="specificationModel">
+ <up-input v-model="item.specificationModel" placeholder="" disabled />
+ </up-form-item>
+ <up-form-item label="鍗曚綅" prop="unit">
+ <up-input v-model="item.unit" placeholder="" disabled />
+ </up-form-item>
+ <up-form-item label="鏁伴噺" prop="quantity">
+ <up-input v-model="item.quantity" placeholder="" disabled />
+ </up-form-item>
+ <up-form-item label="绋庣巼(%)" prop="taxRate">
+ <up-input v-model="item.taxRate" placeholder="" disabled />
+ </up-form-item>
+ <up-form-item label="鍚◣鍗曚环(鍏�)" prop="taxInclusiveUnitPrice">
+ <up-input v-model="item.taxInclusiveUnitPrice" placeholder="" disabled />
+ </up-form-item>
+ <up-form-item label="鍚◣鎬讳环(鍏�)" prop="taxInclusiveTotalPrice">
+ <up-input v-model="item.taxInclusiveTotalPrice" placeholder="" disabled />
+ </up-form-item>
+ <up-form-item label="涓嶅惈绋庢�讳环(鍏�)" prop="taxExclusiveTotalPrice">
+ <up-input v-model="item.taxExclusiveTotalPrice" placeholder="" disabled />
+ </up-form-item>
<!-- 鏈寮�绁ㄤ俊鎭� -->
- <van-field
- v-model="item.currentInvoiceNum"
- label="鏈寮�绁ㄦ暟"
- type="number"
- placeholder="璇疯緭鍏ュ紑绁ㄦ暟閲�"
- @blur="invoiceNumBlur(item)"
- />
- <van-field
- v-model="item.currentInvoiceAmount"
- label="鏈寮�绁ㄩ噾棰�(鍏�)"
- type="number"
- placeholder="璇疯緭鍏ュ紑绁ㄩ噾棰�"
- @blur="invoiceAmountBlur(item)"
- />
+ <up-form-item label="鏈寮�绁ㄦ暟" prop="currentInvoiceNum">
+ <up-input
+ v-model="item.currentInvoiceNum"
+ type="number"
+ placeholder="璇疯緭鍏ュ紑绁ㄦ暟閲�"
+ @blur="invoiceNumBlur(item)"
+ />
+ </up-form-item>
+ <up-form-item label="鏈寮�绁ㄩ噾棰�(鍏�)" prop="currentInvoiceAmount">
+ <up-input
+ v-model="item.currentInvoiceAmount"
+ type="number"
+ placeholder="璇疯緭鍏ュ紑绁ㄩ噾棰�"
+ @blur="invoiceAmountBlur(item)"
+ />
+ </up-form-item>
<!-- 鏈紑绁ㄤ俊鎭� -->
- <van-field
- v-model="item.noInvoiceNum"
- label="鏈紑绁ㄦ暟"
- readonly
- />
- <van-field
- v-model="item.noInvoiceAmount"
- label="鏈紑绁ㄩ噾棰�(鍏�)"
- readonly
- />
+ <up-form-item label="鏈紑绁ㄦ暟" prop="noInvoiceNum">
+ <up-input v-model="item.noInvoiceNum" placeholder="" disabled />
+ </up-form-item>
+ <up-form-item label="鏈紑绁ㄩ噾棰�(鍏�)" prop="noInvoiceAmount">
+ <up-input v-model="item.noInvoiceAmount" placeholder="" disabled />
+ </up-form-item>
</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>
- </view>
- </van-form>
+ <!-- 浣跨敤鍏叡搴曢儴鎸夐挳缁勪欢 -->
+ <FooterButtons
+ show
+ cancelText="鍙栨秷"
+ confirmText="淇濆瓨"
+ @cancel="goBack"
+ @confirm="submitForm"
+ />
+ </up-form>
<!-- 鏃ユ湡閫夋嫨鍣� -->
- <van-popup v-model:show="showIssueDatePicker" position="bottom">
- <van-date-picker
- v-model="currentIssueDate"
- title="閫夋嫨寮�绁ㄦ棩鏈�"
+ <up-popup :show="showIssueDatePicker" mode="bottom" @close="showIssueDatePicker = false">
+ <up-datetime-picker
+ :show="true"
+ v-model="pickerIssueDateValue"
@confirm="onIssueDateConfirm"
@cancel="showIssueDatePicker = false"
+ mode="date"
/>
- </van-popup>
+ </up-popup>
- <van-popup v-model:show="showCreateTimePicker" position="bottom">
- <van-date-picker
- v-model="currentCreateTime"
- title="閫夋嫨褰曞叆鏃ユ湡"
+ <up-popup :show="showCreateTimePicker" mode="bottom" @close="showCreateTimePicker = false">
+ <up-datetime-picker
+ :show="true"
+ v-model="pickerCreateTimeValue"
@confirm="onCreateTimeConfirm"
@cancel="showCreateTimePicker = false"
+ mode="date"
/>
- </van-popup>
+ </up-popup>
</view>
</template>
<script setup>
-import { ref, reactive, onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
// 鏇挎崲 toast 鏂规硶
const showToast = (message) => {
uni.showToast({
@@ -211,6 +198,8 @@
import { invoiceRegistrationSave } from '@/api/salesManagement/invoiceRegistration'
import useUserStore from '@/store/modules/user'
import {getSalesLedgerWithProducts} from "@/api/salesManagement/salesLedger";
+import FooterButtons from '@/components/FooterButtons.vue';
+import { formatDateToYMD } from '@/utils/ruoyi'
const userStore = useUserStore()
const editData = ref(null);
@@ -230,14 +219,24 @@
invoiceNo: ''
})
+// 琛ㄥ崟鏍￠獙瑙勫垯
+const rules = {
+ invoiceNo: [
+ { required: true, message: '璇疯緭鍏ュ彂绁ㄥ彿鐮�', trigger: 'blur' }
+ ],
+ issueDate: [
+ { required: true, message: '璇烽�夋嫨寮�绁ㄦ棩鏈�', trigger: 'blur' }
+ ]
+};
+
// 浜у搧鏁版嵁
const productData = ref([])
// 鏃ユ湡閫夋嫨鍣ㄧ姸鎬�
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 pickerIssueDateValue = ref(Date.now())
+const pickerCreateTimeValue = ref(Date.now())
// 鎻愪氦鐘舵��
const submitting = ref(false)
@@ -314,42 +313,20 @@
}
// 寮�绁ㄦ棩鏈熺‘璁�
-const onIssueDateConfirm = ({ selectedValues }) => {
- console.log('selectedValues--', selectedValues)
- form.value.issueDate = selectedValues.join('-');
- currentIssueDate.value = selectedValues;
+const onIssueDateConfirm = (e) => {
+ form.value.issueDate = formatDateToYMD(e.value)
+ pickerIssueDateValue.value = e.value
showIssueDatePicker.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.createTime = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
- showCreateTimePicker.value = false;
- } catch (error) {
- console.error('鏃ユ湡澶勭悊閿欒:', error);
- showToast('鏃ユ湡閫夋嫨澶辫触锛岃閲嶈瘯');
- }
-}
+const onCreateTimeConfirm = (e) => {
+ form.value.createTime = formatDateToYMD(e.value)
+ pickerCreateTimeValue.value = e.value
+ showCreateTimePicker.value = false;
+};
+
+
// 鏍煎紡鍖栨棩鏈�
const formatDate = (date) => {
@@ -441,106 +418,6 @@
})
</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 lang="scss">
+@import '@/static/scss/form-common.scss';
</style>
--
Gitblit v1.9.3