新需求

config/routes.js

@@ -49,6 +49,12 @@ export default [
                 name: 'H5样例',
                 component: './sample/h5/index',
               },
+              {
+                path: '/sample/h5/edit',
+                name: 'H5样例编辑',
+                hideInMenu: true,
+                component: './sample/h5/edit',
+              },
               {
                 path: '/sample/demand/list',
                 name: 'H5需求单',

src/pages/sample/h5/components/H5Card.jsx

@@ -0,0 +1,24 @@
+import React, { useState, useEffect } from 'react';
+import { Input, Menu, Dropdown, Button, Icon, message, Table, Divider, Tag, Select, Form, Alert, Card } from 'antd';
+import { FormattedMessage } from 'umi-plugin-react/locale';
+import router from 'umi/router';
+import apis from '../../../../services/apis';
+import request from '../../../../utils/request';
+import Wangedit from '../../../../components/Wangedit/Wangedit'
+import moment from 'moment';
+
+const { Meta } = Card
+
+const H5Card = props => {
+    return (
+    <Card
+      hoverable
+      style={{ width: 240 }}
+      cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
+    >
+      <Meta title="Europe Street beat" description="www.instagram.com" />
+    </Card>
+    )
+  }
+ 
+  export default H5Card

src/pages/sample/h5/components/SelectContact.jsx

@@ -0,0 +1,208 @@
+import React, { useState, useEffect } from 'react';
+import { Form, Select, Modal, Button, Table, Divider, Tag, Input,Row,Col,Icon,Pagination } from 'antd';
+import request from '../../../../utils/request';
+import apis from '../../../../services/apis';
+import styles from '../style.less';
+
+const { Column, ColumnGroup } = Table;
+const SelectContact = props => {
+
+  const [data, setData] = useState([]);
+  const [visible, setVisible] = useState(false);
+  const [group, setGroup] = useState({ groupId: undefined, groupName: '请选择' })
+  const [selectedData, setSelectedData ] = useState([]);
+
+  useEffect(() => {
+    if (props.value && props.value != selectedData) {
+      setSelectedData(props.value)
+    }
+  }, [props.value])
+
+  // 查询列表
+  const getList = (params) => {
+    request({ ...apis.contact.list, params: { ...params } }).then((data) => {
+        console.log(data)
+        setData(data)
+    })
+  }
+  
+  useEffect(() => {
+    getList({ pageNum: 1, pageSize: 10,})
+  }, []);
+
+  
+
+  const handleChange = val => {
+  }
+
+  const selectData = val => {
+    const list = selectedData.filter(x => x.contactId !== val.contactId).concat(val)
+    setSelectedData(list)
+    props.onSelected(list)
+    setVisible(false)
+  }
+
+  
+  // 提交事件
+  const handleSubmit = (e, props) => {
+    e.preventDefault();
+    e.stopPropagation();
+    props.form.validateFields((err, values) => {
+      if (!err) {
+        getList({ pageNum: 1, pageSize: 10, ...values })
+      }
+    });
+  }
+
+  function handleReset() {
+    props.form.resetFields();
+    getList({ pageNum: 1, pageSize: 10 })
+  }
+
+  const changePageNum = (pageNumber) => {
+    getList({ pageNum: pageNumber, pageSize: 10 })
+  }
+
+  const removeSelected = (val) => {
+    const list = selectedData.filter(x => x.contactId !== val.contactId)
+    setSelectedData(list)
+    props.onSelected(list)
+  }
+
+  const columns = [
+    {
+      title: '姓名',
+      dataIndex: 'contactName',
+      key: 'drainageId',
+      align: 'center',
+      ellipsis: true,
+      render: text => <a>{text}</a>,
+    },
+    {
+      title: '性别',
+      dataIndex: 'sex',
+      key: 'drainageId',
+      align: 'center',
+      ellipsis: true,
+      render: text => <a>{text}</a>,
+    },
+    {
+      title: '头像',
+      dataIndex: 'avatar',
+      key: 'drainageId',
+      align: 'center',
+      ellipsis: true,
+      render: text => <a>{text}</a>,
+    },
+    {
+      title: '固话',
+      dataIndex: 'telephone',
+      key: 'drainageId',
+      align: 'center',
+      ellipsis: true,
+      render: text => <a>{text}</a>,
+    },
+    {
+      title: '手机号',
+      dataIndex: 'phone',
+      key: 'drainageId',
+      align: 'center',
+      ellipsis: true,
+      render: text => <a>{text}</a>,
+    },
+    {
+      title: '内部岗位',
+      dataIndex: 'job',
+      key: 'drainageId',
+      align: 'center',
+      ellipsis: true,
+      render: text => <a>{text}</a>,
+    },
+    {
+      title: '操作',
+      align: 'center',
+      width: '20%',
+      render: (text, record) => (
+        <span>
+          <a onClick={() => selectData(record)} style={{ color: 'blue' }}>选择</a>
+        </span>
+      ),
+    },
+  ];
+
+  const { getFieldDecorator } = props.form
+
+  return (
+    <div>
+      <Row gutter={24}>
+        <Col span={2}><div onClick={() => setVisible(true)}>{group.groupName}</div></Col>
+        <Col span={16}><div>
+        {selectedData.map(x => {
+          return <Tag size="large" key={x.contactId} closable onClose={() => removeSelected(x)}>{x.contactName}</Tag>
+        })}
+      </div></Col>
+      </Row>     
+      
+      <Modal
+        title="请选择"
+        width="1200px"
+        visible={visible}
+        onCancel={() => setVisible(false)}
+        footer={[]}
+      >
+      
+        <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
+            <Form.Item>
+              {getFieldDecorator('contactName')(
+                <Input
+                  prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+                  placeholder="姓名"
+                />,
+              )}
+            </Form.Item>
+            <Form.Item>
+              {getFieldDecorator('telephone')(
+                <Input
+                  prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+                  placeholder="固话"
+                />,
+              )}
+            </Form.Item>
+            <Form.Item>
+              {getFieldDecorator('phone')(
+                <Input
+                  prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+                  placeholder="手机号"
+                />,
+              )}
+            </Form.Item>
+            <Form.Item>
+              {getFieldDecorator('job')(
+                <Input
+                  prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+                  placeholder="内部岗位"
+                />,
+              )}
+            </Form.Item>
+            <Form.Item>
+              <Button type="primary" htmlType="submit" className={styles.searchBtn}>
+                搜索
+              </Button>
+              <Button style={{ marginLeft: 8 }} onClick={handleReset}>
+                  重置
+              </Button>
+            </Form.Item>
+          </Form>
+    
+          <Table 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>
+    
+      </Modal>
+    </div>
+  )
+}
+
+const WrappedRegistrationForm = Form.create()(SelectContact);
+export default WrappedRegistrationForm;

src/pages/sample/h5/edit.jsx

@@ -0,0 +1,169 @@
+import React, { useState, useEffect } from 'react';
+import { Input, Menu, Dropdown, Button, Icon, message, Table, Divider, Tag, Select, Form, Alert, Radio } from 'antd';
+import { FormattedMessage } from 'umi-plugin-react/locale';
+import XForm, { FieldTypes } from '../../../components/XForm';
+import router from 'umi/router';
+import apis from '../../../services/apis';
+import request from '../../../utils/request';
+import Wangedit from '../../../components/Wangedit/Wangedit'
+import ImageUpload from '../../../components/XForm/ImageUpload'
+import SelectContact from './components/SelectContact';
+import moment from 'moment';
+
+const formItemLayout = {
+  labelCol: {
+    xs: { span: 24 },
+    sm: { span: 2 },
+  },
+  wrapperCol: {
+    xs: { span: 24 },
+    sm: { span: 16 },
+  },
+};
+
+const header = props => {
+    const sampleId = props.location.query.id
+  
+    const [ data, setData ] = useState({})
+    const [typeState, setTypeState] = useState("rich")
+
+    if(sampleId){
+      useEffect(() => {
+        getH5Data(sampleId);
+      },[])
+  
+    // 查询列表
+    const getH5Data = (sampleId) => {
+      request({
+          ...apis.sample.get,
+          urlData: { id: sampleId }
+      }).then((data) => {
+        setData(data)
+      }).catch((err) => {
+        message.error(err.msg || err.message)
+      })
+    }
+    }
+     
+    const handleSubmit = (e) => {
+      e.preventDefault();
+      // e.stopPropagation();
+      props.form.validateFieldsAndScroll((err, values) => {
+        console.log(values,"valuesvaluesvaluesvaluesvaluesvaluesvalues")
+        debugger
+        if (!err) {
+          console.log(values,"h5Sample/addh5Sample/add")
+          if(sampleId){
+            request({ ...apis.sample.update, urlData: { id: sampleId }, data: { ...values }}).then((data) => {
+              cancelPage();
+            }).catch((err) => {
+              message.error(err.msg || err.message)
+            })
+          }else{
+            request({ ...apis.sample.addh5, data: { ...values }}).then((data) => {
+              cancelPage();
+            }).catch((err) => {
+              message.error(err.msg || err.message)
+            })
+          }
+        }
+      });
+      
+    }
+  
+    const cancelPage = () => {
+      router.push({
+        pathname: '/sample/h5/list',
+      });
+    }
+
+    function sampleTypeChange(e) {
+      setTypeState(e.target.value)
+    }
+  
+    const { getFieldDecorator } = props.form;
+    return (
+      <Form {...formItemLayout} onSubmit={handleSubmit}>
+            
+          <Form.Item label="样例名" >
+            {getFieldDecorator('sampleName',{
+              rules: [{ required: true, message: '请输入样例名' },
+              { max: 20, message: '样例名不超过20个字符' }],
+            })(<Input placeholder="H5活动主题或目的，如植树节引流活动"/>)}
+          </Form.Item>
+          <Form.Item label="样例体验链接" >
+            {getFieldDecorator('sampleTryLink',{
+              rules: [{ max: 300, message: '样例体验链接不超过300个字符' }],
+            })(<Input placeholder="若样例暂未发布到小程序，可直接粘贴网页链接"/>)}
+          </Form.Item>
+          <Form.Item label="样例体验二维码/小程序码" >
+            {getFieldDecorator('sampleTryCode')(
+              <ImageUpload />,
+            )}
+          </Form.Item>
+          <Form.Item label="封面图" help="建议尺寸：495*330px，比例：3:2，格式：jpg，大小：不超过300KB，用于样例列表封面">
+            {getFieldDecorator('coverImg', {
+              rules: [{ required: true, message: '请选择列表图' }],
+            })(
+              <ImageUpload />,
+            )}
+          </Form.Item>
+          <Form.Item label="方案/报价/技术联系人" >
+            {getFieldDecorator('taContactList',{
+              trigger: 'onSelected'
+            })(<SelectContact />)}
+          </Form.Item>
+          <Form.Item label="发布状态" >
+            {getFieldDecorator('status', {
+              initialValue: "1",
+            })(
+            <Select style={{ width: '180px' }}>
+              <Select.Option value="1">是</Select.Option>
+              <Select.Option value="0">否</Select.Option>
+            </Select>)}
+          </Form.Item>
+          <Form.Item label="权重" help="数值越大越靠前">
+            {getFieldDecorator('orderNo')(<Input />)}
+          </Form.Item>
+          <Form.Item label="标签" help="标签长度6个字，最多3个标签">
+            {getFieldDecorator('tags')(
+              <Select mode="tags" placeholder="输入后选中" style={{ width: '1016px' }}>
+
+              </Select>,
+            )}
+          </Form.Item>
+          <Form.Item label="样例类型">
+            {getFieldDecorator('sampleType',{
+              initialValue: "rich",
+            })(
+            <Radio.Group onChange={e => sampleTypeChange(e)}>
+              <Radio value="rich">富文本</Radio>
+              <Radio value="link">外部链接</Radio>
+            </Radio.Group>,
+            )}
+          </Form.Item>
+          {typeState === 'link' && <Form.Item label="外部链接">
+            {getFieldDecorator('sampleContentLink',{
+              rules: [{ max: 300, message: '外部链接不超过300个字符' }],
+            })(<Input placeholder="填写外部链接，如公众号链接或135编辑器生成的页面链接" />)}
+          </Form.Item>}
+          {typeState === 'rich' && <Form.Item label="样例内容" >
+            {getFieldDecorator('sampleContent')(
+              <Wangedit />,
+            )}
+          </Form.Item> }
+          <Form.Item style={{ width: '400px', margin: 'auto', display: 'flex', justifyContent: 'space-between' }}>
+            <Button type="primary" htmlType="submit">
+                确定
+            </Button>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            <Button onClick={() => router.go(-1)}>
+                取消
+            </Button>
+          </Form.Item>
+        </Form>
+    )
+  }
+  
+  const WrappedNormalLoginForm = Form.create({ name: 'header' })(header);
+  export default WrappedNormalLoginForm

src/pages/sample/h5/index.jsx

@@ -1,6 +1,6 @@
 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 { Form, Pagination, Card, Button, Icon, Tooltip, message,   notification, Modal, Table, Select,Input, DatePicker  } from 'antd';
 import router from 'umi/router';
 import moment from 'moment';
 import className from 'classnames';
@@ -9,8 +9,9 @@ import styles from './style.less';
 import { fetch, apis } from '../../../utils/request';
 import request from '../../../utils/request';
 import AuthButton from '@/components/AuthButton';
+import H5Card from './components/H5Card';
 
-
+const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
 
 function header(props) {
   // 获取初始化数据
@@ -22,7 +23,7 @@ function header(props) {
 
   // 查询列表
   const getList = (params) => {
-    request({ ...apis.channel.list, params: { ...params } }).then((data) => {
+    request({ ...apis.sample.h5list, params: { ...params } }).then((data) => {
         console.log(data)
         setData(data)
     })
@@ -45,9 +46,9 @@ function header(props) {
 
 
   // 跳转到编辑资讯
-  const toEditNews = (id) => () => {
+  const toEditH5 = (id) => () => {
     router.push({
-      pathname: '/channel/edit',
+      pathname: '/sample/h5/edit',
       query: {
         id
       },
@@ -83,75 +84,7 @@ function header(props) {
       }
     });
   }
-  /**
-   *
-   *
-   * @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 })
@@ -161,10 +94,70 @@ function header(props) {
   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} />
+    <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
+        <Form.Item>
+          {getFieldDecorator('sampleName')(
+            <Input
+              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+              placeholder="样例名"
+            />,
+          )}
+        </Form.Item>
+        <Form.Item>
+          {getFieldDecorator('orgName')(
+            <Input
+              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+              placeholder="下单组织"
+            />,
+          )}
+        </Form.Item>
+        <Form.Item>
+          {getFieldDecorator('orderer')(
+            <Input
+              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+              placeholder="下单人"
+            />,
+          )}
+        </Form.Item>
+        <Form.Item>
+          {getFieldDecorator('phone')(
+            <Input
+              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+              placeholder="联系方式"
+            />,
+          )}
+        </Form.Item>
+        <Form.Item>
+            <span style={{marginRight:'10px'}}>下单时间段：</span>
+                {getFieldDecorator('createDate')(
+                  <RangePicker placeholder={['开始时间','结束时间']} />
+                )}
+        </Form.Item>
+        <Form.Item>
+          {getFieldDecorator('demandStatus')(
+            <Select style={{ width: '180px' }} placeholder="需求单状态">
+              <Select.Option value="1">已提交</Select.Option>
+              <Select.Option value="2">处理中</Select.Option>
+              <Select.Option value="3">已交付</Select.Option>
+              <Select.Option value="4">作废</Select.Option>
+            </Select>,
+          )}
+        </Form.Item>
+        <Form.Item>
+          <Button type="primary" htmlType="submit" className={styles.searchBtn}>
+            搜索
+          </Button>
+          <Button style={{ marginLeft: 8 }} onClick={handleReset}>
+              重置
+          </Button>
+        </Form.Item>
+      </Form>
+      
+      <Button type="danger" className={styles.addBtn} onClick={toEditH5()}>新增</Button>
+ 
+      {(data.records || []).map(x => (
+          <H5Card />
+        ))}
       <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
         <Pagination showQuickJumper defaultCurrent={1} total={data.total} onChange={changePageNum} current={data.current}/>
       </div>

src/services/apis.js

@@ -85,6 +85,23 @@ const apis = {
       method: 'PUT',
       action: 'channel',
     },
+    h5list: {
+      url: `${prefix}/h5Sample/list`,
+      method: 'GET',
+      action: 'channel',
+    },
+    addh5: {
+      url: `${prefix}/h5Sample/add`,
+      method: 'POST',
+      action: 'channel',
+    },
+  },
+  contact: {
+    list: {
+      url: `${prefix}/taContact`,
+      method: 'GET',
+      action: 'channel',
+    },
   },
   image: {
     uploadForAnt: {