huangqizhen
/
gold-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

现金权限

lihuilin/feature-20250923114949-现金
lihuilin 11 hours ago
parent
35a1c187a6
commit
36dd8634bd
8 changed files with 2268 additions and 842 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 25
      src/router/index.js
  2. 50
      src/utils/menuTreePermission.js
  3. 11
      src/utils/menuUtils.js
  4. 22
      src/views/moneyManage/executor/executor.vue
  5. 725
      src/views/moneyManage/refundDetail/refundArea.vue
  6. 878
      src/views/moneyManage/refundDetail/refundDetail.vue
  7. 762
      src/views/moneyManage/refundDetail/refundHeader.vue
  8. 629
      src/views/moneyManage/refundDetail/refundService.vue

25
src/router/index.js
View File

@ -315,9 +315,32 @@ const routes = [
{
path: 'refundDetail',
name: "refundDetail",
component: () => import("../views/moneyManage/refundDetail/refundDetail.vue"),
//component: () => import("../views/moneyManage/refundDetail/refundDetail.vue"),
meta: { permissionId: 75 },
children:[
// 客服页面
{
path: 'service',
name: "refundService",
component: () => import("../views/moneyManage/refundDetail/refundService.vue"),
meta: { permissionId: 75 }
},
// 地区财务及地区负责人页面
{
path: 'refundArea',
name: "refundArea",
component: () => import("../views/moneyManage/refundDetail/refundArea.vue"),
meta: { permissionId: 75 }
},
//总部管理员及财务
{
path: 'refundHeader',
name: "refundHeader",
component: () => import("../views/moneyManage/refundDetail/refundHeader.vue"),
meta: { permissionId: 75 }
},
]
},
// 执行明细
{
path: 'executor',

50
src/utils/menuTreePermission.js
View File

@ -16,6 +16,10 @@ export const permissionMapping = {
permissionManage:11, // 权限管理
historyData:12, // 历史数据查询
receiveDetail:74, // 收款明细
refundDetail:75, // 退款明细
executor:76, // 执行明细
// 页面，3级
workbenchShow:13, // 工作台查看
coinAudit:14, // 金币审核
@ -33,6 +37,14 @@ export const permissionMapping = {
newCoinSelect:26, // 金币查询(新)
oldCoinSelect:27, // 金币查询(旧)
receiveService:77, // 收款-地区客服
receiveArea:78, // 收款-地区财务/负责人
receiveHeader:79, // 收款-总部财务/管理员
refundService:80, // 退款-地区客服
refundFinance:81, // 退款-地区财务
refundCharge:82, // 退款-地区负责人
refundHeader:83, // 退款-总部财务/管理员
// 功能，4级
rechargeAudit:28, // 充值审核
refundAudit:29, // 退款审核
@ -89,9 +101,41 @@ export const permissionMapping = {
addRoleInfo:71, // 新增角色信息
editRoleInfo:72, // 编辑角色信息
receiveDetail:74, // 收款明细
refundDetail:75, // 退款明细
executor:76, // 执行明细
executeEdit:84, // 执行明细编辑
executeSubmit:85, // 执行明细提交
receiveServiceShow:86, // 收款-客服展示
receiveServiceAdd:87, // 收款-客服新增
receiveServiceReturn:88, // 收款-客服撤回
receiveServiceEdit:89, // 收款-客服编辑
receiveServiceRefund:90, // 收款-客服退款
receiveAreaWaiting:91, // 收款-地区财务/负责人待审核
receiveAreaPass:92, // 收款-地区财务/负责人已通过
receiveAreaReject:93, // 收款-地区财务/负责人已驳回
receiveAreaWaitingShow:94, // 收款-地区财务/负责人待审核查看
receiveAreaApproved:95, // 收款-地区财务/负责人通过
receiveAreaRejected:96, // 收款-地区财务/负责人驳回
receiveAreaPassShow:97, // 收款-地区财务/负责人已通过查看
receiveAreaPassEdit:98, // 收款-地区财务/负责人已通过编辑
receiveHeaderPassShow:99, // 收款-总部财务/管理员已通过
receiveHeaderPassShow:100, // 收款-总部财务/管理员已通过查看
receiveHeaderPassEdit:101, // 收款-总部财务/管理员已通过编辑
refundServiceShow:102, // 退款-客服查看
refundServiceBack:103, // 退款-客服撤回
refundServiceEdit:104, // 退款-客服编辑
refundFinanceShow:105, // 退款-地区财务查看
refundFinanceAudit:106, // 退款-地区财务审核
refundFinanceProgShow:107, // 退款-地区财务进度查看
refundChargeShow:108, // 退款-地区负责人查看
refundChargeAudit:109, // 退款-地区负责人审核
refundChargeProgShow:110, // 退款-地区负责人进度查看
refundHeaderShow:111, // 退款-总部财务/管理员查看
refundHeaderAudit:112, // 退款-总部财务/管理员审核
refundHeaderProgShow:113, // 退款-总部财务/管理员进度查看
// 特殊，5级
updateData:114, // 手动拉取数据
}
// 递归查找菜单中是否存在目标id

11
src/utils/menuUtils.js
View File

@ -79,8 +79,17 @@ export const getRoutePath = (menu) => {
'用户管理': '/permissions/userPermission',
'角色管理': '/permissions/rolePermission',
'收款明细': '/moneyManage/receiveDetail',
'收款明细': '/moneyManage/receiveMoney',
'收款-地区客服':'/moneyManage/receiveMoney/receiveService',
'收款-地区财务/负责人':'/moneyManage/receiveMoney/receiveArea',
'收款-总部财务/管理员':'/moneyManage/receiveMoney/receiveHeader',
'退款明细': '/moneyManage/refundDetail',
'退款-地区客服':'/moneyManage/refundDetail/refundService',
'退款-地区财务':'/moneyManage/refundDetail/refundFinance',
'退款-地区负责人':'/moneyManage/refundDetail/refundCharge',
'退款-总部财务/管理员':'/moneyManage/refundDetail/refundHeader',
'执行明细': '/moneyManage/executor',
};

22
src/views/moneyManage/executor/executor.vue
View File

@ -3,23 +3,23 @@
<div class="condition1">
<div class="condition-item">
<el-text size="large" style="width:4vw;">姓名</el-text>
<el-input v-model="searchForm.username" placeholder="请输入姓名" style="width:10vw;" clearable />
<el-input v-model="searchForm.username" placeholder="请输入姓名" style="width:9vw;" clearable />
</div>
<div class="condition-item">
<el-text size="large" style="width:4vw;">精网号</el-text>
<el-input v-model="searchForm.jwcode" placeholder="请输入精网号" style="width:10vw;" clearable />
<el-input v-model="searchForm.jwcode" placeholder="请输入精网号" style="width:9vw;" clearable />
</div>
<div class="condition-item">
<el-text size="large" style="width:4vw;">所属地区</el-text>
<el-input v-model="searchForm.area" placeholder="请输入所属地区" style="width:10vw;" clearable />
<el-input v-model="searchForm.area" placeholder="请输入所属地区" style="width:9vw;" clearable />
</div>
<div class="condition-item2">
<div class="condition-item">
<el-text size="large" style="width:4vw;">产品名称</el-text>
<el-input v-model="searchForm.productName" placeholder="请输入产品名称" style="width:10vw;" clearable />
<el-input v-model="searchForm.productName" placeholder="请输入产品名称" style="width:9vw;" clearable />
</div>
<div class="condition-item">
<el-text size="large" style="width:4vw;">退款币种</el-text>
<el-select v-model="searchForm.payType" style="width:10vw;">
<el-select v-model="searchForm.payType" style="width:9vw;">
<el-option v-for="item in payments" :key="item" :label="item" :value="item" />
</el-select>
</div>
@ -27,16 +27,16 @@
<div class="condition1">
<div class="condition-item2">
<el-text size="large" style="width:4vw;">退款途径</el-text>
<el-select v-model="searchForm.auditStatus" style="width:10vw;">
<el-select v-model="searchForm.auditStatus" style="width:9vw;">
<el-option v-for="item in auditStatusOptions" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</div>
<div class="condition-item2">
<el-text size="large" style="width:4vw;">订单状态</el-text>
<el-input v-model="searchForm.productName" placeholder="请输入订单状态" style="width:10vw;" clearable />
<el-input v-model="searchForm.productName" placeholder="请输入订单状态" style="width:9vw;" clearable />
</div>
<div class="condition-item2" style="width: 30vw;">
<div class="condition-item2" 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"
@ -231,7 +231,7 @@ const editForm = ref({
height: 4vh;
.condition-item {
width: 19%;
width: 18%;
display: flex;
align-items: center;
margin-bottom: 1vh;
@ -239,7 +239,7 @@ const editForm = ref({
}
.condition-item2 {
width: 19%;
width: 18%;
display: flex;
align-items: center;
margin-right: 0.5vw;

725
src/views/moneyManage/refundDetail/refundArea.vue
View File

@ -0,0 +1,725 @@
<!-- 各地财务&各地负责人 -->
<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;">订单状态</el-text>
<el-select v-model="searchForm.status" 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.payCurrency" 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;" @change="handleDatePickerChange"
:disabled-date="disabledDate" />
</div>
<div>
<el-button type="success">重置</el-button>
<el-button type="primary">查询</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="showAudit1 = true">审核1</el-button>
<el-button type="primary" @click="showAudit2 = true">审核2</el-button>
<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="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="refundType" label="产品名称" width="120" />
<el-table-column prop="refundType" label="产品数量" width="120" />
<el-table-column prop="refundType" label="退款方式" width="120" />
<el-table-column prop="refundType" label="提交人" width="120" />
<el-table-column prop="refundType" label="退款理由" width="120" />
<el-table-column prop="remark" label="备注" width="150" show-overflow-tooltip />
<el-table-column prop="adminName" label="订单状态" width="120" />
<el-table-column prop="operation" label="操作" fixed="right" width="150px" >
<template #default="scope">
<div class="operation">
<el-button v-if="row.status === '待审核'" type="primary" text @click="showAudit1 = true">
审核
</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="showAudit1" title="审核" overflow draggable width="20vw">
<div class="audit1">
<div class="audit-item">
<el-text style="width:4vw;">精网号</el-text>
<el-input v-model="addForm.jwcode" placeholder="请输入精网号" style="width:10vw;" clearable />
</div>
<div class="audit-item">
<el-text style="width:4vw;">姓名</el-text>
<el-input v-model="addForm.name" placeholder="请输入客户姓名" style="width:10vw;" clearable />
</div>
<div class="audit-item">
<el-text style="width:4vw;">所属地区</el-text>
<el-input v-model="addForm.market" placeholder="请输入所属地区" style="width:10vw;" clearable />
</div>
<div class="audit-item">
<el-text style="width:4vw;">活动名称</el-text>
<el-input v-model="addForm.orderCode" placeholder="请输入活动名称" style="width:10vw;" clearable />
</div>
<div class="audit-item">
<el-text style="width:4vw;">产品名称</el-text>
<el-input v-model="addForm.orderCode" placeholder="请输入活动名称" style="width:10vw;" clearable />
</div>
<div class="audit-item">
<el-text style="width:4vw;">付款币种</el-text>
<el-input v-model="addForm.refundAmount" placeholder="请输入付款金额" style="width:10vw;" clearable />
</div>
<div class="audit-item">
<el-text style="width:4vw;">付款金额</el-text>
<el-input v-model="addForm.refundAmount" placeholder="请输入付款金额" style="width:10vw;" clearable />
</div>
<div class="audit-item">
<el-text style="width:4vw;">支付方式</el-text>
<el-input v-model="addForm.refundAmount" placeholder="请输入付款金额" style="width:10vw;" clearable />
</div>
<div class="audit-item">
<el-text style="width:4vw;">付款时间</el-text>
<el-input v-model="addForm.refundAmount" placeholder="请输入付款金额" style="width:10vw;" clearable />
</div>
<div class="audit-item">
<el-text style="width:4vw;">银行流水订单号</el-text>
<el-input v-model="addForm.refundAmount" placeholder="请输入付款金额" style="width:10vw;" clearable />
</div>
</div>
<div style="display:flex;justify-content: center;">
<el-button type="primary" @click="">驳回</el-button>
<el-button type="primary" @click="">通过</el-button>
</div>
</el-dialog>
<el-dialog v-model="showAudit2" title="审核" class="audit2" 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-input v-model="auditForm.refundType" placeholder="请输入退款类型" size="small" style="width:10vw;"
clearable></el-input>
</div>
<div class="top-item">
<el-text style="width:4vw;" size="small">退款金额</el-text>
<el-input v-model="auditForm.refundAmount" placeholder="请输入退款金额" size="small" style="width:10vw;"
clearable></el-input>
</div>
<div class="top-item">
<el-text style="width:4vw;" size="small">退款备注</el-text>
<el-input v-model="auditForm.refundReason" placeholder="请输入退款备注" size="small" style="width:10vw;"
:rows="3" maxlength="100" show-word-limit type="textarea" />
</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="addForm.jwcode" placeholder="请输入精网号" size="small" style="width:10vw;"
clearable />
</div>
<div class="center-item">
<el-text style="width:4vw;" size="small">所属地区</el-text>
<el-input v-model="addForm.name" placeholder="请输入所属地区" size="small" style="width:10vw;" clearable />
</div>
<div class="center-item">
<el-text style="width:4vw;" size="small">产品名称</el-text>
<el-input v-model="addForm.productName" placeholder="请输入产品名称" size="small" style="width:10vw;"
clearable />
</div>
<div class="center-item">
<el-text style="width:4vw;" size="small">付款金额</el-text>
<el-input v-model="addForm.orderCode" placeholder="请输入付款金额" size="small" style="width:10vw;"
clearable />
</div>
<div class="center-item">
<el-text style="width:4vw;" size="small">到账金额</el-text>
<el-input v-model="addForm.orderCode" placeholder="请输入到账金额" size="small" style="width:10vw;"
clearable />
</div>
<div class="center-item">
<el-text style="width:4vw;" size="small">支付方式</el-text>
<el-input v-model="addForm.refundAmount" placeholder="请输入支付方式" size="small" style="width:10vw;"
clearable />
</div>
<!-- <div class="center-item">
<el-text style="width:4vw;" size="small">提交人</el-text>
<el-input v-model="addForm.refundAmount" placeholder="请输入付款金额" size="small" style="width:10vw;"
clearable />
</div> -->
<div class="center-item">
<el-text style="width:3vw;padding-right: 1vw;" size="small">银行流水订单号</el-text>
<el-input size="small" v-model="addForm.bankOrderNo" placeholder="请输入银行流水订单号" style="width:10vw;"
clearable />
</div>
<div class="center-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" :http-request="customUpload"
list-type="picture-card" :on-change="handleImageChange" class="image"
:on-success="handleUploadSuccess" :on-error="handleUploadError"
:before-upload="beforeUpload" :show-file-list="false">
<template #default>
<img v-if="addForm.imageUrl" :src="addForm.imageUrl"
style="width: 100%; height: 100%; object-fit: cover;">
<el-icon v-else>
<Plus />
</el-icon>
</template>
</el-upload>
</el-form-item>
</div>
</div>
<div class="center-right">
<div class="right-item">
<el-text style="width:4vw;" size="small">客户姓名</el-text>
<el-input v-model="addForm.customerName" placeholder="请输入客户姓名" size="small" style="width:10vw;"
clearable />
</div>
<div class="right-item">
<el-text style="width:4vw;" size="small">活动名称</el-text>
<el-input v-model="addForm.activityName" placeholder="请输入活动名称" size="small" style="width:10vw;"
clearable />
</div>
<div class="right-item">
<el-text style="width:4vw;" size="small">付款币种</el-text>
<el-input v-model="addForm.paymentCurrency" placeholder="请输入付款币种" size="small" style="width:10vw;"
clearable />
</div>
<div class="right-item">
<el-text style="width:4vw;" size="small">到账币种</el-text>
<el-input v-model="addForm.receiveCurrency" placeholder="请输入到账币种" size="small" style="width:10vw;"
clearable />
</div>
<div class="right-item">
<el-text style="width:4vw;" size="small">手续费</el-text>
<el-input v-model="addForm.fee" placeholder="请输入手续费" size="small" style="width:10vw;" clearable />
</div>
<div class="right-item">
<el-text style="width:4vw;" size="small">付款时间</el-text>
<el-input v-model="addForm.paymentTime" placeholder="请输入付款时间" size="small" style="width:10vw;"
clearable />
</div>
<div class="right-item">
<el-text style="width:4vw;" size="small">提交人</el-text>
<el-input v-model="addForm.submitUser" placeholder="请输入提交人" size="small" style="width:10vw;"
clearable />
</div>
<div class="right-item">
<el-text style="width:4vw;" size="small">到账时间</el-text>
<el-input v-model="addForm.receiveTime" placeholder="请输入到账时间" size="small" style="width:10vw;"
clearable />
</div>
<div class="right-item">
<el-text style="width:4vw;" size="small">备注</el-text>
<el-input v-model="addForm.remark" placeholder="请输入备注" size="small" style="width:10vw;" :row="3"
clearable />
</div>
</div>
</div>
<el-button @click="" class="smallTitle" size="small">转交信息</el-button>
<div class="bottom">
<div class="bottom-item">
<el-text style="width:4vw;" size="small">执行人</el-text>
<el-select v-model="addForm.executor" size="small" placeholder="请选择执行人" style="width:10vw;">
<el-option v-for="item in executor" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</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 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>
</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 searchForm = ref({
jwcode: ''
})
const addForm = ref({
jwcode: ''
})
const auditForm = ref({
refundType: ''
})
const pagination = ref({
pageNum: 1,
pageSize: 50,
total: 0
})
const tableData = ref([])
const showAudit1 = ref(false)
const showAudit2 = ref(false)
const showSteps = ref(false)
const uploadRef = ref(null)
const showError = ref(false)
const executor = ref([
{
value: '1',
label: '亲爱的佳丽老师'
},
{
value: '2',
label: '张三'
},
{
value: '3',
label: '李四'
},
{
value: '4',
label: '王五'
},
{
value: '5',
label: '赵六'
},
{
value: '6',
label: '弘历黄总'
}
])
const products = ref([
{
value: '1',
label: '产品1'
},
{
value: '2',
label: '产品2'
}
])
const currencies = ref([
{
value: 'CNY',
label: '人民币'
},
{
value: 'USD',
label: '美元'
}
])
const payments = 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: '10',
label: '地区财务待审核'
},
{
value: '12',
label: '地区财务驳回'
},
{
value: '20',
label: '地区负责人待审核'
},
{
value: '22',
label: '地区负责人驳回'
},
{
value: '30',
label: '总部财务待审核'
},
{
value: '32',
label: '总部财务驳回'
},
{
value: '40',
label: '执行人待处理'
},
{
value: '41',
label: '退款完成'
}
])
// 查全部
const getRefund = async function () {
try {
const params = {
cashCollection: {
status: null,
//10：地区财务待审核；12：地区财务驳回；
// 20：地区负责人待审核；22：地区负责人驳回；
// 30：总部财务待审核；32：总部财务驳回；
// 40：执行人待处理；41：执行人已处理，退款完成；
orderCode: null,//订单号
name: null,//姓名
jwcode: null,//精网号
market: null,//地区
goodsName: null,//商品名
refundModel: null,//退款类型,
startTime: "",
endTime: ""
}
}
const result = await API({
url: '/hljw/api/refund/query',
method: 'POST',
data: params
})
tableData.value = result.data || []
} catch (error) {
ElMessage.error(error.message || '查询失败')
}
}
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 handleUploadSuccess = (response, file, fileList) => {
try {
addForm.value.imageUrl = response.data.url
console.log('==========================', response.data.url)
} catch (error) {
console.log('看看报错信息', error)
ElMessage.error(response.data.msg || '图片上传失败')
}
}
const handleUploadError = (error) => {
console.error('上传失败:', error)
addForm.value.imageUrl = null
ElMessage.error('图片上传失败，请重试')
}
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) {
handleUploadSuccess(response, options.file, [options.file])
ElMessage.success(response.msg || '上传成功')
} else {
ElMessage.error(response.msg || '上传失败')
}
} catch (error) {
console.error('上传错误:', error)
ElMessage.error(`上传失败: ${error.msg || error.message || '网络异常'}`)
}
}
onMounted(() => {
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;
}
}
.audit1 {
height: 47vh;
.audit-item {
display: flex;
align-items: center;
margin-bottom: 1vh;
}
}
.audit2 {
width: 30vw;
height: auto;
.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: 41vh;
.dialog-item {
display: flex;
align-items: center;
margin-bottom: 1vh;
}
.center-left {
width: 60%;
.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 {
.right-item {
display: flex;
align-items: center;
margin-bottom: 1vh;
}
}
}
.bottom {
width: 30vw;
height: 5vh;
.bottom-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;
}
}
</style>

878
src/views/moneyManage/refundDetail/refundDetail.vue
View File

@ -1,837 +1,71 @@
<template>
<el-card style="margin-bottom: 0.5vh;">
<div class="condition1">
<div class="condition-item">
<el-text size="large" style="width:4vw;">精网号</el-text>
<el-input v-model="searchForm.jwcode" placeholder="请输入精网号" style="width:10vw;" clearable />
</div>
<div class="condition-item">
<el-text size="large" style="width:4vw;">客户姓名</el-text>
<el-input v-model="searchForm.username" placeholder="请输入客户姓名" style="width:10vw;" clearable />
</div>
<div class="condition-item">
<el-text size="large" style="width:4vw;">所属地区</el-text>
<el-input v-model="searchForm.area" placeholder="请输入所属地区" style="width:10vw;" clearable />
</div>
<div class="condition-item">
<el-text size="large" style="width:4vw;">提交人</el-text>
<el-input v-model="searchForm.adminName" placeholder="请输入提交人" style="width:10vw;" clearable />
</div>
<div class="condition-item">
<el-text size="large" style="width:4vw;">支付方式</el-text>
<el-select v-model="searchForm.payType" style="width:10vw;">
<el-option v-for="item in payments" :key="item" :label="item" :value="item" />
</el-select>
</div>
</div>
<div class="condition1">
<div class="condition-item2">
<el-text size="large" style="width:4vw;">活动名称</el-text>
<el-input v-model="searchForm.activity" placeholder="请输入活动名称" style="width:10vw;" clearable />
</div>
<div class="condition-item2">
<el-text size="large" style="width:4vw;">产品名称</el-text>
<el-input v-model="searchForm.productName" placeholder="请输入产品名称" style="width:10vw;" clearable />
</div>
<div class="condition-item2" style="width: 30vw;">
<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" />
</div>
<div>
<el-button type="success">重置</el-button>
<el-button type="primary">查询</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="showAdd = true">地区客服编辑</el-button>
<el-button type="primary" @click="showAudit1 = true">审核1</el-button>
<el-button type="primary" @click="showAudit2 = true">审核2</el-button>
<el-button type="primary" @click="showSteps = true">看看步骤条</el-button>
<el-button type="primary" @click="showBack = 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="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="orderCode" label="活动名称" width="120px" show-overflow-tooltip />
<el-table-column prop="refundType" label="产品名称" width="120" />
<el-table-column prop="refundType" label="退款类型" width="120" />
<el-table-column prop="refundType" label="提交人" width="120" />
<el-table-column prop="refundType" label="退款理由" width="120" />
<el-table-column prop="refundType" label="付款币种" width="120" />
<el-table-column prop="refundType" label="付款金额" width="120" />
<el-table-column prop="refundType" label="支付方式" width="120" />
<el-table-column prop="refundType" label="付款时间" width="120" />
<el-table-column prop="refundType" label="转账凭证" width="120" />
<el-table-column prop="remark" label="备注" width="150" show-overflow-tooltip />
<el-table-column prop="adminName" label="订单状态" width="120" />
<el-table-column prop="operation" label="操作" fixed="right" width="150px">
<template #default="scope">
<div class="operation">
<el-popconfirm title="确定要通过此条记录吗？" @confirm="handleApprove(scope.row)">
<template #reference>
<el-button v-if="hasrefundWaitThough" :disabled="clicked || cancelClicked"
type="primary" text>
通过
</el-button>
</template>
<template #actions="{ confirm, cancel }">
<el-button size="small" @click="cancel">取消</el-button>
<el-button type="primary" size="small" :disabled="clicked" @click="confirm">
确认
</el-button>
</template>
</el-popconfirm>
<el-button v-if="hasrefundWaitReject" :disabled="clicked || cancelClicked" type="primary" text
@click="showRejectDialog(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="showAdd" title="退款" class="addDialog" 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="addForm.jwcode" placeholder="请输入精网号" style="width:10vw;" clearable />
</div>
<div class="dialog-item">
<el-text style="width:4vw;">客户姓名</el-text>
<el-input v-model="addForm.name" placeholder="请输入客户姓名" style="width:10vw;" clearable />
</div>
<div class="dialog-item">
<el-text style="width:4vw;">所属地区</el-text>
<el-input v-model="addForm.market" placeholder="请输入所属地区" style="width:10vw;" clearable />
</div>
<div class="dialog-item">
<el-text style="width:4vw;">活动名称</el-text>
<el-input v-model="addForm.orderCode" placeholder="请输入活动名称" style="width:10vw;" clearable />
</div>
<div class="dialog-item">
<el-text style="width:4vw;">产品名称</el-text>
<el-select v-model="addForm.refundType" placeholder="请选择产品名称" style="width:10vw;" clearable>
<el-option v-for="item in products" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
<div class="dialog-item">
<el-text style="width:4vw;">付款币种</el-text>
<el-select v-model="addForm.refundCurrency" placeholder="请选择付款币种" style="width:10vw;" clearable>
<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="addForm.refundAmount" placeholder="请输入付款金额" style="width:10vw;" clearable />
</div>
<div class="dialog-item">
<el-text style="width:4vw;">支付方式</el-text>
<el-select v-model="addForm.paymentMethod" placeholder="请选择支付方式" style="width:10vw;">
<el-option v-for="item in payments" :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="addForm.paymentTime" type="datetime" placeholder="请选择付款时间" />
</div>
<div class="dialog-item">
<el-text style="width:4vw;">转账凭证</el-text>
<el-form-item :rules="{ required: true, message: '请上传图片', trigger: 'change' }">
<el-upload ref="uploadRef" list-type="picture-card" :auto-upload="false"
:http-request="customUpload" :on-change="handleImageChange"
:on-success="handleUploadSuccess" :on-error="handleUploadError"
:before-upload="beforeUpload" :show-file-list="false">
<template #default>
<img v-if="addForm.imageUrl" :src="addForm.imageUrl"
style="width: 100%; height: 100%; object-fit: cover;">
<el-icon v-else>
<Plus />
</el-icon>
</template>
</el-upload>
</el-form-item>
</div>
<div class="dialog-item">
<el-text style="width:4vw;">备注</el-text>
<el-input v-model="addForm.remark" placeholder="请输入备注" style="width:10vw;" :rows="3" type="textarea" maxLength="100" clearable />
</div>
</div>
<div class="right">
<div class="dialog-item">
<el-text style="width:4vw;">退款模式</el-text>
<el-radio-group v-model="addForm.refundMode">
<el-radio value="1">全部退款</el-radio>
<el-radio value="2">部分退款</el-radio>
</el-radio-group>
</div>
<div class="dialog-item">
<el-text style="width:4vw;">退款理由</el-text>
<el-input v-model="addForm.refundReason" placeholder="请输入退款理由" 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="">重置</el-button>
<el-button type="primary" @click="">提交</el-button>
</div>
</div>
</div>
</el-dialog>
<el-dialog v-model="showAudit1" title="审核" overflow draggable width="20vw">
<div class="audit1">
<div class="dialog-item">
<el-text style="width:4vw;">精网号</el-text>
<el-input v-model="addForm.jwcode" placeholder="请输入精网号" style="width:10vw;" clearable />
</div>
<div class="dialog-item">
<el-text style="width:4vw;">姓名</el-text>
<el-input v-model="addForm.name" placeholder="请输入客户姓名" style="width:10vw;" clearable />
</div>
<div class="dialog-item">
<el-text style="width:4vw;">所属地区</el-text>
<el-input v-model="addForm.market" placeholder="请输入所属地区" style="width:10vw;" clearable />
</div>
<div class="dialog-item">
<el-text style="width:4vw;">活动名称</el-text>
<el-input v-model="addForm.orderCode" placeholder="请输入活动名称" style="width:10vw;" clearable />
</div>
<div class="dialog-item">
<el-text style="width:4vw;">商品名称</el-text>
<el-input v-model="addForm.orderCode" placeholder="请输入活动名称" style="width:10vw;" clearable />
</div>
<div class="dialog-item">
<el-text style="width:4vw;">付款币种</el-text>
<el-input v-model="addForm.refundAmount" placeholder="请输入付款金额" style="width:10vw;" clearable />
</div>
<div class="dialog-item">
<el-text style="width:4vw;">付款金额</el-text>
<el-input v-model="addForm.refundAmount" placeholder="请输入付款金额" style="width:10vw;" clearable />
</div>
<div class="dialog-item">
<el-text style="width:4vw;">支付方式</el-text>
<el-input v-model="addForm.refundAmount" placeholder="请输入付款金额" style="width:10vw;" clearable />
</div>
<div class="dialog-item">
<el-text style="width:4vw;">付款时间</el-text>
<el-input v-model="addForm.refundAmount" placeholder="请输入付款金额" style="width:10vw;" clearable />
</div>
<div class="dialog-item">
<el-text style="width:4vw;">银行流水订单号</el-text>
<el-input v-model="addForm.refundAmount" placeholder="请输入付款金额" style="width:10vw;" clearable />
</div>
</div>
<div style="display:flex;justify-content: center;">
<el-button type="primary" @click="">驳回</el-button>
<el-button type="primary" @click="">通过</el-button>
</div>
</el-dialog>
<el-dialog v-model="showAudit2" title="审核" class="audit2" overflow draggable>
<div class="top">
<el-button @click="" class="smallTitle" size="small">退款申请信息</el-button>
<div class="dialog-item">
<el-text style="width:4vw;" size="small">退款类型</el-text>
<el-input v-model="auditForm.refundType" placeholder="请输入退款类型" size="small" style="width:10vw;"
clearable></el-input>
</div>
<div class="dialog-item">
<el-text style="width:4vw;" size="small">退款金额</el-text>
<el-input v-model="auditForm.refundAmount" placeholder="请输入退款金额" size="small" style="width:10vw;"
clearable></el-input>
</div>
<div class="dialog-item">
<el-text style="width:4vw;" size="small">退款备注</el-text>
<el-input v-model="auditForm.refundReason" placeholder="请输入退款备注" size="small" style="width:10vw;"
:rows="3" maxlength="100" show-word-limit type="textarea" />
</div>
</div>
<el-button @click="" class="smallTitle" size="small">原订单信息</el-button>
<div class="center">
<div class="center-left">
<div class="center-audit1">
<div class="dialog-item">
<el-text style="width:4vw;" size="small">精网号</el-text>
<el-input v-model="addForm.jwcode" placeholder="请输入精网号" size="small" style="width:10vw;"
clearable />
</div>
<div class="dialog-item">
<el-text style="width:4vw;" size="small">所属地区</el-text>
<el-input v-model="addForm.name" placeholder="请输入所属地区" size="small" style="width:10vw;"
clearable />
</div>
<div class="dialog-item">
<el-text style="width:4vw;" size="small">产品名称</el-text>
<el-input v-model="addForm.productName" placeholder="请输入产品名称" size="small" style="width:10vw;"
clearable />
</div>
<div class="dialog-item">
<el-text style="width:4vw;" size="small">付款金额</el-text>
<el-input v-model="addForm.orderCode" placeholder="请输入付款金额" size="small" style="width:10vw;"
clearable />
</div>
<div class="dialog-item">
<el-text style="width:4vw;" size="small">到账金额</el-text>
<el-input v-model="addForm.orderCode" placeholder="请输入到账金额" size="small" style="width:10vw;"
clearable />
</div>
<div class="dialog-item">
<el-text style="width:4vw;" size="small">支付方式</el-text>
<el-input v-model="addForm.refundAmount" placeholder="请输入支付方式" size="small" style="width:10vw;"
clearable />
</div>
<div class="dialog-item">
<el-text style="width:4vw;" size="small">付款金额</el-text>
<el-input v-model="addForm.refundAmount" placeholder="请输入付款金额" size="small" style="width:10vw;"
clearable />
</div>
<div class="dialog-item">
<el-text style="width:3vw;padding-right: 1vw;" size="small">银行流水订单号</el-text>
<el-input size="small" v-model="addForm.bankOrderNo" placeholder="请输入银行流水订单号"
style="width:10vw;" clearable />
</div>
<div class="dialog-item">
<el-text style="width:4vw;" size="small">审核人</el-text>
<el-input v-model="addForm.auditUser" placeholder="请输入审核人" size="small" style="width:10vw;"
clearable />
</div>
<div class="dialog-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" :http-request="customUpload"
list-type="picture-card" :on-change="handleImageChange" class="image"
:on-success="handleUploadSuccess" :on-error="handleUploadError"
:before-upload="beforeUpload" :show-file-list="false">
<template #default>
<img v-if="addForm.imageUrl" :src="addForm.imageUrl"
style="width: 100%; height: 100%; object-fit: cover;">
<el-icon v-else class="upload-icon">
<Plus />
</el-icon>
</template>
</el-upload>
</el-form-item>
</div>
</div>
</div>
<div class="center-right">
<div class="dialog-item">
<el-text style="width:4vw;" size="small">客户姓名</el-text>
<el-input v-model="addForm.customerName" placeholder="请输入客户姓名" size="small" style="width:10vw;"
clearable />
</div>
<div class="dialog-item">
<el-text style="width:4vw;" size="small">活动名称</el-text>
<el-input v-model="addForm.activityName" placeholder="请输入活动名称" size="small" style="width:10vw;"
clearable />
</div>
<div class="dialog-item">
<el-text style="width:4vw;" size="small">付款币种</el-text>
<el-input v-model="addForm.paymentCurrency" placeholder="请输入付款币种" size="small" style="width:10vw;"
clearable />
</div>
<div class="dialog-item">
<el-text style="width:4vw;" size="small">到账币种</el-text>
<el-input v-model="addForm.receiveCurrency" placeholder="请输入到账币种" size="small" style="width:10vw;"
clearable />
</div>
<div class="dialog-item">
<el-text style="width:4vw;" size="small">手续费</el-text>
<el-input v-model="addForm.fee" placeholder="请输入手续费" size="small" style="width:10vw;" clearable />
</div>
<div class="dialog-item">
<el-text style="width:4vw;" size="small">付款时间</el-text>
<el-input v-model="addForm.paymentTime" placeholder="请输入付款时间" size="small" style="width:10vw;"
clearable />
</div>
<div class="dialog-item">
<el-text style="width:4vw;" size="small">提交人</el-text>
<el-input v-model="addForm.submitUser" placeholder="请输入提交人" size="small" style="width:10vw;"
clearable />
</div>
<div class="dialog-item">
<el-text style="width:4vw;" size="small">到账时间</el-text>
<el-input v-model="addForm.receiveTime" placeholder="请输入到账时间" size="small" style="width:10vw;"
clearable />
</div>
<div class="dialog-item">
<el-text style="width:4vw;" size="small">备注</el-text>
<el-input v-model="addForm.remark" placeholder="请输入备注" size="small" style="width:10vw;" :row="3"
clearable />
</div>
</div>
</div>
<el-button @click="" class="smallTitle" size="small">转交信息</el-button>
<div class="bottom">
<div class="dialog-item">
<el-text style="width:4vw;" size="small">执行人</el-text>
<el-select v-model="addForm.executor" size="small" placeholder="请选择执行人" style="width:10vw;">
<el-option v-for="item in executor" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</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 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="" 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>
<router-view></router-view>
</template>
<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import API from '@/util/http.js'
const uploadUrl = 'https://api.homilychart.com/hljw/api/aws/upload'
const searchForm = ref({
jwcode: ''
})
const addForm = ref({
jwcode: ''
})
const auditForm = ref({
refundType: ''
})
const pagination = ref({
pageNum: 1,
pageSize: 50,
total: 0
})
const tableData = ref([])
const showAdd = ref(false)
const showAudit1 = ref(false)
const showAudit2 = ref(false)
const showSteps = ref(false)
const uploadRef = ref(null)
const showBack = ref(false)
const showError = ref(false)
const executor = ref([
{
value: '1',
label: '亲爱的佳丽老师'
},
{
value: '2',
label: '张三'
},
{
value: '3',
label: '李四'
},
{
value: '4',
label: '王五'
},
{
value: '5',
label: '赵六'
},
{
value: '6',
label: '弘历黄总'
}
])
const products = ref([
{
value: '1',
label: '产品1'
},
{
value: '2',
label: '产品2'
}
])
const currencies = ref([
{
value: 'CNY',
label: '人民币'
},
{
value: 'USD',
label: '美元'
}
])
const payments = 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 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 handleUploadSuccess = (response, file, fileList) => {
try {
addForm.value.imageUrl = response.data.url
console.log('==========================', response.data.url)
} catch (error) {
console.log('看看报错信息', error)
ElMessage.error(response.data.msg || '图片上传失败')
}
}
const handleUploadError = (error) => {
console.error('上传失败:', error)
addForm.value.imageUrl = null
ElMessage.error('图片上传失败，请重试')
}
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) {
handleUploadSuccess(response, options.file, [options.file])
ElMessage.success(response.msg || '上传成功')
} else {
ElMessage.error(response.msg || '上传失败')
}
} catch (error) {
console.error('上传错误:', error)
ElMessage.error(`上传失败: ${error.msg || error.message || '网络异常'}`)
}
}
</script>
<style scoped lang="scss">
.condition1 {
width: 82vw;
display: flex;
align-items: center;
height: 4vh;
.condition-item {
width: 19%;
display: flex;
align-items: center;
margin-bottom: 1vh;
margin-right: 0.5vw;
}
.condition-item2 {
width: 19%;
display: flex;
align-items: center;
margin-right: 0.5vw;
}
}
.addDialog {
.left {
width: 50%;
height: 65vh;
padding: 0 2vw;
.dialog-item {
display: flex;
align-items: center;
margin-bottom: 1vh;
}
}
.right {
width: 50%;
height: 50vh;
.dialog-item {
display: flex;
align-items: center;
margin-bottom: 1vh;
}
}
<script setup>
import { onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { storeToRefs } from "pinia"
import { useAdminStore } from "@/store/index.js"
import { hasMenuPermission, permissionMapping } from "@/utils/menuTreePermission.js"
const router = useRouter()
const route = useRoute()
const adminStore = useAdminStore()
const { menuTree } = storeToRefs(adminStore)
const activeTab = ref('')
const isService = ref(false)
const isFinance = ref(false)
const isCharge = ref(false)
const isHeader = ref(false)
const navigateTo = (name) => {
activeTab.value = name
router.push({ name })
}
.audit1 {
height: 47vh;
const initPermissions = () => {
if (!menuTree.value || !menuTree.value.length) return
.dialog-item {
display: flex;
align-items: center;
margin-bottom: 1vh;
}
isService.value = hasMenuPermission(menuTree.value, permissionMapping.)
isArea.value = hasMenuPermission(menuTree.value, permissionMapping.)
isHeader.value = hasMenuPermission(menuTree.value, permissionMapping.)
console.log('====================================', isService.value, isArea.value,isHeader.value)
}
.audit2 {
width: 30vw;
height: auto;
.top {
width: 30vw;
height: 17vh;
.dialog-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: 41vh;
.dialog-item {
display: flex;
align-items: center;
margin-bottom: 1vh;
}
.center-left {
width: 60%;
.image {
width: 4vw !important;
height: 4vw !important;
}
:deep(.el-upload--picture-card) {
width: 4vw !important;
height: 4vw !important;
padding: 0 !important;
}
}
// 默认跳转逻辑
const getDefaultAuditRoute = () => {
initPermissions()
if (isService.value) return 'userPermission'
if (isArea.value) return 'rolePermission'
if (isHeader.value) return 'headerPermission'
.center-audit1 {
.dialog-item {
display: flex;
align-items: center;
margin-bottom: 1vh;
}
}
}
.bottom {
width: 30vw;
height: 5vh;
}
.dialog-item {
display: flex;
align-items: center;
margin-bottom: 1vh;
}
return 'userPermission'
}
.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;
// 监听路由变化更新标签状态
watch(() => route.name, (newName) => {
initPermissions()
if (newName === 'userPermission' || newName === 'rolePermission') {
activeTab.value = newName
} else if (newName === 'permissions') {
// 每次访问 /permissions 都进行默认跳转
const defaultRoute = getDefaultAuditRoute()
navigateTo(defaultRoute)
}
})
.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;
// 初始化逻辑
onMounted(() => {
initPermissions()
if (route.name === 'permissions') {
const defaultRoute = getDefaultAuditRoute()
navigateTo(defaultRoute)
} else {
// 非父路由初始化当前标签状态
if (route.name === 'userPermission' || route.name === 'rolePermission') {
activeTab.value = route.name
}
.back-btn{
height: 20vh;
display: flex;
justify-content: center;
align-items: center;
}
}
</style>
})
</script>

762
src/views/moneyManage/refundDetail/refundHeader.vue
View File

@ -0,0 +1,762 @@
<!-- 总部财务&管理员 -->
<!-- 客服 -->
<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;">订单状态</el-text>
<el-select v-model="searchForm.status" 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.payCurrency" 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;" @change="handleDatePickerChange"
:disabled-date="disabledDate" />
</div>
<div>
<el-button type="success">重置</el-button>
<el-button type="primary">查询</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="showAdd = true">地区客服编辑</el-button>
<el-button type="primary" @click="showAudit1 = true">审核1</el-button>
<el-button type="primary" @click="showAudit2 = true">审核2</el-button>
<el-button type="primary" @click="showSteps = true">看看步骤条</el-button>
<el-button type="primary" @click="showBack = 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="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="orderCode" label="活动名称" width="120px" v-if="isKF" show-overflow-tooltip />
<el-table-column prop="refundType" label="产品名称" width="120" />
<el-table-column prop="refundType" label="产品数量" width="120" />
<el-table-column prop="refundType" label="退款方式" width="120" v-if="!isKF" />
<el-table-column prop="refundType" label="提交人" width="120" v-if="!isKF" />
<el-table-column prop="refundType" label="退款理由" width="120" v-if="!isKF" />
<el-table-column prop="refundType" label="付款币种" width="120" v-if="isKF" />
<el-table-column prop="refundType" label="付款金额" width="120" v-if="isKF" />
<el-table-column prop="refundType" label="支付方式" width="120" v-if="isKF" />
<el-table-column prop="refundType" label="付款时间" width="120" v-if="isKF" />
<el-table-column prop="refundType" label="转账凭证" width="120" v-if="isKF" />
<el-table-column prop="remark" label="备注" width="150" show-overflow-tooltip />
<el-table-column prop="adminName" label="订单状态" width="120" />
<el-table-column prop="operation" label="操作" fixed="right" width="150px" v-if="!isKF">
<template #default="scope">
<div class="operation">
<el-popconfirm title="确定要通过此条记录吗？" @confirm="handleApprove(scope.row)">
<template #reference>
<el-button v-if="hasrefundWaitThough" :disabled="clicked || cancelClicked"
type="primary" text>
通过
</el-button>
</template>
<template #actions="{ confirm, cancel }">
<el-button size="small" @click="cancel">取消</el-button>
<el-button type="primary" size="small" :disabled="clicked" @click="confirm">
确认
</el-button>
</template>
</el-popconfirm>
<el-button v-if="hasrefundWaitReject" :disabled="clicked || cancelClicked" type="primary" text
@click="showRejectDialog(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="showAudit1" title="审核" overflow draggable width="20vw">
<div class="audit1">
<div class="audit-item">
<el-text style="width:4vw;">精网号</el-text>
<el-input v-model="addForm.jwcode" placeholder="请输入精网号" style="width:10vw;" clearable />
</div>
<div class="audit-item">
<el-text style="width:4vw;">姓名</el-text>
<el-input v-model="addForm.name" placeholder="请输入客户姓名" style="width:10vw;" clearable />
</div>
<div class="audit-item">
<el-text style="width:4vw;">所属地区</el-text>
<el-input v-model="addForm.market" placeholder="请输入所属地区" style="width:10vw;" clearable />
</div>
<div class="audit-item">
<el-text style="width:4vw;">活动名称</el-text>
<el-input v-model="addForm.orderCode" placeholder="请输入活动名称" style="width:10vw;" clearable />
</div>
<div class="audit-item">
<el-text style="width:4vw;">商品名称</el-text>
<el-input v-model="addForm.orderCode" placeholder="请输入活动名称" style="width:10vw;" clearable />
</div>
<div class="audit-item">
<el-text style="width:4vw;">付款币种</el-text>
<el-input v-model="addForm.refundAmount" placeholder="请输入付款金额" style="width:10vw;" clearable />
</div>
<div class="audit-item">
<el-text style="width:4vw;">付款金额</el-text>
<el-input v-model="addForm.refundAmount" placeholder="请输入付款金额" style="width:10vw;" clearable />
</div>
<div class="audit-item">
<el-text style="width:4vw;">支付方式</el-text>
<el-input v-model="addForm.refundAmount" placeholder="请输入付款金额" style="width:10vw;" clearable />
</div>
<div class="audit-item">
<el-text style="width:4vw;">付款时间</el-text>
<el-input v-model="addForm.refundAmount" placeholder="请输入付款金额" style="width:10vw;" clearable />
</div>
<div class="audit-item">
<el-text style="width:4vw;">银行流水订单号</el-text>
<el-input v-model="addForm.refundAmount" placeholder="请输入付款金额" style="width:10vw;" clearable />
</div>
</div>
<div style="display:flex;justify-content: center;">
<el-button type="primary" @click="">驳回</el-button>
<el-button type="primary" @click="">通过</el-button>
</div>
</el-dialog>
<el-dialog v-model="showAudit2" title="审核" class="audit2" 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-input v-model="auditForm.refundType" placeholder="请输入退款类型" size="small" style="width:10vw;"
clearable></el-input>
</div>
<div class="top-item">
<el-text style="width:4vw;" size="small">退款金额</el-text>
<el-input v-model="auditForm.refundAmount" placeholder="请输入退款金额" size="small" style="width:10vw;"
clearable></el-input>
</div>
<div class="top-item">
<el-text style="width:4vw;" size="small">退款备注</el-text>
<el-input v-model="auditForm.refundReason" placeholder="请输入退款备注" size="small" style="width:10vw;"
:rows="3" maxlength="100" show-word-limit type="textarea" />
</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="addForm.jwcode" placeholder="请输入精网号" size="small" style="width:10vw;"
clearable />
</div>
<div class="center-item">
<el-text style="width:4vw;" size="small">所属地区</el-text>
<el-input v-model="addForm.name" placeholder="请输入所属地区" size="small" style="width:10vw;" clearable />
</div>
<div class="center-item">
<el-text style="width:4vw;" size="small">产品名称</el-text>
<el-input v-model="addForm.productName" placeholder="请输入产品名称" size="small" style="width:10vw;"
clearable />
</div>
<div class="center-item">
<el-text style="width:4vw;" size="small">付款金额</el-text>
<el-input v-model="addForm.orderCode" placeholder="请输入付款金额" size="small" style="width:10vw;"
clearable />
</div>
<div class="center-item">
<el-text style="width:4vw;" size="small">到账金额</el-text>
<el-input v-model="addForm.orderCode" placeholder="请输入到账金额" size="small" style="width:10vw;"
clearable />
</div>
<div class="center-item">
<el-text style="width:4vw;" size="small">支付方式</el-text>
<el-input v-model="addForm.refundAmount" placeholder="请输入支付方式" size="small" style="width:10vw;"
clearable />
</div>
<div class="center-item">
<el-text style="width:4vw;" size="small">付款金额</el-text>
<el-input v-model="addForm.refundAmount" placeholder="请输入付款金额" size="small" style="width:10vw;"
clearable />
</div>
<div class="center-item">
<el-text style="width:3vw;padding-right: 1vw;" size="small">银行流水订单号</el-text>
<el-input size="small" v-model="addForm.bankOrderNo" placeholder="请输入银行流水订单号" style="width:10vw;"
clearable />
</div>
<div class="center-item">
<el-text style="width:4vw;" size="small">审核人</el-text>
<el-input v-model="addForm.auditUser" placeholder="请输入审核人" size="small" style="width:10vw;"
clearable />
</div>
<div class="center-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" :http-request="customUpload"
list-type="picture-card" :on-change="handleImageChange" class="image"
:on-success="handleUploadSuccess" :on-error="handleUploadError"
:before-upload="beforeUpload" :show-file-list="false">
<template #default>
<img v-if="addForm.imageUrl" :src="addForm.imageUrl"
style="width: 100%; height: 100%; object-fit: cover;">
<el-icon v-else>
<Plus />
</el-icon>
</template>
</el-upload>
</el-form-item>
</div>
</div>
<div class="center-right">
<div class="right-item">
<el-text style="width:4vw;" size="small">客户姓名</el-text>
<el-input v-model="addForm.customerName" placeholder="请输入客户姓名" size="small" style="width:10vw;"
clearable />
</div>
<div class="right-item">
<el-text style="width:4vw;" size="small">活动名称</el-text>
<el-input v-model="addForm.activityName" placeholder="请输入活动名称" size="small" style="width:10vw;"
clearable />
</div>
<div class="right-item">
<el-text style="width:4vw;" size="small">付款币种</el-text>
<el-input v-model="addForm.paymentCurrency" placeholder="请输入付款币种" size="small" style="width:10vw;"
clearable />
</div>
<div class="right-item">
<el-text style="width:4vw;" size="small">到账币种</el-text>
<el-input v-model="addForm.receiveCurrency" placeholder="请输入到账币种" size="small" style="width:10vw;"
clearable />
</div>
<div class="right-item">
<el-text style="width:4vw;" size="small">手续费</el-text>
<el-input v-model="addForm.fee" placeholder="请输入手续费" size="small" style="width:10vw;" clearable />
</div>
<div class="right-item">
<el-text style="width:4vw;" size="small">付款时间</el-text>
<el-input v-model="addForm.paymentTime" placeholder="请输入付款时间" size="small" style="width:10vw;"
clearable />
</div>
<div class="right-item">
<el-text style="width:4vw;" size="small">提交人</el-text>
<el-input v-model="addForm.submitUser" placeholder="请输入提交人" size="small" style="width:10vw;"
clearable />
</div>
<div class="right-item">
<el-text style="width:4vw;" size="small">到账时间</el-text>
<el-input v-model="addForm.receiveTime" placeholder="请输入到账时间" size="small" style="width:10vw;"
clearable />
</div>
<div class="right-item">
<el-text style="width:4vw;" size="small">备注</el-text>
<el-input v-model="addForm.remark" placeholder="请输入备注" size="small" style="width:10vw;" :row="3"
clearable />
</div>
</div>
</div>
<el-button @click="" class="smallTitle" size="small">转交信息</el-button>
<div class="bottom">
<div class="bottom-item">
<el-text style="width:4vw;" size="small">执行人</el-text>
<el-select v-model="addForm.executor" size="small" placeholder="请选择执行人" style="width:10vw;">
<el-option v-for="item in executor" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</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 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>
</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 isKF = ref(adminData.value.adminName.includes('客服'))
// 地区
const isDQ = ref(adminData.value.adminName.includes('财务') || adminData.value.adminName.includes('经理') && !adminData.value.adminName.includes('总部'))
// 总部
const isZB = ref(adminData.value.adminName.includes('总部') || adminData.value.adminName.includes('管理员'))
const searchForm = ref({
jwcode: ''
})
const addForm = ref({
jwcode: ''
})
const auditForm = ref({
refundType: ''
})
const pagination = ref({
pageNum: 1,
pageSize: 50,
total: 0
})
const tableData = ref([])
const showAdd = ref(false)
const showAudit1 = ref(false)
const showAudit2 = ref(false)
const showSteps = ref(false)
const uploadRef = ref(null)
const showBack = ref(false)
const showError = ref(false)
const executor = ref([
{
value: '305485',
label: '新:Zoe'
},
{
value: '200723',
label: '马:Jennifer'
},
{
value: '301388',
label: '港:林育平'
},
{
value: '839448',
label: '加:Mandy'
},
{
value: '304904',
label: '泰:杨丽娇'
},
{
value: '315915',
label: '越:范秋霞'
}
])
const products = ref([
{
value: '1',
label: '产品1'
},
{
value: '2',
label: '产品2'
}
])
const currencies = ref([
{
value: 'CNY',
label: '人民币'
},
{
value: 'USD',
label: '美元'
}
])
const payments = 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: '10',
label: '地区财务待审核'
},
{
value: '12',
label: '地区财务驳回'
},
{
value: '20',
label: '地区负责人待审核'
},
{
value: '22',
label: '地区负责人驳回'
},
{
value: '30',
label: '总部财务待审核'
},
{
value: '32',
label: '总部财务驳回'
},
{
value: '40',
label: '执行人待处理'
},
{
value: '41',
label: '退款完成'
}
])
// 查全部
const getRefund = async function () {
try {
const params = {
cashCollection: {
status: null,
//10：地区财务待审核；12：地区财务驳回；
// 20：地区负责人待审核；22：地区负责人驳回；
// 30：总部财务待审核；32：总部财务驳回；
// 40：执行人待处理；41：执行人已处理，退款完成；
orderCode: null,//订单号
name: null,//姓名
jwcode: null,//精网号
market: null,//地区
goodsName: null,//商品名
refundModel: null,//退款类型,
startTime: "",
endTime: ""
}
}
const result = await API({
url: '/hljw/api/refund/query',
method: 'POST',
data: params
})
tableData.value = result.data || []
} catch (error) {
ElMessage.error(error.message || '查询失败')
}
}
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 handleUploadSuccess = (response, file, fileList) => {
try {
addForm.value.imageUrl = response.data.url
console.log('==========================', response.data.url)
} catch (error) {
console.log('看看报错信息', error)
ElMessage.error(response.data.msg || '图片上传失败')
}
}
const handleUploadError = (error) => {
console.error('上传失败:', error)
addForm.value.imageUrl = null
ElMessage.error('图片上传失败，请重试')
}
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) {
handleUploadSuccess(response, options.file, [options.file])
ElMessage.success(response.msg || '上传成功')
} else {
ElMessage.error(response.msg || '上传失败')
}
} catch (error) {
console.error('上传错误:', error)
ElMessage.error(`上传失败: ${error.msg || error.message || '网络异常'}`)
}
}
onMounted(() => {
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;
}
}
.audit1 {
height: 47vh;
.audit-item {
display: flex;
align-items: center;
margin-bottom: 1vh;
}
}
.audit2 {
width: 30vw;
height: auto;
.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: 41vh;
.dialog-item {
display: flex;
align-items: center;
margin-bottom: 1vh;
}
.center-left {
width: 60%;
.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 {
.right-item {
display: flex;
align-items: center;
margin-bottom: 1vh;
}
}
}
.bottom {
width: 30vw;
height: 5vh;
.bottom-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;
}
}
</style>

629
src/views/moneyManage/refundDetail/refundService.vue
View File

@ -0,0 +1,629 @@
<!-- 客服 -->
<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;">订单状态</el-text>
<el-select v-model="searchForm.status" 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.payCurrency" 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;" @change="handleDatePickerChange"
:disabled-date="disabledDate" />
</div>
<div>
<el-button type="success">重置</el-button>
<el-button type="primary">查询</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="showEdit = true">地区客服编辑</el-button>
<el-button type="primary" @click="showSteps = true">看看步骤条</el-button>
<el-button type="primary" @click="showBack = 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="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="orderCode" label="活动名称" width="120px" show-overflow-tooltip />
<el-table-column prop="refundType" label="产品名称" width="120" />
<el-table-column prop="refundType" label="产品数量" width="120" />
<el-table-column prop="refundType" label="付款币种" width="120" />
<el-table-column prop="refundType" label="付款金额" width="120" />
<el-table-column prop="refundType" label="支付方式" width="120" />
<el-table-column prop="refundType" label="付款时间" width="120" />
<el-table-column prop="refundType" label="转账凭证" width="120" />
<el-table-column prop="remark" label="备注" width="150" show-overflow-tooltip />
<el-table-column prop="adminName" label="订单状态" width="120" />
<el-table-column prop="operation" label="操作" fixed="right" width="150px">
<template #default="scope">
<div class="operation">
<el-button v-if="row.status === '未审核'" type="primary" text @click="showBack = true">
撤回
</el-button>
<el-button v-if="row.status === '已撤回'" type="primary" text @click="showEdit = true">
编辑
</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="addForm.jwcode" placeholder="请输入精网号" style="width:10vw;" clearable />
</div>
<div class="add-item">
<el-text style="width:4vw;">客户姓名</el-text>
<el-input v-model="addForm.name" placeholder="请输入客户姓名" style="width:10vw;" clearable />
</div>
<div class="add-item">
<el-text style="width:4vw;">所属地区</el-text>
<el-input v-model="addForm.market" placeholder="请输入所属地区" style="width:10vw;" clearable />
</div>
<div class="add-item">
<el-text style="width:4vw;">活动名称</el-text>
<el-input v-model="addForm.orderCode" placeholder="请输入活动名称" style="width:10vw;" clearable />
</div>
<div class="add-item">
<el-text style="width:4vw;">产品名称</el-text>
<el-select v-model="addForm.refundType" placeholder="请选择产品名称" style="width:10vw;" clearable>
<el-option v-for="item in products" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
<div class="add-item">
<el-text style="width:4vw;">产品数量</el-text>
<el-input v-model="addForm.productQuantity" placeholder="请输入产品数量" style="width:10vw;" clearable />
&nbsp;个
</div>
<div class="add-item">
<el-text style="width:4vw;">付款币种</el-text>
<el-select v-model="addForm.refundCurrency" placeholder="请选择付款币种" style="width:10vw;" clearable>
<el-option v-for="item in currencies" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</div>
<div class="add-item">
<el-text style="width:4vw;">付款金额</el-text>
<el-input v-model="addForm.refundAmount" placeholder="请输入付款金额" style="width:10vw;" clearable />
</div>
<div class="add-item">
<el-text style="width:4vw;">支付方式</el-text>
<el-select v-model="addForm.paymentMethod" placeholder="请选择支付方式" style="width:10vw;">
<el-option v-for="item in payments" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
<div class="add-item">
<el-text style="width:4vw;">付款时间</el-text>
<el-date-picker v-model="addForm.paymentTime" type="datetime" style="width:10vw;"
placeholder="请选择付款时间" />
</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" :http-request="customUpload"
list-type="picture-card" :on-change="handleImageChange" :on-success="handleUploadSuccess"
:on-error="handleUploadError" :before-upload="beforeUpload" :show-file-list="false">
<template #default>
<img v-if="addForm.imageUrl" :src="addForm.imageUrl"
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="addForm.remark" placeholder="请输入备注" style="width:10vw;" :rows="3" type="textarea"
maxLength="100" show-word-limit />
</div>
</div>
<div class="right">
<div class="add-item">
<el-text style="width:4vw;">退款模式</el-text>
<el-radio-group v-model="addForm.refundMode">
<el-radio value="1">全部退款</el-radio>
<el-radio value="2">部分退款</el-radio>
</el-radio-group>
</div>
<div class="add-item">
<el-text style="width:4vw;">退款理由</el-text>
<el-input v-model="addForm.refundReason" placeholder="请输入退款理由" 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="">重置</el-button>
<el-button type="primary" @click="">提交</el-button>
</div>
</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 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="" 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 searchForm = ref({
jwcode: ''
})
const addForm = ref({
jwcode: ''
})
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 executor = ref([
{
value: '1',
label: '亲爱的佳丽老师'
},
{
value: '2',
label: '张三'
},
{
value: '3',
label: '李四'
},
{
value: '4',
label: '王五'
},
{
value: '5',
label: '赵六'
},
{
value: '6',
label: '弘历黄总'
}
])
const products = ref([
{
value: '1',
label: '产品1'
},
{
value: '2',
label: '产品2'
}
])
const currencies = ref([
{
value: 'CNY',
label: '人民币'
},
{
value: 'USD',
label: '美元'
}
])
const payments = 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: '10',
label: '地区财务待审核'
},
{
value: '12',
label: '地区财务驳回'
},
{
value: '20',
label: '地区负责人待审核'
},
{
value: '22',
label: '地区负责人驳回'
},
{
value: '30',
label: '总部财务待审核'
},
{
value: '32',
label: '总部财务驳回'
},
{
value: '40',
label: '执行人待处理'
},
{
value: '41',
label: '退款完成'
}
])
// 查全部
const getRefund = async function () {
try {
const params = {
cashCollection: {
status: null,
//10：地区财务待审核；12：地区财务驳回；
// 20：地区负责人待审核；22：地区负责人驳回；
// 30：总部财务待审核；32：总部财务驳回；
// 40：执行人待处理；41：执行人已处理，退款完成；
orderCode: null,//订单号
name: null,//姓名
jwcode: null,//精网号
market: null,//地区
goodsName: null,//商品名
refundModel: null,//退款类型,
startTime: "",
endTime: ""
}
}
const result = await API({
url: '/hljw/api/refund/query',
method: 'POST',
data: params
})
tableData.value = result.data || []
} catch (error) {
ElMessage.error(error.message || '查询失败')
}
}
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 handleUploadSuccess = (response, file, fileList) => {
try {
addForm.value.imageUrl = response.data.url
console.log('==========================', response.data.url)
} catch (error) {
console.log('看看报错信息', error)
ElMessage.error(response.data.msg || '图片上传失败')
}
}
const handleUploadError = (error) => {
console.error('上传失败:', error)
addForm.value.imageUrl = null
ElMessage.error('图片上传失败，请重试')
}
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) {
handleUploadSuccess(response, options.file, [options.file])
ElMessage.success(response.msg || '上传成功')
} else {
ElMessage.error(response.msg || '上传失败')
}
} catch (error) {
console.error('上传错误:', error)
ElMessage.error(`上传失败: ${error.msg || error.message || '网络异常'}`)
}
}
onMounted(() => {
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>
Write Preview
Loading…
Cancel
Save