── page    │      │── controller        | 控制器 或者说 store 状态存储    │   ├── entity.ts     | 实体类    │   ├── index.ts      | 页面控制器    │── views    │   ├── action.vue    | 页面操作& 行数据操作    │   ├── details.vue   | 详情&预览&编辑表单    │   ├── filter.vue    | 搜索条件    │   ├── grid.vue      | 表格    │── index.vue         | page 入口    │── locales.ts        | 多语言配置 枚举

import{$i18n,WTM_EntitiesField}from'@/client';import{EnumLocaleLabel}from'../locales';/** * 页面实体 */classEntity{ITCode:WTM_EntitiesField={// form 的 name 属性 解析为 Entity.ITCodename:['Entity','ITCode'],// label 字段描述label:EnumLocaleLabel.ITCode,// 输入框提示placeholder:$i18n.toPlaceholder(EnumLocaleLabel.ITCode),// 校验规则rules:[{required:true,message:$i18n.toRulesMessage(EnumLocaleLabel.ITCode)}],}Password:WTM_EntitiesField={name:['Entity','Password'],label:EnumLocaleLabel.Password,placeholder:$i18n.toPlaceholder(EnumLocaleLabel.Password),rules:[{required:true,message:$i18n.toRulesMessage(EnumLocaleLabel.Password)}],}Email:WTM_EntitiesField={name:['Entity','Email'],label:EnumLocaleLabel.Email,placeholder:$i18n.toPlaceholder(EnumLocaleLabel.Email),rules:[{required:true,message:$i18n.toRulesMessage(EnumLocaleLabel.Email)}],}Name:WTM_EntitiesField={name:['Entity','Name'],label:EnumLocaleLabel.Name,placeholder:$i18n.toPlaceholder(EnumLocaleLabel.Name),rules:[{required:true,message:$i18n.toRulesMessage(EnumLocaleLabel.Name)}],}Gender:WTM_EntitiesField={name:['Entity','Gender'],label:EnumLocaleLabel.Sex,placeholder:$i18n.toPlaceholder(EnumLocaleLabel.Sex),// 字段 输入类型 radio表现 单选按钮valueType:"radio",// 远程数据request:async()=>[{label:$i18n.t(EnumLocaleLabel.Sex_Male),value:'Male'},{label:$i18n.t(EnumLocaleLabel.Sex_Female),value:'Female'}],rules:[{required:true,message:$i18n.toRulesMessage(EnumLocaleLabel.Sex)}],}SelectedGroupCodes:WTM_EntitiesField={name:'SelectedGroupCodes',label:EnumLocaleLabel.GroupName,placeholder:$i18n.toPlaceholder(EnumLocaleLabel.GroupName),// 字段 输入类型 radio表现 单选按钮valueType:"checkbox",// 远程数据request:async()=>Ajax.get('/api/_FrameworkUserBase/GetFrameworkRoles'),rules:[{required:true,message:$i18n.toRulesMessage(EnumLocaleLabel.GroupName)}],}}exportconstPageEntity=newEntity()

<template><WtmDetails @finish="onFinish"><WtmFieldentityKey="ITCode"/><WtmFieldentityKey="Password"/><WtmFieldentityKey="Email"/><WtmFieldentityKey="Name"/><WtmFieldentityKey="Gender"/></WtmDetails></template><scriptlang="ts">import{ Vue, Options, Inject, Provide}from"vue-property-decorator";@Options({components:{}})exportdefaultclassextendsVue{  @Inject()PageController;  @Provide()formState={Entity:{ITCode:"",Password:"",},};onFinish(values){console.log("LENG ~ extends ~ onFinish ~ values",values);}created(){}}</script><stylelang="less"></style>