IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> Ant Design使用Tree 实现修改对应信息 -> 正文阅读

[JavaScript知识库]Ant Design使用Tree 实现修改对应信息

在这里插入图片描述

import React, { Component } from 'react';
import { services } from '@comall-backend-builder/core';
import { Tree, Button, Input, InputNumber, Select, message as AntMessage } from 'antd';
import { isEmpty, isArray } from 'lodash';
import './index.less';

const api = services.api;

enum CategoryRateType {
    DUTY_FREE = 'DUTY_FREE',
    NO_TAX = 'NO_TAX',
    ZERO_RATE = 'ZERO_RATE',
    EXPORT_TAX_REBATE = 'EXPORT_TAX_REBATE',
}

const CategoryRateTypeText: any = {
    [CategoryRateType.DUTY_FREE]: 'DUTY_FREE',
    [CategoryRateType.NO_TAX]: '不征税',
    [CategoryRateType.ZERO_RATE]: '零税率',
    [CategoryRateType.EXPORT_TAX_REBATE]: '出口退税',
};

export interface NormalInvoiceTaxrateCategoryEditFormStates {
    /**
     * 还有多少个分类未配置
     */
    taxRatesData: any | null;
    /**
     * 分类树
     */
    categoriesData: Array<any>;
    allKeys?: Array<string>;
    /**
     * 目前展开的分类下标
     */
    expandedKeys?: Array<string>;
    /**
     * 目前点击的分类key
     */
    currentCategoriesKey: any;
    /**
     * 目前点击的分类信息
     */
    currentCategories: any;
    submitParams: any;
}

export class NormalInvoiceTaxrateCategoryEditForm extends Component<
    {},
    NormalInvoiceTaxrateCategoryEditFormStates
> {
    constructor(props: any) {
        super(props);
        this.state = {
            taxRatesData: null,
            categoriesData: [],
            allKeys: undefined,
            expandedKeys: undefined,
            currentCategoriesKey: '',
            currentCategories: null,
            submitParams: {
                id: undefined,
                taxCode: '',
                taxRate: undefined,
                taxRateType: '',
            },
        };
    }
    loadTaxRates = () => {
        //获取还有多少个分类没配置税率
        api.get(
            {},
            {
                apiRoot: `${ENV.AUTH_API_ROOT}/MAGIC-PRODUCT`,
                apiPath: `/admin/category_tax_rates/statistics`,
            }
        ).then((response: any) => {
            this.setState({
                taxRatesData: response,
            });
        });
    };

    loadCategories = () => {
        //获取分类树
        api.get(
            {},
            {
                apiRoot: `${ENV.AUTH_API_ROOT}/MAGIC-PRODUCT`,
                apiPath: `/admin/category_tax_rates`,
            }
        ).then((response: any) => {
            let categoriesData = [response];
            const keys: string[] = [];
            categoriesData.forEach((item, i) => {
                this.format(item, [i], keys);
            });
            this.setState({
                categoriesData: categoriesData,
                allKeys: keys,
            });
        });
    };
    componentDidMount() {
        this.loadTaxRates();
        this.setState(
            {
                expandedKeys: ['0'],
            },
            () => {
                this.loadCategories();
            }
        );
    }

    format = (data: any, indexs: number[], keys: string[]) => {
        if (data.children && isArray(data.children) && data.children.length) {
            data.children.forEach((item: any, i: number) => {
                this.format(item, [...indexs, i], keys);
            });
        }
        let title = data.name;
        if (data.taxRate) {
            if (data.taxRate.rate) {
                title += `(${data.taxRate.code},${data.taxRate.rate}%)`;
            }
            if (data.taxRate.type) {
                const typeText = CategoryRateTypeText[data.taxRate.type];
                title += `(${data.taxRate.code},${typeText})`;
            }
        }
        data.title = title;
        if (indexs.length < 4) {
            data.key = indexs.join('-');
            keys.push(data.key);
        }
    };

    onSelect = (selectedKeys: React.Key[], info: any) => {
        const currentCategories = info.node.props;
        this.setState({
            currentCategoriesKey: selectedKeys,
            currentCategories: currentCategories,
            submitParams: {
                id: currentCategories.id,
                taxCode: currentCategories.taxRate && currentCategories.taxRate.code,
                taxRate: currentCategories.taxRate && currentCategories.taxRate.rate,
                taxRateType: currentCategories.taxRate && currentCategories.taxRate.type,
            },
        });
    };

    onExpand = (expandedKeys: any) => {
        this.setState({
            expandedKeys: expandedKeys,
        });
    };

    selectAll = () => {
        const { allKeys } = this.state;
        this.setState({
            expandedKeys: allKeys,
        });
    };

    submit = () => {
        const { submitParams, currentCategories } = this.state;
        if (!submitParams.taxCode) {
            AntMessage.warning('请输入商品税收分类编码');
            return;
        }
        if (!submitParams.taxRate && !submitParams.taxRateType) {
            AntMessage.warning('请输入商品税率或选择特殊税率');
            return;
        }
        if (submitParams.id && currentCategories.taxRate) {
            api.put(submitParams, {
                apiRoot: `${ENV.AUTH_API_ROOT}/MAGIC-INVOICE`,
                apiPath: '/admin/category_tax_rates',
            }).then(() => {
                AntMessage.success('保存成功');
            });
        } else {
            api.post(submitParams, {
                apiRoot: `${ENV.AUTH_API_ROOT}/MAGIC-INVOICE`,
                apiPath: '/admin/category_tax_rates',
            }).then(() => {
                AntMessage.success('保存成功');
                this.loadCategories();
            });
        }
    };

    onFiledChange(filed: string, e: any) {
        const { submitParams } = this.state;
        if (filed === 'taxCode') {
            submitParams[filed] = e.target.value;
        } else {
            submitParams[filed] = e;
        }
        this.setState(
            {
                submitParams,
            },
            () => {
                this.setTaxRateTypeDisabled();
            }
        );
    }

    setTaxRateTypeDisabled = () => {
        //主要选择特殊税率,那前面填写税率就清空并不可编辑
        const { submitParams } = this.state;
        if (!isEmpty(submitParams.taxRateType)) {
            submitParams.taxRate = undefined;
            this.setState({
                submitParams,
            });
        }
    };

    render() {
        const {
            taxRatesData,
            categoriesData,
            currentCategories,
            submitParams,
            expandedKeys,
        } = this.state;
        return (
            <div className="normal-invoice-taxrate-category-edit-form">
                <div>
                    {taxRatesData && taxRatesData.noTaxCodeCount && (
                        <div className="content">
                            <span>目前有</span>
                            <span className="content-value-red">
                                {taxRatesData.noTaxCodeCount}</span>
                            <span>标准分类还未配置税收分类编码</span>
                        </div>
                    )}
                    <div className="tip">
                        {`商品本身税收编码>商品子级分类税收编码>商品父级分类税收编码`}
                    </div>
                    <Button type="primary" onClick={this.selectAll}>
                        全部展开
                    </Button>
                    <div style={{ height: '500px', overflow: 'auto' }}>
                        <Tree
                            showLine
                            showIcon
                            onSelect={this.onSelect}
                            onExpand={this.onExpand}
                            expandedKeys={expandedKeys}
                            treeData={categoriesData}
                        />
                    </div>
                </div>
                {currentCategories && currentCategories.id !== 1 && (
                    <div className="edit-wrap">
                        <div className="edit-title">编辑分类税率</div>
                        <div style={{ padding: '10px 10px 30px 10px' }}>
                            <div className="edit-input-wrap">
                                <div className="edit-input-title">所属分类:</div>
                                <span>{currentCategories.name}</span>
                            </div>
                            <div className="edit-input-wrap">
                                <div className="edit-input-title">商品税收分类编码:</div>
                                <Input
                                    className="edit-input-no-width"
                                    placeholder="请输入"
                                    value={submitParams.taxCode}
                                    onInput={this.onFiledChange.bind(this, 'taxCode')}
                                    max={100}
                                />
                            </div>
                            <div className="edit-input-wrap">
                                <div className="edit-input-title">商品税率:</div>
                                <InputNumber
                                    className="edit-input-taxrate-width"
                                    placeholder="请输入"
                                    value={submitParams ? submitParams.taxRate : undefined}
                                    disabled={submitParams.taxRateType}
                                    min={0}
                                    max={100}
                                    onChange={(value: any) => {
                                        this.onFiledChange('taxRate', value);
                                    }}
                                />
                                <span style={{ marginLeft: '5px' }}>%</span>
                                <span style={{ marginLeft: '20px' }}>特殊税率:</span>
                                <Select
                                    placeholder="请选择"
                                    style={{ width: 200 }}
                                    value={submitParams.taxRateType}
                                    onChange={this.onFiledChange.bind(this, 'taxRateType')}
                                >
                                    <Select.Option value="">请选择</Select.Option>
                                    <Select.Option value="DUTY_FREE">免税</Select.Option>
                                    <Select.Option value="NO_TAX">不征税</Select.Option>
                                    <Select.Option value="ZERO_RATE">零税率</Select.Option>
                                    <Select.Option value="EXPORT_TAX_REBATE">
                                        出口退税
                                    </Select.Option>
                                </Select>
                            </div>
                        </div>
                        <Button className="edit-button" type="primary" onClick={this.submit}>
                            提交
                        </Button>
                    </div>
                )}
            </div>
        );
    }
}

主要用的是

<Tree
    showLine
     showIcon
     onSelect={this.onSelect}
     onExpand={this.onExpand}
     expandedKeys={expandedKeys}
     treeData={categoriesData}
 />

 
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-05-11 16:21:48  更:2022-05-11 16:24:13 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 19:49:12-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码