w-web-perm 1.0.0

package/src/components/Common/CheckYes.vue

@@ -0,0 +1,85 @@
+<template>
+    <WConfirm
+        :show.sync="bShow"
+        :title="'系統確認訊息'"
+        :content="content"
+        :_contentColor="'white'"
+        :_contentIconColor="'white'"
+        :_contentBackgroundColor="'orange lighten-5'"
+        :headerBackgroundColor="'grey lighten-3'"
+        :hasNoBtn="false"
+        :yesBtnText="'確認'"
+        @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="'系統確認訊息'"
+        :content="content"
+        :_contentColor="'white'"
+        :_contentIconColor="'white'"
+        :_contentBackgroundColor="'orange lighten-5'"
+        :_titleColor="'white'"
+        :headerBackgroundColor="'grey lighten-3'"
+        :noBtnText="'取消'"
+        :yesBtnText="'確定'"
+        @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,87 @@
+<template>
+    <WDialog
+        :show.sync="loading"
+        :maxWidth="barWidth+barPadding*2"
+    >
+
+        <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/get'
+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 {
+            barPadding: 20,
+            barWidth: 600,
+            msg: '',
+        }
+    },
+    mounted: function() {
+        //console.log('mounted')
+
+        let vo = this
+
+        //set
+        Vue.prototype.$dg.setLoadingWinBarMessage = vo.setMessage
+
+    },
+    computed: {
+
+        loading: function() {
+            //console.log('computed loading')
+
+            let vo = this
+
+            return get(vo, `$store.state.loading`)
+        },
+
+    },
+    methods: {
+
+        setMessage: function(msg) {
+            this.msg = msg
+        },
+
+    }
+}
+</script>
+
+<style scoped>
+</style>

package/src/components/Layout.vue

@@ -0,0 +1,152 @@
+<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/get'
+// import cloneDeep from 'lodash/cloneDeep'
+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() {
+            return get(this, `$store.state.heightToolbar`)
+        },
+
+        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() {
+            return get(this, `$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>