x x x x x

src/business/trade/index.ts

@@ -19,6 +19,7 @@ import {
     cancelOrder,
     holderClose,
     order,
+    offlineDeliveryApplyCancelOrder,
     offlineDelivery
 } from '@/services/api/trade'
 import { formatDate } from "@/filters";
@@ -624,4 +625,27 @@ export function useOfflineDelivery() {
     }
 }
 
+// 线下交收申请撤销接口
+export function useCanceofflineDeliveryApplyCancelOrderlOrder() {
+    const loading = shallowRef(false)
+    const formData = reactive<Partial<Proto.OfflineDeliveryApplyCancelOrderReq>>({})
+    const cancelSubmit = async () => {
+        try {
+            loading.value = true
+            return await offlineDeliveryApplyCancelOrder({
+                data: {
+                    ...formData
+                }
+            })
+        } finally {
+            loading.value = false
+        }
+    }
+
+    return {
+        loading,
+        formData,
+        cancelSubmit
+    }
+}
 

src/packages/pc/views/footer/goods/delivery/cancel/index.vue

@@ -0,0 +1,48 @@
+<!-- 商品订单-线下交收-撤销 -->
+<template>
+    <app-drawer title="提示" v-model:show="show" :loading="loading" :refresh="refresh">
+        <div>是否撤销该交收单？</div>
+        <template #footer>
+            <el-button type="info" @click="onCancel(false)">取消</el-button>
+            <el-button type="primary" @click="onCancelSumit()">提交</el-button>
+        </template>
+    </app-drawer>
+</template>
+
+<script lang="ts" setup>
+import { ref, PropType } from 'vue'
+import { ElMessage } from 'element-plus'
+import AppDrawer from '@pc/components/base/drawer/index.vue'
+import { useCanceofflineDeliveryApplyCancelOrderlOrder } from '@/business/trade'
+
+const props = defineProps({
+    selectedRow: {
+        type: Object as PropType<Model.MineTradeGoodsDeliveryOfflinesRsp>,
+        required: true
+    }
+})
+
+const { cancelSubmit, formData, loading } = useCanceofflineDeliveryApplyCancelOrderlOrder()
+
+const show = ref(true)
+const refresh = ref(false)
+
+const onCancel = (isRefresh = false) => {
+    show.value = false
+    refresh.value = isRefresh
+}
+
+const onCancelSumit = () => {
+    const { deliveryorderid, marketid, goodsid } = props.selectedRow
+    ///  参数信息
+    formData.Header = { MarketID: marketid, GoodsID: goodsid }
+    formData.DeliveryOrderID = deliveryorderid
+    /// 提交
+    cancelSubmit().then(() => {
+        ElMessage.success('撤销成功')
+        onCancel(true)
+    }).catch((err) => {
+        ElMessage.error('撤销失败:' + err)
+    })
+}
+</script>

src/packages/pc/views/footer/goods/delivery/index.vue

@@ -1,21 +1,45 @@
 <!-- 商品订单-交收 -->
 <template>
-    <app-table :data="dataList" v-model:columns="tableColumns" :loading="loading">
+    <app-table :data="dataList" v-model:columns="tableColumns" :loading="loading" :row-key="rowKey"
+            :expand-row-keys="expandKeys" @row-click="rowClick">
         <!-- 申请时间 -->
         <template #reqtime="{ value }">
             {{ formatDate(value) }}
         </template>
+        <!-- 展开行 -->
+        <template #expand="{ row }">
+            <div class="buttonbar">
+                <el-button type="danger" v-if="[1, 2].includes(row.orderstatus)" size="small" @click="showComponent('cancel', row)">撤销</el-button>
+            </div>
+        </template>
+        <template #footer>
+            <component ref="componentRef" v-bind="{ selectedRow }" :is="componentMap.get(componentId)"
+                @closed="closeComponent" v-if="componentId" />
+        </template>
     </app-table>
 </template>
 
 <script lang="ts" setup>
-import { shallowRef } from 'vue'
+import { shallowRef, defineAsyncComponent } from 'vue'
 import { useRequest } from '@/hooks/request'
 import { queryMineTradeGoodsDeliveryOfflines } from '@/services/api/transfer'
-import AppTable from '@pc/components/base/table/index.vue'
 import { formatDate } from '@/filters'
+import { useComponent } from '@/hooks/component'
+import { useComposeTable } from '@pc/components/base/table'
+import AppTable from '@pc/components/base/table/index.vue'
+
+const componentMap = new Map<string, unknown>([
+    ['cancel', defineAsyncComponent(() => import('./cancel/index.vue'))], // 补足定金
+])
+
+const { componentRef, componentId, openComponent, closeComponent } = useComponent(() => {
+    run()
+})
+
+const { loading, dataList, run } = useRequest(queryMineTradeGoodsDeliveryOfflines)
+
+const { rowKey, expandKeys, selectedRow, rowClick } = useComposeTable<Model.MineTradeGoodsDeliveryOfflinesRsp>({ rowKey: 'deliveryorderid' })
 
-const { loading, dataList } = useRequest(queryMineTradeGoodsDeliveryOfflines)
 
 const tableColumns = shallowRef<Model.TableColumn[]>([
     { prop: 'goodsnamedisplay', label: '订单合约' },
@@ -29,4 +53,9 @@ const tableColumns = shallowRef<Model.TableColumn[]>([
     { prop: 'matchusername', label: '对手方' },
     { prop: 'reqtime', label: '申请时间' }
 ])
+
+const showComponent = (componentName: string, row?: Model.MineTradeGoodsDeliveryOfflinesRsp) => {
+    selectedRow.value = row
+    openComponent(componentName)
+}
 </script>