w-web-perm 1.0.85 → 1.1.1

package/w-web-perm/351/232/250/351/231/204/350/263/207/346/226/231/diff/src_components_RelationChips.vue.new.diff

@@ -1,152 +0,0 @@
---- /dev/null	2026-09-15 21:52:30.000000000 +0800
-+++ "./w-web-perm�\232��\231\204�\207�\226\231/src/components/RelationChips.vue"	2026-09-15 21:52:29.978398800 +0800
-@@ -0,0 +1,149 @@
-+<template>
-+    <span style="white-space:nowrap;">
-+
-+        <!-- 展開全部: 固定在最左, 不隨 chip 溢出被裁; 點擊以浮層列出全部 chip(可換行、可捲動) -->
-+        <!-- WPopup(WTooltip) 之 displayType: 'block' 為 inline-block、'line' 為 block(命名與 CSS 相反), 此處須為行內元素以與其後之 chip 同列 -->
-+        <template v-if="n > 0">
-+            <WPopup
-+                style="vertical-align:middle;"
-+                :displayType="'block'"
-+                :isolated="true"
-+                :placement="'bottom-start'"
-+                :paddingStyle="{v:8,h:10}"
-+                :minWidth="320"
-+                :maxWidth="560"
-+                :labelContent="labelContentAll"
-+            >
-+                <template v-slot:trigger>
-+                    <div
-+                        :style="`display:inline-flex; align-items:center; box-sizing:border-box; height:22px; margin-right:4px; padding:0 6px; border:1px solid ${hoverAll?'#888':'#aaa'}; border-radius:4px; background:${hoverAll?'#f5f5f5':'#fff'}; color:${hoverAll?'#333':'#555'}; font-size:12px; line-height:20px; vertical-align:middle; cursor:pointer; user-select:none; transition:all 0.3s;`"
-+                        :title="tooltipAll"
-+                        @mouseenter="hoverAll=true"
-+                        @mouseleave="hoverAll=false"
-+                    >
-+                        <WIcon
-+                            :icon="mdiDotsHorizontal"
-+                            :size="14"
-+                            :color="hoverAll?'#333':'#555'"
-+                            :colorHover="'#333'"
-+                        ></WIcon>
-+                        <span style="padding-left:3px;">{{ n }}</span>
-+                    </div>
-+                </template>
-+                <template v-slot:content>
-+                    <div style="font-size:12px; color:#666; padding-bottom:6px;">
-+                        {{ usePopupTitle }}
-+                    </div>
-+                    <!-- 最大高 50vh: 於 900px 高之視窗自列位往下展開仍留得住底邊, 超過即於浮層內捲動 -->
-+                    <div style="display:flex; flex-wrap:wrap; gap:4px 6px; max-height:50vh; max-width:540px; overflow:auto;">
-+                        <RelationChip
-+                            v-for="(item, kitem) in itemsSorted"
-+                            :key="`p-${kitem}`"
-+                            :name="item.name"
-+                            :mode="item.mode"
-+                            :isCurrent="item.enable==='y'"
-+                            :editable="false"
-+                            :nameMaxWidth="600"
-+                        ></RelationChip>
-+                    </div>
-+                </template>
-+            </WPopup>
-+        </template>
-+
-+        <!-- 儲存格內之 chip: 本項永遠第 1 顆; 相鄰間距 4px; 溢出由儲存格裁切 -->
-+        <RelationChip
-+            v-for="(item, kitem) in itemsSorted"
-+            :key="`c-${kitem}`"
-+            :style="`margin-right:4px;`"
-+            :name="item.name"
-+            :mode="item.mode"
-+            :isCurrent="item.enable==='y'"
-+            :editable="editable"
-+            :labelContent="labelContent"
-+            @input="(item)=>{$emit('input',item)}"
-+        ></RelationChip>
-+
-+    </span>
-+</template>
-+
-+<script>
-+import { mdiDotsHorizontal } from '@mdi/js/mdi.js'
-+import get from 'lodash-es/get.js'
-+import size from 'lodash-es/size.js'
-+import filter from 'lodash-es/filter.js'
-+import WIcon from 'w-component-vue/src/components/WIcon.vue'
-+import WPopup from 'w-component-vue/src/components/WPopup.vue'
-+import RelationChip from './RelationChip.vue'
-+
-+
-+//關聯 chip 列表(供 VeGrupBlngUsers 之「所屬權限群組名稱」欄與 VePemiBlngGrups 之「所屬權限名稱」欄)
-+//  - items: genItems 產生之 grups/pemis 陣列, 各項含 name、mode、enable('y' 為本項)
-+//  - 顯示順序: enable='y'(本項)永遠第 1 顆, 其餘依原順序; 只改顯示, 不改儲存之 cgrups/cpemis 字串(權限合併結果與順序無關, 見 mShare.mjs 之 mergeRules)
-+//  - 本項 chip 之模式段即下拉(RelationChip 之 ModeSelectChip), 變更以 input 事件回傳新模式, 由呼叫端沿用既有 showXxxToggleItemModeByName 處理
-+//  - 「展開全部」鈕固定於最左, 浮層(WPopup, Teleport 至 body, 與 WDialog 共用 z-index 池故可疊於對話框上)內以 flex-wrap 列出全部 chip
-+export default {
-+    components: {
-+        WIcon,
-+        WPopup,
-+        RelationChip,
-+    },
-+    props: {
-+        items: {
-+            type: Array,
-+            default: () => [],
-+        },
-+        editable: {
-+            type: Boolean,
-+            default: false,
-+        },
-+        popupTitle: { //浮層標題所用之欄名(如「所屬權限名稱」), 與數量合成 chipsPopupTitle
-+            type: String,
-+            default: '',
-+        },
-+        tooltipAll: {
-+            type: String,
-+            default: '',
-+        },
-+        labelContent: { //本項 chip 之模式下拉浮層之 wtlp 屬性值
-+            type: String,
-+            default: 'modeSelect',
-+        },
-+        labelContentAll: { //展開全部之浮層之 wtlp 屬性值
-+            type: String,
-+            default: 'relationChipsAll',
-+        },
-+    },
-+    data: function() {
-+        return {
-+            mdiDotsHorizontal,
-+            hoverAll: false,
-+        }
-+    },
-+    computed: {
-+
-+        n: function() {
-+            let vo = this
-+            return size(vo.items)
-+        },
-+
-+        itemsSorted: function() {
-+            let vo = this
-+            let a = filter(vo.items, (v) => get(v, 'enable', '') === 'y')
-+            let b = filter(vo.items, (v) => get(v, 'enable', '') !== 'y')
-+            return [...a, ...b]
-+        },
-+
-+        usePopupTitle: function() {
-+            let vo = this
-+            let t = vo.$t('chipsPopupTitle')
-+            t = t.replace('{title}', vo.popupTitle)
-+            t = t.replace('{n}', vo.n)
-+            return t
-+        },
-+
-+    },
-+}
-+</script>
-+
-+<style scoped>
-+</style>

package/w-web-perm/351/232/250/351/231/204/350/263/207/346/226/231/diff/src_components_VeCgrups.vue.diff

@@ -1,76 +0,0 @@
-diff --git a/../rddmanager_2_perm/node_modules/w-web-perm/src/components/VeCgrups.vue "b/./w-web-perm\351\232\250\351\231\204\350\263\207\346\226\231/src/components/VeCgrups.vue"
-index b51b65d..0408bc8 100644
---- a/../rddmanager_2_perm/node_modules/w-web-perm/src/components/VeCgrups.vue
-+++ "b/./w-web-perm\351\232\250\351\231\204\350\263\207\346\226\231/src/components/VeCgrups.vue"
-@@ -128,19 +128,13 @@
-                         >
-                             <template v-slot:cell-render="props">
-                                 <span v-if="props.key==='name'">{{ props.value }}</span>
--                                <WTextSelect
-+                                <ModeSelectChip
-                                     v-else-if="props.key==='mode'"
--                                    :style="`width:${modeSelectWidth}px;`"
--                                    :items="modeItems"
-                                     :value="props.row.mode"
--                                    :editable="isEditable"
--                                    :paddingStyle="{v:0,h:10}"
--                                    :shadow="false"
--                                    :itemPaddingStyle="{v:8,h:10}"
--                                    :placementDistX="-10"
-+                                    :editable="isEditable && props.row.enable === 'y'"
-                                     :labelContent="'modeSelect'"
-                                     @input="(item)=>{showVeCgrupsToggleItemModeByName(props.row.name, item)}"
--                                ></WTextSelect>
-+                                ></ModeSelectChip>
-                                 <input v-else-if="props.key==='enable'" type="checkbox" :checked="props.value === 'y'" @click="showVeCgrupsToggleItemEnableByName(props.row.name)" :disabled="!isEditable" />
-                                 <span v-else>{{ props.value }}</span>
-                             </template>
-@@ -180,7 +174,7 @@ import isestr from 'wsemi/src/isestr.mjs'
- import WDialog from 'w-component-vue/src/components/WDialog.vue'
- import WButtonCircle from 'w-component-vue/src/components/WButtonCircle.vue'
- import WAggridVue from 'w-aggrid-vue/src/components/WAggridVue.vue'
--import WTextSelect from 'w-component-vue/src/components/WTextSelect.vue'
-+import ModeSelectChip from './ModeSelectChip.vue'
- 
- 
- export default {
-@@ -188,7 +182,7 @@ export default {
-         WDialog,
-         WButtonCircle,
-         WAggridVue,
--        WTextSelect,
-+        ModeSelectChip,
-     },
-     props: {
-     },
-@@ -217,10 +211,6 @@ export default {
-             isEditable: false,
-             isModified: false,
- 
--            //mode 欄之自製下拉(WTextSelect, 取代原生 select 以免彈出清單之 highlight 色由 OS 決定)
--            modeItems: ['OR', 'AND'],
--            modeSelectWidth: 72, //= 最長項 'AND' 文字實寬 + 左右內距 10×2 + 展開箭頭 18 + 邊框 1×2, 實測後定值(見 CLAUDE_experience.md)
--
-             user: null,
- 
-             items: [],
-@@ -410,7 +400,7 @@ export default {
-                         'enable': false,
-                     },
-                     kpHeadWidth: {
--                        'mode': 100,
-+                        'mode': 90, //ModeSelectChip 寬 56 + 儲存格內距 11×2 = 78, 留餘裕
-                         'enable': 100,
-                     },
-                     // kpRowDrag: {
-@@ -427,6 +417,10 @@ export default {
-                     kpHeadCheckBox: {
-                         'name': true,
-                     },
-+                    kpHeadFocusHighlight: { //儲存格內已有自己的控制項(模式下拉、勾選框), 不再疊儲存格焦點框
-+                        'mode': false,
-+                        'enable': false,
-+                    },
-                     rowsChange: (rs) => {
-                         // console.log('rowsChange', rs)
-                         // console.log('rowsChange cloneDeep(vo.opt.rows)', cloneDeep(vo.opt.rows))

package/w-web-perm/351/232/250/351/231/204/350/263/207/346/226/231/diff/src_components_VeCpemis.vue.diff

@@ -1,76 +0,0 @@
-diff --git a/../rddmanager_2_perm/node_modules/w-web-perm/src/components/VeCpemis.vue "b/./w-web-perm\351\232\250\351\231\204\350\263\207\346\226\231/src/components/VeCpemis.vue"
-index 7abe87e..8aac5db 100644
---- a/../rddmanager_2_perm/node_modules/w-web-perm/src/components/VeCpemis.vue
-+++ "b/./w-web-perm\351\232\250\351\231\204\350\263\207\346\226\231/src/components/VeCpemis.vue"
-@@ -128,19 +128,13 @@
-                         >
-                             <template v-slot:cell-render="props">
-                                 <span v-if="props.key==='name'">{{ props.value }}</span>
--                                <WTextSelect
-+                                <ModeSelectChip
-                                     v-else-if="props.key==='mode'"
--                                    :style="`width:${modeSelectWidth}px;`"
--                                    :items="modeItems"
-                                     :value="props.row.mode"
--                                    :editable="isEditable"
--                                    :paddingStyle="{v:0,h:10}"
--                                    :shadow="false"
--                                    :itemPaddingStyle="{v:8,h:10}"
--                                    :placementDistX="-10"
-+                                    :editable="isEditable && props.row.enable === 'y'"
-                                     :labelContent="'modeSelect'"
-                                     @input="(item)=>{showVeCpemisToggleItemModeByName(props.row.name, item)}"
--                                ></WTextSelect>
-+                                ></ModeSelectChip>
-                                 <input v-else-if="props.key==='enable'" type="checkbox" :checked="props.value === 'y'" @click="showVeCpemisToggleItemEnableByName(props.row.name)" :disabled="!isEditable" />
-                                 <span v-else>{{ props.value }}</span>
-                             </template>
-@@ -180,7 +174,7 @@ import isestr from 'wsemi/src/isestr.mjs'
- import WDialog from 'w-component-vue/src/components/WDialog.vue'
- import WButtonCircle from 'w-component-vue/src/components/WButtonCircle.vue'
- import WAggridVue from 'w-aggrid-vue/src/components/WAggridVue.vue'
--import WTextSelect from 'w-component-vue/src/components/WTextSelect.vue'
-+import ModeSelectChip from './ModeSelectChip.vue'
- 
- 
- export default {
-@@ -188,7 +182,7 @@ export default {
-         WDialog,
-         WButtonCircle,
-         WAggridVue,
--        WTextSelect,
-+        ModeSelectChip,
-     },
-     props: {
-     },
-@@ -217,10 +211,6 @@ export default {
-             isEditable: false,
-             isModified: false,
- 
--            //mode 欄之自製下拉(WTextSelect, 取代原生 select 以免彈出清單之 highlight 色由 OS 決定)
--            modeItems: ['OR', 'AND'],
--            modeSelectWidth: 72, //= 最長項 'AND' 文字實寬 + 左右內距 10×2 + 展開箭頭 18 + 邊框 1×2, 實測後定值(見 CLAUDE_experience.md)
--
-             grup: null,
- 
-             items: [],
-@@ -410,7 +400,7 @@ export default {
-                         'enable': false,
-                     },
-                     kpHeadWidth: {
--                        'mode': 100,
-+                        'mode': 90, //ModeSelectChip 寬 56 + 儲存格內距 11×2 = 78, 留餘裕
-                         'enable': 100,
-                     },
-                     // kpRowDrag: {
-@@ -427,6 +417,10 @@ export default {
-                     kpHeadCheckBox: {
-                         'name': true,
-                     },
-+                    kpHeadFocusHighlight: { //儲存格內已有自己的控制項(模式下拉、勾選框), 不再疊儲存格焦點框
-+                        'mode': false,
-+                        'enable': false,
-+                    },
-                     rowsChange: (rs) => {
-                         // console.log('rowsChange', rs)
-                         // console.log('rowsChange cloneDeep(vo.opt.rows)', cloneDeep(vo.opt.rows))

package/w-web-perm/351/232/250/351/231/204/350/263/207/346/226/231/diff/src_components_VeCrules.vue.diff

@@ -1,14 +0,0 @@
-diff --git a/../rddmanager_2_perm/node_modules/w-web-perm/src/components/VeCrules.vue "b/./w-web-perm\351\232\250\351\231\204\350\263\207\346\226\231/src/components/VeCrules.vue"
-index a456c45..deb9b64 100644
---- a/../rddmanager_2_perm/node_modules/w-web-perm/src/components/VeCrules.vue
-+++ "b/./w-web-perm\351\232\250\351\231\204\350\263\207\346\226\231/src/components/VeCrules.vue"
-@@ -402,6 +402,9 @@ export default {
-                     kpHeadCheckBox: {
-                         'id': true,
-                     },
-+                    kpHeadFocusHighlight: { //儲存格內已有自己的控制項(勾選框), 不再疊儲存格焦點框, 與其餘關聯對話框一致
-+                        'enable': false,
-+                    },
-                     rowsChange: (rs) => {
-                         // console.log('rowsChange', rs)
-                         // console.log('rowsChange cloneDeep(vo.opt.rows)', cloneDeep(vo.opt.rows))

package/w-web-perm/351/232/250/351/231/204/350/263/207/346/226/231/diff/src_components_VeGrupBlngUsers.vue.diff

@@ -1,121 +0,0 @@
-diff --git a/../rddmanager_2_perm/node_modules/w-web-perm/src/components/VeGrupBlngUsers.vue "b/./w-web-perm\351\232\250\351\231\204\350\263\207\346\226\231/src/components/VeGrupBlngUsers.vue"
-index 796f754..9fb6b7f 100644
---- a/../rddmanager_2_perm/node_modules/w-web-perm/src/components/VeGrupBlngUsers.vue
-+++ "b/./w-web-perm\351\232\250\351\231\204\350\263\207\346\226\231/src/components/VeGrupBlngUsers.vue"
-@@ -140,31 +140,15 @@
-                             :opt="opt"
-                         >
-                             <template v-slot:cell-render="props">
--                                <template v-if="props.key==='grupsNames'">
--                                    <span v-for="(item, idx) in props.row.grups" :key="idx" style="display:inline-block; line-height:20px; height:20px;">
--                                        <div style="display:flex;">
--                                            <div :style="'padding:0px 5px; border-top-left-radius:4px; border-bottom-left-radius:4px; ' + (item.enable === 'y' ? 'border-left:1px solid #ac2451; border-right:1px solid #9e2149; border-top:1px solid #ac2451; border-bottom:1px solid #ac2451; background:#be295a; color:#fff;' : 'border-left:1px solid #aaaaaa; border-right:1px solid #aaaaaa; border-top:1px solid #aaaaaa; border-bottom:1px solid #aaaaaa; background:#ffffff; color:#555;')">
--                                                {{ item.mode }}
--                                            </div>
--                                            <div :style="'padding:0px 5px; border-top-right-radius:4px; border-bottom-right-radius:4px; ' + (item.enable === 'y' ? '_border-left:1px solid #ac2451; border-right:1px solid #ac2451; border-top:1px solid #ac2451; border-bottom:1px solid #ac2451; background:#d22f64; color:#fff;' : '_border-left:1px solid #aaaaaa; border-right:1px solid #aaaaaa; border-top:1px solid #aaaaaa; border-bottom:1px solid #aaaaaa; background:#eeeeee; color:#555;')">
--                                                {{ item.name }}
--                                            </div>
--                                        </div>
--                                    </span>
--                                </template>
--                                <WTextSelect
--                                    v-else-if="props.key==='mode'"
--                                    :style="`width:${modeSelectWidth}px;`"
--                                    :items="modeItems"
--                                    :value="props.row.mode"
-+                                <RelationChips
-+                                    v-if="props.key==='grupsNames'"
-+                                    :items="props.row.grups"
-                                     :editable="isEditable"
--                                    :paddingStyle="{v:0,h:10}"
--                                    :shadow="false"
--                                    :itemPaddingStyle="{v:8,h:10}"
--                                    :placementDistX="-10"
-+                                    :popupTitle="$t('belongGrupsNames')"
-+                                    :tooltipAll="$t('chipsShowAll')"
-                                     :labelContent="'modeSelect'"
-                                     @input="(item)=>{showVeGrupBlngUsersToggleItemModeByName(props.row.name, item)}"
--                                ></WTextSelect>
-+                                ></RelationChips>
-                                 <input v-else-if="props.key==='enable'" type="checkbox" :checked="props.value === 'y'" @click="showVeGrupBlngUsersToggleItemEnableByName(props.row.name)" :disabled="!isEditable" />
-                                 <span v-else>{{ props.value }}</span>
-                             </template>
-@@ -207,7 +191,7 @@ import isestr from 'wsemi/src/isestr.mjs'
- import WDialog from 'w-component-vue/src/components/WDialog.vue'
- import WButtonCircle from 'w-component-vue/src/components/WButtonCircle.vue'
- import WAggridVue from 'w-aggrid-vue/src/components/WAggridVue.vue'
--import WTextSelect from 'w-component-vue/src/components/WTextSelect.vue'
-+import RelationChips from './RelationChips.vue'
- 
- 
- export default {
-@@ -215,7 +199,7 @@ export default {
-         WDialog,
-         WButtonCircle,
-         WAggridVue,
--        WTextSelect,
-+        RelationChips,
-     },
-     props: {
-     },
-@@ -244,10 +228,6 @@ export default {
-             isEditable: false,
-             isModified: false,
- 
--            //mode 欄之自製下拉(WTextSelect, 取代原生 select 以免彈出清單之 highlight 色由 OS 決定)
--            modeItems: ['OR', 'AND'],
--            modeSelectWidth: 72, //= 最長項 'AND' 文字實寬 + 左右內距 10×2 + 展開箭頭 18 + 邊框 1×2, 實測後定值(見 CLAUDE_experience.md)
--
-             grup: null,
- 
-             items: [],
-@@ -414,21 +394,19 @@ export default {
-             let opt = null
-             if (size(vo.items) > 0) {
- 
--                //ks
-+                //ks, 本列自己可改的(是否使用)在左, 由其他權限群組帶來的(所屬權限群組名稱)在右; 合併模式併入 grupsNames 欄之本項 chip(RelationChips), 不再獨立成欄
-                 let ks = [
-                     'name',
--                    'grupsNames',
--                    'mode',
-                     'enable',
-+                    'grupsNames',
-                 ]
-                 // console.log('ks', ks)
- 
-                 //kpHead
-                 let kpHead = {
-                     'name': vo.$t('userName'),
--                    'grupsNames': vo.$t('belongGrupsNames'),
--                    'mode': vo.$t('operGrupMode'),
-                     'enable': vo.$t('operEnable'),
-+                    'grupsNames': vo.$t('belongGrupsNames'),
-                 }
- 
-                 //opt
-@@ -447,7 +425,6 @@ export default {
-                         'enable': false,
-                     },
-                     kpHeadWidth: {
--                        'mode': 100,
-                         'enable': 100,
-                     },
-                     // kpRowDrag: {
-@@ -459,14 +436,14 @@ export default {
-                     kpHeadFilterType: {
-                         'name': 'text',
-                         'grupsNames': 'text',
--                        'mode': 'text',
-                         'enable': 'text',
-                     },
-                     // kpHeadCheckBox: {
-                     //     'name': true,
-                     // },
--                    kpHeadFocusHighlight: { //雖然效果不完全, 但因按鈕與cell有padding可被點擊, 故還是需要開啟
-+                    kpHeadFocusHighlight: { //儲存格內已有自己的控制項(chip 下拉、勾選框), 不再疊儲存格焦點框
-                         'grupsNames': false,
-+                        'enable': false,
-                     },
-                     rowsChange: (rs) => {
-                         // console.log('rowsChange', rs)

package/w-web-perm/351/232/250/351/231/204/350/263/207/346/226/231/diff/src_components_VePemiBlngGrups.vue.diff

@@ -1,121 +0,0 @@
-diff --git a/../rddmanager_2_perm/node_modules/w-web-perm/src/components/VePemiBlngGrups.vue "b/./w-web-perm\351\232\250\351\231\204\350\263\207\346\226\231/src/components/VePemiBlngGrups.vue"
-index 9c5a143..d2f585b 100644
---- a/../rddmanager_2_perm/node_modules/w-web-perm/src/components/VePemiBlngGrups.vue
-+++ "b/./w-web-perm\351\232\250\351\231\204\350\263\207\346\226\231/src/components/VePemiBlngGrups.vue"
-@@ -140,31 +140,15 @@
-                             :opt="opt"
-                         >
-                             <template v-slot:cell-render="props">
--                                <template v-if="props.key==='pemisNames'">
--                                    <span v-for="(item, idx) in props.row.pemis" :key="idx" style="display:inline-block; line-height:20px; height:20px;">
--                                        <div style="display:flex;">
--                                            <div :style="'padding:0px 5px; border-top-left-radius:4px; border-bottom-left-radius:4px; ' + (item.enable === 'y' ? 'border-left:1px solid #ac2451; border-right:1px solid #9e2149; border-top:1px solid #ac2451; border-bottom:1px solid #ac2451; background:#be295a; color:#fff;' : 'border-left:1px solid #aaaaaa; border-right:1px solid #aaaaaa; border-top:1px solid #aaaaaa; border-bottom:1px solid #aaaaaa; background:#ffffff; color:#555;')">
--                                                {{ item.mode }}
--                                            </div>
--                                            <div :style="'padding:0px 5px; border-top-right-radius:4px; border-bottom-right-radius:4px; ' + (item.enable === 'y' ? '_border-left:1px solid #ac2451; border-right:1px solid #ac2451; border-top:1px solid #ac2451; border-bottom:1px solid #ac2451; background:#d22f64; color:#fff;' : '_border-left:1px solid #aaaaaa; border-right:1px solid #aaaaaa; border-top:1px solid #aaaaaa; border-bottom:1px solid #aaaaaa; background:#eeeeee; color:#555;')">
--                                                {{ item.name }}
--                                            </div>
--                                        </div>
--                                    </span>
--                                </template>
--                                <WTextSelect
--                                    v-else-if="props.key==='mode'"
--                                    :style="`width:${modeSelectWidth}px;`"
--                                    :items="modeItems"
--                                    :value="props.row.mode"
-+                                <RelationChips
-+                                    v-if="props.key==='pemisNames'"
-+                                    :items="props.row.pemis"
-                                     :editable="isEditable"
--                                    :paddingStyle="{v:0,h:10}"
--                                    :shadow="false"
--                                    :itemPaddingStyle="{v:8,h:10}"
--                                    :placementDistX="-10"
-+                                    :popupTitle="$t('belongPemisNames')"
-+                                    :tooltipAll="$t('chipsShowAll')"
-                                     :labelContent="'modeSelect'"
-                                     @input="(item)=>{showVePemiBlngGrupsToggleItemModeByName(props.row.name, item)}"
--                                ></WTextSelect>
-+                                ></RelationChips>
-                                 <input v-else-if="props.key==='enable'" type="checkbox" :checked="props.value === 'y'" @click="showVePemiBlngGrupsToggleItemEnableByName(props.row.name)" :disabled="!isEditable" />
-                                 <span v-else>{{ props.value }}</span>
-                             </template>
-@@ -207,7 +191,7 @@ import isestr from 'wsemi/src/isestr.mjs'
- import WDialog from 'w-component-vue/src/components/WDialog.vue'
- import WButtonCircle from 'w-component-vue/src/components/WButtonCircle.vue'
- import WAggridVue from 'w-aggrid-vue/src/components/WAggridVue.vue'
--import WTextSelect from 'w-component-vue/src/components/WTextSelect.vue'
-+import RelationChips from './RelationChips.vue'
- 
- 
- export default {
-@@ -215,7 +199,7 @@ export default {
-         WDialog,
-         WButtonCircle,
-         WAggridVue,
--        WTextSelect,
-+        RelationChips,
-     },
-     props: {
-     },
-@@ -244,10 +228,6 @@ export default {
-             isEditable: false,
-             isModified: false,
- 
--            //mode 欄之自製下拉(WTextSelect, 取代原生 select 以免彈出清單之 highlight 色由 OS 決定)
--            modeItems: ['OR', 'AND'],
--            modeSelectWidth: 72, //= 最長項 'AND' 文字實寬 + 左右內距 10×2 + 展開箭頭 18 + 邊框 1×2, 實測後定值(見 CLAUDE_experience.md)
--
-             pemi: null,
- 
-             items: [],
-@@ -414,21 +394,19 @@ export default {
-             let opt = null
-             if (size(vo.items) > 0) {
- 
--                //ks
-+                //ks, 本列自己可改的(是否使用)在左, 由其他權限帶來的(所屬權限名稱)在右; 合併模式併入 pemisNames 欄之本項 chip(RelationChips), 不再獨立成欄
-                 let ks = [
-                     'name',
--                    'pemisNames',
--                    'mode',
-                     'enable',
-+                    'pemisNames',
-                 ]
-                 // console.log('ks', ks)
- 
-                 //kpHead
-                 let kpHead = {
-                     'name': vo.$t('grupName'),
--                    'pemisNames': vo.$t('belongPemisNames'),
--                    'mode': vo.$t('operPemiMode'),
-                     'enable': vo.$t('operEnable'),
-+                    'pemisNames': vo.$t('belongPemisNames'),
-                 }
- 
-                 //opt
-@@ -447,7 +425,6 @@ export default {
-                         'enable': false,
-                     },
-                     kpHeadWidth: {
--                        'mode': 100,
-                         'enable': 100,
-                     },
-                     // kpRowDrag: {
-@@ -459,14 +436,14 @@ export default {
-                     kpHeadFilterType: {
-                         'name': 'text',
-                         'pemisNames': 'text',
--                        'mode': 'text',
-                         'enable': 'text',
-                     },
-                     // kpHeadCheckBox: {
-                     //     'name': true,
-                     // },
--                    kpHeadFocusHighlight: { //雖然效果不完全, 但因按鈕與cell有padding可被點擊, 故還是需要開啟
-+                    kpHeadFocusHighlight: { //儲存格內已有自己的控制項(chip 下拉、勾選框), 不再疊儲存格焦點框
-                         'pemisNames': false,
-+                        'enable': false,
-                     },
-                     rowsChange: (rs) => {
-                         // console.log('rowsChange', rs)