功能調整
This commit is contained in:
+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 = [];
|
||||
|
||||
Reference in New Issue
Block a user