| | |
| | | <template> |
| | | <view class="sales-account"> |
| | | <!-- 使用通用页面头部组件 --> |
| | | <PageHeader title="来票登记" @back="goBack" /> |
| | | |
| | | <!-- 搜索和筛选区域 --> |
| | | <view class="search-section"> |
| | | <view class="search-bar"> |
| | | <view class="search-input"> |
| | | <up-input |
| | | class="search-text" |
| | | placeholder="请输入采购合同号/供应商名称" |
| | | v-model="supplierName" |
| | | @change="getList" |
| | | clearable |
| | | /> |
| | | </view> |
| | | <view class="filter-button" @click="getList"> |
| | | <up-icon name="search" size="24" color="#999"></up-icon> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | |
| | | <!-- 采购台账瀑布流 --> |
| | | <view class="ledger-list" v-if="ledgerList.length > 0"> |
| | | <view v-for="(item, index) in ledgerList" :key="index"> |
| | | <view class="ledger-item"> |
| | | <view class="item-header"> |
| | | <view class="item-left"> |
| | | <view class="document-icon"> |
| | | <up-icon name="file-text" size="16" color="#ffffff"></up-icon> |
| | | </view> |
| | | <text class="item-id">{{ item.purchaseContractNumber }}</text> |
| | | </view> |
| | | </view> |
| | | <up-divider></up-divider> |
| | | |
| | | <view class="item-details"> |
| | | <view class="detail-row"> |
| | | <text class="detail-label">销售合同号</text> |
| | | <text class="detail-value">{{ item.salesContractNo }}</text> |
| | | </view> |
| | | <view class="detail-row"> |
| | | <text class="detail-label">供应商名称</text> |
| | | <text class="detail-value">{{ item.supplierName }}</text> |
| | | </view> |
| | | <view class="detail-row"> |
| | | <text class="detail-label">项目名称</text> |
| | | <text class="detail-value">{{ item.projectName }}</text> |
| | | </view> |
| | | <view class="detail-row"> |
| | | <text class="detail-label">合同金额(元)</text> |
| | | <text class="detail-value highlight">{{ item.contractAmount }}</text> |
| | | </view> |
| | | <view class="detail-row"> |
| | | <text class="detail-label">已开票金额(元)</text> |
| | | <text class="detail-value highlight">{{ item.receiptPaymentAmount }}</text> |
| | | </view> |
| | | <view class="detail-row"> |
| | | <text class="detail-label">待开票金额(元)</text> |
| | | <text class="detail-value redlight">{{ item.unReceiptPaymentAmount }}</text> |
| | | </view> |
| | | </view> |
| | | |
| | | <!-- 操作按钮区域 --> |
| | | <view class="action-buttons"> |
| | | <u-button |
| | | type="primary" |
| | | size="small" |
| | | @click="handleAddInvoice(item)" |
| | | class="action-btn" |
| | | :disabled="item.unReceiptPaymentAmount == 0" |
| | | > |
| | | 新增开票 |
| | | </u-button> |
| | | <u-button |
| | | size="small" |
| | | @click="handleViewDetail(item)" |
| | | class="action-btn" |
| | | > |
| | | 查看详情 |
| | | </u-button> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view v-else class="no-data"> |
| | | <text>暂无采购台账数据</text> |
| | | </view> |
| | | </view> |
| | | <view class="sales-account"> |
| | | <!-- 使用通用页面头部组件 --> |
| | | <PageHeader title="来票登记" |
| | | @back="goBack" /> |
| | | <!-- 搜索和筛选区域 --> |
| | | <view class="search-section"> |
| | | <view class="search-bar"> |
| | | <view class="search-input"> |
| | | <up-input class="search-text" |
| | | placeholder="请输入采购合同号/供应商名称" |
| | | v-model="supplierName" |
| | | @change="getList" |
| | | clearable /> |
| | | </view> |
| | | <view class="filter-button" |
| | | @click="getList"> |
| | | <up-icon name="search" |
| | | size="24" |
| | | color="#999"></up-icon> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <!-- 采购台账瀑布流 --> |
| | | <view class="ledger-list" |
| | | v-if="ledgerList.length > 0"> |
| | | <view v-for="(item, index) in ledgerList" |
| | | :key="index"> |
| | | <view class="ledger-item"> |
| | | <view class="item-header"> |
| | | <view class="item-left"> |
| | | <view class="document-icon"> |
| | | <up-icon name="file-text" |
| | | size="16" |
| | | color="#ffffff"></up-icon> |
| | | </view> |
| | | <text class="item-id">{{ item.purchaseContractNumber }}</text> |
| | | </view> |
| | | </view> |
| | | <up-divider></up-divider> |
| | | <view class="item-details"> |
| | | <view class="detail-row"> |
| | | <text class="detail-label">销售合同号</text> |
| | | <text class="detail-value">{{ item.salesContractNo }}</text> |
| | | </view> |
| | | <view class="detail-row"> |
| | | <text class="detail-label">供应商名称</text> |
| | | <text class="detail-value">{{ item.supplierName }}</text> |
| | | </view> |
| | | <view class="detail-row"> |
| | | <text class="detail-label">项目名称</text> |
| | | <text class="detail-value">{{ item.projectName }}</text> |
| | | </view> |
| | | <view class="detail-row"> |
| | | <text class="detail-label">合同金额(元)</text> |
| | | <text class="detail-value highlight">{{ item.contractAmount }}</text> |
| | | </view> |
| | | <view class="detail-row"> |
| | | <text class="detail-label">已开票金额(元)</text> |
| | | <text class="detail-value highlight">{{ item.receiptPaymentAmount }}</text> |
| | | </view> |
| | | <view class="detail-row"> |
| | | <text class="detail-label">待开票金额(元)</text> |
| | | <text class="detail-value redlight">{{ item.unReceiptPaymentAmount }}</text> |
| | | </view> |
| | | </view> |
| | | <!-- 操作按钮区域 --> |
| | | <view class="action-buttons"> |
| | | <u-button type="primary" |
| | | size="small" |
| | | @click="handleAddInvoice(item)" |
| | | class="action-btn" |
| | | :disabled="item.unReceiptPaymentAmount == 0"> |
| | | 新增开票 |
| | | </u-button> |
| | | <u-button size="small" |
| | | @click="handleViewDetail(item)" |
| | | class="action-btn"> |
| | | 查看详情 |
| | | </u-button> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view v-else |
| | | class="no-data"> |
| | | <text>暂无采购台账数据</text> |
| | | </view> |
| | | </view> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { ref } from 'vue'; |
| | | import { onShow } from '@dcloudio/uni-app'; |
| | | import useUserStore from "@/store/modules/user"; |
| | | import {gePurchaseListPage} from "@/api/procurementManagement/invoiceEntry"; |
| | | const userStore = useUserStore() |
| | | import { ref } from "vue"; |
| | | import { onShow } from "@dcloudio/uni-app"; |
| | | import useUserStore from "@/store/modules/user"; |
| | | import { gePurchaseListPage } from "@/api/procurementManagement/invoiceEntry"; |
| | | const userStore = useUserStore(); |
| | | |
| | | // 搜索关键词 |
| | | const supplierName = ref(''); |
| | | // 搜索关键词 |
| | | const supplierName = ref(""); |
| | | |
| | | // 采购台账数据 |
| | | const ledgerList = ref([]); |
| | | // 采购台账数据 |
| | | const ledgerList = ref([]); |
| | | |
| | | // 返回上一页 |
| | | const goBack = () => { |
| | | uni.navigateBack(); |
| | | }; |
| | | // 查询列表 |
| | | const getList = () => { |
| | | showLoadingToast('加载中...') |
| | | const page = { |
| | | current: -1, |
| | | size: -1 |
| | | } |
| | | gePurchaseListPage({...page, supplierName: supplierName.value}).then((res) => { |
| | | ledgerList.value = res.data.records; |
| | | closeToast() |
| | | }).catch(() => { |
| | | closeToast() |
| | | }); |
| | | }; |
| | | // 返回上一页 |
| | | const goBack = () => { |
| | | uni.navigateBack(); |
| | | }; |
| | | // 查询列表 |
| | | const getList = () => { |
| | | showLoadingToast("加载中..."); |
| | | const page = { |
| | | current: -1, |
| | | size: -1, |
| | | }; |
| | | gePurchaseListPage({ |
| | | ...page, |
| | | supplierName: supplierName.value, |
| | | approvalStatus: 3, |
| | | }) |
| | | .then(res => { |
| | | ledgerList.value = res.data.records; |
| | | closeToast(); |
| | | }) |
| | | .catch(() => { |
| | | closeToast(); |
| | | }); |
| | | }; |
| | | |
| | | // 显示加载提示 |
| | | const showLoadingToast = (message) => { |
| | | uni.showLoading({ |
| | | title: message, |
| | | mask: true |
| | | }); |
| | | }; |
| | | // 显示加载提示 |
| | | const showLoadingToast = message => { |
| | | uni.showLoading({ |
| | | title: message, |
| | | mask: true, |
| | | }); |
| | | }; |
| | | |
| | | // 关闭提示 |
| | | const closeToast = () => { |
| | | uni.hideLoading(); |
| | | }; |
| | | // 关闭提示 |
| | | const closeToast = () => { |
| | | uni.hideLoading(); |
| | | }; |
| | | |
| | | // 处理新增来票 |
| | | const handleAddInvoice = (item) => { |
| | | try { |
| | | // 存储选中的合同信息 |
| | | uni.setStorageSync('editData', JSON.stringify(item)); |
| | | // 跳转到新增来票页面 |
| | | uni.navigateTo({ |
| | | url: '/pages/procurementManagement/invoiceEntry/add' |
| | | }); |
| | | } catch (error) { |
| | | console.error('处理新增来票失败:', error); |
| | | uni.showToast({ |
| | | title: '操作失败,请重试', |
| | | icon: 'error' |
| | | }); |
| | | } |
| | | }; |
| | | // 处理新增来票 |
| | | const handleAddInvoice = item => { |
| | | try { |
| | | // 存储选中的合同信息 |
| | | uni.setStorageSync("editData", JSON.stringify(item)); |
| | | // 跳转到新增来票页面 |
| | | uni.navigateTo({ |
| | | url: "/pages/procurementManagement/invoiceEntry/add", |
| | | }); |
| | | } catch (error) { |
| | | console.error("处理新增来票失败:", error); |
| | | uni.showToast({ |
| | | title: "操作失败,请重试", |
| | | icon: "error", |
| | | }); |
| | | } |
| | | }; |
| | | |
| | | // 处理查看详情 |
| | | const handleViewDetail = (item) => { |
| | | try { |
| | | // 存储数据 |
| | | uni.setStorageSync('editData', JSON.stringify(item)); |
| | | |
| | | // 跳转到详情页面 |
| | | uni.navigateTo({ |
| | | url: '/pages/procurementManagement/invoiceEntry/view' |
| | | }); |
| | | } catch (error) { |
| | | console.error('处理查看详情失败:', error); |
| | | uni.showToast({ |
| | | title: '操作失败,请重试', |
| | | icon: 'error' |
| | | }); |
| | | } |
| | | }; |
| | | // 处理查看详情 |
| | | const handleViewDetail = item => { |
| | | try { |
| | | // 存储数据 |
| | | uni.setStorageSync("editData", JSON.stringify(item)); |
| | | |
| | | onShow(() => { |
| | | // 页面显示时刷新列表 |
| | | getList(); |
| | | }); |
| | | // 跳转到详情页面 |
| | | uni.navigateTo({ |
| | | url: "/pages/procurementManagement/invoiceEntry/view", |
| | | }); |
| | | } catch (error) { |
| | | console.error("处理查看详情失败:", error); |
| | | uni.showToast({ |
| | | title: "操作失败,请重试", |
| | | icon: "error", |
| | | }); |
| | | } |
| | | }; |
| | | |
| | | onShow(() => { |
| | | // 页面显示时刷新列表 |
| | | getList(); |
| | | }); |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | @import '@/styles/procurement-common.scss'; |
| | | @import "@/styles/procurement-common.scss"; |
| | | |
| | | // 来票登记特有样式 |
| | | .nav-icon { |
| | | width: 24px; |
| | | height: 24px; |
| | | background: #2979ff; |
| | | border-radius: 4px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | } |
| | | // 来票登记特有样式 |
| | | .nav-icon { |
| | | width: 24px; |
| | | height: 24px; |
| | | background: #2979ff; |
| | | border-radius: 4px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | } |
| | | |
| | | .nav-text { |
| | | font-size: 14px; |
| | | color: #2979ff; |
| | | font-weight: 500; |
| | | } |
| | | .nav-text { |
| | | font-size: 14px; |
| | | color: #2979ff; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | .header-center { |
| | | flex: 1; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | position: absolute; |
| | | left: 0; |
| | | right: 0; |
| | | pointer-events: none; |
| | | } |
| | | .header-center { |
| | | flex: 1; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | position: absolute; |
| | | left: 0; |
| | | right: 0; |
| | | pointer-events: none; |
| | | } |
| | | |
| | | .page-title { |
| | | font-size: 18px; |
| | | font-weight: 600; |
| | | color: #333; |
| | | pointer-events: auto; |
| | | } |
| | | .page-title { |
| | | font-size: 18px; |
| | | font-weight: 600; |
| | | color: #333; |
| | | pointer-events: auto; |
| | | } |
| | | |
| | | .header-right { |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | .header-right { |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | |
| | | .status-bar { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 4px; |
| | | } |
| | | .status-bar { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 4px; |
| | | } |
| | | |
| | | .signal, .wifi, .battery { |
| | | width: 16px; |
| | | height: 8px; |
| | | background: #333; |
| | | border-radius: 2px; |
| | | } |
| | | .signal, |
| | | .wifi, |
| | | .battery { |
| | | width: 16px; |
| | | height: 8px; |
| | | background: #333; |
| | | border-radius: 2px; |
| | | } |
| | | |
| | | .fab-button { |
| | | bottom: 30px; // 与其他页面的 calc(30px + env(safe-area-inset-bottom)) 不同 |
| | | } |
| | | .fab-button { |
| | | bottom: 30px; // 与其他页面的 calc(30px + env(safe-area-inset-bottom)) 不同 |
| | | } |
| | | </style> |