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/paymentEntry/add.vue | 139 +++++++++++++++++----------------------------- 1 files changed, 51 insertions(+), 88 deletions(-) diff --git a/src/pages/procurementManagement/paymentEntry/add.vue b/src/pages/procurementManagement/paymentEntry/add.vue index 17dd8ea..9b77343 100644 --- a/src/pages/procurementManagement/paymentEntry/add.vue +++ b/src/pages/procurementManagement/paymentEntry/add.vue @@ -6,36 +6,36 @@ <!-- 琛ㄥ崟鍐呭 --> <u-form @submit="onSubmit" ref="formRef" label-width="110" input-align="right" error-message-align="right"> <!-- 鍩烘湰淇℃伅 --> - <u-cell-group title="鍩烘湰淇℃伅"> - <u-form-item label="閲囪喘鍚堝悓鍙�" border-bottom> + <u-cell-group title="鍩烘湰淇℃伅" class="form-section"> + <u-form-item label="閲囪喘鍚堝悓鍙�" class="form-item"> <u-input v-model="form.purchaseContractNumber" placeholder="鑷姩濉厖" readonly /> </u-form-item> - <u-form-item label="閿�鍞悎鍚屽彿" border-bottom> + <u-form-item label="閿�鍞悎鍚屽彿" class="form-item"> <u-input v-model="form.salesContractNo" placeholder="鑷姩濉厖" readonly /> </u-form-item> - <u-form-item label="渚涘簲鍟嗗悕绉�" border-bottom> + <u-form-item label="渚涘簲鍟嗗悕绉�" class="form-item"> <u-input v-model="form.supplierName" placeholder="鑷姩濉厖" readonly /> </u-form-item> - <u-form-item label="鍙戠エ鍙�" border-bottom> + <u-form-item label="鍙戠エ鍙�" class="form-item"> <u-input v-model="form.invoiceNumber" placeholder="鑷姩濉厖" readonly /> </u-form-item> - <u-form-item label="鍙戠エ閲戦(鍏�)" border-bottom> + <u-form-item label="鍙戠エ閲戦(鍏�)" class="form-item"> <u-input v-model="form.invoiceAmount" placeholder="鑷姩濉厖" @@ -43,7 +43,7 @@ /> </u-form-item> <view class="tip-text">寰呬粯娆鹃噾棰濓細{{ currentNoReceiptAmount }} 鍏�</view> - <u-form-item label="鏈浠樻閲戦" prop="currentPaymentAmount" required border-bottom> + <u-form-item label="鏈浠樻閲戦" prop="currentPaymentAmount" required class="form-item"> <u-input v-model="form.currentPaymentAmount" type="number" @@ -52,30 +52,42 @@ clearable /> </u-form-item> - <u-form-item label="浠樻褰㈠紡" prop="paymentMethod" required border-bottom> + <u-form-item label="浠樻褰㈠紡" prop="paymentMethod" required class="form-item"> <u-input v-model="form.paymentMethod" placeholder="璇烽�夋嫨" readonly @click="showPaymentTypePicker" /> + <template #right> + <up-icon + name="arrow-right" + @click="showPaymentTypePicker" + ></up-icon> + </template> </u-form-item> - <u-form-item label="浠樻鏃ユ湡" prop="paymentDate" required border-bottom> + <u-form-item label="浠樻鏃ユ湡" prop="paymentDate" required class="form-item"> <u-input v-model="form.paymentDate" placeholder="璇烽�夋嫨" readonly @click="showDatePicker" /> + <template #right> + <up-icon + name="arrow-right" + @click="showDatePicker" + ></up-icon> + </template> </u-form-item> - <u-form-item label="鐧昏浜�" border-bottom> + <u-form-item label="鐧昏浜�" class="form-item"> <u-input v-model="form.registrant" placeholder="鑷姩濉厖" readonly /> </u-form-item> - <u-form-item label="鐧昏鏃ユ湡" prop="registrationtDate" required border-bottom> + <u-form-item label="鐧昏鏃ユ湡" prop="registrationtDate" required class="form-item"> <u-input v-model="form.registrationtDate" placeholder="璇烽�夋嫨" @@ -85,39 +97,40 @@ </u-cell-group> <!-- 鎻愪氦鎸夐挳 --> - <view class="footer-btns"> - <u-button class="cancel-btn" @click="onClickLeft">鍙栨秷</u-button> - <u-button class="save-btn" type="primary" @click="onSubmit" :loading="loading">淇濆瓨</u-button> - </view> + <FooterButtons + :loading="loading" + @cancel="onClickLeft" + @confirm="onSubmit" + /> </u-form> <!-- 浠樻鏂瑰紡閫夋嫨鍣� --> - <u-popup v-model="showPaymentType" mode="bottom"> - <u-picker - v-model="pickerValue" - :columns="receipt_payment_type" - @confirm="onPaymentTypeConfirm" - @cancel="showPaymentType = false" - /> - </u-popup> + <up-action-sheet + :show="showPaymentType" + title="閫夋嫨浠樻鏂瑰紡" + :actions="receipt_payment_type" + @select="onPaymentTypeConfirm" + @close="showPaymentType = false" + /> <!-- 鏃ユ湡閫夋嫨鍣� --> - <u-popup v-model="showDate" mode="bottom"> - <u-datetime-picker - v-model="currentDate" - title="閫夋嫨鏃ユ湡" - @confirm="onDateConfirm" - @cancel="showDate = false" - /> - </u-popup> + <up-datetime-picker + :show="showDate" + v-model="form.paymentDate" + @confirm="onDateConfirm" + @cancel="showDate = false" + mode="date" + /> </view> </template> <script setup> import { ref, onMounted, computed } from 'vue' +import FooterButtons from '@/components/FooterButtons.vue' import useUserStore from '@/store/modules/user' import { useDict } from '@/utils/dict' import {paymentRegistrationAdd} from "@/api/procurementManagement/paymentEntry"; +import { formatDateToYMD } from '@/utils/ruoyi' // 鏇挎崲 toast 鍜� notify 鏂规硶 const showToast = (message) => { @@ -142,9 +155,7 @@ // 鍝嶅簲寮忔暟鎹� const loading = ref(false) const showPaymentType = ref(false) -const pickerValue = ref([]) const showDate = ref(false) -const currentDate = ref([new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()]) // 琛ㄥ崟鏁版嵁 const form = ref({ @@ -170,7 +181,7 @@ // 杞崲瀛楀吀鏁版嵁鏍煎紡涓洪�夋嫨鍣ㄩ渶瑕佺殑鏍煎紡 const receipt_payment_type = computed(() => { return dictReceiptPaymentType.value.map(item => ({ - text: item.label, + name: item.label, value: item.value })) }) @@ -193,10 +204,9 @@ } // 纭浠樻鏂瑰紡閫夋嫨 -const onPaymentTypeConfirm = ({ selectedValues, selectedOptions }) => { - form.value.receiptPaymentType = selectedOptions[0].value - form.value.paymentMethod = selectedOptions[0].text - pickerValue.value = selectedValues; +const onPaymentTypeConfirm = (item) => { + form.value.receiptPaymentType = item.value + form.value.paymentMethod = item.name showPaymentType.value = false } @@ -206,9 +216,8 @@ } // 纭鏃ユ湡閫夋嫨 -const onDateConfirm = ({ selectedValues }) => { - form.value.paymentDate = selectedValues.join('-') - currentDate.value = selectedValues +const onDateConfirm = (e) => { + form.value.paymentDate = formatDateToYMD(e.value) showDate.value = false } @@ -265,51 +274,5 @@ </script> <style scoped lang="scss"> -.account-detail { - min-height: 100vh; - background: #f8f9fa; - padding-bottom: 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; -} - -// 鍝嶅簲寮忚皟鏁� -@media (max-width: 768px) { - .submit-section { - padding: 12px; - } -} -.tip-text { padding: 4px 16px 0 16px; font-size: 12px; color: #888; } +@import '@/static/scss/form-common.scss'; </style> -- Gitblit v1.9.3