Files
ss-crm-manage-web/src/views/Clue/Order/Comp/DialogAfterSaleAudit.vue
2024-07-11 15:25:00 +08:00

138 lines
3.1 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<Dialog :title="dialogTitle" v-model="dialogVisible" width="800px">
<Descriptions :data="orderInfo" :schema="schema" :columns="2" labelWidth="130px" />
<el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="80px">
<el-form-item label="状态" prop="state">
<el-radio-group v-model="formData.state">
<el-radio :label="3"> 通过 </el-radio>
<el-radio :label="4"> 驳回 </el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="备注" prop="remark">
<Editor v-model:modelValue="formData.remark" />
</el-form-item>
</el-form>
<template #footer>
<el-button :disabled="formLoading" type="primary" @click="submitForm"> </el-button>
<el-button @click="dialogVisible = false"> </el-button>
</template>
</Dialog>
</template>
<script name="DialogAfterSaleAudit" setup>
import { auditAfterSale } from '@/api/clue/afterSale'
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const schema = [
{
field: 'name',
label: '线索名称',
span: 1
},
{
field: 'phone',
label: '联系方式',
span: 1
},
{
field: 'signUserName',
label: '登记人',
span: 1
},
{
field: 'dealDate',
label: '成交日期',
dateFormat: 'YYYY-MM-DD',
span: 1
},
{
field: 'reason',
label: '售后原因',
span: 1
},
{
field: 'solution',
label: '解决方案',
span: 1
},
{
field: 'refundAmount',
label: '退款金额',
span: 1
},
{
field: 'isReturns',
label: '是否退货',
span: 1
},
{
field: 'applyUserName',
label: '申请人',
span: 1
},
{
field: 'applyTime',
label: '申请时间',
dateFormat: 'YYYY-MM-DD',
span: 1
},
{
field: 'remark',
label: '备注',
span: 2,
isEditor: true
}
]
const formLoading = ref(false) // 表单的加载中1修改时的数据加载2提交的按钮禁用
const formData = ref({
state: 3,
remark: ''
})
const formRef = ref() // 表单 Ref
const orderInfo = ref({})
/** 打开弹窗 */
const open = async (row) => {
dialogVisible.value = true
dialogTitle.value = '售后审核'
resetForm(row.id)
// 修改时,设置数据
orderInfo.value = { ...row }
}
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
const submitForm = async () => {
// 校验表单
if (!formRef.value) return
const valid = await formRef.value.validate()
if (!valid) return
// 提交请求
formLoading.value = true
try {
await auditAfterSale(formData.value)
message.success('审核完成!')
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = (signId) => {
formData.value = {
saleId: signId,
state: 3,
remark: ''
}
formRef.value?.resetFields()
}
</script>