修改组件

gaoluyang

2 天以前 025e46e11cb2962fd7692adfa401333758cc779b

 src/pages/procurementManagement/procurementInvoiceLedger/index.vue

@@ -3,7 +3,7 @@
      <!-- 使用通用页面头部组件 -->
      <PageHeader title="来票台账" @back="goBack" />
      
      <!-- 搜索和筛选区域（保持与销售台账风格一致） -->
      <!-- 搜索区域 -->
      <view class="search-filter-section">
         <view class="search-bar">
            <view class="search-input">
@@ -15,9 +15,6 @@
                  @confirm="handleQuery"
               />
            </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>
@@ -90,10 +87,9 @@
                     <text class="detail-label">录入日期</text>
                     <text class="detail-value">{{ item.createdAt }}</text>
                  </view>
						
               </view>
               <view class="action-buttons">
                  <van-button
                  <u-button
                     type="primary"
                     size="small"
                     class="action-btn"
@@ -101,9 +97,9 @@
                     @click="openEdit(item)"
                  >
                     编辑
                  </van-button>
                  <van-button
                     type="danger"
                  </u-button>
                  <u-button
                     type="error"
                     size="small"
                     plain
                     class="action-btn"
@@ -111,8 +107,8 @@
                     @click="handleDelete(item)"
                  >
                     删除
                  </van-button>
                  <van-button
                  </u-button>
                  <u-button
                     type="default"
                     size="small"
                     plain
@@ -121,8 +117,8 @@
                     @click="openFileActions(item.commonFiles || [])"
                  >
                     查看附件
                  </van-button>
                  <van-button
                  </u-button>
                  <u-button
                     type="primary"
                     size="small"
                     class="action-btn"
@@ -131,7 +127,7 @@
                     @click="openUpload(item)"
                  >
                     上传
                  </van-button>
                  </u-button>
               </view>
            </view>
         </view>
@@ -140,91 +136,52 @@
         <text>暂无来票台账数据</text>
      </view>
      
      <!-- 筛选弹窗 -->
      <van-popup v-model:show="showFilter" position="bottom" round>
         <view class="filter-popup">
            <van-cell-group title="筛选条件" inset>
               <van-field
                  label="来票日期"
                  readonly
                  @click="showInvoiceRange = true"
                  :placeholder="invoiceRangeLabel || '请选择日期范围'"
               />
               <van-field
                  label="录入日期"
                  readonly
                  @click="showCreateDatePicker = true"
                  :placeholder="searchForm.createTimeStart || '请选择录入日期'"
               />
               <view class="switch-row">
                  <text class="switch-label">不显示有发票行</text>
                  <van-switch v-model="searchForm.status" size="20" />
               </view>
            </van-cell-group>
            <view class="filter-actions">
               <van-button @click="resetFilter">重置</van-button>
               <van-button type="primary" @click="confirmFilter">确定</van-button>
            </view>
         </view>
      </van-popup>
		
      <!-- 日历：来票日期范围 -->
      <van-popup v-model:show="showInvoiceRange" position="bottom">
         <van-calendar
            title="选择来票日期范围"
            type="range"
            color="#2979ff"
            @confirm="onInvoiceRangeConfirm"
            @cancel="showInvoiceRange = false"
         />
      </van-popup>
		
      <!-- 日期：录入日期 -->
      <van-popup v-model:show="showCreateDatePicker" position="bottom">
         <van-date-picker
            v-model="currentCreateDate"
            title="选择录入日期"
            @confirm="onCreateDateConfirm"
            @cancel="showCreateDatePicker = false"
         />
      </van-popup>
		
		
		
      <!-- 单行上传弹窗（无表单） -->
      <van-popup v-model:show="showUpload" position="bottom" round>
      <u-popup v-model="showUpload" mode="bottom" border-radius="10">
         <view class="upload-container">
            <van-cell-group title="上传附件（仅支持 pdf，最大10MB，最多10个）" inset>
               <van-uploader
                  accept="*"
                  multiple
                  :max-count="10"
                  :after-read="afterReadRowUpload"
                  :before-read="beforeReadPdf"
               />
               <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>
                  </view>
            <view class="popup-header">
               <text class="popup-title">上传附件（仅支持 pdf，最大10MB，最多10个）</text>
            </view>
            <u-upload
               ref="uploadRef"
               accept="file"
               multiple
               :max-count="10"
               :show-progress="true"
               :before-upload="beforeReadPdf"
               :action="uploadUrl"
               :header="{ Authorization: 'Bearer ' + getToken() }"
               name="file"
               @on-success="onUploadSuccess"
               @on-error="onUploadError"
            />
            <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>
                  <u-button size="mini" type="error" plain @click="removeUploaded(idx)">移除</u-button>
               </view>
            </van-cell-group>
            </view>
            <view class="filter-actions">
               <van-button @click="showUpload = false">取消</van-button>
               <van-button type="primary" @click="confirmUpload">确认</van-button>
               <u-button @click="showUpload = false" type="default" size="default" style="width: 150px;">取消</u-button>
               <u-button @click="confirmUpload" type="primary" size="default" style="width: 150px;">确认</u-button>
            </view>
         </view>
      </van-popup>
      </u-popup>
      
      <!-- 附件列表选择 -->
      <van-action-sheet v-model:show="showFileSheet" :actions="fileActions" cancel-text="取消" close-on-click-action @select="onSelectFile" />
      <u-action-sheet v-model="showFileSheet" :list="fileActions" :cancel-btn="true" @click="onSelectFile" @close="showFileSheet = false" />
   </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import dayjs from 'dayjs'
import { showToast, showLoadingToast, closeToast } from 'vant'
const showToast = (message) => {
   uni.showToast({
      title: message,
      icon: 'none'
   })
}
import useUserStore from '@/store/modules/user'
import { getToken } from '@/utils/auth'
import config from '@/config.js'
@@ -236,6 +193,8 @@
import {onShow} from "@dcloudio/uni-app";
import {productRecordPage} from "@/api/procurementManagement/procurementInvoiceLedger";
import {delRegistration} from "@/api/procurementManagement/invoiceEntry";
import PageHeader from '@/components/PageHeader.vue';
import FooterButtons from '@/components/FooterButtons.vue';

const userStore = useUserStore()

@@ -245,19 +204,12 @@
const page = reactive({ current: -1, size: -1 })
const searchForm = reactive({
   searchText: '',
   status: false,
   createTimeStart: ''
})

// 顶部交互
const showFilter = ref(false)
const showInvoiceRange = ref(false)
const showCreateDatePicker = ref(false)
const invoiceRangeLabel = ref('')
const currentCreateDate = ref([new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()])

const currentId = ref('')
const fileList = ref([]) // 行上传或通用上传列表
const uploadRef = ref()
const uploadUrl = config.baseUrl + '/invoiceLedger/uploadFile'

// 行上传弹窗
const showUpload = ref(false)
@@ -288,65 +240,19 @@

const getList = async () => {
   try {
      showLoadingToast({ message: '加载中...' })
      const { invoiceDate, ...rest } = searchForm
      const res = await productRecordPage({ ...rest, ...page })
      uni.showLoading({
         title: '加载中...'
      });
      const res = await productRecordPage({ ...searchForm, ...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
      closeToast()
      uni.hideLoading();
   } catch (e) {
      closeToast()
      uni.hideLoading();
      showToast('获取列表失败')
   }
}

// 筛选逻辑
const resetFilter = () => {
   searchForm.searchText = ''
   searchForm.status = false
   const start = dayjs().startOf('month').format('YYYY-MM-DD')
   const end = dayjs().endOf('month').format('YYYY-MM-DD')
   searchForm.invoiceDate = [start, end]
   searchForm.invoiceDateStart = start
   searchForm.invoiceDateEnd = end
   searchForm.createTimeStart = ''
   invoiceRangeLabel.value = ''
}
const confirmFilter = () => {
   showFilter.value = false
   getList()
}
const onInvoiceRangeConfirm = (e) => {
   // e 为 [start, end] 的 Date 对象或字符串，uni-app 下 Vant Calendar 返回时间戳数组
   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')
      }
      searchForm.invoiceDateStart = start
      searchForm.invoiceDateEnd = end
      invoiceRangeLabel.value = `${start} 至 ${end}`
      showInvoiceRange.value = false
   } catch (err) {
      showInvoiceRange.value = false
   }
}
const onCreateDateConfirm = ({ selectedValues }) => {
   try {
      searchForm.createTimeStart = selectedValues.join('-')
      currentCreateDate.value = selectedValues
      showCreateDatePicker.value = false
   } catch (err) {
      showCreateDatePicker.value = false
   }
}

@@ -371,13 +277,15 @@
      success: async (res) => {
         if (res.confirm) {
            try {
               showLoadingToast({ message: '处理中...' })
               uni.showLoading({
                  title: '处理中...'
               });
               await delRegistration(ids)
               closeToast()
               uni.hideLoading();
               showToast('删除成功')
               await getList()
            } catch (e) {
               closeToast()
               uni.hideLoading();
               showToast('删除失败，请重试')
            }
         }
@@ -394,16 +302,18 @@
const confirmUpload = async () => {
   try {
      const payload = { fileList: fileList.value, id: currentId.value }
      showLoadingToast({ message: '提交中...' })
      uni.showLoading({
         title: '提交中...'
      });
      await commitFile(payload)
      closeToast()
      uni.hideLoading();
      showToast('提交成功')
      showUpload.value = false
      fileList.value = []
      currentId.value = ''
      getList()
   } catch (e) {
      closeToast()
      uni.hideLoading();
      showToast('提交失败，请重试')
   }
}
@@ -427,59 +337,24 @@
   return true
}

const uploadSingleFile = async (fileObj) => {
   return new Promise((resolve, reject) => {
      showLoadingToast({ message: '正在上传...' })
      uni.uploadFile({
         url: config.baseUrl + '/invoiceLedger/uploadFile',
         filePath: fileObj.url || fileObj.file?.path || fileObj.tempFilePath,
         name: 'file',
         header: { Authorization: 'Bearer ' + getToken() },
         success: (res) => {
            closeToast()
            try {
               const data = JSON.parse(res.data || '{}')
               if (data.code === 200) {
                  resolve(data.data)
               } else {
                  reject(new Error(data.msg || '上传失败'))
               }
            } catch (err) {
               reject(err)
            }
         },
         fail: (err) => {
            closeToast()
            reject(err)
         }
      })
   })
}

const afterReadEditUpload = async (file) => {
// uview-plus 的上传成功回调
const onUploadSuccess = (res, file) => {
   try {
      const files = Array.isArray(file) ? file : file?.file ? [file] : [file]
      for (const f of files) {
         const uploaded = await uploadSingleFile(f)
         fileList.value.push(uploaded)
      const data = JSON.parse(res.data || '{}')
      if (data.code === 200) {
         fileList.value.push(data.data)
         showToast('上传成功')
      } else {
         showToast('上传失败: ' + (data.msg || '未知错误'))
      }
      showToast('上传成功')
   } catch (e) {
   } catch (err) {
      showToast('上传失败')
   }
}

const afterReadRowUpload = async (file) => {
   try {
      const files = Array.isArray(file) ? file : file?.file ? [file] : [file]
      for (const f of files) {
         const uploaded = await uploadSingleFile(f)
         fileList.value.push(uploaded)
      }
      showToast('上传成功')
   } catch (e) {
      showToast('上传失败')
   }
// uview-plus 的上传失败回调
const onUploadError = (err) => {
   showToast('上传失败')
}

const removeUploaded = (index) => {
@@ -498,18 +373,23 @@
// 附件查看
const openFileActions = (commonFiles) => {
   currentFilesToOpen = commonFiles || []
   fileActions.value = (commonFiles || []).map((f, idx) => ({ name: getFileNameFromUrl(f.url || ''), index: idx }))
   fileActions.value = (commonFiles || []).map((f, idx) => ({
      title: getFileNameFromUrl(f.url || ''),
      index: idx
   }))
   showFileSheet.value = true
}
const onSelectFile = async (action) => {
   try {
      const item = currentFilesToOpen[action.index]
      if (!item || !item.url) return
      showLoadingToast({ message: '下载中...' })
      uni.showLoading({
         title: '下载中...'
      });
      uni.downloadFile({
         url: item.url,
         success: (res) => {
            closeToast()
            uni.hideLoading();
            if (res.statusCode === 200) {
               uni.openDocument({ filePath: res.tempFilePath })
            } else {
@@ -517,12 +397,12 @@
            }
         },
         fail: () => {
            closeToast()
            uni.hideLoading();
            showToast('下载失败')
         }
      })
   } catch (e) {
      closeToast()
      uni.hideLoading();
      showToast('打开失败')
   }
}
@@ -682,27 +562,15 @@
   padding: 12px 12px 20px;
}

.switch-row {
   padding: 12px 16px;
   display: flex;
   align-items: center;
   justify-content: space-between;
.popup-header {
   padding: 10px 16px;
   border-bottom: 1px solid #f5f5f5;
}

.switch-label {
   font-size: 14px;
.popup-title {
   font-size: 16px;
   font-weight: 500;
   color: #333;
}

.filter-actions {
   display: flex;
   gap: 12px;
   padding: 12px 16px 16px;
   justify-content: space-between;
}

.edit-container {
   padding-bottom: 5rem;
}

.uploaded-list {
@@ -733,6 +601,13 @@
   color: #888;
}

.filter-actions {
   display: flex;
   gap: 12px;
   padding: 12px 16px 16px;
   justify-content: center;
}

.footer-btns {
   position: fixed;
   left: 0;