table popup ไม่สมบูณ
This commit is contained in:
setthawutttty
parent
580b608c8d
commit
b3aebde52d
2 changed files with 119 additions and 150 deletions
|
|
@ -9,6 +9,7 @@ import DialogCard from "@/modules/05_placement/components/pass/TableDetail.vue";
|
||||||
import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vue";
|
import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vue";
|
||||||
import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue";
|
import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue";
|
||||||
import type { TableName } from "@/modules/05_placement/interface/request/placement";
|
import type { TableName } from "@/modules/05_placement/interface/request/placement";
|
||||||
|
import type Deferment from "@/modules/05_placement/components/pass/Deferment.vue";
|
||||||
import type {
|
import type {
|
||||||
treeTab,
|
treeTab,
|
||||||
DataOption,
|
DataOption,
|
||||||
|
|
@ -1582,79 +1583,6 @@ const listKeyId = (data: any) => {
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="col-xs-12 col-sm-12 col-md-12">
|
|
||||||
<q-input
|
|
||||||
:class="getClass(edit)"
|
|
||||||
:outlined="edit"
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
:readonly="!edit"
|
|
||||||
:borderless="!edit"
|
|
||||||
v-model="salaryClass"
|
|
||||||
:rules="[
|
|
||||||
(val: string) =>
|
|
||||||
!!val || `${'กรุณากรอกตำแหน่ง (รายละเอียด)'}`,
|
|
||||||
]"
|
|
||||||
:label="`${'ตำแหน่ง (รายละเอียด)'}`"
|
|
||||||
@update:modelValue="clickEditRow"
|
|
||||||
hide-bottom-space
|
|
||||||
autogrow
|
|
||||||
>
|
|
||||||
<template v-slot:append>
|
|
||||||
<q-btn
|
|
||||||
color="info"
|
|
||||||
flat
|
|
||||||
dense
|
|
||||||
round
|
|
||||||
size="14px"
|
|
||||||
icon="mdi-plus"
|
|
||||||
@click="templateDetail"
|
|
||||||
:disable="!edit"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row col-xs-12 col-sm-12 col-md-12">
|
|
||||||
<selector
|
|
||||||
:class="getClass(edit)"
|
|
||||||
:outlined="edit"
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
:readonly="!edit"
|
|
||||||
:borderless="!edit"
|
|
||||||
v-model="refSelected"
|
|
||||||
:label="`${'ต้นแบบเอกสารอ้างอิง'}`"
|
|
||||||
@update:modelValue="clickEditRowRef"
|
|
||||||
option-label="name"
|
|
||||||
:options="refOptions"
|
|
||||||
option-value="id"
|
|
||||||
hide-bottom-space
|
|
||||||
use-input
|
|
||||||
input-debounce="0"
|
|
||||||
@filter="(inputValue: any,
|
|
||||||
doneFn: Function) => filterSelector(inputValue, doneFn, '8'
|
|
||||||
)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
|
||||||
<q-input
|
|
||||||
:class="getClass(edit)"
|
|
||||||
:outlined="edit"
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
:readonly="!edit"
|
|
||||||
:borderless="!edit"
|
|
||||||
v-model="salaryRef"
|
|
||||||
:rules="[
|
|
||||||
(val: string) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`,
|
|
||||||
]"
|
|
||||||
:label="`${'เอกสารอ้างอิง'}`"
|
|
||||||
@update:modelValue="clickEditRow"
|
|
||||||
type="textarea"
|
|
||||||
hide-bottom-space
|
|
||||||
/>
|
|
||||||
</div> -->
|
|
||||||
</div>
|
</div>
|
||||||
</q-scroll-area>
|
</q-scroll-area>
|
||||||
</q-card>
|
</q-card>
|
||||||
|
|
@ -1681,56 +1609,58 @@ const listKeyId = (data: any) => {
|
||||||
/>
|
/>
|
||||||
</q-form>
|
</q-form>
|
||||||
<q-dialog v-model="modal_right" persistent>
|
<q-dialog v-model="modal_right" persistent>
|
||||||
<q-card style="width: 800px">
|
<q-card style="width: 800px">
|
||||||
<q-form ref="myForm">
|
|
||||||
<DialogHeader
|
<q-form ref="myForm">
|
||||||
:title="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ${Name}`"
|
<DialogHeader
|
||||||
:close="clickClose"
|
:title="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ${Name}`"
|
||||||
/>
|
:close="clickClose"
|
||||||
<q-separator />
|
/>
|
||||||
<q-card-section class="q-p-sm">
|
<q-separator />
|
||||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
<q-card-section class="q-p-sm">
|
||||||
<q-input
|
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||||
:class="getClass(edit)"
|
<q-input
|
||||||
hide-bottom-space
|
:class="getClass(edit)"
|
||||||
:outlined="edit"
|
hide-bottom-space
|
||||||
dense
|
:outlined="edit"
|
||||||
lazy-rules
|
dense
|
||||||
:rules="[(val) => !!val || `${'กรุณากรอกเหตุผล'}`]"
|
lazy-rules
|
||||||
:readonly="!edit"
|
:rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
|
||||||
:borderless="!edit"
|
:readonly="!edit"
|
||||||
v-model="positionMasterUserNote"
|
:borderless="!edit"
|
||||||
:label="`${'กรอกเหตุผล'}`"
|
v-model="positionMasterUserNote"
|
||||||
@update:modelValue="clickEditRow"
|
:label="`${'กรอกเหตุผล'}`"
|
||||||
type="textarea"
|
@update:model-value="clickEditRow"
|
||||||
/>
|
|
||||||
<q-file
|
type="textarea"
|
||||||
v-if="getNumFile === 1"
|
/>
|
||||||
v-model="files"
|
<q-file
|
||||||
dense
|
v-if="getNumFile === 1"
|
||||||
:label="`${'เลือกไฟล์เอกสารหลักฐาน'}`"
|
v-model="files"
|
||||||
outlined
|
dense
|
||||||
use-chips
|
:label="`${'เลือกไฟล์เอกสารหลักฐาน'}`"
|
||||||
:rules="[(val) => !!val || `${'กรุณาเลือกไฟล์เอกสารหลักฐาน'}`]"
|
outlined
|
||||||
multiple
|
use-chips
|
||||||
@update:modelValue="clickEditRow"
|
:rules="[(val) => !!val || 'กรุณาเลือกไฟล์เอกสารหลักฐาน']"
|
||||||
class="q-py-sm"
|
multiple
|
||||||
>
|
@update:model-value="clickEditRow"
|
||||||
<template v-slot:prepend>
|
class="q-py-sm"
|
||||||
<q-icon name="attach_file" color="primary" />
|
>
|
||||||
</template>
|
<template v-slot:prepend>
|
||||||
</q-file>
|
<q-icon name="attach_file" color="primary" />
|
||||||
</div>
|
</template>
|
||||||
</q-card-section>
|
</q-file>
|
||||||
<q-separator />
|
</div>
|
||||||
<DialogFooter
|
</q-card-section>
|
||||||
v-model:editvisible="edit"
|
<q-separator />
|
||||||
v-model:modalEdit="modalEdit"
|
<DialogFooter
|
||||||
:validate="validateData"
|
v-model:editvisible="edit"
|
||||||
:save="modalEdit ? savePostpone : saveDisclaim"
|
v-model:modalEdit="modalEdit"
|
||||||
/>
|
:validate="validateData"
|
||||||
</q-form>
|
:save="modalEdit ? savePostpone : saveDisclaim"
|
||||||
</q-card>
|
/>
|
||||||
|
</q-form>
|
||||||
|
</q-card>
|
||||||
</q-dialog>
|
</q-dialog>
|
||||||
|
|
||||||
<!-- dialog ขอผ่อนผัน / สละสิทธิ์ -->
|
<!-- dialog ขอผ่อนผัน / สละสิทธิ์ -->
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,9 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, computed } from "vue";
|
import { ref } from "vue";
|
||||||
import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue";
|
import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue";
|
||||||
import { useQuasar } from "quasar";
|
import { useQuasar } from "quasar";
|
||||||
import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vue";
|
import DialogFooter from "@/modules/05_placement/components/pass/DialogFooter.vue";
|
||||||
|
import type { QTableProps } from "quasar";
|
||||||
import type { CheckboxItem } from "@/modules/05_placement/interface/index/Main";
|
import type { CheckboxItem } from "@/modules/05_placement/interface/index/Main";
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
|
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
|
||||||
|
|
@ -24,9 +25,61 @@ const props = defineProps({
|
||||||
default: () => console.log("not function"),
|
default: () => console.log("not function"),
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
const rows = ref<any[]>([
|
||||||
|
{
|
||||||
|
university: props.getdetail.university || "-",
|
||||||
|
degree: props.getdetail.degree || "-",
|
||||||
|
major: props.getdetail.major || "-",
|
||||||
|
graduation: "2022-01-01",
|
||||||
|
},
|
||||||
|
|
||||||
|
]);
|
||||||
|
const columns = ref<QTableProps["columns"]>([
|
||||||
|
{
|
||||||
|
name: "university",
|
||||||
|
align: "center",
|
||||||
|
label: "สถานศึกษา",
|
||||||
|
sortable: true,
|
||||||
|
field: "university",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "degree",
|
||||||
|
align: "center",
|
||||||
|
label: "วุฒิการศึกษา",
|
||||||
|
sortable: true,
|
||||||
|
field: "degree",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "major",
|
||||||
|
align: "center",
|
||||||
|
label: "สาขาวิชาเอก",
|
||||||
|
sortable: true,
|
||||||
|
field: "major",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "graduation",
|
||||||
|
align: "center",
|
||||||
|
label: "วันที่สำเร็จการศึกษา",
|
||||||
|
sortable: true,
|
||||||
|
field: "graduation",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
]);
|
||||||
const myForm = ref<any>();
|
const myForm = ref<any>();
|
||||||
const checkValidate = ref<boolean>(false);
|
const checkValidate = ref<boolean>(false);
|
||||||
const selection = ref<number[]>([]);
|
const selection = ref<number[]>([]);
|
||||||
|
|
||||||
const checkboxItems: CheckboxItem[] = [
|
const checkboxItems: CheckboxItem[] = [
|
||||||
{ id: 1, label: "ไม่เป็นผู้ดำรงตำแหน่งทางการเมือง" },
|
{ id: 1, label: "ไม่เป็นผู้ดำรงตำแหน่งทางการเมือง" },
|
||||||
{
|
{
|
||||||
|
|
@ -168,32 +221,18 @@ const close = async () => {
|
||||||
<div class="contanier-box-mini">
|
<div class="contanier-box-mini">
|
||||||
<q-card bordered class="card-panding">
|
<q-card bordered class="card-panding">
|
||||||
<div class="row items-center q-pa-xs header-text">การศึกษา</div>
|
<div class="row items-center q-pa-xs header-text">การศึกษา</div>
|
||||||
<div class="row q-pa-xs">
|
<q-table
|
||||||
<div class="col-3 header-sub-text">
|
ref="table"
|
||||||
<div class="q-pb-md">สถานศึกษา</div>
|
:rows="rows"
|
||||||
<div>สาขาวิชาเอก</div>
|
:columns="columns"
|
||||||
</div>
|
flat
|
||||||
<div class="col-4 sub-text">
|
bordered
|
||||||
<div class="q-pb-md">
|
class="custom-header-table"
|
||||||
{{ props.getdetail.university }}
|
virtual-scroll
|
||||||
</div>
|
:virtual-scroll-sticky-size-start="48"
|
||||||
<div>
|
dense
|
||||||
{{ props.getdetail.major }}
|
>
|
||||||
</div>
|
</q-table>
|
||||||
</div>
|
|
||||||
<div class="col-2 header-sub-text">
|
|
||||||
<div class="q-pb-md">วุฒิการศึกษา</div>
|
|
||||||
<div>อื่นๆ</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-3 sub-text">
|
|
||||||
<div class="q-pb-md">
|
|
||||||
{{ props.getdetail.degree ? props.getdetail.degree : "-" }}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
{{ props.getdetail.remark ? props.getdetail.remark : "-" }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card>
|
</q-card>
|
||||||
</div>
|
</div>
|
||||||
<div class="contanier-box-mini">
|
<div class="contanier-box-mini">
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue