feat:conflict

src/views/components/ContextMenu.vue

@@ -17,6 +17,7 @@
       <t-menu-item v-if="is3D()" value="goto3d"> 进入3D可视化编辑 </t-menu-item>
       <t-menu-item v-if="is2D()" value="goto2d"> 进入2D可视化编辑 </t-menu-item>
       <t-menu-item v-if="isV()" value="gotov"> 进入大屏可视化编辑 </t-menu-item>
+      <t-menu-item v-if="isIframe()" value="replaceScene"> 替换方案 </t-menu-item>
       <t-menu-item v-if="isTableNoFocus()" value="focus"> 
         <div class="flex">进入编辑模式<span class="flex-grow"></span>Enter</div>
       </t-menu-item>
@@ -87,7 +88,7 @@ import { rootDomain, isDownload } from '@/services/defaults';
 const props = defineProps({
   type: String,
 });
-const emit = defineEmits(['changeVisible']);
+const emit = defineEmits(['changeVisible','replaceScene']);
 
 const { selections } = useSelection();
 
@@ -224,6 +225,9 @@ const onMenu = (val: string) => {
       }
       window.open(url + id, '_blank');
       break;
+    case 'replaceScene':
+      emit('replaceScene', false);
+      break;
   }
 
   emit('changeVisible', false);
@@ -257,6 +261,10 @@ const isV = ()=>{
   return meta2d?.store.active.length === 1 && meta2d?.store.active[0].name === "iframe" && (meta2d?.store.active[0].iframe.indexOf("v.") > -1||meta2d?.store.active[0].iframe.indexOf("/v") > -1) &&(meta2d?.store.active[0].iframe.indexOf(`v${rootDomain}`) !== -1 || meta2d?.store.active[0].iframe.indexOf(`view${rootDomain}/v`) !== -1);
 }
 
+const isIframe = ()=>{
+  return meta2d?.store.active.length === 1 && meta2d?.store.active[0].name === "iframe"
+}
+
 </script>
 
 <style lang="postcss" scoped>

src/views/components/View.vue

@@ -372,6 +372,7 @@
       :type="contextmenu.type"
       :style="contextmenu.style"
       @changeVisible="changeContextMenuVisible"
+      @replaceScene="replaceScene"
     />
     <t-dialog
       v-if="dataDialog.show"
@@ -923,6 +924,34 @@
         </div>
       </div>
     </t-dialog>
+    <t-dialog
+      v-model:visible="replaceDialog.show"
+      header="方案列表"
+      class="project-dialog"
+      :width="700"
+      @close="replaceDialog.show = false"
+      @confirm="onReplace"
+    >
+      <t-tabs :value="replaceDialog.collection" @change="sceneChange">
+        <t-tab-panel
+          v-for="item in replaceList"
+          :value="item.key"
+          :label="item.label"
+          :destroy-on-hide="false"
+          style="height: 420px"
+        >
+        <div class="flex between box-list"  style="flex-wrap:wrap">
+          <div class="box" :class="{active:replaceDialog.select?.id===_item.id}" @click="selectScene(_item)" v-for="_item in replaceDialog.list">
+            <div class="box-img">
+              <img :src="_item.image"></img>
+            </div>
+            <div class="title" :title="_item.name">{{_item.name}}</div>
+          </div>
+        </div>
+        <t-pagination :pageSizeOptions="[15,30,60]" :total="replaceDialog.total"  v-model="replaceDialog.current" :pageSize="replaceDialog.pageSize" @change="pageChange" />
+        </t-tab-panel>
+      </t-tabs>
+    </t-dialog>
   </div>
 </template>
 
@@ -978,6 +1007,7 @@ import {transformData} from '@/services/utils';
 import { importExcel, saveAsExcel } from '@/services/excel';
 import { typeOptions } from '@/services/common';
 import { upload } from '@/services/file';
+import { getCollectionList } from '@/services/api';
 
 const router = useRouter();
 const route = useRoute();
@@ -2416,6 +2446,92 @@ const changeFit = () => {
   }
 }
 
+const replaceDialog = reactive({
+  show:false,
+  list:[],
+  current:1,
+  pageSize:15,
+  total:0,
+  collection:'v',
+  select:''
+});
+
+const replaceList = reactive([
+  {
+    key:'v',
+    label:'大屏'
+  },
+  {
+    key:'3d',
+    label:'3D'
+  },
+  {
+    key:'2d',
+    label:'2D'
+  },
+]);
+
+const replaceScene = ()=>{
+  replaceDialog.show = true;
+  sceneChange('v');
+}
+
+const sceneChange = async(e) => {
+   let collection = e;
+   if(!collection){
+     collection = replaceDialog.collection;
+   }else{
+    replaceDialog.collection = e;
+    replaceDialog.current = 1;
+   }
+   const data = {
+    // template:false
+  };
+  
+  // if(collection === '3d'){
+  //   delete data.template;
+  // }
+  const config = {
+    params: {
+      current: replaceDialog.current,
+      pageSize: replaceDialog.pageSize,
+    },
+  };
+  //2.请求所有图纸/组件数据
+  const res: any = await getCollectionList(collection, data, config);
+  replaceDialog.list = res.list;
+  replaceDialog.total = res.total;
+}
+
+const pageChange = (e) => {
+  replaceDialog.current = e.current;
+  replaceDialog.pageSize = e.pageSize;
+  sceneChange();
+}
+
+const selectScene = (_item) => {
+  replaceDialog.select = _item;
+  replaceDialog.select.collection = replaceDialog.collection;
+}
+
+const onReplace = ()=>{
+  let id = meta2d.store.active[0].id;
+  let url = 'https://view.le5le.com'
+  if(isDownload){
+    url = location.origin+ `/view`;
+  }
+  meta2d.setValue({
+    id:id,
+    iframe:`${url}/${replaceDialog.select.collection}/?id=${replaceDialog.select.id}`,
+    thumbImg:replaceDialog.select.image
+  });
+  replaceDialog.show = false;
+  meta2d.inactive();
+  setTimeout(()=>{
+    meta2d.active(meta2d.find(id))
+  },10)
+}
+
 </script>
 <style lang="postcss" scoped>
 .meta2d {
@@ -2505,4 +2621,54 @@ const changeFit = () => {
     /* width: 240px !important; */
   }
 }
+:deep(.t-dialog__ctx){
+  z-index:100;
+
+  .watermark-span{
+    color: var(--color-primary);
+    cursor: pointer;
+    &:hover{
+      color: var(--color-primary-hover);
+    }
+  }
+}
+
+:deep(.project-dialog){
+  .t-dialog__body{
+    .box-list{
+       flex-wrap: wrap;
+       padding:8px;
+       margin-bottom:12px;
+       background-color: var(--color-background-active);
+       overflow:scroll;
+       max-height:375px;
+      .box{
+        width:120px;
+        height:110px;
+        padding:8px;
+        .box-img{
+          width:100%;
+          height:70px;
+        }
+        .title{
+          text-align:center; 
+           white-space: nowrap;
+           overflow: hidden;
+           text-overflow:ellipsis;
+           font-size:12px;
+           color: var(--td-text-color-secondary);
+        }
+        &:hover{
+          border-radius: 4px;
+          border:1px solid var(--color-primary);
+        }
+      }
+      .active{
+        border-radius: 4px;
+        border:1px solid var(--color-primary);
+      }
+    }
+  }
+}
+
 </style>