Browse Source

从作品中选择素材的弹窗 也做相应修改

任一存 2 năm trước cách đây
mục cha
commit
47afdfde7b

+ 71 - 39
packages/qjkankan-editor/src/components/materialSelectorFromWorkForEditor.vue

@@ -5,43 +5,53 @@
 
     <div class="material-tab">
       <a class="material-tab-item" @click.prevent="currentMaterialType = 'pano'">
-        <span class="text">{{$i18n.t(`gather.panorama`)}}</span>
+        <span class="text" :class="{ active: currentMaterialType === 'pano' }">{{$i18n.t(`gather.panorama`)}}</span>
         <div v-if="currentMaterialType === 'pano'" class="bottom-line"></div>
       </a>
       <a class="material-tab-item" @click.prevent="currentMaterialType = '3D'">
-        <span class="text">{{$i18n.t(`gather.scene`)}}</span>
+        <span class="text" :class="{ active: currentMaterialType === '3D' }">{{$i18n.t(`gather.scene`)}}</span>
         <div v-if="currentMaterialType === '3D'" class="bottom-line"></div>
       </a>
     </div>
     
-    <div class="filter">
-      <input type="text" :placeholder="$i18n.t(`gather.keywords`)" v-model="searchKey"/>
+    <div
+      class="filter"
+      :class="{active: isSearchKeyInputActive}"
+    >
+      <input
+        type="text"
+        :placeholder="$i18n.t(`gather.keywords`)"
+        v-model="searchKey"
+        @focus="isSearchKeyInputActive = true"
+        @blur="isSearchKeyInputActive = false"
+      />
       <i v-if="!searchKey" class="iconfont icon-editor_search search-icon"/>
       <i v-if="searchKey" @click="searchKey=''" class="iconfont icontoast_red clear-icon"></i>
     </div>
 
     <div class="table table-pano" v-show="currentMaterialType === 'pano'">
-      <div class="table-head-row">
+      <!-- <div class="table-head-row">
         <span class="table-head">1</span>
         <span class="table-head" v-for="(item,i) in tableHeadersForPano" :key="i">{{ item.name && $i18n.t(`zh_key.${item.name}`) }}</span>
-      </div>
+      </div> -->
       <div
         v-show="panoList.length !== 0"
         class="table-body"
       >
-        <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="false"
+              :isMultiSelection="false"
+              :isCheckedInitial="select.some(i => i.id === item.id)"
+              @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">
@@ -65,27 +75,28 @@
     </div>
 
     <div class="table table-3D" v-show="currentMaterialType === '3D'">
-      <div class="table-head-row">
+      <!-- <div class="table-head-row">
         <span class="table-head">1</span>
         <span class="table-head" v-for="(item,i) in tableHeadersFor3D" :key="i">{{ item.name && $i18n.t(`zh_key.${item.name}`) }}</span>
-      </div>
+      </div> -->
       <div
         v-show="scene3DList.length !== 0"
         class="table-body"
       >
-        <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">
-            <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="false"
+              :isMultiSelection="false"
+              :isCheckedInitial="select.some(i => i.id === item.id)"
+              @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">
@@ -122,6 +133,7 @@
 <script>
 import { mapGetters } from "vuex";
 import { debounce } from "@/utils/other.js"
+import RadioOrCheckbox from "@/components/shared/RadioOrCheckbox.vue";
 
 export default {
   props:{
@@ -134,6 +146,7 @@ export default {
     }
   },
   components:{
+    RadioOrCheckbox,
   },
   computed:{
     ...mapGetters([
@@ -175,6 +188,7 @@ export default {
   data () {
     return {
       select: [],
+      isSearchKeyInputActive: false,
       searchKey:'', // 搜索关键词
       latestUsedSearchKey: '',
       currentMaterialType: 'pano',
@@ -182,10 +196,10 @@ export default {
   },
 
   methods: {
-    selectItem(item, e) {
+    selectItem(item, v) {
       item.materialType = this.currentMaterialType  // 三维场景数据没有type字段来表明自己是三维场景。所以统一加一个字段。
       if (this.isMultiSelection) {
-        if (e.target.checked) {
+        if (v) {
           this.select.push(item)
         } else {
           const toDeleteIdx = this.select.findIndex((eachSelect) => {
@@ -196,13 +210,19 @@ export default {
           }
         }
       } else {
-        if (e.target.checked) {
+        if (v) {
           this.select = [item]
         } else {
           this.select = []
         }
       }
     },
+    onClickRow(e) {
+      const checkboxNodeList = e.currentTarget.getElementsByClassName('selection-click-target')
+      if (checkboxNodeList && checkboxNodeList[0]) {
+        checkboxNodeList[0].click()
+      }
+    },
     onClickComfirm: debounce(function() {
       this.$emit('submit', this.select)
     }, 250),
@@ -262,6 +282,9 @@ export default {
       font-size: 14px;
       font-family: MicrosoftYaHei;
       color: rgba(255, 255, 255, 0.6);
+      &.active {
+        color: #fff;
+      }
     }
     > .bottom-line {
       position: absolute;
@@ -284,6 +307,9 @@ export default {
   border-radius: 2px;
   border: 1px solid #404040;
   position: relative;
+  &.active {
+    border: 1px solid @color;
+  }
   > input {
     box-sizing: border-box;
     width: calc(100% - 42px);
@@ -313,13 +339,16 @@ export default {
   }
 }
 
+// @table-height: 440px;
+// @table-head-row-height: 40px;
+// @table-border-size: 1px;
 @table-height: 440px;
-@table-head-row-height: 40px;
-@table-border-size: 1px;
+@table-head-row-height: 0px;
+@table-border-size: 0px;
 
 .table {
   margin-top: 20px;
-  border: @table-border-size solid #404040;
+  // border: @table-border-size solid #404040;
   background: #1A1B1D;
   width: 100%;
   height: @table-height;
@@ -342,9 +371,12 @@ export default {
     width: 100%;
     > .table-body-row {
       height: 50px;
-      border-bottom: 1px solid #404040;
+      // border-bottom: 1px solid #404040;
       display: flex;
       align-items: center;
+      &:hover {
+        background: #252526;
+      }
       > .table-data {
         font-size:14px;
         line-height:50px;