w-web-sso 1.0.0

package/src/App.vue

@@ -0,0 +1,123 @@
+<template>
+    <div
+        v-domresize
+        @domresize="resize"
+    >
+
+        <!-- <LayoutState :style="`opacity:${ready?0:1};`" v-if="!ready"></LayoutState> -->
+        <PageLogin v-if="!ready"></PageLogin>
+
+        <transition enter-active-class="fade-enter-active" leave-active-class="fade-leave-active">
+            <Layout v-if="ready"></Layout>
+        </transition>
+
+        <LoadingWinBar></LoadingWinBar>
+        <CheckYesNo></CheckYesNo>
+        <CheckYes></CheckYes>
+
+        <!-- <VeUser></VeUser> -->
+
+    </div>
+</template>
+
+<script>
+import get from 'lodash-es/get.js'
+import cloneDeep from 'lodash-es/cloneDeep.js'
+import isestr from 'wsemi/src/isestr.mjs'
+import isDev from 'wsemi/src/isDev.mjs'
+import wui from 'w-ui-loginout/src/WUiLoginout.mjs'
+import LoadingWinBar from './components/Common/LoadingWinBar.vue'
+import CheckYesNo from './components/Common/CheckYesNo.vue'
+import CheckYes from './components/Common/CheckYes.vue'
+// import LayoutState from './components/LayoutState.vue'
+import PageLogin from './components/PageLogin.vue'
+import Layout from './components/Layout.vue'
+// import VeUser from './components/VeUser.vue'
+
+
+export default {
+    components: {
+        LoadingWinBar,
+        CheckYesNo,
+        CheckYes,
+        // LayoutState,
+        PageLogin,
+        Layout,
+        // VeUser,
+    },
+    data: function() {
+        return {
+
+        }
+    },
+    beforeMount: function() {
+        // console.log('methods beforeMount')
+
+        let vo = this
+
+        //setVo, 更換ui內vo, 才能使用廣播技術, 更換語系才能用廣播通知全部組件forceUpdate
+        vo.$ui.setVo(vo)
+
+    },
+    computed: {
+
+        ready: function() {
+            // let connState = get(this, `$store.state.connState`)
+            // return connState === '已連線'
+            return false
+        },
+
+    },
+    methods: {
+
+        resize: function(msg) {
+            // console.log('methods resize', msg)
+
+            let vo = this
+
+            //syncHeight
+            vo.$ui.syncHeight()
+
+        },
+
+    },
+}
+</script>
+
+<style>
+html,
+body {
+    font-family: '微軟正黑體', 'Microsoft JhengHei', 'MicrosoftJhengHeiRegular', 'Avenir', Helvetica, Arial, sans-serif;
+    overflow-y: hidden;
+}
+
+div,
+p,
+span,
+a,
+pre,
+input,
+textarea,
+button {
+    font-family: inherit;
+}
+
+.fade-enter-active {
+  animation: go 1s;
+}
+
+.fade-leave-active {
+  animation: back 1s;
+}
+
+@keyframes go {
+  from { opacity: 0; }
+  to {opacity: 1;}
+}
+
+@keyframes back {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+</style>

package/src/components/Common/CheckYes.vue

@@ -0,0 +1,85 @@
+<template>
+    <WConfirm
+        :show.sync="bShow"
+        :title="$t('systemMessage')"
+        :content="content"
+        :_contentColor="'white'"
+        :_contentIconColor="'white'"
+        :_contentBackgroundColor="'orange lighten-5'"
+        :headerBackgroundColor="'grey lighten-3'"
+        :hasNoBtn="false"
+        :yesBtnText="$t('ok')"
+        @click-yes="clickUnit()"
+    ></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.showCheckYes = vo.show
+
+    },
+    computed: {
+    },
+    methods: {
+
+        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
+        },
+
+        clickUnit: function() {
+            //console.log('methods clickUnit')
+
+            let vo = this
+
+            //resolve
+            vo.pm.resolve()
+
+            //hide
+            vo.bShow = false
+
+        },
+
+    }
+}
+</script>
+
+<style scoped>
+</style>

package/src/components/Common/CheckYesNo.vue

@@ -0,0 +1,91 @@
+<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: {
+
+        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/LabelItem.vue

@@ -0,0 +1,106 @@
+<template>
+    <div
+        :style="`vertical-align:top;`"
+    >
+
+        <div style="display:table; width:100%;" v-if="inline">
+
+            <div style="display:table-cell; vertical-align:top; white-space:nowrap; padding-right:5px;">
+
+                <div :style="[{display:'inline-block'},useTitleHeight,useTitleWidth,titleStyle]">{{title}}</div>
+
+            </div>
+
+            <div style="display:table-cell; vertical-align:top; width:100%;">
+
+                <slot></slot>
+
+            </div>
+
+        </div>
+
+        <div style="" v-else>
+
+            <div style="">
+
+                <span style="font-size:0.9rem;">{{title}}</span>
+
+            </div>
+
+            <div style="">
+
+                <slot></slot>
+
+            </div>
+
+        </div>
+
+    </div>
+</template>
+
+<script>
+
+
+export default {
+    components: {
+    },
+    props: {
+        title: {
+            type: String,
+            default: '',
+        },
+        titleHeight: {
+            type: Number,
+            default: null,
+        },
+        titleWidth: {
+            type: Number,
+            default: null,
+        },
+        titleStyle: {
+            type: Object,
+            default: () => {},
+        },
+        inline: {
+            type: Boolean,
+            default: true,
+        },
+    },
+    data: function() {
+        return {
+        }
+    },
+    computed: {
+
+        useTitleHeight: function() {
+            //console.log('computed useTitleHeight')
+
+            let vo = this
+
+            if (vo.titleHeight) {
+                return { height: `${vo.titleHeight}px`, lineHeight: `${vo.titleHeight}px` }
+            }
+
+            return {}
+        },
+
+        useTitleWidth: function() {
+            //console.log('computed useTitleWidth')
+
+            let vo = this
+
+            if (vo.titleWidth) {
+                return { width: `${vo.titleWidth}px` }
+            }
+
+            return {}
+        },
+
+    },
+    methods: {
+    }
+}
+</script>
+
+<style scoped>
+</style>

package/src/components/Common/LoadingWinBar.vue

@@ -0,0 +1,115 @@
+<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>處理中請稍後...</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

@@ -0,0 +1,160 @@
+<template>
+    <div style="height:100vh; background:#f5f5f5;">
+
+        <!-- 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;`">
+
+            <WButtonCircle
+                :icon="'mdi-menu'"
+                :tooltip="'左側選單'"
+                :shadow="false"
+                @click="drawer=!drawer"
+                v-if="false"
+            ></WButtonCircle>
+
+            <div style="padding-left:5px; white-space:nowrap">
+                <div style="display:flex; align-items:center;">
+
+                    <div style="padding-right:10px; display:flex; align-items:center;" v-if="webLogo">
+                        <img style="width:36px; height:36px;" :src="webLogo" />
+                    </div>
+
+                    <div>
+                        <div style="font-size:1.2rem; color:#000;">{{webName}}</div>
+                        <div style="font-size:0.8rem; color:#666;">{{$t('webDescription')}}</div>
+                    </div>
+
+                </div>
+            </div>
+
+            <div style="width:100%;"></div>
+
+            <div style="padding-right:10px; white-space:nowrap">
+                <WTextSelect
+                    style="width:100px;"
+                    :items="tgLangs"
+                    v-model="tgLangSelect"
+                    @input="changeLang"
+                ></WTextSelect>
+            </div>
+
+        </div>
+
+        <div :style="`height:calc( 100% - ${heightToolbar}px );`">
+            <LayoutContent
+            ></LayoutContent>
+        </div>
+
+
+    </div>
+</template>
+
+<script>
+import { mdiMenu } from '@mdi/js/mdi.js'
+import get from 'lodash-es/get.js'
+// import cloneDeep from 'lodash-es/cloneDeep.js'
+import isestr from 'wsemi/src/isestr.mjs'
+import WTextSelect from 'w-component-vue/src/components/WTextSelect.vue'
+import WButtonCircle from 'w-component-vue/src/components/WButtonCircle.vue'
+import LayoutContent from './LayoutContent.vue'
+
+
+export default {
+    components: {
+        WTextSelect,
+        WButtonCircle,
+        LayoutContent,
+    },
+    props: {
+    },
+    data: function() {
+        return {
+
+            mdiMenu,
+            // drawer: null, //null false
+            // menuKey: 'blocks',
+            userName: 'tester',
+
+            drawer: true, //null,
+
+            tgLangs: [
+                {
+                    id: 'cht',
+                    text: '中文',
+                },
+                {
+                    id: 'eng',
+                    text: 'English',
+                },
+            ],
+            tgLangSelect: {
+                id: 'cht',
+                text: '中文',
+            },
+
+        }
+    },
+    beforeMount: function() {
+        // console.log('beforeMount')
+
+        let vo = this
+
+        //setLang
+        vo.$ui.setLang(vo.tgLangSelect.id)
+
+    },
+    computed: {
+
+        viewState: function() {
+            return get(this, `$store.state.viewState`, '')
+        },
+
+        heightToolbar: function() {
+            //console.log('computed heightToolbar')
+
+            let vo = this
+
+            return get(vo, `$store.state.heightToolbar`, 0)
+        },
+
+        webName: {
+            get() {
+                let vo = this
+                let c = vo.$t('webName')
+                // console.log('get webName1', c)
+                if (!isestr(c)) {
+                    c = vo.$t('waitingData')
+                }
+                // console.log('get webName2', c)
+                document.title = c //更換網頁title
+                return c
+            },
+            // set(value) {
+            //     return value
+            // },
+        },
+
+        webLogo: function() {
+            //console.log('computed webLogo')
+
+            let vo = this
+
+            return get(vo, `$store.state.webInfor.webLogo`, '')
+        },
+
+    },
+    methods: {
+
+        changeLang: function(msg) {
+            // console.log('methods changeLang', msg)
+            let vo = this
+            let lang = msg.id
+            vo.$ui.setLang(lang)
+        },
+
+    }
+}
+</script>
+
+<style scoped>
+</style>