@idooel/components 0.0.2-beta.3 → 0.0.2-beta.31

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

@@ -1,104 +1,104 @@
-<template>
-  <ele-modal :title="title" :value="value" :size="size" @cancel="onCancel" v-on="overrideEvents" :buttonGroupMeta="buttonGroupMeta">
-    <ele-alert v-if="alert" v-bind="alert"></ele-alert>
-    <div v-if="contentText" class="ele-modal-confirm__content">
-      {{ contentText }}
-    </div>
-  </ele-modal>
-</template>
-
-<script>
-import { CONTEXT } from '../../../utils'
-export default {
-  name: 'ele-modal-confirm',
-  model: {
-    event: 'change',
-    prop: 'value'
-  },
-  props: {
-    title: {
-      type: String
-    },
-    size: {
-      type: String,
-      default: 'small'
-    },
-    alert: {
-      type: [Object, Boolean],
-      default: () => ({
-        type: 'warning',
-        message: '确定要删除吗？',
-        description: '删除后将无法恢复',
-        closable: false
-      })
-    },
-    contentText: {
-      type: String
-    },
-    value: {
-      type: Boolean,
-      default: false
-    },
-    buttonGroupMeta: {
-      type: Object
-    },
-    //!deprecated
-    contextProp: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  inject: {
-    [CONTEXT]: {
-      default: () => (() => ({}))
-    }
-  },
-  data () {
-    return {}
-  },
-  computed: {
-    currentContext () {
-      const { exposed: exposedData = {} } = this[CONTEXT]()
-      const exposed = Object.assign({}, exposedData, { closeModalConfirm: this.closeModalConfirm })
-      return {
-        _route: this.$route.query,
-        _routeMeta: this.$route.meta,
-        ...this[CONTEXT](),
-        exposed
-      }
-    },
-    overrideEvents () {
-      if (!this.buttonGroupMeta) return {}
-      const { elements = [] } = this.buttonGroupMeta
-      const events = elements.reduce((ret, ele) =>{
-        ret[ele.eventName || 'click'] = (e) => {
-          this.$emit(ele.eventName || 'click', { ...e, ...this.currentContext })
-        }
-        return ret
-      }, {})
-      return {
-        ...events
-      }
-    }
-  },
-  methods: {
-    closeModalConfirm () {
-      this.$emit('change', false)
-    },
-    onCancel () {
-      this.$emit('change', false)
-    }
-  }
-}
-</script>
-<style lang="scss">
-@import '../../../theme/index';
-</style>
-<style lang="scss" scoped>
-.ele-modal-confirm__content {
-  margin-top: 8px;
-  color: var(--idoole-black-088);
-  font-size: 14px;
-  line-height: 22px;
-}
+<template>
+  <ele-modal :title="title" :value="value" :size="size" @cancel="onCancel" v-on="overrideEvents" :buttonGroupMeta="buttonGroupMeta">
+    <ele-alert v-if="alert" v-bind="alert"></ele-alert>
+    <div v-if="contentText" class="ele-modal-confirm__content">
+      {{ contentText }}
+    </div>
+  </ele-modal>
+</template>
+
+<script>
+import { CONTEXT } from '../../../utils'
+export default {
+  name: 'ele-modal-confirm',
+  model: {
+    event: 'change',
+    prop: 'value'
+  },
+  props: {
+    title: {
+      type: String
+    },
+    size: {
+      type: String,
+      default: 'small'
+    },
+    alert: {
+      type: [Object, Boolean],
+      default: () => ({
+        type: 'warning',
+        message: '确定要删除吗？',
+        description: '删除后将无法恢复',
+        closable: false
+      })
+    },
+    contentText: {
+      type: String
+    },
+    value: {
+      type: Boolean,
+      default: false
+    },
+    buttonGroupMeta: {
+      type: Object
+    },
+    //!deprecated
+    contextProp: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  inject: {
+    [CONTEXT]: {
+      default: () => (() => ({}))
+    }
+  },
+  data () {
+    return {}
+  },
+  computed: {
+    currentContext () {
+      const { exposed: exposedData = {} } = this[CONTEXT]()
+      const exposed = Object.assign({}, exposedData, { closeModalConfirm: this.closeModalConfirm })
+      return {
+        _route: this.$route.query,
+        _routeMeta: this.$route.meta,
+        ...this[CONTEXT](),
+        exposed
+      }
+    },
+    overrideEvents () {
+      if (!this.buttonGroupMeta) return {}
+      const { elements = [] } = this.buttonGroupMeta
+      const events = elements.reduce((ret, ele) =>{
+        ret[ele.eventName || 'click'] = (e) => {
+          this.$emit(ele.eventName || 'click', { ...e, ...this.currentContext })
+        }
+        return ret
+      }, {})
+      return {
+        ...events
+      }
+    }
+  },
+  methods: {
+    closeModalConfirm () {
+      this.$emit('change', false)
+    },
+    onCancel () {
+      this.$emit('change', false)
+    }
+  }
+}
+</script>
+<style lang="scss">
+@import '../../../theme/index';
+</style>
+<style lang="scss" scoped>
+.ele-modal-confirm__content {
+  margin-top: 8px;
+  color: var(--idoole-black-088);
+  font-size: 14px;
+  line-height: 22px;
+}
 </style>

package/packages/composite-components/modal-form/index.js

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

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

@@ -1,231 +1,231 @@
-<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 })
-    }
-  }
-}
+<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, currentRowData: exposed.getCurrentRowData(), ...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()
+    },
+    async [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {
+      if (this.globalDisabled) return
+      const status = await 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>