settle-vue3/src/views/purchase/porder/components/purchase-modal.vue

<script setup lang="ts">
import { ref, computed } from "vue";
import BasicDescriptions from "/@/components/BasicDescriptions";
import { purchaseOrderNotIncludeProduceColumns, purchaseOrderNotIncludeProduceChildColumns } from "/@/utils/details/_purchase";
import { httpInfo } from "/@/api/purchase/porder";
import QueryString from 'qs';

const visible = ref(false);
const loading = ref(false);
const child = ref([]);

const columns = computed(() => {
  return child.value.length === 0 ? purchaseOrderNotIncludeProduceColumns : purchaseOrderNotIncludeProduceChildColumns
})
const data = ref<Record<string, string>>({});


defineExpose({
  onDisplay: async _data => {
    visible.value = true;
    data.value = _data;
    loading.value = true;
    const result = await httpInfo({ sequenceNo: _data.sequenceNo })
    loading.value = false;
    child.value = result.data.child
  }
});
</script>

<template>
  <ElDialog
    v-model="visible"
    title="采购单详情"
    width="1100px"
    center
    :close-on-click-modal="false"
    @close="data = {}"
  >
    <BasicDescriptions 
      v-loading="loading" 
      :columns="columns" 
      :data="{...data, child }" 
    />
  </ElDialog>
</template>