城市配置框架

main
白封羽 2023-01-05 17:35:23 +08:00
parent 65e321b0c0
commit 4ba5bff205
2 changed files with 211 additions and 10 deletions

View File

@ -4,7 +4,6 @@ import UserConfig from "./subpage/UserConfig";
import CityConfig from "./subpage/CityConfig";
import DepartmentConfig from "./subpage/DepartmentConfig";
import OtherConfig from "./subpage/OtherConfig";
class Configuration extends React.Component<any,any> {
constructor(props: any) {

View File

@ -1,12 +1,214 @@
import React from "react";
import {
ActionType,
EditableProTable,
ProColumns,
} from "@ant-design/pro-components";
import axiosInstance from "../../../utils/axiosInstance";
type DataSourceType = {
id: React.Key;
placeName: string;
subsidyPerDay: number;
baseExisted: boolean;
};
class CityConfig extends React.Component<any, any> {
actionRef = React.createRef<ActionType>();
constructor(props: any) {
super(props);
this.state = {
activated: props.activate,
tableData: [],
editableKeys: [],
}
}
saveRow = (row: DataSourceType) => {
console.log(row)
this.update()
}
deleteRow = (row: DataSourceType) => {
console.log(row);
this.update()
}
update = () => {
this.actionRef.current?.reload()
}
convertor = (columns: DataSourceType[] | undefined | null) => {
if (columns === undefined || columns === null) {
return []
}
return this.fakeData
}
async request() {
let response = await axiosInstance.get("common/place")
let data = this.convertor(response.data)
return {
data: data,
success: true,
}
}
static getDerivedStateFromProps(props: any, state: any) {
return {activated: props.activate};
}
class CityConfig extends React.Component<any,any>{
render() {
return (
<div>
<h1>City Config</h1>
<EditableProTable<DataSourceType>
actionRef={this.actionRef}
rowKey="id"
headerTitle="城市信息配置"
maxLength={5}
scroll={{
x: 960,
}}
recordCreatorProps={
{
creatorButtonText: '添加城市',
position: "bottom",
record: {
id: (Math.random() * 1000000).toFixed(0),
placeName: "",
subsidyPerDay: 0,
baseExisted: false
},
}
}
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) => {
if (typeof data.baseExisted === "string") {
data.baseExisted = data.baseExisted === "true"
}
this.saveRow(data)
},
onChange: (e) => {
this.setState({editableKeys: e});
},
}}
/>
</div>
);
}
columns: ProColumns<DataSourceType>[] = [
{
title: '地点名称',
dataIndex: 'placeName',
formItemProps: {
rules: [{
required: true, type: "string", whitespace: true, validator: (rule, value) => {
if (value === undefined || value === null || typeof value !== "string" || value.trim() === "") {
return Promise.reject("此项为必填项")
}
for (let i = 0; i < this.state.tableData.length; i++) {
if (this.state.tableData[i] === value.trim()) {
return Promise.reject("地点名称重复")
}
}
return Promise.resolve()
}
}],
},
editable: (text, record, index) => {
return record.placeName === "";
},
width: '15%',
},
{
title: '每日补贴',
dataIndex: 'subsidyPerDay',
render: (_) => <span>¥{_}</span>,
formItemProps: (a, b) => {
return {
rules: [{
required: true, validator: (rule, value) => {
if (!isNaN(Number(value)) && Number(value) >= 0 && Number(value) <= 1000000) {
if ((typeof value === "string") && value.split(".").length === 2 && value.split(".")[1].length > 2) {
return Promise.reject("至多两位小数")
}
return Promise.resolve()
}
return Promise.reject("请输入正确金额")
}
}],
}
//style: {width: '100%'}
},
valueType: "text",
width: '25%'
},
{
title: '设有基地',
dataIndex: 'baseExisted',
width: '15%',
valueType: 'radio',
valueEnum: {
true: {text: '是', status: 'Success'},
false: {text: '否', status: 'Error'},
},
},
{
title: '操作',
valueType: 'option',
width: 200,
render: (text, record, _, action) => [
<a
key="editable"
onClick={() => {
action?.startEditable?.(record.id);
}}
>
</a>,
<a
key="delete"
onClick={(item) => {
this.deleteRow(record);
}}
>
</a>,
],
},
];
fakeData: DataSourceType[] = [
{
id: 0,
placeName: '北京',
subsidyPerDay: 100,
baseExisted: true,
}, {
id: 1,
placeName: '上海',
subsidyPerDay: 100,
baseExisted: true,
}, {
id: 2,
placeName: '广州',
subsidyPerDay: 100,
baseExisted: false,
}
]
}
export default CityConfig;