From 7a0ffb0048adeda9ebfbca1d0b525eb224c173e3 Mon Sep 17 00:00:00 2001 From: gaoluyang <2820782392@qq.com> Date: 星期五, 29 八月 2025 17:00:16 +0800 Subject: [PATCH] 修改组件 --- src/pages/procurementManagement/procurementLedger/detail.vue | 285 ++++++++++++++++++++++++++++++-------------------------- 1 files changed, 151 insertions(+), 134 deletions(-) diff --git a/src/pages/procurementManagement/procurementLedger/detail.vue b/src/pages/procurementManagement/procurementLedger/detail.vue index 9292d1d..52aa35c 100644 --- a/src/pages/procurementManagement/procurementLedger/detail.vue +++ b/src/pages/procurementManagement/procurementLedger/detail.vue @@ -4,57 +4,58 @@ <PageHeader title="鍙拌处璇︽儏" @back="goBack" /> <!-- 琛ㄥ崟鍖哄煙 --> - <u-form @submit="onSubmit" label-width="110" input-align="right" style="margin-top: 10px" error-message-align="right"> - <u-form-item label="閲囪喘鍚堝悓鍙�" prop="purchaseContractNumber" required border-bottom> - <u-input v-model="form.purchaseContractNumber" placeholder="鑷姩鐢熸垚" /> - </u-form-item> - <u-form-item label="閿�鍞悎鍚屽彿" prop="salesContractNo" required border-bottom> - <u-input - v-model="form.salesContractNo" - readonly - placeholder="鐐瑰嚮閫夋嫨閿�鍞悎鍚屽彿" - @click="showPicker = true" - /> - </u-form-item> - <u-form-item label="渚涘簲鍟嗗悕绉�" prop="supplierName" required border-bottom> - <u-input - v-model="form.supplierName" - readonly - placeholder="鐐瑰嚮閫夋嫨渚涘簲鍟�" - @click="showCustomerPicker = true" - /> - </u-form-item> - <u-form-item label="椤圭洰鍚嶇О" prop="projectName" required border-bottom> - <u-input v-model="form.projectName" placeholder="璇疯緭鍏ラ」鐩悕绉�" /> - </u-form-item> - <u-form-item label="浠樻鏂瑰紡" border-bottom> - <u-input v-model="form.paymentMethod" placeholder="璇疯緭鍏ヤ粯娆炬柟寮�" /> - </u-form-item> - <u-form-item label="褰曞叆浜�" border-bottom> - <u-input v-model="form.recorderName" placeholder="璇疯緭鍏�" disabled /> - </u-form-item> - <u-form-item label="褰曞叆鏃ユ湡" border-bottom> - <u-input v-model="form.entryDate" placeholder="璇疯緭鍏�" disabled /> - </u-form-item> - <u-popup v-model="showPicker" mode="bottom"> - <u-picker + <van-form @submit="onSubmit" label-width="110px" input-align="right" style="margin-top: 10px" error-message-align="right" scroll-to-error scroll-to-error-position="center"> + <van-field label="閲囪喘鍚堝悓鍙�" name="purchaseContractNumber" borderBottom="true" v-model="form.purchaseContractNumber" placeholder="鑷姩鐢熸垚" :rules="[{ required: true, message: '璇疯緭鍏�' }]"> + </van-field> + <van-field + v-model="form.salesContractNo" + is-link + readonly + name="salesContractNo" + label="閿�鍞悎鍚屽彿" + required + placeholder="鐐瑰嚮閫夋嫨閿�鍞悎鍚屽彿" + :rules="[{ required: true, message: '璇烽�夋嫨閿�鍞悎鍚屽彿' }]" + @click="showPicker = true" + /> + <van-field + v-model="form.supplierName" + is-link + readonly + required + name="supplierName" + label="渚涘簲鍟嗗悕绉�" + placeholder="鐐瑰嚮閫夋嫨渚涘簲鍟�" + :rules="[{ required: true, message: '璇烽�夋嫨渚涘簲鍟�' }]" + @click="showCustomerPicker = true" + /> + <van-field label="椤圭洰鍚嶇О" name="projectName" borderBottom="true" v-model="form.projectName" placeholder="璇疯緭鍏ラ」鐩悕绉�" :rules="[{ required: true, message: '椤圭洰鍚嶇О涓嶈兘涓虹┖' }]" required> + </van-field> + <van-field label="浠樻鏂瑰紡" name="paymentMethod" borderBottom="true" v-model="form.paymentMethod" placeholder="璇疯緭鍏ヤ粯娆炬柟寮�"> + </van-field> + <van-field label="褰曞叆浜�" name="recorderName" borderBottom="true" v-model="form.recorderName" placeholder="璇疯緭鍏�" disabled> + </van-field> + <van-field label="褰曞叆鏃ユ湡" name="entryDate" borderBottom="true" v-model="form.entryDate" placeholder="璇疯緭鍏�" disabled> + </van-field> + <van-popup v-model:show="showPicker" destroy-on-close position="bottom"> + <van-picker :columns="salesContractList" v-model="pickerValue" @confirm="onConfirm" @cancel="showPicker = false" /> - </u-popup> - <u-popup v-model="showCustomerPicker" mode="bottom"> - <u-picker + </van-popup> + <van-popup v-model:show="showCustomerPicker" destroy-on-close position="bottom"> + <van-picker :columns="supplierList" v-model="pickerCustomerValue" @confirm="onCustomerConfirm" @cancel="showCustomerPicker = false" /> - </u-popup> + </van-popup> <!-- 浜у搧澶х被閫夋嫨鍣� --> - <u-popup v-model="showCategoryPicker" mode="bottom"> + <van-popup v-model:show="showCategoryPicker" destroy-on-close position="bottom"> <!-- 澶撮儴鎸夐挳鍖哄煙 --> <view class="popup-header"> <view @click="showCategoryPicker = false" class="cancelButton">鍙栨秷</view> @@ -68,159 +69,175 @@ check-strictly @check-change="onCategoryConfirm" /> - </u-popup> + </van-popup> <!-- 瑙勬牸鍨嬪彿閫夋嫨鍣� --> - <u-popup v-model="showSpecificationPicker" mode="bottom"> - <u-picker + <van-popup v-model:show="showSpecificationPicker" destroy-on-close position="bottom"> + <van-picker :columns="modelOptions" v-model="pickerSpecificationValue" @confirm="onSpecificationConfirm" @cancel="showSpecificationPicker = false" /> - </u-popup> + </van-popup> <!-- 绋庣巼閫夋嫨鍣� --> - <u-popup v-model="showTaxRatePicker" mode="bottom"> - <u-picker + <van-popup v-model:show="showTaxRatePicker" destroy-on-close position="bottom"> + <van-picker :columns="taxRateOptions" v-model="pickerTaxRateValue" @confirm="onTaxRateConfirm" @cancel="showTaxRatePicker = false" /> - </u-popup> + </van-popup> <!-- 鍙戠エ绫诲瀷閫夋嫨鍣� --> - <u-popup v-model="showInvoiceTypePicker" mode="bottom"> - <u-picker + <van-popup v-model:show="showInvoiceTypePicker" destroy-on-close position="bottom"> + <van-picker :columns="invoiceTypeOptions" v-model="pickerInvoiceTypeValue" @confirm="onInvoiceTypeConfirm" @cancel="showInvoiceTypePicker = false" /> - </u-popup> + </van-popup> <!-- 浜у搧淇℃伅 --> <view class="product-section"> <view class="section-header"> <text class="section-title">浜у搧淇℃伅</text> - <u-button type="primary" size="small" @click="addProduct" class="add-btn" v-if="operationType !== 'view'"> - <u-icon name="plus" size="14" /> - 鏂板 - </u-button> + <van-button type="primary" size="small" @click="addProduct" class="add-btn" icon="plus" v-if="operationType !== 'view'">鏂板</van-button> </view> <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" /> + <van-icon name="description" color="#2979ff" size="15" /> <text class="product-productCategory">浜у搧 {{ idx + 1 }}</text> </view> <!-- 鎿嶄綔鎸夐挳 --> - <view class="product-actions" v-if="operationType !== 'view'"> - <u-button type="error" size="mini" @click="removeProduct(idx)" class="del-btn"> - <u-icon name="trash" size="12" /> - 鍒犻櫎 - </u-button> + <view class="product-actions" v-if="operationType !== 'view'"> + <van-button type="danger" size="mini" @click="removeProduct(idx)" class="del-btn" icon="delete">鍒犻櫎</van-button> </view> </view> <!-- 浜у搧淇℃伅琛ㄥ崟 --> <view class="product-form"> <!-- 浜у搧澶х被 --> - <view class="product-category" prop="productCategory" required border-bottom> - <u-input - v-model="product.productCategory" - readonly - placeholder="璇烽�夋嫨" - @click="openCategoryPicker(idx)" - /> - </view> + <van-field + v-model="product.productCategory" + is-link + readonly + name="productCategory" + label="浜у搧澶х被" + required + placeholder="璇烽�夋嫨" + :rules="[{ required: true, message: '璇烽�夋嫨' }]" + @click="openCategoryPicker(idx)" + /> <!-- 瑙勬牸鍨嬪彿 --> - <view class="product-specificationModel" prop="specificationModel" required border-bottom> - <u-input - v-model="product.specificationModel" - readonly - placeholder="璇烽�夋嫨" - @click="openSpecificationPicker(idx)" - /> - </view> + <van-field + v-model="product.specificationModel" + is-link + readonly + name="specificationModel" + label="瑙勬牸鍨嬪彿" + required + :rules="[{ required: true, message: '璇烽�夋嫨' }]" + placeholder="璇烽�夋嫨" + @click="openSpecificationPicker(idx)" + /> <!-- 鍗曚綅 --> - <view class="product-unit" prop="unit" required border-bottom> - <u-input - v-model="product.unit" - placeholder="璇疯緭鍏�" - /> - </view> + <van-field + v-model="product.unit" + name="unit" + label="鍗曚綅" + required + :rules="[{ required: true, message: '璇疯緭鍏�' }]" + placeholder="璇疯緭鍏�" + /> <!-- 绋庣巼 --> - <view class="product-taxRate" prop="taxRate" required border-bottom> - <u-input - v-model="product.taxRate" - readonly - placeholder="璇烽�夋嫨" - @click="openTaxRatePicker(idx)" - /> - </view> + <van-field + v-model="product.taxRate" + is-link + readonly + name="taxRate" + label="绋庣巼(%)" + required + :rules="[{ required: true, message: '璇烽�夋嫨' }]" + placeholder="璇烽�夋嫨" + @click="openTaxRatePicker(idx)" + /> <!-- 鍚◣鍗曚环 --> - <view class="product-taxInclusiveUnitPrice" prop="taxInclusiveUnitPrice" required border-bottom> - <u-input - v-model="product.taxInclusiveUnitPrice" - type="number" - placeholder="璇疯緭鍏�" - @blur="formatTaxPrice(idx)" - /> - </view> + <van-field + v-model="product.taxInclusiveUnitPrice" + name="taxInclusiveUnitPrice" + label="鍚◣鍗曚环(鍏�)" + type="number" + required + :rules="[{ required: true, message: '璇疯緭鍏�' }]" + placeholder="璇疯緭鍏�" + @blur="formatTaxPrice(idx)" + /> <!-- 鏁伴噺 --> - <view class="product-quantity" prop="quantity" required border-bottom> - <u-input - v-model="product.quantity" - type="number" - placeholder="璇疯緭鍏�" - @blur="formatAmount(idx)" - /> - </view> + <van-field + v-model="product.quantity" + name="quantity" + label="鏁伴噺" + type="number" + :rules="[{ required: true, message: '璇疯緭鍏�' }]" + required + placeholder="璇疯緭鍏�" + @blur="formatAmount(idx)" + /> <!-- 鍚◣鎬讳环 --> - <view class="product-taxInclusiveTotalPrice" prop="taxInclusiveTotalPrice" required border-bottom> - <u-input - v-model="product.taxInclusiveTotalPrice" - type="number" - placeholder="璇疯緭鍏�" - @blur="formatTaxTotal(idx)" - /> - </view> + <van-field + v-model="product.taxInclusiveTotalPrice" + name="taxInclusiveTotalPrice" + label="鍚◣鎬讳环(鍏�)" + type="number" + :rules="[{ required: true, message: '璇疯緭鍏�' }]" + required + placeholder="璇疯緭鍏�" + @blur="formatTaxTotal(idx)" + /> <!-- 涓嶅惈绋庢�讳环 --> - <view class="product-taxExclusiveTotalPrice" prop="taxExclusiveTotalPrice" required border-bottom> - <u-input - v-model="product.taxExclusiveTotalPrice" - type="number" - placeholder="璇疯緭鍏�" - @blur="formatNoTaxTotal(idx)" - /> - </view> + <van-field + v-model="product.taxExclusiveTotalPrice" + name="taxExclusiveTotalPrice" + label="涓嶅惈绋庢�讳环(鍏�)" + type="number" + required + :rules="[{ required: true, message: '璇疯緭鍏�' }]" + placeholder="璇疯緭鍏�" + @blur="formatNoTaxTotal(idx)" + /> <!-- 鍙戠エ绫诲瀷 --> - <view class="product-invoiceType" prop="invoiceType" required border-bottom> - <u-input - v-model="product.invoiceType" - readonly - placeholder="璇烽�夋嫨" - @click="openInvoiceTypePicker(idx)" - /> - </view> + <van-field + v-model="product.invoiceType" + is-link + readonly + name="invoiceType" + label="鍙戠エ绫诲瀷" + :rules="[{ required: true, message: '璇烽�夋嫨' }]" + required + placeholder="璇烽�夋嫨" + @click="openInvoiceTypePicker(idx)" + /> </view> </view> </view> <view class="footer-btns" v-if="operationType !== 'view'"> - <u-button class="cancel-btn" @click="goBack">鍙栨秷</u-button> - <u-button class="save-btn" type="primary" @click="onSubmit">淇濆瓨</u-button> + <van-button class="cancel-btn" @click="goBack">鍙栨秷</van-button> + <van-button class="save-btn" native-type="submit" form-type="submit">淇濆瓨</van-button> </view> - </u-form> + </van-form> </view> </template> @@ -720,10 +737,10 @@ .form-section { margin-top: 1rem; } -.u-form-item { +.van-field { height: 3.4rem; } -.u-cell { +.van-cell { align-items: center; } .product-section { -- Gitblit v1.9.3