ERP-admin/src/views/opurchase/opurchaseclass/component/subOrder.vue

<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-column label="操作" fixed="right">
        <template #default="{ row }">
          <el-button type="primary" @click="openDetail(row)" link>详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="flex mt-4 justify-end">
      <pagination v-if="pager.lists" v-model="pager" @change="getLists" />
    </div>
    <detail ref="detailRef"  v-if="showDetail" :dictData="dictData"
            @close="showDetail = false"/>
  </div>
</template>

<script lang="ts" setup name="subOrder">
import { usePaging } from "@/hooks/usePaging";
import { useDictData } from '@/hooks/useDictOptions'
import { apiOpurchaseclassSubOrders } from "@/api/opurchaseclass";
import { useRoute } from "vue-router";
import detail from "@/views/retail/cashierclass/detail.vue";

const route = useRoute();

const queryParams = reactive({
  id: route.query.id,
  is_mer: 1
});
// 分页相关
const { pager, getLists, resetParams, resetPage } = usePaging({
  fetchFun: apiOpurchaseclassSubOrders,
  params: queryParams,
});

defineExpose({
    getLists
})

// 获取字典数据
const { dictData } = useDictData('pay_type,auditing_type')

const showDetail = ref(false);
const detailRef = ref(null);
const openDetail = async (row: any) => {
    showDetail.value = true
    await nextTick()
    detailRef.value?.open('edit')
    detailRef.value?.getDetail(row)
}

</script>