需求

config/config.js

 
   proxy: {
     '/api': {
-      target: 'https://dev.pawoma.cn',
+      target: 'http://localhost:8080',
       changeOrigin: true,
       // pathRewrite: { '^/server': '' },
     },

config/routes.js

         routes: [
           {
             path: '/',
-            redirect: '/welcome',
-          },
-          {
-            path: '/welcome',
-            name: '首页',
-            component: './Welcome',
+            redirect: '/channel',
           },
+          // {
+          //   path: '/welcome',
+          //   name: '首页',
+          //   component: './Welcome',
+          // },
           {
             path: '/channel',
             name: '渠道列表',
           {
             path: '/channel/edit',
             name: '渠道列表',
+            hideInMenu: true,
             component: './channel/edit',
           },
+          {
+            path: '/sample',
+            name: 'H5样例管理',
+            component: '../layouts/BlankLayout',
+            routes: [
+              {
+                path: '/sample/h5/list',
+                name: 'H5样例',
+                component: './sample/h5/index',
+              },
+              {
+                path: '/sample/demand/list',
+                name: 'H5需求单',
+                component: './sample/demand/index',
+              },
+            ],
+          },
           {
             path: '/resource',
             name: '资源管理',
             component: './resource',
           },
-          // {
-          //   path: '/channel/edit',
-          //   name: '渠道列表',
-          //   component: './channel/edit',
-          // },
           {
             component: './404',
           },

src/pages/sample/demand/index.jsx

+import React, { useState, useEffect } from 'react';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { Form, Pagination, Card, Button, Icon, Tooltip, message,   notification, Modal, Table } from 'antd';
+import router from 'umi/router';
+import moment from 'moment';
+import className from 'classnames';
+import Cell from '../../../components/Cell';
+import styles from './style.less';
+import { fetch, apis } from '../../../utils/request';
+import request from '../../../utils/request';
+import AuthButton from '@/components/AuthButton';
+
+
+
+function header(props) {
+  // 获取初始化数据
+  const [ data, setData ] = useState({})
+
+  useEffect(() => {
+    getList({ pageNum: 1, pageSize: 10 });
+  },[])
+
+  // 查询列表
+  const getList = (params) => {
+    request({ ...apis.channel.list, params: { ...params } }).then((data) => {
+        console.log(data)
+        setData(data)
+    })
+  }
+
+  
+  // 提交事件
+  const handleSubmit = (e, props) => {
+    e.preventDefault();
+    props.form.validateFields((err, values) => {
+      if (!err) {
+        getList({ pageNum: 1, pageSize: 10, ...values })
+      }
+    });
+  }
+
+  const changePageNum = (pageNumber) => {
+    getList({ pageNum: pageNumber, pageSize: 10 })
+  }
+
+
+  // 跳转到编辑资讯
+  const toEditNews = (id) => () => {
+    router.push({
+      pathname: '/channel/edit',
+      query: {
+        id
+      },
+    });
+  }
+
+  
+  const changeNewsStatus = (row, newsId) => () => {
+    const title = row.status === 0 ? '确定启用吗': '停用后，此账号将无法登录渠道代理商后台'
+    Modal.confirm({
+      title: title,
+      okText: '确认',
+      cancelText: '取消',
+      onOk() {
+        if(row.status === 0){
+          request({ ...apis.channel.put, urlData: { id: newsId }, data: { ...row, status: 1 } }).then((data) => {
+            message.info('操作成功！')
+            getList({ pageNum: 1, pageSize: 10 });
+          }).catch((err) => {
+            console.log(err)
+            message.info(err.msg || err.message)
+          })
+        }else{
+          request({ ...apis.channel.put, urlData: { id: newsId }, data: { ...row, status: 0 } }).then((data) => {
+            message.info('操作成功！')
+            getList({ pageNum: 1, pageSize: 10 });
+          }).catch((err) => {
+            console.log(err)
+            message.info(err.msg || err.message)
+          })
+        }
+        
+      }
+    });
+  }
+  /**
+   *
+   *
+   * @param {*} props
+   * @returns
+   */
+  const columns = [
+    {
+      title: '渠道代理',
+      dataIndex: 'channelProxyName',
+      key: 'channelProxyName',
+      align: 'center',
+    },
+    {
+      title: '账号名',
+      dataIndex: 'userName',
+      key: 'userName',
+      align: 'center',
+      render: (x, row) => <span>{row.userName === null || row.userName === '' ? row.channelTel : row.userName}</span>,
+    },
+    {
+      title: '小程序总数',
+      dataIndex: 'appMaxNum',
+      key: 'appMaxNum',
+      align: 'center',
+
+    },
+    {
+      title: '现有小程序',
+      dataIndex: 'appCurrentNum',
+      key: 'appCurrentNum',
+      align: 'center',
+      render: (appCurrentNum) => <span>{appCurrentNum === 0 || appCurrentNum == null ? 0 : appCurrentNum}</span>,
+    },
+    {
+      title: '服务到期时间',
+      dataIndex: 'expireDate',
+      key: 'expireDate',
+      align: 'center',
+      render: (x, row) => <><span>{`${moment(row.expireDate).format('YYYY-MM-DD')}`}</span></>,
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      align: 'center',
+      render: (status) => <span>{status === 1 ? '启动' : '停用'}</span>,
+    },
+    {
+      title: '操作',
+      dataIndex: 'handle',
+      key: 'handle',
+      align: 'center',
+      render: (x, row) => (
+        <>
+          <AuthButton name="admin.taNewsType.id.delete" noRight={null}>
+            <span style={{ color: '#EF273A', marginRight: '20px', cursor: 'pointer' }} onClick={changeNewsStatus(row, row.channelId)}>
+              {row.status == 1 ? '停用' : '启用'}<Icon type="shopping-cart" className={styles.shoppingCart} />
+            </span>
+          </AuthButton>
+          <AuthButton name="admin.taNewsType.id.put" noRight={null}>
+            <span style={{ color: '#FF925C', cursor: 'pointer' }} onClick={toEditNews(row.channelId)}>
+              编辑<Icon type="form" className={styles.edit} />
+            </span>
+          </AuthButton>
+        </>
+      ),
+    },
+  ];
+  function handleReset() {
+    props.form.resetFields();
+    getList({ pageNum: 1, pageSize: 10 })
+  }
+
+  const { getFieldDecorator } = props.form
+  return (
+
+    <>
+      <AuthButton name="admin.taNewsType.post" noRight={null}>
+        <Button type="danger" className={styles.addBtn} onClick={toEditNews()}>新增</Button>
+      </AuthButton>
+      <Table rowKey="newsType" dataSource={data.records} columns={columns} pagination={false} />
+      <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
+        <Pagination showQuickJumper defaultCurrent={1} total={data.total} onChange={changePageNum} current={data.current}/>
+      </div>
+    </>
+  )
+}
+const WrappedHeader = Form.create({ name: 'header' })(header);
+
+export default WrappedHeader

src/pages/sample/demand/style.less

+.flex-box {
+  display: flex;
+  flex-wrap: wrap;
+
+  .flex-item {
+    flex: none;
+  }
+
+  .flex-auto {
+    flex: auto;
+  }
+}
+
+.member {
+  margin-bottom: 36px;
+  margin-right: 24px;
+}
+
+.square {
+  height: 0;
+  padding-bottom : 80%;
+}

src/pages/sample/h5/index.jsx

+import React, { useState, useEffect } from 'react';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { Form, Pagination, Card, Button, Icon, Tooltip, message,   notification, Modal, Table } from 'antd';
+import router from 'umi/router';
+import moment from 'moment';
+import className from 'classnames';
+import Cell from '../../../components/Cell';
+import styles from './style.less';
+import { fetch, apis } from '../../../utils/request';
+import request from '../../../utils/request';
+import AuthButton from '@/components/AuthButton';
+
+
+
+function header(props) {
+  // 获取初始化数据
+  const [ data, setData ] = useState({})
+
+  useEffect(() => {
+    getList({ pageNum: 1, pageSize: 10 });
+  },[])
+
+  // 查询列表
+  const getList = (params) => {
+    request({ ...apis.channel.list, params: { ...params } }).then((data) => {
+        console.log(data)
+        setData(data)
+    })
+  }
+
+  
+  // 提交事件
+  const handleSubmit = (e, props) => {
+    e.preventDefault();
+    props.form.validateFields((err, values) => {
+      if (!err) {
+        getList({ pageNum: 1, pageSize: 10, ...values })
+      }
+    });
+  }
+
+  const changePageNum = (pageNumber) => {
+    getList({ pageNum: pageNumber, pageSize: 10 })
+  }
+
+
+  // 跳转到编辑资讯
+  const toEditNews = (id) => () => {
+    router.push({
+      pathname: '/channel/edit',
+      query: {
+        id
+      },
+    });
+  }
+
+  
+  const changeNewsStatus = (row, newsId) => () => {
+    const title = row.status === 0 ? '确定启用吗': '停用后，此账号将无法登录渠道代理商后台'
+    Modal.confirm({
+      title: title,
+      okText: '确认',
+      cancelText: '取消',
+      onOk() {
+        if(row.status === 0){
+          request({ ...apis.channel.put, urlData: { id: newsId }, data: { ...row, status: 1 } }).then((data) => {
+            message.info('操作成功！')
+            getList({ pageNum: 1, pageSize: 10 });
+          }).catch((err) => {
+            console.log(err)
+            message.info(err.msg || err.message)
+          })
+        }else{
+          request({ ...apis.channel.put, urlData: { id: newsId }, data: { ...row, status: 0 } }).then((data) => {
+            message.info('操作成功！')
+            getList({ pageNum: 1, pageSize: 10 });
+          }).catch((err) => {
+            console.log(err)
+            message.info(err.msg || err.message)
+          })
+        }
+        
+      }
+    });
+  }
+  /**
+   *
+   *
+   * @param {*} props
+   * @returns
+   */
+  const columns = [
+    {
+      title: '渠道代理',
+      dataIndex: 'channelProxyName',
+      key: 'channelProxyName',
+      align: 'center',
+    },
+    {
+      title: '账号名',
+      dataIndex: 'userName',
+      key: 'userName',
+      align: 'center',
+      render: (x, row) => <span>{row.userName === null || row.userName === '' ? row.channelTel : row.userName}</span>,
+    },
+    {
+      title: '小程序总数',
+      dataIndex: 'appMaxNum',
+      key: 'appMaxNum',
+      align: 'center',
+
+    },
+    {
+      title: '现有小程序',
+      dataIndex: 'appCurrentNum',
+      key: 'appCurrentNum',
+      align: 'center',
+      render: (appCurrentNum) => <span>{appCurrentNum === 0 || appCurrentNum == null ? 0 : appCurrentNum}</span>,
+    },
+    {
+      title: '服务到期时间',
+      dataIndex: 'expireDate',
+      key: 'expireDate',
+      align: 'center',
+      render: (x, row) => <><span>{`${moment(row.expireDate).format('YYYY-MM-DD')}`}</span></>,
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      align: 'center',
+      render: (status) => <span>{status === 1 ? '启动' : '停用'}</span>,
+    },
+    {
+      title: '操作',
+      dataIndex: 'handle',
+      key: 'handle',
+      align: 'center',
+      render: (x, row) => (
+        <>
+          <AuthButton name="admin.taNewsType.id.delete" noRight={null}>
+            <span style={{ color: '#EF273A', marginRight: '20px', cursor: 'pointer' }} onClick={changeNewsStatus(row, row.channelId)}>
+              {row.status == 1 ? '停用' : '启用'}<Icon type="shopping-cart" className={styles.shoppingCart} />
+            </span>
+          </AuthButton>
+          <AuthButton name="admin.taNewsType.id.put" noRight={null}>
+            <span style={{ color: '#FF925C', cursor: 'pointer' }} onClick={toEditNews(row.channelId)}>
+              编辑<Icon type="form" className={styles.edit} />
+            </span>
+          </AuthButton>
+        </>
+      ),
+    },
+  ];
+  function handleReset() {
+    props.form.resetFields();
+    getList({ pageNum: 1, pageSize: 10 })
+  }
+
+  const { getFieldDecorator } = props.form
+  return (
+
+    <>
+      <AuthButton name="admin.taNewsType.post" noRight={null}>
+        <Button type="danger" className={styles.addBtn} onClick={toEditNews()}>新增</Button>
+      </AuthButton>
+      <Table rowKey="newsType" dataSource={data.records} columns={columns} pagination={false} />
+      <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
+        <Pagination showQuickJumper defaultCurrent={1} total={data.total} onChange={changePageNum} current={data.current}/>
+      </div>
+    </>
+  )
+}
+const WrappedHeader = Form.create({ name: 'header' })(header);
+
+export default WrappedHeader

src/pages/sample/h5/style.less

+.flex-box {
+  display: flex;
+  flex-wrap: wrap;
+
+  .flex-item {
+    flex: none;
+  }
+
+  .flex-auto {
+    flex: auto;
+  }
+}
+
+.member {
+  margin-bottom: 36px;
+  margin-right: 24px;
+}
+
+.square {
+  height: 0;
+  padding-bottom : 80%;
+}