pc-admin/src/pages/Live/LiveActivity/Edit/components/base.jsx

import React, { useState, useEffect } from 'react';
import {
  Form,
  Input,
  Button,
  Icon,
  Select,
  Tabs,
  Radio,
  DatePicker,
  message,
  Switch,
  InputNumber,
} from 'antd';
import moment from 'moment';
import router from 'umi/router';
import Navigate from '@/components/Navigate';
import XForm, { FieldTypes, createForm } from '@/components/XForm';
import apis from '@/services/apis';
import BuildSelect2 from '@/components/SelectButton/BuildSelect2';
import LivePlatSelect from '@/components/SelectButton/LivePlatSelect';
import CitySelect3 from '@/components/SelectButton/CitySelect3';
import ImageUpload from '@/components/XForm/ImageUpload';
import request from '@/utils/request';
import WxWorkLivingRoom from '@/components/LivingRoom/WxWork';
import AuthButton from '@/components/AuthButton';

const { Option } = Select;

let cityId = '';

const header = props => {
  console.log(props);
  const liveActivityId = props.liveActivityId.liveId;
  console.log(liveActivityId);
  const [liveActivityData, setLiveActivityData] = useState({});
  const [showHelp, setShowHelp] = useState(false);

  useEffect(() => {
    if (liveActivityId) {
      getLiveActivityData(liveActivityId);
    }
  }, []);

  // 查询列表
  const getLiveActivityData = liveActivityId => {
    request({ ...apis.taliveActivity.getTaLiveActivity, urlData: { id: liveActivityId } }).then(
      data => {
        console.log(data, 'getLiveActivityData');
        setLiveActivityData(data.data);
        // if(data.qrCode == 'null'){
        //   message.error("暂时无法获取二维码")
        // }
      },
    );
  };

  const cancelPage = () => {
    router.go('-1');
  };

  //打开新页面
  const openIndexImg = () => {
    const newWin = window.open('about:blank');
    newWin.location.href = 'http://njcj.oss-cn-shanghai.aliyuncs.com/%E6%95%99%E7%A8%8B.png';
  };

  function highlightsTypeChange(e) {
    console.log(e.target.value, 'ee');
    setTypeState(e.target.value);
  }

  function disabledDate(current) {
    // Can not select days before today and today
    return current && current < moment().endOf('day');
  }

  function handleSubmit(e) {
    e.preventDefault();
    props.form.validateFields((err, values) => {
      console.log(values, 'values');
      if (!err) {
        let { liveTime, ...submitValue } = values;
        if (submitValue.status == '已发布' || submitValue.status == '1') {
          submitValue.status = 1;
        } else {
          submitValue.status = 0;
        }
        if (values.liveStartDate > values.liveEndDate) {
          message.info('直播结束时间大于开始时间');
          return;
        }
        submitValue.liveStartDate = moment(submitValue.liveStartDate._d).format(
          'YYYY-MM-DD HH:mm:ss',
        );
        submitValue.liveEndDate = moment(submitValue.liveEndDate._d).format('YYYY-MM-DD HH:mm:ss');
        console.log(submitValue);
        request({
          ...apis.taliveActivity.updateTaLiveActivity,
          urlData: { id: liveActivityId },
          data: submitValue,
        })
          .then(data => {
            message.info('保存成功');
            cancelPage();
          })
          .catch(err => {
            message.info(err.msg || err.message);
          });
      }
    });
  }

  const { getFieldDecorator } = props.form;

  return (
    <>
      <Form labelCol={{ span: 7 }} wrapperCol={{ span: 12 }} onSubmit={handleSubmit}>
        <Form.Item label="所属城市">
          {getFieldDecorator('cityId', {
            initialValue: liveActivityData.cityId,
            rules: [{ required: true, message: ' 请选择所属城市' }],
          })(<CitySelect3 buildingId={props.form.getFieldValue('buildingId')} />)}
        </Form.Item>
        <Form.Item label="所属楼盘">
          {getFieldDecorator('buildingId', {
            initialValue: liveActivityData.buildingId,
            rules: [{ required: true, message: ' 请选择所属楼盘' }],
          })(<BuildSelect2 cityId={props.form.getFieldValue('cityId')} />)}
        </Form.Item>
        <Form.Item label="直播活动标题">
          {getFieldDecorator('liveActivityTitle', {
            initialValue: liveActivityData.liveActivityTitle,
            rules: [{ required: true, message: '请输入直播活动标题' }],
          })(<Input maxLength={20} placeholder="给直播活动起个名字" />)}
        </Form.Item>
        <Form.Item label="直播开始时间">
          {getFieldDecorator('liveStartDate', {
            initialValue: liveActivityData.liveStartDate
              ? moment(liveActivityData.liveStartDate, 'YYYY-MM-DD HH:mm:ss')
              : null,
            rules: [
              {
                required: true,
                message: '请选择直播开始时间',
              },
            ],
          })(
            <DatePicker
              placeholder="预计开始时间"
              style={{ width: '500px' }}
              format="YYYY-MM-DD HH:mm:ss"
              showTime={{ format: 'HH:mm:ss' }}
            />,
          )}
        </Form.Item>
        <Form.Item label="直播结束时间">
          {getFieldDecorator('liveEndDate', {
            initialValue: liveActivityData.liveEndDate
              ? moment(liveActivityData.liveEndDate, 'YYYY-MM-DD HH:mm:ss')
              : null,
            rules: [
              {
                required: true,
                message: '请选择直播结束时间',
              },
            ],
          })(
            <DatePicker
              placeholder="预计结束时间"
              disabledDate={disabledDate}
              style={{ width: '500px' }}
              format="YYYY-MM-DD HH:mm:ss"
              showTime={{ format: 'HH:mm:ss' }}
            />,
          )}
        </Form.Item>
        <Form.Item label="是否新房">
          {getFieldDecorator('isNewHouse', {
            valuePropName: 'checked',
            initialValue: liveActivityData.isNewHouse || false,
          })(<Switch />)}
        </Form.Item>
        {/* <Form.Item label="直播小程序">
          {getFieldDecorator('liveApp', {
            initialValue: liveActivityData.liveApp,
            rules: [{ required: true, message: '请选择直播小程序' }],
          })(<LivePlatSelect />)}
        </Form.Item> */}
        {/* <Form.Item label="房间参数">
          {getFieldDecorator('liveRoomParam', {
            initialValue: liveActivityData.liveRoomParam,
            rules: [{ required: true, message: '请输入房间参数' }],
          })(
            <Input
              maxLength={1000}
              placeholder="点击右侧按钮查看如何获取房间参数"
              style={{ width: '680px' }}
            />,
          )}
          <Navigate onClick={openIndexImg}>不知道怎么填？查看说明</Navigate>
        </Form.Item> */}
        <Form.Item label="选择直播间">
          {getFieldDecorator('liveRoomParam', {
            initialValue: liveActivityData.liveRoomParam,
            rules: [{ required: true, message: '请选择直播间' }],
          })(<WxWorkLivingRoom placeholder="请选择直播间" />)}
        </Form.Item>
        <Form.Item label="封面图" help="建议尺寸：335px*201px，比例5:3，格式：jpg，用于：活动列表">
          {getFieldDecorator('listImg', {
            initialValue: liveActivityData.listImg,
            rules: [{ required: true, message: '请上传封面图1' }],
          })(<ImageUpload />)}
        </Form.Item>
        {/* <Form.Item label="封面图2" help="建议尺寸：750*250px，比例3:1，格式：jpg，用于：项目详情页">
          {getFieldDecorator('detailImg', {
            initialValue: liveActivityData.detailImg,
            rules: [{ required: true, message: '请上传封面图2' }],
          })(<ImageUpload />)}
        </Form.Item> */}
        <Form.Item
          label="详情图"
          help="建议尺寸：750*1456px以上，格式：jpg，用于：直播活动详情页，点击可跳转到直播间"
        >
          {getFieldDecorator('detailTypeImg', {
            initialValue: liveActivityData.detailTypeImg,
            rules: [{ required: true, message: '请上传详情图' }],
          })(<ImageUpload style={{ width: '300px', height: '600px' }} />)}
        </Form.Item>
        <Form.Item label="权重">
          {getFieldDecorator('weight', {
            initialValue: liveActivityData.weight,
          })(<InputNumber placeholder="权重越大越靠前" style={{ width: '150px' }} />)}
        </Form.Item>
        {/* <Form.Item label="发布状态">
          {getFieldDecorator('status', {
            initialValue: liveActivityData.status == 1 ? '已发布' : '未发布',
            rules: [{ required: true, message: '请选择发布状态' }],
          })(
            <Select placeholder="发布状态" style={{ width: '300px' }}>
              <Option value="0">未发布</Option>
              <Option value="1">已发布</Option>
            </Select>,
          )}
        </Form.Item> */}
        <Form.Item wrapperCol={{ span: 15, offset: 7 }}>
          <AuthButton name="live.edit.submit" noRight={null}>
            <Button type="primary" htmlType="submit" style={{ marginRight: '20px' }}>
              确定
            </Button>
          </AuthButton>

          <Button onClick={() => router.go(-1)}>取消</Button>
        </Form.Item>
      </Form>
    </>
  );
};

const Base = Form.create({ name: 'header' })(header);

export default Base;