|
|
@@ -7,6 +7,7 @@
|
|
|
<ui-icon type="menu" />
|
|
|
<BackItem
|
|
|
:type="back.type"
|
|
|
+ :item="back"
|
|
|
:label="back.label"
|
|
|
:url="back.image"
|
|
|
:active="activeParent === back.value"
|
|
|
@@ -41,9 +42,11 @@
|
|
|
<BackItem
|
|
|
v-else
|
|
|
:type="back.type"
|
|
|
+ :item="back"
|
|
|
:label="back.label"
|
|
|
:url="back.image"
|
|
|
- :active="value[0] === back.value"
|
|
|
+ @del="handleDel"
|
|
|
+ :active="back.value && value[0] === back.value"
|
|
|
@click="value[0] !== back.value && $emit('update:value', [back.value, null])"
|
|
|
/>
|
|
|
</template>
|
|
|
@@ -53,10 +56,10 @@
|
|
|
<ui-icon type="add" />
|
|
|
</p>
|
|
|
</div>
|
|
|
- <Confirm v-if="showFile" >
|
|
|
+ <Confirm title="新增" v-if="showFile" :func="clickHandler">
|
|
|
<template v-slot:content>
|
|
|
<div class="fileContent" style="width: 360px">
|
|
|
- <div class="file">
|
|
|
+ <div class="filediv">
|
|
|
<span>全景图</span>
|
|
|
<ui-input
|
|
|
class="imgqjt-input"
|
|
|
@@ -73,7 +76,9 @@
|
|
|
<ui-button class="small-button" type="submit" >选择全景图</ui-button>
|
|
|
</template>
|
|
|
</ui-input>
|
|
|
- <span></span>
|
|
|
+ <span class="filename" v-if="myfile && myfile.name" :title="myfile && myfile.name">{{ myfile && myfile.name }}
|
|
|
+ <ui-icon @click="myfile = null" class="iconclose" type="close" />
|
|
|
+ </span>
|
|
|
</div>
|
|
|
<div class="tips">支持JPG/JPEG格式,2:1宽高比的全景图,建议分辨率≥4096×2048,全景图大小不超过20MB。</div>
|
|
|
</div>
|
|
|
@@ -86,19 +91,24 @@
|
|
|
import { Dropdown, MenuItem, Menu } from "ant-design-vue";
|
|
|
import { computed, ref } from "vue";
|
|
|
import BackItem from "./back-item.vue";
|
|
|
-import { fetchMapTiles } from "@/api/map-tile";
|
|
|
+import { fetchMapTiles, addSettingsResource, getSettingsResource, delSettingsResource } from "@/api/map-tile";
|
|
|
import { sysTiles } from "@/store";
|
|
|
import { Confirm } from "bill/index";
|
|
|
+import { Dialog, Message } from "bill/expose-common";
|
|
|
+// import Message from "bill/components/message/message.vue";
|
|
|
+import { params } from "@/env";
|
|
|
|
|
|
const props = defineProps<{
|
|
|
value: [string | null | undefined, number | null | undefined];
|
|
|
}>();
|
|
|
-defineEmits<{
|
|
|
+const emit = defineEmits<{
|
|
|
(e: "update:value", value: [string | null, number | null]): void;
|
|
|
}>();
|
|
|
-const file = ref<File | null>(null);
|
|
|
+const myfile = ref<File | null>(null);
|
|
|
+const audioSize = 20 * 1024 * 1024;
|
|
|
const showFile = ref(false)
|
|
|
-const backs = computed(() => [
|
|
|
+const myList = ref([])
|
|
|
+const backsList = [
|
|
|
{ label: "无", type: "icon", image: "icon-without", value: "none" },
|
|
|
{
|
|
|
label: "地图",
|
|
|
@@ -131,7 +141,8 @@ const backs = computed(() => [
|
|
|
image: "https://4dkk.4dage.com/fusion/default/images/pic_bw@2x.png",
|
|
|
value: "https://4dkk.4dage.com/fusion/default/images/傍晚.jpg",
|
|
|
},
|
|
|
-]);
|
|
|
+]
|
|
|
+const backs = computed(() => ([...backsList, ...myList.value]));
|
|
|
|
|
|
const activeParent = computed(() => {
|
|
|
console.log(backs.value, 'activeParent', props.value);
|
|
|
@@ -148,7 +159,37 @@ const activeParent = computed(() => {
|
|
|
}
|
|
|
});
|
|
|
const updateFile = async ({ file, preview }: { file: File; preview: string }) => {
|
|
|
- console.log(file, preview, 'updateFile');
|
|
|
+ myfile.value = file;
|
|
|
+}
|
|
|
+const getbacksList = async () => {
|
|
|
+ const list = await getSettingsResource()
|
|
|
+ myList.value = list.map(ele => ({ ...ele, isUpload: true, image: ele.resource, value: ele.resource, type: 'img' }))
|
|
|
+ console.log(list, 'getbacksList');
|
|
|
+}
|
|
|
+const handleDel = async (item : any) => {
|
|
|
+ console.log(item, 'handleDel', props.value);
|
|
|
+ if (!(await Dialog.confirm("确定要删除吗?"))) return;
|
|
|
+ if(props.value[0] == item.value) emit('update:value', ['none', null])
|
|
|
+ await delSettingsResource(item.id)
|
|
|
+ await getbacksList()
|
|
|
+}
|
|
|
+getbacksList()
|
|
|
+const clickHandler = async (status: any) => {
|
|
|
+ console.log(status, 'clickHandler', showFile.value);
|
|
|
+ if (status == 'ok') {
|
|
|
+ // 验证是否选择了文件
|
|
|
+ if(!myfile.value){
|
|
|
+ Message.error("请选择全景图文件");
|
|
|
+ throw "全景图文件不能为空";
|
|
|
+ }
|
|
|
+ // 上传全景图文件并刷新列表
|
|
|
+ await addSettingsResource(myfile.value)
|
|
|
+ getbacksList()
|
|
|
+ showFile.value = false
|
|
|
+ }else{
|
|
|
+ // 取消上传,关闭弹窗
|
|
|
+ showFile.value = false
|
|
|
+ }
|
|
|
}
|
|
|
const handleFile = () => {
|
|
|
showFile.value = true;
|
|
|
@@ -208,5 +249,18 @@ const updateFile = async ({ file, preview }: { file: File; preview: string }) =>
|
|
|
margin: 0 20px;
|
|
|
position: relative;
|
|
|
}
|
|
|
+ .filediv{
|
|
|
+ white-space: nowrap;
|
|
|
+ /* 3. 超出容器的部分隐藏 */
|
|
|
+ overflow: hidden;
|
|
|
+ /* 4. 超出部分用省略号替代(核心) */
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ .filename{
|
|
|
+ position: relative;
|
|
|
+ .iconclose{
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|