vxcontrol/ncform
1
0
Fork 0
mirror of https://github.com/vxcontrol/ncform.git synced 2026-07-19 10:14:23 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #88 from ncform/develop

Browse Source 
Develop
This commit is contained in:
Daniel.xiao
2019-08-05 05:34:03 -05:00
committed by GitHub
parent 127d037ac8 5255597819
commit ebee48fbef
24 changed files with 492 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CONFIG.md
+15
View File
@@ -281,3 +281,18 @@ Submit a form.
// Demo code:
<ncform @submit="submit()"></ncform>
```
- change
Form item value change event
```
// Demo code:
<ncform @change="onChange"></ncform>
onChange({paths, itemValue, formValue}) {
// paths: the path of the item whose value changes
  // itemValue: the latest value of the item whose value has changed
  // formVallue: the latest value of the form
}
```
CONFIG_CN.md
+15
View File
@@ -282,3 +282,18 @@ const allWidgets = this.$ncformAllWidgets();
// Demo code:
<ncform @submit="submit()"></ncform>
```
- change
表单项值更改事件
```
// Demo code:
<ncform @change="onChange"></ncform>
onChange({paths, itemValue, formValue}) {
// paths: 发生值变化的项的路径
// itemValue：发生值变化的项的最新值
// formVallue: 表单的最新值
}
```
STD-COMP.md
+7 -2
View File
@@ -63,7 +63,8 @@ If you don't like the cold text description, click on the [interactive version](
remoteUrl: '', // If it is remote call, fill in the url
resField: '', // Response result field
},
modelField: '' // An attribute used to bind the value of the input value
modelField: '', // An attribute used to bind the value of the input value
placeholder: '', // placeholder
},
appendSelect: { // Append select, The data used for this kind must be an object
itemLabelField: 'label', // Item data represents the field of the label
@@ -73,7 +74,8 @@ If you don't like the cold text description, click on the [interactive version](
remoteUrl: '', // If it is remote call, fill in the url
resField: '', // Response result field
},
modelField: '' // An attribute used to bind the value of the input value
modelField: '', // An attribute used to bind the value of the input value
placeholder: '', // placeholder
}
}，
@@ -280,6 +282,7 @@ If you don't like the cold text description, click on the [interactive version](
item: '',
all: ''
},
showOneIfEmpty: false, // Show one item if empty
}
```
@@ -299,6 +302,7 @@ If you don't like the cold text description, click on the [interactive version](
item: '',
all: ''
},
showOneIfEmpty: false, // Show one item if empty
}
```
@@ -316,5 +320,6 @@ If you don't like the cold text description, click on the [interactive version](
item: '',
all: ''
},
showOneIfEmpty: false, // Show one item if empty
}
```
STD-COMP_CN.md
+7 -2
View File
@@ -63,7 +63,8 @@
remoteUrl: '', // 如果是远程访问，则填写该url
resField: '', // 响应结果的字段
},
modelField: '' // 用于绑定input value值的某个属性
modelField: '', // 用于绑定input value值的某个属性
placeholder: '', // 占位描述
},
appendSelect: { // 后置下拉框，使用该种的数据必须是对象
itemLabelField: 'label', // 项数据表示label的字段
@@ -73,7 +74,8 @@
remoteUrl: '', // 如果是远程访问，则填写该url
resField: '', // 响应结果的字段
},
modelField: '' // 用于绑定input value值的某个属性
modelField: '', // 用于绑定input value值的某个属性
placeholder: '', // 占位描述
}
}，
@@ -280,6 +282,7 @@
item: '',
all: ''
},
showOneIfEmpty: false, // 当空值时是否显示一项
}
```
@@ -299,6 +302,7 @@
item: '',
all: ''
},
showOneIfEmpty: false, // 当空值时是否显示一项
}
```
@@ -316,5 +320,6 @@
item: '',
all: ''
},
showOneIfEmpty: false, // 当空值时是否显示一项
}
```
packages/ncform-common/src/mixins/vue/layout-array-mixin.js
+22 -9
View File
@@ -17,13 +17,14 @@ export default {
this.$options.lang = window.__$ncform.lang;
this.$data.i18n = this.$options.i18nData[this.$options.lang] || this.$options.i18nData.en;
this.schema.value =
this.schema.value && this.schema.value.length > 0
? this.schema.value
: [ncformUtils.getDefVal(this.schema.items.type)];
this.schema.value.forEach((item, idx) => {
this.addItem(idx);
});
this.schema.value = this.schema.value || [];
if (this.schema.value.length === 0) {
this._addEmptyItem();
} else {
this.schema.value.forEach((item, idx) => {
this.addItem(idx);
});
}
this.$data.collapsed = this.mergeConfig.collapsed;
@@ -111,6 +112,12 @@ export default {
this.$set(this.tempData, key, value);
},
_addEmptyItem() {
if (this.schema.value.length === 0 && this.mergeConfig.showOneIfEmpty) {
this.$nextTick(() => this.addItem());
}
},
isNormalObjSchema: ncformUtils.isNormalObjSchema,
isNormalArrSchema: ncformUtils.isNormalArrSchema,
@@ -145,15 +152,18 @@ export default {
type: 'warning'
}).then(() => {
this.schema.value.splice(idx, 1);
this._addEmptyItem();
})
} else {
this.schema.value.splice(idx, 1);
this._addEmptyItem();
}
} else {
if (requiredConfirm) {
window.confirm(confirmText) && this.schema.value.splice(idx, 1);
window.confirm(confirmText) && this.schema.value.splice(idx, 1) && this._addEmptyItem();
} else {
this.schema.value.splice(idx, 1);
this._addEmptyItem();
}
}
},
@@ -165,15 +175,18 @@ export default {
type: 'warning'
}).then(() => {
this.schema.value = [];
this._addEmptyItem();
})
} else {
this.schema.value = [];
this._addEmptyItem();
}
} else {
if (requiredConfirm) {
window.confirm(confirmText) && (this.schema.value = []);
window.confirm(confirmText) && (this.schema.value = []) && this._addEmptyItem();
} else {
this.schema.value = [];
this._addEmptyItem();
}
}
packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/array.spec.js
+55
View File
@@ -76,9 +76,11 @@ context('Array', () => {
cy.get('legend').click();
cy.get('legend').next().should('be.visible');
cy.get('button').contains('Add Item').click();
cy.get('input').should('not.be.visible');
cy.get('button').find('.el-icon-arrow-up').click()
cy.get('input').should('be.visible');
cy.get('input').its('length').should('equal', 1);
cy.get('button').contains('Add Item').click();
cy.get('button').find('.el-icon-arrow-up:visible').click()
@@ -363,4 +365,57 @@ context('Array', () => {
});
});
it('showOneIfEmpty option', () => {
let formSchema = {
type: 'object',
properties: {
users1: {
type: 'array',
items: {
type: 'string'
},
ui: {
widgetConfig: {
showOneIfEmpty: true
}
}
}
}
};
cy.window()
.its('editor')
.invoke('setValue', JSON.stringify(formSchema, null, 2));
common.startRun();
cy.get('body').as('body');
cy.get('.previewArea').within(() => {
// Declare action elements
cy.get('legend')
.contains('users1')
.parent()
.within(() => {
// 默认有一项
cy.get('input').its('length').should('equal', 1);
cy.get('input').eq(0).should('have.value', '');
// 填写值然后删除该项
cy.get('input').eq(0).type('daniel');
cy.get('input').eq(0).should('have.value', 'daniel');
cy.get('.el-icon-remove').eq(0).click();
cy.get('input').eq(0).should('have.value', '');
// 增加多一项，然后删除全部
cy.get('button').contains('Add').click();
cy.get('input').its('length').should('equal', 2);
cy.get('input').eq(0).type('daniel');
cy.get('input').eq(1).type('sarah');
cy.get('button:contains("Delete All")').click();
cy.get('input').its('length').should('equal', 1);
cy.get('input').eq(0).should('have.value', '');
});
// common.submitForm();
});
});
});
packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/input.spec.js
+3 -3
View File
@@ -104,7 +104,7 @@ context('input', () => {
ui: {
widgetConfig: {
prefixIcon: 'el-icon-search',
trim: false
trim: true
}
}
},
@@ -142,7 +142,7 @@ context('input', () => {
.as('nameInput1');
cy.get('@nameInput1')
.type(' daniel ')
.should('have.value', ' daniel ');
.should('have.value', 'daniel');
cy.get('@nameInput1')
.parent()
.find('.el-icon-search')
@@ -165,7 +165,7 @@ context('input', () => {
.should('not.be.visible');
cy.get('@nameInput2')
.type(' daniel ')
.should('have.value', 'daniel');
.should('have.value', ' daniel ');
cy.get('@nameInput2')
.parent()
.find('.el-input__clear')
packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/radio.spec.js
+4 -1
View File
@@ -205,7 +205,10 @@ context('Radio', () => {
type: 'string'
},
ui: {
widget: 'array-table'
widget: 'array-table',
widgetConfig: {
showOneIfEmpty: true
}
}
},
name1: {
packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/table.spec.js
+56
View File
@@ -81,6 +81,7 @@ context('Table', () => {
cy.get('legend').click();
cy.get('legend').next().should('be.visible');
cy.get('button').contains('Add Item').click();
cy.get('button').contains('Add Item').click();
cy.get('input').its('length').should('equal', 2);
@@ -360,4 +361,59 @@ context('Table', () => {
});
});
it('showOneIfEmpty option', () => {
let formSchema = {
type: 'object',
properties: {
users1: {
type: 'array',
items: {
type: 'string'
},
ui: {
widget: 'array-table',
widgetConfig: {
showOneIfEmpty: true
}
}
}
}
};
cy.window()
.its('editor')
.invoke('setValue', JSON.stringify(formSchema, null, 2));
common.startRun();
cy.get('body').as('body');
cy.get('.previewArea').within(() => {
// Declare action elements
cy.get('legend')
.contains('users1')
.parent()
.within(() => {
// 默认有一项
cy.get('input').its('length').should('equal', 1);
cy.get('input').eq(0).should('have.value', '');
// 填写值然后删除该项
cy.get('input').eq(0).type('daniel');
cy.get('input').eq(0).should('have.value', 'daniel');
cy.get('.el-icon-remove').eq(0).click();
cy.get('input').eq(0).should('have.value', '');
// 增加多一项，然后删除全部
cy.get('button').contains('Add').click();
cy.get('input').its('length').should('equal', 2);
cy.get('input').eq(0).type('daniel');
cy.get('input').eq(1).type('sarah');
cy.get('button:contains("Delete All")').click();
cy.get('input').its('length').should('equal', 1);
cy.get('input').eq(0).should('have.value', '');
});
// common.submitForm();
});
});
});
packages/ncform-e2e/ncform-theme-elementui/cypress/integration/examples/tabs.spec.js
+47
View File
@@ -79,6 +79,7 @@ context('Tabs', () => {
cy.get('legend').click();
cy.get('legend').next().should('be.visible');
cy.get('.el-icon-plus').click();
cy.get('.el-icon-plus').click();
cy.get('.el-tabs__item').its('length').should('equal', 2);
cy.get('.el-tabs__item:last-child').should('have.class', 'is-active');
@@ -135,4 +136,50 @@ context('Tabs', () => {
});
});
it('showOneIfEmpty option', () => {
let formSchema = {
type: 'object',
properties: {
users1: {
type: 'array',
items: {
type: 'string'
},
ui: {
widget: 'array-tabs',
widgetConfig: {
showOneIfEmpty: true
}
}
}
}
};
cy.window()
.its('editor')
.invoke('setValue', JSON.stringify(formSchema, null, 2));
common.startRun();
cy.get('body').as('body');
cy.get('.previewArea').within(() => {
// Declare action elements
cy.get('legend')
.contains('users1')
.parent()
.within(() => {
// 默认有一项
cy.get('.el-tabs__item').its('length').should('equal', 1);
cy.get('input').should('have.value', '');
// 填写值然后删除该项
cy.get('input').type('daniel');
cy.get('input').should('have.value', 'daniel');
cy.get('.el-icon-close').click();
cy.get('input').should('have.value', '');
});
// common.submitForm();
});
});
});
packages/ncform-e2e/ncform/cypress/integration/examples/customRule.spec.js
+2
View File
@@ -29,6 +29,8 @@ context('rules.customRule', () => {
it('rules.customRule in Array', () => {
let id = md5('rules.customRule in Array');
cy.get(`[data-cy=${id}]`).within(() => {
cy.get('legend').contains('rows').parent().find('button').contains('Add').click();
cy.get('label').contains('maxNum').next().find('input').as('maxNumInput');
cy.get('label').contains('minNum').next().find('input').as('minNumInput');
packages/ncform-theme-elementui/examples/control-comps/input.html
+4 -2
View File
@@ -444,7 +444,8 @@ resField: Which field of the response data as the data source, as the example re
itemLabelField: 'label', // 项数据表示label的字段
itemValueField: 'value', // 项数据表示value的字段
enumSource: [{ value: 1, label: 'Man' }, { value: 2, label: 'Woman' }], // 本地数据源
modelField: 'gender' // 用于绑定input value值的某个属性
modelField: 'gender', // 用于绑定input value值的某个属性
placeholder: 'Select',
}
}
}
@@ -489,7 +490,8 @@ note:
remoteUrl: '/api/input/getDomains', // 如果是远程访问，则填写该url
resField: '' // 响应结果的字段
},
modelField: 'domain' // 用于绑定input value值的某个属性
modelField: 'domain', // 用于绑定input value值的某个属性
placeholder: '',
}
}
}
packages/ncform-theme-elementui/examples/layout-comps/array-table.html
+25 -1
View File
@@ -316,7 +316,31 @@ Prompt information can be configured via delConfirmText when requiredDelConfirm
2. delConfirmText.all: delete all confirmation information
         `
}
}
},
{
title: {
cn: '[属性] showOneIfEmpty: 当空值时是否显示一项',
en:
'[ATTR] showOneIfEmpty: Show one item at least if empty'
},
schema: {
type: 'object',
properties: {
user: {
type: 'array',
items: {
type: 'string'
},
ui: {
widget: 'array-table',
widgetConfig: {
showOneIfEmpty: true
}
}
}
}
}
},
];
// Bootstrap the app
packages/ncform-theme-elementui/examples/layout-comps/array-tabs.html
+25 -1
View File
@@ -273,7 +273,31 @@ Prompt information can be configured via delConfirmText when requiredDelConfirm
1. delConfirmText.item: delete item confirmation information
         `
}
}
},
{
title: {
cn: '[属性] showOneIfEmpty: 当空值时是否显示一项',
en:
'[ATTR] showOneIfEmpty: Show one item at least if empty'
},
schema: {
type: 'object',
properties: {
user: {
type: 'array',
items: {
type: 'string'
},
ui: {
widget: 'array-tabs',
widgetConfig: {
showOneIfEmpty: true
}
}
}
}
}
},
];
// Bootstrap the app
packages/ncform-theme-elementui/examples/layout-comps/array.html
+24 -1
View File
@@ -350,7 +350,30 @@ Prompt information can be configured via delConfirmText when requiredDelConfirm
2. delConfirmText.all: delete all confirmation information
         `
}
}
},
{
title: {
cn: '[属性] showOneIfEmpty: 当空值时是否显示一项',
en:
'[ATTR] showOneIfEmpty: Show one item at least if empty'
},
schema: {
type: 'object',
properties: {
user: {
type: 'array',
items: {
type: 'string'
},
ui: {
widgetConfig: {
showOneIfEmpty: true
}
}
}
}
}
},
];
// Bootstrap the app
packages/ncform-theme-elementui/src/components/control-comps/input.vue
+4 -4
View File
@@ -38,7 +38,7 @@
v-if="mergeConfig.compound.prependSelect"
v-model="prependSelectVal"
slot="prepend"
:placeholder="$nclang('selectPls')"
:placeholder="mergeConfig.compound.prependSelect.placeholder || $nclang('selectPls')"
>
<el-option
v-for="item in prependSelectOptions"
@@ -52,7 +52,7 @@
v-if="mergeConfig.compound.appendSelect"
v-model="appendSelectVal"
slot="append"
:placeholder="$nclang('selectPls')"
:placeholder="mergeConfig.compound.appendSelect.placeholder || $nclang('selectPls')"
>
<el-option
v-for="item in appendSelectOptions"
@@ -130,7 +130,7 @@
v-if="mergeConfig.compound.prependSelect"
v-model="prependSelectVal"
slot="prepend"
:placeholder="$nclang('selectPls')"
:placeholder="mergeConfig.compound.prependSelect.placeholder || $nclang('selectPls')"
>
<el-option
v-for="item in prependSelectOptions"
@@ -144,7 +144,7 @@
v-if="mergeConfig.compound.appendSelect"
v-model="appendSelectVal"
slot="append"
:placeholder="$nclang('selectPls')"
:placeholder="mergeConfig.compound.appendSelect.placeholder || $nclang('selectPls')"
>
<el-option
v-for="item in appendSelectOptions"
packages/ncform/examples/components/vue-ncform/_dx.html
+22 -3
View File
@@ -72,6 +72,11 @@
}
}
}
},
ui: {
widgetConfig: {
showOneIfEmpty: true
}
}
}
}
@@ -101,11 +106,17 @@
}
},
ui: {
widget: 'array-table'
widget: 'array-table',
widgetConfig: {
showOneIfEmpty: true
}
}
},
ui: {
widget: 'array-table'
widget: 'array-table',
widgetConfig: {
showOneIfEmpty: true
}
}
}
}
@@ -138,12 +149,20 @@
}
}
}
},
ui: {
widgetConfig: {
showOneIfEmpty: true
}
}
}
}
},
ui: {
widget: 'array-table'
widget: 'array-table',
widgetConfig: {
showOneIfEmpty: true
}
}
}
}
packages/ncform/examples/components/vue-ncform/_layout-widgets.html
+1
View File
@@ -201,6 +201,7 @@
itemCollapse: true,
addTxt: 'Add Item',
delAllTxt: 'Remove All',
showOneIfEmpty: true
}
}
}
packages/ncform/examples/components/vue-ncform/_others.html
+6 -1
View File
@@ -12,7 +12,7 @@
<template v-for="item in formSchemas">
<div :data-cy="item.id" v-if="mode !== 'only' || item.only" :key="item.formName">
<h4>[CASE] {{ item.title }}</h4>
<ncform :form-schema="item.formSchema" v-model="item.formSchema.value" :form-name="item.formName" @submit="submit(item.formName)" :is-dirty.sync="item.isFormDirty"></ncform>
<ncform :form-schema="item.formSchema" v-model="item.formSchema.value" :form-name="item.formName" @submit="submit(item.formName)" @change="onChange" :is-dirty.sync="item.isFormDirty"></ncform>
<button v-if="['v-model: external update', 'reset', 'is-dirty.sync'].indexOf(item.title) >= 0" class="btn btn-primary" @click="changeModel(item.formSchema)">
Updated Model
@@ -136,6 +136,11 @@
},
changeModel(formSchema) {
formSchema.value = { user: { name: 'daniel' } };
},
onChange({paths, itemValue, formValue}) {
console.log('paths:', paths);
console.log('itemValue:', itemValue);
console.log('formValue:', JSON.stringify(formValue, null, 2));
}
}
});
packages/ncform/examples/components/vue-ncform/_required.html
+9 -1
View File
@@ -62,6 +62,11 @@
}
}
}
},
ui: {
widgetConfig: {
showOneIfEmpty: true
}
}
},
users2: {
@@ -75,7 +80,10 @@
}
},
ui: {
widget: 'array-table'
widget: 'array-table',
widgetConfig: {
showOneIfEmpty: true
}
}
}
}
packages/ncform/examples/components/vue-ncform/_ui.itemClass.html
+103 -114
View File
@@ -1,138 +1,127 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>vue-ncform Example</title>
<link
rel="stylesheet"
href="../../../node_modules/bootstrap/dist/css/bootstrap.min.css"
/>
<head>
<meta charset="UTF-8" />
<title>vue-ncform Example</title>
<style>
<link rel="stylesheet" href="../../../node_modules/bootstrap/dist/css/bootstrap.min.css" />
.obj-daniel {
border: 1px dashed #409EFF;
padding: 0 8px;
border-radius: 8px;
}
.obj-daniel .obj-item-daniel input {
border-color: #409EFF;
}
<style>
.obj-daniel {
border: 1px dashed #409EFF;
padding: 0 8px;
border-radius: 8px;
}
.array-daniel {
border: 1px dashed #F56C6C;
padding: 0 8px 8px 8px;
border-radius: 8px;
}
.array-daniel .array-item-daniel input {
border-color: #F56C6C;
}
.obj-daniel .obj-item-daniel input {
border-color: #409EFF;
}
.table-daniel {
border: 1px dashed #E6A23C;
padding: 0 8px 8px 8px;
border-radius: 8px;
}
.table-daniel .table-item-daniel input {
border-color: #E6A23C;
}
.array-daniel {
border: 1px dashed #F56C6C;
padding: 0 8px 8px 8px;
border-radius: 8px;
}
</style>
</head>
.array-daniel .array-item-daniel input {
border-color: #F56C6C;
}
<body>
<div id="demo" class="container">
<template v-for="item in formSchemas">
<div
:data-cy="item.id"
v-if="mode !== 'only' || item.only"
:key="item.formName"
>
<h4>[CASE] {{ item.title }}</h4>
<ncform
:form-schema="item.formSchema"
v-model="item.formSchema.value"
:form-name="item.formName"
></ncform>
<hr />
</div>
</template>
</div>
.table-daniel {
border: 1px dashed #E6A23C;
padding: 0 8px 8px 8px;
border-radius: 8px;
}
<script
type="text/javascript"
src="../../../node_modules/vue/dist/vue.js"
></script>
<script
type="text/javascript"
src="https://unpkg.com/blueimp-md5@2.10.0/js/md5.js"
></script>
<script
type="text/javascript"
src="../../../node_modules/@ncform/ncform-common/dist/ncformCommon.min.js"
></script>
<script type="text/javascript" src="../../../dist/vueNcform.js"></script>
<script type="text/javascript">
Vue.use(vueNcform, { lang: 'en' });
.table-daniel .table-item-daniel input {
border-color: #E6A23C;
}
</style>
</head>
new Vue({
el: '#demo',
data: {
mode: 'all', // all or only. if only mode, only objects with only:true in formSchemas are valid
formSchemas: [
{
id: md5('Add item class'),
title: 'Add item class',
formName: 'form_' + Math.random(),
formSchema: {
type: 'object',
properties: {
user: {
type: 'object',
properties: {
name: {
type: 'string',
ui: {
itemClass: 'obj-item-daniel'
}
<body>
<div id="demo" class="container">
<template v-for="item in formSchemas">
<div :data-cy="item.id" v-if="mode !== 'only' || item.only" :key="item.formName">
<h4>[CASE] {{ item.title }}</h4>
<ncform :form-schema="item.formSchema" v-model="item.formSchema.value" :form-name="item.formName"></ncform>
<hr />
</div>
</template>
</div>
<script type="text/javascript" src="../../../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript" src="https://unpkg.com/blueimp-md5@2.10.0/js/md5.js"></script>
<script type="text/javascript" src="../../../node_modules/@ncform/ncform-common/dist/ncformCommon.min.js"></script>
<script type="text/javascript" src="../../../dist/vueNcform.js"></script>
<script type="text/javascript">
Vue.use(vueNcform, { lang: 'en' });
new Vue({
el: '#demo',
data: {
mode: 'all', // all or only. if only mode, only objects with only:true in formSchemas are valid
formSchemas: [
{
id: md5('Add item class'),
title: 'Add item class',
formName: 'form_' + Math.random(),
formSchema: {
type: 'object',
properties: {
user: {
type: 'object',
properties: {
name: {
type: 'string',
ui: {
itemClass: 'obj-item-daniel'
}
},
ui: {
itemClass: 'obj-daniel'
}
},
users: {
type: 'array',
items: {
type: 'string',
ui: {
itemClass: 'array-item-daniel'
}
},
ui: {
itemClass: 'obj-daniel'
}
},
users: {
type: 'array',
items: {
type: 'string',
ui: {
itemClass: 'array-daniel'
itemClass: 'array-item-daniel'
}
},
users1: {
type: 'array',
items: {
type: 'string',
ui: {
itemClass: 'table-item-daniel'
}
},
ui: {
itemClass: 'array-daniel',
widgetConfig: {
showOneIfEmpty: true
}
}
},
users1: {
type: 'array',
items: {
type: 'string',
ui: {
itemClass: 'table-daniel',
widget: 'array-table'
itemClass: 'table-item-daniel'
}
},
ui: {
itemClass: 'table-daniel',
widget: 'array-table',
widgetConfig: {
showOneIfEmpty: true
}
}
}
}
}
]
}
});
</script>
</body>
}
]
}
});
</script>
</body>
</html>
packages/ncform/examples/components/vue-ncform/_ui.label.html
+17 -3
View File
@@ -248,7 +248,10 @@
type: 'string'
},
ui: {
legend: 'dx: {{$root.users[0]}} + " info-array"'
legend: 'dx: {{$root.users[0]}} + " info-array"',
widgetConfig: {
showOneIfEmpty: true
}
}
},
users1: {
@@ -258,7 +261,10 @@
},
ui: {
legend: 'dx: {{$root.users1[0]}} + " info-table"',
widget: 'array-table'
widget: 'array-table',
widgetConfig: {
showOneIfEmpty: true
}
}
}
}
@@ -283,7 +289,10 @@
}
},
ui: {
widget: 'array-table'
widget: 'array-table',
widgetConfig: {
showOneIfEmpty: true
}
}
},
users1: {
@@ -293,6 +302,11 @@
ui: {
label: 'dx: "dx from: " + {{$root.company}}'
}
},
ui: {
widgetConfig: {
showOneIfEmpty: true
}
}
}
}
packages/ncform/src/components/vue-ncform/form-item.vue
+18 -2
View File
@@ -6,7 +6,7 @@
<component v-if="isNormalObjSchema(schema)" :is="'ncform-' + schema.ui.widget" :schema="schema" :form-data="formData" :temp-data="tempData" :global-const="globalConfig.constants" :idx-chain="idxChain" :config="schema.ui.widgetConfig">
<template v-for="(fieldSchema, fieldName) in schema.properties" :slot="fieldName">
<form-item :schema="fieldSchema" :form-data="formData" :temp-data="tempData" :global-const="globalConfig.constants" :key="fieldName" :global-config="globalConfig" :complete-schema="completeSchema"></form-item>
<form-item :schema="fieldSchema" :form-data="formData" :temp-data="tempData" :global-const="globalConfig.constants" :key="fieldName" :global-config="globalConfig" :complete-schema="completeSchema" :paths="paths ? paths + '.' + fieldName : fieldName" :form-name="formName"></form-item>
</template>
</component>
@@ -15,7 +15,7 @@
<component v-else-if="isNormalArrSchema(schema)" :is="'ncform-' + schema.ui.widget" :schema="schema" :form-data="formData" :temp-data="tempData" :global-const="globalConfig.constants" :idx-chain="idxChain" :config="schema.ui.widgetConfig" class="__ncform-control">
<template v-for="(fieldSchema, fieldName) in (schema.items.properties || {__notObjItem: schema.items})" :slot="fieldName" slot-scope="props">
<form-item :schema="props.schema" :key="fieldName" :form-data="formData" :temp-data="tempData" :global-const="globalConfig.constants" :idx-chain="(idxChain ? idxChain + ',' : '') + props.idx" :global-config="globalConfig" :complete-schema="completeSchema"></form-item>
<form-item :schema="props.schema" :key="fieldName" :form-data="formData" :temp-data="tempData" :global-const="globalConfig.constants" :idx-chain="(idxChain ? idxChain + ',' : '') + props.idx" :global-config="globalConfig" :complete-schema="completeSchema" :paths="paths + '[' + props.idx + ']'" :form-name="formName"></form-item>
</template>
</component>
@@ -137,6 +137,13 @@ export default {
idxChain: {
// 用于记录在数组中的索引
type: String
},
paths: {
// 用于记录字段的路径
type: String
},
formName: {
type: String
}
},
@@ -263,6 +270,15 @@ export default {
// 对比控件改变前后的值，判断是否需要对其进行校验。
if (changed) {
if (!ncformUtils.isNormalObjSchema(newVal) && !ncformUtils.isNormalArrSchema(newVal)) { // 叶子结点
const formVM = window.__$ncform.__ncFormsGlobalList[this.formName];
formVM.$emit('change', {
paths: this.paths,
itemValue: this.schema.value,
formValue: this.formData
})
}
if (ncformUtils.isNormalArrSchema(newVal)) {
this.$data.itemValue = ncformUtils.getModelFromSchema(newVal);
} else {
packages/ncform/src/components/vue-ncform/ncform.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template>
<div class="ncform">
<form v-if="!isSchemaChanging" novalidate :class="dataFormSchema.globalConfig.style.formCls">
<form-item :schema="dataFormSchema" :form-data="formData" :temp-data="tempData" :global-config="dataFormSchema.globalConfig" :complete-schema="dataFormSchema"></form-item>
<form-item :schema="dataFormSchema" :form-data="formData" :temp-data="tempData" :global-config="dataFormSchema.globalConfig" :complete-schema="dataFormSchema" :form-name="name"></form-item>
<!-- button这样处理是为了在Mac下的Safari能否正常使用回车键触发表单的submit事件 -->
<button @click.prevent="submit()" type="submit" style="position: absolute; left: -100px; visibility: hidden"></button>
</form>