kede-client/js/component/manageCenter/index/content.jsx

import React from 'react';
import { Spin, Button, Tabs, Table, message, Modal, Tooltip } from 'antd';
import ajax from 'jquery/src/ajax/xhr.js'
import $ from 'jquery/src/ajax';

import '../content.less';
import './content.less';
import LeftTab from './leftTab.jsx';
import FollowDetail from "../customer/NEW/intentionCustomer/followDetail";


const TabPane = Tabs.TabPane;

const MessageModal = React.createClass({
  getInitialState() {
    return {
      unreadData: [],
      unreadDataType: '0',
      dataSourceType: '1',
      unreadDataIndex: 0,
      newVisible: false,
      loading: false,
      categoryArr: [],
      pagination: {
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        pageSize: 10,
        onChange: function (page) {
          this.loadReaded(page);
        }.bind(this),
        showTotal: function (total) {
          return '共' + total + '条数据';
        }
      },
      UnreadPagination: {
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        pageSize: 9999999,
        onChange: function (page) {
          this.loadUnread(page);
        }.bind(this),
        showTotal: function (total) {
          return '共' + total + '条数据';
        }
      },
      columns: [
        {
          title: '类型',
          dataIndex: 'noticeTypeName',
          key: 'noticeTypeName',
          width: 120,
          render: (text, record) => {
            return <span style={{ color: record.noticeType == 59 && "red" }}>{text}</span>;
          },
        }, {
          title: '时间',
          dataIndex: 'createTimeFormattedDate',
          key: 'createTimeFormattedDate',
          width: 120
        }, {
          title: '内容',
          dataIndex: 'content',
          key: 'content',
          width: 1189,
          render: (text, record) => {
            return (
              <Tooltip placement="topLeft" title={text}>
                <div style={{
                  color: record.noticeType == 59 && "red",
                  width: 1189,
                  textOverflow: "ellipsis",
                  whiteSpace: "nowrap",
                  overflow: 'hidden',
                }}>
                  {text}
                </div>
              </Tooltip>
            )
          }
        },
        {
          title: "操作",
          dataIndex: "abc",
          key: "abc",
          width: 150,
          render: (text, record) => {
            let contractNo = '';
            if ((record.noticeType === 14 || record.noticeType === 40) && record.content.indexOf('合同编号-') !== -1) {
              let arr = record.content.split('合同编号-');
              contractNo = arr[1].match(/(\S*), 订单编号/)[1];
            }
            return (
              record.noticeType === 48 || record.noticeType === 49 ?
                <Button type="primary" onClick={() => {
                  this.category();
                  record.id = record.uid;
                  this.setState({
                    followData: record,
                    visitModul: true,
                  });
                }}>立即跟进</Button> :
                record.noticeType === 14 || record.noticeType === 40 ?
                  <Button disabled={!contractNo} type="primary" onClick={(e) => {
                    e.stopPropagation();
                    let input = document.getElementById("copyText1");
                    input.value = contractNo;
                    input.select();
                    document.execCommand("copy");
                    message.success('复制成功')
                  }}>
                    复制合同号
                  </Button> : null
            )
          }
        }
        //  {
        //     title: '公司',
        //     dataIndex: 'unitName',
        //     key: 'unitName',
        // }, {
        //     title: '业务员',
        //     dataIndex: 'principle',
        //     key: 'principle',
        // }
      ],
      columns1: [
        {
          title: '类型',
          dataIndex: 'noticeTypeName',
          key: 'noticeTypeName',
          width: 120,
          render: (text, record) => {
            return (
              <div style={{ color: record.noticeType == 59 && "red" }}>{text}</div>
            )
          }
        }, {
          title: '时间',
          dataIndex: 'createTimeFormattedDate',
          key: 'createTimeFormattedDate',
          width: 120
        }, {
          title: '内容',
          dataIndex: 'content',
          key: 'content',
          width: 610,
          render: (text, record) => {
            return (
              <Tooltip placement="topLeft" title={text}>
                <div
                  style={{
                    color: record.noticeType == 59 && "red",
                    width: 610,
                    textOverflow: "ellipsis",
                    whiteSpace: "nowrap",
                    overflow: 'hidden',
                  }}>
                  {text}
                </div>
              </Tooltip>
            )
          }
        },
        {
          title: "操作",
          dataIndex: "abc",
          key: "abc",
          width: 150,
          render: (text, record) => {
            let contractNo = '';
            if ((record.noticeType === 14 || record.noticeType === 40) && record.content.indexOf('合同编号-') !== -1) {
              let arr = record.content.split('合同编号-');
              contractNo = arr[1].match(/(\S*), 订单编号/)[1];
            }
            return (
              record.noticeType === 48 || record.noticeType === 49 ?
                <Button type="primary" onClick={() => {
                  this.category();
                  record.id = record.uid;
                  this.setState({
                    followData: record,
                    visitModul: true,
                  });
                }}>立即跟进</Button> :
                record.noticeType === 14 || record.noticeType === 40 ?
                  <Button disabled={!contractNo} type="primary" onClick={(e) => {
                    e.stopPropagation();
                    let input = document.getElementById("copyText1");
                    input.value = contractNo;
                    input.select();
                    document.execCommand("copy");
                    message.success('复制成功')
                  }}>
                    复制合同号
                  </Button> : null
            )
          }
        }
        //  {
        //     title: '公司',
        //     dataIndex: 'unitName',
        //     key: 'unitName',
        // }, {
        //     title: '业务员',
        //     dataIndex: 'principle',
        //     key: 'principle',
        // }
      ],
      data: []
    };
  },
  closeDesc() {
    this.setState({
      categoryArr: [],
      followData: '',
      visitModul: false
    }, () => {
      this.loadReaded(this.state.pagination.current);
    })
  },
  category() {
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/Varieties/getSuperList",
      data: {},
      success: function (data) {
        let thedata = data.data;
        let theArr = [];
        if (!thedata) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
          thedata = {};
        } else {
          thedata.map(function (item, index) {
            theArr.push({
              value: item.id,
              key: item.cname,
            });
          });
        }
        this.setState({
          categoryArr: theArr,
        });
      }.bind(this),
    });
  },
  // 获取部门数据
  selectSuperId() {
    $.ajax({
      method: "get",
      dataType: "json",
      url: globalConfig.context + "/api/admin/organization/getAllDep",
      data: {},
      success: function (data) {
        if (data.error && data.error.length === 0) {
          localStorage.setItem("departmentData", JSON.stringify(data.data))
        } else {
          // message.warning(data.error[0].message);
        }
      }.bind(this),
    }).always(

    );
  },
  //主菜单请求
  mainMenu() {
    this.setState({
      loading: true
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/selectNavList",
      data: {

      },
      success: function (data) {
        if (!data.data) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
            return;
          };
        };
        this.setState({
          menu: data.data
        });
      }.bind(this),
    }).always(function (data) {
      this.setState({
        loading: false
      })
    }.bind(this))
  },
  finId(text) {
    var data = this.state.menu || [];
    var rid = '';
    switch (text) {
      case 1:
        data.map(function (nub, index) {
          if (nub.url.indexOf('demand') != -1) {
            rid = nub.id;
          }
        });
        break;
      case 2:
        data.map(function (nub, index) {
          if (nub.url.indexOf('demand') != -1) {
            rid = nub.id;
          }
        });
        break;
      case 3:
        data.map(function (nub, index) {
          if (nub.url.indexOf('achievement') != -1) {
            rid = nub.id;
          }
        });
        break;
      case 4:
        data.map(function (nub, index) {
          if (nub.url.indexOf('achievement') != -1) {
            rid = nub.id;
          }
        });
        break;
      case 5:
        data.map(function (nub, index) {
          if (nub.url.indexOf('order') != -1) {
            rid = nub.id;
          }
        });
        break;
      case 6:
        data.map(function (nub, index) {
          if (nub.url.indexOf('order') != -1) {
            rid = nub.id;
          }
        });
        break;
      case 7:
        data.map(function (nub, index) {
          if (nub.url.indexOf('servicesManage') != -1) {
            rid = nub.id;
          }
        });
        break;
      default:
        rid = '';
    }
    return rid;
  },
  //跳转详情
  setStore(record) {
    localStorage.setItem('newData', {});
    let ids = record.noticeType;
    let rid = this.finId(ids) || "";
    var urls = '',
      dataJson = {};
    switch (ids) {
      case 1:
        urls = "/admin/demand.html?rid=" + rid + "#techDemandAudit";
        dataJson = {
          "id": record.uid,
          //"id":"3f93588b-332e-4353-bbfd-f1451b4b390c",
          "dataCategory": "0"
        };
        break;
      case 2:
        urls = "/admin/demand.html?rid=" + rid + "#techDemandPublish";
        dataJson = {
          "id": record.uid,
          //"id":"40f77e32-29fa-4a85-a6f0-7c4986bdc5e3",
          "dataCategory": '1'
        };
        break;
      case 3:
        urls = "/admin/achievement.html?rid=" + rid + "#techAchievementAudit";
        dataJson = {
          "id": record.uid,
          //"id":"f09d5c08-4a8b-48a6-9753-86006f1a53cb",
          "ownerType": '1'
        };
        break;
      case 4:
        urls = "/admin/achievement.html?rid=" + rid + "#techAchievementPublish";
        dataJson = {
          "id": record.uid,
          //"id":"953c9ef7-6cf6-4ab7-af89-c01521998fed",
          "ownerType": '1'
        };
        break;
      case 5:
        urls = "/admin/order.html?rid=" + rid + "#myService";
        dataJson = {
          "orderNo": record.orderNo
          //"orderNo":"175557414077480960"
        };
        break;
      case 6:
        urls = "/admin/order.html?rid=" + rid + "#mySettlement";
        dataJson = {
          "orderNo": record.orderNo
          //"orderNo":"180714111314051072"
        };
        break;
      case 7:
        urls = "/admin/servicesManage/projectOrder.html?rid=" + rid + "#projectManage";
        dataJson = {
          //"id":record.id,
          "id": "69e2d8ca984240a4b9c90daac69fe5e3",
          "buyerType": "1"
        };
        break;
      default:
        urls: '#';
        dataJson = {};
    };
    // console.log(rid);
    if (rid) {
      var data = dataJson;
      var newData = JSON.stringify(data);
      localStorage.setItem('newData', newData);
      window.location.href = globalConfig.context + urls;
    }
  },
  loadReaded(pageNo) {
    this.state.data = [];
    this.setState({
      loading: true
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/notice/readed",
      data: {
        pageNo: pageNo || 1,
        pageSize: this.state.pagination.pageSize,
        type: this.state.unreadDataType,
      }
    }).done((data) => {
      if (!data.data) {
        if (data.error && data.error.length) {
          message.warning(data.error[0].message);
          return;
        };
      };
      this.state.data = [];
      for (let i = 0; i < data.data.list.length; i++) {
        let thisdata = data.data.list[i];
        this.state.data.push({
          key: i + 1,
          id: thisdata.id,
          rid: thisdata.rid,
          uid: thisdata.uid,
          aid: thisdata.aid,
          noticeType: thisdata.noticeType,
          year: thisdata.year,
          noticeTypeName: thisdata.noticeTypeName,
          content: thisdata.content,
          createTime: thisdata.createTime,
          createTimeFormattedDate: thisdata.createTimeFormattedDate,
          principle: thisdata.principle,
          unitName: thisdata.unitName
        });
      };
      this.state.pagination.current = data.data.pageNo;
      this.state.pagination.total = data.data.totalCount;
      this.setState({
        dataSource: this.state.data,
        pagination: this.state.pagination,
      });
    }).always(function () {
      this.setState({
        loading: false
      });
    }.bind(this));
  },
  loadUnread(pageNo) {
    this.state.data = [];
    this.setState({
      loading: true
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/notice/unread",
      data: {

      }
    }).done((data) => {
      if (data.error && data.error.length) {
        message.warning(data.error[0].message);
        return;
      } else {
        let arr = data.data.filter(v => v.list.length > 0)
        if (arr.length) {
          this.setState({
            newVisible: true
          });
        }
        let index = data.data.findIndex(v => v.list.length > 0);
        if (index >= 0) {
          data.data[index].isRead = true;
          this.setState({
            unreadDataType: data.data[index]['id'] + '',
            unreadDataIndex: index,
          });
        } else {
          this.setState({
            unreadDataType: data.data[0]['id'] + '',
            unreadDataIndex: '0',
          });
        }
        this.setState({
          unreadData: data.data,
        });
      }
    }).always(function () {
      this.setState({
        loading: false,
      });
    }.bind(this));
  },
  componentWillMount() {
    // this.loadReaded();
    this.selectSuperId();
    this.loadUnread();
    this.mainMenu();

  },
  handleOk() {
    let arr = this.state.unreadData.filter(v => v.list.length > 0 && !v.isRead);
    if (arr.length > 0) {
      message.warning('还存在未读消息,请查看后再关闭当前页面!');
      return;
    } else {
      this.loadUnread();
      this.setState({
        newVisible: false
      });
    }
  },
  render() {
    return (
      <div className="set-content">
        <textarea id="copyText" style={{ opacity: 0 }} />
        <div className="set-title" style={{ marginBottom: 10 }}>
          <span style={{ fontWeight: 900, fontSize: 16 }}>信息中心</span>
        </div>
        <Spin spinning={this.state.loading} className="spin-box">
          <Tabs defaultActiveKey={this.state.unreadDataType} activeKey={this.state.unreadDataType} onChange={v => {
            let index = this.state.unreadData.findIndex(d => d.id == v);
            this.state.unreadData[index].isRead = true;
            this.setState({
              unreadDataIndex: index,
              unreadData: this.state.unreadData,
              unreadDataType: v
            }, () => {
              if (this.state.dataSourceType === '2') {
                this.loadReaded()
              }
            })
          }}>
            {
              this.state.unreadData.map((v) => (
                <Tabs.TabPane
                  key={v.id + ''}
                  tab={
                    <div
                      style={{ color: v.id == 7 && "red" }}
                    >
                      {v.list.length === 0 || v.isRead ? null :
                        <div
                          style={{
                            width: '8px',
                            height: "8px",
                            borderRadius: '8px',
                            background: '#f00',
                            position: 'absolute',
                            right: '5px',
                            top: '2px',
                          }} />
                      }
                      {v.name}
                    </div>
                  } />
              ))
            }
          </Tabs>
          <Tabs defaultActiveKey="1" type="card" tabPosition='left' value={this.state.dataSourceType} onChange={(v) => {
            this.setState({
              dataSourceType: v
            })
            if (v === '2') {
              this.loadReaded()
            }
          }}>
            <Tabs.TabPane tab={'未读'} key="1">
              <Table
                bordered
                columns={this.state.columns}
                dataSource={this.state.unreadData[this.state.unreadDataIndex] ? this.state.unreadData[this.state.unreadDataIndex].list : []}
                pagination={false}
              />
            </Tabs.TabPane>
            <Tabs.TabPane tab="已读" key="2">
              <Table
                bordered
                columns={this.state.columns}
                dataSource={this.state.dataSource}
                pagination={this.state.pagination}
              />
            </Tabs.TabPane>
          </Tabs>
        </Spin>
        <Modal
          maskClosable={false}
          style={{ position: "relative" }}
          title="消息提醒"
          visible={this.state.newVisible}
          width={1400}
          closable={false}
          footer={null}
        >
          <Spin spinning={this.state.loading} className="spin-box">
            <Tabs
              defaultActiveKey={this.state.unreadDataType}
              activeKey={this.state.unreadDataType}
              onChange={v => {
                let index = this.state.unreadData.findIndex(d => d.id == v);
                this.state.unreadData[index].isRead = true;
                this.setState({
                  unreadDataIndex: index,
                  unreadData: this.state.unreadData,
                  unreadDataType: v
                })
              }}>
              {
                this.state.unreadData.map((v) => (
                  <Tabs.TabPane
                    key={v.id + ''}
                    tab={<div style={{ color: v.id == 7 && "red" }}>
                      {v.list.length === 0 || v.isRead ? null : <div style={{ width: '8px', height: "8px", borderRadius: '8px', background: '#f00', position: 'absolute', right: '5px', top: '2px' }} />}
                      {v.name}
                    </div>
                    } />
                ))
              }
            </Tabs>
            <Table
              columns={this.state.columns1}
              dataSource={this.state.unreadData[this.state.unreadDataIndex] ? this.state.unreadData[this.state.unreadDataIndex].list : []}
              pagination={false}
              scroll={{ y: 600, x: 1000 }}
            />
          </Spin>
          <Button
            onClick={this.handleOk}
            type={"primary"}
            style={{
              position: "relative",
              left: "50%",
              transform: "translateX(-50%)",
              bottom: -10
            }}
          >
            我已阅读以上信息
          </Button>
        </Modal>
        <FollowDetail
          categoryArr={this.state.categoryArr}
          followData={this.state.followData}
          visitModul={this.state.visitModul}
          closeDesc={this.closeDesc}
        />
        <textarea id='copyText1' style={{ opacity: 0 }} />
      </div>
    );
  }
});

const Content = React.createClass({
  getInitialState() {
    return {
      loading: false,
      component: '<div></div>'
    };
  },
  getKey(key) {
    switch (key) {
      // 营销员统计
      case "statisticsYxy":
        let StatisticsYxy = require('./statistics/yxy').default;
        require.ensure([], () => {
          this.setState({
            component: <StatisticsYxy handlekey={this.getKey} />,
          });
        });
        break;
      // 咨询师统计
      case "statisticsZxs":
        let StatisticsZxs = require('./statistics/zxs').default;
        require.ensure([], () => {
          this.setState({
            component: <StatisticsZxs handlekey={this.getKey} />,
          });
        });
        break;
      // 财务统计
      case "statisticsCw":
        let StatisticsCw = require('./statistics/cw').default;
        require.ensure([], () => {
          this.setState({
            component: <StatisticsCw handlekey={this.getKey} />,
          });
        });
        break;
      case 'normal':
        require.ensure([], () => {
          this.setState({
            component: <MessageModal />,
          });
        });
        break;
      case "contacts":
        let Module = require('./contacts/index').default;
        require.ensure([], () => {
          this.setState({
            component: <Module />,
          });
        });
        break;
      default:
        require.ensure([], () => {
          let Module = require('../module').default;
          this.setState({
            component: <Module />
          });
        });
    }
    window.location.hash = key;
  },
  componentWillMount() {
    let array = window.adminData.shiroList.split(",");
    let key = array.includes("1") // 营销员
      ? "statisticsYxy" : array.includes("2") // 营销经理
        ? "statisticsYxy" : array.includes("8") // 咨询师
          ? "statisticsZxs" : array.includes("9") // 咨询师经理
            ? "statisticsZxs" : array.includes("5") // 财务专员
              ? "statisticsCw" : array.includes("6") // 财务经理
                ? "statisticsZxs" : "normal"
    if (window.location.hash) {
      this.getKey((window.location.hash).slice(1));
    } else {
      this.getKey(key);
    };
  },
  render() {
    return (
      <div className="manage-content">
        <LeftTab handlekey={this.getKey} />
        <div className="content-right">
          <Spin spinning={this.state.loading} className='spin-box'>
            <div className="index-content">
              {this.state.component}
            </div>
          </Spin>
        </div>
      </div>
    )
  }
});

export default Content;

// <div className="index-content">
//                             <div className="index-userdata clearfix">
//                                 <p className="acc-title">{this.state.number}</p>
//                                 <div className="userdata-img">
//                                     <img src={globalConfig.staticHost + "/upload" + this.state.personPortraitUrl} alt="" />
//                                 </div>
//                                 <div className="userdata-content">
//                                     {(() => {
//                                         switch (userData.lvl || this.state.userlvl) {
//                                             case '0':
//                                                 return <p className="userdata-lvl">等级：<span>LV1</span> 普通用户</p>;
//                                             case '1':
//                                                 return <p className="userdata-lvl">等级：<span>LV2</span> 已认证用户</p>;
//                                         };
//                                     })()}
//                                     <p>完善资料 {this.state.per}% ，<a href="./set.html">继续完善</a>，有助于提高您的资信</p>
//                                     <p className="userdata-relate" style={{ 'display': 'none' }}>
//                                         <Button className="relateqq"><img src={qq} alt="" /> QQ账号登录</Button>
//                                         <Button className="relateweibo"><img src={weibo} alt="" />微博账号登录</Button>
//                                         <Button className="relateweixin"><img src={weixin} alt="" />微信账号登录</Button>
//                                     </p>
//                                     <div className="userdata-follow">已有<a href="">{this.state.follow}</a>人关注你</div>
//                                 </div>
//                             </div>
//                             <div className="index-record">
//                                 <p className="acc-title">我的轨迹</p>
//                                 <ul className="record-list clearfix">
//                                     <li>技术成果：<a href="">{this.state.chengguo}</a>项</li>
//                                     <li>技术开发：<a href="">{this.state.kaifa}</a>项</li>
//                                     <li>科技服务：<a href="">{this.state.fuwu}</a>项</li>
//                                     <li>发布需求：<a href="">{this.state.xuqiu}</a>项</li>
//                                 </ul>
//                             </div>
//                             <div className="index-activity">
//                                 <Tabs defaultActiveKey="1" onChange={this.tabChange}>
//                                     <TabPane tab="活动" key="1">
//                                         <p className="acc-title">即将举办的活动</p>
//                                         <ul className="activity-list">
//                                             {
//                                                 this.state.activityArr.map(function (item, i) {
//                                                     return <li key={i}>
//                                                         <span className="list-type">[{item.type}]</span>
//                                                         <span className="list-title">{item.title}</span>
//                                                         <a href={item.link}>报名</a>
//                                                         <span className="list-time">{item.time}</span>
//                                                     </li>;
//                                                 })
//                                             }
//                                         </ul>
//                                     </TabPane>
//                                     <TabPane tab="其他" key="2">Content of Tab Pane 2</TabPane>
//                                 </Tabs>
//                             </div>
//                         </div>