FD_Pano/src/views/information/index.vue

<template>
  <div>
    <setting @select="handleInitScene"></setting>
    <toolbar
      @catalog="data=>activeCataLog = data"
      @addPano="onAddPano"
      @addGroup="onAddGroup"
      @addScene="onAddScene"
      @rename="onRename"
    ></toolbar>
    <popup v-show="showAddGroup" :can-close="false">
      <div class="ui-message ui-message-confirm dark" style="width: 400px">
        <div class="ui-message-header">
          <span>{{
            currentTabAtri.oper == "add"
              ? `新增${currentTabAtri.type == 1 ? "一" : "二"}级分组`
              : `重命名${currentTabAtri.type == 1 ? "一" : "二"}级分组`
          }}</span>
          <span @click="showAddGroup = false">
            <i class="iconfont icon_close"></i>
          </span>
        </div>
        <div class="ui-message-main re-name">
          <div>
            <input
              class="ui-input"
              type="text"
              maxlength="15"
              placeholder="请输入分组名，限15个字"
              v-model="currentTabAtri.name"
            />
          </div>
        </div>

        <div class="ui-message-footer">
          <button class="ui-button cancel" @click="showAddGroup = false">
            取消
          </button>
          <button
            class="ui-button submit"
            :class="{ disable: !currentTabAtri.name }"
            @click="handleAddGroup()"
          >
            确定
          </button>
        </div>
      </div>
    </popup>

    <popup v-show="showRename" :can-close="false">
      <div class="ui-message ui-message-confirm dark" style="width: 400px">
        <div class="ui-message-header">
          <span>重命名</span>
          <span @click="handleRenameClose">
            <i class="iconfont icon_close"></i>
          </span>
        </div>
        <div class="ui-message-main re-name">
          <div>
            <input
              class="ui-input"
              type="text"
              maxlength="50"
              placeholder="输入名字"
              v-model="reNameItem.sceneTitle"
            />
          </div>
        </div>

        <div class="ui-message-footer">
          <button class="ui-button cancel" @click="handleRenameClose">
            取消
          </button>
          <button
            class="ui-button submit"
            :class="{ disable: !reNameItem.sceneTitle }"
            @click="handleRename()"
          >
            确定
          </button>
        </div>
      </div>
    </popup>

    <div class="dialog" style="z-index: 2000" v-if="showList">
      <Table
        :list="type == 'scene' ? sceneList : panoList"
        :tabHeader="$MAPTABLEHEADER[type]"
        @updateList="update"
        @cancle="showList = false"
        :title="type == 'scene' ? '选择三维场景' : '选择全景图'"
        :primaryKey="type == 'scene' ? 'num' : 'id'"
        @changeCurrent="changeCurrent"
        :paging="paging"
        @submit="handleSelect"
      >
      </Table>
    </div>
  </div>
</template>
<script>
import Setting from "./Setting";
import Toolbar from "./Toolbar";
import Popup from "@/components/shared/popup";
import {
  getSceneList,
  getMaterialList,
} from "@/api";
import Table from "@/components/tableSelect.vue";
import { mapGetters } from "vuex";
import { savePanoToWorks } from "@/api";
import { changeByteUnit } from '@/utils/file'

export default {
  name: "home",
  components: {
    Setting,
    Toolbar,
    Popup,
    Table,
  },
  computed: {
    ...mapGetters({
      sceneList: "sceneList",
      info: "info",
      backupInfo: "backupInfo"
    }),
  },
  data() {
    return {
      activeCataLog: "",
      type: "scene",
      currentTabAtri: "",
      showAddGroup: false,
      showRename: false,
      showList: false,
      showInitScene: true,
      reNameItem: {
        id: "",
        sceneTitle: "",
      },
      key: "",
      paging: {
        pageSize: 8,
        pageNum: 1,
        total: 0,
        showSize: 4,
        current: 1,
      },
      panoList: [],
    };
  },
  mounted() {},

  watch: {
    "paging.pageNum": function () {
      this.type == "scene" ? this.getSceneList() : this.getMaterialList();
    },
    showList(newVal) {
      if (!newVal) {
        this.paging = {
          pageSize: 8,
          pageNum: 1,
          total: 0,
          showSize: 4,
          current: 1,
        };
      }
    },
  },

  methods: {
    handleInitScene() {
      this.showInitScene = true;
    },
    update(data) {
      this.key = data;
      this.type == "scene" ? this.getSceneList() : this.getMaterialList();
    },
    handleSelect(data) {
     let params = ''
      if (this.type == "scene") {
        params = data.map((item) => {
          return {
            icon: item.thumb,
            sceneCode: item.num,
            sceneTitle: item.sceneName,
            type: "4dkk",
            category:this.activeCataLog.id,
            id:'s_'+this.$randomWord(true,8,8)
          };
        });
      } else {
        params = data.map((item) => {
          return {
            icon: item.icon,
            sceneCode: item.sceneCode,
            sceneTitle: item.name,
            category:this.activeCataLog.id,
            type: "pano",
            id:'s_'+this.$randomWord(true,8,8)
          };
        });
      }

      params.forEach((item,i) => {
        let temp = this.info.scenes.find(sub=>sub.sceneCode == item.sceneCode)
        if (temp) {
          console.log(this.$msg);
            setTimeout(() => {
              this.$msg.message(`${item.type=='4dkk'?'场景':'全景图'}${item.sceneTitle}已存在,不可重复添加`);
            }, i*100);
            return
        }
        !temp&&this.info.scenes.push(item)
      });

      this.$bus.emit('scenesChange')
      this.$store.commit("SetInfo", this.info);
      this.showList = false;
    },

    changeCurrent(data) {
      this.paging.pageNum = data;
    },

    savePanoToWorks(data) {
      savePanoToWorks(data, () => {
        this.$bus.emit("refresh");
      });
    },

    onRename(data) {
      this.reNameItem = data;
      this.showRename = true;
    },

    handleRenameClose(){
      this.showRename = false
      this.$bus.emit('scenesChange')
      this.$store.commit("SetInfo", this.backupInfo);
    },

    handleRename() {
      if (!this.reNameItem.sceneTitle.trim()) {
        return this.$alert({ content: "请输入名字" });
      }
      this.$msg.success("重命名成功")
      this.$store.commit("SetInfo", this.info);
      this.showRename = false;
    },

    onAddGroup(data) {
      this.showAddGroup = true;
      this.currentTabAtri = { ...data, name: data.item.name || "" };
    },

    handleAddGroup() {
      if (!this.currentTabAtri.name.trim()) {
        return this.$alert({ content: "请输入名字" });
      }
      let willActive = ''
      let tmp = this.currentTabAtri.item;
      if (this.currentTabAtri.oper == "edit") {
        tmp.name = this.currentTabAtri.name;
      } else {
        if (this.currentTabAtri.type == 1) {
          let id = 'c_'+this.$randomWord(true,8,8)
          willActive = {
            id: 'r_'+this.$randomWord(true,8,8),
            name: this.currentTabAtri.name,
            children: [id],
          }
          this.info.catalogRoot.push(willActive);
          this.info.catalogs.push({
            id,
            name: '默认二级分组',
          });
          console.log(this.info.catalogs);
        }
        if (this.currentTabAtri.type == 2) {
          let id = 'c_'+this.$randomWord(true,8,8)
          let item = this.info.catalogRoot.find(
            (item) => item.id == tmp.parentId
          );
          item.children.push(id);
          willActive = {
            id,
            name: this.currentTabAtri.name,
          }

          this.info.catalogs.push(willActive);
        }
      }

      this.$bus.emit('scenesChange')
      this.$store.commit("SetInfo", this.info);
      this.$msg.success("操作成功")
      this.showAddGroup = false;

      if (this.currentTabAtri.oper != "edit") {
        this.$bus.emit('getActive',{
          type:this.currentTabAtri.type,
          willActive
        })
      }
    },

    onAddScene() {
      this.type = "scene";
      this.getSceneList();
      this.showList = true;
    },

    onAddPano() {
      this.type = "pano";
      this.getMaterialList();
      this.showList = true;
    },

    getSceneList() {
      getSceneList(
        {
          pageNum: this.paging.pageNum,
          pageSize: this.paging.pageSize,
          searchKey: this.key,
        },
        (data) => {
          let { list, total } = data.data.data;
          this.paging.total = total;

          

          this.$store.commit("SetSceneList", list);
        }
      );
    },

    getMaterialList() {
      getMaterialList(
        {
          pageNum: this.paging.pageNum,
          pageSize: this.paging.pageSize,
          searchKey: this.key,
          type: this.type,
          urlSelect: true,
        },
        (data) => {
          this.paging.pageNum = data.data.pageNum;
          this.paging.pageSize = data.data.pageSize;
          this.paging.total = data.data.total;
          this.panoList = data.data.list.map(i=>{
            i.fileSize = changeByteUnit(Number(i.fileSize))
            i.createTime = i.createTime.substring(0,i.createTime.length-3)
            i.updateTime = i.updateTime.substring(0,i.updateTime.length-3)
            return i
          })
        }
      );
    },
  },
};
</script>

<style lang="less" scoped>
.dialog {
  position: fixed;
  z-index: 30;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.pano-con {
  height: auto;
  background: none;
  padding: 10px 0;
  .ui-remark {
    padding-left: 10px;
  }
  > ul {
    > li {
      cursor: pointer;
    }
  }
}
.re-name {
  width: 80%;
  margin: 40px auto;
}
.add-vr {
  text-align: left;
  .ui-remark {
    margin: 10px 0;
  }
}
</style>