From f784649d51586c50309d6c29a0c1fcb28945c558 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=99=BD=E5=B0=81=E7=BE=BD?= <2360164671@qq.com> Date: Fri, 6 Jan 2023 16:24:22 +0800 Subject: [PATCH] =?UTF-8?q?=E9=83=A8=E9=97=A8=E6=B5=8B=E8=AF=95=E7=BB=93?= =?UTF-8?q?=E6=9D=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../subpage/DepartmentConfig.tsx | 235 +++++++++++++++++- 1 file changed, 227 insertions(+), 8 deletions(-) diff --git a/src/pages/configuration/subpage/DepartmentConfig.tsx b/src/pages/configuration/subpage/DepartmentConfig.tsx index f475793..e12fa89 100644 --- a/src/pages/configuration/subpage/DepartmentConfig.tsx +++ b/src/pages/configuration/subpage/DepartmentConfig.tsx @@ -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 { + actionRef = React.createRef(); + + 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 { - render() { - return ( -
-

Department Config

-
- ); - } + 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 ( +
+ + 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] + } + }} + /> +
+ ); + } + + columns: ProColumns[] = [ + { + 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: (_) => ¥{_}, + // 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) => [ + { + action?.startEditable?.(record.id); + }} + > + {"编辑"} + , + { + this.deleteRow(record); + }} + > + {record.departmentId !== 1 ? "删除" : ""} + , + ], + }, + ]; } + + export default DepartmentConfig; \ No newline at end of file