EnterpriseWeChatConfig.jsx

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 { AddWorkWechatStatus } from '@/services/messagemanage/messagemanage';
const { Option } = Select;
const { TextArea } = Input;
const { TreeNode } = TreeSelect;
const typeList = [
  { name: '文字', value: 1 },
  { name: '卡片', value: 2 },
  { name: '图文', value: 3 },
  { name: '图片', value: 4 },
];

const EnterpriseWeChatConfig = props => {
  const { menuMoblieList, formValue, id } = props;
  const [flag, setFlag] = useState(0);
  const [form] = Form.useForm();
  useEffect(() => {
    getFormData();
  }, []);

  const getFormData = () => {
    console.log(formValue, 'formValue');
    if (formValue) {
      form.setFieldsValue({ ...formValue, WorkWechatStatus: formValue.WorkWechatStatus === 1 });
      setFlag(flag + 1);
    }
  };
  // 监听表单
  const changeValue = (changedFields, allFields) => {
    // console.log(Object.keys(changedFields), allFields, 'changedFields');
    if (Object.keys(changedFields)[0] === 'WorkWechatContent') {
      let regex = /\{@(.+?)\}/g;
      let originalList = allFields.lines || [];
      let list = changedFields.WorkWechatContent.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] === 'WorkWechatType') {
      setFlag(flag + 1);
    }
  };
  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(value => {
      if (value) {
        AddWorkWechatStatus({
          ...value,
          WorkWechatStatus: value.WorkWechatStatus ? 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="WorkWechatType"
            labelCol={{ span: 5 }}
            wrapperCol={{ span: 19 }}
            style={{ width: '400px', display: 'block' }}
          >
            <Select placeholder="请选择消息类型">
              {typeList.map(item => (
                <Option value={item.value} key={item.value}>
                  {item.name}
                </Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            label="企业应用ID"
            name="WorkWechatAppID"
            style={{ width: '400px', display: 'block' }}
            labelCol={{ span: 5 }}
            wrapperCol={{ span: 19 }}
          >
            <Input placeholder="请填写企业应用ID" />
          </Form.Item>
          <Form.Item
            label="是否开启"
            name="WorkWechatStatus"
            valuePropName="checked"
            style={{ width: '400px', display: 'block' }}
            labelCol={{ span: 5 }}
            wrapperCol={{ span: 19 }}
          >
            <Switch checkedChildren="是" unCheckedChildren="否" />
          </Form.Item>
        </div>
        <div style={{ display: 'flex' }}>
          <Form.Item
            label="标题"
            name="WorkWechatTitle"
            style={{
              width: '400px',
              display:
                form.getFieldValue('WorkWechatType') === 2 ||
                form.getFieldValue('WorkWechatType') === 3
                  ? 'block'
                  : 'none',
            }}
            labelCol={{ span: 5 }}
            wrapperCol={{ span: 19 }}
          >
            <Input placeholder="请填写标题" />
          </Form.Item>
          <Form.Item
            label="底部文字"
            name="WorkWechatBtnText"
            style={{
              width: '400px',
              display: form.getFieldValue('WorkWechatType') === 2 ? 'block' : 'none',
            }}
            labelCol={{ span: 5 }}
            wrapperCol={{ span: 19 }}
          >
            <Input placeholder="请填写底部文字" />
          </Form.Item>
        </div>
        <Form.Item
          label="图片路径"
          name="WorkWechatImgUrl"
          style={{
            width: '1200px',
            display:
              form.getFieldValue('WorkWechatType') === 3 ||
              form.getFieldValue('WorkWechatType') === 4
                ? 'block'
                : 'none',
          }}
        >
          <Input placeholder="请填写底部文字" />
        </Form.Item>
        <Form.Item
          label="跳转路径"
          name="WorkWechatUrl"
          style={{
            display:
              form.getFieldValue('WorkWechatType') === 3 ||
              form.getFieldValue('WorkWechatType') === 2
                ? 'block'
                : 'none',
            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="WorkWechatContent"
          style={{
            display: form.getFieldValue('WorkWechatType') !== 4 ? 'block' : 'none',
            width: '1200px',
          }}
        >
          <TextArea rows={4} placeholder="请输入内容" />
        </Form.Item>
        <Form.List name="lines">
          {fields => (
            <div
              style={{
                display: form.getFieldValue('WorkWechatType') !== 4 ? 'block' : 'none',
              }}
            >
              {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> */}
            </div>
          )}
        </Form.List>
        <Form.Item>
          <Button type="primary" onClick={onFinish}>
            保存
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

export default EnterpriseWeChatConfig;