@ddwl/ddwl-ui 1.2.2 → 1.2.3-beta.1

package/src/packages/upload/index.vue

@@ -1,350 +0,0 @@
-<!-- 上传组件 -->
-<template>
-  <div>
-    <div
-      v-show="imgOrVideoList.length || !readonly"
-      ref="imgList"
-      class="img-list el-upload-list el-upload-list--picture-card"
-    >
-      <div
-        v-for="(file, index) in imgOrVideoList"
-        v-show="imgOrVideoList.length"
-        :key="file.uid"
-        class="img-part el-upload-list__item is-success"
-      >
-        <el-image
-          v-if="_hasFileType(imgExts, file)"
-          class="el-upload-list__item-thumbnail"
-          :src="file.fileUrl"
-        />
-        <el-image
-          v-if="_hasFileType(videoExts, file)"
-          class="el-upload-list__item-thumbnail"
-          :src="videoBg"
-        />
-        <span class="el-upload-list__item-actions">
-          <span
-            v-if="_hasFileType(imgExts, file)"
-            class="el-upload-list__item-preview"
-            @click="picturePreview(index)"
-          >
-            <i class="el-icon-zoom-in" />
-          </span>
-          <span
-            v-if="_hasFileType(videoExts, file)"
-            class="el-upload-list__item-preview"
-            @click="picturePreview(index)"
-          >
-            <i class="el-icon-video-play" />
-          </span>
-          <span
-            v-show="!readonly"
-            class="el-upload-list__item-delete"
-            @click="uploadRemove(file)"
-          >
-            <i class="el-icon-delete" />
-          </span>
-        </span>
-      </div>
-      <div
-        v-show="!readonly && value.length < limit"
-        class="img-part el-upload-list__item is-success"
-        style="border: none"
-      >
-        <el-upload
-          ref="fileUpload"
-          class="custom-upload-files"
-          :class="
-            showFileList && list.length >= limit && 'custom-upload-files-limit'
-          "
-          v-bind="$attrs"
-          :show-file-list="false"
-          action="#"
-          :file-list="list"
-          list-type="picture-card"
-          :http-request="uploadRequest"
-          :before-upload="beforeUpload"
-          :on-success="uploadSuccess"
-          :on-error="uploadError"
-          v-on="$listeners"
-        >
-          <div
-            slot="default"
-            class="custom-upload-files-content"
-          >
-            <i class="el-icon-plus" />
-          </div>
-        </el-upload>
-      </div>
-    </div>
-    <div class="file-list">
-      <div
-        v-for="file in restFileList"
-        :key="file.uid"
-        class="el-upload-list__item is-success"
-        style="width: 100%; height: auto"
-      >
-        <a
-          class="el-upload-list__item-name"
-          :href="file.fileUrl"
-          :download="file.name || file.fileName"
-        >
-          <i class="el-icon-document" />
-          {{ file.name || file.fileName }}
-        </a>
-        <label class="el-upload-list__item-status-label">
-          <i
-            v-show="!readonly"
-            class="el-icon-upload-success el-icon-circle-check"
-          />
-        </label>
-        <i
-          v-show="!readonly"
-          class="el-icon-close"
-          @click="uploadRemove(file)"
-        />
-      </div>
-    </div>
-    <div
-      v-show="!readonly"
-      slot="tip"
-      class="el-upload__tip"
-    >
-      文件大小不超过 {{ limitSizeText }} , 支持扩展名: {{ (_calcLimitType(limitType) || []).join(' ') }}
-    </div>
-    <file-preview
-      v-if="previewVisible"
-      :default-index="preveiwIndex"
-      :list="imgOrVideoList.map(i=> i.fileUrl)"
-      @close="previewVisible = false"
-    />
-  </div>
-</template>
-
-<script>
-import { get } from 'lodash'
-import videoBg from '../../assets/video-play.jpeg'
-import { convertBytesToSize } from '@/utils'
-import FilePreview from '../file-preview/index.vue'
-import {imgExts, videoExts, fileExts} from '../../utils/constant'
-export default {
-  name: 'DUpload',
-  components: { FilePreview },
-  model: {
-    prop: 'modelValue',
-    event: 'change'
-  },
-  props: {
-    readonly: {
-      default: false,
-      type: Boolean
-    },
-    limit: {
-      default: 5,
-      type: Number
-    },
-    limitSize: {
-      default: 5,
-      type: Number
-    },
-    imgExts: {
-      type: Array,
-      default: () => imgExts
-    },
-    fileExts: {
-      type: Array,
-      default: () => fileExts
-    },
-    videoExts: {
-      type: Array,
-      default: () => videoExts
-    },
-    limitType: {
-      default: () => [...imgExts, ...fileExts, ...videoExts],
-      type: [Array, String] // 兼容自定义表单配置
-    },
-    showFileList: {
-      default: true,
-      type: Boolean
-    },
-    modelValue: {
-      default: () => [],
-      type: Array
-    },
-    onSuccess: {
-      default: () => [], // 外部传入上传成功处理函数，备用
-      type: Function
-    }
-  },
-  data () {
-    return {
-      list: [],
-      dialogVisible: false,
-      dialogImageUrl: '',
-      videoBg,
-      preveiwIndex: 0,
-      previewVisible: false
-    }
-  },
-  computed: {
-    value: {
-      get () {
-        if (this.modelValue && this.modelValue.length && this.modelValue.some(v => typeof v === 'string')) {
-          return this.modelValue.filter(url => url).map(url => this._urlToObj(url))
-        } else {
-          return this.modelValue || []
-        }
-      },
-      set (value) {
-        this.$emit('change', value)
-      }
-    },
-    imgOrVideoList () {
-      return this.value.filter(
-        (item) => this._hasFileType(imgExts.concat(videoExts), item)
-      )
-    },
-    restFileList () {
-      return this.value.filter((item) => !this._hasFileType(imgExts.concat(videoExts), item))
-    },
-    limitSizeText () {
-      return convertBytesToSize(Number(this.limitSize || 5) * 1024 * 1024)
-    }
-  },
-  mounted () {
-  },
-  methods: {
-    _hasFileType (files, item) {
-      if (!item.fileExt) {
-        return false
-      }
-      return files.includes(item.fileExt.toLowerCase())
-    },
-    _calcLimitType (limitType) {
-      if (typeof limitType === 'string') return limitType.split(',').map(l => l.trim())
-      return limitType
-    },
-    _urlToObj (url) {
-      if (typeof url !== 'string') return url
-      const name = url.substring(url.lastIndexOf('/') + 1, url.length) // 最后的文件名截取出来
-      const fileExt = url.substring(url.lastIndexOf('.') + 1)
-      return {
-        name,
-        fileExt,
-        url,
-        fileUrl: url
-      }
-    },
-    async uploadRequest (data) {
-      const formData = new FormData()
-      formData.append('file', data.file)
-      const res = await this.$DDWL.upload(formData)
-      return res
-    },
-    beforeUpload (file) {
-      const isLimit = file.size / 1024 / 1024 < this.limitSize
-      const limitType = this._calcLimitType(this.limitType)
-      const isType = limitType.includes(
-        file.name.substr(file.name.lastIndexOf('.') + 1)
-      )
-
-      if (!isType) {
-        this.$message.error(
-          `请上传正确的文件格式（${limitType.join('、')}）`
-        )
-        return false
-      }
-      if (!isLimit) {
-        this.$message.error(`上传文件大小不能超过${this.limitSize}MB`)
-        return false
-      }
-    },
-    uploadSuccess (res, file) {
-      if (res.code === 200) {
-        this.value = this.value.concat({
-          ...file,
-          ...get(file, 'response.data'),
-          fileUrl: get(file, 'response.data.filePath'),
-          filePath: get(file, 'response.data.filePath')
-        })
-        this.$parent.$emit('el.form.change')
-      } else {
-        this.$message.error(res.message)
-      }
-    },
-    uploadError (res) {
-      console.log('upload error', res)
-    },
-    uploadRemove (file) {
-      this.value = this.value.filter(item => item.fileUrl !== file.fileUrl)
-      this.$parent.$emit('el.form.change')
-    },
-    picturePreview (index) {
-      this.preveiwIndex = index
-      this.previewVisible = true
-    }
-  }
-}
-</script>
-
-<style lang='scss' scoped>
-.custom-upload-files-content {
-  display: inline-block;
-  width: 80px;
-  height: 80px;
-  text-align: center;
-  & > span {
-    line-height: 16px;
-    margin-top: 4px;
-    color: #999;
-    font-size: 12px;
-  }
-  i {
-    text-align: center;
-  }
-}
-.custom-upload-files {
-  display: inline-block;
-}
-.custom-upload-files-limit {
-  :deep(.el-upload--picture-card) {
-    display: none;
-  }
-}
-.img-list {
-  padding-left: 3px;
-  display: block;
-  line-height: 1;
-  .img-part {
-    width: 80px;
-    height: 80px;
-  }
-}
-.file-list {
-  :deep(.el-upload-list__item:first-child) {
-    margin-top: -5px;
-  }
-}
-:deep(.upload-preview-dialog) {
-  margin-top: 0vh !important;
-  max-height: 90vh;
-  max-width: 80%;
-  min-width: 150px;
-  min-height: 150px;
-  width: inherit;
-  display: flex;
-  flex-direction: column;
-  .el-dialog__body {
-    flex: 1;
-    overflow: auto;
-    text-align: center;
-    img{
-      max-height: 65vh;
-    }
-  }
-}
-.el-upload__tip {
-  line-height: 20px;
-  margin-top: 0;
-}
-</style>

package/src/utils/constant.js

@@ -1,4 +0,0 @@
-export const imgExts = ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'svg']
-export const videoExts = ['mp4']
-export const audioExts = ['mp3', 'wav', 'ogg']
-export const fileExts = ['doc', 'docx', 'pdf']

package/src/utils/index.js

@@ -1,77 +0,0 @@
-/**
- * @description: 文件大小转换
- * @param {Number} bytes 字节大小
- * @return {String} 转换后带单位的文件大小结果
- */
-export const convertBytesToSize = (bytes) => {
-  const thresh = 1024
-  if (Math.abs(bytes) < thresh) {
-    return bytes + ' B'
-  }
-  const units = ['KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
-  let u = -1
-  do {
-    bytes /= thresh
-    ++u
-  } while (Math.abs(bytes) >= thresh && u < units.length - 1)
-  return bytes.toFixed(0) + ' ' + units[u]
-}
-
-/**
- * @description: 获取url参数
- * @param {*} name  参数名称
- * @return {string}
- */
-export function getQueryString (name) {
-  const href = window.location.href
-  /*eslint-disable */
-  const reg = new RegExp(name + '=[^&|#|\/]*')
-  const res = href.match(reg)
-  return res ? href.match(reg)[0].split('=')[1] : ''
-}
-
-/**
- * @description: 移除url参数
- * @param {*} name  参数名称
- * @return {string}
- */
-export const removeURLParam = (name) => {
-  let tempUrl = window.location.href
-  tempUrl = tempUrl.split("?")[0]
-  window.history.replaceState({}, "0", tempUrl)
-}
-
-/**
- * @description: 复制内容到剪贴板
- * @param {string} text  复制文本
- * @return {string}
- */
-export const copy = (text) => {
-  return new Promise((resolve, reject) => {
-    const input = document.createElement('input')
-    document.body.appendChild(input)
-    input.setAttribute('value', text)
-    input.select()
-    if (document.execCommand('copy')) {
-      document.execCommand('copy')
-      resolve()
-    } else {
-      reject()
-    }
-    document.body.removeChild(input)
-  })
-}
-
-/**
- * @description: 根据字符串长度生成*号字符串
- * @param {*} text  字符串
- * @return {string}
- */
-export function generateAsterisksByString (text) {
-  const length = text.length
-  if (typeof length !== 'number' || length <= 0) {
-    return ''
-  }
-  return '*'.repeat(length)
-}
-

package/src/utils/treeLib.js

@@ -1,190 +0,0 @@
-import { cloneDeep } from 'lodash'
-
-// 默认的props传参
-const defaultProps = {
-  key: 'id',
-  label: 'label',
-  children: 'children'
-}
-
-const _getProps = (props) => {
-  return { ...defaultProps, ...props }
-}
-
-/**
- * @description: 获取树结构第一个匹配的节点数据
- * @param {Array} tree
- * * @param {String} matchs 匹配规则函数
- * @return {Any}
- */
-export const getFirstVaildNode = (tree, matchs, props = {}) => {
-  props = _getProps(props)
-  for (const node of tree) {
-    if (matchs(node)) {
-      return node
-    }
-    if (node[props.children] && node[props.children].length) {
-      const data = getFirstVaildNode(node[props.children], matchs, props)
-      if (data) return data
-    }
-  }
-}
-
-/**
- * @description: 根据key查找树中的匹配节点
- * @param {Array} data
- * @param {String | Number} value 匹配的值
- * @return {Any}
- */
-export const getNodeByKey = (data, value, props = {}) => {
-  props = _getProps(props)
-  const tree = cloneDeep(data)
-  const arr = Array.isArray(tree) ? tree : [tree]
-  let result = null
-  while (arr.length) {
-    const item = arr.pop()
-    if (item && item[props.key] === value) {
-      result = item
-      break
-    } else if (item && item[props.children] && item[props.children].length) {
-      arr.push(...item[props.children])
-    }
-  }
-  return result
-}
-
-/**
- * @description: 根据key查找树中的匹配节点集合
- * @param {Array} data
- * @param {String | Number} value 匹配的值
- * @return {Any}
- */
-export const getNodeByKeys = (data, values, props = {}, arr = []) => {
-  props = _getProps(props)
-  let tree = cloneDeep(data)
-  tree = Array.isArray(tree) ? tree : [tree]
-  tree.forEach((node) => {
-    if (values.includes(node[props.key])) {
-      arr.push(node)
-    }
-    if (node[props.children] && node[props.children].length) {
-      arr = arr.concat(getNodeByKeys(node[props.children], values, props))
-    }
-  })
-  return arr
-}
-
-/**
- * @description: 获取树所有节点 --- 树扁平化
- * @param {Array} data
- * @return {Array}
- */
-export const flatTree = (data, props = {}) => {
-  props = _getProps(props)
-  let arr = []
-  data.forEach((node) => {
-    arr.push(node)
-    if (node[props.children] && node[props.children].length) {
-      arr = arr.concat(flatTree(node[props.children], props))
-    }
-  })
-  return arr
-}
-
-/**
- * @description: 获取树所有没有子节点的节点 --- 树扁平化
- * @param {Array} data
- * @return {Array}
- */
-export const flatTreeByLastNode = (data, props = {}) => {
-  props = _getProps(props)
-  let arr = []
-  data.forEach((node) => {
-    if (node[props.children] && node[props.children].length) {
-      arr = arr.concat(flatTreeByLastNode(node[props.children], props))
-    } else {
-      arr.push(node)
-    }
-  })
-  return arr
-}
-
-/**
- * @description: 删除树指定节点
- * @param {Array} data
- * @param {String} value 匹配的节点值
- * @param {String} self true: 删除自身 false: 只删除子节点 默认true
- * @return {Array}
- */
-export const deleteNode = (data, value, self = true, props = {}) => {
-  props = _getProps(props)
-  data = cloneDeep(data)
-  let arr = []
-  if (self) {
-    arr = data.filter((node) => node[props.key] !== value)
-    if (arr.length === data.length) {
-      arr = arr.map((node) => {
-        if (node[props.children] && node[props.children].length) {
-          node[props.children] = deleteNode(
-            node[props.children],
-            value,
-            self,
-            props
-          )
-        }
-        return node
-      })
-    }
-  } else {
-    arr = data.map((node) => {
-      if (node[props.key] === value) {
-        delete node[props.children]
-      }
-      if (node[props.children] && node[props.children].length) {
-        node[props.children] = deleteNode(
-          node[props.children],
-          value,
-          self,
-          props
-        )
-      }
-      return node
-    })
-  }
-
-  return arr
-}
-
-/**
- * @description: 根据key 精准/模糊搜索匹配到的所有节点
- * @param {Array} data
- * @param {Array} data 匹配的节点值
- * @param {String} type fuzzy: 模糊搜索  precise: 精准搜索
- * @return {Array}
- */
-export const filterNodeMethod = (value, data = [], type = 'fuzzy', props = {}) => {
-  props = _getProps(props)
-  let newarr = []
-  data.forEach((node) => {
-    if (type === 'fuzzy' ? (node[props.key].indexOf(value) > -1) : node[props.key] === value) {
-      const ab = filterNodeMethod(value, node[props.children], type, props)
-      const obj = {
-        ...node,
-        children: ab
-      }
-      newarr.push(obj)
-    } else {
-      if (node[props.children] && node[props.children].length > 0) {
-        const ab = filterNodeMethod(value, node[props.children], type, props)
-        const obj = {
-          ...node,
-          children: ab
-        }
-        if (ab && ab.length > 0) {
-          newarr.push(obj)
-        }
-      }
-    }
-  })
-  return newarr
-}