修改组件

gaoluyang

2 天以前 025e46e11cb2962fd7692adfa401333758cc779b

 src/pages/procurementManagement/invoiceEntry/add.vue

@@ -6,118 +6,188 @@
      <!-- 表单内容 -->
      <u-form @submit="submitForm" ref="formRef" label-width="110" input-align="right" error-message-align="right">
         <!-- 基本信息 -->
         <u-cell-group title="基本信息">
            <u-form-item label="采购合同号" prop="contractNo" required border-bottom>
               <u-input v-model="form.contractNo" placeholder="请输入采购合同号" clearable />
         <view class="form-section">
            <u-form-item label="采购合同号" prop="purchaseLedgerNo" required>
               <u-input v-model="form.purchaseLedgerNo" placeholder="自动填充" disabled />
            </u-form-item>
            <u-form-item label="供应商名称" prop="supplierName" required border-bottom>
               <u-input v-model="form.supplierName" placeholder="请输入供应商名称" clearable />
            <u-form-item label="销售合同号" prop="salesContractNo" required>
               <u-input v-model="form.salesContractNo" placeholder="自动填充" disabled />
            </u-form-item>
            <u-form-item label="发票号" prop="invoiceNo" required border-bottom>
               <u-input v-model="form.invoiceNo" placeholder="请输入发票号" clearable />
            <u-form-item label="供应商名称" prop="supplierName" required>
               <u-input v-model="form.supplierName" placeholder="自动填充" disabled />
            </u-form-item>
            <u-form-item label="发票金额" prop="invoiceAmount" required border-bottom>
               <u-input v-model="form.invoiceAmount" type="number" placeholder="请输入发票金额" clearable />
            <u-form-item label="项目名称" prop="projectName" required>
               <u-input v-model="form.projectName" placeholder="自动填充" disabled />
            </u-form-item>
            <u-form-item label="税率" prop="taxRate" required border-bottom>
               <u-input v-model="form.taxRate" placeholder="请输入税率" clearable />
            <u-form-item label="发票号" prop="invoiceNumber" required>
               <u-input v-model="form.invoiceNumber" placeholder="请输入" clearable />
            </u-form-item>
            <u-form-item label="开票日期" prop="issueDate" required border-bottom>
               <u-input v-model="form.issueDate" placeholder="请选择开票日期" readonly @click="showIssueDatePicker = true" clearable />
            <u-form-item label="发票金额(元)" prop="invoiceAmount" required>
               <u-input v-model="form.invoiceAmount" type="number" placeholder="自动填充" disabled />
            </u-form-item>
            <u-form-item label="录入人" border-bottom>
               <u-input v-model="form.recorder" placeholder="自动填充" readonly />
            <u-form-item label="录入人">
               <u-input v-model="form.issUer" placeholder="自动填充" disabled />
            </u-form-item>
            <u-form-item label="创建时间" border-bottom>
               <u-input v-model="form.createTime" placeholder="请选择创建时间" readonly @click="showCreateTimePicker = true" clearable />
            <u-form-item 
               label="开票日期" 
               prop="entryDate" 
               required
               @click="showEntryDatePicker = true"
            >
               <u-input 
                  v-model="form.entryDate" 
                  placeholder="请选择开票日期" 
                  readonly
                  @click="showEntryDatePicker = true"
               />
               <template #right>
                  <u-icon name="arrow-right" @click="showEntryDatePicker = true"></u-icon>
               </template>
            </u-form-item>
         </u-cell-group>
			
         <!-- 产品信息 -->
         <view class="product-section" v-if="!productData || productData.length === 0">
            <u-empty description="暂无产品数据" />
            <u-form-item 
               label="录入日期" 
               prop="enterDate" 
               required
               @click="showEnterDatePicker = true"
            >
               <u-input 
                  v-model="form.enterDate" 
                  placeholder="请选择录入日期" 
                  readonly
                  @click="showEnterDatePicker = true"
               />
               <template #right>
                  <u-icon name="arrow-right" @click="showEnterDatePicker = true"></u-icon>
               </template>
            </u-form-item>
         </view>
         
         <!-- 产品列表 -->
         <view class="product-list" v-if="productData && productData.length > 0">
            <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" />
                     <text class="product-name">产品 {{ idx + 1 }}</text>
                  </view>
         <!-- 产品信息 -->
         <view class="product-section">
            <view class="section-header">
               <view>
                  <text class="section-title">产品信息</text>
               </view>
					
               <!-- 产品信息表单 -->
               <view class="product-form">
                  <u-form-item label="产品名称" border-bottom>
                     <u-input v-model="product.productName" placeholder="请输入产品名称" />
                  </u-form-item>
                  <u-form-item label="规格型号" border-bottom>
                     <u-input v-model="product.specification" placeholder="请输入规格型号" />
                  </u-form-item>
                  <u-form-item label="单位" border-bottom>
                     <u-input v-model="product.unit" placeholder="请输入单位" />
                  </u-form-item>
                  <u-form-item label="数量" border-bottom>
                     <u-input v-model="product.quantity" type="number" placeholder="请输入数量" />
                  </u-form-item>
                  <u-form-item label="单价" border-bottom>
                     <u-input v-model="product.unitPrice" type="number" placeholder="请输入单价" />
                  </u-form-item>
                  <u-form-item label="金额" border-bottom>
                     <u-input v-model="product.amount" type="number" placeholder="请输入金额" />
                  </u-form-item>
                  <u-form-item label="税率" border-bottom>
                     <u-input v-model="product.taxRate" placeholder="请输入税率" />
                  </u-form-item>
                  <u-form-item label="税额" border-bottom>
                     <u-input v-model="product.taxAmount" type="number" placeholder="请输入税额" />
                  </u-form-item>
                  <u-form-item label="含税金额" border-bottom>
                     <u-input v-model="product.totalAmount" type="number" placeholder="请输入含税金额" />
                  </u-form-item>
                  <u-form-item label="备注" border-bottom>
                     <u-textarea v-model="product.remark" placeholder="请输入备注" :maxlength="200" count :autoHeight="true" />
                  </u-form-item>
            </view>
				
            <view v-if="!productData || productData.length === 0" class="empty-state">
               <view class="empty-text">暂无产品数据</view>
            </view>
				
            <view v-else class="product-list">
               <view 
                  v-for="(item, index) in productData" 
                  :key="index" 
                  class="product-card"
               >
                  <!-- 产品头部 -->
                  <view class="product-header">
                     <view class="product-title">
                        <view class="document-icon">
                           <u-icon name="file-text" size="16" color="#ffffff"></u-icon>
                        </view>
                        <text class="product-productCategory">产品 {{ index + 1 }}</text>
                     </view>
                  </view>
						
                  <!-- 产品信息表单 -->
                  <view class="product-form">
                     <u-form-item label="产品大类" prop="productCategory" border-bottom>
                        <u-input v-model="item.productCategory" placeholder="" disabled />
                     </u-form-item>
                     <u-form-item label="规格型号" prop="specificationModel" border-bottom>
                        <u-input v-model="item.specificationModel" placeholder="" disabled />
                     </u-form-item>
                     <u-form-item label="单位" prop="unit" border-bottom>
                        <u-input v-model="item.unit" placeholder="" disabled />
                     </u-form-item>
                     <u-form-item label="数量" prop="quantity" border-bottom>
                        <u-input v-model="item.quantity" placeholder="" disabled />
                     </u-form-item>
                     <u-form-item label="税率(%)" prop="taxRate" border-bottom>
                        <u-input v-model="item.taxRate" placeholder="" disabled />
                     </u-form-item>
                     <u-form-item label="录入日期" prop="registerDate" border-bottom>
                        <u-input v-model="item.registerDate" placeholder="" disabled />
                     </u-form-item>
                     <u-form-item label="含税单价(元)" prop="taxInclusiveUnitPrice" border-bottom>
                        <u-input v-model="item.taxInclusiveUnitPrice" placeholder="" disabled />
                     </u-form-item>
                     <u-form-item label="含税总价(元)" prop="taxInclusiveTotalPrice" border-bottom>
                        <u-input v-model="item.taxInclusiveTotalPrice" placeholder="" disabled />
                     </u-form-item>
                     <u-form-item label="不含税总价(元)" prop="taxExclusiveTotalPrice" border-bottom>
                        <u-input v-model="item.taxExclusiveTotalPrice" placeholder="" disabled />
                     </u-form-item>
							
                     <!-- 本次来票信息 -->
                     <u-form-item label="本次来票数" prop="ticketsNum" border-bottom>
                        <u-input 
                           v-model="item.ticketsNum" 
                           type="number" 
                           placeholder="请输入来票数量"
                           @blur="invoiceNumBlur(item)"
                        />
                     </u-form-item>
                     <u-form-item label="本次来票金额(元)" prop="ticketsAmount" border-bottom>
                        <u-input 
                           v-model="item.ticketsAmount" 
                           type="number" 
                           placeholder="请输入来票金额"
                           @blur="invoiceAmountBlur(item)"
                        />
                     </u-form-item>
							
                     <!-- 未来票信息 -->
                     <u-form-item label="未来票数" prop="futureTickets" border-bottom>
                        <u-input v-model="item.futureTickets" placeholder="" disabled />
                     </u-form-item>
                     <u-form-item label="未来票金额(元)" prop="futureTicketsAmount" border-bottom>
                        <u-input v-model="item.futureTicketsAmount" placeholder="" disabled />
                     </u-form-item>
                  </view>
               </view>
            </view>
         </view>
         
         <!-- 提交按钮 -->
         <view class="footer-btns">
            <u-button class="cancel-btn" @click="goBack">取消</u-button>
            <u-button class="save-btn" type="primary" @click="submitForm">保存</u-button>
         </view>
         <!-- 使用FooterButtons组件 -->
         <FooterButtons 
            @cancel="goBack"
            @confirm="submitForm"
            :loading="submitting"
         />

         <!-- 为底部按钮留出空间 -->
         <view style="height: 80px;"></view>
      </u-form>

      <!-- 开票日期选择器 -->
      <u-popup v-model="showIssueDatePicker" mode="bottom">
      <u-popup :show="showEntryDatePicker" mode="bottom" @close="showEntryDatePicker = false">
         <u-datetime-picker
            v-model="issueDateValue"
            title="选择开票日期"
            @confirm="onIssueDateConfirm"
            @cancel="showIssueDatePicker = false"
            :show="true"
            v-model="entryDateValue"
            @confirm="onEntryDateConfirm"
            @cancel="showEntryDatePicker = false"
            mode="date"
         />
      </u-popup>

      <!-- 创建时间选择器 -->
      <u-popup v-model="showCreateTimePicker" mode="bottom">
      <!-- 录入日期选择器 -->
      <u-popup :show="showEnterDatePicker" mode="bottom" @close="showEnterDatePicker = false">
         <u-datetime-picker
            v-model="createTimeValue"
            title="选择创建时间"
            @confirm="onCreateTimeConfirm"
            @cancel="showCreateTimePicker = false"
            :show="true"
            v-model="enterDateValue"
            @confirm="onEnterDateConfirm"
            @cancel="showEnterDatePicker = false"
            mode="date"
         />
      </u-popup>
   </view>
</template>

<script setup>
// 替换 Vant 的 toast 方法
// import { showToast, showLoadingToast, closeToast } from 'vant'

// 替换 toast 方法
import { ref, onMounted } from 'vue'
import FooterButtons from '@/components/FooterButtons.vue'
const showToast = (message) => {
  uni.showToast({
    title: message,
@@ -134,108 +204,262 @@
const closeToast = () => {
  uni.hideLoading()
}
import useUserStore from '@/store/modules/user'
import {addOrUpdateRegistration, getPurchaseNoById} from "@/api/procurementManagement/invoiceEntry";
import {getInfo} from "@/api/procurementManagement/invoiceEntry.js";
import { formatDateToYMD } from '@/utils/ruoyi'

const userStore = useUserStore()
const editData = ref(null);

// 表单引用
const formRef = ref()

// 表单数据
let form = ref({
  purchaseLedgerNo: '',
  salesContractNo: '',
  supplierName: '',
  projectName: '',
  issUer: '',
  entryDate: '',
  enterDate: '',
  invoiceAmount: '',
  invoiceNumber: '',
  fileIds: []
})

// 产品数据
const productData = ref([])

// 文件上传相关
const action = ref('/dev-api/common/upload')
const getToken = () => {
  return userStore.token || ''
}

// 日期选择器状态
const showEntryDatePicker = ref(false)
const showEnterDatePicker = ref(false)
const entryDateValue = ref(Date.now())
const enterDateValue = ref(Date.now())

// 提交状态
const submitting = ref(false)

// 返回上一页
const goBack = () => {
   // 清理本地存储的数据
   uni.removeStorageSync('editData');
  uni.navigateBack()
}

// 格式化数字
const formatNumber = (value, precision = 2) => {
  if (!value && value !== 0) return '0.00'
  return Number(value).toFixed(precision)
}

// 更新未来票数据
const updateFutureTicketData = (row) => {
  const totalQuantity = parseFloat(row.quantity) || 0
  const currentTicketNum = parseFloat(row.ticketsNum) || 0
  const totalAmount = parseFloat(row.taxInclusiveTotalPrice) || 0
  const currentTicketAmount = parseFloat(row.ticketsAmount) || 0

  row.futureTickets = Math.max(0, totalQuantity - currentTicketNum).toFixed(2)
  row.futureTicketsAmount = Math.max(0, totalAmount - currentTicketAmount).toFixed(2)
}

// 来票数量变化处理
const invoiceNumBlur = (row) => {
   if (!row.ticketsNum || row.ticketsNum === "") {
    row.ticketsNum = 0;
  }
  if (Number(row.ticketsNum) > Number(row.tempFutureTickets)) {
    showToast("本次开票数不得大于未开票数");
    row.ticketsNum = 0;
    return;
  }
  // 计算本次来票金额
  row.ticketsAmount = row.ticketsNum * row.taxInclusiveUnitPrice;
  // 计算未来票数
  row.futureTickets = row.tempFutureTickets - row.ticketsNum;
  // 计算未来票金额
  row.futureTicketsAmount = row.tempFutureTicketsAmount - row.ticketsAmount;
  calculateinvoiceAmount();
}

// 来票金额变化处理
const invoiceAmountBlur = (row) => {
   if (!row.ticketsAmount) {
      row.ticketsAmount = 0;
   }
   // 计算是否超过来票总金额
   if (Number(row.ticketsAmount) > Number(row.taxInclusiveTotalPrice)) {
      showToast('本次来票金额不得大于含税总金额');
      row.ticketsAmount = 0;
   }
   // 计算本次来票数
   row.ticketsNum = Number(
      (row.ticketsAmount / row.taxInclusiveUnitPrice).toFixed(2)
   );
   // 计算未来票数和未来票金额
   updateFutureTicketData(row)
   calculateinvoiceAmount();
}

const calculateinvoiceAmount = () => {
   let invoiceAmountTotal = 0;
   productData.value.forEach((item) => {
      if (item.ticketsAmount) {
         invoiceAmountTotal += Number(item.ticketsAmount);
      }
   });
   form.value.invoiceAmount = invoiceAmountTotal.toFixed(2);
}

// 文件上传成功回调
const uploadSuccess = (res) => {
  if (res && res.data && res.data.fileId) {
    form.value.fileIds.push(res.data.fileId)
  }
}

// 文件删除回调
const removeFile = (index, file) => {
  if (file.fileId) {
    const fileIndex = form.value.fileIds.indexOf(file.fileId)
    if (fileIndex > -1) {
      form.value.fileIds.splice(fileIndex, 1)
    }
  }
}



// 开票日期确认
const onEntryDateConfirm = (e) => {
   form.value.entryDate = formatDateToYMD(e.value)
   entryDateValue.value = e.value
   showEntryDatePicker.value = false;
};

// 录入日期确认
const onEnterDateConfirm = (e) => {
   form.value.enterDate = formatDateToYMD(e.value)
   enterDateValue.value = e.value
   showEnterDatePicker.value = false;
}

// 格式化日期
const formatDate = (date) => {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}

// 获取产品列表
const getProductList = async () => {
  try {
    showLoadingToast('加载中...')
    const res = await getPurchaseNoById({ id: editData.value.id })
      form.value.purchaseLedgerNo = res.data.purchaseContractNumber;
      form.value.invoiceAmount = res.data.invoiceAmount;
      form.value.invoiceNumber = res.data.invoiceNumber;
      const data = await getInfo({ id: editData.value.id });
      productData.value = data.data.productData;
      form.value.salesContractNo = data.data.salesContractNo;
      form.value.projectName = data.data.projectName;
      form.value.supplierName = data.data.supplierName;
      form.value.productData = data.data.productData;
      // 设置默认录入人
      form.value.issUer = userStore.nickName
		
      // 设置默认日期
      const today = new Date()
      form.value.enterDate = formatDate(today)
      form.value.entryDate = formatDate(today)
    
    closeToast()
  } catch (error) {
    closeToast()
    showToast('获取产品列表失败')
  }
}

// 提交表单
const submitForm = async () => {
  try {
    submitting.value = true
    
    // 验证发票号是否填写
    if (!form.value.invoiceNumber) {
      showToast('请输入发票号')
      return
    }
    
    // 验证产品数据
    if (productData.value.length === 0) {
      showToast('请先添加产品信息')
      return
    }

    // 验证来票数据
    const hasInvoiceData = productData.value.some(item => {
      const num = parseFloat(item.ticketsNum) || 0
      const amount = parseFloat(item.ticketsAmount) || 0
      return num > 0 || amount > 0
    })

    if (!hasInvoiceData) {
      showToast('请至少输入一个产品的来票信息')
      return
    }

    const submitData = {
      ...form.value,
      productData: productData.value
    }

    await addOrUpdateRegistration(submitData)
    showToast('提交成功')
    
    // 返回上一页
    setTimeout(() => {
         goBack()
    }, 800)
    
  } catch (error) {
    showToast('提交失败，请重试')
  } finally {
    submitting.value = false
  }
}

// 页面加载时初始化数据
onMounted(() => {
  // 从页面参数或缓存中获取销售合同信息
  const contractInfo = uni.getStorageSync('editData')
  if (contractInfo) {
      editData.value = JSON.parse(contractInfo);
    const contract = JSON.parse(contractInfo)
    form.value.purchaseLedgerNo = contract.purchaseLedgerNo || ''
    form.value.salesContractNo = contract.salesContractNo || ''
    form.value.supplierName = contract.supplierName || ''
    form.value.projectName = contract.projectName || ''
    form.value.invoiceAmount = contract.invoiceAmount || ''
    form.value.invoiceNumber = contract.invoiceNumber || ''
    form.value.purchaseLedgerId = contract.id || ''
    
    // 获取产品列表
    getProductList()
  }
})
</script>

<style scoped lang="scss">
.account-detail {
   min-height: 100vh;
   background: #f8f9fa;
   padding-bottom: 5rem;
}
@import '@/static/scss/form-common.scss';

.empty-state {
  padding: 40px 0;
}

.product-section {
  background: #fff;
  margin-top: 1rem;
  padding: 1rem;
  box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.04);
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.section-title {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
}

.product-list {
  .product-card {
    background: #FFFFFF;
    box-shadow: 0 0 1.25rem 0 rgba(0,57,117,0.08);
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
    padding: 1rem 0.5rem 0 0.5rem;
    position: relative;
    margin-bottom: 1rem;
  }
}

.product-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.5rem 0.75rem 0.5rem;
  border-bottom: 0.0625rem solid #e8e8e8;
}

.product-title {
  display: flex;
  align-items: center;
}

.product-productCategory {
  margin-left: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #333;
}

.product-form {
  margin-bottom: 1rem;
}
.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;
  }
}
</style>