接口绑定之前

2022-03-01 09:42:00 +08:00 · 2022-03-01 09:42:00 +08:00 · 93a07d6ff2
parent 133ded0044
commit 93a07d6ff2
9 changed files with 328 additions and 42 deletions
--- a/pc4mobx/hrmSalary/components/slideModalTitle/index.js
+++ b/pc4mobx/hrmSalary/components/slideModalTitle/index.js
@ -10,16 +10,6 @@ export default class SlideModalTitle extends React.Component {
        </div>
        <div className="slideTitle">
          <div className="subtitle">{this.props.subtitle}</div>
-          <div className="subTabWrapper">
-              {
-                  this.props.subTabs.map(item => (
-                    <div className="tabItem">
-                        {item.title}
-                    </div>
-                  ))
-              }
-            
-          </div>
        </div>
        <div className="btnWrapper">
            <Button type="primary" className="saveBtn">保存</Button>
--- a/pc4mobx/hrmSalary/components/slideModalTitle/index.less
+++ b/pc4mobx/hrmSalary/components/slideModalTitle/index.less
@ -15,8 +15,8 @@
    .slideTitle {
        display: inline-block;
        .subtitle {
-            height: 30px;
-            line-height: 30px;
+            height: 52px;
+            line-height: 52px;
            font-size: 14px;
            font-weight: 600;
        }
--- a/pc4mobx/hrmSalary/index.js
+++ b/pc4mobx/hrmSalary/index.js
@ -15,7 +15,7 @@ import SalarySet from './pages/salarySet';
 import SalaryAccounting from './pages/salaryAccounting';
 import PayrollPayment from './pages/payrollPayment';
 import IndividualIncomeTaxApplicationForm from './pages/individualIncomeTaxApplicationForm';
-import IndividualIncomeTaxRateForm from './pages/individualIncomeTaxRateForm';
+import TaxRate from './pages/taxRate';
 import TaxAgent from './pages/taxAgent';


@ -76,7 +76,7 @@ const Routes = (
    <Route key='salaryAccounting' path='salaryAccounting' component={SalaryAccounting} />
    <Route key='payrollPayment' path='payrollPayment' component={PayrollPayment} />
    <Route key='individualIncomeTaxApplicationForm' path='individualIncomeTaxApplicationForm' component={IndividualIncomeTaxApplicationForm} />
-    <Route key='individualIncomeTaxRateForm' path='individualIncomeTaxRateForm' component={IndividualIncomeTaxRateForm} />
+    <Route key='taxRate' path='taxRate' component={TaxRate} />
    <Route key='taxAgent' path='taxAgent' component={TaxAgent} />
  </Route>
 );
--- a/pc4mobx/hrmSalary/pages/mySalary/index.js
+++ b/pc4mobx/hrmSalary/pages/mySalary/index.js
@ -18,7 +18,7 @@ import { payrollColumns,

 const { MonthPicker } = DatePicker;

-@inject('mySalaryStore')
+@inject('baseTableStore')
@observer
 export default class MySalary extends React.Component {
  constructor(props) {
@ -29,9 +29,9 @@ export default class MySalary extends React.Component {
    }
  }
  render() {
-    const { mySalaryStore } = this.props;
-    const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = mySalaryStore;
-    const { tabIndex } = mySalaryStore 
+    const { baseTableStore } = this.props;
+    const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = baseTableStore;
+    const { tabIndex } = baseTableStore 

    if (!hasRight && !loading) { // 无权限处理
      return renderNoright();
@ -128,18 +128,16 @@ export default class MySalary 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>
--- a/pc4mobx/hrmSalary/pages/socialSecurityBenefits/programme/index.js
+++ b/pc4mobx/hrmSalary/pages/socialSecurityBenefits/programme/index.js
@ -132,7 +132,7 @@ export default class Programme extends React.Component {
        </WeaRightMenu>
        <WeaSlideModal visible={this.state.slideVisiable}
          top={0}
-          width={60}
+          width={40}
          height={100}
          direction={'right'}
          measure={'%'}
--- a/pc4mobx/hrmSalary/pages/taxAgent/columns.js
+++ b/pc4mobx/hrmSalary/pages/taxAgent/columns.js
@ -1,6 +1,6 @@
 export const columns = [
    {
-        title: "姓名",
+        title: "序号",
        dataIndex: 'title',
        key: 'title',
    },
@ -10,22 +10,7 @@ export const columns = [
        key: 'title',
    },
    {
-        title: "部门",
-        dataIndex: 'title',
-        key: 'title',
-    },
-    {
-        title: "手机号",
-        dataIndex: 'title',
-        key: 'title',
-    },
-    {
-        title: "员工状态",
-        dataIndex: 'title',
-        key: 'title',
-    },
-    {
-        title: "基本工资",
+        title: "备注",
        dataIndex: 'title',
        key: 'title',
    },
--- a/pc4mobx/hrmSalary/pages/taxRate/columns.js
+++ b/pc4mobx/hrmSalary/pages/taxRate/columns.js
@ -0,0 +1,118 @@
+export const columns = [
+    {
+        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: "操作",
+        dataIndex: 'title',
+        key: 'title',
+    }
+]
+
+export const slideColumns = [
+    {
+      title: '序号',
+      dataIndex: 'name',
+      key: 'name',
+      width: 100,
+      fixed: 'left'
+    },
+    {
+      title: '收入',
+      children: [
+        {
+          title: '下限(不含)',
+          dataIndex: 'age',
+          key: 'age',
+          width: 150,
+          sorter: (a, b) => a.age - b.age,
+        },
+        {
+          title: '上限(含)',
+          dataIndex: 'age',
+          key: 'age'
+        },
+      ],
+    },
+    {
+      title: '免税标准',
+      children: [
+        {
+          title: '固定值',
+          dataIndex: 'companyAddress',
+          key: 'companyAddress',
+          width: 200,
+        },
+        {
+          title: '比例',
+          dataIndex: 'companyName',
+          key: 'companyName',
+        },
+      ],
+    },
+    {
+      title: '应纳税所得额',
+      children: [
+        {
+          title: '下限(不含)',
+          dataIndex: 'companyAddress',
+          key: 'companyAddress',
+          width: 200,
+        },
+        {
+          title: '上限(含)',
+          dataIndex: 'companyName',
+          key: 'companyName',
+        },
+      ],
+    },
+    {
+      title: '税率',
+      dataIndex: 'gender',
+      key: 'gender',
+      width: 80,
+      fixed: 'right',
+    },
+    {
+      title: '速算扣除',
+      dataIndex: 'gender',
+      key: 'gender',
+      width: 80,
+      fixed: 'right',
+    }
+  ];
+
+
+export const dataSource = [];
+
+
+
+
+
--- a/pc4mobx/hrmSalary/pages/taxRate/editSlideContent.js
+++ b/pc4mobx/hrmSalary/pages/taxRate/editSlideContent.js
@ -0,0 +1,72 @@
+import React from 'react';
+import { Row, Col, Table } from "antd"
+import { WeaInput, WeaTextarea, WeaSearchGroup } from "ecCom";
+import { slideColumns, dataSource} from './columns';
+
+
+export default class EditSlideContent extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            value: ""
+        }
+    }
+    render() {
+        return (
+            <div>
+            <WeaSearchGroup showGroup={true} title={"基本信息"}>
+                <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}>
+                        <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>
+            </WeaSearchGroup>
+            <WeaSearchGroup showGroup={true} title={"详细设置"}>
+            <Table
+                columns={slideColumns}
+                dataSource={dataSource}
+                bordered
+                size="middle"
+                scroll={{ x: 'calc(700px + 50%)', y: 240 }}
+            />
+            </WeaSearchGroup>
+        </div>                    
+        )
+    }
+}
--- a/pc4mobx/hrmSalary/pages/taxRate/index.js
+++ b/pc4mobx/hrmSalary/pages/taxRate/index.js
@ -0,0 +1,123 @@
+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, WeaInputSearch, WeaSlideModal } from 'ecCom';
+
+import { renderNoright, getSearchs } from '../../util'; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
+import CustomTab from '../../components/customTab';
+import ContentWrapper from '../../components/contentWrapper';
+
+import { columns, dataSource } from './columns';
+
+import SlideModalTitle from '../../components/slideModalTitle';
+import EditSlideContent from './editSlideContent';
+
+const { MonthPicker } = DatePicker;
+
+@inject('baseTableStore')
+@observer
+export default class TaxRate extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: "",
+      selectedKey: "0",
+      slideVisiable: false,
+
+    }
+  }
+  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>
+        <Button type="primary" onClick={() => { this.setState({slideVisiable: true}) }}>新建</Button>
+        {'  '}
+        <WeaInputSearch
+          value={this.state.searchValue}
+          placeholder={'请输入个税税率表名称'}
+        />
+      </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个功能
+          >
+
+            <CustomTab topTab={topTab}
+              searchOperationItem={
+                renderSearchOperationItem()
+              }
+              onChange={(v) => {
+                this.setState({ selectedKey: v })
+              }}
+            />
+            <WeaTable columns={columns} dataSource={dataSource}/>
+          </WeaTop>
+        </WeaRightMenu>
+
+        <WeaSlideModal visible={this.state.slideVisiable}
+          top={0}
+          width={40}
+          height={100}
+          direction={'right'}
+          measure={'%'}
+          title={
+            <SlideModalTitle 
+              subtitle="新增社保方案"
+              subTabs={[{title: "基础设置"}]}
+            />
+          }
+          content={(<EditSlideContent />)}
+          onClose={() => this.setState({ slideVisiable: false })}
+          showMask={true}
+          closeMaskOnClick={() => this.setState({ slideVisiable: false })}
+          onAnimationEnd={() => console.log('onAnimationEnd')} />
+      </div>
+    )
+  }
+}