订单列表：列表重构 ③ 添加备注表单和发货表单

2023-08-22 00:38:44 +08:00 · 2023-08-22 00:38:44 +08:00 · 0d202a7a85
parent 345c09ee6c
commit 0d202a7a85
6 changed files with 209 additions and 27 deletions
--- a/src/api/mall/trade/delivery/express/index.ts
+++ b/src/api/mall/trade/delivery/express/index.ts
@ -19,6 +19,11 @@ export const getDeliveryExpress = async (id: number) => {
  return await request.get({ url: '/trade/delivery/express/get?id=' + id })
 }

+// 获得商品品牌精简信息列表
+export const getSimpleDeliveryExpressList = () => {
+  return request.get({ url: '/trade/delivery/express/list-all-simple' })
+}
+
 // 新增快递公司
 export const createDeliveryExpress = async (data: DeliveryExpressVO) => {
  return await request.post({ url: '/trade/delivery/express/create', data })
--- a/src/api/mall/trade/order/index.ts
+++ b/src/api/mall/trade/order/index.ts
@ -94,17 +94,18 @@ export const getOrder = async (id: number | null) => {
  return await request.get({ url: `/trade/order/get-detail?id=` + id })
 }

-// 新增交易订单
-export const createOrder = async (data: OrderVO) => {
-  return await request.post({ url: `/trade/order/create`, data })
+export interface DeliveryVO {
+  id: number // 订单编号
+  logisticsId: number | null // 物流公司编号
+  logisticsNo: string // 物流编号
 }

-// 修改交易订单
-export const updateOrder = async (data: OrderVO) => {
-  return await request.put({ url: `/trade/order/update`, data })
+// 订单发货
+export const delivery = async (data: DeliveryVO) => {
+  return await request.post({ url: `/trade/order/delivery`, data })
 }

-// 删除交易订单
-export const deleteOrder = async (id: number | null) => {
-  return await request.delete({ url: `/trade/order/delete?id=` + id })
+// 订单备注
+export const remark = async (data) => {
+  return await request.post({ url: `/trade/order/remark`, data })
 }
--- a/src/views/mall/trade/order/DeliveryOrderForm.vue
+++ b/src/views/mall/trade/order/DeliveryOrderForm.vue
@ -0,0 +1,93 @@
+<template>
+  <Dialog v-model="dialogVisible" title="订单发货" width="25%">
+    <el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="80px">
+      <el-form-item label="发货方式">
+        <el-radio-group v-model="radio">
+          <el-radio border label="1">快递物流</el-radio>
+          <el-radio border label="2">无需发货</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <template v-if="radio === '1'">
+        <el-form-item label="物流公司">
+          <el-select v-model="formData.logisticsId" placeholder="请选择" style="width: 100%">
+            <el-option
+              v-for="item in deliveryExpressList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="物流单号">
+          <el-input v-model="formData.logisticsNo" />
+        </el-form-item>
+      </template>
+    </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 lang="ts" setup>
+import * as DeliveryExpressApi from '@/api/mall/trade/delivery/express'
+import * as TradeOrderApi from '@/api/mall/trade/order'
+
+defineOptions({ name: 'DeliveryOrderForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const radio = ref('1')
+const formData = ref<TradeOrderApi.DeliveryVO>({
+  id: 0, // 订单编号
+  logisticsId: null, // 物流公司编号
+  logisticsNo: '' // 物流编号
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (orderId: number) => {
+  resetForm()
+  // 设置数据
+  formData.value.id = orderId
+  dialogVisible.value = true
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = unref(formData)
+    if (radio.value === '2') {
+      data.logisticsId = 0
+    }
+    await TradeOrderApi.delivery(data)
+    message.success(t('common.updateSuccess'))
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success', true)
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: 0, // 订单编号
+    logisticsId: null, // 物流公司编号
+    logisticsNo: '' // 物流编号
+  }
+  formRef.value?.resetFields()
+}
+const deliveryExpressList = ref([])
+onMounted(async () => {
+  deliveryExpressList.value = await DeliveryExpressApi.getSimpleDeliveryExpressList()
+})
+</script>
--- a/src/views/mall/trade/order/OrderRemarksForm.vue
+++ b/src/views/mall/trade/order/OrderRemarksForm.vue
@ -0,0 +1,66 @@
+<template>
+  <Dialog v-model="dialogVisible" title="订单备注" width="25%">
+    <el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="80px">
+      <el-form-item label="备注">
+        <el-input v-model="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 lang="ts" setup>
+import * as TradeOrderApi from '@/api/mall/trade/order'
+
+defineOptions({ name: 'OrderRemarksForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formData = ref({
+  id: 0, // 订单编号
+  remark: '' // 订单备注
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (row: TradeOrderApi.OrderVO) => {
+  resetForm()
+  // 设置数据
+  formData.value.id = row.id
+  formData.value.remark = row.remark
+  dialogVisible.value = true
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = unref(formData)
+    await TradeOrderApi.remark(data)
+    message.success(t('common.updateSuccess'))
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success', true)
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: 0, // 订单编号
+    logisticsId: null, // 物流公司编号
+    logisticsNo: '' // 物流编号
+  }
+  formRef.value?.resetFields()
+}
+</script>
--- a/src/views/mall/trade/order/detail/index.vue
+++ b/src/views/mall/trade/order/detail/index.vue
@ -47,9 +47,9 @@
      <el-descriptions-item label-class-name="no-colon">
        <el-button size="small" type="primary">调整价格</el-button>
        <!-- TODO 芋艿：待实现 -->
-        <el-button size="small" type="primary">备注</el-button>
+        <el-button size="small" type="primary" @click="openForm('remark')">备注</el-button>
        <!-- TODO 芋艿：待实现 -->
-        <el-button size="small" type="primary">发货</el-button>
+        <el-button size="small" type="primary" @click="openForm('delivery')">发货</el-button>
        <!-- TODO 芋艿：待实现 -->
        <el-button size="small" type="primary">修改地址</el-button>
        <!-- TODO 芋艿：待实现 -->
@ -212,17 +212,20 @@
      </el-descriptions>
    </div>
  </ContentWrap>
+  <DeliveryOrderForm ref="deliveryOrderFormRef" @success="getDetail" />
+  <OrderRemarksForm ref="orderRemarksFormRef" @success="getDetail" />
 </template>
 <script lang="ts" setup>
 import * as TradeOrderApi from '@/api/mall/trade/order'
 import { formatToFraction } from '@/utils'
 import { DICT_TYPE } from '@/utils/dict'
+import OrderRemarksForm from '@/views/mall/trade/order/OrderRemarksForm.vue'
+import DeliveryOrderForm from '@/views/mall/trade/order/DeliveryOrderForm.vue'

 defineOptions({ name: 'TradeOrderDetailForm' })

 const message = useMessage() // 消息弹窗
 const { params } = useRoute() // 查询参数
-// const loading = ref(false)
 const orderInfo = ref<TradeOrderApi.OrderVO>({
  no: '',
  createTime: null,
@ -332,6 +335,20 @@ const detailInfo = ref({
  goodsInfo: [] // 商品详情tableData
 })

+const deliveryOrderFormRef = ref() // 发货表单 Ref
+const orderRemarksFormRef = ref() // 订单备注表单 Ref
+
+const openForm = (type: string) => {
+  switch (type) {
+    case 'remark':
+      orderRemarksFormRef.value?.open(orderInfo)
+      break
+    case 'delivery':
+      deliveryOrderFormRef.value?.open(orderInfo.id)
+      break
+  }
+}
+
 /** 获得详情 */
 const getDetail = async () => {
  const id = params.orderId as unknown as number
--- a/src/views/mall/trade/order/index.vue
+++ b/src/views/mall/trade/order/index.vue
@ -178,6 +178,10 @@
                    </el-button>
                    <template #dropdown>
                      <el-dropdown-menu>
+                        <el-dropdown-item command="delivery">
+                          <Icon icon="ep:takeaway-box" />
+                          发货
+                        </el-dropdown-item>
                        <el-dropdown-item command="orderRemarks">
                          <Icon icon="ep:chat-line-square" />
                          订单备注
@ -186,14 +190,6 @@
                          <Icon icon="ep:credit-card" />
                          立即退款
                        </el-dropdown-item>
-                        <el-dropdown-item command="printReceipt">
-                          <Icon icon="ep:takeaway-box" />
-                          打印小票
-                        </el-dropdown-item>
-                        <el-dropdown-item command="printInvoice">
-                          <Icon icon="ep:takeaway-box" />
-                          打印配货单
-                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
@ -257,10 +253,14 @@
      @pagination="getList"
    />
  </ContentWrap>
+  <DeliveryOrderForm ref="deliveryOrderFormRef" @success="getList" />
+  <OrderRemarksForm ref="orderRemarksFormRef" @success="getList" />
 </template>

 <script lang="ts" name="Order" setup>
 import type { FormInstance, TableColumnCtx } from 'element-plus'
+import DeliveryOrderForm from './DeliveryOrderForm.vue'
+import OrderRemarksForm from './OrderRemarksForm.vue'
 import { dateFormatter } from '@/utils/formatTime'
 import * as TradeOrderApi from '@/api/mall/trade/order'
 import { OrderItemRespVO, OrderVO } from '@/api/mall/trade/order'
@ -275,7 +275,9 @@ const { currentRoute, push } = useRouter() // 路由跳转
 const loading = ref(true) // 列表的加载中
 const total = ref(2) // 列表的总页数
 const list = ref<OrderVO[]>([]) // 列表的数据
-const openForm = (id) => {
+const deliveryOrderFormRef = ref()
+const orderRemarksFormRef = ref()
+const openForm = (id: number) => {
  push('/trade/order/detail/' + id)
 }
 /** 商品图预览 */
@ -314,19 +316,17 @@ const handleCommand = (command: string, row: OrderVO) => {
  console.log(row)
  switch (command) {
    case 'orderRemarks':
+      orderRemarksFormRef.value?.open(row)
      break
    case 'refund':
      break
-    case 'printReceipt':
-      break
-    case 'printInvoice':
-      break
-    default:
+    case 'delivery':
+      deliveryOrderFormRef.value?.open(row.id)
      break
  }
 }
 const queryFormRef = ref<FormInstance>() // 搜索的表单
-//表单搜索
+//表单搜索 TODO 订单相关操作完成后立马实现
 const queryParams = reactive({
  pageNo: 1, //首页
  pageSize: 10, //页面大小