149 lines
4.3 KiB
Vue
149 lines
4.3 KiB
Vue
<script setup lang="ts">
|
|
import { BranchWithChildren } from 'stores/branch/types';
|
|
import KebabAction from './shared/KebabAction.vue';
|
|
|
|
const nodes = defineModel<(any | BranchWithChildren)[]>('nodes', {
|
|
default: [],
|
|
});
|
|
|
|
const expandedTree = defineModel<string[]>('expandedTree', { default: [] });
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
typeTree: 'product' | 'branch';
|
|
color?: string;
|
|
nodeKey?: string;
|
|
labelKey?: string;
|
|
childrenKey: string;
|
|
action?: boolean;
|
|
}>(),
|
|
{
|
|
color: 'transparent',
|
|
nodeKey: 'id',
|
|
labelKey: 'name',
|
|
},
|
|
);
|
|
|
|
defineEmits<{
|
|
(e: 'handleHold', node: any): void;
|
|
(e: 'select', node: any): void;
|
|
(e: 'create', node: any): void;
|
|
|
|
(e: 'view', node: any): void;
|
|
(e: 'edit', node: any): void;
|
|
(e: 'delete', node: any): void;
|
|
(e: 'changeStatus', node: any): void;
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<q-tree
|
|
:nodes="nodes"
|
|
:color="color"
|
|
:node-key="nodeKey"
|
|
:label-key="labelKey"
|
|
:children-key="childrenKey"
|
|
:no-nodes-label="$t('general.noData')"
|
|
v-model:expanded="expandedTree"
|
|
style="color: var(--foreground)"
|
|
>
|
|
<template #default-header="{ node }">
|
|
<div
|
|
class="full-width q-py-xs"
|
|
:class="{
|
|
'clickable-node': typeTree === 'product' || node.isHeadOffice,
|
|
'cursor-pointer':
|
|
node.type === 'group' ||
|
|
node.type === 'type' ||
|
|
node.type === 'productService',
|
|
'active-node': expandedTree[expandedTree.length - 1] === node.id,
|
|
}"
|
|
v-touch-hold.mouse="() => $emit('handleHold', node)"
|
|
@click.stop="
|
|
async () => {
|
|
$emit('select', node);
|
|
}
|
|
"
|
|
:id="`tree-enter-${node.name}`"
|
|
>
|
|
<div class="row col items-center justify-between full-width no-wrap">
|
|
<q-icon
|
|
v-if="
|
|
node.type === 'group' ||
|
|
(node.isHeadOffice && node._count.branch !== 0)
|
|
"
|
|
name="mdi-triangle-down"
|
|
size="12px"
|
|
class="app-text-muted q-mr-md q-ml-sm"
|
|
:style="`rotate: ${expandedTree[0] === node.id ? '0deg' : '30deg'}`"
|
|
/>
|
|
<div
|
|
class="col row"
|
|
:class="{
|
|
'q-pl-sm q-py-xs':
|
|
node.type === 'type' || node.type === 'productService',
|
|
}"
|
|
:style="`padding-left:${(node.type === 'group' && node._count.type === 0) || (node.isHeadOffice && node._count.branch === 0) ? '36px' : ''}`"
|
|
>
|
|
<span
|
|
class="ellipsis col-12"
|
|
style="white-space: nowrap"
|
|
:class="{
|
|
'text-weight-bold':
|
|
expandedTree[expandedTree.length - 1] === node.id,
|
|
'app-text-info':
|
|
expandedTree[expandedTree.length - 1] === node.id,
|
|
}"
|
|
>
|
|
{{ node.name }}
|
|
</span>
|
|
<span class="app-text-muted text-caption ellipsis">
|
|
{{ node.code }}
|
|
</span>
|
|
</div>
|
|
|
|
<div
|
|
class="row q-gutter-xs items-center no-wrap app-text-muted-2"
|
|
v-if="$q.screen.gt.xs"
|
|
>
|
|
<slot></slot>
|
|
<q-btn
|
|
v-if="typeTree === 'product' && !node.actionDisabled"
|
|
icon="mdi-eye-outline"
|
|
:id="`btn-tree-eye-${node.name}`"
|
|
size="sm"
|
|
dense
|
|
round
|
|
flat
|
|
@click.stop="() => $emit('view', node)"
|
|
/>
|
|
|
|
<q-btn
|
|
v-if="node.isHeadOffice && typeTree === 'branch'"
|
|
:id="`create-sub-branch-btn-${node.name}`"
|
|
@click.stop="$emit('create', node)"
|
|
icon="mdi-file-plus-outline"
|
|
class="app-text-muted-2"
|
|
size="sm"
|
|
dense
|
|
round
|
|
flat
|
|
/>
|
|
|
|
<KebabAction
|
|
v-if="action && !node.actionDisabled"
|
|
:id-name="node.name"
|
|
status="ACTIVE"
|
|
@view="$emit('view', node)"
|
|
@edit="$emit('edit', node)"
|
|
@delete="$emit('delete', node)"
|
|
@change-status="$emit('changeStatus', node)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</q-tree>
|
|
</template>
|
|
|
|
<style scoped lang="scss"></style>
|