薪资项目列表

pc4mobx/hrmSalary/apis/item.js

@@ -7,7 +7,14 @@ import { WeaTools } from 'ecCom';
 
 // 薪资项目-获取列表
 export const getItemList = params => {
-  return WeaTools.callApi('/api/bs/hrmsalary/salaryitem/list', 'POST', params);
+    return fetch('/api/bs/hrmsalary/salaryitem/list', {
+        method: 'POST',
+        mode: 'cors',
+        headers: {
+            'Content-Type': 'application/json'
+        }, 
+        body: JSON.stringify(params)
+    }).then(res => res.json())
 };
 
 //薪资项目的高级搜索

pc4mobx/hrmSalary/pages/salaryItem/index.js

@@ -3,8 +3,9 @@ import { inject, observer } from 'mobx-react';
 import { toJS } from 'mobx';
 
 import { Button, Table, DatePicker, Switch, Menu, Dropdown } from 'antd';
+import { WeaTableNew } from "comsMobx"
 
-import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaTable, WeaInputSearch } from 'ecCom';
+import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaInputSearch } from 'ecCom';
 
 import { renderNoright, getSearchs } from '../../util'; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
 import CustomTab from '../../components/customTab';
@@ -15,7 +16,10 @@ import SlideModalTitle from "../../components/slideModalTitle"
 
 const { MonthPicker } = DatePicker;
 
-@inject('baseTableStore')
+
+const WeaTable = WeaTableNew.WeaTable;
+
+@inject('salaryItemStore')
 @observer
 export default class SalaryItem extends React.Component {
   constructor(props) {
@@ -45,9 +49,16 @@ export default class SalaryItem extends React.Component {
       }
     })
   }
+
+
+  componentWillMount() { // 初始化渲染页面
+    const { salaryItemStore: { doInit }} = this.props;
+    doInit();
+  }
+
   render() {
-    const { baseTableStore } = this.props;
-    const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = baseTableStore;
+    const { salaryItemStore } = this.props;
+    const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = salaryItemStore;
 
     if (!hasRight && !loading) { // 无权限处理
       return renderNoright();
@@ -128,7 +139,15 @@ export default class SalaryItem extends React.Component {
                   renderRightOperation()
                 }
               />
-            <WeaTable columns={columns} dataSource={dataSource}/>
+
+              <WeaTable // table内部做了loading加载处理，页面就不需要再加了
+                comsWeaTableStore={tableStore} // table store
+                hasOrder={true} // 是否启用排序
+                needScroll={true} // 是否启用table内部列表滚动，将自适应到父级高度
+                
+                // getColumns={this.getColumns}
+                // onOperatesClick={this.onOperatesClick.bind(this)}
+              />
           </WeaTop>
         </WeaRightMenu>
 

pc4mobx/hrmSalary/stores/index.js

@@ -9,6 +9,7 @@ import { OtherDeductStore } from "./otherDeduct"
 import { CumSituationStore } from './cumSituation'
 import { ProgrammeStore } from './programme'
 import { AttendanceStore } from './attendanceStore';
+import { SalaryItemStore } from './salaryItem'
 
 module.exports = {
   baseFormStore: new BaseFormStore(),
@@ -20,6 +21,7 @@ module.exports = {
   otherDeductStore: new OtherDeductStore(),
   cumSituationStore: new CumSituationStore(),
   programmeStore: new ProgrammeStore(),
-  attendanceStore: new AttendanceStore()
+  attendanceStore: new AttendanceStore(),
+  salaryItemStore: new SalaryItemStore()
 };
 

pc4mobx/hrmSalary/stores/salaryItem.js

@@ -0,0 +1,60 @@
+import { observable, action, toJS } from 'mobx';
+import { message } from 'antd';
+import { WeaForm, WeaTableNew } from 'comsMobx';
+
+import * as API from '../apis/item'; // 引入API接口文件
+
+const { TableStore } = WeaTableNew;
+
+export class SalaryItemStore {
+  @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.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;
+    API.getItemList(params).then(action(res => {
+      if (res.status) { // 接口请求成功/失败处理
+        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;
+  }
+
+}