22

packages/agDatePicker/src/index.vue

@@ -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": "开始日期",
+          "start-placeholder":this.$attrs.startplaceholder||"开始日期",
-          "end-placeholder": "结束日期",
+          "end-placeholder":this.$attrs.endplaceholder|| "结束日期",
-          "range-separator": "-",
+          "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]) {
+            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`,
               ]);
+              }
+              
             } 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){
+        console.log(newVal,'datevalue'); 
-          
+        if (Array.isArray(newVal)&&this.range){  
-          const [date1, date2] = newVal.slice(0, 2);
+          this.dateArr = [newVal[0] || "", newVal[1] || ""];
-          this.dateArr = [date1 || "", date2 || ""];
         } else {
           this.dateArr = newVal;
         }

packages/agForm/index.js

@@ -0,0 +1,9 @@
+import agForm from './src'
+
+// 为组件提供 install 安装方法，供按需引入
+agForm.install = function (Vue) {
+    Vue.component(agForm.name, agForm)
+}
+
+// 导出组件
+export default agForm;

packages/agForm/src/index.vue

@@ -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>

packages/agInput/src/index.vue

@@ -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){ 

packages/index.js

@@ -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
   }

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']
+      }
     } 
   },