个税扣缴义务人前端静态页面

pc4mobx/hrmSalary/common/columns.js

@@ -0,0 +1,37 @@
+export const logColumns = [
+    {
+        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: "客户端IP",
+        dataIndex: 'title',
+        key: 'title',
+    }
+]

pc4mobx/hrmSalary/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import Route from 'react-router/lib/Route';
 import { WeaLocaleProvider } from 'ecCom'
-import MySalaryBenefits from './pages/mySalaryBenefits';
+import MySalary from './pages/mySalary';
 import Programme from './pages/socialSecurityBenefits/programme';
 import Archives from './pages/socialSecurityBenefits/archives';
 import StandingBook from './pages/socialSecurityBenefits/standingBook';
@@ -16,7 +16,7 @@ import SalaryAccounting from './pages/salaryAccounting';
 import PayrollPayment from './pages/payrollPayment';
 import IndividualIncomeTaxApplicationForm from './pages/individualIncomeTaxApplicationForm';
 import IndividualIncomeTaxRateForm from './pages/individualIncomeTaxRateForm';
-import IndividualIncomeTaxWithholdingAgent from './pages/individualIncomeTaxWithholdingAgent';
+import TaxAgent from './pages/taxAgent';
 
 
 import BaseForm from './components';
@@ -54,11 +54,11 @@ const DataAcquisition = props => props.children;
 // payrollPayment 	工资单发放
 // individualIncomeTaxApplicationForm 	个税申请表
 // individualIncomeTaxRateForm		个税税率表
-// individualIncomeTaxWithholdingAgent	个税扣缴义务人
+// taxAgent	个税扣缴义务人
 
 const Routes = (
   <Route key='hrmSalary' path='hrmSalary' onEnter={getLocaleLabel} component={Home}>
-    <Route key='mySalaryBenefits' path='mySalaryBenefits' component={MySalaryBenefits} />
+    <Route key='mySalary' path='mySalary' component={MySalary} />
     <Route key='socialSecurityBenefits' path='socialSecurityBenefits' component={SocialSecurityBenefits}>
       <Route key='programme' path='programme' component={Programme} />
       <Route key='archives' path='archives' component={Archives} />
@@ -77,7 +77,7 @@ const Routes = (
     <Route key='payrollPayment' path='payrollPayment' component={PayrollPayment} />
     <Route key='individualIncomeTaxApplicationForm' path='individualIncomeTaxApplicationForm' component={IndividualIncomeTaxApplicationForm} />
     <Route key='individualIncomeTaxRateForm' path='individualIncomeTaxRateForm' component={IndividualIncomeTaxRateForm} />
-    <Route key='individualIncomeTaxWithholdingAgent' path='individualIncomeTaxWithholdingAgent' component={IndividualIncomeTaxWithholdingAgent} />
+    <Route key='taxAgent' path='taxAgent' component={TaxAgent} />
   </Route>
 );
 

pc4mobx/hrmSalary/pages/individualIncomeTaxWithholdingAgent/index.js

@@ -1,84 +0,0 @@
-import React from 'react';
-import { inject, observer } from 'mobx-react';
-import { toJS } from 'mobx';
-
-import { Button, Table, DatePicker } from 'antd';
-
-import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaTable } from 'ecCom';
-
-import { renderNoright, getSearchs } from '../../util'; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
-import CustomTab from '../../components/customTab';
-import ContentWrapper from '../../components/contentWrapper';
-
-import { columns, dataSource } from './columns';
-
-const { MonthPicker } = DatePicker;
-
-@inject('baseTableStore')
-@observer
-export default class IndividualIncomeTaxWithholdingAgent extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: "",
-      selectedKey: "0"
-    }
-  }
-  render() {
-    const { baseTableStore } = this.props;
-    const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = baseTableStore;
-
-    if (!hasRight && !loading) { // 无权限处理
-      return renderNoright();
-    }
-
-    const rightMenu = [// 右键菜单
-      { 
-        key: 'BTN_COLUMN',
-        icon: <i className='icon-coms-Custom' />,
-        content: '显示列定制',
-        onClick: this.showColumn
-      },
-    ];
-    const collectParams = { // 收藏功能配置
-      favname: '个税扣缴义务人',
-      favouritetype: 1,
-      objid: 0,
-      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>,
-    ];
-
-    const topTab = [
-      ];
-
-    const renderSearchOperationItem = () => {
-      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个功能
-          >
-            <WeaTable columns={columns} dataSource={dataSource}/>
-          </WeaTop>
-        </WeaRightMenu>
-      </div>
-    )
-  }
-}

pc4mobx/hrmSalary/pages/mySalary/index.js

@@ -18,9 +18,9 @@ import { payrollColumns,
 
 const { MonthPicker } = DatePicker;
 
-@inject('baseTableStore')
+@inject('mySalaryStore')
 @observer
-export default class MySalaryBenefits extends React.Component {
+export default class MySalary extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -29,8 +29,9 @@ export default class MySalaryBenefits extends React.Component {
     }
   }
   render() {
-    const { baseTableStore } = this.props;
-    const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = baseTableStore;
+    const { mySalaryStore } = this.props;
+    const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = mySalaryStore;
+    const { tabIndex } = mySalaryStore 
 
     if (!hasRight && !loading) { // 无权限处理
       return renderNoright();
@@ -127,15 +128,18 @@ export default class MySalaryBenefits extends React.Component {
                   this.setState({selectedKey: v})
                 }}
             />
-            {
-              this.state.selectedKey == '0' && <WeaTable columns={payrollColumns} dataSource={dataSource}/>
-            }
+          
             {
               this.state.selectedKey == '1' && <WeaTable columns={socialSecurityBenefitsColumns} dataSource={dataSource} scroll={{ x: 1000}}/>
             }
             {
               this.state.selectedKey == '2' && <WeaTable columns={salaryRecordColumns} dataSource={dataSource}/>
             }
+            <WeaTable // table内部做了loading加载处理，页面就不需要再加了
+              comsWeaTableStore={tableStore} // table store
+              hasOrder={true} // 是否启用排序
+              needScroll={true} // 是否启用table内部列表滚动，将自适应到父级高度
+            />
             
           </WeaTop>
         </WeaRightMenu>

pc4mobx/hrmSalary/pages/taxAgent/index.js

@@ -0,0 +1,257 @@
+import React from 'react';
+import { inject, observer } from 'mobx-react';
+import { toJS } from 'mobx';
+
+import { Button, Table, DatePicker, Row, Col, Modal, Form, Input } from 'antd';
+const { TextArea } = Input;
+
+import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaTable, WeaInputSearch, WeaInput, WeaTextarea } from 'ecCom';
+
+import { renderNoright, getSearchs } from '../../util'; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
+import CustomTab from '../../components/customTab';
+import ContentWrapper from '../../components/contentWrapper';
+import "./index.less"
+
+import { columns, dataSource } from './columns';
+
+import { logColumns } from '../../common/columns'
+
+const { MonthPicker } = DatePicker;
+
+@inject('taxAgentStore')
+@observer
+export default class TaxAgent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: "",
+      selectedKey: "0",
+      searchValue: "",
+      logViewVisiable: false
+    }
+  }
+
+  showLogView = () => {
+    this.setState({logViewVisiable: true})
+  }
+
+  render() {
+    const { taxAgentStore } = this.props;
+    const { loading, hasRight, form, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = taxAgentStore;
+    const { modelVisiable, setModelVisiable } = taxAgentStore;
+    // const { condition } = baseFormStore
+
+    const topTab = [
+    ];
+
+
+
+    if (!hasRight && !loading) { // 无权限处理
+      return renderNoright();
+    }
+
+    const rightMenu = [// 右键菜单
+      {
+        key: 'BTN_COLUMN',
+        icon: <i className='icon-coms-Custom' />,
+        content: '操作日志',
+        onClick: this.showLogView
+      },
+    ];
+    const collectParams = { // 收藏功能配置
+      favname: '个税扣缴义务人',
+      favouritetype: 1,
+      objid: 0,
+      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>,
+    ];
+
+    const renderSearchOperationItem = () => {
+      return <div>
+        <Button type="primary" onClick={() => { setModelVisiable(true) }}>新增</Button>
+        {'  '}
+        <WeaInputSearch
+          value={this.state.searchValue}
+          placeholder={'请输入个税扣缴义务人名称'}
+        />
+      </div>
+    }
+
+    const renderTipsLabel = () => {
+      const tipList = [
+        "1、个税扣缴义务人与档案中的个税扣缴义务人匹配，修改个税扣缴义务人名称，薪资档案的个税扣缴义务人数据同步更新；",
+        "2、删除个税扣缴义务人需先确认档案里无人员使用该个税扣缴义务人，否则不予删除；"
+      ]
+      return (
+        <div className="tipLabelWrapper">
+          <div className="titleWrapper">
+            <span className="title">小提示</span>
+          </div>
+          <div className="tipContentWrapper">
+            {tipList.map(item => <div className="tipContentItem">{item}</div>)}
+          </div>
+        </div>
+      )
+    }
+
+    return (
+      <div className="mySalaryBenefitsWrapper">
+        <WeaRightMenu
+          datas={rightMenu} // 右键菜单
+        >
+          <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.setState({ selectedKey: v })
+              }}
+            />
+            <Row gutter={16}>
+              <Col sm={24} md={24} lg={18} xl={18}>
+                <WeaTable columns={columns} dataSource={dataSource} />
+              </Col>
+              <Col sm={24} md={24} lg={6} xl={6}>
+                {renderTipsLabel()}
+              </Col>
+            </Row>
+
+          </WeaTop>
+        </WeaRightMenu>
+
+        <Modal title="新增个税扣缴义务人" visible={modelVisiable}
+          onOk={() => alert("ok")} onCancel={() => setModelVisiable(false)}
+        >
+          <Row gutter={16}>
+            <Col span={6}>
+              <div className="formLabel">名称:</div>
+            </Col>
+            <Col span={18}>
+              <WeaInput
+                id="name"
+                value={this.state.value}
+                onChange={value => {
+                  console.log(value);
+                  this.setState({ value });
+                }}
+                customBlur={v => {
+                  console.log("custom blur", v);
+                }}
+                onFocus={v => console.log("focus", v)}
+                onBlur={v => console.log("blur", v)}
+              />
+            </Col>
+
+            
+          </Row>
+
+          <Row gutter={16} style={{marginTop: "16px"}}>
+          <Col span={6}>
+              <div className="formLabel">备注:</div>
+            </Col>
+            <Col span={18}>
+              <WeaTextarea value={this.state.value} onChange={(value) => { this.setState({ value }) }} />
+            </Col>
+         </Row>
+        </Modal>
+
+
+        <Modal title="操作日志" visible={this.state.logViewVisiable}
+          onOk={() => alert("ok")} onCancel={()=>{this.setState({logViewVisiable: false})}}
+          className="logViewModal"
+          style={{ top: 150 }}
+          width={'80%'} height={'50%'}
+        >
+          <div className="searchBar">
+            <div className="searchBarItem searchDateRange">
+              <div className="searchBarLabel">操作时间</div>
+              <div>
+                <WeaRangePicker
+                  value={["2019-02-03", "2019-03-08"]}
+                  onChange={v => this.setState({ value: v })}
+                />
+              </div>
+            </div>
+            <div className="searchBarItem">
+              <div className="searchBarLabel">操作人</div>
+              <div>
+              <WeaInput
+                id="test"
+                style={{ width: 200 }}
+                value={this.state.value}
+                onChange={value => {
+                  console.log(value);
+                  this.setState({ value });
+                }}
+                customBlur={v => {
+                  console.log("custom blur", v);
+                }}
+                onFocus={v => console.log("focus", v)}
+                onBlur={v => console.log("blur", v)}
+              />
+              </div>
+            </div>
+
+            <div className="searchBarItem">
+              <div className='searchBarLabel'>对象</div>
+              <div>
+              <WeaInput
+                id="test"
+                style={{ width: 200 }}
+                value={this.state.value}
+                onChange={value => {
+                  console.log(value);
+                  this.setState({ value });
+                }}
+                customBlur={v => {
+                  console.log("custom blur", v);
+                }}
+                onFocus={v => console.log("focus", v)}
+                onBlur={v => console.log("blur", v)}
+              />
+              </div>
+            </div>
+
+            <div className="searchBarItem">
+              <div className='searchBarLabel'>操作类型</div>
+              <div>
+              <WeaInput
+                id="test"
+                style={{ width: 200 }}
+                value={this.state.value}
+                onChange={value => {
+                  console.log(value);
+                  this.setState({ value });
+                }}
+                customBlur={v => {
+                  console.log("custom blur", v);
+                }}
+                onFocus={v => console.log("focus", v)}
+                onBlur={v => console.log("blur", v)}
+              />
+              </div>
+            </div>
+            
+            <div className="searchBarItem">
+              <Button type="primary" className="searchBtn">搜索</Button>
+            </div>
+          </div>
+          <WeaTable columns={logColumns} dataSource={dataSource} />
+        </Modal>
+      </div>
+    )
+  }
+}

pc4mobx/hrmSalary/pages/taxAgent/index.less

@@ -0,0 +1,52 @@
+.tipLabelWrapper {
+    border-left: 1px solid #e2ecf2;
+    border-bottom: 1px solid #e2ecf2;
+    border-right: 1px solid #e2ecf2;
+    border-radius: 0px 0px 5px 5px;
+    .titleWrapper {
+        width: 100%;
+        line-height: 19.2px;
+        padding: 10px;
+        border-bottom: 1px solid #e2ecf2;
+        background-color: #f7fbfe;
+    }
+    .tipContentWrapper {
+        padding-bottom: 10px;
+    }
+    .tipContentItem {
+        line-height: 20px;
+        padding: 0px 16px;
+        padding-top: 10px;
+        color: rgb(153, 153, 153);
+    }
+    .tipContentItem:first {
+        padding-top: 0px;
+    }
+
+    .formLabel {
+        font-size: 14px;
+    }
+
+}
+
+.logViewModal {
+    .searchBar {
+        display: flex;
+    }
+    .searchBarLabel {
+        margin-bottom: 10px;
+    }
+    .searchBarItem {
+        position: relative;
+        width: 200px;
+        margin-left: 10px;
+        margin-right: 10px;
+    }
+    .searchDateRange {
+        width: 300px;
+    }
+    .searchBtn {
+        position: absolute;
+        bottom: 0px;
+    }
+}

pc4mobx/hrmSalary/stores/index.js

@@ -1,7 +1,13 @@
 
 import { BaseTableStore } from './baseTable';
+import { MySalaryStore } from'./mySalary';
+import { TaxAgentStore } from './taxAgent';
+import { BaseFormStore } from './baseForm';
 
 module.exports = {
+  baseFormStore: new BaseFormStore(),
   baseTableStore: new BaseTableStore(),
+  mySalaryStore: new MySalaryStore(),
+  taxAgentStore: new TaxAgentStore()
 };
 

pc4mobx/hrmSalary/stores/mySalary.js

@@ -0,0 +1,92 @@
+import { observable, action, toJS } from 'mobx';
+import { message } from 'antd';
+import { WeaForm, WeaLogView } from 'comsMobx';
+import { WeaLocaleProvider } from 'ecCom';
+import moment from 'moment'
+
+import * as API from '../apis/mySalaryBenefits'; // 引入API接口文件
+
+const {LogStore} = WeaLogView;
+const getLabel = WeaLocaleProvider.getLabel;
+
+export class MySalaryStore {
+  @observable tableStore = new TableStore(); // new table
+  @observable form = new WeaForm(); // nrew 一个form
+  @observable condition = []; // 存储后台得到的form数据
+  @observable hasRight = true; // 判断用户是有权限查看当前页面： 没有权限渲染无权限页面，有权限渲染数据
+  @observable showSearchAd = false; // 高级搜索面板显示
+  @observable loading = true; // 数据加载状态
+  @observable tabIndex = 0;  // tab选中坐标
+  @observable params = {};  // 搜索条件
+
+
+  @action
+  initParams = () => {
+    let month = moment().format("YYYY-MM")
+    this.params = {startMonth: month, endMonth: month}
+    return this.params;
+  }
+
+  @action
+  setTabIndex = index => {
+    this.tabIndex = index
+    this.getTableDatas(index);
+  }
+
+  // 初始化操作
+  @action
+  doInit = () => {
+    this.
+    this.getTableDatas(0, params);
+  }
+
+  // 获得高级搜索表单数据
+  @action
+  getCondition = () => {
+    API.getCondition().then(action(res => {
+      if (res.api_status) { // 接口请求成功/失败处理
+        this.condition = res.condition;
+        this.form.initFormFields(res.condition); // 渲染高级搜索form表单
+      } else {
+        message.error(res.msg || '接口调用失败！')
+      }
+    }));
+  }
+
+  // 渲染table数据
+  @action
+  getTableDatas = (params) => {
+    this.loading = true;
+    const formParams = this.form.getFormParams() || {};
+    params = params || formParams;
+    switch(params) {
+        case 0:
+            // 工资单
+            API.mySalaryBillList(param)
+            break;
+    }
+    if(params == 0) {
+        // 工资单
+
+    } 
+    API.getTableDatas(params).then(action(res => {
+      if (res.api_status) { // 接口请求成功/失败处理
+        this.tableStore.getDatas(res.datas); // table 请求数据
+        this.hasRight = res.hasRight;
+      } else {
+        message.error(res.msg || '接口调用失败！')
+      }
+      this.loading = false;
+    }));
+  }
+
+  @action
+  setShowSearchAd = bool => this.showSearchAd = bool;
+
+  // 高级搜索 - 搜索
+  @action doSearch = () => {
+    this.getTableDatas();
+    this.showSearchAd = false;
+  }
+  
+}

pc4mobx/hrmSalary/stores/taxAgent.js

@@ -0,0 +1,69 @@
+import { observable, action, toJS } from 'mobx';
+import { message } from 'antd';
+import { WeaForm, WeaTableNew } from 'comsMobx';
+import moment from 'moment'
+
+import * as API from '../apis'; // 引入API接口文件
+
+const { TableStore } = WeaTableNew;
+
+export class TaxAgentStore {
+  @observable tableStore = new TableStore(); // new table
+  @observable form = new WeaForm(); // nrew 一个form
+  @observable condition = []; // 存储后台得到的form数据
+  @observable hasRight = true; // 判断用户是有权限查看当前页面： 没有权限渲染无权限页面，有权限渲染数据
+  @observable showSearchAd = false; // 高级搜索面板显示
+  @observable loading = true; // 数据加载状态
+
+  @observable modelVisiable = false; // 对话框显示隐藏
+
+  @action
+  setModelVisiable = visiable => this.modelVisiable = visiable
+
+  // 初始化操作
+  @action
+  doInit = () => {
+    this.getCondition();
+    this.getTableDatas();
+  }
+
+  // 获得高级搜索表单数据
+  @action
+  getCondition = () => {
+    API.getCondition().then(action(res => {
+      if (res.api_status) { // 接口请求成功/失败处理
+        this.condition = res.condition;
+        this.form.initFormFields(res.condition); // 渲染高级搜索form表单
+      } else {
+        message.error(res.msg || '接口调用失败！')
+      }
+    }));
+  }
+
+  // 渲染table数据
+  @action
+  getTableDatas = (params) => {
+    this.loading = true;
+    const formParams = this.form.getFormParams() || {};
+    params = params || formParams;
+    API.getTableDatas(params).then(action(res => {
+      if (res.api_status) { // 接口请求成功/失败处理
+        this.tableStore.getDatas(res.datas); // table 请求数据
+        this.hasRight = res.hasRight;
+      } else {
+        message.error(res.msg || '接口调用失败！')
+      }
+      this.loading = false;
+    }));
+  }
+
+  @action
+  setShowSearchAd = bool => this.showSearchAd = bool;
+
+  // 高级搜索 - 搜索
+  @action doSearch = () => {
+    this.getTableDatas();
+    this.showSearchAd = false;
+  }
+
+}