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

package/src/packages/upload/index.vue

@@ -0,0 +1,350 @@
+<!-- 上传组件 -->
+<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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,77 @@
+/**
+ * @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

@@ -0,0 +1,190 @@
+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
+}

package/dist/index.html

@@ -1 +0,0 @@
-<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Vue App</title><script defer="defer" src="/js/chunk-vendors.js"></script><script defer="defer" src="/js/app.js"></script><link href="/static/css/app.2ec4a629.css" rel="stylesheet"></head><body><div id="app"></div></body></html>