（记录笔记8）——8.1 城市管理

最新推荐文章于 2024-11-08 16:09:18 发布
最新推荐文章于 2024-11-08 16:09:18 发布
阅读量427 收藏
点赞数
分类专栏： S.AntD后台项目 文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35812380/article/details/86681345
版权

城市管理

文章目录



Github代码

一 基础页面

  • pages->city->index.js: 对应路由 /admin/city

  • 顶部子组件一:选择表单

  • class FilterForm extends React.Component{
 
    render(){
        const { getFieldDecorator } = this.props.form;
        return (
            <Form layout="inline">
                <FormItem label="城市">
                    {
                        getFieldDecorator('city_id')(
                            <Select
                                style={{width:100}}
                                placeholder="全部"
                            >
                                <Option value="">全部</Option>
                                <Option value="1">北京市</Option>
                                <Option value="2">天津市</Option>
                                <Option value="3">深圳市</Option>
                            </Select>
                        )
                    }
                </FormItem>
                <FormItem label="用车模式">
                    {
                        getFieldDecorator('mode')(
                            <Select
                                style={{ width: 120 }}
                                placeholder="全部"
                            >
                                <Option value="">全部</Option>
                                <Option value="1">指定停车点模式</Option>
                                <Option value="2">禁停区模式</Option>
                            </Select>
                        )
                    }
                </FormItem>
                <FormItem label="营运模式">
                    {
                        getFieldDecorator('op_mode')(
                            <Select
                                style={{ width: 80 }}
                                placeholder="全部"
                            >
                                <Option value="">全部</Option>
                                <Option value="1">自营</Option>
                                <Option value="2">加盟</Option>
                            </Select>
                        )
                    }
                </FormItem>
                <FormItem label="加盟商授权状态">
                    {
                        getFieldDecorator('auth_status')(
                            <Select
                                style={{ width: 100 }}
                                placeholder="全部"
                            >
                                <Option value="">全部</Option>
                                <Option value="1">已授权</Option>
                                <Option value="2">未授权</Option>
                            </Select>
                        )
                    }
                </FormItem>
                <FormItem>
                    <Button type="primary" style={{margin:'0 20px'}}>查询</Button>
                    <Button>重置</Button>
                </FormItem>
            </Form>
        );
    }
}
FilterForm = Form.create({})(FilterForm);

  • Easy Mock城市管理的数据接口： /open_city

    {
  "code": 0,
  "msg": "",
  "result": {
    "item_list|10": [{
      "id|+1": 1,
      "name": "@city",
      "mode|1-2": 1,
      "op_mode|1-2": 1,
      "franchisee_id": 77,
      "franchisee_name": "松果自营",
      "city_admins|1-2": [{
        "user_name": "@cname",
        "user_id|+1": 10001
      }],
      "open_time": "@datetime",
      "sys_user_name": "@cname",
      "update_time": 1546580667000
    }]
  },
  page: 1,
  page_size: 10,
  total: 20
}
1. componentDidMount():

调用 this.requestList()，默认请求接口数据

 componentDidMount() {
    this.requestList();
  }

  // 默认请求我们的接口数据
  requestList = ()=>{
    let _this = this;
    axios.ajax({
      url: '/open_city',
      data:{
        params:{
          page:this.params.page
        }
      }
    }).then((res)=>{
      let list = res.result.item_list.map((item, index) => {
        item.key = index;
        return item; // 注:这里要返回item的值
      });
      this.setState({
        list:list,
        pagination:Utils.pagination(res,(current)=>{
          _this.params.page = current;
          _this.requestList();
        })
      })
    })
  }
  
  render(){
      ...
  }

2. 实例代码

注:这里使用 div 容器 嵌套 Table表格的用法

// src/pages/city/index.js
import React from 'react';
import {Card, Table, Form, Modal, Button, message, Input, Icon, Select,} from 'antd';
import axios from './../../axios/index';
import Utils from './../../utils/utils';

const FormItem = Form.Item;
const Option = Select.Option;

export default class City extends React.Component {

  state = {
    list: [],
  };

  params = {
    page: 1
  };

  componentDidMount() {
    this.requestList();
  }

  // 默认请求我们的接口数据
  requestList = ()=>{
    let _this = this;
    axios.ajax({
      url: '/open_city',
      data:{
        params:{
          page:this.params.page
        }
      }
    }).then((res)=>{
      let list = res.result.item_list.map((item, index) => {
        item.key = index;
        return item;
      });
      this.setState({
        list:list,
        pagination:Utils.pagination(res,(current)=>{
          _this.params.page = current;
          _this.requestList();
        })
      })
    })
  }

  render() {
    const columns = [
      {
        title: '城市ID',
        dataIndex: 'id'
      }, {
        title: '城市名称',
        dataIndex: 'name'
      }, {
        title: '用车模式',
        dataIndex: 'mode',
        render(mode) {
          return mode === 1 ? '停车点' : '禁停区';
        }
      }, {
        title: '营运模式',
        dataIndex: 'op_mode',
        render(op_mode) {
          return op_mode === 1 ? '自营' : '加盟';
        }
      }, {
        title: '授权加盟商',
        dataIndex: 'franchisee_name'
      }, {
        title: '城市管理员',
        dataIndex: 'city_admins',
        render(arr) {  //处理数组类型
          return arr.map((item) => {
            return item.user_name;
          }).join(',');
        }
      }, {
        title: '城市开通时间',
        dataIndex: 'open_time'
      }, {
        title: '操作时间',
        dataIndex: 'update_time',
        render: Utils.formateDate //格式化时间戳
      }, {
        title: '操作人',
        dataIndex: 'sys_user_name'
      }
    ];
    return (
      <div>
        <Card>
          <FilterForm/>
        </Card>
        <Card style={{marginTop: 10}}>
          <Button type="primary">开通城市</Button>
        </Card>

        <div className="content-wrap">
          <Table
            bordered
            columns={columns}
            dataSource={this.state.list}
          />
        </div>
      </div>
    );
  }

}


class FilterForm extends React.Component {

  render() {
    const {getFieldDecorator} = this.props.form;
    return (
        <Form layout="inline">
          <FormItem label="城市">
            {
              getFieldDecorator('city_id')(
                <Select
                  style={{width: 100}}
                  placeholder="全部"
                >
                  <Option value="">全部</Option>
                  <Option value="1">北京市</Option>
                  <Option value="2">天津市</Option>
                  <Option value="3">深圳市</Option>
                </Select>
              )
            }
          </FormItem>
          <FormItem label="用车模式">
            {
              getFieldDecorator('mode')(
                <Select
                  style={{width: 120}}
                  placeholder="全部"
                >
                  <Option value="">全部</Option>
                  <Option value="1">指定停车点模式</Option>
                  <Option value="2">禁停区模式</Option>
                </Select>
              )
            }
          </FormItem>
          <FormItem label="营运模式">
            {
              getFieldDecorator('op_mode')(
                <Select
                  style={{width: 80}}
                  placeholder="全部"
                >
                  <Option value="">全部</Option>
                  <Option value="1">自营</Option>
                  <Option value="2">加盟</Option>
                </Select>
              )
            }
          </FormItem>
          <FormItem label="加盟商授权状态">
            {
              getFieldDecorator('auth_status')(
                <Select
                  style={{width: 100}}
                  placeholder="全部"
                >
                  <Option value="">全部</Option>
                  <Option value="1">已授权</Option>
                  <Option value="2">未授权</Option>
                </Select>
              )
            }
          </FormItem>

          <FormItem>
            <Button type="primary" style={{margin: '0 20px'}}>查询</Button>
            <Button>重置</Button>
          </FormItem>
        </Form>
    );
  }
}

FilterForm = Form.create({})(FilterForm);

二 弹窗功能

为以上组件,增加点击按钮 弹窗(Modal)功能

  1. [开通城市]按钮:监听 onClick 事件,调用this.handleOpenCity()显示弹框

    state = {
    list:[],
+   isShowOpenCity:false      // 默认不可见
}

// 开通城市
+ handleOpenCity = ()=>{
+    this.setState({
+            isShowOpenCity:true
+    })
+ }

  2. Modal 部分默认隐藏,触发事件进行显示

    onOk:点击确定回调，参数为关闭函数，

    onCancel:取消回调，参数为关闭函数

    <Modal
       title="开通城市"
       visible={this.state.isShowOpenCity}
       onCancel={()=>{
           this.setState({
                isShowOpenCity:false
           })
       }}
       onOk={this.handleSubmit}
>
       <OpenCityForm wrappedComponentRef={(inst)=>{this.cityForm = inst;}}/>
</Modal>

    wrappedComponentRef属性：

    拿到表单中的信息对象inst，通过this.cityForm存到state中

  3. 城市开通提交

    // 城市开通提交
handleSubmit = ()=>{
        let cityInfo = this.cityForm.props.form.getFieldsValue();
        console.log(cityInfo);
        axios.ajax({
            url:'/city/open',
            data:{
                params:cityInfo
            }
        }).then((res)=>{
            if(res.code === 0){
                message.success('开通成功');
                this.setState({
                    isShowOpenCity:false
                })
                this.requestList();
            }
        })
}

  • 弹框子组件二：开通城市表单

  • class OpenCityForm extends React.Component {
  render() {
    const formItemLayout = {
      labelCol: {
        span: 5
      },
      wrapperCol: {
        span: 19
      }
    };
    const {getFieldDecorator} = this.props.form;
    return (
      <Form layout="horizontal">
        <FormItem label="选择城市"  {...formItemLayout}>
          {
            getFieldDecorator('city_id', {
              initialValue: '1'
            })(
              <Select style={{width: 100}}>
                <Option value="">全部</Option>
                <Option value="1">北京市</Option>
                <Option value="2">天津市</Option>
              </Select>
            )
          }
        </FormItem>
        <FormItem label="营运模式"  {...formItemLayout}>
          {
            getFieldDecorator('op_mode', {
              initialValue: '1'
            })(
              <Select style={{width: 100}}>
                <Option value="1">自营</Option>
                <Option value="2">加盟</Option>
              </Select>
            )
          }

        </FormItem>
        <FormItem label="用车模式"  {...formItemLayout}>
          {
            getFieldDecorator('use_mode', {
              initialValue: '1'
            })(
              <Select style={{width: 100}}>
                <Option value="1">指定停车点</Option>
                <Option value="2">禁停区</Option>
              </Select>
            )
          }
        </FormItem>
      </Form>
    );
  }
}

OpenCityForm = Form.create({})(OpenCityForm);

    • Easy Mock城市管理的数据接口： /open_city

      {
  "code": 0,
  "list": "开通成功"
}
实例代码
// src/pages/city/index.js
import React from 'react';
import {Card, Table, Form, Modal, Button, message, Select,} from 'antd';
import axios from './../../axios/index';
import Utils from './../../utils/utils';

const FormItem = Form.Item;
const Option = Select.Option;

export default class City extends React.Component {

state = {
 list: [],
 isShowOpenCity: false
};

params = {
 page: 1
};

componentDidMount() {
 this.requestList();
}

// 默认请求我们的接口数据
requestList = () => {
 let _this = this;
 axios.ajax({
   url: '/open_city',
   data: {
     params: {
       page: this.params.page
     }
   }
 }).then((res) => {
   let list = res.result.item_list.map((item, index) => {
     item.key = index;
     return item;
   });
   this.setState({
     list: list,
     pagination: Utils.pagination(res, (current) => {
       _this.params.page = current;
       _this.requestList();
     })
   });
 });
};

// 开通城市
handleOpenCity = () => {
 this.setState({
   isShowOpenCity: true
 });
};

// 城市开通提交
handleSubmit = () => {
 let cityInfo = this.cityForm.props.form.getFieldsValue();
 console.log(cityInfo);
 axios.ajax({
   url: '/city/open',
   data: {
     params: cityInfo
   }
 }).then((res) => {
   if (res.code == 0) {
     message.success('开通成功');
     this.setState({
       isShowOpenCity:false
     });

     this.requestList();
   }
 });
};

render() {
 const columns = [
   {
     title: '城市ID',
     dataIndex: 'id'
   }, {
     title: '城市名称',
     dataIndex: 'name'
   }, {
     title: '用车模式',
     dataIndex: 'mode',
     render(mode) {
       return mode === 1 ? '停车点' : '禁停区';
     }
   }, {
     title: '营运模式',
     dataIndex: 'op_mode',
     render(op_mode) {
       return op_mode === 1 ? '自营' : '加盟';
     }
   }, {
     title: '授权加盟商',
     dataIndex: 'franchisee_name'
   }, {
     title: '城市管理员',
     dataIndex: 'city_admins',
     render(arr) {  //处理数组类型
       return arr.map((item) => {
         return item.user_name;
       }).join(',');
     }
   }, {
     title: '城市开通时间',
     dataIndex: 'open_time',
     render:Utils.formateDate
   }, {
     title: '操作时间',
     dataIndex: 'update_time',
     render: Utils.formateDate //格式化时间戳
   }, {
     title: '操作人',
     dataIndex: 'sys_user_name'
   }
 ];
 return (
   <div>
     <Card>
       <FilterForm/>
     </Card>
     <Card style={{marginTop: 10}}>
       <Button type="primary" onClick={this.handleOpenCity}>开通城市</Button>
     </Card>

     <div className="content-wrap">
       <Table
         bordered
         columns={columns}
         dataSource={this.state.list}
       />
     </div>
     <Modal
       title="开通城市"
       visible={this.state.isShowOpenCity}
       onCancel={() => {
         this.setState({
           isShowOpenCity: false
         });
       }}

       onOk={this.handleSubmit}
     >
       <OpenCityForm wrappedComponentRef={(inst) => {
         this.cityForm = inst;
       }}/>
     </Modal>
   </div>
 );
}

}

//子组件一：选择表单
class FilterForm extends React.Component {

render() {
 const {getFieldDecorator} = this.props.form;
 return (
     <Form layout="inline">
       <FormItem label="城市">
         {
           getFieldDecorator('city_id')(
             <Select
               style={{width: 100}}
               placeholder="全部"
             >
               <Option value="">全部</Option>
               <Option value="1">北京市</Option>
               <Option value="2">天津市</Option>
               <Option value="3">深圳市</Option>
             </Select>
           )
         }
       </FormItem>
       <FormItem label="用车模式">
         {
           getFieldDecorator('mode')(
             <Select
               style={{width: 120}}
               placeholder="全部"
             >
               <Option value="">全部</Option>
               <Option value="1">指定停车点模式</Option>
               <Option value="2">禁停区模式</Option>
             </Select>
           )
         }
       </FormItem>
       <FormItem label="营运模式">
         {
           getFieldDecorator('op_mode')(
             <Select
               style={{width: 80}}
               placeholder="全部"
             >
               <Option value="">全部</Option>
               <Option value="1">自营</Option>
               <Option value="2">加盟</Option>
             </Select>
           )
         }
       </FormItem>
       <FormItem label="加盟商授权状态">
         {
           getFieldDecorator('auth_status')(
             <Select
               style={{width: 100}}
               placeholder="全部"
             >
               <Option value="">全部</Option>
               <Option value="1">已授权</Option>
               <Option value="2">未授权</Option>
             </Select>
           )
         }
       </FormItem>

       <FormItem>
         <Button type="primary" style={{margin: '0 20px'}}>查询</Button>
         <Button>重置</Button>
       </FormItem>
     </Form>
 );
}
}

FilterForm = Form.create({})(FilterForm);

//子组件二：开通城市
class OpenCityForm extends React.Component {
render() {
 const formItemLayout = {
   labelCol: {
     span: 5
   },
   wrapperCol: {
     span: 19
   }
 };
 const {getFieldDecorator} = this.props.form;
 return (
   <Form layout="horizontal">
     <FormItem label="选择城市"  {...formItemLayout}>
       {
         getFieldDecorator('city_id', {
           initialValue: '1'
         })(
           <Select style={{width: 100}}>
             <Option value="">全部</Option>
             <Option value="1">北京市</Option>
             <Option value="2">天津市</Option>
           </Select>
         )
       }
     </FormItem>
     <FormItem label="营运模式"  {...formItemLayout}>
       {
         getFieldDecorator('op_mode', {
           initialValue: '1'
         })(
           <Select style={{width: 100}}>
             <Option value="1">自营</Option>
             <Option value="2">加盟</Option>
           </Select>
         )
       }

     </FormItem>
     <FormItem label="用车模式"  {...formItemLayout}>
       {
         getFieldDecorator('use_mode', {
           initialValue: '1'
         })(
           <Select style={{width: 100}}>
             <Option value="1">指定停车点</Option>
             <Option value="2">禁停区</Option>
           </Select>
         )
       }
     </FormItem>
   </Form>
 );
}
}

OpenCityForm = Form.create({})(OpenCityForm);

小李科技
关注
专栏目录
【从零开始大模型开发与微调】AI 人工智能大语言模型 LLM：语言与思维——实践的融合
AI天才研究院
07-04 1803
在人工智能领域，大语言模型（Large Language Models, LLMs）已经取得了令人瞩目的成就。这些模型基于深度学习，通过在大量文本数据上预训练学习语言知识，被广泛应用于各种自然语言处理（NLP）任务，如图像描述、对话系统、翻译、摘要生成等。但这些模型的性能和表现，特别是其对语言和思维的理解，仍存在诸多困惑和疑问。大语言模型（LLMs）：指基于深度学习技术，通过在大量文本数据上预训练学习语言知识，能够理解和生成自然语言的大规模模型。自监督学习。
【共享单车】—— React后台管理系统开发手记：城市管理和订单管理
柳柳66的博客
01-10 552
【共享单车】—— React后台管理系统开发手记：城市管理和订单管理 前言：以下内容基于React全家桶+AntD实战课程的学习实践过程记录。最终成果github地址：https://github.com/66Web/react-antd-manager，欢迎star。 一、城市管理 pages-&gt;city-&gt;index...
城市管理系统
05-24
实现城市数字化管理，将城市的每一个区域划分为一个节点，十让每一个节点更加的清晰
（笔记10）React共享单车后台管理系统开发——城市管理
Dream_Lee的博客
03-22 1071
城市管理效果一、基础页面拆分Easy Mock城市管理的数据接口：顶部子组件一:选择表单componentDidMount():实例代码二、开通城市——弹框功能三、实例代码 效果 一、基础页面拆分 Easy Mock城市管理的数据接口： /open_city { "code": 0, "msg": "", "result": { "item_list|10": [{ ...
react 共享单车项目
07-01
react 共享单车项目
React全家桶+AntD共享单车-后台管理系统开发-笔记-03
mysteryflower的专栏
12-04 345
第四章 Router 4.0 路由实战演练 主要介绍Router 4.0 路由的使用，从Demo讲解到实战演练，一应俱全。 4-1 React-Router 4.0路由基本介绍 4-2 -React-Router4.0 路由Demo演示（1） 4-3 -React-Router4.0 路由Demo演示（2） 4-4 React-Router4.0 Demo2演示 4-5 React-Router4.0在项目当中的运用 第5章 UI菜单各个组件使用 详细介绍了UI菜单下各个组件的使用，包括了Butt.
Python复习笔记———超详细
qq_45824141的博客
06-17 1万+
Python复习笔记总结概括 一、前言 这是哪托针对老师的课件整理的复习笔记，基础入门，希望能对广大基础小白受用。内容如有错误的地方，麻烦指正。 笔记所有代码使用Microsoft VS Code的 Python、Jupyter 插件编程 二、语言基础 2.1标识符 1.2.1标识符 标识符可以包括英文、数字以及下划线，并且： ​ 开头必须是字母或下划线； ​ 不能以数字开头开头； ​ 区分大小写的； ​ 不能出现分隔符、标点符号或者运算符； ​ 不能使用关键字：def if for while cla..
系统集成项目管理工程师笔记
热门推荐
gly1653810310的博客
10-26 2万+
目录依据第二版教程
毛概学习笔记记录
qq_50218610的博客
07-29 2937
学习笔记记录
【Mysql数据库全套教程笔记-SELECT使用篇】
weixin_46040278的博客
07-28 734
MySQL数据库是程序开发必备的技能,根据尚硅谷的宋红康老师学习上传一套MySQL从入门到高级的MySQL全套的学习笔记 从环境搭建到增删改查再到高级底层原理 索引调优等,希望对你有所帮助
软件设计师笔记
weixin_48065337的博客
01-03 737
软考中级软件设计师的笔记。计算机硬件基本由运算器、控制器、输入设备和输出设备五大部分组成，操作系统知识，软件工程
大语言模型原理与应用实践：基于监督学习进行微调 Supervised Learning & Fine-Tuning
AI天才研究院
06-25 369
近年来，随着深度学习技术的快速发展，大规模语言模型(Large Language Models, LLMs)在自然语言处理(Natural Language Processing, NLP)领域取得了巨大的突破。这些大语言模型通过在海量无标签文本数据上进行预训练，学习到了丰富的语言知识和常识，可以通过少量的有标签样本在下游任务上进行微调(Fine-Tuning)，获得优异的性能。其中最具代表性的大模型包括OpenAI的GPT系列模型、Google的BERT、T5等。
模型架构选择：从传统NLP到Transformer
AI天才研究院
03-02 200
自然语言处理（NLP）是人工智能的重要分支，旨在使计算机能够理解、解释和生成人类语言。随着互联网的发展和数据量的激增，NLP技术在文本分类、机器翻译、情感分析、问答系统等多个领域得到了广泛应用。然而，NLP任务的复杂性和多样性对模型架构提出了巨大挑战。传统的NLP模型架构，如基于规则的方法、统计模型、词袋模型等，虽然在早期取得了一定的成果，但随着数据规模和任务复杂度的增加，这些方法逐渐暴露出其局限性。为了应对这些挑战，研究人员不断探索新的模型架构，从传统的RNN、CNN，到近年来备受瞩目的Transform
【共享单车】—— React后台管理系统开发手记：AntD Table高级表格
柳柳66的博客
01-10 743
【共享单车】—— React后台管理系统开发手记：AntD Table高级表格 前言：以下内容基于React全家桶+AntD实战课程的学习实践过程记录。最终成果github地址：https://github.com/66Web/react-antd-manager，欢迎star。 一、头部固定 scroll属性：设置横向或纵向滚动，...
（记录笔记9）——9.1 项目工程化
小李科技
01-30 448
文章目录一 项目工程化概念二 BaseForm的封装2.0 项目工程化2.1 Utils 代码2.2 BaseForm组件代码2.3 Order组件代码三 axios封装3.1 axios 代码3.2 Order代码 一 项目工程化概念 二 BaseForm的封装 城市管理中FilterForm子组件： 订单管理中FilterForm子组件： 员工管理中FilterForm子组件： Git...
（记录笔记6）——6.2 Table高级表格
小李科技
01-15 3170
6.2 高级表格 表单注册 文章目录6.2 高级表格@[toc]一.头部固定二 左侧固定三 排序API四 操作按钮完整案例API 一.头部固定 头部固定,内容 y轴 滚动 scroll:指定y轴滚动 (240px) width:指定每列的宽度 const columns = [ { title: 'id', k...
vue2面试题5|[2024-11-08]
最新发布
m0_49474690的博客
11-08 292
关于vue2API的面试题
Echarts 折线图
weixin_44443380的博客
11-08 161
解决方法：设置emphasis.lineStyle和折线图本身lineStyle相同即可。问题：鼠标悬停在折线图上，折线变粗。3、去掉 hover 折线变粗方法。
高效论文笔记管理——Xmind模板指南
资源摘要信息:"该资源是一个名为'论文笔记模板——自用xmind模板.zip'的压缩包文件。压缩包内部包含了一个名为'论文笔记模板——自用xmind模板.rar'的文件。该文件是一个适用于xmind软件的论文笔记模板。xmind是一款...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小李科技

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值