admin123
/
shop-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

添加审批处理页面handleApply.vue，实现审批状态处理、商品信息展示和柜口开启功能
扩展审批相关接口类型定义，添加corpid字段和商品详情字段
优化原有审批处理逻辑，增加企业微信用户信息处理
This commit is contained in:
dzq 2025-06-09 15:23:15 +08:00
parent 33ef5825b0
commit cbe79d1d6d
6 changed files with 469 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/common/apis/approval/index.ts
View File

@ -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 }
})
}

1
src/common/apis/approval/type.ts
View File

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

17
src/common/apis/shop/type.ts
View File

@ -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 {

5
src/pages/approval/handle.vue
View File

@ -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) {

438
src/pages/approval/handleApply.vue Normal file
View File

@ -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>

0
src/pages/shop/Shop.vue Normal file
View File