『贴代码』
项目介绍
项目精选
优选问答
【本期话题】更多
三人寄语更多
你连F12都不关注,你好意思说你是前端?
点赞:0
谋而后动,往往会让你对自己的代码更具信心!
点赞:1
时间与空间总是在换来换去,鱼和熊掌往往不可同得!
点赞:0
抛开需求谈架构是无意义的事情!
点赞:0
抛开需求讲架构,和纸上谈兵无差!
点赞:1
微信的app这个东西很鬼,有时候你刷新页面,会造成部分数据重置,部分不重置,不妨试试把对象放app.globalData里面去,会有意外惊喜!
点赞:0
一些奇奇怪怪的问题,一般和异步有关!
点赞:0
逻辑注解清晰的代码优于那些一眼看不明白的语法糖
点赞:0
实际遇到的问题往往在那些视频课程中是不会出现的!
点赞:0
需求就是系统的千年杀,相爱相杀那种!
点赞:0
框架PasteForm实际开发案例,支持多级对象的表单看看有多简单只要几个特性即可!(1)
尘埃 2025-04-05 1675 84 0
你知道么,包含多层级对象的表单在PasteForm中是这么的简单,只需要一个特性即可!

更多特性PasteForm的介绍,请前往PasteForm操作文档查看 PasteForm操作文档与介绍


PasteForm框架的主要思想就是对Dto进行标记特性,然后管理端的页面就会以不一样的UI呈现
使用PasteForm框架开发,让你免去开发管理端的烦恼,你只需要专注于业务端和用户端!

今天来分享的主要有以下几个点
1.多级嵌套,也可以说是外表或者是子表集合模式
2.按需显示,比如某一个选项选择a的时候,哪些要输入,选择b的时候又是哪些要输入

带子页面和可选输入的UI

先看UI
在这里插入图片描述
如果我选择条件包邮,则变成下面的
在这里插入图片描述
注意看上图的条件包邮,后面又新增+ 删除 收缩的操作,也就是可以以当前为范本新增一个对象的!
思考下,看UI可以知道条件包邮是下一级的东西,然后地区选择应该是一个array对吧,一起看看Dto长啥模样

Dto

    ///<summary>
    ///运费模板
    ///</summary>
    public class TemplateInfoAddDto
    {
        ///<summary>
        ///模板名称
        ///</summary>
        [MaxLength(64)]
        [Required]
        public string name { get; set; }

        ///<summary>
        ///计费类型
        ///</summary>
        [MaxLength(8)]
        [PasteLselect(PasteFormString.SelectValuationType, "", 1)]
        public string valuation_type { get; set; } = "PIECE";

        ///<summary>
        ///发货期限 SendTime_TWENTYFOUR_HOUR SendTime_FOUTYEIGHT_HOUR
        ///</summary>
        [MaxLength(32)]
        [PasteLselect(PasteFormString.SelectSendTime, "", 1)]
        public string send_time { get; set; } = "SendTime_TWENTYFOUR_HOUR";

        ///<summary>
        ///运输方式 EXPRESS:快递
        ///</summary>
        [MaxLength(16)]
        [PasteSelect(PasteFormString.SelectDeliveryType)]
        public string delivery_type { get; set; } = "EXPRESS";

        ///<summary>
        ///计费方式
        ///</summary>
        [MaxLength(16)]
        [PasteLselect(PasteFormString.SelectShippingMethod, "", 1)]
        [ColumnDataType("changeui", "CONDITION_FREE", "group:regexp:condition_free_detail_list__(.*)", "")]
        [ColumnDataType("changeui", "NO_FREE", "group:regexp:freight_calc_method_list__(.*)", "")]
        public string shipping_method { get; set; } = "FREE";

        /////<summary>
        /////条件包邮
        /////</summary>
        //public string all_condition_free_detail_json { get; set; }

        /////<summary>
        /////条件包邮
        /////</summary>
        //[PasteDirectsun]
        //public AllConditionFreeDetail all_condition_free_detail { get; set; } = new AllConditionFreeDetail();

        /// <summary>
        /// 条件包邮
        /// </summary>
        [PasteDirectsun]
        [PasteHidden]
        public List<ConditionFreeDetail> condition_free_detail_list { get; set; } = new List<ConditionFreeDetail> { };

        /////<summary>
        /////计费方法 默认运费,指定地区运费等
        /////</summary>
        //public string all_freight_calc_method_json { get; set; }

        /////<summary>
        /////计费方法 默认运费,指定地区运费等
        /////</summary>
        //[PasteDirectsun]
        //public AllFreightCalcMethod all_freight_calc_method { get; set; } = new AllFreightCalcMethod();

        /// <summary>
        /// 计费方法
        /// </summary>
        [PasteDirectsun]
        [PasteHidden]
        public List<FreightCalcMethod> freight_calc_method_list { get; set; } = new List<FreightCalcMethod> { };

        /////<summary>
        /////不发货区域
        /////</summary>
        //public string not_send_area_json { get; set; }

        ///<summary>
        ///
        ///</summary>
        [PasteGroupItem("g_no_area", "不发货地区", false)]
        [PasteSunform("../area/index.html?datainfo=address_infos",420)]
        public List<AddressShort> not_send_area { get; set; }
    }

上面用到了几个特性,简单介绍下,如果你要了解具体的特性用法,可以查阅PasteForm的操作文档
PasteForm文档
应该说是说明文档比较贴切

lselect

这个是select的变种,以横向模式展示可选项,支持单选和多选模式,选中的为蓝色粗体模式

changeui

这个是最近添加的特性,表示基于当前字段的最新值,进行UI的显示隐藏操作,目前只支持在select或者lselect后面执行
选择条件包邮后的UI变动就是这个特性生效的!

directsun

表示的是以对象模式读取当前对象,一般用于非基础数据类型,比如上面的

        /// <summary>
        /// 计费方法
        /// </summary>
        [PasteDirectsun]
        [PasteHidden]
        public List<FreightCalcMethod> freight_calc_method_list { get; set; } = new List<FreightCalcMethod> { new FreightCalcMethod { } };

上面是一个集合List,所以在UI中会以组别形式呈现,还支持+和删除操作,注意初始化的时候要new一项,不然UI中没有数据的!
非List也是支持的,比如

        /// <summary>
        /// 计费方法
        /// </summary>
        [PasteDirectsun]
        public FreightCalcMethod freight_calc_method_list { get; set; }

sunform

这个就很有意思了,表示以iframe的形式载入一个页面,这个页面要实现一个函数

/**
 * 提交表单 提交表单的数据,最好前面加一层转化啥的
 **/
function funcSubmitForm() {
    //把当前页面的内容读取成obj或者array,具体看需求
}

这样就可以实现有些特别复杂的直接写一个个性化的页面来实现!

问题

目前遇到一个问题,看上面的,如果某一个UI中的字段等没有被显示,而特性又标记required的时候,这个时候肯定有问题的,因为提交的时候会被阻断了!(因为必填你没填)

首先使用:hidden(判断元素是否显示)是不行的,因为组别的展开和收缩也是这个

还有一个是表单项有层级关系的,比如组隐藏了,就包含他里面的所有表单项了

这个问题我估计会使用class的名称来判定,如果是多级套的问题,其实class也有问题的。。。

如果你有好的建议欢迎留言,我会很开心看到你的建议的

下期见

评论列表
尘埃
84 1675 0
快捷注册
热门推荐更多
PasteBuilder
;
最新动态
  • 15.****.148 正在查看 贴代码框架PasteForm特性介绍之markdown和richtext !
  • 92.****.3 正在查看 PasteSpider之私有仓库的创建和使用 !
  • 92.****.3 正在查看 PasteSpider之私有仓库的创建和使用 !
  • 198.****.15 正在查看 关于PasteSpiderV2版本升级V5版本后,部署的服务会走一遍扩容的说明 !
  • 198.****.15 正在查看 关于PasteSpiderV2版本升级V5版本后,部署的服务会走一遍扩容的说明 !
  • 199.****.26 正在查看 关于PasteSpiderV2版本升级V5版本后,部署的服务会走一遍扩容的说明 !
  • 199.****.26 正在查看 关于PasteSpiderV2版本升级V5版本后,部署的服务会走一遍扩容的说明 !
  • 206.****.71 正在查看 PasteSpider部署工具介绍,为啥说是开发专属部署工具,看这篇就够了! !
  • 206.****.71 正在查看 PasteSpider部署工具介绍,为啥说是开发专属部署工具,看这篇就够了! !
  • 8.****.99 正在查看 使用ABP框架不得不留意的一个工具,PasteBuilder代码生成器使用介绍,特别适用于PasteForm框架 !
  • 8.****.99 正在查看 使用ABP框架不得不留意的一个工具,PasteBuilder代码生成器使用介绍,特别适用于PasteForm框架 !
欢迎加入QQ讨论群 296245685 [PasteSpider]介绍 [PasteForm]介绍 @2022-2023 PasteCode.cn 版权所有 ICP证 闽ICP备2021013869号-2