liunan #10
|
@ -6,6 +6,7 @@
|
||||||
v-model="dateArr"
|
v-model="dateArr"
|
||||||
v-bind="attrs"
|
v-bind="attrs"
|
||||||
v-on="Listeners"
|
v-on="Listeners"
|
||||||
|
:value="value"
|
||||||
:type="datetype"
|
:type="datetype"
|
||||||
@mouseenter.native="mousetrue = true"
|
@mouseenter.native="mousetrue = true"
|
||||||
@mouseleave.native="mousetrue = false"
|
@mouseleave.native="mousetrue = false"
|
||||||
|
@ -28,7 +29,9 @@ export default {
|
||||||
default: "date",
|
default: "date",
|
||||||
},
|
},
|
||||||
value: {
|
value: {
|
||||||
default: null||[],
|
default:()=>{
|
||||||
|
return null||[]
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
|
@ -59,9 +62,9 @@ export default {
|
||||||
let config = {};
|
let config = {};
|
||||||
if (this.range) {
|
if (this.range) {
|
||||||
config = {
|
config = {
|
||||||
"start-placeholder": "开始日期",
|
"start-placeholder":this.$attrs.startplaceholder||"开始日期",
|
||||||
"end-placeholder": "结束日期",
|
"end-placeholder":this.$attrs.endplaceholder|| "结束日期",
|
||||||
"range-separator": "-",
|
"range-separator":this.$attrs.rangeseparator||"-",
|
||||||
"picker-options": {
|
"picker-options": {
|
||||||
disabledDate(time) {
|
disabledDate(time) {
|
||||||
return (
|
return (
|
||||||
|
@ -130,7 +133,7 @@ export default {
|
||||||
} else {
|
} else {
|
||||||
config = {
|
config = {
|
||||||
align: "right",
|
align: "right",
|
||||||
placeholder: "选择日期",
|
placeholder: this.$attrs.placeholder||"选择日期",
|
||||||
"picker-options": {
|
"picker-options": {
|
||||||
disabledDate(time) {
|
disabledDate(time) {
|
||||||
return time.getTime() > Date.now();
|
return time.getTime() > Date.now();
|
||||||
|
@ -179,10 +182,15 @@ export default {
|
||||||
input: (value) => {
|
input: (value) => {
|
||||||
if (this.range) {
|
if (this.range) {
|
||||||
if (!isEmpty(value) && value.length === 2 && value[0] && value[1]) {
|
if (!isEmpty(value) && value.length === 2 && value[0] && value[1]) {
|
||||||
this.$emit("change", [
|
if(this.showTime){
|
||||||
`${value[0]} 00:00:00`,
|
this.$emit("change", value);
|
||||||
|
}else{
|
||||||
|
this.$emit("change", [
|
||||||
|
`${value[0]} 00:00:00`,
|
||||||
`${value[1]} 23:59:59`,
|
`${value[1]} 23:59:59`,
|
||||||
]);
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
this.$emit("change", []);
|
this.$emit("change", []);
|
||||||
}
|
}
|
||||||
|
@ -193,19 +201,25 @@ export default {
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
iconClass() {
|
iconClass() {
|
||||||
|
|
||||||
return this.mousetrue
|
return this.mousetrue
|
||||||
? "ag-icon-prefix-hide"
|
? "ag-icon-prefix-hide"
|
||||||
: "ag-icon-prefix-show";
|
: "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: {
|
watch: {
|
||||||
value: {
|
value: {
|
||||||
handler(newVal) {
|
handler(newVal) {
|
||||||
|
console.log(newVal,'datevalue');
|
||||||
if (Array.isArray(newVal)&&this.range){
|
if (Array.isArray(newVal)&&this.range){
|
||||||
|
this.dateArr = [newVal[0] || "", newVal[1] || ""];
|
||||||
const [date1, date2] = newVal.slice(0, 2);
|
|
||||||
this.dateArr = [date1 || "", date2 || ""];
|
|
||||||
} else {
|
} else {
|
||||||
this.dateArr = newVal;
|
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>
|
|
@ -24,13 +24,6 @@ export default {
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
watch:{
|
|
||||||
$attrs:function(val){
|
|
||||||
console.log(val,'attrsattrs');
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
mounted(){
|
mounted(){
|
||||||
if(this.$refs.apinputref){
|
if(this.$refs.apinputref){
|
||||||
for(const key in this.$refs.apinputref){
|
for(const key in this.$refs.apinputref){
|
||||||
|
|
|
@ -2,6 +2,7 @@
|
||||||
import agInput from './agInput/index';
|
import agInput from './agInput/index';
|
||||||
import agSelect from './agSelect/index';
|
import agSelect from './agSelect/index';
|
||||||
import agUpdate from './agUpload';
|
import agUpdate from './agUpload';
|
||||||
|
import agForm from './agForm';
|
||||||
|
|
||||||
// 注册组件
|
// 注册组件
|
||||||
|
|
||||||
|
@ -9,7 +10,8 @@
|
||||||
const components = [
|
const components = [
|
||||||
agInput,
|
agInput,
|
||||||
agSelect,
|
agSelect,
|
||||||
agUpdate
|
agUpdate,
|
||||||
|
agForm
|
||||||
]
|
]
|
||||||
|
|
||||||
// 定义 install 方法,接收 Vue 作为参数(使用 use 注册插件,那么所有的组件都会被注册)
|
// 定义 install 方法,接收 Vue 作为参数(使用 use 注册插件,那么所有的组件都会被注册)
|
||||||
|
@ -33,5 +35,6 @@
|
||||||
// 以下是具体的组件列表
|
// 以下是具体的组件列表
|
||||||
agInput,
|
agInput,
|
||||||
agSelect,
|
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">
|
<agUpdate @onUpload="onUpload" isDrap dragmove multiple :limit="5" @onError="onError" :maxSize="1024*1024" :fileList="filelist">
|
||||||
<div slot="tip">只能上传jpg/png文件,且不超过500kb</div>
|
<div slot="tip">只能上传jpg/png文件,且不超过500kb</div>
|
||||||
</agUpdate>
|
</agUpdate>
|
||||||
|
<ag-form :data="formdata" label-width="80px" label-position="right" v-model="formvalue">
|
||||||
|
|
||||||
|
</ag-form>
|
||||||
<!-- <el-input
|
<!-- <el-input
|
||||||
size="small"
|
size="small"
|
||||||
placeholder="请输入内容"
|
placeholder="请输入内容"
|
||||||
|
@ -367,7 +370,19 @@ export default {
|
||||||
handleChange: () => {},
|
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