From 5c48ef2b8267c38bae717202615e1618074ee31c Mon Sep 17 00:00:00 2001 From: gaoluyang <2820782392@qq.com> Date: 星期五, 29 八月 2025 15:25:05 +0800 Subject: [PATCH] 修改组件 --- src/pages/sales/salesAccount/detail.vue | 330 +++++++++++++++++++++++++++++++------------------------ 1 files changed, 186 insertions(+), 144 deletions(-) diff --git a/src/pages/sales/salesAccount/detail.vue b/src/pages/sales/salesAccount/detail.vue index bca5e36..3991e5d 100644 --- a/src/pages/sales/salesAccount/detail.vue +++ b/src/pages/sales/salesAccount/detail.vue @@ -4,80 +4,93 @@ <PageHeader title="鍙拌处璇︽儏" @back="goBack" /> <!-- 琛ㄥ崟鍖哄煙 --> - <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="salesContractNo" borderBottom="true" v-model="form.salesContractNo" placeholder="鑷姩鐢熸垚" disabled> - </van-field> - <van-field - v-model="form.salesman" - is-link - readonly - name="salesman" + <u-form @submit="onSubmit" label-width="110" input-align="right" style="margin-top: 10px" error-message-align="right"> + <u-form-item label="閿�鍞悎鍚屽彿" prop="salesContractNo" border-bottom> + <u-input v-model="form.salesContractNo" placeholder="鑷姩鐢熸垚" disabled /> + </u-form-item> + <u-form-item label="涓氬姟鍛�" + prop="salesman" required - placeholder="鐐瑰嚮閫夋嫨涓氬姟鍛�" - :rules="[{ required: true, message: '璇烽�夋嫨涓氬姟鍛�' }]" - @click="showPicker = true" - /> - <van-field label="瀹㈡埛鍚堝悓鍙�" name="customerContractNo" borderBottom="true" - v-model="form.customerContractNo" required - placeholder="璇疯緭鍏ュ鎴峰悎鍚屽彿" :rules="[{ required: true, message: '瀹㈡埛鍚堝悓鍙蜂笉鑳戒负绌�' }]"> - </van-field> - <van-field - v-model="form.customerName" - is-link - readonly - required - name="customerName" + border-bottom + > + <u-input + v-model="form.salesman" + readonly + placeholder="鐐瑰嚮閫夋嫨涓氬姟鍛�" + @click="showPicker = true" + /> + </u-form-item> + <u-form-item label="瀹㈡埛鍚堝悓鍙�" prop="customerContractNo" required border-bottom> + <u-input + v-model="form.customerContractNo" + placeholder="璇疯緭鍏ュ鎴峰悎鍚屽彿" + /> + </u-form-item> + <u-form-item 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 - v-model="form.executionDate" - is-link - readonly + prop="customerName" required - name="executionDate" + border-bottom + > + <u-input + v-model="form.customerName" + 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="绛捐鏃ユ湡" - placeholder="鐐瑰嚮閫夋嫨鏃堕棿" - :rules="[{ required: true, message: '绛捐鏃ユ湡涓嶈兘涓虹┖' }]" - @click="showDatePicker = true" - /> - <van-popup v-model:show="showDatePicker" destroy-on-close position="bottom"> - <van-date-picker + prop="executionDate" + required + border-bottom + > + <u-input + v-model="form.executionDate" + readonly + placeholder="鐐瑰嚮閫夋嫨鏃堕棿" + @click="showDatePicker = true" + /> + </u-form-item> + <u-popup v-model="showDatePicker" mode="bottom"> + <u-datetime-picker v-model="pickerDateValue" @confirm="onDateConfirm" @cancel="showDatePicker = false" /> - </van-popup> - <van-field label="浠樻鏂瑰紡" name="paymentMethod" borderBottom="true" v-model="form.paymentMethod" placeholder="璇疯緭鍏ヤ粯娆炬柟寮�"> - </van-field> - <van-field label="褰曞叆浜�" name="entryPersonName" borderBottom="true" v-model="form.entryPersonName" 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 + </u-popup> + <u-form-item label="浠樻鏂瑰紡" prop="paymentMethod" border-bottom> + <u-input v-model="form.paymentMethod" placeholder="璇疯緭鍏ヤ粯娆炬柟寮�" /> + </u-form-item> + <u-form-item label="褰曞叆浜�" prop="entryPersonName" border-bottom> + <u-input v-model="form.entryPersonName" placeholder="璇疯緭鍏�" disabled /> + </u-form-item> + <u-form-item label="褰曞叆鏃ユ湡" prop="entryDate" border-bottom> + <u-input v-model="form.entryDate" placeholder="璇疯緭鍏�" disabled /> + </u-form-item> + <u-popup v-model="showPicker" mode="bottom"> + <u-picker :columns="userList" v-model="pickerValue" @confirm="onConfirm" @cancel="showPicker = false" /> - </van-popup> - <van-popup v-model:show="showCustomerPicker" destroy-on-close position="bottom"> - <van-picker + </u-popup> + <u-popup v-model="showCustomerPicker" mode="bottom"> + <u-picker :columns="customerOption" v-model="pickerCustomerValue" @confirm="onCustomerConfirm" @cancel="showCustomerPicker = false" /> - </van-popup> + </u-popup> <!-- 浜у搧澶х被閫夋嫨鍣� --> - <van-popup v-model:show="showCategoryPicker" destroy-on-close position="bottom"> + <u-popup v-model="showCategoryPicker" mode="bottom"> <!-- 澶撮儴鎸夐挳鍖哄煙 --> <view class="popup-header"> <view @click="showCategoryPicker = false" class="cancelButton">鍙栨秷</view> @@ -91,175 +104,204 @@ check-strictly @check-change="onCategoryConfirm" /> - </van-popup> + </u-popup> <!-- 瑙勬牸鍨嬪彿閫夋嫨鍣� --> - <van-popup v-model:show="showSpecificationPicker" destroy-on-close position="bottom"> - <van-picker + <u-popup v-model="showSpecificationPicker" mode="bottom"> + <u-picker :columns="modelOptions" v-model="pickerSpecificationValue" @confirm="onSpecificationConfirm" @cancel="showSpecificationPicker = false" /> - </van-popup> + </u-popup> <!-- 绋庣巼閫夋嫨鍣� --> - <van-popup v-model:show="showTaxRatePicker" destroy-on-close position="bottom"> - <van-picker + <u-popup v-model="showTaxRatePicker" mode="bottom"> + <u-picker :columns="taxRateOptions" v-model="pickerTaxRateValue" @confirm="onTaxRateConfirm" @cancel="showTaxRatePicker = false" /> - </van-popup> + </u-popup> <!-- 鍙戠エ绫诲瀷閫夋嫨鍣� --> - <van-popup v-model:show="showInvoiceTypePicker" destroy-on-close position="bottom"> - <van-picker + <u-popup v-model="showInvoiceTypePicker" mode="bottom"> + <u-picker :columns="invoiceTypeOptions" v-model="pickerInvoiceTypeValue" @confirm="onInvoiceTypeConfirm" @cancel="showInvoiceTypePicker = false" /> - </van-popup> + </u-popup> <!-- 浜у搧淇℃伅 --> <view class="product-section"> <view class="section-header"> <text class="section-title">浜у搧淇℃伅</text> - <van-button type="primary" size="small" @click="addProduct" class="add-btn" icon="plus" v-if="operationType !== 'view'">鏂板</van-button> + <u-button type="primary" size="small" @click="addProduct" class="add-btn" v-if="operationType !== 'view'"> + <u-icon name="plus" size="14" /> + 鏂板 + </u-button> </view> <view class="product-card" v-for="(product, idx) in productData" :key="idx"> <!-- 浜у搧绫� --> <view class="product-header"> <view class="product-title"> - <van-icon name="description" color="#2979ff" size="15" /> + <u-icon name="file-text" color="#2979ff" size="15" /> <text class="product-productCategory">浜у搧 {{ idx + 1 }}</text> </view> <!-- 鎿嶄綔鎸夐挳 --> - <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 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> </view> <!-- 浜у搧淇℃伅琛ㄥ崟 --> <view class="product-form"> <!-- 浜у搧澶х被 --> - <van-field - v-model="product.productCategory" - is-link - readonly - name="productCategory" + <u-form-item label="浜у搧澶х被" + prop="productCategory" required - placeholder="璇烽�夋嫨" - :rules="[{ required: true, message: '璇烽�夋嫨' }]" - @click="openCategoryPicker(idx)" - /> + border-bottom + > + <u-input + v-model="product.productCategory" + readonly + placeholder="璇烽�夋嫨" + @click="openCategoryPicker(idx)" + /> + </u-form-item> <!-- 瑙勬牸鍨嬪彿 --> - <van-field - v-model="product.specificationModel" - is-link - readonly - name="specificationModel" + <u-form-item label="瑙勬牸鍨嬪彿" + prop="specificationModel" required - :rules="[{ required: true, message: '璇烽�夋嫨' }]" - placeholder="璇烽�夋嫨" - @click="openSpecificationPicker(idx)" - /> + border-bottom + > + <u-input + v-model="product.specificationModel" + readonly + placeholder="璇烽�夋嫨" + @click="openSpecificationPicker(idx)" + /> + </u-form-item> <!-- 鍗曚綅 --> - <van-field - v-model="product.unit" - name="unit" + <u-form-item label="鍗曚綅" + prop="unit" required - :rules="[{ required: true, message: '璇疯緭鍏�' }]" - placeholder="璇疯緭鍏�" - /> + border-bottom + > + <u-input + v-model="product.unit" + placeholder="璇疯緭鍏�" + /> + </u-form-item> <!-- 绋庣巼 --> - <van-field - v-model="product.taxRate" - is-link - readonly - name="taxRate" + <u-form-item label="绋庣巼(%)" + prop="taxRate" required - :rules="[{ required: true, message: '璇烽�夋嫨' }]" - placeholder="璇烽�夋嫨" - @click="openTaxRatePicker(idx)" - /> + border-bottom + > + <u-input + v-model="product.taxRate" + readonly + placeholder="璇烽�夋嫨" + @click="openTaxRatePicker(idx)" + /> + </u-form-item> <!-- 鍚◣鍗曚环 --> - <van-field - v-model="product.taxInclusiveUnitPrice" - name="taxInclusiveUnitPrice" + <u-form-item label="鍚◣鍗曚环(鍏�)" - type="number" + prop="taxInclusiveUnitPrice" required - :rules="[{ required: true, message: '璇疯緭鍏�' }]" - placeholder="璇疯緭鍏�" - @blur="formatTaxPrice(idx)" - /> + border-bottom + > + <u-input + v-model="product.taxInclusiveUnitPrice" + type="number" + placeholder="璇疯緭鍏�" + @blur="formatTaxPrice(idx)" + /> + </u-form-item> <!-- 鏁伴噺 --> - <van-field - v-model="product.quantity" - name="quantity" + <u-form-item label="鏁伴噺" - type="number" - :rules="[{ required: true, message: '璇疯緭鍏�' }]" + prop="quantity" required - placeholder="璇疯緭鍏�" - @blur="formatAmount(idx)" - /> + border-bottom + > + <u-input + v-model="product.quantity" + type="number" + placeholder="璇疯緭鍏�" + @blur="formatAmount(idx)" + /> + </u-form-item> <!-- 鍚◣鎬讳环 --> - <van-field - v-model="product.taxInclusiveTotalPrice" - name="taxInclusiveTotalPrice" + <u-form-item label="鍚◣鎬讳环(鍏�)" - type="number" - :rules="[{ required: true, message: '璇疯緭鍏�' }]" + prop="taxInclusiveTotalPrice" required - placeholder="璇疯緭鍏�" - @blur="formatTaxTotal(idx)" - /> + border-bottom + > + <u-input + v-model="product.taxInclusiveTotalPrice" + type="number" + placeholder="璇疯緭鍏�" + @blur="formatTaxTotal(idx)" + /> + </u-form-item> <!-- 涓嶅惈绋庢�讳环 --> - <van-field - v-model="product.taxExclusiveTotalPrice" - name="taxExclusiveTotalPrice" + <u-form-item label="涓嶅惈绋庢�讳环(鍏�)" - type="number" + prop="taxExclusiveTotalPrice" required - :rules="[{ required: true, message: '璇疯緭鍏�' }]" - placeholder="璇疯緭鍏�" - @blur="formatNoTaxTotal(idx)" - /> + border-bottom + > + <u-input + v-model="product.taxExclusiveTotalPrice" + type="number" + placeholder="璇疯緭鍏�" + @blur="formatNoTaxTotal(idx)" + /> + </u-form-item> <!-- 鍙戠エ绫诲瀷 --> - <van-field - v-model="product.invoiceType" - is-link - readonly - name="invoiceType" + <u-form-item label="鍙戠エ绫诲瀷" - :rules="[{ required: true, message: '璇烽�夋嫨' }]" + prop="invoiceType" required - placeholder="璇烽�夋嫨" - @click="openInvoiceTypePicker(idx)" - /> + border-bottom + > + <u-input + v-model="product.invoiceType" + readonly + placeholder="璇烽�夋嫨" + @click="openInvoiceTypePicker(idx)" + /> + </u-form-item> </view> </view> </view> <view class="footer-btns" v-if="operationType !== 'view'"> - <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="onSubmit">淇濆瓨</u-button> </view> - </van-form> + </u-form> </view> </template> -- Gitblit v1.9.3