import React, { useState, useEffect, useRef } from 'react'; import { Form, Input, Select, Space, TreeSelect, Empty, Switch, Button, message } from 'antd'; import { FolderFilled, FileOutlined, MobileOutlined } from '@ant-design/icons'; import { AddWechatStatus } from '@/services/messagemanage/messagemanage'; const { Option } = Select; const { TextArea } = Input; const { TreeNode } = TreeSelect; const typeList = [{ name: '报警通知', value: 1 }, { name: '运行简报', value: 2 }]; const WeChatConfig = props => { const { menuMoblieList, formValue, id, template } = props; const [form] = Form.useForm(); useEffect(() => { getFormData(); }, []); const getFormData = () => { console.log(formValue, 'formValue'); if (formValue) { form.setFieldsValue({ ...formValue, WechatStatus: formValue.WechatStatus === 1 }); } }; // 监听表单 const changeValue = (changedFields, allFields) => { // console.log(Object.keys(changedFields), allFields, 'changedFields'); if (Object.keys(changedFields)[0] === 'WechatContent') { let regex = /\{@(.+?)\}/g; let originalList = allFields.lines || []; let list = changedFields.WechatContent.match(regex)?.map(item => { let Name = item.substring(2, item.length - 1); let orgItem = originalList.find(ele => ele.Name === Name); return { Name, Description: orgItem ? orgItem.Description : '', DefaultValue: orgItem ? orgItem.DefaultValue : '', }; }); if (list) { form.setFieldsValue({ lines: list }); } else { form.setFieldsValue({ lines: [] }); } } if (Object.keys(changedFields)[0] === 'WechatType') { let content = template.find(item => item.id === changedFields.WechatType); let regex = /\{@(.+?)\}/g; let list = content.Param.match(regex)?.map(item => { let Name = item.substring(2, item.length - 1); return { Name, Description: '', DefaultValue: '', }; }); form.setFieldsValue({ WechatContent: content.Param, lines: list, WechatCode: content.Code }); } }; const mapAppTree = org => { const haveChildren = Array.isArray(org.children) && org.children.length > 0; let icon; let value = org.id; if (org.menuType === 'MiniAppsingleStation') { value = org.stationID; icon = <MobileOutlined />; } if (org.menuType === 'MiniAppMenuGroup' || org.menuType === '"MiniAppMenuGroupTwo"') { value = org.id; icon = <FolderFilled />; } if (org.menuType === 'MiniAppMenuThree' || org.menuType === 'MiniAppMenu') { icon = <FileOutlined style={{ color: '#1890ff' }} />; value = org.pageUrl || org.id; } return ( <TreeNode value={value} title={org.text} icon={icon} key={value} disabled={org.menuType !== 'MiniAppMenuThree' && org.menuType !== 'MiniAppMenu'} > {haveChildren ? org.children.map(item => mapAppTree(item)) : null} </TreeNode> ); }; const onFinish = () => { if (!id) { message.error('请保存基础信息'); return; } form.validateFields().then(values => { let value = JSON.parse(JSON.stringify(values)); AddWechatStatus({ ...value, WechatStatus: value.WechatStatus ? 1 : 0, id, }).then(res => { if (res.code === 0) { message.success('保存成功'); } else { message.error(res.msg); } }); }); }; return ( <div> <Form form={form} labelCol={{ span: 2 }} wrapperCol={{ span: 22 }} onValuesChange={changeValue} labelAlign="left" > <div style={{ display: 'flex' }}> <Form.Item label="消息类型" name="WechatType" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} style={{ width: '400px', marginRight: '15px', display: 'block' }} > <Select placeholder="请选择消息类型"> {template.map(item => ( <Option value={item.id} key={item.id}> {item.Name} </Option> ))} </Select> </Form.Item> <Form.Item label="模板编号" name="WechatCode" style={{ width: '400px', display: 'block' }} labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} > <Input placeholder="请填写消息标题" /> </Form.Item> <Form.Item label="是否开启" name="WechatStatus" valuePropName="checked" style={{ width: '400px', display: 'block' }} labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} > <Switch checkedChildren="是" unCheckedChildren="否" /> </Form.Item> </div> <Form.Item label="跳转路径" name="WechatUrl" style={{ display: 'block', width: '1200px' }}> <Input placeholder="请填写跳转路径" /> {/* <TreeSelect showSearch treeNodeFilterProp="title" treeNodeLabelProp="value" dropdownStyle={{ maxHeight: 400, overflow: 'auto' }} placeholder="请选择功能路径" allowClear treeDefaultExpandAll treeIcon > {menuMoblieList ? ( menuMoblieList.map(item => mapAppTree(item)) ) : ( <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> )} </TreeSelect> */} </Form.Item> <Form.Item label="内容" name="WechatContent" style={{ display: 'block', width: '1200px' }}> <TextArea rows={6} placeholder="请输入内容" /> </Form.Item> <Form.List name="lines"> {fields => ( <> {fields.map(({ key, name, ...restField }) => ( <Space key={key} style={{ display: 'flex', marginBottom: 8, }} align="baseline" > <Form.Item {...restField} label="参数名" name={[name, 'Name']} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} > <Input readOnly /> </Form.Item> <Form.Item {...restField} name={[name, 'Description']} label="含义" labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} rules={[ { required: true, message: '请填写含义', }, ]} > <Input placeholder="请填写含义" /> </Form.Item> <Form.Item {...restField} name={[name, 'DefaultValue']} label="默认值" labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} // rules={[ // { // required: true, // message: '请填写默认值', // }, // ]} > <Input placeholder="请填写默认值" /> </Form.Item> {/* <MinusCircleOutlined onClick={() => remove(name)} /> */} </Space> ))} {/* <Form.Item> <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}> Add field </Button> </Form.Item> */} </> )} </Form.List> <Form.Item> <Button type="primary" onClick={onFinish}> 保存 </Button> </Form.Item> </Form> </div> ); }; export default WeChatConfig;