重构CheckBox组件

lyswhut · Aug 18, 2019 · ba8991a · ba8991a
1 parent 6e07719
commit ba8991a
Show file tree

Hide file tree

Showing 8 changed files with 138 additions and 46 deletions.
diff --git a/publish/changeLog.md b/publish/changeLog.md
@@ -0,0 +1,3 @@
+### 优化
+
+- 重构checkbox组件
diff --git a/src/renderer/assets/styles/index.less b/src/renderer/assets/styles/index.less
@@ -12,6 +12,10 @@
   .mixin-ellipsis-1;
 }
 
+.center {
+  text-align: center;
+}
+
 .break {
   word-break: break-all;
 }

diff --git a/src/renderer/components/core/Icons.vue b/src/renderer/components/core/Icons.vue
@@ -27,9 +27,12 @@ svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/19
     g#icon-last
       // 454.52 454.52
       path(fill='currentColor' d='M378.135,227.256L206.224,55.354c-12.354-12.359-12.354-32.394,0-44.748c12.354-12.359,32.388-12.359,44.747,0L445.258,204.89c6.177,6.18,9.262,14.271,9.262,22.366c0,8.098-3.091,16.195-9.262,22.372L250.971,443.91c-12.359,12.365-32.394,12.365-44.747,0c-12.354-12.354-12.354-32.391,0-44.744L378.135,227.256z M9.265,399.166c-12.354,12.354-12.354,32.391,0,44.744c12.354,12.365,32.382,12.365,44.748,0l194.287-194.281c6.177-6.177,9.257-14.274,9.257-22.372c0-8.095-3.086-16.192-9.257-22.366L54.013,10.606c-12.365-12.359-32.394-12.359-44.748,0c-12.354,12.354-12.354,32.388,0,44.748L181.18,227.256L9.265,399.166z')
-    g#icon-check
+    g#icon-check-true
       // 0 32 448 448
       path(fill='currentColor' d='M400 480H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48v352c0 26.51-21.49 48-48 48zm-204.686-98.059l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.248-16.379-6.249-22.628 0L184 302.745l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.25 16.379 6.25 22.628.001z')
+    g#icon-check-indeterminate
+      // 0 0 448 512
+      path(fill='currentColor' d='M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM92 296c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h264c6.6 0 12 5.4 12 12v56c0 6.6-5.4 12-12 12H92z')
     g#icon-logo
       path(fill='currentColor' d='M9.891,22.917q0,3.644,7.161,3.646,8.2-.131,8.333-5.859,0.128-4.556-5.729-4.427a24.919,24.919,0,0,0-5.078.781h0.13l-2.865-.912h0a16.1,16.1,0,0,0-1.953,6.771h0Zm8.2-10.156Q22,14.845,25.906,17.188l1.3-2.344q-3.516-1.563-6.9-3.386Q24.732,8.6,24.6,6.25,24.6,3,20.047,2.995a23.248,23.248,0,0,0-4.3.391,14.5,14.5,0,0,1,1.823-2.214L14.839-.26a86.54,86.54,0,0,1-6.51,9.115l2.214,1.563q0.519-.781,1.432-2.083Q13.015,6.9,13.406,6.25A21.552,21.552,0,0,1,19.4,5.078q2.212,0.131,2.474,1.3-0.131,1.563-4.036,3.906L15.88,9.115A22.155,22.155,0,0,1,13.8,8.073l-1.3,1.953q1.431,0.781,2.995,1.563-3.125,1.434-7.422,2.995L9.24,16.927a62.119,62.119,0,0,0,8.854-4.167h0ZM22.651,20.7q0,3.906-5.989,3.906-4.038,0-4.036-2.083a18.068,18.068,0,0,1,.521-2.474,19.643,19.643,0,0,1,6.9-1.432q2.734-.128,2.6,2.083h0ZM5.073,19.922a9.4,9.4,0,0,1,.911-2.344,4.852,4.852,0,0,0,1.042-2.865q0.391-1.562-5.469-5.338L0.125,11.589q4.166,2.475,4.167,3.386a2.727,2.727,0,0,1-.781,1.953,6.678,6.678,0,0,0-1.172,3.125Q2.207,21.1,5.333,25.391l2.214-1.3q-2.606-3.125-2.474-4.167h0ZM4.682,0.521L2.859,2.214Q5.2,4.167,7.417,6.25L9.109,4.557Q6.766,2.6,4.682.521h0ZM37.365,12.24Q37.233,9.9,37.1,8.724q2.212-.391,4.3-0.781l-0.911.781a2.109,2.109,0,0,1,1.3,1.042,1.354,1.354,0,0,1-1.172,1.172q-1.3.522-1.172,1.042-0.131.781,2.6,2.865l1.3-1.3a2.708,2.708,0,0,1-1.3-1.432q0.259-1.172.911-1.172a1.19,1.19,0,0,0,1.693-.651,5.468,5.468,0,0,0-2.083-2.474,14.706,14.706,0,0,1,1.693-.26,14.121,14.121,0,0,1,1.563-.13q0.128,2.734.13,6.771h2.083v-6.9q1.822-.128,3.516-0.13l-1.172,1.3a2.109,2.109,0,0,1,1.3,1.042,1.125,1.125,0,0,1-.911,1.172A1.572,1.572,0,0,0,49.6,11.719q0.128,1.172,2.864,2.734l1.172-1.432a1.923,1.923,0,0,1-1.432-1.562q-0.131-1.172,1.432-.911a1.18,1.18,0,0,0,1.042-1.172q0-.909-2.344-2.214,4.947,0,4.688,1.693a15.6,15.6,0,0,1-.781,4.427l2.474,0.781q0.65-.781.912-4.3V9.115Q59.89,4.69,53.9,4.948a57.07,57.07,0,0,0-5.859.26V3.255h9.245V0.911q-6.9.262-20.052,0V3.385Q41.4,3.257,45.7,3.255c0,0.521.043,1.217,0.13,2.083A63.272,63.272,0,0,0,36.974,6.51V5.99L34.63,6.38a67.9,67.9,0,0,1,.781,8.2l2.214-.26a13.278,13.278,0,0,0-.26-2.083h0ZM48.432,26.432q9.113,0.391,8.724-6.771,0.128-4.556-5.469-4.427a94.959,94.959,0,0,0-14.193,1.432l0.651,2.344a57.233,57.233,0,0,1,12.891-1.562q3.644-.128,3.646,1.823-7.944.781-15.625,0.781V22.4q1.172-.128,3.906-0.26,7.159-.519,11.589-0.651-0.522,2.866-5.859,2.995-6.381,0-11.2-.391l-0.13,2.083q6.119,0.259,11.068.26h0ZM4.292,54.037q0.259,5.34,8.073,5.6,11.719-.262,11.979-7.812,0.26-5.469-6.641-5.469a33.081,33.081,0,0,0-9.115,1.3c0-.173.043-0.26,0.13-0.26L6.245,46.224a15.689,15.689,0,0,0-1.953,7.813h0ZM7.417,38.542q1.172,2.084,2.214,4.427Q4.811,43.359.125,43.49l0.26,2.474q13.541-1.172,25.391-1.953c0.781-.085,1.345-0.13,1.693-0.13l-0.13-2.474q-4.819.522-9.766,0.912,1.563-2.863,2.6-4.687a10.907,10.907,0,0,1,1.953-.13,17.99,17.99,0,0,1,1.823-.13l-0.26-2.344q-4.037.391-8.2,0.781a24.974,24.974,0,0,1-3.516-3.385l-1.953,1.432a10.99,10.99,0,0,1,1.823,1.563,2.825,2.825,0,0,1,.521.651q-4.559.391-9.245,0.521l0.26,2.474a30.239,30.239,0,0,1,4.036-.521h0Zm6.51,13.021q-2.344,0-6.641-.13a2.111,2.111,0,0,1,.13-0.521V50.521A43.444,43.444,0,0,1,17.443,48.7q4.425-.128,4.3,2.995-0.391,5.341-9.115,5.6-5.341-.26-5.729-3.386v-0.13q6.119,0,11.589.391l0.26-2.6a44.171,44.171,0,0,1-4.818,0h0ZM10.932,40.1q-0.653-1.172-1.042-1.823,3.775-.128,7.552-0.521-0.131.263-.521,0.912a23.766,23.766,0,0,1-1.953,3.385l1.042,0.391a24.38,24.38,0,0,0-2.865.26q-2.084.131-3.125,0.26l1.823-.911q-0.262-.65-0.911-1.953h0ZM38.146,37.76a1.017,1.017,0,0,1,.391-0.13q-2.216,5.469-2.344,7.813Q35.93,48.7,39.839,48.7a48.348,48.348,0,0,0,6.25-.391q0.259,3.516.26,8.073a1.328,1.328,0,0,1-1.432,1.693,11.872,11.872,0,0,1-3.776-.651L40.75,59.766a15.948,15.948,0,0,0,4.818.781q4.166,0.128,3.646-4.3,0-.65-0.13-2.734Q48.821,50,48.693,48.047a37.613,37.613,0,0,0,9.115-1.823L56.766,43.75a36.612,36.612,0,0,1-8.2,1.693q-0.262-4.034-.391-4.948l-2.734.391a43.768,43.768,0,0,1,.521,4.427V45.7q-3,.263-5.6.26-1.563-.128-1.562-1.3a27.8,27.8,0,0,1,2.734-7.552,133.766,133.766,0,0,1,14.063-1.823l-0.521-2.474q-5.209.912-13.672,1.823-2.734.391-4.167,0.521l0.521,2.734a0.532,0.532,0,0,1,.391-0.13h0Zm3.906,13.8-2.083-1.953a72.922,72.922,0,0,1-5.6,6.771L36.583,58.2q2.863-3.775,5.469-6.641h0ZM53.51,49.74l-1.953,1.953a57.424,57.424,0,0,1,6.25,5.859l1.823-2.083q-3-2.734-6.12-5.729h0Zm17.448,8.073q6.119-.781,9.245-1.042-0.391.781-1.042,1.953a5.6,5.6,0,0,0-.521,1.042l2.344,1.042a77.847,77.847,0,0,0,6.51-19.661h0.521q3.644-.391,3.255,2.995a31.071,31.071,0,0,1-1.562,10.938q-0.781,2.216-2.083,2.214A6.934,6.934,0,0,1,84.5,56.51l-0.651,2.214a8.911,8.911,0,0,0,4.037.911q3.125-.131,4.427-3.646A55.043,55.043,0,0,0,93.875,43.88q0.519-5.728-5.859-5.469A46.133,46.133,0,0,0,89.057,33.2l-2.474-.651q-0.131.912-.391,2.734Q85.8,37.5,85.542,38.542q-2.606.391-4.687,0.911l0.391,2.6q1.953-.391,3.776-0.781a73.334,73.334,0,0,1-4.427,14.583l-0.13-1.432a4.879,4.879,0,0,1-1.562.26q0.519-6.641.521-13.932,0.128-5.859-4.557-5.729a9.856,9.856,0,0,0-3.646.781V35.287l-2.6.13q0.391,7.812.651,20.573H68.094a7.74,7.74,0,0,1-1.172.13l0.13,2.214q1.3-.128,3.906-0.521h0ZM74.6,48.958q-2.344-.391-3.255-0.651l-0.13-3.776a8.078,8.078,0,0,0,1.3.261q1.822,0.262,2.865.521l0.521-2.344q-0.522-.128-1.432-0.26-2.084-.259-3.255-0.521V38.542A6.905,6.905,0,0,1,74.6,37.5q2.6-.259,2.344,4.167,0,6.122-.13,8.464-0.131,2.734-.391,4.948-0.781.131-2.474,0.26-1.563.262-2.474,0.391,0-2.6-.13-5.078,2.344,0.391,4.167.781l0.26-2.344a4,4,0,0,0-1.172-.13h0Zm32.813-10.677q3.124-.65,4.687-0.911,0.26,2.606.391,4.948-5.209.391-10.547,0.521l0.13,2.344q5.337-.259,10.547-0.651,0,0.781.13,2.474a15.467,15.467,0,0,0,.13,2.344q-3.255.131-9.114,0.391-2.475.131-3.516,0.13l0.13,2.474q3.126-.259,12.5-0.781,0.129,1.953.131,3.646,0.39,3.387-4.037,3.125l0.13,2.474q7.291,0.128,6.641-5.729V51.432q3.254-.128,8.724-0.391c1.387-.085,2.344-0.13,2.865-0.13l-0.131-2.474q-2.216.262-8.073,0.521-2.343.131-3.515,0.26a32.747,32.747,0,0,0-.261-4.3q0.26,1.953,0-.651,4.688-.259,8.594-0.651-3.906.391,0.651,0l-0.26-2.344q-0.781.131-2.474,0.26-4.428.391-6.641,0.521a43.486,43.486,0,0,1-.521-5.078q4.3-.781,8.724-1.432l-0.521-2.474q-7.812,1.825-20.7,3.516l0.521,2.6q1.563-.391,4.688-0.912h0Z')
     g#icon-play

diff --git a/src/renderer/components/material/Checkbox.vue b/src/renderer/components/material/Checkbox.vue
@@ -1,18 +1,26 @@
 <template lang="pug">
 div(:class="$style.checkbox")
-  input(:type="need ? 'radio' : 'checkbox'" :id="id" :value="target" :name="name" @change="change" v-model="val")
+  input(:type="need ? 'radio' : 'checkbox'" :id="id" :value="value" :name="name" @change="change" v-model="bool")
   label(:for="id" :class="$style.content")
-    div
+    div(v-if="indeterminate")
+      svg(v-show="indeterminate" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' width="100%" viewBox='0 32 448 448' space='preserve')
+        use(xlink:href='#icon-check-indeterminate')
+      svg(v-show="!indeterminate" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' width="100%" viewBox='0 0 448 512' space='preserve')
+        use(xlink:href='#icon-check-true')
+    div(v-else)
       svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' width="100%" viewBox='0 32 448 448' space='preserve')
-        use(xlink:href='#icon-check')
-    span
-      slot
+        use(xlink:href='#icon-check-true')
+    span(v-if="label != null") {{label}}
 </template>
 
 <script>
 export default {
+  model: {
+    prop: 'checked',
+    event: 'input',
+  },
   props: {
-    target: {},
+    checked: {},
     value: {},
     id: {
       type: String,
@@ -25,41 +33,69 @@ export default {
       type: Boolean,
       default: false,
     },
+    label: {},
+    indeterminate: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
-      val: false,
+      bool: false,
     }
   },
   watch: {
-    value(n) {
-      if (this.target && n !== this.target) {
-        this.val = this.need
-          ? n === this.target
-            ? this.target
-            : false
-          : n === this.target
-      } else if (n !== this.val) {
-        this.val = n
-      }
+    checked(n) {
+      this.setValue(n)
     },
   },
   mounted() {
-    if (this.target) {
-      this.val = this.need
-        ? this.value === this.target
-          ? this.target
-          : false
-        : this.value === this.target
-    } else {
-      this.val = this.value
-    }
+    this.setValue(this.checked)
   },
   methods: {
     change() {
-      let val = this.target == null ? this.val : this.val ? this.target : null
-      this.$emit('input', val)
-      this.$emit('change', val)
+      let checked
+      if (Array.isArray(this.checked)) {
+        checked = [...this.checked]
+        const index = checked.indexOf(this.value)
+        if (index < 0) {
+          checked.push(this.value)
+        } else {
+          checked.splice(index, 1)
+        }
+      } else if (typeof this.checked == 'string') {
+        checked = this.bool ? this.value : ''
+      } else if (typeof this.checked == 'boolean') {
+        let bool = this.bool
+        if (this.indeterminate) {
+          bool = true
+          this.$nextTick(() => {
+            this.bool = true
+          })
+        }
+        checked = bool
+      }
+      this.$emit('input', checked)
+      this.$emit('change', checked)
+    },
+    setValue(value) {
+      let bool
+      if (Array.isArray(value)) {
+        bool = value.includes(this.value)
+      } else {
+        switch (typeof value) {
+          case 'string':
+            bool = value === this.value
+            break
+          case 'boolean':
+            bool = value
+            break
+          default:
+            return
+        }
+      }
+
+      this.bool = this.need ? bool && this.value : bool
     },
   },
 }

diff --git a/src/renderer/utils/music/kw/leaderboard.js b/src/renderer/utils/music/kw/leaderboard.js
@@ -140,7 +140,7 @@ export default {
           size: null,
         }
       }
-      types.reverse()
+      // types.reverse()
       return {
         singer: item.artist,
         name: item.name,

diff --git a/src/renderer/utils/request.js b/src/renderer/utils/request.js
@@ -4,7 +4,7 @@ import { debugRequest } from './env'
 // import fs from 'fs'
 
 const fatchData = (url, method, options, callback) => {
-  console.log('---start---', url)
+  // console.log('---start---', url)
   return request(url, {
     method,
     headers: options.headers,
@@ -14,11 +14,16 @@ const fatchData = (url, method, options, callback) => {
     json: options.format === undefined || options.format === 'json',
   }, (err, resp, body) => {
     if (err) return callback(err, null)
-    console.log('---end---', url)
+    // console.log('---end---', url)
     callback(null, resp, body)
   })
 }
 
+/**
+ * promise 形式的请求方法
+ * @param {*} url
+ * @param {*} options
+ */
 export const httpFatch = (url, options = { method: 'get' }) => {
   let requestObj
   let cancelFn

diff --git a/src/renderer/views/Search.vue b/src/renderer/views/Search.vue
@@ -6,7 +6,9 @@
         table
           thead
             tr
-              th.nobreak(style="width: 30%;") 歌曲名
+              th.nobreak.center(style="width: 37px;")
+                material-checkbox(id="search_select_all" v-model="isSelectAll" @change="handleSelectAllData" :indeterminate="isIndeterminate")
+              th.nobreak(style="width: 25%;") 歌曲名
               th.nobreak(style="width: 20%;") 歌手
               th.nobreak(style="width: 25%;") 专辑
               th.nobreak(style="width: 15%;") 操作
@@ -15,7 +17,9 @@
         table
           tbody
             tr(v-for='(item, index) in list' :key='item.songmid' @click="handleDoubleClick(index)")
-              td.break(style="width: 30%;")
+              td.nobreak.center(style="width: 37px;" @click.stop)
+                material-checkbox(:id="index.toString()" v-model="selectdData" :value="item")
+              td.break(style="width: 25%;")
                 | {{item.name}}
                 span.badge.badge-info(v-if="item._types['320k']") 高品质
                 span.badge.badge-success(v-if="item._types.ape || item._types.flac") 无损
@@ -26,7 +30,8 @@
               td(style="width: 10%;") {{item.interval}}
         div(:class="$style.pagination")
           material-pagination(:count="listInfo.total" :limit="limit" :page="page" @btn-click="handleTogglePage")
-    div(v-else :class="$style.noItem")
+    div(v-else :class="$style.noitem")
+      p 搜我所想~~😉
     material-download-modal(:show="showDownload" :musicInfo="musicInfo" @select="handleAddDownload" @close="showDownload = false")
 </template>
 
@@ -44,6 +49,10 @@ export default {
       clickIndex: -1,
       showDownload: false,
       musicInfo: null,
+      selectdData: [],
+      isSelectAll: false,
+      isIndeterminate: false,
+      isShowEditBtn: false,
     }
   },
   beforeRouteUpdate(to, from, next) {
@@ -71,6 +80,22 @@ export default {
       this.handleSearch(this.text, this.page)
     }
   },
+  watch: {
+    selectdData(n) {
+      const len = n.length
+      if (len) {
+        this.isSelectAll = true
+        this.isIndeterminate = len !== this.list.length
+        this.isShowEditBtn = true
+      } else {
+        this.isSelectAll = false
+        this.isShowEditBtn = false
+      }
+    },
+    list() {
+      this.resetSelect()
+    },
+  },
   computed: {
     ...mapGetters(['userInfo']),
     ...mapGetters('search', ['list', 'limit', 'listInfo']),
@@ -118,7 +143,6 @@ export default {
           break
       }
     },
-    openDownloadModal() {},
     testPlay(index) {
       let targetSong = this.list[index]
       this.defaultListAdd(targetSong)
@@ -140,6 +164,13 @@ export default {
       this.createDownload({ musicInfo: this.musicInfo, type })
       this.showDownload = false
     },
+    handleSelectAllData(isSelect) {
+      this.selectdData = isSelect ? [...this.list] : []
+    },
+    resetSelect() {
+      this.isSelectAll = false
+      this.selectdData = []
+    },
   },
 }
 </script>
@@ -183,7 +214,17 @@ export default {
   // left: 50%;
   // transform: translateX(-50%);
 }
-// .noItem {
+.noitem {
+  position: relative;
+  height: 100%;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
 
-// }
+  p {
+    font-size: 24px;
+    color: #ccc;
+  }
+}
 </style>
diff --git a/src/renderer/views/Setting.vue b/src/renderer/views/Setting.vue
@@ -13,18 +13,18 @@ div.scroll(:class="$style.setting")
     dd(title='弹出层的动画效果')
       h3 弹出层随机动画
       div
-        material-checkbox(id="setting_animate" v-model="current_setting.randomAnimate") 是否启用
+        material-checkbox(id="setting_animate" v-model="current_setting.randomAnimate" label="是否启用")
 
     dt 播放设置
     dd(title="都不选时播放完当前歌曲就停止播放")
       h3 歌曲切换方式
       div
-        material-checkbox(:id="`setting_player_togglePlay_${item.value}`" :class="$style.gap" :target="item.value" :key="item.value"
-            v-model="current_setting.player.togglePlayMethod" v-for="item in togglePlayMethods") {{item.name}}
+        material-checkbox(:id="`setting_player_togglePlay_${item.value}`" :class="$style.gap" :value="item.value" :key="item.value"
+            v-model="current_setting.player.togglePlayMethod" v-for="item in togglePlayMethods" :label="item.name")
     dd(title='启用时将优先播放320K品质的歌曲')
       h3 优先播放高品质音乐
       div
-        material-checkbox(id="setting_player_highQuality" v-model="current_setting.player.highQuality") 是否启用
+        material-checkbox(id="setting_player_highQuality" v-model="current_setting.player.highQuality" label="是否启用")
     dt 下载设置
     dd(title='下载歌曲保存的路径')
       h3 下载路径
@@ -37,13 +37,13 @@ div.scroll(:class="$style.setting")
     dd(title='下载歌曲时的命名方式')
       h3 文件命名方式
       div
-        material-checkbox(:id="`setting_download_musicName_${item.value}`" :class="$style.gap" name="setting_download_musicName" :target="item.value" :key="item.value" need
-            v-model="current_setting.download.fileName" v-for="item in musicNames") {{item.name}}
+        material-checkbox(:id="`setting_download_musicName_${item.value}`" :class="$style.gap" name="setting_download_musicName" :value="item.value" :key="item.value" need
+            v-model="current_setting.download.fileName" v-for="item in musicNames" :label="item.name")
     dt 列表设置
     dd(title='播放列表是否显示专辑栏')
       h3 专辑栏
       div
-        material-checkbox(id="setting_list_showalbum" v-model="current_setting.list.isShowAlbumName") 是否显示专辑栏
+        material-checkbox(id="setting_list_showalbum" v-model="current_setting.list.isShowAlbumName" label="是否显示专辑栏")
     dt 备份与恢复
     dd
       h3 部分数据