Merge branch 'master' of http://git.ycjcjy.com/estateagents/pc-channel

config/routes.js

@@ -78,6 +78,12 @@ export default [
                 name: 'H5需求单',
                 component: './sample/demand/index',
               },
+              {
+                path: '/sample/demand/edit',
+                name: 'H5需求单详情',
+                hideInMenu: true,
+                component: './sample/demand/edit',
+              },
             ],
           },
           {

package.json

@@ -61,7 +61,8 @@
     "umi": "^2.8.7",
     "umi-plugin-pro-block": "^1.3.2",
     "umi-plugin-react": "^1.9.5",
-    "umi-request": "^1.0.8"
+    "umi-request": "^1.0.8",
+    "wangeditor": "^3.1.1"
   },
   "devDependencies": {
     "@ant-design/colors": "^3.1.0",

src/components/Wangedit/Wangedit.jsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import E from 'wangeditor';
+import { fetch, apis } from '../../utils/request';
+
+/**
+ * @param {*} props
+ * @returns
+ */
+class Wangedit extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+    this.state = {
+      html: undefined,
+      contenteditable: props.contenteditable == false ? false : true
+    }
+    this.editor = undefined;
+  }
+
+  render() {
+    return (
+      <div ref="editorElem" style={{ textAlign: 'left' }}>
+      </div>
+    );
+  }
+
+  componentDidMount() {
+    const elem = this.refs.editorElem
+    this.editor = new E(elem)
+    // 使用 onchange 函数监听内容的变化
+    this.editor.customConfig.onchange = html => {
+      this.setState({ html })
+
+      if (typeof this.props.onChange === 'function') {
+        this.props.onChange(html)
+      }
+    }
+    this.editor.customConfig.zIndex = 100
+    this.editor.customConfig.uploadImgMaxLength = 1
+    this.editor.customConfig.customUploadImg = function (files, insert) {
+      if (!files.length) return
+      
+      const data = new FormData()
+      data.append('file', files[0])
+
+      fetch(apis.image.upload)({data}).then(insert)
+    }
+    this.editor.customConfig.menus = [
+      'head',  // 标题
+      'bold',  // 粗体
+      'fontSize',  // 字号
+      'fontName',  // 字体
+      'italic',  // 斜体
+      'underline',  // 下划线
+      'strikeThrough',  // 删除线
+      'foreColor',  // 文字颜色
+      'backColor',  // 背景颜色
+      'list',  // 列表
+      'justify',  // 对齐方式
+      'quote',  // 引用
+      'image',  // 插入图片
+      'undo',  // 撤销
+      'redo'  // 重复
+    ]
+    
+    // 过滤 word 字符
+    this.editor.customConfig.pasteFilterStyle = false
+    this.editor.customConfig.pasteTextHandle = function(content) {
+      const regs = [
+        /<!--\[if [\s\S]*?endif\]-->/ig,
+        /<[a-zA-Z0-9]+\:[^>]+>[^>]*<\/[a-zA-Z0-9]+\:[^>]+>/ig,
+        /<[a-zA-Z0-9]+\:[^>]+\/>/ig,
+        /<style>[\s\S]*?<\/style>/ig,
+      ]
+
+      return regs.reduce((acc, reg) => {
+        return acc.replace(reg, '')
+      }, content)
+    }
+
+    this.editor.create()
+    this.editor.$textElem.attr('contenteditable',this.state.contenteditable);
+    this.editor.customConfig.uploadImgShowBase64 = true
+    this.editor.txt.html(this.props.value)
+  }
+
+  componentDidUpdate(props, state) {
+    if (this.props.value && !state.html) {
+      if (this.editor) {
+        this.editor.txt.html(this.props.value)
+      }
+    }
+  }
+
+  /**
+   *增加这个 shouldComponentUpdate 生命函数
+    处理自动聚焦到富文本上
+   *
+   * @param {*} nextProps
+   * @returns
+   * @memberof Wangedit
+   */
+  shouldComponentUpdate(nextProps) {
+    return nextProps.value !== this.editor.txt.html()
+  }
+}
+
+export default Wangedit
+

src/pages/sample/demand/edit.jsx

@@ -0,0 +1,113 @@
+import React, { useState, useEffect } from 'react';
+import { Input, Menu, Dropdown, Button, Icon, message, Table, Divider, Tag, Select, Form, Alert } 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 moment from 'moment';
+
+
+const header = props => {
+    const demandId = props.location.query.id
+  
+    const [ data, setData ] = useState({})
+    if(demandId){
+      useEffect(() => {
+        getDemandData(demandId);
+      },[])
+  
+    // 查询列表
+    const getDemandData = (demandId) => {
+      request({
+          ...apis.sample.get,
+          urlData: { id: demandId }
+      }).then((data) => {
+        setData(data)
+      }).catch((err) => {
+        message.error(err.msg || err.message)
+      })
+    }
+    }
+  
+    const fields = [
+      {
+        label: '样例名',
+        name: 'sampleName',
+        type: FieldTypes.Text,
+        value: data.sampleName,
+      },    
+      {
+        label: '下单组织',
+        name: 'orgName',
+        type: FieldTypes.Text,
+        value: data.orgName,
+      },
+      {
+        label: '下单人',
+        name: 'orderer',
+        value: data.orderer,
+        type: FieldTypes.Text,
+      },
+      {
+        label: '联系方式',
+        name: 'phone',
+        value: data.phone,
+        type: FieldTypes.Text,
+      },
+      {
+        label: '下单时间',
+        name: 'createDate',
+        type: FieldTypes.DatePicker ,
+        value: data.createDate != null ? moment(data.createDate, 'YYYY-MM-DD') : null,
+      },
+      {
+        label: '需求单状态',
+        name: 'demandStatus',
+        value: data.demandStatus+'',
+        render: <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>,
+      },
+      {
+        label: '备注',
+        name: 'remark',
+        type: FieldTypes.Text,
+        value: data.remark,
+      },
+      {
+        label: '需求描述',
+        name: 'demandContent',
+        value: data.demandContent,
+        render: <Wangedit />
+      },
+    ]
+  
+     
+    const handleSubmit = (values) => {
+      if(demandId){
+          request({ ...apis.sample.update, urlData: { id: demandId }, data: { ...values }}).then((data) => {
+            cancelPage();
+          }).catch((err) => {
+            message.error(err.msg || err.message)
+          })
+        }
+    }
+  
+    const cancelPage = () => {
+      router.push({
+        pathname: '/sample/demand/list',
+      });
+    }
+  
+    return (
+      <XForm onSubmit={handleSubmit} onCancel={cancelPage} fields={fields}></XForm>
+    )
+  }
+  
+  const WrappedNormalLoginForm = Form.create({ name: 'header' })(header);
+  export default WrappedNormalLoginForm

src/pages/sample/demand/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';
@@ -10,11 +10,12 @@ import { fetch, apis } from '../../../utils/request';
 import request from '../../../utils/request';
 import AuthButton from '@/components/AuthButton';
 
-
+const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
 
 function header(props) {
   // 获取初始化数据
   const [ data, setData ] = useState({})
+  const [demandIdList, setDemandIdList] = useState([])
 
   useEffect(() => {
     getList({ pageNum: 1, pageSize: 10 });
@@ -22,7 +23,7 @@ function header(props) {
 
   // 查询列表
   const getList = (params) => {
-    request({ ...apis.channel.list, params: { ...params } }).then((data) => {
+    request({ ...apis.sample.list, params: { ...params } }).then((data) => {
         console.log(data)
         setData(data)
     })
@@ -34,7 +35,16 @@ function header(props) {
     e.preventDefault();
     props.form.validateFields((err, values) => {
       if (!err) {
-        getList({ pageNum: 1, pageSize: 10, ...values })
+        let {createDate, ...submitValue} = values
+        if(null != createDate && createDate.length > 0){
+          const [startCreateDate, endCreateDate] = createDate
+          submitValue.startCreateDate = moment(startCreateDate).format('YYYY-MM-DD');
+          submitValue.endCreateDate = moment(endCreateDate).format('YYYY-MM-DD');
+        }else{
+          submitValue.startCreateDate = null
+          submitValue.endCreateDate = null
+        }
+        getList({ pageNum: 1, pageSize: 10, ...submitValue })
       }
     });
   }
@@ -43,11 +53,18 @@ function header(props) {
     getList({ pageNum: pageNumber, pageSize: 10 })
   }
 
+  const rowSelection = {
+    onChange: (selectedRowKeys, selectedRows) => {
+      console.log('selectedRowKeys:', selectedRowKeys, 'selectedRows: ', selectedRows);
+      setDemandIdList(selectedRows)
+    },
+  };
+
 
   // 跳转到编辑资讯
-  const toEditNews = (id) => () => {
+  const toEditDemand = (id) => () => {
     router.push({
-      pathname: '/channel/edit',
+      pathname: '/sample/demand/edit',
       query: {
         id
       },
@@ -55,31 +72,25 @@ function header(props) {
   }
 
   
-  const changeNewsStatus = (row, newsId) => () => {
-    const title = row.status === 0 ? '确定启用吗': '停用后，此账号将无法登录渠道代理商后台'
+  const changeStatus = () => {
+    if(demandIdList.length < 1){
+      message.error('请先选择要删除的数据！')
+      return
+    }
+    const title = '确认将所选的' + demandIdList.length + '条数据删除？可删除条件：需求单阶段 为 作废。'
     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)
-          })
-        }
-        
+        request({ ...apis.sample.put, data: { ids: demandIdList.map(x => x.demandId) } }).then((data) => {
+          const resultMessage = '操作成功，其中'+data.successNum+'条成功删除，'+data.failNum+'条非作废状态未删除。'
+          message.info(resultMessage)
+          getList({ pageNum: 1, pageSize: 10 });
+        }).catch((err) => {
+          console.log(err)
+          message.info(err.msg || err.message)
+        })
       }
     });
   }
@@ -91,45 +102,43 @@ function header(props) {
    */
   const columns = [
     {
-      title: '渠道代理',
-      dataIndex: 'channelProxyName',
-      key: 'channelProxyName',
+      title: '样例名',
+      dataIndex: 'sampleName',
+      key: 'sampleName',
       align: 'center',
     },
     {
-      title: '账号名',
-      dataIndex: 'userName',
-      key: 'userName',
+      title: '下单组织',
+      dataIndex: 'orgName',
+      key: 'orgName',
       align: 'center',
-      render: (x, row) => <span>{row.userName === null || row.userName === '' ? row.channelTel : row.userName}</span>,
     },
     {
-      title: '小程序总数',
-      dataIndex: 'appMaxNum',
-      key: 'appMaxNum',
+      title: '下单人',
+      dataIndex: 'orderer',
+      key: 'orderer',
       align: 'center',
 
     },
     {
-      title: '现有小程序',
-      dataIndex: 'appCurrentNum',
-      key: 'appCurrentNum',
+      title: '联系方式',
+      dataIndex: 'phone',
+      key: 'phone',
       align: 'center',
-      render: (appCurrentNum) => <span>{appCurrentNum === 0 || appCurrentNum == null ? 0 : appCurrentNum}</span>,
     },
     {
-      title: '服务到期时间',
-      dataIndex: 'expireDate',
-      key: 'expireDate',
+      title: '下单时间',
+      dataIndex: 'createDate',
+      key: 'createDate',
       align: 'center',
-      render: (x, row) => <><span>{`${moment(row.expireDate).format('YYYY-MM-DD')}`}</span></>,
+      render: (x, row) => <><span>{`${moment(row.createDate).format('YYYY-MM-DD')}`}</span></>,
     },
     {
-      title: '状态',
-      dataIndex: 'status',
-      key: 'status',
+      title: '需求单状态',
+      dataIndex: 'demandStatus',
+      key: 'demandStatus',
       align: 'center',
-      render: (status) => <span>{status === 1 ? '启动' : '停用'}</span>,
+      render: (demandStatus) => <span>{demandStatus === 1 ? '已提交' : demandStatus === 2 ? '处理中' : demandStatus === 3 ? '已交付' : demandStatus === 4 ? '作废' : ''}</span>,
     },
     {
       title: '操作',
@@ -137,18 +146,9 @@ function header(props) {
       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>
-        </>
+        <span style={{ color: '#FF925C', cursor: 'pointer' }} onClick={toEditDemand(row.demandId)}>
+          查看详情<Icon type="form" className={styles.edit} />
+        </span>
       ),
     },
   ];
@@ -161,10 +161,68 @@ function header(props) {
   return (
 
     <>
+    <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>
       <AuthButton name="admin.taNewsType.post" noRight={null}>
-        <Button type="danger" className={styles.addBtn} onClick={toEditNews()}>新增</Button>
+        <Button type="danger" className={styles.addBtn} onClick={changeStatus}>删除</Button>
       </AuthButton>
-      <Table rowKey="newsType" dataSource={data.records} columns={columns} pagination={false} />
+      <Table rowSelection={rowSelection} 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>

src/services/apis.js

@@ -64,6 +64,28 @@ const apis = {
       action: 'channel',
     },
   },
+  sample: {
+    list: {
+      url: `${prefix}/taH5Demand`,
+      method: 'GET',
+      action: 'channel',
+    },
+    put: {
+      url: `${prefix}/taH5Demand/batch`,
+      method: 'PUT',
+      action: 'channel',
+    },
+    get: {
+      url: `${prefix}/taH5Demand/:id`,
+      method: 'GET',
+      action: 'channel',
+    },
+    update: {
+      url: `${prefix}/taH5Demand/update/:id`,
+      method: 'PUT',
+      action: 'channel',
+    },
+  },
   image: {
     uploadForAnt: {
       url: `${prefix}/antd/image`,