WTM+LayUI 主子表操作Time类型的数据

一、需求描述

WTM框架SetEditType提供了Text,TextBox,ComboBox,Datetime,CheckBox这几种类型，而没有提供Time的类型，故需要重写

二、解决思路

参考SetEditType里面DateTime的源码重写

三、代码实现

ListVM中方法实现

 protected override IEnumerable<IGridColumn<CWorkProcess>> InitGridHeader()
        {
            int StandardCTTimeIndex = 0;
            return new List<GridColumn<CWorkProcess>>{

                this.MakeGridHeader(x => x.Name).SetEditType(EditTypeEnum.TextBox).SetTitle(Localizer["Page.工序名称"].Value),
                this.MakeGridHeader(x => x.Sort).SetEditType(EditTypeEnum.TextBox).SetTitle(Localizer["Page.工序序号"].Value),

                this.MakeGridHeader(x => x.StandardCTTime).SetTitle(Localizer["Page.标准工时"].Value).SetFormat((e, f) =>
                {
                   string val=e.StandardCT==null?string.Empty:  DateHelper.SecToHMS((int)e.StandardCT) ;//提交失败也会返回到这里
                   //string val=((DateTime?)f)?.ToString("HH:mm:ss");
                    string name = $"Entity.CWorkProcess_Product[{StandardCTTimeIndex}].StandardCTTime";//这边Name的值必须和最终接受的实体一致
                      if(e.ID!=Guid.Empty)
                    {
                        StandardCTTimeIndex++;
                    }
                    string js=WTMHelper.MakeTime(name,val);
                    return js;
                }),
                this.MakeGridHeader(x => x.Desp).SetEditType(EditTypeEnum.TextBox).SetTitle(Localizer["Page.描述"].Value),

                this.MakeGridHeaderAction(width: 200)
            };
        }

 /// <summary>
        /// 子表生成Time组件的方法
        /// </summary>
        /// <param name="name"></param>
        /// <param name="value"></param>
        /// <param name="emptyText"></param>
        /// <param name="isReadOnly"></param>
        /// <returns></returns>
        public static string MakeTime(string name = null, string value = null, string emptyText = null, bool isReadOnly = false)
        {
            var id = (name == null ? "" : Utils.GetIdByName(name));
            var disable = isReadOnly ? " disabled='' class='layui-disabled'" : " ";
            if (string.IsNullOrEmpty(value) == false)
            {
                DateTime p = DateTime.MinValue;
                DateTime.TryParse(value, out p);
                if (p == DateTime.MinValue)
                {
                    value = "";
                }
            }
            return $@"<input class='layui-input' style='height:28px'  name='{name ?? ""}' id='{id}' value='{value ?? ""}' {disable}  onclick='SetGridCellTime(""{id}"")'/>";
        }

JS

//设置单元格为Time组件
function SetGridCellTime(id) {

    layui.use('laydate', function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#' + id
            , show: true
            , closeStop: '#' + id
            , type: 'time'  //2023.3.6 time
            , done: function (value, date, endDate) {
                document.getElementById(id).value = value;//输入后的值没有绑定到input,需要手动绑定
                document.getElementById(id).onchange();

            }
        });
    });
}

 Note:1、InitGridHeader方法name的名称，必须和最终接受的实体一致