@idooel/components 0.0.1 → 0.0.2

package/packages/models/form-model/src/index.vue

@@ -0,0 +1,233 @@
+<template>
+  <div class="form__model--wrapper">
+    <div class="form-model__title" v-if="title">
+      {{ title }}
+    </div>
+    <div class="form-model__content">
+      <ele-alert style="margin-bottom: 16px;" v-if="alertMeta" v-bind="alertMeta"></ele-alert>
+      <ele-form :ref="formRef" @change="onChangeFormStatus($event)" :elements="elements" :disabled="globalDisabled"></ele-form>
+    </div>
+    <div class="form-model__footer" v-if="footerMeta">
+      <ele-button-group v-on="assignAttrForEvents" :data-source="footerElements"></ele-button-group>
+    </div>
+  </div>
+</template>
+
+<script>
+import { BUILT_IN_EVENT_NAMES, parseFieldMap, RESERVE_EVENT_NAMES, PAGE_STATUS, CONTEXT, BUILT_IN_METHODS_NAMES } from '../../../utils'
+import { v4 as uuidv4 } from 'uuid'
+import { net, type } from '@idooel/shared'
+import { parse } from '@idooel/expression'
+export default {
+  name: 'ele-form-model',
+  props: {
+    disabled: {
+      type: [Boolean, String],
+      default: '_routeMeta.disabled'
+    },
+    title: {
+      type: String
+    },
+    formMeta: {
+      type: Object
+    },
+    footerMeta: {
+      type: Object
+    }
+  },
+  data() {
+    return {}
+  },
+  provide () {
+    return {
+      [CONTEXT]: () => {
+        return {
+          exposed: this.exposed
+        }
+      }
+    }
+  },
+  computed: {
+    globalDisabled () {
+      return this.executeExpression(this.disabled)
+    },
+    formRef () {
+      return uuidv4()
+    },
+    exposed () {
+      return {
+        setFieldsValue: this.setFieldsValue,
+        validateFields: this.validateFields,
+        getFieldsValue: this.getFieldsValue,
+        route: this.$route,
+        [BUILT_IN_METHODS_NAMES.SUBMIT_FORM]: this.submitRequestTrigger
+      }
+    },
+    assignAttrForEvents () {
+      const events = this.footerElements.reduce((ret, ele) => {
+        ret[ele.eventName] = (e) => {
+          this.$emit(ele.eventName || 'click', { ...e, formModel: this.formModels(), exposed: this.exposed })
+        }
+        return ret
+      }, {})
+      return {
+        ...this.$listeners,
+        ...events,
+        [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT],
+        [BUILT_IN_EVENT_NAMES.CANCEL]: this[BUILT_IN_EVENT_NAMES.CANCEL]
+      }
+    },
+    elements () {
+      const { elements } = this.formMeta
+      return elements
+    },
+    preRequest () {
+      const { preRequest = {} } = this.formMeta
+      return preRequest
+    },
+    infoRequest () {
+      const { infoRequest = {} } = this.formMeta
+      return infoRequest
+    },
+    alertMeta () {
+      const { alert = {} } = this.formMeta
+      return type.isEmpty(alert) ? null : alert
+    },
+    submitRequest () {
+      const { submitRequest = {} } = this.formMeta
+      return submitRequest
+    },
+    footerElements () {
+      const { elements } = this.footerMeta
+      return elements.call(this)
+    },
+    expressionData () {
+      return {
+        _route: this.$route.query,
+        _routeMeta: this.$route.meta
+      }
+    },
+    routeMetaMode () {
+      return this.$route.meta.mode
+    }
+  },
+  methods: {
+    collectDefaultValues () {
+      const ret = this.elements.reduce((ret, props) => {
+        const { name, defaultValue } = props
+        if (defaultValue) {
+          ret[name] = defaultValue
+        }
+        return ret
+      }, {})
+      return ret
+    },
+    onChangeFormStatus (props) {
+      this.$emit(RESERVE_EVENT_NAMES.WATCH_FORM_STATUS, { ...props })
+    },
+    formModels (fieldNames) {
+      return this.$refs[this.formRef] ? this.$refs[this.formRef].getFieldsValue(fieldNames) : {}
+    },
+    executeExpression (expression, dataSource = {}) {
+      if (type.isBool(expression)) return expression
+      if (type.isEmpty(expression)) return false
+      return parse(expression, { ...this.expressionData, ...this.formModels(), ...dataSource })
+    },
+    execFieldMap (fieldMap = {}, dataSource = {}) {
+      const ret = parseFieldMap(fieldMap, { ...this.expressionData, ...dataSource})
+      return ret
+    },
+    async submitRequestTrigger (props = {}) {
+      const { url, requestType, headers = {}, params = {}, fieldMap = {} } = this.submitRequest
+      const currentUrl = this.executeExpressionForUrl(url)
+      if (!currentUrl) return
+      const ret = await net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap, { ...this.formModels() }), ...this.formModels() }, { headers }).then(resp => {
+        this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...props, formModel: { ...this.formModels(), ...resp.data || {} } })
+        return resp.data
+      })
+      return ret
+    },
+    async infoRequestTrigger () {
+      if (PAGE_STATUS.CREATE == this.routeMetaMode) return
+      const { url, requestType, params = {}, fieldMap = {}, headers = {} } = this.infoRequest
+      const currentUrl = this.executeExpressionForUrl(url)
+      if (!currentUrl) return
+      net[requestType.toLowerCase()](currentUrl, { ...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
+      const currentUrl = this.executeExpressionForUrl(url)
+      if (!currentUrl) return
+      const { data } = await net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers })
+      this.setFieldsValue(data)
+      this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })
+    },
+    executeExpressionForUrl (url) {
+      return type.isApi(url) ? url : this.executeExpression(url)
+    },
+    setFieldsValue (props) {
+      this.$refs[this.formRef].setFieldsValue(props)
+    },
+    getFieldsValue (fieldNames) {
+      return this.$refs[this.formRef].getFieldsValue(fieldNames)
+    },
+    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.$emit(BUILT_IN_EVENT_NAMES.CANCEL, { ...props })
+    }
+  },
+  async mounted() {
+    this.setFieldsValue(this.collectDefaultValues())
+    await this.preRequestTrigger()
+    await this.infoRequestTrigger()
+    this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { exposed: this.exposed })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.form__model--wrapper {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background: #fff;
+  .form-model__title {
+    height: 56px;
+    padding: 0 16px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border-bottom: 1px solid var(--idooel-form-title-border-color);
+  }
+  .form-model__content {
+    padding: 16px;
+  }
+  .form-model__footer {
+    /* width: 100%; */
+    height: 64px;
+    position: fixed;
+    bottom: 0;
+    display: flex;
+    float: right;
+    flex-direction: row;
+    align-items: center;
+    justify-content: end;
+  }
+}
+</style>

package/packages/models/step-model/index.js

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

package/packages/models/step-model/src/index.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="ele-step-model__wrapper">
+    <div class="ele-step-model__step--wrapper">
+      <a-steps class="ele-steps" :current="current" size="small">
+        <a-step v-for="step in elements" :title="step.title" :key="step.key" />
+      </a-steps>
+    </div>
+    <div class="ele-step-model__content--wrapper">
+      <template v-for="name in scopedSlotsNames">
+        <div :key="name" v-if="currentSlotName == name" :class="['ele-step-model__slot', `ele-step-model__slot--${name}`]">
+          <slot :name="name"></slot>
+        </div>
+      </template>
+    </div>
+    <div class="ele-step-model__footer--wrapper">
+      <ele-button-group v-on="assignAttrForEvents" :data-source="footerElements"></ele-button-group>
+    </div>
+  </div>
+</template>
+
+<script>
+import { BUILT_IN_EVENT_NAMES, CONTEXT } from '../../../utils'
+import { parse } from '@idooel/expression'
+import { type } from '@idooel/shared'
+export default {
+  name: 'ele-step-model',
+  props: {
+    stepMeta: {
+      type: Object,
+      default: () => ({})
+    },
+    footerMeta: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      current: 0,
+      currentSlotComponentRef: null,
+      innerFooterElements: []
+    }
+  },
+  provide() {
+    return {
+      [CONTEXT]: () => {
+        return {
+          ...this.expressionData
+        }
+      }
+    }
+  },
+  computed: {
+    routeMetaDisabled () {
+      return this.executeExpression(this.$route.meta.disabled)
+    },
+    expressionData () {
+      return {
+        current: this.current,
+        _route: this.$route.query,
+        _routeMeta: this.$route.meta
+      }
+    },
+    currentSlotName () {
+      return this.scopedSlotsNames[this.current]
+    },
+    footerElements () {
+      return this.innerFooterElements
+    },
+    assignAttrForEvents () {
+      const events = this.footerElements.reduce((ret, ele) => {
+        ret[ele.eventName] = (e) => {
+          this.evalShowExpressionForFooterElements()
+          this.$emit(ele.eventName || 'click', { ...e, exposed: this.exposedMethods })
+        }
+        return ret
+      }, {})
+      return {
+        ...this.$listeners,
+        ...events,
+        [BUILT_IN_EVENT_NAMES.NEXT]: this[BUILT_IN_EVENT_NAMES.NEXT],
+        [BUILT_IN_EVENT_NAMES.PREVIOUS]: this[BUILT_IN_EVENT_NAMES.PREVIOUS],
+        [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT]
+      }
+    },
+    activeIndex () {
+      const { activeIndex } = this.stepMeta
+      return activeIndex
+    },
+    elements () {
+      const { elements } = this.stepMeta
+      return elements
+    },
+    scopedSlotsNames () {
+      const slotNames = this.elements.map(item => item.key)
+      return slotNames
+    },
+    exposedMethods () {
+      return {
+        slotRef: this.currentSlotComponentRef,
+        setCurrentStep: this.setCurrentStep,
+        next: this.nextStep,
+        prev: this.prevStep,
+        current: this.current
+      }
+    }
+  },
+  watch: {
+    activeIndex: {
+      handler (idx) {
+        this.current = idx
+      },
+      immediate: true
+    },
+    current: {
+      handler () {
+        this.$nextTick(() => {
+          this.currentSlotComponentRef = this.getCurrentSlotComponentRef()
+        })
+      },
+      immediate: true
+    }
+  },
+  created () {
+    const { elements } = this.footerMeta
+    this.innerFooterElements = elements.call(this)
+    this.evalShowExpressionForFooterElements()
+  },
+  methods: {
+    executeExpression (expression) {
+      if (type.isBool(expression)) return expression
+      if (type.isEmpty(expression)) return false
+      return parse(expression, { ...this.expressionData })
+    },
+    evalShowExpressionForFooterElements () {
+      this.innerFooterElements = this.innerFooterElements.map(element => {
+        const { show = true, key, eventName } = element
+        if(key == BUILT_IN_EVENT_NAMES.SUBMIT || eventName == BUILT_IN_EVENT_NAMES.SUBMIT) {
+          // built in submit button should according to the route meta disabled
+          this.$set(element, '_show', this.executeExpression(show, this.expressionData) && !this.routeMetaDisabled)
+          return element
+        }
+        show && this.$set(element, '_show', this.executeExpression(show, this.expressionData))
+        return element
+      })
+    },
+    getCurrentSlotComponentRef () {
+      const includeMetaCmp = this.$children.find(child => child.meta)
+      if (!includeMetaCmp) return null
+      const { $children: components } = includeMetaCmp
+      const target = components.find(cmp => cmp.$options._componentTag === 'ele-tpl')
+      return target.getModel ? target.getModel() : null
+    },
+    setCurrentStep (index) {
+      this.current = index
+      this.evalShowExpressionForFooterElements()
+    },
+    nextStep () {
+      if (this.current >= this.elements.length - 1) return
+      this.current ++
+      this.evalShowExpressionForFooterElements()
+    },
+    prevStep () {
+      if (this.current <= 0) return
+      this.current --
+      this.evalShowExpressionForFooterElements()
+    },
+    [BUILT_IN_EVENT_NAMES.NEXT] (props) {
+      this.$emit(BUILT_IN_EVENT_NAMES.NEXT, { ...props, exposed: { ...this.exposedMethods } })
+    },
+    [BUILT_IN_EVENT_NAMES.PREVIOUS] (props) {
+      this.$emit(BUILT_IN_EVENT_NAMES.PREVIOUS, { ...props, exposed: { ...this.exposedMethods } })
+    },
+    [BUILT_IN_EVENT_NAMES.SUBMIT] (props) {
+      const currentComponent = this.getCurrentSlotComponentRef() || {}
+      const hasSubmitMethod = currentComponent.hasOwnProperty(BUILT_IN_EVENT_NAMES.SUBMIT)
+      hasSubmitMethod && currentComponent[BUILT_IN_EVENT_NAMES.SUBMIT]()
+      this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...props, exposed: { ...this.exposedMethods } })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ele-step-model__wrapper {
+  width: 100%;
+  height: 100vh;
+  position: relative;
+  .ele-step-model__step--wrapper {
+    width: 100%;
+    height: 64px;
+    padding: 16px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    background: #fff;
+    .ele-steps {
+      .ant-steps-item {
+        text-align: left;
+      }
+    }
+  }
+  .ele-step-model__content--wrapper {
+    width: 100%;
+    width: 100%;
+    margin-top: 16px;
+    margin-bottom: 16px;
+    height: calc(100vh - 64px - 64px - 16px - 16px);
+    overflow: auto;
+  }
+  .ele-step-model__footer--wrapper {
+    width: 100%;
+    height: 64px;
+    background: #fff;
+    position: absolute;
+    bottom: 0;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: end;
+  }
+}
+</style>import meta from '@/views/tree-table-page/meta'import meta from '@/views/tree-table-page/meta'
+

package/packages/{tree-table-model → models/tree-table-model}/index.js

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