采购订单--展开明细

src/components/Table/src/Table.vue

@@ -29,6 +29,10 @@ export default defineComponent({
     },
     // 展开行
     expand: propTypes.bool.def(false),
+    expandFixed: {
+      type: Boolean || String,
+      default: 'left'
+    },
     // 是否展示分页
     pagination: {
       type: Object as PropType<Pagination>,
@@ -190,10 +194,10 @@ export default defineComponent({
     }
 
     const renderTableExpand = () => {
-      const { align, headerAlign, expand,border } = unref(getProps)
+      const { align, headerAlign, expand,border,expandFixed } = unref(getProps)
       // 渲染展开行
       return expand ? (
-        <ElTableColumn type="expand" align={align} headerAlign={headerAlign} border={border}>
+        <ElTableColumn fixed={expandFixed} d	type="expand" align={align} headerAlign={headerAlign} border={border}>
           {{
             // @ts-ignore
             default: (data: TableSlotDefault) => getSlot(slots, 'expand', data)
@@ -295,14 +299,16 @@ export default defineComponent({
 
     return () => (
       <div v-loading={unref(getProps).loading}>
-        <ElTable
+        <ElTable default-expand-all={true}
           // @ts-ignore
           ref={elTableRef}
           data={unref(getProps).data}
+          header-cell-class-name="tableHeader"
+          row-class-name="tableRow"
+          cell-class-name="tableRow"
           onSelection-change={selectionChange}
           onSort-change={sortChange}
-          {...unref(getBindValue)}
-          stripe 
+          {...unref(getBindValue)} 
         >
           {{
             default: () => rnderTableColumn(),
@@ -326,6 +332,17 @@ export default defineComponent({
   }
 })
 </script>
+
+<style lang="scss">
+.expandTable .el-table .tableHeader{
+  --el-table-header-bg-color: #f5f5f5;
+}  
+.expandTable .el-table .tableRow{
+  --el-table-tr-bg-color: #f5f5f5;
+  --el-bg-color:#f5f5f5;
+}
+
+</style>
 <style lang="scss" scoped>
 :deep(.el-button.is-text) {
   padding: 8px 4px;
@@ -336,4 +353,5 @@ export default defineComponent({
   padding: 8px 4px;
   margin-left: 0;
 }
+
 </style>

src/views/wms/purchasereceiptManage/supplierdeliver/purchaseMain/index.vue

@@ -10,10 +10,31 @@
 
   <!-- 列表 -->
   <ContentWrap>
-    <Table :columns="tableColumns" :data="tableObject.tableList" :loading="tableObject.loading" :pagination="{
+    <Table ref="elTableRef"  :expand="true" :columns="tableColumns" :data="tableObject.tableList" :loading="tableObject.loading" :pagination="{
         total: tableObject.total
       }" v-model:pageSize="tableObject.pageSize" v-model:currentPage="tableObject.currentPage"
-      v-model:sort="tableObject.sort">
+      v-model:sort="tableObject.sort" >
+      <template #expand="{ row }">
+        <TableDetail 
+          :openDetailParams="{
+            row: row, 
+            titleName: '单据号', 
+            titleValue: 'row.number', 
+            tableName: 'orderPurchaseMain'
+          }"
+          :width="expandDetailWidth"
+          :isBasic="false" 
+          :allSchemas="PurchaseMain.allSchemas"
+          :detailAllSchemas="PurchaseDetail.allSchemas" 
+          :detailAllSchemasRules="PurchaseDetailRules"
+          :apiCreate="PurchaseDetailApi.createPurchaseDetail" 
+          :apiUpdate="PurchaseDetailApi.updatePurchaseDetail"
+          :apiPage="PurchaseDetailApi.getPurchaseDetailPage" 
+          :apiDelete="PurchaseDetailApi.deletePurchaseDetail" 
+          :Echo="Echo"
+          @searchTableSuccessDetail="searchTableSuccessDetail"
+        />
+      </template>
       <template #number="{row}">
         <el-button type="primary" link @click="openDetail(row, '单据号', row.number)">
           <span>{{ row.number }}</span>
@@ -76,6 +97,7 @@
   import * as PurchaseDetailApi from '@/api/wms/purchaseDetail'
   import * as defaultButtons from '@/utils/disposition/defaultButtons'
   import * as ItembasicApi from '@/api/wms/itembasic'
+import TableDetail from '@/components/TableDetail/src/TableDetail.vue'
 
   // 采购订单
   defineOptions({ name: 'PurchaseMain' })
@@ -92,6 +114,16 @@
     tableColumns.value = val
   }
 
+
+  const elTableRef  = ref()
+  // 计算扩展明细宽度
+  const expandDetailWidth  = ref('')
+  onMounted(() => {
+    const width = unref(elTableRef)?.$el.getBoundingClientRect().width
+    expandDetailWidth.value = width+'px'
+  })
+
+
   // 查询页面返回
   const searchTableSuccess = (formField, searchField, val, formRef, type, row) => {
     nextTick(async() => {