gold-vue/src/views/moneyManage/refundDetail/refundService.vue

<!-- 客服 -->
<template>
    <el-card style="margin-bottom: 0.5vh;">
        <div class="condition">
            <div class="item1">
                <el-text size="large" style="width:4vw;">精网号</el-text>
                <el-input v-model="searchForm.jwcode" placeholder="请输入精网号" style="width:9vw;" clearable />
            </div>
            <div class="item1">
                <el-text size="large" style="width:4vw;">客户姓名</el-text>
                <el-input v-model="searchForm.name" placeholder="请输入客户姓名" style="width:9vw;" clearable />
            </div>
            <div class="item1">
                <el-text size="large" style="width:4vw;">所属地区</el-text>
                <el-input v-model="searchForm.market" placeholder="请输入所属地区" style="width:9vw;" clearable />
            </div>
            <div class="item1">
                <el-text size="large" style="width:4vw;">产品名称</el-text>
                <el-input v-model="searchForm.goodsName" placeholder="请输入产品名称" style="width:9vw;" clearable />
            </div>
            <div class="item1">
                <el-text size="large" style="width:4vw;" multiple>订单状态</el-text>
                <el-select v-model="searchForm.statuses" style="width:9vw;">
                    <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>
        </div>
        <div class="condition">
            <div class="item2">
                <el-text size="large" style="width:4vw;">付款币种</el-text>
                <el-input v-model="searchForm.paymentCurrency" placeholder="请输入付款币种" style="width:9vw;" clearable />
            </div>
            <div class="item2">
                <el-text size="large" style="width:4vw;">支付方式</el-text>
                <el-input v-model="searchForm.payType" placeholder="请输入支付方式" style="width:9vw;" clearable />
            </div>
            <div class="item2" style="width: 28.5vw;">
                <el-text size="large" style="width:4vw;">付款时间</el-text>
                <el-date-picker v-model="dateRange" type="datetimerange" range-separator="至" start-placeholder="起始时间"
                    end-placeholder="结束时间" style="width:22vw;" :disabled-date="disabledDate" />
            </div>
            <div>
                <el-button type="primary" @click="getRefund">查询</el-button>
                <el-button type="success" @click="reset">重置</el-button>
                <el-button type="warning">导出excel</el-button>
                <el-button type="primary">查看导出列表</el-button>
            </div>
        </div>
    </el-card>

    <div style="display: flex;">
        <el-button type="primary" @click="showSteps = true">看看步骤条</el-button>
        <el-button type="primary" @click="showError = true">退款金额有误</el-button>
    </div>

    <el-card style="margin-top: 0.5vh;">
        <el-table :data="tableData" style="height:64vh;width:82vw">
            <el-table-column type="index" label="序号" width="60" fixed="left" />
            <el-table-column prop="jwcode" label="Homily ID" width="120" fixed="left" />
            <el-table-column prop="name" label="姓名" width="120" fixed="left" show-overflow-tooltip />
            <el-table-column prop="market" label="所属地区" width="120" />
            <el-table-column prop="activity" label="活动名称" width="120px" show-overflow-tooltip />
            <el-table-column prop="goodsName" label="产品名称" width="120" />
            <el-table-column prop="goodNum" label="产品数量" width="120" />
            <el-table-column prop="paymentCurrency" label="付款币种" width="120" />
            <el-table-column prop="paymentAmount" label="付款金额" width="120" />
            <el-table-column prop="payType" label="支付方式" width="120" />
            <el-table-column prop="payTime" label="付款时间" width="180" />
            <el-table-column prop="voucher" label="转账凭证" width="120" />
            <el-table-column prop="remark" label="备注" width="150" show-overflow-tooltip />
            <el-table-column prop="status" label="订单状态" width="120" />
            <el-table-column prop="operation" label="操作" fixed="right" width="150px">
                <template #default="scope">
                    <div class="operation">
                        <el-button v-if="scope.row.status === 10" type="primary" text
                            @click="showBackDialog(scope.row)">
                            撤回
                        </el-button>
                        <el-button v-if="scope.row.status === 11" type="primary" text
                            @click="showEditDialog(scope.row)">
                            编辑
                        </el-button>
                        <el-button v-if="scope.row.status !== 11 && scope.row.status !== 10" type="primary" text @click="">
                            查看进度
                        </el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
            @size-change="handlePageSizeChange" @current-change="handleCurrentChange"
            style="margin-top: 1vh;"></el-pagination>
    </el-card>

    <el-dialog v-model="showEdit" title="退款" class="editDialog" overflow draggable style="width: 40vw;">
        <div style="display: flex;">
            <div class="left">
                <div class="add-item">
                    <el-text style="width:4vw;">精网号</el-text>
                    <el-input v-model="editRow.jwcode" style="width:10vw;" disabled />
                </div>
                <div class="add-item">
                    <el-text style="width:4vw;">客户姓名</el-text>
                    <el-input v-model="editRow.name" style="width:10vw;" disabled />
                </div>
                <div class="add-item">
                    <el-text style="width:4vw;">所属地区</el-text>
                    <el-input v-model="editRow.markets" style="width:10vw;" disabled />
                </div>
                <div class="add-item">
                    <el-text style="width:4vw;">活动名称</el-text>
                    <el-input v-model="editRow.activity" style="width:10vw;" disabled />
                </div>
                <div class="add-item">
                    <el-text style="width:4vw;">产品名称</el-text>
                    <el-input v-model="editRow.goodsName" style="width:10vw;" disabled />
                </div>
                <div class="add-item">
                    <el-text style="width:4vw;">产品数量</el-text>
                    <el-input v-model="editRow.goodNum" style="width:10vw;" disabled />
                    &nbsp;个
                </div>
                <div class="add-item">
                    <el-text style="width:4vw;">付款币种</el-text>
                    <el-input v-model="editRow.paymentCurrency" style="width:10vw;" disabled />
                </div>
                <div class="add-item">
                    <el-text style="width:4vw;">付款金额</el-text>
                    <el-input v-model="editRow.paymentAmount" style="width:10vw;" disabled />
                </div>
                <div class="add-item">
                    <el-text style="width:4vw;">支付方式</el-text>
                    <el-input v-model="editRow.payType" style="width:10vw;" disabled />
                </div>
                <div class="add-item">
                    <el-text style="width:4vw;">付款时间</el-text>
                    <el-date-picker v-model="editRow.payTime" type="datetime" style="width:10vw;" disabled />
                </div>
                <div class="add-item">
                    <el-text style="width:4vw;" size="small">转账凭证</el-text>
                    <el-form-item :rules="{ required: true, message: '请上传图片', trigger: 'change' }">
                        <el-upload ref="uploadRef" :auto-upload="false" list-type="picture-card"
                            :show-file-list="false">
                            <template #default>
                                <img v-if="editRow.voucher" :src="editRow.voucher"
                                    style="width: 100%; height: 100%; object-fit: cover;">
                                <el-icon v-else>
                                    <Plus />
                                </el-icon>
                            </template>
                        </el-upload>
                    </el-form-item>
                </div>
                <div class="add-item">
                    <el-text style="width:4vw;">备注</el-text>
                    <el-input v-model="editRow.remark" style="width:10vw;" :rows="3" type="textarea" maxLength="100"
                        disabled show-word-limit />
                </div>
            </div>
            <div class="right">
                <div class="add-item">
                    <el-text style="width:4vw;">退款模式</el-text>
                    <el-radio-group v-model="editForm.refundModel">
                        <el-radio value="0">全部退款</el-radio>
                        <el-radio value="1">部分退款</el-radio>
                    </el-radio-group>
                </div>
                <div class="add-item">
                    <el-text style="width:4vw;">退款理由</el-text>
                    <el-input v-model="editForm.refundReason" style="width:10vw;" :rows="5" maxlength="150"
                        show-word-limit type="textarea" />
                </div>
                <div>ps:请在退款理由表明用户的退款需求。</div>
                <div style="display:flex;justify-content: center;margin-top: 5vh;">
                    <el-button type="default" @click="resetEdit">重置</el-button>
                    <el-button type="primary" @click="submitEdit">提交</el-button>
                </div>
            </div>
        </div>
    </el-dialog>

    <el-dialog v-model="showSteps" title="唉！！！" overflow draggable width="1206px" :style="{
        backgroundImage: 'url(/src/assets/images/背景图.png)',
        backgroundSize: 'cover',
        backgroundPosition: 'center'
    }">
        <div class="steps">
            <div class="steps-content">
                <el-steps style="min-width: 60vw" :active="1" align-center>
                    <el-step> <template #title>
                            <div>提交人<br>你是死的</div>
                        </template>
                        <template #icon>
                            <img src="@/assets/images/已审核.png" alt="已审核图标">
                        </template>
                    </el-step>
                    <el-step title="地区财务">
                        <template #icon>
                            <img src="@/assets/images/待审核.png" alt="待审核图标">
                        </template>
                    </el-step>
                    <el-step title="地区负责人">
                        <template #icon>
                            <img src="@/assets/images/还没传到.png" alt="还没传到图标">
                        </template>
                    </el-step>
                    <el-step title="总部财务">
                        <template #icon>
                            <img src="@/assets/images/还没传到.png" alt="还没传到图标">
                        </template>
                    </el-step>
                    <el-step title="指定执行人">
                        <template #icon>
                            <img src="@/assets/images/还没传到.png" alt="还没传到图标">
                        </template>
                    </el-step>
                </el-steps>
            </div>
            <div class="steps-status">
                <el-steps style="min-width: 50vw" :active="1" finish-status="success" simple>
                    <el-step title="已通过" />
                    <el-step title="待审核" />
                    <el-step title="待审核" />
                    <el-step title="待审核" />
                    <el-step title="待审核" />
                </el-steps>
            </div>
            <div class="steps-btn">
                <el-button type="primary">确定</el-button>
            </div>
        </div>
    </el-dialog>

    <el-dialog v-model="showBack" title="撤回退款" overflow draggable class="back-dialog" :style="{
        backgroundImage: 'url(/src/assets/images/撤回.png)',
        backgroundSize: 'cover',
        backgroundPosition: 'center'
    }">
        <div class="back-text">将 要 撤 回 该 信 息！</div>
        <div class="back-btn">
            <el-button type="default" @click="showBack = false">取消</el-button>
            <el-button type="primary" @click="recall" style="margin-left: 2vw;">确定</el-button>
        </div>
    </el-dialog>

    <el-dialog v-model="showError" overflow draggable class="back-dialog" :style="{
        backgroundImage: 'url(/src/assets/images/撤回.png)',
        backgroundSize: 'cover',
        backgroundPosition: 'center'
    }">
        <div class="back-text">退 款 金 额 填 写 有 误</div>
        <div class="back-btn">
            <el-button type="default" @click="showError = false">取消</el-button>
            <el-button type="primary" @click="" style="margin-left: 2vw;">确定</el-button>
        </div>
    </el-dialog>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import API from '@/util/http.js'
const uploadUrl = 'https://api.homilychart.com/hljw/api/aws/upload'
import { useAdminStore } from "@/store/index.js"
import { storeToRefs } from "pinia"
import dayjs from 'dayjs'
const adminStore = useAdminStore()
const { adminData, menuTree } = storeToRefs(adminStore)
import { permissionMapping, findMenuById } from "@/utils/menuTreePermission.js"

const dateRange = ref([])
const searchForm = ref({
    jwcode: '',
    market: [],
    statuses: []
})
const backRow = ref({})// 撤回存数据
const editRow = ref({})// 编辑存数据
const editForm = ref({
    refundModel: '',
    refundReason: ''
})
const auditForm = ref({
    refundType: ''
})
const pagination = ref({
    pageNum: 1,
    pageSize: 50,
    total: 0
})
const tableData = ref([])
const showEdit = ref(false)
const showSteps = ref(false)
const uploadRef = ref(null)
const showBack = ref(false)
const showError = ref(false)
const isKF = adminData.value.adminName.includes('客服')
const statusList = ref([
{
    value: 'waiting',
    label: '待审核',
  },
  {
    value: 'pending', 
    label: '审核中'
  },
  {
    value: 'completed',
    label: '退款完成'
  }
])
// 查全部
const getRefund = async function () {
    try {
        if(searchForm.value.statuses === 'completed'){
            searchForm.value.statuses = [41]
        } else if(searchForm.value.statuses === 'pending'){
            searchForm.value.statuses = [20, 30, 40]
        }else if(searchForm.value.statuses === 'waiting'){
            searchForm.value.statuses = [10]
        }
        const params = {
            pageNum: pagination.value.pageNum,
            pageSize: pagination.value.pageSize,
            cashRecordDone: {
                jwcode: searchForm.value.jwcode,//精网号
                name: searchForm.value.name,//姓名
                markets: searchForm.value.market,//地区
                goodsName: searchForm.value.goodsName,//商品名
                statuses: searchForm.value.statuses,//10：地区财务待审核；12：地区财务驳回；
                // 20：地区负责人待审核；22：地区负责人驳回；
                // 30：总部财务待审核；32：总部财务驳回；
                // 40：执行人待处理；41：执行人已处理，退款完成；
                paymentCurrency: searchForm.value.paymentCurrency,//付款币种
                payType: searchForm.value.payType,//支付方式
                startTime: dateRange.value && dateRange.value[0] ? moment(dateRange.value[0]).format('YYYY-MM-DD HH:mm:ss') : "",
                endtime: dateRange.value && dateRange.value[1] ? moment(dateRange.value[1]).format('YYYY-MM-DD HH:mm:ss') : "",
                submitterId: isKF ? adminData.value.id : null
            }
        }

        const result = await API({
            url: '/Money/select',
            method: 'POST',
            data: params
        })

        tableData.value = result.data.list || []
    } catch (error) {
        ElMessage.error(error.message || '查询失败')
    }
}
// 撤回
const recall = async function () {
    try {
        console.log(backRow.value)
        const params = {
            id: backRow.value.id,
            status: backRow.value.status,
            orderType: backRow.value.orderType
        }
        const result = await API({
            url: '/Money/update',
            data: params
        })
        if (result.code === 200) {
            ElMessage.success(result.msg || '退款成功')
            showBack.value = false
            getRefund()
        } else {
            ElMessage.error(result.msg || '退款失败')
        }
    } catch (error) {
        ElMessage.error(error.message || '退款失败')
    }
}
// 编辑
const submitEdit = async function () {
    try {
        console.log(editRow.value)
        const params = {
            id: editRow.value.id,
            status: editRow.value.status,
            refundModel: editForm.value.refundModel,
            refundReason: editForm.value.refundReason,
            jwcode: editRow.value.jwcode,
            paymentAmount: editRow.value.paymentAmount,
            paymentCurrency: editRow.value.paymentCurrency
        }
        const result = await API({
            url: '/Money/update',
            data: params
        })
        if (result.code === 200) {
            ElMessage.success(result.msg || '编辑成功')
            showEdit.value = false
            getRefund()
        } else {
            ElMessage.error(result.msg || '编辑失败')
        }
    } catch (error) {
        ElMessage.error(error.message || '编辑失败')
    }
}
const reset = function () {
    searchForm.value = {
        jwcode: ''
    }
    dateRange.value = []
    getRefund()
}
const resetEdit = function () {
    editForm.value = {
        refundModel: '',
        refundReason: ''
    }
}
const showBackDialog = function (row) {
    backRow.value = row
    showBack.value = true
}
const showEditDialog = function (row) {
    editRow.value = row
    showEdit.value = true
}
const handlePageSizeChange = function (val) {
    pagination.value.pageSize = val
    getRefund()
}
const handleCurrentChange = function (val) {
    pagination.value.pageNum = val
    getRefund()
}
const disabledDate = (time) => {
    const limitDate = new Date(2025, 0, 1);
    return time.getTime() < limitDate.getTime();
}

onMounted(() => {
    getRefund()
    console.log('???????????????????', adminData.value)
})
</script>
<style scoped lang="scss">
.condition {
    width: 82vw;
    display: flex;
    align-items: center;
    height: 4vh;

    .item1 {
        width: 18%;
        display: flex;
        align-items: center;
        margin-bottom: 1vh;
        margin-right: 0.5vw;
    }

    .item2 {
        width: 18%;
        display: flex;
        align-items: center;
        margin-right: 0.5vw;
    }
}

.editDialog {
    .left {
        width: 50%;
        height: 70vh;
        padding: 0 2vw;

        .add-item {
            display: flex;
            align-items: center;
            margin-bottom: 1vh;
        }

        .image {
            width: 4vw !important;
            height: 4vw !important;
        }
    }

    .right {
        width: 50%;
        height: 50vh;

        .add-item {
            display: flex;
            align-items: center;
            margin-bottom: 1vh;
        }
    }
}

.steps {
    .steps-content {
        width: 45vw;
        height: 15vh;
        display: flex;
        justify-content: center;
        padding-top: 15vw;
        padding-left: 8vw;
    }

    .steps-status {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .steps-btn {
        height: 15vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.back-dialog {
    width: 700px;
    height: auto;

    .back-text {
        font-size: 60px;
        font-weight: bold;
        color: #000000;
        text-align: center;
        justify-content: center;
        margin-top: 22vh;
    }

    .back-btn {
        height: 20vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>