薪资账套页面重构

2022-12-12 11:38:43 +08:00 · 2022-12-12 11:38:43 +08:00 · fa45739e66
parent 1e0c47364f
commit fa45739e66
5 changed files with 272 additions and 9 deletions
--- a/pc4mobx/hrmSalary/components/PersonalScopeTable/index.js
+++ b/pc4mobx/hrmSalary/components/PersonalScopeTable/index.js
@ -0,0 +1,130 @@
+/*
+ * Author: 黎永顺
+ * name: 人员范围列表数据
+ * Description:
+ * Date: 2022/11/30
+ */
+import React, { Component } from "react";
+import { WeaTable } from "ecCom";
+import { calcPageNo } from "../../util";
+import "./index.less";
+
+class PersonalScopeTable extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: {
+        query: false
+      },
+      dataSource: [],
+      columns: [],
+      selectedRowKeys: [],
+      pageInfo: {
+        current: 1,
+        pageSize: 10,
+        total: 0
+      }
+    };
+  }
+
+  componentDidMount() {
+    this.getPersonalScopeList();
+  }
+
+  componentWillReceiveProps(nextProps, nextContext) {
+    if (nextProps.tabActive !== this.props.tabActive) {
+      this.setState({ selectedRowKeys: [] }, () => {
+        this.getPersonalScopeList(nextProps.tabActive);
+        nextProps.onChangeSelectKey([]);
+      });
+    }
+  }
+
+  getPersonalScopeList = (tabActive = this.props.tabActive) => {
+    const { searchValue, searchKeyVal, APIFox } = this.props;
+    const { pageInfo, loading } = this.state;
+    const payload = {
+      [searchKeyVal["key"]]: searchKeyVal["value"],
+      targetName: searchValue,
+      ...pageInfo
+    };
+    this.setState({ loading: { ...loading, query: true } });
+    APIFox[tabActive](payload).then(({ status, data }) => {
+      this.setState({ loading: { ...loading, query: false } });
+      if (status) {
+        const { pageNum: current, pageSize, total, columns, list: dataSource } = data;
+        this.setState({
+          pageInfo: { ...pageInfo, current, pageSize, total },
+          dataSource,
+          columns: _.map(columns, item => {
+            return {
+              ...item,
+              render: (text) => {
+                return <span className="tdEllipsis" title={text}>{text}</span>;
+              }
+            };
+          })
+        });
+      }
+    }).catch(() => {
+      this.setState({ loading: { ...loading, query: false } });
+    });
+  };
+
+  /*
+   * Author: 黎永顺
+   * Description: 清空选中项
+   * Params:
+   * Date: 2022/11/30
+   */
+  clearRowkeys = () => {
+    const { pageInfo, selectedRowKeys } = this.state;
+    this.setState({
+      selectedRowKeys: [],
+      pageInfo: {
+        ...pageInfo,
+        current: calcPageNo(pageInfo.total, pageInfo.current, 10, selectedRowKeys.length)
+      }
+    }, () => {
+      this.getPersonalScopeList();
+    });
+  };
+
+  render() {
+    const { dataSource, columns, pageInfo, loading, selectedRowKeys } = this.state;
+    const { onChangeSelectKey } = this.props;
+    const pagination = {
+      ...pageInfo,
+      showTotal: total => `共 ${total} 条`,
+      showQuickJumper: true,
+      pageSizeOptions: ["10", "20", "50", "100"],
+      onChange: current => {
+        this.setState({
+          pageInfo: { ...pageInfo, current }
+        }, () => {
+          this.getPersonalScopeList();
+        });
+      }
+    };
+    const rowSelection = {
+      selectedRowKeys,
+      onChange: (selectedRowKeys) => {
+        this.setState({ selectedRowKeys }, () => {
+          onChangeSelectKey(this.state.selectedRowKeys);
+        });
+      }
+    };
+    return (
+      <WeaTable
+        rowKey="id"
+        rowSelection={rowSelection}
+        dataSource={dataSource}
+        pagination={pagination}
+        loading={loading.query}
+        columns={columns}
+      />
+    );
+  }
+}
+
+export default PersonalScopeTable;
--- a/pc4mobx/hrmSalary/components/PersonalScopeTable/index.less
+++ b/pc4mobx/hrmSalary/components/PersonalScopeTable/index.less
@ -0,0 +1,11 @@
+.ledgerWrapper {
+  height: 100%;
+
+  .tdEllipsis {
+    display: inline-block;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
--- a/pc4mobx/hrmSalary/pages/ledgerPage/components/ledgerAssociatedPersonnel.js
+++ b/pc4mobx/hrmSalary/pages/ledgerPage/components/ledgerAssociatedPersonnel.js
@ -0,0 +1,110 @@
+/*
+ * Author: 黎永顺
+ * name: 薪资账套关联人员
+ * Description:
+ * Date: 2022/12/12
+ */
+import React, { Component } from "react";
+import { inject, observer } from "mobx-react";
+import { WeaButtonIcon, WeaInputSearch, WeaTab } from "ecCom";
+import PersonalScopeTable from "../../../components/PersonalScopeTable";
+import { getLedgerPersonRangeExclude, getLedgerPersonRangeInclude } from "../../../apis/ledger";
+
+const APIFox = {
+  listInclude: getLedgerPersonRangeInclude,
+  listExclude: getLedgerPersonRangeExclude
+};
+
+@inject("taxAgentStore")
+@observer
+class LedgerAssociatedPersonnel extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      searchValue: "",
+      selectedKey: "listInclude",
+      rowKeys: [],
+      personalAddModal: {
+        visible: false,
+        title: "关联人员",
+        includeType: ""
+      }
+    };
+  }
+
+
+  /*
+   * Author: 黎永顺
+   * Description:新增人员范围
+   * Params:
+   * Date: 2022/11/30
+   */
+  handleAddPersonal = () => {
+    const { personalAddModal, selectedKey } = this.state;
+    this.setState({
+      personalAddModal: {
+        ...personalAddModal,
+        visible: true,
+        includeType: selectedKey === "listInclude" ? 1 : 0
+      }
+    });
+  };
+
+  render() {
+    const { selectedKey, searchValue, rowKeys, personalAddModal } = this.state;
+    const { taxAgentStore: { showOperateBtn }, editId } = this.props;
+    const topTab = [
+      {
+        title: "关联人员范围",
+        viewcondition: "listInclude"
+      },
+      {
+        title: "从范围中排除",
+        viewcondition: "listExclude"
+      }
+    ];
+    const btns = showOperateBtn ? [
+      <WeaButtonIcon
+        buttonType="del"
+        type="primary"
+        disabled={_.isEmpty(rowKeys)}
+        onClick={this.taxAgentRangeDelete}
+      />,
+      <WeaButtonIcon buttonType="add" type="primary" onClick={this.handleAddPersonal}/>,
+      <WeaInputSearch
+        style={{ width: 220 }}
+        value={searchValue}
+        onChange={searchValue => this.setState({ searchValue })}
+        placeholder="请输入对象"
+        onSearch={() => console.log(searchValue)}
+      />
+    ] : [<WeaInputSearch
+      style={{ width: 220 }}
+      value={searchValue}
+      onChange={searchValue => this.setState({ searchValue })}
+      placeholder="请输入对象"
+      onSearch={() => console.log(searchValue)}
+    />];
+    return (
+      <div>
+        <WeaTab
+          datas={topTab}
+          keyParam="viewcondition" //主键
+          selectedKey={selectedKey}
+          buttons={btns}
+          onChange={selectedKey => this.setState({ selectedKey })}
+        />
+        <PersonalScopeTable
+          ref={dom => this.personalScopeTableRef = dom}
+          searchKeyVal={{ key: "salarySobId", value: editId }}
+          APIFox={APIFox}
+          tabActive={selectedKey}
+          searchValue={searchValue}
+          onChangeSelectKey={rowKeys => this.setState({ rowKeys })}
+        />
+      </div>
+    );
+  }
+}
+
+export default LedgerAssociatedPersonnel;
--- a/pc4mobx/hrmSalary/pages/ledgerPage/components/ledgerBaseSetting.js
+++ b/pc4mobx/hrmSalary/pages/ledgerPage/components/ledgerBaseSetting.js
@ -66,7 +66,7 @@ class LedgerBaseSetting extends Component {
        attendCycleFromDay: "1",
        socialSecurityCycleType: "3",
        description: "",
-        canEdit: false
+        canEdit: "true"
      }
    });
  };
@ -124,7 +124,10 @@ class LedgerBaseSetting extends Component {
  };

  render() {
+    const { editId } = this.props;
    const { baseForm, settingBaseInfo } = this.state;
+    const { canEdit, taxAgentId } = settingBaseInfo;
+    let taxAgentIdDisabled = false, taxableItemsDisabled = false;
    return (
      <div className="baseSettingWrapper">
        <Row gutter={20}>
@ -132,16 +135,19 @@ class LedgerBaseSetting extends Component {
            {
              _.map(baseForm, item => {
                const { key, label, type, options = [], children = [] } = item;
+                taxAgentIdDisabled = key === "taxAgentId" && taxAgentId;
+                taxableItemsDisabled = key === "taxableItems" && editId;
                return <WeaFormItem
                  key={key} label={label}
                  labelCol={{ span: 6 }} wrapperCol={{ span: 12 }}
                >
                  {
                    type === "INPUT" ?
-                      <WeaInput value={settingBaseInfo[key]} viewAttr={3}
+                      <WeaInput value={settingBaseInfo[key]} viewAttr={3} disabled={canEdit !== "true"}
                                onChange={(v) => this.handleChangeField(key, v)}/> :
                      type === "TEXTAREA" ?
-                        <WeaTextarea value={settingBaseInfo[key]} onChange={(v) => this.handleChangeField(key, v)}/> :
+                        <WeaTextarea value={settingBaseInfo[key]} disabled={canEdit !== "true"}
+                                     onChange={(v) => this.handleChangeField(key, v)}/> :
                        type === "CHECKBOX" ?
                          <React.Fragment>
                            <WeaCheckbox value={true} viewAttr={1}
@ -150,6 +156,7 @@ class LedgerBaseSetting extends Component {
                          </React.Fragment> :
                          type === "SELECT" ?
                            <WeaSelect value={settingBaseInfo[key]} options={options} viewAttr={3}
+                                       disabled={canEdit !== "true" || taxAgentIdDisabled || taxableItemsDisabled}
                                       onChange={(v) => this.handleChangeField(key, v)}/> :
                            type === "CUSTOM" ?
                              <CustomSelect list={children} baseInfo={settingBaseInfo} inputStr={key}
@ -170,7 +177,7 @@ export default LedgerBaseSetting;

 const CustomSelect = (props) => {
  const { list, baseInfo, onChange, inputStr } = props;
-  const { salaryCycleType, salaryCycleFromDay, attendCycleType, attendCycleFromDay } = baseInfo;
+  const { salaryCycleType, salaryCycleFromDay, attendCycleType, attendCycleFromDay, canEdit } = baseInfo;
  const salaryCycleStrObj = initPeriodStr("inputStr", salaryCycleType, salaryCycleFromDay);
  const attendCycleStrObj = initPeriodStr("inputStr", attendCycleType, attendCycleFromDay);
  return <Row gutter={10} key={key}>
@ -179,6 +186,7 @@ const CustomSelect = (props) => {
        const { key, options = [] } = item;
        return <Col span={6}>
          <WeaSelect value={baseInfo[key]} options={options} viewAttr={3}
+                     disabled={canEdit !== "true"}
                     onChange={(v) => onChange(key, v)}/>
        </Col>;
      })
--- a/pc4mobx/hrmSalary/pages/ledgerPage/components/ledgerSlide.js
+++ b/pc4mobx/hrmSalary/pages/ledgerPage/components/ledgerSlide.js
@ -10,6 +10,7 @@ import { WeaSlideModal, WeaSteps } from "ecCom";
 import { Button, message, Modal } from "antd";
 import SlideModalTitle from "../../../components/slideModalTitle";
 import LedgerBaseSetting from "./ledgerBaseSetting";
+import LedgerAssociatedPersonnel from "./ledgerAssociatedPersonnel";
 import { saveLedgerBasic } from "../../../apis/ledger";
 import "./index.less";

@ -17,9 +18,9 @@ const Step = WeaSteps.Step;
 const tabs = [
  { key: 0, title: "基础设置" },
  { key: 1, title: "关联人员" },
-  { key: 3, title: "薪资项目" },
-  { key: 4, title: "回算薪资项目" },
-  { key: 5, title: "校验规则" }
+  { key: 2, title: "薪资项目" },
+  { key: 3, title: "回算薪资项目" },
+  { key: 4, title: "调薪计薪规则" }
 ];

@inject("taxAgentStore")
@ -81,6 +82,9 @@ class LedgerSlide extends Component {
      case 0:
        CurrentDom = <LedgerBaseSetting {...this.props} onSaveParams={this.handleChangeSaveParams}/>;
        break;
+      case 1:
+        CurrentDom = <LedgerAssociatedPersonnel {...this.props}/>;
+        break;
      default:
        CurrentDom = null;
        break;
@ -104,10 +108,10 @@ class LedgerSlide extends Component {
          ];
          break;
        case 1:
-          CurrentDom = [
+          CurrentDom = !editId ? [
            <Button type="ghost">完成，跳过所有步骤</Button>,
            <Button type="primary" onClick={() => this.setState({ current: current + 1 })}>下一步</Button>
-          ];
+          ] : [];
          break;
        case 2:
          CurrentDom = !editId ?