ยุทธศาสตร์ => Tree
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
1f6baec4c4
commit
e34edf2b47
1 changed files with 235 additions and 38 deletions
|
|
@ -1,57 +1,57 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, watch } from "vue";
|
import { useQuasar } from "quasar";
|
||||||
|
import { ref } from "vue";
|
||||||
|
|
||||||
|
import DialogHeader from "@/components/DialogHeader.vue";
|
||||||
|
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
|
||||||
|
const $q = useQuasar();
|
||||||
|
const { showLoader, hideLoader, dialogConfirm, dialogRemove } =
|
||||||
|
useCounterMixin();
|
||||||
|
|
||||||
|
const ListMenu = ref<any>([
|
||||||
|
{
|
||||||
|
label: "เพิ่ม",
|
||||||
|
icon: "add",
|
||||||
|
type: "ADD",
|
||||||
|
color: "primary",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "แก้ไข",
|
||||||
|
icon: "edit",
|
||||||
|
type: "EDIT",
|
||||||
|
color: "edit",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "ลบ",
|
||||||
|
icon: "delete",
|
||||||
|
type: "DEL",
|
||||||
|
color: "red",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
const nodes = ref<any>([
|
const nodes = ref<any>([
|
||||||
{
|
{
|
||||||
orgTreeName: " แผนพัฒนากรุงเทพมหานคร ระยะ 20 ปี ระยะที่ 3",
|
orgTreeName: " แผนพัฒนากรุงเทพมหานคร ระยะ 20 ปี ระยะที่ 3",
|
||||||
|
level: "0",
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
orgTreeName: "ยุทธศาสตร์ที่ 1",
|
orgTreeName: "ยุทธศาสตร์ที่ 1",
|
||||||
|
level: "1",
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
orgTreeName: "ยุทธศาสตร์ที่ 2",
|
orgTreeName: "ยุทธศาสตร์ที่ 2",
|
||||||
|
level: "2",
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
orgTreeName: "ยุทธศาสตร์ที่ 3",
|
orgTreeName: "ยุทธศาสตร์ที่ 3",
|
||||||
children: [
|
level: "3",
|
||||||
{
|
|
||||||
orgTreeName: "ยุทธศาสตร์ที่ 4",
|
|
||||||
children: [{ orgTreeName: "ยุทธศาสตร์ที่ 2" }],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
|
||||||
orgTreeName: "ยุทธศาสตร์ที่ 1",
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
orgTreeName: "ยุทธศาสตร์ที่ 2",
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
orgTreeName: "ยุทธศาสตร์ที่ 3",
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
orgTreeName: "ยุทธศาสตร์ที่ 4",
|
|
||||||
children: [{ orgTreeName: "ยุทธศาสตร์ที่ 2" }],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
orgTreeName: " แผนพัฒนากรุงเทพมหานคร ระยะ 20 ปี ระยะที่ 2",
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
orgTreeName: "ยุทธศาสตร์ที่ 1",
|
|
||||||
children: [{ orgTreeName: "ยุทธศาสตร์ที่ 2" }],
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
|
@ -62,16 +62,103 @@ const expanded = ref<Array<any>>([]);
|
||||||
const nodeId = ref<string>("");
|
const nodeId = ref<string>("");
|
||||||
|
|
||||||
function updateSelected(data: any) {
|
function updateSelected(data: any) {
|
||||||
console.log(data);
|
|
||||||
nodeId.value = data.orgTreeName;
|
nodeId.value = data.orgTreeName;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function onClickAction(type: string, data: any = null) {
|
||||||
|
switch (type) {
|
||||||
|
case "ADD":
|
||||||
|
onClickOpenDialog(false, data);
|
||||||
|
break;
|
||||||
|
case "EDIT":
|
||||||
|
onClickOpenDialog(true, data);
|
||||||
|
break;
|
||||||
|
case "DEL":
|
||||||
|
onDelete();
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const modalDialog = ref<boolean>(false);
|
||||||
|
const statusEdit = ref<boolean>(false);
|
||||||
|
const strategicName = ref<string>("");
|
||||||
|
const titleDialog = ref<string>("");
|
||||||
|
function onClickOpenDialog(status: boolean = false, data: any = null) {
|
||||||
|
statusEdit.value = status;
|
||||||
|
// if (data) {
|
||||||
|
// titleDialog.value =
|
||||||
|
// data.level === "0"
|
||||||
|
// ? "ยุทธศาสตร์ที่ 1"
|
||||||
|
// : data.level === "1"
|
||||||
|
// ? "ยุทธศาสตร์ย่อย"
|
||||||
|
// : data.level === "2"
|
||||||
|
// ? ""
|
||||||
|
// : data.level === "3"
|
||||||
|
// ? ""
|
||||||
|
// : "";
|
||||||
|
// } else {
|
||||||
|
// titleDialog.value = "ยุทธศาสตร์/แผน";
|
||||||
|
// }
|
||||||
|
|
||||||
|
if (status) {
|
||||||
|
strategicName.value = data.orgTreeName;
|
||||||
|
titleDialog.value =
|
||||||
|
data.level === "0"
|
||||||
|
? "ยุทธศาสตร์"
|
||||||
|
: data.level === "1"
|
||||||
|
? "ยุทธศาสตร์ที่ 1"
|
||||||
|
: data.level === "2"
|
||||||
|
? "ยุทธศาสตร์ย่อย"
|
||||||
|
: data.level === "3"
|
||||||
|
? "กลยุทธ์ที่/เป้าประสงค์ที่"
|
||||||
|
: "";
|
||||||
|
} else {
|
||||||
|
if (data) {
|
||||||
|
titleDialog.value =
|
||||||
|
data.level === "0"
|
||||||
|
? "ยุทธศาสตร์ 1"
|
||||||
|
: data.level === "1"
|
||||||
|
? "ยุทธศาสตร์ย่อย"
|
||||||
|
: data.level === "2"
|
||||||
|
? "กลยุทธ์ที่/เป้าประสงค์ที่"
|
||||||
|
: "";
|
||||||
|
} else {
|
||||||
|
titleDialog.value = "ยุทธศาสตร์";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
modalDialog.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeDialog() {
|
||||||
|
modalDialog.value = false;
|
||||||
|
strategicName.value = "";
|
||||||
|
}
|
||||||
|
|
||||||
|
function onSubmit() {
|
||||||
|
dialogConfirm($q, () => {
|
||||||
|
closeDialog();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function onDelete() {
|
||||||
|
dialogRemove($q, () => {});
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="toptitle text-dark col-12 row items-center">ยุทธศาสตร์</div>
|
<div class="toptitle text-dark col-12 row items-center">ยุทธศาสตร์</div>
|
||||||
<q-card flat bordered class="q-pa-md">
|
<q-card flat bordered class="q-pa-md">
|
||||||
<div class="row q-col-gutter-sm q-pl-sm">
|
<div class="row q-col-gutter-sm q-pl-sm">
|
||||||
<q-toolbar class="text-primary">
|
<q-toolbar class="text-primary">
|
||||||
<q-btn dense flat round color="primary" icon="add">
|
<q-btn
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
color="primary"
|
||||||
|
icon="add"
|
||||||
|
@click.stop="onClickAction('ADD')"
|
||||||
|
>
|
||||||
<q-tooltip>เพิ่มยุทธศาสตร์</q-tooltip>
|
<q-tooltip>เพิ่มยุทธศาสตร์</q-tooltip>
|
||||||
</q-btn>
|
</q-btn>
|
||||||
|
|
||||||
|
|
@ -102,8 +189,8 @@ function updateSelected(data: any) {
|
||||||
<template v-slot:default-header="prop">
|
<template v-slot:default-header="prop">
|
||||||
<q-item
|
<q-item
|
||||||
clickable
|
clickable
|
||||||
|
@click.stop
|
||||||
:active="nodeId == prop.node.orgTreeName"
|
:active="nodeId == prop.node.orgTreeName"
|
||||||
@click.stop="updateSelected(prop.node)"
|
|
||||||
active-class="my-list-link text-primary text-weight-medium"
|
active-class="my-list-link text-primary text-weight-medium"
|
||||||
class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
|
class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
|
||||||
>
|
>
|
||||||
|
|
@ -112,10 +199,120 @@ function updateSelected(data: any) {
|
||||||
{{ prop.node.orgTreeName }}
|
{{ prop.node.orgTreeName }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<q-btn
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
icon="mdi-dots-vertical"
|
||||||
|
class="q-ml-xs"
|
||||||
|
color="grey-13"
|
||||||
|
size="12px"
|
||||||
|
round
|
||||||
|
>
|
||||||
|
<q-menu>
|
||||||
|
<q-list
|
||||||
|
dense
|
||||||
|
v-for="(item, index) in prop.node.level !== '3'
|
||||||
|
? ListMenu
|
||||||
|
: ListMenu.slice(1, 4)"
|
||||||
|
:key="index"
|
||||||
|
style="min-width: 100px"
|
||||||
|
>
|
||||||
|
<q-item
|
||||||
|
clickable
|
||||||
|
v-close-popup
|
||||||
|
@click.stop="onClickAction(item.type, prop.node)"
|
||||||
|
>
|
||||||
|
<q-item-section avatar style="min-width: 20px">
|
||||||
|
<q-icon size="17px" :color="item.color" :name="item.icon" />
|
||||||
|
</q-item-section>
|
||||||
|
|
||||||
|
<div v-if="item.type === 'ADD'">
|
||||||
|
<q-item-section v-if="prop.node.level === '0'">
|
||||||
|
{{ `${item.label}ยุทธศาสตร์ที่ 1` }}
|
||||||
|
</q-item-section>
|
||||||
|
<q-item-section v-if="prop.node.level === '1'">
|
||||||
|
{{ `${item.label}ยุทธศาสตร์ย่อย` }}
|
||||||
|
</q-item-section>
|
||||||
|
<q-item-section v-if="prop.node.level === '2'">
|
||||||
|
{{ `${item.label}กลยุทธ์ที่/เป้าประสงค์` }}
|
||||||
|
</q-item-section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else-if="item.type === 'EDIT'">
|
||||||
|
<q-item-section v-if="prop.node.level === '0'">
|
||||||
|
{{ `${item.label}ยุทธศาสตร์` }}
|
||||||
|
</q-item-section>
|
||||||
|
<q-item-section v-if="prop.node.level === '1'">
|
||||||
|
{{ `${item.label}ยุทธศาสตร์ที่ 1` }}
|
||||||
|
</q-item-section>
|
||||||
|
<q-item-section v-if="prop.node.level === '2'">
|
||||||
|
{{ `${item.label}ยุทธศาสตร์ย่อย` }}
|
||||||
|
</q-item-section>
|
||||||
|
<q-item-section v-if="prop.node.level === '3'">
|
||||||
|
{{ `${item.label}กลยุทธ์ที่/เป้าประสงค์` }}
|
||||||
|
</q-item-section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else>
|
||||||
|
<q-item-section>{{ item.label }}</q-item-section>
|
||||||
|
</div>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-menu>
|
||||||
|
</q-btn>
|
||||||
</q-item>
|
</q-item>
|
||||||
</template>
|
</template>
|
||||||
</q-tree>
|
</q-tree>
|
||||||
</q-card>
|
</q-card>
|
||||||
|
|
||||||
|
<q-dialog v-model="modalDialog" persistent>
|
||||||
|
<q-card style="width: 700px; max-width: 80vw">
|
||||||
|
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||||
|
<DialogHeader
|
||||||
|
:tittle="`${
|
||||||
|
statusEdit ? `แก้ไข${titleDialog}` : `เพิ่ม${titleDialog}`
|
||||||
|
}`"
|
||||||
|
:close="closeDialog"
|
||||||
|
/>
|
||||||
|
<q-separator />
|
||||||
|
|
||||||
|
<q-card-section class="q-pt-none">
|
||||||
|
<div class="row q-pa-md">
|
||||||
|
<div class="col">
|
||||||
|
<q-input
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
v-model="strategicName"
|
||||||
|
label="ชื่อยุทธศาสตร์"
|
||||||
|
hide-bottom-space
|
||||||
|
lazy-rules
|
||||||
|
:rules="[
|
||||||
|
(val:string) =>
|
||||||
|
!!val || `${'กรุณากรอกชื่อยุทธศาสตร์'}`,
|
||||||
|
|
||||||
|
]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
<q-separator />
|
||||||
|
|
||||||
|
<q-card-actions align="right" class="bg-white text-teal">
|
||||||
|
<q-btn
|
||||||
|
dense
|
||||||
|
unelevated
|
||||||
|
label="บันทึก"
|
||||||
|
id="onSubmit"
|
||||||
|
type="submit"
|
||||||
|
color="public"
|
||||||
|
class="q-px-md"
|
||||||
|
>
|
||||||
|
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</q-card-actions>
|
||||||
|
</q-form>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped></style>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue