pc-admin/src/pages/carouselFigure/editCarousel.jsx

import React, { useState, useEffect } from 'react';
import { Card, DatePicker, message } from 'antd';

import router from 'umi/router';
import BuildSelect from '../../components/SelectButton/BuildSelect2';
import CitySelect from '../../components/SelectButton/CitySelect2';
import { createForm, FieldTypes } from '../../components/XForm';
import Wangedit from '../../components/Wangedit/Wangedit';
import apis from '../../services/apis';
import request from '../../utils/request';
import SelectHelp from './SelectHelp';
import SelectGroup from './SelectGroup';
import SalesBatchGroup from './SalesBatchGroup';
import LiveGroup from './LiveGroup';
import SelectNews from './SelectNews';
import SelectActivity from './SelectActivity';
import SelectH5 from './SelectH5';
import InstitutionSelect from '@/components/SelectButton/InstitutionSelect';

/**
 *
 *
 * @param {*} props
 * @returns
 */
const Edit = props => {
  let contentVisible = false;
  let activityVisible = false;
  let newsVisible = false;
  let helpVisible = false;
  let groupVisible = false;
  let salesBatchVisible = false;
  let liveVisible = false;
  let h5Visible = false;
  let buildingId = '';
  let cityId = '';
  let locationType = false;
  let isHaveActive = false;
  let isCanChoose = true;

  const setExtraData = data => {
    console.log(data, 'data');
    if (data.isHaveActive != undefined) {
      isHaveActive = data.isHaveActive;
      if (!isHaveActive) {
        // data.contentType=null
        data.buildingId = null;
      }
    }

    contentVisible = data.contentType === 'other';
    activityVisible = data.contentType === 'activity';
    newsVisible = data.contentType === 'news';
    helpVisible = data.contentType === 'help';
    groupVisible = data.contentType === 'group';
    salesBatchVisible = data.contentType === 'salesBatch';
    liveVisible = data.contentType === 'live';
    h5Visible = data.contentType === 'h5';

    cityId = data.cityId;
    buildingId = data.buildingId;
    locationType = data.showPosition === 'mall';
    console.log(locationType, 'locationType');
  };

  const setExtraData1 = data => {
    if (
      (data.contentType == 'h5' && data.buildingId == null) ||
      data.contentType == '' ||
      data.contentType == 'nothing' ||
      (data.contentType == 'live' && data.buildingId == null)
    ) {
      isHaveActive = false;
    } else {
      isHaveActive = true;
    }

    contentVisible = data.contentType === 'other';
    activityVisible = data.contentType === 'activity';
    newsVisible = data.contentType === 'news';
    helpVisible = data.contentType === 'help';
    groupVisible = data.contentType === 'group';
    salesBatchVisible = data.contentType === 'salesBatch';
    liveVisible = data.contentType === 'live';
    buildingId = data.buildingId;
    locationType = data.showPosition === 'mall';
    h5Visible = data.contentType === 'h5';
    console.log(locationType, 'locationType');
  };

  const handleFormValueChange = (props, changedValues, allValues) => {
    setExtraData(allValues);
  };

  const XForm = createForm({ onValuesChange: handleFormValueChange });

  return props => {
    const { contentId } = props.location.query;
    const [data, setData] = useState({});
    useEffect(() => {
      if (contentId) {
        isCanChoose = false;
        // eslint-disable-next-line react-hooks/rules-of-hooks

        getDetail(contentId);
      } else {
        isCanChoose = true;
      }
    }, []);

    // 查询列表
    const getDetail = contentId => {
      request({ ...apis.carsuseFigure.getExtendContent, urlData: { id: contentId } }).then(data => {
        console.log(data);
        setExtraData1(data);
        setData(data);
      });
    };

    const cancelPage = () => {
      router.push({
        pathname: '/carouselFigure/carouselFigureList',
      });
    };

    const fields = [
      {
        label: '是否关联项目',
        name: 'isHaveActive',
        type: FieldTypes.Switch,
        value: isHaveActive,
        hidden: () => !isCanChoose,
        rules: [{ required: true, message: '是否城市活动' }],
      },
      {
        label: '所属项目',
        name: 'buildingId',
        render: <BuildSelect />,
        hidden: () => !isHaveActive,
        value: data.buildingId,
        rules: [{ required: true, message: '请选择所属项目' }],
      },
      {
        label: '展示城市',
        name: 'cityId',
        render: <CitySelect />,
        hidden: () => isHaveActive,
        value: data.cityId,
        rules: [{ required: true, message: '请选择展示城市' }],
      },
      {
        label: '城市公司',
        name: 'institutionId',
        render: <InstitutionSelect />,
        // hidden: () => isHaveActive,
        value: data.institutionId,
        rules: [{ required: true, message: '请选择城市公司' }],
      },
      // <Form.Item label="城市公司">
      //     {getFieldDecorator('institutionId',{
      //       rules: [{ required: true, message: '请选择城市公司' }],
      //     })(
      //       <InstitutionSelect />
      //     )}
      //   </Form.Item>
      // {
      //   label: '发布位置',
      //   name: 'showPosition',
      //   type: FieldTypes.Select,
      //   dict: [
      //     {
      //       label: '首页',
      //       value: 'index',
      //     },
      //     {
      //       label: '积分商城',
      //       value: 'mall',
      //     },
      //   ],
      //   value: data.showPosition,
      //   rules: [{ required: true, message: '请选择发布位置' }],
      // },
      {
        label: () => (locationType ? '积分商城轮播图' : '首页轮播图'),
        name: 'image',
        type: FieldTypes.ImageUploader,
        value: data.image,
        help: () =>
          locationType
            ? '建议图片尺寸：750*250px，比例3:1,格式：jpg，用于积分商城banner轮播'
            : '建议图片尺寸：690*345px，比例1.:0.5,格式：jpg，用于：首页顶部banner轮播',
        rules: [{ required: true, message: '请上传轮播图' }],
      },
      {
        label: '类型',
        name: 'contentType',
        type: FieldTypes.Select,
        hidden: () => isHaveActive,
        dict: [
          // {
          //   label: 'h5',
          //   value: 'h5',
          // },
          {
            label: '直播活动',
            value: 'live',
          },
          {
            label: '无',
            value: 'nothing',
          },
        ],
        value: data.contentType,
        rules: [{ required: true, message: '请选择类型' }],
      },
      {
        label: '标题',
        name: 'title',
        type: FieldTypes.Text,
        value: data.title,
        hidden: true,
        rules: [{ required: true, message: '请输入标题' }],
      },
      {
        label: '类型',
        name: 'contentType',
        type: FieldTypes.Select,
        hidden: () => !isHaveActive,
        dict: [
          {
            label: '活动',
            value: 'activity',
          },
          {
            label: '项目',
            value: 'project',
          },
          {
            label: '资讯',
            value: 'news',
          },
          // {
          //   label: '其他',
          //   value: 'other',
          // },
          // {
          //   label: '拼团',
          //   value: 'group',
          // },
          // {
          //   label: '助力',
          //   value: 'help',
          // },
          // {
          //   label: 'h5',
          //   value: 'h5',
          // },
          // {
          //   label: '销售批次详情',
          //   value: 'salesBatch',
          // },
          {
            label: '直播活动',
            value: 'live',
          },
        ],
        value: data.contentType,
        rules: [{ required: true, message: '请选择类型' }],
      },
      {
        label: '发布活动',
        name: 'targetId',
        render: <SelectActivity buildingId={() => buildingId} />,
        hidden: () => !activityVisible,
        value: data.targetId,
        rules: [{ required: true, message: '请选择发布活动' }],
      },
      {
        label: '是否发布H5',
        name: 'targetId',
        render: <SelectH5 buildingId={() => buildingId} />,
        hidden: () => !h5Visible,
        value: data.targetId,
        rules: [{ required: false, message: '请选择发布H5' }],
      },
      {
        label: '发布资讯',
        name: 'targetId',
        render: <SelectNews buildingId={() => buildingId} />,
        hidden: () => !newsVisible,
        value: data.targetId,
        rules: [{ required: true, message: '请选择发布资讯' }],
      },
      {
        label: '发布内容',
        name: 'content',
        render: <Wangedit />,
        value: data.content,
        hidden: () => !contentVisible,
        rules: [{ required: true, message: '请输入发布内容' }],
      },
      {
        label: '发布助力',
        name: 'targetId',
        render: <SelectHelp buildingId={() => buildingId} />,
        hidden: () => !helpVisible,
        value: data.targetId,
        rules: [{ required: true, message: '请选择发布助力' }],
      },
      {
        label: '发布拼团',
        name: 'targetId',
        render: <SelectGroup buildingId={() => buildingId} />,
        hidden: () => !groupVisible,
        value: data.targetId,
        rules: [{ required: true, message: '请选择发布拼团' }],
      },
      {
        label: '发布销售批次',
        name: 'targetId',
        render: <SalesBatchGroup buildingId={() => buildingId} />,
        hidden: () => !salesBatchVisible,
        value: data.targetId,
        rules: [{ required: true, message: '请选择发布销售批次' }],
      },
      {
        label: '发布直播活动',
        name: 'targetId',
        render: <LiveGroup buildingId={() => buildingId} />,
        hidden: () => !liveVisible,
        value: data.targetId,
        rules: [{ required: true, message: '请选择发布直播活动' }],
      },
      {
        label: '状态',
        name: 'status',
        type: FieldTypes.Select,
        dict: [
          {
            label: '上架',
            value: 1,
          },
          {
            label: '下架',
            value: 0,
          },
        ],
        value: data.status != null ? data.status : 1,
      },
      {
        label: '权重',
        name: 'orderNo',
        type: FieldTypes.Number,
        value: data.orderNo,
        help: '数值越大越靠前',
      },
    ];

    const handleSubmit = val => {
      console.log(val, '232323');
      val.showType = 'banner';
      if (!isHaveActive && val.targetId) {
        if (!val.contentType) {
          val.contentType = 'h5';
        }
      }
      if (!isHaveActive && !val.targetId) {
        val.contentType = '';
      }
      // 发布在首页
      val.showPosition ='index'
      if (contentId) {
        request({
          ...apis.carsuseFigure.updataExtendContent,
          urlData: { id: contentId },
          data: val,
        })
          .then(data => {
            message.info('操作成功');
            cancelPage();
          })
          .catch(err => {
            message.info(err.msg || err.message);
          });
      } else {
        request({ ...apis.carsuseFigure.addExtendContent, data: val })
          .then(data => {
            message.info('操作成功');
            cancelPage();
          })
          .catch(err => {
            message.info(err.msg || err.message);
          });
      }
    };

    return (
      <Card>
        <XForm onSubmit={handleSubmit} onCancel={cancelPage} fields={fields}></XForm>
      </Card>
    );
  };
};

export default Edit();