feat(审批): 新增审批处理页面及相关功能

新增审批处理页面，支持审批状态的更新、退款金额的填写、审核说明的输入以及审核凭证的上传。同时，优化了审批列表页面的交互，点击列表项可跳转至审批处理页面。引入了Pinia状态管理，用于存储当前审批单的详细信息。

src/common/apis/approval/index.ts

@@ -1,5 +1,5 @@
 import { request } from '@/http/axios'
-import { SubmitApprovalRequestData, SubmitApprovalResponseData, SearchApiReturnApprovalQuery, ApiResponsePageData, ReturnApprovalEntity } from './type'
+import { SubmitApprovalRequestData, SubmitApprovalResponseData, SearchApiReturnApprovalQuery, ApiResponsePageData, ReturnApprovalEntity, HandleApprovalRequestData } from './type'
 
 export const getApprovalListApi = (params: SearchApiReturnApprovalQuery) => {
   return request<ApiResponsePageData<ReturnApprovalEntity>>({
@@ -9,6 +9,8 @@ export const getApprovalListApi = (params: SearchApiReturnApprovalQuery) => {
   })
 }
 
+
+
 export const submitApprovalApi = (data: SubmitApprovalRequestData) => {
   return request<SubmitApprovalResponseData>({
     url: 'approval/submit',
@@ -16,3 +18,11 @@ export const submitApprovalApi = (data: SubmitApprovalRequestData) => {
     data
   })
 }
+
+export const handleApprovalApi = (data: HandleApprovalRequestData) => {
+  return request<ApiResponseMsgData<string>>({
+    url: 'approval/handle',
+    method: 'post',
+    data
+  })
+}

src/common/apis/approval/type.ts

@@ -5,6 +5,16 @@ export interface SubmitApprovalRequestData {
   returnRemark: string
 }
 
+export interface HandleApprovalRequestData {
+  /** 审批ID */
+  approvalId: number
+  /** 审批状态 */
+  status: number
+  returnAmount: number
+  auditImages: string
+  auditRemark: string
+}
+
 export interface SearchApiReturnApprovalQuery {
   pageNum: number
   pageSize: number

src/pages/approval/handle.vue

@@ -0,0 +1,261 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { showConfirmDialog, showSuccessToast, showToast, UploaderFileListItem, Popup, Picker } from 'vant'
+
+const showStatusPicker = ref(false)
+const showPreview = ref(false)
+const currentPreviewImage = ref('')
+const statusMap: { [key: number]: string } = {
+    1: '待审核',
+    2: '已通过',
+    3: '已驳回'
+}
+
+const statusOptions = [
+    { text: '已通过', value: 1 },
+    { text: '待审核', value: 2 },
+    { text: '已驳回', value: 3 }
+]
+import axios from "axios"
+import { handleApprovalApi } from '@/common/apis/approval'
+import type { HandleApprovalRequestData } from '@/common/apis/approval/type'
+import { useRoute, useRouter } from 'vue-router'
+import { useApprovalStore } from '@/pinia/stores/approval'
+
+const { VITE_APP_BASE_API } = import.meta.env;
+const router = useRouter()
+const route = useRoute()
+const approvalStore = useApprovalStore()
+
+const formData = ref<HandleApprovalRequestData>({
+    approvalId: approvalStore.currentApproval?.approvalId || 0,
+    status: 1,
+    returnAmount: 0,
+    auditImages: '',
+    auditRemark: ''
+})
+
+const submitting = ref(false)
+const fileList = ref<UploaderFileListItem[]>([])
+const uploading = ref(false)
+
+const validateForm = () => {
+    if (!formData.value.approvalId || isNaN(formData.value.approvalId)) {
+        showConfirmDialog({ title: '错误', message: '审批单ID参数错误' })
+        return false
+    }
+    if (formData.value.returnAmount < 0) {
+        showConfirmDialog({ title: '提示', message: '退款金额不能为负数' })
+        return false
+    }
+    if (formData.value.status === 3 && !formData.value.auditRemark) {
+        showConfirmDialog({ title: '提示', message: '驳回时必须填写审核说明' })
+        return false
+    }
+    return true
+}
+
+const handleFileUpload = async (items: UploaderFileListItem | UploaderFileListItem[]) => {
+    const files = Array.isArray(items) ? items : [items]
+    uploading.value = true
+    try {
+        const uploadPromises = files.map(async (item) => {
+            item.status = 'uploading'
+            item.message = '上传中...'
+            const file = item.file as File
+            const formData = new FormData()
+            formData.append('file', file)
+
+            const { data } = await axios.post<{
+                code: number
+                data: { url: string }
+                message?: string
+            }>(VITE_APP_BASE_API + '/file/upload', formData, {
+                headers: { 'Content-Type': 'multipart/form-data' }
+            })
+
+            if (data.code !== 0) {
+                throw new Error(data.message || '文件上传失败')
+            }
+            return { url: data.data.url }
+        })
+
+        const urls = await Promise.all(uploadPromises)
+        files.forEach((item, index) => {
+            item.status = 'done'
+            item.message = '上传成功'
+            item.url = urls[index].url
+        })
+        formData.value.auditImages = fileList.value.map(item => item.url).join(',')
+    } catch (error) {
+        showConfirmDialog({
+            title: '上传失败',
+            message: error instanceof Error ? error.message : '未知错误'
+        })
+    } finally {
+        uploading.value = false
+    }
+}
+
+const onStatusConfirm = ({ selectedOptions }: { selectedOptions: { value: number }[] }) => {
+    submitting.value = true
+    try {
+        if (!selectedOptions?.[0]?.value) {
+            throw new Error('请选择有效的审批状态')
+        }
+        formData.value.status = selectedOptions[0].value
+        showStatusPicker.value = false
+    } catch (error) {
+        showConfirmDialog({
+            title: '操作失败',
+            message: error instanceof Error ? error.message : '状态选择异常'
+        })
+    } finally {
+        submitting.value = false
+    }
+}
+
+const previewImage = (url: string) => {
+    currentPreviewImage.value = url
+    showPreview.value = true
+}
+onMounted(() => {
+    if (!approvalStore.currentApproval) {
+        router.push('/approval/list')
+    }
+})
+
+const handleSubmit = async () => {
+    if (!validateForm()) return
+
+    submitting.value = true
+    try {
+        const { code } = await handleApprovalApi(formData.value)
+
+        if (code === 0) {
+            showSuccessToast('操作成功')
+            await showConfirmDialog({
+                title: "操作成功",
+                message: `审批处理已完成`
+            })
+            router.push('/approval/list')
+        }
+    } catch (error) {
+        console.error('提交失败:', error)
+        showConfirmDialog({
+            title: '提交失败',
+            message: error instanceof Error ? error.message : '网络请求异常'
+        })
+    } finally {
+        submitting.value = false
+    }
+}
+</script>
+
+<template>
+    <div class="approval-container">
+        <van-nav-bar title="审批处理" left-text="返回" left-arrow fixed @click-left="() => router.go(-1)" />
+
+        <div class="content-wrapper">
+            <van-cell-group>
+                <van-cell title="商品名称" :value="approvalStore.currentApproval?.goodsName" />
+                <van-cell title="退还数量" :value="approvalStore.currentApproval?.returnQuantity" />
+                <van-cell title="商品单价" :value="`¥${approvalStore.currentApproval?.goodsPrice}`" />
+                <van-cell title="当前状态" :value="statusMap[approvalStore.currentApproval?.status || 1]" />
+            </van-cell-group>
+
+            <van-cell-group class="image-section">
+                <van-cell title="退还凭证">
+                    <van-grid :column-num="3" gutter="10">
+                        <van-grid-item v-for="(img, index) in approvalStore.currentApproval?.returnImages.split(',')"
+                            :key="index">
+                            <van-image :src="img" fit="cover" @click="previewImage(img)" />
+                        </van-grid-item>
+                    </van-grid>
+                </van-cell>
+            </van-cell-group>
+
+            <van-cell-group>
+                <van-cell title="退还说明" :value="approvalStore.currentApproval?.returnRemark" />
+
+                <!-- 原有表单字段保持不变 -->
+                <van-field v-model="formData.returnAmount" label="退款金额" type="number" :min="0" />
+                <van-field :model-value="statusOptions.find(opt => opt.value === formData.status)?.text || ''"
+                    label="审批结果" readonly clickable placeholder="请选择审批结果" @click="showStatusPicker = true" />
+                <van-field v-model="formData.auditRemark" label="审核说明" type="textarea" rows="2" autosize />
+            </van-cell-group>
+
+            <van-popup v-model:show="showStatusPicker" position="bottom">
+                <van-picker :columns="statusOptions" @confirm="onStatusConfirm" @cancel="showStatusPicker = false" />
+            </van-popup>
+
+            <van-popup v-model:show="showPreview" position="center" :style="{ width: '90%', height: '80%' }" round>
+                <div class="preview-wrapper">
+                    <van-icon name="cross" class="close-icon" @click="showPreview = false" />
+                    <van-image :src="currentPreviewImage" fit="contain" class="preview-image" />
+                </div>
+            </van-popup>
+
+            <van-cell-group class="upload-section">
+                <van-cell title="审核凭证">
+                    <template #extra>
+                        <van-uploader v-model="fileList" multiple max-count="3" :after-read="handleFileUpload" />
+                    </template>
+                </van-cell>
+            </van-cell-group>
+
+            <div class="submit-bar">
+                <van-button type="primary" block :loading="submitting" loading-text="提交中..." @click="handleSubmit">
+                    提交审批
+                </van-button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.approval-container {
+    padding: 12px 16px;
+}
+
+.content-wrapper {
+    padding-top: 46px;
+}
+
+.upload-section {
+    margin: 20px 0;
+}
+
+.preview-wrapper {
+    position: relative;
+    height: 100%;
+    padding: 20px;
+
+    .close-icon {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        z-index: 1;
+        font-size: 24px;
+        color: #fff;
+        background: rgba(0, 0, 0, 0.3);
+        border-radius: 50%;
+        padding: 4px;
+    }
+
+    .preview-image {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+.submit-bar {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 16px;
+    background: #fff;
+    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);
+}
+</style>

src/pages/approval/list.vue

@@ -1,46 +1,20 @@
 <template>
-  <div class="approval-list-container">
+    <div class="approval-list-container">
-    <!-- 搜索表单 -->
+        <!-- 搜索表单 -->
-    <van-form @submit="handleSearch">
+        <van-form @submit="handleSearch">
-      <van-field
+            <van-field v-model="searchParams.approvalId" label="审批单号" type="number" placeholder="请输入审批单号" />
-        v-model="searchParams.approvalId"
-        label="审批单号"
-        type="number"
-        placeholder="请输入审批单号"
-      />
-      
-      <van-field
-        v-model="searchParams.orderId"
-        label="订单编号"
-        type="number"
-        placeholder="请输入订单编号"
-      />
 
-      <van-field
+            <van-field v-model="searchParams.orderId" label="订单编号" type="number" placeholder="请输入订单编号" />
-        v-model="searchParams.goodsId"
-        label="商品ID"
-        type="number"
-        placeholder="请输入商品ID"
-      />
 
-      <van-field
+            <van-field v-model="searchParams.goodsId" label="商品ID" type="number" placeholder="请输入商品ID" />
-        name="status"
-        label="审批状态"
-        readonly
-        clickable
-        :value="statusText"
-        placeholder="请选择状态"
-        @click="showStatusPicker = true"
-      />
-      <van-popup v-model:show="showStatusPicker" position="bottom">
-        <van-picker
-          :columns="statusOptions"
-          @confirm="onStatusConfirm"
-          @cancel="showStatusPicker = false"
-        />
-      </van-popup>
 
-      <!-- <van-field
+            <van-field name="status" label="审批状态" readonly clickable v-model="statusText" placeholder="请选择状态"
+                @click="showStatusPicker = true" />
+            <van-popup v-model:show="showStatusPicker" position="bottom">
+                <van-picker :columns="statusOptions" @confirm="onStatusConfirm" @cancel="showStatusPicker = false" />
+            </van-popup>
+
+            <!-- <van-field
         readonly
         clickable
         name="date"
@@ -57,40 +31,26 @@
         />
       </van-popup> -->
 
-      <div style="margin: 16px;">
+            <div style="margin: 16px;">
-        <van-button block type="primary" native-type="submit">搜索</van-button>
+                <van-button block type="primary" native-type="submit">搜索</van-button>
-        <van-button
+                <van-button block plain type="primary" style="margin-top: 10px;" @click="handleReset">重置</van-button>
-          block
+            </div>
-          plain
+        </van-form>
-          type="primary"
-          style="margin-top: 10px;"
-          @click="handleReset"
-        >重置</van-button>
-      </div>
-    </van-form>
 
-    <!-- 审批列表 -->
+        <!-- 审批列表 -->
-    <van-list
+        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
-      v-model:loading="loading"
+            <van-cell v-for="item in list" :key="item.approvalId" :title="`审批单号：${item.approvalId}`" clickable
-      :finished="finished"
+                @click="handleCellClick(item.approvalId)">
-      finished-text="没有更多了"
+                <template #label>
-      @load="onLoad"
+                    <div>商品名称：{{ item.goodsName }}</div>
-    >
+                    <div>申请时间：{{ item.createTime }}</div>
-      <van-cell
+                    <van-tag :type="statusTagType(item.status)">
-        v-for="item in list"
+                        {{ statusMap[item.status] }}
-        :key="item.approvalId"
+                    </van-tag>
-        :title="`审批单号：${item.approvalId}`"
+                </template>
-      >
+            </van-cell>
-        <template #label>
+        </van-list>
-          <div>商品名称：{{ item.goodsName }}</div>
+    </div>
-          <div>申请时间：{{ item.createTime }}</div>
-          <van-tag :type="statusTagType(item.status)">
-            {{ statusMap[item.status] }}
-          </van-tag>
-        </template>
-      </van-cell>
-    </van-list>
-  </div>
 </template>
 
 <script lang="ts" setup>
@@ -98,26 +58,29 @@ import { ref, reactive } from 'vue'
 import { getApprovalListApi } from '@/common/apis/approval'
 import type { SearchApiReturnApprovalQuery, ReturnApprovalEntity } from '@/common/apis/approval/type'
 import type { PickerConfirmEventParams } from 'vant/es';
+import { useApprovalStore } from '@/pinia/stores/approval';
+
+const router = useRouter()
 
 // 搜索参数
 const searchParams = reactive<SearchApiReturnApprovalQuery>({
-  pageNum: 1,
+    pageNum: 1,
-  pageSize: 10,
+    pageSize: 10,
 })
 
 // 状态选择相关
 const showStatusPicker = ref(false)
 const statusOptions = [
-  { text: '全部', value: undefined },
+    { text: '全部', value: undefined },
-  { text: '待审核', value: 0 },
+    { text: '待审核', value: 1 },
-  { text: '已通过', value: 1 },
+    { text: '已通过', value: 2 },
-  { text: '已拒绝', value: 2 },
+    { text: '已驳回', value: 3 },
 ]
 
 const statusMap: { [key: number]: string } = {
-  0: '待审核',
+    1: '待审核',
-  1: '已通过',
+    2: '已通过',
-  2: '已拒绝'
+    3: '已驳回'
 }
 
 const statusText = ref('')
@@ -131,88 +94,99 @@ const list = ref<ReturnApprovalEntity[]>([])
 const loading = ref(false)
 const finished = ref(false)
 
+const handleCellClick = (approvalId: number) => {
+    const approvalStore = useApprovalStore()
+    const currentItem = list.value.find(item => item.approvalId === approvalId)
+    if (currentItem) {
+        approvalStore.setCurrentApproval(currentItem)
+    }
+    router.push(`/approval/handle/${approvalId}`)
+}
+
 // 状态标签类型
 const statusTagType = (status: number) => {
-  switch (status) {
+    switch (status) {
-    case 0: return 'warning'
+        case 1: return 'warning'
-    case 1: return 'success'
+        case 2: return 'success'
-    case 2: return 'danger'
+        case 3: return 'danger'
-    default: return 'default'
+        default: return 'default'
-  }
+    }
 }
 
 // 处理状态选择
 const onStatusConfirm = (e: PickerConfirmEventParams) => {
-  const { selectedOptions } = e;
+    const { selectedOptions } = e;
-  searchParams.status = Number(selectedOptions[0]?.value);
+    searchParams.status = selectedOptions[0]?.value ? Number(selectedOptions[0]?.value) : undefined;
-  showStatusPicker.value = false;
+    showStatusPicker.value = false;
-  // 确保赋值给 statusText 的是字符串类型
+    // 确保赋值给 statusText 的是字符串类型
-  statusText.value = String(selectedOptions[0]?.text || '');
+    statusText.value = String(selectedOptions[0]?.text || '');
 }
 
 // 处理时间选择
 const onDateConfirm = (values: Date[]) => {
-  const [start, end] = values
+    const [start, end] = values
-  searchParams.startTime = start.toISOString().split('T')[0]
+    searchParams.startTime = start.toISOString().split('T')[0]
-  searchParams.endTime = end.toISOString().split('T')[0]
+    searchParams.endTime = end.toISOString().split('T')[0]
-  dateRangeText.value = `${searchParams.startTime} 至 ${searchParams.endTime}`
+    dateRangeText.value = `${searchParams.startTime} 至 ${searchParams.endTime}`
-  showDatePicker.value = false
+    showDatePicker.value = false
 }
 
 // 搜索处理
 const handleSearch = () => {
-  list.value = []
+    list.value = []
-  searchParams.pageNum = 1
+    searchParams.pageNum = 1
-  onLoad()
+    onLoad()
 }
 
 // 重置表单
 const handleReset = () => {
-  Object.assign(searchParams, {
+    Object.assign(searchParams, {
-    pageNum: 1,
+        pageNum: 1,
-    pageSize: 10,
+        pageSize: 10,
-    approvalId: undefined,
+        approvalId: undefined,
-    orderId: undefined,
+        orderId: undefined,
-    goodsId: undefined,
+        goodsId: undefined,
-    status: undefined,
+        status: undefined,
-    startTime: undefined,
+        startTime: undefined,
-    endTime: undefined
+        endTime: undefined
-  })
+    })
-  statusText.value = ''
+    statusText.value = ''
-  dateRangeText.value = ''
+    dateRangeText.value = ''
-  handleSearch()
+    handleSearch()
 }
 
 // 加载数据
 const onLoad = async () => {
-  try {
+    try {
-    const { data } = await getApprovalListApi(searchParams)
+        const { data } = await getApprovalListApi(searchParams)
-    list.value.push(...data.rows)
+        list.value.push(...data.rows)
-    loading.value = false
+        loading.value = false
 
-    if (list.value.length >= data.total) {
+        if (list.value.length >= data.total) {
-      finished.value = true
+            finished.value = true
-    } else {
+        } else {
-      searchParams.pageNum++
+            searchParams.pageNum++
+        }
+    } catch (error) {
+        console.error('获取审批列表失败', error)
+        finished.value = true
     }
-  } catch (error) {
-    console.error('获取审批列表失败', error)
-    finished.value = true
-  }
 }
 </script>
 
 <style scoped>
 .approval-list-container {
-  padding: 12px;
+    padding: 12px;
 }
+
 .van-cell__title {
-  font-size: 14px;
+    font-size: 14px;
-  color: #333;
+    color: #333;
 }
+
 .van-cell__label {
-  margin-top: 8px;
+    margin-top: 8px;
-  color: #666;
+    color: #666;
-  font-size: 12px;
+    font-size: 12px;
 }
 </style>

src/pinia/stores/approval.ts

@@ -0,0 +1,25 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import type { ReturnApprovalEntity } from '@/common/apis/approval/type'
+
+export interface ApprovalDetail extends ReturnApprovalEntity {
+  goodsName: string
+  coverImg: string
+}
+
+export const useApprovalStore = defineStore('approval', () => {
+  const currentApproval = ref<ApprovalDetail | null>(null)
+
+  const setCurrentApproval = (approval: ApprovalDetail) => {
+    currentApproval.value = approval
+  }
+
+  return {
+    currentApproval,
+    setCurrentApproval
+  }
+})
+
+export function useApprovalStoreOutside() {
+  return useApprovalStore()
+}

src/router/index.ts

@@ -34,6 +34,11 @@ export const routes: RouteRecordRaw[] = [
     component: () => import('@/pages/approval/submit.vue'),
     meta: { requiresAuth: true }
   },
+  {
+    path: '/approval/handle/:approvalId',
+    component: () => import('@/pages/approval/handle.vue'),
+    meta: { requiresAuth: true }
+  },
   {
     path: '/order-success',
     name: 'OrderSuccess',
@@ -151,6 +156,11 @@ export const routes: RouteRecordRaw[] = [
     component: () => import('@/pages/approval/submit.vue'),
     meta: { requiresAuth: true }
   },
+  {
+    path: '/approval/handle/:approvalId',
+    component: () => import('@/pages/approval/handle.vue'),
+    meta: { requiresAuth: true }
+  },
   {
     path: '/order-success',
     name: 'OrderSuccess',