feature/2.17.1.2411.01-薪酬报表薪资明细显示模式

pc4mobx/hrmSalary/apis/statistics.js

@@ -150,7 +150,7 @@ export const getPageListTemplatelist = (params) => {
 export const changePageListTemplate = (params) => {
   return postFetch("/api/bs/hrmsalary/common/pageList/template/change", params);
 };
-//薪酬统计报表-重置自定义列
+//薪酬统计报表-删除模板
-export const resetPageListSetting = (params) => {
+export const deleteTemplatePageList = (params) => {
-  return postFetch("/api/bs/hrmsalary/common/pageList/reset/setting", params);
+  return postFetch("/api/bs/hrmsalary/common/pageList/template/delete", params);
 };

pc4mobx/hrmSalary/components/CustomBrowser/components/customTransferDialog.js

@@ -42,8 +42,9 @@ class CustomTransferDialog extends Component {
       }
     } else if (nextProps.visible !== this.props.visible && !nextProps.visible) {
       this.setState({
-        query: { [this.props.searchParamsKey]: "" },
+        query: { [this.props.searchParamsKey]: "" }, selectedRowKeys: [],
-        rightDatas: [], rightCheckedKeys: [], leftListSelectedData: [], leftListSelectedKeys: []
+        rightDatas: [], rightCheckedKeys: [], leftListSelectedData: [], leftListSelectedKeys: [],
+        pageInfo: { current: 1, pageSize: 10, total: 0 }
       });
       this.selectedData = {};
     }
@@ -145,7 +146,7 @@ class CustomTransferDialog extends Component {
       columns
     } = this.state;
     const {
-      searchParamsKey, saveLoading, dialogType = "", rowKey, buttons = [
+      searchParamsKey, saveLoading, dialogType = "", rowKey, tableOpts = {}, buttons = [
         <Button type="primary" loading={saveLoading} onClick={this.handleOk}
                 disabled={_.isEmpty(rightDatas)}>{getLabel(111, "确 定")}</Button>,
         <Button type="ghost" onClick={this.props.onCancel}>{getLabel(111, "取 消")}</Button>
@@ -203,7 +204,7 @@ class CustomTransferDialog extends Component {
       </div>
     </Spin>;
     if (dialogType === "table") {
-      const sheight = this.dialog ? this.dialog.state.height - 116 : 260;
+      const sheight = this.dialog ? this.dialog.state.height - 156 : 260;
       const pagination = {
         ...pageInfo,
         showTotal: total => `${getLabel(18609, "共")} ${total} ${getLabel(18256, "条")}`,
@@ -221,17 +222,19 @@ class CustomTransferDialog extends Component {
       };
       const rowSelection = {
         selectedRowKeys,
-        onChange: selectedRowKeys => this.setState({ selectedRowKeys })
+        onChange: selectedRowKeys => this.setState({ selectedRowKeys }, () => this.props.onSelect(selectedRowKeys))
       };
       dom = <div className="wea-hr-muti-input-table">
+        {this.props.children}
         <WeaTable dataSource={listDatas} loading={loading} pagination={pagination} scroll={{ y: sheight }}
-                  rowSelection={rowSelection} rowKey={rowKey || "id"} columns={columns}/>
+                  rowSelection={rowSelection} rowKey={rowKey || "id"}
+                  columns={!_.isEmpty(tableOpts) ? [...columns, tableOpts] : columns}/>
       </div>;
     }
     return (
       <WeaDialog
         {...this.props} initLoadCss ref={dom => this.dialog = dom} title={this.renderTitle()}
-        className="custom_browser_dialog" draggable={false} style={{
+        className="custom_browser_dialog" draggable={true} style={{
         width: 784, height: 460, minHeight: 200, minWidth: 380,
         maxHeight: "90%", maxWidth: "90%", overflow: "hidden", transform: "translate(0px, 0px)"
       }} buttons={buttons}>{dom}</WeaDialog>

pc4mobx/hrmSalary/components/CustomBrowser/index.less

@@ -24,6 +24,19 @@
     padding: 8px 16px;
     height: 100%;
 
+    .table_opts {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      width: 100%;
+      height: 40px;
+      background: #FFF;
+
+      .wea-button-icon {
+        margin-right: 10px;
+      }
+    }
+
     .wea-new-table {
       background: #FFF;
     }

pc4mobx/hrmSalary/pages/analysisOfSalaryStatistics/components/salaryDetails.js

@@ -8,7 +8,7 @@ import React, { Component } from "react";
 import { inject, observer } from "mobx-react";
 import { WeaTableNew } from "comsMobx";
 import { WeaLoadingGlobal, WeaLocaleProvider, WeaSelect } from "ecCom";
-import { Button, message, Spin } from "antd";
+import { Button, message, Modal, Spin } from "antd";
 import { getIframeParentHeight } from "../../../util";
 import { sysConfCodeRule } from "../../../apis/ruleconfig";
 import CustomTransferDialog from "../../../components/CustomBrowser/components/customTransferDialog";
@@ -31,7 +31,7 @@ class SalaryDetails extends Component {
     super(props);
     this.state = {
       loading: false, dataSource: [], columns: [], selectedRowKeys: [], tempPageList: [], sumRow: {},
-      pageInfo: { current: 1, pageSize: 10, total: 0 }, payload: {}, templateId: "",
+      pageInfo: { current: 1, pageSize: 10, total: 0 }, payload: {}, templateId: "", tempManageQuery: false,
       showTotalCell: false, updateSum: true, tempDialog: { visible: false, setting: [], id: "", template: {} },
       transferDialog: {
         visible: false, searchParamsKey: "name", saveLoading: false,
@@ -39,14 +39,13 @@ class SalaryDetails extends Component {
         completeURL: "", convertDatasource: datas => {
           return {
             listDatas: _.map(datas.setting, o => ({ id: o.id || o.column, name: o.name || o.text })),
-            checked: this.converCheckedCol(datas)
+            checked: converCheckedCol(datas)
           };
         },
         dialogType: "temp"
       },
       tempManageDialog: { //模板管理
-        visible: false, completeURL: "", dialogType: "table",
+        visible: false, completeURL: "", dialogType: "table", dataParams: { page: "salary_details_report" }
-        dataParams: { page: "salary_details_report" }
       }
     };
   }
@@ -180,13 +179,6 @@ class SalaryDetails extends Component {
       completeURL: "/api/bs/hrmsalary/common/pageList/template/get", dialogType: "temp"
     }
   }, () => this.getPageListTemplatelist());
-  converCheckedCol = (data) => {
-    return _.reduce(data.checked || [], (pre, cur) => {
-      const item = _.find(data.setting, k => k.column === cur.column);
-      if (!_.isEmpty(item)) return [...pre, { ...item, id: item.id || item.column, name: item.name || item.text }];
-      return pre;
-    }, []);
-  };
 
   savePageListSetting = (values) => {
     const { transferDialog } = this.state;
@@ -217,7 +209,8 @@ class SalaryDetails extends Component {
   };
   changePageListTemplate = (templateId) => {
     this.setState({ templateId }, () => {
-      API.changePageListTemplate({ page: "salary_details_report", templateId }).then(({ status, errormsg }) => {
+      API.changePageListTemplate({ page: "salary_details_report", templateId })
+        .then(({ status, errormsg }) => {
           if (status) {
             message.success(getLabel(111, "操作成功！"));
             this.setState({
@@ -235,9 +228,27 @@ class SalaryDetails extends Component {
         });
     });
   };
+  handleDelTemp = (ids) => {
+    Modal.confirm({
+      title: getLabel(131329, "信息确认"),
+      content: getLabel(111, "确认删除吗?"),
+      onOk: () => {
+        API.deleteTemplatePageList({ ids }).then(({ status, errormsg }) => {
+          if (status) {
+            message.success(getLabel(111, "操作成功！"));
+            this.setState({ tempManageQuery: !this.state.tempManageQuery }, () => this.getPageListTemplatelist());
+          } else {
+            message.error(errormsg);
+          }
+        });
+      }
+    });
+  };
 
   render() {
-    const { loading, dataSource, transferDialog, tempDialog, tempPageList, templateId, tempManageDialog } = this.state;
+    const {
+      loading, dataSource, transferDialog, tempDialog, tempPageList, templateId, tempManageDialog, tempManageQuery
+    } = this.state;
     const { dateRange, showSearchAd } = this.props;
     const { dialogType } = transferDialog;
     return (<React.Fragment>
@@ -295,7 +306,9 @@ class SalaryDetails extends Component {
                                      tempDialog: { ...tempDialog, visible: false, setting: [] }
                                    }, () => callback && callback())}
                                    onSuccess={this.getPageListTemplatelist}/>
-          <SalaryTempMangerDialog {...tempManageDialog} onCancel={() => this.setState({
+          {/*薪资明细自定义列模板管理*/}
+          <SalaryTempMangerDialog {...tempManageDialog} onDelete={this.handleDelTemp} isQuery={tempManageQuery}
+                                  onClick={this.handelAddTemp} onCancel={() => this.setState({
             tempManageDialog: { ...tempManageDialog, completeURL: "", visible: false }
           })}/>
         </div>
@@ -305,3 +318,11 @@ class SalaryDetails extends Component {
 }
 
 export default SalaryDetails;
+
+export const converCheckedCol = (data) => {
+  return _.reduce(data.checked || [], (pre, cur) => {
+    const item = _.find(data.setting, k => k.column === cur.column);
+    if (!_.isEmpty(item)) return [...pre, { ...item, id: item.id || item.column, name: item.name || item.text }];
+    return pre;
+  }, []);
+};

pc4mobx/hrmSalary/pages/analysisOfSalaryStatistics/components/salaryTempAdminDialog.js

@@ -0,0 +1,59 @@
+/*
+  * 薪酬报表-薪酬明细
+  * 模板管理新增编辑弹框
+  * @Author:    黎永顺
+  * @Date:      2024/12/4
+  * @Wechat:
+  * @Email:     971387674@qq.com
+  * @description:
+*/
+import React, { Component } from "react";
+import { WeaDialog, WeaLocaleProvider, WeaTransfer } from "ecCom";
+import { postFetch } from "../../../util/request";
+import { Button } from "antd";
+
+const getLabel = WeaLocaleProvider.getLabel;
+
+class SalaryTempAdminDialog extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: false, selectedKeys: [], dataSource: []
+    };
+  }
+
+  componentWillReceiveProps(nextProps, nextContext) {
+    if (nextProps.visible !== this.props.visible && nextProps.visible) {
+      const { dataParams = {} } = nextProps;
+      this.setState({ loading: true });
+      postFetch("/api/bs/hrmsalary/common/pageList/template/get", { ...dataParams })
+        .then(({ status, data }) => {
+          if (status) {
+            this.setState({
+              dataSource: _.map(data.setting, o => ({ id: o.column, name: o.text })),
+              selectedKeys: _.map(data.checked, o => o.column)
+            });
+          }
+        });
+    }
+  }
+
+  render() {
+    const { dataSource, selectedKeys } = this.state, { dataParams } = this.props;
+    return (<WeaDialog
+      {...this.props} initLoadCss ref={dom => this.dialog = dom} title={getLabel(111, "模板管理")}
+      className="temp_admin_dialog" style={{
+      width: 784, height: 460, minHeight: 200, minWidth: 380,
+      maxHeight: "90%", maxWidth: "90%", overflow: "hidden", transform: "translate(0px, 0px)"
+    }} buttons={[
+      <Button type="primary"
+              onClick={() => this.props.onAddTemp(dataParams.id, selectedKeys)}>{getLabel(111, "确 定")}</Button>,
+      <Button type="ghost" onClick={this.props.onCancel}>{getLabel(111, "取 消")}</Button>
+    ]}>
+      <WeaTransfer data={dataSource} selectedKeys={selectedKeys} onChange={v => this.setState({ selectedKeys: v })}
+                   height={this.dialog ? this.dialog.state.height - 10 : 260}/>
+    </WeaDialog>);
+  }
+}
+
+export default SalaryTempAdminDialog;

pc4mobx/hrmSalary/pages/analysisOfSalaryStatistics/components/salaryTempMangerDialog.js

@@ -8,14 +8,80 @@
   * @description:
 */
 import React, { Component } from "react";
-import { WeaLocaleProvider } from "ecCom";
+import { WeaButtonIcon, WeaLocaleProvider } from "ecCom";
 import CustomTransferDialog from "../../../components/CustomBrowser/components/customTransferDialog";
+import SalaryTempAdminDialog from "./salaryTempAdminDialog";
+import SalaryDetailsTempDialog from "./salaryDetailsTempDialog";
 
 const getLabel = WeaLocaleProvider.getLabel;
 
 class SalaryTempMangerDialog extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedRowKeys: [], tempAdminDialog: { visible: false, dataParams: { page: "salary_details_report" } },
+      tempDialog: { visible: false, setting: [], id: "", template: {} }
+    };
+  }
+
+  componentWillReceiveProps(nextProps, nextContext) {
+    if (nextProps.isQuery !== this.props.isQuery) this.setState({ selectedRowKeys: [] }, () => this.tempManageRef.getData());
+  }
+
+  handleTempAdminCols = (params = {}) => this.setState({
+    tempAdminDialog: { visible: true, dataParams: { ...this.state.tempAdminDialog.dataParams, ...params } }
+  });
+  handelAddTemp = (id = "", setting = []) => {
+    this.setState({
+      tempDialog: {
+        visible: true, setting, id, template: _.find(this.tempManageRef.state.listDatas, o => o.id === id)
+      }
+    });
+  };
+
   render() {
-    return (<CustomTransferDialog {...this.props} buttons={[]} title={getLabel(111, "模板管理")}/>);
+    const { selectedRowKeys, tempAdminDialog, tempDialog } = this.state;
+    return (<CustomTransferDialog ref={dom => this.tempManageRef = dom} {...this.props} buttons={[]}
+                                  title={getLabel(111, "模板管理")}
+                                  onSelect={v => this.setState({ selectedRowKeys: v })}
+                                  tableOpts={{
+                                    title: getLabel(111, "操作"),
+                                    dataIndex: "options",
+                                    width: 120,
+                                    render: (text, record) => (<React.Fragment>
+                                      {
+                                        record.canEdit &&
+                                        <a href="javascript:void(0);"
+                                           onClick={() => this.handleTempAdminCols({ id: record.id })}
+                                           style={{ marginRight: 10 }}>{getLabel(111, "编辑")}</a>
+                                      }
+                                      {
+                                        record.canEdit &&
+                                        <a href="javascript:void(0);"
+                                           onClick={() => this.props.onDelete([record.id])}>{getLabel(111, "删除")}</a>
+                                      }
+
+                                    </React.Fragment>)
+                                  }}>
+      <div className="table_opts">
+        <WeaButtonIcon buttonType="add" type="primary" title={getLabel(111, "添加")}
+                       onClick={() => this.handleTempAdminCols()}/>
+        <WeaButtonIcon buttonType="del" type="primary" title={getLabel(111, "删除")}
+                       onClick={() => this.props.onDelete(selectedRowKeys)} disabled={_.isEmpty(selectedRowKeys)}/>
+      </div>
+      {/*模板管理*/}
+      <SalaryTempAdminDialog {...tempAdminDialog} onAddTemp={this.handelAddTemp} onCancel={() => this.setState({
+        tempAdminDialog: { visible: false, dataParams: { page: "salary_details_report" } }
+      })}/>
+      {/*薪资明细模板设置*/}
+      <SalaryDetailsTempDialog {...tempDialog}
+                               onCancel={callback => this.setState({
+                                 tempDialog: { ...tempDialog, visible: false, setting: [] }
+                               }, () => callback && callback())}
+                               onSuccess={() => this.setState({
+                                 tempAdminDialog: { visible: false, dataParams: { page: "salary_details_report" } }
+                               }, () => this.tempManageRef.getData())}/>
+    </CustomTransferDialog>);
   }
 }