@zat-design/sisyphus-react-mcp 0.1.2 → 0.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/meta/components.json +1 -1
- package/meta/examples.json +4 -4
- package/meta/props.json +1 -1
- package/package.json +1 -1
package/meta/components.json
CHANGED
package/meta/examples.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "4.5.
|
|
2
|
+
"version": "4.5.4",
|
|
3
3
|
"examples": [
|
|
4
4
|
{
|
|
5
5
|
"component": "ProAction",
|
|
@@ -391,7 +391,7 @@
|
|
|
391
391
|
"file": "virtualList.tsx",
|
|
392
392
|
"title": "虚拟表格",
|
|
393
393
|
"note": "解决大表单渲染卡顿问题，开启虚拟列表，配置 scroll,x,y 必须为固定值",
|
|
394
|
-
"source": "import { Divider, Form, Button } from 'antd';\nimport { useEffect, useState } from 'react';\nimport ReactJson from 'react-json-view';\nimport {\n ProForm,\n ProConfigProvider,\n ProEditTableColumnType,\n ProFormColumnType,\n} from '@zat-design/sisyphus-react';\nimport { validate } from '@zat-design/utils';\nimport { enumCodeConfig, formData } from './data/data';\n\nconst KEYS_WITH_INSURED = [\n 'name',\n 'certType',\n 'certNo',\n 'birthday',\n 'gender',\n 'certStartDate',\n 'certEndDate',\n 'nativeplace',\n 'occupationCode',\n 'mobile',\n 'province',\n 'city',\n 'county',\n 'address',\n];\n\nexport const checkCert = (_, value) => {\n const [certType, certNo] = value || [];\n if (certType === '01' && !validate.isIdCard(certNo)) {\n return Promise.reject(new Error('请输入正确的身份证号码'));\n }\n if (!certType) {\n return Promise.reject(new Error('请选择证件类型'));\n }\n if (!certNo) {\n return Promise.reject(new Error('请输入的证件号码'));\n }\n return Promise.resolve();\n};\n\nexport const checkAddress = (_rule, value) => {\n const [province, city, county, address] = value || [];\n if (value) {\n if (!province || !city || !county) {\n return Promise.reject(new Error('请选择省/市/区或直辖市'));\n }\n }\n if (!address) {\n return Promise.reject(new Error('请输入详细地址'));\n }\n return Promise.resolve();\n};\n\nconst Demo = () => {\n const [jsonData, setJsonData] = useState({});\n\n const [form] = Form.useForm();\n\n const onFinish = async () => {\n const values = await form.validateFields();\n setJsonData(values);\n };\n\n const columns: ProEditTableColumnType[] = [\n {\n type: 'InputNumber',\n label: '受益比例(%)',\n name: 'percentOfBenefit',\n width: 120,\n required: true,\n fixed: 'left',\n fieldProps: {\n min: 1,\n max: 100,\n precision: 0,\n },\n },\n {\n type: 'ProEnum',\n label: '受益顺序',\n name: 'benefitSerialNo',\n width: '140px',\n required: true,\n fieldProps: {\n code: 'CD000867',\n showCodeName: true,\n },\n },\n {\n type: 'ProEnum',\n label: '与被保险人关系',\n name: 'relationToInsured',\n required: true,\n fieldProps: {\n code: 'CD000806',\n showCodeName: true,\n onFieldChange(val: string, record: any) {\n // 联动其他值\n if (val === '1') {\n const values = formData;\n record.disabled = true;\n KEYS_WITH_INSURED.forEach((key) => {\n record[key] = values[key];\n });\n } else {\n record.disabled = false;\n KEYS_WITH_INSURED.forEach((key) => {\n record[key] = undefined;\n });\n }\n },\n },\n },\n {\n label: '受益人姓名',\n name: 'name',\n required: true,\n fieldProps: {\n maxLength: 50,\n },\n },\n {\n type: 'Group',\n label: '证件号码',\n required: true,\n rules: [{ validator: checkCert }],\n names: ['certType', 'certNo'],\n width: '360px',\n fieldProps: {\n space: {\n compact: true,\n },\n children: [\n {\n type: 'ProEnum',\n fieldProps: {\n style: {\n width: '150px',\n },\n code: 'CD000879',\n showCodeName: true,\n },\n },\n {\n type: 'Input',\n },\n ],\n },\n },\n {\n type: 'DatePicker',\n label: '出生日期',\n name: 'birthday',\n required: true,\n fieldProps: {\n format: 'YYYY-MM-DD',\n },\n },\n {\n type: 'ProEnum',\n label: '性别',\n name: 'gender',\n required: true,\n fieldProps: {\n code: 'CD000060',\n showCodeName: true,\n },\n },\n {\n type: 'DatePicker',\n label: '证件有效起期',\n name: 'certStartDate',\n rules: (text: string, record: any) => {\n return [{ required: record.isIdCard, message: '请选择证件有效起期' }];\n },\n valueType: 'date',\n toCSTString: true,\n fieldProps: (text: string, record: any) => {\n const { certEndDate } = record;\n return {\n disabledDate: (current: any) => current && certEndDate && current.isAfter(certEndDate),\n onFieldChange(val: string, record: any) {\n if (record) {\n record.certStartDate = val;\n }\n },\n };\n },\n },\n {\n type: 'ProTimeLimit',\n label: '证件有效止期',\n name: 'certEndDate',\n required: true,\n fieldProps: (text: string, record: any) => {\n const { certStartDate } = record;\n return {\n disabledDate: (current: any) =>\n current && certStartDate && current.isBefore(certStartDate),\n };\n },\n },\n {\n type: 'ProEnum',\n label: '国籍',\n name: 'nativeplace',\n required: true,\n fieldProps: {\n code: 'CD000832',\n showCodeName: true,\n },\n },\n {\n type: 'ProEnum',\n label: '职业小类',\n name: 'occupationCode',\n required: true,\n fieldProps: {\n code: 'CD000862',\n showCodeName: true,\n },\n },\n {\n label: '联系方式',\n name: 'mobile',\n required: true,\n fieldProps: {\n maxLength: 11,\n },\n },\n {\n type: 'ProCascader',\n label: '联系地址',\n required: true,\n rules: [{ required: true, message: '请输入联系地址' }],\n names: ['province', 'city', 'county', 'address'],\n width: '360px',\n fieldProps: {\n mode: 'address',\n },\n },\n ];\n\n const data = [];\n for (let index = 1; index < 1000; index++) {\n data.push({\n
|
|
394
|
+
"source": "import { Divider, Form, Button } from 'antd';\nimport { useEffect, useState } from 'react';\nimport ReactJson from 'react-json-view';\nimport {\n ProForm,\n ProConfigProvider,\n ProEditTableColumnType,\n ProFormColumnType,\n} from '@zat-design/sisyphus-react';\nimport { validate } from '@zat-design/utils';\nimport { enumCodeConfig, formData } from './data/data';\n\nconst KEYS_WITH_INSURED = [\n 'name',\n 'certType',\n 'certNo',\n 'birthday',\n 'gender',\n 'certStartDate',\n 'certEndDate',\n 'nativeplace',\n 'occupationCode',\n 'mobile',\n 'province',\n 'city',\n 'county',\n 'address',\n];\n\nexport const checkCert = (_, value) => {\n const [certType, certNo] = value || [];\n if (certType === '01' && !validate.isIdCard(certNo)) {\n return Promise.reject(new Error('请输入正确的身份证号码'));\n }\n if (!certType) {\n return Promise.reject(new Error('请选择证件类型'));\n }\n if (!certNo) {\n return Promise.reject(new Error('请输入的证件号码'));\n }\n return Promise.resolve();\n};\n\nexport const checkAddress = (_rule, value) => {\n const [province, city, county, address] = value || [];\n if (value) {\n if (!province || !city || !county) {\n return Promise.reject(new Error('请选择省/市/区或直辖市'));\n }\n }\n if (!address) {\n return Promise.reject(new Error('请输入详细地址'));\n }\n return Promise.resolve();\n};\n\nconst Demo = () => {\n const [jsonData, setJsonData] = useState({});\n\n const [form] = Form.useForm();\n\n const onFinish = async () => {\n const values = await form.validateFields();\n setJsonData(values);\n };\n\n const columns: ProEditTableColumnType[] = [\n {\n type: 'InputNumber',\n label: '受益比例(%)',\n name: 'percentOfBenefit',\n width: 120,\n required: true,\n fixed: 'left',\n fieldProps: {\n min: 1,\n max: 100,\n precision: 0,\n },\n },\n {\n type: 'ProEnum',\n label: '受益顺序',\n name: 'benefitSerialNo',\n width: '140px',\n required: true,\n fieldProps: {\n code: 'CD000867',\n showCodeName: true,\n },\n },\n {\n type: 'ProEnum',\n label: '与被保险人关系',\n name: 'relationToInsured',\n required: true,\n fieldProps: {\n code: 'CD000806',\n showCodeName: true,\n onFieldChange(val: string, record: any) {\n // 联动其他值\n if (val === '1') {\n const values = formData;\n record.disabled = true;\n KEYS_WITH_INSURED.forEach((key) => {\n record[key] = values[key];\n });\n } else {\n record.disabled = false;\n KEYS_WITH_INSURED.forEach((key) => {\n record[key] = undefined;\n });\n }\n },\n },\n },\n {\n label: '受益人姓名',\n name: 'name',\n required: true,\n fieldProps: {\n maxLength: 50,\n },\n },\n {\n type: 'Group',\n label: '证件号码',\n required: true,\n rules: [{ validator: checkCert }],\n names: ['certType', 'certNo'],\n width: '360px',\n fieldProps: {\n space: {\n compact: true,\n },\n children: [\n {\n type: 'ProEnum',\n fieldProps: {\n style: {\n width: '150px',\n },\n code: 'CD000879',\n showCodeName: true,\n },\n },\n {\n type: 'Input',\n },\n ],\n },\n },\n {\n type: 'DatePicker',\n label: '出生日期',\n name: 'birthday',\n required: true,\n fieldProps: {\n format: 'YYYY-MM-DD',\n },\n },\n {\n type: 'ProEnum',\n label: '性别',\n name: 'gender',\n required: true,\n fieldProps: {\n code: 'CD000060',\n showCodeName: true,\n },\n },\n {\n type: 'DatePicker',\n label: '证件有效起期',\n name: 'certStartDate',\n // 性能提示：函数型 fieldProps/rules 会触发整行 shouldCellUpdate，仅在确有跨字段联动时使用\n rules: (text: string, record: any) => {\n return [{ required: record.isIdCard, message: '请选择证件有效起期' }];\n },\n valueType: 'date',\n toCSTString: true,\n fieldProps: (text: string, record: any) => {\n const { certEndDate } = record;\n return {\n disabledDate: (current: any) => current && certEndDate && current.isAfter(certEndDate),\n onFieldChange(val: string, record: any) {\n if (record) {\n record.certStartDate = val;\n }\n },\n };\n },\n },\n {\n type: 'ProTimeLimit',\n label: '证件有效止期',\n name: 'certEndDate',\n required: true,\n fieldProps: (text: string, record: any) => {\n const { certStartDate } = record;\n return {\n disabledDate: (current: any) =>\n current && certStartDate && current.isBefore(certStartDate),\n };\n },\n },\n {\n type: 'ProEnum',\n label: '国籍',\n name: 'nativeplace',\n required: true,\n fieldProps: {\n code: 'CD000832',\n showCodeName: true,\n },\n },\n {\n type: 'ProEnum',\n label: '职业小类',\n name: 'occupationCode',\n required: true,\n fieldProps: {\n code: 'CD000862',\n showCodeName: true,\n },\n },\n {\n label: '联系方式',\n name: 'mobile',\n required: true,\n fieldProps: {\n maxLength: 11,\n },\n },\n {\n type: 'ProCascader',\n label: '联系地址',\n required: true,\n rules: [{ required: true, message: '请输入联系地址' }],\n names: ['province', 'city', 'county', 'address'],\n width: '360px',\n fieldProps: {\n mode: 'address',\n },\n },\n ];\n\n const data = [];\n for (let index = 1; index < 1000; index++) {\n // 虚拟滚动性能：行对象仅保留列实际用到的字段，避免整行比较/克隆携带无用数据\n data.push({\n id: index,\n percentOfBenefit: index,\n benefitSerialNo: formData.benefitSerialNo,\n relationToInsured: formData.relationToInsured,\n name: `杨杰${index}`,\n certType: formData.certType,\n certNo: formData.certNo,\n birthday: formData.birthday,\n gender: formData.gender,\n certStartDate: formData.certStartDate,\n certEndDate: formData.certEndDate,\n nativeplace: formData.nativeplace,\n occupationCode: formData.occupationCode,\n mobile: formData.mobile,\n province: formData.province,\n city: formData.city,\n county: formData.county,\n address: formData.address,\n });\n }\n\n const formColumns: ProFormColumnType[] = [\n {\n type: 'ProEditTable',\n span: 24,\n name: 'cyList',\n fieldProps: {\n columns,\n virtual: true,\n // 控制可见行数，减少滚动时每帧挂载的表单控件数量\n scroll: { x: 3000, y: 400 },\n },\n },\n ];\n\n useEffect(() => {\n form.setFieldsValue({\n cyList: data,\n });\n }, []);\n\n // ProConfigProvider 真实场景注册在应用入口处即可全局使用，此处只做示例展示\n return (\n <ProConfigProvider value={enumCodeConfig}>\n <ProForm form={form} columns={formColumns} footer={false} />\n <Button type=\"primary\" onClick={onFinish}>\n 保存\n </Button>\n <Divider style={{ textAlign: 'center' }}>-- 保存后表格数据 --</Divider>\n <ReactJson src={jsonData} collapsed />\n </ProConfigProvider>\n );\n};\n\nexport default Demo;\n"
|
|
395
395
|
},
|
|
396
396
|
{
|
|
397
397
|
"component": "ProEnum",
|
|
@@ -587,7 +587,7 @@
|
|
|
587
587
|
"file": "base.tsx",
|
|
588
588
|
"title": "基本使用",
|
|
589
589
|
"note": "",
|
|
590
|
-
"source": "import { Form, Radio } from 'antd';\nimport React, { useState } from 'react';\nimport ReactJson from 'react-json-view';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType } from '@zat-design/sisyphus-react';\nimport { addressDataSource } from './data/enum';\n\nconst BaseModule: React.FC = () => {\n const [state, setState] = useState('primary');\n const [data, setData] = useState({});\n const [form] = Form.useForm();\n\n const columns: ProFormColumnType[] = [\n {\n type: 'Input',\n label: '输入框',\n name: 'typeName',\n required: true,\n tooltip: '提示信息',\n },\n {\n type: 'ProCascader',\n label: '地址',\n names: ['p', 'c', 'a', 'address'],\n required: true,\n span: 16,\n fieldProps: {\n mode: 'address',\n dataSource: addressDataSource,\n },\n },\n {\n type: 'InputNumber',\n label: '算千分数字输入框',\n name: 'InputNumber',\n valueType: 'thousandth', // 输入可千分\n },\n {\n type: 'InputNumber',\n label: '正整数',\n name: 'Number',\n fieldProps: {\n precision: 0,\n min: 1,\n },\n },\n {\n type: 'ProNumberRange',\n label: '范围输入框',\n names: ['min', 'max'],\n valueType: 'thousandth', // 输入可千分\n },\n {\n type: 'Radio',\n label: '单选框',\n name: 'Radio',\n fieldProps: {\n dataSource: [\n { value: '1', label: '类型1' },\n { value: '2', label: '类型3' },\n ],\n },\n },\n {\n type: 'Checkbox',\n label: '多选框',\n name: 'Checkbox',\n fieldProps: {\n dataSource: [\n { value: '1', label: '类型1' },\n { value: '2', label: '类型3' },\n ],\n },\n },\n { type: 'Switch', label: '开关', name: 'switch' },\n {\n type: 'ProSelect',\n label: '证件类型',\n name: 'certType',\n fieldProps: {\n dataSource: [\n { label: '身份证', value: 'I' },\n { label: '军官证', value: 'J' },\n { label: '户口本', value: 'K' },\n { label: '医保卡', value: 'O' },\n ],\n },\n },\n
|
|
590
|
+
"source": "import { Form, Radio } from 'antd';\nimport React, { useState } from 'react';\nimport ReactJson from 'react-json-view';\nimport { ProForm } from '@zat-design/sisyphus-react';\nimport type { ProFormColumnType } from '@zat-design/sisyphus-react';\nimport { addressDataSource } from './data/enum';\n\nconst BaseModule: React.FC = () => {\n const [state, setState] = useState('primary');\n const [data, setData] = useState({});\n const [form] = Form.useForm();\n\n const columns: ProFormColumnType[] = [\n {\n type: 'Input',\n label: '输入框',\n name: 'typeName',\n required: true,\n tooltip: '提示信息',\n },\n {\n type: 'ProCascader',\n label: '地址',\n names: ['p', 'c', 'a', 'address'],\n required: true,\n span: 16,\n fieldProps: {\n mode: 'address',\n dataSource: addressDataSource,\n },\n },\n {\n type: 'InputNumber',\n label: '算千分数字输入框',\n name: 'InputNumber',\n valueType: 'thousandth', // 输入可千分\n },\n {\n type: 'InputNumber',\n label: '正整数',\n name: 'Number',\n fieldProps: {\n precision: 0,\n min: 1,\n },\n },\n {\n type: 'ProNumberRange',\n label: '范围输入框',\n names: ['min', 'max'],\n valueType: 'thousandth', // 输入可千分\n },\n {\n type: 'Radio',\n label: '单选框',\n name: 'Radio',\n fieldProps: {\n dataSource: [\n { value: '1', label: '类型1' },\n { value: '2', label: '类型3' },\n ],\n },\n },\n {\n type: 'Checkbox',\n label: '多选框',\n name: 'Checkbox',\n fieldProps: {\n dataSource: [\n { value: '1', label: '类型1' },\n { value: '2', label: '类型3' },\n ],\n },\n },\n { type: 'Switch', label: '开关', name: 'switch' },\n {\n type: 'DatePicker',\n label: '日期选择',\n name: 'DatePicker',\n valueType: 'date',\n },\n {\n type: 'RangePicker',\n label: '时间范围选择',\n names: ['start', 'end'],\n valueType: 'dateStartEndTime',\n },\n {\n type: 'ProSelect',\n label: '证件类型',\n name: 'certType',\n fieldProps: {\n dataSource: [\n { label: '身份证', value: 'I' },\n { label: '军官证', value: 'J' },\n { label: '户口本', value: 'K' },\n { label: '医保卡', value: 'O' },\n ],\n },\n },\n ];\n\n const handleStateChange = (val) => {\n setState(val);\n };\n\n return (\n <>\n <Form.Item label=\"查看状态\">\n <Radio.Group onChange={(e) => handleStateChange(e.target.value)} value={state}>\n <Radio value=\"primary\">正常</Radio>\n <Radio value=\"disabled\">禁用</Radio>\n <Radio value=\"view\">查看</Radio>\n </Radio.Group>\n </Form.Item>\n <ProForm\n form={form}\n submitOnEnter\n columns={columns}\n disabled={state === 'disabled'}\n isView={state === 'view'}\n initialValues={{\n switch: true,\n }}\n onFinish={(values) => {\n setData(values);\n }}\n />\n <h4>数据源</h4>\n <ReactJson src={data} />\n </>\n );\n};\n\nexport default BaseModule;\n"
|
|
591
591
|
},
|
|
592
592
|
{
|
|
593
593
|
"component": "ProForm",
|
|
@@ -1448,7 +1448,7 @@
|
|
|
1448
1448
|
"file": "init.tsx",
|
|
1449
1449
|
"title": "基本使用",
|
|
1450
1450
|
"note": "默认支持 `dataSource`、`ProEnum` 的 `code` 数据源消费消费、支持字段搜索、支持 `tree` 和 `treeSelect` 2种展现模式、默认展现形式为 Tree。",
|
|
1451
|
-
"source": "import { SmileOutlined } from '@ant-design/icons';\nimport { useSetState } from 'ahooks';\nimport { ProTree } from '@zat-design/sisyphus-react';\n\nconst dataSourceTree = [\n {\n label: '中意财产保险有限公司黑龙江分公司',\n value: 1,\n checkable: false,\n disableCheckbox: true,\n disabled: true,\n },\n {\n label: '中意财产保险有限公司黑龙江分公司市场部',\n value: 2,\n icon: <SmileOutlined />,\n },\n {\n label: '中意财产保险有限公司黑龙江分公司市场营销部黑分专代海洋望奎吉龙',\n value: 'C',\n // isLeaf: true,\n // selectable: true,\n title: '自定义title',\n key: 'selft key',\n icon: <SmileOutlined />,\n children: [\n {\n label: '中意财产-erji',\n value: 'ccA-A',\n children: [\n {\n label: '中意财产-erji',\n value: 11,\n },\n {\n label: '中意财产-sanjii',\n value: 12,\n children: [\n {\n label: '中意财产-erji',\n value: 13,\n },\n {\n label: '中意财产-sanjii',\n value: 14,\n },\n ],\n },\n ],\n },\n {\n label: '中意财产-sanjii',\n value: 'ccA-B',\n children: [\n {\n label: '中意财产-erji',\n value: 'ddA-A',\n },\n {\n label: '中意财产-sanjii',\n value: 'ddA-B',\n },\n ],\n },\n ],\n },\n {\n label: '选项四',\n value: 'D',\n },\n {\n label: '中意财产保险有限公司成都分公司市场部',\n value: 'E',\n },\n];\n\nconst InitDemo = () => {\n const [{ dataTree }, setState] = useSetState({\n checkedKeys: [],\n dataTree: dataSourceTree,\n });\n\n const addLeaf = (key: any, e?: any) => {\n e.stopPropagation();\n const arr = JSON.parse(JSON.stringify(dataTree));\n let flag;\n let index;\n const loop = (items: any) => {\n if (!items) {\n return items;\n }\n items.map((item: any, i: number) => {\n if (item?.value === key) {\n index = i;\n flag = items;\n index = i + 1;\n }\n loop(item?.children);\n return item;\n });\n };\n loop(arr);\n if (flag) {\n flag.splice(index, 0, { label: `新增${index}`, value: Math.random() });\n }\n setState({\n dataTree: arr,\n });\n };\n const onSelectCheck = (val?: any, info?: any) => {\n console.info('复选点击事件 ', val, info);\n return Promise.resolve();\n };\n\n return (\n <>\n <p style={{ margin: '16px 0' }}>\n 配置多个操作按钮组件内部会将其收入一个icon里(必须手动传入dataSource )\n </p>\n <ProTree\n placeholder=\"请输入搜索字符\"\n expandedKeys={['ccA-A']}\n value=\"ccA-A\"\n dataSource={dataTree}\n isRadioSelect={true}\n showLine={true}\n checkable={false}\n showIcon={true}\n // value={checkedKeys}\n onSelect={onSelectCheck}\n menu={(key: any) => [\n <div key=\"add\" className=\"icon-item icon-add\" onClick={(e) => addLeaf(key, e)}>\n 新增\n </div>,\n <div
|
|
1451
|
+
"source": "import { SmileOutlined } from '@ant-design/icons';\nimport { useSetState } from 'ahooks';\nimport { ProTree } from '@zat-design/sisyphus-react';\n\nconst dataSourceTree = [\n {\n label: '中意财产保险有限公司黑龙江分公司',\n value: 1,\n checkable: false,\n disableCheckbox: true,\n disabled: true,\n },\n {\n label: '中意财产保险有限公司黑龙江分公司市场部',\n value: 2,\n icon: <SmileOutlined />,\n },\n {\n label: '中意财产保险有限公司黑龙江分公司市场营销部黑分专代海洋望奎吉龙',\n value: 'C',\n // isLeaf: true,\n // selectable: true,\n title: '自定义title',\n key: 'selft key',\n icon: <SmileOutlined />,\n children: [\n {\n label: '中意财产-erji',\n value: 'ccA-A',\n children: [\n {\n label: '中意财产-erji',\n value: 11,\n },\n {\n label: '中意财产-sanjii',\n value: 12,\n children: [\n {\n label: '中意财产-erji',\n value: 13,\n },\n {\n label: '中意财产-sanjii',\n value: 14,\n },\n ],\n },\n ],\n },\n {\n label: '中意财产-sanjii',\n value: 'ccA-B',\n children: [\n {\n label: '中意财产-erji',\n value: 'ddA-A',\n },\n {\n label: '中意财产-sanjii',\n value: 'ddA-B',\n },\n ],\n },\n ],\n },\n {\n label: '选项四',\n value: 'D',\n },\n {\n label: '中意财产保险有限公司成都分公司市场部',\n value: 'E',\n },\n];\n\nconst InitDemo = () => {\n const [{ dataTree }, setState] = useSetState({\n checkedKeys: [],\n dataTree: dataSourceTree,\n });\n\n const addLeaf = (key: any, e?: any) => {\n e.stopPropagation();\n const arr = JSON.parse(JSON.stringify(dataTree));\n let flag;\n let index;\n const loop = (items: any) => {\n if (!items) {\n return items;\n }\n items.map((item: any, i: number) => {\n if (item?.value === key) {\n index = i;\n flag = items;\n index = i + 1;\n }\n loop(item?.children);\n return item;\n });\n };\n loop(arr);\n if (flag) {\n flag.splice(index, 0, { label: `新增${index}`, value: Math.random() });\n }\n setState({\n dataTree: arr,\n });\n };\n const deleteLeaf = (key: any, e?: any) => {\n e.stopPropagation();\n const remove = (items: any[]): any[] =>\n items\n .filter((item) => item?.value !== key)\n .map((item) => (item?.children ? { ...item, children: remove(item.children) } : item));\n setState({\n dataTree: remove(dataTree),\n });\n };\n const onSelectCheck = (val?: any, info?: any) => {\n console.info('复选点击事件 ', val, info);\n return Promise.resolve();\n };\n\n return (\n <>\n <p style={{ margin: '16px 0' }}>\n 配置多个操作按钮组件内部会将其收入一个icon里(必须手动传入dataSource )\n </p>\n <ProTree\n placeholder=\"请输入搜索字符\"\n expandedKeys={['ccA-A']}\n value=\"ccA-A\"\n dataSource={dataTree}\n isRadioSelect={true}\n showLine={true}\n checkable={false}\n showIcon={true}\n // value={checkedKeys}\n onSelect={onSelectCheck}\n menu={(key: any) => [\n <div key=\"add\" className=\"icon-item icon-add\" onClick={(e) => addLeaf(key, e)}>\n 新增\n </div>,\n <div\n key=\"delete\"\n className=\"icon-item\"\n style={{ color: '#FF005F' }}\n onClick={(e) => deleteLeaf(key, e)}\n >\n 删除\n </div>,\n ]}\n />\n </>\n );\n};\nexport default InitDemo;\n"
|
|
1452
1452
|
},
|
|
1453
1453
|
{
|
|
1454
1454
|
"component": "ProTree",
|
package/meta/props.json
CHANGED