feat(approval): 新增审批处理页面并完善相关功能

添加审批处理页面handleApply.vue，实现审批状态处理、商品信息展示和柜口开启功能
扩展审批相关接口类型定义，添加corpid字段和商品详情字段
优化原有审批处理逻辑，增加企业微信用户信息处理

src/common/apis/approval/index.ts

@@ -1,5 +1,6 @@
 import { request } from '@/http/axios'
 import { SubmitApprovalRequestData, SubmitApprovalResponseData, SearchApiReturnApprovalQuery, ApiResponsePageData, ReturnApprovalEntity, HandleApprovalRequestData } from './type'
+import { ShopOrderGoodsEntity } from '../shop/type'
 
 export const getApprovalListApi = (params: SearchApiReturnApprovalQuery) => {
   return request<ApiResponsePageData<ReturnApprovalEntity>>({
@@ -26,3 +27,11 @@ export const handleApprovalApi = (data: HandleApprovalRequestData) => {
     data
   })
 }
+
+export const getApprovalOrderGoodsApi = (approvalId: number) => {
+  return request<ApiResponseMsgData<ShopOrderGoodsEntity[]>>({
+    url: 'approval/getApprovalOrderGoods',
+    method: 'get',
+    params: { approvalId }
+  })
+}

src/common/apis/approval/type.ts

@@ -14,6 +14,7 @@ export interface HandleApprovalRequestData {
   auditImages: string
   auditRemark: string
   userid: string
+  corpid: string
 }
 
 export interface SearchApiReturnApprovalQuery {

src/common/apis/shop/type.ts

@@ -83,13 +83,30 @@ export interface ShopOrderEntity {
 }
 
 export interface ShopOrderGoodsEntity {
+  /** 订单商品唯一ID */
   orderGoodsId: number
+  /** 关联订单ID */
   orderId: number
+  /** 审批ID */
+  approvalId: number
+  /** 关联商品ID */
   goodsId: number
+  /** 关联格口ID */
+  cellId: number
+  /** 购买数量 */
   quantity: number
+  /** 购买时单价 */
   price: number
+  /** 商品总金额 */
   totalAmount: number
+  /** 商品名称 */
+  goodsName: string
+  /** 封面图URL */
+  coverImg: string
+  /** 商品状态（1正常 2已退货 3已换货 4已完成 5审核中 6退货未通过） */
   status: number
+  /** 企业微信id */
+  corpid: string
 }
 
 export interface GetOrdersByOpenIdDTO {

src/pages/approval/handle.vue

@@ -26,7 +26,8 @@ const formData = ref<HandleApprovalRequestData>({
     returnAmount: approvalStore.currentApproval?.goodsPrice || 0,
     auditImages: '',
     auditRemark: '',
-    userid: wxStore.userid
+    userid: wxStore.userid,
+    corpid: wxStore.corpid,
 })
 
 const submitting = ref(false)
@@ -167,6 +168,7 @@ onMounted(() => {
         // 填充历史审批数据
         formData.value = {
             ...formData.value,
+            corpid: wxStore.corpid,
             status: approvalStore.currentApproval.status,
             returnAmount: approvalStore.currentApproval.returnAmount,
             auditRemark: approvalStore.currentApproval.auditRemark,
@@ -223,6 +225,7 @@ const handleSubmit = async () => {
     submitting.value = true
     try {
         formData.value.userid = wxStore.userid;
+        formData.value.corpid = wxStore.corpid;
         const { code, msg } = await handleApprovalApi(formData.value)
 
         if (code === 0) {

src/pages/approval/handleApply.vue

@@ -0,0 +1,438 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { showConfirmDialog, showSuccessToast, showFailToast, showToast, UploaderFileListItem, Popup, Picker } from 'vant'
+import axios from "axios"
+import { getApprovalOrderGoodsApi, handleApprovalApi } from '@/common/apis/approval'
+import { openCabinetApi } from '@/common/apis/shop'
+import type { HandleApprovalRequestData } from '@/common/apis/approval/type'
+import { useRoute, useRouter } from 'vue-router'
+import { useApprovalStore } from '@/pinia/stores/approval'
+import { useWxStore } from '@/pinia/stores/wx';
+import Compressor from 'compressorjs';
+import { useAb98UserStore } from '@/pinia/stores/ab98-user'
+import { ShopOrderGoodsEntity } from '@/common/apis/shop/type'
+
+const { VITE_APP_BASE_API } = import.meta.env;
+const router = useRouter()
+const route = useRoute()
+const approvalStore = useApprovalStore();
+const wxStore = useWxStore();
+const { openid, balance, corpidLogin, userid: qyUserid, name: qyName } = storeToRefs(wxStore);
+const ab98UserStore = useAb98UserStore();
+const { tel, userid: ab98Userid, name } = storeToRefs(ab98UserStore);
+
+const formData = ref<HandleApprovalRequestData>({
+    approvalId: approvalStore.currentApproval?.approvalId || 0,
+    status: 2,
+    returnAmount: approvalStore.currentApproval?.goodsPrice || 0,
+    auditImages: '',
+    auditRemark: '',
+    userid: wxStore.userid,
+    corpid: wxStore.corpid,
+})
+
+const orderGoods = ref<ShopOrderGoodsEntity[]>([]);
+const submitting = ref(false)
+const fileList = ref<UploaderFileListItem[]>([])
+const uploading = ref(false)
+const isButtonDisabled = ref(false)
+
+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 }
+]
+const validateForm = () => {
+    if (!formData.value.approvalId || isNaN(formData.value.approvalId)) {
+        showConfirmDialog({ title: '错误', message: '审批单ID参数错误' })
+        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
+            let compressedFile = file;
+            try {
+                compressedFile = await new Promise<File>((resolve, reject) => {
+                    new Compressor(file, {
+                        quality: 0.8,
+                        maxWidth: 1280,
+                        maxHeight: 1280,
+                        success(result) {
+                            resolve(new File([result], file.name, {
+                                type: 'image/jpeg',
+                                lastModified: Date.now()
+                            }))
+                        },
+                        error(err) {
+                            reject(err)
+                        }
+                    })
+                })
+            } catch (error) {
+                console.error('压缩失败:', error)
+            }
+
+            const formData = new FormData()
+            formData.append('file', compressedFile)
+
+            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');
+        return;
+    }
+    
+    getApprovalOrderGoodsApi(approvalStore.currentApproval.approvalId).then(({ data }) => {
+        orderGoods.value = data;
+    })
+
+    if (approvalStore.currentApproval.status !== 1) {
+        // 填充历史审批数据
+        formData.value = {
+            ...formData.value,
+            corpid: wxStore.corpid,
+            status: approvalStore.currentApproval.status,
+            returnAmount: approvalStore.currentApproval.returnAmount,
+            auditRemark: approvalStore.currentApproval.auditRemark,
+            auditImages: approvalStore.currentApproval.auditImages
+        }
+
+        // 处理文件回显
+        if (approvalStore.currentApproval.auditImages) {
+            fileList.value = approvalStore.currentApproval.auditImages.split(',').map(url => ({
+                url,
+                status: 'done',
+                message: '已上传'
+            }))
+        }
+    }
+})
+
+const handleOpenCabinet = async () => {
+    if (!approvalStore.currentApproval?.orderId || !approvalStore.currentApproval?.orderGoodsId) {
+        showFailToast('缺少订单信息')
+        return
+    }
+
+    isButtonDisabled.value = true
+    try {
+        const isInternal = corpidLogin.value ? 2 : ab98Userid.value ? 1 : 0;
+        const result = await openCabinetApi(
+            approvalStore.currentApproval.orderId,
+            approvalStore.currentApproval.orderGoodsId, {
+                userid: isInternal === 2 ? qyUserid.value : ab98Userid.value,
+                isInternal: isInternal,
+                name: isInternal === 2 ? qyName.value : name.value,
+                mobile: tel.value,
+                operationType: 2
+            }
+        )
+        if (result.code !== 0) {
+            showFailToast(result.msg || '开启失败')
+            return
+        }
+        showSuccessToast('柜口已开启')
+    } catch (error) {
+        showFailToast('请求失败')
+    } finally {
+        setTimeout(() => {
+            isButtonDisabled.value = false
+        }, 5000)
+    }
+}
+
+const handleSubmit = async () => {
+    if (!validateForm()) return
+
+    submitting.value = true
+    try {
+        formData.value.userid = wxStore.userid;
+        formData.value.corpid = wxStore.corpid;
+        const { code, msg } = await handleApprovalApi(formData.value)
+
+        if (code === 0) {
+            showSuccessToast('操作成功')
+            await showConfirmDialog({
+                title: "操作成功",
+                message: `审批处理已完成`
+            })
+            router.push('/approval/list')
+        } else {
+            console.error('操作失败code:', code, 'msg:', msg)
+            showConfirmDialog({
+                title: '操作失败',
+                message: msg || '操作失败'
+            })
+        }
+    } catch (error) {
+        console.error('提交失败:', error)
+        showConfirmDialog({
+            title: '提交失败',
+            message: error instanceof Error ? error.message : '网络请求异常'
+        })
+    } finally {
+        submitting.value = false
+    }
+}
+
+const handleComfirm = () => {
+    formData.value.status = 2;
+    handleSubmit();
+}
+
+const handleReject = () => {
+    formData.value.status = 3;
+    handleSubmit();
+}
+
+</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?.name" />
+                <van-cell title="手机号" :value="approvalStore.currentApproval?.mobile" />
+                <van-cell title="当前状态" :value="statusMap[approvalStore.currentApproval?.status || 1]" />
+                <van-cell title="领用说明" :value="approvalStore.currentApproval?.applyRemark" />
+            </van-cell-group>
+
+            <van-cell-group class="product-list">
+                <template v-for="item in orderGoods" :key="item.goodsId">
+                    <van-cell class="product-item">
+                        <template #icon>
+                            <van-image :src="item.coverImg" width="60" height="60" class="product-image" />
+                        </template>
+
+                        <div class="product-info">
+                            <div class="product-name van-ellipsis">
+                                {{ item.goodsName }}
+                            </div>
+                            <div class="price-row">
+                                <span class="product-price">
+                                    ¥{{ item.price.toFixed(2) }}
+                                </span>
+                                <span class="quantity">
+                                    ×{{ item.quantity }}
+                                </span>
+                            </div>
+                        </div>
+                    </van-cell>
+                </template>
+            </van-cell-group>
+
+            <van-cell-group>
+                <!-- 原有表单字段保持不变 -->
+                <van-button type="primary" size="small"
+                    @click="handleOpenCabinet" :disabled="isButtonDisabled" style="margin-bottom: 12px">
+                    打开柜子
+                </van-button>
+                <van-field v-model="formData.auditRemark" label="审核说明" type="textarea" rows="2" autosize
+                    class="audit-remark-field" />
+            </van-cell-group>
+
+            <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>
+
+            <div class="submit-bar" v-if="approvalStore.currentApproval?.status !== 2">
+                <van-button type="danger" block :loading="submitting" loading-text="提交中..." @click="handleReject">
+                    拒绝
+                </van-button>
+                <van-button type="primary" block :loading="submitting" loading-text="提交中..." @click="handleComfirm">
+                    同意
+                </van-button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.approval-container {
+    padding: 12px 16px;
+}
+
+.content-wrapper {
+        padding-top: 46px;
+        padding-bottom: 100px;
+    }
+
+    .product-list {
+        margin-bottom: 20px;
+    }
+
+    .product-item {
+        align-items: flex-start;
+    }
+
+    .product-image {
+        margin-right: 12px;
+        border-radius: 4px;
+    }
+
+    .product-info {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        height: 60px;
+    }
+
+    .price-row {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .product-price {
+        color: #e95d5d;
+        font-weight: bold;
+        font-size: 14px;
+    }
+
+    .quantity {
+        color: #666;
+        font-size: 13px;
+    }
+
+.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: sticky;
+    bottom: 20px;
+    padding: 16px;
+    background: #fff;
+    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    margin: 0 16px;
+    z-index: 1;
+}
+
+.content-wrapper {
+    padding-bottom: 100px;
+}
+
+.audit-remark-field::v-deep .van-field__control {
+    background-color: #fffbe6;
+    padding: 8px;
+    border-radius: 4px;
+}
+
+.clickable-status-field:not(:disabled)::v-deep .van-field__control {
+    cursor: pointer;
+    transition: all 0.3s ease;
+    background-color: #f7f8fa;
+}
+
+.clickable-status-field:not(:disabled):hover::v-deep .van-field__control {
+    background-color: #f2f3f5;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+}
+
+.clickable-status-field:not(:disabled):active::v-deep .van-field__control {
+    background-color: #ebedf0;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+</style>