客堂登記報名
This commit is contained in:
@@ -3,7 +3,7 @@
|
||||
|
||||
<v-card>
|
||||
<v-card-title class="bg-primary white--text text-center">
|
||||
<h5 class="mb-0">客堂報名</h5>
|
||||
<h5 class="mb-0">客堂登錄</h5>
|
||||
<div class="ms-auto">
|
||||
<v-btn @click.prevent="savePreOrder()">儲存</v-btn>
|
||||
<v-btn @click.prevent="back01()">返回</v-btn>
|
||||
@@ -49,34 +49,78 @@
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<v-dialog v-model="picker.show" class="container-fluid">
|
||||
<template>
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<v-data-table v-model="picker.data_table.selected"
|
||||
:items="picker.data_table.list"
|
||||
:options.sync="options"
|
||||
:headers="picker.data_table.header"
|
||||
:footer-props="picker.data_table.footer"
|
||||
:server-items-length="picker.data_table.count"
|
||||
:loading="picker.data_table.loading"
|
||||
:single-select="picker.data_table.singleSelect"
|
||||
hide-default-footer
|
||||
:page.sync="picker.data_table.page"
|
||||
:items-per-page.sync="picker.data_table.pageSize"
|
||||
class="elevation-1"
|
||||
@click:row="handleRowClick">
|
||||
</v-data-table>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<v-container>
|
||||
<v-row class="align-baseline">
|
||||
<v-col cols="12" md="9">
|
||||
<v-pagination v-model="picker.data_table.page"
|
||||
:length="pageCount">
|
||||
</v-pagination>
|
||||
</v-col>
|
||||
<v-col class="text-truncate text-right" cols="12" md="2">
|
||||
共 {{ picker.data_table.count }} 筆, 頁數:
|
||||
</v-col>
|
||||
<v-col cols="6" md="1">
|
||||
<v-text-field v-model="picker.data_table.page"
|
||||
type="number"
|
||||
hide-details
|
||||
dense
|
||||
min="1"
|
||||
:max="pageCount"
|
||||
@input="data_table.page = parseInt($event, 10)"></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<v-btn @click.prevent="picker.show=false">關閉</v-btn>
|
||||
<v-btn @click.prevent="picker_confirm()">確認</v-btn>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</template>
|
||||
</v-dialog>
|
||||
|
||||
|
||||
<v-snackbar v-model="snackbar.show">
|
||||
{{ snackbar.text }}
|
||||
|
||||
<template v-slot:action="{ attrs }">
|
||||
<v-btn color="pink"
|
||||
text
|
||||
v-bind="attrs"
|
||||
@click="snackbar.show = false">
|
||||
Close
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-snackbar>
|
||||
</div>
|
||||
|
||||
<v-dialog v-model="picker.show" class="dialog_width">
|
||||
<template>
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
<v-data-table v-model="picker.data_table.selected"
|
||||
:items="picker.data_table.list"
|
||||
:options.sync="options"
|
||||
:headers="picker.data_table.header"
|
||||
:footer-props="picker.data_table.footer"
|
||||
:server-items-length="picker.data_table.count"
|
||||
:loading="picker.data_table.loading"
|
||||
:single-select="picker.data_table.singleSelect"
|
||||
show-select
|
||||
hide-default-footer
|
||||
:page.sync="picker.data_table.page"
|
||||
:items-per-page.sync="picker.data_table.pageSize"
|
||||
class="elevation-1">
|
||||
</v-data-table>
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<v-btn @click.prevent="picker.show=false" >關閉</v-btn>
|
||||
<v-btn @click.prevent="picker_confirm()" >確認</v-btn>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</template>
|
||||
</v-dialog>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -104,7 +148,7 @@
|
||||
show: false,
|
||||
target: "",
|
||||
data_table: {
|
||||
loading: true,
|
||||
loading: false,
|
||||
list: [],
|
||||
selected: [],
|
||||
singleSelect: false,
|
||||
@@ -119,28 +163,108 @@
|
||||
itemsPerPageOptions: [5, 10, 20, 30],
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
snackbar: {
|
||||
show: false,
|
||||
text: "",
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
savePreOrder() {
|
||||
watch: {
|
||||
options: {
|
||||
handler() {
|
||||
if (this.picker.target === "follower") {
|
||||
this.getFollowers()
|
||||
} else if (this.picker.target === "act") {
|
||||
this.getActivity()
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
|
||||
},
|
||||
methods: {
|
||||
handleRowClick(item, row) {
|
||||
if (this.picker.target === "follower") {
|
||||
this.formData.f_num = item.num;
|
||||
this.formData.f_name = item.u_name;
|
||||
} else if (this.picker.target === "act") {
|
||||
this.formData.act_num = item.num;
|
||||
this.formData.act_name = item.subject;
|
||||
}
|
||||
this.picker.show = false;
|
||||
},
|
||||
savePreOrder() {
|
||||
axios
|
||||
.post(HTTP_HOST + 'api/preOrder/SavePreOrder', this.formData)
|
||||
.then(response => {
|
||||
this.snackbar.text = response.data.message;
|
||||
this.snackbar.show = true;
|
||||
if (response.data.result=="Y") {
|
||||
this.$emit('custom-event', { action: 'list' });
|
||||
}
|
||||
}).catch(error => console.log(error));
|
||||
},
|
||||
back01() {
|
||||
this.$emit('custom-event', { action: 'list' });
|
||||
},
|
||||
getFollowers(clearPage=false) {
|
||||
const { sortBy, sortDesc, page, itemsPerPage } = this.options
|
||||
const params = {
|
||||
sortBy: "num", sortDesc: false,
|
||||
page: page, pageSize: itemsPerPage
|
||||
};
|
||||
this.picker.data_table.loading = true;
|
||||
let search = {}
|
||||
axios
|
||||
.post(HTTP_HOST + 'api/follower/GetList', search, { params: params })
|
||||
.then(response => {
|
||||
console.log(response)
|
||||
this.picker.data_table.list = response.data.list
|
||||
this.picker.data_table.count = response.data.count;
|
||||
this.picker.data_table.loading = false
|
||||
|
||||
const dataToStore = JSON.stringify(this.data_table);
|
||||
//sessionStorage.setItem("order_list_cache", dataToStore);
|
||||
})
|
||||
.catch(error => console.log(error))
|
||||
},
|
||||
getActivity(clearPage=false) {
|
||||
const { sortBy, sortDesc, page, itemsPerPage } = this.options
|
||||
const params = {
|
||||
sortBy: "num", sortDesc: false,
|
||||
page: page, pageSize: itemsPerPage
|
||||
};
|
||||
this.picker.data_table.loading = true;
|
||||
let search = {}
|
||||
axios
|
||||
.post(HTTP_HOST + 'api/activity/GetListNew', search, { params: params })
|
||||
.then(response => {
|
||||
console.log(response)
|
||||
this.picker.data_table.list = response.data.list
|
||||
this.picker.data_table.count = response.data.count;
|
||||
this.picker.data_table.loading = false
|
||||
|
||||
const dataToStore = JSON.stringify(this.data_table);
|
||||
//sessionStorage.setItem("order_list_cache", dataToStore);
|
||||
})
|
||||
.catch(error => console.log(error))
|
||||
},
|
||||
pickFollower() {
|
||||
this.picker.data_table.list.length = 0;
|
||||
this.picker.show = true;
|
||||
this.picker.target = "follower";
|
||||
this.picker.data_table.header = [
|
||||
{ text: '信眾編號', value: 'num' },
|
||||
{ text: '姓名', value: 'u_name' },
|
||||
{ text: '電話', value: 'phone' },
|
||||
{ text: '行動電話', value: 'cellphone' },
|
||||
{ text: '電話', value: 'phoneDes' },
|
||||
{ text: '行動電話', value: 'cellphoneDes' },
|
||||
{ text: '', value: 'slot_btn', sortable: false, align: 'end' }
|
||||
]
|
||||
this.getFollowers(false);
|
||||
},
|
||||
pickAct() {
|
||||
this.picker.data_table.list.length = 0;
|
||||
this.picker.show = true;
|
||||
this.picker.target = "act";
|
||||
this.picker.data_table.header = [
|
||||
@@ -149,10 +273,16 @@
|
||||
{ text: '報名截止日', value: 'dueDate' },
|
||||
{ text: '', value: 'slot_btn', sortable: false, align: 'end' }
|
||||
]
|
||||
this.getActivity(false);
|
||||
},
|
||||
picker_confirm() {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
pageCount() {
|
||||
return Math.ceil(this.picker.data_table.count / this.picker.data_table.pageSize)
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user