编辑器：素材选择弹窗添加全选功能；多选时用checkbox控件取代radio控件。

packages/qjkankan-editor/src/components/materialSelectorForEditor.vue

@@ -34,7 +34,11 @@
 
     <div class="table table-image" v-show="currentMaterialType === 'image'">
       <div class="table-head-row">
-        <span class="table-head">1</span>
+        <span class="table-head nothing" v-if="!isMultiSelection">1</span>
+        <span class="table-head select-all-checkbox-wrapper" v-if="isMultiSelection">
+          <div v-show="!isAllSelected" class="unchecked" @click="onSelectAll"></div>
+          <img v-show="isAllSelected" class="checked" @click="onUnselectAll" src="@/assets/images/icons/checkbox.png" />
+        </span>
         <span class="table-head" v-for="(item,i) in tableHeadersForImage" :key="i">{{item.name}}</span>
       </div>
       <div
@@ -48,17 +52,12 @@
           <!-- 如果已经上传成功 -->
           <template v-if="item.status === 'SUCCESS'">
             <span class="table-data">
-              <div class="checkbox">
-                <!-- 负责功能 -->
-                <input
-                  type="checkbox"
-                  @change="e => selectItem(item.successInfo, e)"
-                  :checked="select.some(i => i[primaryKey] === item.successInfo[primaryKey])"
-                >
-                <!-- 负责外观 -->
-                <span class="for-outer-circle"></span>
-                <span class="for-inner-circle"></span>
-              </div>
+              <RadioOrCheckbox
+                class="checkbox"
+                :isMultiSelection="isMultiSelection"
+                :isCheckedInitial="select.some(i => i[primaryKey] === item.successInfo[primaryKey])"
+                @change="v => selectItem(item.successInfo, v)"
+              />
             </span>
             <span class="table-data" v-for="(tableItemStructure, idx) in tableHeadersForImage" :key="idx">
               <div v-if="tableItemStructure.type=='image'" class="list-img">
@@ -105,17 +104,12 @@
         <!-- 本组件内的列表数据 -->
         <div class="table-body-row" v-for="(item,i) in imageList" :key="i">
           <span class="table-data">
-            <div class="checkbox">
-              <!-- 负责功能 -->
-              <input
-                type="checkbox"
-                @change="e => selectItem(item, e)"
-                :checked="select.some(i => i[primaryKey] === item[primaryKey])"
-              >
-              <!-- 负责外观 -->
-              <span class="for-outer-circle"></span>
-              <span class="for-inner-circle"></span>
-            </div>
+              <RadioOrCheckbox
+                class="checkbox"
+                :isMultiSelection="isMultiSelection"
+                :isCheckedInitial="select.some(i => i[primaryKey] === item[primaryKey])"
+                @change="v => selectItem(item, v)"
+              />
           </span>
           <span class="table-data" v-for="(sub,idx) in tableHeadersForImage" :key="idx">
             <div v-if="sub.type=='image'" class="list-img">
@@ -140,7 +134,11 @@
 
     <div class="table table-pano" v-show="currentMaterialType === 'pano'">
       <div class="table-head-row">
-        <span class="table-head">1</span>
+        <span class="table-head nothing" v-if="!isMultiSelection">1</span>
+        <span class="table-head select-all-checkbox-wrapper" v-if="isMultiSelection">
+          <div v-show="!isAllSelected" class="unchecked" @click="onSelectAll"></div>
+          <div v-show="isAllSelected" class="checked" @click="onUnselectAll"></div>
+        </span>
         <span class="table-head" v-for="(item,i) in tableHeadersForPano" :key="i">{{item.name}}</span>
       </div>
       <div
@@ -154,17 +152,12 @@
           <!-- 如果已经上传成功 -->
           <template v-if="item.status === 'SUCCESS'">
             <span class="table-data">
-              <div class="checkbox">
-                <!-- 负责功能 -->
-                <input
-                  type="checkbox"
-                  @change="e => selectItem(item.successInfo, e)"
-                  :checked="select.some(i => i[primaryKey] === item.successInfo[primaryKey])"
-                >
-                <!-- 负责外观 -->
-                <span class="for-outer-circle"></span>
-                <span class="for-inner-circle"></span>
-              </div>
+              <RadioOrCheckbox
+                class="checkbox"
+                :isMultiSelection="isMultiSelection"
+                :isCheckedInitial="select.some(i => i[primaryKey] === item.successInfo[primaryKey])"
+                @change="v => selectItem(item.successInfo, v)"
+              />
             </span>
             <span class="table-data" v-for="(tableItemStructure, idx) in tableHeadersForPano" :key="idx">
               <div v-if="tableItemStructure.type=='image'" class="list-img">
@@ -212,17 +205,12 @@
         <!-- 本组件内的列表数据 -->
         <div class="table-body-row" v-for="(item,i) in panoList" :key="i">
           <span class="table-data">
-            <div class="checkbox">
-              <!-- 负责功能 -->
-              <input
-                type="checkbox"
-                @change="e => selectItem(item, e)"
-                :checked="select.some(i => i[primaryKey] === item[primaryKey])"
-              >
-              <!-- 负责外观 -->
-              <span class="for-outer-circle"></span>
-              <span class="for-inner-circle"></span>
-            </div>
+            <RadioOrCheckbox
+                class="checkbox"
+                :isMultiSelection="isMultiSelection"
+                :isCheckedInitial="select.some(i => i[primaryKey] === item[primaryKey])"
+                @change="v => selectItem(item, v)"
+              />
           </span>
           <span class="table-data" v-for="(sub,idx) in tableHeadersForPano" :key="idx">
             <div v-if="sub.type=='image'" class="list-img">
@@ -247,7 +235,11 @@
 
     <div class="table table-audio" v-show="currentMaterialType === 'audio'">
       <div class="table-head-row">
-        <span class="table-head">1</span>
+        <span class="table-head nothing" v-if="!isMultiSelection">1</span>
+        <span class="table-head select-all-checkbox-wrapper" v-if="isMultiSelection">
+          <div v-show="!isAllSelected" class="unchecked" @click="onSelectAll"></div>
+          <div v-show="isAllSelected" class="checked" @click="onUnselectAll"></div>
+        </span>
         <span class="table-head" v-for="(item,i) in tableHeadersForAudio" :key="i">{{item.name}}</span>
       </div>
       <div
@@ -261,17 +253,12 @@
           <!-- 如果已经上传成功 -->
           <template v-if="item.status === 'SUCCESS'">
             <span class="table-data">
-              <div class="checkbox">
-                <!-- 负责功能 -->
-                <input
-                  type="checkbox"
-                  @change="e => selectItem(item.successInfo, e)"
-                  :checked="select.some(i => i[primaryKey] === item.successInfo[primaryKey])"
-                >
-                <!-- 负责外观 -->
-                <span class="for-outer-circle"></span>
-                <span class="for-inner-circle"></span>
-              </div>
+              <RadioOrCheckbox
+                class="checkbox"
+                :isMultiSelection="isMultiSelection"
+                :isCheckedInitial="select.some(i => i[primaryKey] === item.successInfo[primaryKey])"
+                @change="v => selectItem(item.successInfo, v)"
+              />
             </span>
             <span class="table-data" v-for="(tableItemStructure, idx) in tableHeadersForAudio" :key="idx">
               <div v-if="tableItemStructure.type=='audio'" class="list-img">
@@ -337,17 +324,12 @@
         <!-- 本组件内的列表数据 -->
         <div class="table-body-row" v-for="(item,i) in audioList" :key="i">
           <span class="table-data">
-            <div class="checkbox">
-              <!-- 负责功能 -->
-              <input
-                type="checkbox"
-                @change="e => selectItem(item, e)"
-                :checked="select.some(i => i[primaryKey] === item[primaryKey])"
-              >
-              <!-- 负责外观 -->
-              <span class="for-outer-circle"></span>
-              <span class="for-inner-circle"></span>
-            </div>
+            <RadioOrCheckbox
+                class="checkbox"
+                :isMultiSelection="isMultiSelection"
+                :isCheckedInitial="select.some(i => i[primaryKey] === item[primaryKey])"
+                @change="v => selectItem(item, v)"
+              />
           </span>
           <span class="table-data" v-for="(sub,idx) in tableHeadersForAudio" :key="idx">
             <div v-if="sub.type=='audio'" class="list-img">
@@ -383,7 +365,11 @@
 
     <div class="table table-video" v-show="currentMaterialType === 'video'">
       <div class="table-head-row">
-        <span class="table-head">1</span>
+        <span class="table-head nothing" v-if="!isMultiSelection">1</span>
+        <span class="table-head select-all-checkbox-wrapper" v-if="isMultiSelection">
+          <div v-show="!isAllSelected" class="unchecked" @click="onSelectAll"></div>
+          <div v-show="isAllSelected" class="checked" @click="onUnselectAll"></div>
+        </span>
         <span class="table-head" v-for="(item,i) in tableHeadersForVideo" :key="i">{{item.name}}</span>
       </div>
       <div
@@ -397,17 +383,12 @@
           <!-- 如果已经上传成功 -->
           <template v-if="item.status === 'SUCCESS'">
             <span class="table-data">
-              <div class="checkbox">
-                <!-- 负责功能 -->
-                <input
-                  type="checkbox"
-                  @change="e => selectItem(item.successInfo, e)"
-                  :checked="select.some(i => i[primaryKey] === item.successInfo[primaryKey])"
-                >
-                <!-- 负责外观 -->
-                <span class="for-outer-circle"></span>
-                <span class="for-inner-circle"></span>
-              </div>
+              <RadioOrCheckbox
+                class="checkbox"
+                :isMultiSelection="isMultiSelection"
+                :isCheckedInitial="select.some(i => i[primaryKey] === item.successInfo[primaryKey])"
+                @change="v => selectItem(item.successInfo, v)"
+              />
             </span>
             <span class="table-data" v-for="(tableItemStructure, idx) in tableHeadersForVideo" :key="idx">
               <div v-if="tableItemStructure.type=='image'" class="list-img">
@@ -465,17 +446,12 @@
         <!-- 本组件内的列表数据 -->
         <div class="table-body-row" v-for="(item,i) in videoList" :key="i">
           <span class="table-data">
-            <div class="checkbox">
-              <!-- 负责功能 -->
-              <input
-                type="checkbox"
-                @change="e => selectItem(item, e)"
-                :checked="select.some(i => i[primaryKey] === item[primaryKey])"
-              >
-              <!-- 负责外观 -->
-              <span class="for-outer-circle"></span>
-              <span class="for-inner-circle"></span>
-            </div>
+            <RadioOrCheckbox
+                class="checkbox"
+                :isMultiSelection="isMultiSelection"
+                :isCheckedInitial="select.some(i => i[primaryKey] === item[primaryKey])"
+                @change="v => selectItem(item, v)"
+              />
           </span>
           <span class="table-data" v-for="(sub,idx) in tableHeadersForVideo" :key="idx">
             <div v-if="sub.type=='image'" class="list-img">
@@ -501,7 +477,11 @@
 
     <div class="table table-3D" v-show="currentMaterialType === '3D'">
       <div class="table-head-row">
-        <span class="table-head">1</span>
+        <span class="table-head nothing" v-if="!isMultiSelection">1</span>
+        <span class="table-head select-all-checkbox-wrapper" v-if="isMultiSelection">
+          <div v-show="!isAllSelected" class="unchecked" @click="onSelectAll"></div>
+          <div v-show="isAllSelected" class="checked" @click="onUnselectAll"></div>
+        </span>
         <span class="table-head" v-for="(item,i) in tableHeadersFor3D" :key="i">{{item.name}}</span>
       </div>
       <div
@@ -512,17 +492,12 @@
       >
         <div class="table-body-row" v-for="(item,i) in scene3DList" :key="i">
           <span class="table-data">
-            <div class="checkbox">
-              <!-- 负责功能 -->
-              <input
-                type="checkbox"
-                @change="e => selectItem(item, e)"
-                :checked="select.some(i => i[primaryKey] === item[primaryKey])"
-              >
-              <!-- 负责外观 -->
-              <span class="for-outer-circle"></span>
-              <span class="for-inner-circle"></span>
-            </div>
+            <RadioOrCheckbox
+                class="checkbox"
+                :isMultiSelection="isMultiSelection"
+                :isCheckedInitial="select.some(i => i[primaryKey] === item[primaryKey])"
+                @change="v => selectItem(item, v)"
+              />
           </span>
           <span class="table-data" v-for="(sub,idx) in tableHeadersFor3D" :key="idx">
             <div v-if="sub.type=='image'" class="list-img">
@@ -593,6 +568,7 @@ import { debounce } from "@/utils/other.js"
 import FileInput from "@/components/shared/uploads/UploadMultiple.vue";
 import { mapState } from "vuex";
 import AudioIconCanPlay from "@/components/audio/indexForEditor.vue";
+import RadioOrCheckbox from "@/components/shared/RadioOrCheckbox.vue";
 
 export default {
   props:{
@@ -627,6 +603,7 @@ export default {
   components:{
     FileInput,
     AudioIconCanPlay,
+    RadioOrCheckbox
   },
   watch:{
     searchKey: {
@@ -824,6 +801,29 @@ export default {
         return item.status === 'LOADING' && item.ifKnowProgress === false
       })
     },
+    isAllSelected() {
+      let ret = false
+      switch (this.currentMaterialType) {
+        case 'image':
+          ret = this.select.length === this.imageListRealLength && this.select.length !== 0
+          break;
+        case 'pano':
+          ret = this.select.length === this.panoListRealLength && this.select.length !== 0
+          break;
+        case 'audio':
+          ret = this.select.length === this.audioListRealLength && this.select.length !== 0
+          break;
+        case 'video':
+          ret = this.select.length === this.videoListRealLength && this.select.length !== 0
+          break;
+        case '3D':
+          ret = this.select.length === this.scene3DList.length && this.select.length !== 0
+          break;
+        default:
+          break;
+      }
+      return ret
+    }
   },
   data () {
     return {
@@ -854,13 +854,13 @@ export default {
     }
   },
   methods: {
-    selectItem(item, e) {
+    selectItem(item, v) {
       item.materialType = this.currentMaterialType // 三维场景数据没有type字段来表明自己是三维场景。所以统一加一个字段。
       if (false) {
         // 对于图片，大于600kb的，压缩？
       } else {
         if (this.isMultiSelection) {
-          if (e.target.checked) {
+          if (v) {
             this.select.push(item)
           } else {
             const toDeleteIdx = this.select.findIndex((eachSelect) => {
@@ -871,7 +871,7 @@ export default {
             }
           }
         } else {
-          if (e.target.checked) {
+          if (v) {
             this.select = [item]
           } else {
             this.select = []
@@ -1441,6 +1441,61 @@ export default {
         );
       }
     },
+    onUnselectAll() {
+      this.select = []
+    },
+    onSelectAll() {
+      this.select = []
+      switch (this.currentMaterialType) {
+        case 'image':
+          for (const iterator of this.uploadStatusListImage) {
+            if (iterator.status === 'SUCCESS') {
+              this.select.push(iterator.successInfo)
+            }
+          }
+          for (const iterator of this.imageList) {
+            this.select.push(iterator)
+          }
+          break;
+        case 'pano':
+          for (const iterator of this.uploadStatusListPano) {
+            if (iterator.status === 'SUCCESS') {
+              this.select.push(iterator.successInfo)
+            }
+          }
+          for (const iterator of this.panoList) {
+            this.select.push(iterator)
+          }
+          break;
+        case 'audio':
+          for (const iterator of this.uploadStatusListAudio) {
+            if (iterator.status === 'SUCCESS') {
+              this.select.push(iterator.successInfo)
+            }
+          }
+          for (const iterator of this.audioList) {
+            this.select.push(iterator)
+          }
+          break;
+        case 'video':
+          for (const iterator of this.uploadStatusListVideo) {
+            if (iterator.status === 'SUCCESS') {
+              this.select.push(iterator.successInfo)
+            }
+          }
+          for (const iterator of this.videoList) {
+            this.select.push(iterator)
+          }
+          break;
+        case '3D':
+          for (const iterator of this.scene3DList) {
+            this.select.push(iterator)
+          }
+          break;
+        default:
+          break;
+      }
+    }
   },
   mounted() {
     console.log('tableHeadersForAudio: ', this.tableHeadersForAudio);
@@ -1650,7 +1705,26 @@ export default {
 .table-image .table-data {
   &:nth-of-type(1) {
     width: 50px;
-    color: transparent;
+    &.nothing {
+      color: transparent;
+    }
+    &.select-all-checkbox-wrapper {
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      .unchecked {
+        width: 16px;
+        height: 16px;
+        cursor: pointer;
+        border-radius: 2px;
+        border: 1px solid #404040;
+      }
+      .checked {
+        width: 16px;
+        height: 16px;
+        cursor: pointer;
+      }
+    }
   }
   &:nth-of-type(2) {
     width: calc(116px - 50px);
@@ -1671,7 +1745,26 @@ export default {
 .table-pano .table-data {
   &:nth-of-type(1) {
     width: 50px;
-    color: transparent;
+    &.nothing {
+      color: transparent;
+    }
+    &.select-all-checkbox-wrapper {
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      .unchecked {
+        width: 16px;
+        height: 16px;
+        cursor: pointer;
+        border-radius: 2px;
+        border: 1px solid #404040;
+      }
+      .checked {
+        width: 16px;
+        height: 16px;
+        cursor: pointer;
+      }
+    }
   }
   &:nth-of-type(2) {
     width: calc(116px - 50px);
@@ -1689,7 +1782,26 @@ export default {
 .table-audio .table-data {
   &:nth-of-type(1) {
     width: 50px;
-    color: transparent;
+    &.nothing {
+      color: transparent;
+    }
+    &.select-all-checkbox-wrapper {
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      .unchecked {
+        width: 16px;
+        height: 16px;
+        cursor: pointer;
+        border-radius: 2px;
+        border: 1px solid #404040;
+      }
+      .checked {
+        width: 16px;
+        height: 16px;
+        cursor: pointer;
+      }
+    }
   }
   &:nth-of-type(2) {
     width: calc(116px - 50px);
@@ -1707,7 +1819,26 @@ export default {
 .table-video .table-data {
   &:nth-of-type(1) {
     width: 50px;
-    color: transparent;
+    &.nothing {
+      color: transparent;
+    }
+    &.select-all-checkbox-wrapper {
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      .unchecked {
+        width: 16px;
+        height: 16px;
+        cursor: pointer;
+        border-radius: 2px;
+        border: 1px solid #404040;
+      }
+      .checked {
+        width: 16px;
+        height: 16px;
+        cursor: pointer;
+      }
+    }
   }
   &:nth-of-type(2) {
     width: calc(116px - 50px);
@@ -1725,7 +1856,26 @@ export default {
 .table-3D .table-data {
   &:nth-of-type(1) {
     width: 50px;
-    color: transparent;
+    &.nothing {
+      color: transparent;
+    }
+    &.select-all-checkbox-wrapper {
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      .unchecked {
+        width: 16px;
+        height: 16px;
+        cursor: pointer;
+        border-radius: 2px;
+        border: 1px solid #404040;
+      }
+      .checked {
+        width: 16px;
+        height: 16px;
+        cursor: pointer;
+      }
+    }
   }
   &:nth-of-type(2) {
     width: calc(116px - 50px);
@@ -1740,65 +1890,10 @@ export default {
 }
 
 .checkbox {
-  position: relative;
   width: 100%;
   height: 100%;
-  input {
-    width: 20px;
-    height: 20px;
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    cursor: pointer;
-    opacity: 0;
-  }
-  .for-outer-circle {
-    width: 16px;
-    height: 16px;
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    border-radius: 50%;
-    border: 1px solid #404040;
-    pointer-events: none;
-  }
-  .for-inner-circle {
-    width: 8px;
-    height: 8px;
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    border-radius: 50%;
-    background: #0076F6;
-    pointer-events: none;
-    opacity: 0;
-    &.disabled {
-      width: 14px;
-      height: 14px;
-      background: rgba(255, 255, 255, 0.0800);
-      opacity: 1;
-    }
-  }
 }
 
-.checkbox > input:checked ~ .for-outer-circle {
-  border: 1px solid #0076F6;
-}
-
-.checkbox > input:checked ~ .for-inner-circle {
-  opacity: 1;
-}
-
-.checkbox > input:disabled {
-  cursor: not-allowed;
-}
-
-// .checkbox > input:disabled + span {
-// }
-
 .btns {
   display: flex;
   justify-content: space-between;

packages/qjkankan-editor/src/components/shared/RadioOrCheckbox.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="radio-or-checkbox-wrap">
+    <div
+      v-if="!isMultiSelection"
+      class="radio-wrapper"
+      :class="{
+        'is-checked': isChecked,
+        disabled: isDisabled,
+      }"
+      @click="onClick"
+    >
+      <span class="for-outer-circle" :class="{disabled: isDisabled,}"></span>
+      <span class="for-inner-circle" :class="{disabled: isDisabled,}"></span>
+    </div>
+    <div v-if="isMultiSelection" class="checkbox-wrapper" @click="onClick">
+      <div v-show="!isChecked" class="unchecked" :class="{disabled: isDisabled,}"></div>
+      <img v-show="isChecked" class="checked" src="@/assets/images/icons/checkbox.png" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    isMultiSelection: {
+      type: Boolean,
+      default: false,
+    },
+    isCheckedInitial: {
+      type: Boolean,
+      default: false,
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false,
+    }
+  },
+  data() {
+    return {
+      isChecked: this.isCheckedInitial,
+    }
+  },
+  watch: {
+    isCheckedInitial: {
+      handler(vNew) {
+        this.isChecked = vNew
+      }
+    }
+  },
+  methods: {
+    onClick() {
+      this.isChecked = !this.isChecked
+      this.$emit('change', this.isChecked)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.radio-or-checkbox-wrap {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  > .radio-wrapper {
+    position: relative;
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    &.disabled {
+      cursor: not-allowed;
+    }
+    > .for-outer-circle {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      border-radius: 50%;
+      border: 1px solid #404040;
+    }
+    > .for-inner-circle {
+      width: 8px;
+      height: 8px;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      border-radius: 50%;
+      background: #0076F6;
+      opacity: 0;
+      &.disabled {
+        width: 14px;
+        height: 14px;
+        background: rgba(255, 255, 255, 0.0800);
+        opacity: 1;
+      }
+    }
+    &.is-checked {
+      > .for-outer-circle {
+        border: 1px solid #0076F6;
+      }
+      > .for-inner-circle {
+        opacity: 1;
+      }
+    }
+  }
+  > .checkbox-wrapper {
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    position: relative;
+    &.disabled {
+      background: rgba(255, 255, 255, 0.0800);
+      cursor: not-allowed;
+    }
+    > .unchecked {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      border-radius: 2px;
+      border: 1px solid #404040;
+    }
+    > .checked {
+      position: absolute;
+      width: 16px;
+      height: 16px;
+    }
+  }
+}
+</style>

packages/qjkankan-editor/src/views/base/openingTipSettings.vue

@@ -45,6 +45,7 @@
     <div class="dialog" style="z-index: 2000" v-if="isShowSelectionWindow">
       <MaterialSelectorForEditor
         title="选择素材"
+        :isMultiSelection="false"
         @cancle="isShowSelectionWindow = false"
         @submit="handleSubmitFromMaterialSelector"
         :selectableType="['image']"