ts-glitter 22.4.7 → 22.5.0

package/lowcode/cms-plugin/shopping-collections.js

@@ -42,8 +42,10 @@ export class ShoppingCollections {
                 },
             },
             dataList: undefined,
+            collectionList: [],
             query: '',
             allParents: [],
+            cloneTarget: null,
         };
         const dialog = new ShareDialog(gvc.glitter);
         const updateCollections = (data) => {
@@ -109,116 +111,152 @@ export class ShoppingCollections {
                 dataList: [{ obj: vm, key: 'type' }],
                 view: () => {
                     if (vm.type === 'list') {
+                        vm.cloneTarget = null;
                         return BgWidget.container(html `
               <div class="title-container">
                 ${BgWidget.title('商品分類')}
                 <div class="flex-fill"></div>
                 <div class="d-flex gap-2">
                   ${BgWidget.grayButton('編輯順序', gvc.event(() => {
-                            return BgWidget.infoDialog({
+                            const cloneCollectionList = vm.collectionList.slice();
+                            return BgWidget.settingDialog({
                                 gvc,
                                 title: '編輯順序',
-                                innerHTML: gvc.bindView((() => {
+                                width: 700,
+                                innerHTML: (iGVC) => {
                                     const id = glitter.getUUID();
                                     let loading = true;
-                                    return {
+                                    this.addStyle(iGVC);
+                                    return iGVC.bindView({
                                         bind: id,
                                         view: () => {
                                             if (loading) {
-                                                this.addStyle(gvc);
-                                                return '';
+                                                return BgWidget.spinner();
                                             }
-                                            else {
-                                                return html ` <div class="d-flex">
-                                    <div class="parent-container">
-                                      <div class="tx_title text-center mb-2">父層類別</div>
-                                      <ul class="ul-style" id="parent-list">
-                                        <!-- TS 生成的父層類別列表 -->
-                                      </ul>
-                                    </div>
-                                    <div class="child-container">
-                                      <div class="tx_title text-center mb-2">子層類別</div>
-                                      <ul class="ul-style" id="child-list">
-                                        <!-- TS 生成的子層類別列表 -->
-                                      </ul>
+                                            return html `
+                                <div class="p-2">
+                                  ${BgWidget.grayNote('提示：左鍵拖曳可排列順序，點擊可顯示向下一層分類')}
+                                  <div class="d-flex justify-content-start mt-3">
+                                    <div class="layer-container">
+                                      ${[0, 1, 2]
+                                                .map(depth => {
+                                                const title = ['第一層分類', '第二層分類', '第三層分類'][depth];
+                                                return html ` <div class="flex-1 layer-block">
+                                            <div class="tx_700 fs-4 text-center mb-2">${title}</div>
+                                            <ul class="ul-style" id="layer-list-${depth}"></ul>
+                                          </div>`;
+                                            })
+                                                .join('')}
                                     </div>
-                                  </div>`;
-                                            }
+                                  </div>
+                                </div>
+                              `;
                                         },
-                                        divCreate: {},
                                         onCreate: () => {
+                                            var _a;
                                             if (loading) {
-                                                gvc.addMtScript([
-                                                    {
-                                                        src: 'https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js',
-                                                    },
-                                                ], () => {
+                                                iGVC.addMtScript([{ src: 'https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js' }], () => {
                                                     const si = setInterval(() => {
-                                                        if (window.Sortable !== undefined) {
+                                                        if (window.parent.Sortable !== undefined) {
                                                             loading = false;
                                                             clearInterval(si);
-                                                            gvc.notifyDataChange(id);
+                                                            iGVC.notifyDataChange(id);
                                                         }
                                                     }, 300);
                                                 }, () => { });
                                             }
                                             else {
+                                                const document = window.parent.document;
                                                 function createListItem(item, index) {
+                                                    var _a;
                                                     const li = document.createElement('li');
                                                     li.className = 'li-style';
                                                     li.setAttribute('data-index', index.toString());
-                                                    li.setAttribute('data-parent', item.parentTitles[0] || 'root');
+                                                    li.setAttribute('data-path', [...((_a = item.parentTitles) !== null && _a !== void 0 ? _a : []), item.title].join(' / '));
                                                     li.innerHTML = `<span class="drag-icon"></span><span class="tx_normal">${item.title}</span>`;
+                                                    li.addEventListener('click', (e) => {
+                                                        var _a;
+                                                        const target = e.currentTarget;
+                                                        const ul = target.closest('ul');
+                                                        if (ul) {
+                                                            Array.from(ul.children).forEach((element) => {
+                                                                element.style.backgroundColor = '#dddddd';
+                                                            });
+                                                        }
+                                                        target.style.backgroundColor = '#d8ecda';
+                                                        loadChildLayer([...((_a = item.parentTitles) !== null && _a !== void 0 ? _a : []), item.title]);
+                                                    });
                                                     return li;
                                                 }
                                                 function initSortable(containerId) {
-                                                    const el = document.querySelector(`#${containerId}`);
-                                                    window.Sortable.create(el, {
-                                                        animation: 150,
-                                                        onEnd: function () {
-                                                            const items = [...el.children].map(child => vm.dataList[parseInt(child.getAttribute('data-index'))]);
-                                                            ApiShop.sortCollections({
-                                                                data: { list: items },
-                                                                token: window.parent.config.token,
-                                                            }).then(res => {
-                                                                if (res.result && !res.response) {
-                                                                    dialog.errorMessage({ text: '更改順序失敗' });
-                                                                }
-                                                            });
+                                                    const el = document.getElementById(containerId);
+                                                    window.parent.Sortable.create(el, {
+                                                        animation: 200,
+                                                        scroll: true,
+                                                        onEnd: () => {
+                                                            const items = [...el.children].map(child => { var _a; return (_a = vm.dataList) === null || _a === void 0 ? void 0 : _a[parseInt(child.getAttribute('data-index'))]; });
+                                                            vm.collectionList = ShoppingCollections.sortedCollectionConfig(vm.collectionList, items);
                                                         },
                                                     });
                                                 }
-                                                function loadChildItems(parentTitle) {
-                                                    const childContainer = document.getElementById('child-list');
-                                                    childContainer.innerHTML = '';
-                                                    vm.dataList.forEach((item, index) => {
-                                                        if (item.parentTitles[0] === parentTitle) {
-                                                            childContainer.appendChild(createListItem(item, index));
+                                                function loadChildLayer(parentPath) {
+                                                    var _a;
+                                                    const nextDepth = parentPath.length;
+                                                    const nextId = `layer-list-${nextDepth}`;
+                                                    for (let i = nextDepth; i < 3; i++) {
+                                                        const el = document.getElementById(`layer-list-${i}`);
+                                                        if (el)
+                                                            el.innerHTML = '';
+                                                    }
+                                                    const container = document.getElementById(nextId);
+                                                    container.innerHTML = '';
+                                                    (_a = vm.dataList) === null || _a === void 0 ? void 0 : _a.forEach((item, index) => {
+                                                        var _a;
+                                                        const path = (_a = item.parentTitles) !== null && _a !== void 0 ? _a : [];
+                                                        if (path.length === parentPath.length &&
+                                                            path.every((p, i) => p === parentPath[i])) {
+                                                            container.appendChild(createListItem(item, index));
                                                         }
                                                     });
-                                                    initSortable('child-list');
+                                                    initSortable(nextId);
                                                 }
-                                                const parentContainer = document.getElementById('parent-list');
-                                                vm.dataList.forEach((item, index) => {
-                                                    if (item.parentTitles.length === 0) {
-                                                        const li = createListItem(item, index);
-                                                        li.addEventListener('click', () => {
-                                                            loadChildItems(item.title);
-                                                            document
-                                                                .querySelectorAll('#parent-list li')
-                                                                .forEach(li => li.classList.remove('selectCol'));
-                                                            li.classList.add('selectCol');
-                                                        });
-                                                        parentContainer.appendChild(li);
+                                                const root = document.getElementById('layer-list-0');
+                                                root.innerHTML = '';
+                                                (_a = vm.dataList) === null || _a === void 0 ? void 0 : _a.forEach((item, index) => {
+                                                    var _a;
+                                                    if (((_a = item.parentTitles) !== null && _a !== void 0 ? _a : []).length === 0) {
+                                                        root.appendChild(createListItem(item, index));
                                                     }
                                                 });
-                                                initSortable('parent-list');
+                                                initSortable('layer-list-0');
                                             }
                                         },
-                                    };
-                                })()),
-                                closeCallback: () => {
-                                    gvc.notifyDataChange(vm.id);
+                                    });
+                                },
+                                footer_html: (fGVC) => {
+                                    return [
+                                        BgWidget.cancel(fGVC.event(() => {
+                                            vm.collectionList = cloneCollectionList;
+                                            fGVC.closeDialog();
+                                        })),
+                                        BgWidget.save(fGVC.event(() => {
+                                            dialog.dataLoading({ visible: true });
+                                            ApiShop.sortCollections({
+                                                data: { list: vm.collectionList },
+                                                token: window.parent.config.token,
+                                            }).then(res => {
+                                                dialog.dataLoading({ visible: false });
+                                                if (res.result && !res.response) {
+                                                    dialog.errorMessage({ text: '更改順序失敗' });
+                                                }
+                                                else {
+                                                    dialog.successMessage({ text: '更改順序成功' });
+                                                    fGVC.closeDialog();
+                                                    gvc.notifyDataChange(vm.id);
+                                                }
+                                            });
+                                        })),
+                                    ].join('');
                                 },
                             });
                         }))}
@@ -249,7 +287,7 @@ export class ShoppingCollections {
                             BgWidget.searchPlace(gvc.event(e => {
                                 vm.query = e.value;
                                 gvc.notifyDataChange(vm.id);
-                            }), vm.query || '', '搜尋類別'),
+                            }), vm.query || '', '搜尋分類'),
                             BgWidget.tableV3({
                                 gvc: gvc,
                                 getData: vmi => {
@@ -261,7 +299,8 @@ export class ShoppingCollections {
                                             const products = d.response.data;
                                             ApiShop.getCollection().then(data => {
                                                 if (data.result && data.response.value.length > 0) {
-                                                    vm.allParents = ['(無)'].concat(data.response.value.map((item) => item.title));
+                                                    vm.collectionList = data.response.value;
+                                                    vm.allParents = [this.undefinedOption].concat(data.response.value.map((item) => item.title));
                                                     const collections = updateCollections({
                                                         products,
                                                         collections: data.response.value,
@@ -286,7 +325,7 @@ export class ShoppingCollections {
                                                                 if (isChildren) {
                                                                     const parent = collectionsMap.get(dd.parentTitles[0]);
                                                                     if ((parent === null || parent === void 0 ? void 0 : parent.hidden) && dd.hidden) {
-                                                                        dialog.infoMessage({ text: '請先開啟顯示父層類別' });
+                                                                        dialog.infoMessage({ text: '請先開啟顯示第一層分類' });
                                                                     }
                                                                     else {
                                                                         triggerHidden();
@@ -298,7 +337,7 @@ export class ShoppingCollections {
                                                                     }
                                                                     else {
                                                                         dialog.checkYesOrNot({
-                                                                            text: '若關閉顯示該父層類別，所有子層也將會關閉顯示，是否確定要執行？',
+                                                                            text: '若關閉顯示該層分類，子層分類也將會關閉顯示，是否確定要執行？',
                                                                             callback: bool => bool && triggerHidden(),
                                                                         });
                                                                     }
@@ -309,12 +348,14 @@ export class ShoppingCollections {
                                                                     key: '標題',
                                                                     value: html `<div
                                           class="fs-7"
-                                          style="min-width: ${document.body.clientWidth > 768 ? 400 : 225}px;"
+                                          style="min-width: ${document.body.clientWidth > 768
+                                                                        ? 400
+                                                                        : 225}px; padding-left: ${4 + dd.parentTitles.length * 12}px"
                                         >
-                                          ${isChildren
-                                                                        ? html ` <i class="fa-solid fa-arrow-turn-down-right me-2"></i
-                                                >${dd.parentTitles.join(' / ')} / ${dd.title}`
-                                                                        : dd.title}
+                                          ${dd.parentTitles.length > 0
+                                                                        ? html `<i class="fa-solid fa-arrow-turn-down-right me-1"></i>`
+                                                                        : ''}
+                                          ${dd.title}
                                         </div>`,
                                                                 },
                                                                 {
@@ -351,7 +392,9 @@ export class ShoppingCollections {
                                     });
                                 },
                                 rowClick: (_, index) => {
-                                    vm.data = vm.dataList[index];
+                                    if (vm.dataList) {
+                                        vm.data = vm.dataList[index];
+                                    }
                                     vm.type = 'replace';
                                 },
                                 filter: [
@@ -359,12 +402,13 @@ export class ShoppingCollections {
                                         name: '批量移除',
                                         event: () => {
                                             dialog.checkYesOrNot({
-                                                text: '確定要刪除商品類別嗎？<br/>（若此類別包含子類別，也將一併刪除）',
+                                                text: '確定要刪除商品分類嗎？<br/>（若包含子分類，也將一併刪除）',
                                                 callback: response => {
+                                                    var _a;
                                                     if (response) {
                                                         dialog.dataLoading({ visible: true });
                                                         ApiShop.deleteCollections({
-                                                            data: { data: vm.dataList.filter((dd) => dd.checked) },
+                                                            data: { data: (_a = vm.dataList) === null || _a === void 0 ? void 0 : _a.filter(dd => dd.checked) },
                                                             token: window.parent.config.token,
                                                         }).then(res => {
                                                             dialog.dataLoading({ visible: false });
@@ -390,6 +434,7 @@ export class ShoppingCollections {
             `);
                     }
                     else if (vm.type == 'replace') {
+                        vm.cloneTarget = null;
                         return this.editorDetail({
                             vm: vm,
                             gvc: gvc,
@@ -409,33 +454,33 @@ export class ShoppingCollections {
     }
     static addStyle(gvc) {
         gvc.addStyle(`
-      .parent-container,
-      .child-container {
-        flex: 1;
+      .layer-container {
+        display: flex;
+        gap: 18px;
         margin-right: 20px;
       }
 
-      .parent-container:last-child,
-      .child-container:last-child {
-        margin-right: 0;
-      }
-
       .ul-style {
         list-style-type: none;
-        padding: 0;
+        padding: 8px;
         margin: 0;
         min-height: 200px;
         border: 1px solid #ccc;
+        border-radius: 10px;
+        width: 190px;
+        height: 380px;
+        overflow-y: auto;
       }
 
       .li-style {
+        width: 100%;
         padding: 6px 10px;
-        margin-bottom: 5px;
-        background-color: #eee;
+        margin-bottom: 6px;
+        background-color: #dddddd;
         cursor: move;
-        border: 1px solid #ccc;
         display: flex;
         align-items: center;
+        border-radius: 10px;
       }
 
       .drag-icon {
@@ -444,34 +489,32 @@ export class ShoppingCollections {
       }
 
       .drag-icon::before {
-        content: '↕';
-        font-size: 18px;
-        margin-right: 10px;
-      }
-
-      .selectCol {
-        background-color: #dcdcdc;
+        content: '⠿';
+        font-size: 20px;
+        cursor: grab;
       }
     `);
     }
     static editorDetail(obj) {
+        var _a;
         const gvc = obj.gvc;
         const glitter = gvc.glitter;
         const vm = obj.vm;
+        const dialog = new ShareDialog(glitter);
         const original = JSON.parse(JSON.stringify(vm.data));
-        const dialog = new ShareDialog(gvc.glitter);
+        const originDataList = JSON.parse(JSON.stringify((_a = vm.dataList) !== null && _a !== void 0 ? _a : []));
         const language_setting = window.parent.store_info.language_setting;
         let select_lan = language_setting.def;
         function getValidLangDomain() {
             const supports = language_setting.support;
-            const dataList = vm.dataList.filter((data) => data.title !== vm.data.title);
+            const targetData = vm.cloneTarget && vm.cloneTarget.title === vm.data.title ? vm.cloneTarget : original;
+            const dataList = originDataList.filter(item => {
+                return [...item.parentTitles, item.title].join('') !== [...targetData.parentTitles, targetData.title].join('');
+            });
             const lagDomain = supports.map(lang => {
-                const domainMap = dataList.map((item) => {
-                    if (!item.language_data) {
-                        return '';
-                    }
+                const domainMap = dataList === null || dataList === void 0 ? void 0 : dataList.map(item => {
                     try {
-                        return item.language_data[lang].seo.domain;
+                        return item.language_data ? item.language_data[lang].seo.domain : '';
                     }
                     catch (error) {
                         return '';
@@ -488,7 +531,7 @@ export class ShoppingCollections {
                     });
                     return {
                         result: false,
-                        text: `語系「${text}」的連結網址「${vm.data.language_data[data.lang].seo.domain}」<br />已存在於其他類別，請更換連結網址`,
+                        text: `語系「${text}」的連結網址「${vm.data.language_data[data.lang].seo.domain}」<br />已存在於其他分類，請更換連結網址`,
                     };
                 }
             }
@@ -497,9 +540,7 @@ export class ShoppingCollections {
         return gvc.bindView(() => {
             const viewID = gvc.glitter.getUUID();
             const domainID = gvc.glitter.getUUID();
-            function refresh() {
-                gvc.notifyDataChange(viewID);
-            }
+            const refresh = () => gvc.notifyDataChange(viewID);
             return {
                 bind: viewID,
                 view: () => {
@@ -525,10 +566,10 @@ export class ShoppingCollections {
                 ${BgWidget.goBack(gvc.event(() => {
                             vm.type = 'list';
                         }))}
-                ${BgWidget.title(obj.type === 'add' ? '新增類別' : '編輯類別')}
+                ${BgWidget.title(obj.type === 'add' ? '新增分類' : '編輯分類')}
                 <div class="flex-fill"></div>
-                <div class="me-2 ">
-                  ${BgWidget.grayButton(html `<div class="d-flex align-items-center" style="gap:5px;">
+                <div class="d-flex align-items-center gap-2">
+                  ${BgWidget.grayButton(html ` <div class="d-flex align-items-center gap-2">
                       <i class="fa-duotone fa-solid fa-earth-americas"></i>${Language.getLanguageText({
                             local: true,
                             compare: select_lan,
@@ -543,7 +584,7 @@ export class ShoppingCollections {
                                             bind: id,
                                             view: () => {
                                                 return html ` <div
-                                    style="position: relative;word-break: break-all;white-space: normal;"
+                                    style="position: relative; word-break: break-all; white-space: normal;"
                                   >
                                     ${BgWidget.grayNote('前往商店設定->商店訊息中，設定支援的語言。')}
                                     ${gvc.bindView(() => {
@@ -567,7 +608,7 @@ export class ShoppingCollections {
                                                                 .filter(dd => {
                                                                 return window.parent.store_info.language_setting.support.includes(dd.key);
                                                             })
-                                                                .sort((dd) => {
+                                                                .sort(dd => {
                                                                 return dd.key === select_lan ? -1 : 1;
                                                             });
                                                             return html ` <div
@@ -575,7 +616,7 @@ export class ShoppingCollections {
                                             style="gap:15px;"
                                           >
                                             ${sup
-                                                                .map((dd) => {
+                                                                .map(dd => {
                                                                 return html `
                                                   <div
                                                     class="px-3 py-1 text-white position-relative d-flex align-items-center justify-content-center"
@@ -590,8 +631,8 @@ export class ShoppingCollections {
                                                     <div
                                                       class="position-absolute  text-white rounded-2 px-2 d-flex align-items-center rounded-3 ${dd.key !==
                                                                     select_lan
-                                                                    ? `d-none`
-                                                                    : ``}"
+                                                                    ? 'd-none'
+                                                                    : ''}"
                                                       style="top: -12px;right: -10px; height:20px;font-size: 11px;background: #ff6c02;"
                                                     >
                                                       已選擇
@@ -606,8 +647,6 @@ export class ShoppingCollections {
                                                 })}
                                   </div>`;
                                             },
-                                            divCreate: {},
-                                            onCreate: () => { },
                                         };
                                     })());
                                 },
@@ -618,6 +657,24 @@ export class ShoppingCollections {
                                 width: 300,
                             });
                         }))}
+                  ${vm.type === 'add'
+                            ? BgWidget.grayButton('代入現有分類', gvc.event(() => {
+                                BgProduct.collectionsDialog({
+                                    gvc: gvc,
+                                    default: [],
+                                    callback: value => {
+                                        var _a;
+                                        const data = (_a = vm.dataList) === null || _a === void 0 ? void 0 : _a.find(item => [...item.parentTitles, item.title].join(' / ') === value[0]);
+                                        if (data) {
+                                            vm.data = data;
+                                            vm.cloneTarget = structuredClone(data);
+                                        }
+                                        gvc.notifyDataChange(viewID);
+                                    },
+                                    single: true,
+                                });
+                            }))
+                            : ''}
                 </div>
               </div>`,
                         BgWidget.container1x2({
@@ -634,7 +691,7 @@ export class ShoppingCollections {
                                 })}`),
                                 BgWidget.mainCard(html ` <div class="d-flex flex-column" style="margin-bottom: 12px; gap:5px;">
                           <div class="tx_700">前台分類顯示名稱 ${BgWidget.languageInsignia(select_lan)}</div>
-                          ${BgWidget.grayNote(`未設定則參照分類標籤顯示`)}
+                          ${BgWidget.grayNote('未設定則參照分類標籤顯示')}
                         </div>
                         ${EditorElem.editeInput({
                                     gvc: gvc,
@@ -661,7 +718,7 @@ export class ShoppingCollections {
                                                 gvc.bindView({
                                                     bind: domainID,
                                                     view: () => {
-                                                        return html `<div
+                                                        return html ` <div
                                       class="${document.body.clientWidth < 800
                                                             ? 'w-100'
                                                             : ''} justify-content-start justify-content-lg-center"
@@ -824,62 +881,125 @@ export class ShoppingCollections {
                                     })}`,
                                     ,
                                 ].join(BgWidget.mbContainer(10))),
-                            ].join(html ` <div style="margin-top: 24px;"></div>`),
+                            ].join(BgWidget.mbContainer(24)),
                             ratio: 75,
                         }, {
-                            html: [
-                                BgWidget.summaryCard((() => {
-                                    var _a;
-                                    if ((vm.data.allCollections &&
-                                        vm.data.allCollections.length > 0 &&
-                                        vm.data.parentTitles &&
-                                        vm.data.parentTitles.length > 0) ||
-                                        vm.type === 'add') {
-                                        return html ` <div class="tx_700" style="margin-bottom: 12px">父層</div>
-                            ${BgWidget.select({
-                                            gvc: gvc,
-                                            callback: text => {
-                                                vm.data.parentTitles[0] = text;
-                                            },
-                                            default: (_a = vm.data.parentTitles[0]) !== null && _a !== void 0 ? _a : '',
-                                            options: vm.data.allCollections.map((item) => {
-                                                return { key: item, value: item };
-                                            }),
-                                            style: 'margin: 8px 0;',
-                                        })}`;
-                                    }
-                                    const id = gvc.glitter.getUUID();
-                                    return html `
-                          <div class="tx_700" style="margin-bottom: 12px">子分類</div>
-                          ${gvc.bindView({
-                                        bind: id,
-                                        view: () => {
-                                            return gvc.map(vm.data.subCollections.map((item) => {
-                                                return html ` <div
-                                    style="display: flex; align-items: center; justify-content: space-between; margin-top: 8px;"
-                                  >
-                                    ${item}<i
-                                      class="fa-regular fa-trash cursor_pointer"
-                                      onclick="${gvc.event(() => {
-                                                    vm.data.subCollections = vm.data.subCollections.filter((sub) => item !== sub);
-                                                    gvc.notifyDataChange(id);
-                                                })}"
-                                    ></i>
-                                  </div>`;
-                                            }));
-                                        },
-                                    })}
-                        `;
-                                })()),
-                            ].join(html ` <div style="margin-top: 24px;"></div>`),
+                            html: gvc.bindView((() => {
+                                const summaryId = glitter.getUUID();
+                                return {
+                                    bind: summaryId,
+                                    view: () => {
+                                        function isUndefinedOption(key) {
+                                            return !key || ShoppingCollections.undefinedOption === key;
+                                        }
+                                        function firstParentView() {
+                                            var _a;
+                                            return [
+                                                html ` <div class="tx_700">第一層</div>`,
+                                                vm.type === 'add' && isUndefinedOption(vm.data.parentTitles[0])
+                                                    ? BgWidget.grayNote('若未選取項目，則為第一層分類')
+                                                    : '',
+                                                BgWidget.select({
+                                                    gvc: gvc,
+                                                    callback: text => {
+                                                        vm.data.parentTitles[0] = text;
+                                                        gvc.notifyDataChange(summaryId);
+                                                    },
+                                                    default: (_a = vm.data.parentTitles[0]) !== null && _a !== void 0 ? _a : '',
+                                                    options: vm.data.allCollections.map((item) => {
+                                                        return { key: item, value: item };
+                                                    }),
+                                                    style: 'margin: 8px 0;',
+                                                    readonly: vm.type === 'replace',
+                                                }),
+                                                BgWidget.mbContainer(12),
+                                            ].join('');
+                                        }
+                                        function secondParentView(subs) {
+                                            var _a;
+                                            return [
+                                                html ` <div class="tx_700">第二層</div>`,
+                                                vm.type === 'add' && isUndefinedOption(vm.data.parentTitles[1])
+                                                    ? BgWidget.grayNote('若未選取項目，則為第二層分類')
+                                                    : '',
+                                                BgWidget.select({
+                                                    gvc: gvc,
+                                                    callback: text => {
+                                                        vm.data.parentTitles[1] = text;
+                                                        gvc.notifyDataChange(summaryId);
+                                                    },
+                                                    default: (_a = vm.data.parentTitles[1]) !== null && _a !== void 0 ? _a : '',
+                                                    options: [ShoppingCollections.undefinedOption, ...subs].map((item) => {
+                                                        return { key: item, value: item };
+                                                    }),
+                                                    style: 'margin: 8px 0;',
+                                                    readonly: vm.type === 'replace',
+                                                }),
+                                            ].join('');
+                                        }
+                                        function editSubCollection() {
+                                            const id = gvc.glitter.getUUID();
+                                            if (vm.data.parentTitles.length === 2) {
+                                                return '';
+                                            }
+                                            return [
+                                                html ` <div class="tx_700" style="margin-bottom: 12px">子分類</div>`,
+                                                !vm.data.subCollections || vm.data.subCollections.length === 0
+                                                    ? '尚未建立子分類'
+                                                    : gvc.bindView({
+                                                        bind: id,
+                                                        view: () => vm.data.subCollections
+                                                            .map((item) => {
+                                                            return html ` <div
+                                            class="d-flex align-items-center justify-content-between mt-2"
+                                          >
+                                            ${item}<i
+                                              class="fa-regular fa-trash cursor_pointer"
+                                              onclick="${gvc.event(() => {
+                                                                vm.data.subCollections = vm.data.subCollections.filter((sub) => item !== sub);
+                                                                gvc.notifyDataChange(id);
+                                                            })}"
+                                            ></i>
+                                          </div>`;
+                                                        })
+                                                            .join(''),
+                                                    }),
+                                            ].join('');
+                                        }
+                                        function levelSetting() {
+                                            var _a;
+                                            const parentTitles = Array.isArray(vm.data.parentTitles) ? vm.data.parentTitles : [];
+                                            const parentTab = (_a = vm.dataList) === null || _a === void 0 ? void 0 : _a.find(item => item.title === parentTitles[0]);
+                                            const parentSubs = parentTab && Array.isArray(parentTab.subCollections) ? parentTab.subCollections : [];
+                                            if (vm.type === 'add') {
+                                                return [
+                                                    firstParentView(),
+                                                    parentSubs.length > 0
+                                                        ? secondParentView(parentSubs.filter((item) => item !== vm.data.title))
+                                                        : '',
+                                                ].join('');
+                                            }
+                                            if (vm.type === 'replace' && parentTitles.length > 0) {
+                                                return [
+                                                    firstParentView(),
+                                                    parentTitles[1] && parentSubs.length > 0 ? secondParentView(parentSubs) : '',
+                                                    editSubCollection(),
+                                                ].join('');
+                                            }
+                                            return editSubCollection();
+                                        }
+                                        return [BgWidget.summaryCard(levelSetting())].join(BgWidget.mbContainer(24));
+                                    },
+                                };
+                            })()),
                             ratio: 25,
                         }),
                         BgWidget.mbContainer(240),
                         html ` <div class="update-bar-container">
                 ${obj.type === 'replace'
-                            ? BgWidget.redButton('刪除類別', gvc.event(() => {
+                            ? BgWidget.redButton('刪除分類', gvc.event(() => {
                                 dialog.checkYesOrNot({
-                                    text: '確定要刪除商品類別嗎？<br/>（若此類別包含子類別，也將一併刪除）',
+                                    text: '確定要刪除商品分類嗎？<br/>（若包含子分類，也將一併刪除）',
                                     callback: bool => {
                                         if (bool) {
                                             dialog.dataLoading({ visible: true });
@@ -909,14 +1029,22 @@ export class ShoppingCollections {
                                 dialog.infoMessage({ text: '請填寫「分類標籤」' });
                                 return;
                             }
+                            const updateDataPath = [...vm.data.parentTitles, vm.data.title].join('');
+                            if ([...original.parentTitles, original.title].join('') !== updateDataPath) {
+                                const somePath = originDataList.some(item => {
+                                    return [...item.parentTitles, item.title].join('') === updateDataPath;
+                                });
+                                if (somePath) {
+                                    dialog.infoMessage({ text: '此「分類標籤」已存在' });
+                                    return;
+                                }
+                            }
                             const forbiddenRegex = /[,/\\]/;
                             if (forbiddenRegex.test(vm.data.title)) {
                                 dialog.infoMessage({ text: '標題不可包含空白格與以下符號：<br />「 , 」「 / 」「 \\ 」' });
                                 return;
                             }
-                            const no_fill_language = window.parent.store_info.language_setting.support.find((dd) => {
-                                return !vm.data.language_data[dd].seo.domain;
-                            });
+                            const no_fill_language = window.parent.store_info.language_setting.support.find((dd) => !vm.data.language_data[dd].seo.domain);
                             if (no_fill_language) {
                                 select_lan = no_fill_language;
                                 refresh();
@@ -924,13 +1052,11 @@ export class ShoppingCollections {
                                 return;
                             }
                             if (window.parent.store_info.language_setting.support.find((dd) => {
-                                if (!CheckInput.isChineseEnglishNumberHyphen(vm.data.language_data[dd].seo.domain)) {
-                                    select_lan = dd;
-                                    return true;
-                                }
-                                else {
+                                if (CheckInput.isChineseEnglishNumberHyphen(vm.data.language_data[dd].seo.domain)) {
                                     return false;
                                 }
+                                select_lan = dd;
+                                return true;
                             })) {
                                 refresh();
                                 dialog.infoMessage({ text: '連結僅限使用中英文數字與連接號' });
@@ -939,28 +1065,47 @@ export class ShoppingCollections {
                             const validLangDomain = getValidLangDomain();
                             if (!validLangDomain.result) {
                                 refresh();
-                                dialog.warningMessage({ text: validLangDomain.text, callback: () => { } });
+                                dialog.infoMessage({ text: validLangDomain.text });
                                 return;
                             }
-                            dialog.dataLoading({ visible: true });
-                            ApiShop.putCollections({
-                                data: { replace: vm.data, original },
-                                token: window.parent.config.token,
-                            }).then(res => {
-                                dialog.dataLoading({ visible: false });
-                                if (res.result) {
-                                    if (res.response.result) {
-                                        vm.type = 'list';
-                                        dialog.successMessage({ text: '更新成功' });
+                            function putEvent() {
+                                dialog.dataLoading({ visible: true });
+                                ApiShop.putCollections({
+                                    data: { replace: vm.data, original },
+                                    token: window.parent.config.token,
+                                }).then(res => {
+                                    dialog.dataLoading({ visible: false });
+                                    if (res.result) {
+                                        if (res.response.result) {
+                                            vm.type = 'list';
+                                            dialog.successMessage({ text: '更新成功' });
+                                        }
+                                        else {
+                                            dialog.errorMessage({ text: res.response.message });
+                                        }
                                     }
                                     else {
-                                        dialog.errorMessage({ text: res.response.message });
+                                        dialog.errorMessage({ text: '更新失敗' });
                                     }
-                                }
-                                else {
-                                    dialog.errorMessage({ text: '更新失敗' });
-                                }
-                            });
+                                });
+                            }
+                            if (vm.cloneTarget && vm.cloneTarget.title === vm.data.title) {
+                                dialog.checkYesOrNot({
+                                    text: ['若移動當前商品分類，<b>附帶的子分類將不會保留</b>，', '確定要執行嗎？'].join('<br/>'),
+                                    callback: bool => {
+                                        if (bool && vm.cloneTarget) {
+                                            ApiShop.deleteCollections({
+                                                data: { data: [vm.cloneTarget] },
+                                                token: window.parent.config.token,
+                                            }).then(() => {
+                                                putEvent();
+                                            });
+                                        }
+                                    },
+                                });
+                                return;
+                            }
+                            putEvent();
                         }))}
               </div>`,
                     ].join(BgWidget.mbContainer(24)));
@@ -968,5 +1113,34 @@ export class ShoppingCollections {
             };
         });
     }
+    static sortedCollectionConfig(config, dataArray) {
+        var _a;
+        if (!(dataArray === null || dataArray === void 0 ? void 0 : dataArray.length))
+            return config;
+        const parentTitles = (_a = dataArray[0].parentTitles) !== null && _a !== void 0 ? _a : [];
+        function updateTree(currentLevel, depth) {
+            if (depth === parentTitles.length) {
+                const sorted = dataArray
+                    .map(item => {
+                    return currentLevel.find(c => c.title === item.title);
+                })
+                    .filter(Boolean);
+                for (let i = 0; i < sorted.length; i++) {
+                    currentLevel[i] = sorted[i];
+                }
+                currentLevel.length = sorted.length;
+                return true;
+            }
+            const next = currentLevel.find(c => c.title === parentTitles[depth]);
+            if (!next)
+                return false;
+            return updateTree(next.array, depth + 1);
+        }
+        const updated = updateTree(config, 0);
+        if (!updated)
+            throw new Error('找不到對應的父節點進行排序');
+        return config;
+    }
 }
+ShoppingCollections.undefinedOption = '請選擇項目';
 window.glitter.setModule(import.meta.url, ShoppingCollections);