0
点赞
收藏
分享

微信扫一扫

【代码生成器】拼Html和TS代码的

7dcac6528821 2023-02-09 阅读 55


效果如图:

【代码生成器】拼Html和TS代码的_Code

实体:

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

举报

相关推荐

0 条评论