468 lines
15 KiB
JavaScript
468 lines
15 KiB
JavaScript
import React, { Component } from "react";
|
|
import { toJS } from "mobx";
|
|
import { inject, observer } from "mobx-react";
|
|
import { i18n } from "../../public/i18n";
|
|
import LeftTree from "./components/leftTree";
|
|
import NewAndEditDialog from "../NewAndEditDialog";
|
|
import {
|
|
WeaTop,
|
|
WeaTab,
|
|
WeaFormItem,
|
|
WeaRightMenu,
|
|
WeaLeftRightLayout,
|
|
} from "ecCom";
|
|
import { Row, Col, Spin, Modal, Button, message, Switch } from "antd";
|
|
import { WeaSwitch, WeaTableNew } from "comsMobx";
|
|
import "./index.less";
|
|
import { renderNoright } from '../../util';
|
|
|
|
|
|
const confirm = Modal.confirm;
|
|
const WeaTable = WeaTableNew.WeaTable;
|
|
@inject("officeManageStore")
|
|
@observer
|
|
export default class OfficeManage extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
date: "",
|
|
editId: "",
|
|
loading: false,
|
|
};
|
|
}
|
|
componentDidMount() {
|
|
const { officeManageStore } = this.props;
|
|
officeManageStore.getTreeData && officeManageStore.getTreeData();
|
|
officeManageStore.getHasRight && officeManageStore.getHasRight();
|
|
officeManageStore.getPostInfoTable && officeManageStore.getPostInfoTable();
|
|
}
|
|
getDropMenuDatas = () => {
|
|
const { officeManageStore } = this.props;
|
|
const { rightMenu } = officeManageStore;
|
|
let menus = [];
|
|
toJS(rightMenu).map((item, index) => {
|
|
let obj = {
|
|
key: item.menuFun,
|
|
icon: <i className={`${item.menuIcon}`} />,
|
|
content: item.menuName,
|
|
};
|
|
if (
|
|
item.menuFun == "collection" ||
|
|
item.menuFun == "help" ||
|
|
item.menuFun == "pageAddress"
|
|
) {
|
|
obj.disabled = true;
|
|
}
|
|
menus.push(obj);
|
|
});
|
|
return menus;
|
|
};
|
|
|
|
handleMenuClick = (key) => {
|
|
const { officeManageStore } = this.props;
|
|
const { isPanelShow, tableStore } = officeManageStore;
|
|
isPanelShow && officeManageStore.setPanelStatus(false);
|
|
switch (key) {
|
|
case "new":
|
|
officeManageStore.getPostInfoForm();
|
|
officeManageStore.setVisible(true);
|
|
officeManageStore.setNeDialogTitle(i18n.label.newOfficeName());
|
|
break;
|
|
case "custom":
|
|
tableStore.setColSetVisible(true);
|
|
tableStore.tableColSet(true);
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
};
|
|
|
|
handleSave() {
|
|
const { form, condition, savePostInfo, updatePostInfo } =
|
|
this.props.officeManageStore;
|
|
const { editId } = this.state;
|
|
form.validateForm().then((f) => {
|
|
if (f.isValid) {
|
|
// 验证通过, balabala业务代码
|
|
const payload = editId
|
|
? { ...form.getFormParams(), id: editId }
|
|
: { ...form.getFormParams() };
|
|
this.setState({ loading: true });
|
|
if (editId) {
|
|
updatePostInfo(payload).then(({ code, msg }) => {
|
|
this.setState({ loading: false });
|
|
if (code === 200) {
|
|
message.success("编辑成功");
|
|
this.props.officeManageStore.setVisible(false);
|
|
this.props.officeManageStore.getPostInfoTable();
|
|
this.setState({ editId: "" });
|
|
} else {
|
|
message.error(msg || "编辑失败");
|
|
}
|
|
});
|
|
return;
|
|
}
|
|
savePostInfo(payload).then(({ code, msg }) => {
|
|
this.setState({ loading: false });
|
|
if (code === 200) {
|
|
message.success("新增成功");
|
|
this.props.officeManageStore.setVisible(false);
|
|
this.props.officeManageStore.getPostInfoTable();
|
|
this.setState({ editId: "" });
|
|
} else {
|
|
message.error(msg || "新增失败");
|
|
}
|
|
});
|
|
} else {
|
|
f.showErrors();
|
|
this.setState({ date: new Date() }); // 改变一个state的变量,强制页面刷新
|
|
}
|
|
});
|
|
}
|
|
getTopMenuBtns = () => {
|
|
const { officeManageStore } = this.props;
|
|
const { topMenu, tableStore } = officeManageStore;
|
|
let btns = [];
|
|
topMenu.map((item, i) => {
|
|
if (item.menuFun !== "batchDelete") {
|
|
btns.push(
|
|
<Button
|
|
type="primary"
|
|
onClick={() => {
|
|
const { officeManageStore } = this.props;
|
|
officeManageStore.isPanelShow &&
|
|
officeManageStore.setPanelStatus(false);
|
|
officeManageStore.getPostInfoForm();
|
|
officeManageStore.setVisible(true);
|
|
officeManageStore.setNeDialogTitle(i18n.label.newOfficeName());
|
|
}}>
|
|
{item.menuName}
|
|
</Button>
|
|
);
|
|
} else {
|
|
btns.push(
|
|
<Button
|
|
type="primary"
|
|
onClick={() => {
|
|
const { officeManageStore } = this.props;
|
|
const { tableStore } = officeManageStore;
|
|
const ids = toJS(tableStore.selectedRowKeys).toString();
|
|
this.showConfirm("batchDel", ids);
|
|
}}
|
|
disabled={tableStore.selectedRowKeys.length > 0 ? false : true}>
|
|
{item.menuName}
|
|
</Button>
|
|
);
|
|
}
|
|
});
|
|
return btns;
|
|
};
|
|
|
|
showConfirm = (v, ids) => {
|
|
confirm({
|
|
title: i18n.confirm.defaultTitle(),
|
|
content:
|
|
v == "del" ? i18n.confirm.delete() : i18n.confirm.batchDeleteConfirm(),
|
|
okText: i18n.button.ok(),
|
|
cancelText: i18n.button.cancel(),
|
|
onOk: () => this.deletePostinfoByIds(ids),
|
|
onCancel() {
|
|
return false;
|
|
},
|
|
});
|
|
};
|
|
|
|
deletePostinfoByIds = (ids) => {
|
|
const { officeManageStore } = this.props;
|
|
const { deletePostinfoByIds } = officeManageStore;
|
|
deletePostinfoByIds({ ids }).then(({ code, msg }) => {
|
|
if (code === 200) {
|
|
message.success("删除成功");
|
|
officeManageStore.getPostInfoTable();
|
|
} else {
|
|
message.error(msg || "删除失败");
|
|
}
|
|
});
|
|
};
|
|
|
|
reRenderColumns = (columns) => {
|
|
let _this = this;
|
|
columns.forEach((c, index) => {
|
|
if (c.dataIndex == "forbidden_tag") {
|
|
c.render = function (text, record) {
|
|
return (
|
|
<Switch
|
|
checked={record.forbidden_tag == "0" ? true : false}
|
|
onChange={(checked) => {
|
|
confirm({
|
|
title: i18n.confirm.defaultTitle(),
|
|
content:
|
|
record.forbidden_tag === "0"
|
|
? "确定要禁用吗？"
|
|
: "确定要启用吗？",
|
|
okText: i18n.button.ok(),
|
|
cancelText: i18n.button.cancel(),
|
|
onOk: () => _this.updateForbiddenTag(checked, record.id),
|
|
onCancel() {
|
|
return false;
|
|
},
|
|
});
|
|
}}
|
|
/>
|
|
);
|
|
};
|
|
}
|
|
});
|
|
};
|
|
|
|
updateForbiddenTag = (forbiddentag, id) => {
|
|
const { officeManageStore } = this.props;
|
|
const { updateForbiddenTagById } = officeManageStore;
|
|
const payload = {
|
|
id,
|
|
forbiddentag,
|
|
};
|
|
updateForbiddenTagById(payload).then(({ code, msg }) => {
|
|
if (code === 200) {
|
|
message.success("操作成功");
|
|
officeManageStore.getPostInfoTable();
|
|
} else {
|
|
message.error(msg || "操作失败");
|
|
}
|
|
});
|
|
};
|
|
|
|
onOperatesClick = (record, index, operate) => {
|
|
operate.index == "0" && this.doEdit(record.randomFieldId);
|
|
operate.index === "1" && this.showConfirm("del", record.randomFieldId);
|
|
};
|
|
doEdit = (editId) => {
|
|
this.setState({ editId });
|
|
const { officeManageStore } = this.props;
|
|
officeManageStore.isPanelShow && officeManageStore.setPanelStatus(false);
|
|
officeManageStore.getPostInfoForm(editId);
|
|
officeManageStore.setVisible(true);
|
|
officeManageStore.setNeDialogTitle(i18n.label.editOfficeName());
|
|
};
|
|
|
|
custom = () => {
|
|
debugger
|
|
const {
|
|
officeManageStore
|
|
} = this.props, {
|
|
tableStore,
|
|
} = officeManageStore;
|
|
|
|
|
|
}
|
|
|
|
getPanelComponents = () => {
|
|
const { officeManageStore } = this.props;
|
|
const { searchCondition, form2, searchConditionLoading } =
|
|
officeManageStore;
|
|
let arr = [];
|
|
let formParams = form2.getFormParams();
|
|
const { isFormInit } = form2;
|
|
isFormInit &&
|
|
searchCondition.map((c) => {
|
|
c.items.map((field, index) => {
|
|
arr.push(
|
|
<Col
|
|
ecId={`${(this && this.props && this.props.ecId) || ""
|
|
}_Col@4cc308@${index}`}
|
|
span={index % 2 == 0 ? 10 : 11}
|
|
offset={1}>
|
|
<div style={{ marginTop: 20 }}>
|
|
<WeaFormItem
|
|
ecId={`${(this && this.props && this.props.ecId) || ""
|
|
}_WeaFormItem@u6ex85@${index}`}
|
|
label={`${field.label}`}
|
|
labelCol={{ span: `${field.labelcol}` }}
|
|
wrapperCol={{ span: `${field.fieldcol}` }}>
|
|
{
|
|
<WeaSwitch
|
|
ecId={`${(this && this.props && this.props.ecId) || ""
|
|
}_WeaSwitch@p7d3td@${index}`}
|
|
fieldConfig={field}
|
|
form={form2}
|
|
formParams={formParams}
|
|
/>
|
|
}
|
|
</WeaFormItem>
|
|
</div>
|
|
</Col>
|
|
);
|
|
});
|
|
});
|
|
|
|
if (searchConditionLoading) {
|
|
return (
|
|
<div className="hrm-loading-center-small" style={{ top: "25%" }}>
|
|
<Spin
|
|
ecId={`${(this && this.props && this.props.ecId) || ""
|
|
}_Spin@lbktzb`}
|
|
spinning={searchConditionLoading}></Spin>
|
|
</div>
|
|
);
|
|
} else {
|
|
return (
|
|
<Row
|
|
ecId={`${(this && this.props && this.props.ecId) || ""}_Row@ppeb6z`}
|
|
onKeyDown={(e) => {
|
|
if (e.keyCode == 13 && e.target.tagName === "INPUT") {
|
|
officeManageStore.getPostInfoTable();
|
|
officeManageStore.setPanelStatus(false);
|
|
}
|
|
}}>
|
|
{arr}
|
|
</Row>
|
|
);
|
|
}
|
|
};
|
|
getTabBtn = () => {
|
|
const { officeManageStore } = this.props;
|
|
const { form2 } = officeManageStore;
|
|
|
|
const btn = [
|
|
<Button
|
|
ecId={`${(this && this.props && this.props.ecId) || ""}_Button@bx87i8`}
|
|
type="primary"
|
|
onClick={() => {
|
|
officeManageStore.getPostInfoTable();
|
|
officeManageStore.setPanelStatus(false);
|
|
}}>
|
|
{i18n.button.search()}
|
|
</Button>,
|
|
<Button
|
|
ecId={`${(this && this.props && this.props.ecId) || ""}_Button@218ju6`}
|
|
onClick={() => form2.reset()}>
|
|
{i18n.button.reset()}
|
|
</Button>,
|
|
<Button
|
|
ecId={`${(this && this.props && this.props.ecId) || ""}_Button@5u9mfz`}
|
|
onClick={() => officeManageStore.setPanelStatus(false)}>
|
|
{i18n.button.cancel()}
|
|
</Button>,
|
|
];
|
|
|
|
return btn;
|
|
};
|
|
onSearchChange = (val) => {
|
|
const { officeManageStore } = this.props;
|
|
const { form2 } = officeManageStore;
|
|
officeManageStore.setPostInfoName(val);
|
|
!_.isEmpty(form2.getFormParams()) && officeManageStore.updateFields(val);
|
|
};
|
|
|
|
render() {
|
|
const { officeManageStore } = this.props;
|
|
const { date, loading } = this.state;
|
|
const {
|
|
isPanelShow,
|
|
form2,
|
|
postInfoName,
|
|
conditionNum,
|
|
tableStore,
|
|
nEdialogTitle,
|
|
visible,
|
|
condition,
|
|
form,
|
|
dialogLoading,
|
|
hasRight
|
|
} = officeManageStore;
|
|
|
|
if (hasRight === false) {
|
|
return renderNoright();
|
|
}
|
|
|
|
return (
|
|
hasRight && <div className="office-wapper">
|
|
<WeaLeftRightLayout
|
|
isNew={true}
|
|
leftWidth={310}
|
|
leftCom={<LeftTree />}
|
|
onCollapse={(showLeft) => console.log("showLeft:", showLeft)}>
|
|
<WeaRightMenu
|
|
ecId={`${(this && this.props && this.props.ecId) || ""
|
|
}_WeaRightMenu@cea97d`}
|
|
datas={this.getDropMenuDatas()}
|
|
onClick={(key) => this.handleMenuClick(key)}>
|
|
<WeaTop
|
|
ecId={`${(this && this.props && this.props.ecId) || ""
|
|
}_WeaTop@446d12`}
|
|
title={i18n.label.officeName()}
|
|
icon={<i className="icon-coms-hrm" />}
|
|
iconBgcolor="#217346"
|
|
loading={true}
|
|
buttons={this.getTopMenuBtns()}
|
|
showDropIcon={true}
|
|
dropMenuDatas={this.getDropMenuDatas()}
|
|
onDropMenuClick={(e) => this.handleMenuClick(e)}>
|
|
<WeaTab
|
|
ecId={`${(this && this.props && this.props.ecId) || ""
|
|
}_WeaTab@39c727`}
|
|
searchType={["base", "advanced"]}
|
|
showSearchAd={isPanelShow}
|
|
searchsBaseValue={
|
|
_.isEmpty(form2.getFormParams())
|
|
? postInfoName
|
|
: form2.getFormParams().postInfoName
|
|
}
|
|
setShowSearchAd={(bool) =>
|
|
officeManageStore.setPanelStatus(bool)
|
|
}
|
|
hideSearchAd={() => officeManageStore.setPanelStatus(false)}
|
|
searchsAd={
|
|
isPanelShow ? this.getPanelComponents() : <div></div>
|
|
}
|
|
advanceHeight={Math.ceil(conditionNum / 2) * 52 + 20}
|
|
hasMask={false}
|
|
buttonsAd={this.getTabBtn()}
|
|
onSearch={() => officeManageStore.getPostInfoTable()}
|
|
onSearchChange={(val) => this.onSearchChange(val)}
|
|
/>
|
|
<WeaTable
|
|
ecId={`${(this && this.props && this.props.ecId) || ""
|
|
}_WeaTable@b43a4c`}
|
|
comsWeaTableStore={tableStore}
|
|
hasOrder={true}
|
|
needScroll={true}
|
|
rowSelection={{
|
|
getCheckboxProps: (record) => {
|
|
console.log(record);
|
|
return {
|
|
disabled: true, // 配置无法勾选的列
|
|
};
|
|
},
|
|
}}
|
|
getColumns={(c) => this.reRenderColumns(c)}
|
|
onOperatesClick={(record, index, operate) =>
|
|
this.onOperatesClick(record, index, operate)
|
|
}
|
|
/>
|
|
</WeaTop>
|
|
<NewAndEditDialog
|
|
ecId={`${(this && this.props && this.props.ecId) || ""
|
|
}_NewAndEditDialog@q4rrwm`}
|
|
title={nEdialogTitle}
|
|
visible={visible}
|
|
condition={toJS(condition)}
|
|
form={form}
|
|
isFormInit={form.isFormInit}
|
|
loading={dialogLoading || loading}
|
|
isEdit={true}
|
|
height={250}
|
|
conditionLen={3}
|
|
save={() => this.handleSave()}
|
|
onCancel={() => {
|
|
officeManageStore.setVisible(false);
|
|
this.setState({ editId: "" });
|
|
}}
|
|
/>
|
|
</WeaRightMenu>
|
|
</WeaLeftRightLayout>
|
|
</div>
|
|
);
|
|
}
|
|
}
|