qt
/
salary-management-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

页面操作按钮权限的控制

This commit is contained in:
liyongshun 2022-06-21 14:27:16 +08:00
parent 2a8aac2068
commit 78b12043aa
7 changed files with 357 additions and 261 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
pc4mobx/hrmSalary/pages/calculate/index.js
View File

@ -26,7 +26,7 @@ import CustomPaginationTable from "../../components/customPaginationTable";
const { RangePicker } = DatePicker;
@inject("calculateStore")
@inject("calculateStore", "taxAgentStore")
@observer
export default class Calculate extends React.Component {
constructor(props) {
@ -111,7 +111,7 @@ export default class Calculate extends React.Component {
handleDeleteItem(record) {
Modal.confirm({
title: "信息确认",
content: "确认删除",
content: "确认删除本条数据吗?",
onOk: () => {
const { calculateStore: { deleteSalaryacct } } = this.props;
deleteSalaryacct([record.id]).then(() => {
@ -148,10 +148,10 @@ export default class Calculate extends React.Component {
// 获取列表
getColumns() {
const { calculateStore: { salaryListColumns } } = this.props;
const { calculateStore: { salaryListColumns }, taxAgentStore: { showOperateBtn } } = this.props;
let columns = [...salaryListColumns];
columns.map(item => {
if (item.title == "操作") {
if (item.title == "操作" && showOperateBtn ) {
item.render = (text, record) => {
const accountBtn = _.filter(record.operate, it => it.text == "核算");
const notAccountBtn = _.filter(record.operate, it => it.text != "核算");
@ -205,7 +205,7 @@ export default class Calculate extends React.Component {
)}
</Menu>
}>
<i className="icon-coms-more" />
<i className="icon-coms-more" style={{ color: "#4d7ad8", cursor: "pointer" }}/>
</Dropdown>
);
}
@ -242,7 +242,7 @@ export default class Calculate extends React.Component {
}
render() {
const { calculateStore } = this.props;
const { calculateStore, taxAgentStore: { showOperateBtn } } = this.props;
const {
salaryListDataSource,
salaryListColumns,
@ -303,15 +303,18 @@ export default class Calculate extends React.Component {
const { startDate, endDate } = this.state;
return (
<div style={{ display: "inline-block" }}>
<Button
type="primary"
style={{ marginRight: "10px" }}
// onClick={() => window.open("/spa/hrmSalary/static/index.html#/main/hrmSalary/calculateDetail")}
onClick={() => {
this.setState({ baseFormVisible: true });
}}>
核算
</Button>
{
showOperateBtn &&
<Button
type="primary"
style={{ marginRight: "10px" }}
// onClick={() => window.open("/spa/hrmSalary/static/index.html#/main/hrmSalary/calculateDetail")}
onClick={() => {
this.setState({ baseFormVisible: true });
}}>
核算
</Button>
}
<div
style={{ display: "inline-block", position: "relative", top: 2 }}>
<RangePicker

22
pc4mobx/hrmSalary/pages/declare/index.js
View File

@ -160,7 +160,7 @@ export default class Declare extends React.Component {
}
render() {
const { declareStore } = this.props;
const { declareStore, taxAgentStore: { showOperateBtn } } = this.props;
const {
loading,
hasRight,
@ -222,15 +222,17 @@ export default class Declare extends React.Component {
defaultValue={[this.state.startDate, this.state.endDate]}
onChange={(value) => this.handleRangePickerChange(value)}
/>
<Button
type="primary"
style={{ marginLeft: "10px" }}
onClick={() => {
this.setState({ declarationModalVisible: true });
}}>
生成申报单
</Button>
{
showOperateBtn &&
<Button
type="primary"
style={{ marginLeft: "10px", position: "relative", top: '-2px' }}
onClick={() => {
this.setState({ declarationModalVisible: true });
}}>
生成申报单
</Button>
}
</div>
);
};

57
pc4mobx/hrmSalary/pages/ledger/copyFormModal.js
View File

@ -1,6 +1,12 @@
/*
* Author: 黎永顺
* Description:
* Date: 2022-06-20 13:53:14
* LastEditTime: 2022-06-21 13:30:00
*/
import React from "react";
import { Modal, Button, Row, Col } from "antd";
import { WeaInput, WeaSelect } from "ecCom";
import { WeaInput, WeaSelect, WeaError } from "ecCom";
export default class CopyFormModal extends React.Component {
constructor(props) {
@ -23,6 +29,14 @@ export default class CopyFormModal extends React.Component {
<Button
type="primary"
onClick={() => {
if (!this.state.name) {
this.refs.weaNameError.showError();
return;
}
if (!this.state.taxAgentId) {
this.refs.weaTaxAgentError.showError();
return;
}
this.props.onSave({
name: this.state.name,
taxAgentId: this.state.taxAgentId
@ -34,27 +48,36 @@ export default class CopyFormModal extends React.Component {
<Row style={{ display: "flex", alignItems: "center" }}>
<Col span={6}>账套名称</Col>
<Col span={18}>
<WeaInput
style={{ width: "200px" }}
value={this.state.name}
onChange={value => {
this.setState({ name: value });
}}
/>
<WeaError tipPosition="bottom" ref="weaNameError" error="账套名称不能为空">
<WeaInput
style={{ width: "200px" }}
value={this.state.name}
onChange={value => {
this.setState({ name: value });
!value && this.refs.weaNameError.showError();
}}
/>
</WeaError>
</Col>
</Row>
<Row style={{ display: "flex", alignItems: "center" }}>
<Col span={6}>个税扣缴义务人</Col>
<Col span={18}>
<WeaSelect
showSearch // 设置select可搜索
style={{ width: 200, marginTop: 10 }}
options={taxAgentOption}
value={this.state.taxAgentId}
onChange={value => {
this.setState({ taxAgentId: value });
}}
/>
<WeaError
tipPosition="bottom"
ref="weaTaxAgentError"
error="请选择个税扣缴义务人">
<WeaSelect
showSearch // 设置select可搜索
style={{ width: 200, marginTop: 10 }}
options={taxAgentOption}
value={this.state.taxAgentId}
onChange={value => {
this.setState({ taxAgentId: value });
!value && this.refs.weaTaxAgentError.showError();
}}
/>
</WeaError>
</Col>
</Row>
</Modal>

19
pc4mobx/hrmSalary/pages/ledger/index.js
View File

@ -231,6 +231,7 @@ export default class Ledger extends React.Component {
setShowSearchAd,
baseInfoRequest,
} = ledgerStore;
const { showOperateBtn }= taxAgentStore;
const { canEdit } = baseInfoRequest;
const { currentStep, selectedTab } = this.state;
if (!hasRight && !loading) {
@ -273,12 +274,15 @@ export default class Ledger extends React.Component {
const renderRightOperation = () => {
return (
<div style={{ display: "inline-block" }}>
<Button
type="primary"
style={{ marginRight: "10px" }}
onClick={() => this.handleNew()}>
新建
</Button>
{
showOperateBtn &&
<Button
type="primary"
style={{ marginRight: "10px" }}
onClick={() => this.handleNew()}>
新建
</Button>
}
<WeaInputSearch
value={this.state.searchValue}
onChange={(value) => {
@ -394,13 +398,14 @@ export default class Ledger extends React.Component {
render: (text, record) => (
<Switch
checked={text == 0}
disabled={!showOperateBtn}
onChange={(value) => {
this.handleItemStatusChange(value, record);
}}
/>
),
};
} else if (item.dataIndex === "operate") {
} else if (item.dataIndex === "operate" && showOperateBtn) {
return {
...item,
render: (text, record) => (

295
pc4mobx/hrmSalary/pages/payroll/SalarySendList.js
View File

@ -1,131 +1,180 @@
import React from 'react'
import { inject, observer } from 'mobx-react';
import { Table, Menu, Dropdown, message } from 'antd'
import { WeaTable } from 'ecCom'
import moment from 'moment'
import React from "react";
import { inject, observer } from "mobx-react";
import { Table, Menu, Dropdown, message } from "antd";
import { WeaTable } from "ecCom";
import moment from "moment";
import CustomTable from "../../components/customTable";
import CustomPaginationTable from "../../components/customPaginationTable";
import CustomTable from '../../components/customTable';
import CustomPaginationTable from '../../components/customPaginationTable'
@inject('payrollStore')
@inject("payrollStore")
@observer
export default class SalarySendList extends React.Component {
constructor(props) {
super(props)
this.searchParams = {salaryYearMonth: this.props.salaryYearMonth}
this.pageInfo = {current: 1, pageSize: 10}
constructor(props) {
super(props);
this.searchParams = { salaryYearMonth: this.props.salaryYearMonth };
this.pageInfo = { current: 1, pageSize: 10 };
}
componentWillMount() {
const { payrollStore: { getPayrollList } } = this.props;
getPayrollList();
}
// 发放回调
handleGrant(record) {
window.open(
"/spa/hrmSalary/static/index.html#/main/hrmSalary/payrollGrant?id=" +
record.id
);
}
// 查看详情
handleShowDetail(record) {
window.open(
"/spa/hrmSalary/static/index.html#/main/hrmSalary/payrollDetail?id=" +
record.id
);
}
// 更新模板
handleUpdateTemplate(record) {
let templateRecord = {};
templateRecord.id = record.templateId;
if (!record.templateId) {
message.warning("请设置默认模板");
return;
}
this.props.onEditTemplate && this.props.onEditTemplate(templateRecord);
}
// 获取表头数据
getColumns() {
const {
payrollStore: { salarySendTableStore },
showOperateBtn
} = this.props;
const { columns } = salarySendTableStore;
if (!columns) {
return [];
}
componentWillMount() {
const { payrollStore: {getPayrollList} } = this.props;
getPayrollList()
}
// 发放回调
handleGrant(record) {
window.open("/spa/hrmSalary/static/index.html#/main/hrmSalary/payrollGrant?id=" + record.id)
}
// 查看详情
handleShowDetail(record) {
window.open("/spa/hrmSalary/static/index.html#/main/hrmSalary/payrollDetail?id=" + record.id)
}
// 更新模板
handleUpdateTemplate(record) {
let templateRecord = {}
templateRecord.id = record.templateId;
if(!record.templateId) {
message.warning("请设置默认模板")
return
}
this.props.onEditTemplate && this.props.onEditTemplate(templateRecord)
}
// 获取表头数据
getColumns() {
const {payrollStore : {salarySendTableStore}} = this.props;
const{ columns } = salarySendTableStore
if(!columns) {
return [];
}
let result = columns.filter(item => item.hide == "false")
result.map(item => {
if(item.dataIndex == "salaryYearMonth") {
item.render = (text, record) => {
return <span>{moment(parseInt(text)).format("YYYY-MM")}</span>
}
} else if(item.dataIndex == "lastSendTime") {
item.render = (text, record) => {
return <span>{moment(parseInt(text)).format("YYYY-MM-DD HH:mm:ss")}</span>
}
let result = columns.filter(item => item.hide == "false");
result.map(item => {
if (item.dataIndex == "salaryYearMonth") {
item.render = (text, record) => {
return (
<span>
{moment(parseInt(text)).format("YYYY-MM")}
</span>
);
};
} else if (item.dataIndex == "lastSendTime") {
item.render = (text, record) => {
return (
<span>
{moment(parseInt(text)).format("YYYY-MM-DD HH:mm:ss")}
</span>
);
};
}
});
showOperateBtn
? result.concat([
{
title: "操作",
key: "operate",
render: (text, record) => {
return (
<a
onClick={() => {
this.handleGrant(record);
}}>
发放
</a>
);
}
})
return result
.concat([
{
title: "操作",
key: "operate",
render: (text, record) => {
return (
<a onClick={() => {this.handleGrant(record)}}>发放</a>
)
}
},
{
title : '',
key: "moreOperate",
dataIndex: "moreOperate",
render: (text, record) => {
return (
<Dropdown overlay={<Menu>
<Menu.Item>
<a onClick={() => {
this.handleShowDetail(record)
}}>查看详情</a>
</Menu.Item>
<Menu.Item>
<a onClick={() => {
this.handleUpdateTemplate(record)
}}>更新模板</a>
</Menu.Item>
</Menu>}>
<i className="icon-coms-more"></i>
</Dropdown>
);
}
}
])
}
},
{
title: "",
key: "moreOperate",
dataIndex: "moreOperate",
render: (text, record) => {
return (
<Dropdown
overlay={
<Menu>
<Menu.Item>
<a
onClick={() => {
this.handleShowDetail(record);
}}>
查看详情
</a>
</Menu.Item>
render() {
const { payrollStore } = this.props;
const { salarySendTableStore, salarySendDataSource, pageInfo, loading } = payrollStore;
return (
<div>
<CustomPaginationTable
loading={loading}
columns={this.getColumns()}
dataSource={salarySendDataSource}
total={pageInfo.total}
current={pageInfo.pageNum}
pageSize={this.pageInfo.pageSize}
onPageChange={(value) => {
this.pageInfo.current = value
this.props.handleListDataPageChange(value, this.pageInfo)
}}
onShowSizeChange={(current, pageSize) => {
this.pageInfo = {current, pageSize}
this.props.handleListShowSizeChange(this.pageInfo)
}}
/>
</div>
)
}
}
<Menu.Item>
<a
onClick={() => {
this.handleUpdateTemplate(record);
}}>
更新模板
</a>
</Menu.Item>
</Menu>
}>
<i className="icon-coms-more" />
</Dropdown>
);
}
}
])
: result.concat([
{
title: "操作",
key: "operate",
render: (text, record) => {
return (
<a
onClick={() => {
this.handleShowDetail(record);
}}>
查看详情
</a>
);
}
}
]);
return result;
}
render() {
const { payrollStore } = this.props;
const {
salarySendTableStore,
salarySendDataSource,
pageInfo,
loading
} = payrollStore;
return (
<div>
<CustomPaginationTable
loading={loading}
columns={this.getColumns()}
dataSource={salarySendDataSource}
total={pageInfo.total}
current={pageInfo.pageNum}
pageSize={this.pageInfo.pageSize}
onPageChange={value => {
this.pageInfo.current = value;
this.props.handleListDataPageChange(value, this.pageInfo);
}}
onShowSizeChange={(current, pageSize) => {
this.pageInfo = { current, pageSize };
this.props.handleListShowSizeChange(this.pageInfo);
}}
/>
</div>
);
}
}

12
pc4mobx/hrmSalary/pages/payroll/index.js
View File

@ -23,7 +23,7 @@ import SalarySendList from './SalarySendList'
const { RangePicker } = DatePicker;
@inject('payrollStore')
@inject('payrollStore', 'taxAgentStore')
@observer
export default class Payroll extends React.Component {
constructor(props) {
@ -225,7 +225,7 @@ export default class Payroll extends React.Component {
}
render() {
const { payrollStore } = this.props;
const { payrollStore, taxAgentStore: { showOperateBtn } } = this.props;
const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = payrollStore;
const { currentStep, selectedTab, templateSearchValue, templateSelect } = this.state
if (!hasRight && !loading) { // 无权限处理
@ -279,7 +279,10 @@ export default class Payroll extends React.Component {
} else if(this.state.selectedKey == "1") {
return (
<div style={{display: "inline-block"}}>
<Button type="primary" onClick={() => {this.setState({stepSlideVisible: true})}}>新建</Button>
{
showOperateBtn &&
<Button type="primary" onClick={() => {this.setState({stepSlideVisible: true})}}>新建</Button>
}
{
this.state.initSelected && <WeaSelect options={this.state.ledgerOptions} style={{width: "200px", marginLeft: "10px", marginRight: "10px"}} value={templateSelect} onChange={(value) => {this.handleTemplateSelectChange(value)}}/>
}
@ -349,6 +352,7 @@ export default class Payroll extends React.Component {
{
this.state.selectedKey == 0 &&
<SalarySendList
showOperateBtn={showOperateBtn}
onEditTemplate={(record) => {
this.handleTemplateListEdit(record)
}}
@ -372,7 +376,7 @@ export default class Payroll extends React.Component {
onCopy={(record) => {
this.handleTemplateListCopy(record)
}}
showOperateBtn={showOperateBtn}
onDelete={(record)=> this.handleTemplateListDelete(record)}
/>
}

180
pc4mobx/hrmSalary/pages/payroll/templateSettingList.js
View File

@ -1,96 +1,106 @@
import React from 'react'
import { inject, observer } from 'mobx-react';
import { Radio, Spin } from 'antd'
import { WeaTableNew } from 'comsMobx';
import React from "react";
import { inject, observer } from "mobx-react";
import { Radio, Spin } from "antd";
import { WeaTableNew } from "comsMobx";
const WeaTable = WeaTableNew.WeaTable;
@inject('payrollStore')
@inject("payrollStore")
@observer
export default class TemplateSettingList extends React.Component {
componentWillMount() {
const { payrollStore } = this.props;
const { getPayrollTemplateList } = payrollStore;
getPayrollTemplateList();
}
componentWillMount() {
const { payrollStore } = this.props;
const { getPayrollTemplateList } = payrollStore;
getPayrollTemplateList();
}
// 编辑操作按钮
onEdit(record) {
this.props.onEdit && this.props.onEdit(record)
}
// 编辑操作按钮
onEdit(record) {
this.props.onEdit && this.props.onEdit(record);
}
// 复制操作按钮
onCopy(record) {
this.props.onCopy && this.props.onCopy(record)
}
// 复制操作按钮
onCopy(record) {
this.props.onCopy && this.props.onCopy(record);
}
// 删除操作按钮
onDelete(record) {
this.props.onDelete && this.props.onDelete(record)
}
// 删除操作按钮
onDelete(record) {
this.props.onDelete && this.props.onDelete(record);
}
// 操作按钮
onOperatesClick = (record, index, operate, flag) => {
switch(operate.index.toString()){
case '0': // 编辑
this.onEdit(record);
break;
case "1": // 复制
this.onCopy(record);
break;
case "2": // 删除
this.onDelete(record);
break;
// 操作按钮
onOperatesClick = (record, index, operate, flag) => {
switch (operate.index.toString()) {
case "0": // 编辑
this.onEdit(record);
break;
case "1": // 复制
this.onCopy(record);
break;
case "2": // 删除
this.onDelete(record);
break;
}
};
// 默认使用配置
recordItemChange(record) {
const { payrollStore } = this.props;
const { changePayrollDefaultUse, getPayrollTemplateList } = payrollStore;
changePayrollDefaultUse(record.id).then(() => {
getPayrollTemplateList();
});
}
// 增加编辑功能，重写columns绑定事件
getColumns = columns => {
const { showOperateBtn } = this.props;
let newColumns = "";
newColumns = columns.map(column => {
let newColumn = column;
newColumn.render = (text, record, index) => {
//前端元素转义
let valueSpan =
record[newColumn.dataIndex + "span"] !== undefined
? record[newColumn.dataIndex + "span"]
: record[newColumn.dataIndex];
switch (newColumn.dataIndex) {
case "useType":
return (
<Radio
disabled={!showOperateBtn}
checked={record.useType == "1"}
onChange={value => {
this.recordItemChange(record);
}}
/>
);
default:
return <div dangerouslySetInnerHTML={{ __html: valueSpan }} />;
}
};
};
return newColumn;
});
return newColumns;
};
// 默认使用配置
recordItemChange(record) {
const { payrollStore } = this.props;
const { changePayrollDefaultUse, getPayrollTemplateList } = payrollStore;
changePayrollDefaultUse(record.id).then(() => {
getPayrollTemplateList()
})
}
// 增加编辑功能，重写columns绑定事件
getColumns = (columns) => {
let newColumns = '';
newColumns = columns.map(column => {
let newColumn = column;
newColumn.render = (text, record, index) => { //前端元素转义
let valueSpan = record[newColumn.dataIndex + "span"] !== undefined ? record[newColumn.dataIndex + "span"] : record[newColumn.dataIndex];
switch(newColumn.dataIndex) {
case "useType":
return <Radio checked={record.useType == "1"} onChange={(value) => {this.recordItemChange(record)}}/>
default:
return <div dangerouslySetInnerHTML={{ __html: valueSpan }} />
}
}
return newColumn;
});
return newColumns;
}
render() {
const { payrollStore } = this.props;
const { templateStore, loading } = payrollStore;
return (
<div>
{ loading ?
<div style={{width: '100%', textAlign: "center"}}>
<Spin />
</div>
:
<WeaTable // table内部做了loading加载处理，页面就不需要再加了
comsWeaTableStore={templateStore} // table store
hasOrder={true} // 是否启用排序
needScroll={true} // 是否启用table内部列表滚动，将自适应到父级高度
getColumns={this.getColumns}
onOperatesClick={this.onOperatesClick.bind(this)}
/>
}
render() {
const { payrollStore } = this.props;
const { templateStore, loading } = payrollStore;
return (
<div>
{loading
? <div style={{ width: "100%", textAlign: "center" }}>
<Spin />
</div>
)
}
}
: <WeaTable // table内部做了loading加载处理，页面就不需要再加了
comsWeaTableStore={templateStore} // table store
hasOrder={true} // 是否启用排序
needScroll={true} // 是否启用table内部列表滚动，将自适应到父级高度
getColumns={this.getColumns}
onOperatesClick={this.onOperatesClick.bind(this)}
/>}
</div>
);
}
}