shop-card-approval/src/pages/ApprovalDetail.vue

<template>
    <div class="approval-container">
        <div class="bg-container">
            <div style="padding: 20px; padding-bottom: 100px;">
                <div class="content-card">
                    <div class="info-list">
                        <div class="info-item">
                            <span class="label">申请人</span>
                            <span class="value">{{ detail.userName }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">序号</span>
                            <span class="value">{{ detail.ID }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">商品</span>
                            <span class="value">{{ detail.productName }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">出库数量</span>
                            <span class="value">{{ detail.quantity }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">备注</span>
                            <span class="value">{{ detail.remark }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">提交时间</span>
                            <span class="value">{{ detail.createdAt }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="button-group"  v-if="detail.status === '出库申请中'">
            <el-button class="reject-btn" :loading="loading" @click="showReject">驳回</el-button>
            <el-button type="primary" class="approve-btn" :loading="loading" @click="showConfirm">通过</el-button>
        </div>

        <!-- 确认弹窗 -->
        <el-dialog
            v-model="confirmVisible"
            :show-close="false"
            width="80%"
            align-center
            class="confirm-dialog"
        >
            <div class="dialog-content">
                <div class="dialog-text">确认要审核通过？</div>
            </div>
            <div class="dialog-footer">
                <div class="dialog-btn-group">
                    <div class="dialog-btn cancel" @click="confirmVisible = false">取消</div>
                    <div class="dialog-btn confirm"  @click="handleApprove">确定</div>
                </div>
            </div>
        </el-dialog>
        <!-- 驳回弹窗    -->
        <el-dialog
            v-model="rejectVisible"
            :show-close="false"
            width="80%"
            align-center
            class="reject-dialog"
        >
            <div class="dialog-content">
                <div class="dialog-text">确认要驳回？</div>
            </div>
            <div class="dialog-footer">
                <div class="dialog-btn-group">
                    <div class="dialog-btn cancel" @click="rejectVisible = false">取消</div>
                    <div class="dialog-btn confirm" style="color: #CF3050;" @click="handleReject">确定</div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getApprovalDetail, approveRequest, rejectRequest } from '@/api/approval'

const route = useRoute()
const router = useRouter()
const loading = ref(false)
const confirmVisible = ref(false)
const rejectVisible = ref(false)
const detail = ref({
    status: '',
    userName: '',
    ID: '',
    productName: '',
    quantity: '',
    remark: '',
    approvalTime: ''
})
// url中获取ID
const approvalID = ref(route.query.id?JSON.parse(route.query.id):null)
// 获取详情数据
const getDetail = async () => {
    try {
        loading.value = true
        const res = await getApprovalDetail(
            {
                id: approvalID.value,
                domain: 'fontree'
            }
        )
        if (res.status === 0) {
            detail.value = res.data
        }else {
            ElMessage.error(res.msg)
        }
    } catch (error) {
        console.error('获取详情失败:', error)
        ElMessage.error('获取详情失败')
    } finally {
        loading.value = false
    }
}

const showConfirm = () => {
    confirmVisible.value = true
}

const showReject = () => {
    rejectVisible.value = true
}

// 处理通过
const handleApprove = async () => {
    try {
        loading.value = true
        confirmVisible.value = false
        const res = await approveRequest({
            id: approvalID.value,
            status: true
        })
        if (res.status === 0) {
            ElMessage.success('审批通过')
            getDetail()
            
        }else {
            console.log(res)
            ElMessage.error(res.msg)
        }
    } catch (error) {
        console.error('审批失败:', error)
    
    } finally {
        loading.value = false
    }
}

// 处理驳回
const handleReject = async () => {
    try {
        loading.value = true
        rejectVisible.value = false
        const res = await rejectRequest({
            id: approvalID.value,
            status: false
        })
        if (res.status === 0) {
            ElMessage.success('已驳回')
            getDetail()
        }else {
            ElMessage.error(res.msg)
        }
    } catch (error) {
        console.error('驳回失败:', error)
       
    } finally {
        loading.value = false
    }
}

onMounted(() => {
    getDetail()
})
</script>

<style scoped>
.approval-container {
    min-height: 100vh;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-image: url('../assets/bgpic.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
}

.bg-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.content-card {
    background: white;
    border-radius: 4px;
    padding: 0px 20px 0px 20px;
    margin-top: 180px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.info-list {
    display: flex;
    flex-direction: column;
}

.info-item {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

.info-item:last-child {
    border-bottom: none;
}

.label {
    color: #333;
    font-size: 14px;
}

.value {
    color: #333;
    font-size: 14px;
    font-weight: 500;
}

.button-group {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    gap: 12px;
    padding: 12px 20px;
    background-color: #fff;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

.reject-btn {
    flex: 1;
    height: 44px;
    font-size: 16px;
    border: none;
    background: #E6E6E6;
    color: #1936C9;
}

.approve-btn {
    flex: 1;
    height: 44px;
    font-size: 16px;
    border: none;
    background: #1936C9;
    color: #fff;
}

/* 弹窗样式 */
:deep(.el-dialog) {
    border-radius: 8px;
    margin-top: 40vh !important;
    padding: 0 !important;
}

:deep(.el-dialog__body) {
    padding: 0;
}
.confirm-dialog {
    
}
.dialog-content {
    padding: 40px;
}

.dialog-text {
    font-size: 16px;
    color: #333;
    text-align: center;
}

.dialog-footer {
    border-top: 1px solid #eee;
}

.dialog-btn-group {
    display: flex;
    width: 100%;
}

.dialog-btn {
    flex: 1;
    text-align: center;
    padding: 12px 0;
    font-size: 16px;
    cursor: pointer;
}

.dialog-btn.cancel {
    color: #666;
    border-right: 1px solid #eee;
}

.dialog-btn.confirm {
    color: #1936C9;
}
</style>