部门测试结束

main
白封羽 2023-01-06 16:24:22 +08:00
parent a18526141c
commit f784649d51
1 changed files with 227 additions and 8 deletions

View File

@ -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> {
render() {
return (
<div>
<h1>Department Config</h1>
</div>
);
}
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>
<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;