采购管理整体样式优化，搜索条件修改

gaoluyang

3 天以前 ee42bf1badae06026efa79dc17d2a541297ab49b

 src/pages/sales/invoiceLedger/index.vue

@@ -1,38 +1,31 @@
<template>
   <view class="sales-account">
      <!-- 页面头部 -->
      <van-nav-bar
         title="开票台账"
         left-text="返回"
         left-arrow
         @click-left="goBack"
         fixed
         placeholder
      />

      <!-- 使用通用页面头部组件 -->
      <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="total > 0">
      <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">
@@ -91,7 +84,7 @@
                  </view>
               </view>
               <view class="action-buttons">
                  <van-button
                  <up-button
                     type="primary"
                     size="small"
                     class="action-btn"
@@ -99,36 +92,36 @@
                     @click="openEdit(item)"
                  >
                     编辑
                  </van-button>
                  <van-button
                     type="danger"
                  </up-button>
                  <up-button
                     type="error"
                     size="small"
                     plain
                     class="action-btn"
                     :disabled="item.invoicePerson !== userStore.nickName"
                     @click="handleDelete(item)"
                  >
                     删除
                  </van-button>
                  <van-button
                     type="default"
                     size="small"
                     class="action-btn"
                     v-if="item.invoiceFileName"
                     @click="openFileActions(item.commonFiles || [])"
                  >
                     查看附件
                  </van-button>
                  <van-button
                     type="primary"
                     size="small"
                     plain
                     class="action-btn"
                     v-else
                     :disabled="item.invoicePerson !== userStore.nickName"
                     @click="openUpload(item)"
                  >
                     上传
                  </van-button>
                  </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>
@@ -136,107 +129,131 @@
      <view v-else class="no-data">
         <text>暂无开票台账数据</text>
      </view>

		
      <!-- 筛选弹窗 -->
      <van-popup v-model:show="showFilter" position="bottom" round>
      <up-popup v-model="showFilter" mode="bottom" round><up-transition>
         <view class="filter-popup">
            <van-cell-group title="筛选条件" inset>
               <van-field
            <up-cell-group title="筛选条件" inset>
               <up-input
                  label="开票日期"
                  readonly
                  placeholder="请选择日期范围"
                  @click="showInvoiceRange = true"
                  :placeholder="invoiceRangeLabel || '请选择日期范围'"
                  v-model="invoiceRangeLabel"
               />
               <van-field
               <up-input
                  label="录入日期"
                  readonly
                  @click="showCreateDatePicker = true"
                  :placeholder="searchForm.createTimeStart || '请选择录入日期'"
                  v-model="searchForm.createTimeStart"
               />
               <view class="switch-row">
                  <text class="switch-label">不显示有发票行</text>
                  <van-switch v-model="searchForm.status" size="20" />
                  <up-switch v-model="searchForm.status" size="20" />
               </view>
            </van-cell-group>
            </up-cell-group>
            <view class="filter-actions">
               <van-button @click="resetFilter">重置</van-button>
               <van-button type="primary" @click="confirmFilter">确定</van-button>
               <up-button @click="resetFilter">重置</up-button>
               <up-button type="primary" @click="confirmFilter">确定</up-button>
            </view>
         </view>
      </van-popup>

      </up-transition></up-popup>
		
      <!-- 日历：开票日期范围 -->
      <van-popup v-model:show="showInvoiceRange" position="bottom">
         <van-calendar
            title="选择开票日期范围"
      <up-popup v-model="showInvoiceRange" mode="bottom"><up-transition>
         <up-datetime-picker
            mode="date"
            type="range"
            color="#2979ff"
            title="选择开票日期范围"
            @confirm="onInvoiceRangeConfirm"
            @cancel="showInvoiceRange = false"
         />
      </van-popup>

      </up-transition></up-popup>
		
      <!-- 日期：录入日期 -->
      <van-popup v-model:show="showCreateDatePicker" position="bottom">
         <van-date-picker
      <up-popup v-model="showCreateDatePicker" mode="bottom"><up-transition>
         <up-datetime-picker
            mode="date"
            type="selector"
            v-model="currentCreateDate"
            title="选择录入日期"
            @confirm="onCreateDateConfirm"
            @cancel="showCreateDatePicker = false"
         />
      </van-popup>

      </up-transition></up-popup>
      

		
		
      <!-- 单行上传弹窗（无表单） -->
      <van-popup v-model:show="showUpload" position="bottom" round>
      <up-popup v-model="showUpload" mode="bottom" round><up-transition>
         <view class="upload-container">
            <van-cell-group title="上传附件（仅支持 pdf，最大10MB，最多10个）" inset>
               <van-uploader
                  accept="*"
            <up-cell-group title="上传附件（仅支持 pdf，最大10MB，最多10个）" inset>
               <up-upload
                  accept="pdf"
                  multiple
                  :max-count="10"
                  :after-read="afterReadRowUpload"
                  :before-read="beforeReadPdf"
               />
                  :maxCount="10"
                  :afterRead="afterReadRowUpload"
                  :beforeRead="beforeReadPdf"
               >
                  <up-button type="primary">点击上传</up-button>
               </up-upload>
               <view class="uploaded-list" v-if="fileList.length">
                  <view class="uploaded-item" v-for="(f, idx) in fileList" :key="idx">
                     <text class="file-name">{{ f.name || getFileNameFromUrl(f.url) }}</text>
                     <van-button size="mini" type="danger" plain @click="removeUploaded(idx)">移除</van-button>
                     <up-button size="mini" type="error" plain @click="removeUploaded(idx)">移除</up-button>
                  </view>
               </view>
            </van-cell-group>
            </up-cell-group>
            <view class="filter-actions">
               <van-button @click="showUpload = false">取消</van-button>
               <van-button type="primary" @click="confirmUpload">确认</van-button>
               <up-button @click="showUpload = false">取消</up-button>
               <up-button type="primary" @click="confirmUpload">确认</up-button>
            </view>
         </view>
      </van-popup>

      </up-transition></up-popup>
		
      <!-- 附件列表选择 -->
      <van-action-sheet v-model:show="showFileSheet" :actions="fileActions" cancel-text="取消" close-on-click-action @select="onSelectFile" />
      <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">
            取消
         </view>
      </up-action-sheet>
   </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import {reactive, ref} from 'vue'
import dayjs from 'dayjs'
import { showToast, showLoadingToast, closeToast } from 'vant'
import PageHeader from '@/components/PageHeader.vue'
import useUserStore from '@/store/modules/user'
import { getToken } from '@/utils/auth'
import {getToken} from '@/utils/auth'
import config from '@/config.js'
import {
   registrationProductPage,
   commitFile,
   delInvoiceLedgerByRegProductId
   delInvoiceLedgerByRegProductId,
   registrationProductPage
} from '@/api/salesManagement/invoiceLedger.js'
import {onShow} from "@dcloudio/uni-app";

const showToast = (message) => {
   uni.showToast({
      title: message,
      icon: 'none'
   })
}
const showLoadingToast = (message) => {
   uni.showLoading({
      title: message,
      mask: true
   })
}
const closeToast = () => {
   uni.hideLoading()
}

const userStore = useUserStore()

// 列表与查询
const ledgerList = ref([])
const total = ref(0)
const page = reactive({ current: -1, size: -1 })
const searchForm = reactive({
   searchText: '',
@@ -283,14 +300,11 @@

const getList = async () => {
   try {
      showLoadingToast({ message: '加载中...' })
      showLoadingToast('加载中...')
      const { invoiceDate, ...rest } = searchForm
      const res = await registrationProductPage({ ...rest, ...page })
      // 兼容不同返回结构
      const records = res?.data?.records || res?.records || res?.data || []
      const totalVal = res?.data?.total || res?.total || records.length || 0
      ledgerList.value = records
      total.value = totalVal
      ledgerList.value = res?.data?.records || res?.records || res?.data || []
      closeToast()
   } catch (e) {
      closeToast()
@@ -314,19 +328,10 @@
   showFilter.value = false
   getList()
}
const onInvoiceRangeConfirm = (e) => {
   // e 为 [start, end] 的 Date 对象或字符串，uni-app 下 Vant Calendar 返回时间戳数组
const onInvoiceRangeConfirm = ({ selectedValues }) => {
   try {
      let start, end
      if (Array.isArray(e)) {
         const [s, ed] = e
         start = dayjs(s).format('YYYY-MM-DD')
         end = dayjs(ed).format('YYYY-MM-DD')
      } else if (e && e.detail && Array.isArray(e.detail)) {
         const [s, ed] = e.detail
         start = dayjs(s).format('YYYY-MM-DD')
         end = dayjs(ed).format('YYYY-MM-DD')
      }
      const start = dayjs(selectedValues[0]).format('YYYY-MM-DD')
      const end = dayjs(selectedValues[1]).format('YYYY-MM-DD')
      searchForm.invoiceDateStart = start
      searchForm.invoiceDateEnd = end
      invoiceRangeLabel.value = `${start} 至 ${end}`
@@ -363,7 +368,7 @@
      success: async (res) => {
         if (res.confirm) {
            try {
               showLoadingToast({ message: '处理中...' })
               showLoadingToast('处理中...')
               await delInvoiceLedgerByRegProductId(row.id)
               closeToast()
               showToast('删除成功')
@@ -386,7 +391,7 @@
const confirmUpload = async () => {
   try {
      const payload = { fileList: fileList.value, id: currentId.value }
      showLoadingToast({ message: '提交中...' })
      showLoadingToast('提交中...')
      await commitFile(payload)
      closeToast()
      showToast('提交成功')
@@ -421,7 +426,7 @@

const uploadSingleFile = async (fileObj) => {
   return new Promise((resolve, reject) => {
      showLoadingToast({ message: '正在上传...' })
      showLoadingToast('正在上传...')
      uni.uploadFile({
         url: config.baseUrl + '/invoiceLedger/uploadFile',
         filePath: fileObj.url || fileObj.file?.path || fileObj.tempFilePath,
@@ -497,7 +502,7 @@
   try {
      const item = currentFilesToOpen[action.index]
      if (!item || !item.url) return
      showLoadingToast({ message: '下载中...' })
      showLoadingToast('下载中...')
      uni.downloadFile({
         url: item.url,
         success: (res) => {
@@ -525,165 +530,15 @@
</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 {
@@ -738,6 +593,7 @@
   box-shadow: 0 -0.125rem 0.5rem rgba(0,0,0,0.05);
   z-index: 1000;
}

.cancel-btn {
   font-weight: 400;
   font-size: 1rem;
@@ -747,6 +603,7 @@
   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;