salary-management-front/pc4mobx/hrmSalary/pages/roleManagement/index.js

/*
  *  角色管理
  *
  * @Author:    黎永顺
  * @Date:      2024/9/6
  * @Wechat:
  * @Email:     971387674@qq.com
  * @description:
*/
import React, { Component } from "react";
import { WeaInputSearch, WeaLocaleProvider, WeaTable, WeaTop } from "ecCom";
import { Button, message, Modal } from "antd";
import * as API from "../../apis/taxAgent";
import "./index.less";
import AddRoleDialog from "./components/addRoleDialog";
import RoleDetailSetDialog from "./components/roleDetailSetDialog";

const getLabel = WeaLocaleProvider.getLabel;

class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      query: { name: "" }, dataSource: [], columns: [], pageInfo: { current: 1, pageSize: 10, total: 0 },
      loading: false, selectedRowKeys: [], addRoleDialog: { taxAgentId: "", visible: false }
    };
  }

  componentDidMount() {
    this.getRoleList();
  }

  getRoleList = () => {
    const { query, pageInfo } = this.state;
    const paylaod = { ...pageInfo, ...query };
    this.setState({ loading: true });
    API.getRoleList(paylaod).then(({ status, data }) => {
      this.setState({ loading: false });
      if (status) {
        const { list: dataSource, columns, pageNum: current, pageSize, total } = data;
        this.setState({
          dataSource, pageInfo: { ...pageInfo, current, pageSize, total },
          columns: [...columns, {
            title: getLabel(111, "操作"), width: 120, dataIndex: "action",
            render: (__, record) => (
              <a href="javascript:void(0)" onClick={() => this.deleteAuthRole([record.id])}>{getLabel(111, "删除")}</a>)
          }]
        });
      }
    });
  };
  deleteAuthRole = (payload) => {
    Modal.confirm({
      title: getLabel(111, "信息确认"),
      content: getLabel(111, "确认要删除吗?"),
      onOk: () => {
        API.deleteAuthRole(payload).then(({ status, errormsg }) => {
          if (status) {
            message.success(getLabel(111, "操作成功！"));
            this.setState({ selectedRowKeys: [] }, () => this.getRoleList());
          } else {
            message.error(errormsg);
          }
        });
      }
    });
  };

  render() {
    const {
      query, dataSource, columns, pageInfo, loading, selectedRowKeys, addRoleDialog, roleSetDialog
    } = this.state;
    const buttons = [
      <Button type="primary" onClick={() => this.setState({
        addRoleDialog: { taxAgentId: "", visible: true }
      })}>{getLabel(111, "新建")}</Button>,
      <Button type="ghost" disabled={_.isEmpty(selectedRowKeys)}
              onClick={() => this.deleteAuthRole(selectedRowKeys)}>{getLabel(111, "批量删除")}</Button>,
      <WeaInputSearch value={query.name} onChange={name => this.setState({ query: { name } })}
                      onSearch={() => this.setState({ pageInfo: { ...pageInfo, current: 1 } },
                        () => this.getRoleList())}/>
    ];
    const pagination = {
      ...pageInfo,
      showTotal: total => `${getLabel(18609, "共")} ${total} ${getLabel(18256, "条")}`,
      showQuickJumper: true,
      showSizeChanger: true,
      pageSizeOptions: ["10", "20", "50", "100"],
      onShowSizeChange: (current, pageSize) => {
        this.setState({ pageInfo: { ...pageInfo, current, pageSize } }, () => this.getRoleList());
      },
      onChange: current => {
        this.setState({ pageInfo: { ...pageInfo, current } }, () => this.getRoleList());
      }
    };
    const rowSelection = {
      selectedRowKeys, onChange: (selectedRowKeys) => this.setState({ selectedRowKeys })
    };
    return (
      <WeaTop
        title={getLabel(111, "角色管理")} icon={<i className="icon-coms-Flow-setting"/>}
        iconBgcolor="#F14A2D" buttons={buttons} className="rolemanagement-index"
      >
        <div className="rolemanagement-content">
          <WeaTable dataSource={dataSource} columns={columns} pagination={pagination} loading={loading}
                    rowSelection={rowSelection} scroll={{ y: `calc(100vh - 173px)` }}/>
          {/*添加角色*/}
          <AddRoleDialog {...addRoleDialog} onSearch={this.getRoleList}
                         showRoleSetDialog={this.showRoleSetDialog}
                         onCancel={callback => this.setState({
                           addRoleDialog: { ...addRoleDialog, visible: false }
                         }, () => callback && callback())}/>
          {/*角色详情设置*/}
          <RoleDetailSetDialog {...roleSetDialog} onSearch={this.getRoleList}
                               onCancel={callback => this.setState({
                                 roleSetDialog: { ...roleSetDialog, visible: false }
                               }, () => callback && callback())}/>
        </div>
      </WeaTop>
    );
  }
}

export default Index;