localhost_oa_front/src/views/materials-inventory/in-out/formSchemas.ts

import type { FormSchema } from '@/components/core/schema-form/';

import Api from '@/api';
import { debounce } from 'lodash-es';
import { MaterialsInOutEnum } from '@/enums/materialsInventoryEnum';
import { DictEnum } from '@/enums/dictEnum';
import { useDictStore } from '@/store/modules/dict';
import { toRaw } from 'vue';
const { getDictItemsByCode } = useDictStore();
export const formSchemas: FormSchema<API.MaterialsInOutEntity>[] = [
  {
    field: 'productId',
    component: 'Select',
    label: '产品',
    colProps: {
      span: 16,
    },
    helpMessage: '如未找到对应产品，请先去产品管理添加产品。',
    rules: [{ required: true, type: 'number' }],
    componentProps: ({ formInstance, schema, formModel }) => ({
      showSearch: true,
      filterOption: false,
      fieldNames: {
        label: 'label',
        value: 'value',
      },
      options: [],
      getPopupContainer: () => document.body,
      defaultActiveFirstOption: true,
      onClear: async () => {
        const newSchema = {
          field: schema.field,
          componentProps: {
            options: [] as LabelValueOptions,
          },
        };
        const options = await getProductOptions().finally(() => (schema.loading = false));
        newSchema.componentProps.options = options;
        formInstance?.updateSchema([newSchema]);
      },
      request: () => {
        return getProductOptions();
      },
      onSearch: debounce(async (keyword) => {
        schema.loading = true;
        const newSchema = {
          field: schema.field,
          componentProps: {
            options: [] as LabelValueOptions,
          },
        };
        formInstance?.updateSchema([newSchema]);
        const options = await getProductOptions(keyword).finally(() => (schema.loading = false));
        newSchema.componentProps.options = options;
        formInstance?.updateSchema([newSchema]);
      }, 500),
    }),
  },

  {
    field: 'inOrOut',
    component: 'Select',
    label: '出入库',
    rules: [{ required: true, type: 'number' }],
    defaultValue: MaterialsInOutEnum.In,
    colProps: {
      span: 8,
    },
    componentProps: {
      allowClear: false,
      options: [
        { label: '出库', value: MaterialsInOutEnum.Out },
        { label: '入库', value: MaterialsInOutEnum.In },
      ],
    },
  },
  {
    label: '时间',
    field: 'time',
    component: 'DatePicker',
    colProps: {
      span: 12,
    },
  },
  {
    label: '数量',
    field: 'quantity',
    component: 'InputNumber',
    colProps: {
      span: 12,
    },
  },
  {
    label: '单价',
    field: 'unitPrice',
    component: 'InputNumber',
    colProps: {
      span: 12,
    },
  },
  {
    label: '金额',
    field: 'amount',
    component: 'InputNumber',
    colProps: {
      span: 12,
    },
  },
  {
    label: '经办人',
    field: 'agent',
    component: 'Input',
    colProps: {
      span: 12,
    },
  },
  {
    label: '领料单号',
    field: 'issuanceNumber',
    component: 'Input',

    colProps: {
      span: 12,
    },
  },
  {
    label: '项目',
    field: 'project',
    component: 'Input',
    colProps: {
      span: 12,
    },
  },
  {
    label: '备注',
    field: 'remark',
    component: 'InputTextArea',
  },
  // {
  //   field: 'label',
  //   component: 'Input',
  //   label: '合同标题',
  //   rules: [{ required: true, type: 'string' }],
  //   colProps: {
  //     span: 12,
  //   },
  // },
  // {
  //   field: 'partyA',
  //   component: 'Input',
  //   label: '甲方',
  //   rules: [{ required: true, type: 'string' }],
  //   colProps: {
  //     span: 12,
  //   },
  // },
  // {
  //   field: 'partyB',
  //   component: 'Input',
  //   label: '乙方',
  //   rules: [{ required: true, type: 'string' }],
  //   colProps: {
  //     span: 12,
  //   },
  // },
  // {
  //   field: 'signingDate',
  //   label: '签订时间',
  //   component: 'DatePicker',
  //   // defaultValue: new Date(),
  //   colProps: { span: 12 },
  //   componentProps: {},
  // },
  // {
  //   field: 'deliveryDeadline',
  //   label: '交付期限',
  //   component: 'DatePicker',
  //   // defaultValue: new Date(),
  //   colProps: { span: 12 },
  // },
  // {
  //   field: 'type',
  //   label: '合同类型',
  //   component: 'Select',
  //   required: true,
  //   colProps: {
  //     span: 12,
  //   },
  //   componentProps: {
  //     options: contractTypes.map(({ label, id }) => ({ value: id, label })),
  //   },
  // },
  // {
  //   field: 'status',
  //   label: '审核结果',
  //   component: 'Select',
  //   required:true,
  //   defaultValue: 0,
  //   colProps: {
  //     span: 12,
  //   },
  //   componentProps: {
  //     allowClear: false,
  //     options: Object.values(ContractStatusEnum)
  //       .filter((value) => typeof value === 'number')
  //       .map((item) => formatStatus(item as ContractStatusEnum)),
  //   },
  // },
  // {
  //   field: 'remark',
  //   component: 'InputTextArea',
  //   label: '备注',
  // },
  // {
  //   field: 'menuIds',
  //   component: 'Tree',
  //   label: '菜单权限',
  //   componentProps: {
  //     checkable: true,
  //     vModelKey: 'checkedKeys',
  //     fieldNames: {
  //       label: 'name',
  //       key: 'id',
  //     },
  //     style: {
  //       height: '350px',
  //       paddingTop: '5px',
  //       overflow: 'auto',
  //       borderRadius: '6px',
  //       border: '1px solid #dcdfe6',
  //       resize: 'vertical',
  //     },
  //   },
  // },
];

const getProductOptions = async (keyword?: string): Promise<LabelValueOptions> => {
  const { items: result } = await Api.product.productList({ pageSize: 100, name: keyword });
  return (
    result?.map((item) => ({
      label: `${item.name}` + (item.company?.name ? `(${item.company?.name})` : ''),
      value: item.id,
    })) || []
  );
};

const getCompanyOptions = async ({ keyword, id }): Promise<LabelValueOptions> => {
  const { items: result } = await Api.company.companyList({ pageSize: 100, name: keyword });
  return (
    result?.map((item) => ({
      label: item.name,
      value: item.id,
    })) || []
  );
};