localhost_oa_front/src/views/materials-inventory/in-out/columns.tsx

import type { TableColumn } from '@/components/core/dynamic-table';
import { MaterialsInOutEnum } from '@/enums/materialsInventoryEnum';
import { formatToDate } from '@/utils/dateUtil';
import { Tag } from 'ant-design-vue';
import { getProjectOptions } from './formSchemas';
import { debounce } from 'lodash-es';

export type TableListItem = API.MaterialsInOutEntity;
export type TableQueryItem = API.MaterialsInOutListParams;
export type TableColumnItem = TableColumn<TableListItem>;
export const baseColumns: TableColumnItem[] = [
  {
    title: '出入库单号',
    width: 100,
    fixed: 'left',
    dataIndex: 'inventoryNumber',
    customRender: ({ record }) => {
      return record.inventoryNumber || '';
    },
    formItemProps: {
      labelWidth: 120,
    },
  },
  {
    title: '项目',
    width: 80,
    dataIndex: 'projectId',
    customRender: ({ record }) => {
      return record?.project?.name || '';
    },
    formItemProps: {
      component: 'Select',
      componentProps: ({ formInstance, schema, formModel }) => ({
        showSearch: true,
        filterOption: false,
        fieldNames: {
          label: 'label',
          value: 'value',
        },
        getPopupContainer: () => document.body,
        defaultActiveFirstOption: true,
        onClear: async () => {
          const newSchema = {
            field: schema.field,
            componentProps: {
              options: [] as LabelValueOptions,
            },
          };
          const options = await getProjectOptions().finally(() => (schema.loading = false));
          newSchema.componentProps.options = options;
          formInstance?.updateSchema([newSchema]);
        },
        request: () => {
          return getProjectOptions();
        },
        onSearch: debounce(async (keyword) => {
          schema.loading = true;
          const newSchema = {
            field: schema.field,
            componentProps: {
              options: [] as LabelValueOptions,
            },
          };
          formInstance?.updateSchema([newSchema]);
          const options = await getProjectOptions(keyword).finally(() => (schema.loading = false));
          newSchema.componentProps.options = options;
          formInstance?.updateSchema([newSchema]);
        }, 500),
      }),
    },
  },
  {
    title: '所属公司',
    width: 100,
    dataIndex: 'company',
    customRender: ({ record }) => {
      return record.product?.company?.name || '';
    },
  },
  {
    title: '产品名称',
    width: 100,
    dataIndex: 'product',
    customRender: ({ record }) => {
      return record.product?.name || '';
    },
  },

  {
    title: '单位',
    width: 40,
    hideInSearch: true,
    dataIndex: 'unit',
    customRender: ({ record }) => {
      return record?.product?.unit?.label || '';
    },
  },

  {
    title: '入库/出库',
    width: 60,
    dataIndex: 'inOrOut',
    formItemProps: {
      component: 'Select',
      componentProps: {
        options: Object.values(MaterialsInOutEnum)
          .filter((value) => typeof value === 'number')
          .map((item) => formatStatus(item as MaterialsInOutEnum)),
      },
    },
    customRender: ({ record }) => {
      const { color, label } = formatStatus(record.inOrOut);
      return <Tag color={color}>{label}</Tag>;
    },
  },
  {
    title: '时间',
    width: 60,
    align: 'center',
    dataIndex: 'time',
    formItemProps: {
      component: 'MonthPicker',
    },
    customRender: ({ record }) => {
      return formatToDate(record.time);
    },
  },
  {
    title: '数量',
    hideInSearch: true,
    width: 60,
    dataIndex: 'quantity',
    customRender: ({ record }) => {
      return parseFloat(record.quantity) || 0;
    },
  },
  {
    title: '单价',
    hideInSearch: true,
    width: 80,
    dataIndex: 'unitPrice',
    customRender: ({ record }) => {
      return parseFloat(record.unitPrice) || 0;
    },
  },
  {
    title: '金额',
    width: 80,
    align: 'center',
    dataIndex: 'amount',
    hideInSearch: true,
    customRender: ({ record }) => {
      return parseFloat(record.amount) || 0;
    },
  },
  {
    title: '经办人',
    width: 80,
    dataIndex: 'agent',
  },
  {
    title: '领料单号',
    width: 80,
    dataIndex: 'issuanceNumber',
  },

  {
    title: '备注',
    width: 80,
    dataIndex: 'remark',
  },
];

export function formatStatus(status: MaterialsInOutEnum): {
  color: string;
  label: string;
  value: number;
} {
  switch (status) {
    case MaterialsInOutEnum.In:
      return {
        color: 'green',
        label: '入库',
        value: MaterialsInOutEnum.In,
      };
    case MaterialsInOutEnum.Out:
      return {
        color: 'red',
        label: '出库',
        value: MaterialsInOutEnum.Out,
      };
    default:
      return {
        color: 'green',
        label: '入库',
        value: MaterialsInOutEnum.In,
      };
  }
}