文件上传

src/components/mapView/custom-form.vue

@@ -0,0 +1,93 @@
+<template>
+  <el-form
+    ref="formRef"
+    class="custom-form"
+    :model="model"
+    inline
+    :rules="rules"
+    v-bind="$attrs"
+  >
+    <div v-for="(row, index) in config" :key="index" class="line">
+      <template v-if="Array.isArray(row)">
+        <el-row :gutter="20">
+          <el-col
+            v-for="(rowItem, ind) in row"
+            :key="rowItem.label || ind"
+            :span="rowItem.span || 24"
+          >
+            <el-form-item
+              :label="rowItem.label"
+              :prop="rowItem.prop"
+              v-if="rowItem.componentIf ? rowItem.componentIf : true"
+            >
+              <slot :name="rowItem.prop" />
+              <component
+                ref="componentRef"
+                :style="{ width: '100%' }"
+                :is="rowItem.component"
+                v-bind="rowItem['componentProps']"
+                v-model="model[rowItem.prop]"
+                :propName="rowItem.prop"
+                @handleChange="handleChange"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </template>
+    </div>
+  </el-form>
+</template>
+
+<script>
+export default {
+  props: {
+    model: Object,
+    rules: Object,
+    config: Array,
+  },
+  data() {
+    return {
+      map: null,
+    };
+  },
+  mounted() {},
+  methods: {
+    handleChange({ propName, value }) {
+      this.model[propName] = value;
+      this.$emit("update:model", this.model);
+      // this.$emit('handleChange', value)
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.custom-form {
+  .line {
+    width: 100%;
+    position: relative;
+  }
+  /deep/.el-form-item {
+    width: 100%;
+  }
+  /deep/.el-form-item__label {
+    font-size: 14px;
+    font-weight: 400;
+    color: #babdc1;
+    height: 39px;
+    line-height: 39px;
+  }
+  /deep/.el-input__inner {
+    // width: 188px;
+    height: 32px;
+    background: #0d264e;
+    border: 1px solid #1a7de3;
+    border-radius: 4px;
+  }
+  /deep/.el-textarea__inner {
+    background: #0d264e;
+    border: 1px solid #1a7de3;
+    border-radius: 4px;
+  }
+}
+</style>