Merge branch 'feature/2.9.42310.01-个税申报表页面重构' into release/2.9.42310.01-个税

# Conflicts: # pc4mobx/hrmSalary/index.js # pc4mobx/hrmSalary/pages/declare/index.less # pc4mobx/hrmSalary/stores/declare.js
2023-10-23 10:57:05 +08:00 · 2023-10-23 10:57:05 +08:00 · e21bbcb3f8
parent 86980f33b0 ca5b60f6aa
commit e21bbcb3f8
9 changed files with 465 additions and 39 deletions
--- a/pc4mobx/hrmSalary/index.js
+++ b/pc4mobx/hrmSalary/index.js
@ -20,12 +20,14 @@ import Calculate from "./pages/calculate/calculate"; //重构的薪资核算页
 import Payroll from "./pages/payroll";
 import PayrollGrant from "./pages/payroll/payrollGrant";
 import PayrollDetail from "./pages/payroll/payrollDetail";
-import Declare from "./pages/declare";
+// import Declare from "./pages/declare";
 import DeclareDetail from "./pages/declareDetail";
 import Employeedeclare from "./pages/employeedeclare";
 import EnterprisePayCertificationDetail from "./pages/enterprisePayCertificationDetail";
 import BankVoucherDetail from "./pages/bankVoucherDetail";
 import EmployeedeclareDetail from "./pages/employeedeclareDetail";
+// import Declare from "./pages/declare";
+import Declare from "./pages/declare/declare"; //重构的个税申报表
 import TaxRate from "./pages/taxRate";
 import TaxAgents from "./pages/taxAgent";
 import TaxAgent from "./pages/salary/taxAgent";
--- a/pc4mobx/hrmSalary/pages/declare/columns.js
+++ b/pc4mobx/hrmSalary/pages/declare/columns.js
@ -1,37 +0,0 @@
-export const columns = [
-    {
-        title: "姓名",
-        dataIndex: 'title',
-        key: 'title',
-    },
-    {
-        title: "个税扣缴义务人",
-        dataIndex: 'title',
-        key: 'title',
-    },
-    {
-        title: "部门",
-        dataIndex: 'title',
-        key: 'title',
-    },
-    {
-        title: "手机号",
-        dataIndex: 'title',
-        key: 'title',
-    },
-    {
-        title: "员工状态",
-        dataIndex: 'title',
-        key: 'title',
-    },
-    {
-        title: "基本工资",
-        dataIndex: 'title',
-        key: 'title',
-    },
-    {
-        title: "操作",
-        dataIndex: 'cz',
-        key: 'cz',
-    }
-]
--- a/pc4mobx/hrmSalary/pages/declare/components/declareDialog/condition.js
+++ b/pc4mobx/hrmSalary/pages/declare/components/declareDialog/condition.js
@ -0,0 +1,43 @@
+export const declareConditions = [
+  {
+    items: [
+      {
+        colSpan: 1,
+        conditionType: "MONTHPICKER",
+        domkey: ["salaryMonthStr"],
+        fieldcol: 14,
+        label: "薪资所属月",
+        lanId: 542604,
+        labelcol: 6,
+        value: "",
+        rules: "required|string",
+        viewAttr: 3
+      },
+      {
+        colSpan: 1,
+        conditionType: "SELECT",
+        domkey: ["taxAgentId"],
+        fieldcol: 14,
+        label: "个税扣缴义务人",
+        lanId: 537996,
+        labelcol: 6,
+        options: [],
+        rules: "required|string",
+        viewAttr: 3,
+      },
+      {
+        colSpan: 1,
+        conditionType: "INPUT",
+        domkey: ["description"],
+        fieldcol: 14,
+        label: "备注",
+        lanId: 536726,
+        labelcol: 6,
+        value: "",
+        viewAttr: 2
+      }
+    ],
+    defaultshow: true,
+    title: ""
+  }
+];
--- a/pc4mobx/hrmSalary/pages/declare/components/declareDialog/index.js
+++ b/pc4mobx/hrmSalary/pages/declare/components/declareDialog/index.js
@ -0,0 +1,92 @@
+/*
+ * Author: 黎永顺
+ * name: 个税申报重构- 申报
+ * Description:
+ * Date: 2023/10/12
+ */
+import React, { Component } from "react";
+import { inject, observer } from "mobx-react";
+import { WeaDialog, WeaLocaleProvider, WeaTools } from "ecCom";
+import { Button, message } from "antd";
+import { getSearchs } from "../../../../util";
+import { getTaxAgentSelectListAsAdmin } from "../../../../apis/taxAgent";
+import { saveDeclare } from "../../../../apis/declare";
+import { declareConditions } from "./condition";
+
+const getKey = WeaTools.getKey;
+const getLabel = WeaLocaleProvider.getLabel;
+
+@inject("declareStore")
+@observer
+class Index extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      conditions: [], loading: false
+    };
+  }
+
+  componentWillReceiveProps(nextProps, nextContext) {
+    if (nextProps.visible !== this.props.visible && nextProps.visible) this.getTaxAgentSelectListAsAdmin(nextProps);
+    if (nextProps.visible !== this.props.visible && !nextProps.visible) this.props.declareStore.initDeclareForm();
+  }
+
+  getTaxAgentSelectListAsAdmin = (props) => {
+    const { declareStore: { declareForm } } = props;
+    getTaxAgentSelectListAsAdmin().then(({ status, data }) => {
+      if (status) {
+        this.setState({
+          conditions: _.map(declareConditions, item => ({
+            ...item,
+            items: _.map(item.items, o => {
+              if (getKey(o) === "taxAgentId") {
+                return {
+                  ...o, options: _.map(data, g => ({ key: g.id, showname: g.content }))
+                  // helpfulTitle: getLabel(563420, "提示：可选择单个个税扣缴义务人进行申报，若不选择，则批量对管理下的所有个税扣缴义务人进行申报；")
+                };
+              }
+              return { ...o };
+            })
+          }))
+        }, () => declareForm.initFormFields(this.state.conditions));
+      }
+    });
+  };
+  save = () => {
+    const { declareStore: { declareForm } } = this.props;
+    declareForm.validateForm().then(f => {
+      if (f.isValid) {
+        const payload = declareForm.getFormParams();
+        this.setState({ loading: true });
+        saveDeclare({ ...payload }).then(({ status, errormsg }) => {
+          this.setState({ loading: false });
+          if (status) {
+            message.success(getLabel(30700, "操作成功"));
+            this.props.onCancel("refresh");
+          } else {
+            message.error(errormsg);
+          }
+        }).catch(() => this.setState({ loading: false }));
+      } else {
+        f.showErrors();
+      }
+    });
+  };
+
+  render() {
+    const { conditions, loading } = this.state;
+    const { declareStore: { declareForm } } = this.props;
+    return (
+      <WeaDialog
+        {...this.props} style={{ width: 500 }} initLoadCss
+        buttons={[
+          <Button type="primary" onClick={this.save} loading={loading}>{getLabel(543618, "生成申报表")}</Button>
+        ]}
+      >
+        <div className="declare-dialog-layout">{getSearchs(declareForm, conditions, 1, false)}</div>
+      </WeaDialog>
+    );
+  }
+}
+
+export default Index;
--- a/pc4mobx/hrmSalary/pages/declare/components/declareQuery/index.js
+++ b/pc4mobx/hrmSalary/pages/declare/components/declareQuery/index.js
@ -0,0 +1,34 @@
+/*
+ * Author: 黎永顺
+ * name: 个税申报表重构-查询
+ * Description:
+ * Date: 2023/10/12
+ */
+import React, { Component } from "react";
+import { WeaInputSearch, WeaLocaleProvider } from "ecCom";
+import { MonthRangePicker } from "../../../reportView/components/statisticalMicroSettingsSlide";
+
+const getLabel = WeaLocaleProvider.getLabel;
+
+class Index extends Component {
+  render() {
+    const { queryParams } = this.props;
+    const { dateRange, name } = queryParams;
+    return (
+      <div className="salary-btn-flex">
+        <div className="mounth-range">
+          <span className="label">{getLabel(543549, "薪资所属月：")}</span>
+          <MonthRangePicker dateRange={dateRange} viewAttr={2}
+                            onChange={v => this.props.onChange({ dateRange: v })}/>
+        </div>
+        <WeaInputSearch value={name}
+                        placeholder={getLabel(111, "请输入个税扣缴义务人")}
+                        onChange={v => this.props.onChange({ taxAgentName: v })}
+                        onSearch={this.props.onSearch}
+        />
+      </div>
+    );
+  }
+}
+
+export default Index;
--- a/pc4mobx/hrmSalary/pages/declare/components/declareTablelist/index.js
+++ b/pc4mobx/hrmSalary/pages/declare/components/declareTablelist/index.js
@ -0,0 +1,144 @@
+/*
+ * Author: 黎永顺
+ * name: 个税申报重构-列表
+ * Description:
+ * Date: 2023/10/12
+ */
+import React, { Component } from "react";
+import { WeaLocaleProvider, WeaTable } from "ecCom";
+import { message, Modal } from "antd";
+import { getDeclareList, withDrawTaxDeclaration } from "../../../../apis/declare";
+import { sysConfCodeRule } from "../../../../apis/ruleconfig";
+
+const getLabel = WeaLocaleProvider.getLabel;
+
+class Index extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: false, columns: [], dataSource: [], showWithDrawBtn: false,
+      pageInfo: { current: 1, pageSize: 10, total: 0 }
+    };
+  }
+
+  componentDidMount() {
+    this.getDeclareList(this.props);
+    this.sysConfCodeRule();
+  }
+
+  componentWillReceiveProps(nextProps, nextContext) {
+    if (nextProps.isRefresh !== this.props.isRefresh) this.getDeclareList(nextProps);
+  }
+
+  sysConfCodeRule = () => {
+    sysConfCodeRule({ code: "WITHDRAW_TAX_DECLARATION" }).then(({ status, data }) => {
+      if (status && data === "1") this.setState({ showWithDrawBtn: data === "1" });
+    });
+  };
+  getDeclareList = (props) => {
+    const { pageInfo } = this.state;
+    const { queryParams } = props;
+    const { dateRange, ...extra } = queryParams;
+    const [fromSalaryMonthStr, endSalaryMonthStr] = dateRange || [];
+    const params = { fromSalaryMonthStr, endSalaryMonthStr, ...extra };
+    const payload = { ...pageInfo, ...params };
+    this.setState({ loading: true });
+    getDeclareList(payload).then(({ status, data }) => {
+      this.setState({ loading: false });
+      if (status) {
+        const { columns, list: dataSource, pageNum, pageSize, total } = data;
+        this.setState({
+          dataSource, pageInfo: { ...pageInfo, pageNum, pageSize, total },
+          columns: _.map(columns, o => {
+            const { dataIndex } = o;
+            let width = "";
+            switch (dataIndex) {
+              case "taxAgentName":
+              case "operateTime":
+                width = "15%";
+                break;
+              case "description":
+                width = "20%";
+                break;
+              default:
+                width = "10%";
+                break;
+            }
+            return { ...o, width };
+          })
+        });
+      }
+    }).catch(() => this.setState({ loading: false }));
+  };
+  taxdeclarationDelete = (taxDeclarationId) => {
+    withDrawTaxDeclaration({ taxDeclarationId }).then(({ status, errormsg }) => {
+      if (status) {
+        message.success(getLabel(505793, "撤回成功"));
+        this.getDeclareList(this.props);
+      } else {
+        message.error(errormsg);
+      }
+    });
+  };
+
+  render() {
+    const { loading, dataSource, columns, pageInfo, showWithDrawBtn } = this.state;
+    const 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.getDeclareList(this.props));
+      },
+      onChange: current => {
+        this.setState({
+          pageInfo: { ...pageInfo, current }
+        }, () => this.getDeclareList(this.props));
+      }
+    };
+    return (
+      <WeaTable
+        rowKey="id"
+        dataSource={dataSource} loading={loading}
+        pagination={pagination} columns={[
+        ...columns,
+        {
+          dataIndex: "operate", title: getLabel(30585, "操作"),
+          width: 170, render: (__, record) => {
+            const { id } = record;
+            return <React.Fragment>
+              <a
+                href={`${window.ecologyContentPath || ""}/spa/hrmSalary/static/index.html#/main/hrmSalary/generateDeclarationDetail?id=${id}`}
+                target="_blank"
+              >
+                {getLabel(83110, "查看详情")}
+              </a>
+              {
+                showWithDrawBtn &&
+                <a
+                  href="javascript:void(0);" style={{ marginLeft: 10 }}
+                  onClick={() => {
+                    Modal.confirm({
+                      title: getLabel(131329, "信息确认"),
+                      content: getLabel(543848, "确认撤回该条数据吗?"),
+                      onOk: () => this.taxdeclarationDelete(id)
+                    });
+                  }}
+                >
+                  {getLabel(32025, "撤回")}
+                </a>
+              }
+            </React.Fragment>;
+          }
+        }
+      ]}
+      />
+    );
+  }
+}
+
+export default Index;
--- a/pc4mobx/hrmSalary/pages/declare/declare.js
+++ b/pc4mobx/hrmSalary/pages/declare/declare.js
@ -0,0 +1,81 @@
+/*
+ * Author: 黎永顺
+ * name: 个税申报表-重构页面
+ * Description:
+ * Date: 2023/10/12
+ */
+import React, { Component } from "react";
+import { inject, observer } from "mobx-react";
+import { WeaHelpfulTip, WeaLocaleProvider, WeaTop } from "ecCom";
+import { Button } from "antd";
+import moment from "moment";
+import DeclareQuery from "./components/declareQuery";
+import DeclareTablelist from "./components/declareTablelist";
+import DeclareDialog from "./components/declareDialog";
+import "./index.less";
+
+const getLabel = WeaLocaleProvider.getLabel;
+
+@inject("taxAgentStore")
+@observer
+class Calculate extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      queryParams: {
+        taxAgentName: "",
+        dateRange: [
+          moment(new Date()).startOf("year").format("YYYY-MM"),
+          moment(new Date()).startOf("month").format("YYYY-MM")
+        ]
+      }, isRefresh: false,
+      declareDaialog: { visible: false, title: "" }
+    };
+    this.handleDebounce = null;
+  }
+
+  renderCalculateOpts = () => {
+    const { taxAgentStore: { showOperateBtn } } = this.props;
+    const { queryParams, isRefresh } = this.state;
+    let calculateOpts = [
+      <Button type="primary" onClick={() => this.setState({
+        declareDaialog: {
+          visible: true,
+          title: <div style={{ display: "flex", alignItems: "center" }}>
+            <span style={{ marginRight: 10 }}>{getLabel(15366, "申报")}</span>
+            <WeaHelpfulTip
+              width={200} placement="topLeft"
+              title={getLabel(543617, "提示：一个薪资所属月下一个个税扣缴义务人的所有核算数据都归档后才可以申报")}
+            />
+          </div>
+        }
+      })}>{getLabel(543618, "生成申报表")}</Button>,
+      <DeclareQuery queryParams={queryParams} onChange={v => this.setState({
+        isRefresh: _.keys(v)[0] === "taxAgentName" ? isRefresh : !isRefresh,
+        queryParams: { ...queryParams, ...v }
+      })} onSearch={() => this.setState({ isRefresh: !isRefresh })}/>
+    ];
+    return !showOperateBtn ? calculateOpts.slice(1) : calculateOpts;
+  };
+
+  render() {
+    const { queryParams, isRefresh, declareDaialog } = this.state;
+    return (
+      <WeaTop title={getLabel(543353, "个税申报")} icon={<i className="icon-coms-fa"/>} iconBgcolor="#F14A2D"
+              buttons={this.renderCalculateOpts()} className="declare-main-layout"
+      >
+        <div className="declare-body">
+          <DeclareTablelist queryParams={queryParams} isRefresh={isRefresh}/>
+          <DeclareDialog {...declareDaialog}
+                         onCancel={(bool) => this.setState({
+                           declareDaialog: { ...declareDaialog, visible: false },
+                           isRefresh: bool === "refresh" ? !isRefresh : isRefresh
+                         })}
+          />
+        </div>
+      </WeaTop>
+    );
+  }
+}
+
+export default Calculate;
--- a/pc4mobx/hrmSalary/pages/declare/index.less
+++ b/pc4mobx/hrmSalary/pages/declare/index.less
@ -26,6 +26,70 @@
  }
 }

+//个税申报表页面-重构
+.declare-main-layout {
+  .wea-new-top-content {
+    overflow-y: hidden;
+  }
+
+  .declare-body {
+    height: 100%;
+    width: 100%;
+    padding: 16px;
+    overflow-y: auto;
+
+    .wea-new-table {
+      background: #fff;
+    }
+
+    .ant-table-tbody {
+      td {
+        width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+
+  }
+}
+
+.declare-dialog-layout {
+  background: #f6f6f6;
+
+  .wea-search-group {
+    padding: 16px;
+  }
+
+  .wea-select, .ant-select-selection, .ant-select {
+    width: 100%;
+  }
+
+  .wea-select {
+    display: inline-block;
+    position: relative;
+  }
+
+  .ant-select-selection {
+    height: 30px;
+    border-radius: 0;
+  }
+
+  .wea-content {
+    padding: 0;
+
+    .wea-form-cell-wrapper {
+      background: #FFF;
+      border: 1px solid #e5e5e5;
+      border-bottom: none;
+
+      .wea-form-cell {
+        border-bottom: 1px solid #e5e5e5;
+      }
+    }
+  }
+}
+
 .declare-status-box {
  .icon-span {
    cursor: pointer;
--- a/pc4mobx/hrmSalary/stores/declare.js
+++ b/pc4mobx/hrmSalary/stores/declare.js
@ -8,6 +8,10 @@ const { TableStore } = WeaTableNew;

 export class DeclareStore {
  @observable paymentForm = new WeaForm(); // declareDetail----在线申报-缴款Form
+  @observable declareForm = new WeaForm(); //薪资核算重构-核算form
+  //  ** 薪资核算重构-初始化核算form **
+  @action
+  initDeclareForm = () => this.declareForm = new WeaForm();


  @observable tableStore = new TableStore(); // new table
@ -16,7 +20,6 @@ export class DeclareStore {
  @observable hasRight = true; // 判断用户是有权限查看当前页面： 没有权限渲染无权限页面，有权限渲染数据
  @observable showSearchAd = false; // 高级搜索面板显示
  @observable loading = true; // 数据加载状态
-
  // 列表
  @observable listDataSource = [];
  @observable listColumns = [];