• 日期: 2025-12-15
  • 标签: 常规

import React, { PureComponent } from 'react';\nimport { connect } from 'dva';\nimport { Form, Input, Modal, Select, Row, Col } from 'antd';\n\nconst { Option } = Select;\nconst FormItem = Form.Item;\n\n@Form.create()\n@connect(({ filterBlock }) => ({\n filterBlock,\n}))\nclass UpdateForm extends PureComponent {\n constructor(props) {\n super(props);\n this.state = {\n visible: false,\n formVals: props.record || {},\n filterSelect: [],\n keyId: '',\n };\n\n this.formLayout = {\n labelCol: { span: 4 },\n wrapperCol: { span: 18 },\n };\n\n this.formLayout1 = {\n labelCol: { span: 10 },\n wrapperCol: { span: 14 },\n };\n this.formLayout2 = {\n labelCol: { span: 6 },\n wrapperCol: { span: 18 },\n };\n }\n\n componentDidMount() {\n const { dispatch } = this.props;\n // eslint-disable-next-line no-unused-vars\n const { formVals, filterSelect } = this.state;\n if (formVals.key) {\n dispatch({\n type: 'filterBlock/fetchItemsList',\n payload: formVals.key,\n callback: res => {\n if (res && res.status === 200) {\n const centerData = res.data.map(item => {\n return {\n label: item,\n value: ${item},\n };\n });\n this.setState({ filterSelect: centerData });\n }\n },\n });\n }\n }\n\n handleSave = () => {\n const { form, okChange, index, record, filterList } = this.props;\n const { formVals, keyId } = this.state;\n form.validateFields((err, fieldsValue) => {\n if (err) return;\n\n const arrData = fieldsValue.content.reduce((arr, next) => {\n const typeList = next.type.map(type => {\n return { type, name: next.name };\n });\n return arr.concat(typeList);\n }, []);\n\n const nameValue = (filterList || []).find(item => item.id === keyId)?.title;\n const formItem = {\n key: keyId || formVals?.key,\n value: fieldsValue?.value || nameValue,\n typeList: arrData,\n };\n console.log(formItem, 80);\n okChange(formItem, index);\n this.handleVisible();\n });\n };\n\n handleVisible = (flag, record) => {\n this.setState({\n visible: !!flag,\n formVals: record || {},\n });\n\n };\n\n // 添加\n add = () => {\n // const { form } = this.props;\n // const list = form.getFieldValue('list');\n // const nextList = list?.concat({});\n // form.setFieldsValue({\n // list: nextList,\n // });\n const { form } = this.props;\n const list = form.getFieldValue('list') || [];\n const nextList = [...list, {}];\n form.setFieldsValue({\n list: nextList,\n });\n form.getFieldDecorator('list', { initialValue: nextList });\n }\n\n // 删除\n deleteRow = index => {\n const { form } = this.props;\n const list = form.getFieldValue('list');\n const content = form.getFieldValue('content');\n\n if (list.length === 1) {\n return;\n }\n\n form.setFieldsValue({\n list: list.filter((item, key) => key !== index),\n content: content.filter((item, key) => key !== index),\n });\n };\n\n projectChange = keys => {\n const { dispatch } = this.props;\n // eslint-disable-next-line no-unused-vars\n const { filterSelect, keyId } = this.state;\n dispatch({\n type: 'filterBlock/fetchItemsList',\n payload: keys,\n callback: res => {\n if (res && res.status === 200) {\n const centerData = res.data.map(item => {\n return {\n label: item,\n value: ${item},\n };\n });\n this.setState({ filterSelect: centerData, keyId: keys });\n }\n },\n });\n\n };\n\n renderContent = formVals => {\n // console.log(formVals, 144);\n const { filterSelect } = this.state;\n const { formLayout, formLayout1, formLayout2 } = this\n const {\n form: { getFieldDecorator, getFieldValue },\n filterList,\n } = this.props;\n ;\n const list = formVals?.typeList || [{}];\n getFieldDecorator('list', { initialValue: list });\n console.log(list, 155);\n const selectProps = {\n placeholder: '请选择',\n optionFilterProp: 'children',\n style: {\n width: '100%',\n },\n allowClear: true,\n showSearch: true,\n };\n\n return (\n

\n <FormItem key="value" {...formLayout} label="筛选项">\n {getFieldDecorator('value', {\n rules: [{ required: true, message: '请选择筛选项' }],\n initialValue: formVals.value,\n })(\n <Select {...selectProps} onChange={value => this.projectChange(value)}>\n {filterList?.length &&\n filterList?.map(items => (\n <Option\n key={items.id}\n value={items.id}\n disabled={(this.props?.sourceData || []).find(item => item.key == items.id)}\n >\n {items.title}\n \n ))}\n \n )}\n \n ,{(list || []).map((item, index) => {\n return (\n \n \n <FormItem label={筛选类${index + 1}} key={index} {...formLayout1}>\n {getFieldDecorator(content[${index}].type, {\n rules: [\n {\n required: true,\n message: '请选择筛选类！',\n },\n ],\n initialValue: item.type?.split(','),\n })(\n <Select {...selectProps} mode="multiple">\n {filterSelect.map(item1 => (\n \n ))}\n \n )}\n \n \n \n <FormItem label="别称" key={index} {...formLayout2}>\n {getFieldDecorator(content[${index}].name, {\n initialValue: item.name,\n rules: [\n {\n required: true,\n message: '请输入别称',\n },\n ],\n })()}\n \n \n \n <div\n style={{ width: '100%', height: '27px', marginTop: '10px', marginLeft: '10px' }}\n >\n {index > 0 ? (\n <span\n style={{ color: '#1890FF', cursor: 'pointer' }}\n onClick={this.deleteRow.bind(this, index)}\n >\n 删除\n \n ) : null}\n {index === 0 ? (\n <span\n style={{ paddingRight: '12px', color: '#1890FF', cursor: 'pointer' }}\n onClick={this.add}\n >\n 新增\n \n ) : null}\n
\n \n \n );\n })}\n \n );\n };\n\n render() {\n const { children, record } = this.props;\n const { visible, formVals } = this.state;\n return (\n <>\n {React.cloneElement(children, {\n onClick: () => this.handleVisible(true, record),\n })}\n <Modal\n width={800}\n bodyStyle={{ padding: '15px 30px' }}\n destroyOnClose\n title={Object.keys(formVals).length > 0 ? '编辑' : '新建'}\n visible={visible}\n onOk={() => this.handleSave()}\n onCancel={() => this.handleVisible()}\n maskClosable={false}\n >\n {this.renderContent(formVals)}\n \n </>\n );\n }\n}\n\nUpdateForm.defaultProps = {\n okChange: () => { },\n};\n\nexport default UpdateForm;

React 筛选器组件：更新表单功能实现

原文地址: https://www.cveoy.top/t/topic/qk07 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录