w-web-perm 1.0.44 → 1.0.46

package/src/components/LayoutContentGrups.vue

@@ -201,13 +201,33 @@
         >
 
             <template v-if="items">
-                <WAggridVueDyn
+                <WAggridVue
                     ref="rftable"
                     :style="`width:100%;`"
                     :height="contentHeight"
                     :opt="opt"
                 >
-                </WAggridVueDyn>
+                    <template v-slot:cell-render="props">
+                        <template v-if="props.key==='name'">
+                            <span v-if="errItemsByName[props.value]" :title="errItemsByName[props.value]">
+                                <span style="color:#F57C00;">{{ props.value }}</span>
+                                <img style="vertical-align:sub; width:16px; height:16px;" :src="$ui.getIcon('warning')" />
+                            </span>
+                            <span v-else>{{ props.value }}</span>
+                        </template>
+                        <template v-else-if="props.key==='belongUsers'">
+                            <div @click.stop.prevent @mousedown.stop.prevent>
+                                <button style="width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;" @click="$dg.showVeGrupBlngUsersById(props.row.id)">{{ props.value }}</button>
+                            </div>
+                        </template>
+                        <template v-else-if="props.key==='cpemis'">
+                            <div @click.stop.prevent @mousedown.stop.prevent>
+                                <button style="width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;" @click="$dg.showVeCpemisById(props.row.id)">{{ getCpemisText(props.value) }}</button>
+                            </div>
+                        </template>
+                        <span v-else>{{ props.value }}</span>
+                    </template>
+                </WAggridVue>
             </template>
 
         </template>
@@ -238,14 +258,13 @@ import isestr from 'wsemi/src/isestr.mjs'
 import iseobj from 'wsemi/src/iseobj.mjs'
 import isnum from 'wsemi/src/isnum.mjs'
 import cdbl from 'wsemi/src/cdbl.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'
+import WAggridVue from 'w-aggrid-vue/src/components/WAggridVue.vue'
 
 
 export default {
@@ -255,7 +274,7 @@ export default {
         WButtonCircle,
         WPopup,
         WInputCheckbox,
-        WAggridVueDyn,
+        WAggridVue,
     },
     props: {
         drawer: {
@@ -716,61 +735,6 @@ export default {
                         'belongUsers': false,
                         'cpemis': false,
                     },
-                    kpCellRender: {
-                        'name': (v) => {
-                            // console.log('kpCellRender name', v)
-
-                            //err
-                            let err = get(vo.errItemsByName, v, '')
-                            // console.log(v, err)
-
-                            //check
-                            if (isestr(err)) {
-                                v = `
-                                    <span title="${err}">
-                                        <span style="color:#F57C00;">${cstr(v)}</span>
-                                        <img style="vertical-align:sub; width:16px; height:16px;" src="${vo.$ui.getIcon('warning')}" />
-                                    </span>
-                                `
-                            }
-
-                            return v
-                        },
-                        'belongUsers': (v, k, r) => {
-                            // console.log('kpCellRender belongUsers', v, k, r)
-
-                            //id
-                            let id = get(r, 'id', '')
-                            // console.log('id', id, k, r)
-
-                            //因kpHeadFocusHighlight設定false時, 仍會於點擊其他可focus的cell, 再點回時依然出現highlight的focus邊框, 故改使用stopPropagation強制吃掉點擊訊息
-                            //因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.showVeGrupBlngUsersById('${id}')">${v}</button>
-                                </div>
-                            `
-
-                            return t
-                        },
-                        'cpemis': (v, k, r) => {
-                            // console.log('kpCellRender cpemis', v, k, r)
-
-                            //id
-                            let id = get(r, 'id', '')
-                            // console.log('id', id, k, r)
-
-                            //因kpHeadFocusHighlight設定false時, 仍會於點擊其他可focus的cell, 再點回時依然出現highlight的focus邊框, 故改使用stopPropagation強制吃掉點擊訊息
-                            //因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.showVeCpemisById('${id}')">${vo.getCpemisText(v)}</button>
-                                </div>
-                            `
-
-                            return t
-                        },
-                    },
                     rowsChange: (rs) => {
                         // console.log('rowsChange', rs)
                         // console.log('rowsChange cloneDeep(vo.opt.rows)', cloneDeep(vo.opt.rows))
@@ -801,7 +765,7 @@ export default {
             let vo = this
 
             //cmp
-            let cmp = get(vo, '$refs.rftable.$refs.$self')
+            let cmp = get(vo, '$refs.rftable')
             // console.log('cmp', cmp)
 
             //refresh, 因set不會觸發kpCellRender, 故須另外調用組件函數refresh, 進而觸發kpCellRender, 使能更新數據
@@ -813,7 +777,7 @@ export default {
             let vo = this
 
             //cmp
-            let cmp = get(vo, '$refs.rftable.$refs.$self')
+            let cmp = get(vo, '$refs.rftable')
             // console.log('cmp', cmp)
 
             //showKeys

package/src/components/LayoutContentPemis.vue

@@ -201,13 +201,33 @@
         >
 
             <template v-if="items">
-                <WAggridVueDyn
+                <WAggridVue
                     ref="rftable"
                     :style="`width:100%;`"
                     :height="contentHeight"
                     :opt="opt"
                 >
-                </WAggridVueDyn>
+                    <template v-slot:cell-render="props">
+                        <template v-if="props.key==='name'">
+                            <span v-if="errItemsByName[props.value]" :title="errItemsByName[props.value]">
+                                <span style="color:#F57C00;">{{ props.value }}</span>
+                                <img style="vertical-align:sub; width:16px; height:16px;" :src="$ui.getIcon('warning')" />
+                            </span>
+                            <span v-else>{{ props.value }}</span>
+                        </template>
+                        <template v-else-if="props.key==='belongGrups'">
+                            <div @click.stop.prevent @mousedown.stop.prevent>
+                                <button style="width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;" @click="$dg.showVePemiBlngGrupsById(props.row.id)">{{ props.value }}</button>
+                            </div>
+                        </template>
+                        <template v-else-if="props.key==='crules'">
+                            <div @click.stop.prevent @mousedown.stop.prevent>
+                                <button style="width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;" @click="$dg.showVeCrulesById(props.row.id)">{{ getCrulesText(props.value) }}</button>
+                            </div>
+                        </template>
+                        <span v-else>{{ props.value }}</span>
+                    </template>
+                </WAggridVue>
             </template>
 
         </template>
@@ -238,14 +258,13 @@ import isestr from 'wsemi/src/isestr.mjs'
 import iseobj from 'wsemi/src/iseobj.mjs'
 import isnum from 'wsemi/src/isnum.mjs'
 import cdbl from 'wsemi/src/cdbl.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'
+import WAggridVue from 'w-aggrid-vue/src/components/WAggridVue.vue'
 
 
 export default {
@@ -255,7 +274,7 @@ export default {
         WButtonCircle,
         WPopup,
         WInputCheckbox,
-        WAggridVueDyn,
+        WAggridVue,
     },
     props: {
         drawer: {
@@ -716,61 +735,6 @@ export default {
                         'belongGrups': false,
                         'crules': false,
                     },
-                    kpCellRender: {
-                        'name': (v) => {
-                            // console.log('kpCellRender name', v)
-
-                            //err
-                            let err = get(vo.errItemsByName, v, '')
-                            // console.log(v, err)
-
-                            //check
-                            if (isestr(err)) {
-                                v = `
-                                    <span title="${err}">
-                                        <span style="color:#F57C00;">${cstr(v)}</span>
-                                        <img style="vertical-align:sub; width:16px; height:16px;" src="${vo.$ui.getIcon('warning')}" />
-                                    </span>
-                                `
-                            }
-
-                            return v
-                        },
-                        'belongGrups': (v, k, r) => {
-                            // console.log('kpCellRender belongGrups', v, k, r)
-
-                            //id
-                            let id = get(r, 'id', '')
-                            // console.log('id', id, k, r)
-
-                            //因kpHeadFocusHighlight設定false時, 仍會於點擊其他可focus的cell, 再點回時依然出現highlight的focus邊框, 故改使用stopPropagation強制吃掉點擊訊息
-                            //因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.showVePemiBlngGrupsById('${id}')">${v}</button>
-                                </div>
-                            `
-
-                            return t
-                        },
-                        'crules': (v, k, r) => {
-                            // console.log('kpCellRender crules', v, k, r)
-
-                            //id
-                            let id = get(r, 'id', '')
-                            // console.log('id', id, k, r)
-
-                            //因kpHeadFocusHighlight設定false時, 仍會於點擊其他可focus的cell, 再點回時依然出現highlight的focus邊框, 故改使用stopPropagation強制吃掉點擊訊息
-                            //因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.getCrulesText(v)}</button>
-                                </div>
-                            `
-
-                            return t
-                        },
-                    },
                     rowsChange: (rs) => {
                         // console.log('rowsChange', rs)
                         // console.log('rowsChange cloneDeep(vo.opt.rows)', cloneDeep(vo.opt.rows))
@@ -801,7 +765,7 @@ export default {
             let vo = this
 
             //cmp
-            let cmp = get(vo, '$refs.rftable.$refs.$self')
+            let cmp = get(vo, '$refs.rftable')
             // console.log('cmp', cmp)
 
             //refresh, 因set不會觸發kpCellRender, 故須另外調用組件函數refresh, 進而觸發kpCellRender, 使能更新數據
@@ -813,7 +777,7 @@ export default {
             let vo = this
 
             //cmp
-            let cmp = get(vo, '$refs.rftable.$refs.$self')
+            let cmp = get(vo, '$refs.rftable')
             // console.log('cmp', cmp)
 
             //showKeys

package/src/components/LayoutContentTargets.vue

@@ -201,13 +201,23 @@
         >
 
             <template v-if="items">
-                <WAggridVueDyn
+                <WAggridVue
                     ref="rftable"
                     :style="`width:100%;`"
                     :height="contentHeight"
                     :opt="opt"
                 >
-                </WAggridVueDyn>
+                    <template v-slot:cell-render="props">
+                        <template v-if="props.key==='id'">
+                            <span v-if="errItemsById[props.value]" :title="errItemsById[props.value]">
+                                <span style="color:#F57C00;">{{ props.value }}</span>
+                                <img style="vertical-align:sub; width:16px; height:16px;" :src="$ui.getIcon('warning')" />
+                            </span>
+                            <span v-else>{{ props.value }}</span>
+                        </template>
+                        <span v-else>{{ props.value }}</span>
+                    </template>
+                </WAggridVue>
             </template>
 
         </template>
@@ -235,14 +245,13 @@ import isestr from 'wsemi/src/isestr.mjs'
 import iseobj from 'wsemi/src/iseobj.mjs'
 import isnum from 'wsemi/src/isnum.mjs'
 import cdbl from 'wsemi/src/cdbl.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'
+import WAggridVue from 'w-aggrid-vue/src/components/WAggridVue.vue'
 
 
 export default {
@@ -252,7 +261,7 @@ export default {
         WButtonCircle,
         WPopup,
         WInputCheckbox,
-        WAggridVueDyn,
+        WAggridVue,
     },
     props: {
         drawer: {
@@ -605,44 +614,6 @@ export default {
                     kpCellEditable,
                     kpRowDrag,
                     kpHeadCheckBox,
-                    kpCellRender: {
-                        'id': (v) => {
-                            // console.log('kpCellRender', v)
-
-                            //err
-                            let err = get(vo.errItemsById, v, '')
-                            // console.log(v, err)
-
-                            //check
-                            if (isestr(err)) {
-                                v = `
-                                    <span title="${err}">
-                                        <span style="color:#F57C00;">${cstr(v)}</span>
-                                        <img style="vertical-align:sub; width:16px; height:16px;" src="${vo.$ui.getIcon('warning')}" />
-                                    </span>
-                                `
-                            }
-
-                            return v
-                        },
-                    },
-                    // kpCellTooltip: {
-                    //     'id': (v) => {
-                    //         // console.log('kpCellTooltip', v)
-
-                    //         //err
-                    //         let err = get(vo.errItemsById, v, '')
-                    //         // console.log(v, err)
-
-                    //         //check
-                    //         let t = ''
-                    //         if (isestr(err)) {
-                    //             t = err
-                    //         }
-
-                    //         return t
-                    //     },
-                    // },
                     rowsChange: (rs) => {
                         // console.log('rowsChange', rs)
                         // console.log('rowsChange cloneDeep(vo.opt.rows)', cloneDeep(vo.opt.rows))
@@ -673,7 +644,7 @@ export default {
             let vo = this
 
             //cmp
-            let cmp = get(vo, '$refs.rftable.$refs.$self')
+            let cmp = get(vo, '$refs.rftable')
             // console.log('cmp', cmp)
 
             //refresh, 因set不會觸發kpCellRender, 故須另外調用組件函數refresh, 進而觸發kpCellRender, 使能更新數據
@@ -685,7 +656,7 @@ export default {
             let vo = this
 
             //cmp
-            let cmp = get(vo, '$refs.rftable.$refs.$self')
+            let cmp = get(vo, '$refs.rftable')
             // console.log('cmp', cmp)
 
             //showKeys

package/src/components/LayoutContentUsers.vue

@@ -201,13 +201,37 @@
         >
 
             <template v-if="items">
-                <WAggridVueDyn
+                <WAggridVue
                     ref="rftable"
                     :style="`width:100%;`"
                     :height="contentHeight"
                     :opt="opt"
                 >
-                </WAggridVueDyn>
+                    <template v-slot:cell-render="props">
+                        <template v-if="props.key==='name'">
+                            <span v-if="errItemsByName[props.value]" :title="errItemsByName[props.value]">
+                                <span style="color:#F57C00;">{{ props.value }}</span>
+                                <img style="vertical-align:sub; width:16px; height:16px;" :src="$ui.getIcon('warning')" />
+                            </span>
+                            <span v-else>{{ props.value }}</span>
+                        </template>
+                        <template v-else-if="props.key==='email'">
+                            <span v-if="errItemsByEmail[props.value]" :title="errItemsByEmail[props.value]">
+                                <span style="color:#F57C00;">{{ props.value }}</span>
+                                <img style="vertical-align:sub; width:16px; height:16px;" :src="$ui.getIcon('warning')" />
+                            </span>
+                            <span v-else>{{ props.value }}</span>
+                        </template>
+                        <template v-else-if="props.key==='cgrups'">
+                            <div @click.stop.prevent @mousedown.stop.prevent>
+                                <button style="width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;" @click="$dg.showVeCgrupsById(props.row.id)">{{ getCgrupsText(props.value) }}</button>
+                            </div>
+                        </template>
+                        <input v-else-if="props.key==='isAdmin'" type="checkbox" :checked="props.value === 'y'" @click="toggleItemIsAdminById(props.row.id)" :disabled="!isEditable" />
+                        <input v-else-if="props.key==='isActive'" type="checkbox" :checked="props.value === 'y'" @click="toggleItemIsActiveById(props.row.id)" :disabled="!isEditable" />
+                        <span v-else>{{ props.value }}</span>
+                    </template>
+                </WAggridVue>
             </template>
 
         </template>
@@ -238,14 +262,13 @@ import iseobj from 'wsemi/src/iseobj.mjs'
 import isnum from 'wsemi/src/isnum.mjs'
 import isEmail from 'wsemi/src/isEmail.mjs'
 import cdbl from 'wsemi/src/cdbl.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'
+import WAggridVue from 'w-aggrid-vue/src/components/WAggridVue.vue'
 
 
 export default {
@@ -255,7 +278,7 @@ export default {
         WButtonCircle,
         WPopup,
         WInputCheckbox,
-        WAggridVueDyn,
+        WAggridVue,
     },
     props: {
         drawer: {
@@ -708,89 +731,6 @@ export default {
                     kpHeadFocusHighlight: { //雖然效果不完全, 但因按鈕與cell有padding可被點擊, 故還是需要開啟
                         'cgrups': false,
                     },
-                    kpCellRender: {
-                        'name': (v) => {
-                            // console.log('kpCellRender name', v)
-
-                            //err
-                            let err = get(vo.errItemsByName, v, '')
-                            // console.log(v, err)
-
-                            //check
-                            if (isestr(err)) {
-                                v = `
-                                    <span title="${err}">
-                                        <span style="color:#F57C00;">${cstr(v)}</span>
-                                        <img style="vertical-align:sub; width:16px; height:16px;" src="${vo.$ui.getIcon('warning')}" />
-                                    </span>
-                                `
-                            }
-
-                            return v
-                        },
-                        'email': (v) => {
-                            // console.log('kpCellRender email', v)
-
-                            //err
-                            let err = get(vo.errItemsByEmail, v, '')
-                            // console.log(v, err)
-
-                            //check
-                            if (isestr(err)) {
-                                v = `
-                                    <span title="${err}">
-                                        <span style="color:#F57C00;">${cstr(v)}</span>
-                                        <img style="vertical-align:sub; width:16px; height:16px;" src="${vo.$ui.getIcon('warning')}" />
-                                    </span>
-                                `
-                            }
-
-                            return v
-                        },
-                        'cgrups': (v, k, r) => {
-                            // console.log('kpCellRender cgrups', v, k, r)
-
-                            //id
-                            let id = get(r, 'id', '')
-                            // console.log('id', id, k, r)
-
-                            //因kpHeadFocusHighlight設定false時, 仍會於點擊其他可focus的cell, 再點回時依然出現highlight的focus邊框, 故改使用stopPropagation強制吃掉點擊訊息
-                            //因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.showVeCgrupsById('${id}')">${vo.getCgrupsText(v)}</button>
-                                </div>
-                            `
-
-                            return t
-                        },
-                        'isAdmin': (v, k, r) => {
-                            // console.log('kpCellRender isAdmin', v, k, r)
-
-                            //id
-                            let id = get(r, 'id', '')
-                            // console.log('id', id, k, r)
-
-                            let t = `
-                                <input type="checkbox" ${v === 'y' ? 'checked' : ''} onclick="$vo.$dg.toggleItemIsAdminById('${id}')" ${vo.isEditable ? '' : 'disabled'} />
-                            `
-
-                            return t
-                        },
-                        'isActive': (v, k, r) => {
-                            // console.log('kpCellRender isActive', v, k, r)
-
-                            //id
-                            let id = get(r, 'id', '')
-                            // console.log('id', id, k, r)
-
-                            let t = `
-                                <input type="checkbox" ${v === 'y' ? 'checked' : ''} onclick="$vo.$dg.toggleItemIsActiveById('${id}')" ${vo.isEditable ? '' : 'disabled'} />
-                            `
-
-                            return t
-                        },
-                    },
                     rowsChange: (rs) => {
                         // console.log('rowsChange', rs)
                         // console.log('rowsChange cloneDeep(vo.opt.rows)', cloneDeep(vo.opt.rows))
@@ -821,7 +761,7 @@ export default {
             let vo = this
 
             //cmp
-            let cmp = get(vo, '$refs.rftable.$refs.$self')
+            let cmp = get(vo, '$refs.rftable')
             // console.log('cmp', cmp)
 
             //refresh, 因set不會觸發kpCellRender, 故須另外調用組件函數refresh, 進而觸發kpCellRender, 使能更新數據
@@ -833,7 +773,7 @@ export default {
             let vo = this
 
             //cmp
-            let cmp = get(vo, '$refs.rftable.$refs.$self')
+            let cmp = get(vo, '$refs.rftable')
             // console.log('cmp', cmp)
 
             //showKeys