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/sales/salesAccount/detail.vue | 330 ++++++++++++++++++++++++-------------------------------
1 files changed, 144 insertions(+), 186 deletions(-)
diff --git a/src/pages/sales/salesAccount/detail.vue b/src/pages/sales/salesAccount/detail.vue
index 3991e5d..bca5e36 100644
--- a/src/pages/sales/salesAccount/detail.vue
+++ b/src/pages/sales/salesAccount/detail.vue
@@ -4,93 +4,80 @@
<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="salesContractNo" border-bottom>
- <u-input v-model="form.salesContractNo" placeholder="鑷姩鐢熸垚" disabled />
- </u-form-item>
- <u-form-item
+ <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"
label="涓氬姟鍛�"
- prop="salesman"
required
- 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
+ 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"
label="瀹㈡埛鍚嶇О"
- prop="customerName"
+ 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
required
- 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
+ name="executionDate"
label="绛捐鏃ユ湡"
- 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
+ placeholder="鐐瑰嚮閫夋嫨鏃堕棿"
+ :rules="[{ required: true, message: '绛捐鏃ユ湡涓嶈兘涓虹┖' }]"
+ @click="showDatePicker = true"
+ />
+ <van-popup v-model:show="showDatePicker" destroy-on-close position="bottom">
+ <van-date-picker
v-model="pickerDateValue"
@confirm="onDateConfirm"
@cancel="showDatePicker = false"
/>
- </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
+ </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
:columns="userList"
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="customerOption"
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>
@@ -104,204 +91,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">
<!-- 浜у搧澶х被 -->
- <u-form-item
+ <van-field
+ v-model="product.productCategory"
+ is-link
+ readonly
+ name="productCategory"
label="浜у搧澶х被"
- prop="productCategory"
required
- border-bottom
- >
- <u-input
- v-model="product.productCategory"
- readonly
- placeholder="璇烽�夋嫨"
- @click="openCategoryPicker(idx)"
- />
- </u-form-item>
+ placeholder="璇烽�夋嫨"
+ :rules="[{ required: true, message: '璇烽�夋嫨' }]"
+ @click="openCategoryPicker(idx)"
+ />
<!-- 瑙勬牸鍨嬪彿 -->
- <u-form-item
+ <van-field
+ v-model="product.specificationModel"
+ is-link
+ readonly
+ name="specificationModel"
label="瑙勬牸鍨嬪彿"
- prop="specificationModel"
required
- border-bottom
- >
- <u-input
- v-model="product.specificationModel"
- readonly
- placeholder="璇烽�夋嫨"
- @click="openSpecificationPicker(idx)"
- />
- </u-form-item>
+ :rules="[{ required: true, message: '璇烽�夋嫨' }]"
+ placeholder="璇烽�夋嫨"
+ @click="openSpecificationPicker(idx)"
+ />
<!-- 鍗曚綅 -->
- <u-form-item
+ <van-field
+ v-model="product.unit"
+ name="unit"
label="鍗曚綅"
- prop="unit"
required
- border-bottom
- >
- <u-input
- v-model="product.unit"
- placeholder="璇疯緭鍏�"
- />
- </u-form-item>
+ :rules="[{ required: true, message: '璇疯緭鍏�' }]"
+ placeholder="璇疯緭鍏�"
+ />
<!-- 绋庣巼 -->
- <u-form-item
+ <van-field
+ v-model="product.taxRate"
+ is-link
+ readonly
+ name="taxRate"
label="绋庣巼(%)"
- prop="taxRate"
required
- border-bottom
- >
- <u-input
- v-model="product.taxRate"
- readonly
- placeholder="璇烽�夋嫨"
- @click="openTaxRatePicker(idx)"
- />
- </u-form-item>
+ :rules="[{ required: true, message: '璇烽�夋嫨' }]"
+ placeholder="璇烽�夋嫨"
+ @click="openTaxRatePicker(idx)"
+ />
<!-- 鍚◣鍗曚环 -->
- <u-form-item
+ <van-field
+ v-model="product.taxInclusiveUnitPrice"
+ name="taxInclusiveUnitPrice"
label="鍚◣鍗曚环(鍏�)"
- prop="taxInclusiveUnitPrice"
+ type="number"
required
- border-bottom
- >
- <u-input
- v-model="product.taxInclusiveUnitPrice"
- type="number"
- placeholder="璇疯緭鍏�"
- @blur="formatTaxPrice(idx)"
- />
- </u-form-item>
+ :rules="[{ required: true, message: '璇疯緭鍏�' }]"
+ placeholder="璇疯緭鍏�"
+ @blur="formatTaxPrice(idx)"
+ />
<!-- 鏁伴噺 -->
- <u-form-item
+ <van-field
+ v-model="product.quantity"
+ name="quantity"
label="鏁伴噺"
- prop="quantity"
+ type="number"
+ :rules="[{ required: true, message: '璇疯緭鍏�' }]"
required
- border-bottom
- >
- <u-input
- v-model="product.quantity"
- type="number"
- placeholder="璇疯緭鍏�"
- @blur="formatAmount(idx)"
- />
- </u-form-item>
+ placeholder="璇疯緭鍏�"
+ @blur="formatAmount(idx)"
+ />
<!-- 鍚◣鎬讳环 -->
- <u-form-item
+ <van-field
+ v-model="product.taxInclusiveTotalPrice"
+ name="taxInclusiveTotalPrice"
label="鍚◣鎬讳环(鍏�)"
- prop="taxInclusiveTotalPrice"
+ type="number"
+ :rules="[{ required: true, message: '璇疯緭鍏�' }]"
required
- border-bottom
- >
- <u-input
- v-model="product.taxInclusiveTotalPrice"
- type="number"
- placeholder="璇疯緭鍏�"
- @blur="formatTaxTotal(idx)"
- />
- </u-form-item>
+ placeholder="璇疯緭鍏�"
+ @blur="formatTaxTotal(idx)"
+ />
<!-- 涓嶅惈绋庢�讳环 -->
- <u-form-item
+ <van-field
+ v-model="product.taxExclusiveTotalPrice"
+ name="taxExclusiveTotalPrice"
label="涓嶅惈绋庢�讳环(鍏�)"
- prop="taxExclusiveTotalPrice"
+ type="number"
required
- border-bottom
- >
- <u-input
- v-model="product.taxExclusiveTotalPrice"
- type="number"
- placeholder="璇疯緭鍏�"
- @blur="formatNoTaxTotal(idx)"
- />
- </u-form-item>
+ :rules="[{ required: true, message: '璇疯緭鍏�' }]"
+ placeholder="璇疯緭鍏�"
+ @blur="formatNoTaxTotal(idx)"
+ />
<!-- 鍙戠エ绫诲瀷 -->
- <u-form-item
+ <van-field
+ v-model="product.invoiceType"
+ is-link
+ readonly
+ name="invoiceType"
label="鍙戠エ绫诲瀷"
- prop="invoiceType"
+ :rules="[{ required: true, message: '璇烽�夋嫨' }]"
required
- border-bottom
- >
- <u-input
- v-model="product.invoiceType"
- readonly
- placeholder="璇烽�夋嫨"
- @click="openInvoiceTypePicker(idx)"
- />
- </u-form-item>
+ 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>
--
Gitblit v1.9.3