w-web-perm 1.0.47 → 1.0.49

package/src/components/LayoutContentUsers.vue

@@ -39,6 +39,7 @@
 
             <!-- 功能區 -->
             <div
+                data-fmid="users-toolbar"
                 style="padding:5px; border-top:1px solid #ddd; display:flex; align-items:center;"
                 _v-if="showIsEditable || isEditable"
             >
@@ -185,6 +186,7 @@
                         :iconColor="'#eee'"
                         :iconColorHover="'#fff'"
                         :shadow="false"
+                        :promiseUnlock="true"
                         @click="saveUsers"
                     ></WButtonCircle>
 
@@ -382,12 +384,22 @@ export default {
             vo.widthUsersEmail = get(vo, 'webInfor.widthUsersEmail', '')
             vo.widthUsersDescription = get(vo, 'webInfor.widthUsersDescription', '')
 
-            vo.firstSetting = false
+            //會觸發數據變更再導致opt變更導致觸發rowsChange等事件, 故得要延遲, 供組件偵測初始設定數據初始化之用
+            setTimeout(() => {
+                vo.firstSetting = false
+                // console.log('firstSetting', vo.firstSetting)
+            }, 1)
+
         }
 
     },
     computed: {
 
+        syncState: function() {
+            let vo = this
+            return get(vo, '$store.state.syncState')
+        },
+
         webInfor: function() {
             let wi = get(this, `$store.state.webInfor`)
             return wi
@@ -735,6 +747,11 @@ export default {
                         // console.log('rowsChange', rs)
                         // console.log('rowsChange cloneDeep(vo.opt.rows)', cloneDeep(vo.opt.rows))
 
+                        //check
+                        if (!vo.syncState || vo.firstLoading || vo.firstSetting) {
+                            return
+                        }
+
                         //isModified
                         vo.isModified = true
 
@@ -1133,20 +1150,28 @@ export default {
 
         },
 
-        saveUsers: function() {
-            // console.log('method saveUsers')
+        saveUsers: function(msg) {
 
             let vo = this
 
-            async function core() {
-                let errTemp = null
+            //第一行立刻釋放按鈕視覺鎖
+            msg.pm.resolve()
 
-                //show loading
-                vo.$ui.updateLoading(true)
+            //fire-and-forget, 不 await
+            vo.doSaveUsers()
 
-                //check
+        },
+
+        doSaveUsers: function() {
+            // console.log('method doSaveUsers')
+
+            let vo = this
+
+            async function core() {
+
+                //1) 同步檢測 (在開 loading 之前)
                 if (isestr(vo.isError)) {
-                    vo.$alert(`${vo.isError}`, { type: 'error' })
+                    await vo.$dg.showCheckYes(`${vo.isError}`)
                     return
                 }
 
@@ -1155,35 +1180,34 @@ export default {
 
                 //check
                 if (size(rows) === 0) {
-                    vo.$alert(`${vo.$t('userAddEmpty')}`, { type: 'error' })
+                    await vo.$dg.showCheckYes(`${vo.$t('userAddEmpty')}`)
                     return
                 }
 
-                //updateUsers
+                //2) 確定打 API 才開 loading
+                vo.$ui.updateLoading(true)
+
+                //3) updateUsers, 各自 catch + 旗標短路
+                let okSave = false
                 await vo.$fapi.updateUsers(rows)
-                    .catch((err) => {
-                        errTemp = err
+                    .then(() => { okSave = true })
+                    .catch(async (err) => {
+                        vo.$ui.updateLoading(false) //showCheckYes 前關 loading（modal 阻斷期間避免 loading 疊在底下）
+                        await vo.$dg.showCheckYes(`${vo.$t('userSaveUsersFail')}: ${vo.$tErr(err)}`)
                     })
-
-                //check
-                if (errTemp !== null) {
-                    vo.$alert(`${vo.$t('userSaveUsersFail')}: ${errTemp}`, { type: 'error' })
-                    return
-                }
+                if (!okSave) return
 
                 //isModified
                 vo.isModified = false
 
-                //alert
-                vo.$alert(vo.$t('userSaveUsersSuccess'))
+                //alert（showCheckYes 前關 loading，避免 modal 等待期間 loading 疊在底下）
+                vo.$ui.updateLoading(false)
+                await vo.$dg.showCheckYes(vo.$t('userSaveUsersSuccess'), { type: 'success' })
 
             }
 
             //core
             core()
-                // .then((res) => {
-                //     console.log('then', res)
-                // })
                 .catch((err) => {
                     console.log('catch', err)
                     vo.$alert(vo.$t('anUnexpectedErrorOccurred'), { type: 'error' })

package/src/components/LayoutState.vue

@@ -3,6 +3,9 @@
         :style="`position:absolute; top:0px; left:0px; width:100%; height:100%; transition:all 0.5s linear; display:flex; align-items:center; justify-content:center;`"
     >
 
+        <!-- conn-state 觀看區包覆層（e2e 紅框標注用；display:flex 與原置中內容布局一致，不改視覺） -->
+        <div data-fmid="conn-state" style="display:flex; align-items:center;">
+
         <template v-if="connState==='csIng'">
 
             <img style="width:100px; height:100px;" :src="img_connection">
@@ -63,6 +66,8 @@
 
         </template>
 
+        </div>
+
     </div>
 </template>
 

package/src/components/VeCgrups.vue

@@ -115,23 +115,29 @@
 
                 </div>
 
-                <template v-if="items">
-                    <WAggridVue
-                        ref="rftable"
-                        :style="`width:100%;`"
-                        :height="contentHeight"
-                        :opt="opt"
-                    >
-                        <template v-slot:cell-render="props">
-                            <span v-if="props.key==='name'">{{ props.value }}</span>
-                            <select v-else-if="props.key==='mode'" @change="showVeCgrupsToggleItemModeByName(props.row.name, $event.target.value)" :disabled="!isEditable">
-                                <option value="OR" :selected="props.row.mode === 'OR'">OR</option>
-                                <option value="AND" :selected="props.row.mode === 'AND'">AND</option>
-                            </select>
-                            <input v-else-if="props.key==='enable'" type="checkbox" :checked="props.value === 'y'" @click="showVeCgrupsToggleItemEnableByName(props.row.name)" :disabled="!isEditable" />
-                            <span v-else>{{ props.value }}</span>
-                        </template>
-                    </WAggridVue>
+                <template
+                    v-if="!firstLoading"
+                >
+
+                    <template v-if="items">
+                        <WAggridVue
+                            ref="rftable"
+                            :style="`width:100%;`"
+                            :height="contentHeight"
+                            :opt="opt"
+                        >
+                            <template v-slot:cell-render="props">
+                                <span v-if="props.key==='name'">{{ props.value }}</span>
+                                <select v-else-if="props.key==='mode'" @change="showVeCgrupsToggleItemModeByName(props.row.name, $event.target.value)" :disabled="!isEditable">
+                                    <option value="OR" :selected="props.row.mode === 'OR'">OR</option>
+                                    <option value="AND" :selected="props.row.mode === 'AND'">AND</option>
+                                </select>
+                                <input v-else-if="props.key==='enable'" type="checkbox" :checked="props.value === 'y'" @click="showVeCgrupsToggleItemEnableByName(props.row.name)" :disabled="!isEditable" />
+                                <span v-else>{{ props.value }}</span>
+                            </template>
+                        </WAggridVue>
+                    </template>
+
                 </template>
 
                 <div
@@ -196,6 +202,8 @@ export default {
             panelHeight: 100,
             headHeight: 100,
 
+            firstLoading: true,
+            firstSetting: true,
             isEditable: false,
             isModified: false,
 
@@ -217,9 +225,26 @@ export default {
         Vue.prototype.$dg.showVeCgrupsToggleItemModeByName = vo.showVeCgrupsToggleItemModeByName
         Vue.prototype.$dg.showVeCgrupsToggleItemEnableByName = vo.showVeCgrupsToggleItemEnableByName
 
+        //firstSetting
+        if (vo.firstSetting) {
+            // console.log('webInfor', vo.webInfor)
+
+            //會觸發數據變更再導致opt變更導致觸發rowsChange等事件, 故得要延遲, 供組件偵測初始設定數據初始化之用
+            setTimeout(() => {
+                vo.firstSetting = false
+                // console.log('firstSetting', vo.firstSetting)
+            }, 1)
+
+        }
+
     },
     computed: {
 
+        syncState: function() {
+            let vo = this
+            return get(vo, '$store.state.syncState')
+        },
+
         targets: function() {
             let rs = get(this, `$store.state.targets`)
             rs = sortBy(rs, 'order')
@@ -393,6 +418,11 @@ export default {
                         // console.log('rowsChange', rs)
                         // console.log('rowsChange cloneDeep(vo.opt.rows)', cloneDeep(vo.opt.rows))
 
+                        //check
+                        if (!vo.syncState || vo.firstLoading || vo.firstSetting) {
+                            return
+                        }
+
                         //isModified
                         vo.isModified = true
 
@@ -717,6 +747,18 @@ export default {
 
             let vo = this
 
+            //save按鈕第一行立刻釋放視覺鎖
+            msg.pm.resolve()
+
+            //fire-and-forget, 不 await
+            vo.doSave()
+
+        },
+
+        doSave: function() {
+
+            let vo = this
+
             async function core() {
 
                 //show loading
@@ -775,9 +817,6 @@ export default {
                 .catch(() => { })
                 .finally(() => {
 
-                    //save按鈕解除loading
-                    msg.pm.resolve()
-
                     //hide loading
                     vo.$ui.updateLoading(false)
 
@@ -877,6 +916,9 @@ export default {
             //genOpt
             vo.genOpt()
 
+            //firstLoading
+            vo.firstLoading = false
+
             //bShow
             vo.bShow = true
 

package/src/components/VeCpemis.vue

@@ -115,23 +115,29 @@
 
                 </div>
 
-                <template v-if="items">
-                    <WAggridVue
-                        ref="rftable"
-                        :style="`width:100%;`"
-                        :height="contentHeight"
-                        :opt="opt"
-                    >
-                        <template v-slot:cell-render="props">
-                            <span v-if="props.key==='name'">{{ props.value }}</span>
-                            <select v-else-if="props.key==='mode'" @change="showVeCpemisToggleItemModeByName(props.row.name, $event.target.value)" :disabled="!isEditable">
-                                <option value="OR" :selected="props.row.mode === 'OR'">OR</option>
-                                <option value="AND" :selected="props.row.mode === 'AND'">AND</option>
-                            </select>
-                            <input v-else-if="props.key==='enable'" type="checkbox" :checked="props.value === 'y'" @click="showVeCpemisToggleItemEnableByName(props.row.name)" :disabled="!isEditable" />
-                            <span v-else>{{ props.value }}</span>
-                        </template>
-                    </WAggridVue>
+                <template
+                    v-if="!firstLoading"
+                >
+
+                    <template v-if="items">
+                        <WAggridVue
+                            ref="rftable"
+                            :style="`width:100%;`"
+                            :height="contentHeight"
+                            :opt="opt"
+                        >
+                            <template v-slot:cell-render="props">
+                                <span v-if="props.key==='name'">{{ props.value }}</span>
+                                <select v-else-if="props.key==='mode'" @change="showVeCpemisToggleItemModeByName(props.row.name, $event.target.value)" :disabled="!isEditable">
+                                    <option value="OR" :selected="props.row.mode === 'OR'">OR</option>
+                                    <option value="AND" :selected="props.row.mode === 'AND'">AND</option>
+                                </select>
+                                <input v-else-if="props.key==='enable'" type="checkbox" :checked="props.value === 'y'" @click="showVeCpemisToggleItemEnableByName(props.row.name)" :disabled="!isEditable" />
+                                <span v-else>{{ props.value }}</span>
+                            </template>
+                        </WAggridVue>
+                    </template>
+
                 </template>
 
                 <div
@@ -196,6 +202,8 @@ export default {
             panelHeight: 100,
             headHeight: 100,
 
+            firstLoading: true,
+            firstSetting: true,
             isEditable: false,
             isModified: false,
 
@@ -217,9 +225,26 @@ export default {
         Vue.prototype.$dg.showVeCpemisToggleItemModeByName = vo.showVeCpemisToggleItemModeByName
         Vue.prototype.$dg.showVeCpemisToggleItemEnableByName = vo.showVeCpemisToggleItemEnableByName
 
+        //firstSetting
+        if (vo.firstSetting) {
+            // console.log('webInfor', vo.webInfor)
+
+            //會觸發數據變更再導致opt變更導致觸發rowsChange等事件, 故得要延遲, 供組件偵測初始設定數據初始化之用
+            setTimeout(() => {
+                vo.firstSetting = false
+                // console.log('firstSetting', vo.firstSetting)
+            }, 1)
+
+        }
+
     },
     computed: {
 
+        syncState: function() {
+            let vo = this
+            return get(vo, '$store.state.syncState')
+        },
+
         targets: function() {
             let rs = get(this, `$store.state.targets`)
             rs = sortBy(rs, 'order')
@@ -393,6 +418,11 @@ export default {
                         // console.log('rowsChange', rs)
                         // console.log('rowsChange cloneDeep(vo.opt.rows)', cloneDeep(vo.opt.rows))
 
+                        //check
+                        if (!vo.syncState || vo.firstLoading || vo.firstSetting) {
+                            return
+                        }
+
                         //isModified
                         vo.isModified = true
 
@@ -717,6 +747,18 @@ export default {
 
             let vo = this
 
+            //save按鈕第一行立刻釋放視覺鎖
+            msg.pm.resolve()
+
+            //fire-and-forget, 不 await
+            vo.doSave()
+
+        },
+
+        doSave: function() {
+
+            let vo = this
+
             async function core() {
 
                 //show loading
@@ -775,9 +817,6 @@ export default {
                 .catch(() => { })
                 .finally(() => {
 
-                    //save按鈕解除loading
-                    msg.pm.resolve()
-
                     //hide loading
                     vo.$ui.updateLoading(false)
 
@@ -877,6 +916,9 @@ export default {
             //genOpt
             vo.genOpt()
 
+            //firstLoading
+            vo.firstLoading = false
+
             //bShow
             vo.bShow = true
 

package/src/components/VeCrules.vue

@@ -115,19 +115,25 @@
 
                 </div>
 
-                <template v-if="items">
-                    <WAggridVue
-                        ref="rftable"
-                        :style="`width:100%;`"
-                        :height="contentHeight"
-                        :opt="opt"
-                    >
-                        <template v-slot:cell-render="props">
-                            <span v-if="props.key==='id'">{{ props.value }}</span>
-                            <input v-else-if="props.key==='enable'" type="checkbox" :checked="props.value === 'y'" @click="toggleItemEnableById(props.row.id)" :disabled="!isEditable" />
-                            <span v-else>{{ props.value }}</span>
-                        </template>
-                    </WAggridVue>
+                <template
+                    v-if="!firstLoading"
+                >
+
+                    <template v-if="items">
+                        <WAggridVue
+                            ref="rftable"
+                            :style="`width:100%;`"
+                            :height="contentHeight"
+                            :opt="opt"
+                        >
+                            <template v-slot:cell-render="props">
+                                <span v-if="props.key==='id'">{{ props.value }}</span>
+                                <input v-else-if="props.key==='enable'" type="checkbox" :checked="props.value === 'y'" @click="toggleItemEnableById(props.row.id)" :disabled="!isEditable" />
+                                <span v-else>{{ props.value }}</span>
+                            </template>
+                        </WAggridVue>
+                    </template>
+
                 </template>
 
                 <div
@@ -192,6 +198,8 @@ export default {
             panelHeight: 100,
             headHeight: 100,
 
+            firstLoading: true,
+            firstSetting: true,
             isEditable: false,
             isModified: false,
 
@@ -212,9 +220,26 @@ export default {
         Vue.prototype.$dg.showVeCrules = vo.show
         Vue.prototype.$dg.toggleItemEnableById = vo.toggleItemEnableById
 
+        //firstSetting
+        if (vo.firstSetting) {
+            // console.log('webInfor', vo.webInfor)
+
+            //會觸發數據變更再導致opt變更導致觸發rowsChange等事件, 故得要延遲, 供組件偵測初始設定數據初始化之用
+            setTimeout(() => {
+                vo.firstSetting = false
+                // console.log('firstSetting', vo.firstSetting)
+            }, 1)
+
+        }
+
     },
     computed: {
 
+        syncState: function() {
+            let vo = this
+            return get(vo, '$store.state.syncState')
+        },
+
         targets: function() {
             let rs = get(this, `$store.state.targets`)
             rs = sortBy(rs, 'order')
@@ -383,6 +408,11 @@ export default {
                         // console.log('rowsChange', rs)
                         // console.log('rowsChange cloneDeep(vo.opt.rows)', cloneDeep(vo.opt.rows))
 
+                        //check
+                        if (!vo.syncState || vo.firstLoading || vo.firstSetting) {
+                            return
+                        }
+
                         //isModified
                         vo.isModified = true
 
@@ -660,6 +690,18 @@ export default {
 
             let vo = this
 
+            //save按鈕第一行立刻釋放視覺鎖
+            msg.pm.resolve()
+
+            //fire-and-forget, 不 await
+            vo.doSave()
+
+        },
+
+        doSave: function() {
+
+            let vo = this
+
             async function core() {
 
                 //show loading
@@ -710,9 +752,6 @@ export default {
                 .catch(() => { })
                 .finally(() => {
 
-                    //save按鈕解除loading
-                    msg.pm.resolve()
-
                     //hide loading
                     vo.$ui.updateLoading(false)
 
@@ -788,6 +827,9 @@ export default {
             //genOpt
             vo.genOpt()
 
+            //firstLoading
+            vo.firstLoading = false
+
             //bShow
             vo.bShow = true