UI วินัย
This commit is contained in:
setthawutttty
parent
c9f625e8d8
commit
818b167b8d
6 changed files with 778 additions and 12 deletions
|
|
@ -0,0 +1,328 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
|
||||
const $q = useQuasar();
|
||||
const route = useRoute();
|
||||
const mixin = useCounterMixin();
|
||||
const { dialogMessageNotify, showLoader, hideLoader, success, messageError } =
|
||||
mixin;
|
||||
|
||||
const checkRoutePermisson = ref<boolean>(
|
||||
route.name == "disciplineInvestigatefactsDetail"
|
||||
);
|
||||
|
||||
const props = defineProps({
|
||||
rows: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
columns: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
visibleColumns: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
fetchData: Function,
|
||||
});
|
||||
|
||||
const remark = ref<string>("");
|
||||
const selected = ref<any[]>([]);
|
||||
const file = ref<any>(null);
|
||||
const pagination = ref<any>({
|
||||
descending: false,
|
||||
rowsPerPage: 25,
|
||||
});
|
||||
|
||||
function close() {
|
||||
modal.value = false;
|
||||
file.value = null;
|
||||
selected.value = [];
|
||||
remark.value = "";
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
if (selected.value.length !== 0) {
|
||||
const body = new FormData();
|
||||
selected.value
|
||||
.map((items: any) => items.id)
|
||||
.forEach((items: any) => {
|
||||
body.append("id", items);
|
||||
});
|
||||
body.append("file", file.value);
|
||||
body.append("remark", remark.value);
|
||||
showLoader();
|
||||
http
|
||||
.post(config.API.investigateReport(), body)
|
||||
.then((res) => {
|
||||
close();
|
||||
props.fetchData?.();
|
||||
success($q, "ส่งรายชื่อไปยุติเรื่อง สำเร็จ");
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
} else {
|
||||
dialogMessageNotify($q, "กรุณาเลือกรายชื่ออย่างน้อย 1 คน");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card class="col-12" style="width: 80%">
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||
<DialogHeader :tittle="'ส่งรายชื่อไปยุติเรื่อง'" :close="close" />
|
||||
<q-separator />
|
||||
|
||||
<q-card-section class="scroll" style="max-height: 70vh">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12 col-md-8">
|
||||
<q-card bordered>
|
||||
<q-card-section class="bg-grey-2 text-weight-medium q-pa-sm"
|
||||
>รายชื่อ</q-card-section
|
||||
>
|
||||
<q-separator />
|
||||
<q-card-section class="q-pa-xs">
|
||||
<q-table
|
||||
:columns="props.columns"
|
||||
:rows="rows"
|
||||
row-key="personId"
|
||||
flat
|
||||
bordered
|
||||
:paging="false"
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
dense
|
||||
class="my-sticky-custom"
|
||||
:visible-columns="props.visibleColumns"
|
||||
selection="multiple"
|
||||
v-model:selected="selected"
|
||||
v-model:pagination="pagination"
|
||||
>
|
||||
<template v-slot:header-selection="scope">
|
||||
<q-checkbox
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
v-model="scope.selected"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td>
|
||||
<q-checkbox
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
v-model="props.selected"
|
||||
/>
|
||||
</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 ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</q-table>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-12 col-md-4">
|
||||
<q-card
|
||||
bordered
|
||||
class="row col-12"
|
||||
style="border: 1px solid #d6dee1"
|
||||
>
|
||||
<div
|
||||
class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
|
||||
>
|
||||
อัปโหลดไฟล์เอกสาร
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<div class="row col-12 q-col-gutter-y-sm q-pa-sm">
|
||||
<div v-if="!checkRoutePermisson" class="col-12 row">
|
||||
<q-file
|
||||
class="col-12"
|
||||
for="#evidenceFiles"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกเลือกเอกสารที่เกี่ยวข้อง'}`,]"
|
||||
v-model="file"
|
||||
label="เอกสารที่เกี่ยวข้องกับการยุติเรื่อง"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
|
||||
<!-- <div class="col-xs-12 row">
|
||||
<q-list
|
||||
class="full-width rounded-borders"
|
||||
bordered
|
||||
separator
|
||||
>
|
||||
<q-item
|
||||
v-for="file in props.data
|
||||
.disciplineInvestigateRelevantDocs"
|
||||
:key="file.id"
|
||||
clickable
|
||||
v-ripple
|
||||
>
|
||||
<q-item-section>{{ file.fileName }}</q-item-section>
|
||||
<q-item-section avatar>
|
||||
<div class="row">
|
||||
<div>
|
||||
<q-btn
|
||||
dense
|
||||
flat
|
||||
round
|
||||
color="blue"
|
||||
icon="mdi-download"
|
||||
@click="
|
||||
downloadRenameFileByLink(
|
||||
file.pathName,
|
||||
file.fileName
|
||||
)
|
||||
"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
<div>
|
||||
<q-btn
|
||||
v-if="!isReadonly && !checkRoutePermisson"
|
||||
dense
|
||||
flat
|
||||
round
|
||||
color="red"
|
||||
icon="mdi-delete"
|
||||
@click="deleteFileRelevant(file.id)"
|
||||
><q-tooltip>ลบไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</div> -->
|
||||
|
||||
<div class="col-12" v-else>
|
||||
<q-card class="q-pa-md" bordered>
|
||||
ไม่มีรายการเอกสาร
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
label="หมายเหตุ"
|
||||
type="textarea"
|
||||
v-model="remark"
|
||||
></q-input>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
|
||||
<q-card-actions align="right">
|
||||
<q-btn label="บันทึก" color="secondary" type="submit"
|
||||
><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
|
||||
>
|
||||
</q-card-actions>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.my-sticky-custom {
|
||||
max-height: 60vh;
|
||||
.q-table tr:nth-child(odd) td {
|
||||
background: white;
|
||||
}
|
||||
.q-table tr:nth-child(even) td {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
td:first-child,
|
||||
td:nth-child(2) {
|
||||
background-color: #fff;
|
||||
z-index: 1;
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
td:first-child {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
td:nth-child(2) {
|
||||
left: 44px;
|
||||
}
|
||||
|
||||
tr th {
|
||||
position: sticky;
|
||||
z-index: 2;
|
||||
background: #ecebeb;
|
||||
}
|
||||
|
||||
thead tr:last-child th {
|
||||
top: 48px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
thead tr:first-child th {
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
tr:first-child th:first-child {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
tr:first-child th:nth-child(2) {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
th:first-child {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
th:nth-child(2) {
|
||||
position: sticky;
|
||||
|
||||
left: 44px; // ต้องเท่ากับหรือตามความกว้างคอลัมน์แรก
|
||||
}
|
||||
|
||||
tbody {
|
||||
scroll-margin-top: 48px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue