『贴代码』
技术分享
精选作品
优选问答
成长笔记
框架PasteForm实际开发案例,支持多级对象的表单看看有多简单只要几个特性即可!(1)
尘埃 2025-04-05 1823 85 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也有问题的。。。

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

下期见

评论列表
尘埃
85 1823 0
快捷注册
热门推荐更多
PasteSpider
;
用户问答更多
07月份版本的内存占用比以前大了,也没有泄漏,啥情况?以前200MB,这个版本能到300MB
文档中的组织归属有些问题,啥时候看看,更新更新!
  • 已经升级了,主要是left join的查询的时候没有过滤,其实这个问题,多租户也是一样的!

PasteSpider的集群方式,我还是没太懂,啥时候出一个专题来讲解讲解?
  • b不难吧,就几个地址!

最新动态
  • 216.****.99 正在查看 有时候发布,没反应,看任务列表也没有 !
  • 216.****.133 正在查看 主页spider !
  • 216.****.133 正在查看 Document:spider !
  • 216.****.133 正在查看 Document:spider !
  • 216.****.99 正在查看 PasteForm又添加一个大将,快速的帮你把你的项目升级成PasteForm类型,只需要引入一个文件即可!!! !
  • 216.****.99 正在查看 PasteSpider更新摘要 !
  • 216.****.99 正在查看 记PasteSpider部署工具的Windows.IIS版本开发过程之草稿-效果展示(4) !
  • 216.****.99 正在查看 PasteSpider中关于Nginx的配置,安装PasteSpider之后查阅 !
  • 216.****.99 正在查看 文章列表页 !
  • 216.****.99 正在查看 Document:spider !
  • 216.****.99 正在查看 主页talk !
欢迎加入QQ讨论群 296245685 [PasteSpider]介绍 [PasteForm]介绍 @2022-2023 PasteCode.cn 版权所有 ICP证 闽ICP备2021013869号-2