EnChia
7644df57d0
2. 新增報名頁面加上取消鍵 3. 優化登入頁面：按下 enter 自動換格／送出 4. 修復新增報名頁面中，不同 search_dialog 中的 page 參數相互連動之異常 5. 修改報名頁面列印格式 6. 修復報名頁面匯出功能 7. 優化報到功能 8. 報名頁面中，無查詢資料時不可點選匯出／列印按鈕 9. 匯出／列印報名管理報表時，若無資料則顯示提示 10. 修復列印管理報表後父視窗 UI 不能點擊的問題 11. 新增報名管理表單匯出 excel 功能 12. 於新增信眾、新增活動頁面加上取消鍵 13. 優化報名管理匯出功能：若篩選條件包含特定活動，自動於「匯出條件」欄位標註活動名稱 14. 優化報名查詢匯出功能：匯出之文件中加上「匯出條件」欄位 15. 修復信眾資料頁面中，使用「生日」作為篩選基準時，後續執行「列印查詢資料」與「匯出查詢資料」會報錯 16. 修復「列印信眾查詢」功能中，電話搜尋欄位未正確帶入查詢條件之異常 17. 解決中文輸入法輸入電話號碼的跳字問題 18. 新增品項管理介面排序功能
1047 lines
53 KiB
Plaintext
1047 lines
53 KiB
Plaintext
<%@ Page Title="後端管理" Language="C#" MasterPageFile="~/admin/Templates/TBS5ADM001/MasterPage.master" AutoEventWireup="true" EnableEventValidation="false" CodeFile="index.aspx.cs" Inherits="admin_order_index" %>
|
||
|
||
<%@ Register Src="~/admin/_uc/alert.ascx" TagPrefix="uc1" TagName="alert" %>
|
||
<asp:Content ID="Content1" ContentPlaceHolderID="page_header" runat="Server">
|
||
</asp:Content>
|
||
<asp:Content ID="Content3" ContentPlaceHolderID="page_nav" runat="Server">
|
||
<div class="mb-2 mb-sm-0">
|
||
<a href="reg.aspx" class="btn btn-primary">
|
||
<i class="mdi mdi-plus"></i>新增
|
||
</a>
|
||
<a @click="deleteAll" class="btn btn-outline-danger" title="刪除勾選的資料" ><i class="mdi mdi-trash-can"></i> 刪除勾選</a>
|
||
</div>
|
||
<div class="">
|
||
<a @click="print_dialog.show=true" class="btn btn-outline-primary btn-print" target="_blank">
|
||
<i class="mdi mdi-printer"></i>列印管理報表
|
||
</a>
|
||
<div :style="data_table.list.length === 0 ? 'pointer-events: none; opacity: 0.5;' : ''" style="display:inline-block;">
|
||
<div class="dropdown d-inline-block">
|
||
<a class="btn btn-outline-primary btn-print dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false"><i class="mdi mdi-printer"></i>列印查詢資料</a>
|
||
<ul class="dropdown-menu ps-0 w-100" aria-labelledby="dropdownPrintLink">
|
||
<li><a @click="search.hasPrice='Y';goPrint()" class="dropdown-item"><i class="mdi mdi-printer me-1"></i>有金額</a></li>
|
||
<li><a @click="search.hasPrice='N';goPrint()" class="dropdown-item"><i class="mdi mdi-printer me-1"></i>無金額</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div :style="data_table.list.length === 0 ? 'pointer-events: none; opacity: 0.5;' : ''" style="display:inline-block;">
|
||
<asp:LinkButton ID="excel" runat="server" CssClass="btn btn-outline-success" OnClick="excel_Click"><span class="fa-solid fa-file-excel"></span> 匯出查詢資料（Excel）</asp:LinkButton>
|
||
</div>
|
||
</div>
|
||
</asp:Content>
|
||
<asp:Content ID="Content5" ContentPlaceHolderID="footer_script" runat="Server">
|
||
<%--<link href="<%=ResolveUrl("~/js/vuetify_ez.css")%>" rel="stylesheet" />--%>
|
||
<script>
|
||
Vue.filter('timeString', function (value, myFormat) {
|
||
return value == null || value == "" ? "" : moment(value).format(myFormat || 'YYYY-MM-DD, HH:mm:ss');
|
||
});
|
||
|
||
let VueApp=new Vue({
|
||
el: '#app',
|
||
vuetify: new Vuetify(vuetify_options),
|
||
data() {
|
||
return {
|
||
print_error_msg: "",
|
||
isSearched: false,
|
||
this_act : '<%= Request["act_id"]%>',
|
||
options: { multiSort: false },
|
||
search_options: { multiSort: false },
|
||
data_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: 'subject', align: 'start' },
|
||
{ text: '單據狀態', value: 'keyin1_txt' },
|
||
{ text: '報到狀態', value: 'status' },
|
||
{ 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: '',
|
||
}
|
||
//報到
|
||
, check_dialog: {
|
||
show: false,
|
||
},
|
||
check_data: {
|
||
f_num: 0,
|
||
u_name: '',
|
||
activity_num :0,
|
||
activity_name :'',
|
||
qty: 1,
|
||
status: {
|
||
text: '',
|
||
val: 1
|
||
},
|
||
},
|
||
keyin1_items: [//狀態
|
||
//{
|
||
//text: "請選擇",
|
||
//val: 0
|
||
//},
|
||
],
|
||
}
|
||
},
|
||
mounted() {
|
||
const printResult = document.getElementById('<%= hid_err_msg.ClientID %>').value;
|
||
document.getElementById('<%= hid_err_msg.ClientID %>').value = '';
|
||
window._printResult = printResult
|
||
|
||
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");
|
||
sessionStorage.removeItem("order_list_cache");
|
||
sessionStorage.removeItem("order_query_params");
|
||
}
|
||
else if ("<%=lastAddedNo%>" !== "") {
|
||
const newQuery = { order_no: '<%=lastAddedNo%>' };
|
||
sessionStorage.setItem('order_query_params', JSON.stringify(newQuery));
|
||
this.search = newQuery;
|
||
this.isSearched = true;
|
||
}
|
||
else {
|
||
const savedPage = parseInt(sessionStorage.getItem('orderpage'));
|
||
const savedData = sessionStorage.getItem("order_list_cache");
|
||
const savedQuery = JSON.parse(sessionStorage.getItem("order_query_params"));
|
||
if (savedQuery) {
|
||
this.search = savedQuery;
|
||
this.isSearched = true;
|
||
}
|
||
if (savedPage) {
|
||
this.options.page = savedPage;
|
||
}
|
||
if (savedData && savedData !== "undefined") {
|
||
this.data_table = JSON.parse(savedData);
|
||
this.isSearched = true;
|
||
}
|
||
}
|
||
|
||
if (printResult === 'nodata' || printResult === 'success') {
|
||
|
||
|
||
this.$nextTick(() => {
|
||
this.print_dialog.show = true;
|
||
if (printResult === 'nodata') {
|
||
this.print_error_msg = "查無資料，請重新選擇區間";
|
||
}
|
||
});
|
||
}
|
||
|
||
this.$nextTick(() => {
|
||
setTimeout(() => {
|
||
// 清空 URL
|
||
const cleanUrl = window.location.protocol + "//" + window.location.host + window.location.pathname;
|
||
window.history.replaceState({}, '', cleanUrl);
|
||
}, 100);
|
||
});
|
||
},
|
||
watch: {
|
||
options: {
|
||
handler() {
|
||
if (this.isSearched) {
|
||
this.getDefault()
|
||
}
|
||
else {
|
||
this.data_table.loading = false;
|
||
}
|
||
},
|
||
deep: true,
|
||
},
|
||
search_options: {
|
||
handler() {
|
||
this.search_get()
|
||
},
|
||
deep: true,
|
||
},
|
||
},
|
||
methods: {
|
||
triggerManagementExport(mode) {
|
||
this.print_error_msg = "";
|
||
if (this.print_search.year == '') {
|
||
msgbox('請輸入年份');
|
||
return;
|
||
}
|
||
if (!this.print_search.chk_noact && !this.print_search.chk_hasact) {
|
||
msgbox('活動/非活動至少勾選一項');
|
||
return;
|
||
}
|
||
|
||
// 將 Vue 狀態同步至 ASP.NET HiddenField，供後端 PostBack 讀取參數
|
||
document.getElementById('<%= hid_print_mode.ClientID %>').value = this.print_conditions;
|
||
document.getElementById('<%= hid_print_year.ClientID %>').value = this.print_search.year;
|
||
if (this.print_conditions == 'mm')
|
||
document.getElementById('<%= hid_print_month.ClientID %>').value = this.print_search.month;
|
||
else if (this.print_conditions == 'ss')
|
||
document.getElementById('<%= hid_print_season.ClientID %>').value = this.print_search.season;
|
||
document.getElementById('<%= hid_select_act.ClientID %>').value = this.print_search.select_act;
|
||
document.getElementById('<%= hid_select_actitem.ClientID %>').value = this.print_search.select_actitem;
|
||
document.getElementById('<%= hid_chk_hasact.ClientID %>').value = this.print_search.chk_hasact;
|
||
document.getElementById('<%= hid_chk_noact.ClientID %>').value = this.print_search.chk_noact;
|
||
|
||
let qry = "";
|
||
Object.keys(this.print_search).forEach(key => {
|
||
if (this.print_search[key] != undefined && this.print_search[key] != null && this.print_search[key] != '') {
|
||
if (key == 'month' ) {
|
||
if (this.print_conditions == 'mm') {
|
||
qry += "&month=" + this.print_search.month;
|
||
}
|
||
} else if ( key == 'season')
|
||
{
|
||
if (this.print_conditions == 'ss') {
|
||
qry += "&season=" + this.print_search.season;
|
||
}
|
||
}
|
||
else {
|
||
qry += (qry != '' ? '&' : '?') + (key + '=' + this.print_search[key]);
|
||
}
|
||
|
||
}
|
||
});
|
||
document.getElementById('<%= hid_qry.ClientID %>').value = qry;
|
||
|
||
if (mode === 'print') {
|
||
document.getElementById('<%= print_management.ClientID %>').click();
|
||
}
|
||
else if (mode === "excel") {
|
||
document.getElementById('<%= excel_management.ClientID %>').click();
|
||
}
|
||
},
|
||
search_show(curr) {
|
||
//console.log("btn_click:", curr, curr.api_url);
|
||
this.search_dialog.current = curr;
|
||
this.search_clear()
|
||
//this.search_get()//清除完自動會重抓, 故取消
|
||
this.search_dialog.show = true;
|
||
},
|
||
search_clear() {
|
||
if (!this.search_dialog.current.keys) return;
|
||
this.search_dialog.current.keys.forEach((t, i) => { t.value = '' })
|
||
this.search_get()
|
||
},
|
||
search_get() {
|
||
if (!this.search_dialog.current.keys) return;
|
||
let api_url = this.search_dialog.current.api_url;
|
||
let keys = this.search_dialog.current.keys;
|
||
//const { page, itemsPerPage } = this.options
|
||
//const { sortBy, sortDesc, page, itemsPerPage } = this.options
|
||
this.search_dialog.page = this.search_options.page ?? 1
|
||
let params = { page: this.search_dialog.page, pageSize: 10 };//url params
|
||
var search = {};//post body
|
||
keys.forEach((t, i) => {
|
||
search[t.id] = t.value;
|
||
});
|
||
//necessary parameter===
|
||
if (this.search_dialog.current.id == 'search2') {
|
||
params = { sortBy: 'startDate_solar', sortDesc:true, page: this.search_dialog.page, pageSize: 10 };//url params
|
||
}
|
||
|
||
console.log("search_get", api_url, search, params, this.search_options);
|
||
this.search_dialog.loading = true
|
||
axios.post(api_url, search, { params: params })
|
||
.then(response => {
|
||
this.search_dialog.list = response.data.list
|
||
this.search_dialog.count = response.data.count
|
||
this.search_dialog.loading = false
|
||
})
|
||
.catch(error => {
|
||
console.log(error)
|
||
this.search_dialog.list = []
|
||
this.search_dialog.count = 0
|
||
this.search_dialog.loading = false
|
||
this.snackbar.text = "錯誤:" + error
|
||
this.snackbar.show = true
|
||
})
|
||
},
|
||
search_headers() {
|
||
if (!this.search_dialog.current.columns) return;
|
||
r = [];
|
||
this.search_dialog.current.columns.forEach((t, i) => {
|
||
r.push({
|
||
text: t.title,
|
||
align: 'start',
|
||
sortable: false,
|
||
value: t.id,
|
||
})
|
||
})
|
||
return r
|
||
},
|
||
search_select(row) {
|
||
let curr = this.search_dialog.current;
|
||
let target = $(`[data-search-control=${curr.id}]`);
|
||
curr.selected = row;
|
||
target.children("input.search-text").val(curr.selected[curr.text_prop])//text
|
||
target.children("input:hidden").val(curr.selected[curr.value_prop])//value
|
||
if (curr.select instanceof Function) {
|
||
curr.select(row, this);
|
||
}
|
||
this.search_dialog.show = false;
|
||
//console.log(row, row["u_name"], row["f_number"], curr.id, target);
|
||
},
|
||
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 })
|
||
.then(response => {
|
||
this.data_table.list = response.data.list
|
||
this.data_table.count = response.data.count;
|
||
this.data_table.loading = false
|
||
|
||
const dataToStore = JSON.stringify(this.data_table);
|
||
sessionStorage.setItem("order_list_cache", dataToStore);
|
||
})
|
||
.catch(error => console.log(error))
|
||
},
|
||
detalKeyinArray() {
|
||
var getArray = <%=Newtonsoft.Json.JsonConvert.SerializeObject(_keyin1Item, Newtonsoft.Json.Formatting.Indented) %>;
|
||
if (getArray !== null) {
|
||
var keys = Object.keys(getArray);
|
||
for (let i = 0; i < keys.length; i++) {
|
||
//console.log(`${keys[i]}:${getArray[keys[i]]}`); //value : text
|
||
var _tmp = {
|
||
text: getArray[keys[i]],
|
||
val: parseInt(keys[i]),
|
||
}
|
||
this.keyin1_items.push(_tmp);
|
||
}
|
||
}
|
||
|
||
},
|
||
editItem(item) {
|
||
console.log("edit", item);
|
||
},
|
||
deleteItem(item) {
|
||
if (confirm('是否確定刪除此筆資料?')) {
|
||
const index = this.data_table.list.indexOf(item)
|
||
if (index != -1) {
|
||
axios
|
||
.delete(HTTP_HOST + 'api/order/' + item.order_no)
|
||
.then(response => {
|
||
console.log("del", item);
|
||
this.data_table.list.splice(index, 1);
|
||
this.data_table.count = this.data_table.list.length
|
||
})
|
||
.catch(error => console.log(error))
|
||
}
|
||
}
|
||
},
|
||
deleteAll() {
|
||
if (confirm('是否確定刪除已勾選的資料?')) {
|
||
axios
|
||
.delete(HTTP_HOST + 'api/order/DeleteAll/' + this.data_table.selected.map(x => x.order_no))
|
||
.then(response => {
|
||
//console.log("delAll");
|
||
|
||
//for (var i = 0; i < this.data_table.selected.length; i++) {
|
||
// const index = this.data_table.list.indexOf(this.data_table.selected[i]);
|
||
// this.data_table.list.splice(index, 1);
|
||
//}
|
||
//this.data_table.selected = [];
|
||
//this.data_table.count = this.data_table.list.length
|
||
//location.reload();
|
||
this.getDefault();
|
||
})
|
||
.catch(error => console.log(error))
|
||
}
|
||
},
|
||
btn_search() {
|
||
this.isSearched = true;
|
||
sessionStorage.setItem("order_query_params", JSON.stringify(this.search));
|
||
this.this_act = '';
|
||
this.search.activity_num = '';
|
||
|
||
this.getDefault(true)
|
||
bootstrap.Offcanvas.getInstance(document.getElementById("offcanvasRight")).hide()
|
||
},
|
||
btn_all() {
|
||
this.isSearched = false;
|
||
this.this_act = '';
|
||
this.search.activity_num = '';
|
||
clearObjProps(this.search);
|
||
sessionStorage.setItem("order_query_params", JSON.stringify(this.search));
|
||
//this.btn_search()
|
||
},
|
||
checkInMsg(item) {
|
||
this.check_data.f_num = item.f_num;
|
||
this.check_data.u_name = item.u_name;
|
||
this.check_data.activity_num = item.activity_num;
|
||
this.check_data.activity_name = item.subject;
|
||
this.check_dialog.show = true;
|
||
},
|
||
checkIn(item) {
|
||
var checkdata =
|
||
{
|
||
f_num: item.f_num,
|
||
activity_num: item.activity_num,
|
||
status: 1,
|
||
qty: 1,
|
||
}
|
||
console.log(checkdata)
|
||
axios
|
||
.post(HTTP_HOST + 'api/activity/OrderCheckIn', checkdata)
|
||
.then(response => {
|
||
msgtop('簽到成功');
|
||
this.getDefault();
|
||
})
|
||
.catch(
|
||
error => {
|
||
console.log(error)
|
||
msgtop('簽到失敗', 'error')
|
||
}
|
||
)
|
||
//if (this.check_data.qty > 0 && this.check_data.status.val > 0) {
|
||
// var chechdata =
|
||
// {
|
||
// f_num: this.check_data.f_num,
|
||
// activity_num: this.check_data.activity_num,
|
||
// status: this.check_data.status.val,
|
||
// qty: this.check_data.qty,
|
||
// }
|
||
// axios
|
||
// .post(HTTP_HOST + 'api/activity/OrderCheckIn', chechdata)
|
||
// .then(response => {
|
||
// //清空
|
||
// this.check_data.f_num = 0;
|
||
// this.check_data.u_name = '';
|
||
// this.check_data.activity_num = 0;
|
||
// this.check_data.activity_name = '';
|
||
// this.check_data.qty = 1;
|
||
// this.check_data.status.text = '';
|
||
// this.check_data.status.val = 1;
|
||
|
||
// this.check_dialog.show = false;
|
||
// msgtop('簽到成功')
|
||
// })
|
||
// .catch(
|
||
// error => {
|
||
// console.log(error)
|
||
// msgtop('簽到失敗', 'error')
|
||
// }
|
||
// )
|
||
//} else {
|
||
// msgbox('報到資訊請填寫完整');
|
||
//}
|
||
}, goPrint() {
|
||
let _qry = "";
|
||
Object.keys(this.search).forEach(key => {
|
||
//console.log(`${key}: ${this.search[key]}`);
|
||
if (this.search[key] != undefined && this.search[key] != null && this.search[key] != '') {
|
||
_qry += (_qry != '' ? '&' : '?') + (key + '=' + this.search[key]);
|
||
}
|
||
});
|
||
window.open("print.aspx" + _qry, '_blank');
|
||
},
|
||
countryChange() {
|
||
this.search.country = '';
|
||
$('#country_txt').val('')
|
||
},
|
||
//列印管理報表
|
||
print_close() {
|
||
this.print_dialog.show = false;
|
||
this.print_error_msg = "";
|
||
}
|
||
,
|
||
initPrintSearch() {
|
||
//下拉選單
|
||
for (let i = 1; i <= 12; i++) {
|
||
var _tmp = {
|
||
text: i,
|
||
val: i,
|
||
}
|
||
this.select_items.month.push(_tmp);
|
||
}
|
||
for (let i = 1; i <= 4; i++) {
|
||
var _tmp = {
|
||
text: i,
|
||
val: i,
|
||
}
|
||
this.select_items.season.push(_tmp);
|
||
}
|
||
|
||
//預設值
|
||
const Today = new Date();//現在日期時間
|
||
const first_date = new Date(Today.getFullYear(), Today.getMonth(), 1); //本月第一天
|
||
const last_month_date = new Date(first_date - 1); //上個月最後一天
|
||
|
||
this.print_search.year = last_month_date.getFullYear();
|
||
this.print_search.month = last_month_date.getMonth() + 1 //預設上個月的年份
|
||
|
||
let _season = 1;
|
||
const _month = first_date.getMonth() + 1; //本月
|
||
if (_month >= 1 && _month <= 3) {
|
||
_season = 4;
|
||
} else if (_month >= 4 && _month <= 6) {
|
||
_season = 1;
|
||
} else if (_month >= 7 && _month <= 9) {
|
||
_season = 2;
|
||
} else if (_month >= 10 && _month <= 12) {
|
||
_season = 3;
|
||
}
|
||
this.print_search.season = _season; //預設上一季
|
||
|
||
},
|
||
goPrint2() {
|
||
if (this.print_search.year != '') {
|
||
if (this.print_search.chk_noact || this.print_search.chk_hasact) {
|
||
let _qry = "";
|
||
Object.keys(this.print_search).forEach(key => {
|
||
if (this.print_search[key] != undefined && this.print_search[key] != null && this.print_search[key] != '') {
|
||
if (key == 'month' ) {
|
||
if (this.print_conditions == 'mm') {
|
||
_qry += "&month=" + this.print_search.month;
|
||
}
|
||
} else if ( key == 'season')
|
||
{
|
||
if (this.print_conditions == 'ss') {
|
||
_qry += "&season=" + this.print_search.season;
|
||
}
|
||
}
|
||
else {
|
||
_qry += (_qry != '' ? '&' : '?') + (key + '=' + this.print_search[key]);
|
||
}
|
||
}
|
||
});
|
||
console.log(_qry);
|
||
this.print_dialog.show = false;
|
||
//window.open("print.aspx" + _qry, '_blank');
|
||
} else {
|
||
msgbox('活動/非活動至少勾選一項');
|
||
}
|
||
|
||
|
||
} else {
|
||
msgbox('請輸入年份');
|
||
}
|
||
|
||
}, chk_hasact_change() {
|
||
if (!this.print_search.chk_hasact) {
|
||
//$('#activity_num_txt').val('')
|
||
//this.print_search.select_act = '';
|
||
this.clear_select_act();
|
||
$('#activity_num_txt').attr("placeholder", "可選擇單一活動(需先勾選活動報名)");
|
||
}else{
|
||
$('#activity_num_txt').attr("placeholder", "可選擇單一活動");
|
||
}
|
||
|
||
},
|
||
clear_select_act() {
|
||
$('#activity_num_txt').val('')
|
||
this.print_search.select_act = '';
|
||
}, clear_select_actitem() {
|
||
$('#actItem_num_txt').val('')
|
||
this.print_search.select_actitem = '';
|
||
},
|
||
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)
|
||
},
|
||
}
|
||
})
|
||
|
||
|
||
document.getElementById("<%= s_country.ClientID %>").addEventListener("click", function () {
|
||
$('#country2').val('');
|
||
VueApp.search.country2 = '';
|
||
});
|
||
|
||
$(document).ready(function () {
|
||
// 判斷是否彈出 search dialog
|
||
let hasSearchResult = sessionStorage.getItem("order_list_cache") !== null;
|
||
|
||
if (!hasSearchResult && window._printResult === '') {
|
||
let $btn = $("a[data-bs-target='#offcanvasRight'][href='#search_panel']");
|
||
$btn.click();
|
||
let el = document.getElementById('offcanvasRight');
|
||
let offcanvas = bootstrap.Offcanvas.getOrCreateInstance(el);
|
||
offcanvas.show();
|
||
}
|
||
});
|
||
</script>
|
||
</asp:Content>
|
||
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
|
||
<uc1:alert runat="server" ID="L_msg" Text="" />
|
||
<asp:HiddenField ID="hid_err_msg" runat="server" />
|
||
<asp:HiddenField ID="hid_print_year" runat="server" />
|
||
<asp:HiddenField ID="hid_print_month" runat="server" />
|
||
<asp:HiddenField ID="hid_print_season" runat="server" />
|
||
<asp:HiddenField ID="hid_print_mode" runat="server" />
|
||
<asp:HiddenField ID="hid_chk_hasact" runat="server" />
|
||
<asp:HiddenField ID="hid_chk_noact" runat="server" />
|
||
<asp:HiddenField ID="hid_select_act" runat="server" />
|
||
<asp:HiddenField ID="hid_select_actitem" runat="server" />
|
||
<asp:HiddenField ID="hid_qry" runat="server" />
|
||
<asp:LinkButton ID="print_management" runat="server" OnClick="export_Click" style="display:none;" />
|
||
<asp:LinkButton ID="excel_management" runat="server" OnClick="export_Click" style="display:none;" />
|
||
<div id="content" class="container-fluid">
|
||
<v-data-table
|
||
v-model="data_table.selected"
|
||
:items="data_table.list"
|
||
:search-props="search"
|
||
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 }" >
|
||
{{ item.u_name }}
|
||
</template>
|
||
<template #item.status="{ item }" >
|
||
<a v-if="item.f_num != null && item.activity_num != null && item.status == 0" @click="checkIn(item)" class="btn btn-outline-secondary btn-sm"><i class="mdi mdi-account"></i>報到</a>
|
||
<a v-if="item.f_num != null && item.activity_num != null && item.status == 1" class="btn btn-outline-secondary btn-sm opacity-50" style="pointer-events: none" ><i class="mdi mdi-account-check"></i>已報到</a>
|
||
</template>
|
||
<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="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="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>
|
||
|
||
<v-dialog v-model="check_dialog.show" max-width="400px">
|
||
<v-card>
|
||
<v-card-title class="justify-space-between grey lighten-2">
|
||
請填寫報到資訊
|
||
<v-btn icon @click="check_dialog.show=false;"><v-icon>mdi-close</v-icon></v-btn>
|
||
</v-card-title>
|
||
<v-card-text >
|
||
<v-row densee class="pt-3" >
|
||
<v-col :cols="3" class="pt-3" >
|
||
<span class="fs-6 text text-dark">姓名</span>
|
||
</v-col>
|
||
<v-col :cols="9" class="pt-3" >
|
||
<span class="fs-6 text text-dark">{{check_data.u_name}}</span>
|
||
</v-col>
|
||
<v-col :cols="3" class="pt-3" >
|
||
<span class="fs-6 text text-dark">活動</span>
|
||
</v-col>
|
||
<v-col :cols="9" class="pt-3" >
|
||
<span class="fs-6 text text-dark">{{check_data.activity_name}}</span>
|
||
</v-col>
|
||
<v-col :cols="3" class="pt-3" >
|
||
<span class="fs-6 text text-dark">報到人數</span>
|
||
</v-col>
|
||
<v-col :cols="9" >
|
||
<v-text-field v-model="check_data.qty" :hide-details="true" dense single-line :maxlength=5 ></v-text-field>
|
||
</v-col>
|
||
<v-col :cols="3" class="pt-3" >
|
||
<span class="fs-6 text text-dark">狀態 *</span>
|
||
</v-col>
|
||
<v-col :cols="9" >
|
||
<v-select @change=""
|
||
item-text="text"
|
||
item-value="val"
|
||
v-model="check_data.status.val"
|
||
:items="keyin1_items"
|
||
></v-select>
|
||
</v-col>
|
||
<v-col :cols="12" class="pt-3 text-center" >
|
||
<v-btn class="ma-2" color="primary" dark @click="checkIn()" ><v-icon dark left > mdi-check-bold </v-icon> 確定報到 </v-btn>
|
||
</v-col>
|
||
</v-row>
|
||
</v-card-text>
|
||
<v-card-actions>
|
||
</v-card-actions>
|
||
</v-card>
|
||
</v-dialog>
|
||
<v-dialog v-model="print_dialog.show" max-width="650px">
|
||
<v-card>
|
||
<v-card-title class="justify-space-between grey lighten-2">
|
||
活動報名日期管理報表
|
||
<v-btn icon @click="print_close"><v-icon>mdi-close</v-icon></v-btn>
|
||
</v-card-title>
|
||
<v-card-text >
|
||
<v-row densee class="pt-3" >
|
||
<v-col :cols="2" >
|
||
<span class="fs-6 text text-dark">查詢條件</span>
|
||
</v-col>
|
||
<v-col :cols="10" >
|
||
<select class="form-select" v-model="print_conditions" >
|
||
<option value="yy">年</option>
|
||
<option value="mm">月</option>
|
||
<option value="ss">季</option>
|
||
</select>
|
||
</v-col>
|
||
<v-col :cols="2" class="pt-5" >
|
||
<span class="fs-6 text text-dark">年 *</span>
|
||
</v-col>
|
||
<v-col :cols="10" >
|
||
<v-text-field v-model.number="print_search.year" min="1911" type="number" placeholder="年份必填" />
|
||
</v-col>
|
||
<v-col :cols="2" class="pt-5" v-if="print_conditions=='mm' " >
|
||
<span class="fs-6 text text-dark">月</span>
|
||
</v-col>
|
||
<v-col :cols="10" v-if="print_conditions=='mm' ">
|
||
<v-select
|
||
item-text="text"
|
||
item-value="val"
|
||
v-model="print_search.month"
|
||
:items="select_items.month"
|
||
eager
|
||
></v-select>
|
||
</v-col>
|
||
<v-col :cols="2" class="pt-5" v-if="print_conditions=='ss' ">
|
||
<span class="fs-6 text text-dark">季</span>
|
||
</v-col>
|
||
<v-col :cols="10" v-if="print_conditions=='ss' ">
|
||
<v-select
|
||
item-text="text"
|
||
item-value="val"
|
||
v-model="print_search.season"
|
||
:items="select_items.season"
|
||
eager
|
||
></v-select>
|
||
</v-col>
|
||
|
||
</v-row>
|
||
<v-row densee class="pt-3" >
|
||
<v-col :cols="2" class="pt-5" >
|
||
<span class="fs-6 text text-dark">活動 *</span>
|
||
</v-col>
|
||
<v-col :cols="10" class="pt-5" >
|
||
活動/非活動至少勾選一項
|
||
<v-checkbox
|
||
v-model="print_search.chk_noact"
|
||
:label="`非活動報名`"
|
||
></v-checkbox>
|
||
<v-checkbox
|
||
v-model="print_search.chk_hasact"
|
||
:label="`活動報名`"
|
||
@change="chk_hasact_change"
|
||
></v-checkbox>
|
||
<%-- <v-row densee class="pt-3" >
|
||
<v-col :cols="10" class="pt-5" > --%>
|
||
<div class="input-group mb-3 single-line d-none" data-search-control="search2" @click="print_search.chk_hasact && search_show(search_dialog.controls.search2)" :disabled="!print_search.chk_hasact">
|
||
<input class="form-control search-text" type="text" readonly
|
||
id="activity_num_txt" placeholder="可選擇單一活動(需先勾選活動報名)" value="" >
|
||
<input type="hidden" v-model="print_search.select_act" >
|
||
<button class="btn btn-outline-secondary" type="button">
|
||
<i class="mdi mdi-view-list-outline"></i>
|
||
</button>
|
||
</div>
|
||
<select class="form-select" v-model="print_search.select_act" :disabled="print_search.chk_hasact==false" >
|
||
<option value="">可選擇單一活動(需先勾選活動報名)</option>
|
||
<option v-for="item in select_act_list" :value="item.num">{{item.subject}}</option>
|
||
</select>
|
||
<%-- </v-col>
|
||
<v-col :cols="2" class="pt-5" >
|
||
<button type="button" class="btn btn-outline-success" @click="clear_select_act">清除</button>
|
||
</v-col>
|
||
</v-row>--%>
|
||
</v-col>
|
||
<%--<v-col :cols="2" class="pt-5" >
|
||
<span class="fs-6 text text-dark">報名項目</span>
|
||
</v-col>
|
||
<v-col :cols="10" class="pt-5" >
|
||
<v-row densee class="pt-3" >
|
||
<v-col :cols="10" class="pt-5" >
|
||
<div class="input-group mb-3 " data-search-control="search3" @click=" search_show(search_dialog.controls.search3)" >
|
||
<input class="form-control search-text" type="text" readonly
|
||
id="actItem_num_txt" value="" placeholder="請選擇報名項目" >
|
||
<input type="hidden" v-model="print_search.select_actitem" >
|
||
<button class="btn btn-outline-secondary" type="button">
|
||
<i class="mdi mdi-view-list-outline"></i>
|
||
</button>
|
||
</div>
|
||
</v-col>
|
||
<v-col :cols="2" class="pt-5" >
|
||
<button type="button" class="btn btn-outline-success" @click="clear_select_actitem">清除</button>
|
||
</v-col>
|
||
</v-row>
|
||
</v-col>--%>
|
||
</v-row>
|
||
<v-row>
|
||
<v-col>
|
||
<div v-if="print_error_msg" class="red--text mt-2 text-center" style="font-weight: bold;">
|
||
{{ print_error_msg }}
|
||
</div>
|
||
</v-col>
|
||
</v-row>
|
||
<v-row densee class="pt-3" >
|
||
<v-col :cols="12" class="pt-3 text-center" >
|
||
<v-btn class="ma-2" color="primary" dark @click="triggerManagementExport('print')" > 列印 </v-btn>
|
||
<v-btn class="ma-2" color="primary" dark @click="triggerManagementExport('excel')"> 匯出 Excel </v-btn>
|
||
<v-btn class="ma-2" color="green" dark @click="print_close" > 取消 </v-btn>
|
||
</v-col>
|
||
</v-row>
|
||
</v-card-text>
|
||
|
||
</v-card>
|
||
</v-dialog>
|
||
<v-dialog v-model="search_dialog.show" max-width="500px">
|
||
<v-card>
|
||
<v-card-title class="justify-space-between grey lighten-2">
|
||
查詢:{{search_dialog.current.title}}
|
||
<v-btn icon @click="search_dialog.show=false"><v-icon>mdi-close</v-icon></v-btn>
|
||
</v-card-title>
|
||
<v-card-text >
|
||
<v-row>
|
||
<v-col v-for="item in search_dialog.current.keys"
|
||
:cols="search_dialog.current.keys.length>1?6:12" >
|
||
<v-text-field v-model="item.value" :label="item.title" v-if="item.visible===undefined || item.visible==true "></v-text-field>
|
||
</v-col>
|
||
<v-col cols="12" class="text-end">
|
||
<v-btn color="primary" elevation="0" @click="search_get()">查詢</v-btn>
|
||
<v-btn elevation="0" @click="search_clear()">清除條件</v-btn>
|
||
</v-col>
|
||
</v-row>
|
||
<v-data-table
|
||
:headers="search_headers()"
|
||
:items="search_dialog.list"
|
||
:footer-props="search_dialog.footer"
|
||
:items-per-page="10"
|
||
:server-items-length="search_dialog.count"
|
||
:page.sync="search_dialog.page"
|
||
:options.sync="search_options"
|
||
@click:row="search_select"
|
||
></v-data-table>
|
||
</v-card-text>
|
||
<v-card-actions>
|
||
</v-card-actions>
|
||
</v-card>
|
||
</v-dialog>
|
||
</div>
|
||
<div id="print_data">
|
||
</div>
|
||
</asp:Content>
|
||
<asp:Content ID="Content4" ContentPlaceHolderID="offCanvasRight" runat="Server">
|
||
<div id="search_panel" alt="查詢公告資料">
|
||
<div class="mb-3">
|
||
<label class="form-label">報名活動</label>
|
||
<input type="text" v-model="search.subject" class="form-control" placeholder="可輸入關鍵字查詢" id="s_subject" runat="server">
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">姓名/名稱</label>
|
||
<input type="text" v-model="search.u_name" class="form-control" placeholder="可輸入關鍵字查詢" id="s_u_name" runat="server">
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">國籍</label>
|
||
<div class="input-group mb-3 d-none" data-search-control="search1" @click="search_show(search_dialog.controls.search1)">
|
||
<input class="form-control search-text" type="text" readonly
|
||
placeholder="請選擇國籍" value="" id="country_txt">
|
||
<input type="hidden" v-model="search.country" >
|
||
<button class="btn btn-outline-secondary" type="button">
|
||
<i class="mdi mdi-view-list-outline"></i>
|
||
</button>
|
||
</div>
|
||
<asp:DropDownList ID="s_country" runat="server" CssClass="form-select" v-model="search.country" >
|
||
<asp:ListItem Value="" Text="請選擇"></asp:ListItem>
|
||
</asp:DropDownList>
|
||
<select class="form-select" v-model="search.country2" @change="countryChange">
|
||
<option value="">請選擇</option>
|
||
<option value="0">全部</option>
|
||
<option value="1">台灣</option>
|
||
<option value="2">境外(非台灣)</option>
|
||
</select>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">介紹人</label>
|
||
<input type="text" v-model="search.introducerTxt" class="form-control" placeholder="可輸入關鍵字查詢" id="s_introducerTxt" runat="server">
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">單號</label>
|
||
<input type="text" v-model="search.order_no" class="form-control" placeholder="可輸入關鍵字查詢" id="s_order_no" runat="server">
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">品項</label>
|
||
<input type="text" v-model="search.actItemTxt" class="form-control" placeholder="可輸入關鍵字查詢" id="s_actItemTxt" runat="server">
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">單據狀態</label>
|
||
<asp:DropDownList ID="s_keyin1" runat="server" CssClass="form-select" v-model="search.keyin1" >
|
||
</asp:DropDownList>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">報名日期</label>
|
||
<div class="input-group">
|
||
<input type="date" v-model="search.up_time1" class="form-control" autocomplete="off" id="s_up_time1" runat="server">
|
||
<span class="input-group-text">~</span>
|
||
<input type="date" v-model="search.up_time2" class="form-control" autocomplete="off" id="s_up_time2" runat="server">
|
||
</div>
|
||
</div>
|
||
<div class="mb-3 p-2 border-top">
|
||
<a @click="btn_search" class="btn btn-outline-primary"><i class="mdi mdi-filter"></i> 搜尋</a>
|
||
<a class="btn btn-outline-secondary" @click="btn_all"><i class="mdi mdi-filter-remove"></i> 所有資料</a>
|
||
</div>
|
||
</div>
|
||
</asp:Content>
|
||
|