@idooel/components 0.0.1 → 0.0.2-beta.10

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

@@ -0,0 +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 })
+    }
+  }
+}
+</script>

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

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

package/packages/composite-components/modal-img-crop/src/index.vue

@@ -0,0 +1,299 @@
+<template>
+  <div>
+    <ele-modal
+    :ref="getEleModal"
+    :title="title"
+    :cancelText="cancelText"
+    :maskClosable="maskClosable"
+    v-on="$listeners"
+    :size="size"
+    :value="value"
+    @ok="handleOk"
+    @cancel="handleCancel"
+    :showDefaultFooter="true"
+    >
+    <div class="ele-imgCrop__wrapper">
+      <div class="ele-imgCrop__left ele-imgCrop__item">
+        <div class="ele-imgCrop__noImg">
+          <ele-upload v-if="!fileId" v-bind="uploadFileConfig" class="ele-img-crop__upload" @on-success="onUploadFileSuccess" icon="inbox" url="api/zuul/api-file/workbench/file"></ele-upload>
+          <template v-else>
+            <img :ref="leftImage" class="img-crop-left__image" :src="imageUrl" alt="">
+          </template>
+        </div>
+        <div class="margin-t-8">
+          <span v-if="imgtips" class="ele-imgCrop__font1 ele-imgCrop__tips" :class="isFail? 'ele-imgCrop__error' : ''">{{ imgtips }}</span>
+          <template v-else>
+            <span class="ele-imgCrop__font1">{{ fileName }}</span>
+            <a-icon v-if="fileId || fileName" @click="handleClickDeleteFile" type="close" style="cursor: pointer;float: right; line-height: 24px;"/>
+          </template>
+        </div>
+      </div>
+      <div class="ele-imgCrop__right ele-imgCrop__item">
+        <span v-if="!fileId" class="ele-imgCrop__font2">左侧上传图片后可预览</span>
+        <template v-else>
+          <img class="img-crop-right__image" :src="previewBase" alt="">
+        </template>
+      </div>
+    </div>
+    </ele-modal>
+  </div>
+</template>
+
+<script>
+import { v4 as uuidv4 } from 'uuid'
+import Cropper from 'cropperjs'
+import { util, net } from '@idooel/shared'
+export default {
+  name: 'ele-modal-img-crop',
+  model: {
+    event: 'input',
+    prop: 'value'
+  },
+  props: {
+    title: {
+      type: String,
+      default: '图像裁剪'
+    },
+    uploadFileConfig: {
+      type: Object,
+      default: () => {
+        return {
+          size: 10,
+          accept: '*',
+          byteConversion: 1024 * 1024
+        }
+      }
+    },
+    imageId: {
+      type: String
+    },
+    maskClosable: {
+      type: Boolean,
+      default () {
+        return false
+      }
+    },
+    size: {
+      type: String,
+      default () {
+        return 'big'
+      }
+    },
+    value: {
+      type: Boolean,
+      default () {
+        return false
+      }
+    },
+    cropperConfig: {
+      type: Object,
+      default: () => {
+        return {
+          aspectRatio: 16 / 9
+        }
+      }
+    }
+  },
+  data () {
+    return {
+      haveImg: false,
+      imgtips: null,
+      isFail: false,
+      cancelText: '取消',
+      fileName: null,
+      fileId: null,
+      previewBase: null,
+      cropper: null
+    }
+  },
+  computed: {
+    leftImage () {
+      return uuidv4()
+    },
+    imageUrl () {
+      return `/api-file/workbench/file/stream/${this.fileId}?origin=true`
+    },
+    getEleModal () {
+      return uuidv4()
+    }
+  },
+  watch: {
+    value: {
+      handler (value) {
+        this.fileId = this.imageId
+        if (value && this.fileId) {
+          setTimeout(() => {
+            this.initCropper()
+          })
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    handleCancel () {
+      this.$emit('input', false)
+      this.$emit('change', this.fileId)
+    },
+    handleClickDeleteFile () {
+      this.fileId = null
+      this.fileName = null
+      this.cropper && this.cropper.destroy()
+    },
+    blobToFile(blob, fileName = 'file.png') {
+      return new File([blob], fileName, {
+        type: blob.type,
+        lastModified: Date.now()
+      })
+    },
+    handleOk () {
+      this.cropper && this.cropper.getCroppedCanvas().toBlob(async (blob) => {
+        await this.uploadFile(this.blobToFile(blob, this.fileName))
+        this.$emit('input', false)
+        this.$emit('change', this.fileId)
+      })
+    },
+    async uploadFile (file) {
+      const formData = new FormData()
+      formData.append('serviceCode', 'cover-image')
+      formData.append('_t', Math.random())
+      formData.append('file', file)
+      await net.post(
+        'zuul/api-file/workbench/file' + '?_csrf=' + localStorage.getItem('token'),
+        formData
+      ).then((resp) => {
+        const { data: { fileID } } = resp
+        this.fileId = fileID
+      })
+    },
+    initCropper () {
+      let previewReady = false
+      this.cropper = new Cropper(this.$refs[this.leftImage], {
+        aspectRatio: this.cropperConfig.aspectRatio,
+        ready: () => {
+          previewReady = true
+        },
+        crop: util.debounce(() => {
+          if (!previewReady) {
+            return
+          }
+          this.previewBase = this.cropper.getCroppedCanvas().toDataURL()
+        }, 200)
+      })
+    },
+    onUploadFileSuccess (props) {
+      const { response: { data: { fileID } }, name } = props
+      this.fileId = fileID
+      this.fileName = name
+      this.$nextTick(() => {
+        this.initCropper()
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .ant-modal-body {
+  padding: 16px;
+}
+::v-deep .ant-modal-header {
+  padding: 16px;
+}
+.ele-imgCrop__wrapper {
+  display: flex;
+  gap: 16px;
+  justify-content: center;
+  margin-bottom: 30px;
+  .ele-imgCrop__left {
+    .ele-imgCrop__noImg {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+      position: relative;
+      .img-crop-left__image {
+        width: 100%;
+        height: 100%;
+      }
+      .ele-img-crop__upload {
+        width: 100%;
+        height: 100%;
+        ::v-deep .ele-upload__inner {
+          height: 100%;
+          border: unset;
+          background: transparent !important;
+          .ele-upload__area {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            align-items: center;
+            justify-content: center;
+            .ele-upload__area--text {
+              margin-top: 16px;
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+            }
+          }
+        }
+      }
+      .ele-imgCrop__font1 {
+        color: var(--idoole-black-088);
+        font-size: 16px;
+        line-height: 24px !important;
+      }
+      .ele-imgCrop__font2 {
+        color: var(--idoole-black-06);
+        font-size: 14px;
+        line-height: 22px; 
+      }
+    }
+    .ele-imgCrop__update {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+      cursor: pointer;
+    }
+  }
+  .ele-imgCrop__right {
+    position: relative;
+    span {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+    .img-crop-right__image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .ele-imgCrop__item {
+    width: 480px;
+    height: 300px;
+    border-radius: 2px;
+    border: 1px dashed var(--idooel-form-title-border-color);
+    background: var(--idooel-form-upload-bg-color);
+  }
+}
+.ele-imgCrop__tips {
+  float: left;
+  width: 80%;
+}
+.ele-imgCrop__error {
+  color: var(--idooel-form-border-err-color) !important;
+}
+.ele-imgCrop__error2 {
+  color: var(--idooel-img-crop-err-color) !important;
+}
+.ele-imgCrop__icon {
+  font-size: 48px;
+  color: var(--idooel-link-06);
+}
+</style>

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

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

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

@@ -0,0 +1,156 @@
+<template>
+  <ele-modal 
+    :title="buildTitle" 
+    v-on="assignAttrForEvents"
+    :button-group-meta="buildButtonGroupMeta"
+    :value="value"
+    :size="size">
+    <ele-tree-table-model 
+      :over-height="156"
+      v-on="treeTableListeners"
+      @on-change-table-selection="onChangeTableSelection"
+      @x:refresh-exposed="onAbstractEvent"
+      v-bind="buildMeta">
+      <template v-if="$slots['sub-center']" #sub-center>
+        <slot name="sub-center"></slot>
+      </template>
+    </ele-tree-table-model>
+  </ele-modal>
+</template>
+
+<script>
+import { type } from '@idooel/shared'
+import { CONTEXT } from '../../../utils'
+export default {
+  name: 'ele-modal-table',
+  model: {
+    event: 'change',
+    prop: 'value'
+  },
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String
+    },
+    size: {
+      type: String,
+      default: 'big'
+    },
+    meta: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      currentTableSelection: null,
+      currentExposed: {}
+    }
+  },
+  inject: {
+    [CONTEXT]: {
+      default: () => (() => ({}))
+    }
+  },
+  computed: {
+    buildMeta () {
+      const { title, ...rest } = this.meta
+      return rest
+    },
+    buildTitle () {
+      return this.title || this.meta.title
+    },
+    callContext () {
+      return this[CONTEXT].call(this)
+    },
+    exposed () {
+      const mergeExposed = Object.assign({}, this.callContext.exposed, this.currentExposed)
+      return {
+        closeModal: this.closeModal,
+        currentTableSelection: this.currentTableSelection,
+        ...this.callContext,
+        exposed: { 
+          ...mergeExposed,
+          setModalTable: this.setModalTable,
+          showModalTable: this.showModalTable,
+          closeModalTable: this.closeModalTable
+        }
+      }
+    },
+    assignAttrForEvents () {
+      const events = this.footerMetaElements.reduce((ret, ele) => {
+        ret[ele.eventName] = (e) => {
+          this.$emit(ele.eventName || 'click', { ...e, ...this.exposed })
+        }
+        return ret
+      }, {})
+      return {
+        ...this.$listeners,
+        ...events
+      }
+    },
+    treeTableListeners () {
+      const events = this.treeTableButtonGroupElements.reduce((ret, ele) => {
+        ret[ele.eventName] = (e) => {
+          this.$emit(ele.eventName || 'click', { ...e, exposed: this.exposed })
+        }
+        return ret
+      }, {})
+      return {
+        ...this.$listeners,
+        ...events
+      }
+    },
+    footerMetaElements () {
+      const { elements = [] } = this.buttonGroupMeta
+      if (type.isFunction(elements)) {
+        return elements.call(this)
+      }
+      return elements
+    },
+    treeTableButtonGroupElements () {
+      const { buttonGroupMeta = {} } = this.meta
+      const { elements = [] } = buttonGroupMeta
+      if (type.isFunction(elements)) {
+        return elements.call(this)
+      }
+      return elements
+    },
+    buildButtonGroupMeta () {
+      return { ...this.buttonGroupMeta, elements: this.footerMetaElements }
+    },
+    buttonGroupMeta () {
+      const { footerMeta = {} } = this.meta
+      return footerMeta
+    }
+  },
+  methods: {
+    closeModal () {
+      this.$emit('change', false)
+    },
+    setModalTable (arg = false) {
+      this.$emit('change', arg)
+    },
+    showModalTable () {
+      this.$emit('change', true)
+    },
+    closeModalTable () {
+      this.$emit('change', false)
+    },
+    onChangeTableSelection (selection) {
+      this.currentTableSelection = selection
+    },
+    onAbstractEvent (props = {}) {
+      const { exposed } = props
+      this.currentExposed = Object.assign({}, exposed)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

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

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