@gm-pc/react 1.25.1-beta.1 → 1.26.0-beta.0

package/src/component/controlled_form/stories/stories.tsx

@@ -1,372 +1,372 @@
-import React, { FC, useState } from 'react'
-import moment from 'moment'
-
-import {
-  MoreSelect,
-  MoreSelectDataItem,
-  Select,
-  FormBlock,
-  FormButton,
-  BoxForm,
-  BoxFormMore,
-  Button,
-  ControlledFormItem,
-  useControlFormRef,
-  OnFieldsChange,
-  ControlledFormProps,
-  Divider,
-  Switch,
-  TextArea,
-  Checkbox,
-  CheckboxGroup,
-  Radio,
-  RadioGroup,
-  InputNumber,
-  DatePicker,
-  RecommendInput,
-  ColorPicker,
-  LevelSelect,
-  List,
-} from '../../../index'
-
-import { noop } from 'lodash'
-
-import { DateRangeFilter, SearchFilter } from './components'
-import { areaData } from '../../level_list/stories/constants'
-import item from '../../tree/item'
-interface FilterOptions {
-  status: string
-  pay_status: string
-  is_out_stock: string
-  searchType: string
-  serial_no: string
-  receive_customer_id: string
-  app_id: string
-  customers: MoreSelectDataItem<string>[]
-  sale_menus: MoreSelectDataItem<string>[]
-  drivers: MoreSelectDataItem<string>[]
-  menu_period_group_ids: MoreSelectDataItem<string>[]
-  sort_remark: string
-  service_period_id: string
-  has_remark: string
-  is_create_stock_sheet: boolean
-  is_scan_receipt: boolean
-  dayRange: {
-    begin: Date
-    end: Date
-    dateType: number
-  }
-}
-
-const initialValues = {
-  dayRange: {
-    begin: moment().startOf('day').toDate(),
-    end: moment().endOf('day').toDate(),
-    dateType: 1,
-  },
-  searchType: 1,
-  status: 0,
-  pay_status: 0,
-  app_id: 0,
-  sort_remark: 0,
-  is_scan_receipt: 0,
-  is_create_stock_sheet: 0,
-  has_remark: 0,
-  drivers: [
-    '1',
-    '2',
-    // { value: '1', text: '司机1' },
-    // { value: '2', text: '司机2' },
-  ],
-}
-const hideData = [
-  {
-    value: 'dayRange',
-    text: '日期',
-  },
-  {
-    value: 'status',
-    text: '订单状态',
-  },
-  {
-    value: 'has_remark',
-    text: '订单备注',
-  },
-  {
-    value: 'app_id',
-    text: '订单来源',
-  },
-]
-function getStates(label: string) {
-  return Array(3)
-    .fill(0)
-    .map((_, index) => ({
-      value: `${index + 1}`,
-      text: `${label}${index + 1}`,
-    }))
-}
-
-const dateFilterData = [
-  {
-    type: 1,
-    diyText: '下单日期',
-    name: '按下单日期',
-    expand: false,
-    // limit: (date: Date) => {
-    //   return moment(date) > moment().endOf('day')
-    // },
-  },
-  {
-    type: 2,
-    diyText: '收货日期',
-    name: '按收货日期',
-    expand: false,
-    // limit: (date: Date) => {
-    //   return moment(date) > moment().add(30, 'day').endOf('day')
-    // },
-  },
-]
-const groupOptions = [
-  {
-    value: 1,
-    children: '广州',
-  },
-  {
-    value: 2,
-    children: '深圳',
-    disabled: true,
-  },
-  {
-    value: 3,
-    children: '成都',
-  },
-  {
-    value: 4,
-    children: '东莞',
-    disabled: true,
-  },
-  {
-    value: 5,
-    children: '珠海',
-  },
-  {
-    value: 6,
-    children: '惠州',
-  },
-]
-export const ComBoxFormControl: FC = () => {
-  const [values, setValues] = useState<Partial<FilterOptions>>({})
-  const [fieldsValues, setFieldsValues] = useState<Partial<FilterOptions>>({})
-
-  const [hides, setHides] = useState<MoreSelectDataItem<string>[]>([])
-  const hideItems: ControlledFormProps<FilterOptions>['hideItems'] = {}
-  hides.forEach((item) => (hideItems[item.value as keyof FilterOptions] = true))
-  const form = useControlFormRef<FilterOptions>()
-
-  const omSubmit: ControlledFormProps<FilterOptions>['onSubmit'] = (values) => {
-    setValues(values)
-  }
-
-  const onFieldsChange: OnFieldsChange<FilterOptions> = ([changeField, changeValue]) => {
-    if (changeField === 'searchType') {
-    }
-    switch (changeField) {
-      case 'app_id':
-        break
-
-      default:
-        break
-    }
-  }
-
-  const changeValue = (): void => {
-    form.current.setFieldsValue({
-      serial_no: '1',
-      app_id: '1',
-    })
-  }
-  return (
-    <div>
-      <BoxForm
-        isControl
-        initialValues={initialValues}
-        hideItems={hideItems}
-        normalizes={{
-          menu_period_group_ids: (items: any[]) => {
-            return items?.map((item) => item.value)
-          },
-        }}
-        labelWidth='100px'
-        colWidth='385px'
-        onSubmit={omSubmit}
-        onFieldsChange={onFieldsChange}
-        form={form}
-      >
-        <FormBlock col={3}>
-          <ControlledFormItem name='dayRange'>
-            <DateRangeFilter data={dateFilterData} enabledTimeSelect />
-          </ControlledFormItem>
-          <SearchFilter />
-        </FormBlock>
-        <BoxFormMore>
-          <FormBlock col={3}>
-            <ControlledFormItem label='订单状态' name='status'>
-              <Select all data={getStates('订单状态')} />
-            </ControlledFormItem>
-            <ControlledFormItem label='支付状态' name='pay_status'>
-              <Select all data={getStates('支付状态')} />
-            </ControlledFormItem>
-            <ControlledFormItem
-              label='报价单/菜谱'
-              name='sale_menus'
-              trigger='onSelect'
-              valuePropName='selected'
-            >
-              <MoreSelect data={getStates('报价单/菜谱')} />
-            </ControlledFormItem>
-            <ControlledFormItem
-              label='商户筛选'
-              name='customers'
-              trigger='onSelect'
-              valuePropName='selected'
-            >
-              <MoreSelect multiple data={getStates('商户')} placeholder='全部商户' />
-            </ControlledFormItem>
-            <ControlledFormItem label='订单来源' name='app_id'>
-              <Select data={[...getStates('订单来源')]} />
-            </ControlledFormItem>
-            <ControlledFormItem label='司机筛选' name='drivers'>
-              <MoreSelect
-                multiple
-                data={getStates('司机')}
-                placeholder='全部司机'
-                renderListFilterType='pinyin'
-              />
-            </ControlledFormItem>
-            <ControlledFormItem label='分拣备注' name='sort_remark'>
-              <Select all data={getStates('分拣备注')} />
-            </ControlledFormItem>
-            <ControlledFormItem label='订单备注' name='has_remark'>
-              <Select all data={getStates('订单备注')} />
-            </ControlledFormItem>
-            <ControlledFormItem label='是否生成销售出库单' name='is_create_stock_sheet'>
-              <Select all data={getStates('出库单')} />
-            </ControlledFormItem>
-            <ControlledFormItem label='回单状态' name='is_scan_receipt'>
-              <Select all data={getStates('回单状态')} />
-            </ControlledFormItem>
-            <ControlledFormItem
-              label='餐次'
-              name='menu_period_group_ids'
-              trigger='onSelect'
-              valuePropName='selected'
-              onFieldChange={(value) => console.log(value)}
-            >
-              <MoreSelect
-                multiple
-                data={getStates('餐次')}
-                placeholder='全部餐次'
-                renderListFilterType='pinyin'
-              />
-            </ControlledFormItem>
-            <ControlledFormItem label='switch' name='switch' valuePropName='checked'>
-              <Switch />
-            </ControlledFormItem>
-            <ControlledFormItem label='radio' name='radio' valuePropName='checked'>
-              <Radio />
-            </ControlledFormItem>
-            <ControlledFormItem label='checkbox' name='checkbox' valuePropName='checked'>
-              <Checkbox />
-            </ControlledFormItem>
-            <ControlledFormItem label='radioGroup' name='radioGroup'>
-              <RadioGroup options={groupOptions} />
-            </ControlledFormItem>
-            <ControlledFormItem label='checkboxGroup' name='checkboxGroup'>
-              <CheckboxGroup options={groupOptions} />
-            </ControlledFormItem>
-            <ControlledFormItem label='textarea' name='textarea'>
-              <TextArea />
-            </ControlledFormItem>
-            <ControlledFormItem label='inputNumber' name='inputNumber'>
-              <InputNumber />
-            </ControlledFormItem>
-            <ControlledFormItem label='DatePicker' name='DatePicker' valuePropName='date'>
-              <DatePicker />
-            </ControlledFormItem>
-            <ControlledFormItem label='RecommendInput' name='RecommendInput'>
-              <RecommendInput data={getStates('RecommendInput')} />
-            </ControlledFormItem>
-            <ControlledFormItem label='ColorPicker' name='ColorPicker'>
-              <ColorPicker>
-                <span>colorPicker</span>
-              </ColorPicker>
-            </ControlledFormItem>
-            <ControlledFormItem
-              label='LevelSelect'
-              name='LevelSelect'
-              valuePropName='selected'
-              trigger='onSelect'
-            >
-              <LevelSelect data={areaData} />
-            </ControlledFormItem>
-            <ControlledFormItem
-              label='onlySelectLeaf'
-              name='onlySelectLeaf'
-              valuePropName='selected'
-              trigger='onSelect'
-            >
-              <LevelSelect data={areaData} onlySelectLeaf />
-            </ControlledFormItem>
-            <ControlledFormItem
-              label='List'
-              name='List'
-              valuePropName='selected'
-              trigger='onSelect'
-            >
-              <List data={areaData} />
-            </ControlledFormItem>
-          </FormBlock>
-        </BoxFormMore>
-        <FormButton>
-          <Button type='primary' htmlType='submit'>
-            搜索
-          </Button>
-          <BoxFormMore>
-            <Button onClick={noop} className='gm-margin-left-10'>
-              重置
-            </Button>
-          </BoxFormMore>
-          <Button onClick={noop} className='gm-margin-left-10'>
-            导出
-          </Button>
-        </FormButton>
-      </BoxForm>
-      <Divider />
-      <div className='gm-margin-top-20'>搜索值(onSubmit)：{JSON.stringify(values)}</div>
-      <Divider />
-      <div className='gm-margin-top-20'>选择要隐藏的表单项(hideItems)：</div>
-      <MoreSelect multiple data={hideData} selected={hides} onSelect={setHides} />
-      <div className='gm-margin-top-20'>设置表单项的值(setFieldsValue)：</div>
-      <Button type='primary' onClick={changeValue}>
-        1.设置输入框的值为1；2.设置订单来源为来源1
-      </Button>
-      <div className='gm-margin-top-20'>
-        获取表单项的值(getFieldsValue)：
-        <div>输入框：{fieldsValues.serial_no}</div>
-        <div>订单来源：{fieldsValues.app_id}</div>
-      </div>
-      <Button
-        type='primary'
-        onClick={() =>
-          setFieldsValues(form.current!.getFieldsValue(['serial_no', 'app_id']))
-        }
-      >
-        1.获取输入框的值；2.获取订单来源
-      </Button>
-    </div>
-  )
-}
-
-export default {
-  title: '表单/ControlledForm',
-}
+import React, { FC, useState } from 'react'
+import moment from 'moment'
+
+import {
+  MoreSelect,
+  MoreSelectDataItem,
+  Select,
+  FormBlock,
+  FormButton,
+  BoxForm,
+  BoxFormMore,
+  Button,
+  ControlledFormItem,
+  useControlFormRef,
+  OnFieldsChange,
+  ControlledFormProps,
+  Divider,
+  Switch,
+  TextArea,
+  Checkbox,
+  CheckboxGroup,
+  Radio,
+  RadioGroup,
+  InputNumber,
+  DatePicker,
+  RecommendInput,
+  ColorPicker,
+  LevelSelect,
+  List,
+} from '../../../index'
+
+import { noop } from 'lodash'
+
+import { DateRangeFilter, SearchFilter } from './components'
+import { areaData } from '../../level_list/stories/constants'
+import item from '../../tree/item'
+interface FilterOptions {
+  status: string
+  pay_status: string
+  is_out_stock: string
+  searchType: string
+  serial_no: string
+  receive_customer_id: string
+  app_id: string
+  customers: MoreSelectDataItem<string>[]
+  sale_menus: MoreSelectDataItem<string>[]
+  drivers: MoreSelectDataItem<string>[]
+  menu_period_group_ids: MoreSelectDataItem<string>[]
+  sort_remark: string
+  service_period_id: string
+  has_remark: string
+  is_create_stock_sheet: boolean
+  is_scan_receipt: boolean
+  dayRange: {
+    begin: Date
+    end: Date
+    dateType: number
+  }
+}
+
+const initialValues = {
+  dayRange: {
+    begin: moment().startOf('day').toDate(),
+    end: moment().endOf('day').toDate(),
+    dateType: 1,
+  },
+  searchType: 1,
+  status: 0,
+  pay_status: 0,
+  app_id: 0,
+  sort_remark: 0,
+  is_scan_receipt: 0,
+  is_create_stock_sheet: 0,
+  has_remark: 0,
+  drivers: [
+    '1',
+    '2',
+    // { value: '1', text: '司机1' },
+    // { value: '2', text: '司机2' },
+  ],
+}
+const hideData = [
+  {
+    value: 'dayRange',
+    text: '日期',
+  },
+  {
+    value: 'status',
+    text: '订单状态',
+  },
+  {
+    value: 'has_remark',
+    text: '订单备注',
+  },
+  {
+    value: 'app_id',
+    text: '订单来源',
+  },
+]
+function getStates(label: string) {
+  return Array(3)
+    .fill(0)
+    .map((_, index) => ({
+      value: `${index + 1}`,
+      text: `${label}${index + 1}`,
+    }))
+}
+
+const dateFilterData = [
+  {
+    type: 1,
+    diyText: '下单日期',
+    name: '按下单日期',
+    expand: false,
+    // limit: (date: Date) => {
+    //   return moment(date) > moment().endOf('day')
+    // },
+  },
+  {
+    type: 2,
+    diyText: '收货日期',
+    name: '按收货日期',
+    expand: false,
+    // limit: (date: Date) => {
+    //   return moment(date) > moment().add(30, 'day').endOf('day')
+    // },
+  },
+]
+const groupOptions = [
+  {
+    value: 1,
+    children: '广州',
+  },
+  {
+    value: 2,
+    children: '深圳',
+    disabled: true,
+  },
+  {
+    value: 3,
+    children: '成都',
+  },
+  {
+    value: 4,
+    children: '东莞',
+    disabled: true,
+  },
+  {
+    value: 5,
+    children: '珠海',
+  },
+  {
+    value: 6,
+    children: '惠州',
+  },
+]
+export const ComBoxFormControl: FC = () => {
+  const [values, setValues] = useState<Partial<FilterOptions>>({})
+  const [fieldsValues, setFieldsValues] = useState<Partial<FilterOptions>>({})
+
+  const [hides, setHides] = useState<MoreSelectDataItem<string>[]>([])
+  const hideItems: ControlledFormProps<FilterOptions>['hideItems'] = {}
+  hides.forEach((item) => (hideItems[item.value as keyof FilterOptions] = true))
+  const form = useControlFormRef<FilterOptions>()
+
+  const omSubmit: ControlledFormProps<FilterOptions>['onSubmit'] = (values) => {
+    setValues(values)
+  }
+
+  const onFieldsChange: OnFieldsChange<FilterOptions> = ([changeField, changeValue]) => {
+    if (changeField === 'searchType') {
+    }
+    switch (changeField) {
+      case 'app_id':
+        break
+
+      default:
+        break
+    }
+  }
+
+  const changeValue = (): void => {
+    form.current.setFieldsValue({
+      serial_no: '1',
+      app_id: '1',
+    })
+  }
+  return (
+    <div>
+      <BoxForm
+        isControl
+        initialValues={initialValues}
+        hideItems={hideItems}
+        normalizes={{
+          menu_period_group_ids: (items: any[]) => {
+            return items?.map((item) => item.value)
+          },
+        }}
+        labelWidth='100px'
+        colWidth='385px'
+        onSubmit={omSubmit}
+        onFieldsChange={onFieldsChange}
+        form={form}
+      >
+        <FormBlock col={3}>
+          <ControlledFormItem name='dayRange'>
+            <DateRangeFilter data={dateFilterData} enabledTimeSelect />
+          </ControlledFormItem>
+          <SearchFilter />
+        </FormBlock>
+        <BoxFormMore>
+          <FormBlock col={3}>
+            <ControlledFormItem label='订单状态' name='status'>
+              <Select all data={getStates('订单状态')} />
+            </ControlledFormItem>
+            <ControlledFormItem label='支付状态' name='pay_status'>
+              <Select all data={getStates('支付状态')} />
+            </ControlledFormItem>
+            <ControlledFormItem
+              label='报价单/菜谱'
+              name='sale_menus'
+              trigger='onSelect'
+              valuePropName='selected'
+            >
+              <MoreSelect data={getStates('报价单/菜谱')} />
+            </ControlledFormItem>
+            <ControlledFormItem
+              label='商户筛选'
+              name='customers'
+              trigger='onSelect'
+              valuePropName='selected'
+            >
+              <MoreSelect multiple data={getStates('商户')} placeholder='全部商户' />
+            </ControlledFormItem>
+            <ControlledFormItem label='订单来源' name='app_id'>
+              <Select data={[...getStates('订单来源')]} />
+            </ControlledFormItem>
+            <ControlledFormItem label='司机筛选' name='drivers'>
+              <MoreSelect
+                multiple
+                data={getStates('司机')}
+                placeholder='全部司机'
+                renderListFilterType='pinyin'
+              />
+            </ControlledFormItem>
+            <ControlledFormItem label='分拣备注' name='sort_remark'>
+              <Select all data={getStates('分拣备注')} />
+            </ControlledFormItem>
+            <ControlledFormItem label='订单备注' name='has_remark'>
+              <Select all data={getStates('订单备注')} />
+            </ControlledFormItem>
+            <ControlledFormItem label='是否生成销售出库单' name='is_create_stock_sheet'>
+              <Select all data={getStates('出库单')} />
+            </ControlledFormItem>
+            <ControlledFormItem label='回单状态' name='is_scan_receipt'>
+              <Select all data={getStates('回单状态')} />
+            </ControlledFormItem>
+            <ControlledFormItem
+              label='餐次'
+              name='menu_period_group_ids'
+              trigger='onSelect'
+              valuePropName='selected'
+              onFieldChange={(value) => console.log(value)}
+            >
+              <MoreSelect
+                multiple
+                data={getStates('餐次')}
+                placeholder='全部餐次'
+                renderListFilterType='pinyin'
+              />
+            </ControlledFormItem>
+            <ControlledFormItem label='switch' name='switch' valuePropName='checked'>
+              <Switch />
+            </ControlledFormItem>
+            <ControlledFormItem label='radio' name='radio' valuePropName='checked'>
+              <Radio />
+            </ControlledFormItem>
+            <ControlledFormItem label='checkbox' name='checkbox' valuePropName='checked'>
+              <Checkbox />
+            </ControlledFormItem>
+            <ControlledFormItem label='radioGroup' name='radioGroup'>
+              <RadioGroup options={groupOptions} />
+            </ControlledFormItem>
+            <ControlledFormItem label='checkboxGroup' name='checkboxGroup'>
+              <CheckboxGroup options={groupOptions} />
+            </ControlledFormItem>
+            <ControlledFormItem label='textarea' name='textarea'>
+              <TextArea />
+            </ControlledFormItem>
+            <ControlledFormItem label='inputNumber' name='inputNumber'>
+              <InputNumber />
+            </ControlledFormItem>
+            <ControlledFormItem label='DatePicker' name='DatePicker' valuePropName='date'>
+              <DatePicker />
+            </ControlledFormItem>
+            <ControlledFormItem label='RecommendInput' name='RecommendInput'>
+              <RecommendInput data={getStates('RecommendInput')} />
+            </ControlledFormItem>
+            <ControlledFormItem label='ColorPicker' name='ColorPicker'>
+              <ColorPicker>
+                <span>colorPicker</span>
+              </ColorPicker>
+            </ControlledFormItem>
+            <ControlledFormItem
+              label='LevelSelect'
+              name='LevelSelect'
+              valuePropName='selected'
+              trigger='onSelect'
+            >
+              <LevelSelect data={areaData} />
+            </ControlledFormItem>
+            <ControlledFormItem
+              label='onlySelectLeaf'
+              name='onlySelectLeaf'
+              valuePropName='selected'
+              trigger='onSelect'
+            >
+              <LevelSelect data={areaData} onlySelectLeaf />
+            </ControlledFormItem>
+            <ControlledFormItem
+              label='List'
+              name='List'
+              valuePropName='selected'
+              trigger='onSelect'
+            >
+              <List data={areaData} />
+            </ControlledFormItem>
+          </FormBlock>
+        </BoxFormMore>
+        <FormButton>
+          <Button type='primary' htmlType='submit'>
+            搜索
+          </Button>
+          <BoxFormMore>
+            <Button onClick={noop} className='gm-margin-left-10'>
+              重置
+            </Button>
+          </BoxFormMore>
+          <Button onClick={noop} className='gm-margin-left-10'>
+            导出
+          </Button>
+        </FormButton>
+      </BoxForm>
+      <Divider />
+      <div className='gm-margin-top-20'>搜索值(onSubmit)：{JSON.stringify(values)}</div>
+      <Divider />
+      <div className='gm-margin-top-20'>选择要隐藏的表单项(hideItems)：</div>
+      <MoreSelect multiple data={hideData} selected={hides} onSelect={setHides} />
+      <div className='gm-margin-top-20'>设置表单项的值(setFieldsValue)：</div>
+      <Button type='primary' onClick={changeValue}>
+        1.设置输入框的值为1；2.设置订单来源为来源1
+      </Button>
+      <div className='gm-margin-top-20'>
+        获取表单项的值(getFieldsValue)：
+        <div>输入框：{fieldsValues.serial_no}</div>
+        <div>订单来源：{fieldsValues.app_id}</div>
+      </div>
+      <Button
+        type='primary'
+        onClick={() =>
+          setFieldsValues(form.current!.getFieldsValue(['serial_no', 'app_id']))
+        }
+      >
+        1.获取输入框的值；2.获取订单来源
+      </Button>
+    </div>
+  )
+}
+
+export default {
+  title: '表单/ControlledForm',
+}