liunan #10
|
|
@ -6,6 +6,7 @@
|
|||
v-model="dateArr"
|
||||
v-bind="attrs"
|
||||
v-on="Listeners"
|
||||
:value="value"
|
||||
:type="datetype"
|
||||
@mouseenter.native="mousetrue = true"
|
||||
@mouseleave.native="mousetrue = false"
|
||||
|
|
@ -28,7 +29,9 @@ export default {
|
|||
default: "date",
|
||||
},
|
||||
value: {
|
||||
default: null||[],
|
||||
default:()=>{
|
||||
return null||[]
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
|
|
@ -59,9 +62,9 @@ export default {
|
|||
let config = {};
|
||||
if (this.range) {
|
||||
config = {
|
||||
"start-placeholder": "开始日期",
|
||||
"end-placeholder": "结束日期",
|
||||
"range-separator": "-",
|
||||
"start-placeholder":this.$attrs.startplaceholder||"开始日期",
|
||||
"end-placeholder":this.$attrs.endplaceholder|| "结束日期",
|
||||
"range-separator":this.$attrs.rangeseparator||"-",
|
||||
"picker-options": {
|
||||
disabledDate(time) {
|
||||
return (
|
||||
|
|
@ -130,7 +133,7 @@ export default {
|
|||
} else {
|
||||
config = {
|
||||
align: "right",
|
||||
placeholder: "选择日期",
|
||||
placeholder: this.$attrs.placeholder||"选择日期",
|
||||
"picker-options": {
|
||||
disabledDate(time) {
|
||||
return time.getTime() > Date.now();
|
||||
|
|
@ -174,15 +177,20 @@ export default {
|
|||
};
|
||||
},
|
||||
// 所有父级事件
|
||||
Listeners() {
|
||||
Listeners() {
|
||||
return Object.assign({}, this.$listeners, {
|
||||
input: (value) => {
|
||||
if (this.range) {
|
||||
if (!isEmpty(value) && value.length === 2 && value[0] && value[1]) {
|
||||
this.$emit("change", [
|
||||
`${value[0]} 00:00:00`,
|
||||
if (!isEmpty(value) && value.length === 2 && value[0] && value[1]) {
|
||||
if(this.showTime){
|
||||
this.$emit("change", value);
|
||||
}else{
|
||||
this.$emit("change", [
|
||||
`${value[0]} 00:00:00`,
|
||||
`${value[1]} 23:59:59`,
|
||||
]);
|
||||
}
|
||||
|
||||
} else {
|
||||
this.$emit("change", []);
|
||||
}
|
||||
|
|
@ -192,20 +200,26 @@ export default {
|
|||
},
|
||||
});
|
||||
},
|
||||
iconClass() {
|
||||
|
||||
iconClass() {
|
||||
return this.mousetrue
|
||||
? "ag-icon-prefix-hide"
|
||||
: "ag-icon-prefix-show";
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.value,'this.value',this.$attrs);
|
||||
if (Array.isArray(this.value)&&this.range){
|
||||
this.dateArr = [this.value[0] || "", this.value[1] || ""];
|
||||
} else {
|
||||
this.dateArr = this.value;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(newVal) {
|
||||
if (Array.isArray(newVal)&&this.range){
|
||||
|
||||
const [date1, date2] = newVal.slice(0, 2);
|
||||
this.dateArr = [date1 || "", date2 || ""];
|
||||
console.log(newVal,'datevalue');
|
||||
if (Array.isArray(newVal)&&this.range){
|
||||
this.dateArr = [newVal[0] || "", newVal[1] || ""];
|
||||
} else {
|
||||
this.dateArr = newVal;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
import agForm from './src'
|
||||
|
||||
// 为组件提供 install 安装方法，供按需引入
|
||||
agForm.install = function (Vue) {
|
||||
Vue.component(agForm.name, agForm)
|
||||
}
|
||||
|
||||
// 导出组件
|
||||
export default agForm;
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<template>
|
||||
<el-form v-bind="$attrs" v-on="$listeners" :model="formValue" ref="formref">
|
||||
<el-row>
|
||||
<el-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.enName">
|
||||
<ag-input v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-input'"></ag-input>
|
||||
<agDatePicker v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-date-picker'"/>
|
||||
<agSelect v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-select'" />
|
||||
</slot>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="footerbox">
|
||||
<el-form-item >
|
||||
<slot name="button" :value="formValue">
|
||||
<el-button @click="onSubmit" type="primary" size="small" class="submitbtn">
|
||||
提交
|
||||
</el-button>
|
||||
</slot>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
|
||||
import agInput from './../../agInput/src/index.vue';
|
||||
import agDatePicker from './../../agDatePicker/src/index.vue';
|
||||
import agSelect from './../../agSelect/src/index.vue';
|
||||
|
||||
export default{
|
||||
name:"agForm",
|
||||
components:{
|
||||
agInput:agInput,
|
||||
agDatePicker,
|
||||
agSelect
|
||||
},
|
||||
props:{
|
||||
data:{
|
||||
type:Array,
|
||||
default(){
|
||||
return []
|
||||
}
|
||||
},
|
||||
span:{
|
||||
type:Number,
|
||||
default:24
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
formValue:{
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.formValue=this.$attrs.value;
|
||||
if(this.$refs.formref){
|
||||
for(const key in this.$refs.formref){
|
||||
if(!this[key]&&key!='value'){
|
||||
this[key]=this.$refs.formref[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
data(val){
|
||||
this.formValue = {};
|
||||
val.map((h)=>{
|
||||
if(h.value){
|
||||
this.formValue[h.enName] = h.value;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
onSubmit(){
|
||||
console.log(this.formValue,'submit')
|
||||
this.$emit('submit',this.formValue)
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.footerbox{
|
||||
margin-top:12px;
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
.submitbtn{
|
||||
width:200px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -23,14 +23,7 @@ export default {
|
|||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
|
||||
watch:{
|
||||
$attrs:function(val){
|
||||
console.log(val,'attrsattrs');
|
||||
},
|
||||
},
|
||||
|
||||
},
|
||||
mounted(){
|
||||
if(this.$refs.apinputref){
|
||||
for(const key in this.$refs.apinputref){
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
import agInput from './agInput/index';
|
||||
import agSelect from './agSelect/index';
|
||||
import agUpdate from './agUpload';
|
||||
import agForm from './agForm';
|
||||
|
||||
// 注册组件
|
||||
|
||||
|
|
@ -9,7 +10,8 @@
|
|||
const components = [
|
||||
agInput,
|
||||
agSelect,
|
||||
agUpdate
|
||||
agUpdate,
|
||||
agForm
|
||||
]
|
||||
|
||||
// 定义 install 方法，接收 Vue 作为参数（使用 use 注册插件，那么所有的组件都会被注册）
|
||||
|
|
@ -33,5 +35,6 @@
|
|||
// 以下是具体的组件列表
|
||||
agInput,
|
||||
agSelect,
|
||||
agUpdate
|
||||
agUpdate,
|
||||
agForm
|
||||
}
|
||||
17
src/App.vue
17
src/App.vue
|
|
@ -50,6 +50,9 @@
|
|||
<agUpdate @onUpload="onUpload" isDrap dragmove multiple :limit="5" @onError="onError" :maxSize="1024*1024" :fileList="filelist">
|
||||
<div slot="tip">只能上传jpg/png文件，且不超过500kb</div>
|
||||
</agUpdate>
|
||||
<ag-form :data="formdata" label-width="80px" label-position="right" v-model="formvalue">
|
||||
|
||||
</ag-form>
|
||||
<!-- <el-input
|
||||
size="small"
|
||||
placeholder="请输入内容"
|
||||
|
|
@ -367,7 +370,19 @@ export default {
|
|||
handleChange: () => {},
|
||||
},
|
||||
],
|
||||
filelist:['https://git.aiguoai.com/assets/img/logo.svg']
|
||||
filelist:['https://git.aiguoai.com/assets/img/logo.svg'],
|
||||
formdata:[
|
||||
{label:"订单编号",span:12,type:"ag-input",enName:'order_sn',value:'656',placeholder:'请输入洗碗机',size:'small',clearable:true,show:true,value:'123',required:true},
|
||||
{label:"IMEI/机器编号",span:12,type:"ag-input",enName:'imei',value:'43543',placeholder:'请输入IMEI/机器编号',size:'small',clearable:true,show:true},
|
||||
{label:"质检码",span:12,type:"ag-select",value:'',enName:'ser_sn',placeholder:'请输入质检码',size:'small',clearable:true,show:true,options:[{value:'1',label:'112'},{value:'2',label:'2223'}]},
|
||||
{label:"质检时间",span:12,type:"ag-date-picker",enName:'time',range:true,showTime:true,startplaceholder:'初始日期1',endplaceholder:'结束日期1',width:200,rangeseparator:'至',placeholder:'请选择日期',filterable:true,size:'small'},
|
||||
],
|
||||
formvalue:{
|
||||
order_sn:'123',
|
||||
imei:'456',
|
||||
ser_sn:'1',
|
||||
time:['2020-12-12 12:33:11','2024-09-11 13:13:13']
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue