【DIY】拼Html和TS代码的

效果如图：

实体：

public class DbTableHeadEntity
{
    public int Id { get; set; }
    public string ColumnName { get; set; }
    public string ColumnType { get; set; }
}

public class POEntity
{
    public int ID { get; set; }

    public string PONo { get; set; }

    public string DeliveryAddress { get; set; }

    public int? CustomerID { get; set; }

    public DateTime? CreateTime { get; set; }

    public string CreateUserName { get; set; }

    public DateTime? UpdateTime { get; set; }
}

方法：

private void btnBuild_Click(object sender, EventArgs e)
{
    var data = ReadDbTableHead();

    this.textHtmlCode.Text = GetHtmlCode("PO", data);
    this.textTypeScriptCode.Text = GetTsCode("PO", data);
}

private static string GetTsCode(string tableName, List<DbTableHeadEntity> data)
{
    StringBuilder sb = new StringBuilder();
    sb.AppendLine($"dataSet{tableName} = [];"); 
    sb.AppendLine($"editCache{tableName} = [];"); 
    sb.AppendLine($"nzTotal{tableName} = 0;");
    sb.AppendLine($"{tableName}PageIndex = 1;");
    sb.AppendLine($"{tableName}PageSize = 10;");
    sb.AppendLine($"is{tableName}Loading = false;"); 

    //分页事件
    sb.AppendLine($"PageIndexChange{tableName}(): void");
    sb.AppendLine("{");
    sb.AppendLine("console.log('PageIndexChange');");
    sb.AppendLine("}");

    //开始编辑
    sb.AppendLine($"startEdit{tableName}(Id: number): void");
    sb.AppendLine("{");
    sb.AppendLine($"this.editCache{tableName}[Id].edit = true;");
    sb.AppendLine("}");

    //保存数据
    sb.AppendLine($"saveEdit{tableName}(Id: number): void");
    sb.AppendLine("{");
    sb.AppendLine("console.log(Id + 'saveEdit');");
    sb.AppendLine($"this.editCache{tableName}[Id].edit = false;");
    sb.AppendLine("}");

    //取消编辑
    sb.AppendLine($"cancelEdit{tableName}(Id: number): void");
    sb.AppendLine("{");
    sb.AppendLine($"this.editCache{tableName}[Id].edit = false;");
    sb.AppendLine("}");

    //删除数据
    sb.AppendLine($"delete{tableName}(Id:number): void");
    sb.AppendLine("{");
    sb.AppendLine("console.log(Id + 'delete');");
    sb.AppendLine($"this.{tableName}Service.delete(Id).subscribe(res => ");
    sb.AppendLine("{");

    sb.AppendLine("this.nzMessageService.success('Delete Success！');");
    sb.AppendLine($"this.get{tableName}List(null, null, null, null);");
    sb.AppendLine($"this.editCache{tableName}[Id].edit = false;");
    sb.AppendLine("})");
    sb.AppendLine("}");

    //查询数据事件
    sb.AppendLine($"get{tableName}List(startTime,stopTime,pageSize=10,pageIndex=1) ");
    sb.AppendLine("{");
    sb.AppendLine($"this.is{tableName}Loading = true;");
    sb.AppendLine($"this.{tableName}Service.get{tableName}List(startTime,stopTime,pageSize,pageIndex).subscribe(");
    sb.AppendLine("(res: {}) => {");
    sb.AppendLine($"this.dataSet{tableName} = res['POList'];");
    sb.AppendLine($"this.nzTotal{tableName} = res['ResultListCount'];");
    sb.AppendLine($"this.dataSet{tableName}.forEach(item => ");
    sb.AppendLine("{");
    sb.AppendLine($"this.editCache{tableName}[item.ID] =");
    sb.AppendLine("{");
    sb.AppendLine("edit: false,");
    sb.AppendLine("data: item");
    sb.AppendLine("}");
    sb.AppendLine("});");
    sb.AppendLine($"this.is{tableName}Loading = false;");
    sb.AppendLine("})");
    sb.AppendLine("}");

    //加载时调用方法
    sb.AppendLine("ngOnInit() ");
    sb.AppendLine("{");
    sb.AppendLine($"this.get{tableName}List(null, null, null, null);");
    sb.AppendLine("}");

    return sb.ToString();
}

public static string GetHtmlCode(string tableName, List<DbTableHeadEntity> tableHeads)
{
    StringBuilder sb = new StringBuilder();
    sb.AppendLine($"<nz-card nzTitle='{tableName}' [nzExtra]='addTemplate'>");
    sb.AppendLine($"<nz-table #edit{tableName} nzBordered [nzData]='dataSet{tableName}' nzFrontPagination='false' [nzTotal]='nzTotal{tableName}' nzShowSizeChanger='true' [nzPageIndex]='{tableName}PageIndex' [nzPageSize]='{tableName}PageSize' (nzPageIndexChange)='PageIndexChange{tableName}()' (nzPageSizeChange)='PageIndexChange{tableName}()' [nzLoading]='is{tableName}Loading' [nzShowTotal]='totalTemplate'>");

    //表头
    sb.AppendLine("<thead>");
    sb.AppendLine("<tr>");
    foreach (var item in tableHeads)
    {
        sb.AppendLine("<th>");
        sb.AppendLine($"{item.ColumnName}");
        sb.AppendLine("</th>");
    }
    sb.AppendLine("<th>Action</th>");
    sb.AppendLine("</tr>");
    sb.AppendLine("</thead>");

    sb.AppendLine("<tbody>");

    //数据列
    sb.AppendLine($"<tr *ngFor='let data of edit{tableName}.data'>");
    foreach (var item in tableHeads)
    {
        sb.AppendLine("<td>");
        sb.AppendLine($"<ng-container *ngIf='!editCache{tableName}[data.ID].edit'>");
        sb.AppendLine("{{data." + item.ColumnName + "}}");
        sb.AppendLine("</ng-container>");
        sb.AppendLine($"<ng-container *ngIf='editCache{tableName}[data.ID].edit'>");

        sb.AppendLine(GetTypeInput(tableName, item.ColumnType, item.ColumnName));

        sb.AppendLine("</ng-container>");
        sb.AppendLine("</td>");
    }

    //操作
    sb.AppendLine("<td>");
    sb.AppendLine("<div class='editable-row-operations'>");
    sb.AppendLine($"<ng-container *ngIf='!editCache{tableName}[data.ID].edit'>");
    sb.AppendLine($"<a (click)='startEdit{tableName}(data.ID)'>Edit</a>");
    sb.AppendLine("</ng-container>");
    sb.AppendLine($"<ng-container *ngIf='editCache{tableName}[data.ID].edit'>");
    sb.AppendLine($"<a (click)='saveEdit{tableName}(data.ID)'>Save</a>");
    sb.AppendLine($"<nz-popconfirm [nzTitle]=\"'Sure to cancel?'\" (nzOnConfirm)='cancelEdit{tableName}(data.ID)'>");
    sb.AppendLine("<a nz-popconfirm>Cancel</a>");
    sb.AppendLine("</nz-popconfirm>");
    sb.AppendLine("</ng-container>");
    sb.AppendLine("<nz-divider nzType='vertical'></nz-divider>");
    sb.AppendLine($"<a nz-popconfirm nzTitle='您确定要删除这条数据？' (nzOnConfirm)='delete{tableName}(data.ID)'>Delete</a>");
    sb.AppendLine("</div>");
    sb.AppendLine("</td>");

    sb.AppendLine("</tr>");

    sb.AppendLine("</tbody>");
    sb.AppendLine("</nz-table>");
    sb.AppendLine("</nz-card>");

    //总条数
    sb.AppendLine("<ng-template #totalTemplate>");
    sb.AppendLine("共 {{nzTotal" + tableName + "}} 条");
    sb.AppendLine("</ng-template>");

    //添加数据
    sb.AppendLine("<ng-template #addTemplate>");
    sb.AppendLine("<a (click)='isVisible=(!isVisible)'>Add</a>");
    sb.AppendLine("</ng-template>");

    //添加数据表单
    sb.AppendLine($"<nz-modal [(nzVisible)]='isVisible' nzTitle='Add {tableName} Info' (nzOnCancel)='isVisible=(!isVisible)' nzCancelText='Cencel' nzOkText='Add' (nzOnOk)='handleOk()'>");
    sb.AppendLine("<p>表单数据</p>");
    sb.AppendLine("</nz-modal>");

    return sb.ToString();
}

private static string GetTypeInput(string tableName,string columnType, string columnName)
{
    string result = $"<input type='text' nz-input [(ngModel)]='editCache{tableName}[data.ID].data.{columnName}'>";
    if (columnType.IndexOf("Int") != -1)
    {
        result = $"<input type='number' nz-input [(ngModel)]='editCache{tableName}[data.ID].data.{columnName}'>";
    }
    if (columnType.IndexOf("DateTime") != -1)
    {
        result = $"<nz-date-picker [(ngModel)]='editCache{tableName}[data.ID].data.{columnName}'></nz-date-picker>";
    }
    return result;
}

static List<DbTableHeadEntity> ReadDbTableHead()
{
    List<DbTableHeadEntity> result = new List<DbTableHeadEntity>();

    var model = new POEntity();
    Type t = model.GetType();
    PropertyInfo[] PropertyList = t.GetProperties();
    int Id = 0;
    foreach (PropertyInfo item in PropertyList)
    {
        DbTableHeadEntity dbTableHeadEntity = new DbTableHeadEntity();
        object value = item.GetValue(model, null);
        dbTableHeadEntity.Id = ++Id;
        dbTableHeadEntity.ColumnName = item.Name;
        if (item.PropertyType.IsGenericType && item.PropertyType.GetGenericTypeDefinition() == typeof(Nullable<>))
        {
            var columnType = item.PropertyType.GetGenericArguments()[0];
            dbTableHeadEntity.ColumnType = columnType.Name;
        }
        else
        {
            dbTableHeadEntity.ColumnType = item.PropertyType.Name;
        }
        result.Add(dbTableHeadEntity);
    }
    return result;
}

private void btnCopyHtml_Click(object sender, EventArgs e)
{
    this.textHtmlCode.Focus();
    KeyBoard.CtrlX();
}

private void btnCopyTypeScript_Click(object sender, EventArgs e)
{
    this.textTypeScriptCode.Focus();
    KeyBoard.CtrlX();
}

可以生成一个table,带增删改查功能的，方法的具体代码没有实现！

前端：Angular，TypeScrip，UI基于阿里的Ng-Zorro