Skip to content

W
way-view-form
Commit 882fccf4 authored by 刘子康's avatar 刘子康
Browse files
Options

增加demo

parent 7b8018fb
Hide whitespace changes
Inline Side-by-side
Showing with 444 additions and 40 deletions
src/App.vue
View file @ 882fccf4
<template>
<div class="SearchForm">
<way-view-form model="search" inlineBlock :formProps="formProps" ref="queryForm" :form="originData"
@submit="handleSubmit" :enableSpin="false" :action="['submit', 'reset']" @reset="handleReset"
:actionProps="actionProps" :showFooter="false" />
<div class="demo-title">
查询模式
</div>
<div class="demo-box">
<SearchForm />
</div>
<div class="demo-title">
表单模式
</div>
<div class="demo-box">
<BaseForm />
</div>
</div>
</template>
<script>
import SearchForm from './demo/form.vue';
import BaseForm from './demo/form2.vue';
export default {
data() {
return {
......@@ -69,15 +81,12 @@ export default {
},
};
},
components: {
SearchForm,
BaseForm
},
methods: {
handleSubmit(formData) {
if (!formData.formValues.name && !formData.formValues.type) return this.$Message.warning('请输入搜索项，再搜索！')
this.$emit('handleSearch', formData.formValues)
},
handleReset() {
this.$emit('handleSearch', {})
},
},
watch: {
......@@ -87,6 +96,37 @@ export default {
<style lang='less' scoped>
.SearchForm {
padding: 24px 0 24px 0;
padding: 24px;
margin: 0 auto;
max-width: 900px;
}
.demo-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 20px;
margin-top: 25px;
}
.demo-box {
margin-bottom: 20px;
padding: 20px;
transition: all 0.3s;
border-radius: 5px;
&:hover {
box-shadow: 0 0 10px #ccc;
}
}
</style>
<style lang="less">
.opation {
display: flex;
flex-wrap: wrap;
/* 元素换行 */
margin-bottom: 20px;
}
</style>
\ No newline at end of file
src/components/index.vue
View file @ 882fccf4
......@@ -163,7 +163,9 @@ export default {
props: {
model: this.formValues,
rules: this.rules,
...this.formProps
...this.formProps,
// 隐藏标签时默认标签位置为顶部
labelPosition: this.formProps.hideLabel ? 'top' : this.formProps.labelPosition,
},
on: {
...this.formEvents
......@@ -248,8 +250,7 @@ export default {
res.rules[item.key] = [tips]
}
}
console.log(hasOwnPropertySafely(item, 'source'))
console.log(hasOwnPropertySafely(item.source, 'data'))
// 如果设置了source自动生成请求
if (hasOwnPropertySafely(item, 'source') && hasOwnPropertySafely(item, 'api') && hasOwnPropertySafely(item, 'key') && hasOwnPropertySafely(this.requestMethods, 'getMapData') && hasOwnPropertySafely(this.requestMethods, 'getBusinessData')) {
res.requests[item.key] = this.generatorRequestFunc(item, item.source.type)
......@@ -777,7 +778,6 @@ export default {
* @param {*} data
*/
setFormData(data) {
console.log(data)
if (data) {
this.$refs['formValues'].resetFields();
this.$nextTick(() => {
......@@ -786,7 +786,7 @@ export default {
this.formValues[key] = data[key];
}
});
console.log(this.formValues)
})
}
},
......@@ -818,29 +818,32 @@ export default {
.ivu-cascader {
line-height: inherit;
}
.ivu-input-number-input-wrap {
height: 25px !important;
}
.ivu-input-number-handler-wrap {
height: 22px !important;
top: 2px;
}
.ivu-input-number {
// background-color: #03102c;
width: 100% !important;
background: none;
border: 0px !important;
border-radius: 0px !important;
height: 26px !important;
line-height: 24px !important;
}
.ivu-input-number-handler {
height: 11px;
}
// 项目下的fix样式
// .ivu-input-number-input-wrap {
// height: 25px !important;
// }
// .ivu-input-number-handler-wrap {
// height: 22px !important;
// top: 2px;
// }
// .ivu-input-number {
// // background-color: #03102c;
// width: 100% !important;
// background: none;
// border: 0px !important;
// border-radius: 0px !important;
// height: 26px !important;
// line-height: 24px !important;
// }
// .ivu-input-number-handler {
// height: 11px;
// }
.ivu-select-input {
background-color: #041538 !important;
......@@ -889,7 +892,20 @@ export default {
.my-custom-form-hide-label {
.ivu-form-item-label {
display: none;
display: none !important;
}
}
.ivu-form-label-top{
.ivu-form-item-label{
text-align: left!important;
}
.ivu-form-item-content{
margin-left: 0!important;
}
}
.ivu-form-label-right{
.ivu-form-item-label{
text-align: right!important;
}
}
......
src/demo/form.vue 0 → 100644
View file @ 882fccf4
<template>
<way-view-form model="search" inlineBlock :formProps="formProps" ref="queryForm" :form="originData"
@submit="handleSubmit" :enableSpin="false" :action="['submit', 'reset']" @reset="handleReset"
:actionProps="actionProps" :showFooter="false" />
</template>
<script>
export default {
name: 'SearchForm',
data() {
return {
formProps: {
hideLabel: true,
inline: true,
},
originData: [
{
name: '姓名',
required: false,
type: 'Input',
key: 'name',
value: '',
},
{
name: '工种',
type: 'Select',
key: 'type',
required: false,
componentsProps: {
clearable: true
},
source: {
data: [
{
name: '1',
id: '1'
},
{
name: '2',
id: '2'
},
{
name: '3',
id: '3'
},
],
},
showName: 'name',
showValue: 'id',
},
],
actionProps: {
submit: {
componentsProps: {
type: 'primary',
icon: 'md-search',
},
text: '查询'
},
reset: {
componentsProps: {
type: 'default',
icon: 'md-refresh',
},
text: '重置'
},
},
};
},
methods: {
handleSubmit(formData) {
if (!formData.formValues.name && !formData.formValues.type) return this.$Message.warning('请输入搜索项，再搜索！')
this.$emit('handleSearch', formData.formValues)
},
handleReset() {
this.$emit('handleSearch', {})
},
},
watch: {
}
}
</script>
<style lang='less' scoped>
.SearchForm {
padding: 24px;
}
.demo-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 20px;
}
</style>
\ No newline at end of file
src/demo/form2.vue 0 → 100644
View file @ 882fccf4
<template>
<div>
<div class="opation">
<label-item title="行内换行模式">
<i-switch v-model="formProps.inline" />
</label-item>
<label-item title="隐藏标签" tips="隐藏标签时默认标签位置为顶部">
<i-switch v-model="formProps.hideLabel" />
</label-item>
<label-item title="禁用">
<i-switch v-model="formProps.disabled" />
</label-item>
<label-item title="隐藏必填标记">
<i-switch v-model="formProps.hideRequiredMark" />
</label-item>
<label-item title="标签后冒号">
<i-switch v-model="formProps.labelColon" />
</label-item>
<label-item title="标签位置">
<i-select v-model="formProps.labelPosition" style="width: 120px">
<i-option value="left">左</i-option>
<i-option value="right">右</i-option>
<i-option value="top">上</i-option>
</i-select>
</label-item>
<label-item title="spin">
<i-switch v-model="spin" />
</label-item>
<label-item title="展示底部" tips="隐藏之后可以通过自定义操作按钮通过ref手动调用方法">
<i-switch v-model="showFooter" />
</label-item>
<label-item title="inlineBlock"
tips="该属性用于定义行内换行模式。如果设置为 true，则表单控件会在同一行中显示，并根据内容自动换行。如果设置为 false，则表单控件会分行显示。 ">
<i-switch v-model="inlineBlock" />
</label-item>
<label-item title="动态修改工种数据源"
tips="静态数据可以通过更改form数据来完成，如果是使用source配置的请求方法，可以通过 this.$refs.queryForm.updateSources('key')来重新获取">
<Button @click="changeSource">修改数据源</Button>
</label-item>
</div>
<way-view-form model="form" :inlineBlock="inlineBlock" :formProps="formProps" ref="queryForm" :form="originData"
@submit="handleSubmit" :enableSpin="spin" :action="['submit', 'reset']" @reset="handleReset"
:actionProps="actionProps" :showFooter="showFooter" />
</div>
</template>
<script>
import LabelItem from './label-item.vue'
export default {
name: 'SearchForm',
components: {
LabelItem
},
data() {
return {
spin: false,
showFooter: true,
inlineBlock: true,
formProps: {
hideLabel: false,
inline: false,
disabled: false,
hideRequiredMark: false,
labelColon: true,
labelPosition: 'left',
labelWidth: 100,
},
originData: [
{
name: '姓名',
required: true,
type: 'Input',
key: 'name',
value: '',
},
{
name: '隐藏字段',
hidden: true,
key: 'id',
value: '',
},
{
name: '年龄',
required: true,
type: 'InputNumber',
key: 'age',
value: 1,// 初始
},
{
name: '工种',
type: 'Select',
key: 'type',
required: true,
componentsProps: {
clearable: true
},
source: {
data: [
{
name: '1',
id: '1'
},
{
name: '2',
id: '2'
},
{
name: '3',
id: '3'
},
],
},
showName: 'name',
showValue: 'id',
},
{
name: '条件显隐字段',
type: 'i-switch',
key: 'visable',
value: false,// 初始
},
{
name: '自定义校验',
required: true,
placeholder: '请输入正整数',
type: 'InputNumber',
key: 'batchCount',
componentsProps: {
min: 1,
},
value: 1,// 初始
visitable: (status, form) => {
// form 为表单数据
return form.visable
},
rules: [{
required: true,
message: '请输入正整数',
trigger: ['change'],
pattern: /^[1-9]\d*$/
}]
},
],
actionProps: {
submit: {
componentsProps: {
type: 'primary',
icon: 'md-search',
},
text: '查询'
},
reset: {
componentsProps: {
type: 'default',
icon: 'md-refresh',
},
text: '重置'
},
},
};
},
methods: {
handleSubmit(formData) {
console.log(formData)
if (!formData.formValues.name && !formData.formValues.type) return this.$Message.warning('请输入搜索项，再搜索！')
this.$emit('handleSearch', formData.formValues)
},
handleReset() {
this.$emit('handleSearch', {})
},
changeSource() {
this.originData[3].source.data = [
{
name: '4',
id: '4'
},
{
name: '5',
id: '5'
},
{
name: '6',
id: '6'
},
]
}
},
watch: {
}
}
</script>
src/demo/label-item.vue 0 → 100644
View file @ 882fccf4
<template>
<div class="label-item">
<div class="title">
{{ title }}
</div>
<Poptip v-if="tips" word-wrap width="300" trigger="hover" :content="tips">
<Icon type="md-help-circle" />
</Poptip>
<div class="content">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: 'label-item',
props: {
title: {
type: String,
default: ''
},
tips: {
type: String,
default: ''
}
},
data() {
return {
};
},
methods: {}
}
</script>
<style lang='less' scoped>
.label-item {
display: inline-flex;
padding: 12px;
align-items: center;
.content {
padding-left: 12px;
}
}
</style>
\ No newline at end of file
src/main.js
View file @ 882fccf4
......@@ -4,8 +4,9 @@ import WayViewForm from "./index";
import ViewUI from "view-design";
import "view-design/dist/styles/iview.css";
Vue.use(WayViewForm);
Vue.use(ViewUI);
Vue.use(WayViewForm);
Vue.config.productionTip = false;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment