add workflow
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
f340a0f8c2
commit
cda33795cc
4 changed files with 345 additions and 42 deletions
113
src/components/Workflow/DialogApprove.vue
Normal file
113
src/components/Workflow/DialogApprove.vue
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
const $q = useQuasar();
|
||||
const { dialogConfirm } = useCounterMixin();
|
||||
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
|
||||
const isAcknowledge = ref<boolean>(false);
|
||||
const isConsider = ref<boolean>(true);
|
||||
const isComment = ref<boolean>(true);
|
||||
|
||||
const acknowledge = ref<boolean>(false);
|
||||
const consider = ref<string>("");
|
||||
const comment = ref<string>("");
|
||||
|
||||
function onSubmit() {
|
||||
dialogConfirm($q, () => {});
|
||||
}
|
||||
|
||||
function onCloseModal() {
|
||||
modal.value = false;
|
||||
acknowledge.value = false;
|
||||
consider.value = "";
|
||||
comment.value = "";
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card style="min-width: 700px">
|
||||
<q-form q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||
<DialogHeader
|
||||
:tittle="`รับทราบ/พิจารณา/แสดงความเห็น`"
|
||||
:close="onCloseModal"
|
||||
/>
|
||||
<q-separator />
|
||||
|
||||
<q-card-section>
|
||||
<div class="q-gutter-xs">
|
||||
<div v-if="isAcknowledge">
|
||||
<q-checkbox
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
v-model="acknowledge"
|
||||
label="รับทราบ"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="!isAcknowledge && isConsider">
|
||||
<div class="text-weight-bold">พิจารณา (อนุมัติ/ไม่อนุมัติ)</div>
|
||||
<div class="q-pa-sm q-gutter-sm">
|
||||
<q-radio
|
||||
dense
|
||||
keep-color
|
||||
color="primary"
|
||||
v-model="consider"
|
||||
label="อนุมัติ"
|
||||
val="approve"
|
||||
/>
|
||||
<q-radio
|
||||
dense
|
||||
keep-color
|
||||
color="primary"
|
||||
v-model="consider"
|
||||
label="ไม่อนุมัติ"
|
||||
val="reject"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!isAcknowledge && isComment">
|
||||
<div class="text-weight-bold">แสดงความเห็นในเอกสาร</div>
|
||||
<div class="q-pa-sm q-gutter-sm">
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
label="ความเห็น"
|
||||
v-model="comment"
|
||||
type="textarea"
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val:string) => !!val || `${'กรุณากรอกความเห็น'}`,
|
||||
]"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-separator />
|
||||
|
||||
<q-card-actions align="right">
|
||||
<q-btn
|
||||
label="บันทึก"
|
||||
color="public"
|
||||
type="submit"
|
||||
:disable="!isAcknowledge && !isConsider && !isComment"
|
||||
>
|
||||
</q-btn>
|
||||
</q-card-actions>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
194
src/components/Workflow/DialogSelectPerson.vue
Normal file
194
src/components/Workflow/DialogSelectPerson.vue
Normal file
|
|
@ -0,0 +1,194 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
import type { QTableProps } from "quasar";
|
||||
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
|
||||
const $q = useQuasar();
|
||||
const { dialogConfirm } = useCounterMixin();
|
||||
|
||||
const modal = defineModel<boolean>("modal", { required: true });
|
||||
|
||||
/** table*/
|
||||
const selected = ref<any[]>([]);
|
||||
const rows = ref<any[]>([
|
||||
{
|
||||
fullName: "นายศรัณย์ ศิลาดี",
|
||||
position: "นักบริหาร",
|
||||
posType: "บริหาร(สูง)",
|
||||
organization: "",
|
||||
},
|
||||
]);
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "fullName",
|
||||
align: "left",
|
||||
label: "ชื่อ-นามสกุล",
|
||||
sortable: true,
|
||||
field: "fullName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "position",
|
||||
align: "left",
|
||||
label: "ตำแหน่งในสายงาน",
|
||||
sortable: true,
|
||||
field: "position",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "posType",
|
||||
align: "left",
|
||||
label: "ประเภทตำแหน่ง",
|
||||
sortable: true,
|
||||
field: "posType",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "organization",
|
||||
align: "left",
|
||||
label: "สังกัด",
|
||||
field: "organization",
|
||||
sortable: true,
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
|
||||
const isAcknowledge = ref<boolean>(false);
|
||||
const isConsider = ref<boolean>(false);
|
||||
const isComment = ref<boolean>(false);
|
||||
|
||||
function fetchLists() {}
|
||||
|
||||
function onSubmit() {
|
||||
dialogConfirm($q, () => {});
|
||||
}
|
||||
|
||||
function onCloseModal() {
|
||||
modal.value = false;
|
||||
selected.value = [];
|
||||
rows.value = [];
|
||||
}
|
||||
|
||||
watch(modal, (val) => {
|
||||
if (val) {
|
||||
fetchLists();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card style="min-width: 700px">
|
||||
<q-form q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||
<DialogHeader :tittle="`เลือกรายชื่อ`" :close="onCloseModal" />
|
||||
<q-separator />
|
||||
|
||||
<q-card-section>
|
||||
<d-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
row-key="id"
|
||||
flat
|
||||
bordered
|
||||
:paging="true"
|
||||
dense
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
selection="single"
|
||||
v-model:selected="selected"
|
||||
>
|
||||
<template v-slot:header-selection="scope">
|
||||
<q-checkbox
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
v-model="scope.checkBox"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th auto-width />
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
</q-tr>
|
||||
</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>
|
||||
{{ col.value ? col.value : "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
<div class="q-gutter-xs q-pt-sm">
|
||||
<div>
|
||||
<q-checkbox
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
v-model="isAcknowledge"
|
||||
label="ให้เลือกรับทราบ"
|
||||
@update:model-value="(isConsider = false), (isComment = false)"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="!isAcknowledge">
|
||||
<q-checkbox
|
||||
dense
|
||||
keep-color
|
||||
color="primary"
|
||||
v-model="isConsider"
|
||||
label="ให้เลือกพิจารณา (อนุมัติ/ไม่อนุมัติ)"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="!isAcknowledge">
|
||||
<q-checkbox
|
||||
dense
|
||||
keep-color
|
||||
color="primary"
|
||||
v-model="isComment"
|
||||
label="ให้แสดงความเห็นในเอกสาร"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-separator />
|
||||
|
||||
<q-card-actions align="right">
|
||||
<q-btn
|
||||
label="ส่งไปยังผู้บังคับบัญชา/ผู้มีอำนาจ"
|
||||
color="public"
|
||||
type="submit"
|
||||
:disable="
|
||||
selected.length === 0 ||
|
||||
(!isAcknowledge && !isConsider && !isComment)
|
||||
"
|
||||
>
|
||||
</q-btn>
|
||||
</q-card-actions>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
172
src/components/Workflow/Main.vue
Normal file
172
src/components/Workflow/Main.vue
Normal file
|
|
@ -0,0 +1,172 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, ref } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
import DialogSelectPerson from "@/components/Workflow/DialogSelectPerson.vue";
|
||||
import DialogApprove from "@/components/Workflow/DialogApprove.vue";
|
||||
|
||||
const $q = useQuasar();
|
||||
const { dialogConfirm } = useCounterMixin();
|
||||
|
||||
const { id, sysName } = defineProps({
|
||||
id: { type: String, require: true },
|
||||
sysName: { type: String, require: true },
|
||||
});
|
||||
|
||||
const state = ref<number>(1);
|
||||
const isChangeState = ref<boolean>(false);
|
||||
const isOperate = ref<boolean>(false);
|
||||
|
||||
const rowsOperate = ref<any[]>([
|
||||
{
|
||||
fullName: "ชื่อนาม - สกุล",
|
||||
comment: "ความเห็น",
|
||||
position: " บริหาร - ต้น ",
|
||||
status: "อนุมัติ",
|
||||
},
|
||||
]);
|
||||
const modalSelectPerson = ref<boolean>(false);
|
||||
const modalApprove = ref<boolean>(false);
|
||||
|
||||
const itemState = ref<any[]>([
|
||||
{
|
||||
stateNo: 1,
|
||||
stateName: "Darft",
|
||||
},
|
||||
{
|
||||
stateNo: 2,
|
||||
stateName: "Operate",
|
||||
},
|
||||
{
|
||||
stateNo: 3,
|
||||
stateName: "Finish",
|
||||
},
|
||||
]);
|
||||
|
||||
function fetchData() {
|
||||
console.log(id, sysName);
|
||||
const data = {
|
||||
stateNo: 1,
|
||||
step: 1,
|
||||
can_view: true,
|
||||
can_update: true,
|
||||
can_operate: true,
|
||||
can_change_state: true,
|
||||
can_delete: false,
|
||||
can_cancel: false,
|
||||
};
|
||||
|
||||
state.value = data.stateNo;
|
||||
isChangeState.value = data.can_change_state;
|
||||
isOperate.value = data.can_operate;
|
||||
}
|
||||
|
||||
function onConfirmDraft() {
|
||||
dialogConfirm($q, () => {
|
||||
state.value++;
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-card bordered class="row col-12">
|
||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center">
|
||||
<div class="q-pl-sm text-weight-bold text-dark">Workflow</div>
|
||||
<q-space />
|
||||
<!-- <q-btn
|
||||
@click.prevent="modalApprove = true"
|
||||
label="DialogApprove"
|
||||
color="public"
|
||||
/> -->
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<q-card-section>
|
||||
<div class="q-px-lg q-py-md">
|
||||
<q-timeline color="primary">
|
||||
<q-timeline-entry
|
||||
v-for="(step, index) in itemState"
|
||||
:key="index"
|
||||
:title="step.stateName"
|
||||
:icon="
|
||||
state === index + 1
|
||||
? 'mdi-pencil'
|
||||
: state > index + 1
|
||||
? 'done'
|
||||
: `mdi-numeric-${index + 1}`
|
||||
"
|
||||
:color="state < index + 1 ? 'grey-4' : ''"
|
||||
>
|
||||
<!-- Darft -->
|
||||
<div
|
||||
class="row q-col-gutter-sm"
|
||||
v-if="step.stateName === 'Darft' && state === 1"
|
||||
>
|
||||
<div>
|
||||
<q-btn
|
||||
v-if="isChangeState"
|
||||
@click.prevent="onConfirmDraft"
|
||||
label="Next Step"
|
||||
color="primary"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Operate -->
|
||||
<div
|
||||
class="q-col-gutter-sm"
|
||||
v-if="step.stateName === 'Operate' && state > 1"
|
||||
>
|
||||
<div>
|
||||
<q-list bordered separator style="min-width: 20vw">
|
||||
<q-item v-for="(item, index) in rowsOperate" :key="index">
|
||||
<q-item-section>
|
||||
<q-item-label
|
||||
>{{ item.fullName }}
|
||||
{{ `(${item.position})` }}</q-item-label
|
||||
>
|
||||
<q-item-label caption lines="2">{{
|
||||
item.comment
|
||||
}}</q-item-label>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section side top>
|
||||
<q-item-label class="text-green">
|
||||
{{ item.status }}</q-item-label
|
||||
>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</div>
|
||||
|
||||
<div v-if="isOperate && state === 2">
|
||||
<q-btn
|
||||
@click.prevent="modalSelectPerson = true"
|
||||
label="ส่งไปผู้บังคับบัญชา/ผู้มีอำนาจ"
|
||||
color="public"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="isChangeState && state === 2">
|
||||
<q-btn
|
||||
@click.prevent="onConfirmDraft"
|
||||
label="Next Step"
|
||||
color="primary"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-timeline-entry>
|
||||
</q-timeline>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
|
||||
<DialogSelectPerson v-model:modal="modalSelectPerson" />
|
||||
|
||||
<DialogApprove v-model:modal="modalApprove" />
|
||||
</template>
|
||||
Loading…
Add table
Add a link
Reference in a new issue