trunk/pc4mobx/organization/components/deptment/index.js

/*
 * Author: 黎永顺
 * Description: 部门管理
 * Date: 2022-05-20 08:54:59
 * LastEditTime: 2022-05-20 09:34:30
 */
import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { i18n } from "../../public/i18n";
import { Row, Col, Spin, Modal, Button, message, Switch } from "antd";
import {
  WeaTop,
  WeaTab,
  WeaFormItem,
  WeaRightMenu,
  WeaLeftRightLayout,
  WeaTable,
} from "ecCom";

const data = [
  {
    key: 1,
    name: "a",
    age: 32,
    address: "我是a",
    children: [
      {
        key: 11,
        name: "aa",
        age: 33,
        address: "我是aa",
      },
      {
        key: 12,
        name: "ab",
        age: 33,
        address: "我是ab",
        children: [
          {
            key: 121,
            name: "aba",
            age: 33,
            address: "我是aba",
          },
        ],
      },
      {
        key: 13,
        name: "ac",
        age: 33,
        address: "我是ac",
        children: [
          {
            key: 131,
            name: "aca",
            age: 33,
            address: "我是aca",
            children: [
              {
                key: 1311,
                name: "acaa",
                age: 33,
                address: "我是acaa",
              },
              {
                key: 1312,
                name: "acab",
                age: 33,
                address: "我是acab",
              },
            ],
          },
        ],
      },
    ],
  },
  {
    key: 2,
    name: "b",
    age: 32,
    address: "我是b",
  },
];

@observer
class DepartmentManage extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  /**
   * name: 右击菜单列表
   * return {*}
   */
  getDropMenuDatas = () => {
    let menus = [];
    [].map((item, index) => {
      let obj = {
        key: item.menuFun,
        icon: <i className={`${item.menuIcon}`} />,
        content: item.menuName,
      };
      if (
        item.menuFun == "collection" ||
        item.menuFun == "help" ||
        item.menuFun == "pageAddress"
      ) {
        obj.disabled = true;
      }
      menus.push(obj);
    });
    return menus;
  };
  /**
   * name: 右键菜单点击的回调
   * param undefined
   * return {*}
   */
  handleMenuClick = (key) => {
    // const { officeManageStore } = this.props;
    // const { isPanelShow } = officeManageStore;
    // isPanelShow && officeManageStore.setPanelStatus(false);
    switch (key) {
      case "new":
      default:
        break;
    }
  };
  /**
   * name: 顶部操作按钮
   * return {*}
   */
  getTopMenuBtns = () => {
    let btns = [
      <Button type="primary">新增</Button>,
      <Button type="primary">复制</Button>,
      <Button type="primary">批量删除</Button>,
    ];
    // [].map((item, i) => {
    //   if (item.menuFun !== "batchDelete") {
    //     btns.push(<Button type="primary">新增</Button>);
    //     btns.push(<Button type="primary">复制</Button>);
    //   } else {
    //     btns.push(
    //       <Button type="primary" disabled={true}>
    //         批量删除
    //       </Button>
    //     );
    //   }
    // });
    return btns;
  };
  /**
   * name: 搜索面板底部按钮组
   * return {*}
   */
  getTabBtn = () => {
    const btn = [
      <Button
        ecId={`${(this && this.props && this.props.ecId) || ""}_Button@5b3aeb`}
        type="primary">
        {i18n.button.search()}
      </Button>,
      <Button
        ecId={`${(this && this.props && this.props.ecId) || ""}_Button@8acd45`}>
        {i18n.button.reset()}
      </Button>,
      <Button
        ecId={`${(this && this.props && this.props.ecId) || ""}_Button@06e592`}>
        {i18n.button.cancel()}
      </Button>,
    ];

    return btn;
  };
  /**
   * name: 表格内复选框设置
   * return {*}
   */
  rowSelection = () => {
    return {
      onChange(selectedRowKeys, selectedRows) {
        console.log(
          `selectedRowKeys: ${selectedRowKeys}`,
          "selectedRows: ",
          selectedRows
        );
      },
      onSelect(record, selected, selectedRows) {
        console.log(record, selected, selectedRows);
      },
      onSelectAll(selected, selectedRows, changeRows) {
        console.log(selected, selectedRows, changeRows);
      },
    };
  };

  render() {
    const columns = [
      {
        title: "姓名",
        dataIndex: "name",
        key: "name",
        width: "40%",
      },
      {
        title: "年龄",
        dataIndex: "age",
        key: "age",
        width: "30%",
      },
      {
        title: "住址",
        dataIndex: "address",
        key: "address",
        width: "30%",
      },
    ];
    return (
      <div className="depart-wapper">
        <WeaRightMenu
          ecId={`${
            (this && this.props && this.props.ecId) || ""
          }_WeaRightMenu@a3ba4d`}
          datas={this.getDropMenuDatas()}
          onClick={(key) => this.handleMenuClick(key)}>
          <WeaTop
            ecId={`${
              (this && this.props && this.props.ecId) || ""
            }_WeaTop@7547ff`}
            title={i18n.label.departName()}
            icon={<i className="icon-coms-hrm" />}
            iconBgcolor="#217346"
            loading={true}
            buttons={this.getTopMenuBtns()}
            showDropIcon={true}
            dropMenuDatas={this.getDropMenuDatas()}
            onDropMenuClick={(e) => this.handleMenuClick(e)}>
            <WeaTab
              ecId={`${
                (this && this.props && this.props.ecId) || ""
              }_WeaTab@daa881`}
              searchType={["base", "advanced"]}
              showSearchAd={false} //标准高级搜索显隐
              searchsBaseValue={""} //普通 base input 搜索值外部受控
              setShowSearchAd={(bool) => console.log(bool)}
              hideSearchAd={() => console.log(false)} //隐藏高级搜索回调
              searchsAd={<div></div>} //标准高级搜索条目组
              advanceHeight={Math.ceil(2 / 2) * 52 + 20} //高级搜索面板的高度
              hasMask={false}
              buttonsAd={this.getTabBtn()}
              onSearch={() => console.log()} //点搜索按钮时的回调
              onSearchChange={(val) => console.log(val)} //在搜索框中输入的文字改变时的回调
            />
            <WeaTable
              columns={columns}
              rowSelection={this.rowSelection}
              dataSource={data}
            />
          </WeaTop>
        </WeaRightMenu>
      </div>
    );
  }
}

export default DepartmentManage;