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

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

@@ -1,166 +1,166 @@
-<template>
-  <div class="form__model--wrapper">
-    <div class="form-model__title" v-if="title">
-      {{ title }}
-    </div>
-    <div class="form-model__content">
-      <ele-form :ref="formRef" :elements="elements"></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 EleButtonGroup from '../../composite-components/button-group/src/index.vue'
-import { BUILT_IN_EVENT_NAMES, parseFieldMap, RESERVE_EVENT_NAMES } from '../../utils'
-import { v4 as uuidv4 } from 'uuid'
-import { net } from '@idooel/shared'
-export default {
-  name: 'ele-form-model',
-  components: {
-    EleButtonGroup
-  },
-  props: {
-    title: {
-      type: String
-    },
-    formMeta: {
-      type: Object
-    },
-    footerMeta: {
-      type: Object
-    }
-  },
-  data() {
-    return {}
-  },
-  computed: {
-    formRef () {
-      return uuidv4()
-    },
-    assignAttrForEvents () {
-      const events = this.footerElements.reduce((ret, ele) => {
-        ret[ele.eventName] = (e) => {
-          this.$emit(ele.eventName || 'click', { ...e, formModel: this.formModels })
-        }
-        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
-    },
-    submitRequest () {
-      const { submitRequest } = this.formMeta
-      return submitRequest
-    },
-    footerElements () {
-      const { elements } = this.footerMeta
-      return elements.call(this)
-    },
-    formModels () {
-      return this.$refs[this.formRef].getFieldsValue()
-    }
-  },
-  methods: {
-    execFieldMap (fieldMap = {}, dataSource = {}) {
-      const ret = parseFieldMap(fieldMap, { _route: this.$route.query, ...dataSource})
-      return ret
-    },
-    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.formModels }, { headers }).then(resp => {
-        console.log(resp.data)
-        this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...props, formModel: { ...this.formModels, ...resp.data || {} } })
-        return resp.data
-      })
-      return ret
-    },
-    async infoRequestTrigger () {
-      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)
-        this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })
-      })
-    },
-    async preRequestTrigger () {
-      const { url, requestType = 'GET', params = {}, fieldMap = {}, headers = {} } = this.preRequest
-      if (!url) return
-      const { data } = await net[requestType.toLowerCase()](url, { ...params, ...fieldMap }, { ...headers })
-      this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })
-    },
-    setFieldsValue (props) {
-      this.$refs[this.formRef].setFieldsValue(props)
-    },
-    validateFields () {
-      return this.$refs[this.formRef].validateFields()
-    },
-    [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {
-      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() {
-    await this.preRequestTrigger()
-    await this.infoRequestTrigger()
-  }
-}
-</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;
-  }
-}
+<template>
+  <div class="form__model--wrapper">
+    <div class="form-model__title" v-if="title">
+      {{ title }}
+    </div>
+    <div class="form-model__content">
+      <ele-form :ref="formRef" :elements="elements"></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 EleButtonGroup from '../../composite-components/button-group/src/index.vue'
+import { BUILT_IN_EVENT_NAMES, parseFieldMap, RESERVE_EVENT_NAMES } from '../../utils'
+import { v4 as uuidv4 } from 'uuid'
+import { net } from '@idooel/shared'
+export default {
+  name: 'ele-form-model',
+  components: {
+    EleButtonGroup
+  },
+  props: {
+    title: {
+      type: String
+    },
+    formMeta: {
+      type: Object
+    },
+    footerMeta: {
+      type: Object
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    formRef () {
+      return uuidv4()
+    },
+    assignAttrForEvents () {
+      const events = this.footerElements.reduce((ret, ele) => {
+        ret[ele.eventName] = (e) => {
+          this.$emit(ele.eventName || 'click', { ...e, formModel: this.formModels })
+        }
+        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
+    },
+    submitRequest () {
+      const { submitRequest } = this.formMeta
+      return submitRequest
+    },
+    footerElements () {
+      const { elements } = this.footerMeta
+      return elements.call(this)
+    },
+    formModels () {
+      return this.$refs[this.formRef].getFieldsValue()
+    }
+  },
+  methods: {
+    execFieldMap (fieldMap = {}, dataSource = {}) {
+      const ret = parseFieldMap(fieldMap, { _route: this.$route.query, ...dataSource})
+      return ret
+    },
+    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.formModels }, { headers }).then(resp => {
+        console.log(resp.data)
+        this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...props, formModel: { ...this.formModels, ...resp.data || {} } })
+        return resp.data
+      })
+      return ret
+    },
+    async infoRequestTrigger () {
+      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)
+        this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })
+      })
+    },
+    async preRequestTrigger () {
+      const { url, requestType = 'GET', params = {}, fieldMap = {}, headers = {} } = this.preRequest
+      if (!url) return
+      const { data } = await net[requestType.toLowerCase()](url, { ...params, ...fieldMap }, { ...headers })
+      this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })
+    },
+    setFieldsValue (props) {
+      this.$refs[this.formRef].setFieldsValue(props)
+    },
+    validateFields () {
+      return this.$refs[this.formRef].validateFields()
+    },
+    [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {
+      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() {
+    await this.preRequestTrigger()
+    await this.infoRequestTrigger()
+  }
+}
+</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/icon/index.js

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

package/packages/icon/src/index.vue

@@ -1,32 +1,32 @@
-<template>
-  <a-icon
-    v-if="isAntIcon"
-    :type="type"
-    :theme="theme">
-  </a-icon>
-  <i :class="['iconfont', type]" v-else></i>
-</template>
-
-<script>
-export default {
-  name: 'ele-icon',
-  props: {
-    type: {
-      type: String,
-      default: ''
-    },
-    theme: {
-      type: String
-    }
-  },
-  computed: {
-    isAntIcon() {
-      const prefix = this.type.slice(0, 5)
-      if (prefix === 'icon-') {
-        return false
-      }
-      return true
-    }
-  }
-}
+<template>
+  <a-icon
+    v-if="isAntIcon"
+    :type="type"
+    :theme="theme">
+  </a-icon>
+  <i :class="['iconfont', type]" v-else></i>
+</template>
+
+<script>
+export default {
+  name: 'ele-icon',
+  props: {
+    type: {
+      type: String,
+      default: ''
+    },
+    theme: {
+      type: String
+    }
+  },
+  computed: {
+    isAntIcon() {
+      const prefix = this.type.slice(0, 5)
+      if (prefix === 'icon-') {
+        return false
+      }
+      return true
+    }
+  }
+}
 </script>

package/packages/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/img-crop/src/index.vue

@@ -0,0 +1,181 @@
+<template>
+  <div>
+    <EleModal
+    :ref="getEleModal"
+    :title="title"
+    :cancelText="cancelText"
+    :maskClosable="maskClosable"
+    :size="size"
+    v-model="showTestModal"
+    :showDefaultFooter="true"
+    >
+    <div class="ele-imgCrop__wrapper">
+      <div class="ele-imgCrop__left ele-imgCrop__item">
+        <div class="ele-imgCrop__noImg">
+          <input @change="handleChange" ref="input" type="file" accept="image/png, image/jpeg, image/jpg" id="fileinput1" class="ele-imgCrop__update"/>
+          <ele-icon type="icon-InBox" class="ele-imgCrop__icon"></ele-icon>
+          <span class="ele-imgCrop__font1" :class="isFail ? 'ele-imgCrop__error' : ''">单击或拖动文件到该区域以上传</span>
+          <span class="ele-imgCrop__font2" :class="isFail ? 'ele-imgCrop__error2' : ''">文件小于100M</span>
+        </div>
+        <div class="margin-t-8">
+          <span  class="ele-imgCrop__font1 ele-imgCrop__tips" :class="isFail? 'ele-imgCrop__error' : ''">{{ imgtips }}</span>
+          <a-icon type="close" style="float: right; line-height: 24px;"/>
+        </div>
+      </div>
+      <div class="ele-imgCrop__right ele-imgCrop__item">
+        <span class="ele-imgCrop__font2">左侧上传图片后可预览</span>
+      </div>
+    </div>
+    </EleModal>
+  </div>
+</template>
+
+<script>
+import { v4 as uuidv4 } from 'uuid'
+import EleModal from '../../modal/src/index.vue'
+import EleIcon from '../../icon/src/index.vue'
+export default {
+  name: 'ele-img-crop',
+  components: {
+    EleModal,
+    EleIcon
+  },
+  model: {
+    prop: 'value'
+  },
+  props: {
+    maskClosable: {
+      type: Boolean,
+      default () {
+        return false
+      }
+    },
+    size: {
+      type: String,
+      default () {
+        return 'big'
+      }
+    },
+    showTestModal: {
+      type: Boolean,
+      default () {
+        return false
+      }
+    }
+  },
+  data () {
+    return {
+      haveImg: false,
+      imgtips: '照片名称',
+      isFail: false,
+      title: '图像裁剪',
+      cancelText: '取消'
+    }
+  },
+  methods: {
+    openModal () {
+      this.$refs[this.getEleModal].openModal()
+    },
+    handleChange (e) {
+      let file = e.target.files ? e.target.files[0] : e.target
+      const allowedExtensions = ['png', 'jpeg', 'jpg']
+      // 获取文件后缀名
+      const fileExtension = file.name.split('.').pop().toLowerCase()
+      if (!allowedExtensions.includes(fileExtension)) {
+        this.$Message.error('不支持该文件类型')
+        return
+      }
+      console.log((file.size / 1048576).toFixed(2))
+      if ((file.size / 1048576).toFixed(2) > 1) {
+        //大于1M，超大
+        this.imgtips = '上传失败(网络传输等问题/文件格式不符/文件大小超出限制)'
+        this.isFail = true
+      } else {
+        this.imgtips = file.name
+        this.isFail = false
+      }
+      this.haveImg = true
+    }
+  },
+  computed: {
+    getEleModal () {
+      return uuidv4()
+    }
+  }
+}
+</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;
+      .ele-imgCrop__font1 {
+        color: var(--idoole-black-008);
+        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%);
+    }
+  }
+  .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>