个税税率表页面功能结束

2022-03-03 15:28:00 +08:00 · 2022-03-03 15:28:00 +08:00 · 0f7c6320bc
parent 5082b4192e
commit 0f7c6320bc
6 changed files with 149 additions and 30 deletions
--- a/pc4mobx/hrmSalary/apis/taxrate.js
+++ b/pc4mobx/hrmSalary/apis/taxrate.js
@ -8,7 +8,14 @@ export const getTaxRateList = params => {

 //删除税率表
 export const deleteTaxRate = params => {
-    return WeaTools.callApi('/api/bs/hrmsalary/taxrate/del', 'POST', params);
+    return fetch('/api/bs/hrmsalary/taxrate/delete', {
+        method: 'POST',
+        mode: 'cors',
+        headers: {
+            'Content-Type': 'application/json'
+        }, 
+        body: JSON.stringify(params)
+    }).then(res => res.json())
 }

 //获取新建或者详情表单
@ -30,5 +37,12 @@ export const saveTaxRate = params => {

 //编辑税率表
 export const updateTaxRate = params => {
-    return WeaTools.callApi('/api/bs/hrmsalary/taxrate/update', 'POST', params);
+    return fetch('/api/bs/hrmsalary/taxrate/update', {
+        method: 'POST',
+        mode: 'cors',
+        headers: {
+            'Content-Type': 'application/json'
+        }, 
+        body: JSON.stringify(params)
+    }).then(res => res.json())
 }
--- a/pc4mobx/hrmSalary/components/EditTable/index.js
+++ b/pc4mobx/hrmSalary/components/EditTable/index.js
@ -12,15 +12,18 @@ export class EditableCell extends React.Component {
    this.props.onChange(value);
  }
  render() {
-    const { value, editable } = this.state;
+    const { value } = this.state;
+    const { editable } = this.props;
    return (
     
        <div className="editable-cell">
          <div className="editable-cell-input-wrapper">
-            <Input
-              value={value}
-              onChange={this.handleChange}
-            />
+            {
+              editable ? <Input
+                value={value}
+                onChange={this.handleChange}
+              /> : value
+            }
          </div>
        </div>
      
@ -40,6 +43,7 @@ export default class EditableTable extends React.Component {
            value={text}
            record={record}
            onChange={this.onCellChange(record.indexNum, item.dataIndex)}
+            editable={this.props.editable}
          />
        )
      }
@ -64,6 +68,7 @@ export default class EditableTable extends React.Component {
              <EditableCell
                value={text}
                onChange={this.onCellChange(record.indexNum, child.dataIndex)}
+                editable={this.props.editable}
              />
            )
          }
@ -93,11 +98,14 @@ export default class EditableTable extends React.Component {
  }
  render() {
    const columns = this.columns;
+    const { editable } = this.props;
    return (
      <div>
-        <div className="operateWrapper">
+        {
+          editable && <div className="operateWrapper">
          <i className="icon-coms-tianjia operateItem" onClick={() => { this.props.addItem() }} />
        </div>
+        }
        <Table columns={this.columns} dataSource={this.props.dataSource} {...this.props} />
      </div>
    );
--- a/pc4mobx/hrmSalary/components/slideModalTitle/index.js
+++ b/pc4mobx/hrmSalary/components/slideModalTitle/index.js
@ -3,6 +3,11 @@ import { Button } from 'antd';
 import "./index.less"

 export default class SlideModalTitle extends React.Component {
+  componentWillMount() { // 初始化渲染页面
+    this.state = {
+      editable: this.props.editable === undefined ? "true": this.props.editable
+    }
+  }
    render() {
        return <div className="slideTitleWrapper">
        <div className="iconWrapper">
@ -12,7 +17,9 @@ export default class SlideModalTitle extends React.Component {
          <div className="subtitle">{this.props.subtitle}</div>
        </div>
        <div className="btnWrapper">
-            <Button type="primary" className="saveBtn" onClick={this.props.onSave}>保存</Button>
+            {
+              this.state.editable && <Button type="primary" className="saveBtn" onClick={this.props.onSave}>保存</Button>
+            }
        </div>
        
      </div>
--- a/pc4mobx/hrmSalary/pages/taxRate/editSlideContent.js
+++ b/pc4mobx/hrmSalary/pages/taxRate/editSlideContent.js
@ -19,9 +19,14 @@ let emptyItem = {
@inject('taxRateStore')
@observer
 export default class EditSlideContent extends React.Component {
-    constructor(props) {
-        super(props);
-    }
+
+    componentWillMount() { // 初始化渲染页面
+        this.state = {
+          editable: this.props.editable === undefined ? "true": this.props.editable
+        }
+      }
+
+

    addItem() {
        const { taxRateStore: {setDataSource}} = this.props;
@ -51,6 +56,7 @@ export default class EditSlideContent extends React.Component {
                            onChange={value => {
                                setNameValue(value)
                            }}
+                            viewAttr={this.props.editable ? 2: 1}
                        />
                    </Col>
                </Row>
@ -66,6 +72,7 @@ export default class EditSlideContent extends React.Component {
                            onChange={value => {
                                setRemarkValue(value)
                            }}
+                            viewAttr={this.props.editable ? 2: 1}
                        />
                    </Col>
                </Row>
@ -77,6 +84,7 @@ export default class EditSlideContent extends React.Component {
                bordered
                addItem={() => {this.addItem()}}
                onDataSourceChange={setDataSource}
+                editable={this.state.editable}
            />
            </WeaSearchGroup>
        </div>                    
--- a/pc4mobx/hrmSalary/pages/taxRate/index.js
+++ b/pc4mobx/hrmSalary/pages/taxRate/index.js
@ -2,7 +2,7 @@ import React from 'react';
 import { inject, observer } from 'mobx-react';
 import { toJS } from 'mobx';

-import { Button, Table, DatePicker } from 'antd';
+import { Button, Table, DatePicker, Modal } from 'antd';

 import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaInputSearch, WeaSlideModal } from 'ecCom';
 import { WeaTableNew } from 'comsMobx';
@ -26,7 +26,9 @@ export default class TaxRate extends React.Component {
    super(props);
    this.state = {
      value: "",
-      selectedKey: "0"
+      selectedKey: "0",
+      currentOperate:  "add",
+      editable: false,
    } 
  }

@ -44,7 +46,7 @@ export default class TaxRate extends React.Component {
        let valueSpan = record[newColumn.dataIndex + "span"] !== undefined ? record[newColumn.dataIndex + "span"] : record[newColumn.dataIndex];
        switch(newColumn.dataIndex) {
          case "name":
-            return <a onClick={() => {this.onEdit(record)}}
+            return <a onClick={() => {this.onEdit(record, false)}}
               dangerouslySetInnerHTML={{ __html: valueSpan }} />
          default:
            return <div dangerouslySetInnerHTML={{ __html: valueSpan }} />
@ -55,28 +57,60 @@ export default class TaxRate extends React.Component {
    return newColumns;
  }

-  onEdit = (record) => {
+  onEdit = (record, editable) => {
+    this.setState({currentOperate: "update", editable: editable})
    const {taxRateStore: {setSlideVisiable, emptyForm, getItemInform }} = this.props;
    emptyForm();
    setSlideVisiable(true);
    getItemInform(record.id)
  }

+  handleInsertBtnClick = () => {
+    const {taxRateStore: {setSlideVisiable, emptyForm }} = this.props;
+    this.setState({
+      currentOperate: "add",
+      editable: true
+    })
+    emptyForm();
+    setSlideVisiable(true) 
+  }
+
+  onOperatesClick = (record, index, operate, flag) => {
+    const {taxRateStore : {doDelete}} = this.props;
+    switch(operate.index.toString()){
+      case '0': // 编辑
+        this.onEdit(record, true);
+        break;
+      case "1": // 删除
+        Modal.confirm({
+          title: "信息确认",
+          content: "确定删除吗",
+          onOk() {
+            doDelete([record.id])
+          },
+          onCancel() {}
+        });
+        break;
+    }
+  };
+
  render() {
    const { taxRateStore } = this.props;
    const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = taxRateStore;
-    const { doSave, slideVisiable, setSlideVisiable, emptyForm } = taxRateStore
+    const { doSave, slideVisiable, setSlideVisiable, emptyForm, doUpdate, doBatchDelete } = taxRateStore
+    const selectedRowKeys = toJS(tableStore.selectedRowKeys) || []; // tableStore 右侧选中数组
    if (!hasRight && !loading) { // 无权限处理
      return renderNoright();
    }

    const rightMenu = [// 右键菜单
-      { 
-        key: 'BTN_COLUMN',
-        icon: <i className='icon-coms-Custom' />,
-        content: '显示列定制',
-        onClick: this.showColumn
-      },
+      {
+        key: 'BTN_DEL',
+        icon: <i className='icon-coms-delete'/>,
+        content : '批量删除',
+        disable: selectedRowKeys.length === 0, // 没有选中禁用
+        onClick : doBatchDelete,
+      }
    ];
    const collectParams = { // 收藏功能配置
      favname: '个税税率表',
@ -97,8 +131,7 @@ export default class TaxRate extends React.Component {
    const renderSearchOperationItem = () => {
      return <div>
        <Button type="primary" onClick={() => { 
-          emptyForm();
-          setSlideVisiable(true) 
+          this.handleInsertBtnClick()
          }}>新建</Button>
        {'  '}
        <WeaInputSearch
@ -107,9 +140,10 @@ export default class TaxRate extends React.Component {
          
        />
      </div>
-     
    }

+
+
    return (
      <div className="mySalaryBenefitsWrapper">
        <WeaRightMenu
@ -138,6 +172,7 @@ export default class TaxRate extends React.Component {
                hasOrder={true} // 是否启用排序
                needScroll={true} // 是否启用table内部列表滚动，将自适应到父级高度
                getColumns={this.getColumns}
+                onOperatesClick={this.onOperatesClick.bind(this)}
              />
          </WeaTop>
        </WeaRightMenu>
@ -151,12 +186,13 @@ export default class TaxRate extends React.Component {
          measure={'%'}
          title={
            <SlideModalTitle 
-              subtitle="新增社保方案"
+              subtitle={!this.state.editable ? "查看社保方案" : this.state.currentOperate == "add" ?  "新建社保方案" : "编辑社保方案" }
              subTabs={[{title: "基础设置"}]}
-              onSave={() => {doSave()}}
+              onSave={() => {this.state.currentOperate == "add" ? doSave() : doUpdate()}}
+              editable={this.state.editable}
            />
          }
-          content={(<EditSlideContent />)}
+          content={(<EditSlideContent editable={this.state.editable}/>)}
          onClose={() => setSlideVisiable(false)}
          showMask={true}
          closeMaskOnClick={() => setSlideVisiable(false)} />
--- a/pc4mobx/hrmSalary/stores/taxRate.js
+++ b/pc4mobx/hrmSalary/stores/taxRate.js
@ -18,6 +18,8 @@ export class taxRateStore {
  @observable remarkValue = ""; 
  @observable slideVisiable = false; // 侧边划入是否展示

+  currentId = ""; // 当前编辑的数据id
+
  @action
  setSlideVisiable = slideVisiable => this.slideVisiable = slideVisiable;

@ -88,8 +90,8 @@ export class taxRateStore {
  
  // 获取表单数据
  @action getItemInform = (id) => {
+    this.currentId= id;
    API.getTaxRateForm({id}).then(res => {
-      
      if(res.status) {
        let { taxRateBatch, taxRateRecords } = res.data.form
        this.setNameValue(taxRateBatch.name);
@ -101,4 +103,48 @@ export class taxRateStore {
    })
  }

+  @action doUpdate = () => {
+    let params = {
+      taxRateBatch: {
+        name: this.nameValue,
+        description: this.remarkValue,
+        id: this.currentId
+      },
+      taxRateRecords: this.dataSource
+    }
+    API.updateTaxRate(params).then(res => {
+      if(res.status) {
+        message.success("保存成功");
+        this.getTableDatas();
+        this.showSearchAd = false;
+        this.setSlideVisiable(false);
+      } else {
+        message.warning("保存失败: " + res.errormsg ? res.errormsg: "");
+      }
+    })
+  }
+
+  @action doDelete = (ids) => {
+    API.deleteTaxRate(ids).then(res => {
+      if(res.status) {
+        message.success("删除成功");
+        this.getTableDatas();
+        this.showSearchAd = false;
+      } else {
+        message.warning("删除失败: " + res.errormsg ? res.errormsg: "");
+      }
+    })
+  }
+
+  // 批量删除
+  @action
+  doBatchDelete = () => {
+    let ids = toJS(this.tableStore.selectedRowKeys)
+    if(ids.length == 0) {
+      message.warning("未选择任何条目");
+      return
+    }
+    this.doDelete(toJS(this.tableStore.selectedRowKeys))
+  }
+
 }