348 lines
14 KiB
Vue
348 lines
14 KiB
Vue
<template>
|
|
<div class="container-fluid">
|
|
<v-expansion-panels accordion>
|
|
<v-expansion-panel v-for="(item,i) in 1"
|
|
:key="i">
|
|
<v-expansion-panel-header>查詢條件</v-expansion-panel-header>
|
|
<v-expansion-panel-content>
|
|
<v-row>
|
|
<v-col cols="2" md="2">
|
|
<v-text-field label="法會分類">
|
|
|
|
</v-text-field>
|
|
</v-col>
|
|
<v-col cols="2" md="2">
|
|
<v-text-field label="法會名稱">
|
|
|
|
</v-text-field>
|
|
</v-col>
|
|
<v-col cols="2" md="2">
|
|
<v-text-field label="開始日期">
|
|
|
|
</v-text-field>
|
|
</v-col>
|
|
<v-col cols="2" md="2">
|
|
<v-text-field label="結束日期">
|
|
|
|
</v-text-field>
|
|
</v-col>
|
|
</v-row>
|
|
</v-expansion-panel-content>
|
|
</v-expansion-panel>
|
|
</v-expansion-panels>
|
|
<v-data-table v-model="data_table.selected"
|
|
:items="data_table.list"
|
|
|
|
item-key="order_no"
|
|
:options.sync="options"
|
|
:headers="data_table.header"
|
|
:footer-props="data_table.footer"
|
|
:server-items-length="data_table.count"
|
|
:loading="data_table.loading"
|
|
:single-select="data_table.singleSelect"
|
|
show-select
|
|
hide-default-footer
|
|
:page.sync="data_table.page"
|
|
:items-per-page.sync="data_table.pageSize"
|
|
class="elevation-1">
|
|
<template #item.up_time="{ item }">
|
|
{{ item.up_time|timeString('YYYY/MM/DD') }}
|
|
</template>
|
|
<template #item.u_name="{ item }">
|
|
<a v-if="item.f_num != null && item.activity_num != null" @click="checkInMsg(item)" class="btn btn-outline-secondary btn-sm"><i class="mdi mdi-account-check"></i>報到</a>
|
|
{{ item.u_name }}
|
|
</template>
|
|
<template #item.slot_btn="{ item }">
|
|
<a @click="gotoSignup(item)" class="btn btn-outline-secondary btn-sm">報名</a>
|
|
<a @click="gotoSignupList(item)" class="btn btn-outline-secondary btn-sm">明細</a>
|
|
|
|
</template>
|
|
</v-data-table>
|
|
<v-container>
|
|
<v-row class="align-baseline" wrap>
|
|
<v-col cols="12" md="9">
|
|
<v-pagination v-model="data_table.page"
|
|
:length="pageCount">
|
|
</v-pagination>
|
|
</v-col>
|
|
<v-col class="text-truncate text-right" cols="12" md="2">
|
|
共 {{ data_table.count }} 筆, 頁數:
|
|
</v-col>
|
|
<v-col cols="6" md="1">
|
|
<v-text-field v-model="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>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
module.exports = {
|
|
props: ['formData'],
|
|
data() {
|
|
return {
|
|
this_act:'',
|
|
options: { multiSort: false },
|
|
search_options: { multiSort: false },
|
|
data_table: {
|
|
loading: true,
|
|
list: [],
|
|
selected: [],
|
|
singleSelect: false,
|
|
count: 0,
|
|
page: 1,
|
|
pageSize: 10,
|
|
header: [
|
|
{ text: '活動分類', value: 'kindsTxt' },
|
|
{ text: '活動名稱', value: 'subject' },
|
|
{ text: '開始日期', value: 'startDate_solar' },
|
|
{ text: '結束日期', value: 'endDate_solar', align: 'start' },
|
|
{ text: '報名人數', value: 'orderCounts' },
|
|
{ text: '', value: 'slot_btn', sortable: false, align: 'end' }
|
|
],
|
|
footer: {
|
|
showFirstLastPage: true,
|
|
itemsPerPageOptions: [5, 10, 20, 30],
|
|
},
|
|
},
|
|
//列印管理報表
|
|
//print_conditions: 'yy',
|
|
//print_search: {
|
|
// year: '',
|
|
// month: '',
|
|
// season: '',
|
|
// chk_hasact: false,
|
|
// chk_noact: false,
|
|
// select_act: '',
|
|
// select_actitem: '',
|
|
|
|
//},
|
|
select_act_list: [],
|
|
select_items: {
|
|
month: [{
|
|
text: "請選擇",
|
|
val: 0
|
|
},],
|
|
season: [{
|
|
text: "請選擇",
|
|
val: 0
|
|
},],
|
|
},
|
|
//print_dialog: {
|
|
// show: false,
|
|
//},
|
|
//search_dialog: {
|
|
// controls: {
|
|
// search1: {
|
|
// id: 'search1',
|
|
// title: '國籍',
|
|
// text_prop: 'name_zh',
|
|
// value_prop: 'id',
|
|
// keys: [
|
|
// { id: 'keyword', title: '關鍵字' },
|
|
// ],
|
|
// api_url: HTTP_HOST + 'api/country/GetList',
|
|
// columns: [
|
|
// { id: 'id', title: '代碼' },
|
|
// { id: 'name_en', title: '英文短名稱' },
|
|
// { id: 'name_zh', title: '中文名稱' },
|
|
// ],
|
|
// selected: {},
|
|
// select(item, t) {
|
|
// //console.log("select search1", t);
|
|
// t.search.country = item.id;
|
|
// t.search.country2 = '';
|
|
// }
|
|
// },
|
|
// search2: {
|
|
// id: 'search2',
|
|
// title: '報名活動',
|
|
// text_prop: 'subject',
|
|
// value_prop: 'num',
|
|
// keys: [
|
|
// { id: 'subject', title: '活動名稱', value: '' },
|
|
// { id: 'kindTxt', title: '活動分類' },
|
|
// ],
|
|
// api_url: HTTP_HOST + 'api/activity/GetList',
|
|
// columns: [
|
|
// { id: 'subject', title: '活動名稱' },
|
|
// { id: 'kindTxt', title: '活動分類' },
|
|
// ],
|
|
// selected: {},
|
|
// select(item, t) {
|
|
// t.print_search.select_act = item.num;
|
|
// }
|
|
// },
|
|
// search3: {
|
|
// id: 'search3',
|
|
// title: '活動品項',
|
|
// text_prop: 'subject',
|
|
// value_prop: 'num',
|
|
// keys: [
|
|
// { id: 'subject', title: '項目名稱', value: '' },
|
|
// { id: 'kindTxt', title: '項目分類' },
|
|
// { id: 'num', visible: false },
|
|
// ],
|
|
// api_url: HTTP_HOST + 'api/activity/GetOrderList',
|
|
// columns: [
|
|
// { id: 'subject', title: '項目名稱' },
|
|
// { id: 'kindTxt', title: '項目分類' },
|
|
// ],
|
|
// selected: {},
|
|
// select(item, t) {
|
|
// t.print_search.select_actitem = item.num;
|
|
// }
|
|
// }
|
|
|
|
// }, show: false,
|
|
// current: {},
|
|
// list: [],
|
|
// count: 0,
|
|
// page: 1,
|
|
// loading: false,
|
|
// footer: {
|
|
// showFirstLastPage: true,
|
|
// disableItemsPerPage: true,
|
|
// itemsPerPageAllText: '',
|
|
// itemsPerPageText: '',
|
|
// },
|
|
//},
|
|
search: {
|
|
keyin1: '',
|
|
order_no: '',
|
|
subject: '',
|
|
u_name: '',
|
|
up_time1: '',
|
|
up_time2: '',
|
|
actItemTxt: '',
|
|
introducerTxt: '',
|
|
activity_num: '',
|
|
country: '',
|
|
country2: '',
|
|
hasPrice: '',
|
|
},
|
|
keyin1_items: [//狀態
|
|
//{
|
|
//text: "請選擇",
|
|
//val: 0
|
|
//},
|
|
],
|
|
};
|
|
},
|
|
mounted() {
|
|
//this.detalKeyinArray();
|
|
//this.search_dialog.current = this.search_dialog.controls.search1 ///default
|
|
//if (this.this_act != '')
|
|
// this.search.activity_num = this.this_act;
|
|
//this.initPrintSearch();
|
|
//this.initActivity();
|
|
const navEntries = performance.getEntriesByType("navigation");
|
|
const isReload = navEntries.length > 0 && navEntries[0].type === "reload";
|
|
if (isReload) {
|
|
sessionStorage.removeItem("orderpage");
|
|
}
|
|
else {
|
|
const savedPage = parseInt(sessionStorage.getItem('orderpage'));
|
|
if (savedPage) {
|
|
this.options.page = savedPage;
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
options: {
|
|
handler() {
|
|
this.getDefault()
|
|
},
|
|
deep: true,
|
|
},
|
|
search_options: {
|
|
handler() {
|
|
this.search_get()
|
|
},
|
|
deep: true,
|
|
},
|
|
},
|
|
methods: {
|
|
gotoSignup(item) {
|
|
this.$emit('custom-event', { action: 'add', item: item });
|
|
},
|
|
gotoSignupList(item) {
|
|
this.$emit('custom-event', { action:'detail', item:item });
|
|
},
|
|
getDetail(clearpage = false) {
|
|
console.log("test");
|
|
const { sortBy, sortDesc, page, itemsPerPage } = this.options
|
|
const params = {
|
|
sortBy: sortBy[0], sortDesc: sortDesc[0],
|
|
page: clearpage ? '1' : page, pageSize: itemsPerPage
|
|
};
|
|
this.detail_table.loading = true
|
|
sessionStorage.setItem('orderpage', clearpage ? '1' : page);
|
|
axios
|
|
//.post(HTTP_HOST + 'api/order/GetList', this.search, { params: params })
|
|
.post(HTTP_HOST + 'api/order/GetList', this.search, { params: params })
|
|
.then(response => {
|
|
this.detail_table.list = response.data.list
|
|
this.detail_table.count = response.data.count;
|
|
this.detail_table.loading = false
|
|
})
|
|
.catch(error => console.log(error))
|
|
},
|
|
getDefault(clearpage = false) {
|
|
const { sortBy, sortDesc, page, itemsPerPage } = this.options
|
|
const params = {
|
|
sortBy: sortBy[0], sortDesc: sortDesc[0],
|
|
page: clearpage ? '1' : page, pageSize: itemsPerPage
|
|
};
|
|
this.data_table.loading = true
|
|
sessionStorage.setItem('orderpage', clearpage ? '1' : page);
|
|
axios
|
|
//.post(HTTP_HOST + 'api/order/GetList', this.search, { params: params })
|
|
.post(HTTP_HOST + 'api/activity/GetList', this.search, { params: params })
|
|
.then(response => {
|
|
this.data_table.list = response.data.list
|
|
this.data_table.count = response.data.count;
|
|
this.data_table.loading = false
|
|
})
|
|
.catch(error => console.log(error))
|
|
},
|
|
editItem(item) {
|
|
console.log("edit", item);
|
|
},
|
|
btn_search() {
|
|
this.this_act = '';
|
|
this.search.activity_num = '';
|
|
|
|
this.getDefault(true)
|
|
},
|
|
btn_all() {
|
|
this.this_act = '';
|
|
this.search.activity_num = '';
|
|
clearObjProps(this.search);
|
|
this.btn_search()
|
|
},
|
|
initActivity() {
|
|
axios.get(HTTP_HOST + 'api/activity')
|
|
.then(response => {
|
|
this.select_act_list = response.data
|
|
})
|
|
.catch(error => {
|
|
console.log(error)
|
|
})
|
|
}
|
|
},
|
|
computed: {
|
|
pageCount() {
|
|
return Math.ceil(this.data_table.count / this.data_table.pageSize)
|
|
},
|
|
}
|
|
};
|
|
|
|
</script> |