|
|
@@ -5,97 +5,64 @@
|
|
|
</div>
|
|
|
<div class="second-line">
|
|
|
<div class="btn">
|
|
|
- <button
|
|
|
- @mouseover.stop="showList = true"
|
|
|
- @click="onUploadFile"
|
|
|
- class="ui-button submit"
|
|
|
- >
|
|
|
- <span>{{upload_material}}</span>
|
|
|
+ <button @mouseover.stop="showList = true" @click="onUploadFile" class="ui-button submit">
|
|
|
+ <span>{{ upload_material }}</span>
|
|
|
<i class="iconfont icon-material_prompt hover-tips hover-tips-upload-icon">
|
|
|
<div>
|
|
|
- <div class="remark">{{pano_size}}</div>
|
|
|
+ <div class="remark">{{ pano_size }}</div>
|
|
|
</div>
|
|
|
</i>
|
|
|
- <upload
|
|
|
- ref="uploadFile"
|
|
|
- :failString="pano_fail"
|
|
|
- :limitFailStr="pano_limit"
|
|
|
- accept-type=".jpg"
|
|
|
- media-type="image"
|
|
|
- :limit="120"
|
|
|
- @file-change="onFileChange"
|
|
|
- ></upload>
|
|
|
+ <upload ref="uploadFile" :failString="pano_fail" :limitFailStr="pano_limit" accept-type=".jpg"
|
|
|
+ media-type="image" :limit="120" @file-change="onFileChange"></upload>
|
|
|
</button>
|
|
|
</div>
|
|
|
<div class="filter">
|
|
|
- <div :class="{active: isFilterFocus}" @focusin="onFilterFocus" @focusout="onFilterBlur">
|
|
|
+ <div :class="{ active: isFilterFocus }" @focusin="onFilterFocus" @focusout="onFilterBlur">
|
|
|
<i class="iconfont icon-works_search search"></i>
|
|
|
- <input
|
|
|
- type="text"
|
|
|
- v-model="searchKey"
|
|
|
- :placeholder="serch_material"
|
|
|
- />
|
|
|
- <i v-if="searchKey" @click="searchKey=''" class="iconfont icontoast_red del"></i>
|
|
|
+ <input type="text" v-model="searchKey" :placeholder="serch_material" />
|
|
|
+ <i v-if="searchKey" @click="searchKey = ''" class="iconfont icontoast_red del"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="list">
|
|
|
- <tableList
|
|
|
- @selection-change="
|
|
|
- (data) => {
|
|
|
- selectedArr = data;
|
|
|
- }
|
|
|
- "
|
|
|
- @request-more-data="getMoreMaterialItem"
|
|
|
- :canRequestMoreData="hasMoreData && !isRequestingMoreData"
|
|
|
- :header="tabHeader"
|
|
|
- :showLine="true"
|
|
|
- :selection="false"
|
|
|
- :data="list"
|
|
|
- class="table-list"
|
|
|
- ref="table-list"
|
|
|
- >
|
|
|
+ <tableList @selection-change="
|
|
|
+ (data) => {
|
|
|
+ selectedArr = data;
|
|
|
+ }
|
|
|
+ " @request-more-data="getMoreMaterialItem" :canRequestMoreData="hasMoreData && !isRequestingMoreData"
|
|
|
+ :header="tabHeader" :showLine="true" :selection="false" :data="list" class="table-list" ref="table-list">
|
|
|
<!-- 表头 -->
|
|
|
<div slot-scope="{ data }" slot="header">
|
|
|
- {{ data.name }}
|
|
|
+ {{ data.name && $i18n.t(`zh_key.${data.name}`) }}
|
|
|
</div>
|
|
|
<!-- 内容各单元格 -->
|
|
|
<!-- item：传给组件的data里各元素，对应单元格所在行（hasAuth都写成false）；data：item里各元素，对应每个单元格；sub：表头数据各元素，即单元各所属列的表头数据 -->
|
|
|
<div slot-scope="{ data, item, sub }" slot="item" style="width: 100%">
|
|
|
<!-- 操作型单元格 -->
|
|
|
<div class="handle" v-if="sub.canclick">
|
|
|
- <i
|
|
|
- class="iconfont icon-material_operation_image hover-tips"
|
|
|
- @click="(showCover = true), (popupItem = item)"
|
|
|
- >
|
|
|
+ <i class="iconfont icon-material_operation_image hover-tips"
|
|
|
+ @click="(showCover = true), (popupItem = item)">
|
|
|
<div>
|
|
|
- <div class="remark">{{edit_cover}}</div>
|
|
|
+ <div class="remark">{{ edit_cover }}</div>
|
|
|
</div>
|
|
|
</i>
|
|
|
|
|
|
- <i
|
|
|
- class="iconfont icon-material_operation_editor hover-tips"
|
|
|
- @click="(showRename = true), (popupItem = item)"
|
|
|
- >
|
|
|
+ <i class="iconfont icon-material_operation_editor hover-tips"
|
|
|
+ @click="(showRename = true), (popupItem = item)">
|
|
|
<div>
|
|
|
- <div class="remark">{{rename}}</div>
|
|
|
+ <div class="remark">{{ rename }}</div>
|
|
|
</div>
|
|
|
</i>
|
|
|
<i class="iconfont icon-material_operation_delete hover-tips-warn" @click="del(item)">
|
|
|
<div>
|
|
|
- <div class="remark">{{deltips}}</div>
|
|
|
+ <div class="remark">{{ deltips }}</div>
|
|
|
</div>
|
|
|
</i>
|
|
|
</div>
|
|
|
<!-- 图片型单元格 -->
|
|
|
- <div
|
|
|
- class="img"
|
|
|
- v-else-if="sub.type == 'image'"
|
|
|
- @click="previewImage(item)"
|
|
|
- >
|
|
|
- <img
|
|
|
- :src="data + (Number(item.fileSize)>512 ? `?x-oss-process=image/resize,p_20&${Math.random()}` : '') "
|
|
|
- alt="" />
|
|
|
+ <div class="img" v-else-if="sub.type == 'image'" @click="previewImage(item)">
|
|
|
+ <img :src="data + (Number(item.fileSize) > 512 ? `?x-oss-process=image/resize,p_20&${Math.random()}` : '')"
|
|
|
+ alt="" />
|
|
|
</div>
|
|
|
<span style="cursor: pointer;" @click="previewImage(item)" v-else-if="sub.key == 'name'">{{ data || "-" }}
|
|
|
</span>
|
|
|
@@ -105,37 +72,24 @@
|
|
|
</span>
|
|
|
</div>
|
|
|
</tableList>
|
|
|
- <UploadTaskList class="upload-task-list" fileType="IMAGE" :taskList="uploadListForUI" @cancel-task="onCancelTask"></UploadTaskList>
|
|
|
- <div class="total-number" v-if="list.length !== 0 || hasMoreData">{{had_load}}</div>
|
|
|
+ <UploadTaskList class="upload-task-list" fileType="IMAGE" :taskList="uploadListForUI" @cancel-task="onCancelTask">
|
|
|
+ </UploadTaskList>
|
|
|
+ <div class="total-number" v-if="list.length !== 0 || hasMoreData">{{ had_load }}</div>
|
|
|
<div class="nodata" v-if="list.length == 0 && !hasMoreData && lastestUsedSearchKey">
|
|
|
<img :src="$noresult" alt="" />
|
|
|
- <span>{{no_serch_result}}</span>
|
|
|
+ <span>{{ no_serch_result }}</span>
|
|
|
</div>
|
|
|
<div class="nodata" v-if="list.length == 0 && !hasMoreData && !lastestUsedSearchKey">
|
|
|
<img :src="config.empty" alt="" />
|
|
|
- <span>{{no_material_result}}</span>
|
|
|
- <button @click="$refs.uploadFile.click()" class="upload-btn-in-table">{{upload_material}}</button>
|
|
|
+ <span>{{ no_material_result }}</span>
|
|
|
+ <button @click="$refs.uploadFile.click()" class="upload-btn-in-table">{{ upload_material }}</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <rename
|
|
|
- v-if="showRename"
|
|
|
- :item="popupItem"
|
|
|
- @rename="handleRename"
|
|
|
- @close="showRename = false"
|
|
|
- />
|
|
|
- <preview
|
|
|
- ref="image-previewer"
|
|
|
- :sceneCodeList="list.map(item => item.sceneCode)"
|
|
|
- :imageTitleList="list.map(item => item.name)"
|
|
|
- @click-delete="onClickDeleteInPreview"
|
|
|
- />
|
|
|
- <cover
|
|
|
- @panocover="handlePanoCover"
|
|
|
- :item="popupItem"
|
|
|
- v-if="showCover"
|
|
|
- @close="showCover = false"
|
|
|
- />
|
|
|
+ <rename v-if="showRename" :item="popupItem" @rename="handleRename" @close="showRename = false" />
|
|
|
+ <preview ref="image-previewer" :sceneCodeList="list.map(item => item.sceneCode)"
|
|
|
+ :imageTitleList="list.map(item => item.name)" @click-delete="onClickDeleteInPreview" />
|
|
|
+ <cover @panocover="handlePanoCover" :item="popupItem" v-if="showCover" @close="showCover = false" />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -163,7 +117,7 @@ import {
|
|
|
checkUserSize
|
|
|
} from "@/api";
|
|
|
|
|
|
-import {i18n} from "@/lang"
|
|
|
+import { i18n } from "@/lang"
|
|
|
|
|
|
|
|
|
const TYPE = "pano";
|
|
|
@@ -192,7 +146,7 @@ export default {
|
|
|
edit_cover: i18n.t("gather.edit_cover"),
|
|
|
rename: i18n.t("gather.rename"),
|
|
|
deltips: i18n.t("gather.delete"),
|
|
|
-
|
|
|
+
|
|
|
config,
|
|
|
showRename: false,
|
|
|
showCover: false,
|
|
|
@@ -200,7 +154,7 @@ export default {
|
|
|
popupItem: null,
|
|
|
tabHeader: data,
|
|
|
selectedArr: [],
|
|
|
-
|
|
|
+
|
|
|
searchKey: "",
|
|
|
// 因为searchKey的变化经过debounce、异步请求的延时，才会反映到数据列表的变化上，所以是否显示、显示哪种无数据提示，也要等到数据列表变化后，根据数据列表是否为空，以及引发本次变化的那个searchKey瞬时值来决定。本变量就是用来保存那个瞬时值。
|
|
|
lastestUsedSearchKey: '',
|
|
|
@@ -227,8 +181,8 @@ export default {
|
|
|
return item.status === 'LOADING' && item.ifKnowProgress === false
|
|
|
})
|
|
|
},
|
|
|
- had_load(){
|
|
|
- return i18n.t("gather.had_load",{msg:this.list.length})
|
|
|
+ had_load() {
|
|
|
+ return i18n.t("gather.had_load", { msg: this.list.length })
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
@@ -258,12 +212,12 @@ export default {
|
|
|
},
|
|
|
},
|
|
|
methods: {
|
|
|
- onUploadFile(){
|
|
|
- checkUserSize({},(data)=>{
|
|
|
+ onUploadFile() {
|
|
|
+ checkUserSize({}, (data) => {
|
|
|
//判断已用是否大于3G
|
|
|
if ((data.data / 1024 / 1024) > 3) {
|
|
|
this.$alert({ content: "空间已满" });
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
this.$refs.uploadFile.click()
|
|
|
}
|
|
|
})
|
|
|
@@ -274,7 +228,7 @@ export default {
|
|
|
onFilterBlur() {
|
|
|
this.isFilterFocus = false
|
|
|
},
|
|
|
- refreshListDebounced: debounce(function() {
|
|
|
+ refreshListDebounced: debounce(function () {
|
|
|
this.list = []
|
|
|
this.isRequestingMoreData = false
|
|
|
this.hasMoreData = true
|
|
|
@@ -472,9 +426,9 @@ export default {
|
|
|
|
|
|
let WHRate = null
|
|
|
try {
|
|
|
- const {width, height} = await getImgWH(eachFile)
|
|
|
+ const { width, height } = await getImgWH(eachFile)
|
|
|
WHRate = width / height
|
|
|
- } catch(e) {
|
|
|
+ } catch (e) {
|
|
|
console.error('获取图像宽高失败：', e)
|
|
|
setTimeout(() => {
|
|
|
this.$msg({
|
|
|
@@ -586,6 +540,7 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
+
|
|
|
</style>
|
|
|
<style lang="less" scoped>
|
|
|
@import "../style.less";
|
tremble