yiming/17168ERP
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

要改列印的功能

Browse Source
This commit is contained in:
minom
2026-03-24 18:02:44 +08:00
parent c235a138ee
commit 8154473d1a
10 changed files with 1020 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
web/App_Code/Model/Model.cs
View File

@@ -1389,6 +1389,7 @@ namespace Model
public Nullable<int> parent_num { get; set; } public Nullable<int> parent_num { get; set; }
public string print_id { get; set; } public string print_id { get; set; }
public Nullable<System.DateTime> UpdateTime { get; set; } public Nullable<System.DateTime> UpdateTime { get; set; }
public string style { get; set; }
public virtual actItem actItem { get; set; } public virtual actItem actItem { get; set; }
[System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")] [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]

3
web/App_Code/Model/Model.edmx
View File

@@ -724,6 +724,7 @@
<Property Name="customize_data" Type="nvarchar(max)" /> <Property Name="customize_data" Type="nvarchar(max)" />
<Property Name="printed_files" Type="nvarchar(max)" /> <Property Name="printed_files" Type="nvarchar(max)" />
<Property Name="UpdateTime" Type="datetime2" Precision="7" /> <Property Name="UpdateTime" Type="datetime2" Precision="7" />
<Property Name="style" Type="varchar" MaxLength="50" />
</EntityType> </EntityType>
<EntityType Name="pro_order_record"> <EntityType Name="pro_order_record">
<Key> <Key>
@@ -3188,6 +3189,7 @@
<Property Name="UpdateTime" Type="DateTime" Precision="7" /> <Property Name="UpdateTime" Type="DateTime" Precision="7" />
<NavigationProperty Name="accountings" Relationship="Model.FK_accounting_pro_order_detail" FromRole="pro_order_detail" ToRole="accounting" /> <NavigationProperty Name="accountings" Relationship="Model.FK_accounting_pro_order_detail" FromRole="pro_order_detail" ToRole="accounting" />
<NavigationProperty Name="transfer_register" Relationship="Model.FK_transfer_register_pro_order_detail" FromRole="pro_order_detail" ToRole="transfer_register" /> <NavigationProperty Name="transfer_register" Relationship="Model.FK_transfer_register_pro_order_detail" FromRole="pro_order_detail" ToRole="transfer_register" />
<Property Name="style" Type="String" Unicode="true" FixedLength="false" MaxLength="50" Nullable="true" />
</EntityType> </EntityType>
<EntityType Name="pro_order_record"> <EntityType Name="pro_order_record">
<Key> <Key>
@@ -5863,6 +5865,7 @@
<ScalarProperty Name="demo" ColumnName="demo" /> <ScalarProperty Name="demo" ColumnName="demo" />
<ScalarProperty Name="customize_data" ColumnName="customize_data" /> <ScalarProperty Name="customize_data" ColumnName="customize_data" />
<ScalarProperty Name="printed_files" ColumnName="printed_files" /> <ScalarProperty Name="printed_files" ColumnName="printed_files" />
<ScalarProperty Name="style" ColumnName="style" />
</MappingFragment> </MappingFragment>
</EntityTypeMapping> </EntityTypeMapping>
</EntitySetMapping> </EntitySetMapping>

2
web/App_Code/Model/Model.edmx.diagram
View File

@@ -4,7 +4,7 @@
<edmx:Designer xmlns="http://schemas.microsoft.com/ado/2009/11/edmx"> <edmx:Designer xmlns="http://schemas.microsoft.com/ado/2009/11/edmx">
<!-- Diagram content (shape and connector positions) --> <!-- Diagram content (shape and connector positions) -->
<edmx:Diagrams> <edmx:Diagrams>
<Diagram DiagramId="b267a343dc0c4bf0ae194b775754b108" Name="Diagram1" ZoomLevel="78"> <Diagram DiagramId="b267a343dc0c4bf0ae194b775754b108" Name="Diagram1" ZoomLevel="116">
<EntityTypeShape EntityType="Model.accounting" Width="1.5" PointX="22.5" PointY="22.125" IsExpanded="true" /> <EntityTypeShape EntityType="Model.accounting" Width="1.5" PointX="22.5" PointY="22.125" IsExpanded="true" />
<EntityTypeShape EntityType="Model.accounting_files" Width="1.5" PointX="15.75" PointY="27.75" IsExpanded="true" /> <EntityTypeShape EntityType="Model.accounting_files" Width="1.5" PointX="15.75" PointY="27.75" IsExpanded="true" />
<EntityTypeShape EntityType="Model.accounting_kind" Width="1.5" PointX="11.25" PointY="27.625" IsExpanded="true" /> <EntityTypeShape EntityType="Model.accounting_kind" Width="1.5" PointX="11.25" PointY="27.625" IsExpanded="true" />

3
web/App_Code/api/orderController.cs
View File

@@ -447,6 +447,7 @@ public class orderController : ApiController
? x.num.ToString() ? x.num.ToString()
: (x.parent_num.ToString() + x.num.ToString()) : (x.parent_num.ToString() + x.num.ToString())
), ),
style=x.style??""
//cash_record = x.pro_order_record.Select( c => new { //cash_record = x.pro_order_record.Select( c => new {
// c, // c,
// //pay_kind = tdesc2[c.payment.HasValue && x.keyin1.Value > 0 ? x.keyin1.Value : 1], // //pay_kind = tdesc2[c.payment.HasValue && x.keyin1.Value > 0 ? x.keyin1.Value : 1],
@@ -712,6 +713,7 @@ public class orderController : ApiController
order.demo = item.demo; order.demo = item.demo;
order.customize_data = item.customize_data; order.customize_data = item.customize_data;
order.UpdateTime = DateTime.Now; order.UpdateTime = DateTime.Now;
order.style = item.style;
_db.SaveChanges(); _db.SaveChanges();
var ret = new var ret = new
{ {
@@ -765,6 +767,7 @@ public class orderController : ApiController
demo = item.demo, demo = item.demo,
customize_data = item.customize_data, customize_data = item.customize_data,
UpdateTime = DateTime.Now, UpdateTime = DateTime.Now,
style=item.style
}; };
_db.pro_order_detail.Add(orderDetail); _db.pro_order_detail.Add(orderDetail);
_db.SaveChanges(); _db.SaveChanges();

6
web/admin/activity/reg.aspx
View File

@@ -623,7 +623,7 @@
}) })
// 送出列印 // 送出列印
_url = HTTP_HOST + 'admin/print/print_multi.aspx'; _url = HTTP_HOST + 'admin/print/print_multi_new.aspx';
var form = document.createElement("form"); var form = document.createElement("form");
form.method = "POST"; form.method = "POST";
form.action = _url; form.action = _url;
@@ -643,6 +643,10 @@
addHiddenField("file", this.thisFilesSelected.val); addHiddenField("file", this.thisFilesSelected.val);
addHiddenField("list", JSON.stringify(list)); addHiddenField("list", JSON.stringify(list));
addHiddenField("title", `${this.thisItemSelected.text} / ${this.thisFilesSelected.text}`); addHiddenField("title", `${this.thisItemSelected.text} / ${this.thisFilesSelected.text}`);
localStorage.setItem("item", this.thisItemSelected.val);
localStorage.setItem("file", this.thisFilesSelected.val);
localStorage.setItem("list", JSON.stringify(list));
localStorage.setItem("title", `${this.thisItemSelected.text} / ${this.thisFilesSelected.text}`);
/* /*
var hiddenField = document.createElement("input"); var hiddenField = document.createElement("input");

171
web/admin/order/index3.aspx
View File

@@ -57,7 +57,6 @@
{{ item.u_name }} {{ item.u_name }}
</template> </template>
<template #item.slot_btn="{ item }"> <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="$root.currentView='step-two';$root.selected_act=item.num" class="btn btn-outline-secondary btn-sm">明細</a> <a @click="$root.currentView='step-two';$root.selected_act=item.num" class="btn btn-outline-secondary btn-sm">明細</a>
<a @click="deleteItem(item)" class="btn btn-outline-secondary btn-sm"><i class="mdi mdi-trash-can"></i>刪除</a> <a @click="deleteItem(item)" class="btn btn-outline-secondary btn-sm"><i class="mdi mdi-trash-can"></i>刪除</a>
</template> </template>
@@ -625,9 +624,56 @@
Vue.component('step-two', { Vue.component('step-two', {
template: ` template: `
<div class="container-fluid">QOO</div> <div class="container-fluid">
`, <v-data-table
props: ['oneData'], v-model="detail_table.selected"
:items="detail_table.list"
:search-props="search"
item-key="order_no"
:options.sync="options"
:headers="detail_table.header"
:footer-props="detail_table.footer"
:server-items-length="detail_table.count"
:loading="detail_table.loading"
:single-select="detail_table.singleSelect"
show-select
hide-default-footer
:page.sync="detail_table.page"
:items-per-page.sync="detail_table.pageSize"
class="elevation-1">
<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="$root.currentView='step-three';$root.selected_order=item.order_no" class="btn btn-outline-secondary btn-sm">明細</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="detail_table.page"
:length="pageCount">
</v-pagination>
</v-col>
<v-col class="text-truncate text-right" cols="12" md="2">
共 {{ detail_table.count }} 筆, 頁數:
</v-col>
<v-col cols="6" md="1">
<v-text-field
v-model="detail_table.page"
type="number"
hide-details
dense
min="1"
:max="pageCount"
@input="detail_table.page = parseInt($event, 10)"
></v-text-field>
</v-col>
</v-row>
</v-container>
</div>`,
props: ['twoData'],
activated() { activated() {
console.log("yes ,go go"); console.log("yes ,go go");
this.getDetail(); this.getDetail();
@@ -655,6 +701,20 @@
showFirstLastPage: true, showFirstLastPage: true,
itemsPerPageOptions: [5, 10, 20, 30], itemsPerPageOptions: [5, 10, 20, 30],
}, },
},
search: {
keyin1: '',
order_no: '',
subject: '',
u_name: '',
up_time1: '',
up_time2: '',
actItemTxt: '',
introducerTxt: '',
activity_num: '',
country: '',
country2: '',
hasPrice: '',
} }
}; };
}, },
@@ -671,12 +731,15 @@
getDetail() { getDetail() {
const { sortBy, sortDesc, page, itemsPerPage } = this.options const { sortBy, sortDesc, page, itemsPerPage } = this.options
const params = { const params = {
sortBy: sortBy[0], sortDesc: sortDesc[0], //sortBy: sortBy == undefined ? "order_no" : sortBy[0],
page: clearpage ? '1' : page, pageSize: itemsPerPage, //sortDesc: sortDesc == undefined ? "" : sortDesc[0],
activity_num: $root.selected_act //page: clearpage ? '1' : page, pageSize: itemsPerPage,
page:'1',pageSize:10,
}; };
this.search = { activity_num: this.$root.selected_act }
this.detail_table.loading = true this.detail_table.loading = true
sessionStorage.setItem('orderpage', clearpage ? '1' : page); sessionStorage.setItem('orderpage','1');// clearpage ? '1' : page
axios axios
.post(HTTP_HOST + 'api/order/GetList', this.search, { params: params }) .post(HTTP_HOST + 'api/order/GetList', this.search, { params: params })
.then(response => { .then(response => {
@@ -686,18 +749,108 @@
}) })
.catch(error => console.log(error)) .catch(error => console.log(error))
}, },
},
computed: {
pageCount() {
return Math.ceil(this.detail_table.count / this.detail_table.pageSize)
},
} }
}); });
Vue.component('step-three', {
template: `<div>放報名資料</div>`,
props:['signData']
});
let VueApp = new Vue({ let VueApp = new Vue({
el: '#app', el: '#app',
vuetify: new Vuetify(), vuetify: new Vuetify(),
data() { data() {
return { return {
currentView: 'step-one', currentView: 'step-one',
selected_act:'', selected_act: '',
selected_order:'',
}; };
},activated() {
console.log("yes ,go go");
this.getDetail();
},
data() {
return {
options: { multiSort: false },
search_options: { multiSort: false },
sign_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: 'keyin1_txt', align: 'start' },
{ text: '', value: 'slot_btn', sortable: false, align: 'end' }
],
footer: {
showFirstLastPage: true,
itemsPerPageOptions: [5, 10, 20, 30],
},
},
search: {
keyin1: '',
order_no: '',
subject: '',
u_name: '',
up_time1: '',
up_time2: '',
actItemTxt: '',
introducerTxt: '',
activity_num: '',
country: '',
country2: '',
hasPrice: '',
}
};
},
watch: {
options: {
handler() {
this.getDetail()
},
deep: true,
},
},
methods: {
getDetail() {
const { sortBy, sortDesc, page, itemsPerPage } = this.options
const params = {
//sortBy: sortBy == undefined ? "order_no" : sortBy[0],
//sortDesc: sortDesc == undefined ? "" : sortDesc[0],
//page: clearpage ? '1' : page, pageSize: itemsPerPage,
page: '1', pageSize: 10,
};
this.search = { activity_num: this.$root.selected_act }
this.detail_table.loading = true
sessionStorage.setItem('orderpage', '1');// clearpage ? '1' : page
axios
.post(HTTP_HOST + 'api/order/GetList', this.search, { params: params })
.then(response => {
this.detail_table.list = response.data.list
this.detail_table.count = response.data.count;
this.detail_table.loading = false
})
.catch(error => console.log(error))
},
},
computed: {
pageCount() {
return Math.ceil(this.detail_table.count / this.detail_table.pageSize)
},
} }
}); });

7
web/admin/order/reg.aspx
View File

@@ -538,7 +538,8 @@
//currentItem.f_num_tablet = JSON.stringify(receivedData.tablet_data); //currentItem.f_num_tablet = JSON.stringify(receivedData.tablet_data);
this.editedItem = { this.editedItem = {
...currentItem, ...currentItem,
f_num_tablet: JSON.stringify(receivedData.tablet_data) f_num_tablet: JSON.stringify(receivedData.tablet_data),
style: receivedData.style
}; };
// 呼叫 save 方法 // 呼叫 save 方法
await this.save(); await this.save();
@@ -964,6 +965,7 @@
async save(shouldClose = true) { async save(shouldClose = true) {
if (this.editedIndex > -1) { if (this.editedIndex > -1) {
if (this.order_no != '') { if (this.order_no != '') {
console.log("ok:",this.editedItem);
//chcck necessary params //chcck necessary params
if (this.editedItem.actitem_num_selected.val != 0 && if (this.editedItem.actitem_num_selected.val != 0 &&
this.editedItem.keyin1_selected.val !=0 && this.editedItem.keyin1_selected.val !=0 &&
@@ -1001,6 +1003,7 @@
pay: this.editedItem.pay, pay: this.editedItem.pay,
pay_date: this.editedItem.pay_date, pay_date: this.editedItem.pay_date,
customize_data: this.editedItem.customize_data, customize_data: this.editedItem.customize_data,
style: this.editedItem.style
} }
await axios await axios
.post(HTTP_HOST + 'api/order/SaveDetailData', pro_order_detail) .post(HTTP_HOST + 'api/order/SaveDetailData', pro_order_detail)
@@ -2573,7 +2576,7 @@
<v-btn icon @click="tablet_edit.show=false"><v-icon>mdi-close</v-icon></v-btn> <v-btn icon @click="tablet_edit.show=false"><v-icon>mdi-close</v-icon></v-btn>
</v-card-title> </v-card-title>
<v-card-text> <v-card-text>
<iframe id="tablet_edit_iframe" src="../print/tablet_edit/editor.html" style="width: 100%; height: 550px;" frameborder="0"></iframe> <iframe id="tablet_edit_iframe" src="../print/tablet_edit/editornew.html" style="width: 100%; height: 550px;" frameborder="0"></iframe>
</v-card-text> </v-card-text>
</v-card> </v-card>
</v-dialog> </v-dialog>

21
web/admin/print/print_multi_new.aspx Normal file
View File

@@ -0,0 +1,21 @@
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="print_multi_new.aspx.cs" Inherits="admin_print_print_multi_new" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
<script>
console.log(localStorage.getItem("list"));
console.log(localStorage.getItem("item"));
console.log(localStorage.getItem("file"));
</script>
</html>

15
web/admin/print/print_multi_new.aspx.cs Normal file
View File

@@ -0,0 +1,15 @@
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class admin_print_print_multi_new :MyWeb.function
{
private Model.ezEntities _db = new Model.ezEntities();
protected void Page_Load(object sender, EventArgs e)
{
}
}

804
web/admin/print/tablet_edit/editornew.html Normal file
View File

@@ -0,0 +1,804 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="../../../js/vuetify.css" rel="stylesheet" />
<link href="../../../js/mdi-font/css/materialdesignicons.min.css" rel="stylesheet" />
<script src="../../../js/vue.min.js"></script>
<script src="../../../js/vuetify.min.js"></script>
<script src="../../../js/axios.min.js"></script>
<style>
html {
overflow: hidden;
}
.scrollable-list {
max-height: 250px;
height: 220px;
overflow-y: auto;
overflow-x: hidden;
}
.scrollable-list .v-list-item__content {
padding: 4px 0px;
}
.scrollable-list .v-list-item {
min-height: 30px;
padding: 0 8px;
}
.scrollable-list .v-list-item__action {
min-width: 0 !important;
width: auto !important;
margin-right: 0 !important;
}
.scrollable-list .v-btn--icon.v-size--default {
height: 24px;
width: 24px;
}
#app .v-card__subtitle,
#app .v-card__text,
#app .v-card__title {
padding: 12px 16px 0 16px;
}
#app .v-list-item.hover-item .v-list-item__subtitle {
/*display: none !important;*/
display: flex !important;
}
#app .v-list-item.hover-item:hover .v-list-item__subtitle {
display: flex !important;
}
.badge-deceased {
background-color: #ffc904;
color: #300a0a;
padding: 2px 4px;
border-radius: 20px;
font-weight: bold;
font-size: 10px;
display: inline-block;
position: relative;
top: -2px;
}
.badge-zero {
background-color: #CCC;
color: #FFF;
padding: 2px 4px;
border-radius: 20px;
font-weight: bold;
font-size: 10px;
display: inline-block;
position: relative;
top: -2px;
}
.equal-card {
min-height: 260px;
}
.checkbox-narrow {
min-width: 32px;
width: 32px;
padding: 0;
margin-right: 4px;
}
/* num=0 刪除按鈕警示樣式 */
.btn-delete-warning:hover {
background-color: #fff3cd !important;
border-radius: 50%;
}
.btn-delete-warning:hover .v-icon {
color: #856404 !important;
}
</style>
<link rel="stylesheet" href="print.css">
</head>
<body>
<div id="app">
<v-app>
<v-container>
<v-row>
<v-col cols="12" md="12">
選擇版型
<select id="model-select" v-model="selected.style">
<option v-for="c in code.style" :value="c.styleID">{{c.name}}</option>
</select>
</v-col>
</v-row>
<v-row>
<v-col cols="4" md="4">
<v-card class="pa-2" outlined tile>
<div class="docs editor">
<div class="page border" data-body-class="tblt-l a3">
<div class="content">
<div class="bg"><img alt="Alternate Text" :src="'../' + item_type_image"></div>
<div class="text">
<div class="top_text_1"></div>
<div class="top_text_2">{{tabletItem.print_id}}</div>
<div class="top_text_3"></div>
<div class="right_text text-block fit-text vertical text-start border"
style="--lines:0;--line_len:5;"></div>
<div class="mid_text text-block fit-text vertical border"
:style="mid_text_style" v-html="join_mid_text"></div>
<div class="mid_text_2 text-block fit-text vertical border"
style="--lines:0;--line_len:5;"></div>
<div class="left_text text-block fit-text vertical text-start border"
:style="left_text_style" v-html="join_left_text"></div>
<div class="txt_up vertical" v-if="item_type == 'B'">陽上</div>
<div class="txt_down vertical" v-if="item_type == 'B'">拜薦</div>
</div>
</div>
</div>
</div>
</v-card>
<div class="mt-2">
<v-btn color="primary" @click="saveData">儲存牌位</v-btn>
</div>
</v-col>
<v-col cols="4" md="4" id="type_edit_B" v-if="item_type==='B'" class="d-flex flex-column">
<v-card elevation="2" class="mb-2 equal-card">
<v-card-text class="py-2 px-2">
<v-row no-gutters align="center">
<v-col cols="auto">
<v-checkbox v-model="isAllSelected"
@change="toggleSelectAll"
color="primary"
hide-details
label="疏文代表"
class="ma-0"></v-checkbox>
</v-col>
<v-col cols="auto" class="ml-4">
<span class="subtitle-2 grey--text text--darken-1">超渡-已選</span>
</v-col>
<v-spacer></v-spacer>
<v-col cols="auto">
<v-btn color="primary" icon small @click="openAddDialog('Y')">
<v-icon>mdi-plus</v-icon>
</v-btn>
</v-col>
</v-row>
</v-card-text>
<v-list class="scrollable-list">
<v-list-item-group>
<v-list-item v-for="(member, index) in family_deceased_Y_selected" :key="index" class="hover-item">
<v-list-item-action>
<v-checkbox v-model="member.IsShuWen"
color="primary"
class="checkbox-narrow d-inline-flex align-center" />
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>
<span class="badge-zero" v-if="member.num==0">0</span>
<span class="badge-deceased" v-if="member.deceased">{{ member.deceased ? '卍' : '' }}</span>
{{ member.fam_name }}
<v-chip v-if="member.fam_title" small>
{{ member.fam_title }}
</v-chip>
</v-list-item-title>
<v-list-item-subtitle class="d-flex justify-end">
<v-btn v-if="member.num === 0" icon @click="toggleNoSpace(member)" :title="'不加空格'">
<v-icon :color="member.nospace ? 'green' : 'grey lighten-1'">mdi-backspace</v-icon>
</v-btn>
<v-btn icon @click="moveUp(member, 'Y', index)" :disabled="index === 0">
<v-icon color="grey lighten-1">mdi-arrow-up</v-icon>
</v-btn>
<v-btn icon @click="moveDown(member, 'Y', index)" :disabled="index === family_deceased_Y_selected.length - 1">
<v-icon color="grey lighten-1">mdi-arrow-down</v-icon>
</v-btn>
<v-btn icon @click="confirmRemove(member, index, 'Y')" :class="{'btn-delete-warning': member.num === 0}">
<v-icon color="grey lighten-1">mdi-minus</v-icon>
</v-btn>
</v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action class="align-self-start">
<v-btn icon @click="breakAfter(member, 'Y')">
<v-icon :color="member.option_break ? 'blue' : 'grey lighten-1'">
mdi-subdirectory-arrow-left
</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
</v-list-item-group>
</v-list>
</v-card>
<v-card elevation="2" class="equal-card">
<v-card-subtitle>超渡-可選</v-card-subtitle>
<v-list class="scrollable-list">
<v-list-item-group>
<v-list-item v-for="member in family_deceased_Y_unselected" :key="member.fam_name">
<v-list-item-content>
<v-list-item-title>
<span class="badge-deceased" v-if="member.deceased">{{ member.deceased ? '卍' : '' }}</span>
{{ member.fam_name }}
<v-chip v-if="member.fam_title" small>
{{ member.fam_title }}
</v-chip>
</v-list-item-title>
</v-list-item-content>
<v-list-item-action>
<v-btn icon @click="addToSelected(member, 'Y')">
<v-icon color="grey lighten-1">mdi-plus</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
</v-list-item-group>
</v-list>
</v-card>
</v-col>
<v-col cols="4" md="4" id="type_edit_AB" class="d-flex flex-column">
<v-card elevation="2" class="mb-2 equal-card">
<v-card-text class="py-2 px-2">
<v-row no-gutters align="center">
<v-col cols="auto" v-if="item_type==='A'">
<v-checkbox v-model="isAllSelected"
@change="toggleSelectAll"
color="primary"
hide-details
label="疏文代表"
class="ma-0"></v-checkbox>
</v-col>
<v-col cols="auto" :class="{'ml-4': item_type==='A'}">
<span class="subtitle-2 grey--text text--darken-1">陽上/祈福-已選</span>
</v-col>
<v-spacer></v-spacer>
<v-col cols="auto">
<v-btn color="primary" icon small @click="openAddDialog('N')">
<v-icon>mdi-plus</v-icon>
</v-btn>
</v-col>
</v-row>
</v-card-text>
<v-list class="scrollable-list">
<v-list-item-group>
<v-list-item v-for="(member, index) in family_deceased_N_selected" :key="index" class="hover-item">
<v-list-item-action v-if="item_type==='A'">
<v-checkbox v-model="member.IsShuWen"
color="primary"
class="checkbox-narrow d-inline-flex align-center" />
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>
<span class="badge-zero" v-if="member.num==0">0</span>
<span class="badge-deceased" v-if="member.deceased">{{ member.deceased ? '卍' : '' }}</span>
{{ member.fam_name }}
<v-chip v-if="member.fam_title" small>
{{ member.fam_title }}
</v-chip>
</v-list-item-title>
<v-list-item-subtitle class="d-flex justify-end">
<v-btn v-if="member.num === 0" icon @click="toggleNoSpace(member)" :title="'不加空格'">
<v-icon :color="member.nospace ? 'green' : 'grey lighten-1'">mdi-backspace</v-icon>
</v-btn>
<v-btn icon @click="moveUp(member, 'N', index)" :disabled="index === 0">
<v-icon color="grey lighten-1">mdi-arrow-up</v-icon>
</v-btn>
<v-btn icon @click="moveDown(member, 'N', index)" :disabled="index === family_deceased_N_selected.length - 1">
<v-icon color="grey lighten-1">mdi-arrow-down</v-icon>
</v-btn>
<v-btn icon @click="confirmRemove(member, index, 'N')" :class="{'btn-delete-warning': member.num === 0}">
<v-icon color="grey lighten-1">mdi-minus</v-icon>
</v-btn>
</v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action class="align-self-start">
<v-btn icon @click="breakAfter(member, 'N')">
<v-icon :color="member.option_break ? 'blue' : 'grey lighten-1'">
mdi-subdirectory-arrow-left
</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
</v-list-item-group>
</v-list>
</v-card>
<v-card elevation="2" class="equal-card">
<v-card-subtitle>陽上/祈福-可選</v-card-subtitle>
<v-list class="scrollable-list">
<v-list-item-group>
<v-list-item v-for="member in family_deceased_N_unselected" :key="member.fam_name">
<v-list-item-content>
<v-list-item-title>
<span class="badge-deceased" v-if="member.deceased">{{ member.deceased ? '卍' : '' }}</span>
{{ member.fam_name }}
<v-chip v-if="member.fam_title" small>
{{ member.fam_title }}
</v-chip>
</v-list-item-title>
</v-list-item-content>
<v-list-item-action>
<v-btn icon @click="addToSelected(member, 'N')">
<v-icon color="grey lighten-1">mdi-plus</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
</v-list-item-group>
</v-list>
</v-card>
</v-col>
</v-row>
</v-container>
<div style="display:block;">
<textarea id="desc_iframe" style="width: 900px; height: 100px;">{{tabletItem}}</textarea>
</div>
<!-- 新增項目對話框 -->
<v-dialog v-model="addDialog" max-width="400">
<v-card>
<v-card-title style="font-size: 1rem;">新增項目</v-card-title>
<v-card-text>
<div class="mb-2">
<v-chip
v-for="(phrase, idx) in phrases"
:key="idx"
small
class="mr-1 mb-1"
:title="phrase.length > 5 ? phrase : ''"
@click="newItemText = (newItemText || '') + phrase"
style="cursor: pointer;"
>{{ phrase.length > 5 ? phrase.slice(0, 5) + '...' : phrase }}</v-chip>
</div>
<v-text-field
v-model="newItemText"
label="請輸入名稱"
outlined
dense
clearable
autofocus
@keyup.enter="confirmAddItem"
></v-text-field>
</v-card-text>
<v-card-actions>
<div class="d-flex align-center">
<v-checkbox
class="pt-0"
v-model="noSpace"
label="不加空格"
dense
hide-details
></v-checkbox>
<v-icon class="ml-2 mt-1">mdi-backspace</v-icon>
</div>
<v-spacer></v-spacer>
<v-btn text @click="addDialog = false">取消</v-btn>
<v-btn color="primary" @click="confirmAddItem">確定</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<!-- 確認刪除對話框 -->
<v-dialog v-model="deleteDialog" max-width="350">
<v-card>
<v-card-title style="font-size: 1rem;">確認刪除</v-card-title>
<v-card-text>
確定要刪除「<strong>{{ deleteMemberName }}</strong>」嗎？<br>
<span class="red--text">此為手動新增項目，刪除後無法復原。</span>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn text @click="deleteDialog = false">取消</v-btn>
<v-btn color="error" @click="doRemove">確定刪除</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-app>
</div>
<script>
var VueApp = new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
code: {
style:[]
},
selected: {
style:""
},
isAllSelected: false,
dialog: false,
addDialog: false, // 新增項目對話框
addDialogType: '', // 'Y' 或 'N'
newItemText: '', // 新增項目的文字
noSpace: true, // 不加空格 checkbox（預設勾選）
deleteDialog: false, // 確認刪除對話框
deleteIndex: -1, // 要刪除的 index
deleteType: '', // 'Y' 或 'N'
deleteMemberName: '', // 要刪除的名稱（顯示用）
phrases: [], // 常用片語
familyMembers: [], // 親友名單
tabletItem: {}, // 傳入的資料(信眾/牌位資訊)
item: {},
family_deceased_Y_selected: [], // 超渡/超薦/超冤名單
family_deceased_N_selected: [] // 消災/陽上名單
};
},
watch: {
family_deceased_N_selected: {
handler(newValue) {
if (this.item_type === 'A') {
if (Array.isArray(newValue) && newValue.length > 0) {
this.isAllSelected = newValue.every(member => member.IsShuWen === true);
}
}
},
deep: true
},
family_deceased_Y_selected: {
handler(newValue) {
if (this.item_type === 'B') {
if (Array.isArray(newValue) && newValue.length > 0) {
this.isAllSelected = newValue.every(member => member.IsShuWen === true);
}
}
},
deep: true
}
},
computed: {
family_deceased_Y_unselected() {
return this.familyMembers.filter(member =>
member.deceased === true &&
!this.family_deceased_Y_selected.some(selected => selected.num === member.num));
},
family_deceased_N_unselected() {
return this.familyMembers.filter(member =>
member.deceased === false &&
!this.family_deceased_N_selected.some(selected => selected.num === member.num));
},
item_type() {
return this.tabletItem?.actitem_num_selected?.text?.includes('超') ? 'B' : 'A';
// A:消災, 陽上.....
// B:超渡, 超薦.....
},
item_type_image() {
if (this.item_type === 'B') {
return 'tablet-1.svg';
} else {
return 'tablet-2.svg';
}
},
join_mid_text() {
const target = this.item_type === 'B'
? this.family_deceased_Y_selected
: this.family_deceased_N_selected;
return this.join_text(target);
},
join_left_text() {
let target = '';
if (this.item_type === 'B') {
target = this.join_text(this.family_deceased_N_selected);
}
return target;
},
mid_text_style() {
const text = this.join_mid_text; // Remove function call since join_mid_text is a computed property
return this.calculateTextStyle(text);
},
left_text_style() {
if (this.item_type !== 'B') return '--lines:1;--line_len:5';
return this.calculateTextStyle(this.join_left_text);
}
},
mounted() {
// 載入常用片語
fetch('phrases.json')
.then(res => res.json())
.then(data => { this.phrases = data; })
.catch(err => console.error('載入 phrases.json 失敗:', err));
// 監聽來自父頁面的消息
window.addEventListener('message', (event) => {
this.isAllSelected = false;
console.log('editor.html - received message event');
console.log('editor.html - event origin:', event.origin);
console.log('editor.html - parent origin:', window.parent.location.origin);
if (event.origin === window.parent.location.origin) {
console.log('editor.html - origin check passed');
console.log('editor.html - received data:', event.data);
const receivedData = event.data;
this.family_deceased_Y_selected = [];
this.family_deceased_N_selected = [];
if (receivedData.tabletItem) {
console.log('editor.html - updating tabletItem:', receivedData.tabletItem);
this.tabletItem = receivedData.tabletItem;
if (receivedData.familyMembers) {
this.familyMembers = receivedData.familyMembers; // 更新 familyMembers
console.log("app mounted, window message: ", this.familyMembers, receivedData);
}
if (receivedData.tabletItem) {
this.tabletItem = receivedData.tabletItem;
}
console.log("receivedData::",receivedData);
if (receivedData.tabletItem.style) {
this.selected.style = receivedData.tabletItem.style;
} else {
this.selected.style = "";
}
// 處理 f_num_tablet 資料
if (this.tabletItem.f_num_tablet) {
try {
const data = JSON.parse(this.tabletItem.f_num_tablet);
if (this.item_type === 'B') {
// B類型：超渡、超薦等
this.family_deceased_Y_selected = data.mid_items || [];
this.family_deceased_N_selected = data.left_items || [];
this.family_deceased_Y_selected.forEach(item => {
if (item.IsShuWen === undefined) {
Vue.set(item, 'IsShuWen', false);
}
});
if (this.family_deceased_Y_selected.length > 0) {
this.isAllSelected = this.family_deceased_Y_selected.every(member => member.IsShuWen === true);
} else {
this.isAllSelected = false;
}
} else {
// A類型：消災、陽上等
this.family_deceased_Y_selected = [];
this.family_deceased_N_selected = data.mid_items || [];
this.family_deceased_N_selected.forEach(item => {
if (item.IsShuWen === undefined) {
Vue.set(item, 'IsShuWen', false);
}
});
if (this.family_deceased_Y_selected.length > 0) {
this.isAllSelected = this.family_deceased_N_selected.every(member => member.IsShuWen === true);
} else {
this.isAllSelected = false;
}
console.log(this.family_deceased_N_selected)
}
} catch (e) {
console.error('解析牌位資料時發生錯誤:', e);
}
}
}
}
});
this.getStyle();
},
methods: {
getStyle() {
axios
.post('/api/tablet/GetStyleData', {}, {})
.then(response => {
console.log(response);
if (response.data.data) {
response.data.data.forEach(x => {
if (x.styleID != "000001") {
this.code.style.push(x)
}
})
}
//this.code.style = response.data.data;
//this.detail_table.list = response.data.list
//this.detail_table.count = response.data.count;
//this.detail_table.loading = false
})
.catch(error => console.log(error))
},
toggleSelectAll(checked) {
this.isAllSelected = checked
if (this.item_type === 'B') {
this.family_deceased_Y_selected.forEach(member => {
member.IsShuWen = checked;
});
}
else if (this.item_type === 'A') {
this.family_deceased_N_selected.forEach(member => {
member.IsShuWen = checked;
});
}
console.log(checked)
console.log(this.family_deceased_N_selected)
console.log(this.family_deceased_Y_selected)
},
openAddDialog(type) {
this.addDialogType = type;
this.newItemText = '';
this.noSpace = true; // 重置為預設勾選
this.addDialog = true;
},
confirmAddItem() {
if (!this.newItemText.trim()) {
return; // 不允許空白
}
const newItem = {
num: 0,
fam_name: this.newItemText.trim(),
fam_gender: '',
deceased: false,
fam_title: '',
option_break: false,
IsShuWen: this.isAllSelected,
nospace: this.noSpace
};
if (this.addDialogType === 'Y') {
this.family_deceased_Y_selected.push(newItem);
} else if (this.addDialogType === 'N') {
this.family_deceased_N_selected.push(newItem);
}
this.addDialog = false;
this.newItemText = '';
},
addToSelected(member, type) {
const selectedMember = {
num: member.num,
fam_name: member.fam_name,
fam_gender: member.fam_gender,
deceased: member.deceased,
fam_title: member.fam_title, // 新增，讓上方顯示稱謂 tag
option_break: false, // 默認為 false，根據需要可以更改
IsShuWen: this.isAllSelected //是否加入疏文名單,默認false
};
console.log(this.isAllSelected)
if (type === 'Y') {
this.family_deceased_Y_selected.push(selectedMember);
console.log(this.family_deceased_Y_selected)
} else if (type === 'N') {
this.family_deceased_N_selected.push(selectedMember);
console.log(this.family_deceased_N_selected)
}
},
confirmRemove(member, index, type) {
if (member.num === 0) {
// num=0 需確認
this.deleteIndex = index;
this.deleteType = type;
this.deleteMemberName = member.fam_name;
this.deleteDialog = true;
} else {
// num!=0 直接刪除
this.removeFromSelected(index, type);
}
},
doRemove() {
this.removeFromSelected(this.deleteIndex, this.deleteType);
this.deleteDialog = false;
},
removeFromSelected(index, type) {
if (type === 'Y') {
this.family_deceased_Y_selected.splice(index, 1);
} else if (type === 'N') {
this.family_deceased_N_selected.splice(index, 1);
}
},
moveUp(member, type, index) {
if (index > 0) {
const array = type === 'Y' ? this.family_deceased_Y_selected : this.family_deceased_N_selected;
const temp = array[index - 1];
this.$set(array, index - 1, member);
this.$set(array, index, temp);
}
},
moveDown(member, type, index) {
if (index < (type === 'Y' ? this.family_deceased_Y_selected : this.family_deceased_N_selected).length - 1) {
const array = type === 'Y' ? this.family_deceased_Y_selected : this.family_deceased_N_selected;
const temp = array[index + 1];
this.$set(array, index + 1, member);
this.$set(array, index, temp);
}
},
breakAfter(member, type) {
console.log("breakAfter", member, type);
member.option_break = !member.option_break;
},
toggleNoSpace(member) {
this.$set(member, 'nospace', !member.nospace);
},
join_text(target) {
let result = '';
target.forEach((member, index) => {
// 每項前面加空格，但例外：
// 1. 第一項前面不加空格 (index === 0)
// 2. nospace === true 的項目前面不加空格
if (index > 0 && !member.nospace) {
result += ' ';
}
result += member.fam_name;
// 處理換行：如果 option_break 為 true 且不是最後一項，加 <br>
if (member.option_break && index < target.length - 1) {
result += '<br>';
}
});
result = result.replace('|', '<br>');
return result;
},
calculateTextStyle(text) {
if (!text) return '--lines:1;--line_len:5';
const lines = text.split('<br>');
const line_len = Math.max(...lines.map(line => {
return Array.from(line).reduce((acc, char) => {
// Full width (Chinese) characters
if (char.match(/[\u4e00-\u9fa5]/)) {
return acc + 1;
}
// Half width (English, numbers, etc.)
return acc + 0.5;
}, 0);
}));
return `--lines:${lines.length};--line_len:${Math.ceil(line_len)}`;
},
saveData() {
// 其它資料欄位, 不應在這裡修改
// 應該在進來的時候, 就已經修改(insert)好了
let tablet_data = {};
if (this.item_type === 'B') {// B:超渡, 超薦.....
tablet_data = {
mid_items: this.family_deceased_Y_selected,
left_items: this.family_deceased_N_selected,
style: this.selected.style
}
}
else {// A:消災, 陽上.....
tablet_data = {
mid_items: this.family_deceased_N_selected,
left_items: null,
style: this.selected.style
}
}
console.log(tablet_data)
const ret = {
source: 'editor.btn.click',
data: {
tabletItem: this.tabletItem,
tablet_data: tablet_data,
style:this.selected.style
}
};
console.log("儲存牌位資料", ret);
window.parent.postMessage(ret, '/');
}
}
});
</script>
<script>
const desc_iframe = document.getElementById('desc_iframe');
const btn = document.getElementById('btn');
//window.addEventListener('message', (event) => {
// if (event.source === window.parent) {
// let data = event.data;
// if (data.source === 'order.btn.click') {
// console.log('editor message', event.source, window.parent);
// app.item = data;
// console.log(app);
// desc_iframe.value = JSON.stringify(data);
// }
// }
//});
/*
btn.addEventListener('click', () => {
const ret = {
source: 'editor.btn.click',
desc: desc_iframe.value,
}
debugger;
console.log("btn click", ret);
window.parent.postMessage(ret, '/');
});
*/
</script>
</body>
</html>