yangsen
2 years ago
4 changed files with 731 additions and 462 deletions
@ -0,0 +1,213 @@ |
|||
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); |
|||
Loading…
Reference in new issue