zhisuan——前端系列

已于 2022-12-08 17:51:32 修改
阅读量191 收藏
点赞数
分类专栏： ZhiSuan 文章标签： react.js 前端
于 2022-08-11 15:43:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_57127604/article/details/126286676
版权

目录

获取当前用户角色

数据计算自动填入输入框

类型一：主函数传入且有多条数据

类型二：一条数据且在同一函数内

页面查询内容为 当前月份，且增加月份查询按钮

 ①页面显示按钮

②传参设计

 ③按钮设计

 ④路径设置

导出excel

弹窗设计

主页面设计

 弹窗页面

增加货币类型选择

 弹窗里面的

 列表的，list

填充Form初始化数据（下拉框）---initData

问题与解决

填写时输入框内容规则提醒（eg：非空或0-100）

路径问题

 层次对上

 路径引用错误

返回内容存在null

主页面传参给弹窗页面

列表内容排序 

获取当前用户角色

{
        title: '操作',
        fixed: 'right',
        dataIndex: 'id',
        width: 80,
        render: (text, record) => {
          const { route ,user:{currentUser}} = this.props;
@connect(({ contractRegistrationList, cache,user }) => ({
  contractRegistrationList,
  cache,
  user,
}))

=========================================================================   

数据计算自动填入输入框

类型一：主函数传入且有多条数据

MilesstoneForm.js

需要通过主类那边传过来

render调用到方法需要通过次调用

 

类型二：一条数据且在同一函数内

ProjectForm.js

=========================================================================  

页面查询内容为 当前月份，且增加月份查询按钮

 ①页面显示按钮

 效果

 

 最上面引用即可

const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
 <label>请选择查询月份：</label><MonthPicker   placeholder="请选择月份" onChange={this.onMonthChange} />&nbsp;&nbsp;

②传参设计

 原

现

  componentDidMount() {
    /**
     * 页面加载时，填充Table初始化数据
     */
     const monthdate = moment(new Date()).subtract(0, 'months').startOf('month').format('YYYY-MM');
    const { dispatch } = this.props;
    dispatch({
      type: 'milestone/fetchInit',
      payload:monthdate
    });

 ③按钮设计

// 按月份查询工资条数据
onMonthChange = (date, dateString) => {
  const { dispatch } = this.props;
  if(!!dateString)  {
      dispatch({
          type: 'milestone/fetchInit',
          payload: moment(dateString).format('YYYY-MM')
      });
  }
}

 ④路径设置

根据步骤③type的milestone.js文件找到fetchinit，然后再根据

 跳转到api.js文件

增加参数

/**
 * 销售 - 获取项目回款里程碑操作列表
 */
 export async function queryMilestoneListAmendList(params) {
  return request(`/api/bussiness/sales/milestone/AmendList?gmtCreateAmend=${params}`);
}

=========================================================================   

导出excel

① 在开头处添加

 const { MonthPicker, RangePicker, WeekPicker } = DatePicker;

② 添加按钮功能    （可直接用，换名称即可）

// 导出

handleExcelData = (columns, data) => {

  // 构造数据结构

  var dealData = {

    tableName: '回款里程碑超时修改记录',

    sheetName: '回款里程碑超时修改记录',

    columns: columns,

    excludeCols: ['操作'],

    handleCols: ['操作类型','状态'],

    rowDatas: data,

  };

  return dealData;

}

③ 添加页面按钮

 <DownloadExcel excelData={this.handleExcelData(this.column(), data.myAmendListOverTime)} />

=========================================================================  

弹窗设计

主页面设计

① 在开头处（即import下面）添加这段代码

const FormItem = Form.Item;
const { Step } = Steps;
const { TextArea } = Input;
const { Option } = Select;
const RadioGroup = Radio.Group;
const CreateForm = Form.create()(props => {
    const { modalVisible, form, handleAdd, handleUpdate, handleModalVisible, addonClose, initData, data, values, fileList, isdisable, Ondelete, handleUploadFile, handleFileChange
        , btnOfDelete, btnOfDownload, handleCheckModalVisible, checkForm, formTitle } = props;

    const okHandle = () => {
        form.validateFields((err, fieldsValue) => {
            console.info('fieldsValue', fieldsValue);
            if (err) return;
            form.resetFields();
            if (!!formTitle & formTitle.toString() == '新建') {
                handleAdd(fieldsValue);
            } else if (!!formTitle & formTitle.toString() == '修改') {
                handleUpdate(fieldsValue, values);
            }
        });
    };
    const parm = {
        bizId: !!values && !!values.id ? values.id : null,
    };
    //   const processParam = {
    //     //业务信息的id
    //     bizId: !!values && !!values.id ? values.id : null,
    //     //业务表单的编码
    //     tableCode: 'credit_management',
    //     //什么时候显示控件，一般为流程开始后作显示。因每个流程的状态设不一需自己设计
    //     hidden: !!values && !!values.state ? (values.state != 0 ? false : true) : true
    //   };

    return (

        <Drawer
            destroyOnClose
            title={formTitle}
            visible={modalVisible}
            onClose={addonClose}
            okHandle={okHandle}
            width="100%"
            onCancel={() => handleModalVisible()}
        >
            <div>
                <MilestoneOverTime form={form} isdisable={isdisable} {...parm} />
            </div>
            <div>
            </div>
            <FooterToolbar  >
                <Button onClick={addonClose} style={{ marginRight: 8 }}>
                    取消
                </Button>
                {/* <Button onClick={okHandle} type="primary" hidden={isdisable}>
                    提交
            </Button> */}


            </FooterToolbar>
        </Drawer>

    );
});

 ② 导入相关引用

import {
  G2,
  Chart,
  Geom,
  Axis,
  Coord,
  Label,
  Legend,
  View,
  Guide,
  Shape,
  Facet,
  Util
} from "bizcharts";

import ReactDOM from 'react-dom';

这个是要跳转的页面 

 

 ②添加注解和state

 @Form.create()

 state = {

    modalVisible: false,

    // updateModalVisible: false,

    expandForm: false,

    selectedRows: [],

    formValues: {},

    stepFormValues: {},

    showFormValues: {},

    checkForm: false,

    formTitle: "",

  };

  addonClose = () => {

    this.setState({

        modalVisible: false,

    });

};

 ③ 添加按钮功能  和 componentDidMount 位置同

handleBtton = () => {
  this.handleModalVisible(true, null, false, true, false)
}

handleModalVisible = (flag, record, isdisable, checkForm, fileIsdisable) => {
console.log("aa",flag, record, isdisable, checkForm, fileIsdisable);
  const { dispatch, milestone: { data } } = this.props;
  const dataList = data && data.milestoneList ? data.milestoneList : null;
  let formTitle;
  // if (record != null) {
  // dispatch({
  //   type: 'salePlanForm/resetData',
  //   // payload: {
  //   //   bizId: data,
  //   // },
  // });
  this.setState({
    // modalVisible: !!flag,
    isdisable: false,
    formTitle: '回款里程碑超时修改记录',
    stepFormValues: {},
});
// }
console.log("新建后");
this.setState({
  modalVisible: !!flag,
  //   stepFormValues: record || {},
  //   isdisable: !!isdisable,
  checkForm: !!checkForm,
  fileIsdisable: !!fileIsdisable,
  //   fileDelete: !!fileDelete,
});
}

④ 

const {
      milestone: { data },
      cache,
    } = this.props;
    const { selectedRows, modalVisible, updatemodalVisible, stepFormValues, showModalVisible, showFormValues, isdisable, checkForm, handleButton, formTitle, checkModalVisible } = this.state;
    const { dispatch } = this.props;
    const parentMethods = {
      handleAdd: this.handleAdd,
      handleUpdate: this.handleUpdate,
      Ondelete: this.Ondelete,
      handleModalVisible: this.handleModalVisible,
      handleFileChange: this.handleFileChange,
      modalVisible: false,
      checkForm: checkForm,
      addonClose: this.addonClose,
      //   initData: initData,
      data: data,
      formTitle: '',
      handleButton: this.handleButton,
      addonProClose: this.addonProClose,
      checkModalVisible: false,
  };

⑤ 添加页面按钮

<Button  type="primary" onClick={() => this.handleBtton()} >
                  修改超时记录
              </Button>
<Table
                  ref='table'
                  rowKey='id'
                  columns={this.column()}
                  scroll={{ x: 1300 }}
                  dataSource={data.myMilestoneListAmendList}
                  onRowDoubleClick={this.handleDoubleSelectRows}
                >
                </Table>

          <CreateForm {...parentMethods} modalVisible={modalVisible} values={stepFormValues} isdisable={isdisable} formTitle={formTitle} /> 

 弹窗页面

正常编写即可

=========================================================================  

增加货币类型选择

 弹窗里面的

 ①在 return（ 上方添加     

const currency = !!data  ? data.currency : null;
    const selectAfter = (
      <Col span={6}>
         {
            form.getFieldDecorator('currency', {
               initialValue: currency == null ? '人民币' : currency.toString() == '1' ? '人民币' : currency.toString() == '2' ? '港币' : currency.toString() == '3' ? '美元' : null,
            })
               (<Select defaultValue="人民币" disabled={isdisable}>
                  <Option value="1">人民币</Option>
                  <Option value="2">港币</Option>
                  <Option value="3">美元</Option>
               </Select>)
         }

      </Col>
   );

②在下面添加该方法 

 (<Input type='number' decimalSeparator={"."} precision={2} disabled={isdisable} min={0} max={MAX_VALUE}
                                    formatter={value => ` ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
                                    style={{ width: '100%' }} placeholder="请输入"
                                    addonAfter={selectAfter}
                                    onChange={this.handleconincomeBeforetaxChange}

                                 />)

 列表的，list

 

if (!!formTitle & formTitle.toString() == '立项登记') {
      // 处理货币信息
      if(fieldsValue.currency === '人民币'){
        let temps = '1';
        fieldsValue.currency= temps;
      }else if(fieldsValue.currency === '港币'){
        let temps = '2';
        fieldsValue.currency= temps;
      }else if(fieldsValue.currency === '美元'){
        let temps = '3';
        fieldsValue.currency= temps;
      }
      // handleAdd(fieldsValue);
    }
    else if (!!formTitle & formTitle.toString() == '立项修改') {
      // 处理货币信息
      if(fieldsValue.currency === '人民币'){
        let temps = '1';
        fieldsValue.currency= temps;
      }else if(fieldsValue.currency === '港币'){
        let temps = '2';
        fieldsValue.currency= temps;
      }else if(fieldsValue.currency === '美元'){
        let temps = '3';
        fieldsValue.currency= temps;
      }
    }

========================================================================= 

填充Form初始化数据（下拉框）---initData

eg效果：

 ① 在展示页面  添加访问From初始数据的路径（projectFromBusiness是查询中专页面）

 ② 在展示页面  获取查询得到的数据（projectFromBusiness是查询中专页面）

 ③在展示页面  将initData传到需要的地方

 ④在展示页面  上面eg效果添加此代码

(
                             <Select mode="multiple" disabled={!isdisable} showSearch optionFilterProp="children" placeholder="请选择">
                                {initData['contractList'] ? (initData['contractList'].map((item) => (
                                   <Option key={item.contractId} value={item.contractId} >{item.contractName}</Option>
                                ))) : undefined}
                             </Select>
                          )

注：后端该位置返回的数据处理返回项目id

map.put("purchaseContractIds",projectContractList.stream().map(ProjectContract::getContractId).collect(Collectors.toList()));

 前端根据项目id获取名称后展示

⑤ 在projectFromBusiness是查询中专页面  添加跳转

import { 
    queryProjectFromBusiness,
    queryContractFormInitBusiness,
    } from '@/services/api';
import { message } from 'antd';
import { debounce } from 'lodash-decorators/debounce';

export default {
namespace: 'projectFromBusiness',

    state: {
        //初始化数据
        initData: {

        },
        //查询数据
        data: {

            },

    },

    effects: {
      /**
       * 页面加载时，填充Form初始化数据（下拉框）
       */
       *fetch1({ payload },{call, put}){
        const response = yield call(queryContractFormInitBusiness, payload);
            yield put({
                type: 'initData',
                payload: response,
              });
      },
         /**
     * 商务合同
     */
        *fetch2({ payload }, { call, put }) {
            const response = yield call(queryProjectFromBusiness, payload);
            console.log("as",response);
            if(response.code == 200){
                yield put({
                    type: 'dataSave',
                    payload: response.result,
                });
                if(callback) callback(response);
            }
            else{
                message.error(response.message);
            }
          },
    },

    reducers: {
        /**
       * 页面加载时，填充Form初始化数据（下拉框）
       */
      initData(state, action){
        return {
            ...state,
            initData: action.payload.result,
        };
      },
        dataSave(state, action){
            return{
                ...state,
                data:action.payload,
            };
        },
    },
};

 ⑥ 在api。js设置

 文件名和⑤跳转地址相同，若给别的页面使用 最好弄个新的

下面路径可不变

========================================================================= 

问题与解决

填写时输入框内容规则提醒（eg：非空或0-100）

rules: [{pattern:/^(?:0|[1-9][0-9]?|100)$/, required:true, message: '请输入正确的完成进度' }],
                                })

 ------------------------------------------------------------------------------------------------------------------------------- 

路径问题

 层次对上

 ------------------------------------------------------------------------------------------------------------------------------- 

 路径引用错误

 

 --------------------------------------------------------------------------------------------------------------------------------

返回内容存在null

通过空数组解决

 ------------------------------------------------------------------------------------------------------------------------------- 

主页面传参给弹窗页面

------------------------------------------------------------------------------------------------------------------------------- 

列表内容排序 

 

日期，字符串可以直接排序

当没找到内容 导致没传过去，需要在前端判断若为空赋值空字符串

 sorter: (a, b) => (a.gmtCreateNew!=null?a.gmtCreateNew:"").localeCompare(b.gmtCreateNew!=null?b.gmtCreateNew:""),

 数字类型不能用排序 得转字符串

凸-皿-凸
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Elasticsearch】 Kibana 里程碑插件的使用
九师兄
06-30 379
1.概述 转载：Kibana 里程碑插件的使用 今天介绍一下 Kibana 的里程碑插件的使用，这个是一个相对还比较新的可视化插件，可以用来对具有时间上下文相关的数据，以里程碑的方式来展现这些数据点在时间轴上的关联性。 这样说可能比较抽象，举个荔枝，你在 Elasticsearch 里面存的是服务器日志信息，然后有一天，老板说网站很慢，帮忙重启一下，（老板听说重启可以解决问题，反正他说他的笔记本重启之后就老快了），这个是一个已知的维护动作，所以你默默的在后台记录了重启的时间和是谁叫你重启的（这里是老板），.
【后台管理系统】—— Ant Design Pro入门学习&项目实践笔记（二）
柳柳66的博客
04-14 923
【后台管理系统】—— Ant Design Pro入门学习&项目实践笔记（二） 前言：上一篇梳理了上手Ant Design Pro需要了解的一些基础知识，这一篇记录一些在开发【后台管理系统】登录注册、数据获取、列表展示等功能时需要注意的地方。 一、与服务器交互的一般步骤 代理到后端，配置跨域 修改config/con...
vue组件
qq_43381763的博客
02-16 437
组件的注册和使用 使用组件开发 好处 ：效率号 可维护性高 组件讲究拆分 将区域与区域之间划分出来 复用性高 1 .全局组件创建 Vue.component('runoob', { template: '<h1>自定义组件!</h1>'//定义主键 }） // 可以直接返回html界面 2.局部组件定义 <script> var Child = { template: '<h1>自定义组件!</h1>'//给组件定
前端Q的小小小里程碑
LuckyWinty的博客
11-20 424
很多关注我的人都不太了解前端Q这个名字的由来，这篇文章就来讲讲前端Q的前世今生，顺便送大大福利(文末有惊喜)，哈哈～～恭喜！前端Q总用户数突破千啦~~前端Q前世前端Q这个...
简单易用"里程碑"、"时间轴"<iOS小组件>
weixin_30785593的博客
11-29 239
非常感谢，帮助我的朋友们，谢谢你们。上次我的好朋友指出了我编码上（jwTextFiled工具组件）存在一些不规范问题，这次注意提高。 呆毛地址：https://github.com/NIUXINGJIAN/MilestonesAndTimeline.git 【创做背景】组件的制作是因为用到类似的功能，UI设计的图片不能满足实际场景需要。这个组件可能存在一些我...
【后台管理系统】—— Ant Design Pro页面相关（二）
柳柳66的博客
11-23 275
一、弹框Modal表单 使用Form.create()包装得到一个含有this.props.form属性的CreatForm自组件 从页面主（父）组件获得props数据和propsMethod方法 return渲染一个Modal中嵌入Form包裹着多个FormItem的弹框表单 const CreateForm = Form.create()(props => { ...
给自己的移动开发做一个里程碑的记号
and1985129的专栏
10-24 283
经过半年左右的自学，终于开始
探索Angular ES6：构建高效前端应用的新里程碑
gitblog_00059的博客
04-27 907
探索Angular ES6：构建高效前端应用的新里程碑 项目地址:https://gitcode.com/michaelbromley/angular-es6 在现代Web开发领域中，Angular以其强大的功能和灵活性备受推崇。Michael Bromley创建的Angular ES6项目更是这一框架的一次创新实践，它将ES6的现代化语法与Angular的强大能力相结合，为开发者提供了更高效、...
前端的发展史及知识体系
cqliaojing的专栏
09-18 493
学习前端开发前的一些知识储备：什么是前端，前端的发展，前端的知识体系
fetch的使用
指尖的星光的博客
07-28 814
前言 dva中封装了fetch，第一次使用，记录一哈。 参考博客 学会fetch的用法 vue axios 配置上服务器后报错’Access-Control-Allow-Origin’ header] 正文 使用fetch发送post请求： ** 参数: input:定义要获取的资源。可能的值是：一个URL或者一个Request对象。 init:可选,是一个对象，参数有： method: ...
js版gantt甘特图控件
01-23
包含js_dhtmlxGantt、js_FreeGantt、js_jquery.ganttView-v.0.7、js_SIcon Gantt Chart、js_TreeGridEval、js_TreeTable+++Gantt等等13个js甘特图控件
类型系统-前端进化的里程碑
weixin_34402408的博客
09-23 104
大半夜的JavaScript Weekly发来贺电：TypeScript 2.0 Final Released！ 没错，继Angular2发布之后，TypeScript今天也发布了2.0版本，这不禁让我浮想一番。如果要说TS和JS最明显的差别，我想一定是Type System，所以今天我们就聊聊类型系统在前端发展历程中，到底扮演了怎样的角...
箭头函数与class函数使用Antd Form组件中 Form.create()的方法
game7752的博客
05-07 2万+
class函数使用Form.create():class CustomizedForm extends React.Component { ...代码 } CustomizedForm = Form.create({})(CustomizedForm);箭头函数使用Form.create():const aaa =(form)=&gt;{ ...代码 } const Aaaa = Form.c...
箭头函数与class函数使用Antd Form组件中 Form.create()的方法
热门推荐
weixin_41544124的博客
02-12 3万+
经 Form.create() 包装过的组件会自带 this.props.form 属性 一、class函数使用Form.create(): class CustomizedForm extends React.Component { ...代码 } CustomizedForm = Form.create({})(CustomizedForm); 官网有详细介绍 比较完整的代码段 cons...
formCreate
随风而欲的博客
10-30 2327
Form.create import React, { Component } from 'react'; import { Form, Row, Col, Input, Radio, Button, Switch, message } from 'antd'; // import Bus from '@utils/bus.js'; import { POST } from '@http/ind...
react引用antd-form组件
qq_31307253的博客
02-22 2万+
const AddMaintainPerson = Form.create()(React.createClass({ getInitialState() { return { passwordDirty: false }; }, /** * 表单提交的内容 * @param e */
biz_platform项目过程
weixin_30546189的博客
11-29 76
1、前台界面主要采用React框架。通过Ajax方式将数据与tornado服务器交互。以下代码为请求后台数据。 var ThisPage = React.createClass({ render: function() { return (<div> <Button btnName="test button" doA...
moment系列一：add() 方法和subtract() 方法的使用
Smallwhitestrive的博客
05-27 1万+
在工作中，因为自己去搜博客的时候老是找不到自己想要的答案，甚至一篇博客下来，找了好久都没收获，倍感疲惫，所以这里就废话不多说，直接上内容吧。 moment 中文官网地址：http://momentjs.cn moment 英文地址：https://momentjs.com add方法的作用：可以计算任意指定时间（当前或者给定的具体某一天）后的任意时间，例如：现在是早上8点，再过几小时是12点，再过几分钟是8：20等等类似的情况 语法： moment().add(Number, String); moment
React 学习——React.memo（简单、引用类型的prop）
最新发布
qq_40269801的博客
08-20 508
React React.memo（简单、引用类型的prop） 1、传递一个简单类型的prop，prop变化时组件重新渲染 2、传递一个引用类型的prop，比较的是新值和旧值的引用是否相等;当父组件的函数重新执行时，实际上形成的是新的数组引用； 3、保持引用稳定->useMemo 组件渲染的过程中缓存一个值
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值