w-web-api 1.0.52 → 1.0.55

package/src/components/Common/CheckYesNo.vue

@@ -0,0 +1,115 @@
+<template>
+    <WConfirm
+        :show.sync="bShow"
+        :title="$t('systemMessage')"
+        :content="content"
+        :_contentColor="'white'"
+        :_contentIconColor="'white'"
+        :_contentBackgroundColor="'orange lighten-5'"
+        :_titleColor="'white'"
+        :headerBackgroundColor="'grey lighten-3'"
+        :noBtnText="$t('no')"
+        :yesBtnText="$t('yes')"
+        @click-no="clickBtn(false)"
+        @click-yes="clickBtn(true)"
+    ></WConfirm>
+</template>
+
+<script>
+import Vue from 'vue'
+import genPm from 'wsemi/src/genPm.mjs'
+import WConfirm from 'w-component-vue/src/components/WConfirm.vue'
+
+export default {
+    components: {
+        WConfirm,
+    },
+    props: {
+    },
+    data: function() {
+        return {
+
+            bShow: false,
+            pm: null,
+
+            content: '',
+
+        }
+    },
+    mounted: function() {
+        //console.log('mounted')
+
+        let vo = this
+
+        //set
+        Vue.prototype.$dg.showCheckYesNo = vo.show
+
+    },
+    computed: {
+    },
+    methods: {
+
+        /**
+         * 顯示 Yes/No 確認對話框並回傳 Promise。
+         *
+         * **Contract** (caller 須遵守):
+         *   - 使用者點 **Yes** → Promise `resolve()` (無值, 進 `.then()`)
+         *   - 使用者點 **No** → Promise `reject('close')` (進 `.catch(err => err === 'close')`)
+         *
+         * 正確 caller pattern:
+         *
+         *     vo.$dg.showCheckYesNo('確定要 X？')
+         *         .then(() => {
+         *             //使用者點 Yes
+         *             doX()
+         *         })
+         *         .catch((err) => {
+         *             //使用者點 No (err === 'close') 為正常路徑, 靜默處理
+         *             if (err === 'close') return
+         *             //非預期錯誤 (CheckYesNo 本身故障等)
+         *             console.log('showCheckYesNo unexpected error', err)
+         *         })
+         *
+         * @param {string} content - 顯示在 modal 中的訊息文字
+         * @returns {Promise<void>} Yes → resolve(); No → reject('close')
+         */
+        show: function(content) {
+            //console.log('methods show', content)
+
+            let vo = this
+
+            //pm
+            vo.pm = genPm()
+
+            //save
+            vo.content = content
+
+            //show
+            vo.bShow = true
+
+            return vo.pm
+        },
+
+        clickBtn: function(mode) {
+            //console.log('methods clickBtn', mode)
+
+            let vo = this
+
+            if (mode) {
+                vo.pm.resolve()
+            }
+            else {
+                vo.pm.reject('close')
+            }
+
+            //hide
+            vo.bShow = false
+
+        },
+
+    }
+}
+</script>
+
+<style scoped>
+</style>

package/src/components/Common/LoadingWinBar.vue

@@ -0,0 +1,114 @@
+<template>
+    <WDialog
+        :show.sync="loading"
+        :maxWidth="dialogWidth"
+        @resize="resizeDialog"
+    >
+
+        <template v-slot:panel>
+
+            <div :style="`padding:${barPadding-5}px ${barPadding}px ${barPadding}px ${barPadding}px;`">
+
+                <div style="padding-bottom:3px; font-size:0.9rem; color:#666;">
+
+                    <span v-if="msg!==''">{{msg}}</span>
+
+                    <span v-else>{{$t('processing')}}</span>
+
+                </div>
+
+                <WProgressBar
+                    :style="`width:${barWidth}px;`"
+                    :height="3"
+                    :enableContinuous="true"
+                    :progColor="'deep-purple lighten-1'"
+                    :progBackgroundColor="'deep-purple lighten-4'"
+                ></WProgressBar>
+
+            </div>
+
+        </template>
+
+    </WDialog>
+</template>
+
+<script>
+import Vue from 'vue'
+import get from 'lodash-es/get.js'
+import WDialog from 'w-component-vue/src/components/WDialog.vue'
+import WProgressBar from 'w-component-vue/src/components/WProgressBar.vue'
+
+
+export default {
+    components: {
+        WDialog,
+        WProgressBar,
+    },
+    props: {
+    },
+    data: function() {
+        return {
+
+            dialogWidth: 0,
+            dialogWidthMax: 600,
+
+            barPadding: 20,
+            barWidth: 0,
+            msg: '',
+
+        }
+    },
+    mounted: function() {
+        //console.log('mounted')
+
+        let vo = this
+
+        //set
+        Vue.prototype.$dg.setLoadingWinBarMessage = vo.setMessage
+
+    },
+    computed: {
+
+        loading: function() {
+            let vo = this
+            let b = get(vo, `$store.state.loading`)
+            // console.log('loading', b)
+            return b
+        },
+
+    },
+    methods: {
+
+        setMessage: function(msg) {
+            this.msg = msg
+        },
+
+        resizeDialog: function(msg) {
+            // console.log('methods resizeDialog', msg)
+
+            let vo = this
+
+            let w = window.innerWidth
+            // console.log('window.innerWidth', window.innerWidth)
+
+            //dialogWidth
+            let dialogWidth = w - vo.barPadding * 2
+            dialogWidth = Math.max(dialogWidth, 0)
+            dialogWidth = Math.min(dialogWidth, vo.dialogWidthMax)
+            vo.dialogWidth = dialogWidth
+            // console.log('dialogWidth', dialogWidth)
+
+            //barWidth
+            let barWidth = dialogWidth - vo.barPadding * 2
+            barWidth = Math.max(barWidth, 0)
+            vo.barWidth = barWidth
+            // console.log('barWidth', barWidth)
+
+        },
+
+    }
+}
+</script>
+
+<style scoped>
+</style>

package/src/components/Layout.vue

@@ -1,8 +1,8 @@
 <template>
-    <div style="height:100svh; background:#f5f5f5;">
+    <div style="height:100svh; background:var(--bg-2);">
 
         <!-- menu top, 因窄版導致名稱換行故須使用overflow-y:hidden -->
-        <div :style="`height:${heightToolbar}px; overflow-y:hidden; padding:0px 10px; background:#fff; border-bottom:1px solid #ccc; display:flex; align-items:center;`">
+        <div :style="`height:${heightToolbar}px; box-sizing:border-box; overflow-y:hidden; padding:0px 10px; background:var(--bg-1); border-bottom:1px solid var(--border); display:flex; align-items:center;`">
 
             <WButtonCircle
                 :icon="'mdi-menu'"
@@ -20,8 +20,8 @@
                     </div>
 
                     <div>
-                        <div style="font-size:1.2rem; color:#000;">{{webName}}</div>
-                        <div style="font-size:0.8rem; color:#666;">{{$t('webDescription')}}</div>
+                        <div style="font-size:var(--fs-h3); color:var(--c-1); font-weight:600;">{{webName}}</div>
+                        <div style="font-size:var(--fs-xs); color:var(--c-2);">{{$t('webDescription')}}</div>
                     </div>
 
                 </div>
@@ -106,19 +106,16 @@ export default {
             let showLanguage = get(vo, 'webInfor.showLanguage', '')
             // console.log('showLanguage', showLanguage)
             vo.showLangSelect = showLanguage === 'y'
-            let language = get(vo, 'webInfor.language', '')
-            // console.log('language', language)
-            vo.$ui.setLang(language, 'layout mounted')
+            //setLang(null)：改走 getLang 解析（URL ?lang= > window 注入之 server 語系 > store），
+            //不再用 webInfor.language 明確覆蓋（否則會蓋掉 URL ?lang= 與使用者切換）。server 初始語系已由
+            //window.___pmwperm___.language（WWebApi 注入 index.html）提供，getLang 會取得。
+            vo.$ui.setLang(null, 'layout mounted')
             vo.firstSetting = false
         }
 
     },
     computed: {
 
-        viewState: function() {
-            return get(this, `$store.state.viewState`, '')
-        },
-
         heightToolbar: function() {
             //console.log('computed heightToolbar')
 
@@ -127,11 +124,6 @@ export default {
             return get(vo, `$store.state.heightToolbar`, 0)
         },
 
-        userToken: function() {
-            let vo = this
-            return get(vo, `$store.state.userToken`)
-        },
-
         lang: function() {
             let vo = this
             return get(vo, `$store.state.lang`, '')
@@ -167,16 +159,6 @@ export default {
             return get(vo, `$store.state.webInfor.webLogo`, '')
         },
 
-        userSelf: function() {
-            let vo = this
-            return get(vo, `$store.state.userSelf`, '')
-        },
-
-        userName: function() {
-            let vo = this
-            return get(vo, `userSelf.name`, '')
-        },
-
     },
     methods: {