318 lines
13 KiB
Vue
318 lines
13 KiB
Vue
<template>
|
||
<v-container>
|
||
<v-card>
|
||
<v-card-title class="bg-primary white--text text-center">
|
||
<h5 class="mb-0">快速報名</h5>
|
||
<v-btn class="ms-auto" @click.prevent="saveOrder()">儲存</v-btn>
|
||
</v-card-title>
|
||
<v-card-text>
|
||
<v-row>
|
||
<v-col cols="12" md="2">
|
||
<v-text-field v-model="name"
|
||
:counter="20"
|
||
label="姓名"></v-text-field>
|
||
</v-col>
|
||
<v-col cols="12" md="2">
|
||
<v-text-field v-model="idNo"
|
||
:counter="20"
|
||
label="身分證號"></v-text-field>
|
||
</v-col>
|
||
<v-col cols="12" md="2">
|
||
<v-text-field v-model="phoneNum"
|
||
:counter="20"
|
||
label="行動電話/市話"></v-text-field>
|
||
</v-col>
|
||
<v-col cols="12" md="2">
|
||
<v-btn @click.prevent="getFollower">查詢</v-btn>
|
||
</v-col>
|
||
</v-row>
|
||
<v-divider></v-divider>
|
||
<v-row>
|
||
<v-col cols="12" md="2">
|
||
<v-text-field v-model="follower.f_number" readonly
|
||
label="信眾編號"></v-text-field>
|
||
</v-col>
|
||
<v-col cols="12" md="2">
|
||
<v-text-field v-model="follower.u_name" readonly
|
||
label="信眾姓名"></v-text-field>
|
||
</v-col>
|
||
<v-col cols="12" md="2">
|
||
<v-text-field v-model="follower.phoneDes" readonly
|
||
label="電話"></v-text-field>
|
||
</v-col>
|
||
<v-col cols="12" md="2">
|
||
<v-text-field v-model="follower.cellphoneDes" readonly
|
||
label="行動電話"></v-text-field>
|
||
</v-col>
|
||
<v-col cols="12" md="2">
|
||
<v-text-field v-model="follower.id_code" readonly
|
||
label="身分證號"></v-text-field>
|
||
</v-col>
|
||
<v-col cols="12" md="2">
|
||
<v-text-field v-model="follower.passport" readonly
|
||
label="護照號碼"></v-text-field>
|
||
</v-col>
|
||
</v-row>
|
||
<v-row>
|
||
<v-col cols="12" md="12">
|
||
<v-text-field v-model="follower.address" readonly
|
||
label="地址"></v-text-field>
|
||
</v-col>
|
||
</v-row>
|
||
|
||
<hr class="hr-text" data-content="前次法會功德">
|
||
<v-row v-show="tablet_show">
|
||
<v-col cols="12" sm="12">
|
||
<v-data-iterator :items="tablet_list" :items-per-page="-1"
|
||
hide-default-footer>
|
||
<template v-slot:default="{ items }">
|
||
<v-row>
|
||
<v-col cols="3" md="3" v-for="(item, i) in items" :key="i">
|
||
<v-card-title>
|
||
|
||
<v-checkbox v-model="item.actitem_num_checked"
|
||
:disabled="item.disabled" class="custom-checkbox">
|
||
<template v-slot:label>
|
||
<h5 :class="renderDisabled(item)">{{ item.actitem_num_selected.text }}</h5>
|
||
</template>
|
||
</v-checkbox>
|
||
|
||
</v-card-title>
|
||
<v-card-text>
|
||
<div v-html="renderTabletContent(item)" style="font-size:20px;"></div>
|
||
<v-divider></v-divider>
|
||
</v-card-text>
|
||
</v-col>
|
||
</v-row>
|
||
</template>
|
||
<template v-slot:no-data>
|
||
<v-alert :value="true" color="error" icon="warning">
|
||
無資料可顯示，可能此信眾未曾參加過。
|
||
</v-alert>
|
||
</template>
|
||
</v-data-iterator>
|
||
</v-col>
|
||
</v-row>
|
||
</v-card-text>
|
||
</v-card>
|
||
|
||
<v-dialog v-model="message_dialog.show" style="width: 300px !important; height: 300px !important;">
|
||
<template>
|
||
<v-card>
|
||
<v-card-title>
|
||
{{ message_dialog.message }}
|
||
</v-card-title>
|
||
<v-card-text>
|
||
<v-btn @click.prevent="message_dialog.show=false">關閉</v-btn>
|
||
</v-card-text>
|
||
</v-card>
|
||
</template>
|
||
</v-dialog>
|
||
</v-container>
|
||
|
||
|
||
</template>
|
||
|
||
<script>
|
||
module.exports = {
|
||
props: {
|
||
num: {
|
||
type: Number // num
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
message_dialog: { show: false, message: "" },
|
||
idNo: "",
|
||
phoneNum: "",
|
||
name: "",
|
||
follower: {},
|
||
orders: [],
|
||
tablet_list: [],
|
||
act_items: [],
|
||
search: {},
|
||
query: {
|
||
id_code: { type: String }, cellphone: { type: String }
|
||
},
|
||
search_options: { multiSort: false },
|
||
tablet_show: false
|
||
}
|
||
},
|
||
activated() {
|
||
//this.getFollower()
|
||
this.getActItem()
|
||
},
|
||
methods: {
|
||
renderDisabled(item) {
|
||
if (item.disabled) {
|
||
return "disabled-checkbox"
|
||
} else {
|
||
return "enabled-checkbox"
|
||
}
|
||
},
|
||
getActItem() {
|
||
this.act_items.length = 0
|
||
this.search = { num: this.num }
|
||
let params = { sortBy: 'num', sortDesc: false, page: 1, pageSize: -1 };
|
||
axios
|
||
.post(HTTP_HOST + 'api/activity/GetActRelaList', this.search, { params: params })
|
||
.then(response => {
|
||
|
||
if (response.data.list) {
|
||
this.act_items = response.data.list
|
||
}
|
||
else
|
||
console.log("查無資料");
|
||
})
|
||
.catch(error => console.log(error))
|
||
},
|
||
getFollower() {
|
||
this.tablet_show = false
|
||
this.tablet_list.length = 0
|
||
this.follower = {}
|
||
this.search = { id_code: this.idNo, u_name: this.name, phone_idcode: this.phoneNum }
|
||
//應該要檢查他是否已經報完名
|
||
axios
|
||
.post(HTTP_HOST + 'api/follower/GetFollowerNew', this.search)
|
||
.then(response => {
|
||
if (response.data.list) {
|
||
console.log(response.data.list)
|
||
if (response.data.list.length > 1) {
|
||
//alert("相同條件不只一人")
|
||
this.message_dialog.show = true
|
||
this.message_dialog.message = "相同條件不只一人,請增加查詢條件"
|
||
} else {
|
||
this.tablet_show = true
|
||
this.follower = response.data.list[0]
|
||
this.getOrder()
|
||
}
|
||
}
|
||
else {
|
||
this.message_dialog.show = true
|
||
this.message_dialog.message = response.message
|
||
}
|
||
//alter(response.message);
|
||
|
||
// console.log("查無資料");
|
||
})
|
||
.catch(error => console.log(error))
|
||
},
|
||
getOrder() {
|
||
let params = { page: 1, pageSize: 10, sortBy: 'reg_time', sortDesc: true };
|
||
this.search = { f_num: this.follower.num }
|
||
axios
|
||
.post(HTTP_HOST + 'api/order/GetList', this.search, { params: params })
|
||
.then(response => {
|
||
if (response.data.list && response.data.list.length > 0) {
|
||
this.orders = response.data.list
|
||
this.orders = this.orders.filter(x => x.activity_num !== this.num)
|
||
if (this.orders && this.orders.length > 0) {
|
||
this.getOrderDetail()
|
||
}
|
||
}
|
||
else
|
||
console.log("getOrder 查無資料");
|
||
})
|
||
.catch(error => console.log(error))
|
||
},
|
||
getOrderDetail() {
|
||
this.tablet_show = true
|
||
let params = { sortBy: 'num', sortDesc: true, page: 1, pageSize: -1 };
|
||
let search1 = { order_no: this.orders[0].order_no }
|
||
axios
|
||
.post(HTTP_HOST + 'api/order/GetItemList', search1, { params: params })
|
||
.then(response => {
|
||
if (response.data.list) {
|
||
this.tablet_list = response.data.list
|
||
this.tablet_list.forEach(x => {
|
||
let act_item = this.act_items.filter(y => y.act_item_selected.val === x.actitem_num_selected.val)
|
||
if (act_item && act_item.length > 0) {
|
||
x.disabled = false
|
||
} else {
|
||
x.disabled = true
|
||
}
|
||
})
|
||
}
|
||
else
|
||
console.log("getOrderDetail 查無資料");
|
||
})
|
||
.catch(error => console.log(error))
|
||
},
|
||
renderTabletContent(item) {
|
||
let data = JSON.parse(item.f_num_tablet)
|
||
let left = data.left_items
|
||
let mid = data.mid_items
|
||
let returnVal = ""
|
||
if (left) {
|
||
returnVal = "陽上:" + left.map(x => x.fam_name).join("、")
|
||
}
|
||
if (mid) {
|
||
returnVal = returnVal + "<br>標題:" + mid.map(x => x.fam_name).join("、")
|
||
}
|
||
return returnVal
|
||
},
|
||
saveOrder() {
|
||
let detail = []
|
||
//整理資料存檔//只要抓那個活動的那幾筆功德項目代號
|
||
this.tablet_list.forEach(x => {
|
||
if (x.actitem_num_checked && x.actitem_num_checked == true) {
|
||
detail.push({ num: x.num, order_no: x.order_no })
|
||
console.log("saveOrder:", x, x.num, x.order_no)
|
||
}
|
||
})
|
||
//放主檔資料，
|
||
let main = {
|
||
activity_num: this.num, f_num: this.follower.num,
|
||
details: detail
|
||
}
|
||
|
||
axios
|
||
.post(HTTP_HOST + 'api/order/SaveWithDetails', main)
|
||
.then(response => {
|
||
if (response.result && response.result === "Y") {
|
||
console.log();
|
||
}
|
||
console.log(response.message)
|
||
}).catch(error => console.log(error));
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.hr-text {
|
||
display: flex;
|
||
align-items: center;
|
||
border: 0;
|
||
}
|
||
|
||
.hr-text::before,
|
||
.hr-text::after {
|
||
content: "";
|
||
flex: 1;
|
||
border-top: 1px solid #ccc; /* 分隔線樣式 */
|
||
margin: 0 10px;
|
||
}
|
||
|
||
.hr-text::before {
|
||
content: attr(data-content);
|
||
padding: 0 50px;
|
||
color: black;
|
||
font-size: 28px;
|
||
}
|
||
/* 当 checkbox 被禁用时，改变鼠标状态 */
|
||
input[type="checkbox"]:disabled {
|
||
cursor: not-allowed;
|
||
opacity: 0.4; /* 控制反灰程度 */
|
||
color: lightgray;
|
||
}
|
||
|
||
.disabled-checkbox {
|
||
cursor: not-allowed;
|
||
opacity: 0.8; /* 控制反灰程度 */
|
||
color: lightgray;
|
||
}
|
||
|
||
.enabled-checkbox {
|
||
}
|
||
</style> |