修改组件

gaoluyang

6 天以前 7a0ffb0048adeda9ebfbca1d0b525eb224c173e3

 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 {