908 lines
39 KiB
Plaintext
908 lines
39 KiB
Plaintext
<%@ Page Title="" Language="C#" MasterPageFile="~/admin/Templates/TBS5ADM001/MasterPage.master" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="admin_ancestraltablet_ancestraltabletarea_index" %>
|
||
|
||
<asp:Content ID="Content1" ContentPlaceHolderID="page_header" Runat="Server">
|
||
</asp:Content>
|
||
<asp:Content ID="Content2" ContentPlaceHolderID="page_nav" Runat="Server">
|
||
<nav class="mb-2 ps-3">
|
||
<button class="btn btn-primary me-2" type="button" @click="showNewtAreadialogMethod">
|
||
<i class="mdi mdi-plus"></i> 新增區域
|
||
</button>
|
||
<button class="btn btn-secondary me-2" @click="expandAll" type="button">
|
||
<i class="mdi mdi-arrow-expand-all"></i> 全部展開
|
||
</button>
|
||
<button class="btn btn-secondary" @click="collapseAll" type="button">
|
||
<i class="mdi mdi-arrow-collapse-all"></i> 全部收起
|
||
</button>
|
||
</nav>
|
||
<nav>
|
||
<button type="button" class="btn btn-primary" @click="toggleAreaData">
|
||
{{ showAreaDataFlag ? '隱藏區域資料' : '顯示區域資料' }}
|
||
</button>
|
||
</nav>
|
||
</asp:Content>
|
||
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
|
||
<div class="container-fluid">
|
||
<div class="row">
|
||
<div class="col-sm-4 col-lg-3">
|
||
<div class="card shadow-sm my-2">
|
||
<div class="card-header">神主牌區域列表</div>
|
||
<div class="card-body">
|
||
<ul class="tree">
|
||
<li v-for="area in ancestral_tablet_areas" :key="area.AreaId">
|
||
<region-item
|
||
:item="area"
|
||
:selected-id="currentSelectAreaId"
|
||
@select-area="selectAreaMethod"
|
||
:expand-all="expandAllFlag"
|
||
:collapse-all="collapseAllFlag"
|
||
@clear-expand-all="expandAllFlag = false"
|
||
@clear-collapse-all="collapseAllFlag = false"
|
||
/>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-4 col-lg-9" v-if="currentSelectArea && showAreaDataFlag">
|
||
<div class="card shadow-sm my-2"style="position: sticky; top: 20px;">
|
||
<div class="card-header" style="display: flex; justify-content: space-between; align-items: center;">
|
||
<div>
|
||
<span class="fw-bold">
|
||
{{ ' ' + currentSelectArea?.areaName + ' ' }}
|
||
</span>
|
||
<span>
|
||
資料
|
||
</span>
|
||
</div>
|
||
|
||
<div>
|
||
<button class="btn btn-primary" type="button" @click="showEidtAreadialogMethod">
|
||
編輯
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-12 col-sm-6">
|
||
<label>區域名稱</label>
|
||
<input v-model="currentSelectArea.areaName" type="text" class="form-control" readonly/>
|
||
</div>
|
||
<div class="col-12 col-sm-6">
|
||
<label>區域編號</label>
|
||
<input v-model="currentSelectArea.areaCode" type="text" class="form-control" readonly/>
|
||
</div>
|
||
<div class="col-12 col-sm-6">
|
||
<label>上層區域（可選）</label>
|
||
<input v-model="currentSelectArea.parentAreaId" type="text" class="form-control" readonly />
|
||
</div>
|
||
<div class="col-12 col-sm-6">
|
||
<label>區域類型（可空）</label>
|
||
<input v-model="currentSelectArea.areaType" type="text" class="form-control" readonly/>
|
||
</div>
|
||
<div class="col-12 col-sm-6">
|
||
<label>價格</label>
|
||
<input v-model="currentSelectArea.price" class="form-control" readonly/>
|
||
</div>
|
||
<div class="col-12 col-sm-6">
|
||
<label>排序</label>
|
||
<input v-model="currentSelectArea.sortOrder" class="form-control" readonly/>
|
||
</div>
|
||
<div class="col-12 col-sm-6">
|
||
<div style="display: flex; align-items: center; height: 100%; margin-top: 8px;">
|
||
<input
|
||
v-model="currentSelectArea.isDisabled"
|
||
type="checkbox"
|
||
disabled
|
||
id="disabledToggle"
|
||
style="width: 20px; height: 20px; margin-right: 8px; cursor: pointer;"
|
||
/>
|
||
<label
|
||
for="disabledToggle"
|
||
style="font-weight: bold; font-size: 14px; color: #333; margin: 0;"
|
||
>
|
||
是否停用
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-12 mt-3">
|
||
<label>描述</label>
|
||
<textarea v-model="currentSelectArea.description" rows="3" class="form-control" readonly></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-4 col-lg-9" v-if="currentSelectArea">
|
||
<div class="card shadow-sm my-2" style="flex: 1 1 auto; min-height: 0; overflow: auto;">
|
||
<div class="card-header" style="display: flex; justify-content: space-between; align-items: center;background-color: #ffc107;">
|
||
<div>
|
||
{{currentSelectArea.areaName + ' - ' + '神主牌位置'}}
|
||
</div>
|
||
<div>
|
||
<v-btn color="primary" @click="openNewPositionDialogMethod">批次新增神主牌位置</v-btn>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="grid-container">
|
||
<div
|
||
v-for="pos in positions"
|
||
:key="pos.positionCode"
|
||
class="grid-item"
|
||
:class="'status-' + pos.statusCode"
|
||
:style="{ gridRow: pos.rowNo, gridColumn: pos.columnNo }"
|
||
>
|
||
<div class="position-name">{{ pos.positionName }}</div>
|
||
<div class="position-content">
|
||
<!-- 這裡可以放更多資訊，比如價格或狀態 -->
|
||
<!-- 例如：價格: {{ pos.price }} -->
|
||
<v-btn small @click="editPositionMethod(pos)">修改</v-btn>
|
||
<v-btn small @click="deletePositionMethod(pos)">刪除</v-btn>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 新增區域彈出視窗 -->
|
||
<div>
|
||
<v-dialog v-model="showNewAreadialogFlag" max-width="1200px">
|
||
<v-card
|
||
style="min-height: 50vh; max-height: 80vh; overflow-y: auto;"
|
||
>
|
||
<v-card-title>
|
||
<span class="headline">新增區域</span>
|
||
</v-card-title>
|
||
|
||
<v-card-text>
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-12 col-sm-6">
|
||
<label>區域名稱</label>
|
||
<input v-model="newArea.areaName" type="text" class="form-control" />
|
||
</div>
|
||
<div class="col-12 col-sm-6">
|
||
<label>區域編號</label>
|
||
<input v-model="newArea.areaCode" type="text" class="form-control" />
|
||
</div>
|
||
<div class="col-12 col-sm-6">
|
||
<label>上層區域（可選）</label>
|
||
<select v-model="newArea.parentAreaId" class="form-control" >
|
||
<option value="">請選擇</option>
|
||
<!-- 手動添加選項 -->
|
||
<option v-for="r in flatAreas"
|
||
:value="r.areaId"
|
||
:disabled="disabledParentOptions.includes(r.areaId)">{{ r.areaName }}
|
||
</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-12 col-sm-6">
|
||
<label>區域類型（可空）</label>
|
||
<input type="text" class="form-control" />
|
||
</div>
|
||
<div class="col-12 col-sm-6">
|
||
<label>價格</label>
|
||
<input v-model="newArea.price" class="form-control" />
|
||
</div>
|
||
<div class="col-12 col-sm-6">
|
||
<label>排序</label>
|
||
<input v-model="newArea.sortOrder" class="form-control" />
|
||
</div>
|
||
<div class="col-12 col-sm-6">
|
||
<div style="display: flex; align-items: center; height: 100%; margin-top: 8px;">
|
||
<input
|
||
v-model="newArea.isDisabled"
|
||
type="checkbox"
|
||
style="width: 20px; height: 20px; margin-right: 8px; cursor: pointer;"
|
||
/>
|
||
<label
|
||
for="disabledToggle"
|
||
style="font-weight: bold; font-size: 14px; color: #333; margin: 0;"
|
||
>
|
||
是否停用
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-12 mt-3">
|
||
<label>描述</label>
|
||
<textarea v-model="newArea.description" rows="3" class="form-control" ></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</v-card-text>
|
||
|
||
<v-card-actions>
|
||
<v-spacer></v-spacer>
|
||
<v-btn color="grey" text @click="closeNewAreadialogMethod">取消</v-btn>
|
||
<v-btn color="primary" @click="createNewAreaMethod">確定新增</v-btn>
|
||
</v-card-actions>
|
||
</v-card>
|
||
</v-dialog>
|
||
</div>
|
||
<!-- 編輯區域彈出視窗 -->
|
||
<div>
|
||
<v-dialog v-model="showEidtAreadialogFlag" max-width="1200px">
|
||
<v-card
|
||
style="min-height: 50vh; max-height: 80vh; overflow-y: auto;"
|
||
>
|
||
<v-card-title>
|
||
<span class="headline">編輯區域</span>
|
||
</v-card-title>
|
||
|
||
<v-card-text>
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-12 col-sm-6">
|
||
<label>區域名稱</label>
|
||
<input v-model="editArea.areaName" type="text" class="form-control" required />
|
||
</div>
|
||
<div class="col-12 col-sm-6">
|
||
<label>區域編號</label>
|
||
<input v-model="editArea.areaCode" type="text" class="form-control" required />
|
||
</div>
|
||
<div class="col-12 col-sm-6">
|
||
<label>上層區域（可選）</label>
|
||
<select v-model="editArea.parentAreaId" class="form-control" >
|
||
<option value="">請選擇</option>
|
||
<!-- 手動添加選項 -->
|
||
<option v-for="r in flatAreas"
|
||
:value="r.areaId"
|
||
:disabled="disabledParentOptions.includes(r.areaId)">{{ r.areaName }}
|
||
</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-12 col-sm-6">
|
||
<label>區域類型（可空）</label>
|
||
<input v-model="editArea.areaType" type="text" class="form-control" />
|
||
</div>
|
||
<div class="col-12 col-sm-6">
|
||
<label>價格</label>
|
||
<input v-model="editArea.price" class="form-control" />
|
||
</div>
|
||
<div class="col-12 col-sm-6">
|
||
<label>排序</label>
|
||
<input v-model="editArea.sortOrder" class="form-control" />
|
||
</div>
|
||
<div class="col-12 col-sm-6">
|
||
<div style="display: flex; align-items: center; height: 100%; margin-top: 8px;">
|
||
<input
|
||
v-model="editArea.isDisabled"
|
||
type="checkbox"
|
||
id="disabledToggle1"
|
||
style="width: 20px; height: 20px; margin-right: 8px; cursor: pointer;"
|
||
/>
|
||
<label
|
||
for="disabledToggle"
|
||
style="font-weight: bold; font-size: 14px; color: #333; margin: 0;"
|
||
>
|
||
是否停用
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-12 mt-3">
|
||
<label>描述</label>
|
||
<textarea v-model="editArea.description" rows="3" class="form-control" ></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</v-card-text>
|
||
|
||
<v-card-actions>
|
||
<v-spacer></v-spacer>
|
||
<v-btn color="grey" text @click="closeEidtAreadialogMethod">取消</v-btn>
|
||
<v-btn color="primary" @click="editAreaMethod">送出修改</v-btn>
|
||
</v-card-actions>
|
||
</v-card>
|
||
</v-dialog>
|
||
</div>
|
||
<!-- 批次新增神主牌彈出視窗 -->
|
||
<div>
|
||
<!-- 彈出視窗組件 -->
|
||
<v-dialog v-model="showNewPositionDialogFlag" max-width="800px">
|
||
<v-card>
|
||
<v-card-title>
|
||
批次新增神主牌位置
|
||
<v-spacer></v-spacer>
|
||
<v-btn icon @click="closeNewPositionDialogMethod">
|
||
<v-icon>mdi-close</v-icon>
|
||
</v-btn>
|
||
</v-card-title>
|
||
|
||
<v-card-text>
|
||
<div class="card p-3 mt-4">
|
||
<div class="row mb-2">
|
||
<div class="col">
|
||
<label>起始行</label>
|
||
<input v-model.number="batchPositionForm.startRow" type="number" class="form-control" />
|
||
</div>
|
||
<div class="col">
|
||
<label>起始列</label>
|
||
<input v-model.number="batchPositionForm.startCol" type="number" class="form-control" />
|
||
</div>
|
||
<div class="col">
|
||
<label>行數</label>
|
||
<input v-model.number="batchPositionForm.rows" type="number" class="form-control" />
|
||
</div>
|
||
<div class="col">
|
||
<label>列數</label>
|
||
<input v-model.number="batchPositionForm.cols" type="number" class="form-control" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row mb-2">
|
||
<div class="col">
|
||
<label>價格</label>
|
||
<input v-model.number="batchPositionForm.price" type="number" class="form-control" />
|
||
</div>
|
||
<div class="col">
|
||
<label>狀態</label>
|
||
<select v-model="batchPositionForm.status" class="form-control">
|
||
<option v-for="s in statusList" :key="s.statusCode" :value="s.statusCode">
|
||
{{ s.statusName }}
|
||
</option>
|
||
</select>
|
||
</div>
|
||
<div class="col">
|
||
<label>Name模板</label>
|
||
<input v-model="batchPositionForm.nameTemplate" class="form-control" placeholder="如：神位編號{code}" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row mb-3">
|
||
<div class="col">
|
||
<label>Code起始值</label>
|
||
<input v-model.number="batchPositionForm.startCode" type="number" class="form-control" />
|
||
</div>
|
||
<div class="col">
|
||
<label>Code長度</label>
|
||
<input v-model.number="batchPositionForm.codeLength" type="number" class="form-control" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="previewPositions.length">
|
||
<h3>預覽新增位置</h3>
|
||
<ul>
|
||
<li v-for="pos in previewPositions" :key="pos.PositionCode">
|
||
{{ pos.PositionCode }} - {{ pos.PositionName }} (行: {{ pos.RowNo }}, 列: {{ pos.ColumnNo }})
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</v-card-text>
|
||
|
||
<v-card-actions class="justify-end">
|
||
<v-btn color="primary" @click="generatePositionsMethod">生成預覽</v-btn>
|
||
<v-btn color="pirmary" @click="clearPreviewPositionsMethod">清除預覽</v-btn>
|
||
<v-btn color="primary" @click="confirmAddPositionsMethod">確認新增</v-btn>
|
||
</v-card-actions>
|
||
</v-card>
|
||
</v-dialog>
|
||
</div>
|
||
<!-- 編輯牌位位置彈出視窗 -->
|
||
<div v-if="currentEditPosition">
|
||
<v-dialog v-model="editPositionFormVisible" max-width="500">
|
||
<v-card>
|
||
<v-card-title class="text-h6">
|
||
編輯位置：{{ currentEditPosition?.positionName || '未選擇' }}
|
||
</v-card-title>
|
||
|
||
<v-card-text>
|
||
<div class="form-row">
|
||
<label>位置名稱：</label>
|
||
<input v-model="currentEditPosition.positionName" class="form-control" />
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<label>價格：</label>
|
||
<input v-model="currentEditPosition.price" type="number" class="form-control" />
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<label>狀態：</label>
|
||
<select v-model="currentEditPosition.statusCode" class="form-control">
|
||
<option v-for="s in statusList" :key="s.statusCode" :value="s.statusCode">
|
||
{{ s.statusName }}
|
||
</option>
|
||
</select>
|
||
</div>
|
||
</v-card-text>
|
||
|
||
<v-card-actions>
|
||
<v-spacer></v-spacer>
|
||
<v-btn color="primary" @click="saveEditPositionMethod">保存</v-btn>
|
||
<v-btn text @click="editPositionFormVisible = false">取消</v-btn>
|
||
</v-card-actions>
|
||
</v-card>
|
||
</v-dialog>
|
||
|
||
</div>
|
||
</asp:Content>
|
||
<asp:Content ID="Content4" ContentPlaceHolderID="offCanvasRight" Runat="Server">
|
||
</asp:Content>
|
||
<asp:Content ID="Content5" ContentPlaceHolderID="footer_script" Runat="Server">
|
||
<script>
|
||
Vue.component('region-item', {
|
||
props: ['item', 'selectedId', 'expandAll', 'collapseAll'],
|
||
data() {
|
||
return {
|
||
expanded: false, // 預設全部收起
|
||
}
|
||
},
|
||
watch: {
|
||
expandAll(newVal) {
|
||
if (newVal) {
|
||
this.expanded = true;
|
||
// 執行完後發事件通知父組件清除標誌
|
||
this.$nextTick(() => this.$emit('clear-expand-all'));
|
||
}
|
||
},
|
||
collapseAll(newVal) {
|
||
if (newVal) {
|
||
this.expanded = false;
|
||
this.$nextTick(() => this.$emit('clear-collapse-all'));
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
hasChildren() {
|
||
return this.item.children && this.item.children.length > 0;
|
||
},
|
||
icon() {
|
||
// 無論有無子節點，皆可點擊展開/收起
|
||
return this.expanded ? '▼' : '▶';
|
||
},
|
||
isSelected() {
|
||
return this.item.areaId === this.selectedId;
|
||
}
|
||
},
|
||
methods: {
|
||
toggle() {
|
||
this.expanded = !this.expanded;
|
||
},
|
||
select() {
|
||
this.$emit('select-area', this.item);
|
||
},
|
||
},
|
||
template: `
|
||
<div>
|
||
<span class="toggle-icon" @click="toggle">{{ icon }}</span>
|
||
<span @click="select"
|
||
class="region-item-label"
|
||
:class="{ 'selected': isSelected }">
|
||
{{ item.areaName }}
|
||
</span>
|
||
|
||
<!-- 子區域列表 -->
|
||
<ul v-if="hasChildren && expanded">
|
||
<li v-for="child in item.children" :key="child.areaId">
|
||
<region-item
|
||
:item="child"
|
||
:selected-id="selectedId"
|
||
:expand-all="expandAll"
|
||
:collapse-all="collapseAll"
|
||
@select-area="$emit('select-area', $event)"
|
||
@clear-expand-all="$emit('clear-expand-all')"
|
||
@clear-collapse-all="$emit('clear-collapse-all')"
|
||
/>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
`
|
||
});
|
||
new Vue({
|
||
el: '#app',
|
||
vuetify: new Vuetify(vuetify_options),
|
||
data() {
|
||
return {
|
||
expandAllFlag: false, // 控制全部展開
|
||
collapseAllFlag: false, // 控制全部收起
|
||
ancestral_tablet_areas: [], //神主牌區域列表
|
||
currentSelectArea: null,
|
||
currentSelectAreaId: null,
|
||
showEidtAreadialogFlag: false,
|
||
showNewAreadialogFlag: false,
|
||
showAreaDataFlag: false,//是否顯示區域資料
|
||
flatAreas: [],//所有區域展平
|
||
disabledParentOptions: [],//某個區域禁止選擇作為父區域的函數
|
||
newArea: {
|
||
areaId: null, // 自增主鍵，新增時通常為 null
|
||
areaName: null, // 區域名稱，必填
|
||
areaCode: null, // 區域編號，必填
|
||
parentAreaId: null, // 上層區域 ID，可為 null
|
||
areaType: null, // 區域類型，可空
|
||
price: null, // 價格，可空
|
||
sortOrder: null, // 排序，可空
|
||
description: null, // 區域描述
|
||
isDisabled: null
|
||
},
|
||
editArea: {
|
||
areaId: null, // 自增主鍵，新增時通常為 null
|
||
areaName: null, // 區域名稱，必填
|
||
areaCode: null, // 區域編號，必填
|
||
parentAreaId: null, // 上層區域 ID，可為 null
|
||
areaType: null, // 區域類型，可空
|
||
price: null, // 價格，可空
|
||
sortOrder: null, // 排序，可空
|
||
description: null, // 區域描述
|
||
isDisabled: null
|
||
},
|
||
statusList: [],
|
||
//--------------------------------神主牌位置變數
|
||
showNewPositionDialogFlag: false,//控制是否顯示批次新增神主牌彈出視窗
|
||
editPositionFormVisible: false, // 控制是否顯示編輯彈出視窗
|
||
currentEditPosition: null, // 儲存當前正在編輯的位置資訊
|
||
batchPositionForm: {
|
||
startRow: 1,
|
||
startCol: 1,
|
||
rows: 5,
|
||
cols: 10,
|
||
price: 0,
|
||
status: 'available',
|
||
nameTemplate: '神位{code}',
|
||
startCode: 1,
|
||
codeLength: 3
|
||
},
|
||
positions: [],
|
||
// 預覽數據
|
||
previewPositions: [],
|
||
//--------------------------------神主牌位置變數
|
||
|
||
}
|
||
},
|
||
methods: {
|
||
selectAreaMethod(area) {
|
||
this.currentSelectAreaId = area.areaId;
|
||
this.currentSelectArea = area;
|
||
const node = this.findRegionById(this.ancestral_tablet_areas, area.areaId);
|
||
this.disabledParentOptions = this.getAllDescendants(node);
|
||
this.loadTabletPositionsMethod(area.areaId);
|
||
},
|
||
showEidtAreadialogMethod() {
|
||
this.showEidtAreadialogFlag = true;
|
||
if (this.currentSelectArea) {
|
||
this.editArea = {
|
||
areaId: this.currentSelectArea?.areaId,
|
||
areaName: this.currentSelectArea?.areaName,
|
||
areaCode: this.currentSelectArea?.areaCode,
|
||
parentAreaId: this.currentSelectArea?.parentAreaId ?? null,
|
||
areaType: this.currentSelectArea?.areaType ?? null,
|
||
price: this.currentSelectArea?.price ?? null,
|
||
sortOrder: this.currentSelectArea?.sortOrder ?? null,
|
||
description: this.currentSelectArea?.description ?? null,
|
||
isDisabled: this.currentSelectArea?.isDisabled ?? true
|
||
};
|
||
}
|
||
|
||
},
|
||
closeEidtAreadialogMethod() {
|
||
this.showEidtAreadialogFlag = false;
|
||
this.resetEditArea();
|
||
},
|
||
showNewtAreadialogMethod() {
|
||
this.showNewAreadialogFlag = true;
|
||
},
|
||
closeNewAreadialogMethod() {
|
||
this.showNewAreadialogFlag = false;
|
||
this.resetNewArea();
|
||
},
|
||
createNewAreaMethod() {
|
||
//新建區域
|
||
axios.post(HTTP_HOST + 'api/ancestraltablet/area/create', this.newArea)
|
||
.then(response => {
|
||
this.closeEidtAreadialogMethod();
|
||
this.getAreaListMethod();
|
||
})
|
||
.catch(error => {
|
||
console.error('失敗:', error);
|
||
});
|
||
|
||
},
|
||
editAreaMethod() {
|
||
//修改區域資料
|
||
axios.post(HTTP_HOST + 'api/ancestraltablet/area/edit', this.editArea)
|
||
.then(response => {
|
||
this.currentSelectArea = response.data.area;
|
||
this.getAreaListMethod();
|
||
this.closeEidtAreadialogMethod();
|
||
})
|
||
.catch(error => {
|
||
console.error('失敗:', error);
|
||
});
|
||
|
||
},
|
||
resetNewArea() {
|
||
this.newArea = {
|
||
areaId: null,
|
||
areaName: null,
|
||
areaCode: null,
|
||
parentAreaId: null,
|
||
areaType: null,
|
||
price: null,
|
||
sortOrder: null,
|
||
description: null,
|
||
isDisabled: false
|
||
};
|
||
},
|
||
resetEditArea() {
|
||
this.editArea = {
|
||
areaId: null,
|
||
areaName: null,
|
||
areaCode: null,
|
||
parentAreaId: null,
|
||
areaType: null,
|
||
price: null,
|
||
sortOrder: null,
|
||
description: null,
|
||
isDisabled: false
|
||
};
|
||
},
|
||
getAreaListMethod() {
|
||
//獲取區域列表
|
||
axios.get(HTTP_HOST + 'api/ancestraltablet/area/getlist')
|
||
.then(res => {
|
||
this.ancestral_tablet_areas = res.data
|
||
this.flatAreas = this.flattenAreas(res.data);
|
||
})
|
||
},
|
||
expandAll() {
|
||
this.expandAllFlag = true;
|
||
this.collapseAllFlag = false;
|
||
},
|
||
collapseAll() {
|
||
this.collapseAllFlag = true;
|
||
this.expandAllFlag = false;
|
||
},
|
||
|
||
//區域展開是否可以被選擇作為上級區域相關函數
|
||
flattenAreas(data, list = []) {
|
||
data.forEach(item => {
|
||
list.push({ areaId: item.areaId, areaName: item.areaName });
|
||
if (item.children && item.children.length) {
|
||
this.flattenAreas(item.children, list);
|
||
}
|
||
});
|
||
return list;
|
||
},
|
||
findRegionById(list, areaId) {
|
||
for (const item of list) {
|
||
if (item.areaId === areaId) return item;
|
||
if (item.children) {
|
||
const found = this.findRegionById(item.children, areaId);
|
||
if (found) return found;
|
||
}
|
||
}
|
||
return null;
|
||
},
|
||
getAllDescendants(node) {
|
||
//尋找某個區域的所有子區域
|
||
const ids = [];
|
||
const dfs = (n) => {
|
||
ids.push(n.areaId);
|
||
if (n.children) {
|
||
n.children.forEach(child => dfs(child));
|
||
}
|
||
};
|
||
dfs(node);
|
||
return ids;
|
||
},
|
||
toggleAreaData() {
|
||
this.showAreaDataFlag = !this.showAreaDataFlag;
|
||
},
|
||
//--------------------------------神主牌位置相關函數
|
||
padCodeMethod(codeNum, length) {
|
||
return codeNum.toString().padStart(length, '0');
|
||
},
|
||
loadTabletPositionsMethod(areaId) {
|
||
axios.get(HTTP_HOST + 'api/ancestraltablet/area/position/getlist', {
|
||
params: {
|
||
areaId: areaId
|
||
}
|
||
})
|
||
.then(response => {
|
||
this.positions = response.data;
|
||
})
|
||
.catch(error => {
|
||
console.error('失敗:', error);
|
||
});
|
||
},
|
||
generatePositionsMethod() {
|
||
const form = this.batchPositionForm;
|
||
const positions = [];
|
||
let codeCounter = form.startCode;
|
||
|
||
for (let i = 0; i < form.rows; i++) {
|
||
for (let j = 0; j < form.cols; j++) {
|
||
const row = form.startRow + i;
|
||
const col = form.startCol + j;
|
||
const paddedCode = this.padCodeMethod(codeCounter, form.codeLength);
|
||
const positionCode = paddedCode;
|
||
const positionName = form.nameTemplate.replace('{code}', paddedCode);
|
||
|
||
positions.push({
|
||
AreaId: this.currentSelectArea.areaId,
|
||
RowNo: row,
|
||
ColumnNo: col,
|
||
PositionCode: positionCode,
|
||
PositionName: positionName,
|
||
Price: form.price,
|
||
StatusCode: form.status,
|
||
Description: ''
|
||
});
|
||
|
||
codeCounter++;
|
||
}
|
||
}
|
||
this.previewPositions = positions; // 先賦值預覽，不發請求
|
||
},
|
||
async confirmAddPositionsMethod() {
|
||
if (this.previewPositions.length === 0) {
|
||
alert('請先生成預覽數據');
|
||
return;
|
||
}
|
||
// 調用後端批次新增介面
|
||
try {
|
||
const response = await axios.post(
|
||
`${HTTP_HOST}api/ancestraltablet/position/batchcreate`,
|
||
this.previewPositions
|
||
);
|
||
|
||
// 如果後端成功響應（HTTP 200/201）
|
||
alert('批次新增成功');
|
||
this.loadTabletPositionsMethod(this.currentSelectArea.areaId); // 刷新數據
|
||
} catch (error) {
|
||
// 捕獲錯誤響應（如500、400等）
|
||
console.error('批次新增失敗', error);
|
||
|
||
let msg = '批次新增失敗';
|
||
if (error.response && error.response.data && error.response.data.exceptionMessage) {
|
||
msg += `：${error.response.data.exceptionMessage}`;
|
||
}
|
||
|
||
alert(msg);
|
||
}
|
||
this.previewPositions = []; // 清空預覽
|
||
},
|
||
clearPreviewPositionsMethod() {
|
||
this.previewPositions = [];
|
||
},
|
||
openNewPositionDialogMethod() {
|
||
this.showNewPositionDialogFlag = true;
|
||
this.batchPositionForm.price = this.currentSelectArea.price
|
||
},
|
||
closeNewPositionDialogMethod() {
|
||
this.showNewPositionDialogFlag = false;
|
||
this.previewPositions = [];
|
||
},
|
||
editPositionMethod(position) {
|
||
// 彈出編輯表單、打開模態框或跳轉到編輯頁面
|
||
this.currentEditPosition = position;
|
||
this.editPositionFormVisible = true;
|
||
},
|
||
async saveEditPositionMethod() {
|
||
try {
|
||
await axios.post(`${HTTP_HOST}api/ancestraltablet/position/edit`, this.currentEditPosition);
|
||
this.$message?.success?.('保存成功') || alert('保存成功');
|
||
this.editPositionFormVisible = false;
|
||
this.loadTabletPositionsMethod(this.currentSelectArea.areaId);
|
||
this.currentEditPosition = null
|
||
} catch (error) {
|
||
console.error(error);
|
||
this.$message?.error?.('保存失敗') || alert('保存失敗');
|
||
}
|
||
},
|
||
async deletePositionMethod(position) {
|
||
if (confirm(`確定要刪除【${position.positionName}】嗎？`)) {
|
||
try {
|
||
await axios.delete(`${HTTP_HOST}api/ancestraltablet/position/delete/${position.positionId}`);
|
||
this.$message?.success?.('刪除成功'); // 如果用的是 Element Plus 或其他 UI 框架
|
||
this.loadTabletPositionsMethod(this.currentSelectArea.areaId); // 刷新數據
|
||
} catch (error) {
|
||
console.error('刪除失敗', error);
|
||
this.$message?.error?.('刪除失敗，請檢查網路或稍後再試');
|
||
}
|
||
}
|
||
},
|
||
//--------------------------------神主牌位置相關函數
|
||
async loadStatusList() {
|
||
//獲取狀態列表
|
||
try {
|
||
const response = await axios.get(`${HTTP_HOST}api/ancestraltablet/status/list`);
|
||
this.statusList = response.data;
|
||
} catch (err) {
|
||
console.error('獲取狀態列表失敗', err);
|
||
}
|
||
}
|
||
|
||
},
|
||
watch: {
|
||
|
||
},
|
||
mounted() {
|
||
this.getAreaListMethod();
|
||
this.loadStatusList();
|
||
}
|
||
});
|
||
</script>
|
||
<style>
|
||
.tree, .tree ul {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding-left: 1rem;
|
||
}
|
||
.toggle-icon {
|
||
cursor: pointer;
|
||
user-select: none;
|
||
width: 1rem;
|
||
display: inline-block;
|
||
color: #007bff;
|
||
}
|
||
.region-item-label {
|
||
cursor: pointer;
|
||
padding: 2px 6px;
|
||
border-radius: 4px;
|
||
display: inline-block;
|
||
}
|
||
.region-item-label.selected {
|
||
background-color: #eaf4ff;
|
||
color: #0d6efd;
|
||
font-weight: bold;
|
||
}
|
||
.grid-container {
|
||
display: grid;
|
||
grid-template-columns: repeat(10, 120px); /* 6列 */
|
||
grid-auto-rows: 100px; /* 行高 */
|
||
gap: 10px;
|
||
}
|
||
/* 可用（綠色） */
|
||
.status-available {
|
||
background-color: #d4edda;
|
||
border-color: #28a745;
|
||
}
|
||
|
||
/* 維護中（黃色） */
|
||
.status-maintenance {
|
||
background-color: #fff3cd;
|
||
border-color: #ffc107;
|
||
}
|
||
|
||
/* 預訂中（藍色） */
|
||
.status-reserved {
|
||
background-color: #cce5ff;
|
||
border-color: #007bff;
|
||
}
|
||
|
||
/* 已使用（灰色） */
|
||
.status-used {
|
||
background-color: #e2e3e5;
|
||
border-color: #6c757d;
|
||
}
|
||
.grid-item {
|
||
border: 1px solid #ccc;
|
||
border-radius: 4px;
|
||
box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.position-name {
|
||
background-color: #f0f0f0;
|
||
padding: 4px 8px;
|
||
font-weight: bold;
|
||
font-size: 14px;
|
||
text-align: center;
|
||
border-bottom: 1px solid #ddd;
|
||
}
|
||
|
||
.position-content {
|
||
flex-grow: 1;
|
||
padding: 3px;
|
||
font-size: 12px;
|
||
color: #666;
|
||
}
|
||
</style>
|
||
</asp:Content> |