@idooel/components 0.0.1 → 0.0.2

package/packages/loading/src/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <div v-if="loading" class="g-loading">
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ele-loading',
+  props: {
+    loading: {
+      type: Boolean,
+      default: true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.g-loading {
+  width: 16px;
+  height: 16px;
+  border: 1px solid #409EFF;
+  border-top-color: transparent;
+  border-left-color: transparent;
+  border-radius: 100%;
+  animation: rotate infinite 0.75s linear;
+}
+@keyframes rotate {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/packages/modal/index.js

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

package/packages/modal/src/index.vue

@@ -0,0 +1,185 @@
+<template>
+  <a-modal
+    :title="title"
+    :cancelText="cancelText"
+    :okText="okText"
+    :closable="closable"
+    v-model:visible="showModal"
+    :width="width"
+    :keyboard="false"
+    :maskClosable="maskClosable"
+    :dialogStyle="{ top: `${upDownDistance[size]}px` }"
+    :bodyStyle="{ maxHeight: maxheight, overflowY: 'auto' }"
+    :footer="showFooter ? undefined : null"
+    @cancel="handleCancel"
+    @ok="handleOk"
+  >
+    <slot v-if="showModal"></slot>
+    <template slot="footer" v-if="!showDefaultFooter">
+      <div class="ele-modal__footer">
+        <slot name="footer-text"></slot>
+        <div class="footer-btn__wrapper">
+          <ele-button
+            v-for="btn in buttonGroupMeta.elements"
+            :type="btn.type"
+            v-on="assignAttrEvents"
+            :event-name="btn.eventName"
+            :key="btn.key">
+            {{ btn.label }}
+          </ele-button>
+        </div>
+      </div>
+    </template>
+  </a-modal>
+</template>
+<script>
+import { CONTEXT } from '../../utils'
+export default {
+  name: 'ele-modal',
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: '标题'
+    },
+    cancelText: {
+      type: String,
+      default: '关闭'
+    },
+    okText: {
+      type: String,
+      default: '确定'
+    },
+    size: {
+      type: String,
+      default: 'middle'
+    },
+    map: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    closable: {
+      type: Boolean,
+      default: true
+    },
+    maskClosable: {
+      type: Boolean,
+      default: false
+    },
+    showFooter: {
+      type: Boolean,
+      default: true
+    },
+    footer: {
+      type: Function,
+      default: null
+    },
+    onlyClose: {
+      type: Boolean,
+      default: false
+    },
+    buttonGroupMeta: {
+      type: Object,
+      default: () => ({})
+    },
+    // 是否展示组件默认底部按钮
+    showDefaultFooter: {
+      type: Boolean,
+      default: false
+    }
+  },
+  watch: {
+    value: {
+      handler (value) {
+        this.$nextTick(() => {
+          this.showModal = value
+        })
+      },
+      immediate: true
+    }
+  },
+  inject: {
+    [CONTEXT]: {
+      default: () => (() => ({}))
+    }
+  },
+  computed: {
+    assignAttrEvents () {
+      const events = this.buttons.reduce((ret, btn) => {
+        ret[btn.eventName] = (e) => {
+          this.$emit(btn.eventName || 'click', { ...e, ...this[CONTEXT]() })
+        }
+        return ret
+      }, {})
+      return {
+        ...this.$listeners,
+        ...events
+      }
+    },
+    buttons () {
+      const { elements = [] } = this.buttonGroupMeta
+      return elements
+    },
+    width () {
+      return this.map[this.size]
+    },
+    maxheight () {
+      return `calc(100vh - ${this.upDownDistance[this.size] * 2 + (this.title ? 55 : 0) + (this.showFooter ? 53 : 0) }px`
+    }
+  },
+  data () {
+    return {
+      showModal: false
+    }
+  },
+  created () {
+    let defaultMap = {
+      small: 480,
+      middle: 768,
+      big: 1200
+    }
+    this.upDownDistance = {
+      small: 80,
+      middle: 80,
+      big: 40
+    }
+    this.map = Object.assign(this.map, defaultMap)
+  },
+  methods: {
+    openModal () {
+      this.showModal = true
+      this.removeHidden()
+    },
+    handleCancel () {
+      this.showModal = false
+      this.$emit('input', this.showModal)
+      this.$emit('change', this.showModal)
+      this.removeHidden()
+      this.$emit('cancel')
+    },
+    handleOk () {
+      this.$emit('ok')
+    },
+    removeHidden () {
+      let ishidden = document.body.style.overflow === 'hidden'
+      ishidden && (document.body.style.overflow = 'initial')
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.ele-modal__footer {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  .footer-btn__wrapper {
+    flex: 1;
+  }
+}
+</style>

package/packages/models/form-group-model/index.js

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

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

@@ -0,0 +1,274 @@
+<template>
+  <div class="ele form-group-model__wrapper">
+    <template v-for="(group, idx) in innerGroupMeta">
+      <div 
+        class="form-group-model__from"
+        v-if="!group.isGenTpl"
+        :key="group.key || idx">
+        <div class="form-group-model__form--title">
+          <div>{{ group.title }}</div>
+          <div class="form-group-model__form--buttons">
+            <ele-button-group v-if="group.buttonGroupMeta" v-on="assignAttrForEvents" @delete="handleClickDelete($event, group, idx)" :data-source="group.buttonGroupMeta.elements.call(this)"></ele-button-group>
+          </div>
+        </div>
+        <div class="form-group-model__form--content">
+          <ele-form @change="onChangeFormStatus($event, group.key || idx)" :form-name="group.key || idx" :ref="group.key || `${formRefBase}__${idx}`" :elements="group.elements"></ele-form>
+        </div>
+      </div>
+    </template>
+    <div v-if="showFooterMeta" class="form-group-model__form--footer">
+      <ele-button-group v-on="assignAttrForEvents" :data-source="footerElements"></ele-button-group>
+    </div>
+  </div>
+</template>
+
+<script>
+import { BUILT_IN_EVENT_NAMES, RESERVE_EVENT_NAMES, parseFieldMap, PAGE_STATUS } from '../../../utils'
+import { v4 as uuidv4 } from 'uuid'
+import { type, net } from '@idooel/shared'
+export default {
+  name: 'ele-form-group-model',
+  props: {
+    mode: {
+      type: String
+    },
+    fieldName: {
+      type: String,
+      default: 'formGroup'
+    },
+    groupMeta: {
+      type: Function,
+      default: () => []
+    },
+    footerMeta: {
+      type: Object,
+      default: () => {}
+    },
+    preRequest: {
+      type: Object,
+      default: () => {}
+    },
+    infoRequest: {
+      type: Object,
+      default: () => {}
+    },
+    submitRequest: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data () {
+    return {
+      increaseCount: 1,
+      innerGroupMeta: []
+    }
+  },
+  watch: {
+    readOnlyGroupMeta: {
+      handler (meta) {
+        this.innerGroupMeta = meta
+      },
+      immediate: true
+    }
+  },
+  computed: {
+    routeMetaMode () {
+      return this.$route.meta.mode
+    },
+    readOnlyGroupMeta () {
+      return this.groupMeta.call(this)
+    },
+    showFooterMeta () {
+      return !type.isEmpty(this.footerMeta)
+    },
+    formRefBase () {
+      return uuidv4()
+    },
+    footerElements () {
+      const { elements } = this.footerMeta
+      return elements.call(this)
+    },
+    assignAttrForEvents () {
+      const events = this.footerElements.reduce((ret, ele) => {
+        ret[ele.eventName] = (e) => {
+          this.$emit(ele.eventName || 'click', { ...e })
+        }
+        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],
+        [BUILT_IN_EVENT_NAMES.INCREASE]: this[BUILT_IN_EVENT_NAMES.INCREASE]
+      }
+    },
+    getFormRefs () {
+      return this.innerGroupMeta.map((group, idx) => {
+        if (!group.isGenTpl) {
+          return this.$refs[group.key || `${this.formRefBase}__${idx}`]
+        }
+        return void 0
+      }).filter(item => !!item).flat()
+    },
+    formModels () {
+      if (this.mode === 'increase') {
+        //TODO increase mode to return formModels
+        return this.getFormRefs.map(form => {
+          return form.getFieldsValue()
+        })
+      } else {
+        return this.getFormRefs.map(form => {
+          const { $vnode: { data: { ref } } } = form
+          return {
+            key: ref,
+            value: form.getFieldsValue()
+          }
+        }).reduce((ret, props) => {
+          ret[props.key] = props.value
+          return ret
+        }, {})
+      }
+    }
+  },
+  methods: {
+    execFieldMap (fieldMap = {}, dataSource = {}) {
+      const ret = parseFieldMap(fieldMap, { _route: this.$route.query, ...dataSource})
+      return ret
+    },
+    onChangeFormStatus (props, key) {
+      this.$emit(RESERVE_EVENT_NAMES.WATCH_FORM_STATUS, { key, ...props })
+    },
+    async infoRequestTrigger () {
+      if (!this.infoRequest || this.routeMetaMode == PAGE_STATUS.CREATE) 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
+        if (this.mode === 'increase') {
+          this.renderIncreaseForm(data)
+        }
+        this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })
+      })
+    },
+    async preRequestTrigger () {
+      if (!this.preRequest) return
+      const { url, requestType = 'GET', params = {}, fieldMap = {}, headers = {} } = this.preRequest
+      if (!url) return
+      net[requestType.toLowerCase()](url, { ...params, ...fieldMap }, { ...headers }).then(resp => {
+        const { data = {} } = resp
+        if (this.mode === 'increase') {
+          this.renderIncreaseForm(data)
+        }
+        this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })
+      })
+    },
+    renderIncreaseForm (data = {}) {
+      const formGroupValuesLength = data[this.fieldName].length
+      const genTplTarget = this.readOnlyGroupMeta.find(item => item.isGenTpl)
+      const notGenTplPoolLength = this.readOnlyGroupMeta.filter(item => !item.isGenTpl).length
+      const genNum = formGroupValuesLength - notGenTplPoolLength
+      new Array(genNum).fill().forEach(() => {
+        const form = this.genForm(genTplTarget)
+        this.innerGroupMeta.push(form)
+      })
+      const formGroupValues = data[this.fieldName]
+      this.$nextTick(() => {
+        this.setFieldsValue(formGroupValues)
+      })
+    },
+    async submitRequestTrigger (props = {}) {
+      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.fieldName]: this.formModels }, { headers }).then(resp => {
+        this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...props, formModel: { ...this.formModels, ...resp.data || {} } })
+        return resp.data
+      })
+      return ret
+    },
+    setFieldsValue (data = []) {
+      this.getFormRefs.forEach((form, idx) => {
+        form.setFieldsValue(data[idx])
+        form.evalDisabledExpression(data[idx])
+      })
+    },
+    [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {
+      const status = this.getFormRefs.map(form => {
+        const status = form.validateFields()
+        return status
+      }).every(item => item)
+      if (status) {
+        return this.submitRequestTrigger(props)
+      } else {
+        return false
+      }
+    },
+    [BUILT_IN_EVENT_NAMES.CANCEL] (props = {}) {
+      this.$emit(BUILT_IN_EVENT_NAMES.CANCEL, { ...props })
+    },
+    genForm (base) {
+      const { elements, title, buttonGroupMeta } = base
+      return {
+        elements: JSON.parse(JSON.stringify(elements)),
+        buttonGroupMeta,
+        title: `${title}${this.increaseCount++}`,
+        _gen: true
+      }
+    },
+    handleClickDelete (props = {}, attr = {}, idx) {
+      this.innerGroupMeta.splice(idx, 1)
+      this.$emit(BUILT_IN_EVENT_NAMES.DELETE, { ...props })
+    },
+    [BUILT_IN_EVENT_NAMES.INCREASE] (props) {
+      const genTplTarget = this.readOnlyGroupMeta.find(item => item.isGenTpl)
+      const form = this.genForm(genTplTarget)
+      this.innerGroupMeta.push(form)
+    }
+  },
+  async mounted() {
+    await this.preRequestTrigger()
+    await this.infoRequestTrigger()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ele {
+  &.form-group-model__wrapper {
+    background: unset;
+    padding-bottom: 80px;
+    .form-group-model__from {
+      background: #fff;
+      margin-top: 16px;
+      &:first-child {
+        margin-top: unset;
+      }
+      .form-group-model__form--title {
+        width: 100%;
+        height: 56px;
+        padding: 0 16px;
+        border-bottom: 1px solid;
+        border-color: var(--idooel-form-title-border-color);
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+      }
+      .form-group-model__form--content {
+        padding: 16px;
+      }
+    }
+    .form-group-model__form--footer {
+      width: 100%;
+      height: 64px;
+      background: #fff;
+      position: fixed;
+      bottom: 0;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: end;
+    }
+  }
+}
+</style>

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

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