同步售后管理前端页面
This commit is contained in:
58
src/api/aftersale/aftersaleanalysis/index.ts
Normal file
58
src/api/aftersale/aftersaleanalysis/index.ts
Normal file
@@ -0,0 +1,58 @@
|
|||||||
|
import request from '@/config/axios'
|
||||||
|
|
||||||
|
export interface AnalysisQueryParams {
|
||||||
|
registerCreateTime?: string[]
|
||||||
|
processFinishTime?: string[]
|
||||||
|
visitCreateTime?: string[]
|
||||||
|
pageSize?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DistItem {
|
||||||
|
name: string
|
||||||
|
value: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface RegisterSummary {
|
||||||
|
total: number
|
||||||
|
pending: number
|
||||||
|
approved: number
|
||||||
|
rejected: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ProcessSummary {
|
||||||
|
total: number
|
||||||
|
processing: number
|
||||||
|
completed: number
|
||||||
|
failed: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface VisitSummary {
|
||||||
|
total: number
|
||||||
|
avgRating: number
|
||||||
|
fiveStar: number
|
||||||
|
highRepurchase: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface RegisterAnalysisResponse {
|
||||||
|
registerSummary?: RegisterSummary
|
||||||
|
registerTypeDist?: DistItem[]
|
||||||
|
registerStatusDist?: DistItem[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ProcessAnalysisResponse {
|
||||||
|
processSummary?: ProcessSummary
|
||||||
|
processTypeDist?: DistItem[]
|
||||||
|
processStatusDist?: DistItem[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface VisitAnalysisResponse {
|
||||||
|
visitSummary?: VisitSummary
|
||||||
|
visitRatingDist?: DistItem[]
|
||||||
|
visitRepurchaseDist?: DistItem[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export const AfterSaleAnalysisApi = {
|
||||||
|
getAnalysis: async (params: AnalysisQueryParams) => {
|
||||||
|
return await request.post({ url: '/erp/after-sale/analysis', data: params })
|
||||||
|
}
|
||||||
|
}
|
||||||
57
src/api/aftersale/aftersaleprocess/index.ts
Normal file
57
src/api/aftersale/aftersaleprocess/index.ts
Normal file
@@ -0,0 +1,57 @@
|
|||||||
|
import request from '@/config/axios'
|
||||||
|
import type { Dayjs } from 'dayjs';
|
||||||
|
|
||||||
|
/** ERP 售后处理信息 */
|
||||||
|
export interface AfterSaleProcess {
|
||||||
|
id: number; // 处理记录编号
|
||||||
|
afterSaleId?: number; // 关联售后登记编号
|
||||||
|
processType?: number; // 处理类型:1-退货入库,2-换货出库,3-维修处理,4-退款处理,5-取消处理,6-其他
|
||||||
|
processCount?: number; // 处理数量(与售后类型对应:退货数量/换货数量/维修数量等)
|
||||||
|
processResult?: string; // 处理结果描述
|
||||||
|
processEvidence: string; // 处理凭证(图片/文件URL,多个用逗号分隔)
|
||||||
|
relatedOrderId: number; // 关联业务订单编号(如换货对应的新销售订单号、退款对应的财务订单号)
|
||||||
|
processStatus?: number; // 处理状态:1-处理中,2-处理完成,3-处理失败
|
||||||
|
processFailReason: string; // 处理失败原因
|
||||||
|
processUser?: string; // 处理人
|
||||||
|
processTime?: string | Dayjs; // 处理时间
|
||||||
|
finishTime: string | Dayjs; // 处理完成时间
|
||||||
|
userRating?: number; // 用户评价评分(0-10)
|
||||||
|
}
|
||||||
|
|
||||||
|
// ERP 售后处理 API
|
||||||
|
export const AfterSaleProcessApi = {
|
||||||
|
// 查询ERP 售后处理分页
|
||||||
|
getAfterSaleProcessPage: async (params: any) => {
|
||||||
|
return await request.get({ url: `/erp/after-sale-process/page`, params })
|
||||||
|
},
|
||||||
|
|
||||||
|
// 查询ERP 售后处理详情
|
||||||
|
getAfterSaleProcess: async (id: number) => {
|
||||||
|
return await request.get({ url: `/erp/after-sale-process/get?id=` + id })
|
||||||
|
},
|
||||||
|
|
||||||
|
// 新增ERP 售后处理
|
||||||
|
createAfterSaleProcess: async (data: AfterSaleProcess) => {
|
||||||
|
return await request.post({ url: `/erp/after-sale-process/create`, data })
|
||||||
|
},
|
||||||
|
|
||||||
|
// 修改ERP 售后处理
|
||||||
|
updateAfterSaleProcess: async (data: AfterSaleProcess) => {
|
||||||
|
return await request.put({ url: `/erp/after-sale-process/update`, data })
|
||||||
|
},
|
||||||
|
|
||||||
|
// 删除ERP 售后处理
|
||||||
|
deleteAfterSaleProcess: async (id: number) => {
|
||||||
|
return await request.delete({ url: `/erp/after-sale-process/delete?id=` + id })
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 批量删除ERP 售后处理 */
|
||||||
|
deleteAfterSaleProcessList: async (ids: number[]) => {
|
||||||
|
return await request.delete({ url: `/erp/after-sale-process/delete-list?ids=${ids.join(',')}` })
|
||||||
|
},
|
||||||
|
|
||||||
|
// 导出ERP 售后处理 Excel
|
||||||
|
exportAfterSaleProcess: async (params) => {
|
||||||
|
return await request.download({ url: `/erp/after-sale-process/export-excel`, params })
|
||||||
|
}
|
||||||
|
}
|
||||||
56
src/api/aftersale/aftersaleregister/index.ts
Normal file
56
src/api/aftersale/aftersaleregister/index.ts
Normal file
@@ -0,0 +1,56 @@
|
|||||||
|
import request from '@/config/axios'
|
||||||
|
import type { Dayjs } from 'dayjs';
|
||||||
|
|
||||||
|
/** ERP 售后登记信息 */
|
||||||
|
export interface AfterSaleRegister {
|
||||||
|
id: number; // 售后登记编号
|
||||||
|
orderId?: number; // 关联销售订单编号
|
||||||
|
orderItemId?: number; // 关联销售订单项编号
|
||||||
|
afterSaleType?: number; // 售后类型:1-退货,2-换货,3-维修,4-退款
|
||||||
|
applyReason?: string; // 申请原因
|
||||||
|
contactName?: string; // 联系人
|
||||||
|
contactPhone?: string; // 联系电话
|
||||||
|
applyStatus?: number; // 申请状态:1-待审核,2-审核通过,3-审核驳回,4-已取消
|
||||||
|
rejectReason: string; // 驳回原因(审核驳回时填写)
|
||||||
|
applicant?: string; // 申请人
|
||||||
|
auditUser: string; // 审核人
|
||||||
|
auditTime: string | Dayjs; // 审核时间
|
||||||
|
}
|
||||||
|
|
||||||
|
// ERP 售后登记 API
|
||||||
|
export const AfterSaleRegisterApi = {
|
||||||
|
// 查询ERP 售后登记分页
|
||||||
|
getAfterSaleRegisterPage: async (params: any) => {
|
||||||
|
return await request.get({ url: `/erp/after-sale-register/page`, params })
|
||||||
|
},
|
||||||
|
|
||||||
|
// 查询ERP 售后登记详情
|
||||||
|
getAfterSaleRegister: async (id: number) => {
|
||||||
|
return await request.get({ url: `/erp/after-sale-register/get?id=` + id })
|
||||||
|
},
|
||||||
|
|
||||||
|
// 新增ERP 售后登记
|
||||||
|
createAfterSaleRegister: async (data: AfterSaleRegister) => {
|
||||||
|
return await request.post({ url: `/erp/after-sale-register/create`, data })
|
||||||
|
},
|
||||||
|
|
||||||
|
// 修改ERP 售后登记
|
||||||
|
updateAfterSaleRegister: async (data: AfterSaleRegister) => {
|
||||||
|
return await request.put({ url: `/erp/after-sale-register/update`, data })
|
||||||
|
},
|
||||||
|
|
||||||
|
// 删除ERP 售后登记
|
||||||
|
deleteAfterSaleRegister: async (id: number) => {
|
||||||
|
return await request.delete({ url: `/erp/after-sale-register/delete?id=` + id })
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 批量删除ERP 售后登记 */
|
||||||
|
deleteAfterSaleRegisterList: async (ids: number[]) => {
|
||||||
|
return await request.delete({ url: `/erp/after-sale-register/delete-list?ids=${ids.join(',')}` })
|
||||||
|
},
|
||||||
|
|
||||||
|
// 导出ERP 售后登记 Excel
|
||||||
|
exportAfterSaleRegister: async (params) => {
|
||||||
|
return await request.download({ url: `/erp/after-sale-register/export-excel`, params })
|
||||||
|
}
|
||||||
|
}
|
||||||
53
src/api/aftersale/aftersalesvisit/index.ts
Normal file
53
src/api/aftersale/aftersalesvisit/index.ts
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
import request from '@/config/axios'
|
||||||
|
import type { Dayjs } from 'dayjs';
|
||||||
|
|
||||||
|
/** 售后回访信息 */
|
||||||
|
export interface AfterSalesVisit {
|
||||||
|
id: number; // 主键ID
|
||||||
|
customerName?: string; // 客户名称
|
||||||
|
contactInfo?: string; // 联系方式
|
||||||
|
customerUsage: string; // 客户用途
|
||||||
|
productName?: string; // 产品名称
|
||||||
|
productEvaluation: string; // 产品评价
|
||||||
|
customerType?: string; // 客户类型:大型食品厂/中小型加工厂/经销商/餐饮连锁/机关单位/其他
|
||||||
|
repurchaseIntention?: string; // 重复采购意愿:一定会/应该会/不确定/可能不会/肯定不会
|
||||||
|
serviceRating?: number; // 服务评分(0~5星)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 售后回访 API
|
||||||
|
export const AfterSalesVisitApi = {
|
||||||
|
// 查询售后回访分页
|
||||||
|
getAfterSalesVisitPage: async (params: any) => {
|
||||||
|
return await request.get({ url: `/erp/after-sales-visit/page`, params })
|
||||||
|
},
|
||||||
|
|
||||||
|
// 查询售后回访详情
|
||||||
|
getAfterSalesVisit: async (id: number) => {
|
||||||
|
return await request.get({ url: `/erp/after-sales-visit/get?id=` + id })
|
||||||
|
},
|
||||||
|
|
||||||
|
// 新增售后回访
|
||||||
|
createAfterSalesVisit: async (data: AfterSalesVisit) => {
|
||||||
|
return await request.post({ url: `/erp/after-sales-visit/create`, data })
|
||||||
|
},
|
||||||
|
|
||||||
|
// 修改售后回访
|
||||||
|
updateAfterSalesVisit: async (data: AfterSalesVisit) => {
|
||||||
|
return await request.put({ url: `/erp/after-sales-visit/update`, data })
|
||||||
|
},
|
||||||
|
|
||||||
|
// 删除售后回访
|
||||||
|
deleteAfterSalesVisit: async (id: number) => {
|
||||||
|
return await request.delete({ url: `/erp/after-sales-visit/delete?id=` + id })
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 批量删除售后回访 */
|
||||||
|
deleteAfterSalesVisitList: async (ids: number[]) => {
|
||||||
|
return await request.delete({ url: `/erp/after-sales-visit/delete-list?ids=${ids.join(',')}` })
|
||||||
|
},
|
||||||
|
|
||||||
|
// 导出售后回访 Excel
|
||||||
|
exportAfterSalesVisit: async (params) => {
|
||||||
|
return await request.download({ url: `/erp/after-sales-visit/export-excel`, params })
|
||||||
|
}
|
||||||
|
}
|
||||||
265
src/views/aftersale/aftersaleanalysis/index.vue
Normal file
265
src/views/aftersale/aftersaleanalysis/index.vue
Normal file
@@ -0,0 +1,265 @@
|
|||||||
|
<template>
|
||||||
|
<ContentWrap>
|
||||||
|
<el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="110px">
|
||||||
|
<!-- <el-form-item label="登记创建时间" prop="registerCreateTime">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="queryParams.registerCreateTime"
|
||||||
|
value-format="YYYY-MM-DD HH:mm:ss"
|
||||||
|
type="daterange"
|
||||||
|
start-placeholder="开始日期"
|
||||||
|
end-placeholder="结束日期"
|
||||||
|
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
||||||
|
class="!w-220px"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="处理完成时间" prop="processFinishTime">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="queryParams.processFinishTime"
|
||||||
|
value-format="YYYY-MM-DD HH:mm:ss"
|
||||||
|
type="daterange"
|
||||||
|
start-placeholder="开始日期"
|
||||||
|
end-placeholder="结束日期"
|
||||||
|
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
||||||
|
class="!w-220px"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="回访创建时间" prop="visitCreateTime">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="queryParams.visitCreateTime"
|
||||||
|
value-format="YYYY-MM-DD HH:mm:ss"
|
||||||
|
type="daterange"
|
||||||
|
start-placeholder="开始日期"
|
||||||
|
end-placeholder="结束日期"
|
||||||
|
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
||||||
|
class="!w-220px"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="统计上限" prop="pageSize">
|
||||||
|
<el-input-number v-model="queryParams.pageSize" :min="100" :max="2000" :step="100" />
|
||||||
|
</el-form-item> -->
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="handleQuery">
|
||||||
|
<Icon icon="ep:search" class="mr-5px" /> 统计
|
||||||
|
</el-button>
|
||||||
|
<!-- <el-button @click="resetQuery">
|
||||||
|
<Icon icon="ep:refresh" class="mr-5px" /> 重置
|
||||||
|
</el-button> -->
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<!-- <el-alert
|
||||||
|
type="info"
|
||||||
|
:closable="false"
|
||||||
|
class="mt-2"
|
||||||
|
:title="`统计基于当前筛选条件的前 ${queryParams.pageSize} 条记录`"
|
||||||
|
/> -->
|
||||||
|
</ContentWrap>
|
||||||
|
|
||||||
|
<div v-loading="loading">
|
||||||
|
<ContentWrap>
|
||||||
|
<div class="mb-4 text-lg font-medium">售后登记统计</div>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
|
||||||
|
<SummaryCard title="登记总数" :value="registerSummary.total" icon="ep:document" icon-color="text-blue-600" icon-bg-color="bg-blue-100" />
|
||||||
|
<SummaryCard title="待审核" :value="registerSummary.pending" icon="ep:clock" icon-color="text-orange-600" icon-bg-color="bg-orange-100" />
|
||||||
|
<SummaryCard title="审核通过" :value="registerSummary.approved" icon="ep:circle-check" icon-color="text-green-600" icon-bg-color="bg-green-100" />
|
||||||
|
<SummaryCard title="审核驳回" :value="registerSummary.rejected" icon="ep:circle-close" icon-color="text-red-600" icon-bg-color="bg-red-100" />
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||||
|
<el-card shadow="never">
|
||||||
|
<div class="mb-2 font-medium">售后类型分布</div>
|
||||||
|
<Echart :height="320" :options="registerTypeOption" />
|
||||||
|
</el-card>
|
||||||
|
<el-card shadow="never">
|
||||||
|
<div class="mb-2 font-medium">申请状态分布</div>
|
||||||
|
<Echart :height="320" :options="registerStatusOption" />
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</ContentWrap>
|
||||||
|
|
||||||
|
<ContentWrap>
|
||||||
|
<div class="mb-4 text-lg font-medium">售后处理统计</div>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
|
||||||
|
<SummaryCard title="处理总数" :value="processSummary.total" icon="ep:setting" icon-color="text-blue-600" icon-bg-color="bg-blue-100" />
|
||||||
|
<SummaryCard title="处理中" :value="processSummary.processing" icon="ep:loading" icon-color="text-orange-600" icon-bg-color="bg-orange-100" />
|
||||||
|
<SummaryCard title="处理完成" :value="processSummary.completed" icon="ep:check" icon-color="text-green-600" icon-bg-color="bg-green-100" />
|
||||||
|
<SummaryCard title="处理失败" :value="processSummary.failed" icon="ep:close" icon-color="text-red-600" icon-bg-color="bg-red-100" />
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||||
|
<el-card shadow="never">
|
||||||
|
<div class="mb-2 font-medium">处理类型分布</div>
|
||||||
|
<Echart :height="320" :options="processTypeOption" />
|
||||||
|
</el-card>
|
||||||
|
<el-card shadow="never">
|
||||||
|
<div class="mb-2 font-medium">处理状态分布</div>
|
||||||
|
<Echart :height="320" :options="processStatusOption" />
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</ContentWrap>
|
||||||
|
|
||||||
|
<ContentWrap>
|
||||||
|
<div class="mb-4 text-lg font-medium">售后回访统计</div>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
|
||||||
|
<SummaryCard title="回访总数" :value="visitSummary.total" icon="ep:user" icon-color="text-blue-600" icon-bg-color="bg-blue-100" />
|
||||||
|
<SummaryCard title="平均评分" :value="visitSummary.avgRating" :decimals="1" icon="ep:star" icon-color="text-yellow-600" icon-bg-color="bg-yellow-100" />
|
||||||
|
<SummaryCard title="五星评分" :value="visitSummary.fiveStar" icon="ep:star" icon-color="text-yellow-600" icon-bg-color="bg-yellow-100" />
|
||||||
|
<SummaryCard title="强复购意愿" :value="visitSummary.highRepurchase" icon="ep:promotion" icon-color="text-green-600" icon-bg-color="bg-green-100" />
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||||
|
<el-card shadow="never">
|
||||||
|
<div class="mb-2 font-medium">评分分布</div>
|
||||||
|
<Echart :height="320" :options="visitRatingOption" />
|
||||||
|
</el-card>
|
||||||
|
<el-card shadow="never">
|
||||||
|
<div class="mb-2 font-medium">复购意愿分布</div>
|
||||||
|
<Echart :height="320" :options="visitRepurchaseOption" />
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</ContentWrap>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { EChartsOption } from 'echarts'
|
||||||
|
import SummaryCard from '@/components/SummaryCard/index.vue'
|
||||||
|
import { Echart } from '@/components/Echart'
|
||||||
|
import {
|
||||||
|
AfterSaleAnalysisApi,
|
||||||
|
DistItem,
|
||||||
|
ProcessSummary,
|
||||||
|
RegisterSummary,
|
||||||
|
VisitSummary
|
||||||
|
} from '@/api/erp/aftersale/aftersaleanalysis'
|
||||||
|
|
||||||
|
defineOptions({ name: 'AfterSaleAnalysis' })
|
||||||
|
|
||||||
|
const loading = ref(false)
|
||||||
|
const queryFormRef = ref()
|
||||||
|
const queryParams = reactive({
|
||||||
|
registerCreateTime: [],
|
||||||
|
processFinishTime: [],
|
||||||
|
visitCreateTime: [],
|
||||||
|
pageSize: 500
|
||||||
|
})
|
||||||
|
|
||||||
|
const registerSummary = reactive<RegisterSummary>({
|
||||||
|
total: 0,
|
||||||
|
pending: 0,
|
||||||
|
approved: 0,
|
||||||
|
rejected: 0
|
||||||
|
})
|
||||||
|
const processSummary = reactive<ProcessSummary>({
|
||||||
|
total: 0,
|
||||||
|
processing: 0,
|
||||||
|
completed: 0,
|
||||||
|
failed: 0
|
||||||
|
})
|
||||||
|
const visitSummary = reactive<VisitSummary>({
|
||||||
|
total: 0,
|
||||||
|
avgRating: 0,
|
||||||
|
fiveStar: 0,
|
||||||
|
highRepurchase: 0
|
||||||
|
})
|
||||||
|
|
||||||
|
const registerTypeDist = ref<DistItem[]>([])
|
||||||
|
const registerStatusDist = ref<DistItem[]>([])
|
||||||
|
const processTypeDist = ref<DistItem[]>([])
|
||||||
|
const processStatusDist = ref<DistItem[]>([])
|
||||||
|
const visitRatingDist = ref<DistItem[]>([])
|
||||||
|
const visitRepurchaseDist = ref<DistItem[]>([])
|
||||||
|
|
||||||
|
const buildPieOption = (data: { name: string; value: number }[]): EChartsOption => ({
|
||||||
|
tooltip: { trigger: 'item' },
|
||||||
|
legend: { bottom: 0 },
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['35%', '60%'],
|
||||||
|
data,
|
||||||
|
label: { formatter: '{b}: {c}' }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
|
const buildBarOption = (labels: string[], data: number[]): EChartsOption => ({
|
||||||
|
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
|
||||||
|
grid: { left: 20, right: 20, bottom: 20, containLabel: true },
|
||||||
|
xAxis: { type: 'category', data: labels },
|
||||||
|
yAxis: { type: 'value', minInterval: 1 },
|
||||||
|
series: [{ type: 'bar', data, barWidth: '45%' }]
|
||||||
|
})
|
||||||
|
|
||||||
|
const registerTypeOption = computed(() => buildPieOption(registerTypeDist.value))
|
||||||
|
const registerStatusOption = computed(() =>
|
||||||
|
buildBarOption(
|
||||||
|
registerStatusDist.value.map((item) => item.name),
|
||||||
|
registerStatusDist.value.map((item) => item.value)
|
||||||
|
)
|
||||||
|
)
|
||||||
|
const processTypeOption = computed(() =>
|
||||||
|
buildBarOption(
|
||||||
|
processTypeDist.value.map((item) => item.name),
|
||||||
|
processTypeDist.value.map((item) => item.value)
|
||||||
|
)
|
||||||
|
)
|
||||||
|
const processStatusOption = computed(() => buildPieOption(processStatusDist.value))
|
||||||
|
const visitRatingOption = computed(() =>
|
||||||
|
buildBarOption(
|
||||||
|
visitRatingDist.value.map((item) => item.name),
|
||||||
|
visitRatingDist.value.map((item) => item.value)
|
||||||
|
)
|
||||||
|
)
|
||||||
|
const visitRepurchaseOption = computed(() => buildPieOption(visitRepurchaseDist.value))
|
||||||
|
|
||||||
|
const resetSummary = () => {
|
||||||
|
Object.assign(registerSummary, { total: 0, pending: 0, approved: 0, rejected: 0 })
|
||||||
|
Object.assign(processSummary, { total: 0, processing: 0, completed: 0, failed: 0 })
|
||||||
|
Object.assign(visitSummary, { total: 0, avgRating: 0, fiveStar: 0, highRepurchase: 0 })
|
||||||
|
registerTypeDist.value = []
|
||||||
|
registerStatusDist.value = []
|
||||||
|
processTypeDist.value = []
|
||||||
|
processStatusDist.value = []
|
||||||
|
visitRatingDist.value = []
|
||||||
|
visitRepurchaseDist.value = []
|
||||||
|
}
|
||||||
|
|
||||||
|
const loadData = async () => {
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
resetSummary()
|
||||||
|
const res = await AfterSaleAnalysisApi.getAnalysis({
|
||||||
|
registerCreateTime: queryParams.registerCreateTime,
|
||||||
|
processFinishTime: queryParams.processFinishTime,
|
||||||
|
visitCreateTime: queryParams.visitCreateTime,
|
||||||
|
pageSize: queryParams.pageSize
|
||||||
|
})
|
||||||
|
|
||||||
|
const data = (res as any).data ?? res
|
||||||
|
|
||||||
|
Object.assign(registerSummary, data.registerSummary || {})
|
||||||
|
Object.assign(processSummary, data.processSummary || {})
|
||||||
|
Object.assign(visitSummary, data.visitSummary || {})
|
||||||
|
|
||||||
|
registerTypeDist.value = data.registerTypeDist || []
|
||||||
|
registerStatusDist.value = data.registerStatusDist || []
|
||||||
|
processTypeDist.value = data.processTypeDist || []
|
||||||
|
processStatusDist.value = data.processStatusDist || []
|
||||||
|
visitRatingDist.value = data.visitRatingDist || []
|
||||||
|
visitRepurchaseDist.value = data.visitRepurchaseDist || []
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleQuery = () => {
|
||||||
|
loadData()
|
||||||
|
}
|
||||||
|
|
||||||
|
const resetQuery = () => {
|
||||||
|
queryFormRef.value?.resetFields()
|
||||||
|
queryParams.pageSize = 500
|
||||||
|
loadData()
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
loadData()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
407
src/views/aftersale/aftersaleprocess/AfterSaleProcessForm.vue
Normal file
407
src/views/aftersale/aftersaleprocess/AfterSaleProcessForm.vue
Normal file
@@ -0,0 +1,407 @@
|
|||||||
|
<template>
|
||||||
|
<Dialog :title="dialogTitle" v-model="dialogVisible">
|
||||||
|
<el-form
|
||||||
|
ref="formRef"
|
||||||
|
:model="formData"
|
||||||
|
:rules="formRules"
|
||||||
|
label-width="100px"
|
||||||
|
v-loading="formLoading"
|
||||||
|
>
|
||||||
|
<el-form-item label="售后登记" prop="afterSaleId">
|
||||||
|
<el-input
|
||||||
|
v-model="selectedRegisterLabel"
|
||||||
|
placeholder="请选择已审核通过的售后登记"
|
||||||
|
readonly
|
||||||
|
@click="openRegisterSelector"
|
||||||
|
style="cursor: pointer"
|
||||||
|
>
|
||||||
|
<template #append>
|
||||||
|
<el-button :icon="Search" @click="openRegisterSelector" />
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="处理类型" prop="processType">
|
||||||
|
<el-select v-model="formData.processType" placeholder="请选择处理类型" filterable>
|
||||||
|
<el-option
|
||||||
|
v-for="item in processTypeOptions"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="处理数量" prop="processCount">
|
||||||
|
<el-input-number v-model="formData.processCount" :min="0" class="!w-full" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="处理结果" prop="processResult">
|
||||||
|
<el-input v-model="formData.processResult" placeholder="请输入处理结果" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="处理凭证" prop="processEvidence">
|
||||||
|
<UploadImgs v-model="processEvidenceList" :limit="5" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="业务订单" prop="relatedOrderId">
|
||||||
|
<el-input v-model="formData.relatedOrderId" placeholder="请输入业务订单" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="处理人" prop="processUser">
|
||||||
|
<el-input v-model="formData.processUser" placeholder="请输入处理人" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="时间" prop="processTime">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="formData.processTime as any"
|
||||||
|
type="datetime"
|
||||||
|
value-format="YYYY-MM-DD HH:mm:ss"
|
||||||
|
placeholder="选择时间"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item v-if="formData.processStatus === 2" label="处理完成时间" prop="finishTime">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="formData.finishTime as any"
|
||||||
|
type="datetime"
|
||||||
|
value-format="YYYY-MM-DD HH:mm:ss"
|
||||||
|
placeholder="选择处理完成时间"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="评价" prop="userRating">
|
||||||
|
<el-rate
|
||||||
|
v-model="formData.userRating"
|
||||||
|
:max="10"
|
||||||
|
class="!w-full"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
||||||
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||||
|
</template>
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
|
<!-- 售后登记选择弹窗 -->
|
||||||
|
<Dialog v-model="registerSelectorVisible" title="选择售后登记" width="70%" :appendToBody="true">
|
||||||
|
<ContentWrap>
|
||||||
|
<el-form
|
||||||
|
ref="registerQueryFormRef"
|
||||||
|
:inline="true"
|
||||||
|
:model="registerQueryParams"
|
||||||
|
class="-mb-15px"
|
||||||
|
label-width="100px"
|
||||||
|
>
|
||||||
|
<el-form-item label="售后类型" prop="afterSaleType">
|
||||||
|
<el-select
|
||||||
|
v-model="registerQueryParams.afterSaleType"
|
||||||
|
placeholder="请选择售后类型"
|
||||||
|
clearable
|
||||||
|
class="!w-200px"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in afterSaleTypeOptions"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="销售订单ID" prop="orderId">
|
||||||
|
<el-input
|
||||||
|
v-model="registerQueryParams.orderId"
|
||||||
|
class="!w-200px"
|
||||||
|
clearable
|
||||||
|
placeholder="请输入销售订单ID"
|
||||||
|
@keyup.enter="handleRegisterQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button @click="handleRegisterQuery">
|
||||||
|
<Icon class="mr-5px" icon="ep:search" />
|
||||||
|
搜索
|
||||||
|
</el-button>
|
||||||
|
<el-button @click="resetRegisterQuery">
|
||||||
|
<Icon class="mr-5px" icon="ep:refresh" />
|
||||||
|
重置
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<el-table v-loading="registerLoading" :data="registerList" show-overflow-tooltip>
|
||||||
|
<el-table-column label="#" width="55">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-radio :value="row.id" v-model="selectedRegisterId" @change="handleRegisterSelected(row)">
|
||||||
|
|
||||||
|
</el-radio>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="登记ID" align="center" prop="id" width="100" />
|
||||||
|
<el-table-column label="销售订单ID" align="center" prop="orderId" width="120" />
|
||||||
|
<el-table-column label="售后类型" align="center" prop="afterSaleType" width="120">
|
||||||
|
<template #default="{ row }">
|
||||||
|
{{ formatAfterSaleType(row.afterSaleType) }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="申请原因" align="center" prop="applyReason" min-width="150" />
|
||||||
|
<el-table-column label="申请人" align="center" prop="applicant" width="100" />
|
||||||
|
<el-table-column
|
||||||
|
label="创建时间"
|
||||||
|
align="center"
|
||||||
|
prop="createTime"
|
||||||
|
:formatter="dateFormatter"
|
||||||
|
width="160px"
|
||||||
|
/>
|
||||||
|
</el-table>
|
||||||
|
<Pagination
|
||||||
|
v-model:limit="registerQueryParams.pageSize"
|
||||||
|
v-model:page="registerQueryParams.pageNo"
|
||||||
|
:total="registerTotal"
|
||||||
|
@pagination="getRegisterList"
|
||||||
|
/>
|
||||||
|
</ContentWrap>
|
||||||
|
</Dialog>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { Search } from '@element-plus/icons-vue'
|
||||||
|
import dayjs from 'dayjs'
|
||||||
|
import { dateFormatter } from '@/utils/formatTime'
|
||||||
|
import { AfterSaleProcessApi, AfterSaleProcess } from '@/api/erp/aftersale/aftersaleprocess'
|
||||||
|
import { AfterSaleRegisterApi, AfterSaleRegister } from '@/api/erp/aftersale/aftersaleregister'
|
||||||
|
import { useUserStoreWithOut } from '@/store/modules/user'
|
||||||
|
|
||||||
|
/** ERP 售后处理 表单 */
|
||||||
|
defineOptions({ name: 'AfterSaleProcessForm' })
|
||||||
|
|
||||||
|
const processTypeOptions = [
|
||||||
|
{ label: '退货入库', value: 1 },
|
||||||
|
{ label: '换货出库', value: 2 },
|
||||||
|
{ label: '维修处理', value: 3 },
|
||||||
|
{ label: '退款处理', value: 4 },
|
||||||
|
{ label: '取消处理', value: 5 },
|
||||||
|
{ label: '其他', value: 6 }
|
||||||
|
]
|
||||||
|
|
||||||
|
const processStatusOptions = [
|
||||||
|
{ label: '退换货', value: 1 },
|
||||||
|
{ label: '维修申请', value: 2 },
|
||||||
|
{ label: '售后评价', value: 3 }
|
||||||
|
]
|
||||||
|
|
||||||
|
const processEvidenceList = ref<string[]>([])
|
||||||
|
|
||||||
|
// 售后登记选择器相关
|
||||||
|
const registerSelectorVisible = ref(false)
|
||||||
|
const selectedRegisterId = ref<number>()
|
||||||
|
const selectedRegisterLabel = ref<string>('')
|
||||||
|
const registerLoading = ref(false)
|
||||||
|
const registerList = ref<AfterSaleRegister[]>([])
|
||||||
|
const registerTotal = ref(0)
|
||||||
|
const registerQueryParams = ref({
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
applyStatus: 2, // 仅已审核通过
|
||||||
|
afterSaleType: undefined,
|
||||||
|
orderId: undefined
|
||||||
|
})
|
||||||
|
const registerQueryFormRef = ref()
|
||||||
|
|
||||||
|
const afterSaleTypeOptions = [
|
||||||
|
{ label: '退货', value: 1 },
|
||||||
|
{ label: '换货', value: 2 },
|
||||||
|
{ label: '维修', value: 3 },
|
||||||
|
{ label: '退款', value: 4 }
|
||||||
|
]
|
||||||
|
|
||||||
|
/** 打开售后登记选择器 */
|
||||||
|
const openRegisterSelector = () => {
|
||||||
|
registerSelectorVisible.value = true
|
||||||
|
registerQueryParams.value = {
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
applyStatus: 2,
|
||||||
|
afterSaleType: undefined,
|
||||||
|
orderId: undefined
|
||||||
|
}
|
||||||
|
getRegisterList()
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 查询售后登记列表 */
|
||||||
|
const getRegisterList = async () => {
|
||||||
|
registerLoading.value = true
|
||||||
|
try {
|
||||||
|
const data = await AfterSaleRegisterApi.getAfterSaleRegisterPage(registerQueryParams.value)
|
||||||
|
registerList.value = data.list
|
||||||
|
registerTotal.value = data.total
|
||||||
|
} finally {
|
||||||
|
registerLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 搜索售后登记 */
|
||||||
|
const handleRegisterQuery = () => {
|
||||||
|
registerQueryParams.value.pageNo = 1
|
||||||
|
getRegisterList()
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 重置售后登记查询 */
|
||||||
|
const resetRegisterQuery = () => {
|
||||||
|
registerQueryParams.value = {
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
applyStatus: 2,
|
||||||
|
afterSaleType: undefined,
|
||||||
|
orderId: undefined
|
||||||
|
}
|
||||||
|
getRegisterList()
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 选中售后登记 */
|
||||||
|
const handleRegisterSelected = (row: AfterSaleRegister) => {
|
||||||
|
formData.value.afterSaleId = row.id
|
||||||
|
selectedRegisterLabel.value = `登记 #${row.id}(订单 ${row.orderId || '-'})`
|
||||||
|
selectedRegisterId.value = row.id
|
||||||
|
registerSelectorVisible.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 格式化售后类型 */
|
||||||
|
const formatAfterSaleType = (value?: number) => {
|
||||||
|
if (!value) return '-'
|
||||||
|
const match = afterSaleTypeOptions.find(item => item.value === value)
|
||||||
|
return match?.label || String(value)
|
||||||
|
}
|
||||||
|
|
||||||
|
const { t } = useI18n() // 国际化
|
||||||
|
const message = useMessage() // 消息弹窗
|
||||||
|
const userStore = useUserStoreWithOut()
|
||||||
|
const currentUserNickname = computed(() => userStore.getUser?.nickname || '')
|
||||||
|
const nowString = () => dayjs().format('YYYY-MM-DD HH:mm:ss')
|
||||||
|
|
||||||
|
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||||
|
const dialogTitle = ref('') // 弹窗的标题
|
||||||
|
const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
|
||||||
|
const formType = ref('') // 表单的类型:create - 新增;update - 修改
|
||||||
|
const formData = ref<Partial<AfterSaleProcess>>({
|
||||||
|
id: undefined,
|
||||||
|
afterSaleId: undefined,
|
||||||
|
processType: undefined,
|
||||||
|
processCount: undefined,
|
||||||
|
processResult: undefined,
|
||||||
|
processEvidence: '',
|
||||||
|
relatedOrderId: undefined,
|
||||||
|
processStatus: undefined,
|
||||||
|
processFailReason: undefined,
|
||||||
|
processUser: undefined,
|
||||||
|
processTime: undefined,
|
||||||
|
finishTime: undefined,
|
||||||
|
userRating: undefined
|
||||||
|
})
|
||||||
|
const formRules = reactive({
|
||||||
|
afterSaleId: [{ required: true, message: '售后登记不能为空', trigger: 'change' }],
|
||||||
|
processType: [{ required: true, message: '处理类型不能为空', trigger: 'change' }],
|
||||||
|
processResult: [{ required: true, message: '处理结果不能为空', trigger: 'blur' }]
|
||||||
|
})
|
||||||
|
const formRef = ref() // 表单 Ref
|
||||||
|
|
||||||
|
// 同步处理凭证列表和表单数据
|
||||||
|
watch(
|
||||||
|
() => formData.value.processEvidence,
|
||||||
|
(newVal: string) => {
|
||||||
|
processEvidenceList.value = newVal ? newVal.split(',').filter(url => url.trim()) : []
|
||||||
|
},
|
||||||
|
{ immediate: true }
|
||||||
|
)
|
||||||
|
|
||||||
|
watch(
|
||||||
|
processEvidenceList,
|
||||||
|
(newList: string[]) => {
|
||||||
|
formData.value.processEvidence = newList?.length ? newList.join(',') : ''
|
||||||
|
},
|
||||||
|
{ deep: true }
|
||||||
|
)
|
||||||
|
|
||||||
|
/** 打开弹窗 */
|
||||||
|
const open = async (type: string, id?: number) => {
|
||||||
|
dialogVisible.value = true
|
||||||
|
dialogTitle.value = t('action.' + type)
|
||||||
|
formType.value = type
|
||||||
|
resetForm()
|
||||||
|
// 修改时,设置数据
|
||||||
|
if (id) {
|
||||||
|
formLoading.value = true
|
||||||
|
try {
|
||||||
|
formData.value = await AfterSaleProcessApi.getAfterSaleProcess(id)
|
||||||
|
// 如果有售后登记ID,获取登记信息显示
|
||||||
|
if (formData.value.afterSaleId) {
|
||||||
|
const register = await AfterSaleRegisterApi.getAfterSaleRegister(formData.value.afterSaleId)
|
||||||
|
selectedRegisterLabel.value = `登记 #${register.id}(订单 ${register.orderId || '-'})`
|
||||||
|
selectedRegisterId.value = register.id
|
||||||
|
}
|
||||||
|
ensureDefaultsForExisting()
|
||||||
|
} finally {
|
||||||
|
formLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
|
||||||
|
|
||||||
|
/** 提交表单 */
|
||||||
|
const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
|
||||||
|
const submitForm = async () => {
|
||||||
|
// 校验表单
|
||||||
|
await formRef.value.validate()
|
||||||
|
// 提交请求
|
||||||
|
formLoading.value = true
|
||||||
|
try {
|
||||||
|
let data = formData.value as unknown as AfterSaleProcess
|
||||||
|
|
||||||
|
// 如果上传了处理凭证,自动设置为处理完成状态
|
||||||
|
if (data.processEvidence && data.processEvidence.trim() !== '') {
|
||||||
|
data = {
|
||||||
|
...data,
|
||||||
|
processStatus: 2, // 处理完成
|
||||||
|
finishTime: nowString()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (formType.value === 'create') {
|
||||||
|
await AfterSaleProcessApi.createAfterSaleProcess(data)
|
||||||
|
message.success(t('common.createSuccess'))
|
||||||
|
} else {
|
||||||
|
await AfterSaleProcessApi.updateAfterSaleProcess(data)
|
||||||
|
message.success(t('common.updateSuccess'))
|
||||||
|
}
|
||||||
|
dialogVisible.value = false
|
||||||
|
// 发送操作成功的事件
|
||||||
|
emit('success')
|
||||||
|
} finally {
|
||||||
|
formLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 重置表单 */
|
||||||
|
const resetForm = () => {
|
||||||
|
formData.value = {
|
||||||
|
id: undefined,
|
||||||
|
afterSaleId: undefined,
|
||||||
|
processType: undefined,
|
||||||
|
processCount: undefined,
|
||||||
|
processResult: undefined,
|
||||||
|
processEvidence: '',
|
||||||
|
relatedOrderId: undefined,
|
||||||
|
processStatus: 1, // 新增时默认为处理中状态
|
||||||
|
processFailReason: undefined,
|
||||||
|
processUser: currentUserNickname.value || undefined,
|
||||||
|
processTime: nowString(),
|
||||||
|
finishTime: undefined,
|
||||||
|
userRating: undefined
|
||||||
|
}
|
||||||
|
selectedRegisterLabel.value = ''
|
||||||
|
selectedRegisterId.value = undefined
|
||||||
|
formRef.value?.resetFields()
|
||||||
|
}
|
||||||
|
|
||||||
|
const ensureDefaultsForExisting = () => {
|
||||||
|
if (!formData.value.processUser) {
|
||||||
|
formData.value.processUser = currentUserNickname.value || undefined
|
||||||
|
}
|
||||||
|
if (!formData.value.processTime) {
|
||||||
|
formData.value.processTime = nowString()
|
||||||
|
}
|
||||||
|
if (formData.value.processStatus === 2 && !formData.value.finishTime) {
|
||||||
|
formData.value.finishTime = nowString()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
405
src/views/aftersale/aftersaleprocess/index.vue
Normal file
405
src/views/aftersale/aftersaleprocess/index.vue
Normal file
@@ -0,0 +1,405 @@
|
|||||||
|
<template>
|
||||||
|
<ContentWrap>
|
||||||
|
<!-- 搜索工作栏 -->
|
||||||
|
<el-form
|
||||||
|
class="-mb-15px"
|
||||||
|
:model="queryParams"
|
||||||
|
ref="queryFormRef"
|
||||||
|
:inline="true"
|
||||||
|
label-width="120px"
|
||||||
|
>
|
||||||
|
<el-form-item label="售后登记号" prop="afterSaleId">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.afterSaleId"
|
||||||
|
placeholder="请输入售后登记号"
|
||||||
|
clearable
|
||||||
|
@keyup.enter="handleQuery"
|
||||||
|
class="!w-240px"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="处理类型" prop="processType">
|
||||||
|
<el-select
|
||||||
|
v-model="queryParams.processType"
|
||||||
|
placeholder="请选择处理类型"
|
||||||
|
clearable
|
||||||
|
filterable
|
||||||
|
class="!w-240px"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in processTypeOptions"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="处理结果" prop="processResult">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.processResult"
|
||||||
|
placeholder="请输入处理结果"
|
||||||
|
clearable
|
||||||
|
@keyup.enter="handleQuery"
|
||||||
|
class="!w-240px"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="处理状态" prop="processStatus">
|
||||||
|
<el-select
|
||||||
|
v-model="queryParams.processStatus"
|
||||||
|
placeholder="请选择处理状态"
|
||||||
|
clearable
|
||||||
|
filterable
|
||||||
|
class="!w-240px"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in processStatusOptions"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="处理人" prop="processUser">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.processUser"
|
||||||
|
placeholder="请输入处理人"
|
||||||
|
clearable
|
||||||
|
@keyup.enter="handleQuery"
|
||||||
|
class="!w-240px"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="处理完成时间" prop="finishTime">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="queryParams.finishTime"
|
||||||
|
value-format="YYYY-MM-DD HH:mm:ss"
|
||||||
|
type="daterange"
|
||||||
|
start-placeholder="开始日期"
|
||||||
|
end-placeholder="结束日期"
|
||||||
|
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
||||||
|
class="!w-220px"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
|
||||||
|
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
plain
|
||||||
|
@click="openForm('create')"
|
||||||
|
v-hasPermi="['erp:after-sale-process:create']"
|
||||||
|
>
|
||||||
|
<Icon icon="ep:plus" class="mr-5px" /> 新增
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
type="success"
|
||||||
|
plain
|
||||||
|
@click="handleExport"
|
||||||
|
:loading="exportLoading"
|
||||||
|
v-hasPermi="['erp:after-sale-process:export']"
|
||||||
|
>
|
||||||
|
<Icon icon="ep:download" class="mr-5px" /> 导出
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
type="danger"
|
||||||
|
plain
|
||||||
|
:disabled="isEmpty(checkedIds)"
|
||||||
|
@click="handleDeleteBatch"
|
||||||
|
v-hasPermi="['erp:after-sale-process:delete']"
|
||||||
|
>
|
||||||
|
<Icon icon="ep:delete" class="mr-5px" /> 批量删除
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</ContentWrap>
|
||||||
|
|
||||||
|
<!-- 列表 -->
|
||||||
|
<ContentWrap>
|
||||||
|
<el-table
|
||||||
|
row-key="id"
|
||||||
|
v-loading="loading"
|
||||||
|
:data="list"
|
||||||
|
:stripe="true"
|
||||||
|
:show-overflow-tooltip="true"
|
||||||
|
@selection-change="handleRowCheckboxChange"
|
||||||
|
>
|
||||||
|
<el-table-column type="selection" width="55" />
|
||||||
|
<el-table-column label="序号" align="center" type="index" width="80" />
|
||||||
|
<el-table-column
|
||||||
|
label="处理类型"
|
||||||
|
align="center"
|
||||||
|
prop="processType"
|
||||||
|
:formatter="formatProcessType"
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
label="处理状态"
|
||||||
|
align="center"
|
||||||
|
prop="processStatus"
|
||||||
|
:formatter="formatProcessStatus"
|
||||||
|
/>
|
||||||
|
<el-table-column label="处理人" align="center" prop="processUser" />
|
||||||
|
<el-table-column label="用户评价" align="center" prop="userRating">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-tooltip :content="`${scope.row.userRating || 0} 分`" placement="top">
|
||||||
|
<el-icon size="20" :style="{ color: getRatingColor(scope.row.userRating) }">
|
||||||
|
<Star />
|
||||||
|
</el-icon>
|
||||||
|
</el-tooltip>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
label="创建时间"
|
||||||
|
align="center"
|
||||||
|
prop="createTime"
|
||||||
|
:formatter="dateFormatter"
|
||||||
|
width="180px"
|
||||||
|
/>
|
||||||
|
<el-table-column label="操作" align="center" min-width="200px">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-button link type="primary" @click="openDetail(scope.row)">详情</el-button>
|
||||||
|
<el-button
|
||||||
|
link
|
||||||
|
type="primary"
|
||||||
|
@click="openForm('update', scope.row.id)"
|
||||||
|
v-hasPermi="['erp:after-sale-process:update']"
|
||||||
|
>
|
||||||
|
编辑
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
link
|
||||||
|
type="success"
|
||||||
|
@click="handleProcessComplete(scope.row)"
|
||||||
|
v-if="scope.row.processStatus === 1"
|
||||||
|
v-hasPermi="['erp:after-sale-process:update']"
|
||||||
|
>
|
||||||
|
处理完成
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
link
|
||||||
|
type="danger"
|
||||||
|
@click="handleDelete(scope.row.id)"
|
||||||
|
v-hasPermi="['erp:after-sale-process:delete']"
|
||||||
|
>
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<!-- 分页 -->
|
||||||
|
<Pagination
|
||||||
|
:total="total"
|
||||||
|
v-model:page="queryParams.pageNo"
|
||||||
|
v-model:limit="queryParams.pageSize"
|
||||||
|
@pagination="getList"
|
||||||
|
/>
|
||||||
|
</ContentWrap>
|
||||||
|
|
||||||
|
<!-- 表单弹窗:添加/修改 -->
|
||||||
|
<AfterSaleProcessForm ref="formRef" @success="getList" />
|
||||||
|
|
||||||
|
<!-- 详情弹窗 -->
|
||||||
|
<el-dialog v-model="detailVisible" title="售后处理详情" width="560px">
|
||||||
|
<el-descriptions v-if="detailRow" :column="2" border>
|
||||||
|
<el-descriptions-item label="售后登记号">{{ detailRow.afterSaleId }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="处理类型">{{ formatProcessType(detailRow, null as any, detailRow.processType as any) }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="处理数量">{{ detailRow.processCount ?? '-' }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="业务订单号">{{ detailRow.relatedOrderId ?? '-' }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="处理结果">{{ detailRow.processResult ?? '-' }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="失败原因">{{ detailRow.processFailReason ?? '-' }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="处理状态">{{ formatProcessStatus(detailRow, null as any, detailRow.processStatus as any) }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="处理人">{{ detailRow.processUser ?? '-' }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="处理时间">{{ dateFormatter(detailRow, null as any, detailRow.processTime as any) }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="处理完成时间">{{ dateFormatter(detailRow, null as any, detailRow.finishTime as any) }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="用户评价">
|
||||||
|
<el-tooltip :content="`${detailRow.userRating || 0} 分`" placement="top">
|
||||||
|
<el-icon size="20" :style="{ color: getRatingColor(detailRow.userRating) }">
|
||||||
|
<Star />
|
||||||
|
</el-icon>
|
||||||
|
</el-tooltip>
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="创建时间">{{ dateFormatter(detailRow, null as any, (detailRow as any).createTime) }}</el-descriptions-item>
|
||||||
|
</el-descriptions>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="detailVisible = false">关闭</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import dayjs from 'dayjs'
|
||||||
|
import { isEmpty } from '@/utils/is'
|
||||||
|
import { dateFormatter } from '@/utils/formatTime'
|
||||||
|
import download from '@/utils/download'
|
||||||
|
import { AfterSaleProcessApi, AfterSaleProcess } from '@/api/erp/aftersale/aftersaleprocess'
|
||||||
|
import { useUserStoreWithOut } from '@/store/modules/user'
|
||||||
|
import AfterSaleProcessForm from './AfterSaleProcessForm.vue'
|
||||||
|
import { Star } from '@element-plus/icons-vue'
|
||||||
|
|
||||||
|
const processTypeOptions = [
|
||||||
|
{ label: '退货入库', value: 1 },
|
||||||
|
{ label: '换货出库', value: 2 },
|
||||||
|
{ label: '维修处理', value: 3 },
|
||||||
|
{ label: '退款处理', value: 4 },
|
||||||
|
{ label: '取消处理', value: 5 },
|
||||||
|
{ label: '其他', value: 6 }
|
||||||
|
]
|
||||||
|
|
||||||
|
const processStatusOptions = [
|
||||||
|
{ label: '处理中', value: 1 },
|
||||||
|
{ label: '处理完成', value: 2 },
|
||||||
|
{ label: '处理失败', value: 3 }
|
||||||
|
]
|
||||||
|
|
||||||
|
const optionLabel = (options: { label: string; value: number }[], value?: number | string) => {
|
||||||
|
if (value === undefined || value === null || value === '') return '-'
|
||||||
|
const match = options.find((item) => item.value === value || item.value === Number(value))
|
||||||
|
return match?.label ?? String(value)
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatProcessType = (_row: AfterSaleProcess, _column: any, value: number) =>
|
||||||
|
optionLabel(processTypeOptions, value)
|
||||||
|
const formatProcessStatus = (_row: AfterSaleProcess, _column: any, value: number) =>
|
||||||
|
optionLabel(processStatusOptions, value)
|
||||||
|
|
||||||
|
/** ERP 售后处理 列表 */
|
||||||
|
defineOptions({ name: 'AfterSaleProcess' })
|
||||||
|
|
||||||
|
const message = useMessage() // 消息弹窗
|
||||||
|
const { t } = useI18n() // 国际化
|
||||||
|
const userStore = useUserStoreWithOut()
|
||||||
|
|
||||||
|
const loading = ref(true) // 列表的加载中
|
||||||
|
const list = ref<AfterSaleProcess[]>([]) // 列表的数据
|
||||||
|
const total = ref(0) // 列表的总页数
|
||||||
|
const queryParams = reactive({
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
afterSaleId: undefined,
|
||||||
|
processType: undefined,
|
||||||
|
processCount: undefined,
|
||||||
|
processResult: undefined,
|
||||||
|
processEvidence: undefined,
|
||||||
|
relatedOrderId: undefined,
|
||||||
|
processStatus: undefined,
|
||||||
|
processFailReason: undefined,
|
||||||
|
processUser: undefined,
|
||||||
|
processTime: [],
|
||||||
|
finishTime: [],
|
||||||
|
createTime: [],
|
||||||
|
userRating: undefined
|
||||||
|
})
|
||||||
|
const queryFormRef = ref() // 搜索的表单
|
||||||
|
const exportLoading = ref(false) // 导出的加载中
|
||||||
|
|
||||||
|
/** 查询列表 */
|
||||||
|
const getList = async () => {
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
const data = await AfterSaleProcessApi.getAfterSaleProcessPage(queryParams)
|
||||||
|
list.value = data.list
|
||||||
|
total.value = data.total
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
const handleQuery = () => {
|
||||||
|
queryParams.pageNo = 1
|
||||||
|
getList()
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 重置按钮操作 */
|
||||||
|
const resetQuery = () => {
|
||||||
|
queryFormRef.value.resetFields()
|
||||||
|
handleQuery()
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 添加/修改操作 */
|
||||||
|
const formRef = ref()
|
||||||
|
const openForm = (type: string, id?: number) => {
|
||||||
|
formRef.value.open(type, id)
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 删除按钮操作 */
|
||||||
|
const handleDelete = async (id: number) => {
|
||||||
|
try {
|
||||||
|
// 删除的二次确认
|
||||||
|
await message.delConfirm()
|
||||||
|
// 发起删除
|
||||||
|
await AfterSaleProcessApi.deleteAfterSaleProcess(id)
|
||||||
|
message.success(t('common.delSuccess'))
|
||||||
|
// 刷新列表
|
||||||
|
await getList()
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 处理完成操作 */
|
||||||
|
const handleProcessComplete = async (row: AfterSaleProcess) => {
|
||||||
|
try {
|
||||||
|
// 处理完成的二次确认
|
||||||
|
await message.confirm('确认处理完成吗?')
|
||||||
|
// 更新状态为处理完成
|
||||||
|
const updateData = {
|
||||||
|
...row,
|
||||||
|
processStatus: 2,
|
||||||
|
processUser: userStore.getUser?.nickname || row.processUser,
|
||||||
|
finishTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
|
||||||
|
}
|
||||||
|
await AfterSaleProcessApi.updateAfterSaleProcess(updateData)
|
||||||
|
message.success('处理完成')
|
||||||
|
// 刷新列表
|
||||||
|
await getList()
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 批量删除ERP 售后处理 */
|
||||||
|
const handleDeleteBatch = async () => {
|
||||||
|
try {
|
||||||
|
// 删除的二次确认
|
||||||
|
await message.delConfirm()
|
||||||
|
await AfterSaleProcessApi.deleteAfterSaleProcessList(checkedIds.value);
|
||||||
|
message.success(t('common.delSuccess'))
|
||||||
|
await getList();
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
|
||||||
|
const checkedIds = ref<number[]>([])
|
||||||
|
const handleRowCheckboxChange = (records: AfterSaleProcess[]) => {
|
||||||
|
checkedIds.value = records.map((item) => item.id);
|
||||||
|
}
|
||||||
|
|
||||||
|
const detailVisible = ref(false)
|
||||||
|
const detailRow = ref<AfterSaleProcess | null>(null)
|
||||||
|
const openDetail = (row: AfterSaleProcess) => {
|
||||||
|
detailRow.value = row
|
||||||
|
detailVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 导出按钮操作 */
|
||||||
|
const handleExport = async () => {
|
||||||
|
try {
|
||||||
|
// 导出的二次确认
|
||||||
|
await message.exportConfirm()
|
||||||
|
// 发起导出
|
||||||
|
exportLoading.value = true
|
||||||
|
const data = await AfterSaleProcessApi.exportAfterSaleProcess(queryParams)
|
||||||
|
download.excel(data, 'ERP 售后处理.xls')
|
||||||
|
} catch {
|
||||||
|
} finally {
|
||||||
|
exportLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 根据评分获取颜色 */
|
||||||
|
const getRatingColor = (rating?: number) => {
|
||||||
|
if (!rating || rating === 0) return '#cccccc' // 灰色表示无评价
|
||||||
|
if (rating < 4) return '#ff4d4f' // 红色表示差评
|
||||||
|
if (rating < 7) return '#ffa940' // 橙色表示一般
|
||||||
|
if (rating < 9) return '#52c41a' // 绿色表示好评
|
||||||
|
return '#1890ff' // 蓝色表示优秀
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 初始化 **/
|
||||||
|
onMounted(() => {
|
||||||
|
getList()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
307
src/views/aftersale/aftersaleregister/AfterSaleRegisterForm.vue
Normal file
307
src/views/aftersale/aftersaleregister/AfterSaleRegisterForm.vue
Normal file
@@ -0,0 +1,307 @@
|
|||||||
|
<template>
|
||||||
|
<Dialog :title="dialogTitle" v-model="dialogVisible">
|
||||||
|
<el-form
|
||||||
|
ref="formRef"
|
||||||
|
:model="formData"
|
||||||
|
:rules="formRules"
|
||||||
|
label-width="100px"
|
||||||
|
v-loading="formLoading"
|
||||||
|
>
|
||||||
|
<el-form-item label="销售订单" prop="orderId">
|
||||||
|
<el-input
|
||||||
|
v-model="selectedOrderNo"
|
||||||
|
placeholder="请选择销售订单"
|
||||||
|
readonly
|
||||||
|
@click="openOrderSelector"
|
||||||
|
style="cursor: pointer"
|
||||||
|
>
|
||||||
|
<template #append>
|
||||||
|
<el-button :icon="Search" @click="openOrderSelector" />
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="售后类型" prop="afterSaleType">
|
||||||
|
<el-select v-model="formData.afterSaleType" placeholder="请选择售后类型" filterable>
|
||||||
|
<el-option
|
||||||
|
v-for="item in afterSaleTypeOptions"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="申请原因" prop="applyReason">
|
||||||
|
<el-input v-model="formData.applyReason" placeholder="请输入申请原因" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="联系人" prop="contactName">
|
||||||
|
<el-input v-model="formData.contactName" placeholder="请输入联系人" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="联系电话" prop="contactPhone">
|
||||||
|
<el-input v-model="formData.contactPhone" placeholder="请输入联系电话" maxlength="20" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="申请人" prop="applicant">
|
||||||
|
<el-input v-model="formData.applicant" placeholder="请输入申请人" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
|
||||||
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||||
|
</template>
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
|
<!-- 销售订单选择弹窗 -->
|
||||||
|
<Dialog v-model="orderSelectorVisible" title="选择销售订单" width="70%" :appendToBody="true">
|
||||||
|
<ContentWrap>
|
||||||
|
<el-form
|
||||||
|
ref="orderQueryFormRef"
|
||||||
|
:inline="true"
|
||||||
|
:model="orderQueryParams"
|
||||||
|
class="-mb-15px"
|
||||||
|
label-width="100px"
|
||||||
|
>
|
||||||
|
<el-form-item label="订单单号" prop="no">
|
||||||
|
<el-input
|
||||||
|
v-model="orderQueryParams.no"
|
||||||
|
class="!w-200px"
|
||||||
|
clearable
|
||||||
|
placeholder="请输入订单单号"
|
||||||
|
@keyup.enter="handleOrderQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button @click="handleOrderQuery">
|
||||||
|
<Icon class="mr-5px" icon="ep:search" />
|
||||||
|
搜索
|
||||||
|
</el-button>
|
||||||
|
<el-button @click="resetOrderQuery">
|
||||||
|
<Icon class="mr-5px" icon="ep:refresh" />
|
||||||
|
重置
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<el-table v-loading="orderLoading" :data="orderList" show-overflow-tooltip>
|
||||||
|
<el-table-column label="#" width="55">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-radio :value="row.id" v-model="selectedOrderId" @change="handleOrderSelected(row)">
|
||||||
|
|
||||||
|
</el-radio>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="订单单号" align="center" prop="no" min-width="140" />
|
||||||
|
<el-table-column label="客户" align="center" prop="customerName" min-width="120" />
|
||||||
|
<el-table-column
|
||||||
|
label="订单时间"
|
||||||
|
align="center"
|
||||||
|
prop="orderTime"
|
||||||
|
:formatter="dateFormatter"
|
||||||
|
width="160px"
|
||||||
|
/>
|
||||||
|
</el-table>
|
||||||
|
<Pagination
|
||||||
|
v-model:limit="orderQueryParams.pageSize"
|
||||||
|
v-model:page="orderQueryParams.pageNo"
|
||||||
|
:total="orderTotal"
|
||||||
|
@pagination="getOrderList"
|
||||||
|
/>
|
||||||
|
</ContentWrap>
|
||||||
|
</Dialog>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { Search } from '@element-plus/icons-vue'
|
||||||
|
import dayjs from 'dayjs'
|
||||||
|
import { dateFormatter } from '@/utils/formatTime'
|
||||||
|
import { AfterSaleRegisterApi, AfterSaleRegister } from '@/api/erp/aftersale/aftersaleregister'
|
||||||
|
import { SaleOrderApi, SaleOrderVO } from '@/api/erp/sale/order'
|
||||||
|
import { useUserStoreWithOut } from '@/store/modules/user'
|
||||||
|
|
||||||
|
/** ERP 售后登记 表单 */
|
||||||
|
defineOptions({ name: 'AfterSaleRegisterForm' })
|
||||||
|
|
||||||
|
const afterSaleTypeOptions = [
|
||||||
|
{ label: '退货', value: 1 },
|
||||||
|
{ label: '换货', value: 2 },
|
||||||
|
{ label: '维修', value: 3 },
|
||||||
|
{ label: '退款', value: 4 }
|
||||||
|
]
|
||||||
|
|
||||||
|
const applyStatusOptions = [
|
||||||
|
{ label: '待审核', value: 1 },
|
||||||
|
{ label: '审核通过', value: 2 },
|
||||||
|
{ label: '审核驳回', value: 3 },
|
||||||
|
{ label: '已取消', value: 4 }
|
||||||
|
]
|
||||||
|
|
||||||
|
// 销售订单选择器相关
|
||||||
|
const orderSelectorVisible = ref(false)
|
||||||
|
const selectedOrderId = ref<number>()
|
||||||
|
const selectedOrderNo = ref<string>('')
|
||||||
|
const orderLoading = ref(false)
|
||||||
|
const orderList = ref<SaleOrderVO[]>([])
|
||||||
|
const orderTotal = ref(0)
|
||||||
|
const orderQueryParams = ref({
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
no: ''
|
||||||
|
})
|
||||||
|
const orderQueryFormRef = ref()
|
||||||
|
|
||||||
|
/** 打开订单选择器 */
|
||||||
|
const openOrderSelector = () => {
|
||||||
|
orderSelectorVisible.value = true
|
||||||
|
orderQueryParams.value = {
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
no: ''
|
||||||
|
}
|
||||||
|
getOrderList()
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 查询订单列表 */
|
||||||
|
const getOrderList = async () => {
|
||||||
|
orderLoading.value = true
|
||||||
|
try {
|
||||||
|
const data = await SaleOrderApi.getSaleOrderPage(orderQueryParams.value)
|
||||||
|
orderList.value = data.list
|
||||||
|
orderTotal.value = data.total
|
||||||
|
} finally {
|
||||||
|
orderLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 搜索订单 */
|
||||||
|
const handleOrderQuery = () => {
|
||||||
|
orderQueryParams.value.pageNo = 1
|
||||||
|
getOrderList()
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 重置订单查询 */
|
||||||
|
const resetOrderQuery = () => {
|
||||||
|
orderQueryParams.value = {
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
no: ''
|
||||||
|
}
|
||||||
|
getOrderList()
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 选中订单 */
|
||||||
|
const handleOrderSelected = (row: SaleOrderVO) => {
|
||||||
|
formData.value.orderId = row.id
|
||||||
|
selectedOrderNo.value = row.no || ''
|
||||||
|
selectedOrderId.value = row.id
|
||||||
|
orderSelectorVisible.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
const { t } = useI18n() // 国际化
|
||||||
|
const message = useMessage() // 消息弹窗
|
||||||
|
const userStore = useUserStoreWithOut()
|
||||||
|
const currentUserNickname = computed(() => userStore.getUser?.nickname || '')
|
||||||
|
const nowString = () => dayjs().format('YYYY-MM-DD HH:mm:ss')
|
||||||
|
|
||||||
|
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||||
|
const dialogTitle = ref('') // 弹窗的标题
|
||||||
|
const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
|
||||||
|
const formType = ref('') // 表单的类型:create - 新增;update - 修改
|
||||||
|
const formData = ref<Partial<AfterSaleRegister>>({
|
||||||
|
id: undefined,
|
||||||
|
orderId: undefined,
|
||||||
|
orderItemId: undefined,
|
||||||
|
afterSaleType: undefined,
|
||||||
|
applyReason: undefined,
|
||||||
|
contactName: undefined,
|
||||||
|
contactPhone: undefined,
|
||||||
|
applyStatus: undefined,
|
||||||
|
rejectReason: undefined,
|
||||||
|
applicant: undefined,
|
||||||
|
auditUser: undefined,
|
||||||
|
auditTime: undefined
|
||||||
|
})
|
||||||
|
const formRules = reactive({
|
||||||
|
afterSaleType: [{ required: true, message: '售后类型不能为空', trigger: 'change' }],
|
||||||
|
applyReason: [{ required: true, message: '申请原因不能为空', trigger: 'blur' }]
|
||||||
|
})
|
||||||
|
const formRef = ref() // 表单 Ref
|
||||||
|
|
||||||
|
/** 打开弹窗 */
|
||||||
|
const open = async (type: string, id?: number) => {
|
||||||
|
dialogVisible.value = true
|
||||||
|
dialogTitle.value = t('action.' + type)
|
||||||
|
formType.value = type
|
||||||
|
resetForm()
|
||||||
|
// 修改时,设置数据
|
||||||
|
if (id) {
|
||||||
|
formLoading.value = true
|
||||||
|
try {
|
||||||
|
formData.value = await AfterSaleRegisterApi.getAfterSaleRegister(id)
|
||||||
|
// 如果有订单ID,获取订单号显示
|
||||||
|
if (formData.value.orderId) {
|
||||||
|
const order = await SaleOrderApi.getSaleOrder(formData.value.orderId)
|
||||||
|
selectedOrderNo.value = order.no || ''
|
||||||
|
selectedOrderId.value = order.id
|
||||||
|
}
|
||||||
|
ensureDefaultsForExisting()
|
||||||
|
} finally {
|
||||||
|
formLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
|
||||||
|
|
||||||
|
/** 提交表单 */
|
||||||
|
const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
|
||||||
|
const submitForm = async () => {
|
||||||
|
// 校验表单(当前无必填规则,直接通过)
|
||||||
|
// 提交请求
|
||||||
|
formLoading.value = true
|
||||||
|
try {
|
||||||
|
const data = formData.value as unknown as AfterSaleRegister
|
||||||
|
if (formType.value === 'create') {
|
||||||
|
await AfterSaleRegisterApi.createAfterSaleRegister(data)
|
||||||
|
message.success(t('common.createSuccess'))
|
||||||
|
} else {
|
||||||
|
await AfterSaleRegisterApi.updateAfterSaleRegister(data)
|
||||||
|
message.success(t('common.updateSuccess'))
|
||||||
|
}
|
||||||
|
dialogVisible.value = false
|
||||||
|
// 发送操作成功的事件
|
||||||
|
emit('success')
|
||||||
|
} finally {
|
||||||
|
formLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 重置表单 */
|
||||||
|
const resetForm = () => {
|
||||||
|
formData.value = {
|
||||||
|
id: undefined,
|
||||||
|
orderId: undefined,
|
||||||
|
orderItemId: undefined,
|
||||||
|
afterSaleType: undefined,
|
||||||
|
applyReason: undefined,
|
||||||
|
contactName: undefined,
|
||||||
|
contactPhone: undefined,
|
||||||
|
applyStatus: 1, // 新增时默认为待审核状态
|
||||||
|
rejectReason: undefined,
|
||||||
|
applicant: currentUserNickname.value || undefined,
|
||||||
|
auditUser: undefined,
|
||||||
|
auditTime: undefined
|
||||||
|
}
|
||||||
|
selectedOrderNo.value = ''
|
||||||
|
selectedOrderId.value = undefined
|
||||||
|
formRef.value?.resetFields()
|
||||||
|
}
|
||||||
|
|
||||||
|
const ensureDefaultsForExisting = () => {
|
||||||
|
if (!formData.value.applicant) {
|
||||||
|
formData.value.applicant = currentUserNickname.value || undefined
|
||||||
|
}
|
||||||
|
if (formData.value.applyStatus === 2) {
|
||||||
|
if (!formData.value.auditUser) {
|
||||||
|
formData.value.auditUser = currentUserNickname.value || undefined
|
||||||
|
}
|
||||||
|
if (!formData.value.auditTime) {
|
||||||
|
formData.value.auditTime = nowString()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
391
src/views/aftersale/aftersaleregister/index.vue
Normal file
391
src/views/aftersale/aftersaleregister/index.vue
Normal file
@@ -0,0 +1,391 @@
|
|||||||
|
<template>
|
||||||
|
<ContentWrap>
|
||||||
|
<!-- 搜索工作栏 -->
|
||||||
|
<el-form
|
||||||
|
class="-mb-15px"
|
||||||
|
:model="queryParams"
|
||||||
|
ref="queryFormRef"
|
||||||
|
:inline="true"
|
||||||
|
label-width="120px"
|
||||||
|
>
|
||||||
|
<el-form-item label="销售订单" prop="orderId">
|
||||||
|
<el-select
|
||||||
|
v-model="queryParams.orderId"
|
||||||
|
placeholder="请选择销售订单"
|
||||||
|
clearable
|
||||||
|
filterable
|
||||||
|
class="!w-240px"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in saleOrderOptions"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.no"
|
||||||
|
:value="item.id"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="售后类型" prop="afterSaleType">
|
||||||
|
<el-select
|
||||||
|
v-model="queryParams.afterSaleType"
|
||||||
|
placeholder="请选择售后类型"
|
||||||
|
clearable
|
||||||
|
filterable
|
||||||
|
class="!w-240px"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in afterSaleTypeOptions"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="申请原因" prop="applyReason">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.applyReason"
|
||||||
|
placeholder="请输入申请原因"
|
||||||
|
clearable
|
||||||
|
@keyup.enter="handleQuery"
|
||||||
|
class="!w-240px"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="申请状态" prop="applyStatus">
|
||||||
|
<el-select
|
||||||
|
v-model="queryParams.applyStatus"
|
||||||
|
placeholder="请选择申请状态"
|
||||||
|
clearable
|
||||||
|
filterable
|
||||||
|
class="!w-240px"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in applyStatusOptions"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="申请人" prop="applicant">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.applicant"
|
||||||
|
placeholder="请输入申请人"
|
||||||
|
clearable
|
||||||
|
@keyup.enter="handleQuery"
|
||||||
|
class="!w-240px"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="审核人" prop="auditUser">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.auditUser"
|
||||||
|
placeholder="请输入审核人"
|
||||||
|
clearable
|
||||||
|
@keyup.enter="handleQuery"
|
||||||
|
class="!w-240px"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
|
||||||
|
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
plain
|
||||||
|
@click="openForm('create')"
|
||||||
|
v-hasPermi="['erp:after-sale-register:create']"
|
||||||
|
>
|
||||||
|
<Icon icon="ep:plus" class="mr-5px" /> 新增
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
type="success"
|
||||||
|
plain
|
||||||
|
@click="handleExport"
|
||||||
|
:loading="exportLoading"
|
||||||
|
v-hasPermi="['erp:after-sale-register:export']"
|
||||||
|
>
|
||||||
|
<Icon icon="ep:download" class="mr-5px" /> 导出
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
type="danger"
|
||||||
|
plain
|
||||||
|
:disabled="isEmpty(checkedIds)"
|
||||||
|
@click="handleDeleteBatch"
|
||||||
|
v-hasPermi="['erp:after-sale-register:delete']"
|
||||||
|
>
|
||||||
|
<Icon icon="ep:delete" class="mr-5px" /> 批量删除
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</ContentWrap>
|
||||||
|
|
||||||
|
<!-- 列表 -->
|
||||||
|
<ContentWrap>
|
||||||
|
<el-table
|
||||||
|
row-key="id"
|
||||||
|
v-loading="loading"
|
||||||
|
:data="list"
|
||||||
|
:stripe="true"
|
||||||
|
:show-overflow-tooltip="true"
|
||||||
|
@selection-change="handleRowCheckboxChange"
|
||||||
|
>
|
||||||
|
<el-table-column type="selection" width="55" />
|
||||||
|
<el-table-column label="序号" align="center" type="index" width="80" />
|
||||||
|
<el-table-column
|
||||||
|
label="售后类型"
|
||||||
|
align="center"
|
||||||
|
prop="afterSaleType"
|
||||||
|
:formatter="formatAfterSaleType"
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
label="申请状态"
|
||||||
|
align="center"
|
||||||
|
prop="applyStatus"
|
||||||
|
:formatter="formatApplyStatus"
|
||||||
|
/>
|
||||||
|
<el-table-column label="申请人" align="center" prop="applicant" />
|
||||||
|
<el-table-column label="审核人" align="center" prop="auditUser" />
|
||||||
|
<el-table-column
|
||||||
|
label="创建时间"
|
||||||
|
align="center"
|
||||||
|
prop="createTime"
|
||||||
|
:formatter="dateFormatter"
|
||||||
|
width="180px"
|
||||||
|
/>
|
||||||
|
<el-table-column label="操作" align="center" min-width="200px">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-button link type="primary" @click="openDetail(scope.row)">详情</el-button>
|
||||||
|
<el-button
|
||||||
|
link
|
||||||
|
type="primary"
|
||||||
|
@click="openForm('update', scope.row.id)"
|
||||||
|
v-hasPermi="['erp:after-sale-register:update']"
|
||||||
|
>
|
||||||
|
编辑
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
link
|
||||||
|
type="success"
|
||||||
|
@click="handleAudit(scope.row)"
|
||||||
|
v-if="scope.row.applyStatus === 1"
|
||||||
|
v-hasPermi="['erp:after-sale-register:update']"
|
||||||
|
>
|
||||||
|
审核通过
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
link
|
||||||
|
type="danger"
|
||||||
|
@click="handleDelete(scope.row.id)"
|
||||||
|
v-hasPermi="['erp:after-sale-register:delete']"
|
||||||
|
>
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<!-- 分页 -->
|
||||||
|
<Pagination
|
||||||
|
:total="total"
|
||||||
|
v-model:page="queryParams.pageNo"
|
||||||
|
v-model:limit="queryParams.pageSize"
|
||||||
|
@pagination="getList"
|
||||||
|
/>
|
||||||
|
</ContentWrap>
|
||||||
|
|
||||||
|
<!-- 表单弹窗:添加/修改 -->
|
||||||
|
<AfterSaleRegisterForm ref="formRef" @success="getList" />
|
||||||
|
|
||||||
|
<!-- 详情弹窗 -->
|
||||||
|
<el-dialog v-model="detailVisible" title="售后登记详情" width="560px">
|
||||||
|
<el-descriptions v-if="detailRow" :column="2" border>
|
||||||
|
<el-descriptions-item label="销售订单">{{ detailRow.orderId }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="售后类型">{{ formatAfterSaleType(detailRow, null as any, detailRow.afterSaleType as any) }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="申请原因">{{ detailRow.applyReason ?? '-' }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="联系人">{{ detailRow.contactName ?? '-' }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="联系电话">{{ detailRow.contactPhone ?? '-' }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="申请状态">{{ formatApplyStatus(detailRow, null as any, detailRow.applyStatus as any) }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="驳回原因">{{ detailRow.rejectReason ?? '-' }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="申请人">{{ detailRow.applicant ?? '-' }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="审核人">{{ detailRow.auditUser ?? '-' }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="审核时间">{{ dateFormatter(detailRow, null as any, detailRow.auditTime as any) }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="创建时间">{{ dateFormatter(detailRow, null as any, (detailRow as any).createTime) }}</el-descriptions-item>
|
||||||
|
</el-descriptions>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="detailVisible = false">关闭</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import dayjs from 'dayjs'
|
||||||
|
import { isEmpty } from '@/utils/is'
|
||||||
|
import { dateFormatter } from '@/utils/formatTime'
|
||||||
|
import download from '@/utils/download'
|
||||||
|
import { AfterSaleRegisterApi, AfterSaleRegister } from '@/api/erp/aftersale/aftersaleregister'
|
||||||
|
import { SaleOrderApi, SaleOrderVO } from '@/api/erp/sale/order'
|
||||||
|
import { useUserStoreWithOut } from '@/store/modules/user'
|
||||||
|
import AfterSaleRegisterForm from './AfterSaleRegisterForm.vue'
|
||||||
|
|
||||||
|
const afterSaleTypeOptions = [
|
||||||
|
{ label: '退货', value: 1 },
|
||||||
|
{ label: '换货', value: 2 },
|
||||||
|
{ label: '维修', value: 3 },
|
||||||
|
{ label: '退款', value: 4 }
|
||||||
|
]
|
||||||
|
|
||||||
|
const applyStatusOptions = [
|
||||||
|
{ label: '待审核', value: 1 },
|
||||||
|
{ label: '审核通过', value: 2 },
|
||||||
|
{ label: '审核驳回', value: 3 },
|
||||||
|
{ label: '已取消', value: 4 }
|
||||||
|
]
|
||||||
|
|
||||||
|
const optionLabel = (options: { label: string; value: number }[], value?: number | string) => {
|
||||||
|
if (value === undefined || value === null || value === '') return '-'
|
||||||
|
const match = options.find((item) => item.value === value || item.value === Number(value))
|
||||||
|
return match?.label ?? String(value)
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatAfterSaleType = (_row: AfterSaleRegister, _column: any, value: number) =>
|
||||||
|
optionLabel(afterSaleTypeOptions, value)
|
||||||
|
const formatApplyStatus = (_row: AfterSaleRegister, _column: any, value: number) =>
|
||||||
|
optionLabel(applyStatusOptions, value)
|
||||||
|
|
||||||
|
const saleOrderOptions = ref<SaleOrderVO[]>([])
|
||||||
|
const fetchSaleOrderOptions = async () => {
|
||||||
|
const data = await SaleOrderApi.getSaleOrderPage({ pageNo: 1, pageSize: 100 })
|
||||||
|
saleOrderOptions.value = data.list || []
|
||||||
|
}
|
||||||
|
|
||||||
|
/** ERP 售后登记 列表 */
|
||||||
|
defineOptions({ name: 'AfterSaleRegister' })
|
||||||
|
|
||||||
|
const message = useMessage() // 消息弹窗
|
||||||
|
const { t } = useI18n() // 国际化
|
||||||
|
const userStore = useUserStoreWithOut()
|
||||||
|
|
||||||
|
const loading = ref(true) // 列表的加载中
|
||||||
|
const list = ref<AfterSaleRegister[]>([]) // 列表的数据
|
||||||
|
const total = ref(0) // 列表的总页数
|
||||||
|
const queryParams = reactive({
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
orderId: undefined,
|
||||||
|
orderItemId: undefined,
|
||||||
|
afterSaleType: undefined,
|
||||||
|
applyReason: undefined,
|
||||||
|
contactName: undefined,
|
||||||
|
contactPhone: undefined,
|
||||||
|
applyStatus: undefined,
|
||||||
|
rejectReason: undefined,
|
||||||
|
applicant: undefined,
|
||||||
|
auditUser: undefined,
|
||||||
|
auditTime: [],
|
||||||
|
createTime: []
|
||||||
|
})
|
||||||
|
const queryFormRef = ref() // 搜索的表单
|
||||||
|
const exportLoading = ref(false) // 导出的加载中
|
||||||
|
|
||||||
|
/** 查询列表 */
|
||||||
|
const getList = async () => {
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
const data = await AfterSaleRegisterApi.getAfterSaleRegisterPage(queryParams)
|
||||||
|
list.value = data.list
|
||||||
|
total.value = data.total
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
const handleQuery = () => {
|
||||||
|
queryParams.pageNo = 1
|
||||||
|
getList()
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 重置按钮操作 */
|
||||||
|
const resetQuery = () => {
|
||||||
|
queryFormRef.value.resetFields()
|
||||||
|
handleQuery()
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 添加/修改操作 */
|
||||||
|
const formRef = ref()
|
||||||
|
const openForm = (type: string, id?: number) => {
|
||||||
|
formRef.value.open(type, id)
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 删除按钮操作 */
|
||||||
|
const handleDelete = async (id: number) => {
|
||||||
|
try {
|
||||||
|
// 删除的二次确认
|
||||||
|
await message.delConfirm()
|
||||||
|
// 发起删除
|
||||||
|
await AfterSaleRegisterApi.deleteAfterSaleRegister(id)
|
||||||
|
message.success(t('common.delSuccess'))
|
||||||
|
// 刷新列表
|
||||||
|
await getList()
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 审核通过操作 */
|
||||||
|
const handleAudit = async (row: AfterSaleRegister) => {
|
||||||
|
try {
|
||||||
|
// 审核确认
|
||||||
|
await message.confirm('确认审核通过该售后登记吗?')
|
||||||
|
// 更新状态为审核通过
|
||||||
|
const updateData = {
|
||||||
|
...row,
|
||||||
|
applyStatus: 2,
|
||||||
|
auditUser: userStore.getUser?.nickname || '',
|
||||||
|
auditTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
|
||||||
|
}
|
||||||
|
await AfterSaleRegisterApi.updateAfterSaleRegister(updateData)
|
||||||
|
message.success('审核通过成功')
|
||||||
|
// 刷新列表
|
||||||
|
await getList()
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 批量删除ERP 售后登记 */
|
||||||
|
const handleDeleteBatch = async () => {
|
||||||
|
try {
|
||||||
|
// 删除的二次确认
|
||||||
|
await message.delConfirm()
|
||||||
|
await AfterSaleRegisterApi.deleteAfterSaleRegisterList(checkedIds.value);
|
||||||
|
message.success(t('common.delSuccess'))
|
||||||
|
await getList();
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
|
||||||
|
const checkedIds = ref<number[]>([])
|
||||||
|
const handleRowCheckboxChange = (records: AfterSaleRegister[]) => {
|
||||||
|
checkedIds.value = records.map((item) => item.id);
|
||||||
|
}
|
||||||
|
|
||||||
|
const detailVisible = ref(false)
|
||||||
|
const detailRow = ref<AfterSaleRegister | null>(null)
|
||||||
|
const openDetail = (row: AfterSaleRegister) => {
|
||||||
|
detailRow.value = row
|
||||||
|
detailVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 导出按钮操作 */
|
||||||
|
const handleExport = async () => {
|
||||||
|
try {
|
||||||
|
// 导出的二次确认
|
||||||
|
await message.exportConfirm()
|
||||||
|
// 发起导出
|
||||||
|
exportLoading.value = true
|
||||||
|
const data = await AfterSaleRegisterApi.exportAfterSaleRegister(queryParams)
|
||||||
|
download.excel(data, 'ERP 售后登记.xls')
|
||||||
|
} catch {
|
||||||
|
} finally {
|
||||||
|
exportLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 初始化 **/
|
||||||
|
onMounted(() => {
|
||||||
|
getList()
|
||||||
|
fetchSaleOrderOptions()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
267
src/views/aftersale/aftersalesvisit/AfterSalesVisitForm.vue
Normal file
267
src/views/aftersale/aftersalesvisit/AfterSalesVisitForm.vue
Normal file
@@ -0,0 +1,267 @@
|
|||||||
|
<template>
|
||||||
|
<Dialog :title="dialogTitle" v-model="dialogVisible" width="600px">
|
||||||
|
<el-form
|
||||||
|
ref="formRef"
|
||||||
|
:model="formData"
|
||||||
|
:rules="formRules"
|
||||||
|
label-width="90px"
|
||||||
|
v-loading="formLoading"
|
||||||
|
>
|
||||||
|
<!-- 客户基本信息 -->
|
||||||
|
<el-divider content-position="left">客户信息</el-divider>
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="客户名称" prop="customerName">
|
||||||
|
<el-select
|
||||||
|
v-model="formData.customerName"
|
||||||
|
placeholder="请选择客户"
|
||||||
|
clearable
|
||||||
|
filterable
|
||||||
|
@change="handleCustomerChange"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="customer in customerList"
|
||||||
|
:key="customer.id"
|
||||||
|
:label="customer.name"
|
||||||
|
:value="customer.name"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="联系方式" prop="contactInfo">
|
||||||
|
<el-input v-model="formData.contactInfo" placeholder="请输入联系方式" clearable />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="客户类型" prop="customerType">
|
||||||
|
<el-select v-model="formData.customerType" placeholder="请选择客户类型" clearable>
|
||||||
|
<el-option
|
||||||
|
v-for="item in customerTypeOptions"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="客户用途" prop="customerUsage">
|
||||||
|
<el-input v-model="formData.customerUsage" placeholder="请输入客户用途" clearable />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<!-- 产品信息 -->
|
||||||
|
<el-divider content-position="left">产品信息</el-divider>
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="产品名称" prop="productName">
|
||||||
|
<el-input v-model="formData.productName" placeholder="请输入产品名称" clearable />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="产品评价" prop="productEvaluation">
|
||||||
|
<el-input
|
||||||
|
v-model="formData.productEvaluation"
|
||||||
|
placeholder="请输入产品评价"
|
||||||
|
type="textarea"
|
||||||
|
:rows="2"
|
||||||
|
clearable
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<!-- 服务评价 -->
|
||||||
|
<el-divider content-position="left">服务评价</el-divider>
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="采购意愿" prop="repurchaseIntention">
|
||||||
|
<el-select v-model="formData.repurchaseIntention" placeholder="请选择采购意愿" clearable>
|
||||||
|
<el-option
|
||||||
|
v-for="item in repurchaseOptions"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="服务评分" prop="serviceRating">
|
||||||
|
<el-rate
|
||||||
|
v-model="formData.serviceRating"
|
||||||
|
:max="5"
|
||||||
|
:allow-half="false"
|
||||||
|
:show-text="false"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="dialogVisible = false">取消</el-button>
|
||||||
|
<el-button type="primary" @click="submitForm" :loading="formLoading">
|
||||||
|
确定
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</Dialog>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { AfterSalesVisitApi, AfterSalesVisit } from '@/api/erp/aftersale/aftersalesvisit'
|
||||||
|
import { CustomerApi, CustomerVO } from '@/api/erp/sale/customer'
|
||||||
|
|
||||||
|
/** 售后回访 表单 */
|
||||||
|
defineOptions({ name: 'AfterSalesVisitForm' })
|
||||||
|
|
||||||
|
const { t } = useI18n() // 国际化
|
||||||
|
const message = useMessage() // 消息弹窗
|
||||||
|
|
||||||
|
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||||
|
const dialogTitle = ref('') // 弹窗的标题
|
||||||
|
const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
|
||||||
|
const formType = ref('') // 表单的类型:create - 新增;update - 修改
|
||||||
|
const formData = ref({
|
||||||
|
id: undefined,
|
||||||
|
customerName: undefined,
|
||||||
|
contactInfo: undefined,
|
||||||
|
customerUsage: undefined,
|
||||||
|
productName: undefined,
|
||||||
|
productEvaluation: undefined,
|
||||||
|
customerType: undefined,
|
||||||
|
repurchaseIntention: undefined,
|
||||||
|
serviceRating: undefined
|
||||||
|
})
|
||||||
|
|
||||||
|
// 客户类型选项
|
||||||
|
const customerTypeOptions = [
|
||||||
|
{ value: 'large_food_factory', label: '大型食品厂' },
|
||||||
|
{ value: 'small_food_factory', label: '中小型加工厂' },
|
||||||
|
{ value: 'distributor', label: '经销商' },
|
||||||
|
{ value: 'catering_chain', label: '餐饮连锁' },
|
||||||
|
{ value: 'government_unit', label: '机关单位' },
|
||||||
|
{ value: 'other', label: '其他' }
|
||||||
|
]
|
||||||
|
|
||||||
|
// 重复采购意愿选项
|
||||||
|
const repurchaseOptions = [
|
||||||
|
{ value: 'definitely', label: '一定会' },
|
||||||
|
{ value: 'probably', label: '应该会' },
|
||||||
|
{ value: 'uncertain', label: '不确定' },
|
||||||
|
{ value: 'unlikely', label: '可能不会' },
|
||||||
|
{ value: 'never', label: '肯定不会' }
|
||||||
|
]
|
||||||
|
|
||||||
|
const formRules = reactive({
|
||||||
|
customerName: [
|
||||||
|
{ required: true, message: '客户名称不能为空', trigger: 'blur' },
|
||||||
|
{ min: 2, max: 50, message: '客户名称长度应在2-50字符之间', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
contactInfo: [
|
||||||
|
{ required: true, message: '联系方式不能为空', trigger: 'blur' },
|
||||||
|
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
productName: [
|
||||||
|
{ required: true, message: '产品名称不能为空', trigger: 'blur' },
|
||||||
|
{ min: 1, max: 100, message: '产品名称长度应在1-100字符之间', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
customerType: [{ required: true, message: '请选择客户类型', trigger: 'change' }],
|
||||||
|
repurchaseIntention: [{ required: true, message: '请选择采购意愿', trigger: 'change' }],
|
||||||
|
serviceRating: [
|
||||||
|
{ required: true, message: '请给出服务评分', trigger: 'change' },
|
||||||
|
{ type: 'number', min: 0, max: 5, message: '评分应在0-5之间', trigger: 'change' }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
const formRef = ref() // 表单 Ref
|
||||||
|
const customerList = ref<CustomerVO[]>([]) // 客户列表
|
||||||
|
|
||||||
|
/** 加载客户列表 */
|
||||||
|
const loadCustomerList = async () => {
|
||||||
|
try {
|
||||||
|
const data = await CustomerApi.getCustomerSimpleList()
|
||||||
|
customerList.value = data
|
||||||
|
} catch (error) {
|
||||||
|
console.error('加载客户列表失败:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 处理客户选择 */
|
||||||
|
const handleCustomerChange = (customerName: string) => {
|
||||||
|
if (!customerName) {
|
||||||
|
formData.value.contactInfo = ''
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const selectedCustomer = customerList.value.find(customer => customer.name === customerName)
|
||||||
|
if (selectedCustomer) {
|
||||||
|
// 自动填充联系方式,优先使用手机号,其次电话
|
||||||
|
formData.value.contactInfo = selectedCustomer.mobile || selectedCustomer.telephone || ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 打开弹窗 */
|
||||||
|
const open = async (type: string, id?: number) => {
|
||||||
|
dialogVisible.value = true
|
||||||
|
dialogTitle.value = t('action.' + type)
|
||||||
|
formType.value = type
|
||||||
|
resetForm()
|
||||||
|
// 修改时,设置数据
|
||||||
|
if (id) {
|
||||||
|
formLoading.value = true
|
||||||
|
try {
|
||||||
|
formData.value = await AfterSalesVisitApi.getAfterSalesVisit(id)
|
||||||
|
} finally {
|
||||||
|
formLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
|
||||||
|
|
||||||
|
/** 提交表单 */
|
||||||
|
const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
|
||||||
|
const submitForm = async () => {
|
||||||
|
// 校验表单
|
||||||
|
await formRef.value.validate()
|
||||||
|
// 提交请求
|
||||||
|
formLoading.value = true
|
||||||
|
try {
|
||||||
|
const data = formData.value as unknown as AfterSalesVisit
|
||||||
|
if (formType.value === 'create') {
|
||||||
|
await AfterSalesVisitApi.createAfterSalesVisit(data)
|
||||||
|
message.success(t('common.createSuccess'))
|
||||||
|
} else {
|
||||||
|
await AfterSalesVisitApi.updateAfterSalesVisit(data)
|
||||||
|
message.success(t('common.updateSuccess'))
|
||||||
|
}
|
||||||
|
dialogVisible.value = false
|
||||||
|
// 发送操作成功的事件
|
||||||
|
emit('success')
|
||||||
|
} finally {
|
||||||
|
formLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 重置表单 */
|
||||||
|
const resetForm = () => {
|
||||||
|
formData.value = {
|
||||||
|
id: undefined,
|
||||||
|
customerName: undefined,
|
||||||
|
contactInfo: undefined,
|
||||||
|
customerUsage: undefined,
|
||||||
|
productName: undefined,
|
||||||
|
productEvaluation: undefined,
|
||||||
|
customerType: undefined,
|
||||||
|
repurchaseIntention: undefined,
|
||||||
|
serviceRating: undefined
|
||||||
|
}
|
||||||
|
formRef.value?.resetFields()
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 初始化 */
|
||||||
|
onMounted(() => {
|
||||||
|
loadCustomerList()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
306
src/views/aftersale/aftersalesvisit/index.vue
Normal file
306
src/views/aftersale/aftersalesvisit/index.vue
Normal file
@@ -0,0 +1,306 @@
|
|||||||
|
<template>
|
||||||
|
<!-- 统计卡片 -->
|
||||||
|
<ContentWrap>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
|
||||||
|
<SummaryCard title="总回访数" :value="total" icon="ep:user" icon-color="text-blue-600" icon-bg-color="bg-blue-100" />
|
||||||
|
<SummaryCard title="平均评分" :value="avgRating" :decimals="1" icon="ep:star" icon-color="text-yellow-600"
|
||||||
|
icon-bg-color="bg-yellow-100" />
|
||||||
|
<SummaryCard title="今日新增" :value="todayCount" icon="ep:calendar" icon-color="text-green-600"
|
||||||
|
icon-bg-color="bg-green-100" />
|
||||||
|
<SummaryCard title="五星评分" :value="fiveStarCount" icon="ep:star" icon-color="text-yellow-600"
|
||||||
|
icon-bg-color="bg-yellow-100" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 搜索工作栏 -->
|
||||||
|
<el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="80px">
|
||||||
|
<el-form-item label="客户名称" prop="customerName">
|
||||||
|
<el-input v-model="queryParams.customerName" placeholder="请输入客户名称" clearable @keyup.enter="handleQuery"
|
||||||
|
class="!w-200px" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="联系方式" prop="contactInfo">
|
||||||
|
<el-input v-model="queryParams.contactInfo" placeholder="请输入联系方式" clearable @keyup.enter="handleQuery"
|
||||||
|
class="!w-200px" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="产品名称" prop="productName">
|
||||||
|
<el-input v-model="queryParams.productName" placeholder="请输入产品名称" clearable @keyup.enter="handleQuery"
|
||||||
|
class="!w-200px" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="客户类型" prop="customerType">
|
||||||
|
<el-select v-model="queryParams.customerType" placeholder="请选择客户类型" clearable class="!w-200px">
|
||||||
|
<el-option v-for="item in customerTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="采购意愿" prop="repurchaseIntention">
|
||||||
|
<el-select v-model="queryParams.repurchaseIntention" placeholder="请选择采购意愿" clearable class="!w-200px">
|
||||||
|
<el-option v-for="item in repurchaseOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="创建时间" prop="createTime">
|
||||||
|
<el-date-picker v-model="queryParams.createTime" value-format="YYYY-MM-DD HH:mm:ss" type="daterange"
|
||||||
|
start-placeholder="开始日期" end-placeholder="结束日期"
|
||||||
|
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" class="!w-220px" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="handleQuery">
|
||||||
|
<Icon icon="ep:search" class="mr-5px" /> 搜索
|
||||||
|
</el-button>
|
||||||
|
<el-button @click="resetQuery">
|
||||||
|
<Icon icon="ep:refresh" class="mr-5px" /> 重置
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<!-- 操作按钮 -->
|
||||||
|
<div class="flex flex-wrap gap-2 mb-4">
|
||||||
|
<el-button type="primary" plain @click="openForm('create')" v-hasPermi="['erp:after-sales-visit:create']">
|
||||||
|
<Icon icon="ep:plus" class="mr-5px" /> 新增
|
||||||
|
</el-button>
|
||||||
|
<el-button type="success" plain @click="handleExport" :loading="exportLoading"
|
||||||
|
v-hasPermi="['erp:after-sales-visit:export']">
|
||||||
|
<Icon icon="ep:download" class="mr-5px" /> 导出
|
||||||
|
</el-button>
|
||||||
|
<el-button type="danger" plain :disabled="isEmpty(checkedIds)" @click="handleDeleteBatch"
|
||||||
|
v-hasPermi="['erp:after-sales-visit:delete']">
|
||||||
|
<Icon icon="ep:delete" class="mr-5px" /> 批量删除
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</ContentWrap>
|
||||||
|
|
||||||
|
<!-- 列表 -->
|
||||||
|
<ContentWrap>
|
||||||
|
<el-table row-key="id" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true"
|
||||||
|
@selection-change="handleRowCheckboxChange" class="mb-4">
|
||||||
|
<el-table-column type="selection" width="50" align="center" />
|
||||||
|
<el-table-column label="客户名称" min-width="120" prop="customerName" show-overflow-tooltip />
|
||||||
|
<el-table-column label="联系方式" min-width="120" prop="contactInfo" show-overflow-tooltip />
|
||||||
|
<el-table-column label="产品名称" min-width="120" prop="productName" show-overflow-tooltip />
|
||||||
|
<el-table-column label="客户类型" min-width="140" align="center">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-tag :type="getCustomerTypeColor(scope.row.customerType)">
|
||||||
|
{{ getCustomerTypeLabel(scope.row.customerType) }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="采购意愿" min-width="100" align="center">
|
||||||
|
<template #default="scope">
|
||||||
|
<span :class="getRepurchaseColor(scope.row.repurchaseIntention)">
|
||||||
|
{{ getRepurchaseLabel(scope.row.repurchaseIntention) }}
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="服务评分" width="120" align="center">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-rate :model-value="scope.row.serviceRating" disabled :max="5" show-score text-color="#ff9900"
|
||||||
|
score-template="{value}星" />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="创建时间" width="160" align="center" prop="createTime" :formatter="dateFormatter" />
|
||||||
|
<el-table-column label="操作" width="140" align="center" fixed="right">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-button link type="primary" size="small" @click="openForm('update', scope.row.id)"
|
||||||
|
v-hasPermi="['erp:after-sales-visit:update']">
|
||||||
|
<Icon icon="ep:edit" class="mr-1" />编辑
|
||||||
|
</el-button>
|
||||||
|
<el-button link type="danger" size="small" @click="handleDelete(scope.row.id)"
|
||||||
|
v-hasPermi="['erp:after-sales-visit:delete']">
|
||||||
|
<Icon icon="ep:delete" class="mr-1" />删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<!-- 分页 -->
|
||||||
|
<Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
|
||||||
|
@pagination="getList" />
|
||||||
|
</ContentWrap>
|
||||||
|
|
||||||
|
<!-- 表单弹窗:添加/修改 -->
|
||||||
|
<AfterSalesVisitForm ref="formRef" @success="getList" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { isEmpty } from '@/utils/is'
|
||||||
|
import { dateFormatter } from '@/utils/formatTime'
|
||||||
|
import download from '@/utils/download'
|
||||||
|
import SummaryCard from '@/components/SummaryCard/index.vue'
|
||||||
|
import { AfterSalesVisitApi, AfterSalesVisit } from '@/api/erp/aftersale/aftersalesvisit'
|
||||||
|
import AfterSalesVisitForm from './AfterSalesVisitForm.vue'
|
||||||
|
|
||||||
|
/** 售后回访 列表 */
|
||||||
|
defineOptions({ name: 'AfterSalesVisit' })
|
||||||
|
|
||||||
|
const message = useMessage() // 消息弹窗
|
||||||
|
const { t } = useI18n() // 国际化
|
||||||
|
|
||||||
|
const loading = ref(true) // 列表的加载中
|
||||||
|
const list = ref<AfterSalesVisit[]>([]) // 列表的数据
|
||||||
|
const total = ref(0) // 列表的总页数
|
||||||
|
const activeNames = ref(['search']) // 折叠面板默认展开
|
||||||
|
|
||||||
|
// 客户类型选项
|
||||||
|
const customerTypeOptions = [
|
||||||
|
{ value: 'large_food_factory', label: '大型食品厂' },
|
||||||
|
{ value: 'small_food_factory', label: '中小型加工厂' },
|
||||||
|
{ value: 'distributor', label: '经销商' },
|
||||||
|
{ value: 'catering_chain', label: '餐饮连锁' },
|
||||||
|
{ value: 'government_unit', label: '机关单位' },
|
||||||
|
{ value: 'other', label: '其他' }
|
||||||
|
]
|
||||||
|
|
||||||
|
// 重复采购意愿选项
|
||||||
|
const repurchaseOptions = [
|
||||||
|
{ value: 'definitely', label: '一定会' },
|
||||||
|
{ value: 'probably', label: '应该会' },
|
||||||
|
{ value: 'uncertain', label: '不确定' },
|
||||||
|
{ value: 'unlikely', label: '可能不会' },
|
||||||
|
{ value: 'never', label: '肯定不会' }
|
||||||
|
]
|
||||||
|
const queryParams = reactive({
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
customerName: undefined,
|
||||||
|
contactInfo: undefined,
|
||||||
|
customerUsage: undefined,
|
||||||
|
productName: undefined,
|
||||||
|
productEvaluation: undefined,
|
||||||
|
customerType: undefined,
|
||||||
|
repurchaseIntention: undefined,
|
||||||
|
serviceRating: undefined,
|
||||||
|
createTime: []
|
||||||
|
})
|
||||||
|
const queryFormRef = ref() // 搜索的表单
|
||||||
|
const exportLoading = ref(false) // 导出的加载中
|
||||||
|
|
||||||
|
/** 查询列表 */
|
||||||
|
const getList = async () => {
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
const data = await AfterSalesVisitApi.getAfterSalesVisitPage(queryParams)
|
||||||
|
list.value = data.list
|
||||||
|
total.value = data.total
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
const handleQuery = () => {
|
||||||
|
queryParams.pageNo = 1
|
||||||
|
getList()
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 重置按钮操作 */
|
||||||
|
const resetQuery = () => {
|
||||||
|
queryFormRef.value.resetFields()
|
||||||
|
// 重置评分查询条件
|
||||||
|
queryParams.serviceRating = undefined
|
||||||
|
handleQuery()
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 添加/修改操作 */
|
||||||
|
const formRef = ref()
|
||||||
|
const openForm = (type: string, id?: number) => {
|
||||||
|
formRef.value.open(type, id)
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 删除按钮操作 */
|
||||||
|
const handleDelete = async (id: number) => {
|
||||||
|
try {
|
||||||
|
// 删除的二次确认
|
||||||
|
await message.delConfirm()
|
||||||
|
// 发起删除
|
||||||
|
await AfterSalesVisitApi.deleteAfterSalesVisit(id)
|
||||||
|
message.success(t('common.delSuccess'))
|
||||||
|
// 刷新列表
|
||||||
|
await getList()
|
||||||
|
} catch { }
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 批量删除售后回访 */
|
||||||
|
const handleDeleteBatch = async () => {
|
||||||
|
try {
|
||||||
|
// 删除的二次确认
|
||||||
|
await message.delConfirm()
|
||||||
|
await AfterSalesVisitApi.deleteAfterSalesVisitList(checkedIds.value);
|
||||||
|
message.success(t('common.delSuccess'))
|
||||||
|
await getList();
|
||||||
|
} catch { }
|
||||||
|
}
|
||||||
|
|
||||||
|
const checkedIds = ref<number[]>([])
|
||||||
|
const handleRowCheckboxChange = (records: AfterSalesVisit[]) => {
|
||||||
|
checkedIds.value = records.map((item) => item.id);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 导出按钮操作 */
|
||||||
|
const handleExport = async () => {
|
||||||
|
try {
|
||||||
|
// 导出的二次确认
|
||||||
|
await message.exportConfirm()
|
||||||
|
// 发起导出
|
||||||
|
exportLoading.value = true
|
||||||
|
const data = await AfterSalesVisitApi.exportAfterSalesVisit(queryParams)
|
||||||
|
download.excel(data, '售后回访.xls')
|
||||||
|
} catch {
|
||||||
|
} finally {
|
||||||
|
exportLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 统计数据计算 */
|
||||||
|
const avgRating = computed(() => {
|
||||||
|
if (list.value.length === 0) return 0
|
||||||
|
const sum = list.value.reduce((acc, item) => acc + (item.serviceRating || 0), 0)
|
||||||
|
return sum / list.value.length
|
||||||
|
})
|
||||||
|
|
||||||
|
const todayCount = computed(() => {
|
||||||
|
const today = new Date().toISOString().split('T')[0]
|
||||||
|
return list.value.filter(item => {
|
||||||
|
const createDate = new Date(item.createTime).toISOString().split('T')[0]
|
||||||
|
return createDate === today
|
||||||
|
}).length
|
||||||
|
})
|
||||||
|
|
||||||
|
const fiveStarCount = computed(() => {
|
||||||
|
return list.value.filter(item => (item.serviceRating || 0) === 5).length
|
||||||
|
})
|
||||||
|
|
||||||
|
/** 格式化函数 */
|
||||||
|
const getCustomerTypeLabel = (value: string) => {
|
||||||
|
const option = customerTypeOptions.find(item => item.value === value)
|
||||||
|
return option ? option.label : value
|
||||||
|
}
|
||||||
|
|
||||||
|
const getCustomerTypeColor = (value: string) => {
|
||||||
|
const colorMap = {
|
||||||
|
'large_food_factory': 'success',
|
||||||
|
'small_food_factory': 'info',
|
||||||
|
'distributor': 'warning',
|
||||||
|
'catering_chain': 'danger',
|
||||||
|
'government_unit': 'primary',
|
||||||
|
'other': ''
|
||||||
|
}
|
||||||
|
return colorMap[value as keyof typeof colorMap] || ''
|
||||||
|
}
|
||||||
|
|
||||||
|
const getRepurchaseLabel = (value: string) => {
|
||||||
|
const option = repurchaseOptions.find(item => item.value === value)
|
||||||
|
return option ? option.label : value
|
||||||
|
}
|
||||||
|
|
||||||
|
const getRepurchaseColor = (value: string) => {
|
||||||
|
const colorMap = {
|
||||||
|
'definitely': 'text-green-600 font-medium',
|
||||||
|
'probably': 'text-blue-600',
|
||||||
|
'uncertain': 'text-yellow-600',
|
||||||
|
'unlikely': 'text-orange-600',
|
||||||
|
'never': 'text-red-600'
|
||||||
|
}
|
||||||
|
return colorMap[value as keyof typeof colorMap] || ''
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 初始化 **/
|
||||||
|
onMounted(() => {
|
||||||
|
getList()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
Reference in New Issue
Block a user