FD_Pano/src/framework/Head.vue

<template>
  <header class="app-head" app-border dir-bottom>
    <a class="app-head-back" href="./material.html#/works">
      <i class="iconfont icon-editor_return" ></i>
      返回我的作品
    </a>
    <span class="app-head-title">{{ info.name }}</span>
    <div class="app-head-save ui-button deepcancel app-head-view" @click="onView" :class="{ disable: !canLoad }">
      <i class="iconfont iconeditor_preview"></i>
      预览
    </div>

    <div
      class="ui-button submit app-head-save"
      @click="onSave"
      :class="{ disable: !canLoad }"
    >
      <i class="iconfont iconeditor_save"></i>
      保存
    </div>
    <preview
      v-if="info"
      :name="info.name"
      :show="showPreview"
      :ifr="`./show.html?id=${info.id}`"
      @close="showPreview = false"
    />
  </header>
</template>
<script>
import { saveWorks, getPanoInfo, checkLogin } from "@/api";
import { mapGetters } from "vuex";
// import config from '@/config'
import preview from "@/components/preview";
let hhhreg = /\\\\\\\\/g

export default {
  name: "app-head",
  data() {
    return {
      showPreview: false,
      canLoad: false,
    };
  },

  components: { preview },

  mounted() {
    this.$bus.on('canLoad',(data)=>{
      this.canLoad = data
      if (data) {
        this.getInfo()

      }
    }) 


  },
  computed: {
    ...mapGetters({
      info: "info",
      isShow: "isShow",
    }),
  },
  methods: {
    checkParams() {
      if (!this.info.name && !this.info.icon && !this.info.description && this.info.scenes.length<=0) {
        this.$alert({
          content: "您还未创建任何内容哦",
          ok: () => {
            this.$router.push({ path: "/base" });
          },
        });
        return false;
      }
      // if (this.info.scenes.length <= 0 && this.isShow) {
      //   this.$alert({
      //     content: "至少添加一个场景才保存/预览，请前往“场景导航”添加",
      //     forceOK: true,
      //     ok: () => {
      //       this.$router.push({ path: "/information" });
      //     },
      //   });
      //   return false;
      // }
      return true;
    },
    onView() {
      if (!this.checkParams()) {
        return;
      }
      this.fixData()
      this.info.scenes = this.info.scenes.map(item=>{
        if (typeof item.someData == 'string') {
          item.someData =  item.someData.replace(hhhreg,'')
        }
        return item
      })

      saveWorks(
        {
          password: this.info.password,
          someData: { ...this.info, status: 1 },
        },
        () => {
          this.$msg.success("保存成功");
          document.title = this.info.name
          this.getInfo();
          this.$store.commit("UpdateIsShowState", true);
          setTimeout(() => {
            if (this.info.scenes.length <= 0 && this.isShow) {
              return this.$alert({
                content: "至少添加一个场景才可预览，请前往“场景导航”添加",
              });
            }
            this.showPreview = true;
          }, 500);
        }
      );
    },

    fixData() {
    //   let tmp = [];
    //   this.info.scenes.forEach((item) => {
    //     this.info.catalogs.forEach((sub) => {
    //       if (item.category == sub.id) {
    //         tmp.push(sub);
    //       }
    //     });
    //   });
    //   tmp = this.$unique(tmp)
    //   this.info.catalogs = tmp;
    //   let rootmp = [];
    //   tmp.forEach((item) => {
    //     this.info.catalogRoot.forEach((sub) => {
    //       sub.children = this.$unique(sub.children)
    //       if (sub.children.indexOf(item.id) > -1) {
    //         rootmp.push(sub);
    //       }
    //     });
    //   });
    //   rootmp = this.$unique(rootmp)

    //   this.info.catalogRoot = rootmp.map((item) => {
    //     let temp = [];
    //     item.children = this.$unique(item.children)
    //     item.children.forEach((sub) => {
    //       tmp.forEach((jj) => {
    //         if (jj.id == sub) {
    //           temp.push(sub);
    //         }
    //       });
    //     });
    //     return {
    //       ...item,
    //       children: temp,
    //     };
    //   });
    //   this.info.catalogs = tmp

    //   let cid = 'c_'+this.$randomWord(true,8,8)

    //   if (this.info.catalogRoot.length <= 0) {
    //     this.info.catalogRoot.push({
    //       id: 'r_'+this.$randomWord(true,8,8),
    //       name: "全部场景",
    //       children:[cid]
    //     });
    //   }

    //   if (this.info.catalogs.length <= 0) {
    //     this.info.catalogs.push({
    //       id: cid,
    //       name: "默认二级分组",
    //     });
    //   }

      if (this.info.firstScene) {
        this.info.firstScene = this.info.scenes.find(item=>item.sceneCode==this.info.firstScene.sceneCode)
      }

      this.$store.commit("SetInfo", this.info);
    },

    onSave() {
      if (!this.checkParams()) {
        return;
      }
      this.fixData();


      this.info.scenes = this.info.scenes.map(item=>{
        if (typeof item.someData == 'string') {
          item.someData =  item.someData.replace(hhhreg,'')
        }
        return item
      })

      saveWorks(
        {
          password: this.info.password,
          someData: { ...this.info, status: 1 },
        },
        () => {
          this.$msg.success("保存成功")
          document.title = this.info.name
          this.getInfo();
          this.$store.commit("UpdateIsShowState", true);
        },
        () => {}
      );
    },
    getInfo() {
      checkLogin().then((res) => {
        if (res.code == 0) {
          getPanoInfo("", (data) => {
            this.$store.commit("SetInfo", data);
            document.title = this.info.name || '无标题'
          });

        }
      });
    },
  },
};
</script>
<style lang="less">
.app-head {
  width: 100%;
  min-width: 50px;
  height: 60px;
  position: relative;
}
.app-head-back {
  color: white;
  display: flex;
  align-items: baseline;
  font-size: 16px;
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  > i {
    margin-right: 15px;
  }
}
.app-head-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  color: white;
}
.app-head-save {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
  i {
    font-size: 14px;
    margin-right: 4px;
  }
}

.ui-preview{
  background: #313131;
}

.app-head-view {
  right: 120px;
}
</style>