495 lines
22 KiB
Vue
495 lines
22 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="saveOrder()" v-if="follower.f_number!=undefined&&follower.f_number!=''">儲存</v-btn>
|
||
<v-btn @click.prevent="back01()">返回</v-btn>
|
||
</div>
|
||
</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-if="follower.f_number!=undefined&&follower.f_number!=''">
|
||
<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-if="follower.f_number!=undefined&&follower.f_number!=''">
|
||
<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-if="follower.f_number!=undefined&&follower.f_number!=''">
|
||
<v-row v-show="tablet_show">
|
||
<v-select :items="orders"
|
||
label="選擇法會"
|
||
item-text="subject" @change="changeOrderDetail()"
|
||
item-value="order_no" v-model="order_no">
|
||
</v-select>
|
||
</v-row>
|
||
<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="4" md="4" v-for="(item, i) in items" :key="i">
|
||
<v-card-title>
|
||
<v-row>
|
||
<v-col col="12" md="12">
|
||
<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-col>
|
||
</v-row>
|
||
<v-row>
|
||
<v-col cols="3" md="3">
|
||
<v-btn class="ms-auto" @click.prevent="copytablet(item)">複製為</v-btn>
|
||
</v-col>
|
||
<v-col cols="9" md="9">
|
||
|
||
<v-select :items="act_items"
|
||
label="選擇功德項目"
|
||
item-text="act_item_selected.text"
|
||
item-value="act_item_selected.val" v-model="item.changeActitem">
|
||
</v-select>
|
||
</v-col>
|
||
</v-row>
|
||
</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="value" 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" class="dialog_width">
|
||
<template>
|
||
<v-card>
|
||
<v-card-title>
|
||
{{ message_dialog.message }}
|
||
</v-card-title>
|
||
<v-card-text>
|
||
<v-btn @click.prevent="message_dialog.show=false" v-if="!message_dialog.show_confirm">關閉</v-btn>
|
||
<v-btn @click.prevent="success_confirm()" v-if="message_dialog.show_confirm">確認</v-btn>
|
||
</v-card-text>
|
||
</v-card>
|
||
</template>
|
||
</v-dialog>
|
||
|
||
<v-dialog v-model="none_dialog.show" class="dialog_width">
|
||
<template>
|
||
<v-card>
|
||
<v-card-title>
|
||
{{ none_dialog.message }}
|
||
</v-card-title>
|
||
<v-card-text>
|
||
<v-btn @click.prevent="none_dialog.show=false">關閉</v-btn>
|
||
<v-btn @click.prevent="gotoOldSign()">前往傳統報名</v-btn>
|
||
</v-card-text>
|
||
</v-card>
|
||
</template>
|
||
</v-dialog>
|
||
|
||
<v-dialog v-model="transfer_dialog.show" class="dialog_width">
|
||
<template>
|
||
<v-card>
|
||
<v-card-title>
|
||
{{ transfer_dialog.message }}
|
||
</v-card-title>
|
||
<v-card-text>
|
||
<v-btn @click.prevent="transfer_dialog.show=false">關閉</v-btn>
|
||
<v-btn @click.prevent="gotoSignUp4()">報名並將資料回寫信眾資料</v-btn>
|
||
</v-card-text>
|
||
</v-card>
|
||
</template>
|
||
</v-dialog>
|
||
</v-container>
|
||
|
||
|
||
</template>
|
||
|
||
<script>
|
||
module.exports = {
|
||
props: {
|
||
num: {
|
||
type: Number // num
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
transfer_dialog: { show: false, message: "" },
|
||
message_dialog: { show: false, show_confirm: false, message: "" },
|
||
none_dialog: { show: false, message: "" },
|
||
idNo: "",
|
||
phoneNum: "",
|
||
name: "",
|
||
follower: {},
|
||
orders: [],
|
||
tablet_list: [],
|
||
act_items: [],
|
||
search: {},
|
||
value:false,
|
||
query: {
|
||
id_code: { type: String }, cellphone: { type: String }
|
||
},
|
||
search_options: { multiSort: false },
|
||
tablet_show: false,
|
||
activityes: [],
|
||
order_no: "",
|
||
copy_item: {}
|
||
}
|
||
},
|
||
activated() {
|
||
this.tablet_show = false
|
||
this.value=true
|
||
//this.getFollower()
|
||
//先清資料
|
||
this.follower = {}
|
||
this.orders = []
|
||
this.tablet_list = []
|
||
this.idNo = ""
|
||
this.phoneNum = ""
|
||
this.name=""
|
||
this.getActItem()
|
||
},
|
||
methods: {
|
||
gotoOldSign() {
|
||
this.$emit('custom-event', { action: 'oldSign', item: this.num });
|
||
},
|
||
back01() {
|
||
this.$emit('custom-event', { action: 'signup1', item: this.num });
|
||
},
|
||
gotoSignUp4() {
|
||
this.$emit('custom-event', { action: 'signup4', item: this.num });
|
||
},
|
||
renderDisabled(item) {
|
||
if (item.disabled) {
|
||
return "disabled-checkbox"
|
||
} else {
|
||
return "enabled-checkbox"
|
||
}
|
||
},
|
||
copytablet(item) {
|
||
let t = this.act_items.find(x => x.act_item_selected.val == item.changeActitem)
|
||
let newTablet = structuredClone(item)
|
||
newTablet.id = this.tablet_list.length + 1
|
||
//console.log("copytablet:",newTablet.nu, newTablet.actitem_num_selected, item.changeActitem);
|
||
newTablet.actitem_num_selected.val = t.act_item_selected.val
|
||
newTablet.actitem_num_selected.text = t.act_item_selected.text
|
||
|
||
newTablet.changeActitem = item.changeActitem
|
||
newTablet.disabled=false
|
||
this.tablet_list.push(newTablet)
|
||
},
|
||
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
|
||
//if (this.act_items && this.act_items.length > 0) {
|
||
// this.act_items = this.act_items.map(x => ({
|
||
// ...x,selected:""
|
||
// }))
|
||
//}
|
||
//console.log("QOO:",this.act_items)
|
||
}
|
||
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 if (response.data.list.length==0) {
|
||
this.transfer_dialog.show = true
|
||
this.transfer_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
|
||
|
||
|
||
//先確定是否有報名過
|
||
let o = this.orders.find(x => x.activity_num === this.num)
|
||
if (o != null && o != undefined) {
|
||
this.message_dialog.show = true
|
||
this.message_dialog.message = "此人已有報名資料，請勿重複報名"
|
||
return
|
||
}
|
||
this.orders = this.orders.filter(x => x.activity_num !== this.num)
|
||
//console.log("orders",this.orders)
|
||
if (this.orders && this.orders.length > 0) {
|
||
|
||
this.getOrderDetail()
|
||
}
|
||
}
|
||
else {
|
||
|
||
this.none_dialog.show = true
|
||
this.none_dialog.message = "尚未參加任何法會活動"
|
||
console.log("getOrder 查無資料");
|
||
}
|
||
|
||
})
|
||
.catch(error => console.log(error))
|
||
},
|
||
changeOrderDetail() {
|
||
this.tablet_show = true
|
||
this.tablet_list.length = 0
|
||
let params = { sortBy: 'num', sortDesc: true, page: 1, pageSize: -1 };
|
||
let search1 = { order_no: this.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
|
||
}
|
||
x["changeActitem"] = ""
|
||
})
|
||
}
|
||
else
|
||
console.log("changeOrderDetail 查無資料");
|
||
})
|
||
.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
|
||
}
|
||
x["changeActitem"]=""
|
||
})
|
||
}
|
||
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 mid_right = data.mid_right
|
||
let mid_left=data.mid_left
|
||
let returnVal = ""
|
||
if (left) {
|
||
returnVal = "陽上:" + left.map(x => x.fam_name).join("、")
|
||
}
|
||
if (mid) {
|
||
returnVal = returnVal + "<br>牌位正名:" + mid.map(x => x.fam_name).join("、")
|
||
}
|
||
if (mid_right) {
|
||
returnVal = returnVal + "<br>右正名:" + mid_right.map(x => x.fam_name).join("、")
|
||
}
|
||
if (mid_left) {
|
||
returnVal = returnVal + "<br>左正名:" + mid_left.map(x => x.fam_name).join("、")
|
||
}
|
||
return returnVal //item.actitem_num_selected.val+":" +
|
||
},
|
||
success_confirm() {
|
||
this.message_dialog.show = false
|
||
this.message_dialog.show_confirm=false
|
||
this.follower = {}
|
||
this.tablet_list.length = 0
|
||
this.tablet_show=false
|
||
},
|
||
saveOrder() {
|
||
let detail = []
|
||
//整理資料存檔//只要抓那個活動的那幾筆功德項目代號
|
||
this.tablet_list.forEach(x => {
|
||
|
||
if (x.actitem_num_checked && x.actitem_num_checked == true) {
|
||
//console.log("OOQ:", x.num)
|
||
let actItem = this.act_items.find(y => y.act_item_selected.val == x.actitem_num_selected.val)
|
||
detail.push({
|
||
num: x.num, order_no: x.order_no, change_item_num: x.changeActitem,
|
||
price: actItem.price, qty: 1, style: actItem.act_item_selected.style, printed_files: actItem.files[0].num
|
||
})
|
||
// console.log("saveOrder:", x, x.num, x.order_no)
|
||
}
|
||
})
|
||
|
||
//放主檔資料，
|
||
let main = {
|
||
activity_num: this.num, f_num: this.follower.num,
|
||
details: detail
|
||
}
|
||
//console.log("saveOrderDetail:",detail);
|
||
axios
|
||
.post(HTTP_HOST + 'api/order/SaveWithDetails', main)
|
||
.then(response => {
|
||
//console.log("哪尼:",response)
|
||
if (response.data.result && response.data.result === "Y") {
|
||
//console.log("shit");
|
||
}
|
||
//console.log("蝦:", response)
|
||
this.message_dialog.show_confirm = true
|
||
this.message_dialog.show = true
|
||
this.message_dialog.message = response.data.message
|
||
}).catch(error => {
|
||
this.message_dialog.show_confirm = false
|
||
this.message_dialog.show = true
|
||
this.message_dialog.message =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 {
|
||
}
|
||
|
||
.v-dialog{
|
||
width:500px !important;
|
||
}
|
||
</style> |