@idooel/components 0.0.1-beta.99 → 0.0.2

package/packages/form/src/index.vue

@@ -1,303 +1,319 @@
-<template>
-  <div class="ele__form--wrapper">
-    <a-form :form="form" layout="vertical" class="ant-advanced-search-form">
-      <a-row :gutter="24">
-        <template v-for="ele in elements">
-          <a-col v-if="executeExpression(ele._show)" :span="ele.span" :key="ele.name">
-            <template v-if="ele.type == 'Input'">
-              <a-form-item :label="`${ele.label}：`">
-                <ele-input 
-                  @change="onChange($event, ele)" 
-                  :disabled="executeExpression(ele._disabled)" 
-                  :max-length="ele.maxLength" 
-                  v-decorator="[ele.name, { rules: rebuildRules(ele.rules) }]" 
-                  style="width:100%;">
-                </ele-input>
-              </a-form-item>
-            </template>
-            <template v-else-if="ele.type == 'Textarea'">
-              <a-form-item :label="`${ele.label}：`">
-                <ele-textarea 
-                  @change="onChange($event, ele)"
-                  :max-length="ele.maxLength"
-                  :autosize="ele.autosize"
-                  :disabled="executeExpression(ele._disabled)"
-                  :allow-clear="ele.allowClear"
-                  :placeholder="ele.placeholder"
-                  v-decorator="[ele.name, { rules: rebuildRules(ele.rules) }]"
-                  style="width:100%;">
-                </ele-textarea>
-              </a-form-item>
-            </template>
-            <template v-else-if="ele.type == 'Select'">
-              <a-form-item :label="`${ele.label}：`">
-                <ele-select 
-                  :data-source="ele.optionList" 
-                  :disabled="executeExpression(ele._disabled)"
-                  :multiple="ele.multiple"
-                  :mode="ele.mode"
-                  :code="ele.code"
-                  :init="ele.init"
-                  :url="ele.url"
-                  :params="ele.params" 
-                  @change="onChange($event, ele)"
-                  v-decorator="[ele.name, { rules: rebuildRules(ele.rules) }]" 
-                  style="width:100%;">
-                </ele-select>
-              </a-form-item>
-            </template>
-            <template v-else-if="ele.type == 'ele-upload'">
-              <a-form-item :label="`${ele.label}：`">
-                <ele-upload v-decorator="[ele.name, { rules: rebuildRules(ele.rules) }]" 
-                  :ext="ele.ext"
-                  :multiple="ele.multiple"
-                  :accept="ele.accept"
-                  :extensions="ele.extensions"
-                  :size="ele.size"
-                  :icon="ele.icon"
-                  :url="ele.url"
-                  :message="ele.message" 
-                  style="width:100%;">
-                </ele-upload>
-              </a-form-item>
-            </template>
-            <template v-else-if="ele.type == 'ele-date-range'">
-              <a-form-item :label="`${ele.label}：`">
-                <ele-date-range 
-                :disabled="executeExpression(ele._disabled)" 
-                v-decorator="[ele.name, { rules: rebuildRules(ele.rules) }]" 
-                style="width:100%;">
-              </ele-date-range>
-              </a-form-item>
-            </template>
-            <template v-else-if="ele.type == 'ele-date'">
-              <a-form-item :label="`${ele.label}：`">
-                <ele-date
-                  :format="ele.format"
-                  :mode="ele.mode"
-                  :show-time="ele.showTime"
-                  :show-today="ele.showToday"
-                  :value-format="ele.valueFormat"
-                  :disabled="executeExpression(ele._disabled)" 
-                  v-decorator="[ele.name, { rules: rebuildRules(ele.rules) }]" 
-                  style="width:100%;">
-                </ele-date>
-              </a-form-item>
-            </template>
-            <template v-else-if="ele.type == 'SelectEntity'">
-              <a-form-item :label="`${ele.label}：`">
-                <ele-select-entity 
-                  v-decorator="[ele.name, { rules: rebuildRules(ele.rules) }]" 
-                  style="width:100%;">
-                </ele-select-entity>
-              </a-form-item>
-            </template>
-            <template v-else-if="ele.type == 'InputNumber' || ele.type == 'ele-input-number'">
-              <a-form-item :label="`${ele.label}：`">
-                <ele-input-number 
-                  @change="onChange($event, ele)" 
-                  :precision="ele.precision" 
-                  :disabled="executeExpression(ele._disabled)" 
-                  v-decorator="[ele.name, { rules: rebuildRules(ele.rules) }]" 
-                  v-bind="ele.props" 
-                  style="width:100%;">
-                </ele-input-number>
-              </a-form-item>
-            </template>
-            <template v-else-if="ele.type == 'Checkbox'">
-              <a-form-item :label="`${ele.label}：`">
-                <ele-checkbox 
-                  :data-source="ele.optionList" 
-                  :disabled="executeExpression(ele._disabled)" 
-                  v-decorator="[ele.name, { rules: rebuildRules(ele.rules) }]" 
-                  style="width:100%;">
-                </ele-checkbox>
-              </a-form-item>
-            </template>
-            <template v-else-if="ele.type == 'Radio'">
-              <a-form-item :label="`${ele.label}：`">
-                <ele-radio 
-                  @change="onChange($event, ele)" 
-                  :disabled="executeExpression(ele._disabled)" 
-                  :data-source="ele.optionList" 
-                  v-decorator="[ele.name, { rules: rebuildRules(ele.rules) }]" 
-                  style="width:100%;">
-                </ele-radio>
-              </a-form-item>
-            </template>
-            <template v-else-if="ele.type == 'ele-form-img-crop'">
-              <a-form-item :label="`${ele.label}：`">
-                <ele-form-img-crop
-                  @change="onChange($event, ele)"
-                  :width="ele.width"
-                  :height="ele.height"
-                  :modal-title="ele.modalTitle"
-                  :oper-text="ele.operText"
-                  :disabled="executeExpression(ele._disabled)" 
-                  v-decorator="[ele.name, { rules: rebuildRules(ele.rules) }]" 
-                  style="width:100%;">
-                </ele-form-img-crop>
-              </a-form-item>
-            </template>
-            <template v-else-if="ele.type == 'ele-tree-select'">
-              <a-form-item :label="`${ele.label}：`">
-                <ele-tree-select
-                  @change="onChange($event, ele)"
-                  :disabled="executeExpression(ele._disabled)"
-                  v-bind="ele.meta"
-                  v-decorator="[ele.name, { rules: rebuildRules(ele.rules) }]" 
-                  style="width:100%;">
-                </ele-tree-select>
-              </a-form-item>
-            </template>
-            <template v-else-if="ele.type == 'ele-select-entity-modal-table'">
-              <a-form-item :label="`${ele.label}：`">
-                <ele-select-entity-modal-table
-                  @change="onChange($event, ele)"
-                  :disabled="executeExpression(ele._disabled)"
-                  v-bind="ele.meta"
-                  v-decorator="[ele.name, { rules: rebuildRules(ele.rules) }]" 
-                  style="width:100%;">
-                </ele-select-entity-modal-table>
-              </a-form-item>
-            </template>
-          </a-col>
-        </template>
-      </a-row>
-    </a-form>
-  </div>
-</template>
-
-<script>
-import { parse } from '@idooel/expression'
-import { type } from '@idooel/shared'
-import { CONTEXT } from '../../utils'
-export default {
-  name: 'ele-form',
-  props: {
-    disabled: {
-      type: [Boolean, String],
-      default: '_routeMeta.disabled'
-    },
-    formName: {
-      type: [Number, String],
-      default: 'coordinated'
-    },
-    elements: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data () {
-    return {}
-  },
-  inject: {
-    [CONTEXT]: {
-      default: () => (() => ({}))
-    }
-  },
-  computed: {
-    contextData () {
-      return this[CONTEXT].call(this)
-    },
-    globalDisabled () {
-      return this.executeExpression(this.disabled)
-    },
-    form () {
-      return this.$form.createForm(this, { name: this.formName })
-    },
-    exposedMethods () {
-      return {
-        setFieldsValue: this.setFieldsValue,
-        getFieldsValue: this.getFieldsValue
-      }
-    }
-  },
-  methods: {
-    rebuildRules (rules = []) {
-      //TODO
-      rules.map(rule => {
-        const { validator } = rule
-        if (validator) {
-          validator.formModel = this.getFieldsValue()
-          validator.exposed = this.exposedMethods
-        }
-      })
-      return rules
-    },
-    dispatchExpression () {
-      this.evalDisabledExpression()
-      this.evalShowExpression()
-    },
-    evalDisabledExpression () {
-      this.elements.forEach(ele => {
-        if (this.globalDisabled) return this.$set(ele, '_disabled', true)
-        const { disabled } = ele
-        const ret = this.executeExpression(disabled)
-        this.$set(ele, '_disabled', ret)
-      })
-    },
-    evalShowExpression () {
-      this.elements.forEach(ele => {
-        const { show = true } = ele
-        const ret = this.executeExpression(show)
-        this.$set(ele, '_show', ret)
-      })
-    },
-    executeExpression (expression) {
-      if (type.isBool(expression)) return expression
-      if (type.isEmpty(expression)) return false
-      return parse(expression, { ...this.getFieldsValue(), _route: this.$route.query, _routeMeta: this.$route.meta })
-    },
-    onChange (value, props) {
-      const { name } = props
-      this.dispatchExpression()
-      this.setFieldsValue({ [name]: value })
-      this.$emit('change', { value, props, exposed: { ...this.exposedMethods } })
-    },
-    collectDefaultValues () {
-      const ret = this.elements.reduce((ret, props) => {
-        const { name, defaultValue } = props
-        if (defaultValue) {
-          ret[name] = defaultValue
-        }
-        return ret
-      }, {})
-      return ret
-    },
-    setDefaultValues () {
-      const defaultValues = this.collectDefaultValues()
-      this.setFieldsValue(defaultValues)
-    },
-    validateFields () {
-      let ret = false
-      this.form.validateFields((error, values) => {
-        ret = !error
-      })
-      return ret
-    },
-    setFieldsValue (props = {}) {
-      this.$nextTick(() => {
-        this.form.setFieldsValue(props)
-      })
-    },
-    getFieldsValue (fieldNames) {
-      return this.form.getFieldsValue(fieldNames)
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.dispatchExpression()
-      this.setDefaultValues()
-    })
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.ele__form--wrapper {
-  background: #fff;
-  .ant-form-item {
-  }
-}
+<template>
+  <div class="ele__form--wrapper">
+    <a-form :form="form" layout="vertical" class="ant-advanced-search-form">
+      <a-row :gutter="24">
+        <template v-for="ele in elements">
+          <a-col v-if="executeExpression(ele._show)" :span="ele.span" :key="ele.name">
+            <template v-if="ele.type == 'Input'">
+              <a-form-item :label="`${ele.label}：`">
+                <ele-input 
+                  @change="onChange($event, ele)" 
+                  :disabled="executeExpression(ele._disabled)" 
+                  :max-length="ele.maxLength" 
+                  v-decorator="[ele.name, { rules: rebuildRules(ele.rules) }]" 
+                  style="width:100%;">
+                </ele-input>
+              </a-form-item>
+            </template>
+            <template v-else-if="ele.type == 'Textarea'">
+              <a-form-item :label="`${ele.label}：`">
+                <ele-textarea 
+                  @change="onChange($event, ele)"
+                  :max-length="ele.maxLength"
+                  :autosize="ele.autosize"
+                  :disabled="executeExpression(ele._disabled)"
+                  :allow-clear="ele.allowClear"
+                  :placeholder="ele.placeholder"
+                  v-decorator="[ele.name, { rules: rebuildRules(ele.rules) }]"
+                  style="width:100%;">
+                </ele-textarea>
+              </a-form-item>
+            </template>
+            <template v-else-if="ele.type == 'Select'">
+              <a-form-item :label="`${ele.label}：`">
+                <ele-select 
+                  :data-source="ele.optionList" 
+                  :disabled="executeExpression(ele._disabled)"
+                  :multiple="ele.multiple"
+                  :mode="ele.mode"
+                  :code="ele.code"
+                  :init="ele.init"
+                  :url="ele.url"
+                  :params="ele.params" 
+                  @change="onChange($event, ele)"
+                  v-decorator="[ele.name, { rules: rebuildRules(ele.rules) }]" 
+                  style="width:100%;">
+                </ele-select>
+              </a-form-item>
+            </template>
+            <template v-else-if="ele.type == 'ele-upload'">
+              <a-form-item :label="`${ele.label}：`">
+                <ele-upload v-decorator="[ele.name, { rules: rebuildRules(ele.rules) }]" 
+                  :ext="ele.ext"
+                  :multiple="ele.multiple"
+                  :accept="ele.accept"
+                  :extensions="ele.extensions"
+                  :size="ele.size"
+                  :icon="ele.icon"
+                  :url="ele.url"
+                  :message="ele.message" 
+                  style="width:100%;">
+                </ele-upload>
+              </a-form-item>
+            </template>
+            <template v-else-if="ele.type == 'ele-date-range'">
+              <a-form-item :label="`${ele.label}：`">
+                <ele-date-range 
+                :disabled="executeExpression(ele._disabled)" 
+                v-decorator="[ele.name, { rules: rebuildRules(ele.rules) }]" 
+                style="width:100%;">
+              </ele-date-range>
+              </a-form-item>
+            </template>
+            <template v-else-if="ele.type == 'ele-date'">
+              <a-form-item :label="`${ele.label}：`">
+                <ele-date
+                  :format="ele.format"
+                  :mode="ele.mode"
+                  :show-time="ele.showTime"
+                  :show-today="ele.showToday"
+                  :value-format="ele.valueFormat"
+                  :disabled="executeExpression(ele._disabled)" 
+                  v-decorator="[ele.name, { rules: rebuildRules(ele.rules) }]" 
+                  style="width:100%;">
+                </ele-date>
+              </a-form-item>
+            </template>
+            <template v-else-if="ele.type == 'SelectEntity'">
+              <a-form-item :label="`${ele.label}：`">
+                <ele-select-entity 
+                  v-decorator="[ele.name, { rules: rebuildRules(ele.rules) }]" 
+                  style="width:100%;">
+                </ele-select-entity>
+              </a-form-item>
+            </template>
+            <template v-else-if="ele.type == 'InputNumber' || ele.type == 'ele-input-number'">
+              <a-form-item :label="`${ele.label}：`">
+                <ele-input-number 
+                  @change="onChange($event, ele)" 
+                  :precision="ele.precision" 
+                  :disabled="executeExpression(ele._disabled)" 
+                  v-decorator="[ele.name, { rules: rebuildRules(ele.rules) }]" 
+                  v-bind="ele.props" 
+                  style="width:100%;">
+                </ele-input-number>
+              </a-form-item>
+            </template>
+            <template v-else-if="ele.type == 'Checkbox'">
+              <a-form-item :label="`${ele.label}：`">
+                <ele-checkbox 
+                  :data-source="ele.optionList" 
+                  :disabled="executeExpression(ele._disabled)" 
+                  v-decorator="[ele.name, { rules: rebuildRules(ele.rules) }]" 
+                  style="width:100%;">
+                </ele-checkbox>
+              </a-form-item>
+            </template>
+            <template v-else-if="ele.type == 'Radio'">
+              <a-form-item :label="`${ele.label}：`">
+                <ele-radio 
+                  @change="onChange($event, ele)" 
+                  :disabled="executeExpression(ele._disabled)" 
+                  :data-source="ele.optionList" 
+                  v-decorator="[ele.name, { rules: rebuildRules(ele.rules) }]" 
+                  style="width:100%;">
+                </ele-radio>
+              </a-form-item>
+            </template>
+            <template v-else-if="ele.type == 'ele-form-img-crop'">
+              <a-form-item :label="`${ele.label}：`">
+                <ele-form-img-crop
+                  @change="onChange($event, ele)"
+                  :width="ele.width"
+                  :height="ele.height"
+                  :modal-title="ele.modalTitle"
+                  :cropper-config="ele.cropperConfig"
+                  :oper-text="ele.operText"
+                  :disabled="executeExpression(ele._disabled)" 
+                  v-decorator="[ele.name, { rules: rebuildRules(ele.rules) }]" 
+                  style="width:100%;">
+                </ele-form-img-crop>
+              </a-form-item>
+            </template>
+            <template v-else-if="ele.type == 'ele-tree-select'">
+              <a-form-item :label="`${ele.label}：`">
+                <ele-tree-select
+                  @change="onChange($event, ele)"
+                  :disabled="executeExpression(ele._disabled)"
+                  v-bind="ele.meta"
+                  v-decorator="[ele.name, { rules: rebuildRules(ele.rules) }]" 
+                  style="width:100%;">
+                </ele-tree-select>
+              </a-form-item>
+            </template>
+            <template v-else-if="ele.type == 'ele-select-entity-modal-table'">
+              <a-form-item :label="`${ele.label}：`">
+                <ele-select-entity-modal-table
+                  @change="onChange($event, ele)"
+                  :disabled="executeExpression(ele._disabled)"
+                  v-bind="ele.meta"
+                  v-decorator="[ele.name, { rules: rebuildRules(ele.rules) }]" 
+                  style="width:100%;">
+                </ele-select-entity-modal-table>
+              </a-form-item>
+            </template>
+          </a-col>
+        </template>
+      </a-row>
+    </a-form>
+  </div>
+</template>
+
+<script>
+import { parse } from '@idooel/expression'
+import { type } from '@idooel/shared'
+import { CONTEXT } from '../../utils'
+export default {
+  name: 'ele-form',
+  props: {
+    value: {
+      type: Object,
+      default: () => ({})
+    },
+    disabled: {
+      type: [Boolean, String],
+      default: '_routeMeta.disabled'
+    },
+    formName: {
+      type: [Number, String],
+      default: 'coordinated'
+    },
+    elements: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data () {
+    return {
+      formModel: {}
+    }
+  },
+  inject: {
+    [CONTEXT]: {
+      default: () => (() => ({}))
+    }
+  },
+  computed: {
+    contextData () {
+      return this[CONTEXT].call(this)
+    },
+    globalDisabled () {
+      return this.executeExpression(this.disabled)
+    },
+    form () {
+      const ref = this.$form.createForm(this, { name: this.formName })
+      return ref
+    },
+    exposedMethods () {
+      return {
+        setFieldsValue: this.setFieldsValue,
+        getFieldsValue: this.getFieldsValue
+      }
+    }
+  },
+  created () {
+    this.setDefaultValues()
+  },
+  methods: {
+    setFormModel (props = {}) {
+      this.formModel = props
+      this.dispatchExpression()
+    },
+    rebuildRules (rules = []) {
+      //TODO
+      rules.map(rule => {
+        const { validator } = rule
+        if (validator) {
+          validator.formModel = this.getFieldsValue()
+          validator.exposed = this.exposedMethods
+        }
+      })
+      return rules
+    },
+    dispatchExpression () {
+      this.evalDisabledExpression()
+      this.evalShowExpression()
+    },
+    evalDisabledExpression () {
+      this.elements.forEach(ele => {
+        if (this.globalDisabled) return this.$set(ele, '_disabled', true)
+        const { disabled } = ele
+        const ret = this.executeExpression(disabled)
+        this.$set(ele, '_disabled', ret)
+      })
+    },
+    evalShowExpression () {
+      this.elements.forEach(ele => {
+        const { show = true } = ele
+        const ret = this.executeExpression(show)
+        this.$set(ele, '_show', ret)
+      })
+    },
+    executeExpression (expression) {
+      if (type.isBool(expression)) return expression
+      if (type.isEmpty(expression)) return false
+      return parse(expression, { ...this.getFieldsValue(), ...this.formModel, _route: this.$route.query, _routeMeta: this.$route.meta })
+    },
+    onChange (value, props) {
+      const { name } = props
+      this.$set(this.formModel, name, value)
+      this.dispatchExpression()
+      this.setFieldsValue({ [name]: value })
+      this.$emit('change', { value, props, exposed: { ...this.exposedMethods } })
+    },
+    collectDefaultValues () {
+      const ret = this.elements.reduce((ret, props) => {
+        const { name, defaultValue } = props
+        if (defaultValue) {
+          ret[name] = defaultValue
+        }
+        return ret
+      }, {})
+      return ret
+    },
+    //TODO deprecated in the future, need to be implemented in the outer component
+    setDefaultValues () {
+      const defaultValues = this.collectDefaultValues()
+      this.setFormModel(defaultValues)
+      this.setFieldsValue(defaultValues)
+    },
+    validateFields () {
+      let ret = false
+      this.form.validateFields((error, values) => {
+        ret = !error
+      })
+      return ret
+    },
+    setFieldsValue (props = {}) {
+      this.$nextTick(() => {
+        this.form.setFieldsValue(props)
+      })
+    },
+    getFieldsValue (fieldNames) {
+      return this.form.getFieldsValue(fieldNames)
+    }
+  },
+  mounted() {
+    this.$emit('x:mounted', { setFormModel: this.setFormModel })
+    this.dispatchExpression()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ele__form--wrapper {
+  background: #fff;
+  .ant-form-item {
+  }
+}
 </style>

package/packages/icon/index.js

@@ -1,5 +1,5 @@
-import EleIcon from './src/index.vue'
-
-EleIcon.install = Vue => Vue.component(EleIcon.name, EleIcon)
-
+import EleIcon from './src/index.vue'
+
+EleIcon.install = Vue => Vue.component(EleIcon.name, EleIcon)
+
 export default EleIcon