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

/*
 * Author: 黎永顺
 * name: 人员信息报送
 * Description:
 * Date: 2023/7/24
 */
import React, { Component } from "react";
import { WeaInputSearch, WeaLocaleProvider, WeaTable, WeaTop } from "ecCom";
import { Col, Dropdown, Menu, message, Row } from "antd";
import LogDialog from "../../components/logViewModal";
import { taxAgentDeclareList } from "../../apis/declare";
import TipLabel from "../../components/TipLabel";
import "./index.less";


const { getLabel } = WeaLocaleProvider;

class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dataSource: [], loading: false, taxAgentName: "",
      pageInfo: { current: 1, pageSize: 10, total: 0 },
      logDialogVisible: false, filterConditions: "[]"
    };
  }

  componentDidMount() {
    this.taxAgentDeclareList();
  }

  taxAgentDeclareList = () => {
    const { pageInfo, taxAgentName } = this.state;
    const payload = { ...pageInfo, taxAgentName };
    this.setState({ loading: true });
    taxAgentDeclareList(payload).then(({ status, data, errormsg }) => {
      this.setState({ loading: false });
      if (status) {
        const { pageNum: current, pageSize, total, list: dataSource } = data;
        this.setState({
          pageInfo: { ...pageInfo, current, pageSize, total },
          dataSource
        });
      } else {
        message.error(errormsg);
      }
    }).catch(() => this.setState({ loading: false }));
  };
  onDropMenuClick = (key, targetid = "") => {
    switch (key) {
      case "log":
        this.setState({
          logDialogVisible: true,
          filterConditions: targetid ? `[{\"connectCondition\":\"AND\",\"columIndex\":\"targetid\",\"type\":\"=\",\"value\":\"${targetid}\"}]` : "[]"
        });
        break;
      default:
        break;
    }
  };

  render() {
    const { pageInfo, taxAgentName, dataSource, logDialogVisible, filterConditions } = this.state;
    const tipList = [
      getLabel(544290, "1、点击查看详情，管理各个个税扣缴义务人的人员报送信息，如购买了在线报送服务，可在线报送，如未购买在线报送服务，也可导出数据线下报送。")
    ];
    return (
      <WeaTop
        title={getLabel(544289, "人员信息报送")} iconBgcolor="#F14A2D"
        icon={<i className="icon-coms-fa"/>} showDropIcon onDropMenuClick={this.onDropMenuClick}
        dropMenuDatas={[{
          key: "log", icon: <i className="iconfont icon-caozuorizhi32"/>,
          content: getLabel(545781, "操作日志")
        }]} buttons={[
        <WeaInputSearch placeholder={getLabel(543634, "请输入个税扣缴义务人名称")}
                        value={taxAgentName} onChange={val => this.setState({ taxAgentName: val })}
                        onSearch={this.taxAgentDeclareList}
        />
      ]}
      >
        <div style={{ height: "100%", background: "#f6f6f6", padding: 16 }}>
          <Row gutter={16}>
            <Col span={16}>
              <WeaTable
                className="declareTable"
                columns={[
                  {
                    title: getLabel(537996, "个税扣缴义务人"),
                    dataIndex: "taxAgentName"
                  },
                  {
                    title: getLabel(30585, "操作"),
                    dataIndex: "operate",
                    width: 260,
                    render: (_, record) => (<React.Fragment>
                      <a
                        href={`${window.ecologyContentPath || ""}/spa/hrmSalary/static/index.html#/main/hrmSalary/employeedeclareDetail?id=${record.id}&taxName=${encodeURIComponent(record.taxAgentName)}`}
                        target="_blank">{getLabel(83110, "查看详情")}</a>
                      <Dropdown overlay={
                        <Menu>
                          <Menu.Item>
                            <a href="javascript:void(0)"
                               onClick={() => this.onDropMenuClick("log", record.id)}>{getLabel(545781, "操作日志")}</a>
                          </Menu.Item>
                        </Menu>
                      }>
                        <a href="javascript:void(0)" style={{ marginLeft: 10 }}><i className="icon-coms-more"/></a>
                      </Dropdown>
                    </React.Fragment>)
                  }
                ]}
                dataSource={dataSource}
                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.taxAgentDeclareList());
                  },
                  onChange: current => {
                    this.setState({
                      pageInfo: { ...pageInfo, current }
                    }, () => this.taxAgentDeclareList());
                  }
                }}
              />
            </Col>
            <Col span={8}><TipLabel tipList={tipList}/></Col>
          </Row>
        </div>
        {/*操作日志*/}
        <LogDialog visible={logDialogVisible} logFunction="empdeclare" filterConditions={filterConditions}
                   onCancel={() => this.setState({ logDialogVisible: false })}/>
      </WeaTop>
    );
  }
}

export default Index;