|
|
@@ -56,7 +56,8 @@ getClass();
|
|
|
// 彈跳視窗狀態
|
|
|
let schoolDialog = ref(false); // 據點
|
|
|
let courseDialog = ref(false); // 課程
|
|
|
-let enrolledDialog = reactive([]); // 報名清單
|
|
|
+let studentListDialog = reactive([]); // 學員名單
|
|
|
+let enrolledDialog = reactive([]); // 出席清單
|
|
|
let sessionsDialog = ref(false); // 場次
|
|
|
|
|
|
watch(schoolDialog, () => {
|
|
|
@@ -330,6 +331,26 @@ const handleCoverImg = (event) => {
|
|
|
}
|
|
|
};
|
|
|
|
|
|
+let session = reactive({
|
|
|
+ list: [],
|
|
|
+});
|
|
|
+
|
|
|
+// 取得所有課堂
|
|
|
+// https://cmm.ai:8088/api/get_session?event_id=3723
|
|
|
+async function getAllSession(id) {
|
|
|
+ console.log("getAllSession id", id);
|
|
|
+
|
|
|
+ try {
|
|
|
+ const response = await axios.get(
|
|
|
+ `https://cmm.ai:8088/api/get_session?event_id=${id}`
|
|
|
+ );
|
|
|
+ session.list = response.data.classe_sessions;
|
|
|
+ console.log("課堂資料", session.list);
|
|
|
+ } catch (error) {
|
|
|
+ console.error(error);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
// 取得場次
|
|
|
async function getEvent(id) {
|
|
|
console.log("getEvent id", id);
|
|
|
@@ -341,6 +362,7 @@ async function getEvent(id) {
|
|
|
// event_id
|
|
|
console.log("場次資料", response);
|
|
|
let eventId = response.data.classes[0].event_id;
|
|
|
+ getAllSession(eventId);
|
|
|
getEnrolledData(eventId);
|
|
|
} catch (error) {
|
|
|
console.error(error);
|
|
|
@@ -352,13 +374,13 @@ let registrations = reactive({
|
|
|
list: [],
|
|
|
});
|
|
|
|
|
|
-// 取得報名清單
|
|
|
+// 取得所有報名清單
|
|
|
async function getEnrolledData(eventId) {
|
|
|
enrolledLoading.value = true;
|
|
|
console.log("getEnrolledData eventId", eventId);
|
|
|
try {
|
|
|
const response = await axios.get(
|
|
|
- `https://cmm.ai:8088/api/get_registration_class?event_id=${eventId}`
|
|
|
+ `https://cmm.ai:8088/api/get_registration_class?event_id=${eventId}&access_token=${token}`
|
|
|
);
|
|
|
console.log("取得報名", response);
|
|
|
registrations.list = response.data.registrations;
|
|
|
@@ -380,6 +402,50 @@ async function getEnrolledData(eventId) {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+let fiveDigitsInput = ref([]); // 是否輸入末五碼
|
|
|
+let showChip = ref([]);
|
|
|
+
|
|
|
+// 更新報名清單
|
|
|
+async function updateEnrolledData(item, index) {
|
|
|
+ console.log("更新報名清單", item);
|
|
|
+
|
|
|
+ const data = {
|
|
|
+ is_attend: item.is_attend,
|
|
|
+ payment_status: item.payment_status ? 1 : 0,
|
|
|
+ reg_confirm: item.reg_confirm,
|
|
|
+ five_digits: item.five_digits ? item.five_digits : "00000",
|
|
|
+ };
|
|
|
+
|
|
|
+ // 若取消付款狀態則清空末五碼欄位
|
|
|
+ if (!data.payment_status) {
|
|
|
+ data.five_digits = "00000";
|
|
|
+ registrations.list[index].five_digits = "";
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log("data >", data);
|
|
|
+ const formData = new FormData();
|
|
|
+ for (const key in data) {
|
|
|
+ formData.append(key, data[key]);
|
|
|
+ }
|
|
|
+
|
|
|
+ try {
|
|
|
+ const response = await axios.post(
|
|
|
+ `https://cmm.ai:8088/api/update_registration_class?event_id=${item.event_id}&user_id=${item.user_id}&access_token=${token}`,
|
|
|
+ formData
|
|
|
+ );
|
|
|
+ console.log("更新", response);
|
|
|
+
|
|
|
+ fiveDigitsInput.value = [];
|
|
|
+ showChip.value[index] = true;
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ showChip.value[index] = false;
|
|
|
+ }, 2000);
|
|
|
+ } catch (error) {
|
|
|
+ console.error(error);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
// 場次
|
|
|
let eventData = reactive({
|
|
|
list: [],
|
|
|
@@ -418,18 +484,95 @@ let date = reactive({
|
|
|
registration_end_time: "", // 報名截止時間
|
|
|
});
|
|
|
|
|
|
-let itemsPerPage = ref(5); // 每頁顯示筆數(查看出缺席)
|
|
|
+let itemsPerPage = ref(10); // 每頁顯示筆數(查看出缺席)
|
|
|
let headers = reactive([
|
|
|
{
|
|
|
title: "姓名",
|
|
|
- align: "start",
|
|
|
key: "real_name",
|
|
|
},
|
|
|
{ title: "電話", key: "phone" },
|
|
|
{ title: "信箱", key: "email" },
|
|
|
- { title: "出席", key: "enrolled" },
|
|
|
{ title: "付款狀態", key: "payment" },
|
|
|
+ { title: "末五碼", key: "five_digits" },
|
|
|
]);
|
|
|
+
|
|
|
+let studentHeaders = reactive([
|
|
|
+ {
|
|
|
+ title: "姓名",
|
|
|
+ align: "start",
|
|
|
+ key: "real_name",
|
|
|
+ },
|
|
|
+ { title: "電話", key: "phone" },
|
|
|
+ { title: "信箱", key: "email" },
|
|
|
+ { title: "出席", key: "is_attend" },
|
|
|
+]);
|
|
|
+
|
|
|
+let sessionHeaders = reactive([
|
|
|
+ {
|
|
|
+ title: "課堂編號",
|
|
|
+ align: "center",
|
|
|
+ key: "sessions",
|
|
|
+ },
|
|
|
+ { title: "開始時間", align: "center", key: "start_time" },
|
|
|
+ { title: "結束時間", align: "center", key: "end_time" },
|
|
|
+ { title: "學員名單", align: "center", key: "student" },
|
|
|
+]);
|
|
|
+
|
|
|
+let studentDialog = ref(false);
|
|
|
+let record = reactive({
|
|
|
+ list: [],
|
|
|
+});
|
|
|
+
|
|
|
+// 取得課堂出席名單
|
|
|
+async function getAttendRecord(id) {
|
|
|
+ studentDialog.value = true;
|
|
|
+
|
|
|
+ try {
|
|
|
+ const response = await axios.get(
|
|
|
+ `https://cmm.ai:8088/api/get_attend_record?class_detail_id=${id}`
|
|
|
+ );
|
|
|
+
|
|
|
+ record.list = response.data.attend_record_list;
|
|
|
+ console.log("報名清單", record.list);
|
|
|
+
|
|
|
+ record.list.map((item) => {
|
|
|
+ if (item.is_attend) {
|
|
|
+ item.is_attend = true;
|
|
|
+ } else {
|
|
|
+ item.is_attend = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } catch (error) {
|
|
|
+ console.error(error);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 更新課堂出席名單
|
|
|
+async function saveAttendRecord(item) {
|
|
|
+ const data = {
|
|
|
+ class_detail_id: item.raw.class_detail_id,
|
|
|
+ user_id: item.raw.user_id,
|
|
|
+ is_attend: item.raw.is_attend ? 1 : 0,
|
|
|
+ };
|
|
|
+
|
|
|
+ const formData = new FormData();
|
|
|
+ for (const key in data) {
|
|
|
+ formData.append(key, data[key]);
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log("data", data);
|
|
|
+
|
|
|
+ try {
|
|
|
+ const response = await axios.post(
|
|
|
+ "https://cmm.ai:8088/api/add_attend_record",
|
|
|
+ formData
|
|
|
+ );
|
|
|
+
|
|
|
+ console.log("更新報名清單", response);
|
|
|
+ } catch (error) {
|
|
|
+ console.error(error);
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
@@ -457,10 +600,10 @@ let headers = reactive([
|
|
|
<thead>
|
|
|
<tr>
|
|
|
<th></th>
|
|
|
- <th>名稱</th>
|
|
|
+ <th width="30%">名稱</th>
|
|
|
<th>開課日期</th>
|
|
|
- <th width="20%">狀態</th>
|
|
|
- <th>出／缺席</th>
|
|
|
+ <th width="15%">狀態</th>
|
|
|
+ <th>管理</th>
|
|
|
<th></th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
@@ -486,29 +629,312 @@ let headers = reactive([
|
|
|
<!-- {{ item.state }} -->
|
|
|
</td>
|
|
|
<td>
|
|
|
+ <v-dialog
|
|
|
+ v-model="studentListDialog[index]"
|
|
|
+ width="1000px"
|
|
|
+ persistent
|
|
|
+ >
|
|
|
+ <template v-slot:activator="{ props }">
|
|
|
+ <v-btn
|
|
|
+ @click="getEvent(item.class_name_id)"
|
|
|
+ v-bind="props"
|
|
|
+ color="purple"
|
|
|
+ variant="outlined"
|
|
|
+ class="d-flex align-center"
|
|
|
+ >
|
|
|
+ <!-- <v-icon
|
|
|
+ color="white"
|
|
|
+ icon="mdi-text-box-edit-outline"
|
|
|
+ ></v-icon> -->
|
|
|
+ <!-- <p class="text-white">出席紀錄</p> -->
|
|
|
+ <p>學員名單</p>
|
|
|
+ </v-btn>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <v-card class="pa-5">
|
|
|
+ <v-card-title class="d-flex justify-end">
|
|
|
+ <v-btn
|
|
|
+ variant="text"
|
|
|
+ icon="mdi-close"
|
|
|
+ size="large"
|
|
|
+ @click="studentListDialog[index] = false"
|
|
|
+ ></v-btn>
|
|
|
+ </v-card-title>
|
|
|
+
|
|
|
+ <v-card-text class="pa-3">
|
|
|
+ <div
|
|
|
+ class="d-flex justify-center mb-10"
|
|
|
+ v-if="enrolledLoading"
|
|
|
+ >
|
|
|
+ <v-progress-circular
|
|
|
+ color="grey-lighten-4"
|
|
|
+ indeterminate
|
|
|
+ ></v-progress-circular>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <v-data-table
|
|
|
+ v-else
|
|
|
+ v-model:items-per-page="itemsPerPage"
|
|
|
+ :headers="headers"
|
|
|
+ :items="registrations.list"
|
|
|
+ item-value="name"
|
|
|
+ class="courses-table"
|
|
|
+ >
|
|
|
+ <!-- <template v-slot:item.enrolled="{ item }">
|
|
|
+ <v-checkbox hide-details></v-checkbox>
|
|
|
+ </template> -->
|
|
|
+ <template v-slot:item.payment="{ item }">
|
|
|
+ <div class="d-flex align-center my-2">
|
|
|
+ <v-checkbox
|
|
|
+ v-model="item.selectable.payment_status"
|
|
|
+ color="purple"
|
|
|
+ hide-details
|
|
|
+ label="已付款"
|
|
|
+ @change="updateEnrolledData(item.raw, item.index)"
|
|
|
+ ></v-checkbox>
|
|
|
+ <!-- <v-text-field
|
|
|
+ v-model="item.selectable.five_digits"
|
|
|
+ density="compact"
|
|
|
+ variant="outlined"
|
|
|
+ hide-details
|
|
|
+ label="帳號末五碼"
|
|
|
+ class="account-item"
|
|
|
+ :disabled="!item.selectable.payment_status"
|
|
|
+ @input="fiveDigitsInput[item.index] = true"
|
|
|
+ ></v-text-field>
|
|
|
+
|
|
|
+ <div style="width: 95px">
|
|
|
+ <div v-if="fiveDigitsInput[item.index]">
|
|
|
+ <v-btn
|
|
|
+ @click="
|
|
|
+ updateEnrolledData(item.raw, item.index)
|
|
|
+ "
|
|
|
+ variant="outlined"
|
|
|
+ rounded
|
|
|
+ color="success"
|
|
|
+ size="xs-small"
|
|
|
+ class="mx-3"
|
|
|
+ >
|
|
|
+ <v-icon icon="mdi-check" class="pa-4"></v-icon>
|
|
|
+ </v-btn>
|
|
|
+ <v-btn
|
|
|
+ @click="
|
|
|
+ fiveDigitsInput[item.index] = false;
|
|
|
+ item.selectable.five_digits = '';
|
|
|
+ "
|
|
|
+ variant="outlined"
|
|
|
+ rounded
|
|
|
+ color="gray"
|
|
|
+ size="xs-small"
|
|
|
+ >
|
|
|
+ <v-icon icon="mdi-close" class="pa-4"></v-icon>
|
|
|
+ </v-btn>
|
|
|
+ </div>
|
|
|
+ <Transition>
|
|
|
+ <v-chip
|
|
|
+ v-if="showChip[item.index]"
|
|
|
+ class="ms-3"
|
|
|
+ color="success"
|
|
|
+ variant="outlined"
|
|
|
+ >
|
|
|
+ 儲存成功
|
|
|
+ </v-chip>
|
|
|
+ </Transition>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-slot:item.five_digits="{ item }">
|
|
|
+ <div class="d-flex align-center my-2">
|
|
|
+ <!-- <v-checkbox
|
|
|
+ v-model="item.selectable.payment_status"
|
|
|
+ color="purple"
|
|
|
+ hide-details
|
|
|
+ label="已付款"
|
|
|
+ @change="updateEnrolledData(item.raw, item.index)"
|
|
|
+ ></v-checkbox> -->
|
|
|
+ <v-text-field
|
|
|
+ v-model="item.selectable.five_digits"
|
|
|
+ density="compact"
|
|
|
+ variant="outlined"
|
|
|
+ hide-details
|
|
|
+ label="帳號末五碼"
|
|
|
+ class="account-item"
|
|
|
+ :disabled="!item.selectable.payment_status"
|
|
|
+ @input="fiveDigitsInput[item.index] = true"
|
|
|
+ ></v-text-field>
|
|
|
+
|
|
|
+ <div style="width: 95px">
|
|
|
+ <div v-if="fiveDigitsInput[item.index]">
|
|
|
+ <v-btn
|
|
|
+ @click="
|
|
|
+ updateEnrolledData(item.raw, item.index)
|
|
|
+ "
|
|
|
+ variant="outlined"
|
|
|
+ rounded
|
|
|
+ color="success"
|
|
|
+ size="xs-small"
|
|
|
+ class="mx-3"
|
|
|
+ >
|
|
|
+ <v-icon icon="mdi-check" class="pa-4"></v-icon>
|
|
|
+ </v-btn>
|
|
|
+ <v-btn
|
|
|
+ @click="
|
|
|
+ fiveDigitsInput[item.index] = false;
|
|
|
+ item.selectable.five_digits = '';
|
|
|
+ "
|
|
|
+ variant="outlined"
|
|
|
+ rounded
|
|
|
+ color="gray"
|
|
|
+ size="xs-small"
|
|
|
+ >
|
|
|
+ <v-icon icon="mdi-close" class="pa-4"></v-icon>
|
|
|
+ </v-btn>
|
|
|
+ </div>
|
|
|
+ <Transition>
|
|
|
+ <v-chip
|
|
|
+ v-if="showChip[item.index]"
|
|
|
+ class="ms-3"
|
|
|
+ color="success"
|
|
|
+ variant="outlined"
|
|
|
+ >
|
|
|
+ 儲存成功
|
|
|
+ </v-chip>
|
|
|
+ </Transition>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </v-data-table>
|
|
|
+
|
|
|
+ <!-- <v-data-table
|
|
|
+ v-else
|
|
|
+ v-model:items-per-page="itemsPerPage"
|
|
|
+ :headers="sessionHeaders"
|
|
|
+ :items="session.list"
|
|
|
+ item-value="name"
|
|
|
+ class="elevation-1 courses-table elevation-0"
|
|
|
+ >
|
|
|
+ <template v-slot:item.start_time="{ item }">
|
|
|
+ {{
|
|
|
+ moment(`${item.selectable.start_time}`).format(
|
|
|
+ "YYYY/MM/DD"
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </template>
|
|
|
+ <template v-slot:item.end_time="{ item }">
|
|
|
+ {{
|
|
|
+ moment(`${item.selectable.end_time}`).format(
|
|
|
+ "YYYY/MM/DD"
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </template>
|
|
|
+ <template v-slot:item.student="{ item }">
|
|
|
+ <v-btn
|
|
|
+ density="default"
|
|
|
+ color="blue"
|
|
|
+ variant="outlined"
|
|
|
+ class="ma-2"
|
|
|
+ icon="mdi-format-list-bulleted-type"
|
|
|
+ size="small"
|
|
|
+ @click="getAttendRecord(item.selectable.session_id)"
|
|
|
+ ></v-btn>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template v-slot:item.enrolled="{ item }">
|
|
|
+ <v-checkbox hide-details></v-checkbox>
|
|
|
+ </template>
|
|
|
+ </v-data-table> -->
|
|
|
+
|
|
|
+ <!-- <v-dialog v-model="studentDialog" width="1000px" persistent>
|
|
|
+ <v-card class="pa-5">
|
|
|
+ <v-card-title> 學員名單 </v-card-title>
|
|
|
+ <v-card-text>
|
|
|
+ <v-data-table
|
|
|
+ v-model:items-per-page="itemsPerPage"
|
|
|
+ :headers="studentHeaders"
|
|
|
+ :items="registrations.list"
|
|
|
+ item-value="name"
|
|
|
+ class="elevation-1 courses-table"
|
|
|
+ >
|
|
|
+ <template v-slot:item.enrolled="{ item }">
|
|
|
+ <v-checkbox hide-details></v-checkbox>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </v-data-table>
|
|
|
+ </v-card-text>
|
|
|
+ <v-card-actions class="d-flex justify-center">
|
|
|
+ <v-btn
|
|
|
+ color="purple"
|
|
|
+ variant="text"
|
|
|
+ @click="studentDialog = false"
|
|
|
+ >
|
|
|
+ 關閉
|
|
|
+ </v-btn>
|
|
|
+ <v-btn variant="flat" color="purple" class="px-6"
|
|
|
+ >儲存修改</v-btn
|
|
|
+ >
|
|
|
+ </v-card-actions>
|
|
|
+ </v-card>
|
|
|
+ </v-dialog> -->
|
|
|
+ </v-card-text>
|
|
|
+ <!-- <v-card-actions class="d-flex justify-center mt-3">
|
|
|
+ <v-btn
|
|
|
+ color="purple"
|
|
|
+ variant="outlined"
|
|
|
+ class="me-3"
|
|
|
+ @click="studentListDialog[index] = false"
|
|
|
+ >關閉</v-btn
|
|
|
+ >
|
|
|
+ <v-btn
|
|
|
+ @click="updateEnrolledData()"
|
|
|
+ variant="flat"
|
|
|
+ color="purple"
|
|
|
+ class="px-6"
|
|
|
+ >儲存修改</v-btn
|
|
|
+ >
|
|
|
+ </v-card-actions> -->
|
|
|
+ </v-card>
|
|
|
+ </v-dialog>
|
|
|
+
|
|
|
<v-dialog v-model="enrolledDialog[index]" width="1000px">
|
|
|
<template v-slot:activator="{ props }">
|
|
|
<v-btn
|
|
|
@click="getEvent(item.class_name_id)"
|
|
|
v-bind="props"
|
|
|
- color="blue"
|
|
|
+ color="purple"
|
|
|
variant="flat"
|
|
|
- rounded="xl"
|
|
|
- class="me-3"
|
|
|
+ class="d-flex align-center mt-3"
|
|
|
>
|
|
|
- <p class="text-white">查看</p>
|
|
|
+ <!-- <v-icon
|
|
|
+ color="white"
|
|
|
+ icon="mdi-text-box-edit-outline"
|
|
|
+ ></v-icon> -->
|
|
|
+ <!-- <p class="text-white">出席紀錄</p> -->
|
|
|
+ <p>出席管理</p>
|
|
|
</v-btn>
|
|
|
</template>
|
|
|
|
|
|
<v-card class="pa-5">
|
|
|
- <v-card-text>
|
|
|
- <div class="d-flex justify-center" v-if="enrolledLoading">
|
|
|
+ <v-card-title class="d-flex justify-end">
|
|
|
+ <v-btn
|
|
|
+ variant="text"
|
|
|
+ icon="mdi-close"
|
|
|
+ size="large"
|
|
|
+ @click="enrolledDialog[index] = false"
|
|
|
+ ></v-btn>
|
|
|
+ </v-card-title>
|
|
|
+
|
|
|
+ <v-card-text class="pa-3">
|
|
|
+ <div
|
|
|
+ class="d-flex justify-center mb-10"
|
|
|
+ v-if="enrolledLoading"
|
|
|
+ >
|
|
|
<v-progress-circular
|
|
|
color="grey-lighten-4"
|
|
|
indeterminate
|
|
|
></v-progress-circular>
|
|
|
</div>
|
|
|
- <v-data-table
|
|
|
+
|
|
|
+ <!-- <v-data-table
|
|
|
v-else
|
|
|
v-model:items-per-page="itemsPerPage"
|
|
|
:headers="headers"
|
|
|
@@ -520,13 +946,6 @@ let headers = reactive([
|
|
|
<v-checkbox hide-details></v-checkbox>
|
|
|
</template>
|
|
|
<template v-slot:item.payment="{ item }">
|
|
|
- <!-- <v-select
|
|
|
- :items="['已付款', '未付款']"
|
|
|
- density="compact"
|
|
|
- variant="outlined"
|
|
|
- hide-details
|
|
|
- class="my-3"
|
|
|
- ></v-select> -->
|
|
|
<div class="d-flex align-center my-2">
|
|
|
<v-checkbox
|
|
|
v-model="item.selectable.payment_status"
|
|
|
@@ -544,9 +963,101 @@ let headers = reactive([
|
|
|
></v-text-field>
|
|
|
</div>
|
|
|
</template>
|
|
|
+ </v-data-table> -->
|
|
|
+
|
|
|
+ <v-data-table
|
|
|
+ v-else
|
|
|
+ v-model:items-per-page="itemsPerPage"
|
|
|
+ :headers="sessionHeaders"
|
|
|
+ :items="session.list"
|
|
|
+ item-value="name"
|
|
|
+ class="courses-table elevation-0"
|
|
|
+ >
|
|
|
+ <template v-slot:item.start_time="{ item }">
|
|
|
+ {{
|
|
|
+ moment(`${item.selectable.start_time}`).format(
|
|
|
+ "YYYY/MM/DD"
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </template>
|
|
|
+ <template v-slot:item.end_time="{ item }">
|
|
|
+ {{
|
|
|
+ moment(`${item.selectable.end_time}`).format(
|
|
|
+ "YYYY/MM/DD"
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </template>
|
|
|
+ <template v-slot:item.student="{ item }">
|
|
|
+ <v-btn
|
|
|
+ density="default"
|
|
|
+ color="blue"
|
|
|
+ variant="outlined"
|
|
|
+ class="ma-2"
|
|
|
+ icon="mdi-format-list-bulleted-type"
|
|
|
+ size="small"
|
|
|
+ @click="getAttendRecord(item.selectable.session_id)"
|
|
|
+ ></v-btn>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template v-slot:item.enrolled="{ item }">
|
|
|
+ <v-checkbox hide-details></v-checkbox>
|
|
|
+ </template>
|
|
|
</v-data-table>
|
|
|
+
|
|
|
+ <v-dialog v-model="studentDialog" width="800px" persistent>
|
|
|
+ <v-card class="pa-5">
|
|
|
+ <v-card-title> 學員名單 </v-card-title>
|
|
|
+ <v-card-text>
|
|
|
+ <v-data-table
|
|
|
+ v-model:items-per-page="itemsPerPage"
|
|
|
+ :headers="studentHeaders"
|
|
|
+ :items="record.list"
|
|
|
+ item-value="name"
|
|
|
+ class="elevation-1 courses-table"
|
|
|
+ >
|
|
|
+ <template v-slot:item.is_attend="{ item }">
|
|
|
+ <v-checkbox
|
|
|
+ @change="saveAttendRecord(item)"
|
|
|
+ v-model="item.selectable.is_attend"
|
|
|
+ hide-details
|
|
|
+ ></v-checkbox>
|
|
|
+ </template>
|
|
|
+ <!-- <template v-slot:item.payment="{ item }">
|
|
|
+ <div class="d-flex align-center my-2">
|
|
|
+ <v-checkbox
|
|
|
+ v-model="item.selectable.payment_status"
|
|
|
+ color="purple"
|
|
|
+ hide-details
|
|
|
+ label="已付款"
|
|
|
+ ></v-checkbox>
|
|
|
+ <v-text-field
|
|
|
+ density="compact"
|
|
|
+ variant="outlined"
|
|
|
+ hide-details
|
|
|
+ label="帳號末五碼"
|
|
|
+ class="account-item"
|
|
|
+ :disabled="!item.selectable.payment_status"
|
|
|
+ ></v-text-field>
|
|
|
+ </div>
|
|
|
+ </template> -->
|
|
|
+ </v-data-table>
|
|
|
+ </v-card-text>
|
|
|
+ <v-card-actions class="d-flex justify-center">
|
|
|
+ <v-btn
|
|
|
+ color="purple"
|
|
|
+ variant="text"
|
|
|
+ @click="studentDialog = false"
|
|
|
+ >
|
|
|
+ 關閉
|
|
|
+ </v-btn>
|
|
|
+ <!-- <v-btn variant="flat" color="purple" class="px-6"
|
|
|
+ >儲存修改</v-btn
|
|
|
+ > -->
|
|
|
+ </v-card-actions>
|
|
|
+ </v-card>
|
|
|
+ </v-dialog>
|
|
|
</v-card-text>
|
|
|
- <v-card-actions class="d-flex justify-center mt-3">
|
|
|
+ <!-- <v-card-actions class="d-flex justify-center mt-3">
|
|
|
<v-btn
|
|
|
color="purple"
|
|
|
variant="outlined"
|
|
|
@@ -557,29 +1068,44 @@ let headers = reactive([
|
|
|
<v-btn variant="flat" color="purple" class="px-6"
|
|
|
>儲存修改</v-btn
|
|
|
>
|
|
|
- </v-card-actions>
|
|
|
+ </v-card-actions> -->
|
|
|
</v-card>
|
|
|
</v-dialog>
|
|
|
</td>
|
|
|
- <td>
|
|
|
+ <td class="edit-item">
|
|
|
<v-menu>
|
|
|
<template v-slot:activator="{ props }">
|
|
|
- <v-btn color="blue" v-bind="props" variant="outlined">
|
|
|
- <p>編輯</p>
|
|
|
- </v-btn>
|
|
|
+ <div class="d-flex flex-column">
|
|
|
+ <v-btn
|
|
|
+ v-bind="props"
|
|
|
+ color="blue"
|
|
|
+ size="small"
|
|
|
+ rounded="xl"
|
|
|
+ variant="outlined"
|
|
|
+ >
|
|
|
+ <p>編輯</p>
|
|
|
+ </v-btn>
|
|
|
|
|
|
- <v-btn color="blue" variant="outlined" class="ms-3">
|
|
|
- <a
|
|
|
- :href="
|
|
|
- $router.resolve(`/course-detail/${item.class_name_id}`)
|
|
|
- .href
|
|
|
- "
|
|
|
- class="text-blue"
|
|
|
- target="_blank"
|
|
|
- >前往課程</a
|
|
|
+ <v-btn
|
|
|
+ color="blue"
|
|
|
+ size="small"
|
|
|
+ rounded="xl"
|
|
|
+ variant="outlined"
|
|
|
+ class="mt-3"
|
|
|
>
|
|
|
- <!-- <router-link :to="class_name_id" class="text-white">前往課程</router-link> -->
|
|
|
- </v-btn>
|
|
|
+ <a
|
|
|
+ :href="
|
|
|
+ $router.resolve(
|
|
|
+ `/course-detail/${item.class_name_id}`
|
|
|
+ ).href
|
|
|
+ "
|
|
|
+ class="text-blue"
|
|
|
+ target="_blank"
|
|
|
+ >前往</a
|
|
|
+ >
|
|
|
+ <!-- <router-link :to="class_name_id" class="text-white">前往課程</router-link> -->
|
|
|
+ </v-btn>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<v-list>
|
|
|
<v-list-item>
|
|
|
@@ -965,7 +1491,6 @@ let headers = reactive([
|
|
|
p,
|
|
|
a {
|
|
|
font-size: 16px;
|
|
|
- line-height: 30px;
|
|
|
}
|
|
|
|
|
|
.v-table {
|
|
|
@@ -1056,6 +1581,8 @@ let headers = reactive([
|
|
|
}
|
|
|
tbody {
|
|
|
td {
|
|
|
+ padding: 20px 10px;
|
|
|
+ line-height: 22px;
|
|
|
border-bottom: 1px solid var(--blue);
|
|
|
}
|
|
|
}
|
|
|
@@ -1070,9 +1597,32 @@ let headers = reactive([
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+.edit-item {
|
|
|
+ p,
|
|
|
+ a {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
.courses-table {
|
|
|
+ tr {
|
|
|
+ &:hover {
|
|
|
+ transition: all 0.3s;
|
|
|
+ & > td {
|
|
|
+ cursor: pointer;
|
|
|
+ background-color: #f5f5f5 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ td {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
.v-data-table-footer {
|
|
|
- padding: 15px 0;
|
|
|
+ padding: 20px 0;
|
|
|
+ }
|
|
|
+ .v-selection-control {
|
|
|
+ justify-content: center;
|
|
|
}
|
|
|
.account-item {
|
|
|
.v-field__input {
|
|
|
@@ -1083,4 +1633,8 @@ let headers = reactive([
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.v-data-table-header__content {
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
</style>
|
