Merge remote-tracking branch 'origin/main' into main
commit
70e01e3f1d
|
|
@ -1,13 +1,232 @@
|
|||
import React from "react";
|
||||
import {
|
||||
ActionType,
|
||||
EditableProTable,
|
||||
ProColumns,
|
||||
} from "@ant-design/pro-components";
|
||||
import axiosInstance from "../../../utils/axiosInstance";
|
||||
|
||||
type DataSourceType = {
|
||||
id: React.Key;
|
||||
departmentId: number;
|
||||
departmentName: string;
|
||||
departmentManagerId: string;
|
||||
departmentManagerName: string;
|
||||
};
|
||||
|
||||
class DepartmentConfig extends React.Component<any, any> {
|
||||
actionRef = React.createRef<ActionType>();
|
||||
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
this.state = {
|
||||
activated: props.activate,
|
||||
tableData: [],
|
||||
editableKeys: [],
|
||||
}
|
||||
}
|
||||
|
||||
saveRow = (row: DataSourceType) => {
|
||||
let newRow = true
|
||||
this.state.tableData.forEach((item: DataSourceType) => {
|
||||
if (item.id === row.id) {
|
||||
newRow = false
|
||||
}
|
||||
})
|
||||
if (newRow) {
|
||||
let data={
|
||||
departmentName: row.departmentName,
|
||||
departmentManagerId: row.departmentManagerId,
|
||||
staffIds:[]
|
||||
}
|
||||
axiosInstance.post("management/department", data).then((res) => {
|
||||
this.update()
|
||||
}).catch((err) => {
|
||||
this.update()
|
||||
})
|
||||
} else {
|
||||
let data={
|
||||
departmentName: row.departmentName,
|
||||
departmentManagerId: row.departmentManagerId,
|
||||
}
|
||||
axiosInstance.put("management/department/"+row.departmentId, data).then((res) => {
|
||||
this.update()
|
||||
}).catch((err) => {
|
||||
this.update()
|
||||
})
|
||||
}
|
||||
}
|
||||
deleteRow = (row: DataSourceType) => {
|
||||
axiosInstance({
|
||||
url: "management/department/" + row.departmentId,
|
||||
method: "delete",
|
||||
}).then((res) => {
|
||||
this.update()
|
||||
})
|
||||
}
|
||||
update = () => {
|
||||
axiosInstance.get("common/department").then((res) => {
|
||||
this.setState({tableData: this.convertor(res.data)})
|
||||
this.actionRef.current?.reload()
|
||||
})
|
||||
}
|
||||
|
||||
convertor = (columns: any[] | undefined | null) => {
|
||||
if (columns === undefined || columns === null) {
|
||||
return []
|
||||
}
|
||||
let res = []
|
||||
for (let i = 0; i < columns.length; i++) {
|
||||
console.log(columns[i].departmentName)
|
||||
res.push({
|
||||
id: columns[i].departmentId,
|
||||
departmentId: columns[i].departmentId,
|
||||
departmentName: columns[i].departmentName,
|
||||
departmentManagerId: columns[i].departmentManager.staffId,
|
||||
departmentManagerName: columns[i].departmentManager.staffName,
|
||||
})
|
||||
}
|
||||
console.log(res);
|
||||
return res
|
||||
}
|
||||
|
||||
|
||||
class DepartmentConfig extends React.Component<any,any> {
|
||||
async request() {
|
||||
let response = await axiosInstance.get("common/department")
|
||||
console.log(response.data)
|
||||
let data = this.convertor(response.data)
|
||||
return {
|
||||
data: data,
|
||||
success: true,
|
||||
}
|
||||
}
|
||||
|
||||
static getDerivedStateFromProps(props: any, state: any) {
|
||||
return {activated: props.activate};
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<h1>Department Config</h1>
|
||||
<EditableProTable<DataSourceType>
|
||||
actionRef={this.actionRef}
|
||||
rowKey="id"
|
||||
headerTitle="部门信息配置"
|
||||
scroll={{
|
||||
x: 960,
|
||||
}}
|
||||
|
||||
recordCreatorProps={
|
||||
{
|
||||
creatorButtonText: '添加部门',
|
||||
position: "bottom",
|
||||
record: {
|
||||
id: (Math.random() * 1000000).toFixed(0),
|
||||
departmentId: -1,
|
||||
departmentName: "",
|
||||
departmentManagerName: "",
|
||||
departmentManagerId: "",
|
||||
},
|
||||
}
|
||||
}
|
||||
loading={false}
|
||||
columns={this.columns}
|
||||
request={async (params, sorter, filter) => {
|
||||
return this.request()
|
||||
}}
|
||||
value={this.state.tableData}
|
||||
onChange={(data) => {
|
||||
this.setState({tableData: data})
|
||||
}}
|
||||
editable={{
|
||||
type: 'single',
|
||||
editableKeys: this.state.editableKeys,
|
||||
onSave: async (rowKey, data, row) => {
|
||||
console.log(rowKey, data, row)
|
||||
this.saveRow(data)
|
||||
},
|
||||
onChange: (e) => {
|
||||
this.setState({editableKeys: e});
|
||||
},
|
||||
actionRender: (row, config, defaultDom) => {
|
||||
if (row.departmentId === 1)
|
||||
return [defaultDom.save, defaultDom.cancel]
|
||||
return [defaultDom.save, defaultDom.delete, defaultDom.cancel]
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
columns: ProColumns<DataSourceType>[] = [
|
||||
{
|
||||
title: '部门名称',
|
||||
dataIndex: 'departmentName',
|
||||
formItemProps: {
|
||||
rules: [{
|
||||
required: true, type: "string", whitespace: true, validator: (rule, value) => {
|
||||
if (value === undefined || value === null || typeof value !== "string" || value.trim() === "") {
|
||||
return Promise.reject("此项为必填项")
|
||||
}
|
||||
return Promise.resolve()
|
||||
}
|
||||
}],
|
||||
},
|
||||
editable: (text, record, index) => {
|
||||
return record.departmentId !== 1
|
||||
},
|
||||
width: '25%',
|
||||
},
|
||||
{
|
||||
title: '主管姓名',
|
||||
dataIndex: 'departmentManagerName',
|
||||
//render: (_) => <span>¥{_}</span>,
|
||||
// formItemProps: (a, b) => {
|
||||
// return {
|
||||
// rules: [{
|
||||
// required: true, type: "string", whitespace: true
|
||||
// }],
|
||||
// }
|
||||
// //style: {width: '100%'}
|
||||
// },
|
||||
readonly: true,
|
||||
valueType: "text",
|
||||
width: '15%'
|
||||
},
|
||||
{
|
||||
title: '主管工号',
|
||||
dataIndex: 'departmentManagerId',
|
||||
width: '15%',
|
||||
valueType: 'text',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
valueType: 'option',
|
||||
width: "45%",
|
||||
|
||||
|
||||
render: (text, record, _, action) => [
|
||||
<a
|
||||
key="editable"
|
||||
onClick={() => {
|
||||
action?.startEditable?.(record.id);
|
||||
}}
|
||||
>
|
||||
{"编辑"}
|
||||
</a>,
|
||||
<a
|
||||
key="delete"
|
||||
onClick={(item) => {
|
||||
this.deleteRow(record);
|
||||
}}
|
||||
>
|
||||
{record.departmentId !== 1 ? "删除" : ""}
|
||||
</a>,
|
||||
],
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
export default DepartmentConfig;
|
||||
Loading…
Reference in New Issue