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 DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue";
|
||||
import type { TableName } from "@/modules/05_placement/interface/request/placement";
|
||||
import type Deferment from "@/modules/05_placement/components/pass/Deferment.vue";
|
||||
import type {
|
||||
treeTab,
|
||||
DataOption,
|
||||
|
|
@ -1582,79 +1583,6 @@ const listKeyId = (data: any) => {
|
|||
hide-bottom-space
|
||||
/>
|
||||
</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>
|
||||
</q-scroll-area>
|
||||
</q-card>
|
||||
|
|
@ -1681,56 +1609,58 @@ const listKeyId = (data: any) => {
|
|||
/>
|
||||
</q-form>
|
||||
<q-dialog v-model="modal_right" persistent>
|
||||
<q-card style="width: 800px">
|
||||
<q-form ref="myForm">
|
||||
<DialogHeader
|
||||
:title="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ${Name}`"
|
||||
:close="clickClose"
|
||||
/>
|
||||
<q-separator />
|
||||
<q-card-section class="q-p-sm">
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
hide-bottom-space
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกเหตุผล'}`]"
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="positionMasterUserNote"
|
||||
:label="`${'กรอกเหตุผล'}`"
|
||||
@update:modelValue="clickEditRow"
|
||||
type="textarea"
|
||||
/>
|
||||
<q-file
|
||||
v-if="getNumFile === 1"
|
||||
v-model="files"
|
||||
dense
|
||||
:label="`${'เลือกไฟล์เอกสารหลักฐาน'}`"
|
||||
outlined
|
||||
use-chips
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกไฟล์เอกสารหลักฐาน'}`]"
|
||||
multiple
|
||||
@update:modelValue="clickEditRow"
|
||||
class="q-py-sm"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<DialogFooter
|
||||
v-model:editvisible="edit"
|
||||
v-model:modalEdit="modalEdit"
|
||||
:validate="validateData"
|
||||
:save="modalEdit ? savePostpone : saveDisclaim"
|
||||
/>
|
||||
</q-form>
|
||||
</q-card>
|
||||
<q-card style="width: 800px">
|
||||
|
||||
<q-form ref="myForm">
|
||||
<DialogHeader
|
||||
:title="`${modalEdit ? 'ขอผ่อนผัน' : 'สละสิทธิ์'} ชื่อ${Name}`"
|
||||
:close="clickClose"
|
||||
/>
|
||||
<q-separator />
|
||||
<q-card-section class="q-p-sm">
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
hide-bottom-space
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="positionMasterUserNote"
|
||||
:label="`${'กรอกเหตุผล'}`"
|
||||
@update:model-value="clickEditRow"
|
||||
|
||||
type="textarea"
|
||||
/>
|
||||
<q-file
|
||||
v-if="getNumFile === 1"
|
||||
v-model="files"
|
||||
dense
|
||||
:label="`${'เลือกไฟล์เอกสารหลักฐาน'}`"
|
||||
outlined
|
||||
use-chips
|
||||
:rules="[(val) => !!val || 'กรุณาเลือกไฟล์เอกสารหลักฐาน']"
|
||||
multiple
|
||||
@update:model-value="clickEditRow"
|
||||
class="q-py-sm"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<DialogFooter
|
||||
v-model:editvisible="edit"
|
||||
v-model:modalEdit="modalEdit"
|
||||
:validate="validateData"
|
||||
:save="modalEdit ? savePostpone : saveDisclaim"
|
||||
/>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<!-- dialog ขอผ่อนผัน / สละสิทธิ์ -->
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, computed } from "vue";
|
||||
import { ref } from "vue";
|
||||
import DialogHeader from "@/modules/05_placement/components/pass/DialogHeader.vue";
|
||||
import { useQuasar } from "quasar";
|
||||
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 { useCounterMixin } from "@/stores/mixin";
|
||||
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
|
||||
|
|
@ -24,9 +25,61 @@ const props = defineProps({
|
|||
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 checkValidate = ref<boolean>(false);
|
||||
const selection = ref<number[]>([]);
|
||||
|
||||
const checkboxItems: CheckboxItem[] = [
|
||||
{ id: 1, label: "ไม่เป็นผู้ดำรงตำแหน่งทางการเมือง" },
|
||||
{
|
||||
|
|
@ -168,32 +221,18 @@ const close = async () => {
|
|||
<div class="contanier-box-mini">
|
||||
<q-card bordered class="card-panding">
|
||||
<div class="row items-center q-pa-xs header-text">การศึกษา</div>
|
||||
<div class="row q-pa-xs">
|
||||
<div class="col-3 header-sub-text">
|
||||
<div class="q-pb-md">สถานศึกษา</div>
|
||||
<div>สาขาวิชาเอก</div>
|
||||
</div>
|
||||
<div class="col-4 sub-text">
|
||||
<div class="q-pb-md">
|
||||
{{ props.getdetail.university }}
|
||||
</div>
|
||||
<div>
|
||||
{{ props.getdetail.major }}
|
||||
</div>
|
||||
</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-table
|
||||
ref="table"
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
flat
|
||||
bordered
|
||||
class="custom-header-table"
|
||||
virtual-scroll
|
||||
:virtual-scroll-sticky-size-start="48"
|
||||
dense
|
||||
>
|
||||
</q-table>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="contanier-box-mini">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue