CheckDetailCheck.vue 3.1 KB
<template>
  <template>
    <BasicDrawer
      @register="register"
      v-bind="$attrs"
      title="订单信息"
      width="60%"
      :isDetail="true"
      :showDetailBack="false"
      :destroyOnClose="true"
    >
      <div class="p-4">
        <BasicTable @register="registerTable">
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'action'"> </template>
            <template v-if="column.key === 'picUrl'">
              <img :z-index="100000" :width="50" :height="50" :src="record?.smallPicUrl" />
            </template>
          </template>
        </BasicTable>
      </div>
    </BasicDrawer>
  </template>
</template>
<script lang="ts" setup>
  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
  import { defineComponent, ref, computed, unref, toRaw, reactive } from 'vue';
  import { BasicColumn, useTable, BasicTable, ColumnChangeParam } from '/@/components/Table';
  import { checkDetail } from '/@/api/project/invoice';
  import { useDesign } from '@/hooks/web/useDesign';

  // const handlePreview = (url) => {
  //   createImgPreview({ imageList: [url], defaultWidth: 500 });
  //   return false;
  // };
  const columns: BasicColumn[] = [
    {
      title: '客户编码',
      dataIndex: 'customerCode',
      width: 100,
    },
    {
      title: '项目号',
      dataIndex: 'projectNo',
      width: 100,
    },
    {
      title: '内部编码',
      dataIndex: 'innerNo',
      width: 100,
    },
    {
      title: '客户po号',
      dataIndex: 'customerPo',
      width: 100,
    },
    {
      title: '客户STYLE',
      width: 150,
      dataIndex: 'customerStyle',
    },
    {
      title: 'Model(REFERENCE)',
      width: 150,
      dataIndex: 'modeleLo',
    },
    {
      title: '订单图片',
      width: 150,
      dataIndex: 'picUrl',
    },
    {
      title: '数量',
      width: 150,
      dataIndex: 'orderCount',
    },
    {
      title: '生产科单价¥',
      width: 150,
      dataIndex: 'productionDepartmentPrice',
      customRender: (column) => {
        const { record } = column || {};
        return record?.profitAnalysisInfo?.productionDepartmentPrice?.toFixed(2);
        // ? `¥ ${record?.profitAnalysisInfo?.productionDepartmentPrice}`
        // : '';
      },
    },
    {
      title: '生产科总价¥',
      width: 150,
      dataIndex: 'productionDepartmentTotalPrice',
      customRender: (column) => {
        const { record } = column || {};
        return record?.profitAnalysisInfo?.productionDepartmentTotalPrice?.toFixed(2);
        // ? `¥ ${record?.profitAnalysisInfo?.productionDepartmentTotalPrice}`
        // : '';
      },
    },
  ];
  const checkNo = ref();

  const [register, { setDrawerProps, closeDrawer }] = useDrawerInner((data) => {
    // 方式1
    checkNo.value = data.data.checkNo;
    // checkDetail({ checkNo: checkNo.value });
  });
  const params = ref({
    checkNo: checkNo.value,
  });
  const [registerTable] = useTable({
    api: () => {
      const res = checkDetail({ checkNo: checkNo.value });
      return res;
    },
    columns: columns,
    bordered: true,
  });
</script>