313 lines
13 KiB
Vue
313 lines
13 KiB
Vue
<template>
|
|
<div class="container-fluid">
|
|
|
|
<v-card>
|
|
<v-card-title class="bg-primary white--text text-center">
|
|
<h5 class="mb-0">客堂登錄</h5>
|
|
<div class="ms-auto">
|
|
<v-btn @click.prevent="savePreOrder()">儲存</v-btn>
|
|
<v-btn @click.prevent="back01()">返回</v-btn>
|
|
</div>
|
|
</v-card-title>
|
|
<v-card-text>
|
|
<v-row>
|
|
<v-col cols="12" md="4">
|
|
|
|
<v-text-field v-model="formData.f_name"
|
|
:readonly="true"
|
|
label="信眾">
|
|
<v-icon slot="append" style="cursor:pointer" @click.prevent="pickFollower"
|
|
color="red">
|
|
mdi-account
|
|
</v-icon>
|
|
</v-text-field>
|
|
</v-col>
|
|
|
|
<v-col cols="12" md="4">
|
|
<v-text-field v-model="formData.item_count"
|
|
label="功德項目數"></v-text-field>
|
|
</v-col>
|
|
<v-col cols="12" md="4">
|
|
<v-text-field v-model="formData.total_amt"
|
|
label="總金額"></v-text-field>
|
|
</v-col>
|
|
<v-col cols="12" md="8">
|
|
<v-text-field v-model="formData.act_name"
|
|
:readonly="true"
|
|
label="法會/活動">
|
|
<v-icon slot="append" style="cursor:pointer" @click.prevent="pickAct"
|
|
color="red">
|
|
mdi-selection-search
|
|
</v-icon>
|
|
</v-text-field>
|
|
</v-col>
|
|
<v-col cols="12" md="4">
|
|
<v-text-field v-model="formData.order_no"
|
|
:readonly="true" :disabled="true"
|
|
label="報名單號"></v-text-field>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card-text>
|
|
</v-card>
|
|
|
|
<v-dialog v-model="picker.show" class="container-fluid">
|
|
<template>
|
|
<v-card>
|
|
<v-card-title>
|
|
|
|
<v-text-field v-model="picker.search.name" :label="picker.search.text" @keyup.enter.prevent="getFollowers"></v-text-field>
|
|
</v-card-title>
|
|
<v-card-text>
|
|
<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-text>
|
|
<v-card-actions>
|
|
<v-btn @click.prevent="picker.show=false">關閉</v-btn>
|
|
<v-btn @click.prevent="picker_confirm()">確認</v-btn>
|
|
</v-card-actions>
|
|
</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>
|
|
|
|
|
|
</template>
|
|
|
|
<script>
|
|
module.exports = {
|
|
props: {
|
|
num: {
|
|
type: Number // num
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
options: { multiSort: false },
|
|
formData: {
|
|
f_num: 0,
|
|
order_no: "自動編號",
|
|
item_count: 0,
|
|
total_amt: 0,
|
|
act_num: 0,
|
|
admin_num: 0,
|
|
receipt_no: "",
|
|
f_name: "",
|
|
act_name:""
|
|
},
|
|
picker: {
|
|
show: false,
|
|
target: "",
|
|
data_table: {
|
|
loading: false,
|
|
list: [],
|
|
selected: [],
|
|
singleSelect: false,
|
|
count: 0,
|
|
page: 1,
|
|
pageSize: 10,
|
|
header: [
|
|
|
|
],
|
|
footer: {
|
|
showFirstLastPage: true,
|
|
itemsPerPageOptions: [5, 10, 20, 30],
|
|
},
|
|
},
|
|
search: {
|
|
name: "",
|
|
text: "法會名稱"
|
|
},
|
|
change: 0
|
|
},
|
|
snackbar: {
|
|
show: false,
|
|
text: "",
|
|
},
|
|
}
|
|
},
|
|
watch: {
|
|
"picker.target": {
|
|
handler(newVal) {
|
|
//this.options.page = 1;
|
|
//this.options.pageSize = 10;
|
|
this.options = { multiSort: false }
|
|
this.picker.data_table.page = 1;
|
|
this.picker.data_table.pageSize=10;
|
|
if (this.picker.target === "follower") {
|
|
this.picker.search.name = ""
|
|
this.picker.search.text = "信眾姓名"
|
|
this.picker.change++
|
|
this.getFollowers()
|
|
} else if (this.picker.target === "act") {
|
|
this.picker.search.name = ""
|
|
this.picker.search.text = "法會名稱"
|
|
this.picker.change++
|
|
this.getActivity()
|
|
}
|
|
},
|
|
deep: true,
|
|
},
|
|
options: {
|
|
handler() {
|
|
this.getFollowers()
|
|
},
|
|
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??1, pageSize: itemsPerPage??10
|
|
};
|
|
this.picker.data_table.loading = true;
|
|
let search = {u_name:this.picker.search.name}
|
|
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??1, pageSize: itemsPerPage??10
|
|
};
|
|
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: '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 = [
|
|
{ text: '活動編號', value: 'num' },
|
|
{ text: '名稱', value: 'subject' },
|
|
{ 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> |