hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

บรรจุ แต่งตั้ง ===> ปรับ ui

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-11-29 15:58:37 +07:00
parent 38120c26ad
commit cd3ceaae97
18 changed files with 476 additions and 523 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/modules/05_placement/components/AppointEmployee/DialogOrders.vue
View file

@ -177,7 +177,6 @@ function filterSelectOrder() {
*/
function filterSelector(val: string, update: Function) {
update(() => {
commandType.value = val ? "" : commandType.value;
commandOp.value = commandMainOp.value.filter(
(v: ListCommand) => v.name.indexOf(val) > -1
);
@ -225,7 +224,9 @@ watch(
emit-value
map-options
use-input
style="width: 380px; max-width: auto"
hide-selected
fill-input
style="width: 350px"
@update:model-value="filterSelectOrder"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn
@ -251,13 +252,7 @@ watch(
placeholder="ค้นหา"
>
<template v-slot:append>
<q-icon v-if="filterKeyword2 == ''" name="search" />
<q-icon
v-if="filterKeyword2 !== ''"
name="clear"
class="cursor-pointer"
@click="Reset"
/>
<q-icon name="search" />
</template>
</q-input>
<q-select

13
src/modules/05_placement/components/AppointMent/DialogOrders.vue
View file

@ -196,7 +196,6 @@ function filterSelectOrder() {
*/
function filterSelector(val: string, update: Function) {
update(() => {
commandType.value = val ? "" : commandType.value;
commandOp.value = commandMainOp.value.filter(
(v: ListCommand) => v.name.indexOf(val) > -1
);
@ -246,7 +245,8 @@ watch(
emit-value
map-options
use-input
style="width: 350px; max-width: auto"
hide-selected
fill-input
@update:model-value="filterSelectOrder"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn
@ -272,13 +272,7 @@ watch(
placeholder="ค้นหา"
>
<template v-slot:append>
<q-icon v-if="filterKeyword2 == ''" name="search" />
<q-icon
v-if="filterKeyword2 !== ''"
name="clear"
class="cursor-pointer"
@click="Reset"
/>
<q-icon name="search" />
</template>
</q-input>
<q-select
@ -292,7 +286,6 @@ watch(
map-options
:options="columns2"
option-value="name"
style="min-width: 140px"
/>
</div>

194
src/modules/05_placement/components/Help-Government/DialogOrders.vue
View file

@ -1,33 +1,25 @@
<script setup lang="ts">
import { ref, watch,computed } from "vue";
import { ref, watch, computed } from "vue";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useTransferDataStore } from "@/modules/05_placement/store";
/**
* importType
*/
/** importType*/
import type { QTableProps } from "quasar";
import type { officerType } from "@/modules/05_placement/interface/response/officer";
/**
* importComponents
*/
/** importComponents*/
import DialogHeader from "@/components/DialogHeader.vue";
import DialogCreateCommand from "@/modules/18_command/components/DialogCreateCommand.vue";
/**
* use
*/
/** use*/
const $q = useQuasar();
const { statusText } = useTransferDataStore();
const { dialogConfirm, findOrgNameOld, findPosMasterNoOld, date2Thai } =
useCounterMixin();
/**
* props
*/
/** props*/
const props = defineProps({
Modal: Boolean,
closeModal: Function,
@ -37,9 +29,7 @@ const props = defineProps({
});
const emit = defineEmits(["update:filterKeyword2", "update:selected"]);
/**
* Table
*/
/** Table*/
const columns2 = ref<QTableProps["columns"]>([
{
name: "no",
@ -177,7 +167,8 @@ const visibleColumns2 = ref<string[]>([
"status",
]);
const selected = ref<officerType[]>([]); //รายการที่เลือก
const dataMapToSend = computed(() => {
const dataMapToSend = computed(() => {
return selected.value.map((i: any) => ({
id: i.id,
profileId: i.profileId,
@ -211,11 +202,6 @@ function updateInput(value: string) {
emit("update:filterKeyword2", value);
}
/** รีเซ็ตค่าในช่องค้นหา*/
function Reset() {
emit("update:filterKeyword2", "");
}
/**
* เมื่อ props.modal เป็น true
* กำหนดให้ selected เป็นค่าว่าง
@ -229,104 +215,100 @@ watch(
}
);
</script>
<template>
<q-dialog v-model="props.Modal" persistent>
<q-card style="width: 1200px; max-width: 80vw">
<DialogHeader :tittle="'ส่งไปออกคำสั่งช่วยราชการ'" :close="closeModal" />
<q-separator />
<q-card-section>
<div class="row justify-end">
<div class="col-5">
<q-toolbar style="padding: 0">
<q-input
borderless
outlined
dense
debounce="300"
:model-value="filterKeyword2"
@update:model-value="updateInput"
placeholder="ค้นหา"
style="width: 850px; max-width: auto"
>
<template v-slot:append>
<q-icon v-if="filterKeyword2 == ''" name="search" />
<q-icon
v-if="filterKeyword2 !== ''"
name="clear"
class="cursor-pointer"
@click="Reset"
/>
</template>
</q-input>
<q-select
v-model="visibleColumns2"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns2"
option-value="name"
style="min-width: 140px"
class="gt-xs q-ml-sm"
/>
</q-toolbar>
</div>
</div>
<d-table
:columns="columns2"
:rows="rows2"
:filter="filterKeyword2"
row-key="id"
class="custom-header-table"
:visible-columns="visibleColumns2"
selection="multiple"
v-model:selected="selected"
>
<template v-slot:header-selection="scope">
<q-checkbox
keep-color
color="primary"
<div class="row col-12 q-col-gutter-sm">
<div class="row col-12">
<q-space />
<q-input
borderless
outlined
dense
v-model="scope.selected"
debounce="300"
:model-value="filterKeyword2"
@update:model-value="updateInput"
placeholder="ค้นหา"
>
<template v-slot:append> <q-icon name="search" /> </template>
</q-input>
<q-select
v-model="visibleColumns2"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns2"
option-value="name"
style="min-width: 140px"
class="gt-xs q-ml-sm"
/>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td>
</div>
<div class="col-12">
<d-table
:columns="columns2"
:rows="rows2"
:filter="filterKeyword2"
row-key="id"
class="custom-header-table"
:visible-columns="visibleColumns2"
selection="multiple"
v-model:selected="selected"
>
<template v-slot:header-selection="scope">
<q-checkbox
keep-color
color="primary"
dense
v-model="props.selected"
v-model="scope.selected"
/>
</q-td>
<q-td v-for="col in props.cols" :key="col.id">
<div v-if="col.name === 'no'">
{{ props.rowIndex + 1 }}
</div>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td>
<q-checkbox
keep-color
color="primary"
dense
v-model="props.selected"
/>
</q-td>
<q-td v-for="col in props.cols" :key="col.id">
<div v-if="col.name === 'no'">
{{ props.rowIndex + 1 }}
</div>
<div
v-else
:class="
col.name === 'organizationPositionOld' ||
col.name === 'organization'
? 'table_ellipsis'
: ''
"
>
{{
col.value == null ? "" : col.value == "" ? "-" : col.value
}}
</div>
</q-td>
</q-tr>
</template>
</d-table>
<div
v-else
:class="
col.name === 'organizationPositionOld' ||
col.name === 'organization'
? 'table_ellipsis'
: ''
"
>
{{
col.value == null
? ""
: col.value == ""
? "-"
: col.value
}}
</div>
</q-td>
</q-tr>
</template>
</d-table>
</div>
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right">

14
src/modules/05_placement/components/Other/DialogOrders.vue
View file

@ -168,7 +168,6 @@ function clickAddlist() {
*/
function filterSelector(val: string, update: Function) {
update(() => {
commandType.value = val ? "" : commandType.value;
commandOp.value = commandMainOp.value.filter(
(v: ListCommand) => v.name.indexOf(val) > -1
);
@ -218,7 +217,9 @@ watch(
emit-value
map-options
use-input
style="width: 350px; max-width: auto"
hide-selected
fill-input
style="width: 480px; max-width: auto"
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn
) "
@ -243,13 +244,7 @@ watch(
placeholder="ค้นหา"
>
<template v-slot:append>
<q-icon v-if="filterKeyword2 == ''" name="search" />
<q-icon
v-if="filterKeyword2 !== ''"
name="clear"
class="cursor-pointer"
@click="Reset"
/>
<q-icon name="search" />
</template>
</q-input>
<q-select
@ -263,7 +258,6 @@ watch(
map-options
:options="columns2"
option-value="name"
style="min-width: 140px"
/>
</div>

9
src/modules/05_placement/components/PersonalList/DialogOrders.vue
View file

@ -236,6 +236,8 @@ watch(
emit-value
map-options
use-input
hide-selected
fill-input
style="width: 350px; max-width: auto"
@update:model-value="filterSelectOrder"
@filter="(inputValue:any,
@ -259,13 +261,13 @@ watch(
style="width: 200px; max-width: auto"
>
<template v-slot:append>
<q-icon v-if="filter == ''" name="search" />
<q-icon
<q-icon name="search" />
<!-- <q-icon
v-if="filter !== ''"
name="clear"
class="cursor-pointer"
@click="filter = ''"
/>
/> -->
</template>
</q-input>
<q-select
@ -279,7 +281,6 @@ watch(
map-options
:options="columns"
option-value="name"
style="min-width: 140px"
class="gt-xs q-ml-sm"
/>

6
src/modules/05_placement/components/PersonalList/TableView.vue
View file

@ -240,13 +240,13 @@ function onUpdateNewRows() {
class="q-ml-sm"
>
<template v-slot:append>
<q-icon v-if="inputfilter == ''" name="search" />
<q-icon
<q-icon name="search" />
<!-- <q-icon
v-if="inputfilter !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
/> -->
</template>
</q-input>
<!-- แสดง table ใน คอลัมน์ -->

247
src/modules/05_placement/components/Receive/DialogOrders.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, watchEffect,computed } from "vue";
import { ref, watchEffect, computed } from "vue";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
@ -171,140 +171,147 @@ watchEffect(() => {
<template>
<q-dialog v-model="props.modal" persistent>
<q-card style="width: 1200px; max-width: 80vw">
<DialogHeader :tittle="'ส่งไปออกคำสั่งรับโอน'" :close="clickClose" />
<DialogHeader :tittle="'ส่งไปออกsคำสั่งรับโอน'" :close="clickClose" />
<q-separator />
<q-card-section>
<div class="row justify-end">
<div class="col-5">
<q-toolbar style="padding: 0">
<q-input
borderless
outlined
dense
debounce="300"
:model-value="filterKeyword2"
@update:model-value="updateInput"
placeholder="ค้นหา"
style="width: 850px; max-width: auto"
>
<template v-slot:append>
<q-icon v-if="filterKeyword2 == ''" name="search" />
<q-icon
v-if="filterKeyword2 !== ''"
name="clear"
class="cursor-pointer"
@click="onReset"
/>
</template>
</q-input>
<q-select
v-model="visibleColumns2"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns2"
option-value="name"
style="min-width: 140px"
class="gt-xs q-ml-sm"
/>
</q-toolbar>
</div>
</div>
<d-table
:columns="columns2"
:rows="rows2"
:filter="filterKeyword2"
row-key="id"
flat
:visible-columns="visibleColumns2"
selection="multiple"
v-model:selected="selected"
>
<template v-slot:header-selection="scope">
<q-checkbox
keep-color
color="primary"
<div class="row col-12 q-col-gutter-sm">
<div class="row col-12">
<q-space />
<q-input
borderless
outlined
dense
v-model="scope.selected"
debounce="300"
:model-value="filterKeyword2"
@update:model-value="updateInput"
placeholder="ค้นหา"
>
<template v-slot:append>
<q-icon name="search" />
<!-- <q-icon
v-if="filterKeyword2 !== ''"
name="clear"
class="cursor-pointer"
@click="onReset"
/> -->
</template>
</q-input>
<q-select
v-model="visibleColumns2"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns2"
option-value="name"
style="min-width: 140px"
class="gt-xs q-ml-sm"
/>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td>
</div>
<div class="col-12">
<d-table
:columns="columns2"
:rows="rows2"
:filter="filterKeyword2"
row-key="id"
flat
:visible-columns="visibleColumns2"
selection="multiple"
v-model:selected="selected"
>
<template v-slot:header-selection="scope">
<q-checkbox
keep-color
color="primary"
dense
v-model="props.selected"
v-model="scope.selected"
/>
</q-td>
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="props.nextPage(props.row.id)"
>
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="col.name == 'fullname'">
{{
props.row.firstName
? `${props.row.prefix ?? ""}${
props.row.firstName ?? ""
} ${props.row.lastName ?? ""}`
: "-"
}}
</div>
<div v-else-if="col.name == 'dateOfBirth'">
{{
props.row.dateOfBirth
? date2Thai(props.row.dateOfBirth)
: "-"
}}
</div>
<div v-else-if="col.name == 'createdAt'">
{{
props.row.createdAt ? date2Thai(props.row.createdAt) : "-"
}}
</div>
<div v-else-if="col.name == 'organizationName'">
<div class="col-4">
<div class="text-weight-medium">
{{ props.row.root !== null ? props.row.root : "-" }}
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td>
<q-checkbox
keep-color
color="primary"
dense
v-model="props.selected"
/>
</q-td>
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="props.nextPage(props.row.id)"
>
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="col.name == 'fullname'">
{{
props.row.rootShortName !== null
? `(${props.row.rootShortName})`
: ""
props.row.firstName
? `${props.row.prefix ?? ""}${
props.row.firstName ?? ""
} ${props.row.lastName ?? ""}`
: "-"
}}
</div>
<div class="text-weight-light">
<div v-else-if="col.name == 'dateOfBirth'">
{{
props.row.nodeName !== null ? props.row.nodeName : ""
}}
{{
props.row.nodeShortName !== null
? `(${props.row.nodeShortName}${props.row.posMasterNo})`
: ""
props.row.dateOfBirth
? date2Thai(props.row.dateOfBirth)
: "-"
}}
</div>
</div>
</div>
<div v-else-if="col.name == 'status'">
{{ props.row.status ? statusText(props.row.status) : "-" }}
</div>
<div v-else>
{{ col.value ? col.value : "-" }}
</div>
</q-td>
</q-tr>
</template>
</d-table>
<div v-else-if="col.name == 'createdAt'">
{{
props.row.createdAt
? date2Thai(props.row.createdAt)
: "-"
}}
</div>
<div v-else-if="col.name == 'organizationName'">
<div class="col-4">
<div class="text-weight-medium">
{{ props.row.root !== null ? props.row.root : "-" }}
{{
props.row.rootShortName !== null
? `(${props.row.rootShortName})`
: ""
}}
</div>
<div class="text-weight-light">
{{
props.row.nodeName !== null
? props.row.nodeName
: ""
}}
{{
props.row.nodeShortName !== null
? `(${props.row.nodeShortName}${props.row.posMasterNo})`
: ""
}}
</div>
</div>
</div>
<div v-else-if="col.name == 'status'">
{{
props.row.status ? statusText(props.row.status) : "-"
}}
</div>
<div v-else>
{{ col.value ? col.value : "-" }}
</div>
</q-td>
</q-tr>
</template>
</d-table>
</div>
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right">

31
src/modules/05_placement/components/Receive/ReceiveAddPerson.vue
View file

@ -4,11 +4,9 @@ import { useQuasar } from "quasar";
import { useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { useProfileDataStore } from "@/modules/08_registryEmployee/store";
import http from "@/plugins/http";
import config from "@/app.config";
import type { QForm } from "quasar";
import type {
DataOption,
DataOptioninfo,
@ -18,8 +16,6 @@ import type {
FormAddPerson,
} from "@/modules/05_placement/interface/index/ProfileType";
// import HeaderTop from "@/modules/08_registryEmployee/components/AddEmployee/HeaderTop.vue";
const retireDate = ref<Date>();
const router = useRouter();
const $q = useQuasar();
@ -35,8 +31,6 @@ const {
dialogConfirm,
} = mixin;
const profileStore = useProfileDataStore();
const age = ref<string | null>("");
const defaultCitizenData = ref<string>("");
const informaData = ref<FormAddPerson>({
@ -210,39 +204,40 @@ async function checkCitizen(id: string) {
* @param refData ประเภทของตัวเลือก
*/
function filterSelector(val: string, update: Function, refData: string) {
const newVal = val.toLowerCase();
switch (refData) {
case "prefixOps":
update(() => {
Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
(v: DataOption) => v.name.toLowerCase().indexOf(newVal) > -1
);
});
break;
case "genderOps":
update(() => {
Ops.value.genderOps = OpsFilter.value.genderOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
(v: DataOption) => v.name.toLowerCase().indexOf(newVal) > -1
);
});
break;
case "bloodOps":
update(() => {
Ops.value.bloodOps = OpsFilter.value.bloodOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
(v: DataOption) => v.name.toLowerCase().indexOf(newVal) > -1
);
});
break;
case "statusOps":
update(() => {
Ops.value.statusOps = OpsFilter.value.statusOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
(v: DataOption) => v.name.toLowerCase().indexOf(newVal) > -1
);
});
break;
case "religionOps":
update(() => {
Ops.value.religionOps = OpsFilter.value.religionOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
(v: DataOption) => v.name.toLowerCase().indexOf(newVal) > -1
);
});
break;
@ -493,6 +488,12 @@ onMounted(async () => {
},
]"
emit-value
use-input
hide-selected
fill-input
@filter="(inputValue:string,
doneFn: Function) => filterSelector(inputValue, doneFn, 'prefixOps'
)"
/>
</div>
<div class="col-3">
@ -588,6 +589,8 @@ onMounted(async () => {
dense
outlined
use-input
hide-selected
fill-input
clearable
lazy-rules
emit-value
@ -610,6 +613,8 @@ onMounted(async () => {
dense
outlined
use-input
hide-selected
fill-input
clearable
lazy-rules
emit-value
@ -654,6 +659,8 @@ onMounted(async () => {
dense
outlined
use-input
hide-selected
fill-input
clearable
lazy-rules
emit-value
@ -676,6 +683,8 @@ onMounted(async () => {
dense
outlined
use-input
hide-selected
fill-input
clearable
lazy-rules
emit-value

156
src/modules/05_placement/components/Repatriate/DialogOrders.vue
View file

@ -195,96 +195,88 @@ watch(
<DialogHeader :tittle="'ส่งไปออกคำสั่งส่งตัวกลับ'" :close="closeModal" />
<q-separator />
<q-card-section>
<div class="row justify-end">
<div class="col-5">
<q-toolbar style="padding: 0">
<q-input
borderless
outlined
dense
debounce="300"
:model-value="filterKeyword2"
@update:model-value="updateInput"
placeholder="ค้นหา"
style="width: 850px; max-width: auto"
>
<template v-slot:append>
<q-icon v-if="filterKeyword2 == ''" name="search" />
<q-icon
v-if="filterKeyword2 !== ''"
name="clear"
class="cursor-pointer"
@click="Reset"
/>
</template>
</q-input>
<q-select
v-model="visibleColumns2"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns2"
option-value="name"
style="min-width: 140px"
class="gt-xs q-ml-sm"
/>
</q-toolbar>
</div>
</div>
<d-table
:columns="columns2"
:rows="rows2"
:filter="filterKeyword2"
row-key="id"
class="custom-header-table"
:visible-columns="visibleColumns2"
selection="multiple"
v-model:selected="selected"
>
<template v-slot:header-selection="scope">
<q-checkbox
keep-color
color="primary"
<div class="row col-12 q-col-gutter-sm">
<div class="row col-12">
<q-space />
<q-input
borderless
outlined
dense
v-model="scope.selected"
debounce="300"
:model-value="filterKeyword2"
@update:model-value="updateInput"
placeholder="ค้นหา"
>
<template v-slot:append>
<q-icon name="search" />
</template>
</q-input>
<q-select
v-model="visibleColumns2"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns2"
option-value="name"
style="min-width: 140px"
class="gt-xs q-ml-sm"
/>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td>
</div>
<div class="col-12">
<d-table
:columns="columns2"
:rows="rows2"
:filter="filterKeyword2"
row-key="id"
class="custom-header-table"
:visible-columns="visibleColumns2"
selection="multiple"
v-model:selected="selected"
>
<template v-slot:header-selection="scope">
<q-checkbox
keep-color
color="primary"
dense
v-model="props.selected"
v-model="scope.selected"
/>
</q-td>
<q-td v-for="col in props.cols" :key="col.id">
<div v-if="col.name === 'no'">
{{ props.rowIndex + 1 }}
</div>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td>
<q-checkbox
keep-color
color="primary"
dense
v-model="props.selected"
/>
</q-td>
<q-td v-for="col in props.cols" :key="col.id">
<div v-if="col.name === 'no'">
{{ props.rowIndex + 1 }}
</div>
<div
v-else
:class="
col.name === 'organizationPositionOld' ||
col.name === 'organization'
? 'table_ellipsis'
: ''
"
>
{{ col.value ? col.value : "-" }}
</div>
</q-td>
</q-tr>
</template>
</d-table>
<div
v-else
:class="
col.name === 'organizationPositionOld' ||
col.name === 'organization'
? 'table_ellipsis'
: ''
"
>
{{ !col.value ? "-" : col.value }}
</div>
</q-td>
</q-tr>
</template>
</d-table>
</div>
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right">

160
src/modules/05_placement/components/Transfer/DialogOrders.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, watch,computed } from "vue";
import { ref, watch, computed } from "vue";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
@ -160,94 +160,94 @@ watch(
<DialogHeader :tittle="'ส่งไปออกคำสั่ง'" :close="closeModal" />
<q-separator />
<q-card-section>
<div class="row justify-end">
<div class="col-5">
<q-toolbar style="padding: 0">
<q-input
borderless
outlined
dense
debounce="300"
v-model="filter"
placeholder="ค้นหา"
style="width: 850px; max-width: auto"
>
<template v-slot:append>
<q-icon v-if="filter == ''" name="search" />
<q-icon
v-if="filter !== ''"
name="clear"
class="cursor-pointer"
@click="filter = ''"
/>
</template>
</q-input>
<q-select
v-model="visibleColumns2"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns2"
option-value="name"
style="min-width: 140px"
class="gt-xs q-ml-sm"
/>
</q-toolbar>
</div>
</div>
<d-table
:columns="columns2"
:rows="rows"
:filter="filter"
row-key="id"
:visible-columns="visibleColumns2"
selection="multiple"
v-model:selected="selected"
>
<template v-slot:header-selection="scope">
<q-checkbox
keep-color
color="primary"
<div class="row col-12 q-col-gutter-sm">
<div class="row col-12">
<q-space />
<q-input
borderless
outlined
dense
v-model="scope.selected"
debounce="300"
v-model="filter"
placeholder="ค้นหา"
>
<template v-slot:append>
<q-icon name="search" />
<!-- <q-icon
v-if="filter !== ''"
name="clear"
class="cursor-pointer"
@click="filter = ''"
/> -->
</template>
</q-input>
<q-select
v-model="visibleColumns2"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns2"
option-value="name"
style="min-width: 140px"
class="gt-xs q-ml-sm"
/>
</template>
</div>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td>
<div class="col-12">
<d-table
:columns="columns2"
:rows="rows"
:filter="filter"
row-key="id"
:visible-columns="visibleColumns2"
selection="multiple"
v-model:selected="selected"
>
<template v-slot:header-selection="scope">
<q-checkbox
keep-color
color="primary"
dense
v-model="props.selected"
v-model="scope.selected"
/>
</q-td>
<q-td v-for="col in props.cols" :key="col.id">
<div v-if="col.name === 'no'">
{{ props.rowIndex + 1 }}
</div>
</template>
<div
v-else
:class="
col.name === 'organizationPositionOld' ||
col.name === 'organization'
? 'table_ellipsis'
: ''
"
>
{{ col.value ? col.value : "-" }}
</div>
</q-td>
</q-tr>
</template>
</d-table>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td>
<q-checkbox
keep-color
color="primary"
dense
v-model="props.selected"
/>
</q-td>
<q-td v-for="col in props.cols" :key="col.id">
<div v-if="col.name === 'no'">
{{ props.rowIndex + 1 }}
</div>
<div
v-else
:class="
col.name === 'organizationPositionOld' ||
col.name === 'organization'
? 'table_ellipsis'
: ''
"
>
{{ col.value ? col.value : "-" }}
</div>
</q-td>
</q-tr>
</template>
</d-table>
</div>
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right">