更新

src/api/opurchaseclass.ts

@@ -24,3 +24,13 @@ export function apiOpurchaseclassDelete(params: any) {
 export function apiOpurchaseclassDetail(params: any) {
     return request.get({ url: '/operation/opurchaseclass/detail', params })
 }
+
+// 采购详情子订单
+export function apiOpurchaseclassSubOrders(params: any) {
+    return request.get({ url: '/operation/opurchaseclass/sub_orders', params })
+}
+
+// 采购详情报价列表
+export function apiOpurchaseclassGoodsOfferList(params: any) {
+    return request.get({ url: '/operation/opurchaseclass/goods_offer_list', params })
+}

src/views/opurchase/opurchaseclass/component/goodsOffer.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <el-table :data="pager.lists" border style="width: 100%">
+      <el-table-column prop="id" label="ID" width="120" />
+      <el-table-column prop="order_id" label="采购订单id" width="120" />
+      <el-table-column
+        label="商品名称"
+        prop="goods_name"
+        show-overflow-tooltip
+      />
+      <el-table-column label="需求数量" prop="need_num" show-overflow-tooltip />
+      <el-table-column label="单位" prop="unit_name" show-overflow-tooltip />
+      <el-table-column label="实际金额" prop="actual" show-overflow-tooltip />
+      <el-table-column label="实收金额" prop="money" show-overflow-tooltip />
+      <el-table-column
+        label="单据时间"
+        prop="create_time"
+        show-overflow-tooltip
+      />
+    </el-table>
+    <div class="flex mt-4 justify-end">
+      <pagination v-model="pager" @change="getLists" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup name="subOrder">
+import { usePaging } from "@/hooks/usePaging";
+import { apiOpurchaseclassGoodsOfferList } from "@/api/opurchaseclass";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+
+const queryParams = reactive({
+  id: route.query.id,
+});
+// 分页相关
+const { pager, getLists, resetParams, resetPage } = usePaging({
+  fetchFun: apiOpurchaseclassGoodsOfferList,
+  params: queryParams,
+});
+getLists();
+</script>

src/views/opurchase/opurchaseclass/component/subOrder.vue

@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <el-table :data="pager.lists" border style="width: 100%">
+      <el-table-column prop="id" label="ID" width="120" />
+      <el-table-column label="单据编号" prop="number" show-overflow-tooltip />
+      <el-table-column label="单据金额" prop="total" show-overflow-tooltip />
+      <el-table-column
+        label="抵扣金额"
+        prop="deduction_price"
+        show-overflow-tooltip
+      />
+      <el-table-column label="实际金额" prop="actual" show-overflow-tooltip />
+      <el-table-column label="实收金额" prop="money" show-overflow-tooltip />
+      <el-table-column
+        label="单据时间"
+        prop="create_time"
+        show-overflow-tooltip
+      />
+    </el-table>
+    <div class="flex mt-4 justify-end">
+      <pagination v-model="pager" @change="getLists" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup name="subOrder">
+import { usePaging } from "@/hooks/usePaging";
+import { apiOpurchaseclassSubOrders } from "@/api/opurchaseclass";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+
+const queryParams = reactive({
+  id: route.query.id,
+});
+// 分页相关
+const { pager, getLists, resetParams, resetPage } = usePaging({
+  fetchFun: apiOpurchaseclassSubOrders,
+  params: queryParams,
+});
+getLists();
+</script>

src/views/opurchase/opurchaseclass/detail.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-card class="!border-none mb-4" shadow="never">
-      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+      <el-tabs v-model="activeName" class="demo-tabs">
         <el-tab-pane label="概况" name="first">
           <el-descriptions class="margin-top" :column="4" border>
             <!-- <template #extra>
@@ -29,7 +29,11 @@
               {{ form.id }}
             </el-descriptions-item>
           </el-descriptions>
-          <el-table :data="form.goods_info" border style="width: 100%; margin-top: 20px;">
+          <el-table
+            :data="form.goods_info"
+            border
+            style="width: 100%; margin-top: 20px"
+          >
             <el-table-column prop="id" label="ID" width="120" />
             <el-table-column prop="goods_name" label="商品名称" />
             <el-table-column prop="price" label="单价(元)" />
@@ -38,33 +42,36 @@
             <el-table-column prop="total" label="合计(元)" />
           </el-table>
         </el-tab-pane>
-        <el-tab-pane label="订单" name="second">订单列表</el-tab-pane>
+        <el-tab-pane label="子订单" name="second">
-        <el-tab-pane label="报价信息" name="third">报价信息</el-tab-pane>
+          <subOrder />
+        </el-tab-pane>
+        <el-tab-pane label="报价列表" name="third">
+          <goodsOffer />
+        </el-tab-pane>
         <!-- <el-tab-pane label="详情3" name="fourth">Task</el-tab-pane> -->
       </el-tabs>
     </el-card>
   </div>
 </template>
 
-<script lang="ts" setup name="opurchaseclassLists">
+<script lang="ts" setup name="opurchaseclassDetail">
 import { usePaging } from "@/hooks/usePaging";
 import { useDictData } from "@/hooks/useDictOptions";
 import {
   apiOpurchaseclassLists,
   apiOpurchaseclassDelete,
   apiOpurchaseclassDetail,
+  
 } from "@/api/opurchaseclass";
 import { useRoute } from "vue-router";
-import type { TabsPaneContext } from "element-plus";
+import subOrder from "./component/subOrder.vue";
+import goodsOffer from "./component/goodsOffer.vue";
 
 const route = useRoute();
 const form = ref({});
 
 const activeName = ref("first");
 
-const handleClick = (tab: TabsPaneContext, event: Event) => {
-  console.log(tab, event);
-};
 
 const getDetail = async () => {
   const data = await apiOpurchaseclassDetail({
@@ -73,4 +80,5 @@ const getDetail = async () => {
   form.value = data;
 };
 getDetail();
+
 </script>