w-web-perm 1.0.0

package/src/components/ruleGroup.vue

@@ -0,0 +1,667 @@
+<template>
+    <div
+        :changeGroup="changeGroup"
+        v-if="treeBlocks!==null"
+    >
+
+        <div
+            style=""
+            v-domresize
+            @domresize="resizeHead"
+            v-if="showHead"
+        >
+
+            <div
+                style="padding:15px; border-bottom:1px solid #ddd;"
+                v-if="editable"
+            >
+
+                <div style="padding:5px 0px; display:flex; align-items:center;">
+                    <div style="padding-right:5px; font-size:0.9rem; color:#888;">
+                        名稱:
+                    </div>
+                    <div style="">
+                        <WText
+                            style="width:300px;"
+                            :value="getName(group)"
+                            @input="(v)=>{updateProp('name',v)}"
+                        ></WText>
+                    </div>
+                </div>
+
+                <div style="padding:5px 0px; display:flex; align-items:center;">
+                    <div style="padding-right:5px; font-size:0.9rem; color:#888;">
+                        說明:
+                    </div>
+                    <div style="">
+                        <WText
+                            style="width:300px;"
+                            :value="getDescription(group)"
+                            @input="(v)=>{updateProp('description',v)}"
+                        ></WText>
+                    </div>
+                </div>
+
+            </div>
+
+            <div
+                style="padding:15px; border-bottom:1px solid #ddd;"
+                v-else
+            >
+
+                <div style="font-size:1.2rem; white-space:nowrap;">
+                    {{group.name}}
+                </div>
+
+                <div style="color:#888; font-size:0.8rem; white-space:nowrap;">
+                    {{getDescription(group)}}
+                </div>
+
+            </div>
+
+            <div
+                style="display:flex; align-items:center; padding:20px 15px 15px 15px; background:#eee; border-bottom:1px solid #ddd;"
+                v-if="false"
+            >
+
+                <div style="margin-right:10px;">全部項目預設值：</div>
+
+                <div style="margin-right:10px; display:flex; align-items:center;">
+                    <div style="margin-right:5px;">顯示</div>
+                    <div>
+                        <WSwitch
+                            :value="defaultShow"
+                            @input="(b)=>{setDefaultShow(b)}"
+                        ></WSwitch>
+                    </div>
+                </div>
+
+                <div style="margin-right:10px; display:flex; align-items:center;">
+                    <div style="margin-right:5px;">啟用</div>
+                    <div>
+                        <WSwitch
+                            :value="defaultActive"
+                            @input="(b)=>{setDefaultActive(b)}"
+                        ></WSwitch>
+                    </div>
+                </div>
+
+            </div>
+
+        </div>
+
+        <WTree
+            :viewHeightMax="treeHeight"
+            :icon-toggle-color="'#666'"
+            :icon-toggle-background-color="'transparent'"
+            :icon-toggle-background-color-hover="'transparent'"
+            :data="treeBlocks"
+        >
+            <template v-slot:item="props">
+                <div style="display:flex; align-items:center; min-height:34px;">
+
+                    <div style="">
+                        {{props.data.text}}
+                    </div>
+
+                </div>
+                <div style="position:absolute; top:5px; right:15px;">
+
+                    <div style="margin-left:10px; display:inline-block;" v-if="editable">
+
+                        <WButtonCircle
+                            :icon="mdiEyeCheck"
+                            :iconSize="18"
+                            :paddingStyle="{v:4,h:4}"
+                            :shadow="false"
+                            :tooltip="'所屬顯示'"
+                            :backgroundColor="'rgba(200,200,200,0.2)'"
+                            :backgroundColorHover="'rgba(255,150,100,0.2)'"
+                            :backgroundColorFocus="'rgba(255,150,100,0.2)'"
+                            :iconColor="'#444'"
+                            :iconColorHover="'#EF6C00'"
+                            :iconColorFocus="'#EF6C00'"
+                            @click="treeToogleShowAndActive(props.data,true,'show')"
+                        ></WButtonCircle>
+
+                        <WButtonCircle
+                            :icon="mdiEyeOff"
+                            :iconSize="18"
+                            :paddingStyle="{v:4,h:4}"
+                            :shadow="false"
+                            :tooltip="'所屬不顯示'"
+                            :backgroundColor="'rgba(200,200,200,0.2)'"
+                            :backgroundColorHover="'rgba(255,150,100,0.2)'"
+                            :backgroundColorFocus="'rgba(255,150,100,0.2)'"
+                            :iconColor="'#444'"
+                            :iconColorHover="'#EF6C00'"
+                            :iconColorFocus="'#EF6C00'"
+                            @click="treeToogleShowAndActive(props.data,false,'show')"
+                        ></WButtonCircle>
+
+                        <WButtonCircle
+                            :icon="mdiEyedropper"
+                            :iconSize="18"
+                            :paddingStyle="{v:4,h:4}"
+                            :shadow="false"
+                            :tooltip="'所屬啟用'"
+                            :backgroundColor="'rgba(200,200,200,0.2)'"
+                            :backgroundColorHover="'rgba(255,150,100,0.2)'"
+                            :backgroundColorFocus="'rgba(255,150,100,0.2)'"
+                            :iconColor="'#444'"
+                            :iconColorHover="'#EF6C00'"
+                            :iconColorFocus="'#EF6C00'"
+                            @click="treeToogleShowAndActive(props.data,true,'active')"
+                        ></WButtonCircle>
+
+                        <WButtonCircle
+                            :icon="mdiEyedropperOff"
+                            :iconSize="18"
+                            :paddingStyle="{v:4,h:4}"
+                            :shadow="false"
+                            :tooltip="'所屬不啟用'"
+                            :backgroundColor="'rgba(200,200,200,0.2)'"
+                            :backgroundColorHover="'rgba(255,150,100,0.2)'"
+                            :backgroundColorFocus="'rgba(255,150,100,0.2)'"
+                            :iconColor="'#444'"
+                            :iconColorHover="'#EF6C00'"
+                            :iconColorFocus="'#EF6C00'"
+                            @click="treeToogleShowAndActive(props.data,false,'active')"
+                        ></WButtonCircle>
+
+                    </div>
+
+                    <div style="margin-left:10px; display:inline-block;">
+                        <div style="display:flex; align-items:center;">
+                            <div style="margin-right:3px; font-size:0.8rem;">顯示</div>
+                            <WCheckbox
+                                :checkedIconColor="'yellow darken-4'"
+                                :uncheckedIconColor="'yellow darken-4'"
+                                :value="getShow(props.data)"
+                                :editable="editable"
+                                @input="toogleShow(props.data)"
+                            ></WCheckbox>
+                        </div>
+                    </div>
+
+                    <div style="margin-left:10px; display:inline-block;">
+                        <div style="display:flex; align-items:center;">
+                            <div style="margin-right:3px; font-size:0.8rem;">啟用</div>
+                            <WCheckbox
+                                :checkedIconColor="'yellow darken-4'"
+                                :uncheckedIconColor="'yellow darken-4'"
+                                :value="getActive(props.data)"
+                                :editable="editable"
+                                @input="toogleActive(props.data)"
+                            ></WCheckbox>
+                        </div>
+                    </div>
+
+                </div>
+            </template>
+        >
+        </WTree>
+
+    </div>
+</template>
+
+<script>
+import { mdiEyeCheck, mdiEyeOff, mdiEyedropper, mdiEyedropperOff } from '@mdi/js/mdi.js'
+import get from 'lodash/get'
+import set from 'lodash/set'
+import each from 'lodash/each'
+import size from 'lodash/size'
+import cloneDeep from 'lodash/cloneDeep'
+import iseobj from 'wsemi/src/iseobj.mjs'
+import isobj from 'wsemi/src/isobj.mjs'
+import isestr from 'wsemi/src/isestr.mjs'
+import haskey from 'wsemi/src/haskey.mjs'
+import debounce from 'wsemi/src/debounce.mjs'
+import WButtonCircle from 'w-component-vue/src/components/WButtonCircle.vue'
+import WTree from 'w-component-vue/src/components/WTree.vue'
+import WCheckbox from 'w-component-vue/src/components/WCheckbox.vue'
+import WText from 'w-component-vue/src/components/WText.vue'
+import { getTreeBlocks } from '../plugins/mShare.mjs'
+
+
+export default {
+    components: {
+        WButtonCircle,
+        WTree,
+        WCheckbox,
+        WText,
+    },
+    props: {
+        height: {
+            type: Number,
+            default: 100,
+        },
+        group: {
+            type: Object,
+            default: () => {},
+        },
+        showHead: {
+            type: Boolean,
+            default: true,
+        },
+        editable: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    data: function() {
+        return {
+            dbc: debounce(),
+
+            mdiEyeCheck,
+            mdiEyeOff,
+            mdiEyedropper,
+            mdiEyedropperOff,
+
+            headHeight: 100,
+
+            groupTrans: null,
+
+        }
+    },
+    computed: {
+
+        changeGroup: function() {
+            // console.log('computed changeGroup')
+
+            let vo = this
+
+            //save
+            let group = cloneDeep(vo.group)
+
+            //save rules
+            let rules = JSON.parse(group.crules)
+            group.rules = rules
+            // console.log('rules', rules)
+
+            //delete
+            delete group.crules
+
+            //save
+            vo.groupTrans = group
+            // console.log('group', group)
+
+            return ''
+        },
+
+        treeHeight: function() {
+            let vo = this
+
+            //h
+            let h = vo.height - vo.headHeight
+            h = Math.max(h, 0)
+
+            return h
+        },
+
+        targets: function() {
+            return get(this, `$store.state.targets`)
+        },
+
+        // blocks: function() {
+        //     // console.log('computed blocks')
+
+        //     let vo = this
+
+        //     //rs
+        //     let rs = map(vo.targets, (v) => {
+
+        //         //text, parentId
+        //         let s = sep(v.id, '.')
+        //         let text = get(takeRight(s), 0) //取最後節點
+        //         s = dropRight(s, 1)
+        //         let parentId = join(s, '.') //取父節點
+
+        //         return {
+        //             ...v,
+        //             parentId,
+        //             text,
+        //         }
+        //     })
+
+        //     return rs
+        // },
+
+        treeBlocks: function() {
+            // console.log('computed treeBlocks')
+
+            let vo = this
+
+            //check
+            if (size(vo.targets) === 0) {
+                return null
+            }
+
+            //getTreeBlocks
+            let r = getTreeBlocks(vo.targets)
+
+            return r
+        },
+
+        defaultShow: function() {
+            let r = get(this.groupTrans, 'rules.___all___.show', 'n')
+            return r === 'y'
+        },
+
+        defaultActive: function() {
+            let r = get(this.groupTrans, 'rules.___all___.active', 'n')
+            return r === 'y'
+        },
+
+    },
+    methods: {
+
+        resizeHead: function(msg) {
+            // console.log('methods resizeHead', msg)
+
+            let vo = this
+
+            //headHeight
+            vo.headHeight = msg.snew.offsetHeight
+
+        },
+
+        getName: function(g) {
+            // console.log('methods getName', g)
+
+            //r
+            let r = get(g, 'name', '')
+
+            //check
+            if (!isestr(r)) {
+                r = '無名稱'
+            }
+
+            return r
+        },
+
+        getDescription: function(g) {
+            // console.log('methods getDescription', g)
+
+            //r
+            let r = get(g, 'description', '')
+
+            //check
+            if (!isestr(r)) {
+                r = '無說明'
+            }
+
+            return r
+        },
+
+        setDefaultShow: function(b) {
+            let r = b ? 'y' : 'n'
+            return set(this.groupTrans, 'rules.___all___.show', r)
+        },
+
+        setDefaultActive: function(b) {
+            let r = b ? 'y' : 'n'
+            return set(this.groupTrans, 'rules.___all___.active', r)
+        },
+
+        getShowAndActive: function(item, key, def) {
+            // console.log('getShowAndActive', item, key, def)
+
+            let vo = this
+
+            //rules
+            let rules = get(vo.groupTrans, 'rules', null)
+
+            //rule
+            let rule = null
+            if (haskey(rules, item.id)) {
+                rule = rules[item.id]
+            }
+
+            //r
+            let r = get(rule, key, null)
+            // console.log(item.id, r, def)
+
+            //b
+            let b = def
+            if (r === 'y' || r === 'n') { //若權限內有定義則優先使用(覆蓋)
+                b = r === 'y'
+            }
+
+            return b
+        },
+
+        getShow: function(item) {
+            // console.log('getShow', item)
+
+            let vo = this
+
+            //def
+            let def = vo.defaultShow
+
+            //getShowAndActive
+            let b = vo.getShowAndActive(item, 'show', def)
+
+            return b
+        },
+
+        getActive: function(item) {
+            // console.log('getActive', item)
+
+            let vo = this
+
+            //def
+            let def = vo.defaultActive
+
+            //getShowAndActive
+            let b = vo.getShowAndActive(item, 'active', def)
+
+            return b
+        },
+
+        getDefaultShowAndActive: function(key) {
+            if (key === 'show') {
+                return this.defaultShow
+            }
+            return this.defaultActive
+        },
+
+        toogleShowAndActive: function(id, b, key) {
+            // console.log('toogleShowAndActive', id, b, key)
+
+            let vo = this
+
+            //def
+            let def = vo.getDefaultShowAndActive(key)
+
+            //groupTrans
+            let groupTrans = cloneDeep(vo.groupTrans)
+
+            //cb
+            let cb = b ? 'y' : 'n'
+
+            //rules
+            let rules = get(vo.groupTrans, 'rules', null)
+
+            //rule
+            let rule = null
+            if (haskey(rules, id)) {
+                rule = rules[id]
+            }
+
+            //r
+            let r = get(rule, key, null)
+
+            //toogle
+            if (r === 'y' || r === 'n') { //若權限內有定義則優先使用(覆蓋)
+                // console.log('權限內有定義')
+
+                //check
+                if (b === def) { //欲切換值與預設值相同
+
+                    //delete
+                    delete rule[key]
+
+                }
+                else {
+
+                    //save rule
+                    rule[key] = cb
+
+                }
+
+            }
+            else {
+                // console.log('權限內無定義')
+
+                //check
+                if (b === def) { //欲切換值與預設值相同,  不變更
+                    // console.log('不變更')
+                }
+                else {
+
+                    //save rule
+                    if (isobj(rule)) {
+                        rule[key] = cb
+                    }
+                    else {
+                        rule = {
+                            [key]: cb,
+                        }
+                    }
+
+                }
+
+            }
+
+            //check
+            if (iseobj(rule)) {
+
+                //save rule
+                groupTrans.rules[id] = rule
+
+            }
+            else {
+
+                //delete rule
+                delete groupTrans.rules[id]
+
+            }
+
+            //save groupTrans
+            vo.groupTrans = groupTrans
+            // console.log('groupTrans', cloneDeep(vo.groupTrans))
+
+            //emitGroupDebounce
+            vo.emitGroupDebounce()
+
+        },
+
+        toogleShow: function(item) {
+            // console.log('toogleShow', item)
+
+            let vo = this
+
+            //check
+            if (!vo.editable) {
+                return
+            }
+
+            //b
+            let b = !vo.getShow(item)
+
+            //toogleShowAndActive
+            vo.toogleShowAndActive(item.id, b, 'show')
+
+        },
+
+        toogleActive: function(item) {
+            // console.log('toogleActive', item)
+
+            let vo = this
+
+            //check
+            if (!vo.editable) {
+                return
+            }
+
+            //b
+            let b = !vo.getActive(item)
+
+            //toogleShowAndActive
+            vo.toogleShowAndActive(item.id, b, 'active')
+
+        },
+
+        treeToogleShowAndActive: function(item, b, key) {
+            // console.log('treeToogleShowAndActive', item, b, key)
+
+            let vo = this
+
+            //self
+            vo.toogleShowAndActive(item.id, b, key)
+
+            //children
+            each(item.children, (v) => {
+                vo.treeToogleShowAndActive(v, b, key)
+            })
+
+        },
+
+        updateProp: function(key, value) {
+            // console.log('methods updateProp', key, value)
+
+            let vo = this
+
+            //groupTrans
+            let groupTrans = cloneDeep(vo.groupTrans)
+
+            //save value
+            groupTrans[key] = value
+
+            //save groupTrans
+            vo.groupTrans = groupTrans
+            // console.log('groupTrans', cloneDeep(vo.groupTrans))
+
+            //emitGroupDebounce
+            vo.emitGroupDebounce()
+
+        },
+
+        emitGroupDebounce: function() {
+            //console.log('methods emitGroupDebounce')
+
+            let vo = this
+
+            //dbc
+            vo.dbc(() => {
+
+                //emitGroup
+                vo.emitGroup()
+
+            })
+
+        },
+
+        emitGroup: function() {
+            //console.log('methods emitGroup')
+
+            let vo = this
+
+            //groupTrans
+            let groupTrans = cloneDeep(vo.groupTrans)
+
+            //save crules
+            groupTrans.crules = JSON.stringify(vo.groupTrans.rules)
+
+            //emit
+            vo.$emit('update', groupTrans)
+
+        },
+
+    }
+}
+</script>
+
+<style scoped>
+</style>