tieba-admin/src/pages/tieba/plate/ModalForm.tsx

import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Select, Modal, Upload } from 'antd';

import type { ModalFormType } from './data';

import PicturesWall from '@/components/upload';

import { getClassify } from '@/services/tieba';

const { Option } = Select;

const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 16 },
};

const normFile = (e: any) => {
  if (Array.isArray(e)) {
    return e;
  }
  return e && e.fileList;
};

const ModalForm: React.FC<ModalFormType> = ({
  visible,
  changeForm,
  closeModal,
  type,
  formData,
  roleList,
}) => {
  const [form] = Form.useForm();

  const [avatarUrl, setAvatarUrl] = useState<string>('');
  const [cover, setCover] = useState<string>('');
  const [classifyList, setClassifyList] = useState<Record<string, any>[]>([]);
  const [state, setState] = useState<number>(0);

  // 反填表单
  const onFill = (): void => {
    console.log(formData, 'formData');

    form.setFieldsValue(formData);

    setAvatarUrl(formData.avatarUrl);
    setCover(formData.cover);
  };

  useEffect(() => {
    // GetClassify();

    if (type === 1) {
      onFill();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const onFinish = (values: any) => {
    const $par = {
      ...values,
      avatarUrl,
      cover,
      state,
    };
    changeForm($par);
  };

  // 获取ava
  const setAvaFn = (url: string) => setAvatarUrl(url);

  // 获取cover
  const setCoverFn = (url: string) => setCover(url);

  // 提交表单
  const onsubmit = (value: number): void => {
    setState(value);
    form.submit();
  };

  // 选择roleList
  const changeRoleList = async (_roleId: string) => {
    console.log(_roleId);

    form.setFieldsValue({
      categoryId: '',
    });

    const { code, data } = await getClassify({ curPage: 1, label: '', roleId: _roleId });
    if (code === 0) {
      console.log(data);
      const { records } = data;
      setClassifyList(records);
    }
  };

  return (
    <Modal
      visible={visible}
      onCancel={closeModal}
      width={800}
      footer={[
        <Button key="back" onClick={closeModal}>
          取消
        </Button>,
        <Button key="back" onClick={() => onsubmit(0)}>
          保存
        </Button>,
        <Button key="submit" type="primary" onClick={() => onsubmit(1)}>
          保存并发布
        </Button>,
      ]}
    >
      <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
        <Form.Item name="roleIds" label="展示可见范围" rules={[{ required: true }]}>
          <Select
            allowClear
            style={{ width: '100%' }}
            placeholder="请选择可见范围"
            onChange={changeRoleList}
          >
            {roleList.length &&
              roleList.map((item) => (
                <Option key={item.id} value={item.id}>
                  {item.label}
                </Option>
              ))}
          </Select>
        </Form.Item>
        <Form.Item name="categoryId" label="分类" rules={[{ required: true }]}>
          <Select placeholder="请选择分类(根据可见范围)" allowClear>
            {classifyList.length &&
              classifyList.map((item) => (
                <Option key={item.id} value={item.id}>
                  {item.label}
                </Option>
              ))}
          </Select>
        </Form.Item>
        <Form.Item name="label" label="贴吧板块标题" rules={[{ required: true }]}>
          <Input maxLength={50} />
        </Form.Item>
        <Form.Item name="cover" label="图标">
          <PicturesWall
            key="1"
            imgUrl={formData.avatarUrl}
            setCoverFn={setAvaFn}
            maxCount={1}
            desc="上传贴吧图标"
          />
        </Form.Item>

        <Form.Item name="description" label="板块介绍" rules={[{ required: true }]}>
          <Input.TextArea maxLength={50}></Input.TextArea>
        </Form.Item>

        {/* <Form.Item label="封面">
          <Form.Item name="cover" valuePropName="fileList" getValueFromEvent={normFile} noStyle>
            <PicturesWall imgUrl={formData.cover} key="2" setCoverFn={setCoverFn} maxCount={1} />
          </Form.Item>
        </Form.Item> */}
      </Form>
    </Modal>
  );
};

export default ModalForm;