ต่อ api(รอต่อ บางส่วน)
This commit is contained in:
setthawutttty
parent
18e1e0d2bd
commit
7399f967d0
15 changed files with 506 additions and 155 deletions
|
|
@ -1,13 +1,17 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useQuasar, QForm } from "quasar";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import type { QTableProps } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import Form from '@/modules/11_discipline/components/6_BasicInformation/Channel/Form.vue'
|
||||
|
||||
/**
|
||||
* รวมตัวแปร
|
||||
*/
|
||||
const $q = useQuasar()
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
date2Thai,
|
||||
|
|
@ -21,9 +25,9 @@ const {
|
|||
} = mixin;
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const myForm = ref<QForm | null>(null); //form data input
|
||||
//form data input
|
||||
const edit = ref<boolean>(false);
|
||||
const channel = ref<string>("");
|
||||
|
||||
|
||||
/**
|
||||
* เรียกข้อมูลจากรายการ
|
||||
|
|
@ -38,19 +42,27 @@ const fetchData = async () => {};
|
|||
const deleteData = async (id: string) => {};
|
||||
|
||||
/* บันทึกข้อมูล**/
|
||||
const SaveData = async () => {};
|
||||
const checkSave = () => {};
|
||||
function onSubmit(channelReturn:string){
|
||||
dialogConfirm($q,()=>saveData(channelReturn))
|
||||
}
|
||||
|
||||
/**
|
||||
* เพิ่มข้อมูล
|
||||
*/
|
||||
const addData = async () => {};
|
||||
|
||||
/**
|
||||
* แก้ไขข้อมูล
|
||||
* @param id ช่องทาง
|
||||
*/
|
||||
const editData = async (id: string) => {};
|
||||
function saveData(channelReturn:string){
|
||||
console.log(channelReturn)
|
||||
showLoader()
|
||||
http
|
||||
.post(config.API.complaintChannel(),{
|
||||
name:channelReturn
|
||||
})
|
||||
.then((res) => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
router.push(`/discipline/channel`);
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* ย้อนกลับหน้ารายการ
|
||||
|
|
@ -74,33 +86,6 @@ const clickBack = () => {
|
|||
/>
|
||||
{{ edit ? "ช่องทางการร้องเรียน" : "เพิ่มช่องทางการร้องเรียน" }}
|
||||
</div>
|
||||
<q-form ref="myForm">
|
||||
<div class="col-12">
|
||||
<q-card bordered>
|
||||
<div class="col-12 row q-col-gutter-md q-pa-md">
|
||||
<div class="col-xs-12 col-sm-12 row">
|
||||
<q-separator />
|
||||
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
class="col-12"
|
||||
dense
|
||||
outlined
|
||||
v-model="channel"
|
||||
for="channel"
|
||||
hide-bottom-space
|
||||
label="กรอกชื่อช่องทาง"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกชื่อช่องทาง'}`]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<q-separator />
|
||||
<div class="row col-12 q-pa-sm">
|
||||
<q-space />
|
||||
<q-btn label="บันทึก" color="public" @click="checkSave"> </q-btn>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</q-form>
|
||||
<Form :on-submit="onSubmit" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,93 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, reactive } from "vue";
|
||||
import Form from "@/modules/11_discipline/components/6_BasicInformation/Channel/Form.vue";
|
||||
import type { FormData } from "@/modules/11_discipline/interface/request/director";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useRoute } from "vue-router";
|
||||
import router from "@/router";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
const route = useRoute();
|
||||
const typeId = ref<string>(route.params.id.toString());
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { messageError, showLoader, hideLoader, dialogConfirm, success } = mixin;
|
||||
|
||||
/**เมื่อเริ่มโหลดหน้า
|
||||
* เรียกใช้งาน fetchData เพื่อดึงข้อมูล
|
||||
*/
|
||||
onMounted(() => {
|
||||
fetchData();
|
||||
});
|
||||
|
||||
/**
|
||||
* get ข้อมูลเก่ากรณีแก้ไขข้อมูล
|
||||
*/
|
||||
const data = reactive<FormData>({
|
||||
personalId:"",
|
||||
prefix: "",
|
||||
firstname: "",
|
||||
lastname: "",
|
||||
position: "",
|
||||
phone: "",
|
||||
email: "",
|
||||
});
|
||||
|
||||
/**
|
||||
* ดึงค่าจาก api
|
||||
*/
|
||||
const fetchData = async () => {
|
||||
data.prefix = "นาง";
|
||||
data.firstname = "เกสินี";
|
||||
data.lastname = "เจียรสุมัย";
|
||||
data.position = "ครู";
|
||||
data.phone = "0800808080";
|
||||
data.email = "e@email.com";
|
||||
};
|
||||
|
||||
/**
|
||||
* บันทึกข้อมูลที่เเก้ไข
|
||||
* @param id ระบุ บุคคล
|
||||
*/
|
||||
function onSubmit(type:string) {
|
||||
dialogConfirm($q, () => putData(type));
|
||||
}
|
||||
|
||||
function putData(type: string) {
|
||||
showLoader();
|
||||
http
|
||||
.put(config.API.complaintChannelbyId(typeId.value), {
|
||||
name:type
|
||||
})
|
||||
.then((res) => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
router.push(`/discipline/channel`);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="col-xs-12 col-sm-12 col-md-11">
|
||||
<div class="toptitle col-12 row items-center">
|
||||
<q-btn
|
||||
icon="mdi-arrow-left"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
flat
|
||||
color="primary"
|
||||
class="q-mr-sm"
|
||||
@click="router.push(`/discipline/channel`)"
|
||||
/>
|
||||
แก้ไขช่องทางการร้องเรียน
|
||||
</div>
|
||||
|
||||
<Form :on-submit="onSubmit"/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
const channel = ref<string>("");
|
||||
const channelRef = ref<any>();
|
||||
|
||||
/**
|
||||
* รับ props มาจาก page หลัก
|
||||
*/
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
onSubmit: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* เช็คข้อมูลจาก props
|
||||
* เมื่อมีข้อมูล
|
||||
* เก็บข้อมูลลง formData
|
||||
*/
|
||||
watch(props.data, async () => {});
|
||||
|
||||
/** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
|
||||
function save() {
|
||||
channelRef.value.validate().then(async (result: boolean) => {
|
||||
console.log("1");
|
||||
if (result) {
|
||||
if (channel.value) {
|
||||
props.onSubmit(channel.value);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<q-form ref="channelRef">
|
||||
<div class="col-12">
|
||||
<q-card bordered>
|
||||
<div class="col-12 row q-col-gutter-md q-pa-md">
|
||||
<div class="col-xs-12 col-sm-12 row">
|
||||
<q-separator />
|
||||
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
class="col-12"
|
||||
dense
|
||||
outlined
|
||||
v-model="channel"
|
||||
for="channel"
|
||||
hide-bottom-space
|
||||
label="กรอกชื่อช่องทาง"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกชื่อช่องทาง'}`]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<q-separator />
|
||||
<div class="row col-12 q-pa-sm">
|
||||
<q-space />
|
||||
<q-btn
|
||||
for="ButtonOnSubmit"
|
||||
id="formSubmit"
|
||||
label="บันทึก"
|
||||
color="public"
|
||||
@click="save"
|
||||
>
|
||||
</q-btn>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</q-form>
|
||||
</template>
|
||||
|
|
@ -10,7 +10,7 @@ import http from "@/plugins/http";
|
|||
|
||||
const dataStore = useDisciplineChannelDataStore();
|
||||
const mixin = useCounterMixin();
|
||||
const { dialogRemove } = mixin;
|
||||
const { dialogRemove, showLoader, messageError, hideLoader, success } = mixin;
|
||||
const $q = useQuasar(); //ใช้ noti quasar
|
||||
|
||||
/**
|
||||
|
|
@ -42,41 +42,53 @@ const clickAdd = () => {
|
|||
router.push(`/discipline/channel/add`);
|
||||
};
|
||||
|
||||
/** get data */
|
||||
async function getComplaintChanal() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.complaintChannel())
|
||||
.then((res) => {
|
||||
const data = res.data.result.data;
|
||||
dataStore.fetchData(data);
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* ลบข้อมู,
|
||||
* ลบข้อมูล
|
||||
* @param id ไอดีของข้อมูล
|
||||
*/
|
||||
const clickDelete = (id: string) => {
|
||||
dialogRemove(
|
||||
$q,
|
||||
async () => {
|
||||
// await deleteData(id);
|
||||
// await getData();
|
||||
},
|
||||
`ลบข้อมูล`
|
||||
// `ลบข้อมูลของ ${name}`
|
||||
);
|
||||
};
|
||||
function clickDelete(id: string) {
|
||||
dialogRemove($q, async () => deleteData(id), `ลบข้อมูล`);
|
||||
}
|
||||
|
||||
/**เมื่อเริ่มโหลดหน้า
|
||||
* ส่งข้อมูลจำลองไปยัง store
|
||||
/**
|
||||
* ลบข้อมูล
|
||||
* @param id type
|
||||
*/
|
||||
async function deleteData(id: string) {
|
||||
showLoader();
|
||||
await http
|
||||
.delete(config.API.complaintChannelbyId(id))
|
||||
.then((res) => {
|
||||
success($q, "ลบข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
await getComplaintChanal();
|
||||
});
|
||||
}
|
||||
|
||||
/**เมื่อเริ่มโหลดหน้า เรียกใช้ฟังชั่น*/
|
||||
onMounted(() => {
|
||||
// get ข้อมูลแล้วโยนใส่ store
|
||||
dataStore.fetchData([
|
||||
{
|
||||
subject: " จดหมาย",
|
||||
},
|
||||
{
|
||||
subject: " อีเมล์",
|
||||
},
|
||||
{
|
||||
subject: " โทรศัพท์",
|
||||
},
|
||||
{
|
||||
subject: " บอกเล่า",
|
||||
},
|
||||
]);
|
||||
getComplaintChanal();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
|
|
@ -157,11 +169,18 @@ onMounted(() => {
|
|||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td key="no" :props="props">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</q-td>
|
||||
<q-td key="subject" :props="props">
|
||||
{{ props.row.subject }}
|
||||
<q-td
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
@click="$router.push(`/discipline/channel/${props.row.id}`)"
|
||||
>
|
||||
<div v-if="col.name === 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
<div v-else>
|
||||
{{ col.value}}
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td>
|
||||
<q-btn
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue