แก้ไข ui เพิ่ม funciton// รอบการปฏิบัติงาน
This commit is contained in:
parent
c7e7abe441
commit
624f9cbd47
3 changed files with 212 additions and 1 deletions
|
|
@ -0,0 +1,138 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import DialogHeader from "@/components/DialogHeader.vue";
|
||||||
|
import { ref, useAttrs } from "vue";
|
||||||
|
import type { QTableProps } from "quasar";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
modal: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: "ตรวจสอบคุณสมบัติ",
|
||||||
|
},
|
||||||
|
desc: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
clickClose: {
|
||||||
|
type: Function,
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: "Expert",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const attrs = ref<any>(useAttrs());
|
||||||
|
const currentPage = ref<number>(1);
|
||||||
|
const pageSize = ref<number>(10);
|
||||||
|
const maxPage = ref<number>(1);
|
||||||
|
const page = ref<number>(1);
|
||||||
|
const filter = ref<string>("");
|
||||||
|
const rowsPerPage = ref<number>(10);
|
||||||
|
|
||||||
|
/**
|
||||||
|
*pagination ของตาราง
|
||||||
|
*/
|
||||||
|
const pagination = ref({
|
||||||
|
descending: false,
|
||||||
|
page: page.value,
|
||||||
|
rowsPerPage: rowsPerPage.value,
|
||||||
|
});
|
||||||
|
|
||||||
|
const rows = ref<any[]>([]);
|
||||||
|
const columns = ref<QTableProps["columns"]>([
|
||||||
|
{
|
||||||
|
name: "degree",
|
||||||
|
align: "center",
|
||||||
|
label: "คุณวุฒิ",
|
||||||
|
sortable: false,
|
||||||
|
field: "degree",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "level",
|
||||||
|
align: "left",
|
||||||
|
label: "ระดับ",
|
||||||
|
sortable: true,
|
||||||
|
field: "level",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
sort: (a: string, b: string) =>
|
||||||
|
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Expert",
|
||||||
|
align: "center",
|
||||||
|
label: "ชำนาญการ",
|
||||||
|
sortable: false,
|
||||||
|
field: "Expert",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
const visibleColumns = ref<String[]>(["degree", "level", "Expert"]);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<q-dialog v-model="props.modal" persistent>
|
||||||
|
<q-card style="width: 35vw; max-width: 35vw">
|
||||||
|
<d-table
|
||||||
|
ref="table"
|
||||||
|
:columns="columns"
|
||||||
|
:rows="rows"
|
||||||
|
:filter="filter"
|
||||||
|
row-key="interrogated"
|
||||||
|
flat
|
||||||
|
bordered
|
||||||
|
:paging="true"
|
||||||
|
dense
|
||||||
|
class="custom-header-table"
|
||||||
|
v-bind="attrs"
|
||||||
|
:visible-columns="visibleColumns"
|
||||||
|
v-model:pagination="pagination"
|
||||||
|
>
|
||||||
|
<template v-slot:header="props">
|
||||||
|
<q-tr :props="props">
|
||||||
|
<q-th auto-width></q-th>
|
||||||
|
<q-th
|
||||||
|
v-for="col in props.cols"
|
||||||
|
:key="col.name"
|
||||||
|
:props="props"
|
||||||
|
style="color: #000000; font-weight: 500"
|
||||||
|
>
|
||||||
|
<span class="text-weight-medium">{{ col.label }}</span>
|
||||||
|
</q-th>
|
||||||
|
<!-- <q-th auto-width></q-th> -->
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
<template v-slot:body="props">
|
||||||
|
<q-tr :props="props" class="cursor-pointer">
|
||||||
|
<q-td auto-width>
|
||||||
|
<q-icon
|
||||||
|
v-if="props.row.isDefault === true"
|
||||||
|
name="mdi-bookmark"
|
||||||
|
size="xs"
|
||||||
|
color="primary"
|
||||||
|
>
|
||||||
|
<q-tooltip>เวลา Default</q-tooltip>
|
||||||
|
</q-icon>
|
||||||
|
</q-td>
|
||||||
|
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||||
|
<div v-if="col.name == 'no'">
|
||||||
|
{{ props.rowIndex + 1 }}
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
{{ col.value }}
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</d-table>
|
||||||
|
</q-card>
|
||||||
|
</q-dialog>
|
||||||
|
</template>
|
||||||
|
|
@ -68,6 +68,13 @@ const formData = reactive<FormData>({
|
||||||
isActive: false,
|
isActive: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
/**FunctionCheckbox แก้ไขสถานะ */
|
||||||
|
function checkDefault() {
|
||||||
|
if (formData.isDefault === true) {
|
||||||
|
formData.isActive = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/** Function validateForm*/
|
/** Function validateForm*/
|
||||||
function validateForm() {
|
function validateForm() {
|
||||||
const hasError = [];
|
const hasError = [];
|
||||||
|
|
@ -356,7 +363,11 @@ watch(
|
||||||
<div class="row items-center q-my-sm justify-between">
|
<div class="row items-center q-my-sm justify-between">
|
||||||
<p class="q-ma-none">เวลา Default</p>
|
<p class="q-ma-none">เวลา Default</p>
|
||||||
<label class="toggle-control">
|
<label class="toggle-control">
|
||||||
<input type="checkbox" v-model="formData.isDefault" />
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
v-model="formData.isDefault"
|
||||||
|
@change="checkDefault()"
|
||||||
|
/>
|
||||||
<span class="control"></span>
|
<span class="control"></span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -21,6 +21,8 @@ const dataStore = useChangeRoundDataStore();
|
||||||
const $q = useQuasar();
|
const $q = useQuasar();
|
||||||
|
|
||||||
const modal = ref<boolean>(false);
|
const modal = ref<boolean>(false);
|
||||||
|
const dateWork = ref<any>();
|
||||||
|
const modalFix = ref<boolean>(false);
|
||||||
const editCheck = ref<string>("");
|
const editCheck = ref<string>("");
|
||||||
const DataRow = ref<any>();
|
const DataRow = ref<any>();
|
||||||
const formData = reactive<dataPost>({
|
const formData = reactive<dataPost>({
|
||||||
|
|
@ -45,9 +47,14 @@ function Openmodal(check: string, detail: any) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function OpenmodalFix(detail: any) {
|
||||||
|
modalFix.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
/** Function closePopup */
|
/** Function closePopup */
|
||||||
function closeDialog() {
|
function closeDialog() {
|
||||||
modal.value = false;
|
modal.value = false;
|
||||||
|
modalFix.value = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Function ค้นหาข้อมูล */
|
/** Function ค้นหาข้อมูล */
|
||||||
|
|
@ -180,6 +187,15 @@ function searchData() {
|
||||||
<q-item-label>ประวัติการเปลี่ยนรอบ</q-item-label>
|
<q-item-label>ประวัติการเปลี่ยนรอบ</q-item-label>
|
||||||
</q-item-section>
|
</q-item-section>
|
||||||
</q-item>
|
</q-item>
|
||||||
|
<q-item
|
||||||
|
clickable
|
||||||
|
v-close-popup
|
||||||
|
@click="OpenmodalFix(props.row)"
|
||||||
|
>
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label>แก้ไขปฏิทินวันทำงาน</q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
</q-list>
|
</q-list>
|
||||||
</q-menu>
|
</q-menu>
|
||||||
</q-btn>
|
</q-btn>
|
||||||
|
|
@ -198,6 +214,52 @@ function searchData() {
|
||||||
:personId="DataRow == null ? '' : DataRow.profileId"
|
:personId="DataRow == null ? '' : DataRow.profileId"
|
||||||
@update:change-page="dataStore.changePage"
|
@update:change-page="dataStore.changePage"
|
||||||
/>
|
/>
|
||||||
|
<q-dialog v-model="modalFix" persistent>
|
||||||
|
<q-card style="min-width: 800px"
|
||||||
|
><q-toolbar>
|
||||||
|
<q-toolbar-title class="text-subtitle1 text-bold">
|
||||||
|
{{ "แก้ไขปฏิทินวันทำงาน" }}
|
||||||
|
</q-toolbar-title>
|
||||||
|
<q-btn
|
||||||
|
icon="close"
|
||||||
|
unelevated
|
||||||
|
round
|
||||||
|
dense
|
||||||
|
@click="closeDialog"
|
||||||
|
style="color: #ff8080; background-color: #ffdede"
|
||||||
|
/>
|
||||||
|
</q-toolbar>
|
||||||
|
<q-separator color="grey-4" />
|
||||||
|
<q-form @submit="closeDialog" class="q-gutter-md">
|
||||||
|
<div class="q-pa-md">
|
||||||
|
<q-radio
|
||||||
|
name="dateWork"
|
||||||
|
v-model="dateWork"
|
||||||
|
val="line"
|
||||||
|
label="ทำงาน 5 วัน"
|
||||||
|
/>
|
||||||
|
<q-radio
|
||||||
|
name="dateWork"
|
||||||
|
v-model="dateWork"
|
||||||
|
val="rectangle"
|
||||||
|
label="ทำงาน 6 วัน"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<q-separator color="grey-4" />
|
||||||
|
<div class="q-pa-xs">
|
||||||
|
<div class="row justify-end q-mr-sm q-py-sm">
|
||||||
|
<q-btn
|
||||||
|
id="onSubmit"
|
||||||
|
type="submit"
|
||||||
|
unelevated
|
||||||
|
label="บันทึก"
|
||||||
|
class="q-px-md items-center"
|
||||||
|
color="secondary"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-form> </q-card
|
||||||
|
></q-dialog>
|
||||||
</template>
|
</template>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.q-table tbody td:before.no-background {
|
.q-table tbody td:before.no-background {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue