@idooel/components 0.0.1 → 0.0.2

package/packages/form/src/index.vue

@@ -0,0 +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"
+                  :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

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

package/packages/icon/src/index.vue

@@ -0,0 +1,32 @@
+<template>
+  <a-icon
+    v-if="isAntIcon"
+    :type="type"
+    :theme="theme">
+  </a-icon>
+  <i :class="['iconfont', type]" v-else></i>
+</template>
+
+<script>
+export default {
+  name: 'ele-icon',
+  props: {
+    type: {
+      type: String,
+      default: ''
+    },
+    theme: {
+      type: String
+    }
+  },
+  computed: {
+    isAntIcon() {
+      const prefix = this.type.slice(0, 5)
+      if (prefix === 'icon-') {
+        return false
+      }
+      return true
+    }
+  }
+}
+</script>

package/packages/index.js

@@ -1,51 +1,154 @@
-import EleButton from './button/index.js'
-import EleDate from './date/index.js'
-import EleInput from './input/index.js'
-import EleSelect from './select/index.js'
-import EleTable from './table/index.js'
-import EleTree from './tree/index.js'
-import EleTpl from './tpl/index.js'
-
-import EleButtonGroup from './composite-components/button-group/index.js'
-import EleSearchArea from './composite-components/search-area/index.js'
-
-import EleTreeTableModel from './tree-table-model/index.js'
-
-const compositeComponents = [
-  EleButtonGroup,
-  EleSearchArea
-]
-
-export const models = [
-  EleTreeTableModel
-]
-
-const components = [
-  EleButton,
-  EleDate,
-  EleInput,
-  EleSelect,
-  EleTable,
-  EleTree,
-  EleTpl,
-  ...compositeComponents,
-  ...models
-]
-
-const install = (Vue) => {
-  if (install.installed) return
-  install.installed = true
-  components.forEach(component => {
-    Vue.component(component.name, component)
-  })
-}
-export default install
-export {
-  EleButton,
-  EleDate,
-  EleInput,
-  EleSelect,
-  EleTable,
-  EleTree,
-  EleTpl
+import EleButton from './button/index.js'
+import EleDate from './date/index.js'
+import EleInput from './input/index.js'
+import EleSelect from './select/index.js'
+import EleTable from './table/index.js'
+import EleTree from './tree/index.js'
+import EleTpl from './tpl/index.js'
+import EleForm from './form/index.js'
+import EleAlert from './alert/index.js'
+import EleUpload from './upload/index.js'
+import EleSelectEntity from './select-entity/index.js'
+import EleIcon from './icon/index.js'
+import EleInputNumber from './input-number/index.js'
+import EleModal from './modal/index.js'
+import EleCheckbox from './checkbox/index.js'
+import EleRadio from './radio/index.js'
+import EleBatchExport from './batch-export/index.js'
+import EleDateRange from './date-range/index.js'
+import EleTimeline from './timeline/index.js'
+import EleText from './text/index.js'
+import EleTabs from './tabs/index.js'
+import EleModalImgCrop from './composite-components/modal-img-crop/index.js'
+import EleTextEditor from './text-editor/index.js'
+import EleTextarea from './textarea/index.js'
+import EleLoading from './loading/index.js'
+import EleTreeSelect from './tree-select/index.js'
+
+import EleSearchArea from './composite-components/search-area/index.js'
+import EleButtonGroup from './composite-components/button-group/index.js'
+import EleModalForm from './composite-components/modal-form/index.js'
+import EleModalTree from './composite-components/modal-tree/index.js'
+import EleModalConfirm from './composite-components/modal-confirm/index.js'
+import EleModalTable from './composite-components/modal-table/index.js'
+import EleFormImgCrop from './composite-components/form-img-crop/index.js'
+import EleSelectEntityModalTable from './composite-components/select-entity-modal-table/index.js'
+
+import EleModalImport from './business-components/modal-import/index.js'
+import EleModalTimeline from './business-components/modal-timeline/index.js'
+import EleModalFsm from './business-components/modal-fsm/index.js'
+import EleTabsSubCenter from './business-components/tabs-sub-center/index.js'
+
+import EleTreeTableModel from './models/tree-table-model/index.js'
+import EleFormPageModel from './models/form-model/index.js'
+import EleFormGroupModel from './models/form-group-model/index.js'
+import EleStepModel from './models/step-model/index.js'
+
+const compositeComponents = [
+  EleButtonGroup,
+  EleSearchArea,
+  EleModalForm,
+  EleModalTree,
+  EleModalImgCrop,
+  EleModalConfirm,
+  EleModalTable,
+  EleFormImgCrop,
+  EleSelectEntityModalTable
+]
+const businessComponents = [
+  EleModalImport,
+  EleModalTimeline,
+  EleModalFsm,
+  EleTabsSubCenter
+]
+
+export const models = [
+  EleTreeTableModel,
+  EleFormPageModel,
+  EleFormGroupModel,
+  EleStepModel
+]
+
+const components = [
+  EleButton,
+  EleDate,
+  EleInput,
+  EleSelect,
+  EleTable,
+  EleTree,
+  EleTpl,
+  EleForm,
+  EleAlert,
+  EleUpload,
+  EleSelectEntity,
+  EleIcon,
+  EleInputNumber,
+  EleModal,
+  EleCheckbox,
+  EleRadio,
+  EleBatchExport,
+  EleDateRange,
+  EleTimeline,
+  EleText,
+  EleTabs,
+  EleTextEditor,
+  EleTextarea,
+  EleLoading,
+  EleTreeSelect,
+  ...compositeComponents,
+  ...businessComponents,
+  ...models,
+]
+
+const install = (Vue) => {
+  if (install.installed) return
+  install.installed = true
+  components.forEach(component => {
+    Vue.component(component.name, component)
+  })
+}
+export default install
+export {
+  EleButton,
+  EleDate,
+  EleInput,
+  EleSelect,
+  EleTable,
+  EleTree,
+  EleTpl,
+  EleForm,
+  EleAlert,
+  EleUpload,
+  EleSelectEntity,
+  EleIcon,
+  EleInputNumber,
+  EleModal,
+  EleCheckbox,
+  EleRadio,
+  EleTreeSelect,
+  EleBatchExport,
+  EleDateRange,
+  EleTimeline,
+  EleText,
+  EleTabs,
+  EleTextEditor,
+  EleButtonGroup,
+  EleSearchArea,
+  EleModalForm,
+  EleModalTree,
+  EleModalImgCrop,
+  EleModalImport,
+  EleModalTimeline,
+  EleTreeTableModel,
+  EleFormPageModel,
+  EleFormGroupModel,
+  EleStepModel,
+  EleModalConfirm,
+  EleModalFsm,
+  EleTextarea,
+  EleModalTable,
+  EleLoading,
+  EleTabsSubCenter,
+  EleFormImgCrop,
+  EleSelectEntityModalTable
 }

package/packages/input/index.js

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

package/packages/input/src/index.vue

@@ -1,24 +1,36 @@
-<template>
-  <a-input :value="value" @change="onChange"></a-input>
-</template>
-
-<script>
-export default {
-  name: 'ele-input',
-  props: {
-    value: {
-      type: String
-    }
-  },
-  methods: {
-    onChange (e) {
-      this.$emit('change', e.target.value)
-      this.$emit('input', e.target.value)
-    }
-  } 
-}
-</script>
-
-<style scoped>
-
+<template>
+  <a-input :value="value" :disabled="disabled" :max-length="maxLength" @change="onChange"></a-input>
+</template>
+
+<script>
+export default {
+  name: 'ele-input',
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    maxLength: {
+      type: Number,
+      default: 125
+    },
+    value: {
+      type: String
+    }
+  },
+  methods: {
+    onChange (e) {
+      this.$emit('change', e.target.value)
+      this.$emit('input', e.target.value)
+    }
+  } 
+}
+</script>
+
+<style scoped>
+
 </style>

package/packages/input-number/index.js

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

package/packages/input-number/src/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <a-input-number v-bind="$attrs" :value="value" :precision="precision" @change="onChange" style="width: 100%;"></a-input-number>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ele-input-number',
+  props: {
+    precision: {
+      type: Number
+    },
+    value: {
+      type: [Number, String]
+    }
+  },
+  methods: {
+    onChange (value) {
+      this.$emit('change', value)
+    }
+  } 
+}
+</script>

package/packages/loading/index.js

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