w-web-perm 1.1.11 → 1.1.13

package/src/components/LayoutContentGrups.vue

@@ -198,6 +198,30 @@
 
             </div>
 
+            <!-- 外部列提示與外部同步警示橫幅(bannerLines 為空時 v-for 不渲染任何節點, 畫面與 DOM 同未啟用前) -->
+            <div
+                v-for="(b, kb) in bannerLines"
+                :key="kb"
+                :data-fmid="`grups-banner-${b.kind}`"
+                :style="getBannerStyle(b.kind)"
+            >
+                <svg v-if="b.kind==='ext'" style="vertical-align:sub; margin-right:4px;" width="16" height="16" viewBox="0 0 24 24"><path :d="mdiLock" fill="#666"></path></svg>
+                <img v-else style="vertical-align:sub; width:16px; height:16px; margin-right:4px;" :src="$ui.getIcon('warning')" />
+                <span>{{ b.text }}</span>
+            </div>
+
+            <!-- 資料已被更新提示(R-PRINCIPLE-00 原則 7): 有未存編輯而他人或外部同步改了本表時, 保留草稿並提示, 存檔將被伺服端拒收; 以 v-for 渲染(無提示時不渲染任何節點, 畫面與 DOM 同未啟用前) -->
+            <div
+                v-for="ks in (staleNotice ? 1 : 0)"
+                :key="`stale-${ks}`"
+                data-fmid="grups-banner-stale"
+                :style="getBannerStyle('warn')"
+            >
+                <img style="vertical-align:sub; width:16px; height:16px; margin-right:4px;" :src="$ui.getIcon('warning')" />
+                <span>{{ $t('staleDraftNotice') }}</span>
+                <button class="staleReloadBtn" data-fmid="grups-banner-stale-reload" @click="reloadDraft">{{ $t('staleDraftReload') }}</button>
+            </div>
+
         </div>
 
         <template
@@ -213,10 +237,15 @@
                 >
                     <template v-slot:cell-render="props">
                         <template v-if="props.key==='name'">
+                            <span v-for="loc in lockOfRow(props.row)" :key="loc.from" :title="getLockTitle(loc)" style="margin-right:4px;"><svg style="vertical-align:sub;" width="16" height="16" viewBox="0 0 24 24"><path :d="mdiLock" fill="#666"></path></svg></span>
                             <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-if="warnItemsByName[props.value]" :title="warnItemsByName[props.value]">
+                                <img style="vertical-align:sub; width:16px; height:16px; margin-right:4px;" :src="$ui.getIcon('warning')" />
+                                <span style="color:#F57C00;">{{ props.value }}</span>
+                            </span>
                             <span v-else>{{ props.value }}</span>
                         </template>
                         <template v-else-if="props.key==='belongUsers'">
@@ -225,7 +254,13 @@
                             </div>
                         </template>
                         <template v-else-if="props.key==='cpemis'">
-                            <div @click.stop.prevent @mousedown.stop.prevent>
+                            <div v-if="warnCpemisById[props.row.id]" style="display:flex; align-items:center; gap:4px;" @click.stop.prevent @mousedown.stop.prevent>
+                                <span :title="warnCpemisById[props.row.id]" style="display:flex; align-items:center; flex:0 0 auto;">
+                                    <img style="vertical-align:sub; width:16px; height:16px;" :src="$ui.getIcon('warning')" />
+                                </span>
+                                <button style="flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;" @click="$dg.showVeCpemisById(props.row.id)">{{ getCpemisText(props.value) }}</button>
+                            </div>
+                            <div v-else @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>
@@ -247,7 +282,7 @@
 </template>
 
 <script>
-import { mdiSelectGroup, mdiVectorPolylinePlus, mdiCheckboxMarkedCircle, mdiCloudUploadOutline, mdiTrashCanOutline, mdiTableHeadersEye, mdiPlus, mdiPencilOutline, mdiContentCopy } from '@mdi/js/mdi.js'
+import { mdiSelectGroup, mdiVectorPolylinePlus, mdiCheckboxMarkedCircle, mdiCloudUploadOutline, mdiTrashCanOutline, mdiTableHeadersEye, mdiPlus, mdiPencilOutline, mdiContentCopy, mdiLock } from '@mdi/js/mdi.js'
 import JSON5 from 'json5'
 import get from 'lodash-es/get.js'
 import set from 'lodash-es/set.js'
@@ -264,6 +299,16 @@ import isnum from 'wsemi/src/isnum.mjs'
 import cdbl from 'wsemi/src/cdbl.mjs'
 import arrPull from 'wsemi/src/arrPull.mjs'
 import eachOwn from '../js/eachOwn.mjs'
+import cvKpToObj from '../js/cvKpToObj.mjs'
+import { getRefWarns, getRefWarnText, fmtWarn } from '../js/getAuthWarn.mjs'
+import { getNameErrs, mapNameKp } from '../js/getNameErrs.mjs'
+import { getDelImpact, getDelConfirmText } from '../js/getDelRefCount.mjs'
+import { getSavePreview } from '../js/getCascadePreview.mjs'
+import { getAddImpact, getAddConfirmText } from '../js/getAddImpact.mjs'
+import { isExternalRow } from '../js/externalRows.mjs'
+import { makeBaseline } from '../js/rowDigest.mjs'
+import { refsChanged, planDraftSync, isDraftStale } from '../js/draftSync.mjs'
+import { fmtVars, getBannerLines, splitCheckedRows, getExternalEdits } from '../js/externalUi.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'
@@ -298,6 +343,7 @@ export default {
             mdiPlus,
             mdiPencilOutline,
             mdiContentCopy,
+            mdiLock,
 
             panelHeight: 100,
             headHeight: 100,
@@ -305,6 +351,7 @@ export default {
             firstLoading: true,
             firstSetting: true,
             systemProcing: false, //程式端載入/重載清單資料期間為 true, 用於排除非使用者操作之 rowsChange (見 $ui.markDataReload)
+            postSaving: false, //儲存成功後至成功訊息框關閉(再加短暫緩衝)期間為 true: 刪除或改名連帶更新引用端表(ADR-036), 一次儲存使 store 先後推播兩張表而多次重建清單, 其後非同步觸發之 rowsChange 不得視為使用者變更(markDataReload 之 1ms 窗口可能短於 ag-grid 渲染, 儲存鈕殘留的間歇現象); 成功訊息框期間使用者無從編輯
             showIsEditable: false,
             isEditable: false,
             isModified: false,
@@ -348,11 +395,22 @@ export default {
             widthGrupsDescription: null,
 
             items: [],
+            baseline: [], //載入基準([[id, 內容指紋]]): 與 items 於 changeParams 同一處由同一份來源列產生(草稿所依據之版本), 存檔時隨 RPC 送伺服端比對是否過期(F-26, R-BASELINE-01); 不得於存檔當下由最新 store 重算
+            baseRows: [], //草稿所依據之那份 store 列(與 baseline 同時產生): 存檔前之預覽、外部列守門以它為「舊」, 不用已變新之 store(有未存編輯時 store 可能已被推播更新, 見 draftSync)
+            staleNotice: false, //草稿所依據之整表已被他人／外部同步更新(R-PRINCIPLE-00 原則 7): true 時顯示「資料已被更新」橫幅與重新載入鈕
+            syncTick: 0, //重新載入觸發器(reloadDraft 遞增): changeParams 讀它而於重算時於 computed 內重建草稿, 使 genOpt 讀取之反應式來源(語系等)的依賴重新收集——保留草稿(keep)時 changeParams 不呼叫 genOpt, 依賴會收縮, 若在 computed 外直接重建則不會恢復(外審 sol 第 4 點)
             itemsCheck: [],
             opt: null,
 
         }
     },
+    created: function() {
+        //syncMark(非響應式; changeParams 讀它而不因它建立響應式依賴, 見 draftSync.planDraftSync): refs／editable 為上次建立草稿時之各表 store 參照與編輯模式, dirty 為未存編輯旗標(isModified)之鏡像(由 watch 維護),
+        //baseline 為草稿載入時之基準之副本(供保留草稿時判定是否已過期). 不讓 changeParams 依賴 isModified／baseline: 旗標切換或重新載入不得觸發它重算(其重算＝重建草稿, 見 draftSync)
+        this.syncMark = { refs: null, editable: undefined, dirty: false, baseline: [], tick: 0 }
+        //saveMark(非響應式, 同 syncMark 之理由): saving 為「自己之存檔請求進行中」(送出前設真, 回應〔成功或失敗〕一到歸零)——此期間伺服端寫入所致之推播若先於回應抵達, 不是他人更新(planDraftSync 回 'keepQuiet': 保留草稿但不顯示過期橫幅; run12)
+        this.saveMark = { saving: false }
+    },
     mounted: function() {
         // console.log('mounted')
 
@@ -383,6 +441,17 @@ export default {
         }
 
     },
+    watch: {
+        //未存編輯旗標: 維護 syncMark.dirty 鏡像(changeParams 以之判斷「有未存編輯」而不依賴旗標本身). 旗標歸零(已儲存或已放棄)而 store 於保留草稿期間已變新者, 立即依最新 store 重建
+        //(儲存成功之推播若先於儲存回應抵達, 其時有未存編輯而被保留; 回應回來旗標歸零時須補上這次重建, 否則畫面停在儲存前之草稿而基準已過期)
+        isModified: function(b) {
+            let vo = this
+            vo.syncMark.dirty = b === true
+            if (b !== true && vo.syncMark.refs !== null && refsChanged(vo.syncMark.refs, vo.curRefs())) {
+                vo.reloadDraft()
+            }
+        },
+    },
     computed: {
 
         syncState: function() {
@@ -432,7 +501,7 @@ export default {
                 let kpGrup = {}
                 try {
                     // console.log('u.cgrups', u.cgrups)
-                    kpGrup = JSON5.parse(u.cgrups)
+                    kpGrup = cvKpToObj(JSON5.parse(u.cgrups), { hasMode: true }) //陣列形式經共用解碼(R-AUTH-LIST-01)
                 }
                 catch (err) {}
 
@@ -493,6 +562,22 @@ export default {
             return kp
         },
 
+        lockExternalRows: function() {
+            //後台是否不得改外部列(from 為非空字串者; 伺服端 opt.lockExternalRows 經 getWebInfor 帶來, 'y'／'n'; 舊伺服端無此鍵視為未啟用)
+            return get(this, 'webInfor.lockExternalRows', '')
+        },
+
+        isLockExternal: function() {
+            return this.lockExternalRows === 'y'
+        },
+
+        bannerLines: function() {
+            let vo = this
+
+            //清單上方橫幅各行: 外部列提示(啟用保護且有外部列)＋本表之外部同步警示(疑似 id 重編); 皆無為空陣列, 不渲染任何節點
+            return getBannerLines({ keyTable: 'grups', kind: 'Grup', rows: vo.grups, lock: vo.isLockExternal, syncWarns: get(vo, 'webInfor.syncWarns', []), $t: (k) => vo.$t(k) })
+        },
+
         changeParams: function() {
             // console.log('computed changeParams')
 
@@ -500,20 +585,24 @@ export default {
 
             //trigger
             let isEditable = vo.isEditable
-            let grups = cloneDeep(vo.grups)
-            let kpUseGrupUser = cloneDeep(vo.kpUseGrupUser)
-
-            //items
-            let items = vo.genItems(grups, kpUseGrupUser)
-
-            //save
-            vo.items = items
-
-            //genOpt
-            vo.genOpt({ isEditable })
-
-            //firstLoading
-            vo.firstLoading = false
+            let rows = vo.grups
+            let kpUse = vo.kpUseGrupUser
+
+            //草稿同步(R-PRINCIPLE-00 原則 7, draftSync.planDraftSync): store(本表或使用者表)變新(推播)時, 無未存編輯 → 重建 items 與基準(同修改前); 有未存編輯 → 保留草稿與其載入時之基準, 不重建;
+            //提示「資料已被更新」只看本表基準(儲存群組只寫群組表; 使用者表之變動只影響顯示用之所屬使用者欄)
+            let act = planDraftSync({
+                first: vo.syncMark.refs === null || vo.syncMark.tick !== vo.syncTick, //首次載入或使用者按了「重新載入」(syncTick 遞增)
+                editChanged: vo.syncMark.editable !== isEditable,
+                storeChanged: refsChanged(vo.syncMark.refs, [rows, kpUse]),
+                hasDraft: () => vo.syncMark.dirty === true,
+                saving: () => vo.saveMark.saving === true, //自己之存檔請求進行中所致之推播 → 'keepQuiet'(不改過期提示)
+            })
+            if (act === 'rebuild') {
+                vo.rebuildDraft(rows, kpUse, isEditable)
+            }
+            else if (act === 'keep') {
+                vo.staleNotice = isDraftStale({ keys: vo.$ds.grups.keys, rows, baseline: vo.syncMark.baseline })
+            }
 
             return ''
         },
@@ -546,44 +635,51 @@ export default {
             return b
         },
 
-        errItemsByName: function() {
+        nameErrs: function() {
             let vo = this
 
-            //rows
-            let rows = get(vo, 'opt.rows', [])
-
-            //kpErr
-            let kpErr = Object.create(null)
-            let kpName = Object.create(null)
-            each(rows, (v, k) => {
-
-                //name
-                let name = get(v, 'name', '')
-
-                //check
-                if (!isestr(name)) {
+            //名稱擋存只針對「本次造成或觸及」者, 庫內既有的歷史同名(僅外部同步可造成)不擋、改為警告圖示(R-PRINCIPLE-00 g, R-NAME-UNIQ-02);
+            //判準與伺服端同一份(findTouchedDup), 基準為 store 之 grups(最近一次由伺服端載入的列, 儲存成功後 store 推播更新, 基準隨之更新)
+            return getNameErrs(get(vo, 'opt.rows', []), vo.baseRows, 'name')
+        },
 
-                    //kpErr
-                    kpErr[name] = vo.$t(`grupNameEmpty`)
+        errItemsByName: function() {
+            let vo = this
 
-                    return true //跳出換下一個
+            //擋存者(空名稱、本次造成或觸及之重複): 既有呈現(橘色名稱＋圖示), 決定 isError;
+            //重複者之一為外部列(from 非空)時, 提示改為「外部來源 X 已使用此名稱」(dupExternal; 外部列由外部擁有, 須改自己之名稱)
+            return mapNameKp(vo.nameErrs.errBlock, (kind, name) => {
+                if (kind === 'dup' && name in vo.nameErrs.dupExternal) {
+                    return fmtVars(vo.$t('nameUsedByExternal'), { name, from: vo.nameErrs.dupExternal[name] })
                 }
+                return vo.$t(kind === 'empty' ? `grupNameEmpty` : `grupNameDuplicate`)
+            })
+        },
 
-                //check
-                if (haskey(kpName, name)) {
-
-                    //kpErr
-                    kpErr[name] = vo.$t(`grupNameDuplicate`)
+        warnItemsByName: function() {
+            let vo = this
 
-                    return true //跳出換下一個
-                }
+            //歷史同名(不擋存, 與 errItemsByName 互斥): 同樣顯示橘色名稱＋圖示, tooltip 說明為既有重複
+            return mapNameKp(vo.nameErrs.warnHist, (n) => {
+                return fmtWarn(vo.$t('warnNameHistDup'), { n })
+            })
+        },
 
-                //kpName
-                kpName[name] = true
+        warnCpemisById: function() {
+            let vo = this
 
+            //cpemis 引用清單之衝突提示(R-PRINCIPLE-00 b、c、d、e、f): 列 id → tooltip 文字, 只含有衝突之列(無衝突之列不入表, 畫面維持原樣);
+            //引用比對的被引用表為 store 之 pemis(權限頁已儲存之列), 判準與伺服端 getUserRules 同一份(findRefRows)
+            let kp = Object.create(null)
+            let rows = get(vo, 'opt.rows', [])
+            each(rows, (r) => {
+                let res = getRefWarns(get(r, 'cpemis', ''), vo.pemis)
+                if (res.hasWarn) {
+                    kp[get(r, 'id', '')] = getRefWarnText(res, (k) => vo.$t(k), 'warnKindPemi')
+                }
             })
 
-            return kpErr
+            return kp
         },
 
         isError: function() {
@@ -651,6 +747,72 @@ export default {
             return head
         },
 
+        lockOfRow: function(row) {
+            let vo = this
+
+            //啟用外部列保護且該列為外部列者回 [{ from }](首欄顯示鎖頭), 否則回空陣列(供 v-for 渲染 0 或 1 個節點: 無外部列時 DOM 同未啟用前, 不留 v-if 之註解節點)
+            if (vo.isLockExternal && isExternalRow(row)) {
+                return [{ from: row.from }]
+            }
+            return []
+        },
+
+        getLockTitle: function(loc) {
+            let vo = this
+
+            return fmtVars(vo.$t('externalRowLocked'), { from: loc.from })
+        },
+
+        getBannerStyle: function(kind) {
+
+            //橫幅樣式沿用既有色票與間距: 與功能區同為 border-top:1px solid #ddd; 字級 0.8rem(同副標題／waitingData)、水平內距 15px(同 waitingData)、垂直內距 5px(同功能區 padding:5px);
+            //外部列提示為中性灰底(#f2f2f2, 同按鈕 hover 底)、文字 #444(同工具鈕圖示色); 外部同步警示為淡橘底(#FFE0B2, 同編輯模式開關之橫條色)搭既有警告圖示; 長來源名稱以 overflow-wrap:anywhere 折行, 窄螢幕不溢出
+            let bg = kind === 'warn' ? '#FFE0B2' : '#f2f2f2'
+            return `padding:5px 15px; border-top:1px solid #ddd; background:${bg}; color:#444; font-size:0.8rem; overflow-wrap:anywhere;`
+        },
+
+        rebuildDraft: function(rows, kpUse, isEditable) {
+            let vo = this
+
+            //grups, kpUseGrupUser
+            let grups = cloneDeep(rows)
+            let kpUseGrupUser = cloneDeep(kpUse)
+
+            //baseline, 與 items 同一處由同一份來源列(grups, genItems 之前)計算: 草稿所依據之版本(F-26), 重建 items 時一併更新, 存檔時不重算
+            let baseline = makeBaseline(grups, vo.$ds.grups.keys)
+
+            //items
+            let items = vo.genItems(grups, kpUseGrupUser)
+
+            //save; 重建即放棄未存編輯(isModified 歸零)與過期提示, syncMark 記下本次所依據之 store 參照與編輯模式
+            vo.items = items
+            vo.baseline = baseline
+            vo.baseRows = rows
+            vo.isModified = false
+            vo.staleNotice = false
+            vo.syncMark = { refs: [rows, kpUse], editable: isEditable, dirty: false, baseline, tick: vo.syncTick }
+
+            //genOpt
+            vo.genOpt({ isEditable })
+
+            //firstLoading
+            vo.firstLoading = false
+
+        },
+
+        curRefs: function() {
+            //目前各來源 store 之參照(與 changeParams 之 refsChanged 同一組)
+            let vo = this
+            return [vo.grups, vo.kpUseGrupUser]
+        },
+
+        reloadDraft: function() {
+            //「重新載入」鈕(資料已被更新橫幅): 使用者明確放棄未存編輯, 以目前 store 重建草稿與基準. 不在此直接呼叫 rebuildDraft: 遞增 syncTick 使 changeParams 重算並於 computed 內重建,
+            //genOpt 之反應式依賴(語系等)才會重新收集(保留草稿期間 changeParams 未呼叫 genOpt, 依賴已收縮; 於 computed 外重建不會恢復, 重新載入後再切換語系表頭將停留舊值, 外審 sol 第 4 點)
+            let vo = this
+            vo.syncTick++
+        },
+
         genOpt: function() {
             // console.log('methods genOpt')
 
@@ -675,10 +837,13 @@ export default {
                 let kpRowDrag = {}
                 let kpHeadCheckBox = {}
                 if (vo.isEditable) {
+
+                    //外部列(from 非空)之身分／結構欄逐列唯讀(啟用保護時以函數判定: w-aggrid-vue 之 setobj 原樣取 kpCellEditable[key] 指給 ag-grid colDef.editable, 其接受 (params) => boolean);
+                    //指派欄(cpemis)走開窗按鈕, 不受影響; from 欄於所有列皆唯讀(外部同步所擁有, 後台新增列 from 恆為空)
+                    let editable = vo.isLockExternal ? (params) => !isExternalRow(params.data) : true
                     kpCellEditable = {
-                        'name': true,
-                        'description': true,
-                        'from': true,
+                        'name': editable,
+                        'description': editable,
                     }
                     kpRowDrag = {
                         'name': true,
@@ -754,7 +919,7 @@ export default {
                         // console.log('rowsChange cloneDeep(vo.opt.rows)', cloneDeep(vo.opt.rows))
 
                         //check
-                        if (!vo.syncState || vo.firstLoading || vo.firstSetting || vo.systemProcing) {
+                        if (!vo.syncState || vo.firstLoading || vo.firstSetting || vo.systemProcing || vo.postSaving) {
                             return
                         }
 
@@ -940,6 +1105,7 @@ export default {
             let nameOld = r.name
             let _r = vo.$ds.grups.funNew()
             r.id = _r.id //使用新建方式預先產生id避免重複
+            r.from = '' //複製出之列為後台新增列, 不繼承來源(來源非空即外部列, 後台新增列 from 須為空, 否則伺服端 saveFromNotAllowed; 不論是否啟用外部列保護)
             r.name = vo.$s.getNameNew(rows, 'name', nameOld, vo.$t('grupCopyNameNew'))
             r.userId = `{${vo.$t('grupAddIdNew')}}`
             r.timeCreate = `{${vo.$t('grupAddIdNew')}}`
@@ -985,34 +1151,94 @@ export default {
                 return
             }
 
-            //cloneDeep
-            let rows = get(vo, 'opt.rows', [])
+            //外部列保護(啟用時): 外部列(from 非空)不得刪除(伺服端 saveExternalRowChanged), 先過濾掉並以 showCheckYes 提示被略過之筆數(警告, 非 success), 使用者按確定後其餘照常(含既有刪除確認框);
+            //全為外部列則不刪除任何列, 亦不進入刪除流程(不會出現空的確認框); 提示框與刪除確認框依序而非並存
+            let sp = splitCheckedRows(vo.itemsCheck, vo.isLockExternal)
+            if (sp.nBlocked > 0) {
+                vo.$dg.showCheckYes(fmtVars(vo.$t('externalRowDelBlocked'), { n: sp.nBlocked }), { type: 'warning' })
+                    .then(() => {
+                        if (size(sp.rows) > 0) {
+                            vo.deleteItems(sp.rows)
+                        }
+                    })
+                return
+            }
 
-            //cloneDeep
-            rows = cloneDeep(rows)
+            vo.deleteItems(sp.rows)
 
-            //filter
-            each(vo.itemsCheck, (v) => {
+        },
+
+        deleteItems: function(itemsDel) {
+            // console.log('method deleteItems')
+
+            let vo = this
+
+            //delIds
+            let delIds = []
+            each(itemsDel, (v) => {
                 // console.log('v', v)
                 let id = get(v, 'data.id', '')
                 if (!isestr(id)) {
                     console.log(`invalid id`)
                     return true //跳出換下一個
                 }
-                rows = filter(rows, (vv) => {
-                    return vv.id !== id
-                })
+                delIds.push(id)
             })
 
-            //clear
-            vo.itemsCheck = []
+            //getRowsRemain, 由「現在」之 opt.rows 剔除被刪之列(確認框開啟期間 store 推播可能重建 opt.rows, 故確認後再算一次)
+            let getRowsRemain = () => {
+                let rows = get(vo, 'opt.rows', [])
 
-            //save
-            vo.opt.rows = rows
-            // console.log('deleteItemsCheck cloneDeep(vo.opt.rows)', cloneDeep(vo.opt.rows))
+                //cloneDeep
+                rows = cloneDeep(rows)
 
-            //isModified
-            vo.isModified = true
+                //filter
+                each(delIds, (id) => {
+                    rows = filter(rows, (vv) => {
+                        return vv.id !== id
+                    })
+                })
+
+                return rows
+            }
+
+            //doDelete
+            let doDelete = () => {
+
+                //rows
+                let rows = getRowsRemain()
+
+                //clear
+                vo.itemsCheck = []
+
+                //save
+                vo.opt.rows = rows
+                // console.log('deleteItemsCheck cloneDeep(vo.opt.rows)', cloneDeep(vo.opt.rows))
+
+                //isModified
+                vo.isModified = true
+
+            }
+
+            //impact, 對使用者(引用端)之影響, 刪除前須提示(單一框): nRefs 為儲存時將被連帶清理(自其 cgrups 移除對被刪群組之引用)之使用者數(任何 mode、含停用項目;
+            //與伺服端同一純函數 planRefChanges, 只算本次刪除, ADR-036、R-REF-CASCADE-01), nAnd 為其中以 AND 引用且刪除後查無該群組者(引用被移除後其限制解除, 授權可能變多, R-PRINCIPLE-00 c),
+            //nWiden 為引用的群組名稱有多筆同名而只刪其一之使用者數(各候選之交集變寬, 授權可能變多, R-PRINCIPLE-00 d);
+            //被刪名稱只取基準(store 之 grups, 已儲存)列中存在者: 尚未儲存的新增列刪除不影響他人
+            let impact = getDelImpact(delIds, vo.baseRows, vo.users, 'Grup', getRowsRemain())
+            let confirmText = getDelConfirmText(impact, (k) => vo.$t(k), 'Grup')
+
+            //無影響他人之授權時維持現行流程(直接刪除, 不彈框)
+            if (confirmText === '') {
+                doDelete()
+                return
+            }
+
+            //有影響: 確認框(單一框, 多種影響併入同一框); 使用者取消(No)則不刪除
+            vo.$dg.showCheckYesNo(confirmText)
+                .then(() => {
+                    doDelete()
+                })
+                .catch(() => {})
 
         },
 
@@ -1048,7 +1274,7 @@ export default {
             let kpPemi = {}
             try {
                 // console.log('cpemis', cpemis)
-                kpPemi = JSON5.parse(cpemis)
+                kpPemi = cvKpToObj(JSON5.parse(cpemis), { hasMode: true }) //陣列形式經共用解碼(R-AUTH-LIST-01)
             }
             catch (err) {}
             // console.log('kpPemi', kpPemi)
@@ -1150,11 +1376,9 @@ export default {
 
             //find
             let r = null
-            let kr = null
-            each(rows, (v, k) => {
+            each(rows, (v) => {
                 if (get(v, 'id', '') === id) {
                     r = v
-                    kr = k
                     return false //跳出
                 }
             })
@@ -1165,6 +1389,10 @@ export default {
                 return
             }
 
+            //baseline0: 開啟編輯器當下之載入基準(整表, F-26、原則 7 表級比對, 外審 sol R1 與 run11 第 1 點): 編輯器開著時若他人／外部同步改了任何一列或增刪列, 而父頁當時無未存編輯, 推播會重建 items 與基準,
+            //編輯器回傳之字串仍是舊版內容, 回填後存檔會以「新基準」證明過期內容新鮮(還原已被撤銷之授權, 或繞過同表別列已被改動之整表比對); 故回填前比對「草稿現所依據之那份表」與開框時之基準, 有異即放棄回填並提示重新載入.
+            //父頁已有未存編輯時推播只保留草稿與其基準(baseRows 不變), 此比對不誤擋, 存檔時由伺服端表級比對拒收
+            let baseline0 = cloneDeep(vo.baseline)
             //showVeCpemis
             vo.$dg.showVeCpemis({
                 isEditable: vo.isEditable,
@@ -1173,9 +1401,28 @@ export default {
                 .then((cpemis) => {
                     // console.log('cpemis', cpemis)
 
+                    //以 id 於「現在」之 opt.rows 重新找列(R-REL-PAIR-01): 對話框開啟期間 store 更新會重建 opt.rows(他人增刪、改 order), 開框時之列索引可能已指向另一列; 該列已不存在則提示並放棄回填
+                    let krNow = -1
+                    each(get(vo, 'opt.rows', []), (v, k) => {
+                        if (get(v, 'id', '') === id) {
+                            krNow = k
+                            return false //跳出
+                        }
+                    })
+                    if (krNow < 0) {
+                        vo.$alert(`${vo.$t('grupEditBlngNoGrupData')}`, { type: 'error' })
+                        return
+                    }
+
+                    //草稿所依據之表於編輯器開啟後已被改動(整表指紋與開框時之基準不同; 僅 order／伺服器管理欄不同不算): 放棄回填並提示重新載入(同伺服端 saveStale 之語意)
+                    if (isDraftStale({ keys: vo.$ds.grups.keys, rows: vo.baseRows, baseline: baseline0 })) {
+                        vo.$alert(`${vo.$t('saveStale')}`, { type: 'warning' })
+                        return
+                    }
+
                     //set
-                    set(vo, `opt.rows[${kr}].cpemis`, cpemis)
-                    // console.log('vo.opt.rows[kr]', cloneDeep(vo.opt.rows[kr]))
+                    set(vo, `opt.rows[${krNow}].cpemis`, cpemis)
+                    // console.log('vo.opt.rows[krNow]', cloneDeep(vo.opt.rows[krNow]))
 
                     //refresh
                     vo.refresh()
@@ -1210,8 +1457,9 @@ export default {
                     return
                 }
 
-                //rows
+                //rows, baseline: 與 rows 同一刻(同步)擷取——兩者於 changeParams 同一處同時產生, 之後確認框期間若推播重建清單, 仍帶「草稿所依據之那一版」之基準(F-26), 不由最新 store 重算
                 let rows = get(vo, 'opt.rows', [])
+                let baseline = cloneDeep(vo.baseline)
 
                 //check
                 if (size(rows) === 0) {
@@ -1220,28 +1468,85 @@ export default {
                     return
                 }
 
+                //外部列保護(啟用時): 外部列之身分／結構欄以逐列唯讀與刪除過濾擋下, 但貼上(Ctrl+V)等路徑可繞過逐列唯讀, 送出前再比對一次(基準為 store 之 grups);
+                //有違規即不送出並提示(伺服端同樣整次拒收 saveExternalRowChanged); 於開 loading 之前, 訊息框前釋放按鈕鎖
+                if (vo.isLockExternal && getExternalEdits({ keyTable: 'grups', keys: vo.$ds.grups.keys, rowsNew: rows, rowsOld: vo.baseRows }) !== null) {
+                    unlockBtn()
+                    await vo.$dg.showCheckYes(vo.$t('saveExternalRowChanged'), { type: 'warning' })
+                    return
+                }
+
                 //新增列之 transient 欄位 _isNew(addItem / copyItem 標記)隨列送後端: 後端據以拒絕「標為新增但 id 已存在」之列
                 //(同一包重送時不把剛建立之列當修改覆寫, 回 saveNewRowExists), 檢查後由 ltdtmapping 依 schema 取欄時剝除不入庫 (ADR-025)
 
-                //2) 確定打 API 才開 loading
+                //2) 引用連帶預覽(ADR-036、R-REF-CASCADE-01; 與伺服端同一純函數 planRefChanges, 基準為 store 之 grups／users, 筆數以伺服端實際為準): 群組改名時引用它之使用者 cgrups 於同一次寫入內連帶改名,
+                //有引用端將被更新時先確認(確認框文字與成功訊息之判定見 src/js/getCascadePreview.mjs); plan.err 非 null(新名撞懸空名等)不彈框、照常送出, 伺服端以固定語系鍵拒存並由下方 showCheckYes 顯示
+                let pv = getSavePreview({ kind: 'Grup', rowsOld: vo.baseRows, rowsNew: rows, holdersOld: vo.users, cascadeRename: get(vo, 'webInfor.cascadeRename', true), $t: (k) => vo.$t(k) })
+
+                //新增撞懸空名(F-23／F-26 原則 7; src/js/getAddImpact.mjs): 本次新增之群組名稱查無既有同名實體, 而仍有啟用中之使用者 cgrups 引用該名稱——新增後即解到新群組而取得或受其限制,
+                //須明確同意才送出; 與改名預覽同於開 loading 之前同步計算(基準為 store 之 grups／users), 無懸空引用時不彈框; 與改名確認框依序(先改名預覽、再新增確認), 各自只在需要時彈出
+                let addText = getAddConfirmText(getAddImpact({ keyTable: 'grups', rowsOld: vo.baseRows, rowsNew: rows, holders: vo.users }), (k) => vo.$t(k), 'Grup')
+
+                if (pv.confirmText !== '') {
+
+                    //先開確認框之流程: 開框前 unlockBtn() 釋放儲存鈕之 promiseUnlock 鎖(同上, 按鈕鎖只涵蓋請求期間); 流程狀態仍由 runSubmit 保持至本流程結束,
+                    //確認框與後續請求期間之重入(焦點仍在儲存鈕時 Enter)皆被略過 (ADR-025)
+                    unlockBtn()
+                    let isGo = await vo.$dg.showCheckYesNo(pv.confirmText)
+                        .then(() => true)
+                        .catch(() => false)
+
+                    //選否(或確認框被取代而視同選否): 中止儲存, 不送出; 尚未開 loading, 資料與 isModified 保留, 由 runSubmit 於回傳後結束流程
+                    if (!isGo) {
+                        return
+                    }
+
+                }
+
+                //新增撞懸空名之確認(同上之鎖釋放與選否中止; 單一框、單一問句)
+                if (addText !== '') {
+                    unlockBtn()
+                    let isGoAdd = await vo.$dg.showCheckYesNo(addText)
+                        .then(() => true)
+                        .catch(() => false)
+                    if (!isGoAdd) {
+                        return
+                    }
+                }
+
+                //3) 確定打 API 才開 loading
                 vo.$ui.updateLoading(true)
 
-                //3) updateGrups, 各自 catch + 旗標短路
+                //4) updateGrups, 各自 catch + 旗標短路; 第 2 參 { baseline } 為載入基準(伺服端於表鎖內比對本次將寫入之列是否仍與草稿所依據之版本相同, 否則整次拒收 saveStale)
                 let okSave = false
-                await vo.$fapi.updateGrups(rows)
-                    .then(() => { okSave = true })
+                vo.saveMark.saving = true //自己之存檔請求進行中: 此期間之推播不是他人更新(changeParams 的 planDraftSync 回 'keepQuiet'); 回應(成功或失敗)一到即歸零
+                await vo.$fapi.updateGrups(rows, { baseline })
+                    .then(() => {
+                        okSave = true
+                        vo.saveMark.saving = false
+                    })
                     .catch(async (err) => {
+                        vo.saveMark.saving = false
+                        vo.staleNotice = isDraftStale({ keys: vo.$ds.grups.keys, rows: vo.grups, baseline: vo.syncMark.baseline }) //失敗(含 saveStale 被拒): 請求進行中被安靜保留之推播, 此時依目前 store 重算過期提示(同 changeParams 之保留分支)
                         vo.$ui.updateLoading(false) //showCheckYes 前關 loading（modal 阻斷期間避免 loading 疊在底下）
                         await vo.$dg.showCheckYes(`${vo.$t('grupSaveGrupsFail')}: ${vo.$tErr(err)}`)
                     })
                 if (!okSave) return
 
-                //isModified
+                //isModified; postSaving 自此至成功訊息框關閉後 300ms 內排除 rowsChange(見 data 註解)
+                vo.postSaving = true
                 vo.isModified = false
 
                 //alert（showCheckYes 前關 loading，避免 modal 等待期間 loading 疊在底下）
                 vo.$ui.updateLoading(false)
-                await vo.$dg.showCheckYes(vo.$t('grupSaveGrupsSuccess'), { type: 'success' })
+                try {
+                    await vo.$dg.showCheckYes(pv.successText !== '' ? pv.successText : vo.$t('grupSaveGrupsSuccess'), { type: 'success' }) //只有改名且有使用者之引用被連帶更新才附筆數(刪除所致之清理不改, 已於刪除確認框告知), 否則維持原成功訊息
+                }
+                finally {
+                    setTimeout(() => {
+                        vo.postSaving = false
+                    }, 300)
+                }
 
             }
 
@@ -1254,6 +1559,9 @@ export default {
                     })
                     .finally(() => {
 
+                        //非預期例外時亦歸零, 避免之後之推播永遠被當成自己存檔所致
+                        vo.saveMark.saving = false
+
                         //hide loading
                         vo.$ui.updateLoading(false)
 
@@ -1267,4 +1575,18 @@ export default {
 </script>
 
 <style scoped>
+/* 「資料已被更新」橫幅之重新載入鈕: 底色 #fff(同工具鈕底)、hover #f2f2f2(同工具鈕 hover)、邊線 #ddd(同橫幅邊線)、文字 #444(同橫幅文字), 與橫幅同字級 */
+.staleReloadBtn {
+    margin-left: 8px;
+    padding: 1px 10px;
+    font-size: 0.8rem;
+    color: #444;
+    background: #fff;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    cursor: pointer;
+}
+.staleReloadBtn:hover {
+    background: #f2f2f2;
+}
 </style>