产品-统一页面列表操作按钮

This commit is contained in:
黎永顺 2023-07-03 15:42:11 +08:00
parent c0aa321bf0
commit 3d04a79fcd
11 changed files with 109 additions and 145 deletions

View File

@ -13,7 +13,7 @@ class Index extends Component {
return { ...item, fixed: "left", width: 176 };
}
if (item.dataIndex === "operate") {
return { ...item, fixed: "right", width: "120px" };
return { ...item, fixed: "right", width: item.width || "120px" };
}
return { ...item, width: "33%" };
});

View File

@ -8,17 +8,17 @@
}
.linkWapper {
a {
color: #4d7ad8;
margin-right: 8px;
}
//a {
// color: #4d7ad8;
// margin-right: 8px;
//}
i {
cursor: pointer;
}
a:hover {
text-decoration: none;
}
//a:hover {
// text-decoration: none;
//}
}
}

View File

@ -187,15 +187,10 @@ export default class Calculate extends React.Component {
};
}
if (item.dataIndex === "operate" && showOperateBtn) {
item.width = 150;
item.render = (text, record) => {
const accountBtn = _.filter(
record.operate,
it => it.text == "核算" || it.text == "重新核算"
);
const notAccountBtn = _.filter(
record.operate,
it => it.text != "核算" && it.text != "重新核算"
);
const accountBtn = _.take(record.operate, 2);
const notAccountBtn = _.drop(record.operate, 2);
let operateBtn = [];
if (!_.isEmpty(accountBtn)) {
operateBtn.push(
@ -207,13 +202,8 @@ export default class Calculate extends React.Component {
style={{ display: "inline-block", marginRight: 8 }}>
<a
href="javascript:void(0);"
onClick={() => {
if (it.text == "核算" || it.text == "重新核算") {
it.text == "核算"
? this.handleAccount(record)
: this.handleReaccount(record);
}
}}>
style={it.index !== "4" ? { padding: "0 12px" } : {}}
onClick={() => this.handleOperateClick(it.index, record)}>
{it.text}
</a>
</div>
@ -229,31 +219,14 @@ export default class Calculate extends React.Component {
{notAccountBtn.map(cz =>
<Menu.Item>
<a
onClick={() => {
if (cz.text == "核算") {
this.handleAccount(record);
} else if (cz.text == "删除") {
this.handleDeleteItem(record);
} else if (cz.text == "归档") {
this.handleFile(record);
} else if (cz.text == "重新核算") {
this.handleReaccount(record);
} else if (cz.text == "查看") {
this.handleDetail(record);
} else if (cz.text == "回算") {
this.handleBackCalculate(record);
}
}}>
onClick={() => this.handleOperateClick(cz.index, record)}>
{cz.text}
</a>
</Menu.Item>
)}
</Menu>
}>
<i
className="icon-coms-more"
style={{ color: "#4d7ad8", cursor: "pointer" }}
/>
<a href="javascript:void(0);"><i className="icon-coms-more"/></a>
</Dropdown>
);
}
@ -261,7 +234,23 @@ export default class Calculate extends React.Component {
};
}
});
return showOperateBtn ? columns : _.filter(columns, it => it.title != "操作");
return showOperateBtn ? columns : _.filter(columns, it => it.title !== "操作");
};
handleOperateClick = (index, record) => {
if (index === "0") {
this.handleAccount(record);
} else if (index === "1") {
this.handleDeleteItem(record);
} else if (index === "2") {
this.handleFile(record);
} else if (index === "4") {
this.handleReaccount(record);
} else if (index === "3") {
this.handleDetail(record);
} else if (index === "5") {
this.handleBackCalculate(record);
}
};
// 分页
@ -291,44 +280,13 @@ export default class Calculate extends React.Component {
render() {
const { calculateStore, taxAgentStore: { showOperateBtn } } = this.props;
const {
salaryListDataSource,
salaryListColumns,
loading,
hasRight,
form,
condition,
tableStore,
showSearchAd,
getTableDatas,
doSearch,
setShowSearchAd,
salaryListPageInfo
} = calculateStore;
const { salaryListDataSource, loading, hasRight, salaryListPageInfo } = calculateStore;
const { modalParam } = this.state;
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 renderRightOperation = () => {
const { startDate, endDate } = this.state;
return (

View File

@ -45,18 +45,18 @@
}
.linkWapper {
a {
color: #4d7ad8;
margin-right: 8px;
}
//a {
// color: #4d7ad8;
// margin-right: 8px;
//}
i {
cursor: pointer;
}
a:hover {
text-decoration: none;
}
//a:hover {
// text-decoration: none;
//}
}
}

View File

@ -101,19 +101,22 @@ class DataTables extends Component {
} else if (dataIndex === "operate") {
return {
...item,
width: 150,
render: (text, record) => (
<div className="linkWapper">
{
!isSpecial &&
<React.Fragment>
<a href="javaScript:void(0);" onClick={() => onViewDetails(record)}>查看明细</a>
<a href="javaScript:void(0);" style={{ marginRight: 12 }}
onClick={() => onTableOperate({ key: "handleAddData" }, record)}>编辑</a>
<a href="javaScript:void(0);" style={{ marginRight: 12 }}
onClick={() => onViewDetails(record)}>查看明细</a>
{
showOperateBtn &&
<Popover
overlayClassName="moreIconWrapper"
placement="bottomRight"
content={<Menu onClick={(e) => onTableOperate(e, record)}>
<Menu.Item key="handleAddData">编辑</Menu.Item>
<Menu.Item key="deleteSelectAddUpDeduction">删除</Menu.Item>
</Menu>} title="">
<i className="icon-coms-more"/>
@ -127,7 +130,7 @@ class DataTables extends Component {
{
showOperateBtn &&
<React.Fragment>
<a href="javaScript:void(0);"
<a href="javaScript:void(0);" style={{ marginRight: 12 }}
onClick={() => onTableOperate({ key: "handleAddData" }, record)}>编辑</a>
<a href="javaScript:void(0);"
onClick={() => onTableOperate({ key: "deleteSelectAddUpDeduction" }, record)}>删除</a>

View File

@ -11,18 +11,18 @@
}
.linkWapper {
a {
color: #4d7ad8;
margin-right: 8px;
}
//a {
// color: #4d7ad8;
// margin-right: 8px;
//}
i {
cursor: pointer;
}
a:hover {
text-decoration: none;
}
//a:hover {
// text-decoration: none;
//}
}
}

View File

@ -222,13 +222,13 @@
.mySalaryBenefitsWrapper {
.linkWapper {
a {
color: #4d7ad8;
}
//a {
// color: #4d7ad8;
//}
a:hover {
text-decoration: none;
}
//a:hover {
// text-decoration: none;
//}
}
}

View File

@ -38,10 +38,10 @@ class LedgerTable extends Component {
}
componentWillReceiveProps(nextProps, nextContext) {
if (nextProps.doSearch !== this.props.doSearch) this.getLedgerList({current: 1});
if (nextProps.doSearch !== this.props.doSearch) this.getLedgerList({ current: 1 });
}
getLedgerList = (extra={}) => {
getLedgerList = (extra = {}) => {
const { name } = this.props;
const { pageInfo } = this.state;
const payload = { name, ...pageInfo, ...extra };
@ -74,17 +74,22 @@ class LedgerTable extends Component {
/>;
};
} else if (dataIndex === "operate") {
item.width = 120;
item.width = 150;
item.render = (text, record) => {
return <div className="optWrapper">
<a href="javascript:void(0);" className="mr10" onClick={()=> onEditLedger(record)}>{showOperateBtn ? "编辑" : "查看"}</a>
<a href="javascript:void(0);" className="mr10"
onClick={() => onEditLedger(record)}>{showOperateBtn ? "编辑" : "查看"}</a>
{
showOperateBtn &&
<a href="javascript:void(0);" className="mr10"
onClick={() => this.handleMenuClick({ key: "copy" }, record)}>复制</a>
}
{
showOperateBtn &&
<Popover
overlayClassName="moreIconWrapper"
placement="bottomRight"
content={<Menu onClick={(e) => this.handleMenuClick(e, record)}>
<Menu.Item key="copy">复制</Menu.Item>
<Menu.Item key="delete">删除</Menu.Item>
</Menu>} title="">
<i className="icon-coms-more"/>

View File

@ -140,7 +140,7 @@ export default class StandingBook extends React.Component {
{
title: "操作",
dataIndex: "operate",
width: 120,
width: 150,
key: "operate",
render: (text, r) => {
const { billStatus, billMonth, creator } = r;
@ -154,6 +154,32 @@ export default class StandingBook extends React.Component {
核算
</a>
)}
{billStatus === "0" && (
<a
href="javascript:void(0);"
style={{ padding: "0 12px" }}
onClick={() => this.handleOperate({
key: "archive",
billMonth,
paymentOrganizationId: r.paymentOrganizationId,
creator
})}>
归档
</a>
)}
{billStatus === "1" && (
<a
href="javascript:void(0);"
style={{ padding: "0 12px" }}
onClick={() => this.handleOperate({
key: "view",
billMonth,
paymentOrganizationId: r.paymentOrganizationId,
creator
})}>
查看
</a>
)}
{billStatus === "1" && (
<a
href="javascript:void(0);"
@ -173,31 +199,12 @@ export default class StandingBook extends React.Component {
creator
})
}>
<Menu.Item key="archive">归档</Menu.Item>
<Menu.Item key="delete">删除</Menu.Item>
</Menu>
}>
<i className="icon-coms-more" style={{ marginLeft: 10 }}/>
</Dropdown>
)}
{billStatus === "1" && (
<Dropdown
overlay={
<Menu
onClick={({ key }) =>
this.handleOperate({
key,
billMonth,
paymentOrganizationId: r.paymentOrganizationId,
creator
})
}>
<Menu.Item key="view">查看</Menu.Item>
</Menu>
}>
<i className="icon-coms-more" style={{ marginLeft: 10 }}/>
</Dropdown>
)}
</React.Fragment>
);
}
@ -492,6 +499,7 @@ export default class StandingBook extends React.Component {
if (item.dataIndex !== "operate" && item.dataIndex !== "billStatus") {
return {
...item,
width:150,
render: (text) => {
return <span className="ellipsis" title={text}>{text}</span>;
}

View File

@ -1,8 +1,8 @@
import React from "react";
import { inject, observer } from "mobx-react";
import { Button, Col, Dropdown, Menu, message, Modal, Row, Switch } from "antd";
import { Button, Col, message, Modal, Row, Switch } from "antd";
import { WeaFormItem, WeaInputSearch, WeaSearchGroup, WeaTable, WeaTop } from "ecCom";
import { renderNoright } from "../../util"; // 渲染form数据的方法因为多个页面都会使用所以抽的公共方法在util中
import { renderNoright } from "../../util";
import EditModal from "./editModal";
import TipLabel from "../../components/TipLabel";
import { decentralizationConditions, editConditions } from "./editConditions";
@ -357,22 +357,11 @@ export default class TaxAgent extends React.Component {
onClick={() => this.showEditModal(record.id)}>
编辑
</a>
<Dropdown
overlay={
<Menu>
<Menu.Item key="0">
<a
href="javaScript:void(0);"
onClick={() => this.deleteTaxAgent(record.id)}>
删除
</a>
</Menu.Item>
</Menu>
}>
<a className="ant-dropdown-link" href="javaScript:void(0);">
<i className="icon-coms-more"/>
</a>
</Dropdown>
<a
href="javaScript:void(0);"
onClick={() => this.deleteTaxAgent(record.id)}>
删除
</a>
</div>
}
],

View File

@ -39,12 +39,13 @@
.operationWapper,
.employeeRangeWapper {
a {
color: #4d7ad8;
//color: #4d7ad8;
margin-right: 10px;
}
a:hover {
text-decoration: none;
}
//a:hover {
// text-decoration: none;
//}
a.ant-dropdown-link {
margin-left: 18px;