城市配置框架
parent
65e321b0c0
commit
4ba5bff205
|
@ -4,7 +4,6 @@ import UserConfig from "./subpage/UserConfig";
|
||||||
import CityConfig from "./subpage/CityConfig";
|
import CityConfig from "./subpage/CityConfig";
|
||||||
import DepartmentConfig from "./subpage/DepartmentConfig";
|
import DepartmentConfig from "./subpage/DepartmentConfig";
|
||||||
import OtherConfig from "./subpage/OtherConfig";
|
import OtherConfig from "./subpage/OtherConfig";
|
||||||
|
|
||||||
class Configuration extends React.Component<any,any> {
|
class Configuration extends React.Component<any,any> {
|
||||||
|
|
||||||
constructor(props: any) {
|
constructor(props: any) {
|
||||||
|
|
|
@ -1,12 +1,214 @@
|
||||||
import React from "react";
|
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() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<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>
|
</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;
|
export default CityConfig;
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue