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

package/src/packages/file-preview/index.vue

@@ -1,22 +1,8 @@
 <template>
-  <div
-    v-if="visible && list.length"
-    class="d-file-preview"
-  >
-    <div
-      ref="leftRef"
-      class="d-file-preview_left"
-    >
-      <el-tabs
-        v-model="activeTab"
-        @tab-click="handleTabClick"
-      >
-        <el-tab-pane
-          v-for="(v, i) in fileList"
-          :key="i"
-          :label="v.name"
-          :name="v.type"
-        />
+  <div v-if="visible && list.length" class="d-file-preview">
+    <div ref="leftRef" class="d-file-preview_left">
+      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
+        <el-tab-pane v-for="(v, i) in fileList" :key="i" :label="v.name" :name="v.type" />
       </el-tabs>
       <ul class="d-file-preview_list">
         <li
@@ -25,11 +11,7 @@
           :class="currentFileIndex === i ? 'active_left' : ''"
           @click="handleClickLeft(url, i)"
         >
-          <el-image
-            style="width: 140px; height: 140px"
-            :src="getUrl(url)"
-            fit="cover"
-          />
+          <el-image style="width: 140px; height: 140px" :src="getUrl(url)" fit="cover" />
         </li>
       </ul>
     </div>
@@ -41,30 +23,16 @@
       :url-list="[activeTab === 'image' ? currentFileList[currentFileIndex] : '']"
       :on-close="close"
     />
-    <div
-      v-show="activeTab !== 'image'"
-      class="d-file-preview_box"
-    >
-      <span
-        class="el-image-viewer__btn el-image-viewer__close"
-        @click="close"
-      >
+    <div v-show="activeTab !== 'image'" class="d-file-preview_box">
+      <span class="el-image-viewer__btn el-image-viewer__close" @click="close">
         <i class="el-icon-close" />
       </span>
-      <audio
-        v-show="activeTab === 'audio'"
-        controls
-        style="width: 60%"
-      >
-        <source :src="currentFileList[currentFileIndex]">
+      <audio v-show="activeTab === 'audio'" controls style="width: 60%">
+        <source :src="currentFileList[currentFileIndex]" />
         您的浏览器不支持 audio 元素。
       </audio>
-      <video
-        v-show="activeTab === 'video'"
-        controls
-        style="min-width: 80%;max-height: 90%"
-      >
-        <source :src="currentFileList[currentFileIndex]">
+      <video v-show="activeTab === 'video'" controls style="min-width: 80%; max-height: 90%">
+        <source :src="currentFileList[currentFileIndex]" />
         您的浏览器不支持 HTML5 video 标签。
       </video>
     </div>
@@ -73,7 +41,7 @@
 
 <script>
 import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
-import {imgExts, videoExts, audioExts} from '../../utils/constant'
+import { imgExts, videoExts, audioExts } from '../../utils/constant'
 export default {
   name: 'DFilePreview',
   components: { ElImageViewer },
@@ -95,9 +63,9 @@ export default {
     defaultIndex: {
       type: Number,
       default: 0
-    } 
+    }
   },
-  data () {
+  data() {
     return {
       fileList: [],
       currentFileIndex: 0,
@@ -106,14 +74,14 @@ export default {
     }
   },
   computed: {
-    currentFileList () {
-      return this.fileList.find(item => item.type === this.activeTab)?.urls || []
+    currentFileList() {
+      return this.fileList.find((item) => item.type === this.activeTab)?.urls || []
     }
   },
   watch: {
     list: {
-      handler (val) {
-        if (val.length && typeof (val[0]) === 'string') {
+      handler(val) {
+        if (val.length && typeof val[0] === 'string') {
           let arr = [
             { name: '图片', type: 'image', urls: [] },
             { name: '视频', type: 'video', urls: [] },
@@ -132,7 +100,7 @@ export default {
               }
             })
           })
-          this.fileList = arr.filter(item => item.urls.length)
+          this.fileList = arr.filter((item) => item.urls.length)
         } else {
           this.fileList = val
         }
@@ -141,7 +109,7 @@ export default {
       deep: true
     },
     visible: {
-      handler (val) {
+      handler(val) {
         if (val) {
           this.addEventEventFun()
         } else {
@@ -151,27 +119,27 @@ export default {
     }
   },
   methods: {
-    deviceSupportUninstall () {
+    deviceSupportUninstall() {
       this.$refs.viewer.deviceSupportUninstall()
     },
-    deviceSupportInstall () {
+    deviceSupportInstall() {
       this.$refs.viewer.deviceSupportInstall()
     },
-    addEventEventFun () {
+    addEventEventFun() {
       const elRef = this.$refs.leftRef
       elRef.addEventListener('mouseenter', this.deviceSupportUninstall)
       elRef.addEventListener('mouseleave', this.deviceSupportInstall)
     },
-    removeEventFun () {
+    removeEventFun() {
       const elRef = this.$refs.leftRef
       elRef.removeEventListener('mouseenter', this.deviceSupportUninstall)
       elRef.removeEventListener('mouseleave', this.deviceSupportInstall)
     },
-    close () {
+    close() {
       this.visible = false
       this.$emit('close')
     },
-    getUrl (val) {
+    getUrl(val) {
       switch (this.activeTab) {
         case 'video':
           return require('./static/video.png')
@@ -183,17 +151,17 @@ export default {
           break
       }
     },
-    handleClickLeft (url, index) {
+    handleClickLeft(url, index) {
       this.currentFileIndex = index
     },
-    handleTabClick () {
+    handleTabClick() {
       this.currentFileIndex = 0
     }
   }
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .d-file-preview {
   width: 100vw;
   height: 100vh;
@@ -230,15 +198,15 @@ export default {
     flex-direction: column;
     background: #606266;
 
-    :deep(.el-tabs__nav-wrap::after) {
+    .el-tabs__nav-wrap::after {
       background-color: transparent;
     }
 
-    :deep(.el-tabs__item) {
+    .el-tabs__item {
       color: #fff;
     }
 
-    :deep(.el-tabs__item.is-active) {
+    .el-tabs__item.is-active {
       color: #5f9efd;
     }
 
@@ -264,11 +232,11 @@ export default {
     }
   }
 
-  :deep(.el-image-viewer__wrapper) {
+  .el-image-viewer__wrapper {
     left: calc(220px);
   }
 
-  :deep(.el-icon-close) {
+  .el-icon-close {
     color: #fff;
   }
 }

package/src/packages/filter-tree/index.vue

@@ -22,19 +22,13 @@
       :default-expanded-keys="defaultExpandIds"
       v-bind="$attrs"
       @node-click="nodeClick"
-      @node-expand="(data)=>handleNodeToggle(data,true)"
-      @node-collapse="(data)=>handleNodeToggle(data,false)"
+      @node-expand="(data) => handleNodeToggle(data, true)"
+      @node-collapse="(data) => handleNodeToggle(data, false)"
       v-on="$listeners"
     >
-      <span
-        slot-scope="{ node, data }"
-        class="d-filter-tree-node"
-      >
+      <span slot-scope="{ node, data }" class="d-filter-tree-node">
         <span class="node-label ellipsis">
-          <slot
-            name="label"
-            :data="data"
-          >{{ node.label }}</slot>
+          <slot name="label" :data="data">{{ node.label }}</slot>
         </span>
         <span class="mr8">
           <slot name="button" :node="node"></slot>
@@ -117,7 +111,7 @@ export default {
       default: 'search'
     }
   },
-  data () {
+  data() {
     return {
       searchContent: '',
       defaultExpandIds: [],
@@ -125,7 +119,7 @@ export default {
     }
   },
   computed: {
-    showNodeButton () {
+    showNodeButton() {
       return (type, data) => {
         if (this.buttonProps[type]) {
           if (typeof this.buttonProps[type] === 'function') {
@@ -141,11 +135,13 @@ export default {
   },
   watch: {
     data: {
-      handler () {
+      handler() {
         if (this.data && this.data.length) {
           let node
           if (this.currentKey) {
-            node = getNodeByKey(this.data, this.currentKey, { key: this.nodeKey })
+            node = getNodeByKey(this.data, this.currentKey, {
+              key: this.nodeKey
+            })
           } else if (this.currentDefault) {
             // 获取需要默认选中的节点
             const props = {
@@ -167,32 +163,36 @@ export default {
       },
       immediate: true
     },
-    searchContent (val) {
+    searchContent(val) {
       this.$refs.tree.filter(val)
     }
   },
-  created () {},
+  created() {},
   methods: {
     // 树的过滤methods
-    filterNode (value, data) {
+    filterNode(value, data) {
       if (!value) return true
-      return (data[this.searchKey] || data[(this.props && this.props.label) || 'label']).indexOf(value) !== -1
+      return (
+        (data[this.searchKey] || data[(this.props && this.props.label) || 'label']).indexOf(
+          value
+        ) !== -1
+      )
     },
     // 树节点触发点击
-    nodeClick (node) {
+    nodeClick(node) {
       this.$emit('node-change', node)
     },
-    append (node) {
+    append(node) {
       this.$emit('node-append', node)
     },
-    edit (node) {
+    edit(node) {
       this.$emit('node-edit', node)
     },
-    remove (node) {
+    remove(node) {
       this.$emit('node-remove', node)
     },
     // 树节点展开/关闭
-    handleNodeToggle (data, isExpanded) {
+    handleNodeToggle(data, isExpanded) {
       if (isExpanded) {
         // 展开节点
         if (!this.defaultExpandIds.includes(data[this.nodeKey])) {
@@ -207,59 +207,61 @@ export default {
       }
       this.removeExpandChildIds(data)
     },
-    removeExpandChildIds (data) {
-      const ids = (flatTree(data.children || [], { key: this.nodeKey }) || []).map(node => node[this.nodeKey])
-      this.defaultExpandIds = this.defaultExpandIds.filter(id => !ids.includes(id))
+    removeExpandChildIds(data) {
+      const ids = (flatTree(data.children || [], { key: this.nodeKey }) || []).map(
+        (node) => node[this.nodeKey]
+      )
+      this.defaultExpandIds = this.defaultExpandIds.filter((id) => !ids.includes(id))
     },
-    expandNode (id) {
+    expandNode(id) {
       const node = getNodeByKey(this.data, id, { key: this.nodeKey })
       if (node) this.handleNodeToggle(node, true)
     },
     // el-tree methods
-    updateKeyChildren (...args) {
+    updateKeyChildren(...args) {
       this.$refs.tree.updateKeyChildren(...args)
     },
-    getCheckedNodes (...args) {
+    getCheckedNodes(...args) {
       return this.$refs.tree.getCheckedNodes(...args)
     },
-    setCheckedNodes (...args) {
+    setCheckedNodes(...args) {
       this.$refs.tree.setCheckedNodes(...args)
     },
-    getCheckedKeys (...args) {
+    getCheckedKeys(...args) {
       return this.$refs.tree.getCheckedKeys(...args)
     },
-    setCheckedKeys (...args) {
+    setCheckedKeys(...args) {
       this.$refs.tree.setCheckedKeys(...args)
     },
-    setChecked (...args) {
+    setChecked(...args) {
       this.$refs.tree.setChecked(...args)
     },
-    getHalfCheckedNodes (...args) {
+    getHalfCheckedNodes(...args) {
       return this.$refs.tree.getHalfCheckedNodes(...args)
     },
-    getHalfCheckedKeys (...args) {
+    getHalfCheckedKeys(...args) {
       return this.$refs.tree.getHalfCheckedKeys(...args)
     },
-    getCurrentKey (...args) {
+    getCurrentKey(...args) {
       return this.$refs.tree.getCurrentKey(...args)
     },
-    getCurrentNode (...args) {
+    getCurrentNode(...args) {
       return this.$refs.tree.getCurrentNode(...args)
     },
-    setCurrentKey (...args) {
+    setCurrentKey(...args) {
       this.$refs.tree.setCurrentKey(...args)
     },
-    setCurrentNode (...args) {
+    setCurrentNode(...args) {
       this.$refs.tree.setCurrentNode(...args)
     },
-    getNode (...args) {
+    getNode(...args) {
       return this.$refs.tree.getNode(...args)
     }
   }
 }
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss">
 .d-filter-tree {
   display: flex;
   flex-direction: column;
@@ -270,7 +272,7 @@ export default {
     justify-content: space-between;
     & > div {
       cursor: pointer;
-      color: #3786FD;
+      color: #3786fd;
     }
   }
   .d-filter-tree-node {

package/src/packages/form/index.vue

@@ -1,15 +1,7 @@
 <!-- 表单 -->
 <template>
-  <el-form
-    ref="form"
-    v-bind="$attrs"
-    :model="source"
-  >
-    <el-row
-      style="display: flex;flex-wrap: wrap;"
-      :gutter="16"
-      :class="!grid && 'flex'"
-    >
+  <el-form ref="form" class="d-form" v-bind="$attrs" :model="source">
+    <el-row style="display: flex; flex-wrap: wrap" :gutter="16" :class="!grid && 'flex'">
       <template v-for="item in config">
         <component
           :is="grid ? 'el-col' : 'div'"
@@ -20,11 +12,20 @@
         >
           <el-form-item
             class="d-form-item"
-            :class="{ 'custom-form-item-top': item.direction === 'vertical' || direction === 'vertical' }"
+            :class="{
+              'custom-form-item-top': item.direction === 'vertical' || direction === 'vertical'
+            }"
             :label="item.label"
             :prop="item.prop"
-            :label-width="(item.direction === 'line' || direction === 'line') ? (item.labelWidth || labelWidth) : '100%'"
-            :rules="item.rules || (item.required ? [{ required: true, message: placeholder(item) }] : null)"
+            :label-width="
+              item.direction === 'line' || direction === 'line'
+                ? item.labelWidth || labelWidth
+                : '100%'
+            "
+            :rules="
+              item.rules ||
+              (item.required ? [{ required: true, message: placeholder(item) }] : null)
+            "
             v-bind="item.itemProps"
           >
             <span slot="label">
@@ -33,11 +34,7 @@
             </span>
             <span v-if="item.preText" class="mr8">{{ item.preText }}</span>
             <slot v-if="item.component === 'slot'" :name="item.slotName" />
-            <div
-              v-else-if="item.component === 'text'"
-              :class="item.innerClass"
-              :style="item.style"
-            >
+            <div v-else-if="item.component === 'text'" :class="item.innerClass" :style="item.style">
               {{ item.text || source[item.prop] }}
             </div>
             <template v-else>
@@ -87,19 +84,19 @@ export default {
       default: 'vertical'
     }
   },
-  data () {
+  data() {
     return {}
   },
   computed: {
     source: {
-      get () {
+      get() {
         return this.modelValue
       },
-      set (value) {
+      set(value) {
         this.$emit('change', value)
       }
     },
-    placeholder () {
+    placeholder() {
       return ({ component, label }) => {
         // 默认给组件添加placeholder，可自定义
         if (component === 'el-input' || component === 'el-input-number') {
@@ -111,13 +108,13 @@ export default {
     }
   },
   methods: {
-    resetFields () {
+    resetFields() {
       this.$refs.form.resetFields()
     },
-    clearValidate () {
+    clearValidate() {
       this.$refs.form.clearValidate()
     },
-    async validate () {
+    async validate() {
       const valid = await this.$refs.form.validate()
       return valid
     }
@@ -125,25 +122,27 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-.d-form-item {
-  :deep(.el-form-item__content) {
-    display: flex;
-    .search-item {
-      flex: 1;
-      overflow: hidden;
+<style lang="scss">
+.d-form {
+  .d-form-item {
+    .el-form-item__content {
+      display: flex;
+      .search-item {
+        flex: 1;
+        overflow: hidden;
+      }
     }
   }
-}
-.custom-form-item-top {
-  display: flex;
-  flex-direction: column;
+  .custom-form-item-top {
+    display: flex;
+    flex-direction: column;
 
-  :deep(.el-form-item__label) {
-    text-align: left;
-  }
-  :deep(.el-form-item__content) {
-    margin-left: 0 !important;
+    .el-form-item__label {
+      text-align: left;
+    }
+    .el-form-item__content {
+      margin-left: 0 !important;
+    }
   }
 }
 </style>

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

@@ -2,10 +2,7 @@
 <template>
   <div class="search-item">
     <div>
-      <span
-        v-if="config.prefix"
-        class="mr6"
-      >{{ config.prefix }}</span>
+      <span v-if="config.prefix" class="mr6">{{ config.prefix }}</span>
       <el-radio-group
         v-if="config.component === 'el-radio-group'"
         v-model="value"
@@ -39,14 +36,8 @@
         v-on="config.listeners"
         @change="change"
       >
-        <template
-          v-for="s in slots"
-          :slot="s.slotName"
-        >
-          <form-item-render
-            :scope="config"
-            :render="s.render"
-          />
+        <template v-for="s in slots" :slot="s.slotName">
+          <form-item-render :scope="config" :render="s.render" />
         </template>
         <template v-if="config.component === 'el-checkbox-group'">
           <el-checkbox
@@ -67,10 +58,7 @@
             :disabled="!!option.disabled"
           />
         </template>
-        <span
-          v-if="config.suffix"
-          class="ml6"
-        >{{ config.suffix }}</span>
+        <span v-if="config.suffix" class="ml6">{{ config.suffix }}</span>
       </component>
     </div>
   </div>
@@ -97,25 +85,25 @@ export default {
       default: ''
     }
   },
-  data () {
+  data() {
     return {}
   },
   computed: {
     value: {
-      get () {
+      get() {
         return this.modelValue
       },
-      set (value) {
+      set(value) {
         this.$emit('change', value)
       }
     },
-    slots () {
+    slots() {
       return Object.entries(this.config.slots || []).map(([key, value]) => ({
         slotName: key,
         render: value
       }))
     },
-    clearable () {
+    clearable() {
       return (config) => {
         // 优先取配置项clearable
         if (config.clearable !== undefined) {
@@ -125,7 +113,7 @@ export default {
         }
       }
     },
-    maxlength () {
+    maxlength() {
       return (config) => {
         if (config.component === 'el-input') {
           if (config.props && config.props.type === 'textarea') {
@@ -138,7 +126,7 @@ export default {
         }
       }
     },
-    placeholder () {
+    placeholder() {
       return ({ component, label }) => {
         // 默认给组件添加placeholder，可自定义
         if (component === 'el-input' || component === 'el-input-number') {
@@ -155,7 +143,7 @@ export default {
      * @param {*} value
      * @return {*} data: 输出结构和value数据结构一致，对应value中的节点data
      */
-    change (value) {
+    change(value) {
       if (this.config.onChange) {
         let data = null
 
@@ -164,29 +152,38 @@ export default {
           this.$nextTick(() => {
             // el-cascader搜索勾选bug，需要nextTick后才能正常使用getCheckedNodes
             data = this.$refs[this.config.prop].getCheckedNodes()
-            const emitPath = (this.config.props && this.config.props.props && this.config.props.props.emitPath !== undefined) ? this.config.props.props.emitPath : true
-            const multiple = this.config.props && this.config.props.props && this.config.props.props.multiple
+            const emitPath =
+              this.config.props &&
+              this.config.props.props &&
+              this.config.props.props.emitPath !== undefined
+                ? this.config.props.props.emitPath
+                : true
+            const multiple =
+              this.config.props && this.config.props.props && this.config.props.props.multiple
             if (emitPath) {
               if (multiple) {
-                data = value.map(arr => data.find(node => arr[arr.length - 1] === node.value).pathNodes)
+                data = value.map(
+                  (arr) => data.find((node) => arr[arr.length - 1] === node.value).pathNodes
+                )
               } else {
                 data = data[data.length - 1].pathNodes
               }
             } else {
               if (multiple) {
-                data = value.map(item => data.find(node => item === node.value))
+                data = value.map((item) => data.find((node) => item === node.value))
               } else {
                 data = data[data.length - 1]
               }
             }
             this.config.onChange(value, data)
           })
-        } else if (this.config.component === 'el-select') { // 处理下拉选择器
+        } else if (this.config.component === 'el-select') {
+          // 处理下拉选择器
           data = this.config.options
           if (Array.isArray(value)) {
-            data = data.filter(i => value.includes(i.value)) || []
+            data = data.filter((i) => value.includes(i.value)) || []
           } else {
-            data = data.find(i => value === i.value) || {}
+            data = data.find((i) => value === i.value) || {}
           }
           this.config.onChange(value, data)
         } else {