mirror of
https://github.com/vxcontrol/ncform.git
synced 2026-07-19 18:23:32 -04:00
test: working input test cases
This commit is contained in:
daniel-dx
+2
-2
@@ -38,9 +38,9 @@ If you don't like the cold text description, click on the [interactive version](
|
||||
|
||||
autocomplete: { // Automatic completion
|
||||
itemValueField: 'value', // Item data represents the field of value
|
||||
itemTemplate: '<span>{{item.value}}</span>', // Display item template
|
||||
itemTemplate: '<span>{{item.value}} {{item.desc}}</span>', // Display item template
|
||||
immediateShow: false, // Whether to display immediately, if it is false, it will be displayed when input the keyword.
|
||||
enumSource: [{value: [String | Number | Boolean], label: ''}], // Provided when the prompt data is local rather than remote
|
||||
enumSource: [{value: [String | Number | Boolean], desc: ''}], // Provided when the prompt data is local rather than remote
|
||||
enumSourceRemote: {
|
||||
remoteUrl: '', // If it is remote call, fill in the url
|
||||
paramName: 'keyword', // Request parameter name, default is keyword
|
||||
|
||||
+2
-2
@@ -38,9 +38,9 @@
|
||||
|
||||
autocomplete: { // 自动补全
|
||||
itemValueField: 'value', // 项数据表示value的字段
|
||||
itemTemplate: '<span>{{item.value}}</span>', // 显示项的模板
|
||||
itemTemplate: '<span>{{item.value}} {{item.desc}}</span>', // 显示项的模板
|
||||
immediateShow: false, // 是否立即显示，如果为false则当输入关键字才显示
|
||||
enumSource: [{value: [String | Number | Boolean], label: ''}], // 当提示数据是本地而非远程时提供
|
||||
enumSource: [{value: [String | Number | Boolean], desc: ''}], // 当提示数据是本地而非远程时提供
|
||||
enumSourceRemote: {
|
||||
remoteUrl: '', // 如果是远程访问，则填写该url
|
||||
paramName: 'keyword', // 请求参数名，默认是keyword
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
{
|
||||
"projectId": "5y86ie",
|
||||
"ignoreTestFiles": "__template.spec.js"
|
||||
"ignoreTestFiles": ["__template.spec.js", "common.js"]
|
||||
}
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
+20
-7
@@ -1,18 +1,31 @@
|
||||
/// <reference types="Cypress" />
|
||||
|
||||
const md5 = require('blueimp-md5');
|
||||
|
||||
context('<context name>', () => {
|
||||
|
||||
before(() => {
|
||||
cy.visit('http://localhost:3000/examples/components/vue-ncform/<page name>.html')
|
||||
cy.visit('http://localhost:3004/examples/components/playground/index.html')
|
||||
})
|
||||
|
||||
it('<testcase name>', () => {
|
||||
let id = md5('<testcase name>');
|
||||
cy.get(`[data-cy=${id}]`).within(() => {
|
||||
cy.get('label').contains('name').next().find('input').should('have.value', 'daniel');
|
||||
let formSchema = {
|
||||
type: 'object',
|
||||
properties: {
|
||||
name: {
|
||||
type: 'string',
|
||||
}
|
||||
}
|
||||
};
|
||||
cy.window()
|
||||
.its('editor')
|
||||
.invoke('setValue', JSON.stringify(formSchema, null, 2));
|
||||
common.startRun();
|
||||
|
||||
cy.get('.previewArea').within(() => {
|
||||
// Declare action elements
|
||||
|
||||
// common.submitForm();
|
||||
})
|
||||
})
|
||||
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
export function fillInSchema(formSchema) {
|
||||
return cy.window()
|
||||
.its('editor')
|
||||
.invoke('setValue', JSON.stringify(formSchema, null, 2));
|
||||
}
|
||||
|
||||
export function startRun() {
|
||||
return cy.get('button').contains('Run').click();
|
||||
}
|
||||
|
||||
export function submitForm() {
|
||||
return cy.get('button').contains('Get Data').click()
|
||||
}
|
||||
|
||||
export function uploadFile(fileUrl) {
|
||||
return cy.fixture(fileUrl).as('logo')
|
||||
.get('input[type=file]').then(function (el) {
|
||||
return Cypress.Blob.base64StringToBlob(this.logo, 'image/png')
|
||||
.then(blob => {
|
||||
el[0].files[0] = blob
|
||||
el[0].dispatchEvent(new Event('change', { bubbles: true }))
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
export default {
|
||||
startRun,
|
||||
submitForm,
|
||||
fillInSchema,
|
||||
uploadFile
|
||||
}
|
||||
+396
-16
@@ -1,27 +1,407 @@
|
||||
/// <reference types="Cypress" />
|
||||
|
||||
import common from './common';
|
||||
|
||||
context('input', () => {
|
||||
before(() => {
|
||||
cy.visit('http://localhost:3004/examples/components/playground/index.html');
|
||||
});
|
||||
|
||||
it('<testcase name>', () => {
|
||||
it('Basic', () => {
|
||||
let formSchema = {
|
||||
type: 'object',
|
||||
properties: {
|
||||
// has init value
|
||||
name0: {
|
||||
type: 'string',
|
||||
value: 'daniel'
|
||||
},
|
||||
name1: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
disabled: true
|
||||
}
|
||||
},
|
||||
name2: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
readonly: true
|
||||
}
|
||||
},
|
||||
name3: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
hidden: true
|
||||
}
|
||||
},
|
||||
name4: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
placeholder: 'your name'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
common.fillInSchema(formSchema);
|
||||
common.startRun();
|
||||
// common.submitForm();
|
||||
|
||||
cy.get('.previewArea').within(() => {
|
||||
|
||||
cy.get('label').contains('name0').as('nameLabel0');
|
||||
cy.get('@nameLabel0').next().find('input').as('nameInput0');
|
||||
cy.get('@nameInput0').should('have.value', 'daniel');
|
||||
|
||||
cy.get('label').contains('name1').as('nameLabel1');
|
||||
cy.get('@nameLabel1').next().find('input').as('nameInput1');
|
||||
cy.get('@nameInput1').should('be.disabled');
|
||||
|
||||
cy.get('label').contains('name2').as('nameLabel2');
|
||||
cy.get('@nameLabel2').next().find('input').as('nameInput2');
|
||||
cy.get('@nameInput2').should('have.prop', 'readonly');
|
||||
|
||||
cy.get('label').contains('name3').as('nameLabel3');
|
||||
cy.get('@nameLabel3').next().find('input').as('nameInput3');
|
||||
cy.get('@nameInput3').should('not.be.visible');
|
||||
|
||||
cy.get('label').contains('name4').as('nameLabel4');
|
||||
cy.get('@nameLabel4').next().find('input').as('nameInput4');
|
||||
cy.get('@nameInput4').should('have.prop', 'placeholder', 'your name');
|
||||
|
||||
})
|
||||
|
||||
});
|
||||
|
||||
it('Simple Props', () => {
|
||||
|
||||
let formSchema = {
|
||||
type: 'object',
|
||||
properties: {
|
||||
// has init value
|
||||
name1: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
prefixIcon: 'el-icon-search',
|
||||
trim: false
|
||||
}
|
||||
}
|
||||
},
|
||||
name2: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
suffixIcon: 'el-icon-date',
|
||||
clearable: true
|
||||
}
|
||||
}
|
||||
},
|
||||
name3: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
prefixIcon: 'el-icon-search',
|
||||
suffixIcon: 'el-icon-date',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
common.fillInSchema(formSchema);
|
||||
common.startRun();
|
||||
// common.submitForm();
|
||||
|
||||
cy.get('.previewArea').within(() => {
|
||||
|
||||
cy.get('label').contains('name1').as('nameLabel1');
|
||||
cy.get('@nameLabel1').next().find('input').as('nameInput1');
|
||||
cy.get('@nameInput1').type(' daniel ').should('have.value', ' daniel ');
|
||||
cy.get('@nameInput1').parent().find('.el-icon-search').should('exist');
|
||||
cy.get('@nameInput1').parent().find('.el-input__clear').should('not.be.visible');
|
||||
|
||||
cy.get('label').contains('name2').as('nameLabel2');
|
||||
cy.get('@nameLabel2').next().find('input').as('nameInput2');
|
||||
cy.get('@nameInput2').parent().find('.el-input__clear').should('not.be.visible');
|
||||
cy.get('@nameInput2').type(' daniel ').should('have.value', 'daniel');
|
||||
cy.get('@nameInput2').parent().find('.el-input__clear').should('be.visible');
|
||||
cy.get('@nameInput2').parent().find('.el-input__clear').click();
|
||||
cy.get('@nameInput2').should('have.value', '');
|
||||
cy.get('@nameInput2').parent().find('.el-input__clear').should('not.be.visible');
|
||||
cy.get('@nameInput2').parent().find('.el-icon-date').should('exist');
|
||||
|
||||
cy.get('label').contains('name3').parent().as('item');
|
||||
cy.get('@item').find('.el-icon-search').should('exist');
|
||||
cy.get('@item').find('.el-icon-date').should('exist');
|
||||
})
|
||||
|
||||
});
|
||||
|
||||
it('type', () => {
|
||||
|
||||
cy.server()
|
||||
cy.route({
|
||||
method: 'POST',
|
||||
url: '/upload',
|
||||
response: { data: 'https://avatars1.githubusercontent.com/u/22042268?s=40&v=4' }
|
||||
}).as('upload');
|
||||
|
||||
let formSchema = {
|
||||
type: 'object',
|
||||
properties: {
|
||||
name2: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
type: 'number'
|
||||
}
|
||||
}
|
||||
},
|
||||
name3: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
type: 'password'
|
||||
}
|
||||
}
|
||||
},
|
||||
name4: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
type: 'file',
|
||||
upload: {
|
||||
uploadUrl: '/upload',
|
||||
resField: 'data.data',
|
||||
data: {
|
||||
name: 'daniel'
|
||||
},
|
||||
fileField: 'photo',
|
||||
accept: '.png',
|
||||
uploadText: 'Upload Now',
|
||||
}
|
||||
},
|
||||
preview: {
|
||||
type: 'image'
|
||||
}
|
||||
}
|
||||
},
|
||||
name5: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
type: 'file',
|
||||
upload: {
|
||||
uploadUrl: '/upload',
|
||||
resField: 'data.data',
|
||||
data: {
|
||||
name: 'daniel'
|
||||
},
|
||||
constraint: {
|
||||
maxSize: 30,
|
||||
minSize: 10
|
||||
},
|
||||
}
|
||||
},
|
||||
preview: {
|
||||
type: 'image'
|
||||
}
|
||||
}
|
||||
},
|
||||
name6: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
type: 'file',
|
||||
upload: {
|
||||
uploadUrl: '/upload',
|
||||
resField: 'data.data',
|
||||
data: {
|
||||
name: 'daniel'
|
||||
},
|
||||
constraint: {
|
||||
width: 320,
|
||||
height: 320,
|
||||
sizeFixed: true
|
||||
},
|
||||
}
|
||||
},
|
||||
preview: {
|
||||
type: 'image'
|
||||
}
|
||||
}
|
||||
},
|
||||
name7: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
type: 'file',
|
||||
upload: {
|
||||
uploadUrl: '/upload',
|
||||
resField: 'data.data',
|
||||
data: {
|
||||
name: 'daniel'
|
||||
},
|
||||
constraint: {
|
||||
width: 320,
|
||||
height: 320,
|
||||
sizeFixed: false
|
||||
},
|
||||
}
|
||||
},
|
||||
preview: {
|
||||
type: 'image'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
common.fillInSchema(formSchema);
|
||||
common.startRun();
|
||||
|
||||
cy.get('.previewArea').within(() => {
|
||||
|
||||
cy.get('label').contains('name2').as('nameLabel2');
|
||||
cy.get('@nameLabel2').next().find('input').as('nameInput2');
|
||||
cy.get('@nameInput2').type('daniel').should('have.value', '');
|
||||
cy.get('@nameInput2').type('123').should('have.value', '123');
|
||||
|
||||
cy.get('label').contains('name3').as('nameLabel3');
|
||||
cy.get('@nameLabel3').next().find('input').as('nameInput3');
|
||||
cy.get('@nameInput3').type('daniel123').should('have.value', 'daniel123').and('have.prop', 'type', 'password');
|
||||
|
||||
cy.get('label').contains('name4').parent().within(() => {
|
||||
cy.get('button').contains('Upload Now').should('exist')
|
||||
common.uploadFile('assets/img/dx.png');
|
||||
cy.wait('@upload').then(xhr => {
|
||||
let uploadParams = {};
|
||||
xhr.request.body.forEach((item, key) => uploadParams[key] = item);
|
||||
cy.wrap(uploadParams).its('name').should('equal', 'daniel');
|
||||
cy.wrap(uploadParams).should('have.property', 'photo');
|
||||
});
|
||||
cy.get('input').should('have.value', 'https://avatars1.githubusercontent.com/u/22042268?s=40&v=4')
|
||||
});
|
||||
|
||||
cy.get('label').contains('name5').parent().within(() => {
|
||||
common.uploadFile('assets/img/dx.png');
|
||||
cy.wait(1000);
|
||||
cy.get('input').should('have.value', '')
|
||||
|
||||
common.uploadFile('assets/img/demo1.jpg');
|
||||
cy.wait(1000);
|
||||
cy.get('input').should('have.value', '')
|
||||
});
|
||||
|
||||
cy.get('label').contains('name6').parent().within(() => {
|
||||
common.uploadFile('assets/img/demo1.jpg');
|
||||
cy.wait(1000);
|
||||
cy.get('input').should('have.value', '')
|
||||
|
||||
common.uploadFile('assets/img/dx.png');
|
||||
cy.wait(1000);
|
||||
cy.get('input').should('have.value', '')
|
||||
});
|
||||
|
||||
cy.get('label').contains('name7').parent().within(() => {
|
||||
common.uploadFile('assets/img/demo1.jpg');
|
||||
cy.wait(1000);
|
||||
cy.get('input').should('have.value', '')
|
||||
|
||||
common.uploadFile('assets/img/dx.png');
|
||||
cy.wait(1000);
|
||||
cy.get('input').should('have.value', 'https://avatars1.githubusercontent.com/u/22042268?s=40&v=4')
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
});
|
||||
|
||||
it('autocomplete', () => {
|
||||
|
||||
cy.server()
|
||||
cy.route({
|
||||
method: 'GET',
|
||||
url: '/autocomplete?**',
|
||||
response: {
|
||||
data: [
|
||||
{
|
||||
name: 'daniel',
|
||||
desc: 'boy'
|
||||
},
|
||||
{
|
||||
name: 'sarah',
|
||||
desc: 'girl'
|
||||
}
|
||||
]
|
||||
}
|
||||
}).as('autocomplete');
|
||||
|
||||
let formSchema = {
|
||||
type: 'object',
|
||||
properties: {
|
||||
name1: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
autocomplete: {
|
||||
itemValueField: 'name',
|
||||
immediateShow: false,
|
||||
enumSource: [{ name: 'daniel' }, { name: 'sarah' }],
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
name2: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
autocomplete: {
|
||||
itemValueField: 'name',
|
||||
itemTemplate: '<span>{{item.name}} [{{item.desc}}]</span>',
|
||||
immediateShow: true,
|
||||
enumSourceRemote: {
|
||||
remoteUrl: '/autocomplete',
|
||||
paramName: 'keyword',
|
||||
otherParams: {
|
||||
name: 'daniel'
|
||||
},
|
||||
resField: 'data',
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
cy.window()
|
||||
.its('editor')
|
||||
.invoke(
|
||||
'setValue',
|
||||
JSON.stringify(
|
||||
{
|
||||
type: 'object',
|
||||
properties: {
|
||||
name: {
|
||||
type: 'string'
|
||||
}
|
||||
}
|
||||
},
|
||||
null,
|
||||
2
|
||||
)
|
||||
);
|
||||
.invoke('setValue', JSON.stringify(formSchema, null, 2));
|
||||
common.startRun();
|
||||
|
||||
cy.get('body').as('body');
|
||||
|
||||
cy.get('.previewArea').within(() => {
|
||||
// Declare action elements
|
||||
cy.get('label').contains('name1').parent().within(() => {
|
||||
cy.get('input').type('da');
|
||||
cy.get('@body').find('li:contains("daniel")').click();
|
||||
cy.get('input').should('have.value', 'daniel');
|
||||
})
|
||||
|
||||
cy.get('label').contains('name2').parent().within(() => {
|
||||
cy.get('input').focus();
|
||||
cy.wait('@autocomplete').then(xhr => {
|
||||
expect(xhr.url).to.be.contains('name=daniel&keyword=')
|
||||
});
|
||||
cy.get('input').type('sa');
|
||||
cy.wait('@autocomplete').then(xhr => {
|
||||
expect(xhr.url).to.be.contains('name=daniel&keyword=sa')
|
||||
});
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
@@ -106,44 +106,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] trim: 前后去空格。默认值是true',
|
||||
en: '[ATTR] trim: remove the spaces before and after. Default is true'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
name: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
trim: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] clearable: 当有内容时显示清空按钮。默认值是false',
|
||||
en: '[ATTR] clearable: With clear button. Default is false'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
name: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
clearable: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] readonly: 只读状态',
|
||||
@@ -214,6 +176,44 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] trim: 前后去空格。默认值是true',
|
||||
en: '[ATTR] trim: remove the spaces before and after. Default is true'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
name: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
trim: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] clearable: 当有内容时显示清空按钮。默认值是false',
|
||||
en: '[ATTR] clearable: With clear button. Default is false'
|
||||
},
|
||||
schema: {
|
||||
type: 'object',
|
||||
properties: {
|
||||
name: {
|
||||
type: 'string',
|
||||
ui: {
|
||||
widgetConfig: {
|
||||
clearable: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: {
|
||||
cn: '[属性] prefixIcon: 前图标样式名',
|
||||
|
||||
@@ -1,53 +1,157 @@
|
||||
<template>
|
||||
<div class="ncform-input">
|
||||
<!-- 没有自动补全 -->
|
||||
<el-input v-if="!mergeConfig.autocomplete" :disabled="disabled" :readonly="readonly" :placeholder="placeholder" v-show="!hidden" :clearable="mergeConfig.clearable" :type="mergeConfig.type === 'file' ? 'text' : mergeConfig.type" :prefix-icon="mergeConfig.prefixIcon" :suffix-icon="mergeConfig.suffixIcon" v-model="inputVal">
|
||||
|
||||
<el-input
|
||||
v-if="!mergeConfig.autocomplete"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
:placeholder="placeholder"
|
||||
v-show="!hidden"
|
||||
:clearable="mergeConfig.clearable"
|
||||
:type="mergeConfig.type === 'file' ? 'text' : mergeConfig.type"
|
||||
:prefix-icon="mergeConfig.prefixIcon"
|
||||
:suffix-icon="mergeConfig.suffixIcon"
|
||||
v-model="inputVal"
|
||||
>
|
||||
<template v-if="mergeConfig.type !== 'file' && mergeConfig.compound">
|
||||
<template slot="prepend" v-if="mergeConfig.compound.prependLabel">{{mergeConfig.compound.prependLabel}}</template>
|
||||
<template slot="append" v-if="mergeConfig.compound.appendLabel">{{mergeConfig.compound.appendLabel}}</template>
|
||||
<template
|
||||
slot="prepend"
|
||||
v-if="mergeConfig.compound.prependLabel"
|
||||
>{{mergeConfig.compound.prependLabel}}</template>
|
||||
<template
|
||||
slot="append"
|
||||
v-if="mergeConfig.compound.appendLabel"
|
||||
>{{mergeConfig.compound.appendLabel}}</template>
|
||||
|
||||
<el-button slot="prepend" v-if="mergeConfig.compound.prependIcon" :icon="mergeConfig.compound.prependIcon"></el-button>
|
||||
<el-button slot="append" v-if="mergeConfig.compound.appendIcon" :icon="mergeConfig.compound.appendIcon"></el-button>
|
||||
<el-button
|
||||
slot="prepend"
|
||||
v-if="mergeConfig.compound.prependIcon"
|
||||
:icon="mergeConfig.compound.prependIcon"
|
||||
></el-button>
|
||||
<el-button
|
||||
slot="append"
|
||||
v-if="mergeConfig.compound.appendIcon"
|
||||
:icon="mergeConfig.compound.appendIcon"
|
||||
></el-button>
|
||||
|
||||
<el-select v-if="mergeConfig.compound.prependSelect" v-model="prependSelectVal" slot="prepend" :placeholder="$t('selectPls')">
|
||||
<el-option v-for="item in prependSelectOptions" :label="item[mergeConfig.compound.prependSelect.itemLabelField]" :value="item[mergeConfig.compound.prependSelect.itemValueField]" :key="item[mergeConfig.compound.prependSelect.itemValueField]"></el-option>
|
||||
<el-select
|
||||
v-if="mergeConfig.compound.prependSelect"
|
||||
v-model="prependSelectVal"
|
||||
slot="prepend"
|
||||
:placeholder="$t('selectPls')"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in prependSelectOptions"
|
||||
:label="item[mergeConfig.compound.prependSelect.itemLabelField]"
|
||||
:value="item[mergeConfig.compound.prependSelect.itemValueField]"
|
||||
:key="item[mergeConfig.compound.prependSelect.itemValueField]"
|
||||
></el-option>
|
||||
</el-select>
|
||||
|
||||
<el-select v-if="mergeConfig.compound.appendSelect" v-model="appendSelectVal" slot="append" :placeholder="$t('selectPls')">
|
||||
<el-option v-for="item in appendSelectOptions" :label="item[mergeConfig.compound.appendSelect.itemLabelField]" :value="item[mergeConfig.compound.appendSelect.itemValueField]" :key="item[mergeConfig.compound.appendSelect.itemValueField]"></el-option>
|
||||
<el-select
|
||||
v-if="mergeConfig.compound.appendSelect"
|
||||
v-model="appendSelectVal"
|
||||
slot="append"
|
||||
:placeholder="$t('selectPls')"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in appendSelectOptions"
|
||||
:label="item[mergeConfig.compound.appendSelect.itemLabelField]"
|
||||
:value="item[mergeConfig.compound.appendSelect.itemValueField]"
|
||||
:key="item[mergeConfig.compound.appendSelect.itemValueField]"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<!--上传类型-->
|
||||
<template v-else-if="mergeConfig.type === 'file' && mergeConfig.upload">
|
||||
<el-button slot="append" v-if="mergeConfig.upload.uploadUrl" class="ncform-input-upload" @click="handleClickUpload">{{isUploading ? $t('uploading') : mergeConfig.upload.uploadText || $t('upload')}}
|
||||
<input type="file" ref="upload" :accept="mergeConfig.upload.accept || ''" @change="handleFileChange" />
|
||||
<el-button
|
||||
slot="append"
|
||||
v-if="mergeConfig.upload.uploadUrl"
|
||||
class="ncform-input-upload"
|
||||
@click="handleClickUpload"
|
||||
>
|
||||
{{isUploading ? $t('uploading') : mergeConfig.upload.uploadText || $t('upload')}}
|
||||
<input
|
||||
type="file"
|
||||
ref="upload"
|
||||
:accept="mergeConfig.upload.accept || ''"
|
||||
@change="handleFileChange"
|
||||
>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
|
||||
<!-- 自动补全 -->
|
||||
<el-autocomplete v-else :disabled="disabled" :readonly="readonly" :placeholder="placeholder" v-show="!hidden" :clearable="mergeConfig.clearable" :type="mergeConfig.type" :prefix-icon="mergeConfig.prefixIcon" :suffix-icon="mergeConfig.suffixIcon" :fetch-suggestions="querySearch" :trigger-on-focus="!!mergeConfig.autocomplete.immediateShow" :value-key="mergeConfig.autocomplete.itemValueField || 'value'" v-model="inputVal">
|
||||
|
||||
<template slot-scope="props" v-if="mergeConfig.autocomplete && mergeConfig.autocomplete.itemTemplate">
|
||||
<component :is="itemTemplate" :item="props.item">
|
||||
</component>
|
||||
<el-autocomplete
|
||||
v-else
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
:placeholder="placeholder"
|
||||
v-show="!hidden"
|
||||
:clearable="mergeConfig.clearable"
|
||||
:type="mergeConfig.type"
|
||||
:prefix-icon="mergeConfig.prefixIcon"
|
||||
:suffix-icon="mergeConfig.suffixIcon"
|
||||
:fetch-suggestions="querySearch"
|
||||
:trigger-on-focus="!!mergeConfig.autocomplete.immediateShow"
|
||||
:value-key="mergeConfig.autocomplete.itemValueField || 'value'"
|
||||
v-model="inputVal"
|
||||
>
|
||||
<template
|
||||
slot-scope="props"
|
||||
v-if="mergeConfig.autocomplete && mergeConfig.autocomplete.itemTemplate"
|
||||
>
|
||||
<component :is="itemTemplate" :item="props.item"></component>
|
||||
</template>
|
||||
|
||||
<template v-if="mergeConfig.compound">
|
||||
<template slot="prepend" v-if="mergeConfig.compound.prependLabel">{{mergeConfig.compound.prependLabel}}</template>
|
||||
<template slot="append" v-if="mergeConfig.compound.appendLabel">{{mergeConfig.compound.appendLabel}}</template>
|
||||
<template
|
||||
slot="prepend"
|
||||
v-if="mergeConfig.compound.prependLabel"
|
||||
>{{mergeConfig.compound.prependLabel}}</template>
|
||||
<template
|
||||
slot="append"
|
||||
v-if="mergeConfig.compound.appendLabel"
|
||||
>{{mergeConfig.compound.appendLabel}}</template>
|
||||
|
||||
<el-button slot="prepend" v-if="mergeConfig.compound.prependIcon" :icon="mergeConfig.compound.prependIcon"></el-button>
|
||||
<el-button slot="append" v-if="mergeConfig.compound.appendIcon" :icon="mergeConfig.compound.appendIcon"></el-button>
|
||||
<el-button
|
||||
slot="prepend"
|
||||
v-if="mergeConfig.compound.prependIcon"
|
||||
:icon="mergeConfig.compound.prependIcon"
|
||||
></el-button>
|
||||
<el-button
|
||||
slot="append"
|
||||
v-if="mergeConfig.compound.appendIcon"
|
||||
:icon="mergeConfig.compound.appendIcon"
|
||||
></el-button>
|
||||
|
||||
<el-select v-if="mergeConfig.compound.prependSelect" v-model="prependSelectVal" slot="prepend" :placeholder="$t('selectPls')">
|
||||
<el-option v-for="item in prependSelectOptions" :label="item[mergeConfig.compound.prependSelect.itemLabelField]" :value="item[mergeConfig.compound.prependSelect.itemValueField]" :key="item[mergeConfig.compound.prependSelect.itemValueField]"></el-option>
|
||||
<el-select
|
||||
v-if="mergeConfig.compound.prependSelect"
|
||||
v-model="prependSelectVal"
|
||||
slot="prepend"
|
||||
:placeholder="$t('selectPls')"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in prependSelectOptions"
|
||||
:label="item[mergeConfig.compound.prependSelect.itemLabelField]"
|
||||
:value="item[mergeConfig.compound.prependSelect.itemValueField]"
|
||||
:key="item[mergeConfig.compound.prependSelect.itemValueField]"
|
||||
></el-option>
|
||||
</el-select>
|
||||
|
||||
<el-select v-if="mergeConfig.compound.appendSelect" v-model="appendSelectVal" slot="append" :placeholder="$t('selectPls')">
|
||||
<el-option v-for="item in appendSelectOptions" :label="item[mergeConfig.compound.appendSelect.itemLabelField]" :value="item[mergeConfig.compound.appendSelect.itemValueField]" :key="item[mergeConfig.compound.appendSelectVal.itemValueField]"></el-option>
|
||||
<el-select
|
||||
v-if="mergeConfig.compound.appendSelect"
|
||||
v-model="appendSelectVal"
|
||||
slot="append"
|
||||
:placeholder="$t('selectPls')"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in appendSelectOptions"
|
||||
:label="item[mergeConfig.compound.appendSelect.itemLabelField]"
|
||||
:value="item[mergeConfig.compound.appendSelect.itemValueField]"
|
||||
:key="item[mergeConfig.compound.appendSelectVal.itemValueField]"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-autocomplete>
|
||||
@@ -55,29 +159,28 @@
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.ncform-input {
|
||||
.el-select .el-input {
|
||||
width: 130px;
|
||||
}
|
||||
.input-with-select .el-input-group__prepend {
|
||||
background-color: #fff;
|
||||
}
|
||||
.ncform-input-upload {
|
||||
[type="file"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.el-autocomplete {
|
||||
width: 100%;
|
||||
.ncform-input {
|
||||
.el-select .el-input {
|
||||
width: 130px;
|
||||
}
|
||||
.input-with-select .el-input-group__prepend {
|
||||
background-color: #fff;
|
||||
}
|
||||
.ncform-input-upload {
|
||||
[type="file"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.el-autocomplete {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import ncformCommon from '@ncform/ncform-common';
|
||||
import ncformCommon from "@ncform/ncform-common";
|
||||
import _get from "lodash-es/get";
|
||||
import _cloneDeep from 'lodash-es/cloneDeep';
|
||||
import _cloneDeep from "lodash-es/cloneDeep";
|
||||
|
||||
const controlMixin = ncformCommon.mixins.vue.controlMixin;
|
||||
|
||||
@@ -86,14 +189,29 @@ export default {
|
||||
|
||||
i18nData: {
|
||||
en: {
|
||||
selectPls: 'Select Please',
|
||||
uploading: 'Uploading...',
|
||||
upload: 'Upload'
|
||||
selectPls: "Select Please",
|
||||
uploading: "Uploading...",
|
||||
upload: "Upload",
|
||||
uploadFail: "Upload failed, please try again later!",
|
||||
resolutionTip1:
|
||||
"Please upload an image of <%= right %>, your image is <%= wrong %>",
|
||||
resolutionTip2:
|
||||
"Please upload an image with an aspect ratio of <%= right %>. Your image aspect ratio is <%= wrong %>",
|
||||
sizeTips1:
|
||||
"Please upload a file smaller than <%= right %>KB, your file is <%= wrong %>KB",
|
||||
sizeTips2:
|
||||
"Please upload a file larger than <%= right %>KB, your file is <%= wrong %>KB"
|
||||
},
|
||||
zh_cn: {
|
||||
selectPls: '请选择',
|
||||
uploading: '上传中...',
|
||||
upload: '点击上传'
|
||||
selectPls: "请选择",
|
||||
uploading: "上传中...",
|
||||
upload: "点击上传",
|
||||
uploadFail: "上传失败，请稍后再试！",
|
||||
resolutionTip1: "请上传<%= right %>的图片，你的图片为<%= wrong %>",
|
||||
resolutionTip2:
|
||||
"请上传宽高比为<%= right %>的图片，你的图片宽高比为<%= wrong %>",
|
||||
sizeTips1: "请上传小于<%= right %>KB的文件，您的文件为<%= wrong %>KB",
|
||||
sizeTips2: "请上传大于<%= right %>KB的文件，您的文件为<%= wrong %>KB"
|
||||
}
|
||||
},
|
||||
|
||||
@@ -190,7 +308,6 @@ export default {
|
||||
this.$emit("input", val);
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
data() {
|
||||
@@ -281,7 +398,10 @@ export default {
|
||||
|
||||
computed: {
|
||||
autocompleteOtherParams() {
|
||||
let otherParams = _cloneDeep(_get(this.mergeConfig, 'autocomplete.enumSourceRemote.otherParams'), {});
|
||||
let otherParams = _cloneDeep(
|
||||
_get(this.mergeConfig, "autocomplete.enumSourceRemote.otherParams"),
|
||||
{}
|
||||
);
|
||||
for (let key in otherParams) {
|
||||
otherParams[key] = this._analyzeVal(otherParams[key]);
|
||||
}
|
||||
@@ -347,9 +467,10 @@ export default {
|
||||
fileSize > vm.mergeConfig.upload.constraint.maxSize
|
||||
) {
|
||||
vm.$message({
|
||||
message: `请上传小于${
|
||||
vm.mergeConfig.upload.constraint.maxSize
|
||||
}KB的文件，您的文件为${fileSize.toFixed(0)}KB`,
|
||||
message: vm.$t("sizeTips1", {
|
||||
right: vm.mergeConfig.upload.constraint.maxSize,
|
||||
wrong: fileSize.toFixed(0)
|
||||
}),
|
||||
type: "error"
|
||||
});
|
||||
return;
|
||||
@@ -359,9 +480,10 @@ export default {
|
||||
fileSize < vm.mergeConfig.upload.constraint.minSize
|
||||
) {
|
||||
vm.$message({
|
||||
message: `请上传大于${
|
||||
vm.mergeConfig.upload.constraint.minSize
|
||||
}KB的文件，您的文件为${fileSize.toFixed(0)}KB`,
|
||||
message: vm.$t("sizeTips2", {
|
||||
right: vm.mergeConfig.upload.constraint.minSize,
|
||||
wrong: fileSize.toFixed(0)
|
||||
}),
|
||||
type: "error"
|
||||
});
|
||||
return;
|
||||
@@ -385,30 +507,36 @@ export default {
|
||||
this.height === vm.mergeConfig.upload.constraint.height;
|
||||
} else {
|
||||
pass =
|
||||
(this.width / this.height).toFixed(0) ===
|
||||
(this.width / this.height).toFixed(1) ===
|
||||
(
|
||||
vm.mergeConfig.upload.constraint.width /
|
||||
vm.mergeConfig.upload.constraint.height
|
||||
).toFixed(0);
|
||||
).toFixed(1);
|
||||
}
|
||||
if (!pass) {
|
||||
if (vm.mergeConfig.upload.constraint.sizeFixed) {
|
||||
vm.$message({
|
||||
message: `请上传${vm.mergeConfig.upload.constraint.width}x${
|
||||
vm.mergeConfig.upload.constraint.height
|
||||
}的图片，你的图片为${this.width}x${this.height}`,
|
||||
message: vm.$t("resolutionTip1", {
|
||||
right: `${vm.mergeConfig.upload.constraint.width}x${
|
||||
vm.mergeConfig.upload.constraint.height
|
||||
}`,
|
||||
wrong: `${this.width}x${this.height}`
|
||||
}),
|
||||
type: "error"
|
||||
});
|
||||
} else {
|
||||
vm.$message({
|
||||
message: `请上传宽高比为${vm._getFractionalExpression(
|
||||
vm.mergeConfig.upload.constraint.width /
|
||||
vm.mergeConfig.upload.constraint.height,
|
||||
0.01
|
||||
)}的图片，你的图片宽高比为${vm._getFractionalExpression(
|
||||
this.width / this.height,
|
||||
0.01
|
||||
)}`,
|
||||
message: vm.$t("resolutionTip2", {
|
||||
right: vm._getFractionalExpression(
|
||||
vm.mergeConfig.upload.constraint.width /
|
||||
vm.mergeConfig.upload.constraint.height,
|
||||
0.01
|
||||
),
|
||||
wrong: vm._getFractionalExpression(
|
||||
this.width / this.height,
|
||||
0.01
|
||||
)
|
||||
}),
|
||||
type: "error"
|
||||
});
|
||||
}
|
||||
@@ -439,7 +567,7 @@ export default {
|
||||
this.$data.isUploading = false;
|
||||
})
|
||||
.catch(() => {
|
||||
vm.$message.error(`上传失败，请稍后再试！`);
|
||||
vm.$message.error(this.$t("uploadFail"));
|
||||
this.$data.isUploading = false;
|
||||
});
|
||||
});
|
||||
@@ -472,7 +600,7 @@ export default {
|
||||
val = this.$data.inputVal;
|
||||
}
|
||||
|
||||
if(this.$data.mergeConfig.trim){
|
||||
if (this.$data.mergeConfig.trim) {
|
||||
val = val ? val.toString().trim() : val;
|
||||
}
|
||||
|
||||
@@ -503,8 +631,7 @@ export default {
|
||||
] = this.$data.appendSelectVal;
|
||||
}
|
||||
return obj;
|
||||
}
|
||||
else{
|
||||
} else {
|
||||
this.$data.inputVal = val;
|
||||
return val;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user