เพิ่ม filter แก้ไข store ปรับ ui
This commit is contained in:
AnandaTon
parent
cb4850ec27
commit
e0112b45ed
7 changed files with 481 additions and 459 deletions
|
|
@ -1,187 +1,134 @@
|
|||
<template>
|
||||
<Table
|
||||
:style="$q.screen.gt.xs ? 'height: 58.5vh' : ''"
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
:filter="filter"
|
||||
:visible-columns="visibleColumns"
|
||||
v-model:inputfilter="filter"
|
||||
v-model:inputvisible="visibleColumns"
|
||||
:pagination="initialPagination"
|
||||
:inputShow="true"
|
||||
:grid="$q.screen.gt.xs ? false : true"
|
||||
>
|
||||
<template #columns="props">
|
||||
<q-tr :props="props" class=" cursor-pointer">
|
||||
<q-td key="no" :props="props" @click="view(props.row.type)">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</q-td>
|
||||
<q-td key="type" :props="props" @click="view(props.row.type)">
|
||||
{{ props.row.type }}
|
||||
</q-td>
|
||||
<q-td key="date" :props="props" @click="view(props.row.type)">
|
||||
{{ props.row.date }}
|
||||
</q-td>
|
||||
|
||||
<q-td key="status" :props="props">
|
||||
<div class="col-12 row items-center">
|
||||
<div @click="view(props.row.type)">
|
||||
<q-icon v-if="props.row.status == 'อนุมัติ'" size="10px" color="light-green" name="mdi-circle" class="q-mr-sm" />
|
||||
<q-icon v-else-if="props.row.status == 'ไม่อนุมัติ'" size="10px" color="red-6" name="mdi-circle" class="q-mr-sm" />
|
||||
<q-icon v-else-if="props.row.status == 'อยู่ระหว่างดำเนินการ'" size="10px" color="light-blue-14" name="mdi-circle" class="q-mr-sm" />
|
||||
<q-icon v-else-if="props.row.status == 'ใหม่'" size="10px" color="orange" name="mdi-circle" class="q-mr-sm" />
|
||||
<span class="q-pr-md">{{ props.row.status }}</span>
|
||||
</div>
|
||||
<q-space/>
|
||||
<q-btn v-if="props.row.status == 'ใหม่'" label="ขอยกเลิก" @click="cancel(props.row.type)" size="13px" class="q-px-sm" outline dense color="orange" />
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</Table>
|
||||
<Table
|
||||
:style="$q.screen.gt.xs ? 'height: 58.5vh' : ''"
|
||||
:rows="LeaveData.rows"
|
||||
:columns="LeaveData.columns"
|
||||
:filter="filter"
|
||||
:visible-columns="LeaveData.visibleColumns"
|
||||
v-model:inputfilter="filter"
|
||||
v-model:inputvisible="LeaveData.visibleColumns"
|
||||
:pagination="initialPagination"
|
||||
:inputShow="true"
|
||||
:grid="$q.screen.gt.xs ? false : true"
|
||||
>
|
||||
<template #columns="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td key="no" :props="props" @click="view(props.row.type)">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</q-td>
|
||||
<q-td key="type" :props="props" @click="view(props.row.type)">
|
||||
{{ props.row.type }}
|
||||
</q-td>
|
||||
<q-td key="date" :props="props" @click="view(props.row.type)">
|
||||
{{ props.row.date }}
|
||||
</q-td>
|
||||
|
||||
<!-- modal ขอยกเลิก/ดูรายละเอียด -->
|
||||
<q-dialog v-model="modalCancel" persistent>
|
||||
<q-card :style="modeCancel == true ? 'min-width: 50%;': 'min-width:30%'">
|
||||
<q-card-section class="row items-center q-pa-sm">
|
||||
<div v-if="modeCancel == false" class="text-bold q-pl-sm">รายละเอียดของ{{ title }}</div>
|
||||
<div v-else class="text-bold q-pl-sm">ขอยกเลิก{{ title }}</div>
|
||||
<q-space />
|
||||
<q-btn
|
||||
icon="close"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
v-close-popup
|
||||
style="color: #ff8080; background-color: #ffdede"
|
||||
/>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-section class="q-p-md row q-gutter-y-md">
|
||||
<div flat :class="modeCancel == true ? 'col-xs-6 col-sm-6': 'col-12'">
|
||||
<div class="col-12 q-col-gutter-sm row items-center">
|
||||
<div class="col-6 text-grey-7">เขียนที่</div>
|
||||
<div class="col-6 text-black">{{ location }}</div>
|
||||
<div class="col-6 text-grey-7">เรื่องและเหตุผลการลา</div>
|
||||
<div class="col-6 text-black">{{ subject }}</div>
|
||||
<div class="col-6 text-grey-7">วัน เดือน ปีเริ่มต้น</div>
|
||||
<div class="col-6 text-black">{{ dateStart }}</div>
|
||||
<div class="col-6 text-grey-7">วัน เดือน ปีสิ้นสุด</div>
|
||||
<div class="col-6 text-black">{{ dateEnd }}</div>
|
||||
<div class="col-6 text-grey-7">จำนวนวันที่ลา</div>
|
||||
<div class="col-6 text-black">{{ numDate }}</div>
|
||||
<div class="col-6 text-grey-7">สถานที่ติดต่อขณะลา</div>
|
||||
<div class="col-6 text-black">{{ place }}</div>
|
||||
<div class="col-6 text-grey-7">หมายเลขโทรศัพท์</div>
|
||||
<div class="col-6 text-black">{{ phone }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div flat class="col-xs-6 col-sm-6" v-if="modeCancel == true">
|
||||
<q-input
|
||||
v-model="reason"
|
||||
type="textarea"
|
||||
label="กรอกเหตุผล"
|
||||
outlined
|
||||
dense
|
||||
/>
|
||||
<q-file outlined v-model="model" label="เลือกไฟล์เอกสารหลักฐาน" class="q-mt-md" use-chips dense>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-section class="row items-center q-pa-sm" v-if="modeCancel == true">
|
||||
<q-space />
|
||||
<q-btn
|
||||
label="ยืนยัน"
|
||||
unelevated
|
||||
color="secondary"
|
||||
dense
|
||||
class="q-px-md"
|
||||
v-close-popup
|
||||
/>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
<q-td key="status" :props="props">
|
||||
<div class="col-12 row items-center">
|
||||
<div @click="view(props.row.type)">
|
||||
<q-icon v-if="props.row.status == 'อนุมัติ'" size="10px" color="light-green" name="mdi-circle" class="q-mr-sm" />
|
||||
<q-icon v-else-if="props.row.status == 'ไม่อนุมัติ'" size="10px" color="red-6" name="mdi-circle" class="q-mr-sm" />
|
||||
<q-icon v-else-if="props.row.status == 'อยู่ระหว่างดำเนินการ'" size="10px" color="light-blue-14" name="mdi-circle" class="q-mr-sm" />
|
||||
<q-icon v-else-if="props.row.status == 'ใหม่'" size="10px" color="orange" name="mdi-circle" class="q-mr-sm" />
|
||||
<span class="q-pr-md">{{ props.row.status }}</span>
|
||||
</div>
|
||||
<q-space />
|
||||
<q-btn v-if="props.row.status == 'ใหม่'" label="ขอยกเลิก" @click="cancel(props.row.type)" size="13px" class="q-px-sm" outline dense color="orange" />
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</Table>
|
||||
|
||||
<!-- modal ขอยกเลิก/ดูรายละเอียด -->
|
||||
<q-dialog v-model="modalCancel" persistent>
|
||||
<q-card :style="modeCancel == true ? 'min-width: 50%;' : 'min-width:30%'">
|
||||
<q-card-section class="row items-center q-pa-sm">
|
||||
<div v-if="modeCancel == false" class="text-bold q-pl-sm">รายละเอียดของ{{ title }}</div>
|
||||
<div v-else class="text-bold q-pl-sm">ขอยกเลิก{{ title }}</div>
|
||||
<q-space />
|
||||
<q-btn icon="close" unelevated round dense v-close-popup style="color: #ff8080; background-color: #ffdede" />
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-section class="q-p-md row q-gutter-y-md">
|
||||
<div flat :class="modeCancel == true ? 'col-xs-6 col-sm-6' : 'col-12'">
|
||||
<div class="col-12 q-col-gutter-sm row items-center">
|
||||
<div class="col-6 text-grey-7">เขียนที่</div>
|
||||
<div class="col-6 text-black">{{ location }}</div>
|
||||
<div class="col-6 text-grey-7">เรื่องและเหตุผลการลา</div>
|
||||
<div class="col-6 text-black">{{ subject }}</div>
|
||||
<div class="col-6 text-grey-7">วัน เดือน ปีเริ่มต้น</div>
|
||||
<div class="col-6 text-black">{{ dateStart }}</div>
|
||||
<div class="col-6 text-grey-7">วัน เดือน ปีสิ้นสุด</div>
|
||||
<div class="col-6 text-black">{{ dateEnd }}</div>
|
||||
<div class="col-6 text-grey-7">จำนวนวันที่ลา</div>
|
||||
<div class="col-6 text-black">{{ numDate }}</div>
|
||||
<div class="col-6 text-grey-7">สถานที่ติดต่อขณะลา</div>
|
||||
<div class="col-6 text-black">{{ place }}</div>
|
||||
<div class="col-6 text-grey-7">หมายเลขโทรศัพท์</div>
|
||||
<div class="col-6 text-black">{{ phone }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div flat class="col-xs-6 col-sm-6" v-if="modeCancel == true">
|
||||
<q-input v-model="reason" type="textarea" label="กรอกเหตุผล" outlined dense />
|
||||
<q-file outlined v-model="model" label="เลือกไฟล์เอกสารหลักฐาน" class="q-mt-md" use-chips dense>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-section class="row items-center q-pa-sm" v-if="modeCancel == true">
|
||||
<q-space />
|
||||
<q-btn label="ยืนยัน" unelevated color="secondary" dense class="q-px-md" v-close-popup />
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import type { QTableProps } from "quasar";
|
||||
import { ref } from "vue";
|
||||
import type { QTableProps } from "quasar"
|
||||
import { ref, onMounted } from "vue"
|
||||
import Table from "@/modules/05_leave/componenst/Table.vue"
|
||||
import { useLeaveStore } from "@/modules/05_leave/store"
|
||||
|
||||
|
||||
const LeaveData = useLeaveStore()
|
||||
const { fecthList, searchFilterTable } = LeaveData
|
||||
const filter = ref<string>("")
|
||||
const visibleColumns = ref<String[]>(["no", "type", "date", "status"])
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: true,
|
||||
field: "no",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px; width:5%;",
|
||||
},
|
||||
{
|
||||
name: "type",
|
||||
align: "left",
|
||||
label: "ประเภทการลา",
|
||||
sortable: true,
|
||||
field: "type",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px; width:15%;",
|
||||
},
|
||||
{
|
||||
name: "date",
|
||||
align: "left",
|
||||
label: "วันที่ยื่นใบลา",
|
||||
sortable: true,
|
||||
field: "date",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px; width:15%;",
|
||||
},
|
||||
{
|
||||
name: "status",
|
||||
align: "left",
|
||||
label: "สถานะ",
|
||||
sortable: true,
|
||||
field: "status",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px; width:10%;",
|
||||
},
|
||||
])
|
||||
const rows = ref<any>([
|
||||
{no:'1',date: '20 ก.ย. 2566',type: 'ลาป่วย',status: 'ใหม่' },
|
||||
{no:'2',date: '19 ก.ย. 2566',type: 'ลาป่วย',status: 'อยู่ระหว่างดำเนินการ' },
|
||||
{no:'3',date: '10 ก.ย. 2566',type: 'ลากิจส่วนตัว',status: 'อนุมัติ' },
|
||||
])
|
||||
|
||||
const initialPagination = ref({
|
||||
rowsPerPage: 0,
|
||||
})
|
||||
|
||||
const modalCancel = ref(false);
|
||||
const title = ref('');
|
||||
const location = ref('บ้าน');
|
||||
const subject = ref('ลาป่วย');
|
||||
const dateStart = ref('20 ส.ค. 2566');
|
||||
const dateEnd= ref('21 ส.ค. 2566');
|
||||
const numDate= ref('20');
|
||||
const place = ref('บ้าน');
|
||||
const phone = ref('000-00000000');
|
||||
const reason = ref('ยกเลิกการลา');
|
||||
const model = ref(null);
|
||||
const modeCancel = ref(true);
|
||||
const modalCancel = ref(false)
|
||||
const title = ref("")
|
||||
const location = ref("บ้าน")
|
||||
const subject = ref("ลาป่วย")
|
||||
const dateStart = ref("20 ส.ค. 2566")
|
||||
const dateEnd = ref("21 ส.ค. 2566")
|
||||
const numDate = ref("20")
|
||||
const place = ref("บ้าน")
|
||||
const phone = ref("000-00000000")
|
||||
const reason = ref("ยกเลิกการลา")
|
||||
const model = ref(null)
|
||||
const modeCancel = ref(true)
|
||||
|
||||
const cancel = async (text: string) => {
|
||||
title.value = text;
|
||||
modalCancel.value = true;
|
||||
modeCancel.value = true;
|
||||
};
|
||||
title.value = text
|
||||
modalCancel.value = true
|
||||
modeCancel.value = true
|
||||
}
|
||||
const view = async (text: string) => {
|
||||
title.value = text;
|
||||
modalCancel.value = true;
|
||||
modeCancel.value = false;
|
||||
};
|
||||
</script>
|
||||
title.value = text
|
||||
modalCancel.value = true
|
||||
modeCancel.value = false
|
||||
}
|
||||
onMounted(async () => {
|
||||
searchFilterTable()
|
||||
fecthList([
|
||||
{ no: "1", date: "2023-09-20", type: "1", status: "4", year: "2566" },
|
||||
{ no: "2", date: "2023-09-19", type: "1", status: "2", year: "2566" },
|
||||
{ no: "3", date: "2023-09-10", type: "2", status: "3", year: "2566" },
|
||||
])
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="type"
|
||||
v-model="LeaveData.LeaveType"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกประเภทใบลา'}`]"
|
||||
:label="`${'ประเภทใบลา'}`"
|
||||
emit-value
|
||||
|
|
@ -20,14 +20,14 @@
|
|||
class="col-xs-12 col-sm-auto"
|
||||
@update:model-value="searchFilterTable"
|
||||
@filter="(inputValue:any,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'typeOptions'
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'LeaveTypeOption'
|
||||
) "
|
||||
/>
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
v-model="status"
|
||||
v-model="LeaveData.LeaveStatus"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกสถานะ'}`]"
|
||||
:label="`${'สถานะ'}`"
|
||||
emit-value
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
class="col-xs-12 col-sm-auto"
|
||||
@update:model-value="searchFilterTable"
|
||||
@filter="(inputValue:any,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'statusOptions'
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'LeaveStatusOption'
|
||||
) "
|
||||
/>
|
||||
<q-space />
|
||||
|
|
@ -99,15 +99,21 @@
|
|||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, useAttrs } from "vue"
|
||||
import { ref, useAttrs, reactive, onMounted } from "vue"
|
||||
import { useLeaveStore } from "@/modules/05_leave/store"
|
||||
import type { OptionData } from "@/modules/05_leave/interface/index/main"
|
||||
import type { an } from "@fullcalendar/core/internal-common"
|
||||
import { useCounterMixin } from "@/stores/mixin"
|
||||
|
||||
const mixin = useCounterMixin()
|
||||
const { showLoader, hideLoader, date2Thai, messageError } = mixin
|
||||
const DataStore = useLeaveStore()
|
||||
const LeaveData = useLeaveStore()
|
||||
const { filterSelector, searchFilterTable } = LeaveData
|
||||
const attrs = ref<any>(useAttrs())
|
||||
const table = ref<any>(null)
|
||||
const filterRef = ref<any>(null)
|
||||
|
||||
const rows = ref<any[]>([])
|
||||
const type = ref("ทั้งหมด")
|
||||
const status = ref("ทั้งหมด")
|
||||
|
|
@ -115,15 +121,6 @@ const status = ref("ทั้งหมด")
|
|||
const initialPagination = ref({
|
||||
rowsPerPage: 0,
|
||||
})
|
||||
const yearly = ref<number>(new Date().getFullYear())
|
||||
let OriginalData = ref<any[]>([])
|
||||
let UpdataData = ref<any[]>([])
|
||||
|
||||
const OriginalDataFetch = async () => {
|
||||
await DataStore.DataMain(rows.value)
|
||||
OriginalData.value = await DataStore.DataMainOrig
|
||||
UpdataData.value = OriginalData.value
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
count: Number,
|
||||
|
|
@ -157,69 +154,6 @@ const resetFilter = () => {
|
|||
emit("update:inputfilter", "")
|
||||
filterRef.value.focus()
|
||||
}
|
||||
|
||||
const searchFilterTable = async () => {
|
||||
// ส่งไป filter รายการข้อมูลตามเงื่อนไข
|
||||
await DataStore.DataUpdate(typeOptions.value, statusOptions.value)
|
||||
UpdataData.value = DataStore.DataMainUpdate
|
||||
}
|
||||
|
||||
// รายการข้อมูลประเภท
|
||||
const typeOptions = ref<string>("")
|
||||
const typeOptionsFilter1 = ref<any>([])
|
||||
const typeOptionsOption = ref<any[]>([{ id: "", name: "ทั้งหมด" }])
|
||||
|
||||
const TypeFilter = async () => {
|
||||
// await http
|
||||
// .get(config.API.typeOrder())
|
||||
// .then((res) => {
|
||||
// const response = res.data.result;
|
||||
// LeaveData.typeOptions = [{ id: "", name: "ทั้งหมด" }];
|
||||
// TypeOption.value.push(...response);
|
||||
// typeOptionsFilter1.value = [{ id: "", name: "ทั้งหมด" }];
|
||||
// typeOptionsFilter1.value.push(...response);
|
||||
// })
|
||||
// .catch((e) => {
|
||||
// messageError($q, e);
|
||||
// });
|
||||
}
|
||||
|
||||
// รายการข้อมูลประเภท
|
||||
const statusOptions = ref<string>("")
|
||||
const statusOptionsFilter1 = ref<any>([])
|
||||
const statusOptionsOption = ref<any[]>([{ id: "", name: "ทั้งหมด" }])
|
||||
|
||||
const statusOptionsFilter = async () => {
|
||||
// await http
|
||||
// .get(config.API.typeOrder())
|
||||
// .then((res) => {
|
||||
// const response = res.data.result;
|
||||
// LeaveData.typeOptions = [{ id: "", name: "ทั้งหมด" }];
|
||||
// TypeOption.value.push(...response);
|
||||
// typeOptionsFilter1.value = [{ id: "", name: "ทั้งหมด" }];
|
||||
// typeOptionsFilter1.value.push(...response);
|
||||
// })
|
||||
// .catch((e) => {
|
||||
// messageError($q, e);
|
||||
// });
|
||||
}
|
||||
|
||||
const filterSelector = (val: any, update: Function, refData: string) => {
|
||||
switch (refData) {
|
||||
case "typeOptions":
|
||||
update(() => {
|
||||
LeaveData.typeOptions.values = typeOptionsFilter1.value.filter((v: any) => v.name.indexOf(val) > -1)
|
||||
})
|
||||
break
|
||||
case "statusOptions":
|
||||
update(() => {
|
||||
LeaveData.statusOptions.values = statusOptionsFilter1.value.filter((v: any) => v.name.indexOf(val) > -1)
|
||||
})
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.icon-color {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue