我的薪资福利添加权限功能

pc4mobx/hrmSalary/components/customTable/index.less

@@ -2,7 +2,7 @@
   .ant-table-tbody {
     tr {
       td {
-        height: 42px !important;
+        height: 41px !important;
         border-bottom: 1px solid #e2e2e2 !important;
       }
     }

pc4mobx/hrmSalary/pages/mySalary/authority.js

@@ -0,0 +1,43 @@
+import { observer } from "mobx-react";
+import { WeaAlertPage, WeaLocaleProvider } from "ecCom";
+import { Spin } from "antd";
+
+const getLabel = WeaLocaleProvider.getLabel;
+
+@observer
+export default class Authority extends React.Component {
+  render() {
+    const { store } = this.props;
+    const { loading, hasRight } = store;
+
+    const style = {
+      position: "absolute",
+      top: "50%",
+      left: "50%",
+      marginLeft: -16,
+      marginTop: -16
+    };
+
+    if (loading) {
+      return (
+        <div style={style}>
+          <Spin ecId={`${this && this.props && this.props.ecId || ""}_Spin@3zw5ih`} spinning={true} size="large"></Spin>
+        </div>
+      );
+    }
+
+    if (hasRight) {
+      return this.props.children;
+    } else {
+      return (
+        <div style={{ height: "100%" }}>
+          <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ""}_WeaAlertPage@g7alej`}>
+            <div style={{ color: "#000" }}>
+              {getLabel(2012, "对不起，您暂时没有权限！")}
+            </div>
+          </WeaAlertPage>
+        </div>
+      );
+    }
+  }
+}

pc4mobx/hrmSalary/pages/mySalary/index.js

@@ -1,28 +1,18 @@
-import React from 'react';
-import { inject, observer } from 'mobx-react';
-import { toJS } from 'mobx';
-
-import { Button, Table, DatePicker, Spin } from 'antd';
-
-import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaTable, WeaDatePicker } from 'ecCom';
-
-import { renderNoright, getSearchs } from '../../util'; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
-import CustomTab from '../../components/customTab';
-import ContentWrapper from '../../components/contentWrapper';
-import CustomTable from '../../components/customTable'
-import CustomPaginationTable from '../../components/customPaginationTable'
-import moment from 'moment'
-import "./index.less"
-
-import { payrollColumns,
-  socialSecurityBenefitsColumns,
-  salaryRecordColumns,
-  dataSource } from './columns';
-import PayrollModal from './payrollModal';
+import React from "react";
+import { inject, observer } from "mobx-react";
+import { Button, DatePicker } from "antd";
+import { WeaRightMenu, WeaTop } from "ecCom";
+import { renderNoright } from "../../util"; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
+import CustomTab from "../../components/customTab";
+import CustomPaginationTable from "../../components/customPaginationTable";
+import moment from "moment";
+import "./index.less";
+import PayrollModal from "./payrollModal";
+import Authority from "./authority";
 
 const { RangePicker } = DatePicker;
 
-@inject('mySalaryStore')
+@inject("mySalaryStore")
 @observer
 export default class MySalary extends React.Component {
   constructor(props) {
@@ -31,16 +21,16 @@ export default class MySalary extends React.Component {
       value: "",
       selectedKey: "0",
       salaryBillVisible: false
-    }
-    this.salaryInfoId = ""
-    this.range = []
-    this.pageInfo = {current: 1, pageSize: 10}
-    this.historyPageInfo = {current: 1, pageSize: 10}
+    };
+    this.salaryInfoId = "";
+    this.range = [];
+    this.pageInfo = { current: 1, pageSize: 10 };
+    this.historyPageInfo = { current: 1, pageSize: 10 };
   }
 
   componentWillMount() {
-    const { mySalaryStore : {mySalaryBillList}} = this.props;
-    mySalaryBillList()
+    const { mySalaryStore: { init } } = this.props;
+    init();
   }
 
   // 查看工资单
@@ -48,70 +38,90 @@ export default class MySalary extends React.Component {
     this.salaryInfoId = record.id;
     this.setState({
       salaryBillVisible: true
-    })
+    });
   }
 
   getColumns() {
-    const { mySalaryStore: {myBillTableStore}} = this.props;
-    let columns = myBillTableStore.columns ? myBillTableStore.columns: []
-    columns = columns.filter(item => item.hide == "false")
+    const { mySalaryStore: { myBillTableStore } } = this.props;
+    let columns = myBillTableStore.columns ? myBillTableStore.columns : [];
+    columns = columns.filter(item => item.hide == "false");
     columns.map(item => {
-      if(item.dataIndex == "salaryYearMonth") {
-          item.render = (text, record) => {
-              return <span>{moment(parseInt(text)).format("YYYY-MM")}</span>
-          }
-      } else if(item.dataIndex == "sendTime") {
-          item.render = (text, record) => {
-              return <span>{moment(parseInt(text)).format("YYYY-MM-DD HH:mm:ss")}</span>
-          }
+      if (item.dataIndex == "salaryYearMonth") {
+        item.render = (text, record) => {
+          return <span>{moment(parseInt(text)).format("YYYY-MM")}</span>;
+        };
+      } else if (item.dataIndex == "sendTime") {
+        item.render = (text, record) => {
+          return <span>{moment(parseInt(text)).format("YYYY-MM-DD HH:mm:ss")}</span>;
+        };
       }
-  })
+    });
     columns.push({
       title: "操作",
       dataIndex: "operate",
-      render: (text,record) => {
+      render: (text, record) => {
         return (
-          <a onClick={() => {this.handleView(record)}}>查看</a>
-        )
+          <a onClick={() => {
+            this.handleView(record);
+          }}>查看</a>
+        );
       }
-    })
+    });
     return columns;
   }
 
   // 区间改变事件
   handleSalaryRangePickerChange(range) {
-    const { mySalaryStore : {mySalaryBillList}} = this.props;
-    const isNull= _.every(range, it=> !!it)
-    if(!_.isEmpty(range) && isNull){
-      this.range = range.map(item => moment(item).format("YYYY-MM"))
-      mySalaryBillList(this.range, this.pageInfo)
-    }else{
-      mySalaryBillList([], this.pageInfo)
+    const { mySalaryStore: { mySalaryBillList } } = this.props;
+    const isNull = _.every(range, it => !!it);
+    if (!_.isEmpty(range) && isNull) {
+      this.range = range.map(item => moment(item).format("YYYY-MM"));
+      mySalaryBillList(this.range, this.pageInfo);
+    } else {
+      mySalaryBillList([], this.pageInfo);
     }
   }
 
 
   handleTabChange(selectedKey) {
-    if(selectedKey == "2") {
-      const { mySalaryStore: {getRecordList}} = this.props;
-      getRecordList()
+    if (selectedKey == "2") {
+      const { mySalaryStore: { getRecordList } } = this.props;
+      getRecordList();
     }
   }
 
   handlePageChange() {
-    const { mySalaryStore : {mySalaryBillList}} = this.props;
-    mySalaryBillList(this.range, this.pageInfo)
+    const { mySalaryStore: { mySalaryBillList } } = this.props;
+    mySalaryBillList(this.range, this.pageInfo);
   }
 
   handleHistoryPageChange() {
-    const { mySalaryStore: {getRecordList}} = this.props;
-    getRecordList(this.historyPageInfo)
+    const { mySalaryStore: { getRecordList } } = this.props;
+    getRecordList(this.historyPageInfo);
   }
 
   render() {
     const { mySalaryStore } = this.props;
-    const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = mySalaryStore;
-    const { tabIndex, myBillTableStore, myBillDataSource, recordListColumns, recordListDataSource, recordListPageInfo, myBillPageInfo  } = mySalaryStore 
+    const {
+      loading,
+      hasRight,
+      form,
+      condition,
+      tableStore,
+      showSearchAd,
+      getTableDatas,
+      doSearch,
+      setShowSearchAd
+    } = mySalaryStore;
+    const {
+      tabIndex,
+      myBillTableStore,
+      myBillDataSource,
+      recordListColumns,
+      recordListDataSource,
+      recordListPageInfo,
+      myBillPageInfo
+    } = mySalaryStore;
     const { salaryBillVisible } = this.state;
     if (!hasRight && !loading) { // 无权限处理
       return renderNoright();
@@ -126,16 +136,16 @@ export default class MySalary extends React.Component {
       // },
     ];
     const collectParams = { // 收藏功能配置
-      favname: '我的薪资福利',
+      favname: "我的薪资福利",
       favouritetype: 1,
       objid: 0,
-      link: 'wui/index.html#/ns_demo03/index',
-      importantlevel: 1,
+      link: "wui/index.html#/ns_demo03/index",
+      importantlevel: 1
     };
     const adBtn = [ // 高级搜索内部按钮
       <Button type="primary" onClick={doSearch}>搜索</Button>,
       <Button type="ghost" onClick={() => form.resetForm()}>重置</Button>,
-      <Button type="ghost" onClick={() => setShowSearchAd(false)}>取消</Button>,
+      <Button type="ghost" onClick={() => setShowSearchAd(false)}>取消</Button>
     ];
 
     const topTab = [
@@ -154,108 +164,113 @@ export default class MySalary extends React.Component {
     ];
 
     const renderSearchOperationItem = () => {
-      if(this.state.selectedKey == "0") {
+      if (this.state.selectedKey == "0") {
         return (<div><span className="tabSearchLabel">薪资所属月：</span>
 
-        <RangePicker picker="month" format="yyyy-MM" 
-          onChange={(value) => this.handleSalaryRangePickerChange(value)}
-        />
-        </div>)
-      } else if(this.state.selectedKey == "1"){
+          <RangePicker picker="month" format="yyyy-MM"
+                       onChange={(value) => this.handleSalaryRangePickerChange(value)}
+          />
+        </div>);
+      } else if (this.state.selectedKey == "1") {
         return (<div><span className="tabSearchLabel">缴纳月份：</span>
-        <div className="weaRangePickerWrapper">
-          <div className="monthPickerWrapper">
-            <MonthPicker />
-          </div>
-          <span className="betweenLable">
+          <div className="weaRangePickerWrapper">
+            <div className="monthPickerWrapper">
+              <MonthPicker/>
+            </div>
+            <span className="betweenLable">
             至
           </span>
-          <div className="monthPickerWrapper">
-            <MonthPicker />
+            <div className="monthPickerWrapper">
+              <MonthPicker/>
+            </div>
           </div>
-        </div></div>)
-      } else  {
-        return (<div></div>)
+        </div>);
+      } else {
+        return (<div></div>);
       }
-     
-    }
+
+    };
 
     return (
       <div className="mySalaryBenefitsWrapper">
-        <WeaRightMenu
-          datas={rightMenu} // 右键菜单
-          collectParams={collectParams} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
-        >
-          <WeaTop
-            title="我的薪资福利" // 文字
-            icon={<i className='icon-coms-meeting' />} // 左侧图标
-            iconBgcolor='#F14A2D' // 左侧图标背景色
-            showDropIcon={true} // 是否显示下拉按钮
-            dropMenuDatas={rightMenu} // 下拉菜单（和页面的右键菜单相同）
-            dropMenuProps={{ collectParams }} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
+        <Authority ecId={`${this && this.props && this.props.ecId || ""}_Authority@lulowc`} store={mySalaryStore}>
+          <WeaRightMenu
+            datas={rightMenu} // 右键菜单
+            collectParams={collectParams} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
           >
-            <CustomTab topTab={topTab}
-              searchOperationItem={
-                renderSearchOperationItem()
-              }
-                onChange={(v) => {
-                  this.handleTabChange(v)
-                  this.setState({selectedKey: v})
-                }}
-            />
+            <WeaTop
+              title="我的薪资福利" // 文字
+              icon={<i className="icon-coms-meeting"/>} // 左侧图标
+              iconBgcolor="#F14A2D" // 左侧图标背景色
+              showDropIcon={true} // 是否显示下拉按钮
+              dropMenuDatas={rightMenu} // 下拉菜单（和页面的右键菜单相同）
+              dropMenuProps={{ collectParams }} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
+            >
+              <CustomTab topTab={topTab}
+                         searchOperationItem={
+                           renderSearchOperationItem()
+                         }
+                         onChange={(v) => {
+                           this.handleTabChange(v);
+                           this.setState({ selectedKey: v });
+                         }}
+              />
 
-            {
-              this.state.selectedKey == '0' && 
-              
-              <CustomPaginationTable 
-                loading={loading}
-                columns={this.getColumns()} 
-                dataSource={myBillDataSource ? myBillDataSource : []}
-                total={myBillPageInfo.total}
-                current={myBillPageInfo.pageNum}
-                pageSize={this.pageInfo.pageSize}
-                onPageChange={(value) => {
-                  this.pageInfo.current = value
-                  this.handlePageChange()
-                }}
-                onShowSizeChange={(current, pageSize) => {
-                  this.pageInfo = {current, pageSize}
-                  this.handlePageChange()
-                }}
-              />
-            }
-            {/* {
-              this.state.selectedKey == '1' && <WeaTable columns={socialSecurityBenefitsColumns} dataSource={dataSource} scroll={{ x: 1000}}/>
-            } */}
-            {
-              this.state.selectedKey == '2' && 
-              <CustomPaginationTable 
-                columns={recordListColumns} 
-                dataSource={recordListDataSource}
-                total={recordListPageInfo.total}
-                current={recordListPageInfo.pageNum}
-                pageSize={this.historyPageInfo.pageSize}
-                onPageChange={(value) => {
-                  this.historyPageInfo.current = value
-                  this.handleHistoryPageChange()
-                }}
-                onShowSizeChange={(current, pageSize) => {
-                  this.historyPageInfo = {current, pageSize}
-                  this.handleHistoryPageChange()
-                }}
-              />
-            }
-            
-          </WeaTop>
-        </WeaRightMenu>
+              {
+                this.state.selectedKey == "0" &&
+
+                <CustomPaginationTable
+                  loading={loading}
+                  columns={this.getColumns()}
+                  dataSource={myBillDataSource ? myBillDataSource : []}
+                  total={myBillPageInfo.total}
+                  current={myBillPageInfo.pageNum}
+                  pageSize={this.pageInfo.pageSize}
+                  onPageChange={(value) => {
+                    this.pageInfo.current = value;
+                    this.handlePageChange();
+                  }}
+                  onShowSizeChange={(current, pageSize) => {
+                    this.pageInfo = { current, pageSize };
+                    this.handlePageChange();
+                  }}
+                />
+              }
+              {/* {
+                this.state.selectedKey == '1' && <WeaTable columns={socialSecurityBenefitsColumns} dataSource={dataSource} scroll={{ x: 1000}}/>
+              } */}
+              {
+                this.state.selectedKey == "2" &&
+                <CustomPaginationTable
+                  columns={recordListColumns}
+                  dataSource={recordListDataSource}
+                  total={recordListPageInfo.total}
+                  current={recordListPageInfo.pageNum}
+                  pageSize={this.historyPageInfo.pageSize}
+                  onPageChange={(value) => {
+                    this.historyPageInfo.current = value;
+                    this.handleHistoryPageChange();
+                  }}
+                  onShowSizeChange={(current, pageSize) => {
+                    this.historyPageInfo = { current, pageSize };
+                    this.handleHistoryPageChange();
+                  }}
+                />
+              }
+
+            </WeaTop>
+          </WeaRightMenu>
+        </Authority>
         {
-          salaryBillVisible && <PayrollModal 
+          salaryBillVisible && <PayrollModal
             visible={salaryBillVisible}
             id={this.salaryInfoId}
-            onCancel={() => {this.setState({salaryBillVisible: false})}}
+            onCancel={() => {
+              this.setState({ salaryBillVisible: false });
+            }}
           />
         }
       </div>
-    )
+    );
   }
-}
+}

pc4mobx/hrmSalary/stores/mySalary.js

@@ -1,12 +1,12 @@
-import { observable, action, toJS } from 'mobx';
-import { message } from 'antd';
-import { WeaForm, WeaLogView, WeaTableNew } from 'comsMobx';
-import { WeaLocaleProvider } from 'ecCom';
-import moment from 'moment'
+import { action, observable } from "mobx";
+import { message } from "antd";
+import { WeaForm, WeaLogView, WeaTableNew } from "comsMobx";
+import { WeaLocaleProvider } from "ecCom";
+import moment from "moment";
 
-import * as API from '../apis/mySalaryBenefits'; // 引入API接口文件
+import * as API from "../apis/mySalaryBenefits"; // 引入API接口文件
 
-const {LogStore} = WeaLogView;
+const { LogStore } = WeaLogView;
 const getLabel = WeaLocaleProvider.getLabel;
 const { TableStore } = WeaTableNew;
 
@@ -14,7 +14,7 @@ export class MySalaryStore {
   @observable tableStore = new TableStore(); // new table
   @observable form = new WeaForm(); // nrew 一个form
   @observable condition = []; // 存储后台得到的form数据
-  @observable hasRight = true; // 判断用户是有权限查看当前页面： 没有权限渲染无权限页面，有权限渲染数据
+  @observable hasRight = false; // 判断用户是有权限查看当前页面： 没有权限渲染无权限页面，有权限渲染数据
   @observable showSearchAd = false; // 高级搜索面板显示
   @observable loading = true; // 数据加载状态
   @observable tabIndex = 0;  // tab选中坐标
@@ -31,27 +31,57 @@ export class MySalaryStore {
   @observable recordListColumns = [];
   @observable recordListDataSource = [];
   @observable recordListPageInfo = {};
-  @observable myBillPageInfo = {}
+  @observable myBillPageInfo = {};
+
+  @action clear = () => {
+    this.loading = true;
+    this.hasRight = false;
+  };
+
+  @action init = async props => {
+    this.clear();
+    //1.check is need second verify
+    if (window.doCheckSecondaryVerify4ec) {
+      window.doCheckSecondaryVerify4ec({ mouldCode: "HRM", itemCode: "SALARY" }, this.getData);
+    } else {
+      //4.loaddata
+      this.getData({ status: "1", token: "" });
+    }
+  };
+
+  @action
+  getData = async (params = {}) => {
+    if (_.isEmpty(params)) return;
+    const { status, token } = params;
+    if (status == "1") {
+      // Object.assign(this._reqParams, { token });
+      // this.getFormData({ viewAttr: 1 });
+      this.hasRight = true;
+      this.mySalaryBillList()
+    } else {
+      this.hasRight = false;
+    }
+    this.loading = false;
+  };
 
   @action
   initParams = () => {
-    let month = moment().format("YYYY-MM")
-    this.params = {startMonth: month, endMonth: month}
+    let month = moment().format("YYYY-MM");
+    this.params = { startMonth: month, endMonth: month };
     return this.params;
-  }
+  };
 
   @action
   setTabIndex = index => {
-    this.tabIndex = index
+    this.tabIndex = index;
     this.getTableDatas(index);
-  }
+  };
 
   // 初始化操作
   @action
   doInit = () => {
-    this.
     this.getTableDatas(0, params);
-  }
+  };
 
   // 获得高级搜索表单数据
   @action
@@ -61,10 +91,10 @@ export class MySalaryStore {
         this.condition = res.condition;
         this.form.initFormFields(res.condition); // 渲染高级搜索form表单
       } else {
-        message.error(res.errormsg  || '接口调用失败！')
+        message.error(res.errormsg || "接口调用失败！");
       }
     }));
-  }
+  };
 
   // 渲染table数据
   @action
@@ -72,22 +102,22 @@ export class MySalaryStore {
     this.loading = true;
     const formParams = this.form.getFormParams() || {};
     params = params || formParams;
-    switch(params) {
-        case 0:
-            // 工资单
-            API.mySalaryBillList(param)
-            break;
+    switch (params) {
+      case 0:
+        // 工资单
+        API.mySalaryBillList(param);
+        break;
     }
     API.getTableDatas(params).then(action(res => {
       if (res.api_status) { // 接口请求成功/失败处理
         this.tableStore.getDatas(res.datas); // table 请求数据
         this.hasRight = res.hasRight;
       } else {
-        message.error(res.errormsg  || '接口调用失败！')
+        message.error(res.errormsg || "接口调用失败！");
       }
       this.loading = false;
     }));
-  }
+  };
 
   @action
   setShowSearchAd = bool => this.showSearchAd = bool;
@@ -96,46 +126,46 @@ export class MySalaryStore {
   @action doSearch = () => {
     this.getTableDatas();
     this.showSearchAd = false;
-  }
+  };
 
   // 我的工资单列表
   @action
   mySalaryBillList = (salaryYearMonth = [], params = {}) => {
-    this.loading = true
-    API.mySalaryBillList({salaryYearMonth, ...params}).then(res => {
-      if(res.status) {
-        this.myBillDataSource = res.data.datas
-        this.myBillTableStore.getDatas(res.data.dataKey.datas)
-        this.myBillPageInfo = res.data.pageInfo
-        this.loading = false
+    this.loading = true;
+    API.mySalaryBillList({ salaryYearMonth, ...params }).then(res => {
+      if (res.status) {
+        this.myBillDataSource = res.data.datas;
+        this.myBillTableStore.getDatas(res.data.dataKey.datas);
+        this.myBillPageInfo = res.data.pageInfo;
+        this.loading = false;
       } else {
-        message.error(res.errormsg || "获取失败")
-        this.loading = false
+        message.error(res.errormsg || "获取失败");
+        this.loading = false;
       }
-    })
-  }
+    });
+  };
 
   // 我的工资单详情
   @action
   getMySalaryBill = (salaryInfoId) => {
-    API.mySalaryBill({salaryInfoId}).then(res => {
-      if(res.status) {
-        this.mySalaryBill = res.data
+    API.mySalaryBill({ salaryInfoId }).then(res => {
+      if (res.status) {
+        this.mySalaryBill = res.data;
       } else {
-        message.error(res.errormsg || "获取失败")
+        message.error(res.errormsg || "获取失败");
       }
-    })
-  }
+    });
+  };
 
   @action
   getRecordList = (params = {}) => {
     API.recordList(params).then(res => {
-      if(res.status) {
-        this.recordListColumns = res.data.columns
-        this.recordListDataSource = res.data.list ? res.data.list : []
-        this.recordListPageInfo = res.data
+      if (res.status) {
+        this.recordListColumns = res.data.columns;
+        this.recordListDataSource = res.data.list ? res.data.list : [];
+        this.recordListPageInfo = res.data;
       }
-    })
-  }
-  
-}
+    });
+  };
+
+}