上传

src/views/Clue/Order/Comp/DialogAfterSale.vue

@@ -0,0 +1,122 @@
+<template>
+  <Dialog title="售后记录" v-model="show" width="800px">
+    <el-table :data="aftersaleList" border stripe>
+      <el-table-column type="index" width="50" />
+      <el-table-column prop="reason" label="售后原因" />
+      <el-table-column prop="refundAmount" label="退款金额" />
+      <el-table-column prop="isReturns" label="是否退货" />
+      <el-table-column prop="applyTime" label="申请日期" width="180px" />
+      <el-table-column prop="stateName" label="审核状态" />
+    </el-table>
+    <el-divider direction="horizontal" />
+
+    <el-button v-show="showAdd" class="mb-10px" type="primary" @click="handleAdd">
+      新增售后
+    </el-button>
+    <el-form v-if="!showAdd" :model="form" ref="formRef" :rules="rules" label-width="80px">
+      <el-form-item label="退款原因" prop="reason">
+        <el-input v-model="form.reason" placeholder="请输入退款原因" />
+      </el-form-item>
+      <el-form-item label="退款金额" prop="refundAmount">
+        <el-input-number
+          v-model="form.refundAmount"
+          :min="0"
+          :controls="false"
+          placeholder="请输入金额"
+        />
+      </el-form-item>
+      <el-form-item label="是否退货" prop="isReturns">
+        <el-radio-group v-model="form.isReturns">
+          <el-radio :label="true"> 退货 </el-radio>
+          <el-radio :label="false"> 不退货 </el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="解决方案" prop="solution">
+        <el-input
+          type="textarea"
+          :autoSize="{ minRows: 3 }"
+          v-model="form.solution"
+          placeholder="请输入退款原因"
+        />
+      </el-form-item>
+      <el-form-item label="备注">
+        <Editor v-model:modelValue="form.remark" />
+      </el-form-item>
+      <el-form-item>
+        <el-button :disabled="formLoading" type="primary" @click="onSubmit">保存</el-button>
+        <el-button @click="showAdd = true">取消</el-button>
+      </el-form-item>
+    </el-form>
+  </Dialog>
+</template>
+
+<script setup name="DialogAfterSale">
+import { getAfterSalePage, createAfterSale } from '@/api/clue/afterSale'
+
+const message = useMessage() // 消息弹窗
+
+const show = ref(false)
+const aftersaleList = ref([])
+const orderId = ref('')
+
+function open(signId) {
+  show.value = true
+  orderId.value = signId
+  try {
+    getList()
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+const showAdd = ref(true)
+const form = ref({})
+const rules = {
+  refundAmount: { required: true, message: '回款金额不可为空', trigger: 'blur' },
+  reason: { required: true, message: '售后原因不可为空', trigger: 'blur' },
+  solution: { required: true, message: '解决方案不可为空', trigger: 'blur' }
+}
+
+function getList() {
+  getAfterSalePage({ signId: orderId.value, pageNo: 1, pageSize: 100 }).then((data) => {
+    aftersaleList.value = data.list
+  })
+}
+
+function handleAdd() {
+  showAdd.value = false
+  form.value = {
+    signId: orderId.value,
+    reason: undefined,
+    solution: undefined,
+    refundAmount: undefined,
+    isReturns: false,
+    remark: undefined
+  }
+}
+
+const formRef = ref()
+const formLoading = ref(false)
+async function onSubmit() {
+  // 校验表单
+  if (!formRef.value) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    await createAfterSale(form.value)
+    message.success('申请成功！')
+    getList()
+    showAdd.value = true
+  } finally {
+    formLoading.value = false
+  }
+}
+
+defineExpose({
+  open
+})
+</script>
+
+<style lang="scss" scoped></style>