From a26e8d708ab3c8899bee5cae4167ccc3be9b58cd Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期三, 03 九月 2025 14:00:23 +0800
Subject: [PATCH] 销售管理整体样式优化，搜索条件修改
---
src/pages/sales/invoicingRegistration/add.vue | 446 +++++++++++++++++++------------------------------------
1 files changed, 152 insertions(+), 294 deletions(-)
diff --git a/src/pages/sales/invoicingRegistration/add.vue b/src/pages/sales/invoicingRegistration/add.vue
index 1156f6e..beee939 100644
--- a/src/pages/sales/invoicingRegistration/add.vue
+++ b/src/pages/sales/invoicingRegistration/add.vue
@@ -4,76 +4,70 @@
<PageHeader title="鏂板寮�绁ㄧ櫥璁�" @back="goBack" />
<!-- 琛ㄥ崟鍐呭 -->
- <u-form @submit="submitForm" ref="formRef" label-width="110" input-align="right" error-message-align="right">
+ <up-form @submit="submitForm" ref="formRef" label-width="130" :rules="rules" :model="form">
<!-- 鍩烘湰淇℃伅 -->
- <u-cell-group title="鍩烘湰淇℃伅">
- <u-form-item label="閿�鍞悎鍚屽彿" border-bottom>
- <u-input
- v-model="form.salesContractNo"
+ <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
- placeholder="鑷姩濉厖"
- />
- </u-form-item>
- <u-form-item label="瀹㈡埛鍚嶇О" border-bottom>
- <u-input
- v-model="form.customerName"
- readonly
- placeholder="鑷姩濉厖"
- />
- </u-form-item>
- <u-form-item label="涓氬姟鍛�" border-bottom>
- <u-input
- v-model="form.salesman"
- readonly
- placeholder="鑷姩濉厖"
- />
- </u-form-item>
- <u-form-item label="椤圭洰鍚嶇О" border-bottom>
- <u-input
- v-model="form.projectName"
- readonly
- placeholder="鑷姩濉厖"
- />
- </u-form-item>
- <u-form-item label="褰曞叆浜�" border-bottom>
- <u-input
- v-model="form.createUer"
- readonly
- placeholder="璇疯緭鍏ュ綍鍏ヤ汉"
- />
- </u-form-item>
- <u-form-item label="褰曞叆鏃ユ湡" border-bottom>
- <u-input
- v-model="form.createTime"
- readonly
- placeholder="璇烽�夋嫨褰曞叆鏃ユ湡"
@click="showCreateTimePicker = true"
/>
- </u-form-item>
- <u-form-item label="鍙戠エ鍙风爜" prop="invoiceNo" required border-bottom>
- <u-input
- v-model="form.invoiceNo"
- placeholder="璇疯緭鍏ュ彂绁ㄥ彿鐮�"
- />
- </u-form-item>
- <u-form-item label="寮�绁ㄦ棩鏈�" prop="issueDate" required border-bottom>
- <u-input
- v-model="form.issueDate"
+ <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"
+ >
+ <up-input
+ v-model="form.issueDate"
+ placeholder="璇烽�夋嫨寮�绁ㄦ棩鏈�"
readonly
- placeholder="璇烽�夋嫨寮�绁ㄦ棩鏈�"
@click="showIssueDatePicker = true"
/>
- </u-form-item>
- </u-cell-group>
+ <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">
- <u-empty text="鏆傛棤浜у搧鏁版嵁" />
+ <view class="empty-text">鏆傛棤浜у搧鏁版嵁</view>
</view>
<view v-else class="product-list">
@@ -85,151 +79,127 @@
<!-- 浜у搧澶撮儴 -->
<view class="product-header">
<view class="product-title">
- <u-icon name="file-text" 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">
- <u-form-item label="浜у搧澶х被" border-bottom>
- <u-input
- v-model="item.productCategory"
- readonly
- />
- </u-form-item>
- <u-form-item label="瑙勬牸鍨嬪彿" border-bottom>
- <u-input
- v-model="item.specificationModel"
- readonly
- />
- </u-form-item>
- <u-form-item label="鍗曚綅" border-bottom>
- <u-input
- v-model="item.unit"
- readonly
- />
- </u-form-item>
- <u-form-item label="鏁伴噺" border-bottom>
- <u-input
- v-model="item.quantity"
- readonly
- />
- </u-form-item>
- <u-form-item label="绋庣巼(%)" border-bottom>
- <u-input
- v-model="item.taxRate"
- readonly
- />
- </u-form-item>
- <u-form-item label="鍚◣鍗曚环(鍏�)" border-bottom>
- <u-input
- v-model="item.taxInclusiveUnitPrice"
- readonly
- />
- </u-form-item>
- <u-form-item label="鍚◣鎬讳环(鍏�)" border-bottom>
- <u-input
- v-model="item.taxInclusiveTotalPrice"
- readonly
- />
- </u-form-item>
- <u-form-item label="涓嶅惈绋庢�讳环(鍏�)" border-bottom>
- <u-input
- v-model="item.taxExclusiveTotalPrice"
- readonly
- />
- </u-form-item>
+ <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>
<!-- 鏈寮�绁ㄤ俊鎭� -->
- <u-form-item label="鏈寮�绁ㄦ暟" border-bottom>
- <u-input
- v-model="item.currentInvoiceNum"
- type="number"
+ <up-form-item label="鏈寮�绁ㄦ暟" prop="currentInvoiceNum">
+ <up-input
+ v-model="item.currentInvoiceNum"
+ type="number"
placeholder="璇疯緭鍏ュ紑绁ㄦ暟閲�"
@blur="invoiceNumBlur(item)"
/>
- </u-form-item>
- <u-form-item label="鏈寮�绁ㄩ噾棰�(鍏�)" border-bottom>
- <u-input
- v-model="item.currentInvoiceAmount"
- type="number"
+ </up-form-item>
+ <up-form-item label="鏈寮�绁ㄩ噾棰�(鍏�)" prop="currentInvoiceAmount">
+ <up-input
+ v-model="item.currentInvoiceAmount"
+ type="number"
placeholder="璇疯緭鍏ュ紑绁ㄩ噾棰�"
@blur="invoiceAmountBlur(item)"
/>
- </u-form-item>
+ </up-form-item>
<!-- 鏈紑绁ㄤ俊鎭� -->
- <u-form-item label="鏈紑绁ㄦ暟" border-bottom>
- <u-input
- v-model="item.noInvoiceNum"
- readonly
- />
- </u-form-item>
- <u-form-item label="鏈紑绁ㄩ噾棰�(鍏�)" border-bottom>
- <u-input
- v-model="item.noInvoiceAmount"
- readonly
- />
- </u-form-item>
+ <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">
- <u-button class="cancel-btn" @click="goBack">鍙栨秷</u-button>
- <u-button class="save-btn" type="primary" @click="submitForm">淇濆瓨</u-button>
- </view>
- </u-form>
+ <!-- 浣跨敤鍏叡搴曢儴鎸夐挳缁勪欢 -->
+ <FooterButtons
+ show
+ cancelText="鍙栨秷"
+ confirmText="淇濆瓨"
+ @cancel="goBack"
+ @confirm="submitForm"
+ />
+ </up-form>
<!-- 鏃ユ湡閫夋嫨鍣� -->
- <u-popup v-model="showIssueDatePicker" mode="bottom">
- <u-datetime-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"
/>
- </u-popup>
+ </up-popup>
- <u-popup v-model="showCreateTimePicker" mode="bottom">
- <u-datetime-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"
/>
- </u-popup>
+ </up-popup>
</view>
</template>
<script setup>
-import { ref, reactive, onMounted } from 'vue'
-// 鏇挎崲 Vant 鐨� toast 涓� uni 鍘熺敓鎴� uview-plus 鐨勬柟娉�
-// import { showToast, showLoadingToast, closeToast } from 'vant'
-import { invoiceRegistrationSave } from '@/api/salesManagement/invoiceRegistration'
-import useUserStore from '@/store/modules/user'
-import {getSalesLedgerWithProducts} from "@/api/salesManagement/salesLedger";
-
+import { ref, onMounted } from 'vue'
// 鏇挎崲 toast 鏂规硶
const showToast = (message) => {
- uni.showToast({
- title: message,
- icon: 'none'
- })
+ uni.showToast({
+ title: message,
+ icon: 'none'
+ })
}
const showLoadingToast = (message) => {
- uni.showLoading({
- title: message || '鍔犺浇涓�...'
- })
+ uni.showLoading({
+ title: message || '鍔犺浇涓�...'
+ })
}
const closeToast = () => {
- uni.hideLoading()
+ uni.hideLoading()
}
+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);
@@ -249,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)
@@ -333,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) => {
@@ -460,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