qiaopengfei
/
ag-element-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

merge into: qiaopengfei:master
Branches Tags
qiaopengfei:master
qiaopengfei:liunan
qiaopengfei:qiaopengfei
qiaopengfei:haobing
...
pull from: qiaopengfei:liunan
Branches Tags
qiaopengfei:liunan
qiaopengfei:master
qiaopengfei:qiaopengfei
qiaopengfei:haobing

6 Commits
master ... liunan

Author SHA1 Message Date
ln1778 e70b93ea57 22 2024-09-24 18:10:29 +08:00
ln1778 7c05e80d62 33 2024-09-23 17:40:36 +08:00
ln1778 cd00376095 2 2024-09-23 17:39:48 +08:00
ln1778 272814b9b4 22 2024-09-23 17:39:34 +08:00
ln1778 e742aeae7b 22 2024-09-23 09:26:44 +08:00
ln1778 df94b0aa59 22 2024-09-19 09:58:45 +08:00
4 changed files with 1203 additions and 905 deletions
Show Stats Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "ag-element-ui", "name": "ag-element-ui",
"version": "0.1.20", "version": "0.1.25",
"main": "packages/index.js", "main": "packages/index.js",
"scripts": { "scripts": {
"dev": "vue-cli-service serve", "dev": "vue-cli-service serve",

475
packages/agForm/src/index.vue
View File

@ -1,191 +1,322 @@
<template> <template>
<el-form v-bind="$attrs" v-on="$listeners" :model="formValue" ref="formref"> <el-form v-bind="$attrs" v-on="$listeners" :model="formValue" ref="formref">
<ag-row> <ag-row>
<ag-col v-for="item,index in data" :key="index" :span="item.span||24"> <ag-col v-for="(item, index) in data" :key="index" :span="item.span || 24">
<el-form-item v-bind="item" :prop="item.enName" > <el-form-item v-bind="item" :prop="item.enName">
<slot :name="item.soltName" v-if="item.soltName" :row="item"/> <slot :name="item.soltName" v-if="item.soltName" :row="item" />
<div class="contentbox" v-else> <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
<ag-input v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-input'" size="small" clearable></ag-input> v-model="formValue[item.enName]"
<ag-date-picker v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-date-picker'" size="small" clearable/> type="textarea"
<ag-select v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-select'" size="small" clearable/> v-bind="item"
<el-radio-group v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-radio'&&formValue[item.enName]" size="small" clearable> v-if="item.type == 'ag-textarea'"
<el-radio :label="it.value" v-for="it,index in item.options" :key="index">{{it.label}}</el-radio> size="small"
</el-radio-group> clearable
<el-checkbox-group v-bind="item" v-if="item.type=='ag-checkbox'&&formValue[item.enName]" v-model="formValue[item.enName]" size="small" clearable> ></ag-input>
<el-checkbox v-for="it,index in item.options" :label="it.value" :key="index">{{it.label}}</el-checkbox> <ag-input
</el-checkbox-group> v-model="formValue[item.enName]"
<el-input-number v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-input-number'" clearable></el-input-number> v-bind="item"
<el-cascader v-model="formValue[item.enName]" v-bind="item" size="small" v-if="item.type=='ag-cascader'" clearable :style="{width:'100%'}"></el-cascader> v-if="item.type == 'ag-input'"
<el-switch size="small"
v-model="formValue[item.enName]" clearable
v-bind="item" size="small" v-if="item.type=='ag-switch'&&formValue[item.enName]" > ></ag-input>
</el-switch> <ag-date-picker
<el-slider v-model="formValue[item.enName]" v-bind="item"
v-bind="item" size="small" v-if="item.type=='ag-slider'"></el-slider> v-model="formValue[item.enName]"
<el-time-select v-if="item.type == 'ag-date-picker'"
:style="{width:'100%'}" size="small"
clearable clearable
v-model="formValue[item.enName]" />
v-bind="item" size="small" <ag-select
v-if="item.type=='ag-time-select'" v-model="formValue[item.enName]"
:picker-options="item.options"> v-bind="item"
</el-time-select> v-if="item.type == 'ag-select'"
<ag-upload v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-upload'" clear isPre></ag-upload> size="small"
<el-rate v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-rate'" size="small"></el-rate> clearable
<agColorPicker v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-color-picker'" size="small"> />
</agColorPicker> <el-radio-group
<el-transfer :data="item.data" v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-transfer'" size="small"></el-transfer> v-model="formValue[item.enName]"
<agNumberRange v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-numberRange'" size="small" clearable/> v-bind="item"
<ag-multion-input v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-multion-input'" size="small" clearable/> v-if="item.type == 'ag-radio' && formValue[item.enName]"
<agQuery v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-query'" size="small" clearable/> size="small"
<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> clearable
<ag-multion-date-picker v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-multion-datte-picker'" size="small"/> >
</div> <el-radio
</el-form-item> :label="it.value"
</ag-col> 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'"
@onError="$listeners.onError"
clear
isPre
@onUpload="item.onUpload"
></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>
<div v-if="item.tip" class="tipbox">
<slot name="tip" :row="item"> {{ item.tip }}</slot>
</div>
</el-form-item>
</ag-col>
</ag-row> </ag-row>
<div class="footerbox" v-if="$listeners.onSubmit"> <div class="footerbox" v-if="$listeners.onSubmit">
<slot name="button" :value="formValue"> <slot name="button" :value="formValue">
<el-button @click="onSubmit" type="primary" size="small" class="submitbtn"> <el-button @click="onSubmit" type="primary" size="small" class="submitbtn">
{{submittitle||'提交'}} {{ submittitle || "提交" }}
</el-button> </el-button>
</slot> </slot>
</div> </div>
</el-form> </el-form>
</template> </template>
<script> <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";
export default {
import agInput from './../../agInput/src/index.vue'; name: "agForm",
import agDatePicker from './../../agDatePicker/src/index.vue'; components: {
import agSelect from './../../agSelect/src/index.vue'; agMultionDatePicker,
import agRow from './../../agRow/src/index.vue'; agInput: agInput,
import agCol from './../../agCol/src/index.vue'; agDatePicker,
import agUpload from './../../agUpload/src/index.vue'; agSelect,
import agColorPicker from './../../agColorPicker/src/index.vue'; agRow,
import agNumberRange from './../../agNumberRange/src/index.vue'; agCol,
import agMultionInput from './../../agMultionInput/src/index.vue'; agUpload: agUpload,
import agQuery from './../../agQuery/src/index.vue'; agColorPicker,
import agMultionDatePicker from '../../agMultionDatePicker'; agNumberRange,
agMultionInput,
agQuery,
export default{ },
name:"agForm", props: {
components:{ submittitle: {
agMultionDatePicker, type: String,
agInput:agInput, default: "提交",
agDatePicker,
agSelect,
agRow,
agCol,
agUpload:agUpload,
agColorPicker,
agNumberRange,
agMultionInput,
agQuery
}, },
props:{ data: {
submittitle:{ type: Array,
type:String, default() {
default:'提交' return [];
}, },
data:{
type:Array,
default(){
return []
}
},
span:{
type:Number,
default:24
},
}, },
data(){ span: {
return{ type: Number,
formValue:{ default: 24,
},
} },
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);
}, },
watch:{ },
value(val){ methods: {
this.formValue = val; onSubmit() {
setTimeout(()=>{ this.$emit("onSubmit", this.formValue);
this.$refs.formref.clearValidate();
},1);
}
}, },
methods:{ },
onSubmit(){ };
this.$emit('onSubmit',this.formValue)
}
},
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.footerbox{ .footerbox {
margin-top:12px; margin-top: 12px;
display:flex; display: flex;
justify-content:center; justify-content: center;
.submitbtn{ .submitbtn {
width:200px; width: 200px;
} }
}
.el-form--inline {
.el-form-item {
display: flex;
}
.el-form-item__content {
flex: 1;
width: 100%;
}
}
.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;
} }
.el-form--inline{ .el-form-item__content {
.el-form-item{ display: flex;
display:flex; flex: 1;
} width: 100%;
.el-form-item__content{ flex-wrap: wrap;
flex:1; margin-left: 0;
width:100%;
}
}
.contentbox{
width:100%;
display: flex;
align-items: stretch;
}
.flexcenter{
display: flex;
align-items: stretch;
}
::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;
}
.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> </style>

72
packages/agSelect/src/index.vue
View File

@ -1,21 +1,21 @@
<template> <template>
<el-select <el-select
class="ag_select" class="ag_select"
:style="{ width: `100%` }" :style="{ width: `100%` }"
:value="selectValue" ref="apselectref"
ref="apselectref" :size="$attrs.size || 'small'"
:size="$attrs.size||'small'" v-bind="$attrs"
v-bind="$attrs" v-on="$listeners"
v-on="$listeners" >
> <slot v-for="(_, name) in $slots" :name="name" :slot="name"> </slot>
<slot v-for="(_,name) in $slots" :name="name" :slot="name"> </slot> <el-option
<el-option v-for="(item, index) in options"
v-for="item in options" :key="index"
:key="item.value" :disabled="item.disabled"
:label="item.label" :label="item.label"
:value="item.value" :value="item.value"
></el-option> ></el-option>
</el-select> </el-select>
</template> </template>
<script> <script>
@ -24,7 +24,7 @@ export default {
props: { props: {
width: { width: {
type: Number, type: Number,
default:0, default: 0,
}, },
options: { options: {
type: Array, type: Array,
@ -32,48 +32,28 @@ export default {
return []; return [];
}, },
}, },
value:{
default: () =>'',
}
}, },
data() { data() {
return { return {};
selectValue:""
};
}, },
mounted(){ mounted() {
if(this.$refs.apselectref){ if (this.$refs.apselectref) {
for(const key in this.$refs.apselectref){ for (const key in this.$refs.apselectref) {
if(!this[key]&&key!='value'){ if (!this[key] && key != "value") {
this[key]=this.$refs.apselectref[key]; this[key] = this.$refs.apselectref[key];
} }
} }
} }
}, },
watch: {
value: {
handler(newVal) {
let newselectValue=newVal;
const find=this.options.find((f)=>f.value==newselectValue);
if(find){
this.selectValue=newselectValue;
}else{
this.selectValue="";
}
},
immediate: true,
},
},
methods: {
},
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep { ::v-deep {
.ag_select{ .ag_select {
min-width: 90px; min-width: 90px;
width:100%; width: 100%;
} }
.el-input__icon { .el-input__icon {
font-size: 16px !important; font-size: 16px !important;

1539
packages/agUpload/src/index.vue
View File

File diff suppressed because it is too large Load Diff