You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

905 lines
32 KiB

<!-- 各地负责人 -->
<template>
<el-card style="margin-bottom: 0.5vh;background-color: rgb(243,250,254);">
<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-cascader style="width: 9vw;" v-model="searchForm.markets" :options="market" placeholder="请选择所属地区"
clearable @change="handleMarketChange" />
</div>
<div class="item1">
<el-text size="large" style="width:4vw;">产品名称</el-text>
<el-cascader v-model="searchForm.goodsName" :options="productList" style="width: 10vw;"
placeholder="请选择产品名称" clearable />
</div>
<div class="item1">
<el-text size="large" style="width:4vw;">订单状态</el-text>
<el-select v-model="searchForm.statuses" style="width:9vw;" placeholder="请选择订单状态" clearable>
<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-select v-model="searchForm.paymentCurrency" style="width:9vw;" placeholder="请选择付款币种" clearable>
<el-option v-for="item in currencies" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
<div class="item2">
<el-text size="large" style="width:4vw;">支付方式</el-text>
<el-select v-model="searchForm.payType" style="width:9vw;" placeholder="请选择支付方式" clearable>
<el-option v-for="item in channelOptions" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</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;" @change="handleDatePickerChange" clearable
:disabled-date="disabledDate" :default-time="defaultTime" />
</div>
<div>
<el-button type="primary" @click="getRefund">查询</el-button>
<!-- <el-button type="warning">导出excel</el-button>
<el-button type="primary">查看导出列表</el-button> -->
<el-button type="success" @click="reset">重置</el-button>
</div>
</div>
</el-card>
<el-card style="margin-top: 0.5vh;background-color: rgb(231,244,253);">
<el-table :data="tableData" style="height:64vh;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="marketName" label="所属地区" width="120" />
<el-table-column prop="goodsName" label="产品名称" width="130" show-overflow-tooltip />
<el-table-column prop="goodNum" label="产品数量" width="120" />
<el-table-column prop="refundModel" label="退款方式" width="120">
<template #default="scope">
{{ scope.row.refundModel === 1 ? '部分退款' : '全部退款' }}
</template>
</el-table-column>
<el-table-column prop="areaServise" label="提交人" width="120" />
<el-table-column prop="refundReason" label="退款理由" width="120" show-overflow-tooltip />
<el-table-column prop="remark" label="备注" width="150" show-overflow-tooltip />
<el-table-column prop="status" label="订单状态" width="120">
<template #default="scope">
{{
[20, 30, 40].includes(scope.row.status) ? '审核中' :
[22, 32].includes(scope.row.status) ? '审核驳回' :
scope.row.status === 41 ? '退款完成' : scope.row.status
}}
</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 === 20" type="primary" text @click="showAudit(scope.row)">
审核
</el-button>
<el-button v-else type="primary" text @click="showStep(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"
@size-change="handlePageSizeChange" @current-change="handleCurrentChange"
style="margin-top: 1vh;"></el-pagination>
</el-card>
<el-dialog v-model="showAudit2" title="审核" class="audit2" width="35vw" overflow draggable>
<div class="top">
<el-button @click="" class="smallTitle" size="small">退款申请信息</el-button>
<div class="top-item">
<el-text style="width:4vw;" size="small">退款类型</el-text>
<el-select v-model="auditRow.refundModel" size="small" style="width:10vw;" disabled>
<el-option label="全部退款" :value="0"></el-option>
<el-option label="部分退款" :value="1"></el-option>
</el-select>
</div>
<div class="top-item">
<el-text style="width:4vw;" size="small">退款备注</el-text>
<el-input v-model="auditRow.refundReason" placeholder="请输入退款备注" size="small" style="width:10vw;"
:rows="3" maxlength="100" show-word-limit type="textarea" disabled />
</div>
</div>
<el-button @click="" class="smallTitle" size="small">原订单信息</el-button>
<div class="center">
<div class="center-left">
<div class="center-item">
<el-text style="width:4vw;" size="small">精网号</el-text>
<el-input v-model="auditRow.jwcode" size="small" style="width:10vw;" disabled />
</div>
<div class="center-item">
<el-text style="width:4vw;" size="small">所属地区</el-text>
<el-input v-model="auditRow.marketName" size="small" style="width:10vw;" disabled />
</div>
<div class="center-item">
<el-text style="width:4vw;" size="small">产品名称</el-text>
<el-input v-model="auditRow.goodsName" size="small" style="width:10vw;" disabled />
</div>
<div class="center-item">
<el-text style="width:4vw;" size="small">付款金额</el-text>
<el-input v-model="auditRow.paymentAmount" size="small" style="width:10vw;" disabled />
</div>
<div class="center-item">
<el-text style="width:4vw;" size="small">到账金额</el-text>
<el-input v-model="auditRow.receivedAmount" size="small" style="width:10vw;" disabled />
</div>
<div class="center-item">
<el-text style="width:4vw;" size="small">支付方式</el-text>
<el-input v-model="auditRow.payType" size="small" style="width:10vw;" disabled />
</div>
<div class="center-item">
<el-text style="width:4vw;">转账凭证</el-text>
<img v-if="auditRow.voucher" :src="auditRow.voucher"
style="width: 80px; height: 80px; object-fit: cover;">
<div v-else>
无转账凭证
</div>
</div>
</div>
<div class="center-right">
<div class="right-item">
<el-text style="width:4vw;" size="small">客户姓名</el-text>
<el-input v-model="auditRow.name" size="small" style="width:10vw;" disabled />
</div>
<div class="right-item">
<el-text style="width:4vw;" size="small">活动名称</el-text>
<el-input v-model="auditRow.activity" size="small" style="width:10vw;" disabled />
</div>
<div class="right-item">
<el-text style="width:4vw;" size="small">付款币种</el-text>
<el-input v-model="auditRow.paymentCurrency" size="small" style="width:10vw;" disabled />
</div>
<div class="right-item">
<el-text style="width:4vw;" size="small">到账币种</el-text>
<el-input v-model="auditRow.receivedCurrency" size="small" style="width:10vw;" disabled />
</div>
<div class="right-item">
<el-text style="width:4vw;" size="small">手续费</el-text>
<el-input v-model="auditRow.handlingCharge" size="small" style="width:10vw;" disabled />
</div>
<div class="right-item">
<el-text style="width:4vw;" size="small">付款时间</el-text>
<el-input v-model="auditRow.payTime" size="small" style="width:10vw;" disabled />
</div>
<div class="right-item">
<el-text style="width:4vw;" size="small">提交人</el-text>
<el-input v-model="auditRow.submitterName" size="small" style="width:10vw;" disabled />
</div>
<div class="right-item">
<el-text style="width:4vw;" size="small">到账时间</el-text>
<el-input v-model="auditRow.receivedTime" size="small" style="width:10vw;" disabled />
</div>
<div class="right-item">
<el-text style="width:4vw;" size="small">备注</el-text>
<el-input v-model="auditRow.remark" size="small" style="width:10vw;" :row="3" maxlength="100"
type="textarea" show-word-limit disabled />
</div>
</div>
</div>
<div class="bottom">
<el-button class="smallTitle" size="small" v-show="showReject">驳回信息</el-button>
<div class="bottom-item" v-show="showReject">
<el-text style="width:4vw;" size="small">驳回备注</el-text>
<el-input v-model="addForm.remark" placeholder="请输入驳回备注" size="small" style="width:10vw;" :row="3"
maxlength="100" type="textarea" show-word-limit clearable />
</div>
<div style="text-align: center;" v-show="!showReject">
<el-button type="default" @click="showReject = true">驳回</el-button>
<el-button type="primary" @click="handlePass">通过</el-button>
</div>
<div style="text-align: center;" v-show="showReject">
<el-button type="default" @click="hideReject">取消</el-button>
<el-button type="primary" @click="handleReject">确定</el-button>
</div>
</div>
</el-dialog>
<el-dialog v-model="showSteps" title="退款进度" overflow draggable width="1206px" height="506px" :style="{
backgroundImage: 'url(/src/assets/images/背景图.png)',
backgroundSize: 'cover',
backgroundPosition: 'center'
}">
<div class="steps">
<div class="steps-content">
<el-steps :active="currentStep" align-center>
<el-step>
<template #title>
<div>
提交人<br>{{ submitterName || '未知提交人' }}
</div>
</template>
<template #icon>
<img src="@/assets/images/已审核.png" alt="已完成">
</template>
</el-step>
<el-step>
<template #title>
<div>
地区财务<br>{{ areaFinance || '未记录审核人' }}
</div>
</template>
<template #icon>
<img v-if="currentStep === 12" src="@/assets/images/已驳回.png" alt="已驳回">
<img v-else-if="currentStep === 2" src="@/assets/images/待审核.png" alt="待审核">
<img v-else-if="currentStep > 2 && currentStep < 7" src="@/assets/images/已审核.png" alt="已审核">
<img v-else src="@/assets/images/还没传到.png" alt="未开始">
</template>
</el-step>
<el-step>
<template #title>
<div>
地区负责人<br>{{ areaCharge || '未记录审核人' }}
</div>
</template>
<template #icon>
<img v-if="currentStep === 22" src="@/assets/images/已驳回.png" alt="已驳回">
<img v-else-if="currentStep === 3" src="@/assets/images/待审核.png" alt="待审核">
<img v-else-if="currentStep > 3 && currentStep < 7" src="@/assets/images/已审核.png" alt="已审核">
<img v-else src="@/assets/images/还没传到.png" alt="未开始">
</template>
</el-step>
<el-step>
<template #title>
<div>
总部财务<br>{{ headFinance || '未记录审核人' }}
</div>
</template>
<template #icon>
<img v-if="currentStep === 32" src="@/assets/images/已驳回.png" alt="已驳回">
<img v-else-if="currentStep === 4" src="@/assets/images/待审核.png" alt="待审核">
<img v-else-if="currentStep > 4 && currentStep < 7" src="@/assets/images/已审核.png" alt="已审核">
<img v-else src="@/assets/images/还没传到.png" alt="未开始">
</template>
</el-step>
<el-step>
<template #title>
<div>
指定执行人<br>{{ executor || '未记录执行人' }}
</div>
</template>
<template #icon>
<img v-if="currentStep === 5" src="@/assets/images/待审核.png" alt="待处理">
<img v-else-if="currentStep === 6" src="@/assets/images/已审核.png" alt="已完成">
<img v-else src="@/assets/images/还没传到.png" alt="未开始">
</template>
</el-step>
</el-steps>
</div>
<div class="steps-btn">
<el-button type="primary" @click="showSteps = false">确定</el-button>
</div>
</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, hasMenuPermission } from "@/utils/menuTreePermission.js"
const currentStep = ref(0)// 进度图
const searchForm = ref({
jwcode: '',
markets: []
})
const isReject = ref(false)// 进度图有没有驳回状态
const addForm = ref({
remark: ''
})
const showReject = ref(false)
const auditRow = ref({})// 审核回显
const dateRange = ref([])
const pagination = ref({
pageNum: 1,
pageSize: 50,
total: 0
})
const market = ref([])
const showAudit2 = ref(false)
const tableData = ref([])
const showSteps = ref(false)
const submitterName = ref('')// 提交人
const areaFinance = ref('')// 地区财务
const areaCharge = ref('')// 地区负责人
const headFinance = ref('')// 总部财务
const executor = ref('')// 指定执行人
const uploadRef = ref(null)
const statusStepMap = {
10: [2, false],
12: [12, true],
20: [3, false],
22: [22, true],
30: [4, false],
32: [32, true],
40: [5, false],
41: [6, false]
}
const currencies = ref([
{
value: '新币',
label: '新币'
},
{
value: '港币',
label: '港币'
},
{
value: '马币',
label: '马币'
},
{
value: '加币',
label: '加币'
},
{
value: '泰铢',
label: '泰铢'
},
{
value: '越南盾',
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 statusList = ref([
{
value: 20,
label: '待审核',
},
{
value: '审核通过',
label: '审核通过'
},
{
value: '审核驳回',
label: '审核驳回'
},
{
value: 41,
label: '退款完成'
}
])
// 查全部
const getRefund = async function () {
if (!hasMenuPermission(menuTree.value, permissionMapping.refundChargeShow)) {
ElMessage.error('无此权限')
return
}
try {
searchForm.value.statuses = [20, 22, 30, 32, 40, 41] // 看不到进度没到这里的
if (searchForm.value.statuses === '审核通过') {
statuses = [30, 40]
} else if (searchForm.value.statuses === '审核驳回') {
statuses = [22, 32]
}
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
}
}
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 handlePass = async function () {
if (!hasMenuPermission(menuTree.value, permissionMapping.refundChargeAudit)) {
ElMessage.error('无此权限')
return
}
try {
const params = {
id: auditRow.value.id,
status: 30,
rejectReason: addForm.value.remark,
areaCharge: adminData.value.adminName,
auditId: auditRow.value.auditId
}
const result = await API({
url: '/Money/review',
data: params
})
if (result.code === 200) {
ElMessage.success('审核通过')
showAudit2.value = false
getRefund()
}
} catch (error) {
ElMessage.error(error.message || '审核失败')
}
}
// 审核驳回
const handleReject = async function () {
if (!hasMenuPermission(menuTree.value, permissionMapping.refundChargeAudit)) {
ElMessage.error('无此权限')
return
}
try {
const params = {
id: auditRow.value.id,
status: 22,
rejectReason: addForm.value.remark,
areaCharge: adminData.value.adminName,
auditId: auditRow.value.auditId,
orderCode:auditRow.value.orderCode
}
const result = await API({
url: '/Money/review',
data: params
})
if (result.code === 200) {
ElMessage.success('审核驳回')
showAudit.value = false
getRefund()
addForm.value.remark = ''
showReject.value = false
}
} catch (error) {
ElMessage.error(error.message || '审核失败')
}
}
const showStep = function (row) {
if (!hasMenuPermission(menuTree.value, permissionMapping.refundFinanceProgShow)) {
ElMessage.error('无此权限')
return
}
isReject.value = false
submitterName.value = row.areaServise || ''
areaFinance.value = row.areaFinance || ''
areaCharge.value = row.areaCharge || ''
headFinance.value = row.headFinance || ''
executor.value = row.executorName || ''
currentStep.value = 1
const status = row.status
if (statusStepMap[status]) {
const [step, reject] = statusStepMap[status]
currentStep.value = step
isReject.value = reject
}
console.log('步骤条状态',currentStep.value)
showSteps.value = true
}
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 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.id,
label: child.name,
children: grandchildren
};
});
};
market.value = transformTree(result.data)
console.log('转换后的地区树==============', market.value)
} catch (error) {
console.log('请求失败', error)
}
}
const hideReject = function () {
showReject.value = false
addForm.value.remark = ''
}
const reset = function () {
searchForm.value = {
jwcode: '',
market: searchForm.value.market,
statuses: searchForm.value.statuses
}
dateRange.value = []
getRefund()
}
const showAudit = function (row) {
auditRow.value = row
showAudit2.value = true
}
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();
}
onMounted(() => {
getRefund()
getMarket()
})
</script>
<style scoped lang="scss">
: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;
}
.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;
}
}
.audit1 {
height: 47vh;
.audit-item {
display: flex;
align-items: center;
margin-bottom: 1vh;
}
}
.audit2 {
display: flex;
justify-content: center;
height:auto;
min-height:40vh;
.top {
width: 30vw;
height: 17vh;
.top-item {
display: flex;
align-items: center;
margin-bottom: 1vh;
}
}
.smallTitle {
background-color: white;
color: rgb(64, 158, 255);
border-color: rgb(64, 158, 255);
margin-bottom: 0.5vh;
}
.center {
display: flex;
width: 30vw;
height: 35vh;
.dialog-item {
display: flex;
align-items: center;
margin-bottom: 1vh;
}
.center-left {
width: 60%;
height: 35vh;
.image {
width: 4vw !important;
height: 4vw !important;
}
:deep(.el-upload--picture-card) {
width: 4vw !important;
height: 4vw !important;
padding: 0 !important;
}
.center-item {
display: flex;
align-items: center;
margin-bottom: 1vh;
}
}
.center-right {
height: 35vh;
.right-item {
display: flex;
align-items: center;
margin-bottom: 1vh;
}
}
}
.bottom {
width: 30vw;
height: 12vh;
.bottom-item {
display: flex;
align-items: center;
margin-bottom: 1vh;
}
}
}
.steps {
.steps-content {
padding-top: 15vw;
}
.steps-status {
display: flex;
align-items: center;
justify-content: center;
}
.steps-btn {
height: 15vh;
display: flex;
justify-content: center;
align-items: center;
}
}
</style>