ts-glitter 20.7.4 → 20.7.6

package/lowcode/cms-plugin/user-list.ts

@@ -25,6 +25,7 @@ type ViewModel = {
   id: string;
   loading: boolean;
   filterId: string;
+  tabLoading: boolean;
   tableId: string;
   barId: string;
   progressId: string;
@@ -49,6 +50,12 @@ export class UserList {
     page: 1,
   };
 
+  static statusBadge: any = {
+    0: () => BgWidget.dangerInsignia('已停用'),
+    1: () => BgWidget.infoInsignia('啟用中'),
+    2: () => BgWidget.warningInsignia('觀察中'),
+  };
+
   static main(
     gvc: GVC,
     obj?: {
@@ -63,6 +70,7 @@ export class UserList {
     const vm: ViewModel = {
       id: glitter.getUUID(),
       loading: true,
+      tabLoading: true,
       type: 'list',
       data: {},
       dataList: undefined,
@@ -70,7 +78,7 @@ export class UserList {
       queryType: '',
       orderString: '',
       filter: {},
-      filter_type: `normal`,
+      filter_type: 'normal',
       filterId: glitter.getUUID(),
       tableId: glitter.getUUID(),
       barId: glitter.getUUID(),
@@ -161,13 +169,7 @@ export class UserList {
           },
           {
             key: '用戶狀態',
-            value: (() => {
-              if (dd.status === 1) {
-                return html`<div class="badge bg-info fs-7" style="max-height:34px;">啟用中</div>`;
-              } else {
-                return html`<div class="badge bg-danger fs-7" style="max-height:34px;">已停用</div>`;
-              }
-            })(),
+            value: (UserList.statusBadge[dd.status] || UserList.statusBadge['1'])(),
           },
         ].filter(item => {
           if (!vm.headerConfig.includes(item.key)) {
@@ -287,6 +289,10 @@ export class UserList {
                       title: '一般列表',
                       key: 'normal',
                     },
+                    {
+                      title: '觀察名單',
+                      key: 'watch',
+                    },
                     {
                       title: '黑名單',
                       key: 'block',
@@ -301,6 +307,10 @@ export class UserList {
                       title: '一般列表',
                       key: 'normal',
                     },
+                    {
+                      title: '觀察名單',
+                      key: 'watch',
+                    },
                     {
                       title: '黑名單',
                       key: 'block',
@@ -309,8 +319,18 @@ export class UserList {
               gvc,
               vm.filter_type,
               text => {
-                vm.filter_type = text as any;
-                gvc.notifyDataChange(vm.id);
+                if (vm.tabLoading) {
+                  BgWidget.jumpAlert({
+                    gvc,
+                    text: '系統繁忙中，請稍後重試',
+                    justify: 'top',
+                    align: 'center',
+                    width: 240,
+                  });
+                } else {
+                  vm.filter_type = text as any;
+                  gvc.notifyDataChange(vm.id);
+                }
               }
             )}
             ${BgWidget.container(
@@ -411,8 +431,10 @@ export class UserList {
                             gvc: gvc,
                             getData: vd => {
                               vmi = vd;
+                              vm.tabLoading = true;
                               UserList.vm.page = vmi.page;
                               const limit = 20;
+
                               vm.apiJSON = {
                                 page: vmi.page - 1,
                                 limit: limit,
@@ -449,6 +471,7 @@ export class UserList {
                                 }
 
                                 vmi.loading = false;
+                                vm.tabLoading = false;
                                 vmi.callback();
                               });
                             },
@@ -542,10 +565,12 @@ export class UserList {
     }
   ) {
     const glitter = gvc.glitter;
+    const dialog = new ShareDialog(glitter);
 
     const vm: ViewModel = {
       id: glitter.getUUID(),
       loading: true,
+      tabLoading: true,
       type: 'list',
       data: {},
       dataList: undefined,
@@ -553,7 +578,7 @@ export class UserList {
       queryType: '',
       orderString: '',
       filter: {},
-      filter_type: `normal`,
+      filter_type: 'normal',
       filterId: glitter.getUUID(),
       tableId: glitter.getUUID(),
       barId: glitter.getUUID(),
@@ -599,13 +624,7 @@ export class UserList {
           },
           {
             key: '用戶狀態',
-            value: (() => {
-              if (dd.status === 1) {
-                return html`<div class="badge bg-info fs-7" style="max-height:34px;">啟用中</div>`;
-              } else {
-                return html`<div class="badge bg-danger fs-7" style="max-height:34px;">已停用</div>`;
-              }
-            })(),
+            value: (UserList.statusBadge[dd.status] || UserList.statusBadge['1'])(),
           },
         ];
       });
@@ -696,7 +715,6 @@ export class UserList {
                     {
                       name: '批量移除',
                       event: checkedData => {
-                        const dialog = new ShareDialog(gvc.glitter);
                         dialog.checkYesOrNot({
                           text: '是否確認刪除所選項目？',
                           callback: response => {
@@ -855,6 +873,7 @@ export class UserList {
       type: 'list',
       plan: GlobalUser.getPlan().id,
     };
+    const dialog = new ShareDialog(gvc.glitter);
 
     function regetData() {
       ApiUser.getPublicUserData(cf.userID).then(dd => {
@@ -980,7 +999,6 @@ export class UserList {
                   ${BgWidget.grayButton(
                     '刪除顧客',
                     gvc.event(() => {
-                      const dialog = new ShareDialog(gvc.glitter);
                       dialog.warningMessage({
                         text: '您即將刪除此顧客的所有資料，此操作無法復原。確定要刪除嗎？',
                         callback: response => {
@@ -997,29 +1015,77 @@ export class UserList {
                     })
                   )}
                   ${BgWidget.grayButton(
-                    vm.data.status ? '加入黑名單' : '解除黑名單',
+                    '調整顧客狀態',
                     gvc.event(() => {
-                      const dialog = new ShareDialog(gvc.glitter);
-                      dialog.warningMessage({
-                        text: vm.data.status
-                          ? '加入黑名單之後，此顧客將無法再進行登入、購買及使用其他功能。<br/>確定要加入黑名單嗎？'
-                          : '解除黑名單後，此顧客將恢復正常權限。<br/>確定要解除黑名單嗎？',
-                        callback: response => {
-                          if (response) {
-                            dialog.dataLoading({ text: '更新中', visible: true });
-                            vm.data.userData.type = vm.data.status ? 'block' : 'normal';
-                            ApiUser.updateUserDataManager(vm.data, vm.data.userID).then(response => {
-                              dialog.dataLoading({ text: '', visible: false });
-                              if (response.result) {
-                                regetData();
-                                dialog.successMessage({ text: '更新成功' });
-                                vm.loading = true;
-                                gvc.notifyDataChange(vm.id);
-                              } else {
-                                dialog.errorMessage({ text: '更新異常' });
-                              }
-                            });
-                          }
+                      BgWidget.dialog({
+                        gvc,
+                        title: '調整顧客狀態',
+                        innerHTML: gvc => {
+                          return html`
+                            <div>
+                              <div class="tx_700 mb-2">將此顧客狀態修改成：</div>
+                              <div class="d-flex gap-2 ${document.body.clientWidth > 768 ? '' : 'flex-column'}">
+                                ${[
+                                  { title: '一般會員', value: 'normal' },
+                                  { title: '觀察名單', value: 'watch' },
+                                  { title: '黑名單', value: 'block' },
+                                ]
+                                  .filter(item => {
+                                    return [
+                                      vm.data.status === 0 && item.value === 'block',
+                                      vm.data.status === 1 && item.value === 'normal',
+                                      vm.data.status === 2 && item.value === 'watch',
+                                    ].every(bool => !bool);
+                                  })
+                                  .map(item => {
+                                    return BgWidget.customButton({
+                                      button: {
+                                        color: 'snow',
+                                        size: 'md',
+                                        class: 'w-100',
+                                        style: 'min-height: 60px;',
+                                      },
+                                      text: {
+                                        name: item.title,
+                                      },
+                                      event: gvc.event(() => {
+                                        try {
+                                          gvc.closeDialog();
+
+                                          function call() {
+                                            dialog.dataLoading({ text: '更新中', visible: true });
+                                            vm.data.userData.type = item.value;
+                                            ApiUser.updateUserDataManager(vm.data, vm.data.userID).then(response => {
+                                              dialog.dataLoading({ text: '', visible: false });
+                                              if (response.result) {
+                                                regetData();
+                                                dialog.successMessage({ text: '更新成功' });
+                                                vm.loading = true;
+                                                gvc.notifyDataChange(vm.id);
+                                              } else {
+                                                dialog.errorMessage({ text: '更新異常' });
+                                              }
+                                            });
+                                          }
+
+                                          if (item.value === 'block') {
+                                            dialog.warningMessage({
+                                              text: '加入黑名單之後，<br/>此顧客將無法再進行登入、購買及使用其他功能。<br/>確定要加入黑名單嗎？',
+                                              callback: response => response && call(),
+                                            });
+                                          } else {
+                                            call();
+                                          }
+                                        } catch (error) {
+                                          console.error(error);
+                                        }
+                                      }),
+                                    });
+                                  })
+                                  .join('')}
+                              </div>
+                            </div>
+                          `;
                         },
                       });
                     })
@@ -1109,7 +1175,7 @@ export class UserList {
                                                         ${BgWidget.editeInput({
                                                           gvc,
                                                           title: '',
-                                                          default: referObj[item.key] || '',
+                                                          default: `${referObj[item.key] || ''}`,
                                                           placeHolder: `請輸入${item.title}`,
                                                           callback: text => {
                                                             referObj[item.key] = text;
@@ -1349,9 +1415,7 @@ export class UserList {
                             return [
                               [
                                 html`<div class="tx_700">會員等級</div>`,
-                                html`<div class="badge bg-dark fs-7" style="max-height: 34px;">
-                                  ${vm.data.member_level.tag_name}
-                                </div>`,
+                                BgWidget.secondaryInsignia(vm.data.member_level.tag_name),
                               ].join(BgWidget.mbContainer(12)),
                               [
                                 html`
@@ -1588,17 +1652,15 @@ export class UserList {
                                                   ? html`<div
                                                       style="font-size: 32px; font-weight: 400; color: #393939;"
                                                     >
-                                                      ${formatNum(totalPrice)}
+                                                      $${formatNum(totalPrice)}
                                                     </div>`
                                                   : '尚無消費紀錄'
                                               ),
                                               renderInfoBlock(
                                                 '累計消費次數',
-                                                `<div
-                                                                  style="font-size: 32px; font-weight: 400; color: #393939;"
-                                                                >
-                                                                 ${formatNum(totalOrders)}次
-                                                                </div>`
+                                                html`<div style="font-size: 32px; font-weight: 400; color: #393939;">
+                                                  ${formatNum(totalOrders)}次
+                                                </div>`
                                               ),
                                               renderInfoBlock(
                                                 '最後消費金額',
@@ -1606,7 +1668,7 @@ export class UserList {
                                                   ? html`<div
                                                       style="font-size: 32px; font-weight: 400; color: #393939;"
                                                     >
-                                                      ${formatNum(firstData.orderData.total)}
+                                                      $${formatNum(firstData.orderData.total)}
                                                     </div>`
                                                   : '尚無消費紀錄'
                                               ),
@@ -1728,7 +1790,6 @@ export class UserList {
                                               gvc: gvc,
                                               saveButton: {
                                                 event: obj => {
-                                                  const dialog = new ShareDialog(gvc.glitter);
                                                   dialog.dataLoading({
                                                     text: '發送中...',
                                                     visible: true,
@@ -1832,24 +1893,26 @@ export class UserList {
                                 return {
                                   bind: id,
                                   view: () => {
-                                    return new Promise(async (resolve, reject) => {
+                                    return new Promise(async resolve => {
                                       await saasConfig.api.getPrivateConfig(
                                         saasConfig.config.appName,
                                         'glitterUserForm'
                                       );
 
-                                      let h = html`
-                                        ${vm.plan > 1
+                                      const textList = [
+                                        html`<div class="gray-bottom-line-18">
+                                          <div class="tx_700">會員狀態</div>
+                                          <div style="margin-top: 12px">${UserList.statusBadge[vm.data.status]()}</div>
+                                        </div>`,
+                                        vm.plan > 1
                                           ? html`<div class="gray-bottom-line-18">
                                               <div class="tx_700">會員等級</div>
                                               <div style="margin-top: 12px">
-                                                <div class="badge bg-dark fs-7" style="max-height: 34px;">
-                                                  ${vm.data.member_level.tag_name}
-                                                </div>
+                                                ${BgWidget.secondaryInsignia(vm.data.member_level.tag_name)}
                                               </div>
                                             </div>`
-                                          : ''}
-                                        <div class="gray-bottom-line-18">
+                                          : '',
+                                        html`<div class="gray-bottom-line-18">
                                           <div class="tx_700">會員標籤</div>
                                           <div
                                             style="display: flex; gap: 12px; margin-top: 12px; flex-direction: row; flex-wrap: wrap;"
@@ -1860,8 +1923,8 @@ export class UserList {
                                                   .join('')
                                               : '無標籤'}
                                           </div>
-                                        </div>
-                                        ${vm.plan > 0
+                                        </div>`,
+                                        vm.plan > 0
                                           ? html` <div class="">
                                               <div class="tx_700 mb-3">社群綁定</div>
                                               ${[
@@ -1910,10 +1973,13 @@ export class UserList {
                                                 })
                                                 .join(`<div class="my-3"></div>`)}
                                             </div>`
-                                          : ''}
-                                      `;
+                                          : '',
+                                      ];
+
                                       resolve(
-                                        html` <div style="display:flex; gap: 18px; flex-direction: column;">${h}</div>`
+                                        html` <div style="display:flex; gap: 18px; flex-direction: column;">
+                                          ${textList.filter(Boolean).join('')}
+                                        </div>`
                                       );
                                     });
                                   },
@@ -1944,7 +2010,6 @@ export class UserList {
                           }
                         });
 
-                        const dialog = new ShareDialog(gvc.glitter);
                         dialog.dataLoading({ text: '更新中', visible: true });
                         ApiUser.updateUserDataManager(vm.data, vm.data.userID).then(response => {
                           dialog.dataLoading({ text: '', visible: false });
@@ -1971,6 +2036,7 @@ export class UserList {
 
   static createUser(gvc: GVC, vm: any) {
     const viewID = gvc.glitter.getUUID();
+    const dialog = new ShareDialog(gvc.glitter);
     const saasConfig: { config: any; api: any } = (window.parent as any).saasConfig;
     let userData: any = vm.initial_data || {
       name: '',
@@ -2115,8 +2181,6 @@ export class UserList {
                   )}
                   ${BgWidget.save(
                     gvc.event(async () => {
-                      const dialog = new ShareDialog(gvc.glitter);
-
                       if (CheckInput.isEmpty(userData.name)) {
                         dialog.infoMessage({ text: '請輸入顧客姓名' });
                         return;
@@ -2191,6 +2255,7 @@ export class UserList {
       checkedData: [],
     };
     let vmi: any = undefined;
+    const dialog = new ShareDialog(gvc.glitter);
 
     function getDatalist() {
       return vm.dataList.map((dd: any) => {
@@ -2210,13 +2275,7 @@ export class UserList {
 
           {
             key: '用戶狀態',
-            value: (() => {
-              if (dd.status === 1) {
-                return html` <div class="badge bg-info fs-7" style="max-height:34px;">啟用中</div>`;
-              } else {
-                return html` <div class="badge bg-danger fs-7" style="max-height:34px;">已停用</div>`;
-              }
-            })(),
+            value: (UserList.statusBadge[dd.status] || UserList.statusBadge['1'])(),
           },
         ];
       });
@@ -2289,7 +2348,6 @@ export class UserList {
                       {
                         name: '批量移除',
                         event: checkedData => {
-                          const dialog = new ShareDialog(gvc.glitter);
                           dialog.checkYesOrNot({
                             text: '是否確認刪除所選項目？',
                             callback: response => {