优化组件

jero-web/src/components/addForm/index.vue

@@ -1,12 +1,13 @@
 <template>
   <a-spin :spinning="confirmLoading">
     <a-form-model :model="formInline" v-if="isFormInline" class="formAdd" :rules="rules" ref="ruleForm">
-      <a-row :gutter="24" v-if="isDisplayType">
-        <div v-for="(val,index) in headerText" :key="index">
-          <div class="header-text">
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{val.text}}
-          </div>
-          <div v-for="item in val.content" style="overflow: hidden">
+
+      <div v-for="(val,index) in headerText" :key="index">
+        <div class="header-text">
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{val.text}}
+        </div>
+        <a-row :gutter="24" v-if="isDisplayType">
+          <div v-for="item in val.content">
             <a-col :span="12" v-if="item.type === 'INPUT'">
               <div class="box-title-text">
                 <div class="title-text">
@@ -35,7 +36,7 @@
               </div>
             </a-col>
 
-            <a-col :span="12" v-else-if="item.type === 'DATE'">
+            <a-col :span="12" v-else-if="item.type === 'SINGLETIME'">
               <div class="box-title-text">
                 <div class="title-text">
                   <span class="Required">*</span>
@@ -49,6 +50,19 @@
               </div>
             </a-col>
 
+            <a-col :span="12" v-else-if="item.type === 'SMULTITIME'">
+              <div class="box-title-text">
+                <div class="title-text">
+                  <span class="Required">*</span>
+                  <span :class="{'title-text-text':false}">{{item.enName}}</span><br>
+                  <span :class="{'title-text-text':false}">{{item.name}}</span>
+                </div>
+                <a-form-model-item class="itemModel" :prop="item.attrModel">
+                  <a-range-picker class="box-input" v-model="formInline[item.attrModel]" @change="onChange"></a-range-picker>
+                </a-form-model-item>
+              </div>
+            </a-col>
+
             <a-col :span="12" v-else-if="item.type === 'NUMBER'">
               <div class="box-title-text">
                 <div class="title-text">
@@ -150,9 +164,10 @@
               </div>
             </a-col>
           </div>
-        </div>
+        </a-row>
+      </div>
+
 
-      </a-row>
       <a-row :gutter="24" v-if="!isDisplayType">
         <div v-for="(item,index) in dataList" :key="index">
           <a-col :span="12" v-if="item.type === 'INPUT'">
@@ -183,7 +198,7 @@
             </div>
           </a-col>
 
-          <a-col :span="12" v-else-if="item.type === 'DATE'">
+          <a-col :span="12" v-else-if="item.type === 'SINGLETIME'">
             <div class="box-title-text">
               <div class="title-text">
                 <span class="Required">*</span>
@@ -197,6 +212,19 @@
             </div>
           </a-col>
 
+          <a-col :span="12" v-else-if="item.type === 'SMULTITIME'">
+            <div class="box-title-text">
+              <div class="title-text">
+                <span class="Required">*</span>
+                <span :class="{'title-text-text':false}">{{item.enName}}</span><br>
+                <span :class="{'title-text-text':false}">{{item.name}}</span>
+              </div>
+              <a-form-model-item class="itemModel" :prop="item.attrModel">
+                <a-range-picker v-model="formInline[item.attrModel]" @change="onChange"></a-range-picker>
+              </a-form-model-item>
+            </div>
+          </a-col>
+
           <a-col :span="12" v-else-if="item.type === 'NUMBER'">
             <div class="box-title-text">
               <div class="title-text">
@@ -437,6 +465,24 @@
             placeholder: '请手动输入或者选择标准',
             attrModel: 'standard',
             text: '关联信息'
+          },
+          {
+            id: 11,
+            type: 'SINGLETIME',
+            name: '单日期选择',
+            enName: 'standard',
+            placeholder: '请单日期选择',
+            attrModel: 'time',
+            text: '基本信息'
+          },
+          {
+            id: 12,
+            type: 'SMULTITIME',
+            name: '多日期选择',
+            enName: 'standardtime',
+            placeholder: '请多日期选择',
+            attrModel: 'timeAll',
+            text: '基本信息'
           }
         ],
         validatorRules: {},
@@ -470,13 +516,6 @@
             }
           })
         })
-        this.headerText.forEach(res=>{
-          console.log(res)
-            res.content.forEach(val=>{
-              console.log(val)
-            })
-        })
-        console.log(this.headerText)
       }
     },
     methods: {
@@ -490,6 +529,9 @@
           }
         })
       },
+      onChange(date, dateString) {
+        console.log(date, dateString)
+      },
       clickButtonToUpload(current) {
         this.$refs.uploadFile.visible = true
         this.uploadName = current
@@ -543,6 +585,15 @@
     margin-top: 6px;
   }
 
+  .box-input .ant-calendar-picker {
+    line-height: 38px;
+    height: 38px;
+  }
+
+  .box-input .ant-calendar-picker-input {
+    height: 38px;
+  }
+
   .box-input .ant-input-number-input-wrap {
     line-height: 38px;
     height: 38px;
@@ -597,7 +648,8 @@
     height: 30px;
     margin-bottom: 30px;
   }
-  .formAdd{
+
+  .formAdd {
     margin-bottom: 40px;
   }
 </style>