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

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

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">