accout-vue3-ui/src/views/purchase/buyInvoiceQuery/components/invoice-table.vue

<script setup lang="ts">
import { ref, unref } from "vue";
import { invTypeOptions } from "../config/_opitons";
import InvoceForm from "./invoice-form.vue";

const emit = defineEmits(["change"]);

const invArr = ref<string[]>([]);
const invoceFormRef = ref<InstanceType<typeof InvoceForm>>(null);

function handleChange(data) {
  invArr.value = [...invArr.value, ...(Array.isArray(data) ? data : [data])];
  emit("change", unref(invArr));
}

function handleDelete({ $index }) {
  invArr.value.splice($index, 1);
  emit("change", unref(invArr));
}
</script>

<template>
  <div flex w-full justify-end mb-5>
    <el-button type="primary" link @click="() => invoceFormRef.onDisplay()"
      >添加</el-button
    >
  </div>
  <el-table size="small" :data="invArr" border>
    <el-table-column type="index" width="50" />

    <el-table-column label="发票上传方式" prop="invType" show-overflow-tooltip>
      <template #="{ row }">
        <el-tag>{{
          invTypeOptions.find(t => t.value === row.invType)?.label
        }}</el-tag>
      </template>
    </el-table-column>

    <el-table-column label="发票号码" prop="invNumber" show-overflow-tooltip />
    <el-table-column label="发票代码" prop="invCode" show-overflow-tooltip />
    <el-table-column label="校验码" prop="checkNumber" show-overflow-tooltip />
    <el-table-column label="发票名称" prop="invName" show-overflow-tooltip />
    <el-table-column label="发票图片" prop="inv_img" show-overflow-tooltip>
      <template #="{ row }">
        <el-image
          :src="row.inv_img"
          :preview-src-list="[row.inv_img]"
          style="height: 30px"
          preview-teleported
        />
      </template>
    </el-table-column>
    <el-table-column label="税前金额" prop="subtotal_amount" />

    <el-table-column label="开票日期" prop="open_time" show-overflow-tooltip />

    <el-table-column label="操作" width="60px">
      <template #="scope">
        <el-button link type="primary" @click="() => handleDelete(scope)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>

  <InvoceForm ref="invoceFormRef" @change="handleChange" />
</template>