2022-01-05

src/components/XForm.vue

@@ -7,43 +7,56 @@
             <el-form-item :label="item.label">
               <template v-if="item.type === 'input'">
                 <el-input
-                    style="width: 180px;"
-                    :placeholder="item.placeholder"
-                    v-model="formData[`${item.field}`]"
-                    clearable>
+                  style="width: 180px;"
+                  :placeholder="item.placeholder"
+                  v-model="formData[`${item.field}`]"
+                  clearable
+                >
                 </el-input>
               </template>
               <template v-else-if="item.type === 'select'">
                 <el-select
-                    style="width: 180px;"
-                    :placeholder="item.placeholder"
-                    v-model="formData[`${item.field}`]"
-                    @change="onChange(item.field, formData[`${item.field}`])"
-                    clearable>
+                  style="width: 180px;"
+                  :placeholder="item.placeholder"
+                  v-model="formData[`${item.field}`]"
+                  @change="onChange(item.field, formData[`${item.field}`])"
+                  clearable
+                >
                   <el-option
-                      v-for="option in item.options"
-                      :key="option.value"
-                      :value="option.value"
-                      :label="option.label">
+                    v-for="option in item.options"
+                    :key="option.value"
+                    :value="option.value"
+                    :label="option.label"
+                  >
                   </el-option>
                 </el-select>
               </template>
               <template v-else-if="item.type === 'datepicker'">
                 <el-date-picker
-                    v-model="formData[`${item.field}`]"
-                    :start-placeholder="item.placeholder[0]"
-                    :end-placeholder="item.placeholder[1]"
-                    type="daterange"
-                    value-format="yyyy-MM-dd"
-                    clearable
-                    class="date-picker-reset">
+                  v-model="formData[`${item.field}`]"
+                  :start-placeholder="item.placeholder[0]"
+                  :end-placeholder="item.placeholder[1]"
+                  type="daterange"
+                  value-format="yyyy-MM-dd"
+                  clearable
+                  class="date-picker-reset"
+                >
                 </el-date-picker>
               </template>
               <template v-else-if="item.type === 'text'">
-                <span  :style="{cursor: 'pointer', color: item.value === day ? color : '#000' }" @click="onSelectText(item.value)">{{item.text}}</span>
+                <span
+                  :style="{
+                    cursor: 'pointer',
+                    color: item.value === day ? color : '#000',
+                  }"
+                  @click="onSelectText(item.value)"
+                  >{{ item.text }}</span
+                >
               </template>
               <template v-else-if="item.type === 'button'">
-                <el-button  @click="manage(item.click)">{{item.text}}</el-button>
+                <el-button @click="manage(item.click)">{{
+                  item.text
+                }}</el-button>
               </template>
             </el-form-item>
           </el-col>
@@ -54,41 +67,43 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapState } from "vuex";
 export default {
   name: "XForm",
   props: {
     formItems: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     day: {
       type: Number,
-      default: () => 2
-    }
+      default: () => 2,
+    },
   },
   computed: {
-    ...mapState(['color'])
+    ...mapState(["color"]),
   },
   data() {
     return {
-      formData: {}
-    }
+      formData: {
+        value1: [],
+      },
+    };
   },
   methods: {
     // 拿到方法
     onSelectText(value) {
       this.formData.value1 = [];
-      this.$emit('setDay', {type:value, data: this.formData})
+      this.$emit("setDay", { type: value, data: this.formData });
     },
     onChange(val, data) {
-      this.$emit('setChange', {type: val, data: data});
+      this.$emit("setChange", { type: val, data: data });
     },
     manage(value) {
-      this.$emit('onClickType', {type: value, data: this.formData})
-    }
-  }
-}
+      this.$emit("onClickType", { type: value, data: this.formData });
+    },
+  },
+};
 </script>
 
 <style scoped>