InvoiceDetail.vue 2.66 KB
<template>
  <BasicDrawer
    @register="register"
    v-bind="$attrs"
    title="订单信息"
    width="60%"
    :isDetail="true"
    :showDetailBack="false"
    :destroyOnClose="true"
  >
    <div class="p-4">
      <BasicTable @register="registerTable" :bordered="true">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'picUrl'">
            <img :z-index="100000" :width="50" :height="50" :src="record?.picUrl" />
          </template>
        </template>
      </BasicTable>
    </div>
  </BasicDrawer>
</template>

<script lang="ts" setup>
  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
  import { BasicColumn, useTable, BasicTable } from '/@/components/Table';
  import { getProjectList } from '/@/api/project/invoice';
  import { ref } from 'vue';

  // 定义表格列
  const columns: BasicColumn[] = [
    {
      title: '客户编码',
      dataIndex: 'customerCode',
      width: 100,
    },
    {
      title: '项目号',
      dataIndex: 'projectNo',
      width: 100,
    },
    {
      title: '内部编号',
      dataIndex: 'innerNo',
      width: 100,
    },
    {
      title: '图片地址',
      width: 150,
      dataIndex: 'picUrl',
    },
    {
      title: '生产部门',
      width: 150,
      dataIndex: 'productionDepartment',
    },
    {
      title: '订单成分',
      width: 150,
      dataIndex: 'orderComposition',
    },
    {
      title: '客户po号',
      width: 150,
      dataIndex: 'customerPo',
    },
    {
      title: '款式类型',
      width: 150,
      dataIndex: 'productStyle',
    },
    {
      title: '客户Style',
      width: 150,
      dataIndex: 'customerStyle',
    },
    {
      title: '订单数量',
      width: 150,
      dataIndex: 'orderCount',
    },
    {
      title: '客户总价¥',
      width: 150,
      dataIndex: 'customerRmbTotalPrice',
    },
    {
      title: '客户总价$',
      width: 150,
      dataIndex: 'customerTotalPrice',
    },
    {
      title: '西班牙提成¥',
      width: 150,
      dataIndex: 'spainRmbCommission',
    },
    {
      title: '中国团队提成¥',
      width: 150,
      dataIndex: 'rmbCommission',
    },
    {
      title: '提成合计¥',
      width: 150,
      dataIndex: 'rmbTotalExpense',
    },
  ];

  const projectNo = ref('');

  // 注册抽屉
  const [register] = useDrawerInner((data) => {
    projectNo.value = data.data.projectNo;
  });

  // 注册表格
  const [registerTable] = useTable({
    api: async () => {
      const result = await getProjectList({ projectNo: projectNo.value });
      return result;
    },
    columns: columns,
    bordered: true,
  });
</script>

<style scoped>
</style>