ts-glitter 22.5.7 → 22.5.8

package/lowcode/cms-plugin/shopping-setting-basic.ts

@@ -905,111 +905,112 @@ export class ShoppingSettingBasic {
     }
 
     function drawProductImageBlock() {
-      return BgWidget.mainCard(html`<!--繪製商品圖片展示區塊-->
-        <div
-          class="d-flex align-items-center justify-content-between"
-          style="color: #393939;font-size: 16px;font-weight: 700;margin-bottom: 18px;"
-        >
-          <div class="d-flex align-items-center">圖片${BgWidget.languageInsignia(sel_lan(), 'margin-left:5px;')}</div>
-          <div class="d-flex align-items-center gap-2">
-            ${BgWidget.customButton({
-              button: {
-                color: 'black',
-                size: 'sm',
-              },
-              text: {
-                name: '上傳圖片',
-              },
-              event: gvc.event(() => {
-                EditorElem.uploadFileFunction({
-                  gvc: gvc,
-                  callback: (images: any) => {
-                    const addImage = (urlArray: string[]) => {
+      return BgWidget.mainCard(
+        html`<!--繪製商品圖片展示區塊-->
+          <div
+            class="d-flex align-items-center justify-content-between"
+            style="color: #393939;font-size: 16px;font-weight: 700;margin-bottom: 18px;"
+          >
+            <div class="d-flex align-items-center">圖片${BgWidget.languageInsignia(sel_lan(), 'margin-left:5px;')}</div>
+            <div class="d-flex align-items-center gap-2">
+              ${BgWidget.customButton({
+                button: {
+                  color: 'black',
+                  size: 'sm',
+                },
+                text: {
+                  name: '上傳圖片',
+                },
+                event: gvc.event(() => {
+                  EditorElem.uploadFileFunction({
+                    gvc: gvc,
+                    callback: (images: any) => {
+                      const addImage = (urlArray: string[]) => {
+                        if (urlArray.length > 0) {
+                          language_data.preview_image.push(...urlArray);
+                          saveImageLib(urlArray);
+                          obj.gvc.notifyDataChange('image_view');
+                        } else {
+                          dialog.errorMessage({ text: '請選擇至少一張圖片' });
+                        }
+                      };
+                      addImage(images);
+                    },
+                    type: `image/*`,
+                    return_array: true,
+                    multiple: true,
+                  });
+                }),
+              })}
+              ${BgWidget.customButton({
+                button: {
+                  color: 'black',
+                  size: 'sm',
+                },
+                text: {
+                  name: '從圖片庫選取',
+                },
+                event: gvc.event(() => {
+                  imageLibrary.selectImageLibrary(
+                    gvc,
+                    urlArray => {
                       if (urlArray.length > 0) {
-                        language_data.preview_image.push(...urlArray);
-                        saveImageLib(urlArray);
+                        language_data.preview_image.push(
+                          ...urlArray.map((data: any) => {
+                            return data.data;
+                          })
+                        );
                         obj.gvc.notifyDataChange('image_view');
                       } else {
                         dialog.errorMessage({ text: '請選擇至少一張圖片' });
                       }
-                    };
-                    addImage(images);
-                  },
-                  type: `image/*`,
-                  return_array: true,
-                  multiple: true,
-                });
-              }),
-            })}
-            ${BgWidget.customButton({
-              button: {
-                color: 'black',
-                size: 'sm',
-              },
-              text: {
-                name: '從圖片庫選取',
-              },
-              event: gvc.event(() => {
-                imageLibrary.selectImageLibrary(
-                  gvc,
-                  urlArray => {
-                    if (urlArray.length > 0) {
-                      language_data.preview_image.push(
-                        ...urlArray.map((data: any) => {
-                          return data.data;
-                        })
-                      );
-                      obj.gvc.notifyDataChange('image_view');
-                    } else {
-                      dialog.errorMessage({ text: '請選擇至少一張圖片' });
-                    }
-                  },
-                  html` <div class="d-flex flex-column" style="border-radius: 10px 10px 0px 0px;background: #F2F2F2;">
-                    圖片庫
-                  </div>`,
-                  { mul: true }
-                );
-              }),
-            })}
+                    },
+                    html` <div class="d-flex flex-column" style="border-radius: 10px 10px 0px 0px;background: #F2F2F2;">
+                      圖片庫
+                    </div>`,
+                    { mul: true }
+                  );
+                }),
+              })}
+            </div>
           </div>
-        </div>
-        ${obj.gvc.bindView(() => {
-          return {
-            bind: 'image_view',
-            view: () => {
-              return (
-                html` <div class="my-2"></div>` +
-                EditorElem.flexMediaManagerV2({
-                  gvc: obj.gvc,
-                  data: language_data.preview_image,
-                  event: {
-                    delete: (index: number) => {
-                      postMD.variants.forEach((variant: any) => {
-                        if (variant.preview_image === language_data.preview_image[index]) {
-                          variant.preview_image = language_data.preview_image[0] ?? BgWidget.noImageURL;
-                        }
-                        if (variant[`preview_image_${vm.language}`] === language_data.preview_image[index]) {
-                          variant[`preview_image_${vm.language}`] =
-                            language_data.preview_image[0] ?? BgWidget.noImageURL;
-                        }
-                      });
-                      ShoppingSettingBasic.updateVariants(gvc, postMD, shipment_config, variantsViewID, obj);
+          ${obj.gvc.bindView(() => {
+            return {
+              bind: 'image_view',
+              view: () => {
+                return (
+                  html` <div class="my-2"></div>` +
+                  EditorElem.flexMediaManagerV2({
+                    gvc: obj.gvc,
+                    data: language_data.preview_image,
+                    event: {
+                      delete: (index: number) => {
+                        postMD.variants.forEach((variant: any) => {
+                          if (variant.preview_image === language_data.preview_image[index]) {
+                            variant.preview_image = language_data.preview_image[0] ?? BgWidget.noImageURL;
+                          }
+                          if (variant[`preview_image_${vm.language}`] === language_data.preview_image[index]) {
+                            variant[`preview_image_${vm.language}`] =
+                              language_data.preview_image[0] ?? BgWidget.noImageURL;
+                          }
+                        });
+                        ShoppingSettingBasic.updateVariants(gvc, postMD, shipment_config, variantsViewID, obj);
+                      },
                     },
-                  },
-                })
-              );
-            },
-            divCreate: {
-              class: `d-flex w-100`,
-              style: `overflow-y:scroll;height:180px;`,
-            },
-          };
-        })}
-      `);
+                  })
+                );
+              },
+              divCreate: {
+                class: `d-flex w-100`,
+                style: `overflow-y:scroll;height:180px;`,
+              },
+            };
+          })} `
+      );
     }
 
     function drawReserveLocations() {
-      if (postMD.product_category === 'reserve') {
+      if (postMD.product_category === 'reserve' && undefined) {
         function getStockStore() {
           ApiUser.getPublicConfig('store_manager', 'manager').then((storeData: any) => {
             if (storeData.result) {
@@ -1186,32 +1187,33 @@ export class ShoppingSettingBasic {
               `;
             }
 
-            return BgWidget.mainCard(html`<!--繪製預約門市選擇區塊-->
-              <div class="d-flex flex-column" style="gap:18px;">
-                <div class="d-flex align-items-center">
-                  服務地點${BgWidget.languageInsignia(sel_lan(), 'margin-left:5px;')}
-                </div>
-                <div class="d-flex flex-wrap" style="gap:12px;">
-                  ${stockList.length == 0
-                    ? html` <div class="w-100 d-flex align-items-center justify-content-center tx_gray_16">
-                        尚未設置門市，請前往POS實體門市>門市設定
-                      </div>`
-                    : postMD.reserve_locations.map(drawLocation).join('')}
-                </div>
-                <div
-                  class="d-flex justify-content-center align-items-center cursor_pointer"
-                  style="gap:4px;color: #36B;"
-                  onclick="${gvc.event(() => {
-                    popoutSelectLocation(newStoreList => {
-                      postMD.reserve_locations = newStoreList;
-                      gvc.notifyDataChange(section_ID.reserve_locations);
-                    });
-                  })}"
-                >
-                  新增服務地點 <i class="fa-solid fa-plus"></i>
-                </div>
-              </div>
-            `);
+            return BgWidget.mainCard(
+              html`<!--繪製預約門市選擇區塊-->
+                <div class="d-flex flex-column" style="gap:18px;">
+                  <div class="d-flex align-items-center">
+                    服務地點${BgWidget.languageInsignia(sel_lan(), 'margin-left:5px;')}
+                  </div>
+                  <div class="d-flex flex-wrap" style="gap:12px;">
+                    ${stockList.length == 0
+                      ? html` <div class="w-100 d-flex align-items-center justify-content-center tx_gray_16">
+                          尚未設置門市，請前往POS實體門市>門市設定
+                        </div>`
+                      : postMD.reserve_locations.map(drawLocation).join('')}
+                  </div>
+                  <div
+                    class="d-flex justify-content-center align-items-center cursor_pointer"
+                    style="gap:4px;color: #36B;"
+                    onclick="${gvc.event(() => {
+                      popoutSelectLocation(newStoreList => {
+                        postMD.reserve_locations = newStoreList;
+                        gvc.notifyDataChange(section_ID.reserve_locations);
+                      });
+                    })}"
+                  >
+                    新增服務地點 <i class="fa-solid fa-plus"></i>
+                  </div>
+                </div> `
+            );
           },
           divCreate: {},
         });
@@ -1226,23 +1228,24 @@ export class ShoppingSettingBasic {
           return gvc.bindView({
             bind: section_ID.store_product_config_panel,
             view: () => {
-              return BgWidget.mainCard(html`<!--繪製單一門市的商品配置面板-->
-                <div class="d-flex flex-column">
-                  <div class="tx_700">依門市管理</div>
-                  <div class="tx_gray_14">其他門市將預設套用此門市的設定，如需修改，請切換至對應門市進行調整</div>
-                </div>
-                ${BgWidget.select({
-                  default: postMD.reserve_locations[0].id,
-                  gvc: gvc,
-                  options: postMD.reserve_locations.map(location => {
-                    return {
-                      value: location.name,
-                      key: location.id,
-                    };
-                  }),
-                  callback(value: any): void {},
-                })}
-              `);
+              return BgWidget.mainCard(
+                html`<!--繪製單一門市的商品配置面板-->
+                  <div class="d-flex flex-column">
+                    <div class="tx_700">依門市管理</div>
+                    <div class="tx_gray_14">其他門市將預設套用此門市的設定，如需修改，請切換至對應門市進行調整</div>
+                  </div>
+                  ${BgWidget.select({
+                    default: postMD.reserve_locations[0].id,
+                    gvc: gvc,
+                    options: postMD.reserve_locations.map(location => {
+                      return {
+                        value: location.name,
+                        key: location.id,
+                      };
+                    }),
+                    callback(value: any): void {},
+                  })} `
+              );
             },
             divCreate: {},
           });
@@ -1258,14 +1261,15 @@ export class ShoppingSettingBasic {
       if (postMD.variants.length === 1) {
         try {
           (postMD.variants[0] as any).editable = true;
-          return html`
-<!--          繪製 編輯商品規格編輯區塊-->
-          `+ ShoppingProductSetting.editProductSpec({
-            vm: obj.vm,
-            defData: postMD,
-            gvc: gvc,
-            single: true,
-          });
+          return (
+            html` <!--          繪製 編輯商品規格編輯區塊--> ` +
+            ShoppingProductSetting.editProductSpec({
+              vm: obj.vm,
+              defData: postMD,
+              gvc: gvc,
+              single: true,
+            })
+          );
         } catch (e) {
           console.error(e);
           return '';
@@ -1298,7 +1302,7 @@ export class ShoppingSettingBasic {
             dataList: [{ obj: createPage, key: 'page' }],
             view: () => {
               let returnHTML = html`
-<!--                繪製商品規格列表區塊-->
+                <!--                繪製商品規格列表區塊-->
                 <div
                   class="d-flex align-items-center justify-content-between"
                   style="font-size: 16px;font-weight: 700;"
@@ -1955,34 +1959,46 @@ export class ShoppingSettingBasic {
         : '';
     }
 
-    function drawReservationSettings(){
-      function drawTitle(title: string , subTitle: string , inputKey: string){
-        return html`
-          <div class="d-flex flex-column w-100" >
+    function drawReservationSettings() {
+      if (postMD.product_category === 'reserve' && undefined) {
+        function drawTitle(title: string, subTitle: string, inputKey: string) {
+          return html`
+          <div class="d-flex flex-column w-100">
             <div class="tx_700 ">${title}</div>
-            ${subTitle 
-              ? html`<div class="tx_gray_14" style="margin: 4px 0 8px 0;">${subTitle}</div>` 
-              : html`<div style="height: 18px;"></div>`}
+            ${subTitle
+            ? html`<div class="tx_gray_14" style="margin: 4px 0 8px 0;">${subTitle}</div>`
+            : html`<div style="height: 18px;"></div>`}
             <div class="d-flex" style="gap: 18px;">
-              <div class="d-flex flex-fill align-items-center" style="height: 40px;padding: 0 18px;border-radius: 10px;border: 1px solid #DDD;">
-                <input class="border-0 h-100 flex-fill" >
+              <div
+                class="d-flex flex-fill align-items-center"
+                style="height: 40px;padding: 0 18px;border-radius: 10px;border: 1px solid #DDD;"
+              >
+                <input class="border-0 h-100 flex-fill" />
                 <div class="tx_gray_14 ms-auto">小時</div>
               </div>
-              <div class="d-flex flex-fill align-items-center" style="height: 40px;padding: 0 18px;border-radius: 10px;border: 1px solid #DDD;">
-                <input class="border-0 h-100 flex-fill" >
+              <div
+                class="d-flex flex-fill align-items-center"
+                style="height: 40px;padding: 0 18px;border-radius: 10px;border: 1px solid #DDD;"
+              >
+                <input class="border-0 h-100 flex-fill" />
                 <div class="tx_gray_14 ms-auto">分鐘</div>
               </div>
             </div>
           </div>
-        `
+        `;
+        }
+        return BgWidget.mainCard(html`
+        ${drawTitle('預設服務時長', '', 'defaultServiceDuration')}
+        <div class="tx_700">預設服務時長</div>
+      `);
       }
       return  ``
-      return BgWidget.mainCard(html`
-        ${drawTitle("預設服務時長" , "" , "defaultServiceDuration")}
-        <div class="tx_700">
-          預設服務時長
-        </div>
-      `)
+      // return BgWidget.mainCard(html`
+      //   ${drawTitle("預設服務時長" , "" , "defaultServiceDuration")}
+      //   <div class="tx_700">
+      //     預設服務時長
+      //   </div>
+      // `)
     }
 
     ShoppingSettingBasic.updateVariants(gvc, postMD, shipment_config, variantsViewID, obj);
@@ -3369,53 +3385,110 @@ export class ShoppingSettingBasic {
                                                                 };
                                                               })()
                                                             )}
-                                                            ${['sale_price', 'stock']
-                                                              .filter(dd => {
-                                                                return (
-                                                                  dd === 'sale_price' || document.body.clientWidth > 768
-                                                                );
-                                                              })
-                                                              .map((dd, index) => {
-                                                                return html` <div
-                                                                  class="text-center px-1"
-                                                                  style="color:#393939;font-size: 16px;font-weight: 400;width:   ${document
-                                                                    .body.clientWidth > 800
-                                                                    ? `17.5%;`
-                                                                    : 'auto;max-width:140px;'}"
-                                                                >
-                                                                  <input
-                                                                    style="width: 100%;height: 40px;padding: 0px 18px;border-radius: 10px;border: 1px solid #DDD;background: #FFF;"
-                                                                    value="${(data as any)[dd] ?? 0}"
-                                                                    min="0"
-                                                                    ${index === 1 ? `readonly` : ''}
-                                                                    onclick="${gvc.event(() => {
-                                                                      if (index === 1) {
-                                                                        ProductSetting.showBatchEditDialog({
-                                                                          gvc: gvc,
-                                                                          postMD: postMD,
-                                                                          selected: postMD.variants,
-                                                                          callback: () => {
-                                                                            gvc.notifyDataChange(vm.id);
-                                                                          },
-                                                                        });
-                                                                      }
-                                                                    })}"
-                                                                    oninput="${gvc.event(e => {
-                                                                      const regex = /^[0-9]*$/;
-                                                                      if (!regex.test(e.value)) {
-                                                                        e.value = e.value
-                                                                          .replace(/[^0-9]/g, '')
-                                                                          .replace(/e/gi, '');
-                                                                      }
-                                                                    })}"
-                                                                    onchange="${gvc.event(e => {
-                                                                      (data as any)[dd] = e.value;
-                                                                      gvc.notifyDataChange(vm.id);
-                                                                    })}"
-                                                                  />
-                                                                </div>`;
-                                                              })
-                                                              .join('')}
+                                                            ${(() => {
+                                                              const fieldsToDisplay = ['sale_price', 'stock'].filter(
+                                                                field => {
+                                                                  return (
+                                                                    field === 'sale_price' ||
+                                                                    document.body.clientWidth > 768
+                                                                  );
+                                                                }
+                                                              );
+
+                                                              const renderFields = fieldsToDisplay.map(
+                                                                (field, index) => {
+                                                                  // 建立輸入欄位
+                                                                  const inputProps = {
+                                                                    style:
+                                                                      'width: 100%;height: 40px;padding: 0px 18px;border-radius: 10px;border: 1px solid #DDD;background: #FFF;',
+                                                                    value: (data as any)[field] ?? 0,
+                                                                    min: '0',
+                                                                    readonly: index === 1 ? 'readonly' : '',
+                                                                  };
+
+                                                                  // 處理點擊事件 - 庫存編輯對話框
+                                                                  const clickHandler =
+                                                                    index === 1
+                                                                      ? gvc.event(() => {
+                                                                          ProductSetting.showBatchEditDialog({
+                                                                            gvc: gvc,
+                                                                            postMD: postMD,
+                                                                            selected: postMD.variants,
+                                                                            callback: () => {
+                                                                              gvc.notifyDataChange(vm.id);
+                                                                            },
+                                                                          });
+                                                                        })
+                                                                      : '';
+
+                                                                  // 處理輸入驗證 - 只允許數字
+                                                                  const inputHandler = gvc.event(e => {
+                                                                    const regex = /^[0-9]*$/;
+                                                                    if (!regex.test(e.value)) {
+                                                                      e.value = e.value
+                                                                        .replace(/[^0-9]/g, '')
+                                                                        .replace(/e/gi, '');
+                                                                    }
+                                                                  });
+
+                                                                  // 處理變更事件 - 更新數據
+                                                                  const changeHandler = gvc.event(e => {
+                                                                    (data as any)[field] = e.value;
+                                                                    gvc.notifyDataChange(vm.id);
+                                                                  });
+
+                                                                  // 組合輸入欄位HTML
+                                                                  const inputHTML = html`
+                                                                    <input
+                                                                      style="${inputProps.style}"
+                                                                      value="${inputProps.value}"
+                                                                      min="${inputProps.min}"
+                                                                      ${inputProps.readonly}
+                                                                      onclick="${clickHandler}"
+                                                                      oninput="${inputHandler}"
+                                                                      onchange="${changeHandler}"
+                                                                    />
+                                                                  `;
+
+                                                                  // 如果是庫存且不顯示庫存不足，則顯示破折號
+                                                                  if (
+                                                                    field === 'stock' &&
+                                                                    data.show_understocking === 'false'
+                                                                  ) {
+                                                                    return html`
+                                                                      <div
+                                                                        class="text-center px-1"
+                                                                        style="color: #393939; font-size: 14px; font-weight: 400; cursor: pointer;
+                                                                        width: ${document.body.clientWidth > 800
+                                                                          ? '17.5%;'
+                                                                          : 'auto; max-width:140px;'}"
+                                                                        onclick="${clickHandler}"
+                                                                      >
+                                                                        不追蹤庫存
+                                                                      </div>
+                                                                    `;
+                                                                  }
+
+                                                                  // 返回欄位容器
+                                                                  return html`
+                                                                    <div
+                                                                      class="text-center px-1"
+                                                                      style="color:#393939;font-size: 16px;font-weight: 400;width: ${document
+                                                                        .body.clientWidth > 800
+                                                                        ? '17.5%;'
+                                                                        : 'auto;max-width:140px;'}"
+                                                                    >
+                                                                      ${inputHTML}
+                                                                    </div>
+                                                                  `;
+                                                                }
+                                                              );
+
+                                                              // 最終返回所有欄位的HTML字串
+                                                              const fieldsHtml = renderFields.join('');
+
+                                                              return fieldsHtml;
+                                                            })()}
                                                             <div
                                                               class="d-none d-sm-block"
                                                               style="color:#393939;font-size: 16px;font-weight: 400;width: 20%;"
@@ -3619,16 +3692,17 @@ ${language_data.seo.content ?? ''}</textarea
                           postMD.active_schedule = original;
                         },
                         innerHTML: gvc => {
-                          return html` <div class="d-flex flex-column gap-3">
+                          return html` <div class="d-flex flex-column gap-2">
                             ${BgWidget.grayNote(
-                              html`若系統時間大於設定的開始時間，${cat_title}狀態將會從「待上架」自動變成「上架」`
+                              html`系統會根據所設定的時間，自動將${cat_title}上架或下架`,
+                              'margin-bottom: 8px;'
                             )}
                             <div
-                              class="d-flex mb-1 ${document.body.clientWidth < 768 ? 'flex-column' : ''}"
+                              class="d-flex ${document.body.clientWidth < 768 ? 'flex-column' : ''}"
                               style="gap: 12px"
                             >
                               <div class="d-flex flex-column">
-                                <span class="tx_normal me-2">開始日期</span>
+                                <span class="tx_normal me-2">上架時間</span>
                                 ${BgWidget.editeInput({
                                   gvc: gvc,
                                   title: '',
@@ -3642,7 +3716,7 @@ ${language_data.seo.content ?? ''}</textarea
                                 })}
                               </div>
                               <div class="d-flex flex-column">
-                                <span class="tx_normal me-2">開始時間</span>
+                                <span class="tx_normal me-2">&ensp;</span>
                                 ${BgWidget.editeInput({
                                   gvc: gvc,
                                   title: '',
@@ -3665,39 +3739,33 @@ ${language_data.seo.content ?? ''}</textarea
                                 },
                                 {
                                   key: 'withEnd',
-                                  name: '結束時間',
+                                  name: '下架時間',
                                   innerHtml: html` <div
-                                    class="d-flex mt-0 mt-md-1 ${document.body.clientWidth < 768 ? 'flex-column' : ''}"
+                                    class="d-flex ${document.body.clientWidth < 768 ? 'flex-column' : ''}"
                                     style="gap: 12px"
                                   >
-                                    <div class="d-flex flex-column">
-                                      <span class="tx_normal me-2">結束日期</span>
-                                      ${BgWidget.editeInput({
-                                        gvc: gvc,
-                                        title: '',
-                                        type: 'date',
-                                        style: inputStyle,
-                                        default: `${original.endDate ?? ''}`,
-                                        placeHolder: '',
-                                        callback: text => {
-                                          postMD.active_schedule.endDate = text;
-                                        },
-                                      })}
-                                    </div>
-                                    <div class="d-flex flex-column">
-                                      <span class="tx_normal me-2">結束時間</span>
-                                      ${BgWidget.editeInput({
-                                        gvc: gvc,
-                                        title: '',
-                                        type: 'time',
-                                        style: inputStyle,
-                                        default: `${original.endTime ?? ''}`,
-                                        placeHolder: '',
-                                        callback: text => {
-                                          postMD.active_schedule.endTime = text;
-                                        },
-                                      })}
-                                    </div>
+                                    ${BgWidget.editeInput({
+                                      gvc: gvc,
+                                      title: '',
+                                      type: 'date',
+                                      style: inputStyle,
+                                      default: `${original.endDate ?? ''}`,
+                                      placeHolder: '',
+                                      callback: text => {
+                                        postMD.active_schedule.endDate = text;
+                                      },
+                                    })}
+                                    ${BgWidget.editeInput({
+                                      gvc: gvc,
+                                      title: '',
+                                      type: 'time',
+                                      style: inputStyle,
+                                      default: `${original.endTime ?? ''}`,
+                                      placeHolder: '',
+                                      callback: text => {
+                                        postMD.active_schedule.endTime = text;
+                                      },
+                                    })}
                                   </div>`,
                                 },
                               ],