UI ออกคำสั่ง Tab3
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
5316a945a8
commit
b14834c1d5
2 changed files with 208 additions and 184 deletions
|
|
@ -147,195 +147,217 @@ function getCommandSalaryList(type: string) {
|
||||||
|
|
||||||
function onSubmit() {}
|
function onSubmit() {}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
if (props.commandSysId) {
|
||||||
|
getCommandSalaryList(props.commandSysId);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ฟังก์ชันที่ต้องการนำฟังก์ชันออกไปใช้ใน Components แม่
|
* ฟังก์ชันที่ต้องการนำฟังก์ชันออกไปใช้ใน Components แม่
|
||||||
*/
|
*/
|
||||||
defineExpose({
|
defineExpose({
|
||||||
onSubmit,
|
onSubmit,
|
||||||
});
|
});
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
if (props.commandSysId) {
|
|
||||||
getCommandSalaryList(props.commandSysId);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<q-card-section>
|
<div class="q-col-gutter-sm">
|
||||||
<div class="row q-col-gutter-sm">
|
<div class="col">
|
||||||
<div class="col-12">
|
<q-card>
|
||||||
<q-select
|
<q-card-section>
|
||||||
:class="store.classInput(!store.readonly)"
|
<div class="row q-col-gutter-sm">
|
||||||
:readonly="store.readonly"
|
<div class="col-12">
|
||||||
outlined
|
<q-select
|
||||||
dense
|
:class="store.classInput(!store.readonly)"
|
||||||
lazy-rules
|
:readonly="store.readonly"
|
||||||
borderless
|
outlined
|
||||||
clearable
|
dense
|
||||||
v-model="templatePos"
|
lazy-rules
|
||||||
:label="`${'ต้นแบบ (template) ตำแหน่ง'}`"
|
borderless
|
||||||
option-label="name"
|
clearable
|
||||||
:options="ListCommandSalary"
|
v-model="templatePos"
|
||||||
option-value="name"
|
:label="`${'ต้นแบบ (template) ตำแหน่ง'}`"
|
||||||
hide-bottom-space
|
option-label="name"
|
||||||
emit-value
|
:options="ListCommandSalary"
|
||||||
use-input
|
option-value="name"
|
||||||
input-debounce="0"
|
hide-bottom-space
|
||||||
@update:modelValue="updatePos"
|
emit-value
|
||||||
@filter="(inputValue: any,
|
use-input
|
||||||
doneFn: Function) => filterSelector(inputValue, doneFn, 'pos'
|
input-debounce="0"
|
||||||
)"
|
@update:modelValue="updatePos"
|
||||||
/>
|
@filter="(inputValue: any,
|
||||||
</div>
|
doneFn: Function) => filterSelector(inputValue, doneFn, 'pos'
|
||||||
<div class="col-12">
|
)"
|
||||||
<q-input
|
|
||||||
:class="store.classInput(!store.readonly)"
|
|
||||||
:readonly="store.readonly"
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
v-model="position"
|
|
||||||
hide-bottom-space
|
|
||||||
:label="`${'ตำแหน่ง'}`"
|
|
||||||
type="textarea"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12 row q-pb-sm items-center">
|
|
||||||
<q-space />
|
|
||||||
|
|
||||||
<div class="items-center" style="display: flex">
|
|
||||||
<!-- ค้นหาข้อความใน table -->
|
|
||||||
<q-input
|
|
||||||
standout
|
|
||||||
dense
|
|
||||||
v-model="filter"
|
|
||||||
ref="filterRef"
|
|
||||||
outlined
|
|
||||||
debounce="300"
|
|
||||||
placeholder="ค้นหา"
|
|
||||||
style="max-width: 200px"
|
|
||||||
>
|
|
||||||
<template v-slot:append>
|
|
||||||
<q-icon v-if="filter == ''" name="search" />
|
|
||||||
<q-icon
|
|
||||||
v-if="filter !== ''"
|
|
||||||
name="clear"
|
|
||||||
class="cursor-pointer"
|
|
||||||
@click="filter = ''"
|
|
||||||
/>
|
/>
|
||||||
</template>
|
</div>
|
||||||
</q-input>
|
<div class="col-12">
|
||||||
<!-- แสดงคอลัมน์ใน table -->
|
<q-input
|
||||||
<q-select
|
:class="store.classInput(!store.readonly)"
|
||||||
v-model="visibleColumns"
|
:readonly="store.readonly"
|
||||||
:display-value="$q.lang.table.columns"
|
outlined
|
||||||
multiple
|
dense
|
||||||
outlined
|
v-model="position"
|
||||||
dense
|
hide-bottom-space
|
||||||
:options="columns"
|
:label="`${'ตำแหน่ง'}`"
|
||||||
options-dense
|
type="textarea"
|
||||||
option-value="name"
|
/>
|
||||||
map-options
|
</div>
|
||||||
emit-value
|
</div>
|
||||||
style="min-width: 150px"
|
</q-card-section>
|
||||||
class="gt-xs q-ml-sm"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12">
|
<q-separator />
|
||||||
<d-table
|
|
||||||
:rows="rows"
|
|
||||||
:columns="columns"
|
|
||||||
:visible-columns="visibleColumns"
|
|
||||||
:filter="filter"
|
|
||||||
row-key="name"
|
|
||||||
>
|
|
||||||
<template v-slot:header="props">
|
|
||||||
<q-tr :props="props">
|
|
||||||
<q-th auto-width />
|
|
||||||
<q-th auto-width />
|
|
||||||
<q-th auto-width />
|
|
||||||
<q-th auto-width />
|
|
||||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
|
||||||
<span class="text-weight-medium">{{ col.label }}</span>
|
|
||||||
</q-th>
|
|
||||||
</q-tr>
|
|
||||||
</template>
|
|
||||||
<template v-slot:body="props">
|
|
||||||
<q-tr :props="props">
|
|
||||||
<q-td auto-width>
|
|
||||||
<q-btn
|
|
||||||
v-if="!store.readonly"
|
|
||||||
dense
|
|
||||||
flat
|
|
||||||
round
|
|
||||||
:color="props.rowIndex + 1 == 1 ? 'grey' : 'green'"
|
|
||||||
:disable="props.rowIndex + 1 == 1"
|
|
||||||
@click="onSawpPos(props, 'up')"
|
|
||||||
icon="mdi-arrow-up-bold"
|
|
||||||
>
|
|
||||||
<q-tooltip>เลื่อนลำดับขึ้น</q-tooltip>
|
|
||||||
</q-btn>
|
|
||||||
</q-td>
|
|
||||||
<q-td auto-width>
|
|
||||||
<q-btn
|
|
||||||
v-if="!store.readonly"
|
|
||||||
dense
|
|
||||||
flat
|
|
||||||
round
|
|
||||||
:color="rows.length == props.rowIndex + 1 ? 'grey' : 'red'"
|
|
||||||
:disable="rows.length == props.rowIndex + 1"
|
|
||||||
@click="onSawpPos(props, 'down')"
|
|
||||||
icon="mdi-arrow-down-bold"
|
|
||||||
>
|
|
||||||
<q-tooltip>เลื่อนลำดับลง</q-tooltip>
|
|
||||||
</q-btn>
|
|
||||||
</q-td>
|
|
||||||
<!-- v-if="statuscode !== true" -->
|
|
||||||
<q-td auto-width>
|
|
||||||
<q-btn
|
|
||||||
v-if="!store.readonly"
|
|
||||||
dense
|
|
||||||
flat
|
|
||||||
round
|
|
||||||
color="blue"
|
|
||||||
@click="selectModal(props.row)"
|
|
||||||
icon="mdi-cash-multiple"
|
|
||||||
>
|
|
||||||
<q-tooltip>เงินเดือน</q-tooltip>
|
|
||||||
</q-btn>
|
|
||||||
</q-td>
|
|
||||||
|
|
||||||
<q-td auto-width>
|
<q-card-actions align="right" v-if="!store.readonly">
|
||||||
<q-btn
|
<q-btn label="บันทึก" color="public" />
|
||||||
v-if="!store.readonly"
|
</q-card-actions>
|
||||||
dense
|
</q-card>
|
||||||
flat
|
|
||||||
round
|
|
||||||
color="red"
|
|
||||||
@click="onDelete(props.row.personalId)"
|
|
||||||
icon="mdi-delete"
|
|
||||||
>
|
|
||||||
<q-tooltip>ลบข้อมูล</q-tooltip>
|
|
||||||
</q-btn>
|
|
||||||
</q-td>
|
|
||||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
|
||||||
{{ col.value ?? "-" }}
|
|
||||||
</q-td>
|
|
||||||
</q-tr>
|
|
||||||
</template>
|
|
||||||
</d-table>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</q-card-section>
|
<div class="col">
|
||||||
|
<q-card>
|
||||||
|
<q-card-section>
|
||||||
|
<div class="row q-col-gutter-sm">
|
||||||
|
<div class="col-12 row q-pb-sm items-center">
|
||||||
|
<q-space />
|
||||||
|
|
||||||
<q-separator />
|
<div class="items-center" style="display: flex">
|
||||||
|
<!-- ค้นหาข้อความใน table -->
|
||||||
|
<q-input
|
||||||
|
standout
|
||||||
|
dense
|
||||||
|
v-model="filter"
|
||||||
|
ref="filterRef"
|
||||||
|
outlined
|
||||||
|
debounce="300"
|
||||||
|
placeholder="ค้นหา"
|
||||||
|
style="max-width: 200px"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
<!-- แสดงคอลัมน์ใน table -->
|
||||||
|
<q-select
|
||||||
|
v-model="visibleColumns"
|
||||||
|
:display-value="$q.lang.table.columns"
|
||||||
|
multiple
|
||||||
|
outlined
|
||||||
|
dense
|
||||||
|
:options="columns"
|
||||||
|
options-dense
|
||||||
|
option-value="name"
|
||||||
|
map-options
|
||||||
|
emit-value
|
||||||
|
style="min-width: 150px"
|
||||||
|
class="gt-xs q-ml-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12">
|
||||||
|
<d-table
|
||||||
|
:rows="rows"
|
||||||
|
:columns="columns"
|
||||||
|
:visible-columns="visibleColumns"
|
||||||
|
:filter="filter"
|
||||||
|
row-key="name"
|
||||||
|
>
|
||||||
|
<template v-slot:header="props">
|
||||||
|
<q-tr :props="props">
|
||||||
|
<q-th auto-width />
|
||||||
|
<q-th auto-width />
|
||||||
|
<q-th auto-width />
|
||||||
|
<q-th auto-width />
|
||||||
|
<q-th
|
||||||
|
v-for="col in props.cols"
|
||||||
|
:key="col.name"
|
||||||
|
:props="props"
|
||||||
|
>
|
||||||
|
<span class="text-weight-medium">{{ col.label }}</span>
|
||||||
|
</q-th>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
<template v-slot:body="props">
|
||||||
|
<q-tr :props="props">
|
||||||
|
<q-td auto-width>
|
||||||
|
<q-btn
|
||||||
|
v-if="!store.readonly"
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
:color="props.rowIndex + 1 == 1 ? 'grey' : 'green'"
|
||||||
|
:disable="props.rowIndex + 1 == 1"
|
||||||
|
@click="onSawpPos(props, 'up')"
|
||||||
|
icon="mdi-arrow-up-bold"
|
||||||
|
>
|
||||||
|
<q-tooltip>เลื่อนลำดับขึ้น</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</q-td>
|
||||||
|
<q-td auto-width>
|
||||||
|
<q-btn
|
||||||
|
v-if="!store.readonly"
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
:color="
|
||||||
|
rows.length == props.rowIndex + 1 ? 'grey' : 'red'
|
||||||
|
"
|
||||||
|
:disable="rows.length == props.rowIndex + 1"
|
||||||
|
@click="onSawpPos(props, 'down')"
|
||||||
|
icon="mdi-arrow-down-bold"
|
||||||
|
>
|
||||||
|
<q-tooltip>เลื่อนลำดับลง</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</q-td>
|
||||||
|
<!-- v-if="statuscode !== true" -->
|
||||||
|
<q-td auto-width>
|
||||||
|
<q-btn
|
||||||
|
v-if="!store.readonly"
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
color="blue"
|
||||||
|
@click="selectModal(props.row)"
|
||||||
|
icon="mdi-cash-multiple"
|
||||||
|
>
|
||||||
|
<q-tooltip>เงินเดือน</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</q-td>
|
||||||
|
|
||||||
<q-card-actions align="right" v-if="!store.readonly">
|
<q-td auto-width>
|
||||||
<q-btn label="บันทึก" color="public" />
|
<q-btn
|
||||||
</q-card-actions>
|
v-if="!store.readonly"
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
round
|
||||||
|
color="red"
|
||||||
|
@click="onDelete(props.row.personalId)"
|
||||||
|
icon="mdi-delete"
|
||||||
|
>
|
||||||
|
<q-tooltip>ลบข้อมูล</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</q-td>
|
||||||
|
<q-td
|
||||||
|
v-for="col in props.cols"
|
||||||
|
:key="col.name"
|
||||||
|
:props="props"
|
||||||
|
>
|
||||||
|
{{ col.value ?? "-" }}
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</d-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
</q-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<DialogAddPerson v-model:modal="modalPerson" />
|
<DialogAddPerson v-model:modal="modalPerson" />
|
||||||
<DialogSalary v-model:modal="modalSalary" :title-name="titleName" />
|
<DialogSalary v-model:modal="modalSalary" :title-name="titleName" />
|
||||||
|
|
|
||||||
|
|
@ -190,16 +190,18 @@ onMounted(async () => {
|
||||||
</q-card>
|
</q-card>
|
||||||
</q-tab-panel>
|
</q-tab-panel>
|
||||||
|
|
||||||
<q-tab-panel style="padding: 0px" name="ListPersons">
|
<q-tab-panel
|
||||||
<q-card>
|
class="bg-grey-2"
|
||||||
<ListPersons
|
style="padding: 0px;"
|
||||||
ref="childListPersonsRef"
|
name="ListPersons"
|
||||||
v-model:is-change-data="isChangeData"
|
>
|
||||||
:on-check-change-data="onCheckChangeData"
|
<ListPersons
|
||||||
:command-sys-id="formCommandList.commandSysId as string"
|
ref="childListPersonsRef"
|
||||||
:fetch-data-command-list="fetchDataCommandList"
|
v-model:is-change-data="isChangeData"
|
||||||
/>
|
:on-check-change-data="onCheckChangeData"
|
||||||
</q-card>
|
:fetch-data-command-list="fetchDataCommandList"
|
||||||
|
:command-sys-id="formCommandList?.commandSysId as string"
|
||||||
|
/>
|
||||||
</q-tab-panel>
|
</q-tab-panel>
|
||||||
|
|
||||||
<q-tab-panel style="padding: 0px" name="ReceivedCopy">
|
<q-tab-panel style="padding: 0px" name="ReceivedCopy">
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue