销售后的合并
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user