Merge branch 'master' of http://git.ycjcjy.com/zhiyuxing/estateagents-admin-manager

config/config.js

                   name: '商品核销',
                   component: './integralMall/writeOff',
                 },
+                {
+                  path: '/integralMall/verifyList',
+                  name: '',
+                  component: './integralMall/verifyList',
+                },
               ],
             },
             {
                 },
               ],
             },
+
+            {
+              path: '/staff',
+              name: '员工管理',
+              component: '../layouts/BlankLayout',
+              routes: [
+                {
+                  path: '/staff/StaffList',
+                  name: '员工列表',
+                  component: './staff/list/StaffList',
+                },
+                {
+                  path: '/staff/editStaff',
+                  name: '',
+                  component: './staff/list/editStaff',
+                },
+             
+                {
+                  path: '/staff/RoleList',
+                  name: '角色管理',
+                  component: './staff/list/RoleList',
+                },
+                {
+                  path: '/staff/editRole',
+                  name: '',
+                  component: './staff/list/editRole',
+                },
+             
+              ],
+            },
             {
               component: './404',
             },
 
   proxy: {
     '/api/': {
-      target: 'http://localhost:8080/',
+      target: 'http://192.168.0.11:8080/',
       changeOrigin: true,
       // pathRewrite: { '^/server': '' },
     },

package.json

     "antd": "^3.20.0",
     "classnames": "^2.2.6",
     "dva": "^2.4.1",
+    "echarts": "^4.3.0",
     "lodash": "^4.17.11",
     "md5": "^2.2.1",
     "moment": "^2.24.0",

src/components/EchartsTest/EChart.jsx

+import React, { Component } from 'react';
+
+// 引入 ECharts 主模块
+import echarts from 'echarts/lib/echarts';
+// 引入柱状图
+import  'echarts/lib/chart/bar';
+// 引入提示框和标题组件
+import 'echarts/lib/component/tooltip';
+import 'echarts/lib/component/title';
+
+class EchartsTest extends Component {
+    chartRef = undefined
+    chart = undefined
+    defaultChartOption = {}
+
+    componentDidMount() {
+        this.chart = echarts.init(this.chartRef.current)
+
+        // 绘制图表
+        this.chart.setOption({
+            ...this.defaultChartOption,
+            ...this.props.options || {},
+        });
+    }
+
+    componentDidUpdate(preProps) {
+        if (preProps.options != this.props.options) {
+            this.chart.setOption({
+                ...this.defaultChartOption,
+                ...this.props.options || {},
+            });
+        }
+    }
+
+    handleDom = ref => this.chartRef = ref
+
+    render() {
+        const style = {
+            width: '600px',
+            ...this.props.style || {}
+        }
+
+        return (
+            <div ref={this.handleDom} style={style}></div>
+        );
+    }
+}
+
+export default EchartsTest;

src/components/EchartsTest/Line.jsx

+import React, { useEffect } from 'react';
+import EChart from './EChart';
+
+
+const Line = (props) => {
+
+  const {person_realty_consultant, person_estate_agent, person_null} = xxx
+
+  const options = {
+    xAxis: {},
+    legend: {
+      left: '70%',
+      data: ['来源置业顾问', '来源全民经纪人', '自主进入'],
+    },
+    series: [
+      {
+        type: 'pie',
+        datasetIndex: 1,
+        center: ['75%', '50%'],
+        radius: [0, '50%'],
+      },
+    ],
+    dataset: {
+      id: 'pie',
+      source: [
+        { form: '来源置业顾问', value: person_realty_consultant },
+        { form: '来源全民经纪人', value: person_estate_agent },
+        { form: '自主进入', value: person_null },
+      ]
+    },
+  }
+
+  return (
+    <EChart options={options} />
+  )
+
+}

src/components/EchartsTest/index.jsx

+import React, { Component } from 'react';
+
+// 引入 ECharts 主模块
+import echarts from 'echarts/lib/echarts';
+// 引入柱状图
+import  'echarts/lib/chart/bar';
+// 引入提示框和标题组件
+import 'echarts/lib/component/tooltip';
+import 'echarts/lib/component/title';
+class Chart extends Component {
+
+  render() { 
+    return ( <div></div> );
+  }
+}
+ 
+export default Chart;

src/pages/Welcome.jsx

 import React from 'react';
 import { Card, Typography, Alert, Row, Col } from 'antd';
 import { FormattedMessage } from 'umi-plugin-react/locale';
-
-// const CodePreview = ({ children }) => (
-//   <pre
-//     style={{
-//       background: '#f2f4f5',
-//       padding: '12px 20px',
-//       margin: '12px 0',
-//     }}
-//   >
-//     <code>
-//       <Typography.Text copyable>{children}</Typography.Text>
-//     </code>
-//   </pre>
-// );
-
+import EchartsTest from '../components/EchartsTest'
+const option = {
+  xAxis: {
+    type: 'category',
+    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+  },
+  yAxis: {
+    type: 'value'
+  },
+  series: [{
+    data: [820, 932, 901, 934, 1290, 1330, 1320],
+    type: 'line'
+  }]
+};
 export default () => (
   <>
     <div style={{ display: 'flex' }}>
         <span style={{ fontSize: '52px', color: '#fff', marginLeft: '26px', fontFamily: 'fantasy' }}>91</span>
       </div>
     </div>
-    <div>11111111111111</div>
+    <EchartsTest style={{width: 500, height:500}}></EchartsTest>
+
   </>
 );
+

src/pages/channel/addChannel.jsx

   //   addChannel({ pageNum: 1, pageSize: 10 })
   // }, [])
 
-  function addChannel(params) {
-      request({
-        url: '/api/admin/channel',
-        method: 'POST',
-        data: { ...params },
-    // eslint-disable-next-line no-shadow
+  function addChannel (params) {
+    request({
+      url: '/api/admin/channel',
+      method: 'POST',
+      data: { ...params },
+      // eslint-disable-next-line no-shadow
     }).then(data => {
-        console.log(data)
-        setData(data)
-         // eslint-disable-next-line no-unused-expressions
-         router.go(-1)
+      console.log(data)
+      setData(data)
+      // eslint-disable-next-line no-unused-expressions
+      router.go(-1)
     })
   }
 
-  function handleSubmit(e) {
+  function handleSubmit (e) {
     e.preventDefault();
     props.form.validateFields((err, values) => {
       if (!err) {
   const { getFieldDecorator } = props.form;
 
   return (
-  <>
-        <Form labelCol={{ span: 7 }} wrapperCol={{ span: 12 }} onSubmit={handleSubmit}>
+    <>
+      <Form labelCol={{ span: 7 }} wrapperCol={{ span: 12 }} onSubmit={handleSubmit}>
         <Form.Item label="渠道名称">
           {getFieldDecorator('channelName', {
             rules: [{ required: true, message: '请输入渠道名称' }],
-          })(<Input className={channels.inpuit} / >)}
+          })(<Input className={channels.inpuit} />)}
         </Form.Item>
         <Form.Item label="联系人">
           {getFieldDecorator('channelContact', {
           <Button type="primary" htmlType="submit">
             保存
           </Button>
-          <Button className={channels.formButton} onClick = {() => router.go(-1)} type="primary" htmlType="submit">
+          <Button className={channels.formButton} onClick={() => router.go(-1)} type="primary" htmlType="submit">
             取消
           </Button>
         </Form.Item>
       </Form>
-  </>
-)
+    </>
+  )
 }
 
 const WrappedNormalLoginForm = Form.create({ name: 'header' })(header);

src/pages/customer/report/index.jsx

           </Button>
         </Form.Item>
       </Form>
-
       <Table dataSource={dataSource.records} columns={columns} pagination={{ total: dataSource.total, onChange }} />
     </>
   );

src/pages/integralMall/achieve.jsx

-import React from 'react';
-import { Form, Input, Button, Icon, Tabs, Row, Col, Table } from 'antd';
+import React, { useState, useEffect } from 'react';
+import { Form, Input, Button, Icon, Tabs, Row, Col, Table, Pagination, Alert, message } from 'antd';
 import { FormattedMessage } from 'umi-plugin-react/locale';
 import styles from '../style/GoodsList.less';
 import router from 'umi/router';
-
+import moment from 'moment';
+import BuildSelect from '../../components/SelectButton/BuildSelect'
+import request from '../../utils/request'
 
 const { TabPane } = Tabs;
-function callback(key) {
-  console.log(key);
+
+
+
+
+function header(props) {
+  const [ carType, setCarType ] = useState({})
+  const callback = (key) => {
+    setCarType(key)
+    getList({ pageNum: 1, pageSize: 10 , type: key});
+  }
+  
+// 获取初始化数据
+const [ data, setData ] = useState({})
+
+useEffect(() => {
+  getList({ pageNum: 1, pageSize: 10 , type: 'platform'});
+},[])
+
+// 查询列表
+const getList = (params) => {
+  request({
+      url: '/api/admin/tdPointsRules',
+      method: 'GET',
+      params: { ...params },
+  }).then((data) => {
+      console.log(data)
+      setData(data)
+  })
 }
 
-/**
- *
- *
- * @param {*} props
- * @returns
- */
-const dataSource = [
-  {
-    key: '1',
-    img: 'http://img0.imgtn.bdimg.com/it/u=4246326797,2657995307&fm=26&gp=0.jpg',
-    name: '华为P30 Pro',
-  },
-  {
-    key: '2',
-    img: '',
-    name: '大米',
-  },
-];
+const changePageNum = (pageNumber) => {
+  getList({ pageNum: pageNumber, pageSize: 10, type: carType })
+}
 
-const columns = [
-  {
-    title: '类型',
-    dataIndex: 'type',
-    key: 'type',
-    align: 'center',
-  },
-  {
-    title: '获取积分',
-    dataIndex: 'intergral',
-    key: 'intergral',
-    align: 'center',
-  },
-  {
-    title: '状态',
-    dataIndex: 'state',
-    key: 'state',
-    align: 'center',
-  },
-  {
-    title: '说明',
-    dataIndex: 'desc',
-    key: 'desc',
-    align: 'center',
-  },
-  {
-    title: '操作时间',
-    dataIndex: 'time',
-    key: 'time',
-    align: 'center',
-  },
-  {
-    title: '操作',
-    dataIndex: 'handle',
-    key: 'handle',
-    align: 'center',
-    render: () => <><span style={{ color: '#EF273A', marginRight: '20px' }} >停用<Icon type="stop" className={styles.shoppingCart} /></span><span style={{ color: '#EF273A', marginRight: '20px' }} >启用<Icon type="check-circle" className={styles.shoppingCart} /></span><span style={{ color: '#FF925C' }}>编辑<Icon type="form" className={styles.edit} /></span></>,
-  },
 
-];
+  // 提交事件
+  const handleSubmit = (e, props) => {
+    e.preventDefault();
+    props.form.validateFields((err, values) => {
+      if (!err) {
+        getList({ pageNum: 1, pageSize: 10, ...values, type: carType})
+      }
+    });
+  }
 
+  const changeStatus = (row) => () => {
+    request({
+      url: '/api/admin/tdPointsRules/change',
+      method: 'PUT',
+      data: { ...row },
+    }).then((data) => {
+      message.info('操作成功！')
+      getList({ pageNum: 1, pageSize: 10, type: carType})
+    })
+  }
+
+const columns = [
+    {
+      title: '类型',
+      dataIndex: 'ruleName',
+      key: 'ruleName',
+      align: 'center',
+    },
+    {
+      title: '获取积分',
+      dataIndex: 'pointsAmount',
+      key: 'pointsAmount',
+      align: 'center',
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      align: 'center',
+      render: (status) => <span>{status == 1 ? '启用' : '停用'}</span>
+    },
+    {
+      title: '操作时间',
+      dataIndex: 'updateDate',
+      key: 'updateDate',
+      align: 'center',
+      render: (updateDate) => <><span>{updateDate != null ? moment(updateDate).format('YYYY-MM-DD') : ''}</span></>
+    },
+    {
+      title: '操作',
+      dataIndex: 'handle',
+      key: 'handle',
+      align: 'center',
+      render: (x,row) => <><span style={{ color: '#EF273A', marginRight: '20px' }} onClick={changeStatus(row)}>{row.status == 1?'停用':'启用'}<Icon type="stop" className={styles.shoppingCart} /></span>
+                      <span style={{ color: '#FF925C' }}>{row.buildingId != null ? '编辑'`${<Icon type="form" className={styles.edit} />}` : ''}</span></>,
+    },
+  ];
 
-function header(props) {
   const { getFieldDecorator } = props.form
   return (
     <>
       <Tabs onChange={callback} type="card">
-        <TabPane tab="平台积分" key="1">
-          <Table style={{ marginTop: '40px' }} dataSource={dataSource} columns={columns} />
+        <TabPane tab="平台积分" key="platform">
+          <Table style={{ marginTop: '40px' }} 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} />
+          </div>
         </TabPane>
-        <TabPane tab="项目积分" key="2">
-          <Table style={{ marginTop: '40px' }} dataSource={dataSource} columns={columns} />
+        <TabPane tab="项目积分" key="project">
+        <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
+            <Form.Item>
+              {getFieldDecorator('buildingId')(
+                <BuildSelect />,
+              )}
+            </Form.Item>
+             
+            <Form.Item>
+              <Button type="primary" htmlType="submit" className={styles.searchBtn}>
+                搜索
+              </Button>
+            </Form.Item>
+          </Form>
+          <Table style={{ marginTop: '40px' }} 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} />
+          </div>
         </TabPane>
       </Tabs>,
     </>

src/pages/integralMall/verifyList.jsx

+import React, { useState, useEffect } from 'react';
+import { Form, Input, Button, Icon, Select, message, Table, Divider, Tag, Pagination, Modal, DatePicker } from 'antd';
+import { FormattedMessage } from 'umi-plugin-react/locale';
+import styles from '../style/GoodsList.less';
+import router from 'umi/router';
+import moment from 'moment';
+
+import request from '../../utils/request'
+
+const { Option } = Select;
+const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
+
+const header = (props) => {
+  const [ data, setData ] = useState({})
+
+  useEffect(() => {
+    getVerifyList({pageNum: 1,pageSize: 10, phone: props.location.query.telValue });
+  },[])
+
+  // 查询列表
+  const getVerifyList = (params) => {
+    request({
+      url: '/api/admin/taPointsExchange',
+      method: 'GET',
+      params: { ...params },
+    }).then((data) => {
+        setData(data)
+    })
+  }
+
+  const changePageNum = (pageNumber) => {
+    getVerifyList({ pageNum: 1, pageSize: 10, phone: props.location.query.telValue })
+  }
+
+  const toBack = () => {
+    router.push({
+      pathname: '/integralMall/writeOff',
+    });
+  }
+
+  const changeStatus = (row) => () => {
+    request({
+      url: '/api/admin/taPointsExchange/change',
+      method: 'PUT',
+      data: row
+    }).then((data) => {
+        message.info("操作成功")
+        getVerifyList({ pageNum: pageNumber, pageSize: 10, phone: props.location.query.telValue })
+    })
+  }
+  
+  const columns = [
+    {
+      title: '用户姓名',
+      dataIndex: 'personName',
+      key: 'personName',
+      align: 'center',
+    },
+    {
+      title: '用户类型',
+      dataIndex: 'personType',
+      key: 'personType',
+      align: 'center',
+      render: (personType)=> <><span>{personType === 'Realty Consultant' ? '置业顾问' : personType === 'Sales Executive' ? '销售主管' : personType === 'estate agent' ? '经纪人' : ''}</span></>
+    },
+    {
+      title: '手机号',
+      dataIndex: 'phone',
+      key: 'phone',
+      align: 'center',
+    },
+    {
+      title: '商品图片',
+      dataIndex: 'image',
+      key: 'image',
+      align: 'center',
+      render: (text, record) => <img src={record.image} className={styles.touxiang} />,
+    },
+    {
+      title: '商品名称',
+      dataIndex: 'targetName',
+      key: 'targetName',
+      align: 'center',
+    },
+    {
+      title: '兑换时间',
+      dataIndex: 'createDate',
+      key: 'createDate',
+      align: 'center',
+      render: (createDate) => <><span>{moment(createDate).format('YYYY-MM-DD HH:mm')}</span></>
+    },
+    {
+      title: '领取时间',
+      dataIndex: 'verifyDate',
+      key: 'verifyDate',
+      align: 'center',
+      render: (verifyDate) => <><span>{verifyDate != null ? moment(verifyDate).format('YYYY-MM-DD HH:mm') : ''}</span></>
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      align: 'center',
+      render: (status)=> <><span>{status == 1 ? '已领取' : '未领取'}</span></>
+    },
+    {
+      title: '操作',
+      dataIndex: 'handle',
+      key: 'handle',
+      align: 'center',
+      render: (x,row) => <span style={{ color: '#1990FF' }} onClick={changeStatus(row)}>{ row.status == 1?'':'核销' }</span>
+           
+    },
+  ];
+
+  return (
+    <>
+      <Button type="primary" className={styles.addBtn} onClick={toBack}>返回</Button>
+      <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} />
+      </div>
+    </>
+  )
+}
+const WrappedHeader = Form.create({ name: 'header' })(header);
+
+export default WrappedHeader

src/pages/integralMall/writeOff.jsx

-import React from 'react';
-import { Form, Input, Button, Icon, Tabs, Row, Col } from 'antd';
+import React, { useState, useEffect } from 'react';
+import { Form, Input, Button, Icon, Tabs, Row, Col, message } from 'antd';
 import { FormattedMessage } from 'umi-plugin-react/locale';
 import styles from '../style/GoodsList.less';
 import router from 'umi/router';
  */
 
 function header(props) {
+  const [telValue, setTelValue] = useState('')
+  const changeTel = (e) => {
+    setTelValue(e.target.value)
+  }
+
+  const verifyTel = () =>{
+    if(telValue === ""){
+      message.error("请输入手机号");
+      return;
+    }
+    router.push({
+      pathname: '/integralMall/verifyList',
+      query: {
+        telValue
+      },
+    });
+  }
+
   const { getFieldDecorator } = props.form
   return (
     <>
             </Col>
           </Row>
           <div style={{ margin: '110px auto', display: 'block',textAlign:'center' }}>
-            <Input placeholder="请输入手机号" style={{width:'200px'}} />
-            <Button type="primary" style={{marginLeft:'10px', padding: '6px 46px', backgroundColor: '#EA2323', border: 'none' }}>立即核销</Button>
+            <Input placeholder="请输入手机号" style={{width:'200px'}} onChange={changeTel}/>
+            <Button type="primary" style={{marginLeft:'10px', padding: '6px 46px', backgroundColor: '#EA2323', border: 'none' }} onClick={verifyTel}>立即核销</Button>
           </div>
         </TabPane>
       </Tabs>,

src/pages/news/type/NewsType.jsx

   }
 
   
-  const changeNewsStatus = (row) => () => {
+  const changeNewsStatus = (row, newsId) => () => {
     Modal.confirm({
       title: '确认删除该商品？',
       okText: '确认',
       cancelText: '取消',
       onOk() {
         request({
-          url: '/api/admin/taNewsType',
-          method: 'PUT',
+          url: '/api/admin/taNewsType/' + newsId,
+          method: 'DELETE',
           data: { ...row },
         }).then((data) => {
           message.info('操作成功！')
       dataIndex: 'handle',
       key: 'handle',
       align: 'center',
-      render: (x, row) => <><span style={{ color: '#EF273A', marginRight: '20px' }} onClick={changeNewsStatus(row)}>{row.status == 1 ? '下架' : '上架'}<Icon type="shopping-cart" className={styles.shoppingCart} />
+      render: (x, row) => <><span style={{ color: '#EF273A', marginRight: '20px' }} onClick={changeNewsStatus(row, row.newsTypeId)}>{row.status == 1 ? '删除' : '上架'}<Icon type="shopping-cart" className={styles.shoppingCart} />
                             </span><span style={{ color: '#FF925C' }} onClick={toEditNews(row.newsTypeId)}>编辑<Icon type="form" className={styles.edit} /></span></>,
     },
   ];

src/pages/staff/components/Tagss.jsx

+import React from 'react';
+import { Tag, Input, Tooltip, Icon } from 'antd';
+import Styles from './style.less';
+
+ class Tagss extends React.Component {
+  state = {
+    tags: [ 'Tag 2', 'Tag 3'],
+    inputVisible: false,
+    inputValue: '',
+  };
+
+  handleClose = removedTag => {
+    const tags = this.state.tags.filter(tag => tag !== removedTag);
+    console.log(tags);
+    this.setState({ tags });
+  };
+
+  showInput = () => {
+    this.setState({ inputVisible: true }, () => this.input.focus());
+  };
+
+  handleInputChange = e => {
+    this.setState({ inputValue: e.target.value });
+  };
+
+  handleInputConfirm = () => {
+    const { inputValue } = this.state;
+    let { tags } = this.state;
+    if (inputValue && tags.indexOf(inputValue) === -1) {
+      tags = [...tags, inputValue];
+    }
+    console.log(tags);
+    this.setState({
+      tags,
+      inputVisible: false,
+      inputValue: '',
+    });
+  };
+
+  saveInputRef = input => (this.input = input);
+
+  render() {
+    const { tags, inputVisible, inputValue } = this.state;
+    return (
+      <div>
+        {tags.map((tag, index) => {
+          const isLongTag = tag.length > 20;
+          const tagElem = (
+            <Tag className = {Styles.tagss} key={tag} closable = {true} onClose={() => this.handleClose(tag)}>
+              {isLongTag ? `${tag.slice(0, 20)}...` : tag}
+            </Tag>
+          );
+          return isLongTag ? (
+            <Tooltip title={tag} key={tag}>
+              {tagElem}
+            </Tooltip>
+          ) : (
+            tagElem
+          );
+        })}
+        {inputVisible && (
+          <Input className = {Styles.tagss}
+            ref={this.saveInputRef}
+            // type="text"
+            // size="small"
+            // style={{ width: 78 }}
+            value={inputValue}
+            onChange={this.handleInputChange}
+            onBlur={this.handleInputConfirm}
+            onPressEnter={this.handleInputConfirm}
+          />
+        )}
+        {!inputVisible && (
+          <Tag className = {Styles.tagss} onClick={this.showInput} >
+            <Icon type="plus" /> 新建
+          </Tag>
+        )}
+      </div>
+    );
+  }
+}
+
+export default Tagss;

src/pages/staff/components/style.less

+.tagss{
+  width: 150px;
+  height: 32px;
+  
+font-size:14px;
+
+font-weight:400;
+color:rgba(153,153,153,1);
+
+
+padding: 4px 11px;
+
+color: rgba(0, 0, 0, 0.65);
+
+
+
+line-height: 1.5;
+
+background-color: #fff;
+
+
+
+border: 1px solid #d9d9d9;
+}

src/pages/staff/list/RoleList.jsx

+
+import React, { useState, useEffect } from 'react';
+import { Form, Input, Button, Icon, Select, message, Table, Divider, Row, Col, Tag, Pagination, Modal, DatePicker } from 'antd';
+import { FormattedMessage } from 'umi-plugin-react/locale';
+import styles from '../../style/GoodsList.less';
+import router from 'umi/router';
+import { Card, Avatar } from 'antd';
+import request from '../../../utils/request'
+import Styles from './style.less';
+
+
+function confirm() {
+  Modal.confirm({
+    title: '确认停用该角色？',
+    okText: '确认',
+    cancelText: '取消',
+    onOk() {
+      console.log('OK');
+    },
+    onCancel() {
+      console.log('Cancel');
+    },
+  });
+
+}
+function toEditRole() {
+  router.push({
+    pathname: '/staff/editRole',
+    query: {
+      a: 'b',
+    },
+  });
+}
+
+
+const dataSource = [
+  {
+    name: '置业顾问',
+    status: '1',//显示停用
+  },
+  {
+    name: '置业经理',
+    status: '1',//停用
+  },
+];
+
+const columns = [
+  // {
+  //   title: '商品图片',
+  //   dataIndex: 'img',
+  //   key: 'img',
+  //   align: 'center',
+
+  //   render: (text, record) => <img src={record.img} className={channels.touxiang} />,
+  // },
+  {
+    title: '角色名称',
+    dataIndex: 'name',
+    key: 'name',
+    align: 'center',
+    render: text => <a>{text}</a>,
+  },
+
+  {
+    title: '操作  ',
+    dataIndex: 'status',
+    key: 'status',
+    align: 'center',
+
+    render: () => <>
+      <span style={{ color: '#1990FF', marginRight: '20px' }} onClick={confirm}>停用
+      <Icon type="stop" className={styles.shoppingCart} style={{fontSize:14}}/>
+      </span>
+      <span style={{ color: '#FF925C' }} onClick={toEditRole}>编辑
+      <Icon type="form" className={styles.edit} />
+      </span>
+    </>,
+
+  },
+];
+
+
+const header = (props) => {
+
+
+
+
+  return (
+    <>
+      <Button type="danger" className={styles.addBtn} onClick={toEditRole}>新增</Button>
+      <div className={Styles.roletext}>
+
+        <Table dataSource={dataSource} columns={columns} />
+      </div>
+    </>
+
+  )
+}
+const WrappedHeader = Form.create({ name: 'header' })(header);
+
+export default WrappedHeader

src/pages/staff/list/StaffList.jsx

+
+import React, { useState, useEffect } from 'react';
+import { Form, Input, Button, Icon, Select, message, Table, Divider, Row, Col, Tag, Pagination, Modal, DatePicker } from 'antd';
+import { FormattedMessage } from 'umi-plugin-react/locale';
+import styles from '../../style/GoodsList.less';
+import router from 'umi/router';
+import { Card, Avatar } from 'antd';
+import request from '../../../utils/request'
+import Styles from './style.less';
+
+const { Meta } = Card;
+const { Option } = Select;
+const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
+//标签颜色
+const colors = {
+  金牌顾问: '#E34B59',
+  销售冠军: '#E8747E',
+  优选顾问: '#EEC37E',
+  人气顾问: '#FDDA9F',
+}
+// 提交事件
+function handleSubmit (e, props) {
+  e.preventDefault();
+  props.form.validateFields((err, values) => {
+    if (!err) {
+      console.log('提交数据: ', values)
+    }
+  });
+}
+// Change 事件
+function handleSelectChange (props) {
+  console.log(props)
+}
+
+// 分页
+function onChange (pageNumber) {
+  console.log('Page: ', pageNumber);
+}
+// 跳转到编辑商品
+function toEditStaff () {
+  router.push({
+    pathname: '/staff/editStaff',
+    // query: {
+    //   a: 'b',
+    // },
+  });
+}
+function confirm () {
+  Modal.confirm({
+    title: '确认停用该角色？',
+    okText: '确认',
+    cancelText: '取消',
+    onOk () {
+      console.log('OK');
+    },
+    onCancel () {
+      console.log('Cancel');
+    },
+  });
+
+}
+/**
+ *
+ *
+ * 
+ */
+
+// 假数据
+const tempData = [
+  {
+    name: '吴媛',
+    status: '1',// 启用
+    tel: '133 333 222',
+    avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
+    labels: ['金牌顾问', '销售冠军'],
+  },
+  {
+    name: '吴媛',
+    status: '1',// 启用
+    tel: '133 333 333',
+    avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
+    labels: ['金牌顾问', '销售冠军'],
+  },
+  {
+    name: '吴媛',
+    status: '1',// 启用
+    tel: '133 333 444',
+    avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
+    labels: ['金牌顾问', '销售冠军'],
+  },
+  {
+    name: '吴媛',
+    status: '1',// 启用
+    tel: '133 333 555',
+    avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
+    labels: ['金牌顾问', '销售冠军'],
+  },
+  {
+    name: '吴媛',
+    status: '0',
+    tel: '133 333 555',
+    avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
+    labels: ['金牌顾问', '销售冠军'],
+  },
+  {
+    name: '吴媛',
+    status: '1',// 启用
+    tel: '133 333 555',
+    avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
+    labels: ['金牌顾问'],
+  },
+
+
+
+]
+
+
+/**
+ *卡片
+ *
+ * @returns
+ */
+function CartBody (props) {
+  const { data } = props
+
+  return (
+
+    <Card className={Styles.card}>
+      <div>
+
+        <Avatar src={data.avatar} style={{ width: 94, height: 94 }} />
+        <span className={Styles.ediText} style={{ marginLeft: '20px' }} onClick={toEditStaff}>
+          编辑
+                <Icon type="form" style={{ color: '#C0C4CC', marginLeft: '10px' }} />
+        </span>
+        <span className={Styles.ediText} style={{ marginLeft: '50px' }} onClick={confirm}>
+          停用
+                <Icon type="close-circle" style={{ color: '#C0C4CC', marginLeft: '10px' }} />
+        </span>
+
+      </div>
+      <div>
+
+        <span>
+          {
+            data.labels.map((item, index) => {
+              const color = colors[item];
+              console.log(color, '------');
+              return <Tag className={Styles.cardTag}  color = {color}>{item}</Tag>
+            })
+          }
+        </span>
+        {/* {
+           data.label.map((item, index) => (
+              
+                <Tag className={Styles.cardTag}>{item}</Tag>
+          
+            ))
+            } */}
+
+        <p className={Styles.cardText} style={{ width: '300px' }}>
+          <span>姓名:{data.name}</span>
+
+          <span style={{ float: "right" }}>状态:{data.status === '1' ? '启用' : '停用'}</span>
+
+        </p>
+        <p className={Styles.cardText} style={{ width: '300px' }}>
+          <span>电话:{data.tel}</span>
+        </p>
+      </div>
+
+    </Card>
+  )
+}
+
+
+const header = (props) => {
+  const [data, setData] = useState({})
+  //   const [page, changePage] = useState({})
+
+  // useEffect(() => {
+  //   request({
+  //       url: '/api/admin/iBuildingDynamicList',
+  //       method: 'GET',
+  //       params: {pageNum: 1,pageSize: 10},
+  //   }).then((data) => {
+  //       console.log(data)
+  //       setData(data)
+  //   })
+  // })
+
+  // const getList = (e) => {
+  //   request({
+  //       url: '/api/xxx',
+  //       method: 'GET',
+  //       params: {},
+  //   }).then((data) => {
+  //       setData(data)
+  //   })
+  // }
+
+  const { getFieldDecorator } = props.form
+  return (
+
+    <>
+      <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
+        <Form.Item>
+          {getFieldDecorator('name')(
+            <Input
+              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+              placeholder="姓名"
+            />,
+          )}
+        </Form.Item>
+        <Form.Item>
+          {getFieldDecorator('tel')(
+            <Input
+              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+              placeholder="电话"
+            />,
+          )}
+        </Form.Item>
+
+        <Form.Item>
+
+          {getFieldDecorator('goodState')(
+            <Select style={{ width: '180px' }} placeholder="状态" onChange={handleSelectChange}>
+              <Option value="1">启用</Option>
+              <Option value="0">停用</Option>
+            </Select>,
+          )}
+        </Form.Item>
+        <Form.Item>
+          {getFieldDecorator('isMain')(
+            <Select style={{ width: '180px' }} placeholder="请选择" onChange={handleSelectChange}>
+              <Option value="1">职业顾问</Option>
+              <Option value="0">其他</Option>
+            </Select>,
+          )}
+        </Form.Item>
+        <Form.Item>
+          {getFieldDecorator('name')(
+            <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>
+        </Form.Item>
+      </Form>
+      <Button type="danger" className={styles.addBtn} onClick={toEditStaff}>新增</Button>
+
+      <Row style={{ padding: ' 0 10px' }}>
+        {
+          tempData.map((item, index) => (
+            <Col span={6}>
+              <CartBody data={item} />
+            </Col>
+          ))
+        }
+      </Row>
+
+      {/* <Table dataSource={data.records} columns={columns} /> */}
+      {/* 分页  */}
+      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+        <Pagination showQuickJumper defaultCurrent={1} total={500} onChange={onChange} />
+      </div>
+    </>
+  )
+}
+const WrappedHeader = Form.create({ name: 'header' })(header);
+
+export default WrappedHeader

src/pages/staff/list/channelList.less

+.searchBox {
+  font-size: 20px;
+  color: red;
+  display: flex;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .searchItem {
+    min-width: 20px;
+    margin-right: 20px;
+    text-align: left;
+    .anticon-down {
+      float: right !important;
+    }
+  }
+}
+.addBtn {
+  padding: 0 30px;
+  height: 36px;
+  background-color: #50be00;
+  color: #fff;
+  margin: 30px 0;
+}
+.touxiang {
+  width: 93px;
+  height: 93px;
+}
+.ant-table-column-title {
+  font-weight: 600;
+}
+
+.about {
+  padding: 0 30px;
+  height: 36px;
+  background-color: #00bfff;
+  color: #fff;
+  margin: 30px 0;
+}
+
+.selectName {
+  font-size: 17px;
+  padding: 0 10px;
+  height: 36px;
+  color: rgb(10, 10, 10);
+  margin: 30px 0;
+}
+
+.inpuit {
+  width:50%;
+}
+
+.inpuitTxt {
+  width:70%;
+}
+
+
+.formButton{
+  margin-left: 12% 
+}
+
+.divInput{
+  float: 'left'; 
+  width: 500
+}

src/pages/staff/list/editRole.jsx

+import React from 'react';
+import { Form, Input, Button, Icon, Select } from 'antd';
+import { FormattedMessage } from 'umi-plugin-react/locale';
+import styles from '../../style/GoodsList.less';
+
+
+
+/**
+ *
+ *
+ * @param {*} props
+ * @returns
+ */
+
+
+function header(props) {
+  const { getFieldDecorator } = props.form
+  return (
+
+    <>
+     <div>编辑角色</div>
+    </>
+  )
+}
+const WrappedHeader = Form.create({ name: 'header' })(header);
+
+export default WrappedHeader

src/pages/staff/list/editStaff.jsx

+import React, { useState } from 'react';
+
+import { Input, Menu, Dropdown, Button, Icon, message, Table, Tooltip, Tabs, Radio, Divider, Tag, Select, Form, Alert } from 'antd';
+import { FormattedMessage } from 'umi-plugin-react/locale';
+import styles from '../../style/GoodsList.less';
+import XForm, { FieldTypes } from '../../../components/XForm';
+import Wangedit from '../../../components/Wangedit/Wangedit'
+import channels from './channelList.less';
+
+import Tagss from '../components/Tagss.jsx';
+
+const { TextArea } = Input;
+
+
+/**
+ *
+ *
+ * @param {*} props
+ * @returns
+ */
+const Edit = (props) => {
+
+  const fields = [
+    {
+      label: '公司',
+      name: 'staffCompany',
+      type: FieldTypes.Text,
+      placeholder: '请输入公司名称',
+      value: ''
+    },
+    {
+      label: '部门',
+      name: 'staffDepartment',
+      type: FieldTypes.Text,
+      placeholder: '请输入部门',
+      value: ''
+    },
+    {
+      label: '职位',
+      name: 'staffPosition',
+      type: FieldTypes.Text,
+      placeholder: '请输入职位',
+      value: ''
+    },
+    {
+      label: '电话',
+      name: 'staffTel',
+      type: FieldTypes.Text,
+      placeholder: '请输入电话号码',
+      value: ''
+      // rules: [
+      //   { message: '请输入电话号码'}
+      // ]
+    },
+    {
+      label: '标签',
+      name: 'staffTag',
+      render: 
+      <Tagss/>
+     
+   
+    },
+    {
+      label: '地址',
+      name: 'staffAddress',
+      type: FieldTypes.Text,
+      placeholder: '请输入地址',
+      value: ''
+
+    },
+    {
+      label: '授权项目',
+      name: 'staffProject',
+      type: FieldTypes.Select,
+      placeholder: '请选择',
+      value: ''
+    },
+
+    // {
+    //   label: '授权项目',
+    //   name: 'staffProject',
+    //   type: FieldTypes.Text,
+    //   placeholder: '请选择'
+    // },
+
+    {
+      label: '图片',
+      name: 'staffImage',
+      type: FieldTypes.ImageUploader,
+      extra: '建议图片大小 640 * 640',
+      value: ''
+    },
+
+
+    {
+      label: '简介',
+      name: 'staffIntroduction',
+      render: <TextArea className={channels.inpuitTxt} ></TextArea>,
+      value: ''
+
+    },
+    {
+      label: '状态',
+      name: 'staffstate',
+      render: <Radio.Group>
+        <Radio.Button style={{background:'#f0f0f0'}} value="a">禁用</Radio.Button>
+        <Radio.Button style={{background:'#f0f0f0',color:'#ff7e48'}} value="b">启用</Radio.Button>
+      </Radio.Group>,
+      value: 'b'
+    },
+
+  ]
+
+  const handleSubmit = val => {
+    window.console.log('submit data --->', val)
+  }
+  return <XForm onSubmit={handleSubmit} fields={fields} offset={8}></XForm>
+
+
+
+
+}
+
+
+
+export default Edit
+
+
+
+
+
+
+
+
+

src/pages/staff/list/style.less

+.SubmitButton {
+  background: #3a91d5;
+  border-radius: 7px;
+  border: 0px;
+}
+
+.SelectFrom {
+  width: 180px;
+  background: #ffffff;
+  border-radius: 7px;
+  border: 1px solid #dbdbdb;
+}
+
+.addButton {
+  // background: #50be00;
+  border-radius: 4px;
+  border: 0px;
+  margin: 10px 0px;
+}
+
+.card {
+  width: 348px;
+  height: 244px;
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, 0.12);
+  border-radius: 12px;
+  margin-bottom: 40px;
+
+}
+
+.cardText {
+
+  height: 28px;
+  font-size: 20px;
+  font-weight: 400;
+  color: rgba(102, 102, 102, 1);
+  line-height: 28px;
+  margin-top: 10px;
+  margin-bottom: 0;
+
+}
+
+.cardItem {
+  font-size: 18px;
+  font-weight: 400;
+  color: #666;
+  line-height: 24px;
+  display: flex;
+  align-items: center;
+}
+
+.ediText {
+  width: 36px;
+  height: 25px;
+  font-size: 18px;
+
+  font-weight: 400;
+  color: rgba(255, 146, 92, 1);
+  line-height: 25px;
+
+}
+
+.cardTag {
+  width: 48px;
+  height: 18px;
+  font-size: 10px;
+  // background: #fdce22;
+  border-radius: 4px;
+  color: #ffffff;
+  line-height: 14px;
+  margin-top: 10px;
+  padding: 1px 3px;
+}
+
+.title {
+  display: inline-block;
+  width: 84px;
+  justify-content: space-between;
+  text-align: justify;
+  text-align-last: justify
+}
+
+
+.roletext {
+  font-size: 20px;
+
+  font-weight: 400;
+  color: rgba(51, 51, 51, 1);
+  line-height: 28px;
+}