124 lines
3.9 KiB
Vue
124 lines
3.9 KiB
Vue
<template>
|
|
<div>
|
|
<q-tree ref="tree" :nodes="tree_nodes" node-key="uuid" labelKey="name">
|
|
<template v-slot:default-header="prop">
|
|
<q-item
|
|
class="full-width"
|
|
clickable
|
|
:draggable="!prop.node.is_group"
|
|
@dragstart="(evt) => onDragStart(evt, prop.node)"
|
|
>
|
|
<q-item-section avatar>
|
|
<q-icon
|
|
:name="
|
|
prop.node.is_group
|
|
? 'img:source_icon/group.png'
|
|
: getItemIcon(prop.node.item_data?.window_type)
|
|
"
|
|
color="orange"
|
|
size="28px"
|
|
class="q-mr-sm"
|
|
/>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<div class="text-weight-bold text-primary">
|
|
{{ prop.node.name }}
|
|
</div>
|
|
</q-item-section>
|
|
<q-popup-proxy context-menu>
|
|
<q-popup-proxy context-menu />
|
|
<q-list>
|
|
<q-item clickable v-close-popup v-ripple>
|
|
<q-item-section avatar><q-icon name="add" /></q-item-section>
|
|
<q-item-section>{{
|
|
$t("add signal source item")
|
|
}}</q-item-section>
|
|
</q-item>
|
|
<q-item
|
|
clickable
|
|
v-close-popup
|
|
v-if="prop.node.is_group"
|
|
v-ripple
|
|
@click="
|
|
() =>
|
|
$refs.group_dialog.showDialog({
|
|
type: 1,
|
|
parent: prop.node.uuid,
|
|
})
|
|
"
|
|
>
|
|
<q-item-section avatar
|
|
><q-icon name="create_new_folder"
|
|
/></q-item-section>
|
|
<q-item-section>{{ $t("add group") }}</q-item-section>
|
|
</q-item>
|
|
<q-item
|
|
clickable
|
|
v-ripple
|
|
v-close-popup
|
|
v-if="prop.node.uuid != '' && prop.node.name != $t('root')"
|
|
>
|
|
<q-item-section avatar><q-icon name="edit" /></q-item-section>
|
|
<q-item-section>{{ $t("edit") }}</q-item-section>
|
|
</q-item>
|
|
|
|
<q-item
|
|
clickable
|
|
v-ripple
|
|
v-close-popup
|
|
v-if="prop.node.uuid != '' && prop.node.name != $t('root')"
|
|
>
|
|
<q-item-section avatar
|
|
><q-icon color="red" name="delete"
|
|
/></q-item-section>
|
|
<q-item-section>{{ $t("delete") }} </q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-popup-proxy>
|
|
</q-item>
|
|
</template>
|
|
</q-tree>
|
|
</div>
|
|
<group-dialog ref="group_dialog" />
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, computed } from "vue";
|
|
import { useStore } from "src/store";
|
|
import { SignalSourceTreeItemEntity } from "src/entities/SignalSourceEntity";
|
|
import GroupDialog from "src/components/GroupDialog.vue";
|
|
import { Common } from "src/common/Common";
|
|
|
|
export default defineComponent({
|
|
name: "PageLeftToolBar",
|
|
|
|
components: { GroupDialog },
|
|
|
|
setup() {
|
|
const $store = useStore();
|
|
|
|
const tree_nodes = computed({
|
|
get: () => $store.state.signal_source_tree,
|
|
set: (val) => $store.commit("setSignalSourceTree", val),
|
|
});
|
|
|
|
return {
|
|
tree_nodes,
|
|
loga(a: any) {
|
|
console.log(a);
|
|
},
|
|
onDragStart(e: DragEvent, node: SignalSourceTreeItemEntity) {
|
|
e.dataTransfer?.setData("uuid", node.uuid);
|
|
e.dataTransfer?.setData("node_object", JSON.stringify(node));
|
|
if (e.dataTransfer) {
|
|
e.dataTransfer.dropEffect = "move";
|
|
}
|
|
},
|
|
getItemIcon(item_type: string) {
|
|
return Common.getSignalSourceIcon(item_type);
|
|
},
|
|
};
|
|
},
|
|
});
|
|
</script>
|