kede-client/js/component/manageCenter/topTab.jsx

import React from "react";
import {
  Row,
  Col,
  Icon,
  Modal,
  Button,
  Spin,
  Input,
  message,
  Badge,
  Table,
  Tabs,
  Tag,
} from "antd";
import { getProvince } from "../NewDicProvinceList.js";
import { ShowModal, getActives } from "../tools.js";
import "./topTab.less";
import $ from "jquery/src/ajax";
import logo from "../../../image/acc-logo.png";
import FollowDetail from "./customer/NEW/intentionCustomer/followDetail";
import AccountDetails from "./financialManage/account/accountDetails";

const TabPane = Tabs.TabPane;

const MessageModal = React.createClass({
  getInitialState() {
    return {
      unreadData: [],
      unreadDataType: "0",
      dataSourceType: "1",
      unreadDataIndex: 0,
      visible: false,
      loading: false,
      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: 10,
        onChange: function (page) {
          this.loadUnread(page);
        }.bind(this),
        showTotal: function (total) {
          return "共" + total + "条数据";
        },
      },
      categoryArr: [],
      columns: [
        {
          title: "类型",
          dataIndex: "noticeType",
          key: "noticeType",
          render: (text, record) => {
            return <span style={{ color: record.noticeType == 59 && "red" }}>{record.noticeTypeName}</span>;
          },
        },
        {
          title: "时间",
          dataIndex: "createTimeFormattedDate",
          key: "createTimeFormattedDate",
        },
        {
          title: "内容",
          dataIndex: "content",
          key: "content",
          render: (text, record) => {
            return <span style={{ color: record.noticeType == 59 && "red" }}>{text}</span>;
          },
        },
        {
          title: "操作",
          dataIndex: "abc",
          key: "abc",
          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("copyText");
                  input.value = contractNo;
                  input.select();
                  document.execCommand("copy");
                  message.success("复制成功");
                }}
              >
                复制合同号
              </Button>
            ) : null;
          },
        },
      ],
      data: [],
    };
  },
  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),
    });
  },
  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)
      );
  },
  componentWillReceiveProps(nextProps) {
    if (!this.state.visible && nextProps.showDesc) {
      this.loadReaded();
      this.loadUnread();
    }
    this.state.visible = nextProps.showDesc;
  },
  handleOk() {
    let arr = this.state.unreadData.filter(
      (v) => v.list.length > 0 && !v.isRead
    );
    if (arr.length > 0) {
      message.warning("还存在未读消息,请查看后再关闭当前页面!");
      return;
    } else {
      this.setState({
        visible: false,
      });
    }
    this.props.closeDesc(false, true);
  },
  handleCancel(e) {
    let arr = this.state.unreadData.filter(
      (v) => v.list.length > 0 && !v.isRead
    );
    if (arr.length > 0) {
      message.warning("还存在未读消息,请查看后再关闭当前页面!");
      return;
    } else {
      this.setState({
        visible: false,
      });
    }
    this.props.closeDesc(false, true);
  },
  closeDesc() {
    this.setState(
      {
        categoryArr: [],
        followData: "",
        visitModul: false,
      },
      () => {
        this.loadReaded(this.state.pagination.current);
      }
    );
  },
  render() {
    return (
      <div className="topTab-modal">
        <Spin spinning={this.state.loading} className="spin-box">
          <Modal
            maskClosable={false}
            title="信息中心"
            visible={this.state.visible}
            onOk={this.handleOk}
            onCancel={this.handleCancel}
            width="1200px"
            footer=""
          >
            <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>
            <textarea id="copyText" style={{ opacity: 0 }} />
          </Modal>
        </Spin>
        <FollowDetail
          categoryArr={this.state.categoryArr}
          followData={this.state.followData}
          visitModul={this.state.visitModul}
          closeDesc={this.closeDesc}
        />
      </div>
    );
  },
});

const UserModal = React.createClass({
  getInitialState() {
    return {
      visible: false,
      loading: false,
      locations: [],
    };
  },
  loadData() {
    this.setState({
      loading: true,
    });

    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/adminInfo",
      success: function (data) {
        if (!data.data) {
          if (data.error[0] && data.error[0]) {
            message.warning(data.error[0].message);
          }
          return;
        }
        this.setState({
          id: data.data.id,
          mobile: data.data.mobile,
          contactMobile: data.data.contactMobile,
          name: data.data.name,
          position: data.data.position,
          email: data.data.email,
          createTime: data.data.createTime,
          number: data.data.number,
          createTimeFormattedDate: data.data.createTimeFormattedDate,
          pwd: "",
          password: "",
        });
        this.loadLocations(data.data.id);
      }.bind(this),
    }).always(
      function (data) {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },
  loadLocations(id) {
    this.setState({
      loading: true,
    });
    $.ajax({
      url: globalConfig.context + "/api/admin/supervise/adminDetailLocation",
      cache: false,
      data: {
        id: id,
      },
    }).done((data) => {
      if (!data.data) {
        if (data.error && data.error.length) {
          message.warning(data.error[0].message);
          return;
        }
      }
      data.data.map((item) => {
        if (item.city) {
          item.city = item.city.split(",");
        }
      });
      this.setState({
        locations: data.data,
        loading: false,
      });
    });
  },
  componentWillReceiveProps(nextProps) {
    if (!this.state.visible && nextProps.showDesc) {
      this.loadData();
    }
    this.state.visible = nextProps.showDesc;
  },
  handleOk() {
    this.setState({
      loading: true,
    });
    if (this.state.contactMobile) {
      if (!/^1[1-9][0-9]\d{4,8}$/.test(this.state.contactMobile)) {
        message.warning("不是完整的11位手机号或者正确的手机号前七位");
        this.setState({
          loading: false,
        });
        return false;
      }
    }
    //      if(this.state.mobile.length>11){
    //      	message.warning("登录账号不能超过11位");
    //      	return false;
    //      }
    $.ajax({
      method: "post",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/updateAdminInfo",
      data: {
        id: this.state.id,
        mobile: this.state.mobile,
        contactMobile: this.state.contactMobile,
        name: this.state.name,
        email: this.state.email,
        province: this.state.province,
        password: this.state.password,
        pwd: this.state.pwd,
      },
    }).always(
      function (data) {
        if (data.error && data.error.length) {
          message.warning(data.error[0].message);
        } else {
          this.setState({
            loading: false,
          });
          message.success("保存成功！");
          this.props.closeDesc(false, true);
        }
      }.bind(this)
    );
  },
  handleCancel(e) {
    this.setState({
      visible: false,
    });
    this.props.closeDesc(false);
  },
  render() {
    return (
      <div className="topTab-modal">
        <Spin spinning={this.state.loading} className="spin-box">
          <Modal
            maskClosable={false}
            title="用户设置"
            visible={this.state.visible}
            onOk={this.handleOk}
            onCancel={this.handleCancel}
            width="380px"
          >
            <ul className="modal-content">
              <li>
                <span className="modal-text">名字</span>
                <Input
                  value={this.state.name}
                  onChange={(e) => {
                    this.state.name = e.target.value;
                    this.setState({ name: this.state.name });
                  }}
                />
              </li>
              <li>
                <span className="modal-text">职位</span>
                <span>{this.state.position}</span>
              </li>
              <li>
                <span className="modal-text">登录账号</span>
                <span>{this.state.mobile}</span>
              </li>
              <li>
                <span className="modal-text">联系方式</span>
                <Input
                  value={this.state.contactMobile}
                  onChange={(e) => {
                    this.state.contactMobile = e.target.value;
                    this.setState({ contactMobile: this.state.contactMobile });
                  }}
                />
              </li>
              <li>
                <span className="modal-text">省份</span>
                <div style={{ display: "inline-block", width: "78%" }}>
                  {this.state.locations.map((item, i) => {
                    return (
                      <Tag key={i}>
                        {getProvince(item.province) +
                          " " +
                          (item.city
                            ? item.city.map((c) => {
                              return getProvince(c) + " ";
                            })
                            : "")}
                      </Tag>
                    );
                  })}
                </div>
              </li>
              <li>
                <span className="modal-text">邮箱</span>
                <Input
                  value={this.state.email}
                  onChange={(e) => {
                    this.state.email = e.target.value;
                    this.setState({ email: this.state.email });
                  }}
                />
              </li>
              <li>
                <span className="modal-text">原密码</span>
                <Input
                  value={this.state.pwd}
                  type="password"
                  onChange={(e) => {
                    this.state.pwd = e.target.value;
                    this.setState({ pwd: this.state.pwd });
                  }}
                />
              </li>
              <li>
                <span className="modal-text">密码</span>
                <Input
                  value={this.state.password}
                  type="password"
                  onChange={(e) => {
                    this.state.password = e.target.value;
                    this.setState({ password: this.state.password });
                  }}
                />
              </li>
            </ul>
          </Modal>
        </Spin>
      </div>
    );
  },
});

const TopTab = React.createClass({
  getInitialState() {
    return {
      username: "请登录!",
      defaultActiveKey: "-1",
      htmlMenus: [],
      count: 0,
      visible: false,
    };
  },
  logOut() {
    let theActive = this.props.active;
    $.ajax({
      method: "get",
      dataType: "json",
      url: globalConfig.context + "/login",
    }).done(function (data) {
      window.location.href = globalConfig.context + "/admin/login.html";
    });
  },
  componentWillMount() {
    if (this.props.active) {
      this.loadData();
    }
    this.mainMenu();
  },
  //主菜单请求
  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;
          }
        }
        let menu = data.data;
        var htmlMenu = [];
        let index = menu.findIndex(
          (v) => getActives(v.name) === this.props.active
        );
        this.setState({
          htmlMenus: menu,
          defaultActiveKey: index + "",
        });
      }.bind(this),
    }).always(
      function (data) {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },
  loadData() {
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/notice/unreadCount",
      success: function (data) {
        if (!data.data) {
          if (data.error[0] && data.error[0]) {
            message.warning(data.error[0].message);
            return;
          }
        }
        this.setState({
          badge: data.data,
        });
      }.bind(this),
    }).always(
      function (data) {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },
  closeUserModal(e, s) {
    this.state.userModalShow = e;
    if (s) {
      this.loadData();
    }
  },
  closeMessageModal(e, s) {
    this.state.messageModalShow = e;
    if (s) {
      this.loadData();
    }
  },

  //定时任务
  componentDidMount() {
    clearInterval(this.timerID)
    this.timerID = setInterval(
      () => this.tick(),
      5000
    );
  },

  componentWillUnmount() {
    clearInterval(this.timerID)
  },

  // 解决同时登录多个账号没有刷新页面操作的问题
  tick() {
    if (adminData.uid != localStorage.getItem("userId")) {
      Modal.error({
        title: '登录失效',
        content: (
          <div>
            <p>同一浏览器不能同时登录多个账号，</p>
            <p>如需登录多个账号请用不同浏览器打开登录！！！</p>
          </div>
        ),
        okText: '重新登录',
        onOk() {
          window.location.href = globalConfig.context + "/admin/login.html";
        },
      });
      clearInterval(this.timerID)
    }
  },


  onAccount() {
    if (!this.state.checkNo) {
      message.warning("报销单编号不能为空！")
      return
    }

    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/expenseAccount/selectByCheckNo",
      data: { checkNo: this.state.checkNo, },
      success: function (data) {
        ShowModal(this);
        if (data.error.length === 0) {
          if (!data.data) {
            message.warning("您输入的报销单编号有误，请重新输入！")
          } else {
            this.setState({
              detailsPup: true,
              visible: false,
              id: data.data.id,
            })
          }
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this),
    }).always(
      function () {

      }.bind(this)
    );
  },


  render() {
    return (
      <div className="account-top">
        <div className="acc-top-user">
          <span className="acc-top-user-name">
            欢迎您 ,{" "}
            {adminData.name || adminData.mobile ? (
              <a
                onClick={() => {
                  // if (window.showPermissionList && window.showRoleList) {
                  //     return
                  // };
                  this.setState({ userModalShow: true });
                }}
              >
                {" "}
                {adminData.name || adminData.mobile}{" "}
              </a>
            ) : (
              <a onClick={this.logOut}>{this.state.username}</a>
            )}{" "}
            <a onClick={this.logOut}>[ 退出 ]</a>
          </span>
          <span className="acc-top-user-toindex">
            {/* <a href={jumpUrl || "" + "/portal/index.html"}>返回首页</a> */}
            <span
              className="printbt"
              onClick={() => { this.setState({ checkNo: undefined, visible: true }) }}
            >报销清单打印</span>
            <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
            <a href={globalConfig.context + "/RD/admin/login"}>前往RD库</a>
          </span>
          {this.props.active ? (
            <a
              onClick={() => {
                this.setState({ messageModalShow: true });
              }}
              className="user-badge"
            >
              <Icon type="mail" />
              {/* {!window.showSystem && this.state.badge ? (
                <Badge status="processing" />
              ) : null} */}
            </a>
          ) : null}
        </div>
        <div className="acc-index">
          <div className="acc-index-imgbox">
            <img src={logo} alt="" />
          </div>
          <span>
            <a href={globalConfig.context + "/admin/index.html"}>
              管理中心首页
            </a>
          </span>
        </div>
        <div className="acc-top-tab">
          {this.state.htmlMenus.length > 0 ? (
            <Tabs
              defaultActiveKey={this.state.defaultActiveKey}
              activeKey={this.state.defaultActiveKey}
              tabPosition="top"
              onTabClick={(v) => {
                window.location.href = globalConfig.context + this.state.htmlMenus[parseInt(v)].url + '?rid=' + this.state.htmlMenus[parseInt(v)].id;
              }}
            // onChange={v=>{
            //     window.location.href=globalConfig.context + this.state.htmlMenus[parseInt(v)].url+'?rid='+this.state.htmlMenus[parseInt(v)].id;
            // }}
            >
              {this.state.htmlMenus.map((v, k) => (
                <TabPane key={k} tab={v.name} />
              ))}
            </Tabs>
          ) : null}
        </div>
        <UserModal
          showDesc={this.state.userModalShow}
          closeDesc={this.closeUserModal}
        />
        <MessageModal
          showDesc={this.state.messageModalShow}
          closeDesc={this.closeMessageModal}
        />
        {
          this.state.visible &&
          <Modal
            title="报销清单查询"
            visible={this.state.visible}
            onOk={() => { this.onAccount() }}
            onCancel={() => { this.setState({ visible: false, }) }}
            okText="确认"
            cancelText="取消"
            maskClosable={false}
          >
            <div style={{ width: "60%", margin: "40px auto" }}>
              <Input
                placeholder="请输入报销单编号"
                value={this.state.checkNo}
                onChange={(e) => {
                  this.setState({ checkNo: e.target.value });
                }}
              />
            </div>
          </Modal>
        }
        {
          // 报销信息详情
          this.state.detailsPup &&
          <AccountDetails
            isSelect={true}
            showDetails={this.state.detailsPup}
            id={this.state.id}
            onCancel={() => { this.setState({ detailsPup: false }) }}
          />
        }

      </div >
    );
  },
});

export default TopTab;