From b4a966ea20bce5566ff4fab96b44b799a34cd399 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=8E=E6=B0=B8=E9=A1=BA?= <971387674@qq.com>
Date: Fri, 27 Sep 2024 15:32:21 +0800
Subject: [PATCH] =?UTF-8?q?feature/2.15.1.2407.01-=E6=9D=83=E9=99=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pc4mobx/hrmSalary/apis/taxAgent.js            |  8 ++
 .../components/customBrowserDialog.js         | 68 ++++++++------
 .../components/CustomBrowser/index.less       | 33 +++++--
 .../roleManagement/components/index.less      | 19 ++++
 .../roleDetailSetDialog/detailDialog.js       | 92 +++++++++++++++++++
 .../components/roleDetailSetDialog/index.js   | 37 ++++++--
 .../hrmSalary/pages/roleManagement/index.js   | 29 +++++-
 7 files changed, 237 insertions(+), 49 deletions(-)
 create mode 100644 pc4mobx/hrmSalary/pages/roleManagement/components/roleDetailSetDialog/detailDialog.js

diff --git a/pc4mobx/hrmSalary/apis/taxAgent.js b/pc4mobx/hrmSalary/apis/taxAgent.js
index 20997a2b..1d1509fc 100644
--- a/pc4mobx/hrmSalary/apis/taxAgent.js
+++ b/pc4mobx/hrmSalary/apis/taxAgent.js
@@ -160,3 +160,11 @@ export const getAuthOptTree = (params) => {
 export const getRole = (params) => {
   return WeaTools.callApi("/api/bs/hrmsalary/auth/role/getRole", "GET", params);
 };
+//成员明细列表
+export const authMemberDetail = (params) => {
+  return postFetch("/api/bs/hrmsalary/auth/member/detail", params);
+};
+//数据明细列表
+export const authDataDetail = (params) => {
+  return postFetch("/api/bs/hrmsalary/auth/data/detail", params);
+};
diff --git a/pc4mobx/hrmSalary/components/CustomBrowser/components/customBrowserDialog.js b/pc4mobx/hrmSalary/components/CustomBrowser/components/customBrowserDialog.js
index 9eabe37a..4cb5a125 100644
--- a/pc4mobx/hrmSalary/components/CustomBrowser/components/customBrowserDialog.js
+++ b/pc4mobx/hrmSalary/components/CustomBrowser/components/customBrowserDialog.js
@@ -97,7 +97,6 @@ class CustomBrowserDialog extends Component {
       }
     }
   };
-
   onLeftListCheck = (keys, datas) => {
     const { leftListSelectedData } = this.state;
     let targets = leftListSelectedData.concat(datas);
@@ -154,6 +153,31 @@ class CustomBrowserDialog extends Component {
     }
     return bool;
   };
+  renderTitle = () => {
+    const { dialogType, searchParamsKey, isSingle } = this.props, {
+      query, pageInfo, selectedRowKeys, singleFilterVal
+    } = this.state;
+    return (<div className="wea-hr-muti-dialog-title">
+      <span>{getLabel(111, "数据选择")}</span>
+      {
+        dialogType === "table" ?
+          <WeaInputSearch
+            value={query[searchParamsKey]} style={{ width: 220 }}
+            onChange={value => this.setState({ query: { ...query, [searchParamsKey]: value } })}
+            onSearch={() => {
+              this.setState({ pageInfo: { ...pageInfo, current: 1 } }, () => {
+                this.getData();
+                selectedRowKeys.forEach((v) => {
+                  let item = this.getItemById(v);
+                  if (item) this.selectedData[v] = item;
+                });
+              });
+            }}/> : isSingle ?
+            <WeaInputSearch value={singleFilterVal} onChange={singleFilterVal => this.setState({ singleFilterVal })}/> :
+            <div/>
+      }
+    </div>);
+  };
 
   render() {
     const {
@@ -161,7 +185,7 @@ class CustomBrowserDialog extends Component {
       singleFilterVal
     } = this.state;
     const { dialogType, tableProps: { rowKey, columns }, isSingle, searchParamsKey } = this.props;
-    const sheight = this.dialog ? this.dialog.state.height - 55 : 260;
+    const sheight = this.dialog ? this.dialog.state.height - 116 : 260;
     const buttons = [
       <Button type="primary" onClick={this.handleOk}
               disabled={dialogType !== "table" && _.isEmpty(rightDatas)}>{getLabel(111, "确 定")}</Button>,
@@ -172,7 +196,7 @@ class CustomBrowserDialog extends Component {
     if (rightCheckedKeys && rightCheckedKeys.length > 0) leftActive = true;
     if (rightDatas && rightDatas.length > 0) rightAllActive = true;
     let dom = <Spin spinning={loading}>
-      <div style={{ padding: 10, height: "100%" }} className="wea-hr-muti-dialog">
+      <div className="wea-hr-muti-dialog">
         {
           !isSingle ? <React.Fragment>
               <div className="wea-hr-muti-input-left">
@@ -184,7 +208,7 @@ class CustomBrowserDialog extends Component {
                   </Col>
                 </Row>
                 <div>
-                  <WeaNewScroll height={sheight}>
+                  <WeaNewScroll height={this.dialog ? this.dialog.state.height - 51 : 260}>
                     <CustomBrowserMutiLeft
                       filterData={rightDatas}
                       datas={listDatas}
@@ -209,19 +233,16 @@ class CustomBrowserDialog extends Component {
               </div>
               <div className="wea-hr-muti-input-right">
                 <CustomBrowserMutiRight
-                  height={sheight} data={rightDatas} checkedKeys={rightCheckedKeys}
+                  height={this.dialog ? this.dialog.state.height - 51 : 260}
+                  data={rightDatas} checkedKeys={rightCheckedKeys}
                   checkedCb={rightCheckedKeys => this.setState({ rightCheckedKeys })}
                   onDoubleClick={this.onRightDoubleClick}
                 />
               </div>
             </React.Fragment> :
-            <React.Fragment>
-              <WeaInputSearch value={singleFilterVal} style={{ width: "100%", marginBottom: 10 }}
-                              onChange={singleFilterVal => this.setState({ singleFilterVal })}/>
-              <WeaTransferList height={this.dialog ? this.dialog.state.height - 65 : 260} checkedKeys={[]}
-                               checkedCb={([id]) => this.handleRowClick(_.find(listDatas, item => item.id === id))}
-                               data={listDatas.filter((item) => item.name.indexOf(_.trim(singleFilterVal)) > -1)}/>
-            </React.Fragment>
+            <WeaTransferList height={this.dialog ? this.dialog.state.height - 16 : 260} checkedKeys={[]}
+                             checkedCb={([id]) => this.handleRowClick(_.find(listDatas, item => item.id === id))}
+                             data={listDatas.filter((item) => item.name.indexOf(_.trim(singleFilterVal)) > -1)}/>
         }
       </div>
     </Spin>;
@@ -257,33 +278,20 @@ class CustomBrowserDialog extends Component {
         selectedRowKeys,
         onChange: selectedRowKeys => this.setState({ selectedRowKeys })
       };
-      dom = <React.Fragment>
-        <WeaInputSearch value={query[searchParamsKey]} className="tableSearch"
-                        onChange={value => this.setState({ query: { ...query, [searchParamsKey]: value } })}
-                        onSearch={() => {
-                          this.setState({ pageInfo: { ...pageInfo, current: 1 } }, () => {
-                            this.getData();
-                            selectedRowKeys.forEach((v) => {
-                              let item = this.getItemById(v);
-                              if (item) this.selectedData[v] = item;
-                            });
-                          });
-                        }}/>
+      dom = <div className="wea-hr-muti-input-table">
         <WeaTable dataSource={listDatas} loading={loading} pagination={pagination} scroll={{ y: sheight }}
                   onRowClick={this.handleRowClick} rowSelection={!isSingle ? rowSelection : null}
                   rowKey={rowKey || "id"} columns={columns}/>
-      </React.Fragment>;
+      </div>;
     }
     dialogType === "table" && isSingle && buttons.splice(0, 1);
     return (
       <WeaDialog
-        {...this.props} initLoadCss ref={dom => this.dialog = dom} title={getLabel(111, "数据选择")}
-        className="custom_browser_dialog" style={{
+        {...this.props} initLoadCss ref={dom => this.dialog = dom} title={this.renderTitle()}
+        className="custom_browser_dialog" draggable={false} style={{
         width: 784, height: 460, minHeight: 200, minWidth: 380,
         maxHeight: "90%", maxWidth: "90%", overflow: "hidden", transform: "translate(0px, 0px)"
-      }} buttons={buttons}>
-        {dom}
-      </WeaDialog>
+      }} buttons={buttons}>{dom}</WeaDialog>
     );
   }
 }
diff --git a/pc4mobx/hrmSalary/components/CustomBrowser/index.less b/pc4mobx/hrmSalary/components/CustomBrowser/index.less
index 8cf2ce40..d4d61a16 100644
--- a/pc4mobx/hrmSalary/components/CustomBrowser/index.less
+++ b/pc4mobx/hrmSalary/components/CustomBrowser/index.less
@@ -1,10 +1,18 @@
 .custom_browser_dialog {
-  .tableSearch {
-    float: right;
-    margin: 16px;
-    position: relative;
-    z-index: 99;
-    min-width: 200px;
+  .wea-hr-muti-dialog-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .wea-hr-muti-input-table {
+    background: #f6f6f6;
+    padding: 8px 16px;
+    height: 100%;
+
+    .wea-new-table {
+      background: #FFF;
+    }
   }
 
   .ant-spin-nested-loading, .ant-spin-container {
@@ -12,6 +20,19 @@
   }
 
   .wea-hr-muti-dialog {
+    height: 100%;
+    background: #f6f6f6;
+    padding: 8px 16px;
+
+    .wea-hr-muti-input-left, .wea-hr-muti-input-right {
+      background: #FFF;
+    }
+
+    .wea-transfer-list {
+      background: #FFF;
+      border: 1px solid #e9e9e9;
+    }
+
     .wea-input-focus {
       height: 35px !important;
       width: 100% !important;
diff --git a/pc4mobx/hrmSalary/pages/roleManagement/components/index.less b/pc4mobx/hrmSalary/pages/roleManagement/components/index.less
index aaac5a7e..e471d7e0 100644
--- a/pc4mobx/hrmSalary/pages/roleManagement/components/index.less
+++ b/pc4mobx/hrmSalary/pages/roleManagement/components/index.less
@@ -99,3 +99,22 @@
     }
   }
 }
+
+.authDetail_dialog {
+  .authDetail-dialog-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .authDetail-table {
+    background: #f6f6f6;
+    padding: 8px 16px;
+    height: 100%;
+
+    .wea-new-table {
+      background: #FFF;
+    }
+  }
+
+}
diff --git a/pc4mobx/hrmSalary/pages/roleManagement/components/roleDetailSetDialog/detailDialog.js b/pc4mobx/hrmSalary/pages/roleManagement/components/roleDetailSetDialog/detailDialog.js
new file mode 100644
index 00000000..4c59b8bf
--- /dev/null
+++ b/pc4mobx/hrmSalary/pages/roleManagement/components/roleDetailSetDialog/detailDialog.js
@@ -0,0 +1,92 @@
+/*
+  *  角色详情设置弹窗
+  *   成员、数据明细查询
+  * @Author:    黎永顺
+  * @Date:      2024/9/27
+  * @Wechat:
+  * @Email:     971387674@qq.com
+  * @description:
+*/
+import React, { Component } from "react";
+import { WeaDialog, WeaInputSearch, WeaLocaleProvider, WeaTable } from "ecCom";
+import * as API from "../../../../apis/taxAgent";
+import "../index.less";
+
+const getLabel = WeaLocaleProvider.getLabel;
+const APIFOX = {
+  "auth.MemberTargetTypeEnum": API.authMemberDetail,
+  "auth.DataTargetTypeEnum": API.authDataDetail
+};
+
+class DetailDialog extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: false, pageInfo: { current: 1, pageSize: 10, total: 0 },
+      query: { username: "" }, dataSource: [], columns: []
+    };
+  }
+
+  componentWillReceiveProps(nextProps, nextContext) {
+    if (nextProps.visible !== this.props.visible && nextProps.visible) this.getData(nextProps);
+    if (nextProps.visible !== this.props.visible && !nextProps.visible) this.setState({ query: { username: "" } });
+  }
+
+  getData = (props) => {
+    const { pageInfo, query } = this.state, { roleId, selectedKey } = props || this.props;
+    let payload = { ...pageInfo, ...query, roleId };
+    this.setState({ loading: true });
+    APIFOX[selectedKey](payload).then(({ status, data }) => {
+      this.setState({ loading: false });
+      if (status) {
+        console.log(data);
+      }
+    });
+  };
+  renderTitle = () => {
+    const { selectedKey } = this.props, { query } = this.state;
+    const title = selectedKey === "auth.MemberTargetTypeEnum" ? getLabel(111, "成员明细") : getLabel(111, "数据明细");
+    return (<div className="authDetail-dialog-title">
+      <span>{title}</span>
+      <WeaInputSearch value={query.username} onChange={v => this.setState({ query: { username: v } })}
+                      onSearch={v => this.setState({ pageInfo: { current: 1 } }, () => this.getData())}/>
+    </div>);
+  };
+
+  render() {
+    const { loading, dataSource, pageInfo, columns } = this.state;
+    const sheight = this.dialog ? this.dialog.state.height - 16 : 260;
+
+    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.getData());
+      },
+      onChange: current => {
+        this.setState({ pageInfo: { ...pageInfo, current } }, () => this.getData());
+      }
+    };
+
+    return (
+      <WeaDialog
+        {...this.props} initLoadCss ref={dom => this.dialog = dom} title={this.renderTitle()}
+        className="authDetail_dialog" style={{
+        width: 784, height: 460, minHeight: 200, minWidth: 380,
+        maxHeight: "90%", maxWidth: "90%", overflow: "hidden", transform: "translate(0px, 0px)"
+      }} buttons={[]}>
+        <div className="authDetail-table">
+          <WeaTable dataSource={dataSource} loading={loading} pagination={pagination} scroll={{ y: sheight }}
+                    rowKey="id" columns={columns}/>
+        </div>
+      </WeaDialog>
+    );
+  }
+}
+
+export default DetailDialog;
diff --git a/pc4mobx/hrmSalary/pages/roleManagement/components/roleDetailSetDialog/index.js b/pc4mobx/hrmSalary/pages/roleManagement/components/roleDetailSetDialog/index.js
index bcacf2ec..4dc8d2c2 100644
--- a/pc4mobx/hrmSalary/pages/roleManagement/components/roleDetailSetDialog/index.js
+++ b/pc4mobx/hrmSalary/pages/roleManagement/components/roleDetailSetDialog/index.js
@@ -24,6 +24,7 @@ import {
 } from "ecCom";
 import { commonEnumList } from "../../../../apis/archive";
 import EditRoleDialog from "./editRoleDialog";
+import DetailDialog from "./detailDialog";
 import AuthTree from "./authTree";
 import * as API from "../../../../apis/taxAgent";
 import { Button, Col, message, Modal, Row } from "antd";
@@ -55,6 +56,7 @@ class Index extends Component {
       replaceDatas: [], loading: { set: false, query: false, async: false, delete: false },
       columns: [], dataSource: [], pageInfo: { current: 1, pageSize: 10, total: 0 },
       editOperatorDialog: { visible: false, linkOptions: [], record: {} },
+      detailDialog: { visible: false, roleId: "", selectedKey: "" },
       dataTargetSettings: { link: "OR", sortedIndex: null }, conditions: [],
       formData: { taxAgentIds: [], sobIds: [] }
     };
@@ -63,7 +65,11 @@ class Index extends Component {
   componentWillReceiveProps(nextProps, nextContext) {
     if (nextProps.visible !== this.props.visible && nextProps.visible) {
       this.setState({
-        name: nextProps.name, selectedKey: nextProps.selectedKey || "baseinfo"
+        name: nextProps.name, selectedKey: nextProps.selectedKey || "baseinfo",
+        detailDialog: {
+          ...this.state.detailDialog, roleId: nextProps.roleId,
+          selectedKey: nextProps.selectedKey || "baseinfo"
+        }
       }, () => {
         !["auth.AuthTargetTypeEnum", "baseinfo"].includes(this.state.selectedKey) && this.getEnumList();
         !["auth.AuthTargetTypeEnum", "baseinfo"].includes(this.state.selectedKey) && this.getSettingRoler(nextProps.roleId);
@@ -220,6 +226,7 @@ class Index extends Component {
       this.setState({ loading: { ...this.state.loading, set: false } });
       if (status) {
         message.success(getLabel(111, "操作成功！"));
+        this.props.onSearch && this.props.onSearch();
       } else {
         message.error(errormsg);
       }
@@ -253,6 +260,7 @@ class Index extends Component {
       this.setState({ async: false });
       if (status) {
         message.success(getLabel(111, "操作成功！"));
+        this.props.onSearch && this.props.onSearch();
       } else {
         message.error(errormsg);
       }
@@ -345,17 +353,19 @@ class Index extends Component {
   };
 
   render() {
-    const { roleId, taxAgentStore } = this.props;
+    const { roleId, taxAgentStore, counts } = this.props;
     const {
       selectedKey, name, options, enumType, pageInfo, columns, dataSource, loading, selectedRowKeys, editOperatorDialog,
-      dataTargetSettings
+      dataTargetSettings, detailDialog
     } = this.state;
     const { linkOptions } = editOperatorDialog;
     const tabs = [
-      { title: getLabel(111, "基础信息"), viewcondition: "baseinfo" },
-      { title: getLabel(111, "成员设置"), viewcondition: "auth.MemberTargetTypeEnum" },
-      { title: getLabel(111, "功能权限"), viewcondition: "auth.AuthTargetTypeEnum" },
-      { title: getLabel(111, "数据范围"), viewcondition: "auth.DataTargetTypeEnum" }
+      { title: getLabel(111, "基础信息"), viewcondition: "baseinfo", showcount: true, count: "resources" },
+      {
+        title: getLabel(111, "成员设置"), viewcondition: "auth.MemberTargetTypeEnum", showcount: true, count: "members"
+      },
+      { title: getLabel(111, "功能权限"), viewcondition: "auth.AuthTargetTypeEnum", showcount: true, count: "opts" },
+      { title: getLabel(111, "数据范围"), viewcondition: "auth.DataTargetTypeEnum", showcount: true, count: "datas" }
     ];
     const pagination = {
       ...pageInfo,
@@ -383,6 +393,11 @@ class Index extends Component {
     ];
     ["auth.AuthTargetTypeEnum", "baseinfo"].includes(selectedKey) && buttons.shift();
     !["auth.AuthTargetTypeEnum", "baseinfo"].includes(selectedKey) && buttons.pop();
+    !["auth.AuthTargetTypeEnum", "baseinfo"].includes(selectedKey) && buttons.unshift(
+      <Button type="primary" onClick={() => this.setState({
+        detailDialog: { ...detailDialog, visible: true }
+      })}>{selectedKey === "auth.MemberTargetTypeEnum" ? getLabel(111, "成员明细") : getLabel(111, "数据明细")}</Button>
+    );
     return (
       <WeaDialog
         {...this.props} hasScroll className="tax_role_set_dialog" initLoadCss
@@ -395,9 +410,10 @@ class Index extends Component {
         <div className="tax_role_set_container">
           <Row>
             <div className="tax_role_form_item">
-              <WeaTab datas={tabs} keyParam="viewcondition" selectedKey={selectedKey}
+              <WeaTab datas={tabs} keyParam="viewcondition" selectedKey={selectedKey} countParam="count" counts={counts}
                       onChange={v => this.setState({
-                        selectedKey: v, replaceDatas: [], selectedRowKeys: []
+                        selectedKey: v, replaceDatas: [], selectedRowKeys: [],
+                        detailDialog: { ...detailDialog, selectedKey: v }
                       }, () => {
                         taxAgentStore.roleForm.resetForm();
                         const { selectedKey } = this.state;
@@ -464,6 +480,9 @@ class Index extends Component {
                                 onCancel={callback => this.setState({
                                   editOperatorDialog: { ...editOperatorDialog, visible: false, record: {} }
                                 }, () => callback && callback())}/>
+                {/*成员、数据明细查看*/}
+                <DetailDialog {...detailDialog}
+                              onCancel={() => this.setState({ detailDialog: { ...detailDialog, visible: false } })}/>
               </Col>
             </Row>
           }
diff --git a/pc4mobx/hrmSalary/pages/roleManagement/index.js b/pc4mobx/hrmSalary/pages/roleManagement/index.js
index 89f47949..3b419943 100644
--- a/pc4mobx/hrmSalary/pages/roleManagement/index.js
+++ b/pc4mobx/hrmSalary/pages/roleManagement/index.js
@@ -30,8 +30,11 @@ class Index extends Component {
     this.state = {
       dataSource: [], columns: [], pageInfo: { current: 1, pageSize: 10, total: 0 },
       loading: false, selectedRowKeys: [], addRoleDialog: { taxAgentId: "", visible: false },
-      roleSetDialog: { visible: false, roleId: "", name: "", selectedKey: "" },
-      logDialogVisible: false, filterConditions: "", showSearchAd: false, syncLoading: false
+      logDialogVisible: false, filterConditions: "", showSearchAd: false, syncLoading: false,
+      roleSetDialog: {
+        visible: false, roleId: "", name: "", selectedKey: "",
+        counts: { datas: 0, members: 0, resources: 0, opts: 0 }
+      }
     };
   }
 
@@ -106,12 +109,30 @@ class Index extends Component {
               </React.Fragment>
             )
           }]
+        }, () => {
+          const { roleSetDialog, dataSource } = this.state;
+          roleSetDialog.roleId && this.setState({
+            roleSetDialog: {
+              ...roleSetDialog, counts: {
+                ...roleSetDialog.counts, ..._.reduce(_.keys(roleSetDialog.counts), (pre, cur) => ({
+                  ...pre, [cur]: _.find(dataSource, o => o.id === roleSetDialog.roleId)[cur] || 0
+                }), {})
+              }
+            }
+          });
         });
       }
     });
   };
   showRoleSetDialog = (role) => this.setState({
-    roleSetDialog: { visible: true, roleId: role.id, name: role.name, selectedKey: role.selectedKey }
+    roleSetDialog: {
+      visible: true, roleId: role.id, name: role.name, selectedKey: role.selectedKey,
+      counts: {
+        ...this.state.roleSetDialog.counts, ..._.reduce(_.keys(this.state.roleSetDialog.counts), (pre, cur) => ({
+          ...pre, [cur]: role[cur] || 0
+        }), {})
+      }
+    }
   });
   deleteAuthRole = (payload) => {
     Modal.confirm({
@@ -204,7 +225,7 @@ class Index extends Component {
           {/*角色详情设置*/}
           <RoleDetailSetDialog {...roleSetDialog} onSearch={this.getRoleList}
                                onCancel={callback => this.setState({
-                                 roleSetDialog: { ...roleSetDialog, visible: false }
+                                 roleSetDialog: { ...roleSetDialog, visible: false, roleId: "" }
                                }, () => {
                                  this.props.taxAgentStore.initRoleForm();
                                  callback && callback();