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

package/src/packages/upload/index.vue

@@ -1,6 +1,6 @@
 <!-- 上传组件 -->
 <template>
-  <div>
+  <div class="d-upload">
     <div
       v-show="imgOrVideoList.length || !readonly"
       ref="imgList"
@@ -37,11 +37,7 @@
           >
             <i class="el-icon-video-play" />
           </span>
-          <span
-            v-show="!readonly"
-            class="el-upload-list__item-delete"
-            @click="uploadRemove(file)"
-          >
+          <span v-show="!readonly" class="el-upload-list__item-delete" @click="uploadRemove(file)">
             <i class="el-icon-delete" />
           </span>
         </span>
@@ -54,9 +50,7 @@
         <el-upload
           ref="fileUpload"
           class="custom-upload-files"
-          :class="
-            showFileList && list.length >= limit && 'custom-upload-files-limit'
-          "
+          :class="showFileList && list.length >= limit && 'custom-upload-files-limit'"
           v-bind="$attrs"
           :show-file-list="false"
           action="#"
@@ -68,10 +62,7 @@
           :on-error="uploadError"
           v-on="$listeners"
         >
-          <div
-            slot="default"
-            class="custom-upload-files-content"
-          >
+          <div slot="default" class="custom-upload-files-content">
             <i class="el-icon-plus" />
           </div>
         </el-upload>
@@ -93,29 +84,19 @@
           {{ 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"
-          />
+          <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)"
-        />
+        <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 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)"
+      :list="imgOrVideoList.map((i) => i.fileUrl)"
       @close="previewVisible = false"
     />
   </div>
@@ -126,7 +107,7 @@ 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'
+import { imgExts, videoExts, fileExts } from '../../utils/constant'
 export default {
   name: 'DUpload',
   components: { FilePreview },
@@ -176,7 +157,7 @@ export default {
       type: Function
     }
   },
-  data () {
+  data() {
     return {
       list: [],
       dialogVisible: false,
@@ -188,43 +169,44 @@ export default {
   },
   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))
+      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) {
+      set(value) {
         this.$emit('change', value)
       }
     },
-    imgOrVideoList () {
-      return this.value.filter(
-        (item) => this._hasFileType(imgExts.concat(videoExts), item)
-      )
+    imgOrVideoList() {
+      return this.value.filter((item) => this._hasFileType(imgExts.concat(videoExts), item))
     },
-    restFileList () {
+    restFileList() {
       return this.value.filter((item) => !this._hasFileType(imgExts.concat(videoExts), item))
     },
-    limitSizeText () {
+    limitSizeText() {
       return convertBytesToSize(Number(this.limitSize || 5) * 1024 * 1024)
     }
   },
-  mounted () {
-  },
+  mounted() {},
   methods: {
-    _hasFileType (files, item) {
+    _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())
+    _calcLimitType(limitType) {
+      if (typeof limitType === 'string') return limitType.split(',').map((l) => l.trim())
       return limitType
     },
-    _urlToObj (url) {
+    _urlToObj(url) {
       if (typeof url !== 'string') return url
       const name = url.substring(url.lastIndexOf('/') + 1, url.length) // 最后的文件名截取出来
       const fileExt = url.substring(url.lastIndexOf('.') + 1)
@@ -235,23 +217,19 @@ export default {
         fileUrl: url
       }
     },
-    async uploadRequest (data) {
+    async uploadRequest(data) {
       const formData = new FormData()
       formData.append('file', data.file)
       const res = await this.$DDWL.upload(formData)
       return res
     },
-    beforeUpload (file) {
+    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)
-      )
+      const isType = limitType.includes(file.name.substr(file.name.lastIndexOf('.') + 1))
 
       if (!isType) {
-        this.$message.error(
-          `请上传正确的文件格式（${limitType.join('、')}）`
-        )
+        this.$message.error(`请上传正确的文件格式（${limitType.join('、')}）`)
         return false
       }
       if (!isLimit) {
@@ -259,7 +237,7 @@ export default {
         return false
       }
     },
-    uploadSuccess (res, file) {
+    uploadSuccess(res, file) {
       if (res.code === 200) {
         this.value = this.value.concat({
           ...file,
@@ -272,14 +250,14 @@ export default {
         this.$message.error(res.message)
       }
     },
-    uploadError (res) {
+    uploadError(res) {
       console.log('upload error', res)
     },
-    uploadRemove (file) {
-      this.value = this.value.filter(item => item.fileUrl !== file.fileUrl)
+    uploadRemove(file) {
+      this.value = this.value.filter((item) => item.fileUrl !== file.fileUrl)
       this.$parent.$emit('el.form.change')
     },
-    picturePreview (index) {
+    picturePreview(index) {
       this.preveiwIndex = index
       this.previewVisible = true
     }
@@ -287,64 +265,66 @@ export default {
 }
 </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 {
+<style lang="scss">
+.d-upload {
+  .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;
+  .custom-upload-files {
+    display: inline-block;
   }
-}
-.img-list {
-  padding-left: 3px;
-  display: block;
-  line-height: 1;
-  .img-part {
-    width: 80px;
-    height: 80px;
+  .custom-upload-files-limit {
+    .el-upload--picture-card {
+      display: none;
+    }
   }
-}
-.file-list {
-  :deep(.el-upload-list__item:first-child) {
-    margin-top: -5px;
+  .img-list {
+    padding-left: 3px;
+    display: block;
+    line-height: 1;
+    .img-part {
+      width: 80px;
+      height: 80px;
+    }
   }
-}
-: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;
+  .file-list {
+    .el-upload-list__item:first-child {
+      margin-top: -5px;
     }
   }
-}
-.el-upload__tip {
-  line-height: 20px;
-  margin-top: 0;
+  .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 +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']
+export const fileExts = ['doc', 'docx', 'pdf']

package/src/utils/index.js

@@ -22,7 +22,7 @@ export const convertBytesToSize = (bytes) => {
  * @param {*} name  参数名称
  * @return {string}
  */
-export function getQueryString (name) {
+export function getQueryString(name) {
   const href = window.location.href
   /*eslint-disable */
   const reg = new RegExp(name + '=[^&|#|\/]*')

package/src/utils/treeLib.js

@@ -125,12 +125,7 @@ export const deleteNode = (data, value, self = true, props = {}) => {
     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
-          )
+          node[props.children] = deleteNode(node[props.children], value, self, props)
         }
         return node
       })
@@ -141,12 +136,7 @@ export const deleteNode = (data, value, self = true, props = {}) => {
         delete node[props.children]
       }
       if (node[props.children] && node[props.children].length) {
-        node[props.children] = deleteNode(
-          node[props.children],
-          value,
-          self,
-          props
-        )
+        node[props.children] = deleteNode(node[props.children], value, self, props)
       }
       return node
     })
@@ -166,7 +156,7 @@ 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) {
+    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,