|
@@ -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;
|