73 lines
1.6 KiB
TypeScript
73 lines
1.6 KiB
TypeScript
import { productcontrollerGetattributelist } from '@/servers/api/product';
|
|
import { ProFormSelect } from '@ant-design/pro-components';
|
|
import { useState } from 'react';
|
|
|
|
interface AttributeFormItemProps {
|
|
dictName: string;
|
|
name: string;
|
|
label: string;
|
|
isTag?: boolean;
|
|
}
|
|
|
|
const fetchDictOptions = async (dictName: string, keyword?: string) => {
|
|
const { data } = await productcontrollerGetattributelist({
|
|
dictName,
|
|
name: keyword,
|
|
});
|
|
return (data?.items || []).map((item: any) => ({
|
|
label: item.name,
|
|
value: item.name,
|
|
id: item.id,
|
|
item,
|
|
}));
|
|
};
|
|
|
|
const AttributeFormItem: React.FC<AttributeFormItemProps> = ({
|
|
dictName,
|
|
name,
|
|
label,
|
|
isTag = false,
|
|
}) => {
|
|
const [options, setOptions] = useState<{ label: string; value: string }[]>(
|
|
[],
|
|
);
|
|
|
|
if (isTag) {
|
|
return (
|
|
<ProFormSelect
|
|
name={name}
|
|
width="lg"
|
|
label={label}
|
|
placeholder={`请输入或选择${label}`}
|
|
fieldProps={{
|
|
mode: 'tags',
|
|
showSearch: true,
|
|
filterOption: false,
|
|
onSearch: async (val) => {
|
|
const opts = await fetchDictOptions(dictName, val);
|
|
setOptions(opts);
|
|
},
|
|
}}
|
|
request={async () => {
|
|
const opts = await fetchDictOptions(dictName);
|
|
setOptions(opts);
|
|
return opts;
|
|
}}
|
|
options={options}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<ProFormSelect
|
|
name={name}
|
|
width="lg"
|
|
label={label}
|
|
placeholder={`请选择${label}`}
|
|
request={() => fetchDictOptions(dictName)}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default AttributeFormItem;
|