eoss-ui 0.5.81-beta2 → 0.5.81-beta21

package/packages/data-table/src/formItem.vue

@@ -0,0 +1,430 @@
+<template>
+  <el-form-item
+    :name="name"
+    :prop="field || prop"
+    :rules="rules"
+    :index="index"
+  >
+    <es-select
+      v-if="type == 'select'"
+      v-bind="formOption"
+      :data="option"
+      v-model="model"
+      @blur="
+        (event) => {
+          handleBlur({
+            item: config,
+            event: event,
+            data: scope.row,
+            scope: scope
+          });
+        }
+      "
+      @focus="
+        (event) => {
+          handleFocus({
+            item: config,
+            event: event,
+            data: scope.row,
+            scope: scope
+          });
+        }
+      "
+      @change="
+        (value) => {
+          handleChange({
+            item: config,
+            name: field || prop,
+            value: value,
+            data: scope.row,
+            scope: scope
+          });
+        }
+      "
+    ></es-select>
+    <es-cascader
+      v-else-if="getType('cascader', scope)"
+      v-bind="formOption"
+      :data="option"
+      v-model="scope.row[field || prop]"
+      @blur="
+        (event) => {
+          handleBlur({
+            item: config,
+            event: event,
+            data: scope.row,
+            scope: scope
+          });
+        }
+      "
+      @focus="
+        (event) => {
+          handleFocus({
+            item: config,
+            event: event,
+            data: scope.row,
+            scope: scope
+          });
+        }
+      "
+      @change="
+        (value) => {
+          handleChange({
+            item: config,
+            name: field || prop,
+            value: value,
+            data: scope.row,
+            scope: scope
+          });
+        }
+      "
+    >
+    </es-cascader>
+    <es-select-ganged
+      v-else-if="getType('ganged', scope)"
+      v-bind="formOption"
+      :data="init(option, config)"
+      v-model="scope.row[field || prop]"
+      @change="
+        (value) => {
+          handleChange({
+            name: field || prop,
+            value: value,
+            data: scope.row,
+            item: item
+          });
+        }
+      "
+    ></es-select-ganged>
+    <es-radio-group
+      v-else-if="getType('radio', scope)"
+      v-bind="formOption"
+      :data="option"
+      v-model="scope.row[field || prop]"
+      @change="
+        (value) => {
+          handleChange({
+            item: config,
+            name: field || prop,
+            value: value,
+            data: scope.row
+          });
+        }
+      "
+    ></es-radio-group>
+    <es-checkbox-group
+      v-else-if="getType('checkbox', scope)"
+      v-bind="formOption"
+      :data="option"
+      v-model="scope.row[field || prop]"
+      @change="
+        (value) => {
+          handleChange({
+            item: config,
+            name: field || prop,
+            value: value,
+            data: scope.row
+          });
+        }
+      "
+    ></es-checkbox-group>
+    <es-switch
+      v-else-if="getType('switch', scope)"
+      v-bind="formOption"
+      :data="option"
+      v-model="scope.row[field || prop]"
+      @change="
+        (value) => {
+          handleChange({
+            item: config,
+            name: field || prop,
+            value: value,
+            data: scope.row
+          });
+        }
+      "
+    ></es-switch>
+    <es-date-picker
+      v-else-if="
+        config.date ||
+        getType(
+          type,
+          [
+            'date',
+            'year',
+            'month',
+            'date',
+            'dates',
+            'week',
+            'datetime',
+            'datetimerange',
+            'daterange',
+            'monthrange',
+            'quarter',
+            'halfyear'
+          ],
+          scope
+        )
+      "
+      v-bind="formOption"
+      v-model="scope.row[field || prop]"
+      :type="type"
+      @blur="
+        (event) => {
+          handleBlur({
+            item: config,
+            event: event,
+            data: scope.row,
+            scope: scope
+          });
+        }
+      "
+      @focus="
+        (event) => {
+          handleFocus({
+            item: config,
+            event: event,
+            data: scope.row,
+            scope: scope
+          });
+        }
+      "
+      @change="
+        (value) => {
+          handleChange({
+            item: config,
+            name: field || prop,
+            value: value,
+            data: scope.row,
+            scope: scope
+          });
+        }
+      "
+    ></es-date-picker>
+    <es-input-number
+      v-else-if="getType('number', scope)"
+      v-bind="formOption"
+      v-model="scope.row[field || prop]"
+      @blur="
+        (event) => {
+          handleBlur({
+            item: config,
+            event: event,
+            data: scope.row,
+            scope: scope
+          });
+        }
+      "
+      @focus="
+        (event) => {
+          handleFocus({
+            item: config,
+            event: event,
+            data: scope.row,
+            scope: scope
+          });
+        }
+      "
+      @change="
+        (value) => {
+          handleChange({
+            item: config,
+            name: field || prop,
+            value: value,
+            data: scope.row,
+            scope: scope
+          });
+        }
+      "
+    ></es-input-number>
+    <es-selector
+      v-else-if="getType('selector', scope)"
+      v-bind="formOption"
+      v-model="scope.row[field || prop]"
+      v-on="
+        exclAttribute({
+          data: events,
+          attrs: 'change'
+        })
+      "
+      @change="
+        (value) => {
+          handleChange({
+            item: config,
+            name: field || prop,
+            value: value,
+            data: scope.row
+          });
+        }
+      "
+    ></es-selector>
+    <template v-else-if="getType(['text', 'input', 'textarea'])">
+      <template v-if="config.lazy">
+        <input
+          v-if="getType(['text', 'input'], scope)"
+          class="el-input__inner"
+          v-bind="formOption"
+          v-model.lazy="scope.row[field]"
+          @blur="
+            (event) => {
+              handleBlur({
+                item: config,
+                event: event,
+                data: scope.row,
+                scope: scope
+              });
+            }
+          "
+          @focus="
+            (event) => {
+              handleFocus({
+                item: config,
+                event: event,
+                data: scope.row,
+                scope: scope
+              });
+            }
+          "
+          @change="
+            (value) => {
+              handleChange({
+                item: config,
+                name: field || prop,
+                value: value,
+                data: scope.row,
+                scope: scope
+              });
+            }
+          "
+        />
+        <textarea
+          v-else
+          class="el-textarea__inner"
+          v-bind="formOption"
+          v-model.lazy="scope.row[field]"
+          @blur="
+            (event) => {
+              handleBlur({
+                item: config,
+                event: event,
+                data: scope.row,
+                scope: scope
+              });
+            }
+          "
+          @focus="
+            (event) => {
+              handleFocus({
+                item: config,
+                event: event,
+                data: scope.row,
+                scope: scope
+              });
+            }
+          "
+          @change="
+            (value) => {
+              handleChange({
+                item: config,
+                name: field || prop,
+                value: value,
+                data: scope.row,
+                scope: scope
+              });
+            }
+          "
+        ></textarea>
+      </template>
+      <es-input
+        v-else
+        v-bind="formOption"
+        :type="type"
+        :scope="scope"
+        v-model="scope.row[field || prop]"
+        @blur="
+          (event) => {
+            handleBlur({
+              item: config,
+              event: event,
+              data: scope.row,
+              scope: scope
+            });
+          }
+        "
+        @focus="
+          (event) => {
+            handleFocus({
+              item: config,
+              event: event,
+              data: scope.row,
+              scope: scope
+            });
+          }
+        "
+        @change="
+          (value) => {
+            handleChange({
+              item: config,
+              name: field || prop,
+              value: value,
+              data: scope.row,
+              scope: scope
+            });
+          }
+        "
+      ></es-input>
+    </template>
+  </el-form-item>
+</template>
+
+<script>
+export default {
+  name: 'FormItem',
+  components: {},
+  props: {
+    scope: {},
+    type: String,
+    name: String,
+    value: {},
+    index: [String, Number],
+    labelKey: String,
+    valueKey: String,
+    field: String,
+    prop: String,
+    rules: [Array, Object]
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    model: {
+      get() {
+        return this.value;
+      },
+      set(val) {
+        this.$emit('input', val);
+      }
+    }
+  },
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    getType(target, data) {
+      let type = this.type;
+      if (this.setType) {
+        let obj = this.setType(data);
+        if (util.isObject(obj)) {
+          type = obj.type;
+          this.options = obj.data;
+        } else {
+          type = obj;
+        }
+      }
+      return Array.isArray(target) ? target.includes(type) : type == target;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>