@idooel/components 0.0.1-beta.21 → 0.0.1-beta.22

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

@@ -1,274 +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 Form from '../../form/src/index.vue'
-import { BUILT_IN_EVENT_NAMES, RESERVE_EVENT_NAMES, parseFieldMap } from '../../utils'
-import { v4 as uuidv4 } from 'uuid'
-import { type, net } from '@idooel/shared'
-import EleButtonGroup from '../../composite-components/button-group/src/index.vue'
-export default {
-  name: 'ele-form-group-model',
-  components: {
-    [Form.name]: Form,
-    [EleButtonGroup.name]: EleButtonGroup
-  },
-  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: {
-    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) 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.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])
-      })
-    },
-    [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;
-    }
-  }
-}
+<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 Form from '../../form/src/index.vue'
+import { BUILT_IN_EVENT_NAMES, RESERVE_EVENT_NAMES, parseFieldMap } from '../../utils'
+import { v4 as uuidv4 } from 'uuid'
+import { type, net } from '@idooel/shared'
+import EleButtonGroup from '../../composite-components/button-group/src/index.vue'
+export default {
+  name: 'ele-form-group-model',
+  components: {
+    [Form.name]: Form,
+    [EleButtonGroup.name]: EleButtonGroup
+  },
+  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: {
+    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) 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.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])
+      })
+    },
+    [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/form-model/index.js

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