แก้ไข ui เพิ่ม funciton// รอบการปฏิบัติงาน
This commit is contained in:
AnandaTon
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,
|
||||
});
|
||||
|
||||
/**FunctionCheckbox แก้ไขสถานะ */
|
||||
function checkDefault() {
|
||||
if (formData.isDefault === true) {
|
||||
formData.isActive = true;
|
||||
}
|
||||
}
|
||||
|
||||
/** Function validateForm*/
|
||||
function validateForm() {
|
||||
const hasError = [];
|
||||
|
|
@ -356,7 +363,11 @@ watch(
|
|||
<div class="row items-center q-my-sm justify-between">
|
||||
<p class="q-ma-none">เวลา Default</p>
|
||||
<label class="toggle-control">
|
||||
<input type="checkbox" v-model="formData.isDefault" />
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="formData.isDefault"
|
||||
@change="checkDefault()"
|
||||
/>
|
||||
<span class="control"></span>
|
||||
</label>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -21,6 +21,8 @@ const dataStore = useChangeRoundDataStore();
|
|||
const $q = useQuasar();
|
||||
|
||||
const modal = ref<boolean>(false);
|
||||
const dateWork = ref<any>();
|
||||
const modalFix = ref<boolean>(false);
|
||||
const editCheck = ref<string>("");
|
||||
const DataRow = ref<any>();
|
||||
const formData = reactive<dataPost>({
|
||||
|
|
@ -45,9 +47,14 @@ function Openmodal(check: string, detail: any) {
|
|||
}
|
||||
}
|
||||
|
||||
function OpenmodalFix(detail: any) {
|
||||
modalFix.value = true;
|
||||
}
|
||||
|
||||
/** Function closePopup */
|
||||
function closeDialog() {
|
||||
modal.value = false;
|
||||
modalFix.value = false;
|
||||
}
|
||||
|
||||
/** Function ค้นหาข้อมูล */
|
||||
|
|
@ -180,6 +187,15 @@ function searchData() {
|
|||
<q-item-label>ประวัติการเปลี่ยนรอบ</q-item-label>
|
||||
</q-item-section>
|
||||
</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-menu>
|
||||
</q-btn>
|
||||
|
|
@ -198,6 +214,52 @@ function searchData() {
|
|||
:personId="DataRow == null ? '' : DataRow.profileId"
|
||||
@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>
|
||||
<style scoped lang="scss">
|
||||
.q-table tbody td:before.no-background {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue