accout-vue3-ui/src/views/InvoiceSales/sheetOrderPool/detail-dialog.vue

<script setup lang="ts">
import { ref } from "vue";
import { GOOD_COLUMNS, ORDER_COLUMNS } from "/@/utils/details/sale";
import BasicDescriptions from "/@/components/BasicDescriptions";
import { httpDetail } from "/@/api/InvoiceSales/sheetOrderPool";
import { useAsync } from "/@/hooks";

const visible = ref(false);
const { data, run, loading } = useAsync({
  initalData: {}
});

const requesetSheetOrderDetail = sequenceNo => run(httpDetail({ sequenceNo }));

defineExpose({
  onDisplay(sequenceNo) {
    visible.value = true;
    requesetSheetOrderDetail(sequenceNo);
  }
});
</script>

<template>
  <ElDialog
    center
    title="销售订单详情"
    v-model="visible"
    width="1040px"
    :close-on-click-modal="false"
  >
    <div v-loading="loading">
      <BasicDescriptions
        v-loading="loading"
        ref="defaultRef"
        :data="data"
        :columns="ORDER_COLUMNS"
        :col-number="3"
      />
      <h1 text-18px my-2 text-center text="#303133">商品详情</h1>
      <BasicDescriptions
        v-loading="loading"
        ref="defaultRef"
        :data="data"
        :columns="GOOD_COLUMNS"
        :col-number="3"
      />
    </div>
  </ElDialog>
</template>