本文将介绍soft.pastecode.cn出品的PasteForm，PasteForm是贴代码使用Dto思想实现的CRUD的一个组件，或者说输出一个思想！
为啥我觉得是最佳的CRUD呢？先结合你的实际项目解答下以下问题：

1.如果有一个系统，有100个表，你的管理端需要多少页面？别和我说100个表很多，需求复杂点的随随便便上100个数据库表的！

2.新的需求下来了，说XX表要新增一个字段，默认为100，新增的时候输入，不支持修改，作为你目前的管理端你需要几个步骤来实现？关键点你如何做版本过渡的问题？

3.做开发的都是到，表和表之间一般是有关系的，虽然不一定会建立外表链，比如BindUserGrade的表中的UserId一般就是表示UserInfo表的Id,这就牵扯到录入，更新，和显示的问题了，其实我们希望看到的是显示UserInfo中的UserName而不是干巴巴的一个UserId对吧！

4.一个表我们在管理端的时候一般会涉及到数据的列表显示，比较常用的就是table表格对吧，对应的有新增，编辑，查看，删除，那作为管理端你如何控制他们的权限？权限往往涉及2大块，a.前端页面的显示否，b.后端接口中的权限判定

... .. .

让我们一起来看下PasteForm的案例项目PasteTemplate是如何处理以上问题的！

案例代码 https://gitee.com/pastecode/paste-template/tree/master/example/PasteTemplate
从上面下载代码后，直接启动，然后，应该是localhost:22222端口 http://localhost:22222/page/index.html

登陆页面

登陆页面没什么好说的，因为不涉及找回密码，注册等，只有图形验证码和登陆

管理端

登陆后，看到如上图
左侧菜单采用动态的模式，菜单由权限读取，系统在首次启动的时候会把默认的菜单写入到数据库，如果当前账号有root-root的权限，则会返回所有的菜单，也就是root-root表示超级权限的意思,拥有系统的所有权限！
由于其他表的信息比较简单，我就从测试表的数据来举例子

页面组成

PasteForm的整个体系其实只有4个页面，
1.上图的index.html页面，作为管理端的菜单页面
2.右侧区域的数据表格table显示和他上方的搜索区域组成的pasteform/index.html页面
3.对应的表的编辑和新增页面，新增和编辑是同一个页面，这里命名为pasteform/view.html，也就是form表单页面
4.有些时候表的数据多大，我们不希望在table中全部显示，比如博文的正文，这就需要有一个页面查看详细的，pasteform/detail.html

index.html

管理端的主页面，大概是左右布局，100%绝对定位，是为了满足右侧子页面的flex布局，主要点是左侧的tree，内容是从API读取的，也就是不同账号登陆后看到的菜单是不一样的，具体的看角色对应的菜单(权限)

pasteform/index.html

如上图，你看到的内容，可以说整个页面都是后端的Dto控制的
1.比如搜索区域有多少个搜索项，搜索项的交互(daterange,date,outer,select,selects,word等)
2.中间区域的表格，包含了新增，编辑，删除，详情的基本4个菜单，然后就是自定义的一些按钮，比如上图的 添加子集!
3.然后是表格区域内的排序，注意看表格header中的ID 排序 层级 其实哪些字段支持排序，在后端的Dto中也就一行代码的事情！
4.表格中的一些交互，比如上图的switch,点击后是可以直接修改的，操作后会和后端API进行交互，如果返回非200则会重置状态
5.按钮区域的提交按钮，有些时候表格的按钮需要条件判断，那也是支持的，比如age>18的显示按钮1，age<12的显示按钮2等！
6.表格的自定义显示，有时候我们希望一个表格显示多个字段，比如换行啥的，也是可以实现的

pasteform/view.html

表单主页面，作为新增或者编辑的页面，支持几乎常见的录入
1.基础录入包括默认值等，比如text,number,switch,select等

2.也支持特殊的格式，比如daterange,richtext,textarea,selects,image,file等

3.高级支持,外表输入，比如选择其他表的一个对象作为这个表单的一个录入

点击父级后面的输入框，是弹出一个页面，选择一个对象，作为这个输入框的值，值一般包含2个，一个是id，一个是显示的

4.高级支持，参数输入,比如权限列表中的添加子集，那么打开的应该是添加页面，这个时候父级是不要输入的，由url参数传递过去

还有更多的功能等你发觉，上面说得一大堆功能，其实都是Dto中配置的
啥叫Dto?
接触过ABPvNext的应该比较数据，其实就是不同的Model,比如UserInfo这个表，一般会创建对应的4个Dto
UserInfoAddDto:作为UserInfo新增的数据模型
UserInfoUpdateDto:作为UserInfo的编辑的数据模型
UserInfoDto:一般作为详细显示的数据模型
UserInfoListDto:一般作为表格，列表的数据展示用
这几个模型可以配置互转，就是使用AutoMapper!

为了实现更加灵活的CRUD，我们只需要在对应的Dto中的字段上添加对应的属性即可，由于需求比较特殊，我定义了一个属性

    /// 

    /// 前端用数据类型 
    /// 
    [AttributeUsage(AttributeTargets.Property | AttributeTargets.Class, AllowMultiple = true)]
    public class ColumnDataTypeAttribute : Attribute
    {
        /// 

        /// image region navigator select selects dateplan datetime等
        /// 
        public string Name { get; set; } = "";

        /// 

        /// 
        /// 
        public string Args1 { get; set; } = "";

        /// 

        /// 
        /// 
        public string Args2 { get; set; } = "";

        /// 

        /// 参数3
        /// 
        public string Args3 { get; set; } = "";

        /// 

        /// 参数4
        /// 
        public string Args4 { get; set; } = "";

        /// 

        /// 
        /// 
        public string ErrorMessage { get; set; } = "";

        /// 

        /// 按照要求文档填写参数
        /// 
        /// 
        /// 
        /// 
        /// 
        /// 
        /// 
        public ColumnDataTypeAttribute(string name = "", string args1 = "", string args2 = "", string args3 = "", string args4 = "", string ErrorMessage = "")
        {
            this.Name = name;
            this.Args3 = args3;
            this.Args1 = args1;
            this.Args2 = args2;
            this.Args4 = args4;
            this.ErrorMessage = ErrorMessage;
        }

        /// 

        /// 
        /// 
        /// 
        public override string ToString()
        {
            return string.Format("{0}-{1}-{2}-{3}-{4}", Name, Args1, Args2, Args3, Args4);
        }
    }

然后是在需要限定的字段添加这个或者多个这个属性，比如

    ///

    ///测试表 用于测试CURD的表
    ///
    public class TestTableAddDto
    {
        ///

        ///姓名 模拟短文本输入
        ///
        [MaxLength(32)]
        [Required]
        [PasteMark("test", "name")]
        public string Name { get; set; }

        ///

        ///头像 模拟图片上传
        ///
        [MaxLength(128)]
        [PasteMark("test", "head")]
        [ColumnDataType("image", "1", "head", "60*60")]
        public string Head { get; set; }

        ///

        ///年龄 模拟输入number
        ///
        [Range(5, 90, ErrorMessage = "年龄必须限定在5~90之间!")]
        public int Age { get; set; }

        ///

        ///文本区域 模拟文本区域的输入
        ///
        [MaxLength(128)]
        public string Desc { get; set; }

        ///

        ///富文本 模拟富文本，前端HTML的是使用wangEditv5
        ///
        public string Blog { get; set; }

        ///

        ///加入日期 模拟必填时间的输入
        ///
        public DateTime JoinDate { get; set; }

        /// 

        /// 文件
        /// 
        [ColumnDataType("file", "/api/app/Upload/UpImage?type=file")]
        public string Fpath { get; set; } = "";

        ///

        ///单选 一般表示状态，内定的，有点像Enum,关于Enum后续会支持
        ///
        [ColumnDataType("mark", "test", "datetype")]
        [ColumnDataType("select", "[{\"name\":\"日类型\",\"value\":0},{\"name\":\"月类型\",\"value\":1},{\"name\":\"年类型\",\"value\":2}]")]
        public int DateType { get; set; }

        /// 

        /// 复选 多个之间用逗号隔开
        /// 
        [ColumnDataType("selects", "[{\"name\":\"日类型\",\"value\":\"day\"},{\"name\":\"月类型\",\"value\":\"month\"},{\"name\":\"年类型\",\"value\":\"year\"}]", ",")]
        public string TypeStrs { get; set; }

        /// 

        /// 复选数组
        /// 
        [ColumnDataType("selects", "[{\"name\":\"日类型\",\"value\":\"day\"},{\"name\":\"月类型\",\"value\":\"month\"},{\"name\":\"年类型\",\"value\":\"year\"}]")]
        public string[] Types { get; set; }

        ///

        ///角色ID 这里一般用于外表，就是选择其他表的一个数据作为输入内容
        ///
        [ColumnDataType("outer", "gradeInfo", "", "id", "name")]
        public int GradeId { get; set; }

        ///

        ///成绩 模拟前端限定2位小数
        ///
        public double Score { get; set; }

        /// 

        /// 字符串多图
        /// 
        [ColumnDataType("image", "3", "img", "60*60")]
        public string Img2 { get; set; }

        /// 

        /// 数组图片
        /// 
        [ColumnDataType("image", "3", "img", "60*60")]
        public string[] Img3 { get; set; }

        /// 

        /// 会员周期 会员生效区间
        /// 
        [ColumnDataType("daterange", "dateStart", "dateEnd")]
        public DateTime DateStart { get; set; } = DateTime.Parse("2024-09-01 00:00:00");

        /// 

        /// 会员周期 会员生效区间
        /// 
        [ColumnDataType("hidden")]
        public DateTime DateEnd { get; set; } = DateTime.Parse("2024-10-01 00:00:00");

    }

看上面的是测试表的Dto的属性的写法，由于配置ColumnDataType属性有多个参数，为了防止写错，你也可以自定义，然后继承于ColumnDataType就行了，比如我的

 /// 

 /// 
 /// 
 public class PasteMarkAttribute : ColumnDataTypeAttribute
 {

     /// 

     /// 书签属性
     /// 
     /// 书签模块,示例product
     /// 书签项,示例code
     public PasteMarkAttribute(string _model, string _value)
     {
         base.Name = "mark";
         base.Args1 = _model;
         base.Args2 = _value;
     }
 }

 /// 

 /// 日期区间
 /// 
 public class PasteDaterangeAttribute : ColumnDataTypeAttribute
 {

     /// 

     /// 日期区间
     /// 
     /// 开始日期字段
     /// 结束日期字段
     public PasteDaterangeAttribute(string _sdate="sdate",string _edate="edate")
     {
         base.Name = "daterange";
         base.Args1 = _sdate;
         base.Args2 = _edate;
     }
 }


 /// 

 /// 
 /// 
 public class PasteLeftAttribute : ColumnDataTypeAttribute
 {
     /// 

     /// 
     /// 
     public PasteLeftAttribute()
     {
         base.Name = "class";
         base.Args1 = "fleft";
     }
 }

 /// 

 /// 
 /// 
 public class PasteSwitchAttribute : ColumnDataTypeAttribute
 {
     /// 

     /// 
     /// 
     public PasteSwitchAttribute()
     {
         base.Name = "switch";
     }
 }

 /// 

 /// 同hidden 表示在UI中隐藏这个对象
 /// 
 public class PasteHiddenAttribute : ColumnDataTypeAttribute
 {
     /// 

     /// 
     /// 
     public PasteHiddenAttribute()
     {
         base.Name = "hidden";
     }
 }

 /// 

 /// 配置菜单或者是条件菜单
 /// 
 public class PasteMenuAttribute : ColumnDataTypeAttribute
 {

     /// 

     /// 
     /// 
     /// 
     /// 
     /// 
     /// 
     public PasteMenuAttribute(string _name, string _script, string _iconfont = "", bool _box = false)
     {
         base.Name = "menu";
         base.Args1 = _name;
         base.Args2 = _script;
         base.Args3 = _iconfont;
         if (_box)
         {
             base.Args4 = "box";
         }
     }
 }


 /// 

 /// 配置菜单或者是条件菜单
 /// 
 public class PasteIfMenuAttribute : ColumnDataTypeAttribute
 {
     //[ColumnDataType("ifmenu", "item.isReady", "重置状态", "", "")]
     /// 

     /// 条件按钮
     /// 
     /// 
     /// 
     /// 是否在按钮盒子中
     public PasteIfMenuAttribute(string _expresion, string _insertHtml, bool _box = false)
     {
         base.Name = "ifmenu";
         base.Args1 = _expresion;
         base.Args2 = _insertHtml;
         //base.Args3 = _iconfont;
         if (_box)
         {
             base.Args3 = "box";
         }
     }
 }


 /// 

 /// 用于表格中，显示另外一个字段的某一个值的表达式
 /// 
 public class PasteOuterDisplayAttribute : ColumnDataTypeAttribute
 {
     /// 

     /// 表格中用于显示某一个字段
     /// 
     /// 示例extendService?.name || ''
     public PasteOuterDisplayAttribute(string _expression)
     {
         base.Name = "outerdisplay";
         //base.Args1 = _cloumnName;
         base.Args2 = _expression;
     }
 }

 /// 

 /// 
 /// 
 public class PasteDisableAttribute : ColumnDataTypeAttribute
 {
     /// 

     /// 
     /// 
     /// 禁用新增
     /// 禁用编辑
     /// 禁用删除
     public PasteDisableAttribute(bool _unadd = false, bool _unedit = false, bool _undel = false)
     {
         base.Name = "disable";
         if (_unadd)
         {
             base.Args1 = "add";
         }
         if (_unedit)
         {
             base.Args2 = "edit";
         }
         if (_undel)
         {
             base.Args3 = "del";
         }
     }
 }

 /// 

 /// 单位属性 为计量添加单位
 /// 
 public class PasteUnitAttribute : ColumnDataTypeAttribute
 {
     /// 

     /// Unit的属性
     /// 
     /// 示例元
     public PasteUnitAttribute(string _unit)
     {
         base.Name = "unit";
         base.Args1 = _unit;
     }
 }


 /// 

 /// Select的属性
 /// 
 public class PasteSelectAttribute : ColumnDataTypeAttribute
 {
     /// 

     /// Select的属性
     /// 
     /// 示例[{name,value,selected}]
     public PasteSelectAttribute(string _selectvalues)
     {
         base.Name = "select";
         base.Args1 = _selectvalues;
     }
 }

 /// 

 /// Selects的属性 可以多选的
 /// 
 public class PasteSelectsAttribute : ColumnDataTypeAttribute
 {
     /// 

     /// Selects的属性
     /// 
     /// 示例[{name,value,selected}]
     public PasteSelectsAttribute(string _selectvalues)
     {
         base.Name = "selects";
         base.Args1 = _selectvalues;
     }
 }

 /// 

 /// Image的属性
 /// 
 public class PasteImageAttribute : ColumnDataTypeAttribute
 {

     /// 

     /// Image的属性
     /// 
     /// 可以传多少张
     /// 存放的路径
     /// 转化的大小,示例60*60,1920*0
     public PasteImageAttribute(int _num = 1, string _path = "", string _size = "")
     {
         base.Name = "image";
         base.Args1 = _num.ToString();
         base.Args2 = _path;
         base.Args3 = _size;
     }
 }

 /// 

 /// 
 /// 
 public class PasteOuterAttribute : ColumnDataTypeAttribute
 {

     /// 

     /// 链接外表显示和输入用
     /// 
     /// 外表名称，示例serviceInfo
     /// 显示的时候的表达式，示例extendService.name || ''
     /// 回传的列的名称，示例id
     /// 显示的列表的名称，示例name
     public PasteOuterAttribute(string className, string extendName = "", string _keyColumn = "id", string _showColumn = "name")
     {
         base.Name = "outer";
         base.Args1 = className;
         base.Args2 = extendName;
         base.Args3 = _keyColumn;
         base.Args4 = _showColumn;
     }
 }

案例有了，那么每个name是干嘛用的？

ColumnDataTypeAttribute

ColumnDataType的配置说明

image

相对于后面的 head 来说，这里是大图模式,在ListDto中表示使用图片的模式渲染

head 弃用，使用image

使用方式同 image 这里表示的是小图标模式

file

其实可以使用image的接口，他们2个的返回格式都是一样的，wangEditor的返回格式，主要是UI上不一样，毕竟文件没法预览

region

小程序中的地区选择，可以配置精确度，到区还是到县

outer

表示一个值需要从外表获取，编辑的时候如何显示? 比如fatherId,extendRole

outers

outer的复数版本，表示可以从外部列表中选择多个，比如在创建账号的时候给他绑定多个角色，就用这个！

outerdisplay

ListDto中用于外表的显示，比如有字段cateInfoId,对应的ExtendCateInfo要标记为outerdisplay,args2配置为extendCateInfo?.name || '',否则会显示为[object object]

navigator

表示这个值需要使用页面从另外一个列表中获取，这里表示小程序端的,建议使用outer outerdisplay

datetime

默认的yyyy-MM-dd HH:mm:ss的格式

hidden

表示隐藏这个字段，一般是主键ID，或者外表链接过来的会这配置，比如需要给cate添加子项，则添加由cate那边过来
这个也适用于ListDto

password

密码框模式

query

如果从query中获取到了数据，则对应的字段隐藏,注意不要配置hidden,因为查询的时候是从表单读取数据的，hidden的话是不写入到form中的，那样查询就没法获取query来的值了

readyonly

表示这个字段是只读的，一般是编辑的时候生效

richtext

如果是字符串，没有设置maxlength，默认就会变更成richtext，也可以手动强制配置

textarea

如果是字符串，设置maxlength，且设置的值大于128，默认就会变更成textarea，也可以手动强制配置

text

对于一些长度过长的，会被判定为textarea，或者richtext的可以使用这个强制换行成text

fentoyuan

这个是指后台单位为分，又需要前端进行元输入的，注意小数位数为2位小数，也就是分的格式为int

select

表示单选，比如权限类型，一般是指固定类型的，一般不修改的那种情况，也可以表示状态等

selects

表示多选，这个表示的是页面上的多选，需要列表显示，然后是可以多选！关键在于最后读取数据的时候，需要判断是什么格式的！

sort

表示排序，表示字段的顺序,一般表格比较会使用这个

link

这个用于表格显示，一般表示用于显示外表的数据,这个将弃用，使用outerdisplay替换

width

表示这个字段在表格得宽度，可以为*或者对应得数字,是表格得列的宽度的权重,这个适用于ListDto

orderby

表示基于哪个字段进行排序,这个一般是ListDto表示表格中，可以基于哪个字段进行排序查询

datalist

前端表示使用datalist作为选择数据源，前端需要把datalist的id赋值给datalistid，默认为字段name,这个规则适用于表单和QueryDto

daterange

主字段需要设置为daterange,其他字段需要设置hidden,在最后组合数据的时候，会基于参数生成对应的,应该要设置为可null格式

disable

特殊限定，限定于class的，表示禁用这个模型的哪些功能，这个一般用于ListDto，因为这些功能都在列表页面

menu

用于列表后面的菜单 比如\args1

        /// 

        /// Http模板 表示使用Http模式的模板的内容
        /// 
        [ColumnDataType("button")]
        public string Temp1 { get; set; } = "点击导入";

Http模板：点击导入