功能調整
This commit is contained in:
@@ -29,7 +29,7 @@
|
||||
</asp:ContentPlaceHolder>
|
||||
</head>
|
||||
<body id="PageBody" class="" runat="server">
|
||||
<form id="form1" runat="server" >
|
||||
<form id="form1" runat="server" onkeydown="if(event.keyCode==13&& event.target.tagName != 'TEXTAREA') return false;">
|
||||
<%-- ScriptManager 必需移除 --%>
|
||||
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
|
||||
<div id="app">
|
||||
|
||||
@@ -911,7 +911,7 @@
|
||||
async editTabletNew(item) {
|
||||
this.editedIndex = this.desserts.indexOf(item);
|
||||
this.editedItem = $.extend(true, {}, item);
|
||||
console.log("editTabletNew:",this.editedItem,item)
|
||||
//console.log("editTabletNew:",this.editedItem,item)
|
||||
try {
|
||||
//document.getElementById("tablet_edit_new_iframe").contentWindow.location.reload();
|
||||
// 如果是新項目，先保存
|
||||
@@ -921,7 +921,7 @@
|
||||
if (savedItem) {
|
||||
this.$set(this.desserts, this.editedIndex, savedItem);
|
||||
this.editedItem = $.extend(true, {}, savedItem);
|
||||
console.log("savedItem:", this.editedItem)
|
||||
//console.log("savedItem:", this.editedItem)
|
||||
}
|
||||
}
|
||||
// 先發送消息
|
||||
@@ -2179,10 +2179,10 @@
|
||||
<v-icon title="刪除" color="red" class="mr-2" @click="deleteItem(item)">
|
||||
mdi-delete
|
||||
</v-icon>
|
||||
<v-icon title="編輯牌位" color="blue" class="mr-2" @click="editTablet(item);">
|
||||
<%-- <v-icon title="編輯牌位" color="blue" class="mr-2" @click="editTablet(item);">
|
||||
mdi-file-document-edit-outline
|
||||
</v-icon>
|
||||
<v-icon title="編輯牌位New" color="blue" class="mr-2" @click="editTabletNew(item);">
|
||||
</v-icon> --%>
|
||||
<v-icon title="編輯牌位" color="blue" class="mr-2" @click="editTabletNew(item);">
|
||||
mdi-file-document-edit-outline
|
||||
</v-icon>
|
||||
<%--<v-icon title="列印" color="blue" class="mr-2" @click="printItem(item);" v-if="canPrint || lists.length==0" >
|
||||
|
||||
+447
-237
@@ -2,7 +2,7 @@
|
||||
|
||||
<%@ Register Src="~/admin/_uc/alert.ascx" TagPrefix="uc1" TagName="alert" %>
|
||||
<asp:Content ID="Content1" ContentPlaceHolderID="page_header" runat="Server">
|
||||
<style>
|
||||
<style scoped >
|
||||
.canvas-area {
|
||||
min-height: 100vw !important;
|
||||
}
|
||||
@@ -27,262 +27,408 @@
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
/* 全域 Chrome / Edge / Safari 捲軸優化 */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #ccc;
|
||||
border-radius: 3px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #999;
|
||||
}
|
||||
|
||||
/* 全域 Firefox 捲軸優化 */
|
||||
html, body, * {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #ccc #f1f1f1;
|
||||
}
|
||||
</style>
|
||||
</asp:Content>
|
||||
<asp:Content ID="Content2" ContentPlaceHolderID="page_nav" runat="Server">
|
||||
</asp:Content>
|
||||
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
|
||||
<div id="content" class="container-lg">
|
||||
|
||||
<div class="d-flex overflow-hidden" style="height: 1920px">
|
||||
<div class="p-2 text-white floting-box" style="width: 350px; left: 20px; top: 80px;">
|
||||
<%-- <h6 class="border-bottom pb-2">設計工具箱</h6>--%>
|
||||
<v-tabs
|
||||
v-model="tab"
|
||||
background-color="primary"
|
||||
icon-and-text
|
||||
dark
|
||||
vertical>
|
||||
<%--<v-tabs-slider></v-tabs-slider>--%>
|
||||
|
||||
<v-tabs
|
||||
v-model="tab"
|
||||
background-color="primary"
|
||||
centered
|
||||
dark
|
||||
icons-and-text>
|
||||
<v-tabs-slider></v-tabs-slider>
|
||||
<v-tab href="#版型">
|
||||
版型
|
||||
<v-icon left>mdi-book-open-outline</v-icon>
|
||||
</v-tab>
|
||||
|
||||
<v-tab href="#版型">
|
||||
版型
|
||||
<v-icon>mdi-book-open-outline</v-icon>
|
||||
</v-tab>
|
||||
<v-tab href="#內容尺寸">
|
||||
內容尺寸
|
||||
<v-icon left>mdi-bowl-mix-outline</v-icon>
|
||||
</v-tab>
|
||||
|
||||
<v-tab href="#內容尺寸">
|
||||
內容尺寸
|
||||
<v-icon>mdi-bowl-mix-outline</v-icon>
|
||||
</v-tab>
|
||||
<v-tab href="#列印尺寸">
|
||||
列印尺寸
|
||||
<v-icon left>mdi-dome-light</v-icon>
|
||||
</v-tab>
|
||||
<v-tab href="#列印模式">
|
||||
列印模式
|
||||
<v-icon left>mdi-weather-cloudy</v-icon>
|
||||
</v-tab>
|
||||
<v-tab href="#底圖">
|
||||
底圖
|
||||
<v-icon left>mdi-account-circle-outline</v-icon>
|
||||
</v-tab>
|
||||
<v-tab href="#牌位顯示項目">
|
||||
牌位顯示項目
|
||||
<v-icon left>mdi-flower</v-icon>
|
||||
</v-tab>
|
||||
<v-tab href="#存檔">
|
||||
存檔
|
||||
<v-icon left>mdi-flower</v-icon>
|
||||
</v-tab>
|
||||
|
||||
<v-tab href="#列印尺寸">
|
||||
列印尺寸
|
||||
<v-icon>mdi-dome-light</v-icon>
|
||||
</v-tab>
|
||||
<v-tab href="#列印模式">
|
||||
列印模式
|
||||
<v-icon>mdi-weather-cloudy</v-icon>
|
||||
</v-tab>
|
||||
<v-tab href="#底圖">
|
||||
底圖
|
||||
<v-icon>mdi-account-circle-outline</v-icon>
|
||||
</v-tab>
|
||||
<v-tab href="#牌位顯示項目">
|
||||
牌位顯示項目
|
||||
<v-icon>mdi-flower</v-icon>
|
||||
</v-tab>
|
||||
<v-tab href="#存檔">
|
||||
存檔
|
||||
<v-icon>mdi-flower</v-icon>
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
|
||||
<v-tabs-items v-model="tab">
|
||||
<v-tab-item
|
||||
value="版型">
|
||||
<v-card >
|
||||
<v-card-text>
|
||||
<!-- 使用 v-tabs 並設定 fixed-tabs 或 center-active -->
|
||||
<v-tab-item value="版型">
|
||||
<v-card flat height="504px" class="d-flex flex-column">
|
||||
<v-card-text class="overflow-y-auto flex-grow-1">
|
||||
<v-row>
|
||||
<v-col cols="12" class="pa-0">
|
||||
<v-tabs
|
||||
class="fixed-bottom-tabs w-100"
|
||||
bg-color="surface"
|
||||
color="primary"
|
||||
align-tabs="start"
|
||||
center-active
|
||||
show-arrows
|
||||
vertical
|
||||
v-resize="onTabsResize"
|
||||
>
|
||||
<v-tab
|
||||
v-for="item in allStyle"
|
||||
:key="item.styleID"
|
||||
:value="item.styleID"
|
||||
class="d-flex flex-column py-2"
|
||||
>
|
||||
<button
|
||||
tytpe="button"
|
||||
class="btn btn-info"
|
||||
@click.prevent="changeStyle(item.styleID)"
|
||||
@contextmenu.prevent="openStyleMenu($event,item.styleID)"
|
||||
>
|
||||
<span class="limit-text mt-1" :title="item.name">{{ item.name }}</span>
|
||||
</button>
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-menu
|
||||
absolute
|
||||
offset-y
|
||||
:position-x="styleMenuX"
|
||||
:position-y="styleMenuY"
|
||||
v-model="showStyleMenu"
|
||||
>
|
||||
<v-list>
|
||||
<v-list-item :key="showStyleMenu">
|
||||
<v-list-item-title>
|
||||
<button class="btn btn-primary" @click.prevent="removeStyle()">
|
||||
刪除
|
||||
</button>
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
<v-tab-item value="內容尺寸">
|
||||
<v-card flat height="504px" class="d-flex flex-column">
|
||||
<v-card-text class="overflow-y-auto flex-grow-1">
|
||||
<v-row>
|
||||
<v-col cols="12" class="pa-0">
|
||||
<v-col cols="12" class="pa-0">
|
||||
<v-tabs
|
||||
class="fixed-bottom-tabs w-100"
|
||||
bg-color="surface"
|
||||
color="primary"
|
||||
align-tabs="start"
|
||||
center-active
|
||||
show-arrows
|
||||
vertical
|
||||
v-resize="onTabsResize"
|
||||
>
|
||||
<v-tab key="000001" value="000001" class="d-flex flex-column py-2">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-info"
|
||||
@click.prevent="newPaperSize"
|
||||
>
|
||||
新增尺寸
|
||||
</button>
|
||||
</v-tab>
|
||||
<v-tab
|
||||
v-for="item in allSize"
|
||||
:key="item.id"
|
||||
:value="item.id"
|
||||
class="d-flex flex-column py-2"
|
||||
>
|
||||
<button
|
||||
tytpe="button"
|
||||
class="btn btn-info"
|
||||
@click.prevent="changePaper1(item)"
|
||||
@contextmenu.prevent="openPaperMenu($event,item.id)"
|
||||
>
|
||||
<span class="limit-text mt-1" :title="item.name">{{ item.name }}</span>
|
||||
</button>
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-menu
|
||||
absolute
|
||||
offset-y
|
||||
:position-x="paperMenuX"
|
||||
:position-y="paperMenuY"
|
||||
v-model="showPaperMenu"
|
||||
>
|
||||
<v-list>
|
||||
<v-list-item :key="showPaperMenu">
|
||||
<v-list-item-title>
|
||||
<button class="btn btn-primary" @click.prevent="removePaper()">
|
||||
刪除
|
||||
</button>
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
<v-tab-item value="列印尺寸">
|
||||
<v-card flat height="504px" class="d-flex flex-column">
|
||||
<v-card-text class="overflow-y-auto flex-grow-1">
|
||||
<v-row>
|
||||
<v-col cols="12" class="pa-0">
|
||||
<v-tabs
|
||||
class="fixed-bottom-tabs w-100"
|
||||
bg-color="surface"
|
||||
color="primary"
|
||||
align-tabs="start"
|
||||
center-active
|
||||
show-arrows
|
||||
vertical
|
||||
v-resize="onTabsResize"
|
||||
>
|
||||
<v-tab
|
||||
v-for="item in allSize"
|
||||
:key="item.id"
|
||||
:value="item.id"
|
||||
class="d-flex flex-column py-2"
|
||||
>
|
||||
<button
|
||||
tytpe="button"
|
||||
class="btn btn-info"
|
||||
@click.prevent="changePrintSize(item.id)"
|
||||
>
|
||||
<span class="limit-text mt-1" :title="item.name">{{ item.name }}</span>
|
||||
</button>
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
<v-tab-item value="列印模式">
|
||||
<v-card flat height="504px" class="d-flex flex-column">
|
||||
<v-card-text class="overflow-y-auto flex-grow-1">
|
||||
<v-tabs
|
||||
class="fixed-bottom-tabs w-100"
|
||||
bg-color="surface"
|
||||
color="primary"
|
||||
align-tabs="start"
|
||||
center-active
|
||||
show-arrows
|
||||
v-resize="onTabsResize"
|
||||
vertical
|
||||
>
|
||||
<v-tab v-for="item in allStyle" :key="item.styleID" :value="item.styleID" class="d-flex flex-column py-2">
|
||||
<button tytpe="button" class="btn btn-info" @click.prevent="changeStyle(item.styleID)"
|
||||
@contextmenu.prevent="openStyleMenu($event,item.styleID)">
|
||||
<span class=" limit-text mt-1">{{ item.name }}</span></button>
|
||||
|
||||
<v-tab key="combine" value="combine" class="d-flex flex-column py-2">
|
||||
<button
|
||||
tytpe="button"
|
||||
class="btn btn-info"
|
||||
@click.prevent="changePrintMode('combine')"
|
||||
>
|
||||
<span class="limit-text mt-1">合併</span>
|
||||
</button>
|
||||
</v-tab>
|
||||
<v-tab key="origin" value="origin" class="d-flex flex-column py-2">
|
||||
<button
|
||||
tytpe="button"
|
||||
class="btn btn-info"
|
||||
@click.prevent="changePrintMode('origin')"
|
||||
>
|
||||
<span class="limit-text mt-1">原尺寸</span>
|
||||
</button>
|
||||
</v-tab>
|
||||
|
||||
</v-tabs>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-menu
|
||||
absolute
|
||||
offset-y
|
||||
:position-x="styleMenuX"
|
||||
:position-y="styleMenuY"
|
||||
v-model="showStyleMenu"
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
<v-tab-item value="底圖">
|
||||
<v-card flat height="504px" class="d-flex flex-column">
|
||||
<v-card-text class="overflow-y-auto flex-grow-1">
|
||||
<v-tabs
|
||||
class="fixed-bottom-tabs w-100"
|
||||
bg-color="surface"
|
||||
color="primary"
|
||||
align-tabs="start"
|
||||
center-active
|
||||
vertical
|
||||
>
|
||||
<v-tab
|
||||
v-for="item in bg"
|
||||
:key="item.name"
|
||||
:value="item.name"
|
||||
class="d-flex flex-column py-2"
|
||||
>
|
||||
<button
|
||||
tytpe="button"
|
||||
class="btn btn-info"
|
||||
@click.prevent="changeBg(item)"
|
||||
>
|
||||
<v-list>
|
||||
<v-list-item
|
||||
:key="showStyleMenu">
|
||||
<v-list-item-title>
|
||||
<button class="btn btn-primary" @click.prevent="removeStyle()">刪除</button>
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
|
||||
<%--<ul class="dropdown-menu style-menu">
|
||||
</ul>--%>
|
||||
<span class="limit-text mt-1">{{ item.name }}</span>
|
||||
</button>
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
<v-tab-item
|
||||
value="內容尺寸">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<%--<div class="form-floating mb-3">--%>
|
||||
<v-row>
|
||||
<v-col cols="12" class="pa-0">
|
||||
<v-tabs
|
||||
class="fixed-bottom-tabs w-100"
|
||||
bg-color="surface"
|
||||
color="primary"
|
||||
align-tabs="start"
|
||||
center-active
|
||||
show-arrows
|
||||
v-resize="onTabsResize"
|
||||
>
|
||||
<v-tab key="000001" value="000001" class="d-flex flex-column py-2">
|
||||
<button type="button" class="btn btn-info" @click.prevent="newPaperSize">新增尺寸</button>
|
||||
</v-tab>
|
||||
<v-tab v-for="item in allSize" :key="item.id" :value="item.id" class="d-flex flex-column py-2">
|
||||
<button tytpe="button" class="btn btn-info" @click.prevent="changePaper1(item)"
|
||||
@contextmenu.prevent="openPaperMenu($event,item.id)"><span class=" limit-text mt-1">{{ item.name }}</span></button>
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-menu
|
||||
absolute
|
||||
offset-y
|
||||
:position-x="paperMenuX"
|
||||
:position-y="paperMenuY"
|
||||
v-model="showPaperMenu"
|
||||
>
|
||||
<v-list>
|
||||
<v-list-item
|
||||
:key="showPaperMenu">
|
||||
<v-list-item-title>
|
||||
<button class="btn btn-primary" @click.prevent="removePaper()">刪除</button>
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
<%--</div>--%>
|
||||
</v-card-text>
|
||||
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
<v-tab-item
|
||||
value="列印尺寸">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<v-col cols="12" class="pa-0">
|
||||
<v-tabs
|
||||
class="fixed-bottom-tabs w-100"
|
||||
bg-color="surface"
|
||||
color="primary"
|
||||
align-tabs="start"
|
||||
center-active
|
||||
show-arrows
|
||||
v-resize="onTabsResize"
|
||||
>
|
||||
<v-tab v-for="item in allSize" :key="item.id" :value="item.id" class="d-flex flex-column py-2">
|
||||
<button tytpe="button" class="btn btn-info" @click.prevent="changePrintSize(item.id)"><span class=" limit-text mt-1">{{ item.name }}</span></button>
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
<v-tab-item
|
||||
value="列印模式">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<v-tabs
|
||||
class="fixed-bottom-tabs w-100"
|
||||
bg-color="surface"
|
||||
color="primary"
|
||||
align-tabs="start"
|
||||
center-active
|
||||
>
|
||||
<v-tab key="combine" value="combine" class="d-flex flex-column py-2">
|
||||
<button tytpe="button" class="btn btn-info" @click.prevent="changePrintMode('combine')"><span class=" limit-text mt-1">合併</span></button>
|
||||
</v-tab>
|
||||
<v-tab key="origin" value="origin" class="d-flex flex-column py-2">
|
||||
<button tytpe="button" class="btn btn-info" @click.prevent="changePrintMode('origin')"><span class=" limit-text mt-1">原尺寸</span></button>
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
<v-tab-item
|
||||
value="底圖">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<v-tabs
|
||||
class="fixed-bottom-tabs w-100"
|
||||
bg-color="surface"
|
||||
color="primary"
|
||||
align-tabs="start"
|
||||
center-active
|
||||
>
|
||||
<v-tab v-for="item in bg" :key="item.name" :value="item.name" class="d-flex flex-column py-2">
|
||||
<button tytpe="button" class="btn btn-info" @click.prevent="changeBg(item)"><span class=" limit-text mt-1">{{ item.name }}</span></button>
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
<v-tab-item
|
||||
value="牌位顯示項目">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<v-tabs
|
||||
class="fixed-bottom-tabs w-100"
|
||||
bg-color="surface"
|
||||
color="primary"
|
||||
align-tabs="start"
|
||||
center-active
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
<v-tab-item value="牌位顯示項目">
|
||||
<v-card flat height="504px" class="d-flex flex-column">
|
||||
<v-card-text class="overflow-y-auto flex-grow-1">
|
||||
<v-tabs
|
||||
class="fixed-bottom-tabs w-100"
|
||||
bg-color="surface"
|
||||
color="primary"
|
||||
align-tabs="start"
|
||||
center-active
|
||||
vertical
|
||||
>
|
||||
<v-tab key="address" value="address" class="d-flex flex-column py-2">
|
||||
<button
|
||||
tytpe="button"
|
||||
class="btn btn-info"
|
||||
@click.prevent="displayItem('address')"
|
||||
>
|
||||
<v-tab key="address" value="address" class="d-flex flex-column py-2">
|
||||
<button tytpe="button" class="btn btn-info" @click.prevent="displayItem('address')"><span class=" limit-text mt-1">地址欄</span></button>
|
||||
</v-tab>
|
||||
<v-tab key="title1" value="title1" class="d-flex flex-column py-2">
|
||||
<button tytpe="button" class="btn btn-info" @click.prevent="displayItem('title1')"><span class=" limit-text mt-1">牌位正名</span></button>
|
||||
</v-tab>
|
||||
<v-tab key="lefttitle" value="lefttitle" class="d-flex flex-column py-2">
|
||||
<button tytpe="button" class="btn btn-info" @click.prevent="displayItem('lefttitle')"><span class=" limit-text mt-1">左正名</span></button>
|
||||
</v-tab>
|
||||
<v-tab key="righttitle" value="righttitle" class="d-flex flex-column py-2">
|
||||
<button tytpe="button" class="btn btn-info" @click.prevent="displayItem('righttitle')"><span class=" limit-text mt-1">右正名</span></button>
|
||||
</v-tab>
|
||||
<v-tab key="titletriangle" value="titletriangle" class="d-flex flex-column py-2">
|
||||
<button tytpe="button" class="btn btn-info" @click.prevent="displayItem('titletriangle')"><span class=" limit-text mt-1">品字名單</span></button>
|
||||
</v-tab>
|
||||
<v-tab key="combined" value="combined" class="d-flex flex-column py-2">
|
||||
<button tytpe="button" class="btn btn-info" @click.prevent="displayItem('combined')"><span class=" limit-text mt-1">雙姓合併置中</span></button>
|
||||
</v-tab>
|
||||
<v-tab key="alive" value="alive" class="d-flex flex-column py-2">
|
||||
<button tytpe="button" class="btn btn-info" @click.prevent="displayItem('alive')"><span class=" limit-text mt-1">陽上報恩</span></button>
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
<span class="limit-text mt-1">地址欄</span>
|
||||
</button>
|
||||
</v-tab>
|
||||
<v-tab key="title1" value="title1" class="d-flex flex-column py-2">
|
||||
<button
|
||||
tytpe="button"
|
||||
class="btn btn-info"
|
||||
@click.prevent="displayItem('title1')"
|
||||
>
|
||||
<span class="limit-text mt-1">牌位正名</span>
|
||||
</button>
|
||||
</v-tab>
|
||||
<v-tab
|
||||
key="lefttitle"
|
||||
value="lefttitle"
|
||||
class="d-flex flex-column py-2"
|
||||
>
|
||||
<button
|
||||
tytpe="button"
|
||||
class="btn btn-info"
|
||||
@click.prevent="displayItem('lefttitle')"
|
||||
>
|
||||
<span class="limit-text mt-1">左正名</span>
|
||||
</button>
|
||||
</v-tab>
|
||||
<v-tab
|
||||
key="righttitle"
|
||||
value="righttitle"
|
||||
class="d-flex flex-column py-2"
|
||||
>
|
||||
<button
|
||||
tytpe="button"
|
||||
class="btn btn-info"
|
||||
@click.prevent="displayItem('righttitle')"
|
||||
>
|
||||
<span class="limit-text mt-1">右正名</span>
|
||||
</button>
|
||||
</v-tab>
|
||||
<v-tab
|
||||
key="titletriangle"
|
||||
value="titletriangle"
|
||||
class="d-flex flex-column py-2"
|
||||
>
|
||||
<button
|
||||
tytpe="button"
|
||||
class="btn btn-info"
|
||||
@click.prevent="displayItem('titletriangle')"
|
||||
>
|
||||
<span class="limit-text mt-1">品字名單</span>
|
||||
</button>
|
||||
</v-tab>
|
||||
<v-tab key="combined" value="combined" class="d-flex flex-column py-2">
|
||||
<button
|
||||
tytpe="button"
|
||||
class="btn btn-info"
|
||||
@click.prevent="displayItem('combined')"
|
||||
>
|
||||
<span class="limit-text mt-1">雙姓合併置中</span>
|
||||
</button>
|
||||
</v-tab>
|
||||
<v-tab key="alive" value="alive" class="d-flex flex-column py-2">
|
||||
<button
|
||||
tytpe="button"
|
||||
class="btn btn-info"
|
||||
@click.prevent="displayItem('alive')"
|
||||
>
|
||||
<span class="limit-text mt-1">陽上報恩</span>
|
||||
</button>
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
<v-tab-item
|
||||
value="存檔">
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<span class="btn btn-sm btn-outline-info w-100 mb-2" @click.prevent="saveStyle">存檔</span>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
</v-tabs-items>
|
||||
</div>
|
||||
<div class="d-flex overflow-hidden" style="height: 1920px">
|
||||
<div class="p-2 text-white floting-box" style="width: 250px; left: 20px; top: 80px;">
|
||||
<%-- <h6 class="border-bottom pb-2">設計工具箱</h6>--%>
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
<v-tab-item value="存檔">
|
||||
<v-card flat height="504px" class="d-flex flex-column">
|
||||
<v-card-text class="overflow-y-auto flex-grow-1">
|
||||
<span
|
||||
class="btn btn-sm btn-outline-info w-100 mb-2"
|
||||
@click.prevent="saveStyle"
|
||||
>存檔</span
|
||||
>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
</v-tabs>
|
||||
<!-- 原生縮放橫軸容器 -->
|
||||
<div style="display: flex; align-items: center; padding: 8px; background-color: #f5f5f5; border-radius: 4px; margin-bottom: 12px; font-family: sans-serif;">
|
||||
<span style="margin-right: 8px; font-size: 14px; cursor:pointer" @click.prevent="minusZoomScalee">➖</span>
|
||||
|
||||
<!-- 使用 input type="range"，綁定 zoomScale -->
|
||||
<!-- min="0.2" (20%), max="1.5" (150%), step="0.05" (每次滑動5%) -->
|
||||
<input type="range"
|
||||
v-model="zoomScale"
|
||||
min="0.0"
|
||||
max="1.0"
|
||||
step="0.05"
|
||||
style="flex-grow: 1; cursor: pointer;" id="scaleSlider">
|
||||
|
||||
<span style="margin-left: 8px; font-size: 14px; cursor:pointer" @click.prevent="plusZoomScalee">➕</span>
|
||||
<!-- 顯示百分比數值 -->
|
||||
<span id="scaleSize" style="color:black;margin-left: 12px; min-width: 45px; font-weight: bold; font-size: 14px; text-align: right;">
|
||||
{{ scaleSize }}%
|
||||
</span>
|
||||
</div>
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
型版屬性
|
||||
@@ -457,6 +603,8 @@
|
||||
vuetify: new Vuetify(vuetify_options),
|
||||
data() {
|
||||
return {
|
||||
zoomScale: 0.5,
|
||||
scaleSize: 50,
|
||||
snackbar: {
|
||||
show: false,
|
||||
text: "",
|
||||
@@ -516,7 +664,26 @@
|
||||
mounted() {
|
||||
this.init()
|
||||
},
|
||||
watch: {
|
||||
zoomScale: {
|
||||
handler() {
|
||||
this.scaleSize =Math.floor( Number(this.zoomScale)*100)
|
||||
$(".tablet-paper").css({ transform: `scale(${this.zoomScale})` });
|
||||
},
|
||||
deep: true,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
minusZoomScalee() {
|
||||
this.zoomScale = Number(this.zoomScale) -0.05
|
||||
//this.scaleSize = this.scaleSize - 5
|
||||
//$(".tablet-paper").css({ transform:`scale(${this.zoomScale})` });
|
||||
},
|
||||
plusZoomScalee() {
|
||||
this.zoomScale = Number(this.zoomScale) + 0.05
|
||||
//this.scaleSize = this.scaleSize + 5
|
||||
//$(".tablet-paper").css({ transform: `scale(${this.zoomScale})` });
|
||||
},
|
||||
onTabsResize(e) {
|
||||
//console.log(e)
|
||||
// 當畫面變動時，呼叫 Vuetify 內部的呼叫方法重新計算寬度
|
||||
@@ -745,11 +912,15 @@
|
||||
let size = this.allSize.find(x => x.name == paperSize)
|
||||
this.paper.width = this.orientation == "portrait" ? size.width : size.height;
|
||||
this.paper.height = this.orientation == "portrait" ? size.height : size.width;
|
||||
|
||||
|
||||
$(".tablet-paper").css({
|
||||
"background-color": "white",
|
||||
width: this.paper.width + "mm",
|
||||
height: this.paper.height + "mm",
|
||||
"background-repeat": "no-repeat!important",
|
||||
transform: `scale(${this.zoomScale})`, /* 縮小為 50% (改為 0.8 就是 80%，依此類推) */
|
||||
"transform-origin": "top left", /* 確保縮放的基準點在左上角，防止縮放後位移 */
|
||||
});
|
||||
},
|
||||
async getPaperSize() {
|
||||
@@ -778,6 +949,7 @@
|
||||
},
|
||||
async getElements() {
|
||||
let self = this
|
||||
self.tabletElements.length=0
|
||||
await axios
|
||||
.post(HTTP_HOST + 'api/tablet/GetTabletElement', {})
|
||||
.then(response => {
|
||||
@@ -795,7 +967,7 @@
|
||||
},
|
||||
async getStyles() {
|
||||
let self = this
|
||||
self.allSize.length = 0
|
||||
self.allStyle.length = 0
|
||||
// $(".style-menu").html("")
|
||||
await axios
|
||||
.post(HTTP_HOST + 'api/tablet/GetStyleData', {})
|
||||
@@ -841,11 +1013,19 @@
|
||||
});
|
||||
},
|
||||
async changeStyle(id) {//切換版型，抓回明細
|
||||
if (this.allSize.length === 0) {
|
||||
this.snackbar.text = "請先至少設定一種尺寸"
|
||||
this.snackbar.show = true
|
||||
return
|
||||
}
|
||||
let self = this;
|
||||
this.elements.length = 0;
|
||||
let obj = this.elements
|
||||
let s = this.allStyle.find(x => x.styleID == id)
|
||||
let size = this.allSize.find(x => x.id == s.paperSize)
|
||||
if (size == null || size == undefined) {
|
||||
size = this.allSize[0]
|
||||
}
|
||||
this.paper.width = size.width;
|
||||
this.paper.height = size.height;
|
||||
this.rosterLimit = s.rosterLimit;
|
||||
@@ -865,10 +1045,18 @@
|
||||
//$("#perpage").val(s.printPageCount);
|
||||
//$("#rosterLimit").val(s.rosterLimit);
|
||||
let img = this.bg.find(x => x.name == s.backendImg);
|
||||
//let scaleSize = 1
|
||||
//let documentHeight = document.documentElement.scrollHeight;
|
||||
//if ((Number(this.paper.height) / 0.265) >= (Number(documentHeight) * 0.8)) {
|
||||
// scaleSize = (Number(documentHeight) * 0.8)/(Number(this.paper.height) / 0.265)
|
||||
//}
|
||||
console.log(scaleSize)
|
||||
$(".tablet-paper").css({
|
||||
'background-image': 'url(' + (img ? img.path : "") + ')', 'background-size': '100% 100%',
|
||||
width: (size ? size.width : self.paper.width) + "mm",
|
||||
height: (size ? size.height : self.paper.height) + "mm",
|
||||
transform: `scale(${this.zoomScale})`, /* 縮小為 50% (改為 0.8 就是 80%，依此類推) */
|
||||
"transform-origin": "top left", /* 確保縮放的基準點在左上角，防止縮放後位移 */
|
||||
})
|
||||
await axios
|
||||
.post(HTTP_HOST + 'api/tablet/GetStyleDetailData', { styleID: id })
|
||||
@@ -944,10 +1132,17 @@
|
||||
// console.log("paperSize:", paperSize);
|
||||
$("#sizeDiv").attr("style", "display:none;");
|
||||
let size = this.allSize.find(x => x.id == paperSize)
|
||||
//let scaleSize = 1
|
||||
//let documentHeight = document.documentElement.scrollHeight;
|
||||
//if ((Number(size.height) / 0.265) >= (Number(documentHeight) * 0.8)) {
|
||||
// scaleSize = (Number(documentHeight) * 0.8) / (Number(size.height) / 0.265)
|
||||
//}
|
||||
$(".tablet-paper").css({
|
||||
"background-color": "white",
|
||||
width: (size ? size.width : self.paper.width) + "mm",
|
||||
height: (size ? size.height : self.paper.height) + "mm",
|
||||
transform: `scale(${this.zoomScale})`, /* 縮小為 50% (改為 0.8 就是 80%，依此類推) */
|
||||
"transform-origin": "top left", /* 確保縮放的基準點在左上角，防止縮放後位移 */
|
||||
});
|
||||
}
|
||||
},
|
||||
@@ -962,6 +1157,7 @@
|
||||
return false
|
||||
}
|
||||
let ps = { paperSize: paperSize }
|
||||
self.removeDialog=false
|
||||
await axios
|
||||
.post(HTTP_HOST + 'api/tablet/DelPaperSize', ps)
|
||||
.then(response => {
|
||||
@@ -991,6 +1187,7 @@
|
||||
let self = this;
|
||||
let sID = this.removeStyleID;
|
||||
//console.log("styleID:", sID);
|
||||
self.removeDialog = false;
|
||||
if (sID == "000001" || sID == null || sID == undefined) {
|
||||
this.snackbar.text = "請選擇要刪除的版型"
|
||||
this.snackbar.show = true
|
||||
@@ -1004,6 +1201,7 @@
|
||||
$("#toast_body").html(`${response.data.message}`)
|
||||
self.toast.show();
|
||||
if (response.data.result == "Y") {
|
||||
|
||||
self.getStyles()
|
||||
}
|
||||
}
|
||||
@@ -1035,7 +1233,7 @@
|
||||
self.toast.show();
|
||||
self.getPaperSize()
|
||||
//$("#paperSize").val("")
|
||||
self.paperSize=""
|
||||
self.paperSize = self.allSize.length>0?self.allSize[0].id:""
|
||||
self.changePaper()
|
||||
self.paperDialog = false
|
||||
self.newPaper.paperName = ""
|
||||
@@ -1092,6 +1290,11 @@
|
||||
|
||||
let style = this.allStyle.find(x => x.styleID == this.styleID);
|
||||
let size = this.allSize.find(x => x.id == style.paperSize);
|
||||
//let scaleSize = 1
|
||||
//let documentHeight = document.documentElement.scrollHeight;
|
||||
//if ((Number(size.height) / 0.265) >= (Number(documentHeight) * 0.8)) {
|
||||
// scaleSize = (Number(documentHeight) * 0.8) / (Number(size.height) / 0.265)
|
||||
//}
|
||||
//console.log(this.paper, size);
|
||||
//for (let p = 0; p < pages; p++) {
|
||||
// const $paper = $('<div class="tablet-paper"></div>')
|
||||
@@ -1100,7 +1303,9 @@
|
||||
"background-color": "white",
|
||||
width: (size ? size.width : this.paper.width) + 'mm',
|
||||
height: (size ? size.height : this.paper.height) + 'mm',
|
||||
position: "absolute"
|
||||
position: "absolute",
|
||||
transform: `scale(${this.zoomScale})`, /* 縮小為 50% (改為 0.8 就是 80%，依此類推) */
|
||||
"transform-origin": "top left", /* 確保縮放的基準點在左上角，防止縮放後位移 */
|
||||
});
|
||||
//const slice = names.slice(p * this.rosterLimit, (p + 1) * this.rosterLimit);
|
||||
//const roster = this.elements.find(e => e.id === this.styleID);
|
||||
@@ -1541,6 +1746,11 @@
|
||||
if (sID == "000001") {
|
||||
this.styleID = ""
|
||||
}
|
||||
if (this.styleName === "新增版型") {
|
||||
this.snackbar.text = "請輸入新的版型名稱"
|
||||
this.snackbar.show = true
|
||||
return
|
||||
}
|
||||
let master = {
|
||||
styleID: this.styleID, styleName: this.styleName, paperSize: this.paperSize,//$("#paperSize").val(),
|
||||
backendImg: this.backendInp, printSize: this.printSize, printMode: this.printMode,
|
||||
|
||||
@@ -22,8 +22,10 @@
|
||||
}
|
||||
|
||||
.work_space {
|
||||
min-height: 80vh;
|
||||
min-width: 80vw;
|
||||
min-height: 40vh;
|
||||
min-width: 70vw;
|
||||
max-width: 90vw;
|
||||
max-height: 50vh;
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -39,8 +41,8 @@
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="d-flex full-home no-print" style="height: 100%;width:100%;">
|
||||
<div id="designArea" class="designArea" style="width: auto; height: auto">
|
||||
<div class="d-flex full-home no-print" style="height: 100vh;width:100%;">
|
||||
<div id="designArea" class="designArea" style="width: 100%; height: auto">
|
||||
<div class="row mt-2">
|
||||
<div class="col-3">
|
||||
版型設定:
|
||||
@@ -52,13 +54,34 @@
|
||||
<div class="col-2">
|
||||
<button class="btn btn-primary" onclick="designer.save(event)">儲存牌位</button>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<!-- 原生縮放橫軸容器 -->
|
||||
<div style="display: flex; align-items: center; padding: 8px; background-color: #f5f5f5; border-radius: 4px; margin-bottom: 12px; font-family: sans-serif;">
|
||||
<span style="margin-right: 8px; font-size: 14px;" onclick="designer.minusZoomScalee()">➖</span>
|
||||
|
||||
<!-- 使用 input type="range"，綁定 zoomScale -->
|
||||
<!-- min="0.2" (20%), max="1.5" (150%), step="0.05" (每次滑動5%) -->
|
||||
<input type="range"
|
||||
v-model="designer.zoomScale"
|
||||
min="0.0"
|
||||
max="1.0"
|
||||
step="0.05"
|
||||
style="flex-grow: 1; cursor: pointer;" id="scaleSlider">
|
||||
|
||||
<span style="margin-left: 8px; font-size: 14px;" onclick="designer.plusZoomScalee()">➕</span>
|
||||
<!-- 顯示百分比數值 -->
|
||||
<span id="scaleSize" style="margin-left: 12px; min-width: 45px; font-weight: bold; font-size: 14px; text-align: right;">
|
||||
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row work_space">
|
||||
<div class="col-8 div_border printArea"></div>
|
||||
<div class="col-4 div_border" style="font-size:12px;">
|
||||
<div class="row" style="height: 50%; overflow: auto;">
|
||||
<div class="col-7 div_border printArea" style="height:80vh;overflow-y:auto;"></div>
|
||||
<div class="col-5 div_border" style="font-size:12px;">
|
||||
<div class="row" style="height: 50%; overflow-y: auto;">
|
||||
<div style="display:inline-block;width:100%;height:30px;background-color:darkgray;">
|
||||
<div class="row">
|
||||
<div class="row" >
|
||||
<div class="col-12">
|
||||
<h3>已選</h3>
|
||||
</div>
|
||||
@@ -75,11 +98,10 @@
|
||||
<ul class="selectedItem" style="margin-left:1rem;margin-right:1rem;">
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row" style="height: 50%; overflow: auto;">
|
||||
<div class="row" style="height:50%;overflow-y:auto;">
|
||||
<div style="display:inline-block;width:100%;height:30px;background-color:darkgray;">
|
||||
<div class="row">
|
||||
<div class="row" >
|
||||
<div class="col-12">
|
||||
<h3>可選</h3>
|
||||
</div>
|
||||
@@ -165,6 +187,7 @@
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
const designer = {
|
||||
zoomScale:1,
|
||||
code: {
|
||||
style: []
|
||||
},
|
||||
@@ -228,8 +251,28 @@
|
||||
this.toast = new bootstrap.Toast($('#liveToast'));
|
||||
this.modal = new bootstrap.Modal($('#familyModal'));
|
||||
//this.toast.show();
|
||||
$("#scaleSize").html((this.zoomScale * 100) + "%")
|
||||
$("#scaleSlider").val(this.zoomScale)
|
||||
$("#scaleSlider").on("change", function () {
|
||||
this.zoomScale = $(this).val()
|
||||
$("#scaleSize").html(Math.floor(Number($(this).val()) * 100) + "%");
|
||||
$(".tablet-paper").css("transform",`scale(${Number($(this).val())})`);
|
||||
})
|
||||
},
|
||||
async minusZoomScalee() {
|
||||
this.zoomScale = this.zoomScale - 0.05
|
||||
$("#scaleSize").html(Math.floor(this.zoomScale * 100) + "%")
|
||||
$("#scaleSlider").val(this.zoomScale)
|
||||
$(".tablet-paper").css("transform", `scale(${Number(this.zoomScale)})`);
|
||||
},
|
||||
async plusZoomScalee() {
|
||||
this.zoomScale = this.zoomScale + 0.05
|
||||
$("#scaleSize").html(Math.floor(this.zoomScale * 100) + "%")
|
||||
$("#scaleSlider").val(this.zoomScale)
|
||||
$(".tablet-paper").css("transform", `scale(${Number(this.zoomScale)})`);
|
||||
}, //加撈activity_relating的資料，用來判斷是否有人數上限 activity_num actItem_num
|
||||
async getActItem() {
|
||||
//console.log(this.tabletItem.has_chao_limit, this.tabletItem.has_yang_limit, this.tabletItem.chao_limit_count, this.tabletItem.yang_limit_count)
|
||||
axios
|
||||
.post('/api/tablet/GetActItem', { itemNum: this.actitem })
|
||||
.then(response => {
|
||||
@@ -241,8 +284,6 @@
|
||||
this.selectStyle.style = response.data.data.defaultStyle;
|
||||
//console.log("GetActItem:",this.defaultStyle)
|
||||
$("#styleSel").val(this.defaultStyle);
|
||||
|
||||
//this.getStyle();
|
||||
}
|
||||
}
|
||||
);
|
||||
@@ -274,17 +315,9 @@
|
||||
if (response.status == "200") {
|
||||
let data = response.data;
|
||||
this.allSize = data.data;
|
||||
//console.log(this.allSize);
|
||||
//if (this.allSize) {
|
||||
// this.allSize.forEach(x => {
|
||||
// $("#paperSizeSel").append(`<option value="${x.paperID}">${x.paperName}</option>`);
|
||||
// })
|
||||
|
||||
//}
|
||||
}
|
||||
//$("#paperSizeSel").val("0003");
|
||||
}
|
||||
)
|
||||
})
|
||||
},
|
||||
async getTabletElement() {
|
||||
this.tabletElement.length = 0;
|
||||
@@ -327,6 +360,8 @@
|
||||
let param = [];
|
||||
let self = this;
|
||||
param.push({ order_no: this.tabletItem.order_no, num: this.tabletItem.num })
|
||||
|
||||
|
||||
await axios
|
||||
.post('/api/orderdetail/GetDetailToPrint', { param: param })
|
||||
.then(response => {
|
||||
@@ -440,8 +475,13 @@
|
||||
let pageSize = self.allSize.find(y => y.paperID == style.paperSize);
|
||||
//包含空白用來折的尺寸
|
||||
let printSize = self.allSize.find(y => y.paperID == style.printSize);
|
||||
|
||||
tabletpaper = $(` <div class="tablet-paper"></div>`)
|
||||
//let scaleSize = 1
|
||||
//let documentHeight = document.documentElement.scrollHeight;
|
||||
//if ((Number(pageSize.height) / 0.265) >= (Number(documentHeight) * 0.8)) {
|
||||
// scaleSize = (Number(documentHeight) * 0.8) / (Number(pageSize.height) / 0.265)
|
||||
//}
|
||||
//$("#scaleSize").html((scaleSize * 100) + "%")
|
||||
tabletpaper = $(` <div class="tablet-paper" style="transform-origin:top left;transform:scale(${this.zoomScale})"></div>`)
|
||||
let img = self.bg.find(y => y.name == style.backendImg);
|
||||
let details = this.allStyleDetails.filter(y => y.styleID == style.styleID);
|
||||
let ancestorFontSize = 16;
|
||||
@@ -1049,8 +1089,15 @@
|
||||
$(".itemAppend").on("click", function (e) {
|
||||
let curr = $(e.currentTarget.parentElement).find(".unselect").first();
|
||||
let target = self.familyMembers.find(x => x.fam_name == curr.text());
|
||||
if (target) {
|
||||
if (target) {//liveList nameList rosterList 要判斷yang_limit_count chao_limit_count
|
||||
if ($(self.selectedElement).children().first().hasClass("liveList")) {
|
||||
if (self.tabletItem.has_yang_limit && self.tabletItem.yang_limit_count > 0) {
|
||||
if (self.alive.length + 1 > self.tabletItem.yang_limit_count) {
|
||||
$("#toast_body").html(`陽上人數不得超過${self.tabletItem.yang_limit_count}人`)
|
||||
self.toast.show();
|
||||
return
|
||||
}
|
||||
}
|
||||
self.alive.push(target.fam_name);
|
||||
let obj = {
|
||||
IsShuWen: false,
|
||||
@@ -1065,6 +1112,14 @@
|
||||
self.family_deceased_Y_selected.push(obj);
|
||||
} else if ($(self.selectedElement).children().first().hasClass("nameList") ||
|
||||
$(self.selectedElement).children().first().hasClass("rosterList")) {
|
||||
|
||||
if (self.tabletItem.has_chao_limit && self.tabletItem.chao_limit_count > 0) {
|
||||
if (self.properTitle.length + 1 > self.tabletItem.chao_limit_count) {
|
||||
$("#toast_body").html(`祈福或超渡人數不得超過${self.tabletItem.chao_limit_count}人`)
|
||||
self.toast.show();
|
||||
return
|
||||
}
|
||||
}
|
||||
self.properTitle.push(target.fam_name);
|
||||
|
||||
let obj = {
|
||||
@@ -1779,10 +1834,12 @@
|
||||
//designer.reset();
|
||||
let e = event.originalEvent;
|
||||
//console.log("QOO");
|
||||
//console.log("傳過來了");
|
||||
if (e.origin === window.parent.location.origin) {
|
||||
//console.log('editor.html - origin check passed');
|
||||
//console.log('editor.html - received data:', event.data);
|
||||
const receivedData = e.data;
|
||||
// console.log("receivedData:", receivedData)
|
||||
designer.family_deceased_Y_selected = [];
|
||||
designer.family_deceased_N_selected = [];
|
||||
designer.family_left_title = [];
|
||||
|
||||
+216
-10
@@ -6,16 +6,58 @@
|
||||
<asp:Content ID="Content3" ContentPlaceHolderID="page_nav" runat="Server">
|
||||
<div class="mb-2 mb-sm-0">
|
||||
<label>請選擇需要預覽的活動</label>
|
||||
<select class="form-select" v-model="selected_activity">
|
||||
<div class="input-group mb-3" data-search-control="search2" @click="search_show(search_dialog.controls.search2)">
|
||||
<input class="form-control search-text" type="text" readonly
|
||||
id="activity_txt" runat="server" placeholder="活動(法會)" value="">
|
||||
<asp:HiddenField ID="activity" runat="server" Value="" />
|
||||
<button class="btn btn-outline-secondary" type="button">
|
||||
<i class="mdi mdi-view-list-outline"></i>
|
||||
</button>
|
||||
</div>
|
||||
<%-- <select class="form-select" v-model="selected_activity">
|
||||
<option value="-1">請選擇活動</option>
|
||||
<option v-for="item in activity_list" :key="item.activity_num" :value="item.num">
|
||||
{{item.subject}}
|
||||
</option>
|
||||
</select>
|
||||
</select>--%>
|
||||
</div>
|
||||
<div>
|
||||
<a @click="yulan_print" class="btn btn-primary">列印預覽牌位</a>
|
||||
</div>
|
||||
|
||||
<v-dialog v-model="search_dialog.show" max-width="700px">
|
||||
<v-card>
|
||||
<v-card-title class="justify-space-between grey lighten-2">
|
||||
查詢:{{search_dialog.current.title}}
|
||||
<v-btn icon @click="search_dialog.show=false; search_dialog.page = 1;"><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="options"
|
||||
@click:row="search_select"
|
||||
:loading="search_dialog.loading"
|
||||
></v-data-table>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</asp:Content>
|
||||
|
||||
<asp:Content ID="Script_Content" ContentPlaceHolderID="footer_script" runat="server">
|
||||
@@ -29,6 +71,7 @@
|
||||
data() {
|
||||
return {
|
||||
activity_list: [],
|
||||
options: {},
|
||||
order_data: {
|
||||
loading: false,
|
||||
list: [],
|
||||
@@ -40,12 +83,49 @@
|
||||
{ text: '報名日期', value: 'up_time' },
|
||||
{ text: '報名活動', value: 'subject', align: 'start' },
|
||||
{ text: '單據狀態', value: 'keyin1_txt' },
|
||||
{ text: '牌位数量', value: 'detail' },
|
||||
{ text: '报名项目', value: 'slot_type' },
|
||||
{ text: '牌位数量', value: 'detail.count' },
|
||||
|
||||
{ text: '預覽', value: 'print'}
|
||||
],
|
||||
|
||||
},
|
||||
search_dialog: {
|
||||
controls: {
|
||||
search2: {
|
||||
id: 'search2',
|
||||
title: '活動(法會)',
|
||||
text_prop: 'subject',
|
||||
value_prop: 'num',
|
||||
keys: [
|
||||
{ id: 'num', title: '編號', value: '' },
|
||||
{ id: 'subject', title: '活動(法會)名稱', value: '' },
|
||||
],
|
||||
api_url: HTTP_HOST + 'api/activity/GetList',
|
||||
columns: [
|
||||
{ id: 'num', title: '編號' },
|
||||
{ id: 'subject', title: '活動(法會)名稱' },
|
||||
],
|
||||
selected: {},
|
||||
select(item, t) {
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
},
|
||||
show: false,
|
||||
current: {},
|
||||
list: [],
|
||||
count: 0,
|
||||
page: 1,
|
||||
loading: false,
|
||||
footer: {
|
||||
showFirstLastPage: true,
|
||||
disableItemsPerPage: true,
|
||||
itemsPerPageAllText: '',
|
||||
itemsPerPageText: '',
|
||||
//'items-per-page-options': [10, 20, 30, 40, 50, 100]
|
||||
},
|
||||
},
|
||||
selected_activity: '-1',
|
||||
search: {
|
||||
kind: 0,
|
||||
@@ -118,11 +198,142 @@
|
||||
form.submit();
|
||||
document.body.removeChild(form);
|
||||
},
|
||||
search_show(curr) {
|
||||
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.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;
|
||||
});
|
||||
if (this.search_dialog.current.id == 'search5') {
|
||||
search['num'] = this.activity_id;
|
||||
}
|
||||
if (this.search_dialog.current.id == 'search4') {
|
||||
search['num'] = this.follower_id;
|
||||
}
|
||||
if (this.search_dialog.current.id == 'search6') {
|
||||
search['num'] = this.follower_id;
|
||||
}
|
||||
if (this.search_dialog.current.id == 'search7' || this.search_dialog.current.id == 'search8') {
|
||||
search['num'] = this.follower_id;
|
||||
}
|
||||
//console.log("search_get", api_url, search, params, this.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) => {
|
||||
//console.log("search_headers:", t, i);
|
||||
r.push({
|
||||
text: t.title,
|
||||
width: t.width,
|
||||
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;
|
||||
//牌位
|
||||
if (curr.id == 'search7') {
|
||||
this.editedItem.f_num_tablet = curr.selected[curr.text_prop];
|
||||
} else if (curr.id == 'search8') {
|
||||
this.editedItem.from_id_tablet = curr.selected[curr.text_prop];
|
||||
} else {
|
||||
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(this.editedItem, row);
|
||||
}
|
||||
this.search_dialog.show = false;
|
||||
this.search_dialog.page = 1;
|
||||
this.selected_activity = row.num
|
||||
//this.get_activity()
|
||||
//console.log(row, row["u_name"], row["f_number"], curr.id, target);
|
||||
},
|
||||
|
||||
//get_activity() {
|
||||
// const params = {
|
||||
// page: 1, pageSize: 1000
|
||||
// };
|
||||
// let curr = this.search_dialog.current;
|
||||
// let target = $(`[data-search-control=${curr.id}]`)
|
||||
// this.search = { num: target.children("input:hidden").val() }
|
||||
// this.order_data.loading = true
|
||||
// axios
|
||||
// .post(HTTP_HOST + 'api/activity/GetActRelaList', this.search, { params: params })
|
||||
// .then(response => {
|
||||
// let dd=response.data
|
||||
// this.order_data.list = dd.list
|
||||
|
||||
// this.order_data.list.forEach(val => {
|
||||
|
||||
// val.files.forEach(y => {
|
||||
// y.list.forEach(z => {
|
||||
|
||||
// if (z.printed_files!=null && z.printed_files.includes(y.num.toString())) {
|
||||
// z.isPrinted = true
|
||||
// }
|
||||
// }
|
||||
// )
|
||||
|
||||
// })
|
||||
|
||||
// //if(val.files.list) val.files.num
|
||||
// });
|
||||
// this.order_data.count = dd.count;
|
||||
// this.order_data.loading = false
|
||||
// })
|
||||
// .catch(error => console.log(error))
|
||||
//},
|
||||
},
|
||||
mounted() {
|
||||
this.get_activity()
|
||||
},
|
||||
watch: {
|
||||
options: {
|
||||
handler() {
|
||||
this.search_get()
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
selected_activity(newValue, oldValue) {
|
||||
const params = {
|
||||
page: 1, pageSize: 100
|
||||
@@ -154,12 +365,7 @@
|
||||
:headers="order_data.header"
|
||||
:loading="order_data.loading"
|
||||
class="elevation-1">
|
||||
<template #item.detail ="{item}">
|
||||
{{item.detail.count}}
|
||||
</template>
|
||||
<template #item.slot_type ="{item}">
|
||||
{{item.detail.actItem?.substring(0,3)}}
|
||||
</template>
|
||||
|
||||
<template #item.up_time ="{item}">
|
||||
{{item.up_time|timeString('YYYY-MM-DD')}}
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user