chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

refactor:(04) use TreeCompoent

Browse source
This commit is contained in:
Net 2024-07-30 16:24:11 +07:00
parent b538356751
commit ac171b1379
2 changed files with 117 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/components/TreeCompoent.vue
View file

@ -1,15 +1,8 @@
<script setup lang="ts">
import { BranchWithChildren } from 'stores/branch/types';
const nodes = defineModel<
(
| {
id: string;
name: string;
children: [];
}
| BranchWithChildren
)[]
>('nodes', { default: [] });
const nodes = defineModel<(any | BranchWithChildren)[]>('nodes', {
default: [],
});
const expandedTree = defineModel<string[]>('expandedTree', { default: [] });

116
src/pages/04_product-service/MainPage.vue
View file

@ -27,6 +27,7 @@ import FormServiceProperties from 'components/04_product-service/FormServiceProp
import InfoForm from 'components/02_personnel-management/InfoForm.vue';
import NoData from 'components/NoData.vue';
import PaginationComponent from 'src/components/PaginationComponent.vue';
import TreeCompoent from 'src/components/TreeCompoent.vue';
import useFlowStore from 'src/stores/flow';
import useMyBranchStore from 'src/stores/my-branch';
@ -1476,7 +1477,118 @@ watch(
<div class="col full-width scroll">
<div class="q-pa-md">
<q-tree
<TreeCompoent
:nodes="treeProductTypeAndGroup"
v-model:expanded-tree="expandedTree"
node-key="id"
label-key="name"
children-key="children"
type-tree="product"
@select="
async (v) => {
if (v.type === 'group') {
if (currentIdGrop !== v.id) {
filterStat.push('group');
await enterGroup(v.id, v.name);
return;
}
if (currentIdGrop === v.id) {
expandedTree = [];
filterStat = [];
expandedTree = expandedTree.filter((i) => v.id !== i);
currentIdGrop = '';
currentIdType = '';
productMode = 'group';
return;
}
}
if (v.type === 'type') {
if (currentIdType !== v.id) {
filterStat.push('group', 'type');
await enterType(v.id, v.name);
return;
}
if (currentIdType === v.id) {
filterStat = filterStat.filter((item) => {
return item !== 'type';
});
currentIdType = '';
productMode = 'type';
expandedTree.pop();
return;
}
}
}
"
@view="
(v) => {
if (v.type === 'type') {
editByTree = 'type';
currentStatusProduct = v.status === 'INACTIVE';
clearFormGroup();
currentIdType = v.id;
assignFormDataGroup(v);
isEdit = false;
drawerInfo = true;
}
if (v.type === 'group') {
editByTree = 'group';
currentStatusProduct = v.status === 'INACTIVE';
clearFormGroup();
assignFormDataGroup(v);
isEdit = false;
currentIdGrop = v.id;
drawerInfo = true;
}
}
"
@edit="
(v) => {
editByTree = v.type;
if (v.type === 'type') {
clearFormGroup();
currentIdType = v.id;
assignFormDataGroup(v);
isEdit = true;
drawerInfo = true;
}
if (v.type === 'group') {
clearFormGroup();
assignFormDataGroup(v);
isEdit = true;
currentIdGrop = v.id;
drawerInfo = true;
}
}
"
@delete="
(v) => {
editByTree = v.type;
if (v.type === 'type') {
deleteProductById(v.id);
}
if (v.type === 'group') {
deleteProductById(v.id);
}
}
"
@change-status="
async (v) => {
if (v.type === 'type') {
triggerChangeStatus(v.id, v.status, v.type);
}
if (v.type === 'group') {
triggerChangeStatus(v.id, v.status, v.type);
}
}
"
/>
<!-- <q-tree
:nodes="treeProductTypeAndGroup"
color="transparent"
node-key="id"
@ -1781,7 +1893,7 @@ watch(
</div>
</div>
</template>
</q-tree>
</q-tree> -->
</div>
</div>
</div>