caseEditor/src/view/diversity/index.vue

<template>
  <div class="scene flex justify-end content-center">
    <div class="scene-list" v-if="list.length">
      <div class="scene-title" v-show="!show">
        <el-button class="newbut" @click="handleAdd">
          <i class="iconfont icon-import" style="margin-right: 5px"></i>
          导入
        </el-button>
      </div>
      <div class="list" v-if="active">
        <div
          class="listItem py-4"
          v-for="(item, index) in list"
          :key="index"
          :class="{
            active: item.fusionId === sceneItem.fusionId,
            disabled: !item.viewAuth,
          }"
          @click="handleItem(item)"
        >
          <div class="anmc" :title="item.title || item.caseTitle">
            {{ item.title || item.caseTitle }}
          </div>
          <div
            class="cursor-pointer"
            v-if="!show && (item.editAuth || caseInfoData.isAuthor) && item.fusionId === sceneItem.fusionId"
            quaternary
            type="primary"
          >
            <el-icon v-if="item.editAuth" style="margin-right: 34px" title="编辑">
              <EditPen @click="handleAdddyrh(item)" />
            </el-icon>
            <el-icon title="移除">
              <CircleClose @click="handlegotoelT(item)" />
            </el-icon>
          </div>
          <div class="cursor-pointer" v-show="!show" v-else-if="!item.viewAuth && caseInfoData.isAuthor">
            <el-icon title="移除">
              <CircleClose @click.stop="handlegotoelT(item)" />
            </el-icon>
          </div>
        </div>
      </div>
    </div>
    <div
      class="app-scene"
      ref="sceneRef"
      :style="{
        height: '100%',
        width: list.length == 0?'100%':'',
      }"
    >
      <iframe
        v-if="list && list.length && sceneURL"
        :src="sceneURL"
        frameborder="0"
        :style="{ width: '100%', height: '100%' }"
      ></iframe>
      <div class="import" v-else @click="handleAdd" v-show="!show">
        <el-icon size="26" color="#26559B">
          <i style="font-size: 26px; color: #26559B" class="iconfont icon-import"></i></el-icon>
        <div class="name">导入</div>
      <div class="noData" >
        <div class="name" style="margin-top: 25px;">暂无数据</div>
      </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  getCaseSceneList,
  getCaseList,
  getUrlSrc,
  getSceneListTree,
  setCaseaddOrUpdate,
  getCaseFusionList,
  casefusionDel,
  show,
  setaddFusionIds ,
  caseInfoData,
} from "@/store/case";
import { router } from "@/router";
import comSelect from "@/components/company-select/index.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import List from "./list.vue";
import SceneContent from "./sceneContent.vue";
import { Plus, DocumentAdd, EditPen } from "@element-plus/icons-vue";
import ModelContent from "./modelContent.vue";
import { useScenePaggingParams } from "./pagging";
import { computed, ref, onMounted } from "vue";
import { tableModelScene } from "./quisk";
const active = ref(true);
const list = ref([
]);
const isEdit = ref(false);
const showModal = ref(false);
const sceneURL = ref("");
const sceneNum = ref("");
const sceneItem = ref({
  fusionId: "",
});
const params = useScenePaggingParams();
const caseId = computed(() => router.currentRoute.value?.params?.caseId);
onMounted(() => {
  geiList();
});
async function geiList(refresh) {
  list.value = await getCaseList({
    caseId: caseId.value,
    type: 'fusion',
  })||[];
  // list.value = getList.filter((item) => item.caseId);
  console.log("getCaseFusionList", list.value);
  sceneItem.value = (list.value && list.value.find(ele => ele.viewAuth)) || {};
  sceneURL.value = getUrlSrc({ ...sceneItem.value, type: 100 }, caseId.value);
  console.log("res", list.value, sceneURL.value);
}
function handlegotoEdit(record) {
  if (record.isLaser) return;

  let url =
    record.type == 2 || record.type == 5
      ? `/mega/index.html?m=${record.num}`
      : `/epg.html?m=${record.num}`;
  window.open(url.replace("spg", "epg"));
}
function handleAdddyrh(record) {
  let url = `/code/index.html?caseId=${record.fusionId}#/fuseEdit/merge`;
  window.open(url);
}
async function handlegotoelT(record) {
  isEdit.value = true;
  ElMessageBox.confirm("确定要移除当前多元融合吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    // await casefusionDel(record.fusionId);
    let newlist = list.value.filter((item) => item.fusionId !== record.fusionId);
    const apiData = {
      caseId: caseId.value,
      fusionIds: newlist.map(item => item.fusionId),
    };
    await setaddFusionIds(apiData)
    list.value = list.value.filter((item) => item.fusionId !== record.fusionId);
    sceneItem.value = (list.value && list.value.find(ele => ele.viewAuth)) || {};
    sceneURL.value = getUrlSrc({ ...sceneItem.value, type: 100 }, caseId.value);
  });
  // if (record.inFusion || (await confirm("确定要移除当前场景吗？"))) {
  //   await casefusionDel(record.fusionId);
  //   list.value = list.value.filter((item) => item.fusionId !== record.fusionId);
  //   sceneItem.value = (list.value && list.value[0]) || {};
  //   sceneURL.value = getUrlSrc({ ...sceneItem.value, type: 99 }, caseId.value);
  //   // submitForm();
  // }
}
async function submitForm() {
  isEdit.value = false;
  let sublist = getSceneListTree(list.value);
  const apiData = {
    caseId: caseId.value,
    sceneNumParam: sublist,
  };
  setCaseaddOrUpdate(apiData)
    .then((res) => {
      geiList(true);
      ElMessage({
        message: "操作成功",
        type: "success",
      });
    })
    .catch((errr) => {
      console.log("setCaseaddOrUpdateerrr", errr);
      return geiList(true);
    });
}
async function handleAdd() {
  let fusionIds = [], noEditList = []
  list.value.map((item) => {
    fusionIds.push(item.fusionId);
    if(!item.editAuth) {
      noEditList.push(item.fusionId)
    }
  });
  console.log("handleAdd", fusionIds, noEditList);
  let val = await tableModelScene({ fusionIds, noEditList });
  geiList();
  if (val) {
    console.log("刷新列表");
  }
}
function handleItem(item) {
  if(!item.viewAuth) return ElMessage.error("您没有查看权限，请联系管理员开通");
  sceneItem.value = item;
  sceneURL.value = getUrlSrc({ ...item, type: 100 }, caseId.value);
}
</script>

<style scoped lang="scss">
.scene {
  height: 100%;

  .scene-list {
    width: calc(var(--leftwidth));
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    &::-webkit-scrollbar {
      display: none;
    }
    .scene-title {
      height: 64px;
      padding: 24px 48px 0 48px;
      .newbut{
        position: relative;
        left: -16px;
      }
    }
    .list {
      .listItem {
        width: calc(var(--leftwidth) - 0px);
        cursor: pointer;
        padding: 25px 48px;
        &:hover{
          background: rgba(69,144,255,0.1);;
        }
      }
      .active {
        background: rgba(69, 144, 255, 0.1);
      }
      .disabled {
        color: rgba(0, 0, 0, 0.3);
        cursor:not-allowed;
      }
    }
  }
  .app-scene {
    background: #f5f5f5;
    width: calc(100% - var(--leftwidth));
    position: relative;
  border-right: 48px solid #fff;
  border-bottom: 48px solid #fff;
    .import {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      margin-right: 20px;
      padding-top: 40px;
      height: 148px;
      width: 148px;
      text-align: center;
      background: #fafafa;
      cursor: pointer;
      .noData{
        position: absolute;
        top: 140px;
        width: 100%;
        // transform: translate(50%, -50%);
      }
    }
  }
  .anmc {
    width: 100%;
    margin-bottom: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    word-break: break-all;
    -webkit-line-clamp: 2;
    /*! autoprefixer: off */
    -webkit-box-orient: vertical;
  }
  .cursor-pointer {
    color: var(--primaryColor);
    text-align: right;
  }
}
</style>