Compare commits
2 Commits
3bbfedb6d8
...
8d7f16db1c
| Author | SHA1 | Date |
|---|---|---|
yangsen
|
8d7f16db1c | 3 years ago |
|
yangsen
|
18081ef2dc | 3 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); |
||||
@ -1,169 +1,181 @@ |
|||||
import React, { useEffect, useState } from 'react'; |
import React, { useEffect, useState} from 'react'; |
||||
import { connect } from 'react-redux'; |
import { connect } from 'react-redux'; |
||||
import { Spin, Button, Popconfirm, Badge } from 'antd'; |
import { Spin, Button, Popconfirm, Switch } from 'antd'; |
||||
import ProTable from '@ant-design/pro-table'; |
import ProTable from '@ant-design/pro-table'; |
||||
import './protable.less' |
import './protable.less' |
||||
import moment from 'moment'; |
import VideoUpload from './infor/videoUpload'; |
||||
import { getReportStatistic } from "../actions/infor" |
import { getPropagata } from '../actions/infor'; |
||||
|
import { putEditPropagata } from '../actions/infor'; |
||||
|
import { delPropagata } from '../actions/infor'; |
||||
|
|
||||
const promotionalTable = (props) => { |
const promotionalTable = (props) => { |
||||
const { dispatch, user, depData, depMessage, depLoading } = props |
const { dispatch, } = props |
||||
const [rowSelected, setRowSelected] = useState([]) |
const [rowSelected, setRowSelected] = useState([]) |
||||
const [regionId, setRegionId] = useState()//区域id
|
const [counts, setCounts] = useState()//shuju
|
||||
const [placeType, setPlaceType] = useState()//场所
|
|
||||
const [day, setDay] = useState([moment('2022-03-01').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')])//日期
|
|
||||
const [sitename, setSitename] = useState()//场所名称
|
|
||||
const [counts, setCounts] = useState()//shuju
|
|
||||
|
|
||||
|
const onClickEnable = (record) => { |
||||
|
const id = record.id |
||||
|
const name = record.name |
||||
|
const video = record.video |
||||
|
|
||||
const columns = |
const enable = true ? record.enable == false : true |
||||
[{ |
const data = ({ publicityId: id, name: name, video: video, enable: enable }) |
||||
title: '序号', |
dispatch(putEditPropagata(data)).then((res) => { |
||||
search: false, |
dispatch(getPropagata()).then((res) => { |
||||
dataIndex: 'containers', |
setCounts(res.payload.data) |
||||
|
}) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
fixed: 'left', |
|
||||
width: 120, |
|
||||
render: (dom, record) => { |
|
||||
return record.address |
|
||||
}, |
|
||||
fieldProps: { |
|
||||
getPopupContainer: (triggerNode) => triggerNode.parentNode, |
|
||||
} |
|
||||
}, |
|
||||
{ |
|
||||
title: '视频名称', |
|
||||
dataIndex: 'placeName', |
|
||||
fixed: 'left', |
|
||||
width: 120, |
|
||||
options: 1, |
|
||||
backgroundColor: "#ffffff", |
|
||||
fieldProps: { |
|
||||
onChange: (value, cs) => { |
|
||||
setSitename(value.currentTarget.value) |
|
||||
}, |
|
||||
placeholder: '请输入视频名称进行搜索', |
|
||||
getPopupContainer: (triggerNode) => triggerNode.parentNode, |
|
||||
}, |
|
||||
}, |
|
||||
|
|
||||
{ |
|
||||
title: '修改时间', |
|
||||
search: false, |
|
||||
dataIndex: 'time2', |
|
||||
valueType: 'dateRange', |
|
||||
// align: 'right',
|
|
||||
width: 120, |
|
||||
render: (dom, record) => { |
|
||||
return record.address |
|
||||
}, |
|
||||
fieldProps: { |
|
||||
getPopupContainer: (triggerNode) => triggerNode.parentNode, |
|
||||
} |
|
||||
}, |
|
||||
{ |
|
||||
key: "direction", |
|
||||
hideInTable: true, |
|
||||
dataIndex: "direction", |
|
||||
order: 6, |
|
||||
renderFormItem: (item, { type, defaultRender, ...rest }, form) => { |
|
||||
return ( |
|
||||
<div> <Button |
|
||||
type="primary" |
|
||||
style={{ width: "100px" }} |
|
||||
onClick={() => { |
|
||||
dispatch(push(`article/update/post`)); |
|
||||
}} |
|
||||
> |
|
||||
新增 |
|
||||
</Button> |
|
||||
</div> |
|
||||
|
|
||||
|
|
||||
); |
const columns = |
||||
}, |
[{ |
||||
}, |
title: '序号', |
||||
] |
search: false, |
||||
return ( |
dataIndex: 'containers', |
||||
<Spin spinning={false}> |
fixed: 'left', |
||||
<div className='protable-transpor'> |
width: 120, |
||||
<ProTable |
render: (dom, record, key) => { |
||||
scroll={{ x: 800 }} |
return key + 1 |
||||
options={false} |
} |
||||
ref={c => { finishedProductTable = c; }} |
}, |
||||
style={{ width: "100% ", overflow: "auto", height: '760px' }} |
{ |
||||
rowKey='id' |
title: '视频名称', |
||||
onReset={(v) => { |
dataIndex: 'videoName', |
||||
const { id } = depMessage[0] |
fixed: 'left', |
||||
console.log(id) |
search: false, |
||||
setRegionId(id) |
width: 120, |
||||
setPlaceType(-1) |
options: 1, |
||||
setDay([moment('2022-03-01').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]) |
render: (dom, record) => { |
||||
setSitename('') |
return record.name |
||||
}} |
} |
||||
rowSelection={{ |
}, |
||||
selectedRowKeys: rowSelected, |
{ |
||||
onChange: (selectedRowKeys) => { |
title: '是否展示', |
||||
setRowSelected(selectedRowKeys); |
dataIndex: 'shuffling', |
||||
}, |
valueType: 'shufflingRange', |
||||
}} |
search: false, |
||||
columns={columns} |
width: 120, |
||||
|
fixed: 'right', |
||||
|
render: (dom, record) => { |
||||
|
return <div > |
||||
|
|
||||
dataSource={(counts || {}).rows || []} |
<Switch checkedChildren="展示" unCheckedChildren="关闭" onClick={() => onClickEnable(record)} defaultChecked={true ? record.enable == true : false} /></div> |
||||
request={async (params) => { |
} |
||||
|
}, |
||||
|
{ |
||||
|
title: '操作', |
||||
|
dataIndex: 'creatTime', |
||||
|
valueType: 'dateTimeRange', |
||||
|
hideInSearch: true, |
||||
|
width: 120, |
||||
|
fixed: 'right', |
||||
|
render: (dom, record) => { |
||||
|
return <div style={{ position: 'relative', marginTop: '-30px' }}> |
||||
|
<VideoUpload record={record} counts={counts} setCounts={setCounts} /> |
||||
|
<Popconfirm |
||||
|
title="是否确定删除？" |
||||
|
arrowPointAtCenter={true} |
||||
|
showArrow={true} |
||||
|
position="topRight" |
||||
|
onConfirm={ |
||||
|
() => { |
||||
const query = { |
const query = { |
||||
// startDate: day[0],
|
publicityId: record.id |
||||
// endDate: day[1],
|
|
||||
// placeType: placeType,
|
|
||||
// regionId: regionId,
|
|
||||
// placeName: sitename,
|
|
||||
// limit: params.pageSize,
|
|
||||
// offset: ((params.current ? params.current : 1) - 1) * params.pageSize
|
|
||||
} |
|
||||
setRowSelected([]); |
|
||||
const res = await dispatch(getReportStatistic(query)); |
|
||||
setCounts(res.payload.data) |
|
||||
return { |
|
||||
...res, |
|
||||
total: res.payload.data ? res.payload.data.count : 0 |
|
||||
} |
} |
||||
}} |
dispatch(delPropagata(query)).then(() => { |
||||
// search={{
|
dispatch(getPropagata()).then((res) => { |
||||
// defaultCollapsed: false,
|
setCounts(res.payload.data) |
||||
// optionRender: (searchConfig, formProps, dom) => [
|
}) |
||||
// ...dom.reverse(),
|
}) |
||||
// <Popconfirm title="确认导出?" onConfirm={() => { props.exports(rowSelected, counts) }}>
|
} |
||||
// <Button
|
} |
||||
// >
|
|
||||
// 导出
|
> |
||||
// </Button>
|
<Button type="link" float="right" |
||||
// </Popconfirm>
|
>删除</Button> |
||||
// ],
|
</Popconfirm> |
||||
// }}
|
</div> |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
key: "direction", |
||||
|
hideInTable: true, |
||||
|
dataIndex: "direction", |
||||
|
order: 6, |
||||
|
renderFormItem: (item, { type, defaultRender, ...rest }, form, record) => { |
||||
|
return ( |
||||
|
<div> |
||||
|
<VideoUpload type_ys={1} counts={counts} setCounts={setCounts} /> |
||||
|
</div> |
||||
|
); |
||||
|
}, |
||||
|
}, |
||||
|
] |
||||
|
|
||||
> |
//获取数据
|
||||
</ProTable></div> |
useEffect(() => { |
||||
|
const vedio = dispatch(getPropagata()).then((res) => { |
||||
|
setCounts(res.payload.data) |
||||
|
console.log(res.payload.data) |
||||
|
}) |
||||
|
}, []) |
||||
|
|
||||
</Spin > |
|
||||
) |
return ( |
||||
|
|
||||
|
<Spin spinning={false}> |
||||
|
<div className='protable-transpor'> |
||||
|
<ProTable |
||||
|
scroll={{ x: 800 }} |
||||
|
options={false} |
||||
|
style={{ width: "100% ", overflow: "auto", height: '760px' }} |
||||
|
rowKey='id' |
||||
|
rowSelection={{ |
||||
|
selectedRowKeys: rowSelected, |
||||
|
onChange: (selectedRowKeys) => { |
||||
|
setRowSelected(selectedRowKeys); |
||||
|
}, |
||||
|
}} |
||||
|
form={{ |
||||
|
submitter: false, |
||||
|
}} |
||||
|
columns={columns} |
||||
|
dataSource={counts || []} |
||||
|
request={async (params) => { |
||||
|
const query = { |
||||
|
limit: params.pageSize, |
||||
|
offset: ((params.current ? params.current : 1) - 1) * params.pageSize |
||||
|
} |
||||
|
setRowSelected([]); |
||||
|
}} |
||||
|
> |
||||
|
</ProTable></div> |
||||
|
</Spin > |
||||
|
) |
||||
} |
} |
||||
function mapStateToProps(state) { |
|
||||
const { auth, depMessage } = state; |
function mapStateToProps (state) { |
||||
const pakData = (dep) => { |
|
||||
return dep.map((d) => { |
const { auth, depMessage } = state; |
||||
return { |
const pakData = (dep) => { |
||||
title: d.name, |
return dep.map((d) => { |
||||
value: d.id, |
return { |
||||
// children: d.type >= 2 ? [] : pakData(d.subordinate)
|
title: d.name, |
||||
children: pakData(d.subordinate) |
value: d.id, |
||||
} |
// children: d.type >= 2 ? [] : pakData(d.subordinate)
|
||||
}) |
children: pakData(d.subordinate) |
||||
} |
} |
||||
let depData = pakData(depMessage.data || []) |
}) |
||||
return { |
} |
||||
user: auth.user, |
let depData = pakData(depMessage.data || []) |
||||
depMessage: depMessage.data || [], |
return { |
||||
depLoading: depMessage.isRequesting, |
user: auth.user, |
||||
depData, |
depMessage: depMessage.data || [], |
||||
}; |
depLoading: depMessage.isRequesting, |
||||
|
depData, |
||||
|
}; |
||||
} |
} |
||||
export default connect(mapStateToProps)(promotionalTable); |
export default connect(mapStateToProps)(promotionalTable); |
||||
Loading…
Reference in new issue