|
|
@@ -1,22 +1,24 @@
|
|
|
<template>
|
|
|
<div class="group-settings" app-border dir-right>
|
|
|
- <div class="ui-title-big">{{$i18n.t("navigation.scene_navigation")}}
|
|
|
- <i class="iconfont icon-help_i tool-tip-for-editor" v-tooltip="$i18n.t('navigation.scene_tips')">
|
|
|
+ <div class="ui-title-big">
|
|
|
+ {{ $i18n.t("navigation.scene_navigation") }}
|
|
|
+ <i
|
|
|
+ class="iconfont icon-help_i tool-tip-for-editor"
|
|
|
+ v-tooltip="$i18n.t('navigation.scene_tips')"
|
|
|
+ >
|
|
|
</i>
|
|
|
</div>
|
|
|
- <button class="ui-button create-group-btn"
|
|
|
+ <button
|
|
|
+ class="ui-button create-group-btn"
|
|
|
@click="onRequestForAddLevel1Group"
|
|
|
>
|
|
|
<i class="iconfont icon-editor_add"></i>
|
|
|
- {{$i18n.t('navigation.add_group')}}
|
|
|
+ {{ $i18n.t("navigation.add_group") }}
|
|
|
</button>
|
|
|
|
|
|
<div class="scene-group-wrap">
|
|
|
<InsertPositionTip position-debug="-1" :index="0"></InsertPositionTip>
|
|
|
- <div
|
|
|
- v-for="(item, index) of catalogTopology"
|
|
|
- :key=item.id
|
|
|
- >
|
|
|
+ <div v-for="(item, index) of catalogTopology" :key="item.id">
|
|
|
<SceneGroupInEditor
|
|
|
ref="scene-group"
|
|
|
:groupNode="item"
|
|
|
@@ -27,7 +29,10 @@
|
|
|
@renameGroup="onRenameGroup"
|
|
|
@deleteGroup="onDeleteGroup"
|
|
|
/>
|
|
|
- <InsertPositionTip position-debug="0" :index="index + 1"></InsertPositionTip>
|
|
|
+ <InsertPositionTip
|
|
|
+ position-debug="0"
|
|
|
+ :index="index + 1"
|
|
|
+ ></InsertPositionTip>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -47,99 +52,99 @@ export default {
|
|
|
computed: {
|
|
|
...mapGetters({
|
|
|
info: "info",
|
|
|
- catalogTopology: 'catalogTopology',
|
|
|
+ catalogTopology: "catalogTopology",
|
|
|
}),
|
|
|
},
|
|
|
data() {
|
|
|
- return {
|
|
|
- };
|
|
|
- },
|
|
|
- watch: {
|
|
|
+ return {};
|
|
|
},
|
|
|
+ watch: {},
|
|
|
methods: {
|
|
|
onRequestForAddLevel1Group() {
|
|
|
- const newGroupLevel1Id = 'r_' + this.$randomWord(true, 8, 8)
|
|
|
- const newGroupLevel2Id = 'c_' + this.$randomWord(true, 8, 8)
|
|
|
+ const newGroupLevel1Id = "r_" + this.$randomWord(true, 8, 8);
|
|
|
+ const newGroupLevel2Id = "c_" + this.$randomWord(true, 8, 8);
|
|
|
|
|
|
const newGroupLevel1 = {
|
|
|
id: newGroupLevel1Id,
|
|
|
- name: this.$i18n.t('navigation.group_one'),
|
|
|
+ name: this.$i18n.t("navigation.group_one"),
|
|
|
children: [newGroupLevel2Id],
|
|
|
- }
|
|
|
- this.info.catalogRoot.push(newGroupLevel1)
|
|
|
+ };
|
|
|
+ this.info.catalogRoot.push(newGroupLevel1);
|
|
|
this.info.catalogs.push({
|
|
|
id: newGroupLevel2Id,
|
|
|
- name: this.$i18n.t('navigation.default_group_two'),
|
|
|
- })
|
|
|
+ name: this.$i18n.t("navigation.default_group_two"),
|
|
|
+ });
|
|
|
|
|
|
this.$nextTick(() => {
|
|
|
- const newGroupComp = this.$refs['scene-group'].find((item) => {
|
|
|
- return item.groupNode.id === newGroupLevel1Id
|
|
|
- })
|
|
|
- newGroupComp.onClickForRename()
|
|
|
- })
|
|
|
+ const newGroupComp = this.$refs["scene-group"].find((item) => {
|
|
|
+ return item.groupNode.id === newGroupLevel1Id;
|
|
|
+ });
|
|
|
+ newGroupComp.onClickForRename();
|
|
|
+ });
|
|
|
},
|
|
|
onRequestForAddGroupLevel2(parentGroupId) {
|
|
|
- let id = 'c_' + this.$randomWord(true, 8, 8)
|
|
|
+ let id = "c_" + this.$randomWord(true, 8, 8);
|
|
|
let parent = this.info.catalogRoot.find((item) => {
|
|
|
- return item.id === parentGroupId
|
|
|
- })
|
|
|
+ return item.id === parentGroupId;
|
|
|
+ });
|
|
|
parent.children.push(id);
|
|
|
const newGroupLevel2 = {
|
|
|
id,
|
|
|
- name: this.$i18n.t('navigation.group_two'),
|
|
|
- }
|
|
|
+ name: this.$i18n.t("navigation.group_two"),
|
|
|
+ };
|
|
|
this.info.catalogs.push(newGroupLevel2);
|
|
|
|
|
|
this.$nextTick(() => {
|
|
|
- const parentGroupComp = this.$refs['scene-group'].find((item) => {
|
|
|
- return item.groupNode.id === parentGroupId
|
|
|
- })
|
|
|
- parentGroupComp.isExpanded = true
|
|
|
+ const parentGroupComp = this.$refs["scene-group"].find((item) => {
|
|
|
+ return item.groupNode.id === parentGroupId;
|
|
|
+ });
|
|
|
+ parentGroupComp.isExpanded = true;
|
|
|
this.$nextTick(() => {
|
|
|
- const newGroupComp = parentGroupComp.$refs['scene-group'].find((item) => {
|
|
|
- return item.groupNode.id === id
|
|
|
- })
|
|
|
- newGroupComp.onClickForRename()
|
|
|
- })
|
|
|
- })
|
|
|
+ const newGroupComp = parentGroupComp.$refs["scene-group"].find(
|
|
|
+ (item) => {
|
|
|
+ return item.groupNode.id === id;
|
|
|
+ }
|
|
|
+ );
|
|
|
+ newGroupComp.onClickForRename();
|
|
|
+ });
|
|
|
+ });
|
|
|
},
|
|
|
onRenameScene(sceneId, newName) {
|
|
|
const renameTarget = this.info.scenes.find((item) => {
|
|
|
- return item.id === sceneId
|
|
|
- })
|
|
|
- renameTarget.sceneTitle = newName
|
|
|
+ return item.id === sceneId;
|
|
|
+ });
|
|
|
+ renameTarget.sceneTitle = newName;
|
|
|
},
|
|
|
onDeleteScene(sceneId) {
|
|
|
if (this.info.scenes.length === 1) {
|
|
|
this.$alert({
|
|
|
- title: this.$i18n.t('navigation.delete_init_scene'),
|
|
|
- content: this.$i18n.t('navigation.keep_one_scene'),
|
|
|
- })
|
|
|
- return
|
|
|
+ title: this.$i18n.t("navigation.delete_init_scene"),
|
|
|
+ content: this.$i18n.t("navigation.keep_one_scene"),
|
|
|
+ });
|
|
|
+ return;
|
|
|
}
|
|
|
const deleteTargetIdx = this.info.scenes.findIndex((item) => {
|
|
|
- return item.id === sceneId
|
|
|
- })
|
|
|
- this.info.scenes.splice(deleteTargetIdx, 1)
|
|
|
- this.delFirstScene()
|
|
|
- this.$msg.success(this.$i18n.t('gather.delete_success'))
|
|
|
+ return item.id === sceneId;
|
|
|
+ });
|
|
|
+ this.info.scenes.splice(deleteTargetIdx, 1);
|
|
|
+ this.delFirstScene();
|
|
|
+ this.$msg.success(this.$i18n.t("gather.delete_success"));
|
|
|
},
|
|
|
onRenameGroup(groupId, level, newName) {
|
|
|
if (level === 1) {
|
|
|
const target = this.info.catalogRoot.find((item) => {
|
|
|
- return item.id === groupId
|
|
|
- })
|
|
|
- target.name = newName
|
|
|
- this.$msg.success(this.$i18n.t('gather.success'))
|
|
|
+ return item.id === groupId;
|
|
|
+ });
|
|
|
+ target.name = newName;
|
|
|
+ this.$msg.success(this.$i18n.t("gather.success"));
|
|
|
} else if (level === 2) {
|
|
|
const target = this.info.catalogs.find((item) => {
|
|
|
- return item.id === groupId
|
|
|
- })
|
|
|
- target.name = newName
|
|
|
- this.$msg.success(this.$i18n.t('gather.success'))
|
|
|
+ return item.id === groupId;
|
|
|
+ });
|
|
|
+ target.name = newName;
|
|
|
+ this.$msg.success(this.$i18n.t("gather.success"));
|
|
|
} else {
|
|
|
- console.error('invalid level!');
|
|
|
+ console.error("invalid level!");
|
|
|
}
|
|
|
},
|
|
|
onDeleteGroup(groupId, groupLevel) {
|
|
|
@@ -149,150 +154,174 @@ export default {
|
|
|
(groupLevel === 2 && this.info.catalogs.length === 1)
|
|
|
) {
|
|
|
this.$alert({
|
|
|
- content: this.$i18n.t('navigation.keep_one_group'),
|
|
|
- })
|
|
|
- return
|
|
|
+ content: this.$i18n.t("navigation.keep_one_group"),
|
|
|
+ });
|
|
|
+ return;
|
|
|
}
|
|
|
|
|
|
if (groupLevel === 1 && this.info.catalogRoot.length !== 1) {
|
|
|
- const targetGroupIdx = this.info.catalogRoot.findIndex((groupLevel1) => {
|
|
|
- return groupLevel1.id === groupId
|
|
|
- })
|
|
|
+ const targetGroupIdx = this.info.catalogRoot.findIndex(
|
|
|
+ (groupLevel1) => {
|
|
|
+ return groupLevel1.id === groupId;
|
|
|
+ }
|
|
|
+ );
|
|
|
if (targetGroupIdx < 0) {
|
|
|
- throw('没有找到要删除的一级分组！')
|
|
|
+ throw "没有找到要删除的一级分组！";
|
|
|
}
|
|
|
- const groupLevel2List = this.info.catalogRoot[targetGroupIdx].children
|
|
|
+ const groupLevel2List =
|
|
|
+ this.info.catalogRoot[targetGroupIdx].children;
|
|
|
// 检查是否所有场景都（间接）属于该一级分组
|
|
|
if (
|
|
|
this.info.scenes.every((scene) => {
|
|
|
- return groupLevel2List.some(groupLevel2Id => {
|
|
|
- return groupLevel2Id === scene.category
|
|
|
- })
|
|
|
+ return groupLevel2List.some((groupLevel2Id) => {
|
|
|
+ return groupLevel2Id === scene.category;
|
|
|
+ });
|
|
|
})
|
|
|
) {
|
|
|
this.$alert({
|
|
|
- content: this.$i18n.t('navigation.keep_one_scene'),
|
|
|
- })
|
|
|
- return
|
|
|
+ content: this.$i18n.t("navigation.keep_one_scene"),
|
|
|
+ });
|
|
|
+ return;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
if (groupLevel === 2 && this.info.catalogs.length !== 1) {
|
|
|
// 检查是否所有场景都属于该二级分组
|
|
|
- if (this.info.scenes.every((scene) => {
|
|
|
- return scene.category === groupId
|
|
|
- })) {
|
|
|
- this.$alert({
|
|
|
- content: this.$i18n.t('navigation.keep_one_scene'),
|
|
|
+ if (
|
|
|
+ this.info.scenes.every((scene) => {
|
|
|
+ return scene.category === groupId;
|
|
|
})
|
|
|
- return
|
|
|
+ ) {
|
|
|
+ this.$alert({
|
|
|
+ content: this.$i18n.t("navigation.keep_one_scene"),
|
|
|
+ });
|
|
|
+ return;
|
|
|
}
|
|
|
}
|
|
|
- } catch(e) {
|
|
|
+ } catch (e) {
|
|
|
console.error(e);
|
|
|
- this.$msg.error(this.$i18n.t('gather.delete_fail'))
|
|
|
- return
|
|
|
+ this.$msg.error(this.$i18n.t("gather.delete_fail"));
|
|
|
+ return;
|
|
|
}
|
|
|
|
|
|
const deleteGroupLevel2 = (groupId) => {
|
|
|
// 要删除的二级分组在catalogRoot[x].children中的索引
|
|
|
- let targetGroupIdxLevel2 = null
|
|
|
+ let targetGroupIdxLevel2 = null;
|
|
|
// 要删除的二级分组所属的一级分组在catalogRoot中的索引
|
|
|
- let belongGroupIdxLevel1 = null
|
|
|
+ let belongGroupIdxLevel1 = null;
|
|
|
// 确定上边两个变量的取值
|
|
|
- for (const [groupIdxLevel1, groupLevel1] of this.info.catalogRoot.entries()) {
|
|
|
- for (const [groupIdxLevel2, childId] of groupLevel1.children.entries()) {
|
|
|
+ for (const [
|
|
|
+ groupIdxLevel1,
|
|
|
+ groupLevel1,
|
|
|
+ ] of this.info.catalogRoot.entries()) {
|
|
|
+ for (const [
|
|
|
+ groupIdxLevel2,
|
|
|
+ childId,
|
|
|
+ ] of groupLevel1.children.entries()) {
|
|
|
if (childId === groupId) {
|
|
|
- targetGroupIdxLevel2 = groupIdxLevel2
|
|
|
- break
|
|
|
+ targetGroupIdxLevel2 = groupIdxLevel2;
|
|
|
+ break;
|
|
|
}
|
|
|
}
|
|
|
if (targetGroupIdxLevel2 !== null) {
|
|
|
- belongGroupIdxLevel1 = groupIdxLevel1
|
|
|
- break
|
|
|
+ belongGroupIdxLevel1 = groupIdxLevel1;
|
|
|
+ break;
|
|
|
}
|
|
|
}
|
|
|
if (targetGroupIdxLevel2 === null || belongGroupIdxLevel1 === null) {
|
|
|
- throw('一级分组列表中没有找到要删除的二级分组！')
|
|
|
+ throw "一级分组列表中没有找到要删除的二级分组！";
|
|
|
}
|
|
|
|
|
|
// 删除catalogRoot[x].children中那个二级分组条目
|
|
|
- this.info.catalogRoot[belongGroupIdxLevel1].children.splice(targetGroupIdxLevel2, 1)
|
|
|
-
|
|
|
+ this.info.catalogRoot[belongGroupIdxLevel1].children.splice(
|
|
|
+ targetGroupIdxLevel2,
|
|
|
+ 1
|
|
|
+ );
|
|
|
+
|
|
|
// 删除catalogs中那个二级分组条目
|
|
|
const targetIdx = this.info.catalogs.findIndex((item) => {
|
|
|
- return item.id === groupId
|
|
|
- })
|
|
|
+ return item.id === groupId;
|
|
|
+ });
|
|
|
if (targetIdx < 0) {
|
|
|
- throw('二级分组列表中没有找到要删除的二级分组！')
|
|
|
+ throw "二级分组列表中没有找到要删除的二级分组！";
|
|
|
}
|
|
|
- this.info.catalogs.splice(targetIdx, 1)
|
|
|
+ this.info.catalogs.splice(targetIdx, 1);
|
|
|
|
|
|
// 删除场景列表中属于要删除的二级分组的那些场景
|
|
|
this.info.scenes = this.info.scenes.filter((item) => {
|
|
|
- return item.category !== groupId
|
|
|
- })
|
|
|
+ return item.category !== groupId;
|
|
|
+ });
|
|
|
|
|
|
// 如果所属一级分组中没有任何二级分组了，则新增一个默认二级分组
|
|
|
if (this.info.catalogRoot[belongGroupIdxLevel1].children.length === 0) {
|
|
|
- let newGroupLevel2Id = 'c_' + this.$randomWord(true, 8, 8)
|
|
|
- this.info.catalogRoot[belongGroupIdxLevel1].children.push(newGroupLevel2Id)
|
|
|
+ let newGroupLevel2Id = "c_" + this.$randomWord(true, 8, 8);
|
|
|
+ this.info.catalogRoot[belongGroupIdxLevel1].children.push(
|
|
|
+ newGroupLevel2Id
|
|
|
+ );
|
|
|
this.info.catalogs.push({
|
|
|
id: newGroupLevel2Id,
|
|
|
- name: this.$i18n.t('navigation.default_group_two'),
|
|
|
- })
|
|
|
+ name: this.$i18n.t("navigation.default_group_two"),
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
- return
|
|
|
- }
|
|
|
+ return;
|
|
|
+ };
|
|
|
|
|
|
- const backup = deepClone(this.info)
|
|
|
+ const backup = deepClone(this.info);
|
|
|
try {
|
|
|
if (groupLevel === 1) {
|
|
|
- const targetGroupIdx = this.info.catalogRoot.findIndex((groupLevel1) => {
|
|
|
- return groupLevel1.id === groupId
|
|
|
- })
|
|
|
+ const targetGroupIdx = this.info.catalogRoot.findIndex(
|
|
|
+ (groupLevel1) => {
|
|
|
+ return groupLevel1.id === groupId;
|
|
|
+ }
|
|
|
+ );
|
|
|
if (targetGroupIdx < 0) {
|
|
|
- throw('没有找到要删除的一级分组！')
|
|
|
+ throw "没有找到要删除的一级分组！";
|
|
|
}
|
|
|
// 删除该一级分组下的所有二级分组及属于这些二级分组的场景
|
|
|
- for (const childId of this.info.catalogRoot[targetGroupIdx].children) {
|
|
|
- deleteGroupLevel2(childId)
|
|
|
+ for (const childId of this.info.catalogRoot[targetGroupIdx]
|
|
|
+ .children) {
|
|
|
+ deleteGroupLevel2(childId);
|
|
|
}
|
|
|
// 删除该一级分组
|
|
|
- this.info.catalogRoot.splice(targetGroupIdx, 1)
|
|
|
+ this.info.catalogRoot.splice(targetGroupIdx, 1);
|
|
|
} else if (groupLevel === 2) {
|
|
|
- deleteGroupLevel2(groupId)
|
|
|
+ deleteGroupLevel2(groupId);
|
|
|
} else {
|
|
|
- throw('group level invalid!');
|
|
|
+ throw "group level invalid!";
|
|
|
}
|
|
|
// 酌情清空初始场景设置
|
|
|
- this.delFirstScene()
|
|
|
- this.$msg.success(this.$i18n.t('gather.delete_success'))
|
|
|
- } catch(e) {
|
|
|
+ this.delFirstScene();
|
|
|
+ this.$msg.success(this.$i18n.t("gather.delete_success"));
|
|
|
+ //1.4.0 增加成功后成功后toggle一下默认的
|
|
|
+ const firstTab = this.info.catalogRoot[0];
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$store.commit("scene/setCurrentCatalogRoot", firstTab);
|
|
|
+ }, 100);
|
|
|
+ } catch (e) {
|
|
|
console.error(e);
|
|
|
- this.$msg.error('删除失败')
|
|
|
- this.$msg.error(this.$i18n.t('gather.delete_fail'))
|
|
|
- this.$store.commit("SetInfo", backup)
|
|
|
+ this.$msg.error("删除失败");
|
|
|
+ this.$msg.error(this.$i18n.t("gather.delete_fail"));
|
|
|
+ this.$store.commit("SetInfo", backup);
|
|
|
}
|
|
|
},
|
|
|
- delFirstScene(){
|
|
|
+ delFirstScene() {
|
|
|
if (this.info.firstScene) {
|
|
|
- let firIdx = this.info.scenes.find(item=>{
|
|
|
- return item.sceneCode == this.info.firstScene.sceneCode
|
|
|
+ let firIdx = this.info.scenes.find((item) => {
|
|
|
+ return item.sceneCode == this.info.firstScene.sceneCode;
|
|
|
});
|
|
|
- !firIdx&&(this.info.firstScene='')
|
|
|
+ !firIdx && (this.info.firstScene = "");
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.$bus.on('getActive',data=>{
|
|
|
+ this.$bus.on("getActive", (data) => {
|
|
|
if (data.type == 1) {
|
|
|
- this.taboneActive = data.willActive
|
|
|
- } else{
|
|
|
- this.tabtowActive = data.willActive
|
|
|
+ this.taboneActive = data.willActive;
|
|
|
+ } else {
|
|
|
+ this.tabtowActive = data.willActive;
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
@@ -348,7 +377,7 @@ export default {
|
|
|
letter-spacing: 1px;
|
|
|
width: 100%;
|
|
|
&:focus {
|
|
|
- border-color: #0076F6;
|
|
|
+ border-color: #0076f6;
|
|
|
}
|
|
|
}
|
|
|
}
|
gemercheung