父子表组件封装

zhanghl

2025-04-15 bbbee93929c03fe96441eb7a1beea0b1276e7fca

父子表组件封装

 src/components/HxlhTable/index.vue

@@ -26,6 +26,7 @@
            :footer-cell-class-name="footerCellClassName"
            :scroll-x="{enabled: true}"
            :scroll-y="{enabled: true}"
            :expand-config="expandConfig"
            @sort-change="sortChange"
            @page-change="pagerChange"
            @form-submit="findList"
@@ -35,6 +36,10 @@
            <template v-slot:buttons="row">
                <slot name="buttons" v-bind="row"/>
            </template>
          <template #expandContent="{ row }">
            <vxe-grid v-bind="subGridOptions" :data="row.subList">
            </vxe-grid>
          </template>
        </vxe-grid>
    </div>
  </template>
@@ -133,9 +138,22 @@
    default: () => {
    return []
    }
}
},
 expandConfig: {
    type: Object,
    default: () => {
      return {lazy: false}
    }
  },
  subGridOptions: {
    type:Object,
    default :()=>{
      return {}
    }
  }
})


const tableForm = ref([]);

// const url = computed(() => props.src)

 src/views/ApsPlatePlan/index.vue

@@ -105,7 +105,11 @@
        :loading="loading"
        :height="height"
        @on-checkbox="handleCheckboxChange"

        :expand-config="expandConfig"
        :subGridOptions="subGridOptions"
    >

    </HxlhTable>

    <!-- 添加或修改钣金计划管理对话框 -->
@@ -196,6 +200,7 @@

<script setup name="ApsPlatePlan">
import { listPlan, examplePlan, confirmPart} from "@/api/mainPlan/apsPlatePlan";
import { listProcessRoute } from "@/api/basicData/processRoute";
import HxlhTable from '@/components/HxlhTable'
import { ref } from "vue";
import { getToken } from "@/utils/auth";
@@ -428,6 +433,7 @@
const columns = ref([
  { type: 'checkbox', width: 60, align:"center"},
  { type: 'seq', title: '序号', width: 60 },
  { field: 'expand', type: 'expand', width: 60, align: 'center', slots: { content: 'expandContent' } },
  {
    title: '主计划员',
    field: 'masterPlanner',
@@ -761,6 +767,98 @@
  upload.open = false;
  upload.isUploading = false;
}
/*定义下拉二级表*/

const subGridOptions = reactive({
  border: true,
  showOverflow: true,
  columns: [
    {
      title: '料号',
      field: 'itemNo',
      width: 150,
      align:"center",
    },
    {
      title: '工单号',
      field: 'workOrderNo',
      width: 150,
      align:"center",
    },
    // {
    //   title: '工序序号',
    //   field: 'processNumber',
    //   width: 100,
    //   align:"center",
    // },
    // {
    //   title: '工序名称',
    //   field: 'processName',
    //   width: 150,
    //   align:"center",
    // },
    // {
    //   title: '工序计划开始日期',
    //   field: 'processPlanStartDay',
    //   width: 200,
    //   align:"center",
    // },
    // {
    //   title: '工序计划结束日期',
    //   field: 'processPlanEndDay',
    //   width: 200,
    //   align:"center",
    // },
    // {
    //   title: '未开工数量',
    //   field: 'notStartWorkCount',
    //   width: 90,
    //   align:"center",
    // },
    // {
    //   title: '已完成数量',
    //   field: 'completedCount',
    //   width: 90,
    //   align:"center",
    // },
    // {
    //   title: '废弃数量',
    //   field: 'discardCount',
    //   width: 90,
    //   align:"center",
    // },
    // {
    //   title: '标准工时',
    //   field: 'standardTime',
    //   width: 90,
    //   align:"center",
    // },
    // {
    //   title: '工序排序',
    //   field: 'processOrder',
    //   width: 90,
    //   align:"center",
    // },
    // {
    //   title: '集成日期',
    //   field: 'integrationDay',
    //   width: 160,
    //   align:"center",
    // }
  ]
})
const expandConfig = ref({
  lazy: true,
  loadMethod ({ row }) {
    debugger;
    // 调用接口
    return listProcessRoute({'documentNumber':row.documentNumber}).then(data => {

      row.subList = data.rows;
      debugger;
    })
  }
})

getList();
</script>