导出引流

src/pages/activity/drainage/Detail.jsx

@@ -4,65 +4,136 @@ import router from 'umi/router';
 import { FormattedMessage } from 'umi-plugin-react/locale';
 import styles from '../../style/GoodsList.less';
 import moment from 'moment';
+import apis from '../../../services/apis';
+import request from '../../../utils/request';
+import { SSL_OP_SSLEAY_080_CLIENT_DH_BUG } from 'constants';
 
 
-const columns = [
-  {
-    title: '提交时间',
-    dataIndex: 'time',
-    key: 'time',
-    
-  },
-]
 
 const data = []
 
 const header = (props) => {
+  const drainageId = props.location.query.drainageId
+
+
+  const [datas, setDatas] = useState([])
+  const [content, setContent] = useState([{}, {}])
+  const [columns, setColumns] = useState([])
+  const [startDate, setStartDate] = useState('')
+  const [endDate, setEndDate] = useState('')
   let daterange = []
-  function onChangetime(_dates, dateStrings) {
-    daterange[1] = dateStrings[1]
-    daterange[0] = dateStrings[0]
+  // let content = {}
+  useEffect(() => {
+
+    gettaDrainageRecord({ pageNum: 1, pageSize: 10, drainageId: drainageId })
+
+  }, [])
+
+  function gettaDrainageRecord (params) {
+    request({ ...apis.activity.taDrainageRecord, params: { ...params } }).then((data) => {
+      // setDatas(data)
+      console.log(data, '3333333333333')
+      setDatas(tableData(data.records))
+      // content = data.records[0]
+      console.log('json: ', eval('(' + data.records[0].content + ')'))
+      setContent(eval('(' + data.records[0].content + ')'))
+      setColumns(tableTitle(eval('(' + data.records[0].content + ')')))
+    }).catch((err) => {
+      console.log(err)
+      message.info(err.msg || err.message)
+    })
+  }
+  function tableData (data) {
+    console.log('data', data)
+    return data.map((row, inx) => {
+      return eval('(' + row.content + ')').reduce((acc, col) => {
+        const r = {
+          key: inx + 1,
+          [`${col.key}`]: col.value,
+          ...acc,
+        }
+        console.log('r', r)
+        return r
+      }, {})
+    })
   }
 
-  const changeNewsListStatus = (newsId) => () => {
-    Modal.confirm({
-      title: '确认删除该资讯？',
-      okText: '确认',
-      cancelText: '取消',
-      onOk() {
-        request({ ...apis.news.delete, urlData: { id: newsId }, }).then((data) => {
-          message.info('操作成功！')
-          getList({ pageNum: 1, pageSize: 10 });
-        }).catch((err) => {
-          console.log(err)
-          message.info(err.msg || err.message)
-        })
+  function tableTitle (data) {
+    return data.map((item) => {
+      const col = {
+        title: item.label,
+        dataIndex: item.key,
+        key: item.key
       }
-    });
+      return col
+    })
+  }
+
+
+  function datalist() {
+
+    gettaDrainageRecord({ pageNum: 1, pageSize: 10, drainageId: drainageId ,startTime: fromTime(startDate) ,endTime: fromTime(endDate)  })
+  }
+
+  function fromTime(str) {
+    return str === '' ? null : `${moment(str).format('YYYY-MM-DDT00:00:00.000')}Z`
   }
+
+  function onChangetime(dates, dateStrings) {
  
+    setEndDate(dateStrings[1])
+    setStartDate(dateStrings[0])
+    
+  }
+
+  function excelPort(){
+    // const fieldsValue = getFieldsValue()
+    request({ ...apis.activity.exporttaDrainageRecord, params: { drainageId: drainageId ,startTime: fromTime(startDate) ,endTime: fromTime(endDate) }  })
+      .then(response => {
+        download(response)
+      }).catch(error => {
+
+      })
+  }
+
+  function download (data) {
+    if (!data) {
+      return
+    }
+    const url = window.URL.createObjectURL(new Blob([data]))
+    const link = document.createElement('a')
+    link.style.display = 'none'
+    link.href = url
+    link.setAttribute('download', '引流.xlsx')
+    document.body.append(link)
+    link.click()
+  }
+
   const { RangePicker } = DatePicker;
   return (
     <>
-      <RangePicker
-        style={{ paddingLeft: '30px' }}
-        ranges={{
-          Today: [moment(), moment()],
-          'This Month': [moment().startOf('month'), moment().endOf('month')],
-        }}
-        showTime
-        // format="YYYY/MM/DD HH:mm:ss"
-        onChange={(_dates, dateStrings) => onChangetime(_dates, dateStrings)}
-      />
-      {/* <Button type="primary" htmlType="submit" style={{ marginLeft: '30px' }} onClick={() => this.datalist()}>
-        查询
-        </Button> */}
-        <div>
-           H5项目名称{}  <Button type="primary">导出数据</Button>
-           <Table columns={columns} dataSource={data} pagination={false} />
-        </div>
+
+<RangePicker
+          style={{ width: '400px' }}
+          // ranges={{
+          //   Today: [moment(), moment()],
+          //   'This Month': [moment().startOf('month'), moment().endOf('month')],
+          // }}
+          // defaultValue={[moment(new Date(new Date().setDate((new Date().getDate() - 6))), 'YYYY-MM-DD HH:MM:SS'), moment(new Date(), 'YYYY-MM-DD HH:MM:SS')]}
+          showTime
+          onChange={onChangetime}
+        />
+        <Button type="primary" htmlType="submit" style={{ marginLeft: '30px', float: 'right' }} onClick={datalist}>
+          搜索
+      </Button>
+    
+      <div>
         
-       
+        H5项目名称{}  <Button type="primary" onClick={excelPort}>导出数据</Button>
+        <Table columns={columns} dataSource={datas} pagination={false} />
+      </div>
+
+
 
 
     </>

src/pages/activity/drainage/DrainageList.jsx

@@ -3,231 +3,325 @@ import { Form, Input, Button, Icon, Select, message, Table, Divider, Tag, Pagina
 import router from 'umi/router';
 import { FormattedMessage } from 'umi-plugin-react/locale';
 import styles from '../../style/GoodsList.less';
+import apis from '../../../services/apis';
+import request from '../../../utils/request';
+import XForm, { FieldTypes } from '../../../components/XForm';
+import moment from 'moment';
 
-const changeNewsListStatus = (newsId) => () => {
-  Modal.confirm({
-    title: '确认删除该引流？',
-    okText: '确认',
-    cancelText: '取消',
-    onOk() {
-     
-      
-    }
-  });
-}
-
-const toEditList = (newsId) => () => {
+const toEditList = (drainageId) => () => {
+  console.log(drainageId,'12344567')
   router.push({
     pathname: '/activity/drainage/Detail',
-    // query: {
-    //   newsId
-    // },
+    query: {
+      drainageId
+    },
   });
 }
 
-const columns = [
-  {
-    title: 'H5项目编号',
-    dataIndex: 'Id',
-    key: 'Id',
-    
-  },
-  {
-    title: 'H5项目名称',
-    dataIndex: 'name',
-    key: 'name',
-  },
-  {
-    title: '字段1',
-    dataIndex: 'field1',
-    key: 'field1',
-  },
-  {
-    title: '字段2',
-    dataIndex: 'field2',
-    key: 'field2',
-  },
-  {
-    title: '新建时间',
-    dataIndex: 'StartTime',
-    key: 'StartTime',
-    // render:
-  },
-  {
-    title: '截止时间',
-    dataIndex: 'EndTime',
-    key: 'EndTime',
-    // render:
-  },
-  {
-    title: '参与数',
-    dataIndex: 'number',
-    key: 'number',
-    // render:
-  },
-  {
-    title: '操作',
-    key: 'action',
-    render: (text, record) => (
-        <>
-        <span style={{  right: '20px', top: '20px', fontSize: ' 0.106rem',zIndex:1, color: '#FF7E48', cursor: 'pointer' }} onClick={toEditList()}>
-            查看详情
-          </span>
-      
-        <span style={{  right: '20px', bottom: ' 10px', fontSize: ' 0.106rem', color: '#FF7E48', cursor: 'pointer', marginLeft:20}} onClick={changeNewsListStatus()}>
-            删除
-          </span>
-      </>
-    ),
-  },
-];
+
 
 const data = [
 
   {
-    Id:'1',
-    name:'zls',
+    Id: '1',
+    name: 'zls',
     // StartTime:'',
     // EndTime:'',
     number: 33,
   }
-  
+
 
 ];
 
 const header = (props) => {
   // const [data, setData] = useState({ data: [] })
-  const [ date, setDate ] = useState({})
+  const [datas, setDatas] = useState([])//表格数据
+  const [date, setDate] = useState({})
+  const [formsdate, setFormsDate] = useState({})
   //   const [page, changePage] = useState({})
-    useEffect(() => {
-      setDate({
-        ModalText: 'Content of the modal',
-    visible: false,
-    confirmLoading: false,
-      })
-    },[])
+  useEffect(() => {
 
-  const handleSubmit = (e, props) => {
-    e.preventDefault();
-    props.form.validateFields((err, values) => {
-      // if (!err) {
-      //   console.log('提交数据: ', values)
-      //   getList({ pageNum: 1, pageSize: 10, ...values })
-      // }
+
+    gettaDrainage({ pageNum: 1, pageSize: 10 })
+    setDate({
+      ModalText: 'Content of the modal',
+      visible: false,
+      confirmLoading: false,
+    })
+    
+  }, [])
+
+  function gettaDrainage (params) {
+    request({ ...apis.activity.taDrainage, params: params  }).then((data) => {
+      setDatas(data)
+      console.log(data.records, '_213_')
+    }).catch((err) => {
+      console.log(err)
+      message.info(err.msg || err.message)
+    })
+  }
+
+  const deleteDrainage = (drainageIid) => () => {
+    Modal.confirm({
+      title: '确认删除该引流？',
+      okText: '确认',
+      cancelText: '取消',
+      onOk() {
+
+    
+        request({ ...apis.activity.deletetaDrainage,urlData: { id: drainageIid }, }).then((data) => {
+          message.info('操作成功！')
+          gettaDrainage({ pageNum: 1, pageSize: 10 })
+        }).catch((err) => {
+          console.log('111111',err)
+          message.info(err.msg || err.message)
+        })
+      }
     });
   }
+  
+
+  const columns = [
+    // title: '活动标题',
+    // dataIndex: 'title',
+    // key: 'title',
+    // align: 'center',
+    {
+      title: 'H5项目编号',
+      dataIndex: 'drainageId',
+      key: 'drainageId',
+      align: 'center',
+    },
+    {
+      title: 'H5项目名称',
+      dataIndex: 'name',
+      key: 'name',
+      align: 'center',
+      render: (text, datas) => <div style={ { color: '#66B3FF' } } onClick= {() => addshowModal(datas)} >{ datas.name }</div>,
+    },
+    {
+      title: '新建时间',
+      dataIndex: 'createDate',
+      key: 'createDate',
+      align: 'center',
+      render: (x, row) => (
+        <>
+          <span>{ row.createDate && moment(row.createDate).format('YYYY-MM-DD hh:mm:ss') }</span>
+        </>
+      ),
+    },
+    {
+      title: '截止时间',
+      dataIndex: 'endDate',
+      key: 'endDate',
+      align: 'center',
+      render: (x, row) => (
+        <>
+          <span>{ row.endDate && moment(row.endDate).format('YYYY-MM-DD hh:mm:ss') }</span>
+        </>
+      ),
+    },
+    {
+      title: '参与数',
+      dataIndex: 'enlistNum',
+      key: 'enlistNum',
+      align: 'center',
+      // render:
+    },
+    {
+      title: '操作',
+      key: 'action',
+      align: 'center',
+      render: (text, datas) => (
+        <>
+          <span style={{ right: '20px', top: '20px', fontSize: ' 0.106rem', zIndex: 1, color: '#FF7E48', cursor: 'pointer' }} onClick={toEditList(datas.drainageId)}>
+            查看详情
+            </span>
+  
+          <span style={{ right: '20px', bottom: ' 10px', fontSize: ' 0.106rem', color: '#FF7E48', cursor: 'pointer', marginLeft: 20 }} onClick={deleteDrainage(datas.drainageId)}>
+            删除
+            </span>
+        </>
+      ),
+    },
+  ];
+  const Forms = props => {
+    //  const drainageId=props.props.location.query.drainageId
+    console.log(date,'---------------')
+    console.log(formsdate,'---------------')
+    console.log(formsdate,'22222222')
+    const fields = [
+      {
+        label: 'H5项目名称',
+        name: 'name',
+        type: FieldTypes.Text,
+        // placeholder:"H5项目名称",
+        value: formsdate.name,
+
+      },
+      {
+        label: '截止时间',
+        name: 'endDate',
+        type: FieldTypes.DatePicker,
+        value: moment(formsdate.endDate, 'YYYY-MM-DD HH:mm')
+        // render: <DatePicker placeholder="截止时间" value= {formsdate.endDate} />,
+      },
+
+
+    ]
+
+    const handleSubmit = val => {
+      console.log(date,'111---------------')
+    console.log(formsdate,'111---------------')
+    console.log(formsdate,'11122222222')
+      // data: { ...submitValue }
+      alert(val)
+      console.log(formsdate.drainageId,'9999999999999')
+      if (formsdate.drainageId) {
+        // { ...apis.activity.deletetaDrainage,urlData: { id: drainageIid }, }
+        request({ ...apis.activity.updatetaDrainage, urlData: { id: formsdate.drainageId }, data: val}).then((data) => {
+          message.info('操作成功！')
+          // gettaDrainage({ pageNum: 1, pageSize: 10 })
+        }).catch((err) => {
+          console.log('111111',err)
+          message.info(err.msg || err.message)
+        })
+       
+      } else {
+
+     
+
+        request({ ...apis.activity.addtaDrainage, data: val }).then((data) => {
+          message.info("保存成功")
+          console.log(data, '22222')
+          
+        }).catch((err) => {
+          message.error(err.msg || err.message)
+        })
+      }
+    }
+
+    return <XForm onSubmit={handleSubmit} fields={fields}></XForm>
+    
+  }
+
+
+
 
   //重置搜索
-  function handleReset() {
+  function handleReset () {
     props.form.resetFields();
   }
 
-const toEditGoods = (dynamicId) => () => {
-  // router.push({
-  //   pathname: '/activity/editActivity',
-  //   query: {
-  //     dynamicId
-  //   },
-  // });
-}
+  
 
+  function addshowModal (datas) {
+
+    // alert(datas.drainageId)
+console.log(datas,'22222222')
+    setFormsDate({
+      drainageId:datas.drainageId,
+      name:datas.name,
+      endDate:datas.endDate,
+    })
+    console.log(formsdate,'22222222')
+    setDate({
+      visible: true,
+    });
+  };
+  function showModal () {
+    setFormsDate({
+      drainageId:'',
+      name:'',
+      endDate:'',
+    })
+    setDate({
+      visible: true,
+    });
+  };
+
+
+  function handleOk () {
 
-function showModal ()  {
-  setDate({
-    visible: true,
-  });
-};
 
-function handleOk  () {
-  setDate({
-    ModalText: 'The modal will be closed after two seconds',
-    confirmLoading: true,
-  });
-  function  setTimeout()  {
+    setDate({
+      ModalText: 'The modal will be closed after two seconds',
+      confirmLoading: true,
+    });
+    function setTimeout () {
+      setDate({
+        visible: false,
+        confirmLoading: false,
+      });
+    };
+  };
+
+  function handleCancel () {
+    console.log('Clicked cancel button');
     setDate({
       visible: false,
-      confirmLoading: false,
     });
   };
-};
+  function handleSubmit(e) {
+    e.preventDefault();
+    props.form.validateFields((err, values) => {
+      console.log('values', values)
+      if (!err) {
+        console.log('values', values)
+        gettaDrainage({ pageNum: 1, pageSize: 10, ...values })
+      }
+    });
+  }
 
-function handleCancel (){
-  console.log('Clicked cancel button');
-  setDate({
-    visible: false,
-  });
-};
- 
-  const { getFieldDecorator } = props.form
+  const { getFieldDecorator } = props.form;
   const { visible, confirmLoading, ModalText } = date;
   return (
     <>
       <div>
-      <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
-      <Form.Item>
-          {getFieldDecorator('Id')(
-            <Input
-              // prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
-              placeholder="H5项目编号"
-            />,
-          )}
-        </Form.Item>
-        <Form.Item>
-          {getFieldDecorator('name')(
-            <Input
-              // prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
-              placeholder="H5项目名称"
-            />,
-          )}
-        </Form.Item>
-        <Form.Item>
-          <Button type="primary" htmlType="submit" className={styles.searchBtn}>
-            搜索
+        <Form layout="inline" onSubmit={handleSubmit}>
+          <Form.Item>
+            {getFieldDecorator('drainageId')(
+              <Input
+                // prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+                placeholder="H5项目编号"
+              />,
+
+              // {getFieldDecorator('name', {
+              // })(<Input/>)}
+            )}
+          </Form.Item>
+          <Form.Item>
+            {getFieldDecorator('name')(
+              <Input
+                // prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+                placeholder="H5项目名称"
+              />,
+            )}
+          </Form.Item>
+          <Form.Item>
+            <Button type="primary" htmlType="submit" className={styles.searchBtn} onClick>
+              搜索
           </Button>
-          <Button style={{ marginLeft: 8 }} onClick={handleReset}>
+            <Button style={{ marginLeft: 8 }} onClick={handleReset}>
               重置
             </Button>
-        </Form.Item>
-      </Form>
-      {/* <AuthButton name="admin.buildingDynamic.add.post" noRight={null}> */}
+          </Form.Item>
+        </Form>
+        {/* <AuthButton name="admin.buildingDynamic.add.post" noRight={null}> */}
         <Button type="danger" className={styles.addBtn} onClick={showModal}>新增</Button>
 
         <Modal
-         title="新建H5项目"
-         visible={visible}
-         onOk={handleOk}
-         confirmLoading={confirmLoading}
-         onCancel={handleCancel}
+          title="新建H5项目"
+          visible={visible}
+          //  onOk={handleOk}
+          confirmLoading={confirmLoading}
+          onCancel={handleCancel}
+          footer={null}
         >
-          <Form>
-          <Form.Item>
-          {getFieldDecorator('name')(
-            <Input
-              // prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
-              placeholder="H5项目名称"
-            />,
-          )}
-        </Form.Item>
-        <Form.Item>
-          {getFieldDecorator('endtime')(
-            <Input
-              // prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
-              placeholder="截止时间"
-            />,
-          )}
-        </Form.Item>
-        </Form>
+          <Forms />
         </Modal>
-
-
-
-      {/* </AuthButton> */}
-        {/* <Table dataSource={data.list} columns={columns} pagination={false} rowKey="activityList"/> */}
-        <Table columns={columns} dataSource={data} pagination={false} />
-      {/* <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
-        <Pagination showQuickJumper defaultCurrent={1} total={data.total} onChange={changePageNum} />
-      </div> */}
-      
+        <Table columns={columns} dataSource={datas.records} pagination={false} rowKey="drainageList"/>
+     
       </div>
     </>
   )

src/services/apis.js

@@ -357,6 +357,7 @@ export default {
       url: `${prefix}/selectCityUser`,
       action: 'admin.selectCityUser.get',
     },
+    
 
   },
   activity: {
@@ -434,6 +435,36 @@ export default {
         url: `${prefix}/SignList`,
         method: 'GET',
         action: 'admin.SignList.get',
+      },
+      taDrainage: {
+        url: `${prefix}/taDrainage`,
+        method: 'GET',
+        action: 'admin.taDrainage.get',
+      },
+      addtaDrainage: {
+        url: `${prefix}/taDrainage/add`,
+        method: 'POST',
+        action: 'admin.taDrainage.add.post',
+      },
+      deletetaDrainage: {
+        url: `${prefix}/taDrainage/:id`,
+        method: 'DELETE',
+        action: 'admin.taDrainage.id.delete',
+      },
+      updatetaDrainage: {
+        url: `${prefix}/taDrainage/:id`,
+        method: 'PUT',
+        action: 'admin.taDrainage.id.put',
+      },
+      taDrainageRecord:{
+        url: `${prefix}/taDrainageRecord`,
+        method: 'GET',
+        action: 'admin.taDrainageRecord.get',
+      },
+      exporttaDrainageRecord:{
+        url: `${prefix}/taDrainageRecord/export`,
+        method: 'GET',
+        action: 'admin.taDrainageRecord/export.get',
       }
   },
   integralMall: {