ปรับ ui หน้า โครงสร้างอัตรากำลัง

This commit is contained in:
Tanyalak 2024-02-05 17:08:24 +07:00
parent 8794346196
commit 47d68933b4
4 changed files with 89 additions and 53 deletions

View file

@ -304,7 +304,7 @@ onMounted(async () => {});
</script>
<template>
<div class="col-12 q-py-md q-px-sm">
<div class="col-12 q-py-sm q-px-sm">
<div class="q-gutter-sm">
<div class="row q-col-gutter-sm q-pl-sm">
<div class="col-2" v-if="store.typeOrganizational === 'draft'">
@ -328,7 +328,6 @@ onMounted(async () => {});
outlined
v-model="filter"
label="ค้นหา"
class="bg-white"
>
<template v-slot:append>
<q-icon
@ -337,13 +336,14 @@ onMounted(async () => {});
class="cursor-pointer"
@click="filter = ''"
/>
<q-icon name="search" color="grey-5" />
</template>
</q-input>
</div>
</div>
<div class="bg-white tree-container">
<q-tree
class="q-pa-md q-gutter-sm"
class="q-pa-sm q-gutter-sm"
dense
default-expand-all
selected-color="primary"
@ -368,7 +368,7 @@ onMounted(async () => {});
<div class="text-weight-medium">
{{ prop.node.orgTreeName }}
</div>
<div class="text-weight-light">
<div class="text-weight-light text-grey-8">
{{ prop.node.orgCode == null ? null : prop.node.orgCode }}
{{
prop.node.orgTreeShortName == null
@ -385,8 +385,10 @@ onMounted(async () => {});
flat
dense
icon="mdi-dots-vertical"
class="q-pa-none q-ml-xs"
class="q-ml-xs"
color="grey-13"
size="12px"
round
>
<q-menu>
<q-list
@ -423,8 +425,8 @@ onMounted(async () => {});
: null
"
>
<q-item-section avatar>
<q-icon :color="item.color" :name="item.icon" />
<q-item-section avatar style="min-width:20px;">
<q-icon size="17px" :color="item.color" :name="item.icon" />
</q-item-section>
<div v-if="prop.node.orgLevel === 0">
<q-item-section
@ -468,6 +470,8 @@ onMounted(async () => {});
icon="mdi-dots-vertical"
class="q-pa-none q-ml-xs"
color="grey-13"
size="12px"
round
>
<q-menu>
<q-list
@ -483,8 +487,8 @@ onMounted(async () => {});
onClickDetail(prop.node.orgTreeId, prop.node.orgLevel)
"
>
<q-item-section avatar>
<q-icon :color="item.color" :name="item.icon" />
<q-item-section avatar style="min-width:20px;">
<q-icon size="17px" :color="item.color" :name="item.icon" />
</q-item-section>
<q-item-section>{{ item.label }}</q-item-section>
</q-item>
@ -532,7 +536,7 @@ onMounted(async () => {});
.tree-container {
overflow: auto;
height: 60vh;
border: 1px solid rgb(210, 210, 210);
border: 1px solid #E6E6E7;
border-radius: 10px;
}
</style>