四好公路
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

222 lines
7.1 KiB

import React, { useState } from 'react';
import { connect } from 'react-redux';
import { Modal, Form, Button, Input, Switch } 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 { dispatch, record, counts, setCounts } = props
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 enable = values.show
const data = { name: videoname, video: videoAddress, enable: enable }
dispatch(putAddPropagata(data)).then(() => {
dispatch(getPropagata()).then((res) => {
setCounts(res.payload.data)
})
})
setIsModalVisible(false);
}
);
};
//编辑
const handleOkEdit = (record) => {
form.validateFields().then((values) => {
const videoname = values.username
const id = record.id
const newVideoAddress = values.video.map((item) => {
return item.storageUrl
})
const data = { publicityId: id, name: videoname, video: newVideoAddress }
dispatch(putEditPropagata(data)).then(() => {
dispatch(getPropagata()).then((res) => {
setCounts(res.payload.data)
console.log(data);
})
})
setIsModalVisible(false);
}
);
};
const handleCancel = () => {
setIsModalVisible(false);
};
const handleCancelEdit = () => {
setIsModalVisible(false);
form.resetFields()
};
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={handleCancelEdit} >
<Form
form={form}
name="basic"
labelCol={{
span: 5,
}}
wrapperCol={{
span: 16,
}}
initialValues={{
show: 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"
rules={[
{
required: true,
message: '必须上传视频!',
},
]}
>
<Uploads
maxFilesNum={1}
fileTypes={['mp4']}
maxFileSize={200}
/>
</Form.Item>
<Form.Item
label="是否开启展示"
name="show"
>
<Switch checkedChildren="展示" unCheckedChildren="关闭" defaultChecked={true} />
</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"
rules={[
{
required: true,
message: '必须上传视频!',
},
]}
>
<Uploads
maxFilesNum={1}
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);