Highways4Good/web/client/src/sections/fillion/components/infor/videoUpload.js

import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
import { Modal, Form, Button, Input, Card, List } from 'antd';
import Uploads from "../../../../components/Upload/index"
import { putAddPropagata } from '../../actions/infor';
import { putEditPropagata } from '../../actions/infor';
import { getPropagata } from '../../actions/infor';


const VideoUpload = (props) => {
   // const [counts, setCounts] = useState()//shuju


   const { dispatch, record, counts, setCounts } = props
   const [success, setSuccess] = useState() //状态
   const [form] = Form.useForm();

   //弹窗
   const [isModalVisible, setIsModalVisible] = useState(false);
   const showModal = () => {
      setIsModalVisible(true);

   }
   const showModalEdit = () => {

      setIsModalVisible(true);
   };


   //新增
   const handleOkAdd = () => {
      form.validateFields().then((values) => {
         const videoAddress = values.video.map((item) => {
            return item.storageUrl
         })
         const videoname = values.videoname
         const data = { name: videoname, video: videoAddress }
         dispatch(putAddPropagata(data)).then(() => {
            dispatch(getPropagata()).then((res) => {
               setCounts(res.payload.data)
            })
         })
         setIsModalVisible(false);
      }
      );
   };
   //编辑
   const handleOkEdit = (record) => {

      form.validateFields().then((values) => {
         const videoAddress = values.video.map((item) => {
            return item.storageUrl
         })
         const videoname = values.username
         const id = record.id
         const video = record.video

         const data = { publicityId: id, name: videoname, video: video }
         dispatch(putEditPropagata(data)).then(() => {
            dispatch(getPropagata()).then((res) => {
               setCounts(res.payload.data)

            })
         })

      }
      );
      setIsModalVisible(false);
   };



   const handleCancel = () => {
      setIsModalVisible(false);
   };

   const onFinish = (values) => {
      console.log('Success:', values);
   };

   const onFinishFailed = (errorInfo) => {
      console.log('Failed:', errorInfo);
   };



   return (
      <div >
         {
            props.type_ys ? <div><Button type='primary' onClick={showModal}>新增</Button>
               <Modal visible={isModalVisible} onOk={handleOkAdd} onCancel={handleCancel}>
                  <Form
                     form={form}
                     name="basic"
                     labelCol={{
                        span: 5,
                     }}
                     wrapperCol={{
                        span: 16,
                     }}
                     initialValues={{
                        remember: true,
                     }}
                     onFinish={onFinish}
                     onFinishFailed={onFinishFailed}
                     autoComplete="off"
                  >
                     <Form.Item
                        label="视频名称"
                        name="videoname"
                        rules={[
                           {
                              required: true,
                              message: '请输入视频名称!',
                              max: 50,
                           },
                        ]}
                     >
                        <Input
                           placeholder="请输入视频名称" />
                     </Form.Item>

                     <Form.Item
                        label="选择视频"
                        name="video"
                     >
                        <Uploads
                           maxFilesNum={10}
                           fileTypes={['mp4']}
                           maxFileSize={200}
                        />
                     </Form.Item>
                  </Form>
               </Modal>
            </div>
               :
               <div><Button type='link' onClick={showModalEdit} style={{ Position: "absolute", left: "-50px", top: "32px" }}>编辑</Button>
                  <Modal visible={isModalVisible} onOk={() => handleOkEdit(record)} onCancel={handleCancel}>
                     <Form
                        form={form}
                        name="basic"
                        labelCol={{
                           span: 5,
                        }}
                        wrapperCol={{
                           span: 16,
                        }}
                        initialValues={{
                           username: record.name, video: record.video.map((item) => {
                              return { url: item }
                           })
                        }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        autoComplete="off"

                     >
                        <Form.Item
                           label="视频名称"
                           name="username"
                           rules={[
                              {
                                 required: false,
                                 message: '没有做出任何修改!',
                                 max: 50,
                              },
                           ]}
                        >
                           <Input
                              placeholder="请输入视频名称"
                           />

                        </Form.Item>
                        <Form.Item
                           label="选择视频"
                           name="video"
                        >
                           <Uploads
                              maxFilesNum={10}
                              fileTypes={['mp4']}
                              maxFileSize={200}
                           />


                        </Form.Item>
                     </Form>
                  </Modal>
               </div>
         }
      </div >
   )
}



function mapStateToProps (state) {
   const { depMessage } = state;
   const pakData = (dep) => {
      return dep.map((d) => {
         return {
            title: d.name,
            value: d.id,
            children: pakData(d.subordinate)
         }
      })
   }
   let depData = pakData(depMessage.data || [])
   return {
      loading: depMessage.isRequesting,
      depData,
   };
}
export default connect(mapStateToProps)(VideoUpload);