เพิ่ม id ให้ เทส

This commit is contained in:
setthawutttty 2023-10-19 14:36:12 +07:00
parent e300009dc3
commit 89c381afcc
4 changed files with 132 additions and 160 deletions

View file

@ -359,7 +359,7 @@ const clickBack = () => {
<div class="row">
<div class="row col-12 q-col-gutter-x-sm q-mb-xs">
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input hide-bottom-space outlined v-model="informaData.cardid" dense @update:model-value="changeCardID"
<q-input hide-bottom-space outlined v-model="informaData.cardid" dense @update:model-value="changeCardID " for="#cardId"
lazy-rules :rules="[
(val: string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
(val: string) =>
@ -369,23 +369,23 @@ const clickBack = () => {
<!-- :rules="[(val:any) =>val.length != 13 ||`${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,]" -->
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<selector hide-bottom-space outlined :rules="[(val: string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]" dense
<selector for="#prefixId" hide-bottom-space outlined :rules="[(val: string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]" dense
lazy-rules v-model="informaData.prefixId" emit-value map-options option-label="name"
:options="Ops.prefixOps" option-value="id" :label="`${'คำนำหน้าชื่อ'}`" use-input input-debounce="0"
@filter="(inputValue: any, doneFn: Function) => filterSelector(inputValue, doneFn, 'prefixOps')" />
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input hide-bottom-space outlined dense lazy-rules v-model="informaData.firstname"
<q-input for="#firstname" hide-bottom-space outlined dense lazy-rules v-model="informaData.firstname"
:rules="[(val: string) => !!val || `${'กรุณากรอก ชื่อ'}`]" :label="`${'ชื่อ'}`" />
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input hide-bottom-space outlined dense lazy-rules v-model="informaData.lastname"
<q-input for="#lastname" hide-bottom-space outlined dense lazy-rules v-model="informaData.lastname"
:rules="[(val: string) => !!val || `${'กรุณากรอก นามสกุล'}`]" :label="`${'นามสกุล'}`" />
</div>
</div>
<div class="row col-12 q-col-gutter-x-sm q-mb-xs">
<div class="col-xs-6 col-sm-2 col-md-2">
<datepicker v-model="informaData.birthDate" :locale="'th'" autoApply :enableTimePicker="false" week-start="0"
<datepicker v-model="informaData.birthDate" :locale="'th'" autoApply :enableTimePicker="false" week-start="0"
:max-date="calculateMaxDate()" @update:model-value="calRetire">
<template #year="{ year }">
{{ year + 543 }}
@ -394,7 +394,7 @@ const clickBack = () => {
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input hide-bottom-space outlined dense lazy-rules :model-value="informaData.birthDate == null
<q-input for="#birthDate" hide-bottom-space outlined dense lazy-rules :model-value="informaData.birthDate == null
? null
: date2Thai(informaData.birthDate)
" :rules="[(val: string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
@ -412,45 +412,45 @@ const clickBack = () => {
:model-value="informaData.age" :label="`${'อายุ'}`" />
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<selector hide-bottom-space outlined dense lazy-rules v-model="informaData.genderId" emit-value map-options
<selector for="#genderId" hide-bottom-space outlined dense lazy-rules v-model="informaData.genderId" emit-value map-options
option-label="name" :options="Ops.genderOps" option-value="id" :label="`${'เพศ'}`" use-input
input-debounce="0" @filter="(inputValue: any,
doneFn: Function) => filterSelector(inputValue, doneFn, 'genderOps'
)" />
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<selector hide-bottom-space outlined dense lazy-rules v-model="informaData.statusId" emit-value map-options
<selector for="#statusId" hide-bottom-space outlined dense lazy-rules v-model="informaData.statusId" emit-value map-options
option-label="name" :options="Ops.statusOps" option-value="id" :label="`${'สถานภาพ'}`" use-input
input-debounce="0" @filter="(inputValue: any,
doneFn: Function) => filterSelector(inputValue, doneFn, 'statusOps'
)" />
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<q-input hide-bottom-space outlined dense lazy-rules v-model="informaData.nationality"
<q-input for="#nationality" hide-bottom-space outlined dense lazy-rules v-model="informaData.nationality"
:label="`${'สัญชาติ'}`" />
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<q-input hide-bottom-space outlined dense lazy-rules v-model="informaData.ethnicity"
<q-input for="#ethnicity" hide-bottom-space outlined dense lazy-rules v-model="informaData.ethnicity"
:label="`${'เชื้อชาติ'}`" />
</div>
</div>
<div class="row col-12 q-col-gutter-x-sm q-mb-xs">
<div class="col-xs-6 col-sm-2 col-md-2">
<selector hide-bottom-space outlined dense lazy-rules v-model="informaData.religionId" emit-value map-options
<selector for="#religionId" hide-bottom-space outlined dense lazy-rules v-model="informaData.religionId" emit-value map-options
option-label="name" :options="Ops.religionOps" option-value="id" :label="`${'ศาสนา'}`" use-input
input-debounce="0" @filter="(inputValue: any,
doneFn: Function) => filterSelector(inputValue, doneFn, 'religionOps'
)" />
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<selector hide-bottom-space outlined dense lazy-rules v-model="informaData.bloodId" emit-value map-options
<selector for="#bloodId" hide-bottom-space outlined dense lazy-rules v-model="informaData.bloodId" emit-value map-options
option-label="name" :options="Ops.bloodOps" option-value="id" :label="`${'หมู่เลือด'}`" use-input
input-debounce="0" @filter="(inputValue: any,
doneFn: Function) => filterSelector(inputValue, doneFn, 'bloodOps'
)" clearable />
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<q-input hide-bottom-space outlined dense lazy-rules type="tel" v-model="informaData.tel"
<q-input for="#tel" hide-bottom-space outlined dense lazy-rules type="tel" v-model="informaData.tel"
:label="`${'เบอร์โทร'}`" :rules="[
(val: string) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
(val: string) =>
@ -464,7 +464,7 @@ const clickBack = () => {
<div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
<div class="row col-12">
<q-space />
<q-btn unelevated dense class="q-px-md items-center" color="light-blue-10" label="บันทึก" @click="saveData" />
<q-btn for="#submitForm" unelevated dense class="q-px-md items-center" color="light-blue-10" label="บันทึก" @click="saveData" />
</div>
</q-card>
@ -482,7 +482,7 @@ const clickBack = () => {
<q-tooltip>ปเดตรปภาพ</q-tooltip>
</q-icon>
<input type="file" style="display: none" ref="inputImage" accept="image/*" @change="uploadImage" />
<input for="#profile" type="file" style="display: none" ref="inputImage" accept="image/*" @change="uploadImage" />
</div>
</q-avatar>

View file

@ -1,6 +1,6 @@
<script setup lang="ts">
import { ref, useAttrs, onMounted } from "vue";
import type { QTableProps } from "quasar";
import router from "@/router";
import { useQuasar } from "quasar";
// import { useCounterMixin } from "@/stores/mixin";
@ -8,10 +8,9 @@ import { useQuasar } from "quasar";
// import config from "@/app.config";
// import http from "@/plugins/http";
import { useInvestigateFactStore } from '../../store/InvestigateFactStore'
const dataInvestigate = useInvestigateFactStore()
const { fecthList } = dataInvestigate
import { useInvestigateFactStore } from "@/modules/11_discipline/store/InvestigateFactStore";
const dataInvestigate = useInvestigateFactStore();
const { fecthList } = dataInvestigate;
// const mixin = useCounterMixin();
// const {
// date2Thai,
@ -24,69 +23,6 @@ const { fecthList } = dataInvestigate
// } = mixin;
const $q = useQuasar(); // noti quasar
const visibleColumns = ref<string[]>([
"no",
"subject",
"interrogated",
"fault",
"status",
]); //
//
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "center",
label: "ลำดับ",
sortable: false,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "subject",
align: "left",
label: "เรื่อง",
sortable: true,
field: "subject",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "interrogated",
align: "left",
label: "ผู้ถูกสอบสวน",
sortable: true,
field: "interrogated",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "fault",
align: "left",
label: "ลักษณะความผิด",
sortable: true,
field: "fault",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "status",
align: "left",
label: "สถานะ",
sortable: false,
field: "status",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
//
const filterKeyword = ref<string>("");
const filterRef = ref<HTMLInputElement | null>(null);
@ -97,7 +33,6 @@ const resetFilter = () => {
}
};
const attrs = ref<any>(useAttrs());
const paging = ref<boolean>(true);
const pagination = ref({
@ -111,45 +46,41 @@ const paginationLabel = (start: string, end: string, total: string) => {
else return start + "-" + end + " ใน " + total;
};
function fecthInvestigateFact() {
const data = [
const clickAdd = () => {
router.push(`/discipline/investigatefacts/add`);
};
onMounted(() => {
fecthList([
{
subject: "ทุจริตในหน้าที่",
interrogated: "ศิรินภา คงน้อยี่",
fault: "1",
status: "0",
active:'1'
active: "1",
},
{
subject: "ทุจริตในหน้าที่",
interrogated: "นายนครชัย วันดี",
fault: "1",
status: "1",
active:'1'
active: "1",
},
{
subject: "กระทำทุจริตเงินกองทุน",
interrogated: "นายกัณฐิมา กาฬสินธ์ุ",
fault: "0",
status: "1",
active:'1'
active: "1",
},
{
subject: "พูดจาไม่สุภาพ",
interrogated: "นายปิยรมย์ ศิริธาราฟ",
fault: "0",
status: "1",
active:'1'
active: "1",
},
];
fecthList(data); // stores
}
const clickAdd = () => {
router.push(`/discipline/investigatefacts/add`)
}
onMounted(()=>{
fecthInvestigateFact()
})
]);
});
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
@ -194,7 +125,7 @@ onMounted(()=>{
</q-input>
<q-select
v-model="visibleColumns"
v-model="dataInvestigate.visibleColumns"
multiple
outlined
dense
@ -202,7 +133,7 @@ onMounted(()=>{
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
:options="dataInvestigate.columns"
option-value="name"
options-cover
style="min-width: 150px"
@ -212,7 +143,7 @@ onMounted(()=>{
<div class="col-12">
<d-table
ref="table"
:columns="columns"
:columns="dataInvestigate.columns"
:rows="dataInvestigate.rows"
:filter="filterKeyword"
row-key="interrogated"
@ -222,13 +153,18 @@ onMounted(()=>{
dense
class="custom-header-table"
v-bind="attrs"
:visible-columns="visibleColumns"
:visible-columns="dataInvestigate.visibleColumns"
:pagination-label="paginationLabel"
v-model:pagination="pagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props" style="padding: 10px;color:#35373C;font-weight: 500;">
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
style="padding: 10px; color: #35373c; font-weight: 500"
>
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width />
@ -237,57 +173,29 @@ onMounted(()=>{
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td key="no" :props="props">
{{ props.rowIndex + 1 }}
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<q-td v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</q-td>
<div>
{{ col.value }}
</div>
</q-td>
<q-td
key="subject"
:props="props"
>
{{ props.row.subject }}
</q-td>
<q-td
key="interrogated"
:props="props"
>
{{ props.row.interrogated }}
</q-td>
<q-td
key="fault"
:props="props"
>
{{ props.row.fault }}
</q-td>
<q-td
key="status"
:props="props"
>
{{ props.row.status }}
</q-td>
<q-td style="font-size: 14px;width: 10rem">
<q-td auto-width style="font-size: 14px; width: 10rem">
{{ props.row.active }}
</q-td>
<q-td auto-width >
<q-btn v-if="props.row.status === 'ยุติเรื่อง'" class="q-px-xl q-py-xs text-white no-shadow" style="background-color:#00AA86 ; border-radius: 6px;">ยกเลิกยุติเรื่อง</q-btn>
<q-td auto-width>
<q-btn
v-if="props.row.status === 'ยุติเรื่อง'"
class="q-px-xl q-py-xs text-white no-shadow"
style="background-color: #00aa86; border-radius: 6px"
>ยกเลกยเรอง</q-btn
>
</q-td>
</q-tr>
</template>
<!-- <template v-slot:pagination="scope">
<q-pagination
v-model="pagination.page"
active-color="primary"
color="dark"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template> -->
</d-table>
</div>
</div>
</q-card>
</template>

View file

@ -5,9 +5,9 @@ interface DataOption {
interface investigatefactsDataRowType {
subject: string;
interrogated: string;
fault: string;
status: string;
active: string;
fault: string|undefined;
status: string|undefined;
active: string|undefined;
}
interface MyObjectRef {
orderType: any;

View file

@ -1,5 +1,6 @@
import { defineStore } from "pinia";
import { ref } from "vue";
import type { QTableProps } from "quasar";
import type { investigatefactsDataRowType, DataOption } from '@/modules/11_discipline/interface/index/Main'
export const useInvestigateFactStore = defineStore("DisciplineInvestigateFact", () => {
@ -23,6 +24,66 @@ export const useInvestigateFactStore = defineStore("DisciplineInvestigateFact",
{ id: "002", name: "ไม่ร้ายเเรง" },
{ id: "003", name: "ร้ายเเรง" },
]);
const visibleColumns = ref<string[]>([
"no",
"subject",
"interrogated",
"fault",
"status",
]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
// หัวตาราง
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "center",
label: "ลำดับ",
sortable: false,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "subject",
align: "left",
label: "เรื่อง",
sortable: true,
field: "subject",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "interrogated",
align: "left",
label: "ผู้ถูกสอบสวน",
sortable: true,
field: "interrogated",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "fault",
align: "left",
label: "ลักษณะความผิด",
sortable: true,
field: "fault",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "status",
align: "left",
label: "สถานะ",
sortable: false,
field: "status",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
function filterFnOptionsType(val: string, update: any, type: string) {
update(() => {
const needle = val.toLowerCase();
@ -44,16 +105,17 @@ export const useInvestigateFactStore = defineStore("DisciplineInvestigateFact",
});
}
async function fecthList(data: investigatefactsDataRowType[]) {
let datalist: investigatefactsDataRowType[] = data.map((e: any) => ({
subject: e.subject,
interrogated: e.interrogated,
fault: e.fault ?? convertFault(e.fault),
status: e.status ?? convertSatatus(e.status),
active: e.active ?? activeStatus(e.active)
}))
rows.value = datalist
function fecthList(data: investigatefactsDataRowType[]) {
let datalist: investigatefactsDataRowType[] = data.map((e: investigatefactsDataRowType) => {
return {
subject: e.subject,
interrogated: e.interrogated,
fault: e.fault ? convertFault(e.fault):'-',
status: e.status ? convertSatatus(e.status):'-',
active: e.active ? activeStatus(e.active):'-'
};
});
rows.value = datalist;
}
function convertFault(val: string) {
switch (val) {
@ -89,5 +151,7 @@ export const useInvestigateFactStore = defineStore("DisciplineInvestigateFact",
faultOp,
daysExtendOp,
investigationOp,
visibleColumns,
columns
};
})