薪资账套重构

2022-12-08 15:48:46 +08:00 · 2022-12-08 15:48:46 +08:00 · 7baf97e20f
parent 53d418fe78
commit 7baf97e20f
6 changed files with 264 additions and 25 deletions
--- a/pc4mobx/hrmSalary/pages/ledgerPage/components/copyLedgerModal.js
+++ b/pc4mobx/hrmSalary/pages/ledgerPage/components/copyLedgerModal.js
@ -0,0 +1,93 @@
+/*
+ * Author: 黎永顺
+ * name: 复制账套
+ * Description:
+ * Date: 2022/12/8
+ */
+import React, { Component } from "react";
+import { inject, observer } from "mobx-react";
+import { copyConditions } from "../config";
+import { WeaDialog } from "ecCom";
+import { Button } from "antd";
+import { getSearchs } from "../../../util";
+import "./index.less";
+
+@inject("ledgerStore", "taxAgentStore")
+@observer
+class CopyLedgerModal extends Component {
+
+  componentDidMount() {
+    this.getTaxAgentSelectListAsAdmin();
+  }
+
+  componentWillReceiveProps(nextProps, nextContext) {
+    if (nextProps.visible !== this.props.visible && nextProps.visible) {
+      const { ledgerStore, name, taxAgentId } = nextProps;
+      const { copyForm: form } = ledgerStore;
+      form.updateFields({
+        name: { value: name },
+        // taxAgentId: { value: taxAgentId }
+      });
+    }
+  }
+
+  getTaxAgentSelectListAsAdmin = () => {
+    const { taxAgentStore, ledgerStore } = this.props;
+    const { copyForm: form } = ledgerStore;
+    const { getTaxAgentSelectListAsAdmin } = taxAgentStore;
+    getTaxAgentSelectListAsAdmin().then(({ status, data }) => {
+      if (status) {
+        const conditions = _.map(copyConditions, it => {
+          it.items = _.map(it.items, child => {
+            if (child.domkey[0] === "taxAgentId") {
+              return {
+                ...child,
+                options: _.map(data, it => ({ key: it.id, showname: it.content }))
+              };
+            } else {
+              return { ...child };
+            }
+          });
+          return { ...it };
+        });
+        form.initFormFields(conditions);
+      }
+    });
+  };
+  handleSubmit = () => {
+    const { ledgerStore } = this.props;
+    const { copyForm: form } = ledgerStore;
+    form.validateForm().then(f => {
+      if (f.isValid) {
+        const params = form.getFormParams();
+        console.log(params);
+      } else {
+        f.showErrors();
+      }
+    });
+  };
+
+
+  render() {
+    const { onCancel, ledgerStore, ...extra } = this.props;
+    const { copyForm: form } = ledgerStore;
+    const buttons = [
+      <Button type="primary" onClick={this.handleSubmit}> 保存 </Button>,
+      <Button type="ghost" onClick={onCancel}> 取消 </Button>
+    ];
+    return (
+      <WeaDialog
+        {...extra}
+        initLoadCss
+        className="copyWrapper"
+        style={{ width: 600 }}
+        buttons={buttons}
+        onCancel={onCancel}
+      >
+        {getSearchs(form, copyConditions, 1)}
+      </WeaDialog>
+    );
+  }
+}
+
+export default CopyLedgerModal;
--- a/pc4mobx/hrmSalary/pages/ledgerPage/components/index.less
+++ b/pc4mobx/hrmSalary/pages/ledgerPage/components/index.less
@ -0,0 +1,23 @@
+.ledgerWrapper {
+  .optWrapper {
+    display: flex;
+    align-items: center;
+
+    i {
+      cursor: pointer;
+    }
+  }
+}
+
+.copyWrapper {
+  .wea-select {
+    .ant-select {
+      width: 100% !important;
+
+      .ant-select-selection {
+        border-radius: 0 !important;
+        height: 30px !important;
+      }
+    }
+  }
+}
--- a/pc4mobx/hrmSalary/pages/ledgerPage/components/ledgerTable.js
+++ b/pc4mobx/hrmSalary/pages/ledgerPage/components/ledgerTable.js
@ -6,8 +6,14 @@
 */
 import React, { Component } from "react";
 import { WeaCheckbox, WeaTable } from "ecCom";
-import { getLedgerList } from "../../../apis/ledger";
+import { inject, observer } from "mobx-react";
+import { Menu, message, Modal, Popover } from "antd";
+import { deleteLedger, getLedgerList } from "../../../apis/ledger";
+import CopyLedgerModal from "./copyLedgerModal";
+import "./index.less";

+@inject("taxAgentStore")
+@observer
 class LedgerTable extends Component {
  constructor(props) {
    super(props);
@ -19,6 +25,10 @@ class LedgerTable extends Component {
        current: 1,
        pageSize: 10,
        total: 0
+      },
+      copyLedgerModal: {
+        visible: false,
+        title: "复制账套", id: "", name: "", taxAgenyId: ""
      }
    };
  }
@ -28,7 +38,7 @@ class LedgerTable extends Component {
  }

  getLedgerList = () => {
-    const { name } = this.props;
+    const { name, taxAgentStore } = this.props;
    const { pageInfo } = this.state;
    const payload = { name, ...pageInfo };
    this.setState({ loading: true });
@ -39,26 +49,95 @@ class LedgerTable extends Component {
        this.setState({
          pageInfo: { ...pageInfo, current, pageSize, total },
          dataSource,
-          columns: _.map(columns, item => {
-            const { dataIndex } = item;
-            if (dataIndex === "disable") {
-              item.render = (text) => {
-                return <WeaCheckbox value={text === 0 ? "1" : "0"} display="switch"/>;
-              };
-            } else {
-              item.render = (text) => {
-                return <span className="tdEllipsis" title={text}>{text}</span>;
-              };
-            }
-            return { ...item };
-          })
+          columns
        });
      }
    });
  };
+  getColumns = () => {
+    const { columns } = this.state;
+    const { taxAgentStore } = this.props;
+    const { showOperateBtn } = taxAgentStore;
+    return _.map(columns, item => {
+      const { dataIndex } = item;
+      if (dataIndex === "disable") {
+        item.render = (text) => {
+          return <WeaCheckbox value={text === 0 ? "1" : "0"} display="switch" disabled={!showOperateBtn}/>;
+        };
+      } else if (dataIndex === "operate") {
+        item.width = 120;
+        item.render = (text, record) => {
+          return <div className="optWrapper">
+            <a href="javascript:void(0);" className="mr10">{showOperateBtn ? "编辑" : "查看"}</a>
+            {
+              showOperateBtn &&
+              <Popover
+                overlayClassName="moreIconWrapper"
+                placement="bottomRight"
+                content={<Menu onClick={(e) => this.handleMenuClick(e, record.id)}>
+                  <Menu.Item key="copy">复制</Menu.Item>
+                  <Menu.Item key="delete">删除</Menu.Item>
+                </Menu>} title="">
+                <i className="icon-coms-more"/>
+              </Popover>
+            }
+          </div>;
+        };
+      } else {
+        item.render = (text) => {
+          return <span className="tdEllipsis" title={text}>{text}</span>;
+        };
+      }
+      return { ...item };
+    });
+  };
+  /*
+   * Author: 黎永顺
+   * Description: 刪除薪资账套
+   * Params:
+   * Date: 2022/12/8
+   */
+  deleteLedger = (payload) => {
+    deleteLedger(payload).then(({ status, errormsg }) => {
+      if (status) {
+        message.success("删除成功");
+        this.getLedgerList();
+      } else {
+        message.error(errormsg || "删除失败");
+      }
+    });
+  };
+  handleResetCopy = () => {
+    const { copyLedgerModal } = this.state;
+    this.setState({
+      copyLedgerModal: { ...copyLedgerModal, visible: false, id: "", name: "", taxAgenyId: "" }
+    });
+  };
+  handleMenuClick = ({ key }, record) => {
+    const { copyLedgerModal } = this.state;
+    const { id, name, taxAgenyId } = this.state;
+    switch (key) {
+      case "copy":
+        this.setState({
+          copyLedgerModal: { ...copyLedgerModal, visible: true, id, name, taxAgenyId }
+        });
+        break;
+      case "delete":
+        Modal.confirm({
+          title: "信息确认",
+          content: "确认要删除吗?",
+          onOk: () => {
+            this.deleteLedger([id]);
+          }
+        });
+        break;
+      default:
+        break;
+    }
+  };

  render() {
-    const { dataSource, columns, pageInfo, loading } = this.state;
+    const { dataSource, columns, pageInfo, loading, copyLedgerModal } = this.state;
    const pagination = {
      ...pageInfo,
      showTotal: total => `共 ${total} 条`,
@ -79,13 +158,19 @@ class LedgerTable extends Component {
      }
    };
    return (
-      <WeaTable
-        rowKey="id"
-        dataSource={dataSource}
-        pagination={pagination}
-        loading={loading}
-        columns={columns}
-      />
+      <React.Fragment>
+        <WeaTable
+          rowKey="id"
+          dataSource={dataSource}
+          pagination={pagination}
+          loading={loading}
+          columns={this.getColumns()}
+        />
+        <CopyLedgerModal
+          {...copyLedgerModal}
+          onCancel={this.handleResetCopy}
+        />
+      </React.Fragment>
    );
  }
 }
--- a/pc4mobx/hrmSalary/pages/ledgerPage/config.js
+++ b/pc4mobx/hrmSalary/pages/ledgerPage/config.js
@ -0,0 +1,29 @@
+export const copyConditions = [
+  {
+    items: [
+      {
+        colSpan: 1,
+        conditionType: "INPUT",
+        domkey: ["name"],
+        fieldcol: 14,
+        rules: "required|string",
+        label: "账套名称",
+        labelcol: 6,
+        value: "",
+        viewAttr: 3,
+      },
+      {
+        colSpan: 1,
+        conditionType: "SELECT",
+        domkey: ["taxAgentId"],
+        fieldcol: 14,
+        rules: "required|string",
+        label: "个税扣缴义务人",
+        labelcol: 6,
+        value: "",
+        viewAttr: 3,
+      },
+    ],
+    defaultshow: true,
+  },
+];
--- a/pc4mobx/hrmSalary/pages/ledgerPage/index.js
+++ b/pc4mobx/hrmSalary/pages/ledgerPage/index.js
@ -5,10 +5,13 @@
 * Date: 2022/12/6
 */
 import React, { Component } from "react";
+import { inject, observer } from "mobx-react";
 import { WeaInputSearch, WeaTop } from "ecCom";
 import { Button } from "antd";
 import LedgerTable from "./components/ledgerTable";

+@inject("taxAgentStore")
+@observer
 class Index extends Component {
  constructor(props) {
    super(props);
@ -20,6 +23,8 @@ class Index extends Component {

  render() {
    const { searchVal } = this.state;
+    const { taxAgentStore } = this.props;
+    const { showOperateBtn } = taxAgentStore;
    const btns = [
      <Button type="primary">新建</Button>,
      <WeaInputSearch
@ -34,7 +39,7 @@ class Index extends Component {
        icon={<i className="icon-coms-fa"/>}
        iconBgcolor="#F14A2D"
        showDropIcon={false}
-        buttons={btns}
+        buttons={showOperateBtn ? btns : btns.slice(-1)}
      >
        <div className="ledgerWrapper">
          <LedgerTable name={searchVal} ref={dom => this.ledgerTableRef = dom}/>
--- a/pc4mobx/hrmSalary/stores/ledger.js
+++ b/pc4mobx/hrmSalary/stores/ledger.js
@ -3,12 +3,16 @@ import { message } from "antd";
 import { WeaForm, WeaTableNew } from "comsMobx";

 import * as API from "../apis/ledger"; // 引入API接口文件
-import { tempateColumns } from "../pages/payroll/columns";
 import { notNull } from "../util/validate";

 const { TableStore } = WeaTableNew;

 export class LedgerStore {
+  //重构薪资账套
+  @observable copyForm = new WeaForm(); // nrew 一个form
+
+
+  /*******************************************************/
  @observable tableStore = new TableStore(); // new table
  @observable form = new WeaForm(); // nrew 一个form
  @observable condition = []; // 存储后台得到的form数据