从WTM vue2版到 WtmPlus vue3

从2019年开始注意到WTM,觉得代码生成器真是能省不少事，大部分的项目都缺不了系统管理（包含用户，用户组，角色，角色权限，数据权限），这个通用功能WTM项目已经集成，开发者可以把主要精力投入到业务开发。对于几个人做的小型项目，想要MVC模式开发，在这个基础上进行开发，风格就能达到统一；

到2020年，vue版本发布了，想着现在前后端分离是前端开发热门，就尝试了一下，我谈谈我的粗浅认识。

对这个Vue版本,WTM群友的第一感觉就是前端写出了后端的感觉，能把这个WTM-Vue版本吃透，Vue从基础到高级用法差不多了解得差不多了。

对于初次接触的人，Vue 的 Mixins（混入）比较费解，但要了解WTM vue2 代码生成器生成的每个放在ClientApp/src/pages目录下的每个窗体页面，了解数据从webapi获取，在前端页面上面显示，然后响应按钮事件，Vue页面的生命周期，要细细，反反复复的看form-mixin.ts,action-minxin.ts,search.ts 这几个文件，要不都弄不清 store目录下的api.ts 里面写的

import { contentType } from "@/config/enum";
const reqPath = config.headerApi + "/_actionlog/";

// 列表
const search = {
  url: reqPath + "Search",
  method: "post",
  dataType: "array"
};
// 批量删除
const batchDelete = {
  url: reqPath + "BatchDelete",
  method: "post"
};
// 详情
const detail = {
  url: reqPath + "{ID}",
  method: "get"
};
const exportExcel = {
  url: reqPath + "ExportExcel",
  method: "post",
  contentType: contentType.stream
};
const exportExcelByIds = {
  url: reqPath + "ExportExcelByIds",
  method: "post",
  contentType: contentType.stream
};
const getExcelTemplate = {
  url: reqPath + "GetExcelTemplate",
  method: "get",
  contentType: contentType.stream
};

// 导入
const imported = {
  url: reqPath + "Import",
  method: "post"
};
export default {
  search,
  batchDelete,
  detail,
  exportExcel,
  exportExcelByIds,
  getExcelTemplate,
  imported
};

 这些是怎么被调用。

另外就是 ClientApp/src/components/ 下面的文件，这个可以

把表单结构转换成element组件，注意分析下 ClientApp/src/components/page/CreateForm/utils.tsx 文件，里面的generateWtmFormItemComponent 值得好好分析；

生成普通的页面，例如下图页面就很容易，

但是generateWtmFormItemComponent 生成复杂页面就力不从心，

要怎么把element组件集成到wtm-create-form里面 ，

我自己是修改 ClientApp/Src/Components/page/CreateForm/index.ts

render(h) {
    const components = _.keys(this.options.formItem).map((key) => {
      const createItem=this.options.formProps["createItem"];
     
      const item = this.options.formItem[key];
      if (_.isFunction(item.isHidden)) {
        if (item.isHidden(this.getFormData(), this.status)) {
          return;
        }
      }
      if ((_.isBoolean(item.isHidden) && item.isHidden) || !item.type) {
        return;
      }
      const itemComp = componentObj[item.type];
        const option = { ...item, key };
        if (createItem == false) {            
            return;
        }
      const contentComp = itemComp ? itemComp.call(this, h, option) : null;

      return componentObj.wtmFormItem.call(this, h, option, contentComp);
    });
    const props = {
      ...this.options.formProps,
      disabled: this.status === "detail",
      model: this.sourceFormData || this.formData,
    };
    const slots = this.$scopedSlots["default"];
    if(props["createItem"]==false){
       return  (      
      this.elFormRefKey} {...{ props }}>      
         this.elRowClass}>
           {slots && slots({})}
          
      
     );
    }    
    if(props["tabs"]){       
       const tbpanes=props["tabs"].panes.map((key)=>{
         const tbpanes_Components=components.slice(Number(key.start),Number(key.end)+1);    
         return (  
                      {tbpanes_Components}
                    
         );
         });       
       return (      
      this.elFormRefKey} {...{ props }}>
         this.elRowClass}>
           
               {tbpanes}                       
           
              {slots && slots({})}
           
      
      );
    }
    else{
    return (      
      this.elFormRefKey} {...{ props }}>
                           this.elRowClass}>
                             {components}
                              {slots && slots({})}
                              

      
     );
    }
  

其中一个用法是根据组件顺序，把指定范围的组件放到 一个 el-tab-pane,但是用到这种的情况比较少，另一个就是

当 "createItem":false 时，在 wtm-create-form 里面自己绑定组件；总之Vu2版本要写项目，还是要进行各种改造，不像 Layui版本那种绑定风格，自由度感觉受到限制；

有看过 WTM react 版本，react版本跟layUI版本的绑定比较类似，自己把实体绑定到每个组件上，后来听说WTM vue版本要进行ＷTM VU3重制，我不知道了解信息有没有错误，是WTM react操刀人要进行WTM vue3版本重制，我就想风格应该会跟React类似；

千呼万唤，2021.11.18 WTMPlus Vu3版本正式发布，听说刘总为了发布都熬通宵了；

第一时间生成几个Model试了一下，看看有啥变化。

 整个目录结构都变了，UI也由Vue element 换成了 Vue antd,看绑定，是不是跟 layUI版本有点类似了。

 还刚接触Vue3版本的，等认识更深刻后再发表看法；

最后夸一夸 WTMPlus,拥有多个微软MVP的团队倾力打造的低码平台，而且项目源码全部可以下载，开发者可以进行自由发挥，对于一个程序员，源码在手，天下我有的感觉是不一样的。

网址：http://wtmplus.walkingtec.cn