191 lines
8.6 KiB
Vue
191 lines
8.6 KiB
Vue
<template>
|
|
<div class="container-fluid">
|
|
<v-card>
|
|
<v-card-title class="bg-primary white--text text-center">
|
|
<v-expansion-panels accordion>
|
|
<v-expansion-panel v-for="(item,i) in 1"
|
|
:key="i">
|
|
<v-expansion-panel-header color="#006fc9"
|
|
class="white--text">
|
|
<v-row>
|
|
<v-col cols="10" md="10">
|
|
<label>查詢條件</label>
|
|
</v-col>
|
|
<v-col cols="2" md="2">
|
|
<v-btn @click.prevent='fast_signup' class="ms-auto">快速報名</v-btn>
|
|
<v-btn @click.prevent="back01()" class="ms-auto">返回</v-btn>
|
|
</v-col>
|
|
</v-row>
|
|
</v-expansion-panel-header>
|
|
<v-expansion-panel-content>
|
|
<v-row>
|
|
<v-col cols="2" md="2">
|
|
<v-text-field label="姓名" v-model="search.u_name">
|
|
|
|
</v-text-field>
|
|
</v-col>
|
|
<v-col cols="2" md="2">
|
|
<v-text-field label="電話" v-model="search.phone">
|
|
|
|
</v-text-field>
|
|
</v-col>
|
|
<v-col cols="2" md="2">
|
|
<v-text-field label="行動電話" v-model="search.cellphone">
|
|
|
|
</v-text-field>
|
|
</v-col>
|
|
<v-col cols="2" md="2">
|
|
<v-text-field label="身分證號" v-model="search.id_code">
|
|
|
|
</v-text-field>
|
|
</v-col>
|
|
<v-col cols="2" md="2">
|
|
<v-btn @click.prevent="getDetail()">查詢</v-btn>
|
|
<v-btn @click.prevent="clearSearch()">清空條件</v-btn>
|
|
</v-col>
|
|
</v-row>
|
|
</v-expansion-panel-content>
|
|
</v-expansion-panel>
|
|
</v-expansion-panels>
|
|
</v-card-title>
|
|
<v-card-text>
|
|
<v-data-table v-model="detail_table.selected"
|
|
:items="detail_table.list"
|
|
:search-props="search"
|
|
item-key="order_no"
|
|
:options.sync="options"
|
|
:headers="detail_table.header"
|
|
:footer-props="detail_table.footer"
|
|
:server-items-length="detail_table.count"
|
|
:loading="detail_table.loading"
|
|
:single-select="detail_table.singleSelect"
|
|
hide-default-footer
|
|
:page.sync="detail_table.page"
|
|
:items-per-page.sync="detail_table.pageSize"
|
|
class="elevation-1">
|
|
<template #item.slot_btn="{ item }">
|
|
<!--<a :href="'reg.aspx?order_no='+item.order_no" class="btn btn-outline-secondary btn-sm"><i class="mdi mdi-pencil-box-outline"></i>修改</a>
|
|
<a @click="$root.currentView='step-three';$root.selected_order=item.order_no" class="btn btn-outline-secondary btn-sm">明細</a>
|
|
<a @click="deleteItem(item)" class="btn btn-outline-secondary btn-sm"><i class="mdi mdi-trash-can"></i>刪除</a>-->
|
|
</template>
|
|
</v-data-table>
|
|
<v-container>
|
|
<v-row class="align-baseline" wrap>
|
|
<v-col cols="12" md="9">
|
|
<v-pagination v-model="detail_table.page"
|
|
:length="pageCount">
|
|
</v-pagination>
|
|
</v-col>
|
|
<v-col class="text-truncate text-right" cols="12" md="2">
|
|
共 {{ detail_table.count }} 筆, 頁數:
|
|
</v-col>
|
|
<v-col cols="6" md="1">
|
|
<v-text-field v-model="detail_table.page"
|
|
type="number"
|
|
hide-details
|
|
dense
|
|
min="1"
|
|
:max="pageCount"
|
|
@input="detail_table.page = parseInt($event, 10)"></v-text-field>
|
|
</v-col>
|
|
</v-row>
|
|
</v-container>
|
|
</v-card-text>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
module.exports = {
|
|
props: {
|
|
num: {
|
|
type: Number }
|
|
},
|
|
activated() {
|
|
this.getDetail();
|
|
},
|
|
|
|
mounted() {
|
|
this.getDetail();
|
|
},
|
|
data() {
|
|
return {
|
|
options: { multiSort: false },
|
|
search_options: { multiSort: false },
|
|
detail_table: {
|
|
loading: true,
|
|
list: [],
|
|
selected: [],
|
|
singleSelect: false,
|
|
count: 0,
|
|
page: 1,
|
|
pageSize: 10,
|
|
header: [
|
|
{ text: '單號', value: 'order_no' },
|
|
{ text: '姓名', value: 'u_name' },
|
|
{ text: '報名日期', value: 'up_time' },
|
|
{ text: '單據狀態', value: 'keyin1_txt', align: 'start' },
|
|
{ text: '', value: 'slot_btn', sortable: false, align: 'end' }
|
|
],
|
|
footer: {
|
|
showFirstLastPage: true,
|
|
itemsPerPageOptions: [5, 10, 20, 30],
|
|
},
|
|
},
|
|
search: {
|
|
u_name: '',
|
|
phone: '',
|
|
cellphone: '',
|
|
id_code:''
|
|
}
|
|
};
|
|
},
|
|
watch: {
|
|
options: {
|
|
handler() {
|
|
this.getDetail()
|
|
},
|
|
deep: true,
|
|
},
|
|
|
|
},
|
|
methods: {
|
|
back01() {
|
|
this.$emit('custom-event', { action: 'signup1', item: this.num });
|
|
},
|
|
fast_signup() {
|
|
this.$emit('custom-event', { action: 'add', item: this.num });
|
|
},
|
|
clearSearch() {
|
|
|
|
},
|
|
getDetail(clearpage=false) {
|
|
const { sortBy, sortDesc, page, itemsPerPage } = this.options
|
|
const params = {
|
|
sortBy: sortBy[0], sortDesc: sortDesc[0],
|
|
page: clearpage ? '1' : page, pageSize: itemsPerPage
|
|
};
|
|
let newsearch = {
|
|
activity_num: this.num, f_user: {
|
|
u_name: this.search.u_name, phone: this.search.phone,
|
|
cellphone: this.search.cellphone, id_code: this.search.id_code
|
|
}
|
|
}
|
|
this.detail_table.loading = true
|
|
sessionStorage.setItem('orderpage', '1');// clearpage ? '1' : page
|
|
axios
|
|
.post(HTTP_HOST + 'api/order/GetList', newsearch, { 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))
|
|
},
|
|
},
|
|
computed: {
|
|
pageCount() {
|
|
return Math.ceil(this.detail_table.count / this.detail_table.pageSize)
|
|
},
|
|
}
|
|
}
|
|
</script> |