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

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

@@ -8,21 +8,15 @@
     submit-btn-icon="el-icon-upload2"
     @submit="submit"
   >
-    <el-form
-      ref="importForm"
-      :model="form"
-      :inline="true"
-    >
+    <el-form ref="importForm" :model="form" :inline="true">
       <el-form-item
         class="import-form-item"
         prop="file"
         label="选择文件"
-        :rules="[
-          { required: true, message: '请选择文件' }
-        ]"
+        :rules="[{ required: true, message: '请选择文件' }]"
       >
-        <div class="custom-file-input">
-          <div class="custom-file-content">
+        <div class="d-import__custom-file-input">
+          <div class="d-import__custom-file-content">
             {{ form.file ? form.file.name : '请选择' }}
           </div>
           <el-upload
@@ -32,19 +26,11 @@
             action=""
             :on-change="uploadChange"
           >
-            <el-button
-              type="primary"
-              icon="el-icon-folder"
-            />
+            <el-button type="primary" icon="el-icon-folder" />
           </el-upload>
         </div>
       </el-form-item>
-      <el-button
-        v-show="templateUrl"
-        icon="el-icon-paperclip"
-        type="text"
-        @click="downloadFile"
-      >
+      <el-button v-show="templateUrl" icon="el-icon-paperclip" type="text" @click="downloadFile">
         模板下载
       </el-button>
     </el-form>
@@ -93,7 +79,7 @@ export default {
       type: Number
     }
   },
-  data () {
+  data() {
     return {
       fileList: [],
       form: {
@@ -103,10 +89,10 @@ export default {
   },
   computed: {
     visible: {
-      get () {
+      get() {
         return this.modelValue
       },
-      set (value) {
+      set(value) {
         this.form.file = ''
         this.fileList = []
         this.$refs.importForm.clearValidate()
@@ -115,7 +101,7 @@ export default {
     }
   },
   methods: {
-    downloadFile () {
+    downloadFile() {
       let token
       try {
         token = JSON.parse(window.localStorage.getItem('userInfo')).token
@@ -124,9 +110,11 @@ export default {
       }
       window.location.href = `${this.templateUrl}?authToken=${token}`
     },
-    uploadChange (file, fileList) {
+    uploadChange(file, fileList) {
       const isLimit = file.size / 1024 / 1024 < this.fileSize
-      const isType = this.fileType.includes(file.name.substr(file.name.lastIndexOf('.') + 1).toLocaleLowerCase())
+      const isType = this.fileType.includes(
+        file.name.substr(file.name.lastIndexOf('.') + 1).toLocaleLowerCase()
+      )
       if (!isType) {
         this.$message.error(`请上传正确的文件格式（${this.fileType.join('、')}）`)
         return false
@@ -138,7 +126,7 @@ export default {
       this.fileList = fileList
       this.form.file = file.raw
     },
-    async submit (callback) {
+    async submit(callback) {
       if (!this.form.file) {
         this.$message.error('请选择导入文件')
         callback(new Error(false))
@@ -154,11 +142,11 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-.custom-file-input {
+<style lang="scss">
+.d-import__custom-file-input {
   display: flex;
   width: 230px;
-  .custom-file-content {
+  .d-import__custom-file-content {
     width: 100%;
     height: 32px;
     border: 1px solid #dcdfe6;

package/src/packages/menu/index.vue

@@ -6,7 +6,8 @@
     :router="isVertical"
     unique-opened
     :mode="mode"
-    @select="menuSelect">
+    @select="menuSelect"
+  >
     <menu-item v-for="item in data" :key="item.name" :data="item" :mode="mode"></menu-item>
   </el-menu>
 </template>
@@ -26,22 +27,23 @@ export default {
       default: 'vertical'
     }
   },
-  data () {
+  data() {
     return {
       activeMenu: ''
     }
   },
   computed: {
-    isVertical () {
+    isVertical() {
       return this.mode === 'vertical'
     }
   },
   watch: {
     '$route.path': {
-      handler (path) {
+      handler(path) {
         if (!this.isVertical) {
-          if (this.activeMenu && path.substring(0, this.activeMenu.length) === this.activeMenu) return
-          const data = this.data.find(item => path.substring(0, item.path.length) === item.path)
+          if (this.activeMenu && path.substring(0, this.activeMenu.length) === this.activeMenu)
+            return
+          const data = this.data.find((item) => path.substring(0, item.path.length) === item.path)
           this.activeMenu = data?.path
           this.$emit('select', data, false)
         }
@@ -50,16 +52,16 @@ export default {
     }
   },
   methods: {
-    menuSelect (index) {
+    menuSelect(index) {
       if (this.isVertical) return
-      const data = this.data.find(item => item.path === index)
+      const data = this.data.find((item) => item.path === index)
       this.$emit('select', data, true)
     }
   }
 }
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss">
 .d-menu {
   height: 100%;
 }

package/src/packages/menu/menuItem.vue

@@ -2,45 +2,27 @@
 <template>
   <el-submenu
     v-if="mode === 'vertical' && data.children && data.children.length"
+    class="d-menu__submenu"
     :index="data.path"
   >
     <template slot="title">
-      <img
-        v-if="data.meta.icon"
-        class="mr8 menu-icon"
-        :src="data.meta.icon"
-      >
+      <img v-if="data.meta.icon" class="mr8 menu-icon" :src="data.meta.icon" />
       <span>{{ data.meta.title }}</span>
     </template>
-    <menu-item
-      v-for="item in data.children"
-      :key="item.name"
-      :data="item"
-    />
+    <menu-item v-for="item in data.children" :key="item.name" :data="item" />
   </el-submenu>
-  <el-menu-item
-    v-else
-    :index="data.path"
-  >
+  <el-menu-item v-else :index="data.path">
     <template slot="title">
-      <div
-        v-if="data.meta.icon"
-        class="menu-icon-box"
-      >
-        <img
-          class="menu-icon"
-          :src="data.meta.icon"
-        >
+      <div v-if="data.meta.icon" class="d-menu-icon-box">
+        <img class="d-menu-icon" :src="data.meta.icon" />
       </div>
       <span
         v-if="data.meta.isNewWindow"
         class="ml6 ellipsis flex-1"
         @click.stop="openNewWindow(data)"
-      >{{ data.meta.title }}</span>
-      <span
-        v-else
-        class="ml6 ellipsis flex-1"
-      >{{ data.meta.title }}</span>
+        >{{ data.meta.title }}</span
+      >
+      <span v-else class="ml6 ellipsis flex-1">{{ data.meta.title }}</span>
     </template>
   </el-menu-item>
 </template>
@@ -59,32 +41,33 @@ export default {
       default: 'vertical'
     }
   },
-  data () {
-    return {
-    }
+  data() {
+    return {}
   },
   computed: {},
-  created () {},
+  created() {},
   methods: {
-    openNewWindow (data) {
+    openNewWindow(data) {
       window.open(data.path, '_blank')
     }
   }
 }
 </script>
 
-<style lang='scss' scoped>
-.menu-icon-box {
-  width: 26px;
-  height: 26px;
-  border-radius: 50%;
-  background-color: #fff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.menu-icon {
-  width: 16px;
-  height: 16px;
+<style lang="scss">
+.d-menu__submenu {
+  .d-menu-icon-box {
+    width: 26px;
+    height: 26px;
+    border-radius: 50%;
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .d-menu-icon {
+    width: 16px;
+    height: 16px;
+  }
 }
 </style>

package/src/packages/popconfirm/index.vue

@@ -1,11 +1,6 @@
 <!-- 二次确认气泡 -->
 <template>
-  <el-popconfirm
-    :title="title"
-    cancel-button-type=""
-    icon="el-icon-warning"
-    @confirm="confirm"
-  >
+  <el-popconfirm :title="title" cancel-button-type="" icon="el-icon-warning" @confirm="confirm">
     <span slot="reference" :class="`${type}-text-btn`">{{ buttonName }}</span>
   </el-popconfirm>
 </template>
@@ -27,11 +22,11 @@ export default {
       type: String
     }
   },
-  data () {
+  data() {
     return {}
   },
   methods: {
-    confirm () {
+    confirm() {
       this.$emit('confirm')
     }
   }

package/src/packages/radio-group/index.vue

@@ -1,15 +1,7 @@
 <!-- 单选框组 -->
 <template>
-  <el-radio-group
-    v-model="value"
-    v-bind="$attrs"
-    v-on="$listeners"
-  >
-    <el-radio
-      v-for="item in options"
-      :key="item.value"
-      :label="item.value"
-    >
+  <el-radio-group v-model="value" v-bind="$attrs" v-on="$listeners">
+    <el-radio v-for="item in options" :key="item.value" :label="item.value">
       {{ item.label }}
     </el-radio>
   </el-radio-group>
@@ -33,25 +25,23 @@ export default {
       default: () => []
     }
   },
-  data () {
-    return {
-    }
+  data() {
+    return {}
   },
   computed: {
     value: {
-      get () {
+      get() {
         return this.modelValue
       },
-      set (value) {
+      set(value) {
         this.$emit('modelChange', value)
       }
     }
   },
   watch: {},
-  created () {},
+  created() {},
   methods: {}
 }
 </script>
 
-<style lang='scss' scoped>
-</style>
+<style lang="scss"></style>

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

@@ -9,14 +9,14 @@
         :span="item.span || Math.floor(24 / cell)"
         class="col-item"
       >
-        <div class="search-item">
-          <div class="search-item-label">
+        <div class="d-search-item">
+          <div class="d-search-item-label">
             {{ item.label }}
           </div>
           <form-item v-model="form[item.prop]" :config="item" />
         </div>
       </el-col>
-      <el-col :span="hiddenIndex === list.length || expend ? emptySpan : 0" style="height: 68px;">
+      <el-col :span="hiddenIndex === list.length || expend ? emptySpan : 0" style="height: 68px">
         <span />
       </el-col>
       <el-col v-if="hasSlot && expend && !suffixSlot" :span="24 - submitSpan" class="mb16">
@@ -29,12 +29,8 @@
           }"
           class="d-search-form-btn"
         >
-          <el-button type="primary" :disabled="searchLoading" @click="search">
-            查询
-          </el-button>
-          <el-button :disabled="searchLoading" @click="reset">
-            重置
-          </el-button>
+          <el-button type="primary" :disabled="searchLoading" @click="search"> 查询 </el-button>
+          <el-button :disabled="searchLoading" @click="reset"> 重置 </el-button>
           <el-button
             v-if="list.length > hiddenIndex"
             class="expend-btn"
@@ -93,7 +89,7 @@ export default {
       type: Number
     }
   },
-  data () {
+  data() {
     return {
       list: [],
       hiddenIndex: 0,
@@ -107,20 +103,20 @@ export default {
   },
   computed: {
     form: {
-      get () {
+      get() {
         return this.value
       },
-      set (value) {
+      set(value) {
         this.$emit('change', value)
       }
     },
-    submitSpan () {
+    submitSpan() {
       return this.buttonSpan || 24 / this.cell
     },
-    spanList () {
-      return this.list.map(item => item.span || Math.floor(24 / this.cell)) || []
+    spanList() {
+      return this.list.map((item) => item.span || Math.floor(24 / this.cell)) || []
     },
-    showCol () {
+    showCol() {
       return (index) => {
         return this.expend || index < this.hiddenIndex
       }
@@ -128,14 +124,14 @@ export default {
   },
   watch: {
     config: {
-      handler () {
-        this.list = this.config.filter(item => !item.hidden)
+      handler() {
+        this.list = this.config.filter((item) => !item.hidden)
       },
       deep: true,
       immediate: true
     },
     spanList: {
-      handler (val, oldVal) {
+      handler(val, oldVal) {
         if (!val.length || JSON.stringify(val) === JSON.stringify(oldVal)) {
           return
         }
@@ -145,7 +141,7 @@ export default {
       immediate: true
     }
   },
-  created () {
+  created() {
     initForm = cloneDeep(this.value)
     this.$nextTick(() => {
       this.hasSlot = !!(this.$slots.default && this.$slots.default.length)
@@ -156,7 +152,7 @@ export default {
     /**
      * @description: 查询
      */
-    async search () {
+    async search() {
       this.$emit('search')
       if (this.searchData) {
         try {
@@ -171,7 +167,7 @@ export default {
     /**
      * @description: 重置
      */
-    async reset () {
+    async reset() {
       this.form = cloneDeep(initForm)
       this.$emit('search')
       if (this.searchData) {
@@ -183,44 +179,48 @@ export default {
     /**
      * @description: 展开/收起
      */
-    changeStatus () {
+    changeStatus() {
       this.expend = !this.expend
       this.$emit('expand-change', this.expend)
     },
-    calcSpan () {
+    calcSpan() {
       let hiddenIndex = 1
-      const total = this.spanList.length ? this.spanList.reduce((a, b, index) => {
-        const sum = a + b
-        if (hiddenIndex < 2) {
-          if (24 - sum < this.submitSpan) {
-            hiddenIndex = index
-          }
-          if (24 - sum >= this.submitSpan && index === this.spanList.length - 1) {
-            hiddenIndex = index + 1
-          }
-        }
-        return sum
-      }) : 0
+      const total = this.spanList.length
+        ? this.spanList.reduce((a, b, index) => {
+            const sum = a + b
+            if (hiddenIndex < 2) {
+              if (24 - sum < this.submitSpan) {
+                hiddenIndex = index
+              }
+              if (24 - sum >= this.submitSpan && index === this.spanList.length - 1) {
+                hiddenIndex = index + 1
+              }
+            }
+            return sum
+          })
+        : 0
       this.hiddenIndex = hiddenIndex
 
-      const offsetSpan = 24 - total % 24
+      const offsetSpan = 24 - (total % 24)
       if (this.hasSlot) {
         if (offsetSpan < this.submitSpan || offsetSpan === 24) {
           this.suffixSlot = false
           this.emptySpan = 0
         } else {
           this.suffixSlot = true
-          this.emptySpan = offsetSpan >= this.submitSpan ? offsetSpan - this.submitSpan : 24 - this.submitSpan
+          this.emptySpan =
+            offsetSpan >= this.submitSpan ? offsetSpan - this.submitSpan : 24 - this.submitSpan
         }
       } else {
-        this.emptySpan = offsetSpan >= this.submitSpan ? offsetSpan - this.submitSpan : 24 - this.submitSpan
+        this.emptySpan =
+          offsetSpan >= this.submitSpan ? offsetSpan - this.submitSpan : 24 - this.submitSpan
       }
     }
   }
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .d-search-form {
   margin-bottom: 4px;
   .col-item {
@@ -242,16 +242,16 @@ export default {
   .expend-btn {
     padding: 4px 8px;
   }
-}
-.search-item {
-  margin-bottom: 12px;
-  &-label {
-    margin-bottom: 4px;
-    font-weight: 400;
-    color: #333333;
-  }
-  :deep(.el-input__inner) {
-    height: 32px !important;
+  .d-search-item {
+    margin-bottom: 12px;
+    &-label {
+      margin-bottom: 4px;
+      font-weight: 400;
+      color: #333333;
+    }
+    .el-input__inner {
+      height: 32px !important;
+    }
   }
 }
 </style>

package/src/packages/search-input/index.vue

@@ -5,12 +5,16 @@
     <div>
       <el-input
         v-model="value"
-        class="search-input-container"
+        class="d-search-input-container"
         :placeholder="placeholder"
         :clearable="clearable"
         @keyup.enter.native="$emit('search', value)"
       >
-        <i slot="suffix" class="el-input__icon el-icon-search pointer" @click="$emit('search', value)" />
+        <i
+          slot="suffix"
+          class="el-input__icon el-icon-search pointer"
+          @click="$emit('search', value)"
+        />
       </el-input>
     </div>
   </div>
@@ -38,30 +42,30 @@ export default {
       default: true
     }
   },
-  data () {
+  data() {
     return {}
   },
   computed: {
     value: {
-      get () {
+      get() {
         return this.modelValue
       },
-      set (value) {
+      set(value) {
         this.$emit('change', value)
       }
     }
   },
   watch: {},
-  created () {},
+  created() {},
   methods: {}
 }
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss">
 .d-search-input {
   display: flex;
   justify-content: space-between;
-  .search-input-container {
+  .d-search-input-container {
     width: 320px;
   }
 }