zls

config/config.js

@@ -284,6 +284,36 @@ export default {
                 },
               ],
             },
+
+            {
+              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',
             },
@@ -347,7 +377,7 @@ export default {
 
   proxy: {
     '/api/': {
-      target: 'http://192.168.0.84:8080/',
+      target: 'http://192.168.0.11:8080/',
       changeOrigin: true,
       // pathRewrite: { '^/server': '' },
     },

src/pages/channel/addChannel.jsx

@@ -17,21 +17,21 @@ const header = props => {
   //   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) {
@@ -48,12 +48,12 @@ const header = props => {
   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', {
@@ -73,13 +73,13 @@ const header = props => {
           <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/staff/components/Tagss.jsx

@@ -0,0 +1,83 @@
+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

@@ -0,0 +1,24 @@
+.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

@@ -0,0 +1,101 @@
+
+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

@@ -0,0 +1,279 @@
+
+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

@@ -0,0 +1,64 @@
+.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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,135 @@
+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

@@ -0,0 +1,90 @@
+.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;
+}