From ee42bf1badae06026efa79dc17d2a541297ab49b Mon Sep 17 00:00:00 2001 From: gaoluyang <2820782392@qq.com> Date: 星期三, 03 九月 2025 17:43:31 +0800 Subject: [PATCH] 采购管理整体样式优化,搜索条件修改 --- src/pages/sales/invoiceLedger/detail.vue | 218 ++++++++++++++++++++++++++++++++++++++++-------------- 1 files changed, 160 insertions(+), 58 deletions(-) diff --git a/src/pages/sales/invoiceLedger/detail.vue b/src/pages/sales/invoiceLedger/detail.vue index 2ddba5e..93e622a 100644 --- a/src/pages/sales/invoiceLedger/detail.vue +++ b/src/pages/sales/invoiceLedger/detail.vue @@ -1,63 +1,92 @@ <template> - <view class="account-detail"> - <van-nav-bar - title="缂栬緫寮�绁ㄥ彴璐�" - left-text="杩斿洖" - left-arrow - @click-left="goBack" - fixed - placeholder - /> - - <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.salesContractNo" label="閿�鍞悎鍚屽彿" readonly /> - <van-field v-model="form.customerName" label="瀹㈡埛鍚嶇О" readonly /> - <van-field v-model="form.invoiceNo" label="鍙戠エ鍙�" placeholder="璇疯緭鍏�" required :rules="[{ required: true, message: '璇疯緭鍏ュ彂绁ㄥ彿' }]" /> - <van-field v-model="form.invoiceTotal" label="鍙戠エ閲戦(鍏�)" type="number" placeholder="璇疯緭鍏�" required :rules="[{ required: true, message: '璇疯緭鍏ュ彂绁ㄩ噾棰�' }]" /> - <view class="tip-text" v-if="form.taxInclusiveTotalPrice">鍚堝悓鎬婚锛歿{ formatAmount(form.taxInclusiveTotalPrice) }} 鍏�</view> - <van-field v-model="form.invoicePerson" label="寮�绁ㄤ汉" readonly /> - <van-field v-model="form.invoiceDate" label="寮�绁ㄦ棩鏈�" readonly placeholder="璇烽�夋嫨" @click="showInvoiceDatePicker = true" required :rules="[{ required: true, message: '璇烽�夋嫨寮�绁ㄦ棩鏈�' }]" /> - </van-cell-group> - - <van-cell-group title="闄勪欢鏉愭枡锛堜粎鏀寔 pdf锛�" inset> - <van-uploader - accept=".pdf" - multiple - :after-read="afterReadUpload" - :before-read="beforeReadPdf" - > - <van-button class="upload-btn" icon="plus" type="primary" block>涓婁紶鏂囦欢</van-button> - </van-uploader> - <view class="uploaded-list" v-if="fileList.length"> - <view class="uploaded-item" v-for="(f, idx) in fileList" :key="idx"> - <text class="file-name">{{ f.name || getFileNameFromUrl(f.url) }}</text> - <van-button size="mini" type="danger" plain @click="removeUploaded(idx)">绉婚櫎</van-button> - </view> - </view> - </van-cell-group> - + <view class="account-view"> + <!-- 浣跨敤閫氱敤椤甸潰澶撮儴缁勪欢 --> + <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="閿�鍞悎鍚屽彿" border-bottom> + <u-input v-model="form.salesContractNo" readonly /> + </u-form-item> + <u-form-item label="瀹㈡埛鍚嶇О" border-bottom> + <u-input v-model="form.customerName" readonly /> + </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="invoiceTotal" required border-bottom> + <u-input v-model="form.invoiceTotal" type="number" placeholder="璇疯緭鍏�" /> + </u-form-item> + <u-form-item label="寮�绁ㄤ汉" border-bottom> + <u-input v-model="form.invoicePerson" readonly /> + </u-form-item> + <u-form-item label="寮�绁ㄦ棩鏈�" prop="invoiceDate" required border-bottom> + <u-input v-model="form.invoiceDate" readonly placeholder="璇烽�夋嫨" @click="showInvoiceDatePicker = true" /> + </u-form-item> + </u-cell-group> + +<!-- <u-cell-group title="闄勪欢鏉愭枡锛堜粎鏀寔 pdf锛�">--> +<!-- <u-upload--> +<!-- accept=".pdf"--> +<!-- multiple--> +<!-- :afterRead="afterReadUpload"--> +<!-- :beforeRead="beforeReadPdf"--> +<!-- >--> +<!-- <u-button class="upload-btn" type="primary">--> +<!-- 涓婁紶鏂囦欢--> +<!-- </u-button>--> +<!-- </u-upload>--> +<!-- <view class="uploaded-list" v-if="fileList.length">--> +<!-- <view class="uploaded-item" v-for="(f, idx) in fileList" :key="idx">--> +<!-- <text class="file-name">{{ f.name || getFileNameFromUrl(f.url) }}</text>--> +<!-- <u-button size="mini" type="error" plain @click="removeUploaded(idx)">绉婚櫎</u-button>--> +<!-- </view>--> +<!-- </view>--> +<!-- </u-cell-group>--> + + <!-- 鎻愪氦鎸夐挳 --> <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> + <u-button class="cancel-btn" @click="goBack">鍙栨秷</u-button> + <u-button class="save-btn" type="primary" @click="submitForm">淇濆瓨</u-button> </view> - </van-form> + </u-form> - <van-popup v-model:show="showInvoiceDatePicker" position="bottom"> - <van-date-picker - v-model="currentInvoiceDate" + <!-- 寮�绁ㄦ棩鏈熼�夋嫨鍣� --> + <u-popup v-model="showInvoiceDatePicker" mode="bottom"> + <u-datetime-picker + v-model="invoiceDateValue" title="閫夋嫨寮�绁ㄦ棩鏈�" @confirm="onInvoiceDateConfirm" @cancel="showInvoiceDatePicker = false" /> - </van-popup> + </u-popup> </view> </template> <script setup> + +// 鏇挎崲 toast 鏂规硶 +const showToast = (message) => { + uni.showToast({ + title: message, + icon: 'none' + }) +} + +const showLoadingToast = (message) => { + uni.showLoading({ + title: message || '鍔犺浇涓�...' + }) +} + +const closeToast = () => { + uni.hideLoading() +} + import { ref, onMounted } from 'vue' -import { showToast, showLoadingToast, closeToast } from 'vant' import dayjs from 'dayjs' +import { formatDateToYMD } from '@/utils/ruoyi' import useUserStore from '@/store/modules/user' import { getToken } from '@/utils/auth' import { invoiceLedgerProductInfo, invoiceLedgerSaveOrUpdate } from '@/api/salesManagement/invoiceLedger.js' @@ -87,6 +116,7 @@ const currentInvoiceDate = ref([new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()]) const goBack = () => { + uni.removeStorageSync('invoiceLedgerEditRow'); uni.navigateBack() } @@ -97,10 +127,11 @@ return num.toFixed(2) } -const onInvoiceDateConfirm = ({ selectedValues }) => { - form.value.invoiceDate = selectedValues.join('-') - currentInvoiceDate.value = selectedValues - showInvoiceDatePicker.value = false +// 鏃ユ湡纭浜嬩欢 +const onInvoiceDateConfirm = (e) => { + form.value.invoiceDate = formatDateToYMD(e.value) + currentInvoiceDate.value = formatDateToYMD(e.value) + showInvoiceDatePicker.value = false; } // 涓婁紶鍓嶆牎楠岋紙鍏煎 Vant Uploader 鐨� file/fileList 缁撴瀯锛� @@ -125,7 +156,7 @@ const uploadSingleFile = async (fileObj) => { return new Promise((resolve, reject) => { - showLoadingToast({ message: '姝e湪涓婁紶...' }) + showLoadingToast('姝e湪涓婁紶...') const baseUrl = config.baseUrl + '/invoiceLedger/uploadFile' const filePath = fileObj?.url || fileObj?.tempFilePath || fileObj?.file?.path @@ -210,7 +241,7 @@ const loadDetail = async (id) => { try { - showLoadingToast({ message: '鍔犺浇涓�...' }) + showLoadingToast('鍔犺浇涓�...') const res = await invoiceLedgerProductInfo({ id }) const data = res?.data || res form.value = { ...data } @@ -233,7 +264,7 @@ if (!form.value.invoiceNo) { showToast('璇疯緭鍏ュ彂绁ㄥ彿'); return } if (!form.value.invoiceTotal) { showToast('璇疯緭鍏ュ彂绁ㄩ噾棰�'); return } if (!form.value.invoiceDate) { showToast('璇烽�夋嫨寮�绁ㄦ棩鏈�'); return } - showLoadingToast({ message: '鎻愪氦涓�...' }) + showLoadingToast('鎻愪氦涓�...') form.value.fileList = fileList.value await invoiceLedgerSaveOrUpdate(form.value) closeToast() @@ -260,17 +291,88 @@ </script> <style scoped lang="scss"> -.account-detail { +@import '@/static/scss/form-common.scss'; +.account-view { min-height: 100vh; background: #f8f9fa; - padding-bottom: 5rem; } + +.info-section { + background: #fff; + margin-bottom: 16px; +} + +.info-grid { + display: flex; + flex-wrap: wrap; + padding: 16px; +} + +.info-item { + display: flex; + width: 100%; + margin-bottom: 12px; + + &:last-child { + margin-bottom: 0; + } + + .info-label { + font-size: 14px; + color: #999; + min-width: 100px; + } + + .info-value { + font-size: 14px; + color: #333; + flex: 1; + } + + .info-value.highlight { + color: #2979ff; + font-weight: 500; + } + + .info-value.medium { + font-size: 16px; + } +} + .uploaded-list { padding: 8px 16px 0 16px; } .uploaded-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f5f5f5; } .file-name { font-size: 12px; color: #333; margin-right: 8px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tip-text { padding: 4px 16px 0 16px; font-size: 12px; color: #888; } -.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; } +.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; +} </style> -- Gitblit v1.9.3