Skip to content

V
vue-form
提交 5de5b387 authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

chore: update

上级 ae777f0c
隐藏空白字符变更
内嵌 并排
正在显示 包含 255 行增加 和 101 行删除
examples/ciis/application/form/info/profile.js
浏览文件 @ 5de5b387
......@@ -183,7 +183,8 @@ export default {
label: '姓名',
model: 'real_name_cn',
attrs: { placeholder: '请输入姓名' },
rules: [{ required: true, message: '请输入姓名', trigger: 'blur' }]
rules: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
prependSlotName: 'form-name-prepend'
},
{
type: 'v-radio',
......
examples/ciis/application/index.vue
浏览文件 @ 5de5b387
......@@ -19,6 +19,7 @@
<template #content v-if="currentActive === 'application_pay'">
<!-- <app-pay /> -->
</template>
<template #form-name-prepend> 正确 </template>
</vue-form>
<el-dialog title="预览全部" :visible.sync="dialogVisible" width="790px">
<!-- <app-preview /> -->
......
package-lock.json
浏览文件 @ 5de5b387
{
"name": "@ezijing/vue-form",
"version": "2.1.6",
"version": "2.3.10",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
......@@ -1722,6 +1722,16 @@
"integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=",
"dev": true
},
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"cacache": {
"version": "13.0.1",
"resolved": "https://registry.npm.taobao.org/cacache/download/cacache-13.0.1.tgz?cache=0&sync_timestamp=1594428006433&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcacache%2Fdownload%2Fcacache-13.0.1.tgz",
......@@ -1748,6 +1758,34 @@
"unique-filename": "^1.1.1"
}
},
"chalk": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"optional": true
},
"find-cache-dir": {
"version": "3.3.1",
"resolved": "https://registry.npm.taobao.org/find-cache-dir/download/find-cache-dir-3.3.1.tgz",
......@@ -1769,6 +1807,25 @@
"path-exists": "^4.0.0"
}
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"optional": true
},
"loader-utils": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
"integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"locate-path": {
"version": "5.0.0",
"resolved": "https://registry.npm.taobao.org/locate-path/download/locate-path-5.0.0.tgz?cache=0&sync_timestamp=1597081904643&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flocate-path%2Fdownload%2Flocate-path-5.0.0.tgz",
......@@ -1833,6 +1890,16 @@
"minipass": "^3.1.1"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
},
"terser-webpack-plugin": {
"version": "2.3.8",
"resolved": "https://registry.npm.taobao.org/terser-webpack-plugin/download/terser-webpack-plugin-2.3.8.tgz?cache=0&sync_timestamp=1603804897513&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fterser-webpack-plugin%2Fdownload%2Fterser-webpack-plugin-2.3.8.tgz",
......@@ -1849,6 +1916,18 @@
"terser": "^4.6.12",
"webpack-sources": "^1.4.3"
}
},
"vue-loader-v16": {
"version": "npm:vue-loader@16.8.3",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
"integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
}
}
}
},
......@@ -11768,87 +11847,6 @@
}
}
},
"vue-loader-v16": {
"version": "npm:vue-loader@16.0.0-beta.9",
"resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-16.0.0-beta.9.tgz?cache=0&sync_timestamp=1603783106162&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-16.0.0-beta.9.tgz",
"integrity": "sha1-UlEsthwpaCfJnA1UOYvvhL5ESPw=",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
},
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-4.3.0.tgz",
"integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.0",
"resolved": "https://registry.npm.taobao.org/chalk/download/chalk-4.1.0.tgz?cache=0&sync_timestamp=1591687042638&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fchalk%2Fdownload%2Fchalk-4.1.0.tgz",
"integrity": "sha1-ThSHCmGNni7dl92DRf2dncMVZGo=",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
"integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz",
"integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
"dev": true,
"optional": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-4.0.0.tgz",
"integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
"dev": true,
"optional": true
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
"integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1598611719015&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz",
"integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
}
}
},
"vue-router": {
"version": "3.4.8",
"resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.4.8.tgz",
......
package.json
浏览文件 @ 5de5b387
{
"name": "@ezijing/vue-form",
"version": "2.2.12",
"version": "2.3.12",
"private": false,
"description": "基于Vue Element-UI的表单",
"scripts": {
......
src/VueForm.vue
浏览文件 @ 5de5b387
......@@ -11,14 +11,24 @@
<slot>
<!-- 选项卡 -->
<template v-if="page.tabs">
<v-card-tabs :default-active="tabActive" v-bind="page" v-on="$listeners"></v-card-tabs>
<v-card-tabs :default-active="tabActive" v-bind="page" v-on="$listeners">
<!-- slot -->
<template v-slot:[slotName]="slotProps" v-for="slotName in tabSlotNames">
<slot :name="slotName" v-bind="slotProps"></slot>
</template>
</v-card-tabs>
</template>
<template v-else>
<v-card v-bind="page" v-on="$listeners">
<slot name="content">
<div class="v-layout-html" v-html="page.html" v-if="page.html"></div>
<v-form-pane v-bind="page" v-on="$listeners" v-if="page.form"></v-form-pane>
<v-form-pane v-bind="page" v-on="$listeners" v-if="page.form">
<!-- slot -->
<template v-slot:[slotName]="slotProps" v-for="slotName in slotNames">
<slot :name="slotName" v-bind="slotProps"></slot>
</template>
</v-form-pane>
</slot>
</v-card>
</template>
......@@ -61,6 +71,39 @@ export default {
computed: {
page() {
return this.getDeepItem(this.menus, this.activeId)
},
tabSlotNames() {
const slotNames = []
this.page?.tabs?.forEach(tab => {
tab.form?.items?.forEach(item => {
if (item.slotName) {
slotNames.push(item.slotName)
}
if (item.prependSlotName) {
slotNames.push(item.prependSlotName)
}
if (item.appendSlotName) {
slotNames.push(item.appendSlotName)
}
})
})
return slotNames
},
slotNames() {
return (
this.page?.form?.items?.reduce((slotNames, item) => {
if (item.slotName) {
slotNames.push(item.slotName)
}
if (item.prependSlotName) {
slotNames.push(item.prependSlotName)
}
if (item.appendSlotName) {
slotNames.push(item.appendSlotName)
}
return slotNames
}, []) || []
)
}
},
methods: {
......
src/packages/form/src/form-pane.vue
浏览文件 @ 5de5b387
......@@ -18,13 +18,29 @@
v-on="$listeners"
ref="form"
class="v-form-group__content"
></v-form>
>
<!-- slot -->
<template v-slot:[slotName]="slotProps" v-for="slotName in slotNames">
<slot :name="slotName" v-bind="slotProps"></slot>
</template>
</v-form>
<template v-if="form.aside">
<div class="v-form-group__aside">
<div v-html="form.aside.prepend.html" v-if="form.aside.prepend.visible && form.aside.prepend.visible(item)"></div>
<div
v-html="form.aside.prepend.html"
v-if="form.aside.prepend.visible && form.aside.prepend.visible(item)"
></div>
<div>
<div v-for="(button, i) in form.aside.buttons" :key="i">
<el-button type="primary" size="medium" plain @click="button.onClick(item, $refs.form[index])" v-if="button.visible && button.visible(item)"> {{ button.text }}</el-button>
<el-button
type="primary"
size="medium"
plain
@click="button.onClick(item, $refs.form[index])"
v-if="button.visible && button.visible(item)"
>
{{ button.text }}</el-button
>
</div>
</div>
</div>
......@@ -38,17 +54,46 @@
<div class="v-form-group__add">
<i class="el-icon-circle-plus" @click="handleAdd"></i>
</div>
<v-form :options="form.options" :items="form.appendItems" :model="model[0] || model" :hasButton="false" v-on="$listeners" ref="form" v-if="form.appendItems"></v-form>
<v-form
:options="form.options"
:items="form.appendItems"
:model="model[0] || model"
:hasButton="false"
v-on="$listeners"
ref="form"
v-if="form.appendItems"
></v-form>
</template>
<!-- 一个表单 -->
<template v-else>
<v-form :options="form.options" :items="form.items" :model="model" :hasButton="false" :submitText="form.submitText" @onSubmit="onSubmit" v-on="$listeners" ref="form"></v-form>
<v-form
:options="form.options"
:items="form.items"
:model="model"
:hasButton="false"
:submitText="form.submitText"
@onSubmit="onSubmit"
v-on="$listeners"
ref="form"
>
<!-- slot -->
<template v-slot:[slotName]="slotProps" v-for="slotName in slotNames">
<slot :name="slotName" v-bind="slotProps"></slot>
</template>
</v-form>
</template>
<div class="v-form-footer">
<el-button type="primary" size="medium" @click="handlePrev" v-if="form.prev">上一步</el-button>
<el-button type="primary" size="medium" :disabled="currentForm.options.disabled" @click="handleSubmit" v-if="currentForm.hasButton">{{ form.submitText || '保存' }}</el-button>
<el-button
type="primary"
size="medium"
:disabled="currentForm.options.disabled"
@click="handleSubmit"
v-if="currentForm.hasButton"
>{{ form.submitText || '保存' }}</el-button
>
<el-button type="primary" size="medium" @click="handleNext" v-if="form.next">下一步</el-button>
</div>
</div>
......@@ -88,6 +133,22 @@ export default {
},
that() {
return this
},
slotNames() {
return (
this.form?.items?.reduce((slotNames, item) => {
if (item.slotName) {
slotNames.push(item.slotName)
}
if (item.prependSlotName) {
slotNames.push(item.prependSlotName)
}
if (item.appendSlotName) {
slotNames.push(item.appendSlotName)
}
return slotNames
}, []) || []
)
}
},
methods: {
......@@ -96,7 +157,16 @@ export default {
},
// 获取
getData() {
let { action: url, method = 'get', headers = {}, params = {}, data = {}, beforeRequest, callback, errorCallback } = this.get
let {
action: url,
method = 'get',
headers = {},
params = {},
data = {},
beforeRequest,
callback,
errorCallback
} = this.get
if (beforeRequest) {
data = beforeRequest(data)
}
......
src/packages/form/src/form.vue
浏览文件 @ 5de5b387
......@@ -11,9 +11,30 @@
>
<template v-for="item in currentItems">
<el-form-item v-bind="item" :prop="item.model" :key="item.model">
<div class="v-form-item__prepend" v-html="item.prepend" v-if="item.prepend"></div>
<component :is="item.type" :options="item" :data="ruleForm" v-on="$listeners" v-bind="item.attrs"></component>
<div class="v-form-item__append" v-html="item.append" v-if="item.append"></div>
<template v-if="item.slotName">
<slot :name="item.slotName" v-bind="{ item, items, form: ruleForm }"></slot>
</template>
<template v-else>
<slot
:name="item.prependSlotName"
v-bind="{ item, items, form: ruleForm }"
v-if="item.prependSlotName"
></slot>
<div class="v-form-item__prepend" v-html="item.prepend" v-if="item.prepend"></div>
<component
:is="item.type"
:options="item"
:data="ruleForm"
v-on="$listeners"
v-bind="item.attrs"
></component>
<div class="v-form-item__append" v-html="item.append" v-if="item.append"></div>
<slot
:name="item.appendSlotName"
v-bind="{ item, items, form: ruleForm }"
v-if="item.appendSlotName"
></slot>
</template>
</el-form-item>
</template>
<el-form-item v-if="hasButton">
......@@ -95,4 +116,4 @@ export default {
}
}
}
</script>
\ No newline at end of file
</script>
src/packages/layout/src/card-tabs.vue
浏览文件 @ 5de5b387
......@@ -10,7 +10,12 @@
{{ tab.title }}
<span class="red" v-if="tab.required">*</span>
</template>
<v-form-pane v-bind="tab" v-on="$listeners"></v-form-pane>
<v-form-pane v-bind="tab" v-on="$listeners">
<!-- slot -->
<template v-slot:[slotName]="slotProps" v-for="slotName in tabSlotNames">
<slot :name="slotName" v-bind="slotProps"></slot>
</template>
</v-form-pane>
</el-tab-pane>
</el-tabs>
</div>
......@@ -52,6 +57,23 @@ export default {
return this.tabs.filter(item => {
return item.visible === undefined || item.visible.call(this.$parent)
})
},
tabSlotNames() {
const slotNames = []
this.tabs?.forEach(tab => {
tab.form?.items?.forEach(item => {
if (item.slotName) {
slotNames.push(item.slotName)
}
if (item.prependSlotName) {
slotNames.push(item.prependSlotName)
}
if (item.appendSlotName) {
slotNames.push(item.appendSlotName)
}
})
})
return slotNames
}
},
methods: {
......@@ -94,4 +116,4 @@ export default {
.red {
color: var(--main-color);
}
</style>
\ No newline at end of file
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论