ปรับ ui สมัครสอบ
This commit is contained in:
Kittapath
parent
7afbb2911a
commit
32ec4bdcd9
2 changed files with 114 additions and 59 deletions
|
|
@ -79,6 +79,22 @@
|
|||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 col-md-6">
|
||||
<q-select
|
||||
:class="getClass(edit)"
|
||||
:outlined="edit"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!edit"
|
||||
:borderless="!edit"
|
||||
v-model="type"
|
||||
:options="opType"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกประเภท'}`]"
|
||||
:label="`${'ประเภท'}`"
|
||||
@update:modelValue="clickEditRow"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
<!-- <div class="col-xs-12 col-sm-6 col-md-6">
|
||||
<q-input
|
||||
:class="getClass(edit)"
|
||||
:outlined="edit"
|
||||
|
|
@ -122,7 +138,7 @@
|
|||
@update:modelValue="clickEditRow"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="col-xs-12 col-sm-6 col-md-6">
|
||||
<datepicker
|
||||
:readonly="!edit"
|
||||
|
|
@ -274,6 +290,14 @@ const { date2Thai, modalDelete, modalConfirm, dateToISO, success } = mixin;
|
|||
const store = useExamDataStore();
|
||||
const { examData, changeExamColumns } = store;
|
||||
const id = ref<string>("");
|
||||
|
||||
const type = ref<string | null>();
|
||||
const opType = ref([
|
||||
"ลูกจ้างประจำ",
|
||||
"ลูกจ้างชั่วคราว",
|
||||
"ผู้ปฏิบัติงานอื่นในกรุงเทพมหานคร",
|
||||
]);
|
||||
|
||||
const position = ref<string | null>();
|
||||
const group = ref<string | null>();
|
||||
const pile = ref<string | null>();
|
||||
|
|
@ -302,9 +326,10 @@ const visibleColumns = ref<String[]>([]);
|
|||
examData.career.columns.length == 0
|
||||
? (visibleColumns.value = [
|
||||
"position",
|
||||
"group",
|
||||
"pile",
|
||||
"org",
|
||||
// "group",
|
||||
// "pile",
|
||||
// "org",
|
||||
"type",
|
||||
"startDate",
|
||||
"endDate",
|
||||
"rangeDate",
|
||||
|
|
@ -324,38 +349,49 @@ const columns = ref<QTableProps["columns"]>([
|
|||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "group",
|
||||
name: "type",
|
||||
align: "left",
|
||||
label: "กลุ่ม/ฝ่าย",
|
||||
label: "ประเภท",
|
||||
sortable: true,
|
||||
field: "group",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "pile",
|
||||
align: "left",
|
||||
label: "กอง",
|
||||
sortable: true,
|
||||
field: "pile",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
{
|
||||
name: "org",
|
||||
align: "left",
|
||||
label: "สังกัด",
|
||||
sortable: true,
|
||||
field: "org",
|
||||
field: "type",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
sort: (a: string, b: string) =>
|
||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
// {
|
||||
// name: "group",
|
||||
// align: "left",
|
||||
// label: "กลุ่ม/ฝ่าย",
|
||||
// sortable: true,
|
||||
// field: "group",
|
||||
// headerStyle: "font-size: 14px",
|
||||
// style: "font-size: 14px",
|
||||
// sort: (a: string, b: string) =>
|
||||
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
// },
|
||||
// {
|
||||
// name: "pile",
|
||||
// align: "left",
|
||||
// label: "กอง",
|
||||
// sortable: true,
|
||||
// field: "pile",
|
||||
// headerStyle: "font-size: 14px",
|
||||
// style: "font-size: 14px",
|
||||
// sort: (a: string, b: string) =>
|
||||
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
// },
|
||||
// {
|
||||
// name: "org",
|
||||
// align: "left",
|
||||
// label: "สังกัด",
|
||||
// sortable: true,
|
||||
// field: "org",
|
||||
// headerStyle: "font-size: 14px",
|
||||
// style: "font-size: 14px",
|
||||
// sort: (a: string, b: string) =>
|
||||
// a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
// },
|
||||
{
|
||||
name: "startDate",
|
||||
align: "left",
|
||||
|
|
@ -479,6 +515,7 @@ const clickPrevious = async () => {
|
|||
startDate.value = row.startDate;
|
||||
endDate.value = row.endDate;
|
||||
rangeDate.value = row.rangeDate;
|
||||
type.value = row.type;
|
||||
id.value = row.id;
|
||||
await checkRowPage();
|
||||
};
|
||||
|
|
@ -496,6 +533,7 @@ const clickNext = () => {
|
|||
startDate.value = row.startDate;
|
||||
endDate.value = row.endDate;
|
||||
rangeDate.value = row.rangeDate;
|
||||
type.value = row.type;
|
||||
id.value = row.id;
|
||||
checkRowPage();
|
||||
};
|
||||
|
|
@ -591,6 +629,7 @@ const saveData = async () => {
|
|||
durationStart: dateToISO(new Date(startDate.value)),
|
||||
durationEnd: dateToISO(new Date(endDate.value)),
|
||||
rangeDate: rangeDate.value,
|
||||
type: type.value,
|
||||
})
|
||||
.then(() => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
|
|
@ -618,6 +657,7 @@ const editData = async () => {
|
|||
durationStart: dateToISO(new Date(startDate.value)),
|
||||
durationEnd: dateToISO(new Date(endDate.value)),
|
||||
rangeDate: rangeDate.value,
|
||||
type: type.value,
|
||||
})
|
||||
.then(() => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
|
|
@ -672,6 +712,7 @@ const selectData = (props: any) => {
|
|||
startDate.value = props.row.startDate;
|
||||
endDate.value = props.row.endDate;
|
||||
rangeDate.value = props.row.rangeDate;
|
||||
type.value = props.row.type;
|
||||
id.value = props.row.id;
|
||||
next.value = false;
|
||||
previous.value = false;
|
||||
|
|
@ -690,6 +731,7 @@ const addRow = () => {
|
|||
startDate.value = new Date();
|
||||
endDate.value = new Date();
|
||||
rangeDate.value = null;
|
||||
type.value = null;
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -16,7 +16,31 @@
|
|||
<div
|
||||
class="row col-xs-12 col-sm-12 col-md-10 items-center q-col-gutter-x-sm q-col-gutter-y-xs"
|
||||
>
|
||||
<div class="col-xs-12 col-sm-3 col-md-3">
|
||||
<div class="col-xs-12 col-sm-4 col-md-4">
|
||||
<q-input
|
||||
:class="getClass(status == 'checkRegister' || status == 'payment')"
|
||||
:outlined="status == 'checkRegister' || status == 'payment'"
|
||||
dense
|
||||
type="tel"
|
||||
mask="#############"
|
||||
:counter="
|
||||
status == 'checkRegister' || status == 'payment' ? true : false
|
||||
"
|
||||
lazy-rules
|
||||
:readonly="!(status == 'checkRegister' || status == 'payment')"
|
||||
:borderless="!(status == 'checkRegister' || status == 'payment')"
|
||||
v-model="defaultInformation.cardid"
|
||||
maxlength="13"
|
||||
:rules="[
|
||||
(val) => val.length == 13 || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
|
||||
(val) =>
|
||||
/^[0-9]*$/.test(val) ||
|
||||
`${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}`,
|
||||
]"
|
||||
label="เลขประจำตัวประชาชน"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-2 col-md-2">
|
||||
<q-select
|
||||
:class="getClass(status == 'checkRegister' || status == 'payment')"
|
||||
:readonly="!(status == 'checkRegister' || status == 'payment')"
|
||||
|
|
@ -61,16 +85,28 @@
|
|||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-3 col-md-3">
|
||||
<q-input
|
||||
:class="getClass(false)"
|
||||
:outlined="false"
|
||||
<!-- <q-input
|
||||
:class="getClass(status == 'checkRegister' || status == 'payment')"
|
||||
:outlined="status == 'checkRegister' || status == 'payment'"
|
||||
dense
|
||||
lazy-rules
|
||||
:readonly="!false"
|
||||
:borderless="!false"
|
||||
:readonly="!status == 'checkRegister' || status == 'payment'"
|
||||
:borderless="!status == 'checkRegister' || status == 'payment'"
|
||||
v-model="defaultInformation.nationality"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
|
||||
:label="`${'สัญชาติ'}`"
|
||||
/> -->
|
||||
<q-select
|
||||
:class="getClass(status == 'checkRegister' || status == 'payment')"
|
||||
:readonly="!(status == 'checkRegister' || status == 'payment')"
|
||||
:borderless="!(status == 'checkRegister' || status == 'payment')"
|
||||
:rules="[(val) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
|
||||
:outlined="status == 'checkRegister' || status == 'payment'"
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="defaultInformation.nationality"
|
||||
:options="opNat"
|
||||
:label="`${'สัญชาติ'}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-3 col-md-3">
|
||||
|
|
@ -185,30 +221,6 @@
|
|||
:label="`${'เบอร์โทร'}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-3 col-md-3">
|
||||
<q-input
|
||||
:class="getClass(status == 'checkRegister' || status == 'payment')"
|
||||
:outlined="status == 'checkRegister' || status == 'payment'"
|
||||
dense
|
||||
type="tel"
|
||||
mask="#############"
|
||||
:counter="
|
||||
status == 'checkRegister' || status == 'payment' ? true : false
|
||||
"
|
||||
lazy-rules
|
||||
:readonly="!(status == 'checkRegister' || status == 'payment')"
|
||||
:borderless="!(status == 'checkRegister' || status == 'payment')"
|
||||
v-model="defaultInformation.cardid"
|
||||
maxlength="13"
|
||||
:rules="[
|
||||
(val) => val.length == 13 || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
|
||||
(val) =>
|
||||
/^[0-9]*$/.test(val) ||
|
||||
`${'กรุณากรอกเลขประจำตัวประชาชนให้ถูกต้อง'}`,
|
||||
]"
|
||||
label="เลขประจำตัวประชาชน"
|
||||
/>
|
||||
</div>
|
||||
<!-- <div class="col-xs-12 col-sm-3 col-md-3">
|
||||
<q-select
|
||||
:class="getClass(status == 'checkRegister' || status == 'payment')"
|
||||
|
|
@ -435,6 +447,7 @@ const candidateId = ref<string>(route.params.candidateId.toString());
|
|||
const edit = ref<boolean>(true);
|
||||
const myform = ref<any>({});
|
||||
const img = ref<string>("");
|
||||
const opNat = ref(["ไทย"]);
|
||||
const fileProfile = ref<File[]>([]);
|
||||
|
||||
const { messageError, showLoader, hideLoader } = mixin;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue