@idooel/components 0.0.1-beta.99 → 0.0.2

package/packages/composite-components/modal-form/src/index.vue

@@ -1,224 +1,231 @@
-<template>
-  <ele-modal 
-    :title="modalTitle" 
-    :value="innerValue" 
-    :size="modalSize"
-    v-on="assignAttrForEvents"
-    :button-group-meta="buildButtonGroupMeta">
-    <ele-form :ref="formRef" :elements="elements"></ele-form>
-  </ele-modal>
-</template>
-
-<script>
-import { v4 as uuidv4 } from 'uuid'
-import { net, type } from '@idooel/shared'
-import { parse } from '@idooel/expression'
-import { BUILT_IN_EVENT_NAMES, BUILT_IN_METHODS_NAMES, parseFieldMap, RESERVE_EVENT_NAMES, PAGE_STATUS, CONTEXT } from '../../../utils'
-export default {
-  name: 'ele-modal-form',
-  model: {
-    prop: 'value',
-    event: 'change'
-  },
-  props: {
-    title: {
-      type: String,
-      default: 'ModalForm'
-    },
-    size: {
-      type: String
-    },
-    value: {
-      type: Boolean,
-      default: false
-    },
-    meta: {
-      type: Object
-    }
-  },
-  data() {
-    return {
-      innerValue: false
-    }
-  },
-  inject: {
-    context: {
-      default: () => ({})
-    },
-    [CONTEXT]: {
-      default: () => (() => {})
-    }
-  },
-  computed: {
-    currentExposed () {
-      return {
-        formModel: this.formModels(),
-        validateFields: this.validateFields,
-        setFieldsValue: this.setFieldsValue,
-        submitForm: this.submitRequestTrigger
-      }
-    },
-    globalDisabled () {
-      return this.executeExpression(this.disabled)
-    },
-    assignAttrForEvents () {
-      const events = this.footerMetaElements.reduce((ret, ele) => {
-        ret[ele.eventName] = (e) => {
-          const { exposed = {} } = e
-          Object.assign(exposed, { ...this.currentExposed })
-          this.$emit(ele.eventName || 'click', { ...e, formModel: this.formModels() })
-        }
-        return ret
-      }, {})
-      return {
-        ...events,
-        [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT],
-        [BUILT_IN_EVENT_NAMES.CANCEL]: this[BUILT_IN_EVENT_NAMES.CANCEL]
-      }
-    },
-    expressionData () {
-      return {
-        _route: this.$route.query,
-        _routeMeta: this.$route.meta
-      }
-    },
-    formRef () {
-      return uuidv4()
-    },
-    buttonGroupMeta () {
-      const { footerMeta = {} } = this.meta
-      return footerMeta
-    },
-    footerMetaElements () {
-      const { elements = [] } = this.buttonGroupMeta
-      if (type.isFunction(elements)) {
-        return elements.call(this)
-      }
-      return elements
-    },
-    buildButtonGroupMeta () {
-      return { ...this.buttonGroupMeta, elements: this.footerMetaElements }
-    },
-    formMeta () {
-      const { formMeta = {} } = this.meta
-      return formMeta
-    },
-    preRequest () {
-      const { preRequest } = this.formMeta
-      return preRequest
-    },
-    infoRequest () {
-      const { infoRequest } = this.formMeta
-      return infoRequest
-    },
-    submitRequest () {
-      const { submitRequest } = this.formMeta
-      return submitRequest
-    },
-    elements () {
-      const { elements = [] } = this.formMeta
-      return elements
-    },
-    modalSize () {
-      const { size } = this.meta
-      return size ? size : this.size
-    },
-    modalTitle () {
-      const { title } = this.meta
-      return title ? title : this.title
-    },
-    exposedMethods () {
-      return {
-        [BUILT_IN_METHODS_NAMES.CLOSE_MODAL]: this[BUILT_IN_METHODS_NAMES.CLOSE_MODAL]
-      }
-    },
-    contextData () {
-      return this[CONTEXT].call(this)
-    }
-  },
-  watch: {
-    value: {
-      async handler (value) {
-        this.innerValue = value
-        if (value) {
-          await this.preRequestTrigger()
-          await this.infoRequestTrigger()
-        }
-      },
-      immediate: true
-    }
-  },
-  methods: {
-    [BUILT_IN_METHODS_NAMES.CLOSE_MODAL] () {
-      this.innerValue = false
-      this.$emit('change', this.innerValue)
-    },
-    formModels () {
-      return this.$refs[this.formRef] ? this.$refs[this.formRef].getFieldsValue() : {}
-    },
-    execFieldMap (fieldMap = {}, dataSource = {}) {
-      const contxtData = this[CONTEXT].call(this)
-      const { exposed = {} } = contxtData
-      const ret = parseFieldMap(fieldMap, { _route: this.$route.query, ...exposed, ...dataSource})
-      return ret
-    },
-    executeExpression (expression, dataSource = {}) {
-      if (type.isBool(expression)) return expression
-      if (type.isEmpty(expression)) return false
-      return parse(expression, { ...this.expressionData, ...this.formModels(), ...dataSource })
-    },
-    async submitRequestTrigger (props = {}) {
-      const { exposed = {} } = this.contextData
-      const { requestTableData } = exposed
-      const { url, requestType, headers = {}, params = {}, fieldMap = {} } = this.submitRequest
-      if (!url) return
-      const ret = await net[requestType.toLowerCase()](url, { ...params, ...this.execFieldMap(fieldMap, { ...this.formModels() }), ...this.formModels() }, { headers }).then(resp => {
-        this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...props, formModel: { ...this.formModels(), ...resp.data || {} } })
-        requestTableData && requestTableData()
-        this.innerValue = false
-        this.$emit('change', this.innerValue)
-        return resp.data
-      })
-      return ret
-    },
-    async infoRequestTrigger () {
-      if (PAGE_STATUS.CREATE == this.routeMetaMode) return
-      const { url, requestType, params = {}, fieldMap = {}, headers = {} } = this.infoRequest
-      if (!url) return
-      net[requestType.toLowerCase()](url, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers }).then(resp => {
-        const { data = {} } = resp
-        this.setFieldsValue(data)
-        this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })
-      })
-    },
-    async preRequestTrigger () {
-      const { url, requestType = 'GET', params = {}, fieldMap = {}, headers = {} } = this.preRequest
-      if (!url) return
-      const { data } = await net[requestType.toLowerCase()](url, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers })
-      this.setFieldsValue(data)
-      this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })
-    },
-    setFieldsValue (props) {
-      this.$refs[this.formRef].setFieldsValue(props)
-    },
-    validateFields () {
-      return this.$refs[this.formRef].validateFields()
-    },
-    [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {
-      if (this.globalDisabled) return
-      const status = this.$refs[this.formRef].validateFields()
-      if (status) {
-        //TODO fieldMap
-        return this.submitRequestTrigger(props)
-      } else {
-        return false
-      }
-    },
-    [BUILT_IN_EVENT_NAMES.CANCEL] (props = {}) {
-      this.innerValue = false
-      this.$emit('change', this.innerValue)
-      this.$emit(BUILT_IN_EVENT_NAMES.CANCEL, { ...props })
-    }
-  }
-}
+<template>
+  <ele-modal 
+    :title="modalTitle" 
+    :value="innerValue" 
+    :size="modalSize"
+    v-on="assignAttrForEvents"
+    :button-group-meta="buildButtonGroupMeta">
+    <ele-form :ref="formRef" :elements="elements" @x:mounted="formMounted"></ele-form>
+  </ele-modal>
+</template>
+
+<script>
+import { v4 as uuidv4 } from 'uuid'
+import { net, type } from '@idooel/shared'
+import { parse } from '@idooel/expression'
+import { BUILT_IN_EVENT_NAMES, BUILT_IN_METHODS_NAMES, parseFieldMap, RESERVE_EVENT_NAMES, PAGE_STATUS, CONTEXT } from '../../../utils'
+export default {
+  name: 'ele-modal-form',
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: {
+    title: {
+      type: String,
+      default: 'ModalForm'
+    },
+    size: {
+      type: String
+    },
+    value: {
+      type: Boolean,
+      default: false
+    },
+    meta: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      innerValue: false,
+      formModel: {}
+    }
+  },
+  inject: {
+    context: {
+      default: () => ({})
+    },
+    [CONTEXT]: {
+      default: () => (() => {})
+    }
+  },
+  computed: {
+    currentExposed () {
+      return {
+        formModel: this.formModels(),
+        validateFields: this.validateFields,
+        setFieldsValue: this.setFieldsValue,
+        submitForm: this.submitRequestTrigger
+      }
+    },
+    globalDisabled () {
+      return this.executeExpression(this.disabled)
+    },
+    assignAttrForEvents () {
+      const events = this.footerMetaElements.reduce((ret, ele) => {
+        ret[ele.eventName] = (e) => {
+          const { exposed = {} } = e
+          Object.assign(exposed, { ...this.currentExposed })
+          this.$emit(ele.eventName || 'click', { ...e, formModel: this.formModels() })
+        }
+        return ret
+      }, {})
+      return {
+        ...events,
+        [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT],
+        [BUILT_IN_EVENT_NAMES.CANCEL]: this[BUILT_IN_EVENT_NAMES.CANCEL]
+      }
+    },
+    expressionData () {
+      return {
+        _route: this.$route.query,
+        _routeMeta: this.$route.meta
+      }
+    },
+    formRef () {
+      return uuidv4()
+    },
+    buttonGroupMeta () {
+      const { footerMeta = {} } = this.meta
+      return footerMeta
+    },
+    footerMetaElements () {
+      const { elements = [] } = this.buttonGroupMeta
+      if (type.isFunction(elements)) {
+        return elements.call(this)
+      }
+      return elements
+    },
+    buildButtonGroupMeta () {
+      return { ...this.buttonGroupMeta, elements: this.footerMetaElements }
+    },
+    formMeta () {
+      const { formMeta = {} } = this.meta
+      return formMeta
+    },
+    preRequest () {
+      const { preRequest } = this.formMeta
+      return preRequest
+    },
+    infoRequest () {
+      const { infoRequest } = this.formMeta
+      return infoRequest
+    },
+    submitRequest () {
+      const { submitRequest } = this.formMeta
+      return submitRequest
+    },
+    elements () {
+      const { elements = [] } = this.formMeta
+      return elements
+    },
+    modalSize () {
+      const { size } = this.meta
+      return size ? size : this.size
+    },
+    modalTitle () {
+      const { title } = this.meta
+      return title ? title : this.title
+    },
+    exposedMethods () {
+      return {
+        [BUILT_IN_METHODS_NAMES.CLOSE_MODAL]: this[BUILT_IN_METHODS_NAMES.CLOSE_MODAL]
+      }
+    },
+    contextData () {
+      return this[CONTEXT].call(this)
+    }
+  },
+  watch: {
+    value: {
+      async handler (value) {
+        this.innerValue = value
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    async formMounted (ref) {
+      const { setFormModel } = ref
+      await this.preRequestTrigger({ setFormModel })
+      await this.infoRequestTrigger({ setFormModel })
+    },
+    [BUILT_IN_METHODS_NAMES.CLOSE_MODAL] () {
+      this.innerValue = false
+      this.$emit('change', this.innerValue)
+    },
+    formModels () {
+      return this.$refs[this.formRef] ? this.$refs[this.formRef].getFieldsValue() : {}
+    },
+    execFieldMap (fieldMap = {}, dataSource = {}) {
+      const contxtData = this[CONTEXT].call(this)
+      const { exposed = {} } = contxtData
+      const ret = parseFieldMap(fieldMap, { _route: this.$route.query, exposed: exposed, ...exposed, ...dataSource})
+      return ret
+    },
+    executeExpression (expression, dataSource = {}) {
+      if (type.isBool(expression)) return expression
+      if (type.isEmpty(expression)) return false
+      return parse(expression, { ...this.expressionData, ...this.formModels(), ...dataSource })
+    },
+    async submitRequestTrigger (props = {}) {
+      const { exposed = {} } = this.contextData
+      const { requestTableData } = exposed
+      const { url, requestType, headers = {}, params = {}, fieldMap = {} } = this.submitRequest
+      if (!url) return
+      const ret = await net[requestType.toLowerCase()](url, { ...params, ...this.execFieldMap(fieldMap, { ...this.formModels() }), ...this.formModels() }, { headers }).then(resp => {
+        this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...props, formModel: { ...this.formModels(), ...resp.data || {} } })
+        requestTableData && requestTableData()
+        this.innerValue = false
+        this.$emit('change', this.innerValue)
+        return resp.data
+      })
+      return ret
+    },
+    async infoRequestTrigger ({ setFormModel }) {
+      if (PAGE_STATUS.CREATE == this.routeMetaMode) return
+      if (!this.infoRequest) return
+      const { url, requestType, params = {}, fieldMap = {}, headers = {} } = this.infoRequest
+      if (!url) return
+      net[requestType.toLowerCase()](url, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers }).then(resp => {
+        const { data = {} } = resp
+        this.setFieldsValue(data)
+        setFormModel(data)
+        this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })
+      })
+    },
+    async preRequestTrigger ({ setFormModel }) {
+      const { url, requestType = 'GET', params = {}, fieldMap = {}, headers = {} } = this.preRequest
+      if (!url) return
+      const { data } = await net[requestType.toLowerCase()](url, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers })
+      this.setFieldsValue(data)
+      setFormModel(data)
+      this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })
+    },
+    setFieldsValue (props) {
+      this.$nextTick(() => {
+        this.$refs[this.formRef].setFieldsValue(props)
+      })
+    },
+    validateFields () {
+      return this.$refs[this.formRef].validateFields()
+    },
+    [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {
+      if (this.globalDisabled) return
+      const status = this.$refs[this.formRef].validateFields()
+      if (status) {
+        //TODO fieldMap
+        return this.submitRequestTrigger(props)
+      } else {
+        return false
+      }
+    },
+    [BUILT_IN_EVENT_NAMES.CANCEL] (props = {}) {
+      this.innerValue = false
+      this.$emit('change', this.innerValue)
+      this.$emit(BUILT_IN_EVENT_NAMES.CANCEL, { ...props })
+    }
+  }
+}
 </script>

package/packages/composite-components/modal-img-crop/index.js

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