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

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

@@ -1,12 +1,24 @@
 <!-- 查询表格 -->
 <template>
-  <div class="table-search-wrap">
-    <search-form v-model="form" :config="config.searchConfig" :search-data="searchData" v-bind="$attrs"
-      v-on="$listeners">
+  <div class="d-table-search-wrap">
+    <search-form
+      v-model="form"
+      :config="config.searchConfig"
+      :search-data="searchData"
+      v-bind="$attrs"
+      v-on="$listeners"
+    >
       <slot />
     </search-form>
-    <d-table ref="dTable" :request-config="requestConfig" :columns="config.columns" :data="data" v-bind="$attrs"
-      class="table-wrap" v-on="$listeners" />
+    <d-table
+      ref="dTable"
+      :request-config="requestConfig"
+      :columns="config.columns"
+      :data="data"
+      v-bind="$attrs"
+      class="d-table-wrap"
+      v-on="$listeners"
+    />
   </div>
 </template>
 
@@ -42,12 +54,13 @@ export default {
       const requestConfig = this.config.requestConfig
       return {
         ...requestConfig,
-        params: typeof requestConfig.params === 'function'
-          ? requestConfig.params(cloneDeep(this.form)) // 处理自定义参数
-          : {
-            ...this.form,
-            ...requestConfig.params
-          }
+        params:
+          typeof requestConfig.params === 'function'
+            ? requestConfig.params(cloneDeep(this.form)) // 处理自定义参数
+            : {
+                ...this.form,
+                ...requestConfig.params
+              }
       }
     }
   },
@@ -56,8 +69,8 @@ export default {
   },
   methods: {
     createFormBind() {
-      const _form = {};
-      (this.config.searchConfig || []).forEach(c => {
+      const _form = {}
+      ;(this.config.searchConfig || []).forEach((c) => {
         _form[c.prop] = c.defaultValue || ''
       })
       this.form = _form
@@ -73,19 +86,19 @@ export default {
   }
 }
 </script>
-<style lang="scss" scoped>
-.table-search-wrap {
+<style lang="scss">
+.d-table-search-wrap {
   height: 100%;
   width: 100%;
   overflow: hidden;
   display: flex;
   flex-direction: column;
 
-  .table-wrap {
+  .d-table-wrap {
     flex: 1;
     overflow: hidden;
 
-    :deep(.el-table) {
+    .el-table {
       max-height: calc(100% - 52px) !important;
     }
   }

package/src/packages/select/index.vue

@@ -1,11 +1,7 @@
 <!-- 下拉选择器 -->
 <template>
   <div>
-    <el-select
-      v-model="value"
-      v-bind="$attrs"
-      v-on="{...$listeners, change: onChange}"
-    >
+    <el-select v-model="value" v-bind="$attrs" v-on="{ ...$listeners, change: onChange }">
       <el-option
         v-for="item in options"
         :key="item.value"
@@ -40,29 +36,28 @@ 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: {
-    onChange (value) {
+    onChange(value) {
       let data
       if (Array.isArray(value)) {
-        data = this.options.filter(i => value.includes(i.value)) || []
+        data = this.options.filter((i) => value.includes(i.value)) || []
       } else {
-        data = this.options.find(i => value === i.value) || {}
+        data = this.options.find((i) => value === i.value) || {}
       }
       this.$emit('change', value, data)
     }
@@ -70,5 +65,4 @@ export default {
 }
 </script>
 
-<style lang='scss' scoped>
-</style>
+<style lang="scss"></style>

package/src/packages/svg-icon/index.vue

@@ -18,10 +18,10 @@ export default {
     }
   },
   computed: {
-    iconName () {
+    iconName() {
       return `#icon-${this.icon}`
     },
-    svgClass () {
+    svgClass() {
       if (this.className) {
         return 'svg-icon ' + this.className
       } else {
@@ -32,12 +32,12 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-  .svg-icon {
-    width: 14px;
-    height: 14px;
-    vertical-align: -0.15em;
-    fill: currentColor;
-    overflow: hidden;
-  }
+<style lang="scss">
+.svg-icon {
+  width: 14px;
+  height: 14px;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
 </style>

package/src/packages/table/index.vue

@@ -1,11 +1,6 @@
 <!-- 表格 -->
 <template>
-  <div
-    :key="key"
-    v-loading="loading"
-    class="d-table"
-    :class="draggable && 'drag-query-table'"
-  >
+  <div :key="key" v-loading="loading" class="d-table" :class="draggable && 'd-drag-query-table'">
     <el-table
       ref="table"
       :row-key="rowKey"
@@ -25,13 +20,7 @@
         align="center"
         width="50"
       />
-      <el-table-column
-        v-if="index"
-        key="index"
-        label="序号"
-        align="center"
-        width="55"
-      >
+      <el-table-column v-if="index" key="index" label="序号" align="center" width="55">
         <template slot-scope="scope">
           {{ (pageNum - 1) * pageSize + scope.$index + 1 }}
         </template>
@@ -50,33 +39,18 @@
             :row="scope.row"
             :index="scope.$index"
           />
-          <column-render
-            v-else-if="column.render"
-            :scope="scope"
-            :render="column.render"
-          />
+          <column-render v-else-if="column.render" :scope="scope" :render="column.render" />
           <template v-else>
             {{ scope.row[column.prop] }}
           </template>
         </template>
       </el-table-column>
-      <el-table-column
-        v-if="draggable && rowKey"
-        label=""
-        width="55"
-        align="center"
-      >
-        <img
-          class="table-drag-icon"
-          src="./drag.png"
-        >
+      <el-table-column v-if="draggable && rowKey" label="" width="55" align="center">
+        <img class="d-table-drag-icon" src="./drag.png" />
       </el-table-column>
     </el-table>
     <!-- 分页器 -->
-    <div
-      v-if="pagination"
-      class="d-table-footer"
-    >
+    <div v-if="pagination" class="d-table-footer">
       <div>
         <slot name="footer" />
       </div>
@@ -135,7 +109,7 @@ export default {
     },
     pageSizes: {
       type: Array,
-      default: () => ([10, 20, 30, 50])
+      default: () => [10, 20, 30, 50]
     },
     background: {
       type: Boolean,
@@ -182,7 +156,7 @@ export default {
       type: Boolean
     }
   },
-  data () {
+  data() {
     return {
       pageSize: 10,
       pageNum: 1,
@@ -196,13 +170,13 @@ export default {
     }
   },
   computed: {
-    visibleColumns () {
-      return this.columns.filter(item => !item.hide)
+    visibleColumns() {
+      return this.columns.filter((item) => !item.hide)
     }
   },
   watch: {
     data: {
-      handler (val) {
+      handler(val) {
         if (JSON.stringify(val) === JSON.stringify(this.list)) {
           return
         }
@@ -217,17 +191,17 @@ export default {
       immediate: true
     },
     defaultCheckList: {
-      handler () {
+      handler() {
         this.handleSelectionData()
       },
       deep: true
     }
   },
-  mounted () {
+  mounted() {
     if (this.draggable && !this.rowKey) {
       console.error('[DTable] 请设置正确的 rowKey 用于拖拽排序')
     }
-    
+
     this.checkedList = this.defaultCheckList
     // 如果不需要分页器，每页显示条目数设置最大
     if (!this.pagination) {
@@ -238,7 +212,10 @@ export default {
       this.initSortable()
     }
     // 是否开启自动请求
-    if (!this.staticPaging && (this.requestConfig.autoRequest || this.requestConfig.autoRequest === undefined)) {
+    if (
+      !this.staticPaging &&
+      (this.requestConfig.autoRequest || this.requestConfig.autoRequest === undefined)
+    ) {
       this.search()
     }
   },
@@ -247,7 +224,7 @@ export default {
      * @description: 表格查询方法包装
      * @param {*} param 自定义查询条件
      */
-    async search (param = {}) {
+    async search(param = {}) {
       this.loading = true
       try {
         if (param.pageNum) {
@@ -264,13 +241,19 @@ export default {
         })
         this.total = total
         this.handleRequestData(data)
-      // eslint-disable-next-line no-empty
+        // eslint-disable-next-line no-empty
       } catch (e) {}
       this.loading = false
     },
-    async getData (params) {
-      const defaultParams = typeof this.requestConfig.params === 'function' ? this.requestConfig.params() : this.requestConfig.params
-      const { data } = await this.requestConfig.api({ ...defaultParams, ...params })
+    async getData(params) {
+      const defaultParams =
+        typeof this.requestConfig.params === 'function'
+          ? this.requestConfig.params()
+          : this.requestConfig.params
+      const { data } = await this.requestConfig.api({
+        ...defaultParams,
+        ...params
+      })
       this.total = data.total
       let listData = data.list || []
       if (this.requestConfig.props) {
@@ -288,7 +271,7 @@ export default {
     /**
      * @description: 处理表格接口获取的数据
      */
-    handleRequestData (data) {
+    handleRequestData(data) {
       if (this.staticPaging) {
         this.totalList = cloneDeep(data)
         this.total = this.totalList.length
@@ -320,30 +303,30 @@ export default {
     /**
      * @description: 处理表格默认勾选
      */
-    handleSelectionData () {
+    handleSelectionData() {
       this.checkedList = this.defaultCheckList
       this.$refs.table && this.$refs.table.clearSelection()
       if (this.checkedList.length) {
-        const ids = this.checkedList.map(item => item[this.rowKey])
-        const rows = this.list.filter(item => ids.includes(item[this.rowKey]))
+        const ids = this.checkedList.map((item) => item[this.rowKey])
+        const rows = this.list.filter((item) => ids.includes(item[this.rowKey]))
         this.$nextTick(() => {
-          rows.forEach(row => {
+          rows.forEach((row) => {
             this.$refs.table.toggleRowSelection(row, true)
           })
         })
       }
     },
-    calcStaticPageData () {
+    calcStaticPageData() {
       const _list = JSON.parse(JSON.stringify(this.totalList))
       this.list = _list.splice((this.pageNum - 1) * this.pageSize, this.pageSize)
     },
-    handleSizeChange (val) {
+    handleSizeChange(val) {
       this.pageSize = val
       this.pageNum = 1
       this.staticPaging ? this.calcStaticPageData() : this.search()
       this.$emit('page-change', { size: this.pageSize, page: this.pageNum })
     },
-    handleCurrentChange (val) {
+    handleCurrentChange(val) {
       this.pageNum = val
       this.staticPaging ? this.calcStaticPageData() : this.search()
       this.$emit('page-change', { size: this.pageSize, page: this.pageNum })
@@ -353,39 +336,43 @@ export default {
      * @param {Array} list
      * @return {Array}
      */
-    selectChange (list, row) {
+    selectChange(list, row) {
       if (!this.asyncSelection) {
         this.$emit('select-change', list)
       } else {
-        if (list.some(i => i[this.rowKey] === row[this.rowKey])) {
+        if (list.some((i) => i[this.rowKey] === row[this.rowKey])) {
           this.checkedList.push(row)
         } else {
-          this.checkedList = this.checkedList.filter(item => item[this.rowKey] !== row[this.rowKey])
+          this.checkedList = this.checkedList.filter(
+            (item) => item[this.rowKey] !== row[this.rowKey]
+          )
         }
         this.$emit('select-change', cloneDeep(this.checkedList))
       }
     },
-    selectAllChange (list) {
+    selectAllChange(list) {
       if (!this.asyncSelection) {
         this.$emit('select-change', list)
       } else {
         if (list.length) {
-          const checkedKeys = this.checkedList.map(item => item[this.rowKey])
-          const newData = list.filter(item => !checkedKeys.includes(item[this.rowKey]))
+          const checkedKeys = this.checkedList.map((item) => item[this.rowKey])
+          const newData = list.filter((item) => !checkedKeys.includes(item[this.rowKey]))
           this.checkedList = this.checkedList.concat(newData)
         } else {
-          const listKeys = this.list.map(item => item[this.rowKey])
-          this.checkedList = this.checkedList.filter(item => !listKeys.includes(item[this.rowKey]))
+          const listKeys = this.list.map((item) => item[this.rowKey])
+          this.checkedList = this.checkedList.filter(
+            (item) => !listKeys.includes(item[this.rowKey])
+          )
         }
         this.$emit('select-change', cloneDeep(this.checkedList))
       }
     },
 
-    selectionChange () {},
+    selectionChange() {},
     /**
      * @description: 清空用户的选择
      */
-    clearSelection () {
+    clearSelection() {
       this.checkedList = []
       this.$refs.table.clearSelection()
     },
@@ -394,9 +381,9 @@ export default {
      * @param {*} value 改变选中状态的值
      * @param {*} selected 是否选中
      */
-    toggleAsyncSelection (value, selected = false) {
-      this.checkedList = this.checkedList.filter(item => item[this.rowKey] !== value)
-      const data = this.list.find(item => item[this.rowKey] === value)
+    toggleAsyncSelection(value, selected = false) {
+      this.checkedList = this.checkedList.filter((item) => item[this.rowKey] !== value)
+      const data = this.list.find((item) => item[this.rowKey] === value)
       if (data) {
         this.$refs.table.toggleRowSelection(data, selected)
       } else {
@@ -406,7 +393,7 @@ export default {
     /**
      * @description: 表格拖拽
      */
-    initSortable () {
+    initSortable() {
       const el = this.$refs.table.$el.querySelector('.el-table__body-wrapper > table > tbody')
       /* eslint-disable no-new */
       new Sortable(el, {
@@ -429,25 +416,25 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .d-table {
   display: flex;
   flex-direction: column;
+  .d-table-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 16px;
+  }
+  .d-table-drag-icon {
+    cursor: pointer;
+  }
 }
-.drag-query-table {
-  :deep(.hover-row) {
+.d-drag-query-table {
+  .hover-row {
     td {
       background-color: #fff;
     }
   }
 }
-.table-drag-icon {
-  cursor: pointer;
-}
-.d-table-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-top: 16px;
-}
 </style>