From 4ba5bff205cbf3de50ad27c15d2c900e21d5c873 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=99=BD=E5=B0=81=E7=BE=BD?= <2360164671@qq.com> Date: Thu, 5 Jan 2023 17:35:23 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9F=8E=E5=B8=82=E9=85=8D=E7=BD=AE=E6=A1=86?= =?UTF-8?q?=E6=9E=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/configuration/Configuration.tsx | 1 - .../configuration/subpage/CityConfig.tsx | 220 +++++++++++++++++- 2 files changed, 211 insertions(+), 10 deletions(-) diff --git a/src/pages/configuration/Configuration.tsx b/src/pages/configuration/Configuration.tsx index 8c20c9c..9ba1f3c 100644 --- a/src/pages/configuration/Configuration.tsx +++ b/src/pages/configuration/Configuration.tsx @@ -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 { constructor(props: any) { diff --git a/src/pages/configuration/subpage/CityConfig.tsx b/src/pages/configuration/subpage/CityConfig.tsx index 1c9d36e..c6ba815 100644 --- a/src/pages/configuration/subpage/CityConfig.tsx +++ b/src/pages/configuration/subpage/CityConfig.tsx @@ -1,12 +1,214 @@ import React from "react"; +import { + ActionType, + EditableProTable, + ProColumns, +} from "@ant-design/pro-components"; +import axiosInstance from "../../../utils/axiosInstance"; -class CityConfig extends React.Component{ - render() { - return ( -
-

City Config

-
- ); - } +type DataSourceType = { + id: React.Key; + placeName: string; + subsidyPerDay: number; + baseExisted: boolean; +}; + +class CityConfig extends React.Component { + actionRef = React.createRef(); + + 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}; + } + + render() { + return ( +
+ + 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}); + }, + }} + /> +
+ ); + } + + columns: ProColumns[] = [ + { + 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: (_) => ¥{_}, + 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) => [ + { + action?.startEditable?.(record.id); + }} + > + 编辑 + , + { + this.deleteRow(record); + }} + > + 删除 + , + ], + }, + ]; + 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; \ No newline at end of file + +export default CityConfig; + +