feature/2.15.1.2407.01-薪资项目以及字段管理页面改造

pc4mobx/hrmSalary/pages/salaryItem/index.js

@@ -1,17 +1,16 @@
 import React from "react";
 import { inject, observer } from "mobx-react";
 import { Button, Dropdown, Menu, message, Modal, Switch } from "antd";
-import { WeaInputSearch, WeaLocaleProvider, WeaNewScroll, WeaSlideModal, WeaTop } from "ecCom";
-import { renderLoading, toDecimal_n } from "../../util";
-import CustomTab from "../../components/customTab";
+import { WeaInputSearch, WeaLocaleProvider, WeaSlideModal, WeaTop } from "ecCom";
+import SalaryItemsTable from "./salaryItemsTable";
+import { toDecimal_n } from "../../util";
 import SystemSalaryItemModal from "./systemSalaryItemModal";
-import { columns } from "./columns";
 import SlideModalTitle from "../../components/slideModalTitle";
 import CustomSalaryItemSlide from "./customSalaryItemSlide";
-import CustomPaginationTable from "../../components/customPaginationTable";
 import SyncToSalaryAccountSetDialog from "./syncToSalaryAccountSetDialog";
 import "../socialSecurityBenefits/programme/index.less";
 import LogDialog from "../../components/logViewModal";
+import "./index.less";
 
 const { getLabel } = WeaLocaleProvider;
 @inject("salaryItemStore", "taxAgentStore", "salaryFileStore")
@@ -20,6 +19,9 @@ export default class SalaryItem extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
+      name: "", isQuery: false,
+
+
       value: "",
       selectedKey: "0",
       editable: false,
@@ -31,43 +33,25 @@ export default class SalaryItem extends React.Component {
       syncSalarySetDialog: { visible: false, title: "", id: "" },
       logDialogVisible: false, filterConditions: "[]"
     };
-    columns.map(item => {
-      if (item.dataIndex == "refere") {
-        item.render = () => {
-          return (
-            <Switch/>
-          );
-        };
-      } else if (item.dataIndex == "cz") {
-        item.render = () => {
-          return (<div>
-            <a style={{ marginRight: "10px" }}>编辑</a>
-            <a style={{ marginRight: "10px" }}>删除</a>
-            {/* <a>操作日志</a> */}
-          </div>);
-        };
-
-      }
-    });
     this.record = {};
   }
 
 
   componentWillMount() { // 初始化渲染页面
-    const { salaryItemStore: { getTableDatas }, salaryFileStore, taxAgentStore } = this.props;
-    const { commonEnumList } = salaryFileStore;
-    const { fetchTaxAgentOption } = taxAgentStore;
-    fetchTaxAgentOption();
-    commonEnumList("user", { enumClass: "com.engine.salary.enums.sicategory.SharedTypeEnum" });
-    getTableDatas({}).then(res => {
-      this.setState({
-        searchParams: {
-          ...this.state.searchParams,
-          current: res.pageNum,
-          total: res.total
-        }
-      });
-    });
+    // const { salaryItemStore: { getTableDatas }, salaryFileStore, taxAgentStore } = this.props;
+    // const { commonEnumList } = salaryFileStore;
+    // const { fetchTaxAgentOption } = taxAgentStore;
+    // fetchTaxAgentOption();
+    // commonEnumList("user", { enumClass: "com.engine.salary.enums.sicategory.SharedTypeEnum" });
+    // getTableDatas({}).then(res => {
+    //   this.setState({
+    //     searchParams: {
+    //       ...this.state.searchParams,
+    //       current: res.pageNum,
+    //       total: res.total
+    //     }
+    //   });
+    // });
   }
 
   onEditItem = (record, isedit) => {
@@ -225,7 +209,7 @@ export default class SalaryItem extends React.Component {
       taxAgentStore: { showOperateBtn, showSalaryItemBtn, taxAgentOption }
     } = this.props;
     const { userStatusList } = salaryFileStore;
-    const { selectedRowKeys, logDialogVisible, filterConditions } = this.state;
+    const { selectedRowKeys, logDialogVisible, filterConditions, name, isQuery } = this.state;
     const { loading, deleteItemRequest, getTableDatas } = salaryItemStore;
     const {
       tableDataSource,
@@ -236,9 +220,6 @@ export default class SalaryItem extends React.Component {
       setEditSlideVisible,
       request
     } = salaryItemStore;
-    if (this.getColumns().length === 2) { // 无权限处理
-      return renderLoading();
-    }
 
     const handleMenuClick = (e) => {
       const { salaryItemStore: { setEditSlideVisible, initRequest } } = this.props;
@@ -257,51 +238,16 @@ export default class SalaryItem extends React.Component {
       </Menu>
     );
 
-    const renderRightOperation = () => {
-      return (<div style={{ display: "inline-block" }}>
-        {
-          (showOperateBtn || showSalaryItemBtn) &&
-          <Dropdown.Button overlay={menu} type="primary" onClick={() => handleMenuClick({ key: "1" })}
-                           style={{ marginRight: "10px" }}>{getLabel(111, "新增自定义薪资项")}</Dropdown.Button>
-        }
-        {
-          (showOperateBtn || showSalaryItemBtn) &&
-          <Button
-            type="primary"
-            style={{ marginRight: "10px" }}
-            onClick={() => {
-              if (!selectedRowKeys.length) {
-                message.info("未选中任何数据!");
-                return;
-              }
-              Modal.confirm({
-                title: "信息确认",
-                content: `确定要将所选的薪资项（共${selectedRowKeys.length}条数据）删除吗？`,
-                onOk: () => {
-                  deleteItemRequest(selectedRowKeys).then(() => {
-                    getTableDatas({ ...this.state.searchParams }).then(res => {
-                      this.setState({
-                        selectedRowKeys: [],
-                        searchParams: {
-                          ...this.state.searchParams,
-                          total: res.total
-                        }
-                      });
-                    });
-                  });
-                }
-              });
-            }}>{getLabel(32136, "批量删除")}</Button>
-        }
-        <WeaInputSearch value={this.state.searchValue} placeholder={"请输入名称"} onChange={(value) => {
-          this.setState({ searchValue: value });
-        }} onSearch={(value) => {
-          this.handleSearch(value);
-        }}/>
-      </div>);
-
-    };
-
+    let buttons = [
+      <Dropdown.Button overlay={menu} type="primary"
+                       onClick={() => handleMenuClick({ key: "1" })}>{getLabel(111, "新增自定义薪资项")}</Dropdown.Button>,
+      <Button type="ghost">{getLabel(32136, "批量删除")}</Button>,
+      <WeaInputSearch value={name} onChange={val => this.setState({ name: val })}
+                      placeholder={getLabel(111, "请输入名称")} onSearch={() => this.setState({ isQuery: !isQuery })}/>
+    ];
+    const dropMenuDatas = [
+      { key: "log", icon: <i className="iconfont icon-caozuorizhi32"/>, content: getLabel(545781, "操作日志") }
+    ];
     // 新建和修改保存的回调
     const handleSlideSave = (continueFlag) => {
       const { salaryItemStore: { saveItem, request, getTableDatas } } = this.props;
@@ -372,45 +318,39 @@ export default class SalaryItem extends React.Component {
         disabled: !record.canDelete // Column configuration not to be checked
       })
     };
+    !(showOperateBtn || showSalaryItemBtn) && (buttons = buttons.slice(-1));
     return (
-      <div className="mySalaryBenefitsWrapper">
-        <WeaTop title="薪资项目管理" icon={<i className="icon-coms-fa"/>} iconBgcolor="#F14A2D"
-                showDropIcon onDropMenuClick={this.onDropMenuClick}
-                dropMenuDatas={[
-                  {
-                    key: "log", icon: <i className="iconfont icon-caozuorizhi32"/>,
-                    content: getLabel(545781, "操作日志")
-                  }
-                ]}
-        >
-          <CustomTab searchOperationItem={renderRightOperation()}/>
-          <div className="tableWrapper">
-            <WeaNewScroll height="100%">
-              <CustomPaginationTable
-                rowKey={record => record.id}
-                loading={loading}
-                rowSelection={rowSelection}
-                dataSource={tableDataSource}
-                columns={this.getColumns(tableColumns)}
-                total={this.state.searchParams.total}
-                current={this.state.searchParams.current}
-                pageSize={this.state.searchParams.pageSize}
-                onPageChange={(value) => {
-                  this.handlePageChange(value);
-                }}
-                onShowSizeChange={(current, pageSize) => {
-                  this.setState({
-                    searchParams: {
-                      ...this.state.searchParams,
-                      current,
-                      pageSize
-                    }
-                  }, () => {
-                    this.handleShowSizeChange({ name: this.state.searchValue, ...this.state.searchParams });
-                  });
-                }}
-              />
-            </WeaNewScroll>
+      <React.Fragment>
+        <WeaTop title={getLabel(111, "薪资项目管理")} icon={<i className="icon-coms-fa"/>} iconBgcolor="#F14A2D"
+                buttons={buttons} showDropIcon onDropMenuClick={this.onDropMenuClick} dropMenuDatas={dropMenuDatas}
+                className="salaryProjectManagement">
+          <div className="salaryItems_content"><SalaryItemsTable {...this.props} name={name} isQuery={isQuery}/>
+            {/*<WeaNewScroll height="100%">*/}
+            {/*  <CustomPaginationTable*/}
+            {/*    rowKey={record => record.id}*/}
+            {/*    loading={loading}*/}
+            {/*    rowSelection={rowSelection}*/}
+            {/*    dataSource={tableDataSource}*/}
+            {/*    columns={this.getColumns(tableColumns)}*/}
+            {/*    total={this.state.searchParams.total}*/}
+            {/*    current={this.state.searchParams.current}*/}
+            {/*    pageSize={this.state.searchParams.pageSize}*/}
+            {/*    onPageChange={(value) => {*/}
+            {/*      this.handlePageChange(value);*/}
+            {/*    }}*/}
+            {/*    onShowSizeChange={(current, pageSize) => {*/}
+            {/*      this.setState({*/}
+            {/*        searchParams: {*/}
+            {/*          ...this.state.searchParams,*/}
+            {/*          current,*/}
+            {/*          pageSize*/}
+            {/*        }*/}
+            {/*      }, () => {*/}
+            {/*        this.handleShowSizeChange({ name: this.state.searchValue, ...this.state.searchParams });*/}
+            {/*      });*/}
+            {/*    }}*/}
+            {/*  />*/}
+            {/*</WeaNewScroll>*/}
           </div>
         </WeaTop>
         <SyncToSalaryAccountSetDialog
@@ -477,7 +417,7 @@ export default class SalaryItem extends React.Component {
             onClose={() => setEditSlideVisible(false)}
           />
         }
-      </div>
+      </React.Fragment>
     );
   }
 }

pc4mobx/hrmSalary/pages/salaryItem/index.less

@@ -1,3 +1,18 @@
+//薪资项目重构项
+.salaryProjectManagement {
+  .wea-input-focus {
+    height: 31.36px;
+    line-height: 0;
+  }
+
+  .salaryItems_content {
+    height: 100%;
+    padding: 16px 16px 0 16px;
+    //background: #e5e5e5;
+  }
+}
+
+
 .customSalaryItemSlide {
   padding: 16px;
 

pc4mobx/hrmSalary/pages/salaryItem/salaryItemsTable.js

@@ -0,0 +1,67 @@
+/*
+  *  薪资项目管理
+  * 表格
+  * @Author:    黎永顺
+  * @Date:      2024/8/16
+  * @Wechat:
+  * @Email:     971387674@qq.com
+  * @description:
+*/
+import React, { Component } from "react";
+import { WeaLocaleProvider, WeaTable } from "ecCom";
+import * as API from "../../apis/item";
+
+const getLabel = WeaLocaleProvider.getLabel;
+
+class SalaryItemsTable extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: false, columns: [], dataSource: [],
+      pageInfo: { current: 1, pageSize: 10, total: 10 }
+    };
+  }
+
+  componentWillReceiveProps(nextProps, nextContext) {
+    if (nextProps.isQuery !== this.props.isQuery) this.getItemList(nextProps);
+  }
+
+  getItemList = (props) => {
+    const { name } = props;
+    const { pageInfo } = this.state;
+    const payload = { name, ...pageInfo };
+    this.setState({ loading: true });
+    API.getItemList(payload).then(({ status, data }) => {
+      this.setState({ loading: false });
+      if (status) {
+        const { columns, list: dataSource, pageNum: current, pageSize, total } = data;
+        this.setState({
+          dataSource, pageInfo: { ...pageInfo, current, pageSize, total },
+          columns
+        });
+      }
+    });
+  };
+
+  render() {
+    const { dataSource, columns, pageInfo } = this.state;
+    const pagination = {
+      ...pageInfo,
+      showTotal: total => `${getLabel(111, "共")} ${total} ${getLabel(111, "条")}`,
+      showQuickJumper: true,
+      showSizeChanger: true,
+      pageSizeOptions: ["10", "20", "50", "100"],
+      onShowSizeChange: (current, pageSize) => {
+        this.setState({
+          pageInfo: { ...pageInfo, current, pageSize }
+        }, () => this.getItemList(this.props));
+      },
+      onChange: current => {
+        this.setState({ pageInfo: { ...pageInfo, current } }, () => this.getItemList(this.props));
+      }
+    };
+    return (<WeaTable dataSource={dataSource} columns={columns} pagination={pagination}/>);
+  }
+}
+
+export default SalaryItemsTable;