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

import React, { useEffect, useState} from 'react';
import { connect } from 'react-redux';
import { Spin, Button, Popconfirm, Switch } from 'antd';
import ProTable from '@ant-design/pro-table';
import './protable.less'
import VideoUpload from './infor/videoUpload';
import { getPropagata } from '../actions/infor';
import { putEditPropagata } from '../actions/infor';
import { delPropagata } from '../actions/infor';

const promotionalTable = (props) => {
   const { dispatch, } = props
   const [rowSelected, setRowSelected] = useState([])
   const [counts, setCounts] = useState()//shuju

   const onClickEnable = (record) => {
      const id = record.id
      const name = record.name
      const video = record.video

      const enable = true ? record.enable == false : true
      const data = ({ publicityId: id, name: name, video: video, enable: enable })
      dispatch(putEditPropagata(data)).then((res) => {
         dispatch(getPropagata()).then((res) => {
            setCounts(res.payload.data)
         })
      })
   }



   const columns =
      [{
         title: '序号',
         search: false,
         dataIndex: 'containers',
         fixed: 'left',
         width: 120,
         render: (dom, record, key) => {
            return key + 1
         }
      },
      {
         title: '视频名称',
         dataIndex: 'videoName',
         fixed: 'left',
         search: false,
         width: 120,
         options: 1,
         render: (dom, record) => {
            return record.name
         }
      },
      {
         title: '是否展示',
         dataIndex: 'shuffling',
         valueType: 'shufflingRange',
         search: false,
         width: 120,
         fixed: 'right',
         render: (dom, record) => {
            return <div >

               <Switch checkedChildren="展示" unCheckedChildren="关闭" onClick={() => onClickEnable(record)} defaultChecked={true ? record.enable == true : false} /></div>
         }
      },
      {
         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 = {
                           publicityId: record.id
                        }
                        dispatch(delPropagata(query)).then(() => {
                           dispatch(getPropagata()).then((res) => {
                              setCounts(res.payload.data)
                           })
                        })
                     }
                  }

               >
                  <Button type="link" float="right"
                  >删除</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>
            );
         },
      },
      ]

   //获取数据
   useEffect(() => {
      const vedio = dispatch(getPropagata()).then((res) => {
         setCounts(res.payload.data)
         console.log(res.payload.data)
      })
   }, [])


   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;
   const pakData = (dep) => {
      return dep.map((d) => {
         return {
            title: d.name,
            value: d.id,
            // children: d.type >= 2 ? [] : pakData(d.subordinate)
            children: pakData(d.subordinate)
         }
      })
   }
   let depData = pakData(depMessage.data || [])
   return {
      user: auth.user,
      depMessage: depMessage.data || [],
      depLoading: depMessage.isRequesting,
      depData,
   };
}
export default connect(mapStateToProps)(promotionalTable);