社保福利方案-自定义方案页面重构

2023-03-02 18:44:36 +08:00 · 2023-03-02 18:44:36 +08:00 · 10721ecba0
parent c902c32140
commit 10721ecba0
5 changed files with 161 additions and 69 deletions
--- a/pc4mobx/hrmSalary/apis/welfareScheme.js
+++ b/pc4mobx/hrmSalary/apis/welfareScheme.js
@ -62,7 +62,15 @@ export const getCustomCategoryForm = params => {
    return WeaTools.callApi('/api/bs/hrmsalary/sicategory/customCategoryForm', 'get', params);
 };
 export const getCustomCategoryList = params => {
-    return WeaTools.callApi('/api/bs/hrmsalary/sicategory/customCategoryList', 'get', params);
+    // return WeaTools.callApi('/api/bs/hrmsalary/sicategory/customCategoryList', 'get', params);
+    return fetch('/api/bs/hrmsalary/sicategory/customCategoryList', {
+        method: 'POST',
+        mode: 'cors',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(params)
+    }).then(res => res.json())
 };
 export const createSICategory = params => {
    return fetch('/api/bs/hrmsalary/sicategory/createSICategory', {
--- a/pc4mobx/hrmSalary/pages/socialSecurityBenefits/programme/customBenefitsTable.js
+++ b/pc4mobx/hrmSalary/pages/socialSecurityBenefits/programme/customBenefitsTable.js
@ -0,0 +1,131 @@
+/*
+ * Author: 黎永顺
+ * name: 社保福利方案-自定义福利表格
+ * Description:
+ * Date: 2023/3/2
+ */
+import React, { Component } from "react";
+import { WeaCheckbox, WeaTable } from "ecCom";
+import { message, Modal } from "antd";
+import { getCustomCategoryList, updateCustomCategoryStatus } from "../../../apis/welfareScheme";
+
+class CustomBenefitsTable extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: {
+        query: false
+      },
+      dataSource: [],
+      columns: [],
+      pageInfo: {
+        current: 1,
+        pageSize: 10,
+        total: 0
+      }
+    };
+  }
+
+  componentDidMount() {
+    this.getCustomCategoryList();
+  }
+
+  getCustomCategoryList = (extraPayload) => {
+    const { loading, pageInfo } = this.state;
+    const { welfareTypeEnum } = this.props;
+    const module = { welfareTypeEnum, ...pageInfo, ...extraPayload };
+    this.setState({ loading: { ...loading, query: true } });
+    getCustomCategoryList(module).then(({ status, data }) => {
+      this.setState({ loading: { ...loading, query: false } });
+      if (status) {
+        const { columns, list: dataSource, pageNum: current, pageSize, total } = data;
+        this.setState({
+          pageInfo: { ...pageInfo, current, pageSize, total },
+          dataSource,
+          columns
+        });
+      }
+    }).catch(() => this.setState({ loading: { ...loading, query: false } }));
+  };
+  getColumns = () => {
+    const { columns } = this.state;
+    const { showOperateBtn, onCustomEdit } = this.props;
+    return [..._.map(_.filter(columns, item => !!item.display), child => ({
+      ...child,
+      render: (text, record) => {
+        switch (child.dataIndex) {
+          case "isUse":
+            return (
+              <WeaCheckbox
+                value={text} display="switch" disabled={!showOperateBtn}
+                onChange={value => this.handleCustomBenefitsSwitch(record, value)}
+              />
+            );
+          default:
+            return <div dangerouslySetInnerHTML={{ __html: text }}/>;
+        }
+      }
+    })), {
+      title: "操作",
+      width: 120,
+      dataIndex: "operate",
+      render: (_, record) => {
+        return (
+          <div className="linkWapper">
+            {showOperateBtn &&
+              <a href="javascript: void(0);" onClick={() => onCustomEdit(record)}>编辑</a>
+            }
+          </div>
+        );
+      }
+    }];
+  };
+  handleCustomBenefitsSwitch = ({ id }, isUse) => {
+    Modal.confirm({
+      title: "信息确认",
+      content: `确认要${isUse ? "启用" : "停用"}吗`,
+      onOk: () => {
+        const payload = { id, isUse };
+        updateCustomCategoryStatus(payload).then(({ status, errormsg }) => {
+          if (status) {
+            message.success("操作成功");
+            this.getCustomCategoryList();
+          } else {
+            message.error(errormsg || "操作失败");
+          }
+        });
+      }
+    });
+  };
+
+  render() {
+    const { dataSource, pageInfo, loading } = this.state;
+    const pagination = {
+      ...pageInfo,
+      showTotal: total => `共 ${total} 条`,
+      showQuickJumper: true,
+      showSizeChanger: true,
+      pageSizeOptions: ["10", "20", "50", "100"],
+      onShowSizeChange: (current, pageSize) => {
+        this.setState({
+          pageInfo: { ...pageInfo, current, pageSize }
+        }, () => this.getCustomCategoryList());
+      },
+      onChange: current => {
+        this.setState({
+          pageInfo: { ...pageInfo, current }
+        }, () => this.getCustomCategoryList());
+      }
+    };
+    return (
+      <WeaTable
+        columns={this.getColumns()}
+        dataSource={dataSource}
+        pagination={pagination}
+        loading={loading.query}
+      />
+    );
+  }
+}
+
+export default CustomBenefitsTable;
--- a/pc4mobx/hrmSalary/pages/socialSecurityBenefits/programme/customNewModal.js
+++ b/pc4mobx/hrmSalary/pages/socialSecurityBenefits/programme/customNewModal.js
@ -16,11 +16,11 @@ export default class CustomNewModal extends React.Component {
    const { programmeStore: { createSICategory, customRequest, updateCustomCategory } } = this.props;
    if (!this.props.edit) {  // 新增
      createSICategory(customRequest).then(() => {
-        this.props.onCancel();
+        this.props.onCancel(true);
      });
    } else {
      updateCustomCategory(customRequest).then(() => {
-        this.props.onCancel();
+        this.props.onCancel(true);
      });
    }
  }
--- a/pc4mobx/hrmSalary/pages/socialSecurityBenefits/programme/index.js
+++ b/pc4mobx/hrmSalary/pages/socialSecurityBenefits/programme/index.js
@ -15,6 +15,7 @@ import CustomPaginationTable from "../../../components/customPaginationTable";
 import TwoColContent from "../../../components/twoColContent";
 import CopySchemaModal from "./copySchemaModal";
 import "./index.less";
+import CustomBenefitsTable from "./customBenefitsTable";

 const WeaMobxTable = WeaTableNew.WeaTable;

@ -151,47 +152,6 @@ export default class Programme extends React.Component {
    });
  }

-  getCustomColumns = columns => {
-    const { taxAgentStore: { showOperateBtn } } = this.props;
-    let newColumns = [];
-    newColumns = columns.map(column => {
-      let newColumn = column;
-      newColumn.render = (text, record, index) => {
-        //前端元素转义
-        let valueSpan =
-          record[newColumn.dataIndex + "span"] !== undefined
-            ? record[newColumn.dataIndex + "span"]
-            : record[newColumn.dataIndex];
-        switch (newColumn.dataIndex) {
-          case "operate":
-            return (
-              <a
-                href="javascript:void(0);"
-                onClick={() => {
-                  this.onCustomEdit(record);
-                }}>
-                编辑
-              </a>
-            );
-          case "is_use":
-            return (
-              <Switch
-                disabled={!showOperateBtn}
-                checked={text == 1}
-                onChange={value => {
-                  this.handleCategoryStatusChange(record, value);
-                }}
-              />
-            );
-          default:
-            return <div dangerouslySetInnerHTML={{ __html: valueSpan }}/>;
-        }
-      };
-      return newColumn;
-    });
-    return newColumns;
-  };
-
  onEdit(record) {
    let id = record.id;
    const { programmeStore } = this.props;
@ -226,14 +186,6 @@ export default class Programme extends React.Component {
    });
  };

-  onCustomOperatesClick(record, index, operate, flag) {
-    switch (operate.text.toString()) {
-      case "编辑": // 编辑
-        this.onCustomEdit(record);
-        break;
-    }
-  }
-
  onCustomEdit = (record) => {
    const {
      programmeStore: { getCustomForm, setCustomNewVisible, setCustomRequest },
@ -249,9 +201,9 @@ export default class Programme extends React.Component {
      customEdit: true
    });
    setCustomRequest({
-      insuranceName: record["insurance_name"],
+      insuranceName: record["insuranceName"],
      id: record.id,
-      isUse: record.is_use,
+      isUse: record.isUse,
      paymentScope: record["payment_scope"].split(",").map(item => paymentScopeEnum[item]).join(","),
      welfareType: welfareTypeEnum[record.welfare_type]
    });
@ -266,12 +218,10 @@ export default class Programme extends React.Component {

  render() {
    const { programmeStore, taxAgentStore: { showOperateBtn } } = this.props;
-    const { loading, hasRight, form, tableStore, getTableDatas } = programmeStore;
+    const { loading, hasRight, form, getTableDatas } = programmeStore;
    const {
      selectedKey,
      setSelectedKey,
-      getCustomCategoryList,
-      customTableStore,
      customSelectkey,
      setCustomSelectkey,
      requestParams,
@ -446,7 +396,7 @@ export default class Programme extends React.Component {
                    style={{ width: "150px" }}
                    onChange={v => {
                      setCustomSelectkey(v);
-                      getCustomCategoryList(v);
+                      this.customBenefitsTableRef.getCustomCategoryList({ curren: 1, welfareTypeEnum: v });
                    }}
                  />}
              </div>
@ -456,7 +406,6 @@ export default class Programme extends React.Component {
              handleSlideClose();
              if (v == "custom") {
                // 自定义福利
-                getCustomCategoryList();
              } else {
                getTableDatas(v);
              }
@ -467,13 +416,19 @@ export default class Programme extends React.Component {
              {selectedKey == "custom"
                ? <TwoColContent
                  leftContent={
-                    <WeaMobxTable // table内部做了loading加载处理，页面就不需要再加了
-                      comsWeaTableStore={tableStore} // table store
-                      hasOrder={true} // 是否启用排序
-                      needScroll={true} // 是否启用table内部列表滚动，将自适应到父级高度
-                      getColumns={this.getCustomColumns}
-                      onOperatesClick={this.onCustomOperatesClick.bind(this)}
+                    <CustomBenefitsTable
+                      ref={dom => this.customBenefitsTableRef = dom}
+                      showOperateBtn={showOperateBtn}
+                      welfareTypeEnum={customSelectkey}
+                      onCustomEdit={this.onCustomEdit}
                    />
+                    // <WeaMobxTable // table内部做了loading加载处理，页面就不需要再加了
+                    //   comsWeaTableStore={tableStore} // table store
+                    //   hasOrder={true} // 是否启用排序
+                    //   needScroll={true} // 是否启用table内部列表滚动，将自适应到父级高度
+                    //   getColumns={this.getCustomColumns}
+                    //   onOperatesClick={this.onCustomOperatesClick.bind(this)}
+                    // />
                  }
                  rightContent={renderCustomRightContent()}
                />
@ -562,8 +517,9 @@ export default class Programme extends React.Component {
            condition={formCondition}
            form={form}
            edit={this.state.customEdit}
-            onCancel={() => {
+            onCancel={(isRefresh) => {
              setCustomNewVisible(false);
+              isRefresh && this.customBenefitsTableRef.getCustomCategoryList();
            }}
          />}
      </div>
--- a/pc4mobx/hrmSalary/stores/programme.js
+++ b/pc4mobx/hrmSalary/stores/programme.js
@ -120,7 +120,6 @@ export class ProgrammeStore {
    params.welfareTypeEnum = selectKey;
    API.getCustomCategoryList(params).then(action(res => {
      if (res.status) { // 接口请求成功/失败处理
-        this.tableStore.getDatas(res.data.datas, 1); // table 请求数据
      } else {
        message.error(res.errormsg || "接口调用失败！");
      }
@ -294,7 +293,6 @@ export class ProgrammeStore {
        if (res.status) {
          message.success("新增成功");
          resolve();
-          this.getCustomCategoryList();
        } else {
          reject();
          message.error(res.errormsg || "新增失败");
@ -331,7 +329,6 @@ export class ProgrammeStore {
        if (res.status) {
          message.success("编辑成功");
          resolve();
-          this.getCustomCategoryList();
        } else {
          reject();
          message.error(res.errormsg || "编辑失败");