累计专项附加扣除页面列表搜索

pc4mobx/hrmSalary/apis/cumDeduct.js

@@ -2,7 +2,14 @@ import { WeaTools } from 'ecCom';
 
 //数据采集-累计专项附加扣除列表
 export const getCumDeductList = params => {
-    return WeaTools.callApi('/api/bs/hrmsalary/addUpDeduction/list', 'POST', params);
+    return fetch('/api/bs/hrmsalary/addUpDeduction/list', {
+        method: 'POST',
+        mode: 'cors',
+        headers: {
+            'Content-Type': 'application/json'
+        }, 
+        body: JSON.stringify(params)
+    }).then(res => res.json())
 }
 
 //数据采集-累计专项附加扣除列表的高级搜索

pc4mobx/hrmSalary/apis/taxAgent.js

@@ -35,5 +35,5 @@ export const deleteTaxAgent = params => {
 
 //个税扣缴义务人下拉列表
 export const getTaxAgentSelectList = params => {
-    return WeaTools.callApi('/api/bs/hrmsalary/taxAgent/selectList', 'POST', params);
+    return WeaTools.callApi('/api/bs/hrmsalary/taxAgent/selectList', 'GET', params);
 }

pc4mobx/hrmSalary/pages/dataAcquisition/cumDeduct/index.js

@@ -4,19 +4,22 @@ import { toJS } from 'mobx';
 
 import { Button, Table, DatePicker, Dropdown, Menu, Modal } from 'antd';
 
-import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaTable } from 'ecCom';
+import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaDatePicker, WeaSelect, WeaHelpfulTip } from 'ecCom';
+import { WeaTableNew } from "comsMobx"
+
+const WeaTable = WeaTableNew.WeaTable;
 
 import { renderNoright, getSearchs } from '../../../util'; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
 import CustomTab from '../../../components/customTab';
 import ContentWrapper from '../../../components/contentWrapper';
 import ImportModal from '../../../components/importModal'
-
-
 import { columns, dataSource } from './columns';
 
 const { MonthPicker } = DatePicker;
 
-@inject('baseTableStore')
+import "./index.less"
+
+@inject('cumDeductStore', "taxAgentStore")
 @observer
 export default class CumDeduct extends React.Component {
   constructor(props) {
@@ -24,16 +27,62 @@ export default class CumDeduct extends React.Component {
     this.state = {
       value: "",
       selectedKey: "0",
-      visiable: true
+      visiable: false,
+      monthValue: "",
+      taxAgentId: ""
     }
   }
-
   
+  componentWillMount() { // 初始化渲染页面
+    const { cumDeductStore: { doInit }, taxAgentStore: {fetchTaxAgentOption} } = this.props;
+    doInit();
+    fetchTaxAgentOption();
+  }
+
+  getSearchsAdQuick() {
+    const { monthValue, taxAgentId } = this.state;
+    const { taxAgentStore: {taxAgentOption }} = this.props;
+    return (
+      <div className="searchConditionWrapper">
+        <div className="searchConditionItem">
+          <span className="conditionFormLabel">申报月份:</span>
+          <WeaDatePicker
+            value={monthValue}
+            format="YYYY-MM"
+            width={200}
+            onChange={value => this.setState({ monthValue: value })}
+          />
+        </div>
+
+        <div className="helperWrapper">
+          <WeaHelpfulTip
+            title="<div>提示：默认显示本年截至当前月所有员工申报的累计专项附加及其他扣除额</div>"
+            placement="bottom"
+            width={200}
+          />
+        </div>
+
+        <div className="searchConditionItem">
+          <span className="conditionFormLabel">个税扣缴义务人:</span>
+          <WeaSelect
+            showSearch // 设置select可搜索
+            style={{ width: 200 }}
+            options={taxAgentOption}
+            value={taxAgentId}
+            onChange={v => {
+              this.setState({ taxAgentId: v });
+            }}
+          />
+        </div>
+      </div>
+    )  
+  }
 
   render() {
-    const { baseTableStore } = this.props;
-    const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = baseTableStore;
-
+    const { cumDeductStore, taxAgentStore } = this.props;
+    const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd  } = cumDeductStore;
+    const { taxAgentOption } = taxAgentStore
+    
     if (!hasRight && !loading) { // 无权限处理
       return renderNoright();
     }
@@ -93,6 +142,8 @@ export default class CumDeduct extends React.Component {
       </Dropdown.Button>
     ]
 
+    
+
     return (
       <div className="cumDeductWrapper">
         <WeaRightMenu
@@ -107,7 +158,26 @@ export default class CumDeduct extends React.Component {
             dropMenuProps={{ collectParams }} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
             buttons={btns}
           >
-            <WeaTable columns={columns} dataSource={dataSource}/>
+            
+            <div className="weaTabWrapper">
+              
+              <WeaTab
+                searchType={['base', 'advanced']} // base：基础搜索框 advanced：显示高级搜索按钮
+                showSearchAd={showSearchAd} // 是否展开高级搜索面板
+                setShowSearchAd={bool => setShowSearchAd(bool)} //高级搜索面板受控
+                searchsAd={getSearchs(form, toJS(condition), 2)} // 高级搜索内部数据
+                buttonsAd={adBtn} // 高级搜索内部按钮
+                onSearch={getTableDatas} // 点搜索按钮时的回调
+                searchsAdQuick={this.getSearchsAdQuick()}
+                onSearchChange={v => form.updateFields({ username: v })} // 在搜索框中输入的文字改变时的回调: 这里需要同步高级搜索和外部搜索框的值
+                searchsBaseValue={form.getFormParams().username} // 外部input搜索值受控: 这里和高级搜索的requestname同步
+              />
+            </div>
+            <WeaTable // table内部做了loading加载处理，页面就不需要再加了
+                comsWeaTableStore={tableStore} // table store
+                hasOrder={true} // 是否启用排序
+                needScroll={true} // 是否启用table内部列表滚动，将自适应到父级高度
+              />
           </WeaTop>
         </WeaRightMenu>
         <ImportModal visiable={this.state.visiable} onCancel={() => {this.setState({visiable: false})}}/>

pc4mobx/hrmSalary/pages/dataAcquisition/cumDeduct/index.less

@@ -0,0 +1,31 @@
+.cumDeductWrapper {
+    .weaTabWrapper {
+        position: relative;
+        .searchConditionWrapper {
+            width: 600px;
+            margin-left: 10px;
+            margin-top: 8px;
+        }
+        .searchConditionItem {
+            float: left;
+        }
+        .conditionFormLabel {
+            margin-right: 10px;
+        }
+        .helperWrapper {
+            float: left;
+            margin-left: 10px;
+            margin-right: 10px;
+            margin-top: 6px;
+        }
+    }
+
+    .wea-tab-search-ad-quick {
+        .wea-tab-right-search-ad-quick {
+            margin-top: 0px;
+        }
+        .wea-search-container-search-ad-quick {
+            top: 46px;
+        }
+    }
+}

pc4mobx/hrmSalary/stores/cumDeduct.js

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

pc4mobx/hrmSalary/stores/index.js

@@ -4,12 +4,14 @@ import { MySalaryStore } from'./mySalary';
 import { TaxAgentStore } from './taxAgent';
 import { BaseFormStore } from './baseForm';
 import { taxRateStore } from './taxRate';
+import { CumDeductStore } from "./cumDeduct"
 
 module.exports = {
   baseFormStore: new BaseFormStore(),
   baseTableStore: new BaseTableStore(),
   mySalaryStore: new MySalaryStore(),
   taxAgentStore: new TaxAgentStore(),
-  taxRateStore: new taxRateStore()
+  taxRateStore: new taxRateStore(),
+  cumDeductStore: new CumDeductStore()
 };
 

pc4mobx/hrmSalary/stores/taxAgent.js

@@ -21,7 +21,7 @@ export class TaxAgentStore {
 
   @observable columns = [];
   @observable dataSource = [];
-
+  @observable taxAgentOption = []; // 个税扣缴义务人
 
 
   @action
@@ -118,5 +118,13 @@ export class TaxAgentStore {
       }
     })
   }
+
+  @action fetchTaxAgentOption = () => {
+    API.getTaxAgentSelectList().then(action(res => {
+      if(res.status) {
+        this.taxAgentOption = res.data.list.map(item =>  {return {key: item.id, showname: item.content}})
+      }
+    }))
+  }
   
 }