Skip to content

F
formbase
提交 fbb646e0 编写于 作者: ibizdev's avatar ibizdev
浏览文件
操作

ibizdev提交

上级 2a9555c9
隐藏空白字符变更
内嵌 并排
正在显示 包含 2325 行增加 和 12 行删除
app_Default/src/App.vue
浏览文件 @ fbb646e0
......@@ -3,32 +3,62 @@
<div id="app">
<a-layout id="components-layout-demo-custom-trigger">
<a-layout-sider :trigger="null" collapsible>
<div class="logo"><img src="https://cdn.ibizlab.cn/super-form/logo.png"/></div>
<div class="logo"><img src="/assets/images/logo.png"/></div>
<a-menu theme="dark" mode="inline" :defaultSelectedKeys="['0']" @click="handleClick">
<a-menu-item key="0">
<a-icon type="user" />
<span>基础编辑器</span>
<span>实体编辑视图</span>
</a-menu-item>
<a-menu-item key="1">
<a-icon type="video-camera" />
<span>基础表单项</span>
<span>基础编辑器</span>
</a-menu-item>
<a-menu-item key="2">
<a-icon type="upload" />
<span>表单项动态逻辑示例</span>
<span>基础表单项</span>
</a-menu-item>
<a-menu-item key="3">
<a-icon type="user" />
<span>实体3编辑视图</span>
</a-menu-item>
<a-menu-item key="4">
<a-icon type="video-camera" />
<span>实体4编辑视图</span>
</a-menu-item>
<a-menu-item key="5">
<a-icon type="upload" />
<span>实体5编辑视图</span>
</a-menu-item>
<a-menu-item key="6">
<a-icon type="user" />
<span>表单项动态逻辑示例</span>
</a-menu-item>
<a-menu-item key="7">
<a-icon type="video-camera" />
<span>实体2编辑视图</span>
</a-menu-item>
<a-menu-item key="8">
<a-icon type="upload" />
<span>DemoForm</span>
</a-menu-item>
<a-menu-item key="9">
<a-icon type="user" />
<span>表单3</span>
</a-menu-item>
</a-menu>
</a-layout-sider>
<a-layout>
<a-layout-content :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }">
<ExampleEditorType v-show="curSelected == '0'"/>
<ExampleEditView v-show="curSelected == '1'"/>
<ExampleDLFEditView v-show="curSelected == '2'"/>
<ExampleMain2EditView v-show="curSelected == '3'"/>
<EntityEditView v-show="curSelected == '0'"/>
<ExampleEditorType v-show="curSelected == '1'"/>
<ExampleEditView v-show="curSelected == '2'"/>
<Entity3EditView v-show="curSelected == '3'"/>
<Entity4EditView v-show="curSelected == '4'"/>
<Entity5EditView v-show="curSelected == '5'"/>
<ExampleDLFEditView v-show="curSelected == '6'"/>
<Entity2EditView v-show="curSelected == '7'"/>
<ExampleMain2EditView v-show="curSelected == '8'"/>
<ExampleMain3EditView v-show="curSelected == '9'"/>
</a-layout-content>
</a-layout>
</a-layout>
......@@ -41,18 +71,30 @@ import zhCN from "ant-design-vue/lib/locale-provider/zh_CN";
import enUS from "ant-design-vue/lib/locale-provider/en_US";
import AppService from "@service/AppService";
import EntityEditView from '@pages/module/entity-edit-view/entity-edit-view.vue';
import ExampleEditorType from '@pages/exapmple/example-editor-type/example-editor-type.vue';
import ExampleEditView from '@pages/exapmple/example-edit-view/example-edit-view.vue';
import Entity3EditView from '@pages/module3/entity3-edit-view/entity3-edit-view.vue';
import Entity4EditView from '@pages/module4/entity4-edit-view/entity4-edit-view.vue';
import Entity5EditView from '@pages/module5/entity5-edit-view/entity5-edit-view.vue';
import ExampleDLFEditView from '@pages/exapmple/example-dlfedit-view/example-dlfedit-view.vue';
import Entity2EditView from '@pages/module2/entity2-edit-view/entity2-edit-view.vue';
import ExampleMain2EditView from '@pages/exapmple/example-main2-edit-view/example-main2-edit-view.vue';
import ExampleMain3EditView from '@pages/exapmple/example-main3-edit-view/example-main3-edit-view.vue';
export default {
name: "app",
components: {
EntityEditView,
ExampleEditorType,
ExampleEditView,
Entity3EditView,
Entity4EditView,
Entity5EditView,
ExampleDLFEditView,
ExampleMain2EditView
Entity2EditView,
ExampleMain2EditView,
ExampleMain3EditView
},
data() {
return {
......
app_Default/src/components/app-rich-text-editor/app-rich-text-editor.vue
浏览文件 @ fbb646e0
......@@ -91,10 +91,10 @@ export default {
{ text: "C#", value: "csharp" },
{ text: "C++", value: "cpp" }
],
codesample_content_css: "https://cdn.ibizlab.cn/super-form/tinymce/prism.css",
skin_url: "https://cdn.ibizlab.cn/super-form/tinymce/skins/lightgray",
codesample_content_css: "/assets/tinymce/prism.css",
skin_url: "/assets/tinymce/skins/lightgray",
language_url:
"https://cdn.ibizlab.cn/super-form/tinymce/langs/" +
"/assets/tinymce/langs/" +
(this.langu ? this.langu : "zh_CN") +
".js",
setup: editor => {
......
app_Default/src/forms/entity/main/main.vue 0 → 100644
浏览文件 @ fbb646e0
<template>
<div class="app-form">
<a-form class="" style="">
<a-row>
<a-tabs defaultActiveKey="formpage1" @change="formPageSelected">
<a-tab-pane key="formpage1" class="app-form-page app-form-page-formpage1 " style="">
<span slot="tab">
基本信息
</span>
<a-col v-show="this.detailsModel.group1.visible" style="" :lg="{ span: 24, offset: 0}">
<div class="app-form-group app-form-group-group1" style="">
<a-collapse v-model="activeGroup">
<a-collapse-panel key="group1">
<template slot="header">
实体基本信息
</template>
<div class="app-form-group-content" style="">
<a-row>
<a-col v-show="this.detailsModel.entityname.visible" style="" :lg="{ span: 24, offset: 0}">
<app-form-item :helpInfo="this.detailsModel.entityname.error" :required="this.detailsModel.entityname.required" :validateStatus="this.detailsModel.entityname.validateStatus" :labelName="'实体名称'" :labelwidth="'130px'" :labelPosition="'LEFT'" :isShowCaption="true" :formItemStyle="{}" :isEmptyCaption="false" :formItemContentStyle="{}" class="app-form-item-entityname ">
<a-input v-model="data.entityname" :disabled="detailsModel.entityname.disabled" style="" @change="formItemChange('entityname',$event.target.value)"/>
</app-form-item>
</a-col>
</a-row>
</div>
</a-collapse-panel>
</a-collapse>
</div>
</a-col>
</a-tab-pane>
<a-tab-pane key="formpage2" class="app-form-page app-form-page-formpage2 " style="">
<span slot="tab">
其它
</span>
<a-col v-show="this.detailsModel.group2.visible" style="" :lg="{ span: 24, offset: 0}">
<div class="app-form-group app-form-group-group2" style="">
<a-collapse v-model="activeGroup">
<a-collapse-panel key="group2">
<template slot="header">
操作信息
</template>
<div class="app-form-group-content" style="">
<a-row>
<a-col v-show="this.detailsModel.createman.visible" style="" :lg="{ span: 24, offset: 0}">
<app-form-item :helpInfo="this.detailsModel.createman.error" :required="this.detailsModel.createman.required" :validateStatus="this.detailsModel.createman.validateStatus" :labelName="'建立人'" :labelwidth="'130px'" :labelPosition="'LEFT'" :isShowCaption="true" :formItemStyle="{}" :isEmptyCaption="false" :formItemContentStyle="{}" class="app-form-item-createman ">
<span>{{data.createman}}</span>
</app-form-item>
</a-col>
<a-col v-show="this.detailsModel.createdate.visible" style="" :lg="{ span: 24, offset: 0}">
<app-form-item :helpInfo="this.detailsModel.createdate.error" :required="this.detailsModel.createdate.required" :validateStatus="this.detailsModel.createdate.validateStatus" :labelName="'建立时间'" :labelwidth="'130px'" :labelPosition="'LEFT'" :isShowCaption="true" :formItemStyle="{}" :isEmptyCaption="false" :formItemContentStyle="{}" class="app-form-item-createdate ">
<span>{{data.createdate}}</span>
</app-form-item>
</a-col>
<a-col v-show="this.detailsModel.updateman.visible" style="" :lg="{ span: 24, offset: 0}">
<app-form-item :helpInfo="this.detailsModel.updateman.error" :required="this.detailsModel.updateman.required" :validateStatus="this.detailsModel.updateman.validateStatus" :labelName="'更新人'" :labelwidth="'130px'" :labelPosition="'LEFT'" :isShowCaption="true" :formItemStyle="{}" :isEmptyCaption="false" :formItemContentStyle="{}" class="app-form-item-updateman ">
<span>{{data.updateman}}</span>
</app-form-item>
</a-col>
<a-col v-show="this.detailsModel.updatedate.visible" style="" :lg="{ span: 24, offset: 0}">
<app-form-item :helpInfo="this.detailsModel.updatedate.error" :required="this.detailsModel.updatedate.required" :validateStatus="this.detailsModel.updatedate.validateStatus" :labelName="'更新时间'" :labelwidth="'130px'" :labelPosition="'LEFT'" :isShowCaption="true" :formItemStyle="{}" :isEmptyCaption="false" :formItemContentStyle="{}" class="app-form-item-updatedate ">
<span>{{data.updatedate}}</span>
</app-form-item>
</a-col>
</a-row>
</div>
</a-collapse-panel>
</a-collapse>
</div>
</a-col>
</a-tab-pane>
</a-tabs>
</a-row>
</a-form>
</div>
</template>
<script>
import { FormButtonModel,FormDetailModel,FormItemModel,FormDRUIPartModel,FormGroupPanelModel,FormIFrameModel,FormPageModel,FormPartModel,FormRowItemModel,FormTabPageModel,FormTabPanelModel,FormUserControlModel} from "@models/index.js";
import Schema from "async-validator";
import ComUtil from '@utils/ComUtil';
import AppService from "@service/AppService";
export default {
name: "Mainform",
props:{
formData:Object
},
watch: {
'formData': {
handler: 'onFormDataChanged',
immediate: true,
deep: true
}
},
data() {
return {
/**
* 当前语言
*
*/
local:"",
/**
* 激活分组
*
*/
activeGroup:["group1","group2",],
/**
* 激活分组
*
*/
data:{
srfupdatedate: null,
srforikey: null,
srfkey: null,
srfmajortext: null,
srftempmode: null,
srfuf: null,
srfdeid: null,
srfsourcekey: null,
entityname: null,
createman: null,
createdate: null,
updateman: null,
updatedate: null,
entityid: null,
},
/**
* 表单模型
*
*/
detailsModel:{
entityname: new FormItemModel({ caption: '实体名称', detailType: 'FORMITEM', name: 'entityname', visible: true, isShowCaption: true, form: this, disabled: false,validateStatus:"",error:"",required:false,enableCond: 3 })
,
group1: new FormGroupPanelModel({ caption: '实体基本信息', detailType: 'GROUPPANEL', name: 'group1', visible: true, isShowCaption: true, form: this, uiActionGroup: { caption: '', langbase: '', extractMode: 'ITEM', details: [] } })
,
formpage1: new FormPageModel({ caption: '基本信息', detailType: 'FORMPAGE', name: 'formpage1', visible: true, isShowCaption: true, form: this })
,
createman: new FormItemModel({ caption: '建立人', detailType: 'FORMITEM', name: 'createman', visible: true, isShowCaption: true, form: this, disabled: false,validateStatus:"",error:"",required:false,enableCond: 3 })
,
createdate: new FormItemModel({ caption: '建立时间', detailType: 'FORMITEM', name: 'createdate', visible: true, isShowCaption: true, form: this, disabled: false,validateStatus:"",error:"",required:false,enableCond: 3 })
,
updateman: new FormItemModel({ caption: '更新人', detailType: 'FORMITEM', name: 'updateman', visible: true, isShowCaption: true, form: this, disabled: false,validateStatus:"",error:"",required:false,enableCond: 3 })
,
updatedate: new FormItemModel({ caption: '更新时间', detailType: 'FORMITEM', name: 'updatedate', visible: true, isShowCaption: true, form: this, disabled: false,validateStatus:"",error:"",required:false,enableCond: 3 })
,
group2: new FormGroupPanelModel({ caption: '操作信息', detailType: 'GROUPPANEL', name: 'group2', visible: true, isShowCaption: true, form: this, uiActionGroup: { caption: '', langbase: '', extractMode: 'ITEM', details: [] } })
,
formpage2: new FormPageModel({ caption: '其它', detailType: 'FORMPAGE', name: 'formpage2', visible: true, isShowCaption: true, form: this })
,
form: new FormTabPanelModel({ caption: 'form', detailType: 'TABPANEL', name: 'form', visible: true, isShowCaption: true, form: this, tabPages: [{ name: 'formpage1', index: 0, visible: true }, { name: 'formpage2', index: 1, visible: true }] }),
},
/**
* 代码表模型
*
*/
codelistModel:{
},
/**
* 表单值规则
*
*/
formRules:{
},
/**
* 默认值规则
*
*/
rules:{
entityname: [
{ type: 'string', message: '实体名称 值必须为字符串类型', trigger: 'change' },
{ required: false, type: 'string', message: '实体名称 值不能为空', trigger: 'change' },
{ required: false, type: 'string', message: '实体名称 值不能为空', trigger: 'blur' },
],
createman: [
{ type: 'string', message: '建立人 值必须为字符串类型', trigger: 'change' },
{ required: false, type: 'string', message: '建立人 值不能为空', trigger: 'change' },
{ required: false, type: 'string', message: '建立人 值不能为空', trigger: 'blur' },
],
createdate: [
{ type: 'string', message: '建立时间 值必须为字符串类型', trigger: 'change' },
{ required: false, type: 'string', message: '建立时间 值不能为空', trigger: 'change' },
{ required: false, type: 'string', message: '建立时间 值不能为空', trigger: 'blur' },
],
updateman: [
{ type: 'string', message: '更新人 值必须为字符串类型', trigger: 'change' },
{ required: false, type: 'string', message: '更新人 值不能为空', trigger: 'change' },
{ required: false, type: 'string', message: '更新人 值不能为空', trigger: 'blur' },
],
updatedate: [
{ type: 'string', message: '更新时间 值必须为字符串类型', trigger: 'change' },
{ required: false, type: 'string', message: '更新时间 值不能为空', trigger: 'change' },
{ required: false, type: 'string', message: '更新时间 值不能为空', trigger: 'blur' },
],
}
};
},
created(){
this.initForm();
this.initlangu();
},
methods: {
/**
* 初始化表单
*
*/
initForm(){
if(Object.keys(this.data).length >0){
Object.keys(this.data).forEach((item) =>{
this.formItemChange(item,this.data[item],true);
})
}
},
/**
* 初始化语言
*
*/
initlangu(){
if (Object.is(window.localStorage.getItem("curLang"), "zh")) {
this.local ="zh_CN";
} else {
this.local ="en_GB";
}
AppService.getInstance().subject.subscribe(res => {
if (Object.is(res, "zh")) {
this.local ="zh_CN";
} else {
this.local ="en_GB";
}
});
},
/**
* 分页选中
*
*/
formPageSelected(key){
console.log("表单选中了"+key);
},
/**
* 按钮点击事件
*
*/
button_click($event,caption){
this.$message.success("点击了"+caption);
},
/**
* 表单项值变化
*
*/
formItemChange(name,value,isFirst){
this.formLogic(name,value);
if(!isFirst){
this.validateItem(name, value);
this.$emit('formItemChange',{name:name,value:value});
}
},
/**
* 校验单个表单项
* @param item
* @param value
*/
validateItem(item, value) {
// 做校验
// 1.获取数值和规则
const rule = this.rules[item];
// 2.创建校验规则
const schema = new Schema({ [item]: rule })
// 校验返回Promise
return schema.validate({ [item]: value },undefined,errors => {
if (errors) {
// 有错
this.detailsModel[item].setError(errors[0].message);
} else {
this.detailsModel[item].setError('');
}
})
},
/**
* 校验表单
*
* @memberof Main
*/
validateForm(callback) {
let tasks;
if (Object.keys(this.data).length > 0) {
tasks = Object.keys(this.data).map((item) => {
this.validateItem(item, this.data[item]);
})
}
Promise.all(tasks)
.then(() => callback(true))
.catch(() => callback(false))
},
/**
* 表单逻辑
*
*/
formLogic( name, newVal, oldVal) {
},
onFormDataChanged(val,oldVal){
if(val && val !== oldVal){
Object.keys(this.data).forEach(item =>{
this.data[item] = null;
})
Object.assign(this.data,val);
}
}
}
}
</script>
<style scoped>
</style>
app_Default/src/forms/entity2/main/main.vue 0 → 100644
浏览文件 @ fbb646e0
<template>
<div class="app-form">
<a-form class="" style="">
<a-row>
<a-tabs defaultActiveKey="formpage1" @change="formPageSelected">
<a-tab-pane key="formpage1" class="app-form-page app-form-page-formpage1 " style="">
<span slot="tab">
基本信息
</span>
<a-col v-show="this.detailsModel.group1.visible" style="" :lg="{ span: 24, offset: 0}">
<div class="app-form-group app-form-group-group1" style="">
<a-collapse v-model="activeGroup">
<a-collapse-panel key="group1">
<template slot="header">
实体2基本信息
</template>
<div class="app-form-group-content" style="">
<a-row>
<a-col v-show="this.detailsModel.entity2name.visible" style="" :lg="{ span: 24, offset: 0}">
<app-form-item :helpInfo="this.detailsModel.entity2name.error" :required="this.detailsModel.entity2name.required" :validateStatus="this.detailsModel.entity2name.validateStatus" :labelName="'实体2名称'" :labelwidth="'130px'" :labelPosition="'LEFT'" :isShowCaption="true" :formItemStyle="{}" :isEmptyCaption="false" :formItemContentStyle="{}" class="app-form-item-entity2name ">
<a-input v-model="data.entity2name" :disabled="detailsModel.entity2name.disabled" style="" @change="formItemChange('entity2name',$event.target.value)"/>
</app-form-item>
</a-col>
</a-row>
</div>
</a-collapse-panel>
</a-collapse>
</div>
</a-col>
</a-tab-pane>
<a-tab-pane key="formpage2" class="app-form-page app-form-page-formpage2 " style="">
<span slot="tab">
其它
</span>
<a-col v-show="this.detailsModel.group2.visible" style="" :lg="{ span: 24, offset: 0}">
<div class="app-form-group app-form-group-group2" style="">
<a-collapse v-model="activeGroup">
<a-collapse-panel key="group2">
<template slot="header">
操作信息
</template>
<div class="app-form-group-content" style="">
<a-row>
<a-col v-show="this.detailsModel.createman.visible" style="" :lg="{ span: 24, offset: 0}">
<app-form-item :helpInfo="this.detailsModel.createman.error" :required="this.detailsModel.createman.required" :validateStatus="this.detailsModel.createman.validateStatus" :labelName="'建立人'" :labelwidth="'130px'" :labelPosition="'LEFT'" :isShowCaption="true" :formItemStyle="{}" :isEmptyCaption="false" :formItemContentStyle="{}" class="app-form-item-createman ">
<span>{{data.createman}}</span>
</app-form-item>
</a-col>
<a-col v-show="this.detailsModel.createdate.visible" style="" :lg="{ span: 24, offset: 0}">
<app-form-item :helpInfo="this.detailsModel.createdate.error" :required="this.detailsModel.createdate.required" :validateStatus="this.detailsModel.createdate.validateStatus" :labelName="'建立时间'" :labelwidth="'130px'" :labelPosition="'LEFT'" :isShowCaption="true" :formItemStyle="{}" :isEmptyCaption="false" :formItemContentStyle="{}" class="app-form-item-createdate ">
<span>{{data.createdate}}</span>
</app-form-item>
</a-col>
<a-col v-show="this.detailsModel.updateman.visible" style="" :lg="{ span: 24, offset: 0}">
<app-form-item :helpInfo="this.detailsModel.updateman.error" :required="this.detailsModel.updateman.required" :validateStatus="this.detailsModel.updateman.validateStatus" :labelName="'更新人'" :labelwidth="'130px'" :labelPosition="'LEFT'" :isShowCaption="true" :formItemStyle="{}" :isEmptyCaption="false" :formItemContentStyle="{}" class="app-form-item-updateman ">
<span>{{data.updateman}}</span>
</app-form-item>
</a-col>
<a-col v-show="this.detailsModel.updatedate.visible" style="" :lg="{ span: 24, offset: 0}">
<app-form-item :helpInfo="this.detailsModel.updatedate.error" :required="this.detailsModel.updatedate.required" :validateStatus="this.detailsModel.updatedate.validateStatus" :labelName="'更新时间'" :labelwidth="'130px'" :labelPosition="'LEFT'" :isShowCaption="true" :formItemStyle="{}" :isEmptyCaption="false" :formItemContentStyle="{}" class="app-form-item-updatedate ">
<span>{{data.updatedate}}</span>
</app-form-item>
</a-col>
</a-row>
</div>
</a-collapse-panel>
</a-collapse>
</div>
</a-col>
</a-tab-pane>
</a-tabs>
</a-row>
</a-form>
</div>
</template>
<script>
import { FormButtonModel,FormDetailModel,FormItemModel,FormDRUIPartModel,FormGroupPanelModel,FormIFrameModel,FormPageModel,FormPartModel,FormRowItemModel,FormTabPageModel,FormTabPanelModel,FormUserControlModel} from "@models/index.js";
import Schema from "async-validator";
import ComUtil from '@utils/ComUtil';
import AppService from "@service/AppService";
export default {
name: "Mainform",
props:{
formData:Object
},
watch: {
'formData': {
handler: 'onFormDataChanged',
immediate: true,
deep: true
}
},
data() {
return {
/**
* 当前语言
*
*/
local:"",
/**
* 激活分组
*
*/
activeGroup:["group1","group2",],
/**
* 激活分组
*
*/
data:{
srfupdatedate: null,
srforikey: null,
srfkey: null,
srfmajortext: null,
srftempmode: null,
srfuf: null,
srfdeid: null,
srfsourcekey: null,
entity2name: null,
createman: null,
createdate: null,
updateman: null,
updatedate: null,
entity2id: null,
},
/**
* 表单模型
*
*/
detailsModel:{
entity2name: new FormItemModel({ caption: '实体2名称', detailType: 'FORMITEM', name: 'entity2name', visible: true, isShowCaption: true, form: this, disabled: false,validateStatus:"",error:"",required:false,enableCond: 3 })
,
group1: new FormGroupPanelModel({ caption: '实体2基本信息', detailType: 'GROUPPANEL', name: 'group1', visible: true, isShowCaption: true, form: this, uiActionGroup: { caption: '', langbase: '', extractMode: 'ITEM', details: [] } })
,
formpage1: new FormPageModel({ caption: '基本信息', detailType: 'FORMPAGE', name: 'formpage1', visible: true, isShowCaption: true, form: this })
,
createman: new FormItemModel({ caption: '建立人', detailType: 'FORMITEM', name: 'createman', visible: true, isShowCaption: true, form: this, disabled: false,validateStatus:"",error:"",required:false,enableCond: 3 })
,
createdate: new FormItemModel({ caption: '建立时间', detailType: 'FORMITEM', name: 'createdate', visible: true, isShowCaption: true, form: this, disabled: false,validateStatus:"",error:"",required:false,enableCond: 3 })
,
updateman: new FormItemModel({ caption: '更新人', detailType: 'FORMITEM', name: 'updateman', visible: true, isShowCaption: true, form: this, disabled: false,validateStatus:"",error:"",required:false,enableCond: 3 })
,
updatedate: new FormItemModel({ caption: '更新时间', detailType: 'FORMITEM', name: 'updatedate', visible: true, isShowCaption: true, form: this, disabled: false,validateStatus:"",error:"",required:false,enableCond: 3 })
,
group2: new FormGroupPanelModel({ caption: '操作信息', detailType: 'GROUPPANEL', name: 'group2', visible: true, isShowCaption: true, form: this, uiActionGroup: { caption: '', langbase: '', extractMode: 'ITEM', details: [] } })
,
formpage2: new FormPageModel({ caption: '其它', detailType: 'FORMPAGE', name: 'formpage2', visible: true, isShowCaption: true, form: this })
,
form: new FormTabPanelModel({ caption: 'form', detailType: 'TABPANEL', name: 'form', visible: true, isShowCaption: true, form: this, tabPages: [{ name: 'formpage1', index: 0, visible: true }, { name: 'formpage2', index: 1, visible: true }] }),
},
/**
* 代码表模型
*
*/
codelistModel:{
},
/**
* 表单值规则
*
*/
formRules:{
},
/**
* 默认值规则
*
*/
rules:{
entity2name: [
{ type: 'string', message: '实体2名称 值必须为字符串类型', trigger: 'change' },
{ required: false, type: 'string', message: '实体2名称 值不能为空', trigger: 'change' },
{ required: false, type: 'string', message: '实体2名称 值不能为空', trigger: 'blur' },
],
createman: [
{ type: 'string', message: '建立人 值必须为字符串类型', trigger: 'change' },
{ required: false, type: 'string', message: '建立人 值不能为空', trigger: 'change' },
{ required: false, type: 'string', message: '建立人 值不能为空', trigger: 'blur' },
],
createdate: [
{ type: 'string', message: '建立时间 值必须为字符串类型', trigger: 'change' },
{ required: false, type: 'string', message: '建立时间 值不能为空', trigger: 'change' },
{ required: false, type: 'string', message: '建立时间 值不能为空', trigger: 'blur' },
],
updateman: [
{ type: 'string', message: '更新人 值必须为字符串类型', trigger: 'change' },
{ required: false, type: 'string', message: '更新人 值不能为空', trigger: 'change' },
{ required: false, type: 'string', message: '更新人 值不能为空', trigger: 'blur' },
],
updatedate: [
{ type: 'string', message: '更新时间 值必须为字符串类型', trigger: 'change' },
{ required: false, type: 'string', message: '更新时间 值不能为空', trigger: 'change' },
{ required: false, type: 'string', message: '更新时间 值不能为空', trigger: 'blur' },
],
}
};
},
created(){
this.initForm();
this.initlangu();
},
methods: {
/**
* 初始化表单
*
*/
initForm(){
if(Object.keys(this.data).length >0){
Object.keys(this.data).forEach((item) =>{
this.formItemChange(item,this.data[item],true);
})
}
},
/**
* 初始化语言
*
*/
initlangu(){
if (Object.is(window.localStorage.getItem("curLang"), "zh")) {
this.local ="zh_CN";
} else {
this.local ="en_GB";
}
AppService.getInstance().subject.subscribe(res => {
if (Object.is(res, "zh")) {
this.local ="zh_CN";
} else {
this.local ="en_GB";
}
});
},
/**
* 分页选中
*
*/
formPageSelected(key){
console.log("表单选中了"+key);
},
/**
* 按钮点击事件
*
*/
button_click($event,caption){
this.$message.success("点击了"+caption);
},
/**
* 表单项值变化
*
*/
formItemChange(name,value,isFirst){
this.formLogic(name,value);
if(!isFirst){
this.validateItem(name, value);
this.$emit('formItemChange',{name:name,value:value});
}
},
/**
* 校验单个表单项
* @param item
* @param value
*/
validateItem(item, value) {
// 做校验
// 1.获取数值和规则
const rule = this.rules[item];
// 2.创建校验规则
const schema = new Schema({ [item]: rule })
// 校验返回Promise
return schema.validate({ [item]: value },undefined,errors => {
if (errors) {
// 有错
this.detailsModel[item].setError(errors[0].message);
} else {
this.detailsModel[item].setError('');
}
})
},
/**
* 校验表单
*
* @memberof Main
*/
validateForm(callback) {
let tasks;
if (Object.keys(this.data).length > 0) {
tasks = Object.keys(this.data).map((item) => {
this.validateItem(item, this.data[item]);
})
}
Promise.all(tasks)
.then(() => callback(true))
.catch(() => callback(false))
},
/**
* 表单逻辑
*
*/
formLogic( name, newVal, oldVal) {
},
onFormDataChanged(val,oldVal){
if(val && val !== oldVal){
Object.keys(this.data).forEach(item =>{
this.data[item] = null;
})
Object.assign(this.data,val);
}
}
}
}
</script>
<style scoped>
</style>
app_Default/src/forms/entity3/main/main.vue 0 → 100644
浏览文件 @ fbb646e0
<template>
<div class="app-form">
<a-form class="" style="">
<a-row>
<a-tabs defaultActiveKey="formpage1" @change="formPageSelected">
<a-tab-pane key="formpage1" class="app-form-page app-form-page-formpage1 " style="">
<span slot="tab">
基本信息
</span>
<a-col v-show="this.detailsModel.group1.visible" style="" :lg="{ span: 24, offset: 0}">
<div class="app-form-group app-form-group-group1" style="">
<a-collapse v-model="activeGroup">
<a-collapse-panel key="group1">
<template slot="header">
实体3基本信息
</template>
<div class="app-form-group-content" style="">
<a-row>
<a-col v-show="this.detailsModel.entity3name.visible" style="" :lg="{ span: 24, offset: 0}">
<app-form-item :helpInfo="this.detailsModel.entity3name.error" :required="this.detailsModel.entity3name.required" :validateStatus="this.detailsModel.entity3name.validateStatus" :labelName="'实体3名称'" :labelwidth="'130px'" :labelPosition="'LEFT'" :isShowCaption="true" :formItemStyle="{}" :isEmptyCaption="false" :formItemContentStyle="{}" class="app-form-item-entity3name ">
<a-input v-model="data.entity3name" :disabled="detailsModel.entity3name.disabled" style="" @change="formItemChange('entity3name',$event.target.value)"/>
</app-form-item>
</a-col>
</a-row>
</div>
</a-collapse-panel>
</a-collapse>
</div>
</a-col>
</a-tab-pane>
<a-tab-pane key="formpage2" class="app-form-page app-form-page-formpage2 " style="">
<span slot="tab">
其它
</span>
<a-col v-show="this.detailsModel.group2.visible" style="" :lg="{ span: 24, offset: 0}">
<div class="app-form-group app-form-group-group2" style="">
<a-collapse v-model="activeGroup">
<a-collapse-panel key="group2">
<template slot="header">
操作信息
</template>
<div class="app-form-group-content" style="">
<a-row>
<a-col v-show="this.detailsModel.createman.visible" style="" :lg="{ span: 24, offset: 0}">
<app-form-item :helpInfo="this.detailsModel.createman.error" :required="this.detailsModel.createman.required" :validateStatus="this.detailsModel.createman.validateStatus" :labelName="'建立人'" :labelwidth="'130px'" :labelPosition="'LEFT'" :isShowCaption="true" :formItemStyle="{}" :isEmptyCaption="false" :formItemContentStyle="{}" class="app-form-item-createman ">
<span>{{data.createman}}</span>
</app-form-item>
</a-col>
<a-col v-show="this.detailsModel.createdate.visible" style="" :lg="{ span: 24, offset: 0}">
<app-form-item :helpInfo="this.detailsModel.createdate.error" :required="this.detailsModel.createdate.required" :validateStatus="this.detailsModel.createdate.validateStatus" :labelName="'建立时间'" :labelwidth="'130px'" :labelPosition="'LEFT'" :isShowCaption="true" :formItemStyle="{}" :isEmptyCaption="false" :formItemContentStyle="{}" class="app-form-item-createdate ">
<span>{{data.createdate}}</span>
</app-form-item>
</a-col>
<a-col v-show="this.detailsModel.updateman.visible" style="" :lg="{ span: 24, offset: 0}">
<app-form-item :helpInfo="this.detailsModel.updateman.error" :required="this.detailsModel.updateman.required" :validateStatus="this.detailsModel.updateman.validateStatus" :labelName="'更新人'" :labelwidth="'130px'" :labelPosition="'LEFT'" :isShowCaption="true" :formItemStyle="{}" :isEmptyCaption="false" :formItemContentStyle="{}" class="app-form-item-updateman ">
<span>{{data.updateman}}</span>
</app-form-item>
</a-col>
<a-col v-show="this.detailsModel.updatedate.visible" style="" :lg="{ span: 24, offset: 0}">
<app-form-item :helpInfo="this.detailsModel.updatedate.error" :required="this.detailsModel.updatedate.required" :validateStatus="this.detailsModel.updatedate.validateStatus" :labelName="'更新时间'" :labelwidth="'130px'" :labelPosition="'LEFT'" :isShowCaption="true" :formItemStyle="{}" :isEmptyCaption="false" :formItemContentStyle="{}" class="app-form-item-updatedate ">
<span>{{data.updatedate}}</span>
</app-form-item>
</a-col>
</a-row>
</div>
</a-collapse-panel>
</a-collapse>
</div>
</a-col>
</a-tab-pane>
</a-tabs>
</a-row>
</a-form>
</div>
</template>
<script>
import { FormButtonModel,FormDetailModel,FormItemModel,FormDRUIPartModel,FormGroupPanelModel,FormIFrameModel,FormPageModel,FormPartModel,FormRowItemModel,FormTabPageModel,FormTabPanelModel,FormUserControlModel} from "@models/index.js";
import Schema from "async-validator";
import ComUtil from '@utils/ComUtil';
import AppService from "@service/AppService";
export default {
name: "Mainform",
props:{
formData:Object
},
watch: {
'formData': {
handler: 'onFormDataChanged',
immediate: true,
deep: true
}
},
data() {
return {
/**
* 当前语言
*
*/
local:"",
/**
* 激活分组
*
*/
activeGroup:["group1","group2",],
/**
* 激活分组
*
*/
data:{
srfupdatedate: null,
srforikey: null,
srfkey: null,
srfmajortext: null,
srftempmode: null,
srfuf: null,
srfdeid: null,
srfsourcekey: null,
entity3name: null,
createman: null,
createdate: null,
updateman: null,
updatedate: null,
entity3id: null,
},
/**
* 表单模型
*
*/
detailsModel:{
entity3name: new FormItemModel({ caption: '实体3名称', detailType: 'FORMITEM', name: 'entity3name', visible: true, isShowCaption: true, form: this, disabled: false,validateStatus:"",error:"",required:false,enableCond: 3 })
,
group1: new FormGroupPanelModel({ caption: '实体3基本信息', detailType: 'GROUPPANEL', name: 'group1', visible: true, isShowCaption: true, form: this, uiActionGroup: { caption: '', langbase: '', extractMode: 'ITEM', details: [] } })
,
formpage1: new FormPageModel({ caption: '基本信息', detailType: 'FORMPAGE', name: 'formpage1', visible: true, isShowCaption: true, form: this })
,
createman: new FormItemModel({ caption: '建立人', detailType: 'FORMITEM', name: 'createman', visible: true, isShowCaption: true, form: this, disabled: false,validateStatus:"",error:"",required:false,enableCond: 3 })
,
createdate: new FormItemModel({ caption: '建立时间', detailType: 'FORMITEM', name: 'createdate', visible: true, isShowCaption: true, form: this, disabled: false,validateStatus:"",error:"",required:false,enableCond: 3 })
,
updateman: new FormItemModel({ caption: '更新人', detailType: 'FORMITEM', name: 'updateman', visible: true, isShowCaption: true, form: this, disabled: false,validateStatus:"",error:"",required:false,enableCond: 3 })
,
updatedate: new FormItemModel({ caption: '更新时间', detailType: 'FORMITEM', name: 'updatedate', visible: true, isShowCaption: true, form: this, disabled: false,validateStatus:"",error:"",required:false,enableCond: 3 })
,
group2: new FormGroupPanelModel({ caption: '操作信息', detailType: 'GROUPPANEL', name: 'group2', visible: true, isShowCaption: true, form: this, uiActionGroup: { caption: '', langbase: '', extractMode: 'ITEM', details: [] } })
,
formpage2: new FormPageModel({ caption: '其它', detailType: 'FORMPAGE', name: 'formpage2', visible: true, isShowCaption: true, form: this })
,
form: new FormTabPanelModel({ caption: 'form', detailType: 'TABPANEL', name: 'form', visible: true, isShowCaption: true, form: this, tabPages: [{ name: 'formpage1', index: 0, visible: true }, { name: 'formpage2', index: 1, visible: true }] }),
},
/**
* 代码表模型
*
*/
codelistModel:{
},
/**
* 表单值规则
*
*/
formRules:{
},
/**
* 默认值规则
*
*/
rules:{
entity3name: [
{ type: 'string', message: '实体3名称 值必须为字符串类型', trigger: 'change' },
{ required: false, type: 'string', message: '实体3名称 值不能为空', trigger: 'change' },
{ required: false, type: 'string', message: '实体3名称 值不能为空', trigger: 'blur' },
],
createman: [
{ type: 'string', message: '建立人 值必须为字符串类型', trigger: 'change' },
{ required: false, type: 'string', message: '建立人 值不能为空', trigger: 'change' },
{ required: false, type: 'string', message: '建立人 值不能为空', trigger: 'blur' },
],
createdate: [
{ type: 'string', message: '建立时间 值必须为字符串类型', trigger: 'change' },
{ required: false, type: 'string', message: '建立时间 值不能为空', trigger: 'change' },
{ required: false, type: 'string', message: '建立时间 值不能为空', trigger: 'blur' },
],
updateman: [
{ type: 'string', message: '更新人 值必须为字符串类型', trigger: 'change' },
{ required: false, type: 'string', message: '更新人 值不能为空', trigger: 'change' },
{ required: false, type: 'string', message: '更新人 值不能为空', trigger: 'blur' },
],
updatedate: [
{ type: 'string', message: '更新时间 值必须为字符串类型', trigger: 'change' },
{ required: false, type: 'string', message: '更新时间 值不能为空', trigger: 'change' },
{ required: false, type: 'string', message: '更新时间 值不能为空', trigger: 'blur' },
],
}
};
},
created(){
this.initForm();
this.initlangu();
},
methods: {
/**
* 初始化表单
*
*/
initForm(){
if(Object.keys(this.data).length >0){
Object.keys(this.data).forEach((item) =>{
this.formItemChange(item,this.data[item],true);
})
}
},
/**
* 初始化语言
*
*/
initlangu(){
if (Object.is(window.localStorage.getItem("curLang"), "zh")) {
this.local ="zh_CN";
} else {
this.local ="en_GB";
}
AppService.getInstance().subject.subscribe(res => {
if (Object.is(res, "zh")) {
this.local ="zh_CN";
} else {
this.local ="en_GB";
}
});
},
/**
* 分页选中
*
*/
formPageSelected(key){
console.log("表单选中了"+key);
},
/**
* 按钮点击事件
*
*/
button_click($event,caption){
this.$message.success("点击了"+caption);
},
/**
* 表单项值变化
*
*/
formItemChange(name,value,isFirst){
this.formLogic(name,value);
if(!isFirst){
this.validateItem(name, value);
this.$emit('formItemChange',{name:name,value:value});
}
},
/**
* 校验单个表单项
* @param item
* @param value
*/
validateItem(item, value) {
// 做校验
// 1.获取数值和规则
const rule = this.rules[item];
// 2.创建校验规则
const schema = new Schema({ [item]: rule })
// 校验返回Promise
return schema.validate({ [item]: value },undefined,errors => {
if (errors) {
// 有错
this.detailsModel[item].setError(errors[0].message);
} else {
this.detailsModel[item].setError('');
}
})
},
/**
* 校验表单
*
* @memberof Main
*/
validateForm(callback) {
let tasks;
if (Object.keys(this.data).length > 0) {
tasks = Object.keys(this.data).map((item) => {
this.validateItem(item, this.data[item]);
})
}
Promise.all(tasks)
.then(() => callback(true))
.catch(() => callback(false))
},
/**
* 表单逻辑
*
*/
formLogic( name, newVal, oldVal) {
},
onFormDataChanged(val,oldVal){
if(val && val !== oldVal){
Object.keys(this.data).forEach(item =>{
this.data[item] = null;
})
Object.assign(this.data,val);
}
}
}
}
</script>
<style scoped>
</style>
app_Default/src/forms/entity4/main/main.vue 0 → 100644
浏览文件 @ fbb646e0
<template>
<div class="app-form">
<a-form class="" style="">
<a-row>
<a-tabs defaultActiveKey="formpage1" @change="formPageSelected">
<a-tab-pane key="formpage1" class="app-form-page app-form-page-formpage1 " style="">
<span slot="tab">
基本信息
</span>
<a-col v-show="this.detailsModel.group1.visible" style="" :lg="{ span: 24, offset: 0}">
<div class="app-form-group app-form-group-group1" style="">
<a-collapse v-model="activeGroup">
<a-collapse-panel key="group1">
<template slot="header">
实体4基本信息
</template>
<div class="app-form-group-content" style="">
<a-row>
<a-col v-show="this.detailsModel.entity4name.visible" style="" :lg="{ span: 24, offset: 0}">
<app-form-item :helpInfo="this.detailsModel.entity4name.error" :required="this.detailsModel.entity4name.required" :validateStatus="this.detailsModel.entity4name.validateStatus" :labelName="'实体4名称'" :labelwidth="'130px'" :labelPosition="'LEFT'" :isShowCaption="true" :formItemStyle="{}" :isEmptyCaption="false" :formItemContentStyle="{}" class="app-form-item-entity4name ">
<a-input v-model="data.entity4name" :disabled="detailsModel.entity4name.disabled" style="" @change="formItemChange('entity4name',$event.target.value)"/>
</app-form-item>
</a-col>
</a-row>
</div>
</a-collapse-panel>
</a-collapse>
</div>
</a-col>
</a-tab-pane>
<a-tab-pane key="formpage2" class="app-form-page app-form-page-formpage2 " style="">
<span slot="tab">
其它
</span>
<a-col v-show="this.detailsModel.group2.visible" style="" :lg="{ span: 24, offset: 0}">
<div class="app-form-group app-form-group-group2" style="">
<a-collapse v-model="activeGroup">
<a-collapse-panel key="group2">
<template slot="header">
操作信息
</template>
<div class="app-form-group-content" style="">
<a-row>
<a-col v-show="this.detailsModel.createman.visible" style="" :lg="{ span: 24, offset: 0}">
<app-form-item :helpInfo="this.detailsModel.createman.error" :required="this.detailsModel.createman.required" :validateStatus="this.detailsModel.createman.validateStatus" :labelName="'建立人'" :labelwidth="'130px'" :labelPosition="'LEFT'" :isShowCaption="true" :formItemStyle="{}" :isEmptyCaption="false" :formItemContentStyle="{}" class="app-form-item-createman ">
<span>{{data.createman}}</span>
</app-form-item>
</a-col>
<a-col v-show="this.detailsModel.createdate.visible" style="" :lg="{ span: 24, offset: 0}">
<app-form-item :helpInfo="this.detailsModel.createdate.error" :required="this.detailsModel.createdate.required" :validateStatus="this.detailsModel.createdate.validateStatus" :labelName="'建立时间'" :labelwidth="'130px'" :labelPosition="'LEFT'" :isShowCaption="true" :formItemStyle="{}" :isEmptyCaption="false" :formItemContentStyle="{}" class="app-form-item-createdate ">
<span>{{data.createdate}}</span>
</app-form-item>
</a-col>
<a-col v-show="this.detailsModel.updateman.visible" style="" :lg="{ span: 24, offset: 0}">
<app-form-item :helpInfo="this.detailsModel.updateman.error" :required="this.detailsModel.updateman.required" :validateStatus="this.detailsModel.updateman.validateStatus" :labelName="'更新人'" :labelwidth="'130px'" :labelPosition="'LEFT'" :isShowCaption="true" :formItemStyle="{}" :isEmptyCaption="false" :formItemContentStyle="{}" class="app-form-item-updateman ">
<span>{{data.updateman}}</span>
</app-form-item>
</a-col>
<a-col v-show="this.detailsModel.updatedate.visible" style="" :lg="{ span: 24, offset: 0}">
<app-form-item :helpInfo="this.detailsModel.updatedate.error" :required="this.detailsModel.updatedate.required" :validateStatus="this.detailsModel.updatedate.validateStatus" :labelName="'更新时间'" :labelwidth="'130px'" :labelPosition="'LEFT'" :isShowCaption="true" :formItemStyle="{}" :isEmptyCaption="false" :formItemContentStyle="{}" class="app-form-item-updatedate ">
<span>{{data.updatedate}}</span>
</app-form-item>
</a-col>
</a-row>
</div>
</a-collapse-panel>
</a-collapse>
</div>
</a-col>
</a-tab-pane>
</a-tabs>
</a-row>
</a-form>
</div>
</template>
<script>
import { FormButtonModel,FormDetailModel,FormItemModel,FormDRUIPartModel,FormGroupPanelModel,FormIFrameModel,FormPageModel,FormPartModel,FormRowItemModel,FormTabPageModel,FormTabPanelModel,FormUserControlModel} from "@models/index.js";
import Schema from "async-validator";
import ComUtil from '@utils/ComUtil';
import AppService from "@service/AppService";
export default {
name: "Mainform",
props:{
formData:Object
},
watch: {
'formData': {
handler: 'onFormDataChanged',
immediate: true,
deep: true
}
},
data() {
return {
/**
* 当前语言
*
*/
local:"",
/**
* 激活分组
*
*/
activeGroup:["group1","group2",],
/**
* 激活分组
*
*/
data:{
srfupdatedate: null,
srforikey: null,
srfkey: null,
srfmajortext: null,
srftempmode: null,
srfuf: null,
srfdeid: null,
srfsourcekey: null,
entity4name: null,
createman: null,
createdate: null,
updateman: null,
updatedate: null,
entity4id: null,
},
/**
* 表单模型
*
*/
detailsModel:{
entity4name: new FormItemModel({ caption: '实体4名称', detailType: 'FORMITEM', name: 'entity4name', visible: true, isShowCaption: true, form: this, disabled: false,validateStatus:"",error:"",required:false,enableCond: 3 })
,
group1: new FormGroupPanelModel({ caption: '实体4基本信息', detailType: 'GROUPPANEL', name: 'group1', visible: true, isShowCaption: true, form: this, uiActionGroup: { caption: '', langbase: '', extractMode: 'ITEM', details: [] } })
,
formpage1: new FormPageModel({ caption: '基本信息', detailType: 'FORMPAGE', name: 'formpage1', visible: true, isShowCaption: true, form: this })
,
createman: new FormItemModel({ caption: '建立人', detailType: 'FORMITEM', name: 'createman', visible: true, isShowCaption: true, form: this, disabled: false,validateStatus:"",error:"",required:false,enableCond: 3 })
,
createdate: new FormItemModel({ caption: '建立时间', detailType: 'FORMITEM', name: 'createdate', visible: true, isShowCaption: true, form: this, disabled: false,validateStatus:"",error:"",required:false,enableCond: 3 })
,
updateman: new FormItemModel({ caption: '更新人', detailType: 'FORMITEM', name: 'updateman', visible: true, isShowCaption: true, form: this, disabled: false,validateStatus:"",error:"",required:false,enableCond: 3 })
,
updatedate: new FormItemModel({ caption: '更新时间', detailType: 'FORMITEM', name: 'updatedate', visible: true, isShowCaption: true, form: this, disabled: false,validateStatus:"",error:"",required:false,enableCond: 3 })
,
group2: new FormGroupPanelModel({ caption: '操作信息', detailType: 'GROUPPANEL', name: 'group2', visible: true, isShowCaption: true, form: this, uiActionGroup: { caption: '', langbase: '', extractMode: 'ITEM', details: [] } })
,
formpage2: new FormPageModel({ caption: '其它', detailType: 'FORMPAGE', name: 'formpage2', visible: true, isShowCaption: true, form: this })
,
form: new FormTabPanelModel({ caption: 'form', detailType: 'TABPANEL', name: 'form', visible: true, isShowCaption: true, form: this, tabPages: [{ name: 'formpage1', index: 0, visible: true }, { name: 'formpage2', index: 1, visible: true }] }),
},
/**
* 代码表模型
*
*/
codelistModel:{
},
/**
* 表单值规则
*
*/
formRules:{
},
/**
* 默认值规则
*
*/
rules:{
entity4name: [
{ type: 'string', message: '实体4名称 值必须为字符串类型', trigger: 'change' },
{ required: false, type: 'string', message: '实体4名称 值不能为空', trigger: 'change' },
{ required: false, type: 'string', message: '实体4名称 值不能为空', trigger: 'blur' },
],
createman: [
{ type: 'string', message: '建立人 值必须为字符串类型', trigger: 'change' },
{ required: false, type: 'string', message: '建立人 值不能为空', trigger: 'change' },
{ required: false, type: 'string', message: '建立人 值不能为空', trigger: 'blur' },
],
createdate: [
{ type: 'string', message: '建立时间 值必须为字符串类型', trigger: 'change' },
{ required: false, type: 'string', message: '建立时间 值不能为空', trigger: 'change' },
{ required: false, type: 'string', message: '建立时间 值不能为空', trigger: 'blur' },
],
updateman: [
{ type: 'string', message: '更新人 值必须为字符串类型', trigger: 'change' },
{ required: false, type: 'string', message: '更新人 值不能为空', trigger: 'change' },
{ required: false, type: 'string', message: '更新人 值不能为空', trigger: 'blur' },
],
updatedate: [
{ type: 'string', message: '更新时间 值必须为字符串类型', trigger: 'change' },
{ required: false, type: 'string', message: '更新时间 值不能为空', trigger: 'change' },
{ required: false, type: 'string', message: '更新时间 值不能为空', trigger: 'blur' },
],
}
};
},
created(){
this.initForm();
this.initlangu();
},
methods: {
/**
* 初始化表单
*
*/
initForm(){
if(Object.keys(this.data).length >0){
Object.keys(this.data).forEach((item) =>{
this.formItemChange(item,this.data[item],true);
})
}
},
/**
* 初始化语言
*
*/
initlangu(){
if (Object.is(window.localStorage.getItem("curLang"), "zh")) {
this.local ="zh_CN";
} else {
this.local ="en_GB";
}
AppService.getInstance().subject.subscribe(res => {
if (Object.is(res, "zh")) {
this.local ="zh_CN";
} else {
this.local ="en_GB";
}
});
},
/**
* 分页选中
*
*/
formPageSelected(key){
console.log("表单选中了"+key);
},
/**
* 按钮点击事件
*
*/
button_click($event,caption){
this.$message.success("点击了"+caption);
},
/**
* 表单项值变化
*
*/
formItemChange(name,value,isFirst){
this.formLogic(name,value);
if(!isFirst){
this.validateItem(name, value);
this.$emit('formItemChange',{name:name,value:value});
}
},
/**
* 校验单个表单项
* @param item
* @param value
*/
validateItem(item, value) {
// 做校验
// 1.获取数值和规则
const rule = this.rules[item];
// 2.创建校验规则
const schema = new Schema({ [item]: rule })
// 校验返回Promise
return schema.validate({ [item]: value },undefined,errors => {
if (errors) {
// 有错
this.detailsModel[item].setError(errors[0].message);
} else {
this.detailsModel[item].setError('');
}
})
},
/**
* 校验表单
*
* @memberof Main
*/
validateForm(callback) {
let tasks;
if (Object.keys(this.data).length > 0) {
tasks = Object.keys(this.data).map((item) => {
this.validateItem(item, this.data[item]);
})
}
Promise.all(tasks)
.then(() => callback(true))
.catch(() => callback(false))
},
/**
* 表单逻辑
*
*/
formLogic( name, newVal, oldVal) {
},
onFormDataChanged(val,oldVal){
if(val && val !== oldVal){
Object.keys(this.data).forEach(item =>{
this.data[item] = null;
})
Object.assign(this.data,val);
}
}
}
}
</script>
<style scoped>
</style>
app_Default/src/forms/entity5/main/main.vue 0 → 100644
浏览文件 @ fbb646e0
<template>
<div class="app-form">
<a-form class="" style="">
<a-row>
<a-tabs defaultActiveKey="formpage1" @change="formPageSelected">
<a-tab-pane key="formpage1" class="app-form-page app-form-page-formpage1 " style="">
<span slot="tab">
基本信息
</span>
<a-col v-show="this.detailsModel.group1.visible" style="" :lg="{ span: 24, offset: 0}">
<div class="app-form-group app-form-group-group1" style="">
<a-collapse v-model="activeGroup">
<a-collapse-panel key="group1">
<template slot="header">
实体5基本信息
</template>
<div class="app-form-group-content" style="">
<a-row>
<a-col v-show="this.detailsModel.entity5name.visible" style="" :lg="{ span: 24, offset: 0}">
<app-form-item :helpInfo="this.detailsModel.entity5name.error" :required="this.detailsModel.entity5name.required" :validateStatus="this.detailsModel.entity5name.validateStatus" :labelName="'实体5名称'" :labelwidth="'130px'" :labelPosition="'LEFT'" :isShowCaption="true" :formItemStyle="{}" :isEmptyCaption="false" :formItemContentStyle="{}" class="app-form-item-entity5name ">
<a-input v-model="data.entity5name" :disabled="detailsModel.entity5name.disabled" style="" @change="formItemChange('entity5name',$event.target.value)"/>
</app-form-item>
</a-col>
</a-row>
</div>
</a-collapse-panel>
</a-collapse>
</div>
</a-col>
</a-tab-pane>
<a-tab-pane key="formpage2" class="app-form-page app-form-page-formpage2 " style="">
<span slot="tab">
其它
</span>
<a-col v-show="this.detailsModel.group2.visible" style="" :lg="{ span: 24, offset: 0}">
<div class="app-form-group app-form-group-group2" style="">
<a-collapse v-model="activeGroup">
<a-collapse-panel key="group2">
<template slot="header">
操作信息
</template>
<div class="app-form-group-content" style="">
<a-row>
<a-col v-show="this.detailsModel.createman.visible" style="" :lg="{ span: 24, offset: 0}">
<app-form-item :helpInfo="this.detailsModel.createman.error" :required="this.detailsModel.createman.required" :validateStatus="this.detailsModel.createman.validateStatus" :labelName="'建立人'" :labelwidth="'130px'" :labelPosition="'LEFT'" :isShowCaption="true" :formItemStyle="{}" :isEmptyCaption="false" :formItemContentStyle="{}" class="app-form-item-createman ">
<span>{{data.createman}}</span>
</app-form-item>
</a-col>
<a-col v-show="this.detailsModel.createdate.visible" style="" :lg="{ span: 24, offset: 0}">
<app-form-item :helpInfo="this.detailsModel.createdate.error" :required="this.detailsModel.createdate.required" :validateStatus="this.detailsModel.createdate.validateStatus" :labelName="'建立时间'" :labelwidth="'130px'" :labelPosition="'LEFT'" :isShowCaption="true" :formItemStyle="{}" :isEmptyCaption="false" :formItemContentStyle="{}" class="app-form-item-createdate ">
<span>{{data.createdate}}</span>
</app-form-item>
</a-col>
<a-col v-show="this.detailsModel.updateman.visible" style="" :lg="{ span: 24, offset: 0}">
<app-form-item :helpInfo="this.detailsModel.updateman.error" :required="this.detailsModel.updateman.required" :validateStatus="this.detailsModel.updateman.validateStatus" :labelName="'更新人'" :labelwidth="'130px'" :labelPosition="'LEFT'" :isShowCaption="true" :formItemStyle="{}" :isEmptyCaption="false" :formItemContentStyle="{}" class="app-form-item-updateman ">
<span>{{data.updateman}}</span>
</app-form-item>
</a-col>
<a-col v-show="this.detailsModel.updatedate.visible" style="" :lg="{ span: 24, offset: 0}">
<app-form-item :helpInfo="this.detailsModel.updatedate.error" :required="this.detailsModel.updatedate.required" :validateStatus="this.detailsModel.updatedate.validateStatus" :labelName="'更新时间'" :labelwidth="'130px'" :labelPosition="'LEFT'" :isShowCaption="true" :formItemStyle="{}" :isEmptyCaption="false" :formItemContentStyle="{}" class="app-form-item-updatedate ">
<span>{{data.updatedate}}</span>
</app-form-item>
</a-col>
</a-row>
</div>
</a-collapse-panel>
</a-collapse>
</div>
</a-col>
</a-tab-pane>
</a-tabs>
</a-row>
</a-form>
</div>
</template>
<script>
import { FormButtonModel,FormDetailModel,FormItemModel,FormDRUIPartModel,FormGroupPanelModel,FormIFrameModel,FormPageModel,FormPartModel,FormRowItemModel,FormTabPageModel,FormTabPanelModel,FormUserControlModel} from "@models/index.js";
import Schema from "async-validator";
import ComUtil from '@utils/ComUtil';
import AppService from "@service/AppService";
export default {
name: "Mainform",
props:{
formData:Object
},
watch: {
'formData': {
handler: 'onFormDataChanged',
immediate: true,
deep: true
}
},
data() {
return {
/**
* 当前语言
*
*/
local:"",
/**
* 激活分组
*
*/
activeGroup:["group1","group2",],
/**
* 激活分组
*
*/
data:{
srfupdatedate: null,
srforikey: null,
srfkey: null,
srfmajortext: null,
srftempmode: null,
srfuf: null,
srfdeid: null,
srfsourcekey: null,
entity5name: null,
createman: null,
createdate: null,
updateman: null,
updatedate: null,
entity5id: null,
},
/**
* 表单模型
*
*/
detailsModel:{
entity5name: new FormItemModel({ caption: '实体5名称', detailType: 'FORMITEM', name: 'entity5name', visible: true, isShowCaption: true, form: this, disabled: false,validateStatus:"",error:"",required:false,enableCond: 3 })
,
group1: new FormGroupPanelModel({ caption: '实体5基本信息', detailType: 'GROUPPANEL', name: 'group1', visible: true, isShowCaption: true, form: this, uiActionGroup: { caption: '', langbase: '', extractMode: 'ITEM', details: [] } })
,
formpage1: new FormPageModel({ caption: '基本信息', detailType: 'FORMPAGE', name: 'formpage1', visible: true, isShowCaption: true, form: this })
,
createman: new FormItemModel({ caption: '建立人', detailType: 'FORMITEM', name: 'createman', visible: true, isShowCaption: true, form: this, disabled: false,validateStatus:"",error:"",required:false,enableCond: 3 })
,
createdate: new FormItemModel({ caption: '建立时间', detailType: 'FORMITEM', name: 'createdate', visible: true, isShowCaption: true, form: this, disabled: false,validateStatus:"",error:"",required:false,enableCond: 3 })
,
updateman: new FormItemModel({ caption: '更新人', detailType: 'FORMITEM', name: 'updateman', visible: true, isShowCaption: true, form: this, disabled: false,validateStatus:"",error:"",required:false,enableCond: 3 })
,
updatedate: new FormItemModel({ caption: '更新时间', detailType: 'FORMITEM', name: 'updatedate', visible: true, isShowCaption: true, form: this, disabled: false,validateStatus:"",error:"",required:false,enableCond: 3 })
,
group2: new FormGroupPanelModel({ caption: '操作信息', detailType: 'GROUPPANEL', name: 'group2', visible: true, isShowCaption: true, form: this, uiActionGroup: { caption: '', langbase: '', extractMode: 'ITEM', details: [] } })
,
formpage2: new FormPageModel({ caption: '其它', detailType: 'FORMPAGE', name: 'formpage2', visible: true, isShowCaption: true, form: this })
,
form: new FormTabPanelModel({ caption: 'form', detailType: 'TABPANEL', name: 'form', visible: true, isShowCaption: true, form: this, tabPages: [{ name: 'formpage1', index: 0, visible: true }, { name: 'formpage2', index: 1, visible: true }] }),
},
/**
* 代码表模型
*
*/
codelistModel:{
},
/**
* 表单值规则
*
*/
formRules:{
},
/**
* 默认值规则
*
*/
rules:{
entity5name: [
{ type: 'string', message: '实体5名称 值必须为字符串类型', trigger: 'change' },
{ required: false, type: 'string', message: '实体5名称 值不能为空', trigger: 'change' },
{ required: false, type: 'string', message: '实体5名称 值不能为空', trigger: 'blur' },
],
createman: [
{ type: 'string', message: '建立人 值必须为字符串类型', trigger: 'change' },
{ required: false, type: 'string', message: '建立人 值不能为空', trigger: 'change' },
{ required: false, type: 'string', message: '建立人 值不能为空', trigger: 'blur' },
],
createdate: [
{ type: 'string', message: '建立时间 值必须为字符串类型', trigger: 'change' },
{ required: false, type: 'string', message: '建立时间 值不能为空', trigger: 'change' },
{ required: false, type: 'string', message: '建立时间 值不能为空', trigger: 'blur' },
],
updateman: [
{ type: 'string', message: '更新人 值必须为字符串类型', trigger: 'change' },
{ required: false, type: 'string', message: '更新人 值不能为空', trigger: 'change' },
{ required: false, type: 'string', message: '更新人 值不能为空', trigger: 'blur' },
],
updatedate: [
{ type: 'string', message: '更新时间 值必须为字符串类型', trigger: 'change' },
{ required: false, type: 'string', message: '更新时间 值不能为空', trigger: 'change' },
{ required: false, type: 'string', message: '更新时间 值不能为空', trigger: 'blur' },
],
}
};
},
created(){
this.initForm();
this.initlangu();
},
methods: {
/**
* 初始化表单
*
*/
initForm(){
if(Object.keys(this.data).length >0){
Object.keys(this.data).forEach((item) =>{
this.formItemChange(item,this.data[item],true);
})
}
},
/**
* 初始化语言
*
*/
initlangu(){
if (Object.is(window.localStorage.getItem("curLang"), "zh")) {
this.local ="zh_CN";
} else {
this.local ="en_GB";
}
AppService.getInstance().subject.subscribe(res => {
if (Object.is(res, "zh")) {
this.local ="zh_CN";
} else {
this.local ="en_GB";
}
});
},
/**
* 分页选中
*
*/
formPageSelected(key){
console.log("表单选中了"+key);
},
/**
* 按钮点击事件
*
*/
button_click($event,caption){
this.$message.success("点击了"+caption);
},
/**
* 表单项值变化
*
*/
formItemChange(name,value,isFirst){
this.formLogic(name,value);
if(!isFirst){
this.validateItem(name, value);
this.$emit('formItemChange',{name:name,value:value});
}
},
/**
* 校验单个表单项
* @param item
* @param value
*/
validateItem(item, value) {
// 做校验
// 1.获取数值和规则
const rule = this.rules[item];
// 2.创建校验规则
const schema = new Schema({ [item]: rule })
// 校验返回Promise
return schema.validate({ [item]: value },undefined,errors => {
if (errors) {
// 有错
this.detailsModel[item].setError(errors[0].message);
} else {
this.detailsModel[item].setError('');
}
})
},
/**
* 校验表单
*
* @memberof Main
*/
validateForm(callback) {
let tasks;
if (Object.keys(this.data).length > 0) {
tasks = Object.keys(this.data).map((item) => {
this.validateItem(item, this.data[item]);
})
}
Promise.all(tasks)
.then(() => callback(true))
.catch(() => callback(false))
},
/**
* 表单逻辑
*
*/
formLogic( name, newVal, oldVal) {
},
onFormDataChanged(val,oldVal){
if(val && val !== oldVal){
Object.keys(this.data).forEach(item =>{
this.data[item] = null;
})
Object.assign(this.data,val);
}
}
}
}
</script>
<style scoped>
</style>
app_Default/src/forms/example/main3/main3.vue 0 → 100644
浏览文件 @ fbb646e0
<template>
<div class="app-form">
<a-form class="" style="">
<a-row>
<a-tabs @change="formPageSelected">
</a-tabs>
</a-row>
</a-form>
</div>
</template>
<script>
import { FormButtonModel,FormDetailModel,FormItemModel,FormDRUIPartModel,FormGroupPanelModel,FormIFrameModel,FormPageModel,FormPartModel,FormRowItemModel,FormTabPageModel,FormTabPanelModel,FormUserControlModel} from "@models/index.js";
import Schema from "async-validator";
import ComUtil from '@utils/ComUtil';
import AppService from "@service/AppService";
export default {
name: "Main3form",
props:{
formData:Object
},
watch: {
'formData': {
handler: 'onFormDataChanged',
immediate: true,
deep: true
}
},
data() {
return {
/**
* 当前语言
*
*/
local:"",
/**
* 激活分组
*
*/
activeGroup:[],
/**
* 激活分组
*
*/
data:{
srfupdatedate: null,
srforikey: null,
srfkey: null,
srfmajortext: null,
srftempmode: null,
srfuf: null,
srfdeid: null,
srfsourcekey: null,
exampleid: null,
},
/**
* 表单模型
*
*/
detailsModel:{
form: new FormTabPanelModel({ caption: 'form', detailType: 'TABPANEL', name: 'form', visible: true, isShowCaption: true, form: this, tabPages: [] }),
},
/**
* 代码表模型
*
*/
codelistModel:{
},
/**
* 表单值规则
*
*/
formRules:{
},
/**
* 默认值规则
*
*/
rules:{
}
};
},
created(){
this.initForm();
this.initlangu();
},
methods: {
/**
* 初始化表单
*
*/
initForm(){
if(Object.keys(this.data).length >0){
Object.keys(this.data).forEach((item) =>{
this.formItemChange(item,this.data[item],true);
})
}
},
/**
* 初始化语言
*
*/
initlangu(){
if (Object.is(window.localStorage.getItem("curLang"), "zh")) {
this.local ="zh_CN";
} else {
this.local ="en_GB";
}
AppService.getInstance().subject.subscribe(res => {
if (Object.is(res, "zh")) {
this.local ="zh_CN";
} else {
this.local ="en_GB";
}
});
},
/**
* 分页选中
*
*/
formPageSelected(key){
console.log("表单选中了"+key);
},
/**
* 按钮点击事件
*
*/
button_click($event,caption){
this.$message.success("点击了"+caption);
},
/**
* 表单项值变化
*
*/
formItemChange(name,value,isFirst){
this.formLogic(name,value);
if(!isFirst){
this.validateItem(name, value);
this.$emit('formItemChange',{name:name,value:value});
}
},
/**
* 校验单个表单项
* @param item
* @param value
*/
validateItem(item, value) {
// 做校验
// 1.获取数值和规则
const rule = this.rules[item];
// 2.创建校验规则
const schema = new Schema({ [item]: rule })
// 校验返回Promise
return schema.validate({ [item]: value },undefined,errors => {
if (errors) {
// 有错
this.detailsModel[item].setError(errors[0].message);
} else {
this.detailsModel[item].setError('');
}
})
},
/**
* 校验表单
*
* @memberof Main
*/
validateForm(callback) {
let tasks;
if (Object.keys(this.data).length > 0) {
tasks = Object.keys(this.data).map((item) => {
this.validateItem(item, this.data[item]);
})
}
Promise.all(tasks)
.then(() => callback(true))
.catch(() => callback(false))
},
/**
* 表单逻辑
*
*/
formLogic( name, newVal, oldVal) {
},
onFormDataChanged(val,oldVal){
if(val && val !== oldVal){
Object.keys(this.data).forEach(item =>{
this.data[item] = null;
})
Object.assign(this.data,val);
}
}
}
}
</script>
<style scoped>
</style>
app_Default/src/pages/exapmple/example-main3-edit-view/example-main3-edit-view.vue 0 → 100644
浏览文件 @ fbb646e0
<template>
<div>
<Main3form :formData="formData" @formItemChange="formItemChange"></Main3form></div>
</template>
<script>
import Main3form from '@forms/example/main3/main3.vue';
export default {
name: "ExampleMain3EditView",
components: {
Main3form
},
data(){
return {
formData:{
"bookname":"test1",
"input":"文本test",
"label":"标签test",
"group1":"书籍基本信息test",
"formpage1":"基本信息test",
"createman":"建立人test",
"createdate":"建立时间test",
"updateman":"更新人test",
"updatedate":"更新时间test",
"group2":"操作信息test",
"formpage2":"其它test"
}
}
},
methods:{
formItemChange(value){
console.log(value);
}
}
}
</script>
<style scoped>
</style>
app_Default/src/pages/module/entity-edit-view/entity-edit-view.vue 0 → 100644
浏览文件 @ fbb646e0
<template>
<div>
<Mainform :formData="formData" @formItemChange="formItemChange"></Mainform></div>
</template>
<script>
import Mainform from '@forms/entity/main/main.vue';
export default {
name: "EntityEditView",
components: {
Mainform
},
data(){
return {
formData:{
"bookname":"test1",
"input":"文本test",
"label":"标签test",
"group1":"书籍基本信息test",
"formpage1":"基本信息test",
"createman":"建立人test",
"createdate":"建立时间test",
"updateman":"更新人test",
"updatedate":"更新时间test",
"group2":"操作信息test",
"formpage2":"其它test"
}
}
},
methods:{
formItemChange(value){
console.log(value);
}
}
}
</script>
<style scoped>
</style>
app_Default/src/pages/module2/entity2-edit-view/entity2-edit-view.vue 0 → 100644
浏览文件 @ fbb646e0
<template>
<div>
<Mainform :formData="formData" @formItemChange="formItemChange"></Mainform></div>
</template>
<script>
import Mainform from '@forms/entity2/main/main.vue';
export default {
name: "Entity2EditView",
components: {
Mainform
},
data(){
return {
formData:{
"bookname":"test1",
"input":"文本test",
"label":"标签test",
"group1":"书籍基本信息test",
"formpage1":"基本信息test",
"createman":"建立人test",
"createdate":"建立时间test",
"updateman":"更新人test",
"updatedate":"更新时间test",
"group2":"操作信息test",
"formpage2":"其它test"
}
}
},
methods:{
formItemChange(value){
console.log(value);
}
}
}
</script>
<style scoped>
</style>
app_Default/src/pages/module3/entity3-edit-view/entity3-edit-view.vue 0 → 100644
浏览文件 @ fbb646e0
<template>
<div>
<Mainform :formData="formData" @formItemChange="formItemChange"></Mainform></div>
</template>
<script>
import Mainform from '@forms/entity3/main/main.vue';
export default {
name: "Entity3EditView",
components: {
Mainform
},
data(){
return {
formData:{
"bookname":"test1",
"input":"文本test",
"label":"标签test",
"group1":"书籍基本信息test",
"formpage1":"基本信息test",
"createman":"建立人test",
"createdate":"建立时间test",
"updateman":"更新人test",
"updatedate":"更新时间test",
"group2":"操作信息test",
"formpage2":"其它test"
}
}
},
methods:{
formItemChange(value){
console.log(value);
}
}
}
</script>
<style scoped>
</style>
app_Default/src/pages/module4/entity4-edit-view/entity4-edit-view.vue 0 → 100644
浏览文件 @ fbb646e0
<template>
<div>
<Mainform :formData="formData" @formItemChange="formItemChange"></Mainform></div>
</template>
<script>
import Mainform from '@forms/entity4/main/main.vue';
export default {
name: "Entity4EditView",
components: {
Mainform
},
data(){
return {
formData:{
"bookname":"test1",
"input":"文本test",
"label":"标签test",
"group1":"书籍基本信息test",
"formpage1":"基本信息test",
"createman":"建立人test",
"createdate":"建立时间test",
"updateman":"更新人test",
"updatedate":"更新时间test",
"group2":"操作信息test",
"formpage2":"其它test"
}
}
},
methods:{
formItemChange(value){
console.log(value);
}
}
}
</script>
<style scoped>
</style>
app_Default/src/pages/module5/entity5-edit-view/entity5-edit-view.vue 0 → 100644
浏览文件 @ fbb646e0
<template>
<div>
<Mainform :formData="formData" @formItemChange="formItemChange"></Mainform></div>
</template>
<script>
import Mainform from '@forms/entity5/main/main.vue';
export default {
name: "Entity5EditView",
components: {
Mainform
},
data(){
return {
formData:{
"bookname":"test1",
"input":"文本test",
"label":"标签test",
"group1":"书籍基本信息test",
"formpage1":"基本信息test",
"createman":"建立人test",
"createdate":"建立时间test",
"updateman":"更新人test",
"updatedate":"更新时间test",
"group2":"操作信息test",
"formpage2":"其它test"
}
}
},
methods:{
formItemChange(value){
console.log(value);
}
}
}
</script>
<style scoped>
</style>
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或
fork项目必须指定群组，当前不支持fork至用户默认空间。当前不支持修改项目路径及删除项目！新建小模板向导