estateagents-admin-manager/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