import { BfDialogAddProduct, BfInput, BfRadioGroup, BfSwitch } from '@bud-fe/react-taro-ui';
import type { TCustomListItem, TForm } from '@bud-fe/react-taro-ui/es/components/bf-dialog-add-product';
import { verifyHelper } from '@bud-fe/utils';
import { Button } from '@tarojs/components';
import React, { useState } from 'react';
export default () => {
const [isBaseOpened, setIsBaseOpened] = useState(false);
const [isDirectSearchOpened, setIsDirectSearchOpened] = useState(false);
const [isCustomOpened, setIsCustomOpened] = useState(false);
const [searchOnly, setSearchOnly] = useState(false);
const [hideDefault, setHideDefault] = useState(false);
const [aboveFields, setAboveFields] = useState<TCustomListItem[]>([
{
name: 'gift',
label: '赠品',
value: '1',
render: (data: TForm) => (
<BfRadioGroup
value={data?.gift}
groups={[
{ label: '是', value: '1' },
{ label: '否', value: '2' },
]}
onChange={(val) => {
setAboveFields((pre) => {
pre[0].value = val;
return [...pre];
});
}}
/>
),
},
{
name: 'toggle',
label: '显示or隐藏默认表单项',
value: true,
render: (data: TForm) => (
<BfSwitch
checked={data?.toggle}
onChange={(val) => {
setHideDefault(!val);
setAboveFields((pre) => {
pre[1].value = val;
return [...pre];
});
}}
/>
),
},
]);
const [bottomFields, setBottomFields] = useState<TCustomListItem[]>([
{
name: 'forecastSales',
label: '预估销量',
value: 100,
render: (data: TForm) => (
<BfInput
placeholder="请填写预估销量"
disableDebounce
value={data?.forecastSales}
type="number"
onChange={(v) => {
setBottomFields((pre) => {
pre[0].value = v;
return [...pre];
});
}}
/>
),
},
]);
const getConfirmDisable = (formData, customFormData) => {
for (const key of Object.keys(formData)) {
if (verifyHelper.isNull(formData[key]?.value)) {
return true;
}
}
const { gift, forecastSales } = customFormData;
if (verifyHelper.isNull(gift) || verifyHelper.isNull(forecastSales)) {
return true;
}
return false;
};
return (
<>
<Button
className="group-title"
onClick={() => {
setSearchOnly(false);
setIsBaseOpened(true);
}}
>
基础用法
</Button>
<Button
className="group-title"
onClick={() => {
setIsDirectSearchOpened(true);
}}
>
直接显示商品搜索
</Button>
<Button
className="group-title"
onClick={() => {
setSearchOnly(true);
setIsBaseOpened(true);
}}
>
基础用法 - searchOnly=true
</Button>
<Button className="group-title" onClick={() => setIsCustomOpened(true)}>
自定义渲染
</Button>
<BfDialogAddProduct
isOpened={isBaseOpened}
searchOnly={searchOnly}
requestOrderly={false}
searchHistoryKey="a"
initialValues={{
id: 1,
}}
// productionDate={false}
requestBrand={async () => {
console.log('requestBrand');
return Array.from({ length: 20 }, (_, index) => ({
label: `品牌${index}`,
value: index,
}));
}}
requestSubBrand={async (brandId: string) => {
console.log('requestSubBrand', brandId);
return Array.from({ length: 20 }, (_, index) => ({
label: `子品牌${index}`,
value: index,
}));
}}
requestCapacity={async (params) => {
console.log('requestCapacity', params);
return Array.from({ length: 20 }, (_, index) => ({
label: `容量${index}`,
value: index,
}));
}}
requestPackaging={async (params) => {
console.log('requestPackaging', params);
return Array.from({ length: 20 }, (_, index) => ({
label: `包装${index}`,
value: index,
}));
}}
requestProduct={async (params) => {
console.log('requestProduct', params);
return Array.from({ length: 20 }, (_, index) => ({
label: `百威纯生 500ml 大听(${index})`,
value: index,
brandCode: `${index}`,
brandName: 'brandName',
subBrandCode: `${index}`,
subBrandName: 'subBrandName',
capacityCode: `${index}`,
capacityName: 'capacityName',
packCode: `${index}`,
packName: 'packName',
}));
}}
onCancel={() => setIsBaseOpened(false)}
onConfirm={(values, customValues) => {
console.log('onConfirm', { values, customValues });
setIsBaseOpened(false);
}}
/>
<BfDialogAddProduct.DirectSearch
isOpened={isDirectSearchOpened}
searchHistoryKey="a"
searchBarProps={{ confirmType: 'search' }}
requestProduct={async (params) => {
console.log('requestProduct', params);
return Array.from({ length: 20 }, (_, index) => ({
label: `百威纯生 500ml 大听(${index})`,
value: index,
brandCode: `${index}`,
brandName: 'brandName',
subBrandCode: `${index}`,
subBrandName: 'subBrandName',
capacityCode: `${index}`,
capacityName: 'capacityName',
packCode: `${index}`,
packName: 'packName',
}));
}}
onCancel={() => setIsDirectSearchOpened(false)}
onConfirm={(values) => {
console.log('onConfirm', { values });
setIsDirectSearchOpened(false);
}}
/>
<BfDialogAddProduct
isOpened={isCustomOpened}
hideDefault={hideDefault}
initialValues={{
brand: { label: '默认的品牌', value: '0' },
subBrand: { label: '默认的子品牌', value: '0' },
capacity: { label: '默认的容量', value: '0' },
pack: { label: '默认的包装', value: '0', disabled: true },
product: { label: '默认的商品', value: '0' },
}}
// NOTE: 若传入 confirmDisable, 说明确认按钮的disabled受控
// 否则会判断每个表单项的value来控制是否disabled
confirmDisable={getConfirmDisable}
above={aboveFields}
bottom={bottomFields}
requestBrand={async () => {
console.log('requestBrand');
return Array.from({ length: 20 }, (_, index) => ({
label: `品牌${index}`,
value: index,
}));
}}
requestSubBrand={async (brandId: string) => {
console.log('requestSubBrand', brandId);
return Array.from({ length: 20 }, (_, index) => ({
label: `子品牌${index}`,
value: index,
}));
}}
requestCapacity={async (params) => {
console.log('requestCapacity', params);
return Array.from({ length: 20 }, (_, index) => ({
label: `容量${index}`,
value: index,
}));
}}
requestPackaging={async (params) => {
console.log('requestPackaging', params);
return Array.from({ length: 20 }, (_, index) => ({
label: `包装${index}`,
value: index,
}));
}}
requestProduct={async (params) => {
console.log('requestProduct', params);
return Array.from({ length: 20 }, (_, index) => ({
label: `百威纯生 500ml 大听(${index})`,
value: index,
brandCode: `${index}`,
brandName: 'brandName',
subBrandCode: `${index}`,
subBrandName: 'subBrandName',
capacityCode: `${index}`,
capacityName: 'capacityName',
packCode: `${index}`,
packName: 'packName',
}));
}}
onCancel={() => setIsCustomOpened(false)}
onConfirm={(values, customValues) => {
console.log('onConfirm', { values, customValues });
setIsCustomOpened(false);
}}
/>
</>
);
};