This commit is contained in:
ln1778
parent
58b2d52adf
commit
df94b0aa59
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "ag-element-ui",
|
||||
"version": "0.1.20",
|
||||
"version": "0.1.21",
|
||||
"main": "packages/index.js",
|
||||
"scripts": {
|
||||
"dev": "vue-cli-service serve",
|
||||
|
|
|
|||
|
|
@ -1,191 +1,322 @@
|
|||
<template>
|
||||
<el-form v-bind="$attrs" v-on="$listeners" :model="formValue" ref="formref">
|
||||
<ag-row>
|
||||
<ag-col v-for="item,index in data" :key="index" :span="item.span||24">
|
||||
<el-form-item v-bind="item" :prop="item.enName" >
|
||||
<slot :name="item.soltName" v-if="item.soltName" :row="item"/>
|
||||
<div class="contentbox" v-else>
|
||||
<ag-input v-model="formValue[item.enName]" type="textarea" v-bind="item" v-if="item.type=='ag-textarea'" size="small" clearable></ag-input>
|
||||
<ag-input v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-input'" size="small" clearable></ag-input>
|
||||
<ag-date-picker v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-date-picker'" size="small" clearable/>
|
||||
<ag-select v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-select'" size="small" clearable/>
|
||||
<el-radio-group v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-radio'&&formValue[item.enName]" size="small" clearable>
|
||||
<el-radio :label="it.value" v-for="it,index in item.options" :key="index">{{it.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
<el-checkbox-group v-bind="item" v-if="item.type=='ag-checkbox'&&formValue[item.enName]" v-model="formValue[item.enName]" size="small" clearable>
|
||||
<el-checkbox v-for="it,index in item.options" :label="it.value" :key="index">{{it.label}}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
<el-input-number v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-input-number'" clearable></el-input-number>
|
||||
<el-cascader v-model="formValue[item.enName]" v-bind="item" size="small" v-if="item.type=='ag-cascader'" clearable :style="{width:'100%'}"></el-cascader>
|
||||
<el-switch
|
||||
<ag-row>
|
||||
<ag-col v-for="(item, index) in data" :key="index" :span="item.span || 24">
|
||||
<el-form-item v-bind="item" :prop="item.enName">
|
||||
<slot :name="item.soltName" v-if="item.soltName" :row="item" />
|
||||
<div class="contentbox" v-else>
|
||||
<ag-input
|
||||
v-model="formValue[item.enName]"
|
||||
v-bind="item" size="small" v-if="item.type=='ag-switch'&&formValue[item.enName]" >
|
||||
</el-switch>
|
||||
<el-slider v-model="formValue[item.enName]"
|
||||
v-bind="item" size="small" v-if="item.type=='ag-slider'"></el-slider>
|
||||
<el-time-select
|
||||
:style="{width:'100%'}"
|
||||
type="textarea"
|
||||
v-bind="item"
|
||||
v-if="item.type == 'ag-textarea'"
|
||||
size="small"
|
||||
clearable
|
||||
v-model="formValue[item.enName]"
|
||||
v-bind="item" size="small"
|
||||
v-if="item.type=='ag-time-select'"
|
||||
:picker-options="item.options">
|
||||
></ag-input>
|
||||
<ag-input
|
||||
v-model="formValue[item.enName]"
|
||||
v-bind="item"
|
||||
v-if="item.type == 'ag-input'"
|
||||
size="small"
|
||||
clearable
|
||||
></ag-input>
|
||||
<ag-date-picker
|
||||
v-bind="item"
|
||||
v-model="formValue[item.enName]"
|
||||
v-if="item.type == 'ag-date-picker'"
|
||||
size="small"
|
||||
clearable
|
||||
/>
|
||||
<ag-select
|
||||
v-model="formValue[item.enName]"
|
||||
v-bind="item"
|
||||
v-if="item.type == 'ag-select'"
|
||||
size="small"
|
||||
clearable
|
||||
/>
|
||||
<el-radio-group
|
||||
v-model="formValue[item.enName]"
|
||||
v-bind="item"
|
||||
v-if="item.type == 'ag-radio' && formValue[item.enName]"
|
||||
size="small"
|
||||
clearable
|
||||
>
|
||||
<el-radio
|
||||
:label="it.value"
|
||||
v-for="(it, index) in item.options"
|
||||
:key="index"
|
||||
>{{ it.label }}</el-radio
|
||||
>
|
||||
</el-radio-group>
|
||||
<el-checkbox-group
|
||||
v-bind="item"
|
||||
v-if="item.type == 'ag-checkbox' && formValue[item.enName]"
|
||||
v-model="formValue[item.enName]"
|
||||
size="small"
|
||||
clearable
|
||||
>
|
||||
<el-checkbox
|
||||
v-for="(it, index) in item.options"
|
||||
:label="it.value"
|
||||
:key="index"
|
||||
>{{ it.label }}</el-checkbox
|
||||
>
|
||||
</el-checkbox-group>
|
||||
<el-input-number
|
||||
v-model="formValue[item.enName]"
|
||||
v-bind="item"
|
||||
v-if="item.type == 'ag-input-number'"
|
||||
clearable
|
||||
></el-input-number>
|
||||
<el-cascader
|
||||
v-model="formValue[item.enName]"
|
||||
v-bind="item"
|
||||
size="small"
|
||||
v-if="item.type == 'ag-cascader'"
|
||||
clearable
|
||||
:style="{ width: '100%' }"
|
||||
></el-cascader>
|
||||
<el-switch
|
||||
v-model="formValue[item.enName]"
|
||||
v-bind="item"
|
||||
size="small"
|
||||
v-if="item.type == 'ag-switch' && formValue[item.enName]"
|
||||
>
|
||||
</el-switch>
|
||||
<el-slider
|
||||
v-model="formValue[item.enName]"
|
||||
v-bind="item"
|
||||
size="small"
|
||||
v-if="item.type == 'ag-slider'"
|
||||
></el-slider>
|
||||
<el-time-select
|
||||
:style="{ width: '100%' }"
|
||||
clearable
|
||||
v-model="formValue[item.enName]"
|
||||
v-bind="item"
|
||||
size="small"
|
||||
v-if="item.type == 'ag-time-select'"
|
||||
:picker-options="item.options"
|
||||
>
|
||||
</el-time-select>
|
||||
<ag-upload v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-upload'" clear isPre></ag-upload>
|
||||
<el-rate v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-rate'" size="small"></el-rate>
|
||||
<agColorPicker v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-color-picker'" size="small">
|
||||
</agColorPicker>
|
||||
<el-transfer :data="item.data" v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-transfer'" size="small"></el-transfer>
|
||||
<agNumberRange v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-numberRange'" size="small" clearable/>
|
||||
<ag-multion-input v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-multion-input'" size="small" clearable/>
|
||||
<agQuery v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-query'" size="small" clearable/>
|
||||
<ag-mution-checkbox :datas="item.datas" v-bind="item" :placeholder="item.placeholder" v-model="formValue[item.enName]" v-if="item.type=='ag-mution-checkbox'" size="small"> </ag-mution-checkbox>
|
||||
<ag-multion-date-picker v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-multion-datte-picker'" size="small"/>
|
||||
<ag-upload
|
||||
v-bind="item"
|
||||
v-model="formValue[item.enName]"
|
||||
v-if="item.type == 'ag-upload'"
|
||||
@onError="$listeners.onError"
|
||||
clear
|
||||
isPre
|
||||
></ag-upload>
|
||||
<el-rate
|
||||
v-bind="item"
|
||||
v-model="formValue[item.enName]"
|
||||
v-if="item.type == 'ag-rate'"
|
||||
size="small"
|
||||
></el-rate>
|
||||
<agColorPicker
|
||||
v-bind="item"
|
||||
v-model="formValue[item.enName]"
|
||||
v-if="item.type == 'ag-color-picker'"
|
||||
size="small"
|
||||
>
|
||||
</agColorPicker>
|
||||
<el-transfer
|
||||
:data="item.data"
|
||||
v-bind="item"
|
||||
v-model="formValue[item.enName]"
|
||||
v-if="item.type == 'ag-transfer'"
|
||||
size="small"
|
||||
></el-transfer>
|
||||
<agNumberRange
|
||||
v-bind="item"
|
||||
v-model="formValue[item.enName]"
|
||||
v-if="item.type == 'ag-numberRange'"
|
||||
size="small"
|
||||
clearable
|
||||
/>
|
||||
<ag-multion-input
|
||||
v-bind="item"
|
||||
v-model="formValue[item.enName]"
|
||||
v-if="item.type == 'ag-multion-input'"
|
||||
size="small"
|
||||
clearable
|
||||
/>
|
||||
<agQuery
|
||||
v-bind="item"
|
||||
v-model="formValue[item.enName]"
|
||||
v-if="item.type == 'ag-query'"
|
||||
size="small"
|
||||
clearable
|
||||
/>
|
||||
<ag-mution-checkbox
|
||||
:datas="item.datas"
|
||||
v-bind="item"
|
||||
:placeholder="item.placeholder"
|
||||
v-model="formValue[item.enName]"
|
||||
v-if="item.type == 'ag-mution-checkbox'"
|
||||
size="small"
|
||||
>
|
||||
</ag-mution-checkbox>
|
||||
<ag-multion-date-picker
|
||||
v-bind="item"
|
||||
v-model="formValue[item.enName]"
|
||||
v-if="item.type == 'ag-multion-datte-picker'"
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<div v-if="item.tip" class="tipbox">
|
||||
<slot name="tip" :row="item"> {{ item.tip }}</slot>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</ag-col>
|
||||
</ag-row>
|
||||
<div class="footerbox" v-if="$listeners.onSubmit">
|
||||
</ag-row>
|
||||
<div class="footerbox" v-if="$listeners.onSubmit">
|
||||
<slot name="button" :value="formValue">
|
||||
<el-button @click="onSubmit" type="primary" size="small" class="submitbtn">
|
||||
{{submittitle||'提交'}}
|
||||
</el-button>
|
||||
</slot>
|
||||
</div>
|
||||
<el-button @click="onSubmit" type="primary" size="small" class="submitbtn">
|
||||
{{ submittitle || "提交" }}
|
||||
</el-button>
|
||||
</slot>
|
||||
</div>
|
||||
</el-form>
|
||||
</template>
|
||||
<script>
|
||||
</template>
|
||||
<script>
|
||||
import agInput from "./../../agInput/src/index.vue";
|
||||
import agDatePicker from "./../../agDatePicker/src/index.vue";
|
||||
import agSelect from "./../../agSelect/src/index.vue";
|
||||
import agRow from "./../../agRow/src/index.vue";
|
||||
import agCol from "./../../agCol/src/index.vue";
|
||||
import agUpload from "./../../agUpload/src/index.vue";
|
||||
import agColorPicker from "./../../agColorPicker/src/index.vue";
|
||||
import agNumberRange from "./../../agNumberRange/src/index.vue";
|
||||
import agMultionInput from "./../../agMultionInput/src/index.vue";
|
||||
import agQuery from "./../../agQuery/src/index.vue";
|
||||
import agMultionDatePicker from "../../agMultionDatePicker";
|
||||
|
||||
|
||||
import agInput from './../../agInput/src/index.vue';
|
||||
import agDatePicker from './../../agDatePicker/src/index.vue';
|
||||
import agSelect from './../../agSelect/src/index.vue';
|
||||
import agRow from './../../agRow/src/index.vue';
|
||||
import agCol from './../../agCol/src/index.vue';
|
||||
import agUpload from './../../agUpload/src/index.vue';
|
||||
import agColorPicker from './../../agColorPicker/src/index.vue';
|
||||
import agNumberRange from './../../agNumberRange/src/index.vue';
|
||||
import agMultionInput from './../../agMultionInput/src/index.vue';
|
||||
import agQuery from './../../agQuery/src/index.vue';
|
||||
import agMultionDatePicker from '../../agMultionDatePicker';
|
||||
|
||||
|
||||
export default{
|
||||
name:"agForm",
|
||||
components:{
|
||||
agMultionDatePicker,
|
||||
agInput:agInput,
|
||||
agDatePicker,
|
||||
agSelect,
|
||||
agRow,
|
||||
agCol,
|
||||
agUpload:agUpload,
|
||||
agColorPicker,
|
||||
agNumberRange,
|
||||
agMultionInput,
|
||||
agQuery
|
||||
export default {
|
||||
name: "agForm",
|
||||
components: {
|
||||
agMultionDatePicker,
|
||||
agInput: agInput,
|
||||
agDatePicker,
|
||||
agSelect,
|
||||
agRow,
|
||||
agCol,
|
||||
agUpload: agUpload,
|
||||
agColorPicker,
|
||||
agNumberRange,
|
||||
agMultionInput,
|
||||
agQuery,
|
||||
},
|
||||
props:{
|
||||
submittitle:{
|
||||
type:String,
|
||||
default:'提交'
|
||||
},
|
||||
data:{
|
||||
type:Array,
|
||||
default(){
|
||||
return []
|
||||
}
|
||||
},
|
||||
span:{
|
||||
type:Number,
|
||||
default:24
|
||||
props: {
|
||||
submittitle: {
|
||||
type: String,
|
||||
default: "提交",
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
span: {
|
||||
type: Number,
|
||||
default: 24,
|
||||
},
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
formValue:{
|
||||
|
||||
}
|
||||
data() {
|
||||
return {
|
||||
formValue: {},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.formValue = this.$attrs.value;
|
||||
setTimeout(() => {
|
||||
this.$refs.formref.clearValidate();
|
||||
}, 1);
|
||||
if (this.$refs.formref) {
|
||||
for (const key in this.$refs.formref) {
|
||||
if (!this[key] && key != "value") {
|
||||
this[key] = this.$refs.formref[key];
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.formValue=this.$attrs.value;
|
||||
setTimeout(()=>{
|
||||
this.$refs.formref.clearValidate();
|
||||
},1);
|
||||
if(this.$refs.formref){
|
||||
for(const key in this.$refs.formref){
|
||||
if(!this[key]&&key!='value'){
|
||||
this[key]=this.$refs.formref[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value(val) {
|
||||
this.formValue = val;
|
||||
setTimeout(() => {
|
||||
this.$refs.formref.clearValidate();
|
||||
}, 1);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
this.$emit("onSubmit", this.formValue);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
},
|
||||
watch:{
|
||||
value(val){
|
||||
this.formValue = val;
|
||||
setTimeout(()=>{
|
||||
this.$refs.formref.clearValidate();
|
||||
},1);
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
onSubmit(){
|
||||
this.$emit('onSubmit',this.formValue)
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.footerbox{
|
||||
margin-top:12px;
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
.submitbtn{
|
||||
width:200px;
|
||||
}
|
||||
<style lang="scss" scoped>
|
||||
.footerbox {
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.submitbtn {
|
||||
width: 200px;
|
||||
}
|
||||
.el-form--inline{
|
||||
.el-form-item{
|
||||
display:flex;
|
||||
}
|
||||
.el-form-item__content{
|
||||
flex:1;
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
.el-form--inline {
|
||||
.el-form-item {
|
||||
display: flex;
|
||||
}
|
||||
.contentbox{
|
||||
width:100%;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
.el-form-item__content {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
}
|
||||
.flexcenter{
|
||||
}
|
||||
.contentbox {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
.flexcenter {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
.tipbox {
|
||||
width: 100%;
|
||||
color: red;
|
||||
}
|
||||
::v-deep {
|
||||
.el-form--inline {
|
||||
.el-form-item {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
.el-form-item__content {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
::v-deep{
|
||||
.el-form--inline{
|
||||
.el-form-item{
|
||||
display:flex;
|
||||
}
|
||||
.el-form-item__content{
|
||||
display:flex;
|
||||
flex:1;
|
||||
width:100%;
|
||||
margin-left:0;
|
||||
}
|
||||
}
|
||||
.el-form-item{
|
||||
width:100%;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.el-form-item__content{
|
||||
flex:1;
|
||||
display:flex;
|
||||
width:100%;
|
||||
margin-left:0!important;
|
||||
}
|
||||
.el-form-item {
|
||||
width: 100%;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
</style>
|
||||
.el-form-item__content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
.el-radio-button__inner,
|
||||
.el-radio-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue