| | |
| | | <view class="sales-account"> |
| | | <!-- 使用通用页面头部组件 --> |
| | | <PageHeader title="开票台账" @back="goBack" /> |
| | | |
| | | |
| | | <!-- 搜索和筛选区域(保持与销售台账风格一致) --> |
| | | <view class="search-filter-section"> |
| | | <view class="search-section"> |
| | | <view class="search-bar"> |
| | | <view class="search-input"> |
| | | <input |
| | | <up-input |
| | | class="search-text" |
| | | placeholder="客户名称/销售合同号" |
| | | placeholder="请输入客户名称/合同号搜索" |
| | | v-model="searchForm.searchText" |
| | | confirm-type="search" |
| | | @confirm="handleQuery" |
| | | @change="handleQuery" |
| | | clearable |
| | | /> |
| | | </view> |
| | | <!-- <view class="filter-button" @click="showFilter = true">--> |
| | | <!-- <up-icon name="list" size="24" color="#999"></up-icon>--> |
| | | <!-- </view>--> |
| | | <!-- <view class="filter-button" @click="showFilter = true">--> |
| | | <!-- <up-icon name="list" size="24" color="#999"></up-icon>--> |
| | | <!-- </view>--> |
| | | <view class="filter-button" @click="handleQuery"> |
| | | <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"> |
| | |
| | | > |
| | | 删除 |
| | | </up-button> |
| | | <up-button |
| | | size="small" |
| | | plain |
| | | class="action-btn" |
| | | v-if="item.invoiceFileName" |
| | | @click="openFileActions(item.commonFiles || [])" |
| | | > |
| | | 查看附件 |
| | | </up-button> |
| | | <up-button |
| | | type="primary" |
| | | size="small" |
| | | class="action-btn" |
| | | v-else |
| | | :disabled="item.invoicePerson !== userStore.nickName" |
| | | @click="openUpload(item)" |
| | | > |
| | | 上传 |
| | | </up-button> |
| | | <!-- <up-button--> |
| | | <!-- size="small"--> |
| | | <!-- plain--> |
| | | <!-- class="action-btn"--> |
| | | <!-- v-if="item.invoiceFileName"--> |
| | | <!-- @click="openFileActions(item.commonFiles || [])"--> |
| | | <!-- >--> |
| | | <!-- 查看附件--> |
| | | <!-- </up-button>--> |
| | | <!-- <up-button--> |
| | | <!-- type="primary"--> |
| | | <!-- size="small"--> |
| | | <!-- class="action-btn"--> |
| | | <!-- v-else--> |
| | | <!-- :disabled="item.invoicePerson !== userStore.nickName"--> |
| | | <!-- @click="openUpload(item)"--> |
| | | <!-- >--> |
| | | <!-- 上传--> |
| | | <!-- </up-button>--> |
| | | </view> |
| | | </view> |
| | | </view> |
| | |
| | | <view v-else class="no-data"> |
| | | <text>暂无开票台账数据</text> |
| | | </view> |
| | | |
| | | |
| | | <!-- 筛选弹窗 --> |
| | | <up-popup v-model="showFilter" mode="bottom" round><up-transition> |
| | | <view class="filter-popup"> |
| | |
| | | </view> |
| | | </view> |
| | | </up-transition></up-popup> |
| | | |
| | | |
| | | <!-- 日历:开票日期范围 --> |
| | | <up-popup v-model="showInvoiceRange" mode="bottom"><up-transition> |
| | | <up-datetime-picker |
| | |
| | | @cancel="showInvoiceRange = false" |
| | | /> |
| | | </up-transition></up-popup> |
| | | |
| | | |
| | | <!-- 日期:录入日期 --> |
| | | <up-popup v-model="showCreateDatePicker" mode="bottom"><up-transition> |
| | | <up-datetime-picker |
| | |
| | | @cancel="showCreateDatePicker = false" |
| | | /> |
| | | </up-transition></up-popup> |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | <!-- 单行上传弹窗(无表单) --> |
| | | <up-popup v-model="showUpload" mode="bottom" round><up-transition> |
| | | <view class="upload-container"> |
| | |
| | | </view> |
| | | </view> |
| | | </up-transition></up-popup> |
| | | |
| | | |
| | | <!-- 附件列表选择 --> |
| | | <up-action-sheet v-model="showFileSheet" :actions="fileActions" cancel-text="取消" close-on-click-action @select="onSelectFile"> |
| | | <view class="up-action-sheet__cancel" @click="showFileSheet = false"> |
| | |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | .u-divider { |
| | | margin: 0 !important; |
| | | } |
| | | .sales-account { |
| | | min-height: 100vh; |
| | | background: #f8f9fa; |
| | | position: relative; |
| | | } |
| | | @import '@/styles/sales-common.scss'; |
| | | |
| | | .search-filter-section { |
| | | padding: 10px 20px; |
| | | background: #ffffff; |
| | | } |
| | | |
| | | .search-bar { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 12px; |
| | | } |
| | | |
| | | .search-input { |
| | | flex: 1; |
| | | background: #f5f5f5; |
| | | border-radius: 24px; |
| | | padding: 10px 16px; |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 8px; |
| | | } |
| | | |
| | | .search-text { |
| | | flex: 1; |
| | | font-size: 14px; |
| | | color: #333; |
| | | background: transparent; |
| | | border: none; |
| | | outline: none; |
| | | } |
| | | |
| | | .search-text::placeholder { |
| | | color: #999; |
| | | } |
| | | |
| | | .filter-button { |
| | | width: 40px; |
| | | height: 40px; |
| | | border-radius: 8px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | } |
| | | |
| | | .ledger-list { |
| | | padding: 20px; |
| | | } |
| | | |
| | | .ledger-item { |
| | | background: #ffffff; |
| | | border-radius: 12px; |
| | | margin-bottom: 16px; |
| | | overflow: hidden; |
| | | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); |
| | | padding: 0 16px; |
| | | } |
| | | |
| | | .item-header { |
| | | padding: 16px 0; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | } |
| | | |
| | | .item-left { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 8px; |
| | | } |
| | | |
| | | .document-icon { |
| | | width: 24px; |
| | | height: 24px; |
| | | background: #2979ff; |
| | | border-radius: 4px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | } |
| | | |
| | | .item-id { |
| | | font-size: 14px; |
| | | color: #333; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | .item-details { |
| | | padding: 16px 0; |
| | | } |
| | | |
| | | .detail-row { |
| | | display: flex; |
| | | align-items: flex-end; |
| | | justify-content: space-between; |
| | | margin-bottom: 8px; |
| | | |
| | | &:last-child { |
| | | margin-bottom: 0; |
| | | } |
| | | } |
| | | |
| | | .detail-label { |
| | | font-size: 12px; |
| | | color: #777777; |
| | | min-width: 60px; |
| | | } |
| | | |
| | | .detail-value { |
| | | font-size: 12px; |
| | | color: #000000; |
| | | text-align: right; |
| | | flex: 1; |
| | | margin-left: 16px; |
| | | } |
| | | |
| | | .detail-value.highlight { |
| | | color: #2979ff; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | .no-data { |
| | | padding: 40px 0; |
| | | text-align: center; |
| | | color: #999; |
| | | } |
| | | |
| | | .action-buttons { |
| | | display: flex; |
| | | gap: 12px; |
| | | padding: 0 0 16px 0; |
| | | justify-content: space-between; |
| | | } |
| | | |
| | | .action-btn { |
| | | flex: 1; |
| | | } |
| | | |
| | | // 开票台账特有样式 |
| | | .filter-popup { |
| | | padding: 12px 12px 20px; |
| | | } |
| | | |
| | | .switch-row { |
| | | padding: 12px 16px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | } |
| | | |
| | | .switch-label { |
| | | font-size: 14px; |
| | | color: #333; |
| | | } |
| | | |
| | | .filter-actions { |
| | |
| | | box-shadow: 0 -0.125rem 0.5rem rgba(0,0,0,0.05); |
| | | z-index: 1000; |
| | | } |
| | | |
| | | .cancel-btn { |
| | | font-weight: 400; |
| | | font-size: 1rem; |
| | |
| | | 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; |