同步售后管理前端页面
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