素材选择框：点击行内任意地方均可选中该元素

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

@@ -48,7 +48,7 @@
         :infinite-scroll-disabled="!hasMoreImageData || isRequestingMoreImageData"
       >
         <!-- vuex中的上传中数据 -->
-        <div class="table-body-row" v-for="(item, i) in uploadStatusListImage" :key="item.uid">
+        <div class="table-body-row" v-for="(item, i) in uploadStatusListImage" :key="item.uid" @click="onClickRow">
           <!-- 如果已经上传成功 -->
           <template v-if="item.status === 'SUCCESS'">
             <span class="table-data">
@@ -57,6 +57,7 @@
                 :isMultiSelection="isMultiSelection"
                 :isCheckedInitial="select.some(i => i[primaryKey] === item.successInfo[primaryKey])"
                 @change="v => selectItem(item.successInfo, v)"
+                @click.native.stop
               />
             </span>
             <span class="table-data" v-for="(tableItemStructure, idx) in tableHeadersForImage" :key="idx">
@@ -102,13 +103,14 @@
           </template>
         </div>
         <!-- 本组件内的列表数据 -->
-        <div class="table-body-row" v-for="(item,i) in imageList" :key="i">
+        <div class="table-body-row" v-for="(item,i) in imageList" :key="i" @click="onClickRow">
           <span class="table-data">
               <RadioOrCheckbox
                 class="checkbox"
                 :isMultiSelection="isMultiSelection"
                 :isCheckedInitial="select.some(i => i[primaryKey] === item[primaryKey])"
                 @change="v => selectItem(item, v)"
+                @click.native.stop
               />
           </span>
           <span class="table-data" v-for="(sub,idx) in tableHeadersForImage" :key="idx">
@@ -148,7 +150,7 @@
         :infinite-scroll-disabled="!hasMorePanoData || isRequestingMorePanoData"
       >
         <!-- vuex中的上传中数据 -->
-        <div class="table-body-row" v-for="(item, i) in uploadStatusListPano" :key="item.uid">
+        <div class="table-body-row" v-for="(item, i) in uploadStatusListPano" :key="item.uid" @click="onClickRow">
           <!-- 如果已经上传成功 -->
           <template v-if="item.status === 'SUCCESS'">
             <span class="table-data">
@@ -157,6 +159,7 @@
                 :isMultiSelection="isMultiSelection"
                 :isCheckedInitial="select.some(i => i[primaryKey] === item.successInfo[primaryKey])"
                 @change="v => selectItem(item.successInfo, v)"
+                @click.native.stop
               />
             </span>
             <span class="table-data" v-for="(tableItemStructure, idx) in tableHeadersForPano" :key="idx">
@@ -203,13 +206,14 @@
           </template>
         </div>
         <!-- 本组件内的列表数据 -->
-        <div class="table-body-row" v-for="(item,i) in panoList" :key="i">
+        <div class="table-body-row" v-for="(item,i) in panoList" :key="i" @click="onClickRow">
           <span class="table-data">
             <RadioOrCheckbox
                 class="checkbox"
                 :isMultiSelection="isMultiSelection"
                 :isCheckedInitial="select.some(i => i[primaryKey] === item[primaryKey])"
                 @change="v => selectItem(item, v)"
+                @click.native.stop
               />
           </span>
           <span class="table-data" v-for="(sub,idx) in tableHeadersForPano" :key="idx">
@@ -249,7 +253,7 @@
         :infinite-scroll-disabled="!hasMoreAudioData || isRequestingMoreAudioData"
       >
         <!-- vuex中的上传中数据 -->
-        <div class="table-body-row" v-for="(item, i) in uploadStatusListAudio" :key="item.uid">
+        <div class="table-body-row" v-for="(item, i) in uploadStatusListAudio" :key="item.uid" @click="onClickRow">
           <!-- 如果已经上传成功 -->
           <template v-if="item.status === 'SUCCESS'">
             <span class="table-data">
@@ -258,6 +262,7 @@
                 :isMultiSelection="isMultiSelection"
                 :isCheckedInitial="select.some(i => i[primaryKey] === item.successInfo[primaryKey])"
                 @change="v => selectItem(item.successInfo, v)"
+                @click.native.stop
               />
             </span>
             <span class="table-data" v-for="(tableItemStructure, idx) in tableHeadersForAudio" :key="idx">
@@ -268,6 +273,7 @@
                   alt=""
                 > -->
                 <AudioIconCanPlay
+                  @click.native.stop
                   class="audio-player"
                   :vKey="item.successInfo.id"
                   :idleft="`_${$randomWord(true, 8, 8)}`"
@@ -322,14 +328,15 @@
           </template>
         </div>
         <!-- 本组件内的列表数据 -->
-        <div class="table-body-row" v-for="(item,i) in audioList" :key="i">
+        <div class="table-body-row" v-for="(item,i) in audioList" :key="i" @click="onClickRow">
           <span class="table-data">
             <RadioOrCheckbox
-                class="checkbox"
-                :isMultiSelection="isMultiSelection"
-                :isCheckedInitial="select.some(i => i[primaryKey] === item[primaryKey])"
-                @change="v => selectItem(item, v)"
-              />
+              class="checkbox"
+              :isMultiSelection="isMultiSelection"
+              :isCheckedInitial="select.some(i => i[primaryKey] === item[primaryKey])"
+              @change="v => selectItem(item, v)"
+              @click.native.stop
+            />
           </span>
           <span class="table-data" v-for="(sub,idx) in tableHeadersForAudio" :key="idx">
             <div v-if="sub.type=='audio'" class="list-img">
@@ -339,6 +346,7 @@
                 alt=""
               > -->
               <AudioIconCanPlay
+                @click.native.stop
                 class="audio-player"
                 :vKey="item.id"
                 :idleft="`_${$randomWord(true, 8, 8)}`"
@@ -379,7 +387,7 @@
         :infinite-scroll-disabled="!hasMoreVideoData || isRequestingMoreVideoData"
       >
         <!-- vuex中的上传中数据 -->
-        <div class="table-body-row" v-for="(item, i) in uploadStatusListVideo" :key="item.uid">
+        <div class="table-body-row" v-for="(item, i) in uploadStatusListVideo" :key="item.uid" @click="onClickRow">
           <!-- 如果已经上传成功 -->
           <template v-if="item.status === 'SUCCESS'">
             <span class="table-data">
@@ -388,6 +396,7 @@
                 :isMultiSelection="isMultiSelection"
                 :isCheckedInitial="select.some(i => i[primaryKey] === item.successInfo[primaryKey])"
                 @change="v => selectItem(item.successInfo, v)"
+                @click.native.stop
               />
             </span>
             <span class="table-data" v-for="(tableItemStructure, idx) in tableHeadersForVideo" :key="idx">
@@ -444,14 +453,15 @@
           </template>
         </div>
         <!-- 本组件内的列表数据 -->
-        <div class="table-body-row" v-for="(item,i) in videoList" :key="i">
+        <div class="table-body-row" v-for="(item,i) in videoList" :key="i" @click="onClickRow">
           <span class="table-data">
             <RadioOrCheckbox
-                class="checkbox"
-                :isMultiSelection="isMultiSelection"
-                :isCheckedInitial="select.some(i => i[primaryKey] === item[primaryKey])"
-                @change="v => selectItem(item, v)"
-              />
+              class="checkbox"
+              :isMultiSelection="isMultiSelection"
+              :isCheckedInitial="select.some(i => i[primaryKey] === item[primaryKey])"
+              @change="v => selectItem(item, v)"
+              @click.native.stop
+            />
           </span>
           <span class="table-data" v-for="(sub,idx) in tableHeadersForVideo" :key="idx">
             <div v-if="sub.type=='image'" class="list-img">
@@ -490,14 +500,15 @@
         v-infinite-scroll="requestMorePanoData"
         :infinite-scroll-disabled="!hasMore3DData || isRequestingMore3DData"
       >
-        <div class="table-body-row" v-for="(item,i) in scene3DList" :key="i">
+        <div class="table-body-row" v-for="(item,i) in scene3DList" :key="i" @click="onClickRow">
           <span class="table-data">
             <RadioOrCheckbox
-                class="checkbox"
-                :isMultiSelection="isMultiSelection"
-                :isCheckedInitial="select.some(i => i[primaryKey] === item[primaryKey])"
-                @change="v => selectItem(item, v)"
-              />
+              class="checkbox"
+              :isMultiSelection="isMultiSelection"
+              :isCheckedInitial="select.some(i => i[primaryKey] === item[primaryKey])"
+              @change="v => selectItem(item, v)"
+              @click.native.stop
+            />
           </span>
           <span class="table-data" v-for="(sub,idx) in tableHeadersFor3D" :key="idx">
             <div v-if="sub.type=='image'" class="list-img">
@@ -1499,7 +1510,13 @@ export default {
         default:
           break;
       }
-    }
+    },
+    onClickRow(e) {
+      const checkboxNodeList = e.currentTarget.getElementsByClassName('selection-click-target')
+      if (checkboxNodeList && checkboxNodeList[0]) {
+        checkboxNodeList[0].click()
+      }
+    },
   },
   mounted() {
     console.log('tableHeadersForAudio: ', this.tableHeadersForAudio);
@@ -1656,6 +1673,7 @@ export default {
       border-bottom: 1px solid #404040;
       display: flex;
       align-items: center;
+      cursor: pointer;
       > .table-data {
         font-size:14px;
         line-height:50px;

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

@@ -57,112 +57,6 @@
       <i v-if="searchKey" @click="searchKey=''" class="iconfont icontoast_red clear-icon"></i>
     </div>
 
-    <div class="table table-image" v-show="currentMaterialType === 'image'">
-      <div class="table-head-row">
-        <span class="table-head">1</span>
-        <span class="table-head" v-for="(item,i) in tableHeadersForImage" :key="i">{{item.name}}</span>
-      </div>
-      <div
-        v-if="imageListRealLength !== 0 || hasMoreImageData"
-        class="table-body"
-        v-infinite-scroll="requestMoreImageData"
-        :infinite-scroll-disabled="!hasMoreImageData || isRequestingMoreImageData"
-      >
-        <!-- vuex中的上传中数据 -->
-        <div class="table-body-row" v-for="(item, i) in uploadStatusListImage" :key="item.uid">
-          <!-- 如果已经上传成功 -->
-          <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>
-            </span>
-            <span class="table-data" v-for="(tableItemStructure, idx) in tableHeadersForImage" :key="idx">
-              <div v-if="tableItemStructure.type=='image'" class="list-img">
-                <img :src="item.successInfo[tableItemStructure.key] + `?x-oss-process=image/resize,p_20&${Math.random()}`" alt="">
-              </div>
-              <span  v-else class="ellipsis" v-title="tableItemStructure.key === 'name' ? item.successInfo[tableItemStructure.key] : ''">{{ item.successInfo[tableItemStructure.key] }}</span>
-            </span>
-          </template>
-          <!-- 如果还在上传中 -->
-          <template v-else-if="item.status = 'LOADING'">
-            <span class="table-data">
-              <div class="checkbox">
-                <span class="for-outer-circle"></span>
-                <span class="for-inner-circle disabled"></span>
-              </div>
-            </span>
-            <span class="table-data" v-for="(tableItemStructure, idx) in tableHeadersForImage" :key="idx">
-              <div v-if="tableItemStructure.type=='image'" class="list-img">
-                <img src="@/assets/images/icons/upload-file-type-icon-image@2x.png" alt="">
-              </div>
-              <span  v-if="tableItemStructure.key !== 'name' && tableItemStructure.key !== 'dpi'"></span>
-              <span  v-if="tableItemStructure.key === 'dpi'">上传素材 {{Math.round(item.progress * 100)}}%</span>
-              <span  v-if="tableItemStructure.key === 'name'" class="ellipsis" v-title="tableItemStructure.key === 'name' ? item.title : ''">{{ item.title }}</span>
-            </span>
-          </template>
-          <!-- 如果上传失败了 -->
-          <template v-else-if="item.status = 'FAIL'">
-            <span class="table-data">
-              <div class="checkbox">
-                <span class="for-outer-circle"></span>
-                <span class="for-inner-circle disabled"></span>
-              </div>
-            </span>
-            <span class="table-data" v-for="(tableItemStructure, idx) in tableHeadersForImage" :key="idx">
-              <div v-if="tableItemStructure.type=='image'" class="list-img">
-                <img src="@/assets/images/icons/upload-file-type-icon-image@2x.png" alt="">
-              </div>
-              <span  v-if="tableItemStructure.key !== 'name' && tableItemStructure.key !== 'dpi'"></span>
-              <span  v-if="tableItemStructure.key === 'dpi'">上传失败</span>
-              <span  v-if="tableItemStructure.key === 'name'" class="ellipsis" v-title="tableItemStructure.key === 'name' ? item.title : ''">{{ item.title }}</span>
-            </span>
-          </template>
-        </div>
-        <!-- 本组件内的列表数据 -->
-        <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>
-          </span>
-          <span class="table-data" v-for="(sub,idx) in tableHeadersForImage" :key="idx">
-            <div v-if="sub.type=='image'" class="list-img">
-              <img :src="item[sub.key] + `?x-oss-process=image/resize,p_20&${Math.random()}`" alt="">
-            </div>
-            <span class="ellipsis" v-else v-title="sub.key === 'name' ? item[sub.key] : ''">{{ item[sub.key] }}</span>
-          </span>
-        </div>
-      </div>
-      <!-- 无数据时的提示 -->
-      <div v-else class="no-data">
-        <div v-if="latestUsedSearchKey">
-          <img :src="require('@/assets/images/default/empty_04_search.png')" alt="">
-          <span>{{'未搜索到结果~'}}</span>
-        </div>
-        <div v-if="!latestUsedSearchKey">
-          <img :src="require('@/assets/images/default/empty_04.png')" alt="">
-          <span>{{'暂无素材~'}}</span>
-        </div>
-      </div>
-    </div>
-
     <div class="table table-pano" v-show="currentMaterialType === 'pano'">
       <div class="table-head-row">
         <span class="table-head">1</span>
@@ -175,21 +69,18 @@
         :infinite-scroll-disabled="!hasMorePanoData || isRequestingMorePanoData"
       >
         <!-- vuex中的上传中数据 -->
-        <div class="table-body-row" v-for="(item, i) in uploadStatusListPano" :key="item.uid">
+        <div class="table-body-row" v-for="(item, i) in uploadStatusListPano" :key="item.uid" @click="onClickRow">
           <!-- 如果已经上传成功 -->
           <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"
+                :isLightTheme="true"
+                :isMultiSelection="isMultiSelection"
+                :isCheckedInitial="select.some(i => i[primaryKey] === item.successInfo[primaryKey])"
+                @change="v => selectItem(item.successInfo, v)"
+                @click.native.stop
+              />
             </span>
             <span class="table-data" v-for="(tableItemStructure, idx) in tableHeadersForPano" :key="idx">
               <div v-if="tableItemStructure.type=='image'" class="list-img">
@@ -235,19 +126,16 @@
           </template>
         </div>
         <!-- 本组件内的列表数据 -->
-        <div class="table-body-row" v-for="(item,i) in panoList" :key="i">
+        <div class="table-body-row" v-for="(item,i) in panoList" :key="i" @click="onClickRow">
           <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"
+              :isLightTheme="true"
+              :isMultiSelection="isMultiSelection"
+              :isCheckedInitial="select.some(i => i[primaryKey] === item[primaryKey])"
+              @change="v => selectItem(item, v)"
+              @click.native.stop
+            />
           </span>
           <span class="table-data" v-for="(sub,idx) in tableHeadersForPano" :key="idx">
             <div v-if="sub.type=='image'" class="list-img">
@@ -270,260 +158,6 @@
       </div>
     </div>
 
-    <div class="table table-audio" v-show="currentMaterialType === 'audio'">
-      <div class="table-head-row">
-        <span class="table-head">1</span>
-        <span class="table-head" v-for="(item,i) in tableHeadersForAudio" :key="i">{{item.name}}</span>
-      </div>
-      <div
-        v-if="audioListRealLength !== 0 || hasMoreAudioData"
-        class="table-body"
-        v-infinite-scroll="requestMoreAudioData"
-        :infinite-scroll-disabled="!hasMoreAudioData || isRequestingMoreAudioData"
-      >
-        <!-- vuex中的上传中数据 -->
-        <div class="table-body-row" v-for="(item, i) in uploadStatusListAudio" :key="item.uid">
-          <!-- 如果已经上传成功 -->
-          <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>
-            </span>
-            <span class="table-data" v-for="(tableItemStructure, idx) in tableHeadersForAudio" :key="idx">
-              <div v-if="tableItemStructure.type=='audio'" class="list-img">
-                <!-- <img
-                  :src="require('@/assets/images/icons/upload-file-type-icon-audio@2x.png')"
-                  style="object-fit: contain;"
-                  alt=""
-                > -->
-                <AudioIconCanPlay
-                  class="icon"
-                  :vKey="item.successInfo.id"
-                  :idleft="`_${$randomWord(true, 8, 8)}`"
-                  :idright="`_${$randomWord(true, 8, 8)}`"
-                  :myAudioUrl="item.successInfo.ossPath"
-                ></AudioIconCanPlay>
-              </div>
-              <span  v-else class="ellipsis" v-title="tableItemStructure.key === 'name' ? item.successInfo[tableItemStructure.key] : ''">{{ item.successInfo[tableItemStructure.key] }}</span>
-            </span>
-          </template>
-          <!-- 如果还在上传中 -->
-          <template v-else-if="item.status = 'LOADING'">
-            <span class="table-data">
-              <div class="checkbox">
-                <span class="for-outer-circle"></span>
-                <span class="for-inner-circle disabled"></span>
-              </div>
-            </span>
-            <span class="table-data" v-for="(tableItemStructure, idx) in tableHeadersForAudio" :key="idx">
-              <div v-if="tableItemStructure.type=='audio'" class="list-img">
-                <img
-                  :src="require('@/assets/images/icons/upload-file-type-icon-audio@2x.png')"
-                  style="object-fit: contain;"
-                  alt=""
-                >
-              </div>
-              <span  v-if="tableItemStructure.key !== 'name' && tableItemStructure.key !== 'fileSize'"></span>
-              <span  v-if="tableItemStructure.key === 'fileSize'">上传素材 {{Math.round(item.progress * 100)}}%</span>
-              <span  v-if="tableItemStructure.key === 'name'" class="ellipsis" v-title="tableItemStructure.key === 'name' ? item.title : ''">{{ item.title }}</span>
-            </span>
-          </template>
-          <!-- 如果上传失败了 -->
-          <template v-else-if="item.status = 'FAIL'">
-            <span class="table-data">
-              <div class="checkbox">
-                <span class="for-outer-circle"></span>
-                <span class="for-inner-circle disabled"></span>
-              </div>
-            </span>
-            <span class="table-data" v-for="(tableItemStructure, idx) in tableHeadersForImage" :key="idx">
-              <div v-if="tableItemStructure.type=='audio'" class="list-img">
-                <img
-                  :src="require('@/assets/images/icons/upload-file-type-icon-audio@2x.png')"
-                  style="object-fit: contain;"
-                  alt=""
-                >
-              </div>
-              <span  v-if="tableItemStructure.key !== 'name' && tableItemStructure.key !== 'fileSize'"></span>
-              <span  v-if="tableItemStructure.key === 'fileSize'">上传失败</span>
-              <span  v-if="tableItemStructure.key === 'name'" class="ellipsis" v-title="tableItemStructure.key === 'name' ? item.title : ''">{{ item.title }}</span>
-            </span>
-          </template>
-        </div>
-        <!-- 本组件内的列表数据 -->
-        <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>
-          </span>
-          <span class="table-data" v-for="(sub,idx) in tableHeadersForAudio" :key="idx">
-            <div v-if="sub.type=='audio'" class="list-img">
-              <!-- <img
-                :src="require('@/assets/images/icons/upload-file-type-icon-audio@2x.png')"
-                style="object-fit: contain;"
-                alt=""
-              > -->
-              <AudioIconCanPlay
-                class="audio-player"
-                :vKey="item.id"
-                :idleft="`_${$randomWord(true, 8, 8)}`"
-                :idright="`_${$randomWord(true, 8, 8)}`"
-                :myAudioUrl="item.ossPath"
-              ></AudioIconCanPlay>
-            </div>
-            <span class="ellipsis" v-else v-title="sub.key === 'name' ? item[sub.key] : ''">{{item[sub.key]}}</span>
-          </span>
-        </div>
-      </div>
-      <!-- 无数据时的提示 -->
-      <div v-if="audioList.length === 0 && !hasMoreAudioData" class="no-data">
-        <div v-if="latestUsedSearchKey">
-          <img :src="require('@/assets/images/default/empty_04_search.png')" alt="">
-          <span>{{'未搜索到结果~'}}</span>
-        </div>
-        <div v-if="!latestUsedSearchKey">
-          <img :src="require('@/assets/images/default/empty_04.png')" alt="">
-          <span>{{'暂无素材~'}}</span>
-        </div>
-      </div>
-    </div>
-
-    <div class="table table-video" v-show="currentMaterialType === 'video'">
-      <div class="table-head-row">
-        <span class="table-head">1</span>
-        <span class="table-head" v-for="(item,i) in tableHeadersForVideo" :key="i">{{item.name}}</span>
-      </div>
-      <div
-        v-if="videoListRealLength !== 0 || hasMoreVideoData"
-        class="table-body"
-        v-infinite-scroll="requestMoreVideoData"
-        :infinite-scroll-disabled="!hasMoreVideoData || isRequestingMoreVideoData"
-      >
-        <!-- vuex中的上传中数据 -->
-        <div class="table-body-row" v-for="(item, i) in uploadStatusListVideo" :key="item.uid">
-          <!-- 如果已经上传成功 -->
-          <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>
-            </span>
-            <span class="table-data" v-for="(tableItemStructure, idx) in tableHeadersForVideo" :key="idx">
-              <div v-if="tableItemStructure.type=='image'" class="list-img">
-                <img
-                  :src="item.successInfo[tableItemStructure.key]"
-                  alt=""
-                >
-              </div>
-              <span  v-else class="ellipsis" v-title="tableItemStructure.key === 'name' ? item.successInfo[tableItemStructure.key] : ''">{{ item.successInfo[tableItemStructure.key] }}</span>
-            </span>
-          </template>
-          <!-- 如果还在上传中 -->
-          <template v-else-if="item.status = 'LOADING'">
-            <span class="table-data">
-              <div class="checkbox">
-                <span class="for-outer-circle"></span>
-                <span class="for-inner-circle disabled"></span>
-              </div>
-            </span>
-            <span class="table-data" v-for="(tableItemStructure, idx) in tableHeadersForVideo" :key="idx">
-              <div v-if="tableItemStructure.type=='image'" class="list-img">
-                <img
-                  :src="require('@/assets/images/icons/upload-file-type-icon-video@2x.png')"
-                  style="object-fit: contain;"
-                  alt=""
-                >
-              </div>
-              <span  v-if="tableItemStructure.key !== 'name' && tableItemStructure.key !== 'fileSize'"></span>
-              <span  v-if="tableItemStructure.key === 'fileSize'">上传素材 {{Math.round(item.progress * 100)}}%</span>
-              <span  v-if="tableItemStructure.key === 'name'" class="ellipsis" v-title="tableItemStructure.key === 'name' ? item.title : ''">{{ item.title }}</span>
-            </span>
-          </template>
-          <!-- 如果上传失败了 -->
-          <template v-else-if="item.status = 'FAIL'">
-            <span class="table-data">
-              <div class="checkbox">
-                <span class="for-outer-circle"></span>
-                <span class="for-inner-circle disabled"></span>
-              </div>
-            </span>
-            <span class="table-data" v-for="(tableItemStructure, idx) in tableHeadersForImage" :key="idx">
-              <div v-if="tableItemStructure.type=='image'" class="list-img">
-                <img
-                  :src="require('@/assets/images/icons/upload-file-type-icon-video@2x.png')"
-                  style="object-fit: contain;"
-                  alt=""
-                >
-              </div>
-              <span  v-if="tableItemStructure.key !== 'name' && tableItemStructure.key !== 'fileSize'"></span>
-              <span  v-if="tableItemStructure.key === 'fileSize'">上传失败</span>
-              <span  v-if="tableItemStructure.key === 'name'" class="ellipsis" v-title="tableItemStructure.key === 'name' ? item.title : ''">{{ item.title }}</span>
-            </span>
-          </template>
-        </div>
-        <!-- 本组件内的列表数据 -->
-        <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>
-          </span>
-          <span class="table-data" v-for="(sub,idx) in tableHeadersForVideo" :key="idx">
-            <div v-if="sub.type=='image'" class="list-img">
-              <img :src="item[sub.key]" alt="">
-            </div>
-            <span class="ellipsis" v-else v-title="sub.key === 'name' ? item[sub.key] : ''">{{item[sub.key]}}</span>
-          </span>
-        </div>
-      </div>
-
-      <!-- 无数据时的提示 -->
-      <div v-if="videoList.length === 0 && !hasMoreVideoData" class="no-data">
-        <div v-if="latestUsedSearchKey">
-          <img :src="require('@/assets/images/default/empty_04_search.png')" alt="">
-          <span>{{'未搜索到结果~'}}</span>
-        </div>
-        <div v-if="!latestUsedSearchKey">
-          <img :src="require('@/assets/images/default/empty_04.png')" alt="">
-          <span>{{'暂无素材~'}}</span>
-        </div>
-      </div>
-    </div>
-
     <div class="table table-3D" v-show="currentMaterialType === '3D'">
       <div class="table-head-row">
         <span class="table-head">1</span>
@@ -537,17 +171,14 @@
       >
         <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"
+              :isLightTheme="true"
+              :isMultiSelection="isMultiSelection"
+              :isCheckedInitial="select.some(i => i[primaryKey] === item[primaryKey])"
+              @change="v => selectItem(item, v)"
+              @click.native.stop
+            />
           </span>
           <span class="table-data" v-for="(sub,idx) in tableHeadersFor3D" :key="idx">
             <div v-if="sub.type=='image'" class="list-img">
@@ -618,7 +249,8 @@ import config from "@/config";
 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 AudioIconCanPlay from "@/components/audio/indexForEditor.vue";
+import RadioOrCheckbox from "@/components/shared/RadioOrCheckbox.vue";
 
 export default {
   props:{
@@ -656,7 +288,8 @@ export default {
   },
   components:{
     FileInput,
-    AudioIconCanPlay,
+    // AudioIconCanPlay,
+    RadioOrCheckbox,
   },
   watch:{
     searchKey: {
@@ -887,14 +520,13 @@ export default {
     ...mapMutations([
       'clearUploadStatusLists',
     ]),
-    selectItem(item, e) {
-      console.log(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) => {
@@ -905,7 +537,7 @@ export default {
             }
           }
         } else {
-          if (e.target.checked) {
+          if (v) {
             this.select = [item]
           } else {
             this.select = []
@@ -1476,6 +1108,12 @@ export default {
         );
       }
     },
+    onClickRow(e) {
+      const checkboxNodeList = e.currentTarget.getElementsByClassName('selection-click-target')
+      if (checkboxNodeList && checkboxNodeList[0]) {
+        checkboxNodeList[0].click()
+      }
+    },
   },
   mounted() {
     console.log('tableHeadersForAudio: ', this.tableHeadersForAudio);
@@ -1635,6 +1273,7 @@ export default {
       border-bottom: 1px solid #EBEDF0;
       display: flex;
       align-items: center;
+      cursor: pointer;
       > .table-data {
         font-size:14px;
         line-height:50px;
@@ -1779,65 +1418,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 #D5D8DE;
-    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

@@ -1,8 +1,13 @@
 <template>
-  <div class="radio-or-checkbox-wrap">
+  <div
+    class="radio-or-checkbox-wrap"
+    :class="{
+      'light-theme': isLightTheme,
+    }"
+  >
     <div
       v-if="!isMultiSelection"
-      class="radio-wrapper"
+      class="radio-wrapper selection-click-target"
       :class="{
         'is-checked': isChecked,
         disabled: isDisabled,
@@ -12,7 +17,11 @@
       <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-if="isMultiSelection"
+      class="checkbox-wrapper selection-click-target"
+      @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>
@@ -33,6 +42,10 @@ export default {
     isDisabled: {
       type: Boolean,
       default: false,
+    },
+    isLightTheme: {
+      type: Boolean,
+      default: false,
     }
   },
   data() {
@@ -130,4 +143,18 @@ export default {
     }
   }
 }
+
+.light-theme {
+  > .checkbox-wrapper {
+    &.disabled {
+      background: rgba(255, 255, 255, 0.0800);
+      cursor: not-allowed;
+    }
+    > .unchecked {
+      border: 1px solid #EBEDF0;
+    }
+    > .checked {
+    }
+  }
+}
 </style>