Browse Source

宣传视频模块

dev
yangsen 2 years ago
parent
commit
e36722161d
  1. 38
      web/client/src/components/Upload/index.js
  2. 72
      web/client/src/sections/fillion/components/infor/videoUpload.js
  3. 35
      web/client/src/sections/fillion/components/promotionalTable.js

38
web/client/src/components/Upload/index.js

@ -20,6 +20,7 @@ class Uploads extends Component {
} }
dealName = (uploaded) => { dealName = (uploaded) => {
console.log(uploaded)
let realName = uploaded.split('/')[2] let realName = uploaded.split('/')[2]
let x1 = realName.split('.') let x1 = realName.split('.')
let x2 = x1[0].split('_') let x2 = x1[0].split('_')
@ -27,28 +28,29 @@ class Uploads extends Component {
return showName return showName
} }
// setFileList = (value) => { setFileList = (value) => {
// let defaultFileList = []; let defaultFileList = [];
// defaultFileList = value.map((u, index) => { defaultFileList = value.map((u, index) => {
// let fileUrl = `${this.ApiRoot}/${u.url}`; let fileUrl = `${this.ApiRoot}/${u.url}`;
// return { return {
// uid: -index - 1, uid: -index - 1,
// name: this.dealName(u.url), name: this.dealName(u.url),
// status: 'done', status: 'done',
// storageUrl: u.url, storageUrl: u.url,
// url: fileUrl url: fileUrl
// }; };
// }); });
// onChange(defaultFileList) // onChange(defaultFileList)
// this.setState({ this.setState({
// fileList: defaultFileList fileList: defaultFileList
// }); });
// }; };
componentDidMount () { componentDidMount () {
const { value } = this.props; const { value } = this.props;
if (value) { if (value) {
this.setState(value); // this.setState(value);
this.setFileList(value)
} }
} }

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

@ -1,6 +1,6 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Modal, Form, Button, Input } from 'antd'; import { Modal, Form, Button, Input, Card, List } from 'antd';
import Uploads from "../../../../components/Upload/index" import Uploads from "../../../../components/Upload/index"
import { putAddPropagata } from '../../actions/infor'; import { putAddPropagata } from '../../actions/infor';
import { putEditPropagata } from '../../actions/infor'; import { putEditPropagata } from '../../actions/infor';
@ -8,42 +8,38 @@ import { getPropagata } from '../../actions/infor';
const VideoUpload = (props) => { const VideoUpload = (props) => {
const [counts, setCounts] = useState()//shuju // const [counts, setCounts] = useState()//shuju
//获取数据
// useEffect(() => { const { dispatch, record, counts, setCounts } = props
// const vedio = dispatch(getPropagata()).then((res) => {
// setCounts(res.payload.data)
// console.log(res.payload.data)
// })
// }, [])
const { dispatch, record } = props
// console.log(record);
const [success, setSuccess] = useState() //状态 const [success, setSuccess] = useState() //状态
const [form] = Form.useForm(); const [form] = Form.useForm();
//弹窗 //弹窗
const [isModalVisible, setIsModalVisible] = useState(false); const [isModalVisible, setIsModalVisible] = useState(false);
// const [video1, videoAddress] = useState()
const showModal = () => { const showModal = () => {
setIsModalVisible(true); setIsModalVisible(true);
}
const showModalEdit = () => {
setIsModalVisible(true);
}; };
// const idArr = record.map((item) => { item.id })
// console.log(idArr);
//新增 //新增
const handleOkAdd = () => { const handleOkAdd = () => {
form.validateFields().then((values) => { form.validateFields().then((values) => {
const videoAddress = values.video.map((item) => { const videoAddress = values.video.map((item) => {
return item.storageUrl.concat() return item.storageUrl
}) })
console.log(videoAddress);
const videoname = values.videoname const videoname = values.videoname
const data = { name: videoname, video: videoAddress } const data = { name: videoname, video: videoAddress }
dispatch(putAddPropagata(data)).then((res) => { dispatch(putAddPropagata(data)).then(() => {
setSuccess(res.success) dispatch(getPropagata()).then((res) => {
console.log(data); setCounts(res.payload.data)
})
}) })
setIsModalVisible(false); setIsModalVisible(false);
} }
@ -51,23 +47,24 @@ const VideoUpload = (props) => {
}; };
//编辑 //编辑
const handleOkEdit = (record) => { const handleOkEdit = (record) => {
console.log(record);
console.log(record.id);
form.validateFields().then((values) => { form.validateFields().then((values) => {
console.log(values);
const videoAddress = values.video.map((item) => { const videoAddress = values.video.map((item) => {
return item.storageUrl.concat() return item.storageUrl
}) })
// const videoname = form.getFieldsValue('videoname') const videoname = values.username
const videoname = values.username ? (!values.username) : record.name
const id = record.id const id = record.id
const video = record.video const video = record.video
const data = { publicityId: id, name: videoname, video: videoAddress } const data = { publicityId: id, name: videoname, video: video }
dispatch(putEditPropagata(data)).then((res) => { dispatch(putEditPropagata(data)).then(() => {
setSuccess(res.success) dispatch(getPropagata()).then((res) => {
setCounts(res.payload.data)
})
console.log(data); console.log(data);
}) })
} }
); );
setIsModalVisible(false); setIsModalVisible(false);
@ -88,6 +85,7 @@ const VideoUpload = (props) => {
}; };
return ( return (
<div > <div >
{ {
@ -138,7 +136,7 @@ const VideoUpload = (props) => {
</Modal> </Modal>
</div> </div>
: :
<div><Button type='link' onClick={showModal} style={{ Position: "absolute", left: "-50px", top: "32px" }}>编辑</Button> <div><Button type='link' onClick={showModalEdit} style={{ Position: "absolute", left: "-50px", top: "32px" }}>编辑</Button>
<Modal visible={isModalVisible} onOk={() => handleOkEdit(record)} onCancel={handleCancel}> <Modal visible={isModalVisible} onOk={() => handleOkEdit(record)} onCancel={handleCancel}>
<Form <Form
form={form} form={form}
@ -149,10 +147,13 @@ const VideoUpload = (props) => {
wrapperCol={{ wrapperCol={{
span: 16, span: 16,
}} }}
// initialValues={{ initialValues={{
// remember: true, username: record.name, video: record.video.map((item) => {
// }} console.log(record.video);
initialValues={true}
return { url: item }
})
}}
onFinish={onFinish} onFinish={onFinish}
onFinishFailed={onFinishFailed} onFinishFailed={onFinishFailed}
autoComplete="off" autoComplete="off"
@ -171,7 +172,6 @@ const VideoUpload = (props) => {
> >
<Input <Input
placeholder="请输入视频名称" placeholder="请输入视频名称"
defaultValue={record.name}
/> />
</Form.Item> </Form.Item>
@ -184,6 +184,8 @@ const VideoUpload = (props) => {
fileTypes={['mp4']} fileTypes={['mp4']}
maxFileSize={200} maxFileSize={200}
/> />
</Form.Item> </Form.Item>
</Form> </Form>
</Modal> </Modal>

35
web/client/src/sections/fillion/components/promotionalTable.js

@ -14,11 +14,10 @@ const promotionalTable = (props) => {
const [counts, setCounts] = useState()//shuju const [counts, setCounts] = useState()//shuju
const [success, setSuccess] = useState() const [success, setSuccess] = useState()
const [delet, setDelet] = useState() const [delet, setDelet] = useState()
// console.log(record);
const ref = useRef() const ref = useRef()
useEffect(() => { ref.current.reload() }, [delet]) useEffect(() => { ref.current.reload() }, [delet, success])
const onClickEnable = (record) => { const onClickEnable = (record) => {
@ -31,12 +30,11 @@ const promotionalTable = (props) => {
const data = ({ publicityId: id, name: name, video: video, enable: enable }) const data = ({ publicityId: id, name: name, video: video, enable: enable })
console.log(data); console.log(data);
dispatch(putEditPropagata(data)).then((res) => { dispatch(putEditPropagata(data)).then((res) => {
setSuccess(res.success) dispatch(getPropagata()).then((res) => {
console.log(data); setCounts(res.payload.data)
})
}) })
} }
// const ref = useRef()
// useEffect(() => { ref.current.reload() }, [modalVisible, modalVisibleyilan, whichofits, delet])//刷新数据
@ -47,10 +45,8 @@ const promotionalTable = (props) => {
dataIndex: 'containers', dataIndex: 'containers',
fixed: 'left', fixed: 'left',
width: 120, width: 120,
render: (dom, record) => { render: (dom, record, key) => {
for (let i = 0; i < record.lenght; i += 1) { return key + 1
return i
}
} }
}, },
{ {
@ -87,26 +83,21 @@ const promotionalTable = (props) => {
fixed: 'right', fixed: 'right',
render: (dom, record) => { render: (dom, record) => {
return <div style={{ position: 'relative', marginTop: '-30px' }}> return <div style={{ position: 'relative', marginTop: '-30px' }}>
<VideoUpload record={record} /> <VideoUpload record={record} counts={counts} setCounts={setCounts} />
<Popconfirm <Popconfirm
title="是否确定删除?" title="是否确定删除?"
arrowPointAtCenter={true} arrowPointAtCenter={true}
showArrow={true} showArrow={true}
position="topRight" position="topRight"
onConfirm={/* () => handleRemove(record) */ onConfirm={
() => { () => {
const query = { const query = {
publicityId: record.id publicityId: record.id
} }
dispatch(delPropagata(query)).then((res) => { dispatch(delPropagata(query)).then(() => {
setDelet(res) dispatch(getPropagata()).then((res) => {
console.log(res); setCounts(res.payload.data)
// if (res.success) { })
// message.success("记录删除成功");
// handelRefresh()
// } else {
// message.error("记录删除失败")
// }
}) })
} }
} }
@ -127,7 +118,7 @@ const promotionalTable = (props) => {
renderFormItem: (item, { type, defaultRender, ...rest }, form, record) => { renderFormItem: (item, { type, defaultRender, ...rest }, form, record) => {
return ( return (
<div> <div>
<VideoUpload type_ys={1} record={counts} /> <VideoUpload type_ys={1} counts={counts} setCounts={setCounts} />
</div> </div>
); );
}, },

Loading…
Cancel
Save