UI - สืบสวนข้อเท็จจริง เพิ่ม type ให้ any เเล้ว ย้าย option ไป store
This commit is contained in:
setthawutttty
parent
074fc05412
commit
91fc7f7520
5 changed files with 111 additions and 144 deletions
|
|
@ -1,7 +1,10 @@
|
|||
<script setup lang="ts">
|
||||
import router from "@/router";
|
||||
import { onMounted, ref } from "vue";
|
||||
import { onMounted, ref, watch } from "vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useInvestigateFactStore } from "@/modules/11_discipline/stroes/InvestigateFactStore";
|
||||
const investigateFactStore = useInvestigateFactStore();
|
||||
const { filterFnOptionsType } = investigateFactStore;
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
messageError,
|
||||
|
|
@ -17,51 +20,15 @@ const detail = ref<string>("");
|
|||
const fault = ref<string>("");
|
||||
const results = ref<string>("");
|
||||
const other = ref<string>("");
|
||||
const evidenceFiles = ref<any>(null);
|
||||
const fileComplaint = ref<any>(null);
|
||||
const evidenceFiles = ref<File | null>(null);
|
||||
const fileComplaint = ref<File | null>(null);
|
||||
const clickTime = ref<boolean>(false);
|
||||
const date = ref<Date | null>(null);
|
||||
const dateEnd = ref<Date | null>(null);
|
||||
const date = ref<Date>();
|
||||
const dateEnd = ref<Date>();
|
||||
const investigation = ref<string>("");
|
||||
const faultOps = ref<any>([
|
||||
{ id: "001", value: "ยังไม่ระบุ" },
|
||||
{ id: "002", value: "ไม่ร้ายเเรง" },
|
||||
{ id: "003", value: "ร้ายเเรง" },
|
||||
]);
|
||||
const faultOp = ref<any>();
|
||||
const investigationOps = ref<any>([
|
||||
{ id: "001", value: "เเต่งตั้งการสืบสวน" },
|
||||
{ id: "002", value: "สืบสวนทางลับ" },
|
||||
{ id: "003", value: "อื่นๆ" },
|
||||
]);
|
||||
const daysExtend = ref<string>("");
|
||||
const daysExtendOp = ref<any>();
|
||||
const daysExtendOps = ref<any>([
|
||||
{ id: "000", value: "15 วัน" },
|
||||
{ id: "001", value: "30 วัน" },
|
||||
{ id: "002", value: "45 วัน" },
|
||||
{ id: "003", value: "60 วัน" },
|
||||
]);
|
||||
const investigationOp = ref<any>();
|
||||
|
||||
function filterFnOptionsType(val: string, update: any, type: string) {
|
||||
update(() => {
|
||||
const needle = val.toLowerCase();
|
||||
if (type === "faultOp") {
|
||||
faultOp.value = faultOps.value.filter(
|
||||
(v: any) => v.value.toLowerCase().indexOf(needle) > -1
|
||||
);
|
||||
} else if (type === "investigationOp") {
|
||||
investigationOp.value = investigationOps.value.filter(
|
||||
(v: any) => v.value.toLowerCase().indexOf(needle) > -1
|
||||
);
|
||||
} else if (type === "daysExtendOp") {
|
||||
daysExtendOp.value = daysExtendOps.value.filter(
|
||||
(v: any) => v.value.toLowerCase().indexOf(needle) > -1
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
const daysExtend = ref<string>("");
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
|
|
@ -103,11 +70,11 @@ function filterFnOptionsType(val: string, update: any, type: string) {
|
|||
outlined
|
||||
dense
|
||||
v-model="fault"
|
||||
:options="faultOp"
|
||||
:options="investigateFactStore.faultOp"
|
||||
label="ลักษณะความผิด"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="value"
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
use-input
|
||||
@filter="(inputValue: any,
|
||||
|
|
@ -127,11 +94,11 @@ function filterFnOptionsType(val: string, update: any, type: string) {
|
|||
outlined
|
||||
dense
|
||||
v-model="investigation"
|
||||
:options="investigationOp"
|
||||
:options="investigateFactStore.investigationOp"
|
||||
label="ลักษณะการสืบสวน"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="value"
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
use-input
|
||||
@filter="(inputValue: any,
|
||||
|
|
@ -195,7 +162,7 @@ function filterFnOptionsType(val: string, update: any, type: string) {
|
|||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
:model-value="date !== null ? date2Thai(date) : null"
|
||||
:model-value="date ? date2Thai(date) : null"
|
||||
:rules="[
|
||||
(val) =>
|
||||
!!val || `${'กรุณาเลือกวันที่เริ่มการสอบสวน'}`,
|
||||
|
|
@ -234,9 +201,7 @@ function filterFnOptionsType(val: string, update: any, type: string) {
|
|||
dense
|
||||
lazy-rules
|
||||
borderless
|
||||
:model-value="
|
||||
dateEnd !== null ? date2Thai(dateEnd) : null
|
||||
"
|
||||
:model-value="dateEnd ? date2Thai(dateEnd) : null"
|
||||
:rules="[
|
||||
(val) =>
|
||||
!!val || `${'กรุณาเลือกวันที่สิ้นสุดการสอบสวน'}`,
|
||||
|
|
@ -262,14 +227,17 @@ function filterFnOptionsType(val: string, update: any, type: string) {
|
|||
dense
|
||||
lazy-rules
|
||||
v-model="daysExtend"
|
||||
:options="daysExtendOp"
|
||||
:options="investigateFactStore.daysExtendOp"
|
||||
label="จำนวนวันที่ต้องการขยาย"
|
||||
emit-value
|
||||
map-options
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณาเลือกจำนวนวันที่ต้องการขยาย'}`,
|
||||
(val) =>
|
||||
clickTime === true
|
||||
? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
|
||||
: true,
|
||||
]"
|
||||
option-label="value"
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
use-input
|
||||
@filter="(inputValue: any,
|
||||
|
|
@ -2,26 +2,26 @@
|
|||
import { ref, useAttrs, onMounted } from "vue";
|
||||
import type { QTableProps } from "quasar";
|
||||
import router from "@/router";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useQuasar } from "quasar";
|
||||
// import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
import config from "@/app.config";
|
||||
import http from "@/plugins/http";
|
||||
// import config from "@/app.config";
|
||||
// import http from "@/plugins/http";
|
||||
|
||||
import { useInvestigateFactStore } from '../../stroes/InvestigateFactStore'
|
||||
const dataInvestigate = useInvestigateFactStore()
|
||||
const { fecthList } = dataInvestigate
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
date2Thai,
|
||||
success,
|
||||
messageError,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
dialogConfirm,
|
||||
dialogRemove,
|
||||
} = mixin;
|
||||
// const mixin = useCounterMixin();
|
||||
// const {
|
||||
// date2Thai,
|
||||
// success,
|
||||
// messageError,
|
||||
// showLoader,
|
||||
// hideLoader,
|
||||
// dialogConfirm,
|
||||
// dialogRemove,
|
||||
// } = mixin;
|
||||
const $q = useQuasar(); //ใช้ noti quasar
|
||||
|
||||
const visibleColumns = ref<string[]>([
|
||||
|
|
@ -116,7 +116,7 @@ function fecthInvestigateFact() {
|
|||
{
|
||||
subject: "ทุจริตในหน้าที่",
|
||||
interrogated: "ศิรินภา คงน้อยี่",
|
||||
fault: "0",
|
||||
fault: "1",
|
||||
status: "0",
|
||||
active:'1'
|
||||
},
|
||||
|
|
@ -130,15 +130,15 @@ function fecthInvestigateFact() {
|
|||
{
|
||||
subject: "กระทำทุจริตเงินกองทุน",
|
||||
interrogated: "นายกัณฐิมา กาฬสินธ์ุ",
|
||||
fault: "1",
|
||||
status: "2",
|
||||
fault: "0",
|
||||
status: "1",
|
||||
active:'1'
|
||||
},
|
||||
{
|
||||
subject: "พูดจาไม่สุภาพ",
|
||||
interrogated: "นายปิยรมย์ ศิริธาราฟ",
|
||||
fault: "2",
|
||||
status: "3",
|
||||
fault: "0",
|
||||
status: "1",
|
||||
active:'1'
|
||||
},
|
||||
];
|
||||
|
|
@ -210,7 +210,7 @@ onMounted(()=>{
|
|||
/>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-table
|
||||
<d-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="dataInvestigate.rows"
|
||||
|
|
@ -228,7 +228,7 @@ onMounted(()=>{
|
|||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<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 />
|
||||
|
|
@ -267,8 +267,8 @@ onMounted(()=>{
|
|||
<q-td style="font-size: 14px;width: 10rem">
|
||||
{{ props.row.active }}
|
||||
</q-td>
|
||||
<q-td auto-width style="width: 10rem">
|
||||
<q-btn v-if="props.row.status === 'ยุติเรื่อง'" color="primary" class="q-px-xl q-py-xs">ยกเลิกยุติเรื่อง</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>
|
||||
|
|
@ -284,57 +284,10 @@ onMounted(()=>{
|
|||
direction-links
|
||||
></q-pagination>
|
||||
</template>
|
||||
</q-table>
|
||||
</d-table>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scope>
|
||||
.filter-card {
|
||||
background-color: #f1f1f1b0;
|
||||
}
|
||||
|
||||
.toggle-expired-account {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
line-height: 150%;
|
||||
color: #35373c;
|
||||
}
|
||||
|
||||
.icon-color {
|
||||
color: #4154b3;
|
||||
}
|
||||
|
||||
.custom-header-table {
|
||||
max-height: 64vh;
|
||||
|
||||
.q-table tr:nth-child(odd) td {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.q-table tr:nth-child(even) td {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
.q-table thead tr {
|
||||
background: #ecebeb;
|
||||
}
|
||||
|
||||
.q-table thead tr th {
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* this will be the loading indicator */
|
||||
.q-table thead tr:last-child th {
|
||||
/* height of all previous header rows */
|
||||
top: 48px;
|
||||
}
|
||||
|
||||
.q-table thead tr:first-child th {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue