gold-vue/src/views/moneyManage/executor/executor.vue

<template>
    <el-card style="margin-bottom: 0.5vh;background-color: rgb(243,250,254);">
        <div class="condition1">
            <div class="search">
                <el-text size="large" style="width:4vw;">姓名</el-text>
                <el-input v-model="searchForm.name" placeholder="请输入姓名" style="width:9vw;" clearable />
            </div>
            <div class="search">
                <el-text size="large" style="width:4vw;">精网号</el-text>
                <el-input v-model="searchForm.jwcode" placeholder="请输入精网号" style="width:9vw;" clearable />
            </div>
            <div class="search">
                <el-text size="large" style="width:4vw;">所属地区</el-text>
                <el-cascader style="width: 9vw;" v-model="searchForm.marketName" :options="market" placeholder="请选择所属地区"
                    clearable />
            </div>
            <div class="search">
                <el-text size="large" style="width:4vw;">产品名称</el-text>
                <el-cascader v-model="searchForm.goodsName" :options="productList" style="width: 10vw;" />
            </div>
            <div class="search">
                <el-text size="large" style="width:4vw;">退款币种</el-text>
                <el-select v-model="searchForm.payType" style="width:9vw;">
                    <el-option v-for="item in currencies" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>
        </div>
        <div class="condition1">
            <div class="search2">
                <el-text size="large" style="width:4vw;">退款途径</el-text>
                <el-select v-model="searchForm.refundChannels" style="width:9vw;">
                    <el-option v-for="item in channelOptions" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </div>
            <div class="search2">
                <el-text size="large" style="width:4vw;">订单状态</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 class="search2" style="width: 28vw;">
                <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;" @change="handleDatePickerChange"
                    :disabled-date="disabledDate"  :default-time="defaultTime" />
            </div>
            <div>
                <el-button type="primary" @click="getRefund">查询</el-button>
                <el-button type="editRow" @click="reset">重置</el-button>
                <!-- <el-button type="warning">导出excel</el-button>
                <el-button type="primary">查看导出列表</el-button> -->
            </div>
        </div>
    </el-card>

    <el-card style="background-color: rgb(231,244,253);">
        <el-table :data="tableData" style="height:60vh;width:82vw;">
            <el-table-column type="index" label="序号" width="60" fixed="left" />
            <el-table-column prop="name" label="Homily ID" width="120" fixed="left" />
            <el-table-column prop="jwcode" label="姓名" width="120" fixed="left" show-overflow-tooltip />
            <el-table-column prop="market" label="所属地区" width="120" />
            <el-table-column prop="goodsName" label="产品名称" width="120" />
            <el-table-column prop="goodNum" label="产品数量" width="120" />
            <el-table-column prop="refundType" label="退款方式" width="120">
                <template #default="scope">
                    {{ scope.row.refundType === 1 ? '部分退款' : '全部退款' }}
                </template>
            </el-table-column>
            <el-table-column prop="refundCurrency" label="退款币种" width="120">
                <template #default="scope">
                    <div v-if="!scope.row.refundCurrency">
                        <text style="color: #FA5A1E;">待补充</text>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="refundAmount" label="退款金额" width="120">
                <template #default="scope">
                    <div v-if="!scope.row.refundAmount">
                        <text style="color: #FA5A1E;">待补充</text>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="refundChannels" label="退款途径" width="120">
                <template #default="scope">
                    <div v-if="!scope.row.refundChannels">
                        <text style="color: #FA5A1E;">待补充</text>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="refundVoucher" label="退款截图" width="120">
                <template #default="scope">
                    <el-image v-if="scope.row.refundVoucher" :src="scope.row.refundVoucher"
                        :preview-src-list="[scope.row.refundVoucher]"
                        style="width: 40px; height: 40px; cursor: pointer;z-index: 99999;" fit="cover" />
                    <span v-else style="color: #FA5A1E;">待补充</span>
                </template>
            </el-table-column>
            <el-table-column prop="refundTime" label="退款时间" width="180">
                <template #default="scope">
                    <div v-if="!scope.row.refundTime">
                        <text style="color: #FA5A1E;">待补充</text>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="status" label="订单状态" width="120">
                <template #default="scope">
                    {{ scope.row.status === 41 ? '已完成' : '待处理' }}
                </template>
            </el-table-column>
            <el-table-column prop="operation" label="操作" fixed="right" width="100px">
                <template #default="scope">
                    <div class="operation">
                        <el-button v-if="scope.row.status === 40" type="primary" text
                            @click="showEditDialog(scope.row)">
                            提交
                        </el-button>
                        <el-button v-else type="primary" text @click="showEditDialog(scope.row)">
                            编辑
                        </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" style="margin-top: 1vh;"
            @size-change="handlePageSizeChange" @current-change="handleCurrentChange" />
    </el-card>

    <el-dialog v-model="showEdit" class="edit" overflow draggable style="width: 40vw;">
        <div style="display: flex;">
            <div class="left">
                <div class="dialog-item">
                    <el-text style="width:4vw;">精网号</el-text>
                    <el-input v-model="editRow.jwcode" style="width:10vw;" disabled />
                </div>
                <div class="dialog-item">
                    <el-text style="width:4vw;">客户姓名</el-text>
                    <el-input v-model="editRow.name" style="width:10vw;" disabled />
                </div>
                <div class="dialog-item">
                    <el-text style="width:4vw;">所属地区</el-text>
                    <el-input v-model="editRow.market" style="width:10vw;" disabled />
                </div>
                <div class="dialog-item">
                    <el-text style="width:4vw;">产品名称</el-text>
                    <el-input v-model="editRow.goodsName" style="width:10vw;" disabled />
                </div>
                <div class="dialog-item">
                    <el-text style="width:4vw;">退款类型</el-text>
                    <el-select v-model="editRow.refundModel" style="width:10vw;" disabled>
                    <el-option label="全部退款" :value="0"></el-option>
                    <el-option label="部分退款" :value="1"></el-option>
                </el-select>
                </div>
                <div class="dialog-item">
                    <el-text style="width:4vw;">付款币种</el-text>
                    <el-input v-model="editRow.paymentCurrency" style="width:10vw;" disabled />
                </div>
                <div class="dialog-item">
                    <el-text style="width:4vw;">付款金额</el-text>
                    <el-input v-model="editRow.paymentAmount" style="width:10vw;" disabled />
                </div>
                <div class="dialog-item">
                    <el-text style="width:4vw;">支付方式</el-text>
                    <el-input v-model="editRow.payType" style="width:10vw;" disabled />
                </div>
                <div class="dialog-item">
                    <el-text style="width:4vw;">付款时间</el-text>
                    <el-date-picker v-model="editRow.payTime" type="datetime" style="width:10vw;" disabled />
                </div>
                <div class="dialog-item">
                    <el-text style="width:4vw;">提交人</el-text>
                    <el-input v-model="editRow.submitterName" style="width:10vw;" disabled />
                </div>
                <div class="dialog-item">
                    <el-text style="width:4vw;">转账凭证</el-text>
                    <img v-if="editRow.voucher" :src="editRow.voucher"
                        style="width: 80px; height: 80px; object-fit: cover;">
                    <div v-else>
                        无转账凭证
                    </div>
                </div>
                <div class="dialog-item">
                    <el-text style="width:4vw;">备注</el-text>
                    <el-input v-model="editRow.remark" style="width:10vw;" :row="3" disabled maxlength="100"
                        type="textarea" show-word-limit clearable />
                </div>
            </div>
            <div class="right">
                <div class="dialog-item">
                    <el-text style="width:4vw;">退款币种</el-text>
                    <el-select v-model="editForm.refundCurrency" placeholder="请选择退款币种" style="width:10vw;">
                        <el-option v-for="item in currencies" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </div>
                <div class="dialog-item">
                    <el-text style="width:4vw;">退款金额</el-text>
                    <el-input v-model="editForm.refundAmount" placeholder="请输入退款金额" style="width:10vw;" clearable />
                </div>
                <div class="dialog-item">
                    <el-text style="width:4vw;">退款途径</el-text>
                    <el-select v-model="editForm.refundChannels" placeholder="请选择退款途径" style="width:10vw;">
                        <el-option v-for="item in channelOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </div>
                <div class="dialog-item">
                    <el-text style="width:4vw;">退款时间</el-text>
                    <el-date-picker v-model="editForm.refundTime" type="datetime" placeholder="请选择退款时间"
                        style="width:10vw;" clearable />
                </div>
                <div class="dialog-item">
                    <el-text style="width:4vw;">支付凭证</el-text>
                    <el-upload ref="uploadRef" :http-request="customUpload" list-type="picture-card"
                        :auto-upload="false" :on-change="handleImageChange" :before-upload="beforeUpload"
                        :show-file-list="false">
                        <template #default>
                            <img v-if="editForm.imageUrl" :src="editForm.imageUrl"
                                style="width: 80px; height: 80px; object-fit: cover;">
                            <el-icon v-else>
                                <Plus />
                            </el-icon>
                        </template>
                    </el-upload>
                </div>
                <div class="dialog-item">
                    <el-text style="width:4vw;">备注</el-text>
                    <el-input v-model="editForm.refundRemark" placeholder="请输入备注" style="width:10vw;" :rows="3"
                        maxlength="100" show-word-limit type="textarea" clearable />
                </div>
                <div style="display:flex;justify-content: center;margin-top: 5vh;">
                    <el-button type="default" @click="hideEditDialog" style="margin-right: 2vw;">取消</el-button>
                    <el-button type="primary" @click="submitRefund">提交</el-button>
                </div>
            </div>
        </div>
    </el-dialog>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import API from '@/util/http.js'
import dayjs from 'dayjs'
import { useAdminStore } from "@/store/index.js"
import { storeToRefs } from "pinia"
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
const adminStore = useAdminStore()
const { adminData, menuTree } = storeToRefs(adminStore)
import { permissionMapping, findMenuById } from "@/utils/menuTreePermission.js"

const uploadUrl = 'https://api.homilychart.com/hljw/api/aws/upload'
const dateRange = ref([])
const tableData = ref([])
const editRow = ref({})// 编辑回显
const pagination = ref({
    pageNum: 1,
    pageSize: 50,
    total: 0
})
const market = ref([])
const uploadRef = ref(null)
const searchForm = ref({
    jwcode: ''
})
const showEdit = ref(false)
const editForm = ref({
    jwcode: ''
})
// 查全部
const getRefund = async function () {
    try {
        searchForm.value.statuses = [40, 41] // 默认：看不到进度没到这里的

        const params = {
            pageNum: pagination.value.pageNum,
            pageSize: pagination.value.pageSize,
            cashRecordDone: {
                jwcode: searchForm.value.jwcode,
                name: searchForm.value.name,
                markets: searchForm.value.markets,
                goodsNames: 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] ? dayjs(dateRange.value[0]).format('YYYY-MM-DD HH:mm:ss') : "",
                endtime: dateRange.value && dateRange.value[1] ? dayjs(dateRange.value[1]).format('YYYY-MM-DD HH:mm:ss') : "",
                adminId: adminData.value.id,
                account: adminData.value.account
            }
        }

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

        tableData.value = result.data.list || []
        pagination.value.total = result.data.total || 0
    } catch (error) {
        ElMessage.error(error.message || '查询失败')
    }
}
// 提交
const submitRefund = async function () {
    try {
        const params = {
            refundVoucher: editForm.value.imageUrl,
            refundTime: editForm.value.refundTime ? dayjs(editForm.value.refundTime).format('YYYY-MM-DD HH:mm:ss') : "",
            refundRemark: editForm.value.refundRemark,
            id: editRow.value.id,
            refundCurrency: editForm.value.refundCurrency,
            refundAmount: editForm.value.refundAmount,
            refundChannels: editForm.value.refundChannels,
            status: 41,
            auditId: editRow.value.auditId,
            executor: adminData.value.account
        }
        const result = await API({
            url: '/Money/executor',
            data: params
        })
        if (result.code === 200) {
            ElMessage.success('提交成功')
            hideEditDialog()
            getRefund()
        } else {
            ElMessage.error(result.data.msg || '提交失败')
        }
    } catch (error) {
        ElMessage.error(error.message || '提交失败')
    }
}
const getMarket = async function () {
    try {
        const result = await API({

            url: '/market/selectMarket',
        })
        console.log('看看地区树', result)

        const transformTree = (nodes) => {
            const allChildren = nodes.flatMap(node => node.children || []);

            return allChildren.map(child => {
                const grandchildren = child.children && child.children.length
                    ? transformTree([child])
                    : null;

                return {
                    value: child.name,
                    label: child.name,
                    children: grandchildren
                };
            });
        };
        market.value = transformTree(result.data)
        console.log('转换后的地区树==============', market.value)
    } catch (error) {
        console.log('请求失败', error)
    }
}
const showEditDialog = (row) => {
    editRow.value = row
    showEdit.value = true
}
const hideEditDialog = () => {
    showEdit.value = false
    editForm.value = {
        jwcode: ''
    }
}

const statusList = ref([
    {
        value: 40,
        label: '待处理',
    },
    {
        value: 41,
        label: '退款完成'
    }
])
const channelOptions = ref([{
    value: '银行转账',
    label: '银行转账'
},
{
    value: '现金',
    label: '现金'
},
{
    value: '支票',
    label: '支票'
},
{
    value: '刷卡',
    label: '刷卡'
},
{
    value: 'Grabpay',
    label: 'Grabpay'
},
{
    value: 'Nets',
    label: 'Nets'
},
{
    value: 'PayPal',
    label: 'PayPal'
},
{
    value: 'Stripe-链接收款',
    label: 'Stripe-链接收款'
},
{
    value: 'Ipay88-链接收款',
    label: 'Ipay88-链接收款'
},
{
    value: 'PaymentAsia-链接收款',
    label: 'PaymentAsia-链接收款'
},
{
    value: 'Stripe-Link平台',
    label: 'Stripe-Link平台'
},
{
    value: 'PaymentAsia-Link平台',
    label: 'PaymentAsia-Link平台'
},
{
    value: 'FirstData-Link平台-Link平台',
    label: 'FirstData-Link平台-Link平台'
},
{
    value: 'IOS-Link平台',
    label: 'IOS-Link平台'
},
{
    value: 'Ipay88-Link平台',
    label: 'Ipay88-Link平台'
}
])

const currencies = ref([
    {
        value: '新币',
        label: '新币'
    },
    {
        value: '港币',
        label: '港币'
    },
    {
        value: '马币',
        label: '马币'
    },
    {
        value: '加币',
        label: '加币'
    },
    {
        value: '泰铢',
        label: '泰铢'
    },
    {
        value: '越南盾',
        label: '越南盾'
    }
])
const handleImageChange = (file) => {
    uploadRef.value.submit()
}
const beforeUpload = (file) => {
    const isJPG = file.type === 'image/jpeg'
    const isPNG = file.type === 'image/png'
    const isLt1 = file.size / 1024 < 1024
    if (!isJPG && !isPNG) {
        ElMessage.error('上传图片只能是 JPG 或 PNG 格式')
        return false
    }
    if (!isLt1) {
        ElMessage.error('上传图片大小不能超过1MB')
        return false
    }
    return true
}
const customUpload = async (options) => {
    try {
        const formData = new FormData()
        formData.append('file', options.file)
        const response = await API({
            url: uploadUrl,
            method: 'POST',
            data: formData,
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        })
        if (response.code === 200 && response.data) {
            editForm.value.imageUrl = response.data.url
            ElMessage.success(response.msg || '上传成功')
        } else {
            ElMessage.error(response.msg || '上传失败')
        }
    } catch (error) {
        console.error('上传错误:', error)
        ElMessage.error(`上传失败: ${error.msg || error.message || '网络异常'}`)
    }
}
const productList = [
    {
        "value": "金币产品",
        "label": "金币产品",
        "children": [
            {
                "value": "金币充值",
                "label": "金币充值",
            }
        ]
    },
    {
        "value": "软件产品",
        "label": "软件产品",
        "children": [
            {
                "value": "美股",
                "label": "美股",
                "children": [
                    {
                        "value": "美股软件",
                        "label": "美股软件"
                    }
                ]
            },
            {
                "value": "港股",
                "label": "港股",
                "children": [
                    {
                        "value": "港股软件",
                        "label": "港股软件"
                    }
                ]
            },
            {
                "value": "A股",
                "label": "A股",
                "children": [
                    {
                        "value": "A股软件",
                        "label": "A股软件"
                    }
                ]
            },
            {
                "value": "新加坡股",
                "label": "新加坡股",
                "children": [
                    {
                        "value": "新加坡股软件",
                        "label": "新加坡股软件"
                    }
                ]
            },
            {
                "value": "马股",
                "label": "马股",
                "children": [
                    {
                        "value": "马股软件",
                        "label": "马股软件"
                    }
                ]
            },
            {
                "value": "日本股",
                "label": "日本股",
                "children": [
                    {
                        "value": "日本股软件",
                        "label": "日本股软件"
                    }
                ]
            },
            {
                "value": "泰股",
                "label": "泰股",
                "children": [
                    {
                        "value": "泰股软件",
                        "label": "泰股软件"
                    }
                ]
            },
            {
                "value": "越南股",
                "label": "越南股",
                "children": [
                    {
                        "value": "越南股软件",
                        "label": "越南股软件"
                    }
                ]
            },
            {
                "value": "印尼股",
                "label": "印尼股",
                "children": [
                    {
                        "value": "印尼股软件",
                        "label": "印尼股软件"
                    }
                ]
            },
            {
                "value": "韩国股",
                "label": "韩国股",
                "children": [
                    {
                        "value": "韩国股软件",
                        "label": "韩国股软件"
                    }
                ]
            },
            {
                "value": "台湾股",
                "label": "台湾股",
                "children": [
                    {
                        "value": "台湾股软件",
                        "label": "台湾股软件"
                    }
                ]
            }
        ]
    },

]
const defaultTime = [
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
]
const disabledDate = (time) => {
  const limitDate = new Date(2025, 0, 1);
  return time.getTime() < limitDate.getTime();
}
const reset = function () {
    searchForm.value = {
        jwcode: '',
        market: searchForm.value.market,
        statuses: searchForm.value.statuses
    }
    dateRange.value = []
    getRefund()
}
onMounted(() => {
    console.log('???????????????????', adminData.value)
    getRefund()
    getMarket()
})
</script>
<style scoped>
:deep(.el-table__header-wrapper),
:deep(.el-table__body-wrapper),
:deep(.el-table__cell),
:deep(.el-table__body td) {
    background-color: #F3FAFE !important;
}

:deep(.el-table__header th) {
    background-color: #F3FAFE !important;
}

:deep(.el-image-viewer) {
    z-index: 3000 !important;
    /* 确保高于固定列和对话框的层级 */
}

/* 若固定列仍遮挡，强制提高固定列容器的层级（可选） */
:deep(.el-table__fixed),
:deep(.el-table__fixed-right) {
    z-index: 10 !important;
    /* 低于预览层的 3000 即可 */
}

.condition1 {
    width: 82vw;
    display: flex;
    align-items: center;
    height: 4vh;

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

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

.edit {
    .left {
        width: 45%;
        height: 60vh;
        padding: 0 2vw;

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

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

        :deep(.el-upload--picture-card) {
            width: 4vw !important;
            height: 4vw !important;
            padding: 0 !important;
        }
    }

    .right {
        width: 50%;

        .dialog-item {
            display: flex;
            align-items: center;
            margin-bottom: 1vh;
        }
    }
}
</style>