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

2024-09-25 15:37:02 +08:00 · 2024-09-25 15:37:02 +08:00 · 5ec07d20e0
parent a4fffbcbd4
commit 5ec07d20e0
4 changed files with 59 additions and 103 deletions
--- a/pc4mobx/hrmSalary/pages/salaryItem/index.js
+++ b/pc4mobx/hrmSalary/pages/salaryItem/index.js
@ -18,9 +18,9 @@ export default class SalaryItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
-      name: "", isQuery: false, loading: false,
+      name: "", isQuery: false, loading: false, sysVisible: false,
      customItemDialog: { visible: false, title: "", buttons: [] },// 自定义薪资项弹窗
-      syncSalarySetDialog: { visible: false, title: "", id: "" }, // 同步到薪资账套弹窗
+      syncSalarySetDialog: { visible: false, id: "" }, // 同步到薪资账套弹窗
      logDialogVisible: false, filterConditions: "[]"
    };
  }
@ -109,9 +109,7 @@ export default class SalaryItem extends React.Component {
        const title = key === "edit" ? getLabel(111, "修改自定义薪资项目") : getLabel(111, "新建自定义薪资项目");
        const buttons = key === "edit" ? [
          <Button type="ghost" onClick={() => this.setState({
-            syncSalarySetDialog: {
-              ...this.state.syncSalarySetDialog, visible: true, title: getLabel(111, "请选择薪资账套")
-            }
+            syncSalarySetDialog: { visible: true, id: targetid }
          })}>{getLabel(111, "同步到薪资账套")}</Button>,
          <Button type="primary" loading={loading}
                  onClick={() => this.handleSalaryItem("SAVE")}>{getLabel(111, "保存")}</Button>
@ -131,6 +129,7 @@ export default class SalaryItem extends React.Component {
        this.handleDeleteItem(targetid);
        break;
      case "sysAdd":
+        this.setState({ sysVisible: true });
        break;
      default:
        break;
@ -139,12 +138,14 @@ export default class SalaryItem extends React.Component {

  render() {
    const { salaryItemStore, taxAgentStore: { showOperateBtn, showSalaryItemBtn } } = this.props;
-    const { selectedRowKeys, logDialogVisible, filterConditions, name, isQuery, customItemDialog } = this.state;
+    const {
+      selectedRowKeys, logDialogVisible, filterConditions, name, isQuery, customItemDialog, sysVisible
+    } = this.state;
    const { loading, deleteItemRequest, getTableDatas } = salaryItemStore;
    const { systemItemVisible, setSystemItemVisible } = salaryItemStore;

    const menu = (
-      <Menu onClick={this.onDropMenuClick}>
+      <Menu onClick={({ key }) => this.onDropMenuClick(key)}>
        <Menu.Item key="sysAdd">{getLabel(111, "新增系统薪资项")}</Menu.Item>
      </Menu>
    );
@ -170,31 +171,13 @@ export default class SalaryItem extends React.Component {
                              onChange={val => this.setState({ selectedRowKeys: val })}/>
          </div>
        </WeaTop>
-        {
-          systemItemVisible &&
-          <SystemSalaryItemModal
-            visible={systemItemVisible}
-            onCancel={() => {
-              setSystemItemVisible(false);
-            }}
-            onInitTableList={() => {
-              getTableDatas({ ...this.state.searchParams, name: this.state.searchValue }).then(res => {
-                this.setState({
-                  searchParams: {
-                    ...this.state.searchParams,
-                    total: res.total
-                  }
-                });
-              });
-            }}
-          />
-        }
+        {/*添加系统薪资项目*/}
+        <SystemSalaryItemModal visible={sysVisible} onSearch={() => this.setState({ isQuery: !isQuery })}
+                               onCancel={(callback) => this.setState({ sysVisible: false }, () => callback && callback())}/>
        {/*同步薪资账套*/}
        <SyncToSalaryAccountSetDialog
          {...this.state.syncSalarySetDialog}
-          onCancel={() => this.setState({
-            syncSalarySetDialog: { ...this.state.syncSalarySetDialog, visible: false, title: "" }
-          })}/>
+          onCancel={() => this.setState({ syncSalarySetDialog: { visible: false, id: "" } })}/>
        {/*操作日志*/}
        <LogDialog visible={logDialogVisible} logFunction="salaryitem" filterConditions={filterConditions}
                   onCancel={() => this.setState({ logDialogVisible: false })}/>
--- a/pc4mobx/hrmSalary/pages/salaryItem/index.less
+++ b/pc4mobx/hrmSalary/pages/salaryItem/index.less
@ -150,20 +150,20 @@

 //系统薪资项添加modal
 .sys-salary-wrapper {
-  .wea-dialog-body {
-    height: 50vh;
-    overflow: hidden auto;
+  .sys-item-title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }

-    .headerSearchWrapper {
-      display: flex;
-      justify-content: flex-end;
-      align-items: center;
-      padding: 16px 20px;
+  .sys-item-table-box {
+    width: 100%;
+    height: 100%;
+    background: #F6F6F6;
+    padding: 8px 16px;

-      .wea-tab {
-        width: 100%;
-        border-bottom: none;
-      }
+    .wea-new-table {
+      background: #FFFFFF;
    }
  }
 }
--- a/pc4mobx/hrmSalary/pages/salaryItem/syncToSalaryAccountSetDialog.js
+++ b/pc4mobx/hrmSalary/pages/salaryItem/syncToSalaryAccountSetDialog.js
@ -51,7 +51,6 @@ class SyncToSalaryAccountSetDialog extends Component {
      }
    });
  };
-
  save = () => {
    const { salaryItemStore: { salarySetform }, id: salaryItemId } = this.props;
    salarySetform.validateForm().then(f => {
@ -80,7 +79,7 @@ class SyncToSalaryAccountSetDialog extends Component {
    return (
      <WeaDialog
        {...this.props} className="salarySetDialog" initLoadCss
-        style={{ width: 480 }}
+        style={{ width: 480 }} title={getLabel(111, "请选择薪资账套")}
        buttons={[<Button type="primary" onClick={this.save}
                          loading={this.state.loading}>{getLabel(537558, "确定")}</Button>]}
      >
--- a/pc4mobx/hrmSalary/pages/salaryItem/systemSalaryItemModal.js
+++ b/pc4mobx/hrmSalary/pages/salaryItem/systemSalaryItemModal.js
@ -1,8 +1,7 @@
 import React from "react";
-import { WeaDialog, WeaLocaleProvider, WeaTab } from "ecCom";
-import { Button, message } from "antd";
+import { WeaDialog, WeaInputSearch, WeaLocaleProvider, WeaTable } from "ecCom";
+import { Button, message, Spin } from "antd";
 import { getSysItemList, saveSysItem } from "../../apis/item";
-import UnifiedTable from "../../components/UnifiedTable";
 import "./index.less";

 const { getLabel } = WeaLocaleProvider;
@ -10,20 +9,16 @@ export default class SystemSalaryItemModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
-      dataSource: [],
-      columns: [],
-      name: "",
-      loading: false,
-      saveLoading: false,
-      selectedRowKeys: [],
-      pageInfo: {
-        current: 1, pageSize: 10, total: 0
-      }
+      dataSource: [], columns: [], name: "", loading: false, saveLoading: false,
+      selectedRowKeys: [], pageInfo: { current: 1, pageSize: 10, total: 0 }
    };
  }

-  componentDidMount() {
-    this.getSysItemList();
+  componentWillReceiveProps(nextProps, nextContext) {
+    if (nextProps.visible !== this.props.visible && nextProps.visible) this.getSysItemList();
+    if (nextProps.visible !== this.props.visible && !nextProps.visible) this.setState({
+      selectedRowKeys: [], name: ""
+    });
  }

  getSysItemList = () => {
@ -33,41 +28,33 @@ export default class SystemSalaryItemModal extends React.Component {
      this.setState({ loading: false });
      if (status) {
        const { columns, list: dataSource, pageNum: current, pageSize, total } = data;
-        this.setState({
-          columns: _.map(columns, item => {
-            return {
-              ...item,
-              render: (text) => {
-                return <span className="ellipsis" title={text}>{text}</span>;
-              }
-            };
-          }),
-          dataSource,
-          pageInfo: { ...pageInfo, current, pageSize, total }
-        });
+        this.setState({ columns, dataSource, pageInfo: { ...pageInfo, current, pageSize, total } });
      }
    }).catch(() => this.setState({ loading: false }));
  };
  handleAdd = () => {
    const { selectedRowKeys } = this.state;
-    if (_.isEmpty(selectedRowKeys)) {
-      message.info(getLabel(111, "未选择任何条目"));
-      return;
-    }
    this.setState({ saveLoading: true });
    saveSysItem(selectedRowKeys).then(({ status, errormsg }) => {
      this.setState({ saveLoading: false });
      if (status) {
        message.success(getLabel(111, "添加成功"));
-        this.setState({ selectedRowKeys: [] }, () => {
-          this.props.onInitTableList();
-          this.props.onCancel();
-        });
+        this.setState({ selectedRowKeys: [] }, () => this.props.onCancel(this.props.onSearch()));
      } else {
        message.error(errormsg);
      }
    }).catch(() => this.setState({ saveLoading: false }));
  };
+  renderTitle = () => {
+    const { name, pageInfo } = this.state;
+    return <div className="sys-item-title">
+      <span>{getLabel(111, "添加系统薪资项目")}</span>
+      <WeaInputSearch value={name} onChange={val => this.setState({ name: val })} style={{ width: 200 }}
+                      placeholder={getLabel(111, "请输入薪资项目名称")} a onSearch={() => this.setState({
+        pageInfo: { ...pageInfo, current: 1 }
+      }, () => this.getSysItemList())}/>
+    </div>;
+  };

  render() {
    const { selectedRowKeys, pageInfo, loading, columns, dataSource, saveLoading } = this.state;
@ -95,33 +82,20 @@ export default class SystemSalaryItemModal extends React.Component {
      onChange: (selectedRowKeys) => this.setState({ selectedRowKeys })
    };
    return (
-      <WeaDialog
-        title="添加系统薪资项目"
-        initLoadCss className="sys-salary-wrapper"
-        visible={this.props.visible} onCancel={() => {
-        this.setState({ selectedRowKeys: [] }, () => {
-          this.props.onCancel();
-        });
-      }} style={{ width: "60vw" }} scalable
-        buttons={[
-          <Button type="primary" loading={saveLoading} onClick={this.handleAdd}>添加</Button>
-        ]}
-      >
-        <div className="headerSearchWrapper">
-          <WeaTab datas={[]} keyParam="viewcondition" //主键
-                  searchType={["base"]} onSearchChange={name => this.setState({ name })}
-                  onSearch={this.getSysItemList}
-          />
+      <WeaDialog {...this.props} initLoadCss className="sys-salary-wrapper" ref={dom => this.sysItemRef = dom}
+                 style={{
+                   width: "60vw", height: 600, minHeight: 200, minWidth: 380,
+                   maxHeight: "90%", maxWidth: "90%", overflow: "hidden", transform: "translate(0px, 0px)"
+                 }} title={this.renderTitle()}
+                 buttons={[<Button type="primary" loading={saveLoading} disabled={_.isEmpty(selectedRowKeys)}
+                                   onClick={this.handleAdd}>{getLabel(111, "添加")}</Button>]}>
+        <div className="sys-item-table-box">
+          <Spin spinning={loading && pageInfo.total === 0}>
+            <WeaTable columns={columns} dataSource={dataSource} pagination={pagination} rowSelection={rowSelection}
+                      loading={loading} scroll={{ y: this.importRef ? this.sysItemRef.state.height - 16 : 600 }}
+                      rowKey="id"/>
+          </Spin>
        </div>
-        <UnifiedTable
-          loading={loading}
-          rowKey="id"
-          columns={columns}
-          dataSource={dataSource}
-          pagination={pagination}
-          rowSelection={rowSelection}
-          xWidth={columns.length * 120}
-        />
      </WeaDialog>
    );
  }