w-web-perm 1.0.78 → 1.0.80

package/src/components/LayoutContentUsers.vue

@@ -113,7 +113,7 @@
 
                 </template>
 
-                <template v-if="isEditable">
+                <template v-if="isEditableIdentity">
 
                     <WButtonCircle
                         :paddingStyle="{v:6,h:6}"
@@ -133,7 +133,7 @@
 
                 </template>
 
-                <template v-if="isEditable && hasItemCheckOne">
+                <template v-if="isEditableIdentity && hasItemCheckOne">
 
                     <WButtonCircle
                         :paddingStyle="{v:6,h:6}"
@@ -153,7 +153,7 @@
 
                 </template>
 
-                <template v-if="isEditable && hasItemsCheck">
+                <template v-if="isEditableIdentity && hasItemsCheck">
 
                     <WButtonCircle
                         :paddingStyle="{v:6,h:6}"
@@ -229,8 +229,8 @@
                                 <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" />
+                        <input v-else-if="props.key==='isAdmin'" type="checkbox" :checked="props.value === 'y'" @click="toggleItemIsAdminById(props.row.id)" :disabled="!isEditableIdentity" />
+                        <input v-else-if="props.key==='isActive'" type="checkbox" :checked="props.value === 'y'" @click="toggleItemIsActiveById(props.row.id)" :disabled="!isEditableIdentity" />
                         <span v-else>{{ props.value }}</span>
                     </template>
                 </WAggridVue>
@@ -305,8 +305,10 @@ export default {
 
             firstLoading: true,
             firstSetting: true,
+            systemProcing: false, //程式端載入/重載清單資料期間為 true, 用於排除非使用者操作之 rowsChange (見 $ui.markDataReload)
             showIsEditable: false,
             isEditable: false,
+            modeEditUsers: '', //settings.modeEditUsers 原值: 'y' 全可編 / 'n' 全唯讀 / 'for:grups' 僅可編使用者所屬群組(身分欄與新增複製刪除鎖定)
             isModified: false,
 
             tabKeys: [
@@ -377,7 +379,8 @@ export default {
             let showModeEditUsers = get(vo, 'webInfor.showModeEditUsers', '')
             vo.showIsEditable = showModeEditUsers === 'y'
             let modeEditUsers = get(vo, 'webInfor.modeEditUsers', '')
-            vo.isEditable = modeEditUsers === 'y'
+            vo.modeEditUsers = modeEditUsers
+            vo.isEditable = modeEditUsers === 'y' || modeEditUsers === 'for:grups' //for:grups 仍進編輯模式, 但身分欄位由 isEditableIdentity 鎖定
 
             vo.widthUsersName = get(vo, 'webInfor.widthUsersName', '')
             vo.widthUsersEmail = get(vo, 'webInfor.widthUsersEmail', '')
@@ -394,6 +397,13 @@ export default {
     },
     computed: {
 
+        //isEditableIdentity, 使用者身分(name/email/description/from/isAdmin/isActive/排序)與新增複製刪除是否可編;
+        //modeEditUsers='for:grups'(使用者來自外部單一登入系統之部署, 身分由該系統同步)時鎖定, 僅群組指派(VeCgrups)依 isEditable
+        isEditableIdentity: function() {
+            let vo = this
+            return vo.isEditable && vo.modeEditUsers !== 'for:grups'
+        },
+
         syncState: function() {
             let vo = this
             return get(vo, '$store.state.syncState')
@@ -664,7 +674,7 @@ export default {
                 let kpCellEditable = {}
                 let kpRowDrag = {}
                 let kpHeadCheckBox = {}
-                if (vo.isEditable) {
+                if (vo.isEditableIdentity) { //身分欄位編輯/拖曳排序/列勾選(供複製刪除)皆屬身分編修, for:grups 時鎖定
                     kpCellEditable = {
                         'name': true,
                         'email': true,
@@ -746,7 +756,7 @@ export default {
                         // console.log('rowsChange cloneDeep(vo.opt.rows)', cloneDeep(vo.opt.rows))
 
                         //check
-                        if (!vo.syncState || vo.firstLoading || vo.firstSetting) {
+                        if (!vo.syncState || vo.firstLoading || vo.firstSetting || vo.systemProcing) {
                             return
                         }
 
@@ -767,6 +777,9 @@ export default {
 
             }
 
+            //markDataReload, 重建 opt 屬程式端寫入, 其後非同步觸發之 rowsChange 不得視為使用者變更
+            vo.$ui.markDataReload(vo)
+
             //save
             vo.opt = opt
 

package/src/components/VeCgrups.vue

@@ -374,9 +374,9 @@ export default {
 
                 //kpHead
                 let kpHead = {
-                    'name': vo.$t('pemiName'),
-                    'mode': vo.$t('operGrupEnable'),
-                    'enable': vo.$t('operMode'),
+                    'name': vo.$t('grupName'), //本對話框列出的是權限群組（items 由 vo.grups 產生）
+                    'mode': vo.$t('operGrupMode'),
+                    'enable': vo.$t('operEnable'),
                 }
 
                 //opt

package/src/components/VeCpemis.vue

@@ -375,8 +375,8 @@ export default {
                 //kpHead
                 let kpHead = {
                     'name': vo.$t('pemiName'),
-                    'mode': vo.$t('operPemiEnable'),
-                    'enable': vo.$t('operMode'),
+                    'mode': vo.$t('operPemiMode'),
+                    'enable': vo.$t('operEnable'),
                 }
 
                 //opt

package/src/components/VeGrupBlngUsers.vue

@@ -412,8 +412,8 @@ export default {
                 let kpHead = {
                     'name': vo.$t('userName'),
                     'grupsNames': vo.$t('belongGrupsNames'),
-                    'mode': vo.$t('operGrupEnable'),
-                    'enable': vo.$t('operMode'),
+                    'mode': vo.$t('operGrupMode'),
+                    'enable': vo.$t('operEnable'),
                 }
 
                 //opt

package/src/components/VePemiBlngGrups.vue

@@ -412,8 +412,8 @@ export default {
                 let kpHead = {
                     'name': vo.$t('grupName'),
                     'pemisNames': vo.$t('belongPemisNames'),
-                    'mode': vo.$t('operPemiEnable'),
-                    'enable': vo.$t('operMode'),
+                    'mode': vo.$t('operPemiMode'),
+                    'enable': vo.$t('operEnable'),
                 }
 
                 //opt

package/src/fetchJson.mjs

@@ -0,0 +1,41 @@
+/**
+ * 以瀏覽器與 node(18+) 內建之 fetch 取得 JSON 回應, 取代 axios(2026-09-07 起本套件不再依賴 axios)
+ *
+ * 與 axios 之語意對齊:
+ *   - 網路錯誤或非 2xx: axios 會 reject, fetch 只在網路錯誤 reject, 故此處對 !res.ok 亦 reject, 統一為 { kind: 'request', status, message }
+ *   - 回應非 JSON: axios 回原字串(呼叫端判 state 失敗), 此處 res.json() 失敗 reject { kind: 'parse', status, message }
+ *   - 成功: resolve 解析後之 JSON(對應 axios 之 res.data)
+ * 注意: node 端 fetch(undici) 不讀 HTTP_PROXY / HTTPS_PROXY 環境變數(axios 會), 需走 proxy 之部署須自行以 opt.dispatcher 注入 undici Agent
+ *
+ * @param {String} url 輸入請求網址字串
+ * @param {Object} [opt={}] 輸入 fetch 選項物件(method / headers / body / signal / dispatcher 等原樣傳給 fetch), 預設 {}
+ * @returns {Promise} 回傳 Promise, resolve 為 JSON 物件, reject 為 { kind: 'request'|'parse', status, message }
+ */
+async function fetchJson(url, opt = {}) {
+
+    //fetch
+    let res = null
+    try {
+        res = await fetch(url, opt)
+    }
+    catch (err) {
+        return Promise.reject({ kind: 'request', status: 0, message: String((err && err.message) || err) })
+    }
+
+    //check status
+    if (!res.ok) {
+        return Promise.reject({ kind: 'request', status: res.status, message: `HTTP ${res.status}` })
+    }
+
+    //json
+    try {
+        return await res.json()
+    }
+    catch (err) {
+        return Promise.reject({ kind: 'parse', status: res.status, message: String((err && err.message) || err) })
+    }
+
+}
+
+
+export default fetchJson

package/src/getPerm.mjs

@@ -1,9 +1,9 @@
-import axios from 'axios'
 import get from 'lodash-es/get.js'
 import isestr from 'wsemi/src/isestr.mjs'
 import iseobj from 'wsemi/src/iseobj.mjs'
 import isfun from 'wsemi/src/isfun.mjs'
 import ispm from 'wsemi/src/ispm.mjs'
+import fetchJson from './fetchJson.mjs'
 
 
 async function getPerm(url, tokenTar, opt = {}) {
@@ -28,20 +28,20 @@ async function getPerm(url, tokenTar, opt = {}) {
     url = url.replaceAll('{token}', tokenTar)
     // console.log('getPerm: url', url)
 
-    //get
-    let res = await axios.get(url)
+    //get, 內建 fetch(不依賴 axios); 網路錯誤或非 2xx → cannotGetUserByUrl, 回應非 JSON → cannotGetUserDataByUrl(對齊 axios 時期語意)
+    let data = await fetchJson(url)
         .catch((err) => {
-            errTemp = err.toString()
+            errTemp = err
         })
 
     //check
     if (errTemp !== null) {
+        if (get(errTemp, 'kind') === 'parse') {
+            return Promise.reject('cannotGetUserDataByUrl') //取得使用者資訊失敗
+        }
         return Promise.reject('cannotGetUserByUrl') //由SSO取得使用者資訊錯誤
     }
 
-    //data
-    let data = get(res, 'data')
-
     //state
     let state = get(data, 'state', '')
 

package/src/getPermUserInfor.mjs

@@ -1,9 +1,9 @@
-import axios from 'axios'
 import get from 'lodash-es/get.js'
 import isestr from 'wsemi/src/isestr.mjs'
 import iseobj from 'wsemi/src/iseobj.mjs'
 import isfun from 'wsemi/src/isfun.mjs'
 import ispm from 'wsemi/src/ispm.mjs'
+import fetchJson from './fetchJson.mjs'
 
 
 async function getPermUserInfor(url, tokenSelf, userIdTar, opt = {}) {
@@ -32,20 +32,20 @@ async function getPermUserInfor(url, tokenSelf, userIdTar, opt = {}) {
     url = url.replaceAll('{userId}', userIdTar)
     // console.log('getPermUserInfor: url', url)
 
-    //get
-    let res = await axios.get(url)
+    //get, 內建 fetch(不依賴 axios); 網路錯誤或非 2xx → cannotGetUserByUrl, 回應非 JSON → cannotGetUserDataByUrl(對齊 axios 時期語意)
+    let data = await fetchJson(url)
         .catch((err) => {
-            errTemp = err.toString()
+            errTemp = err
         })
 
     //check
     if (errTemp !== null) {
+        if (get(errTemp, 'kind') === 'parse') {
+            return Promise.reject('cannotGetUserDataByUrl') //取得使用者資訊失敗
+        }
         return Promise.reject('cannotGetUserByUrl') //由SSO取得使用者資訊錯誤
     }
 
-    //data
-    let data = get(res, 'data')
-
     //state
     let state = get(data, 'state', '')
 

package/src/main.js

@@ -37,7 +37,7 @@ Vue.directive('domresize', domResize())
 //WServHapiClient
 // let bFirstSync = false //不需要bFirstSync, 由getWebInfor結束代表第1次完成同步
 WServHapiClient({
-    showLog: false,
+    useShowLog: false,
     url: window.location.origin + window.location.pathname,
     useWaitToken: true,
     apiName: 'api',

package/src/perm.mjs

@@ -1,10 +1,10 @@
-import axios from 'axios'
 import get from 'lodash-es/get.js'
 import each from 'lodash-es/each.js'
 import isestr from 'wsemi/src/isestr.mjs'
 import isfun from 'wsemi/src/isfun.mjs'
 import genPm from 'wsemi/src/genPm.mjs'
 import pmInvResolve from 'wsemi/src/pmInvResolve.mjs'
+import fetchJson from './fetchJson.mjs'
 
 
 function perm() {
@@ -38,9 +38,10 @@ function perm() {
         //pm
         let pm = genPm()
 
-        //get
-        let pms = axios.get(url)
-        pms = pmInvResolve(pms, { thenExtractData: true })
+        //get, 內建 fetch(不依賴 axios): fetchJson 直接 resolve JSON envelope, 故 pmInvResolve 不再需 thenExtractData(原為取 axios res.data)
+        //失敗時 permError / reject 收到 { kind: 'request'|'parse', status, message }(原為 AxiosError), 或後端 envelope 之 msg
+        let pms = fetchJson(url)
+        pms = pmInvResolve(pms)
         pms
             .then((res) => {
                 // console.log('perm.getPerm then', res)

package/src/plugins/mUI.mjs

@@ -240,10 +240,27 @@ function getIcon(icon) {
 }
 
 
+//markDataReload, 標記接下來由程式端資料載入/重載(初始載入、store 推播、isEditable/語系切換等 genOpt 重建 opt)所觸發之 rowsChange 非使用者變更
+//why: WTable 之 rowsChange 於 Vue 更新 + aggrid 渲染後才非同步觸發, 早於此之 firstLoading/firstSetting 旗標於觸發當下可能已失效
+//(儲存成功後伺服器推播更新列 → changeParams 重算 → genOpt 重建 opt → rowsChange 再把 isModified 設回 true, 儲存鈕殘留即為此例),
+//故須於寫入資料當下標記, 待渲染完成後解除. 對齊 w-web-sso LayoutContentUsers.vue 之 markDataReload.
+//用法: 元件 data() 宣告 systemProcing:false; genOpt 內於 vo.opt = opt 前呼叫 vo.$ui.markDataReload(vo); rowsChange 守門加 vo.systemProcing.
+function markDataReload(vm) {
+    vm.systemProcing = true
+    vm.$nextTick(() => {
+        setTimeout(() => {
+            vm.systemProcing = false
+        }, 1)
+    })
+}
+
+
 let mUI = {
 
     setVo,
 
+    markDataReload,
+
     updateConnState,
     updateLoading,
     // updateViewState,

package/srv.mjs

@@ -47,6 +47,14 @@ let getUserByToken = async (token) => {
             isAdmin: 'y',
         }
     }
+    if (token === '{token-for-peter}') { //測試用: 在 perm users 表內、有效、但非系統管理者之瀏覽使用者(供 api 測試驗證 verifyClientUser 對資料通道亦生效)
+        return {
+            id: 'id-for-peter',
+            name: 'peter',
+            email: 'peter@example.com',
+            isAdmin: 'n',
+        }
+    }
     console.log('invalid token', token)
     return {}
 }

package/tableTags-web-perm.json

@@ -0,0 +1 @@
+{"grups":"2026-09-12T23:25:31+08:00|zKEYPI","pemis":"2026-09-12T23:25:31+08:00|Q4YLum","targets":"2026-09-12T23:25:31+08:00|5JMz80","users":"2026-09-12T23:25:31+08:00|wz6Q7h"}