w-web-perm 1.0.24 → 1.0.26

package/src/components/LayoutContentPemis.vue

@@ -3,11 +3,11 @@
         style="height:100%;"
         v-domresize
         @domresize="resizePanel"
-        :changePemis="changePemis"
+        :changeParams="changeParams"
     >
 
         <div
-            style="border-bottom:1px solid #ddd; background:#fff;"
+            style="_border-bottom:1px solid #ddd; background:#fff;"
             v-domresize
             @domresize="resizeHead"
         >
@@ -19,20 +19,96 @@
                     <WIcon
                         :icon="mdiStackOverflow"
                         :color="'#000'"
-                        :size="26"
+                        :size="32"
                     ></WIcon>
 
-                    <div style="padding-left:10px; font-size:1.4rem; color:#000;">
-                        {{$t('managementPemis')}}
+                    <div style="padding-left:12px;">
+
+                        <div style="font-size:1.4rem; color:#000;">
+                            {{$t('managementPemis')}}
+                        </div>
+
+                        <div style="padding-top:2px; font-size:0.8rem; color:#666;">
+                            {{$t('managementPemisMsg')}}
+                        </div>
+
                     </div>
 
                 </div>
             </div>
 
             <!-- 功能區 -->
-            <div style="padding:5px; border-top:1px solid #ddd; display:flex; align-items:center;">
+            <div
+                style="padding:5px; border-top:1px solid #ddd; display:flex; align-items:center;"
+                _v-if="showIsEditable || isEditable"
+            >
+
+                <template v-if="showIsEditable">
+
+                    <div style="padding:6px 0px 4px 4px;">
+                        <WSwitch
+                            v-model="isEditable"
+                            :text="$t('modeEdit')"
+                        ></WSwitch>
+                    </div>
+
+                    <div style="padding-left:10px;"></div>
+
+                </template>
+
+                <template v-if="true">
+
+                    <WPopup
+                        :isolated="true"
+                        _show=""
+                        _hide=""
+                    >
+                        <template v-slot:trigger>
+                            <WButtonCircle
+                                :paddingStyle="{v:6,h:6}"
+                                :tooltip="$t('showTabCols')"
+                                :icon="mdiTableHeadersEye"
+                                :backgroundColor="'#fff'"
+                                :backgroundColorHover="'#f2f2f2'"
+                                _textColor="'#eee'"
+                                _textColorHover="'#fff'"
+                                :iconColor="'#444'"
+                                :iconColorHover="'#222'"
+                                :shadow="false"
+                                _click=""
+                            ></WButtonCircle>
+                        </template>
+
+                        <template v-slot:content>
+                            <div style="padding:10px 0px 10px 0px;">
+
+                                <div style="padding:7px 10px; font-size:0.85rem; color:#222; background:#f2f2f2;">
+                                    {{$t('showTabCols')}}
+                                </div>
+
+                                <div style="padding:7px 9px 0px 7px;">
+                                    <WInputCheckbox
+                                        :items="tabKeysPick"
+                                        v-model="tabKeysShow"
+                                        @input="toggleTabKeys"
+                                    >
+                                        <template v-slot="props">
+                                            <div style="padding-left:3px; display:flex; align-items:center; font-size:0.85rem; height:24px; cursor:pointer;">
+                                                {{getHead(props.item.data)}}
+                                            </div>
+                                        </template>
+                                    </WInputCheckbox>
+                                </div>
 
-                <template>
+                            </div>
+                        </template>
+                    </WPopup>
+
+                    <div style="padding-left:4px;"></div>
+
+                </template>
+
+                <template v-if="isEditable">
 
                     <WButtonCircle
                         :paddingStyle="{v:6,h:6}"
@@ -48,11 +124,11 @@
                         @click="addItem"
                     ></WButtonCircle>
 
-                    <div style="padding-left:6px;"></div>
+                    <div style="padding-left:4px;"></div>
 
                 </template>
 
-                <template v-if="hasItemCheckOne">
+                <template v-if="isEditable && hasItemCheckOne">
 
                     <WButtonCircle
                         :paddingStyle="{v:6,h:6}"
@@ -68,11 +144,11 @@
                         @click="copyItem"
                     ></WButtonCircle>
 
-                    <div style="padding-left:6px;"></div>
+                    <div style="padding-left:4px;"></div>
 
                 </template>
 
-                <template v-if="hasItemsCheck">
+                <template v-if="isEditable && hasItemsCheck">
 
                     <WButtonCircle
                         :paddingStyle="{v:6,h:6}"
@@ -88,11 +164,11 @@
                         @click="deleteItemsCheck"
                     ></WButtonCircle>
 
-                    <div style="padding-left:6px;"></div>
+                    <div style="padding-left:4px;"></div>
 
                 </template>
 
-                <template v-if="isModified">
+                <template v-if="isEditable && isModified">
 
                     <WButtonCircle
                         :paddingStyle="{v:6,h:6}"
@@ -108,7 +184,7 @@
                         @click="savePemis"
                     ></WButtonCircle>
 
-                    <div style="padding-left:6px;"></div>
+                    <div style="padding-left:4px;"></div>
 
                 </template>
 
@@ -140,7 +216,7 @@
 </template>
 
 <script>
-import { mdiStackOverflow, mdiVectorPolylinePlus, mdiCheckboxMarkedCircle, mdiCloudUploadOutline, mdiTrashCanOutline, mdiPlus, mdiPencilOutline, mdiContentCopy } from '@mdi/js/mdi.js'
+import { mdiStackOverflow, mdiVectorPolylinePlus, mdiCheckboxMarkedCircle, mdiCloudUploadOutline, mdiTrashCanOutline, mdiTableHeadersEye, mdiPlus, mdiPencilOutline, mdiContentCopy } from '@mdi/js/mdi.js'
 import JSON5 from 'json5'
 import get from 'lodash-es/get.js'
 import set from 'lodash-es/set.js'
@@ -154,15 +230,22 @@ import haskey from 'wsemi/src/haskey.mjs'
 import isestr from 'wsemi/src/isestr.mjs'
 import iseobj from 'wsemi/src/iseobj.mjs'
 import cstr from 'wsemi/src/cstr.mjs'
+import arrPull from 'wsemi/src/arrPull.mjs'
 import WIcon from 'w-component-vue/src/components/WIcon.vue'
+import WSwitch from 'w-component-vue/src/components/WSwitch.vue'
 import WButtonCircle from 'w-component-vue/src/components/WButtonCircle.vue'
+import WPopup from 'w-component-vue/src/components/WPopup.vue'
+import WInputCheckbox from 'w-component-vue/src/components/WInputCheckbox.vue'
 import WAggridVueDyn from 'w-component-vue/src/components/WAggridVueDyn.vue'
 
 
 export default {
     components: {
         WIcon,
+        WSwitch,
         WButtonCircle,
+        WPopup,
+        WInputCheckbox,
         WAggridVueDyn,
     },
     props: {
@@ -178,6 +261,7 @@ export default {
             mdiCheckboxMarkedCircle,
             mdiCloudUploadOutline,
             mdiTrashCanOutline,
+            mdiTableHeadersEye,
             mdiPlus,
             mdiPencilOutline,
             mdiContentCopy,
@@ -187,8 +271,46 @@ export default {
             headHeight: 100,
 
             firstLoading: true,
+            firstSetting: true,
+            showIsEditable: false,
+            isEditable: false,
             isModified: false,
 
+            tabKeys: [
+                'id',
+                'name',
+                'description',
+                'from',
+                'belongGrups',
+                'crules',
+                'userId',
+                'timeCreate',
+                'userIdUpdate',
+                'timeUpdate',
+            ],
+            tabKeysPick: [
+                'name',
+                'description',
+                'from',
+                'belongGrups',
+                'crules',
+                'userId',
+                'timeCreate',
+                'userIdUpdate',
+                'timeUpdate',
+            ],
+            tabKeysShow: [
+                'name',
+                'description',
+                // 'from',
+                'belongGrups',
+                'crules',
+                // 'userId',
+                // 'timeCreate',
+                // 'userIdUpdate',
+                // 'timeUpdate',
+            ],
+
             items: [],
             itemsCheck: [],
             opt: null,
@@ -204,9 +326,24 @@ export default {
         vo.$dg.showVePemiBlngGrupsById = vo.showVePemiBlngGrupsById
         vo.$dg.showVeCrulesById = vo.showVeCrulesById
 
+        //firstSetting
+        if (vo.firstSetting) {
+            // console.log('webInfor', vo.webInfor)
+            let showModeEditPemis = get(vo, 'webInfor.showModeEditPemis', '')
+            vo.showIsEditable = showModeEditPemis === 'y'
+            let modeEditPemis = get(vo, 'webInfor.modeEditPemis', '')
+            vo.isEditable = modeEditPemis === 'y'
+            vo.firstSetting = false
+        }
+
     },
     computed: {
 
+        webInfor: function() {
+            let wi = get(this, `$store.state.webInfor`)
+            return wi
+        },
+
         targets: function() {
             let rs = get(this, `$store.state.targets`)
             rs = sortBy(rs, 'order')
@@ -231,31 +368,98 @@ export default {
             return rs
         },
 
-        changePemis: function() {
-            // console.log('computed changePemis')
+        useGrups: function() {
+            let vo = this
 
+            //parse cpemis
+            let grups = map(vo.grups, (g) => {
+
+                //cloneDeep
+                g = cloneDeep(g)
+
+                //kpPemi
+                let kpPemi = {}
+                try {
+                    // console.log('g.cpemis', g.cpemis)
+                    kpPemi = JSON5.parse(g.cpemis)
+                }
+                catch (err) {}
+
+                //save kpPemi
+                g.kpPemi = kpPemi
+
+                return g
+            })
+            // console.log('grups', grups)
+
+            return grups
+        },
+
+        kpPemiGrup: function() {
             let vo = this
 
-            //check
-            if (size(vo.pemis) === 0) {
-                return ''
-            }
+            //kp
+            let kp = {}
+            each(vo.useGrups, (g) => {
+                each(g.kpPemi, (v, k) => {
+                    let isActive = get(v, 'isActive', '')
+                    if (isActive !== 'y') {
+                        return true //跳出換下一個
+                    }
+                    if (!haskey(kp, k)) {
+                        kp[k] = []
+                    }
+                    kp[k].push({
+                        grup: g,
+                        pemi: v,
+                    })
+                })
+            })
+            // console.log('kp', kp)
 
-            //pemis, grups
-            let pemis = cloneDeep(vo.pemis)
-            let grups = cloneDeep(vo.grups)
+            return kp
+        },
 
-            //addGrups
-            let items = vo.addGrups(pemis, grups)
+        kpUsePemiGrup: function() {
+            let vo = this
+
+            //_kp
+            let _kp = {}
+            each(vo.pemis, (v, k) => {
+                _kp[v.name] = true
+            })
+            // console.log('_kp', _kp)
+
+            //kp
+            let kp = {}
+            each(vo.kpPemiGrup, (v, k) => {
+                if (haskey(_kp, k)) {
+                    kp[k] = v
+                }
+            })
+            // console.log('kp', kp)
+
+            return kp
+        },
 
-            // //cloneDeep
-            // let items = cloneDeep(vo.pemis)
+        changeParams: function() {
+            // console.log('computed changeParams')
+
+            let vo = this
+
+            //trigger
+            let isEditable = vo.isEditable
+            let pemis = cloneDeep(vo.pemis)
+            let kpUsePemiGrup = cloneDeep(vo.kpUsePemiGrup)
+
+            //items
+            let items = vo.genItems(pemis, kpUsePemiGrup)
 
             //save
             vo.items = items
 
             //genOpt
-            vo.genOpt()
+            vo.genOpt({ isEditable })
 
             //firstLoading
             vo.firstLoading = false
@@ -344,6 +548,25 @@ export default {
             return c
         },
 
+        kpHead: function() {
+            let vo = this
+
+            let kp = {
+                'id': vo.$t('id'),
+                'name': vo.$t('name'),
+                'description': vo.$t('description'),
+                'from': vo.$t('from'),
+                'belongGrups': vo.$t('belongGrups'),
+                'crules': vo.$t('pemiCrules'),
+                'userId': vo.$t('userId'),
+                'timeCreate': vo.$t('timeCreate'),
+                'userIdUpdate': vo.$t('userIdUpdate'),
+                'timeUpdate': vo.$t('timeUpdate'),
+            }
+
+            return kp
+        },
+
     },
     methods: {
 
@@ -368,6 +591,16 @@ export default {
 
         },
 
+        getHead: function(key) {
+            // console.log('methods getHead', key)
+
+            let vo = this
+
+            let head = get(vo, `kpHead.${key}`, '')
+
+            return head
+        },
+
         genOpt: function() {
             // console.log('methods genOpt')
 
@@ -381,32 +614,39 @@ export default {
             if (size(vo.items) > 0) {
 
                 //ks
-                let ks = [
-                    'id',
-                    'name',
-                    'belongGrups',
-                    'description',
-                    'from',
-                    'crules',
-                    'userId',
-                    'timeCreate',
-                    'userIdUpdate',
-                    'timeUpdate',
-                ]
+                let ks = vo.tabKeys
                 // console.log('ks', ks)
 
                 //kpHead
-                let kpHead = {
-                    'id': vo.$t('id'),
-                    'name': vo.$t('name'),
-                    'belongGrups': vo.$t('belongGrups'),
-                    'description': vo.$t('description'),
-                    'from': vo.$t('from'),
-                    'crules': vo.$t('pemiCrules'),
-                    'userId': vo.$t('userId'),
-                    'timeCreate': vo.$t('timeCreate'),
-                    'userIdUpdate': vo.$t('userIdUpdate'),
-                    'timeUpdate': vo.$t('timeUpdate'),
+                let kpHead = vo.kpHead
+
+                //kpCellEditable, kpRowDrag, kpHeadCheckBox
+                let kpCellEditable = {}
+                let kpRowDrag = {}
+                let kpHeadCheckBox = {}
+                if (vo.isEditable) {
+                    kpCellEditable = {
+                        'name': true,
+                        'description': true,
+                        'from': true,
+                    }
+                    kpRowDrag = {
+                        'name': true,
+                    }
+                    kpHeadCheckBox = {
+                        'name': true,
+                    }
+                }
+
+                //kpHeadHide
+                let kpHeadHide = {
+                    'id': true,
+                }
+                if (true) {
+                    let tabKeysHide = arrPull(vo.tabKeysPick, vo.tabKeysShow)
+                    each(tabKeysHide, (k) => {
+                        kpHeadHide[k] = true
+                    })
                 }
 
                 //opt
@@ -416,17 +656,17 @@ export default {
                     keys: ks,
                     kpHead,
                     // autoFitColumn: true,
+                    defCellEditable: vo.isEditable,
                     defHeadFilter: true,
                     defCellAlignH: 'left',
-                    kpHeadHide: {
-                        'id': true,
-                    },
+                    kpHeadHide,
                     kpHeadFixLeft: {
                         'name': true,
                     },
                     defHeadMinWidth: 150,
                     kpHeadWidth: {
                         'name': 300,
+                        'description': 300,
                         'belongGrups': 300,
                         'crules': 300,
                         'timeCreate': 220,
@@ -435,26 +675,18 @@ export default {
                     kpHeadFilterType: {
                         'id': 'text',
                         'name': 'text',
-                        'belongGrups': 'text',
                         'description': 'text',
                         'from': 'text',
+                        'belongGrups': 'text',
                         'crules': 'text',
                         'userId': 'text',
                         'timeCreate': 'text',
                         'userIdUpdate': 'text',
                         'timeUpdate': 'text',
                     },
-                    kpCellEditable: {
-                        'name': true,
-                        'description': true,
-                        'from': true,
-                    },
-                    kpRowDrag: {
-                        'name': true,
-                    },
-                    kpHeadCheckBox: {
-                        'name': true,
-                    },
+                    kpCellEditable,
+                    kpRowDrag,
+                    kpHeadCheckBox,
                     kpHeadFilter: {
                         'belongGrups': false,
                         'crules': false,
@@ -515,7 +747,7 @@ export default {
                             //因stopPropagation只吃掉訊息, 原本focus會處於原本可focus的cell, 再重複點時會於前個focus的cell出現highlight邊框, 故再多使用preventDefault阻止瀏覽器預設行為, 此等同於return false
                             let t = `
                                 <div onclick="event.stopPropagation();event.preventDefault();" onmousedown="event.stopPropagation();event.preventDefault();">
-                                    <button style="width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;" onclick="$vo.$dg.showVeCrulesById('${id}')">${vo.$t('pemiEditCrulesSimple')}</button>
+                                    <button style="width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;" onclick="$vo.$dg.showVeCrulesById('${id}')">${vo.getCrulesText(v)}</button>
                                 </div>
                             `
 
@@ -560,45 +792,31 @@ export default {
 
         },
 
-        addGrups: function(pemis, grups) {
-            // console.log('method addGrups', pemis, grups)
-
+        toggleTabKeys: function() {
             let vo = this
 
-            //parse cpemis
-            grups = map(grups, (g) => {
-                let kpPemi = JSON5.parse(g.cpemis)
-                g.kpPemi = kpPemi
-                return g
-            })
-            // console.log('users', users)
+            //cmp
+            let cmp = get(vo, '$refs.rftable.$refs.$self')
+            // console.log('cmp', cmp)
 
-            //kp
-            let kp = {}
-            each(grups, (g) => {
-                each(g.kpPemi, (v, k) => {
-                    let isActive = get(v, 'isActive', '')
-                    if (isActive !== 'y') {
-                        return true //跳出換下一個
-                    }
-                    if (!haskey(kp, k)) {
-                        kp[k] = []
-                    }
-                    kp[k].push({
-                        grup: g,
-                        pemi: v,
-                    })
-                })
-            })
-            // console.log('kp', kp)
+            //showKeys
+            cmp.showKeys(vo.tabKeysShow)
+            // console.log('tabKeysShow', vo.tabKeysShow)
+
+        },
+
+        genItems: function(pemis, kpUsePemiGrup) {
+            // console.log('method genItems', pemis, kpUsePemiGrup)
+
+            let vo = this
 
             //items
             let items = map(pemis, (p) => {
 
                 //gs
                 let gs = []
-                if (haskey(kp, p.name)) {
-                    gs = kp[p.name]
+                if (haskey(kpUsePemiGrup, p.name)) {
+                    gs = kpUsePemiGrup[p.name]
                 }
                 // console.log('gs', gs)
 
@@ -620,6 +838,7 @@ export default {
                 //save belongGrups, gs
                 p.belongGrups = belongGrups
                 p.gs = gs
+                // console.log('p', p)
 
                 return p
             })
@@ -642,12 +861,22 @@ export default {
             //r
             let r = vo.$ds.pemis.funNew()
             r.name = vo.$s.getNameNew(rows, 'name', '', vo.$t('pemiAddNameNew'))
+            // r.crules = ''
             r.userId = `{${vo.$t('pemiAddIdNew')}}`
             r.timeCreate = `{${vo.$t('pemiAddIdNew')}}`
             r.userIdUpdate = `{${vo.$t('pemiAddIdNew')}}`
             r.timeUpdate = `{${vo.$t('pemiAddIdNew')}}`
             // console.log('r', r)
 
+            //belongGrups, gs
+            let gs = []
+            let belongGrups = vo.$t('pemiBlngRnderNoGrup')
+
+            //save belongGrups, gs
+            r.belongGrups = belongGrups
+            r.gs = gs
+            // console.log('r', r)
+
             //添加至最首
             rows = [
                 r,
@@ -714,6 +943,15 @@ export default {
             r.timeUpdate = `{${vo.$t('pemiAddIdNew')}}`
             // console.log('r', r)
 
+            //belongGrups, gs
+            let gs = []
+            let belongGrups = vo.$t('pemiBlngRnderNoGrup')
+
+            //save belongGrups, gs
+            r.belongGrups = belongGrups
+            r.gs = gs
+            // console.log('r', r)
+
             //添加至最首
             rows = [
                 r,
@@ -772,6 +1010,83 @@ export default {
 
         },
 
+        fltKpRule: function(kp) {
+            // console.log('fltKpRule', kp)
+
+            let vo = this
+
+            //_kp
+            let _kp = {}
+            each(vo.targets, (v, k) => {
+                _kp[v.id] = true //管控對象須使用id
+            })
+            // console.log('_kp', _kp)
+
+            //kpt
+            let kpt = {}
+            each(kp, (v, k) => {
+                if (haskey(_kp, k)) {
+                    kpt[k] = v
+                }
+            })
+
+            return kpt
+        },
+
+        getCrulesText: function(crules) {
+            // console.log('method getCrulesText', crules)
+
+            let vo = this
+
+            //kpRule
+            let kpRule = {}
+            try {
+                // console.log('crules', crules)
+                kpRule = JSON5.parse(crules)
+            }
+            catch (err) {}
+            // console.log('kpRule', kpRule)
+
+            //fltKpRule
+            kpRule = vo.fltKpRule(kpRule)
+            // console.log('kpRule(fltKpRule)', kpRule)
+
+            //vs
+            let vs = []
+            each(kpRule, (v, k) => {
+                // console.log(k, 'v', v)
+
+                //isActive
+                let isActive = v //crules各值為直接儲存y或n
+                if (isActive !== 'y') {
+                    return true //跳出換下一個
+                }
+                // console.log(k, '_isActive', _isActive)
+
+                //push
+                vs.push(k)
+
+            })
+
+            //crulesText
+            let crulesText = vo.$t('pemiRnderCrulesNoRule')
+            let t = vo.$t('pemiRnderCrulesHasNRule')
+            let n = size(vs)
+            if (n > 0) {
+                t = t.replace('{n}', n)
+                // if (n === 1) {
+                //     t = t.replace('{nms}', `(${vs[0]})`)
+                // }
+                // else {
+                //     t = t.replace('{nms}', '')
+                // }
+                t = t.replace('{nms}', '') //管控對象id太長, 顯示按鈕預設寬度小, 故皆僅顯示數量
+                crulesText = t
+            }
+
+            return crulesText
+        },
+
         showVePemiBlngGrupsById: function(id) {
             // console.log('method showVePemiBlngGrupsById', id)
 
@@ -796,6 +1111,7 @@ export default {
                     return false //跳出
                 }
             })
+            // console.log('r', r)
 
             //check
             if (!iseobj(r)) {
@@ -804,7 +1120,10 @@ export default {
             }
 
             //showVePemiBlngGrups
-            vo.$dg.showVePemiBlngGrups(r)
+            vo.$dg.showVePemiBlngGrups({
+                isEditable: vo.isEditable,
+                pemi: r,
+            })
                 .then(() => {})
                 .catch(() => {})
 
@@ -842,7 +1161,10 @@ export default {
             }
 
             //showVeCrules
-            vo.$dg.showVeCrules(r)
+            vo.$dg.showVeCrules({
+                isEditable: vo.isEditable,
+                pemi: r,
+            })
                 .then((crules) => {
                     // console.log('crules', crules)